:root { --ink:#25231f; --paper:#f5efe8; --red:#e65343; --pink:#e9a6a4; --gold:#d9a646; --muted:#777168; --line:#d9d0c6; --white:#fffaf4; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; display:flex; flex-direction:column; }
button,input { font:inherit; }
button { color:inherit; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); }
.topbar { height:78px; display:flex; justify-content:space-between; align-items:center; width:min(1180px,calc(100% - 40px)); margin:auto; border-bottom:1px solid var(--line); }
.brand,.icon-button,.back-button { border:0; background:none; cursor:pointer; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:-.02em; font-size:16px; padding:0; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--paper); font-family:"Playfair Display"; font-style:italic; }
.icon-button { display:flex; gap:9px; align-items:center; color:var(--muted); font-size:14px; }
.top-actions { display:flex; align-items:center; gap:18px; }
.account-button { border:1px solid var(--ink); background:transparent; padding:9px 14px; cursor:pointer; font-size:13px; }
.party-button { border:0; background:var(--red); color:white; padding:10px 14px; cursor:pointer; font-size:13px; font-weight:700; }
main { width:100%; flex:1; display:grid; }
.view { width:min(1180px,calc(100% - 40px)); margin:auto; animation:appear .45s ease both; padding:48px 0 64px; }
.narrow { width:min(680px,calc(100% - 40px)); }
@keyframes appear { from { opacity:0; transform:translateY(10px); } }
.welcome { text-align:center; display:flex; flex-direction:column; align-items:center; padding-top:8vh; }
.eyebrow,.step-label { font-size:11px; letter-spacing:.18em; font-weight:700; color:var(--red); }
.eyebrow { display:flex; gap:10px; align-items:center; }
.eyebrow span { width:28px; height:1px; background:var(--red); }
h1,h2 { font-family:"Playfair Display",serif; margin:0; line-height:.98; letter-spacing:-.045em; }
h1 { font-size:clamp(64px,8.2vw,118px); margin-top:25px; }
h1 em { color:var(--red); font-weight:600; }
h2 { font-size:clamp(44px,6vw,72px); margin:16px 0 20px; }
.intro { max-width:540px; font-size:17px; line-height:1.65; color:var(--muted); margin:28px 0; }
.primary-button { border:0; border-radius:2px; background:var(--ink); color:white; padding:16px 22px; min-width:200px; cursor:pointer; display:inline-flex; justify-content:space-between; gap:40px; font-weight:600; box-shadow:5px 5px 0 var(--red); transition:.2s; }
.primary-button:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--red); }
.primary-button:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.primary-button.full { width:100%; margin-top:24px; }
.choice-preview { display:flex; margin-top:56px; gap:50px; }
.choice-preview div { display:flex; flex-direction:column; gap:8px; align-items:center; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.preview-icon { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:"Playfair Display"; font-style:italic; font-size:20px; }
.snog { background:var(--red); } .marry { background:var(--gold); } .avoid { background:var(--ink); }
footer { width:min(1180px,calc(100% - 40px)); margin:auto; border-top:1px solid var(--line); min-height:64px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; }
.back-button { padding:0 0 24px; color:var(--muted); }
.setup>p,.history>p { color:var(--muted); line-height:1.6; }
.preference-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px; }
.preference-card { border:1px solid var(--line); background:rgba(255,255,255,.3); padding:22px; text-align:left; cursor:pointer; display:grid; grid-template-columns:46px 1fr; grid-template-rows:1fr 1fr; column-gap:15px; transition:.2s; }
.preference-card:hover,.preference-card.selected { border-color:var(--red); background:var(--white); }
.preference-card.selected { box-shadow:inset 4px 0 var(--red); }
.pref-symbol { grid-row:1/3; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#e9e0d6; font-size:22px; }
.preference-card strong { align-self:end; }
.preference-card small { color:var(--muted); }
.custom-field { margin-top:18px; }
.custom-field label { display:block; font-size:12px; font-weight:700; margin-bottom:7px; }
.custom-field input { width:100%; padding:14px; border:1px solid var(--line); background:var(--white); outline:none; }
.custom-field input:focus { border-color:var(--red); }
.game-heading { display:flex; justify-content:space-between; align-items:flex-end; }
.game-heading h2 { margin-bottom:0; }
.preference-pill { border:1px solid var(--line); border-radius:30px; background:transparent; padding:10px 15px; cursor:pointer; color:var(--muted); }
.game-hint { color:var(--muted); }
.people-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0; }
.person-card { border:1px solid var(--line); background:rgba(255,255,255,.28); overflow:hidden; }
.portrait { aspect-ratio:1/1; position:relative; overflow:hidden; background-image:linear-gradient(0deg,rgba(20,17,14,.15),transparent 45%),url("assets/fictional-character-atlas.png"); background-size:300% 300%; background-position:var(--x) var(--y); }
.portrait::after { content:attr(data-medium); position:absolute; left:12px; bottom:12px; padding:6px 9px; background:rgba(245,239,232,.9); color:var(--ink); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.person-info { padding:18px; }
.person-info h3 { margin:0; font:600 26px "Playfair Display"; }
.person-info p { color:var(--muted); margin:5px 0 16px; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.person-info .character-blurb { white-space:normal; overflow:visible; line-height:1.45; min-height:58px; margin:0 0 16px; color:#5f5a53; }
.choice-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.choice-button { border:1px solid var(--line); background:transparent; padding:10px 4px; cursor:pointer; font-size:12px; transition:.18s; }
.choice-button:hover { border-color:var(--ink); }
.choice-button.selected[data-choice="Snog"] { background:var(--red); border-color:var(--red); color:white; }
.choice-button.selected[data-choice="Marry"] { background:var(--gold); border-color:var(--gold); color:white; }
.choice-button.selected[data-choice="Avoid"] { background:var(--ink); border-color:var(--ink); color:white; }
.game-actions { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:22px; }
.game-actions p { color:var(--muted); font-size:13px; }
.result { text-align:center; }
.result-symbol { width:56px; height:56px; margin:0 auto 26px; display:grid; place-items:center; border:1px solid var(--red); border-radius:50%; color:var(--red); font-size:24px; }
.result>p { color:var(--muted); }
.result-list { display:grid; gap:8px; margin:30px 0; text-align:left; }
.result-item { display:flex; align-items:center; padding:14px; background:rgba(255,255,255,.35); border:1px solid var(--line); gap:14px; }
.result-item .badge { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:white; font-family:"Playfair Display"; }
.result-item strong { margin-left:auto; }
.result-actions { display:grid; gap:14px; justify-content:center; }
.secondary-button { border:0; background:none; text-decoration:underline; text-underline-offset:4px; cursor:pointer; padding:10px; }
.danger { color:var(--red); margin-top:25px; }
.history-list { display:grid; gap:16px; margin-top:30px; }
.history-round { border-top:1px solid var(--line); padding-top:16px; }
.history-round>strong { font-family:"Playfair Display"; font-size:20px; }
.history-round ul { list-style:none; padding:0; display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); }
.empty { border:1px dashed var(--line); padding:40px; text-align:center; color:var(--muted); }
.login-dialog { width:min(520px,calc(100% - 32px)); border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:42px; box-shadow:14px 14px 0 rgba(230,83,67,.8); }
.login-dialog::backdrop { background:rgba(37,35,31,.55); backdrop-filter:blur(3px); }
.login-dialog h2 { font-size:48px; }
.login-dialog p,.login-dialog small { color:var(--muted); line-height:1.5; }
.login-dialog form { display:grid; gap:8px; margin:25px 0 18px; }
.login-dialog textarea { min-height:90px; resize:vertical; padding:13px; border:1px solid var(--line); background:var(--white); outline:none; }
.login-dialog label { font-size:12px; font-weight:700; margin-top:8px; }
.login-dialog input { width:100%; padding:13px; border:1px solid var(--line); background:var(--white); outline:none; }
.dialog-close { position:absolute; top:14px; right:18px; border:0; background:none; cursor:pointer; font-size:27px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:20; background:var(--ink); color:white; padding:13px 17px; opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:none; }
.handoff { text-align:center; }
.handoff>p { color:var(--muted); font-size:17px; line-height:1.6; margin:20px auto 30px; max-width:480px; }
.handoff-icon { width:62px; height:62px; border:1px solid var(--red); color:var(--red); border-radius:50%; display:grid; place-items:center; margin:0 auto 28px; font-size:28px; }
.comparison-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.comparison-heading h2 { margin-bottom:0; }
.comparison-actions { display:flex; align-items:center; gap:16px; }
.comparison-grid { display:grid; gap:18px; margin:32px 0; }
.compare-card { border:1px solid var(--line); background:rgba(255,255,255,.3); padding:20px; }
.compare-character { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:17px; }
.compare-character h3 { margin:0; font:600 28px "Playfair Display"; }
.agreement { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--red); font-weight:700; }
.player-verdicts { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }
.player-verdict { border-top:1px solid var(--line); padding-top:10px; display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.player-verdict span { color:var(--muted); }
.player-verdict b.Snog { color:var(--red); }.player-verdict b.Marry { color:#a8771b; }.player-verdict b.Avoid { color:var(--ink); }
@media (max-width:760px) { .people-grid { grid-template-columns:1fr; } .portrait { aspect-ratio:1/1; background-size:300% 300%; } .game-heading { align-items:flex-start; gap:20px; } .game-actions { flex-direction:column; gap:14px; align-items:stretch; } .game-actions p { text-align:center; } }
@media (max-width:760px) { .comparison-heading { align-items:flex-start; flex-direction:column; } }
@media (max-width:520px) { .view { padding-top:32px; } h1 { font-size:52px; } h2 { font-size:43px; } .preference-grid { grid-template-columns:1fr; } .choice-preview { gap:28px; } footer span:first-child { display:none; } footer { justify-content:center; } .top-actions { gap:7px; } .top-actions .icon-button span { display:none; } .account-button { display:none; } .party-button { padding:8px 9px; } .login-dialog { padding:36px 24px; } .comparison-actions { align-items:flex-start; flex-direction:column-reverse; } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }