:root { --ink:#f5f0e7; --dim:#a8a29a; --night:#10100f; --panel:#191816; --line:#34312c; --coral:#f07b61; --gold:#d8b26a; --sage:#a7bd92; --serif:Georgia,"Times New Roman",serif; --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--night); color-scheme:dark; }
body { margin:0; background:radial-gradient(circle at 80% 10%,#232017 0,transparent 28rem),var(--night); color:var(--ink); font-family:var(--sans); min-height:100dvh; }
button,input { font:inherit; }
button { color:inherit; }
button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-appearance:none; appearance:none; }
button:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.app { min-height:100dvh; overflow:hidden; }
.topbar { height:76px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #2a2824; position:relative; z-index:20; }
.brand,.icon-button,.text-button,.back,.room-code,.danger { background:none; border:0; cursor:pointer; }
.brand,.icon-button,.text-button,.back,.room-code,.danger,.primary,.secondary,.choice,.length { position:relative; z-index:2; pointer-events:auto; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:19px; }
.icon-button { color:var(--dim); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:14px; }
.mark { width:29px; height:22px; display:inline-block; position:relative; }
.mark i { position:absolute; width:18px; height:18px; border:2px solid var(--coral); border-radius:50%; top:2px; }
.mark i:first-child { left:0; }.mark i:last-child { right:0; border-color:var(--gold); }
.eyebrow { color:var(--gold); font-size:11px; letter-spacing:.16em; font-weight:700; margin:0 0 20px; }
.eyebrow span { color:var(--dim); margin-left:12px; padding-left:12px; border-left:1px solid var(--line); }
.home-shell { width:min(1200px,calc(100% - 40px)); min-height:calc(100dvh - 76px); margin:auto; display:grid; grid-template-columns:1fr .78fr; align-items:center; gap:9vw; padding:60px 0 80px; }
.hero { max-width:610px; }.hero-mark { display:none; }
.hero h1 { font-family:var(--serif); font-weight:400; font-size:clamp(88px,11vw,158px); line-height:.68; letter-spacing:-.07em; margin:65px 0 54px; }
.hero h1 em { font-weight:400; color:var(--coral); margin-left:.48em; }
.tagline { font-family:var(--serif); font-size:clamp(25px,3vw,38px); line-height:1.15; color:#ded7cb; margin:0 0 22px; }
.rule { color:var(--dim); max-width:500px; line-height:1.65; margin:0 0 38px; }.rule strong { color:var(--ink); font-weight:550; }
.home-actions { display:flex; gap:12px; flex-wrap:wrap; }.primary,.secondary { border:1px solid transparent; min-height:56px; padding:0 24px; border-radius:2px; font-weight:700; cursor:pointer; transition:transform .2s,background .2s,opacity .2s; }
.home-actions .primary,.home-actions .secondary { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.primary { background:var(--coral); color:#1b0d09; }.primary span { margin-left:34px; }
.secondary { background:transparent; border-color:#514d45; }.primary:disabled { opacity:.45; cursor:not-allowed; transform:none; }.full { width:100%; margin-top:24px; }
.text-button { color:var(--dim); margin-top:28px; padding:6px 0; border-bottom:1px solid #5b5750; }
.memory-card { transform:rotate(3deg); border:1px solid #454038; min-height:560px; padding:30px; background:linear-gradient(150deg,#211f1a,#151513); box-shadow:30px 40px 80px #050505; position:relative; }
.memory-card:before { content:""; position:absolute; inset:14px; border:1px solid #292721; pointer-events:none; }
.card-top,.card-foot { display:flex; justify-content:space-between; color:var(--dim); font-size:10px; letter-spacing:.15em; }.card-kicker { color:var(--coral); font-size:10px; letter-spacing:.15em; margin:90px 0 16px; }.card-question { font-family:var(--serif); font-size:31px; max-width:320px; line-height:1.12; }
.word-stack { margin-top:56px; display:grid; gap:10px; }.word-stack span { border-bottom:1px solid #3e3a33; padding:12px 0; font-family:var(--serif); font-style:italic; font-size:25px; }.card-foot { position:absolute; bottom:30px; left:30px; right:30px; align-items:center; }.card-foot i { width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 20px var(--gold); }
.config-note,.connection-error { background:#262117; border-bottom:1px solid #584b2d; color:#d9c392; text-align:center; padding:9px 16px; font-size:12px; }.connection-error { background:#3b1f1a; color:#ffc9bb; }.connection-error button { margin-left:15px; text-decoration:underline; background:none; border:0; color:inherit; }
.config-note { font-size:0; }.config-note:after { content:"Local play mode — rooms work between tabs in this browser."; font-size:12px; }
.setup-shell,.center-shell { min-height:calc(100dvh - 76px); display:grid; place-items:center; padding:48px 20px 80px; }.panel,.lobby { width:min(610px,100%); }.back { color:var(--dim); padding:10px 0; margin-bottom:54px; }.panel h1,.lobby h1,.locked h1 { font:400 clamp(48px,8vw,76px)/.95 var(--serif); letter-spacing:-.04em; margin:0 0 18px; }.setup-copy,.muted,.locked>p { color:var(--dim); line-height:1.6; }.panel form { margin-top:42px; display:grid; gap:26px; }.panel label,.panel legend { display:grid; gap:10px; color:#c5beb2; font-size:13px; font-weight:650; }.panel input { width:100%; min-height:56px; border:1px solid #464139; background:#171614; border-radius:2px; padding:0 16px; color:var(--ink); font-size:16px; }.code-input { text-transform:uppercase; letter-spacing:.35em; font-weight:800; font-size:24px!important; }.panel fieldset { border:0; padding:0; margin:0; }.panel legend { margin-bottom:12px; }
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.choice,.length { border:1px solid #3d3933; background:#171614; min-height:52px; padding:8px; cursor:pointer; }.choice.selected,.length.selected { border-color:var(--gold); background:#252118; color:#f3d8a3; }.length-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.length { min-height:74px; display:grid; gap:4px; }.length span { color:var(--dim); font-size:11px; }.error { background:#3d201a; color:#ffc5b7; padding:12px; margin:0; font-size:13px; }.privacy,.waiting,.hint { color:#77726a; font-size:12px; text-align:center; margin-top:20px; }
.lobby { text-align:center; }.room-code { display:inline-grid; gap:3px; padding:12px 22px; border:1px dashed #5a5347; margin-bottom:36px; }.room-code span { font-size:29px; letter-spacing:.25em; font-weight:800; }.room-code small { color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }.players { display:grid; gap:10px; margin:40px 0 8px; text-align:left; }.player { border:1px solid var(--line); background:#171614; padding:14px; display:grid; grid-template-columns:48px 1fr 12px; gap:14px; align-items:center; }.avatar { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:1px solid #49443c; font:24px var(--serif); }.avatar.ready { background:#283022; border-color:var(--sage); }.player div { display:grid; gap:4px; }.player small { color:var(--dim); }.status { width:8px; height:8px; border-radius:50%; background:#514e49; }.status.ready { background:var(--sage); box-shadow:0 0 10px var(--sage); }
.round-shell,.reveal-shell,.results-shell { width:min(930px,calc(100% - 40px)); margin:auto; padding:52px 0 90px; }.progress-row { display:flex; justify-content:space-between; color:var(--dim); text-transform:uppercase; letter-spacing:.12em; font-size:10px; }.progress { height:2px; background:#2f2d29; margin-top:14px; }.progress i { display:block; height:100%; background:var(--coral); transition:width .5s; }.question-card { width:min(670px,100%); margin:84px auto 0; }.question-card h1,.reveal-heading h1 { font:400 clamp(42px,7vw,72px)/1.02 var(--serif); letter-spacing:-.035em; margin:0 0 24px; }.format { color:var(--dim); margin-bottom:34px; }.answer-fields { display:grid; gap:10px; }.answer-fields label { min-height:68px; background:#191816; border:1px solid #3d3933; display:grid; grid-template-columns:58px 1fr; align-items:center; }.answer-fields label:focus-within { border-color:var(--gold); }.answer-fields span { color:#6f6a62; text-align:center; font-size:10px; letter-spacing:.1em; }.answer-fields input { min-width:0; height:100%; background:transparent; border:0; border-left:1px solid #33302b; padding:0 18px; font:italic 25px var(--serif); color:var(--ink); outline:0; }
.locked { text-align:center; max-width:560px; }.lock-orbit { width:120px; height:120px; border:1px solid #443d32; border-radius:50%; display:grid; place-items:center; margin:0 auto 50px; position:relative; }.lock-orbit:after { content:""; position:absolute; inset:-12px; border:1px dashed #2e2b26; border-radius:50%; animation:spin 18s linear infinite; }.typing { display:flex; justify-content:center; gap:7px; margin-top:32px; }.typing i { width:6px; height:6px; background:var(--gold); border-radius:50%; animation:pulse 1.2s infinite; }.typing i:nth-child(2) { animation-delay:.15s; }.typing i:nth-child(3) { animation-delay:.3s; }
.reveal-heading { text-align:center; max-width:650px; margin:20px auto 26px; }.score-burst { text-align:center; display:grid; margin:30px 0 50px; }.score-burst strong { font:70px var(--serif); color:var(--gold); }.score-burst span { color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }.comparison { border-top:1px solid var(--line); }.name-row,.match-row { display:grid; grid-template-columns:1fr 180px 1fr; gap:12px; align-items:center; }.name-row { color:var(--dim); padding:16px 0; text-transform:uppercase; letter-spacing:.12em; font-size:10px; }.name-row span:last-child,.match-row>span:last-child { text-align:right; }.match-row { min-height:82px; border-top:1px solid #2b2925; }.match-row>span { font:italic clamp(21px,4vw,29px) var(--serif); }.match-row>div { text-align:center; display:grid; place-items:center; gap:6px; }.match-row i { width:100%; height:1px; background:#44413b; position:relative; }.match-row.exact i,.match-row.normalized i { background:var(--sage); box-shadow:0 0 14px #719053; }.match-row.synonym i { background:var(--gold); }.match-row.none { opacity:.6; }.match-row small { color:var(--dim); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.continue { display:block; margin:46px auto 0; min-width:250px; }
.results-shell { max-width:790px; }.final-score { text-align:center; padding:30px 0 50px; }.percentage { display:flex; justify-content:center; align-items:start; }.percentage strong { font:clamp(110px,22vw,190px)/.8 var(--serif); letter-spacing:-.08em; }.percentage span { color:var(--coral); font:32px var(--serif); }.final-score h1 { color:var(--gold); font:italic 35px var(--serif); margin:30px 0 10px; }.final-score>p:last-child { color:var(--dim); }.stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }.stats div { padding:24px; display:grid; text-align:center; gap:5px; }.stats div+div { border-left:1px solid var(--line); }.stats strong { font:38px var(--serif); }.stats span { color:var(--dim); font-size:11px; }.history { margin-top:68px; }.section-title h2 { font:42px var(--serif); margin:0 0 28px; }.history details { border-top:1px solid var(--line); }.history summary { min-height:66px; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:12px; cursor:pointer; list-style:none; }.history summary span,.history summary em { color:var(--dim); font-size:11px; font-style:normal; }.history details div { padding:0 0 18px 52px; }.history details p { display:grid; grid-template-columns:100px 1fr; margin:8px 0; color:#d9d2c7; }.history details b { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:40px; }.danger { grid-column:1/-1; color:#a57a72; padding:20px; }
.disagreement { margin-top:14px; border:1px solid var(--line); padding:20px; display:flex; justify-content:space-between; gap:20px; align-items:center; }.disagreement>span { color:var(--dim); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.disagreement strong { font:italic 20px var(--serif); }.disagreement i { color:var(--coral); font-size:13px; }
.modal-backdrop { position:fixed; z-index:100; inset:0; background:#050505d9; display:grid; place-items:center; padding:20px; }.modal { width:min(570px,100%); max-height:calc(100dvh - 40px); overflow:auto; background:#1a1917; border:1px solid #47423a; padding:clamp(26px,6vw,54px); position:relative; }.modal-close { position:absolute; right:18px; top:14px; border:0; background:none; color:var(--dim); font-size:30px; cursor:pointer; }.modal h2 { font:48px var(--serif); margin:0 0 36px; }.modal ol { padding:0; list-style:none; }.modal li { display:grid; grid-template-columns:42px 1fr; gap:15px; padding:18px 0; border-top:1px solid var(--line); }.modal li>span { color:var(--coral); font-size:11px; }.modal li strong { font-family:var(--serif); font-size:19px; }.modal li p { color:var(--dim); line-height:1.5; margin:7px 0 0; font-size:13px; }.loading-mark { margin-bottom:20px; animation:pulse 1.4s infinite; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes pulse { 0%,100% { opacity:.3; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
@media (hover:hover) and (pointer:fine) { .primary:hover,.secondary:hover { transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media (max-width:780px) { .app { overflow-x:hidden; }.topbar { height:64px; padding:0 18px; }.brand span { font-size:17px; }.icon-button { font-size:10px; }.home-shell { min-height:auto; width:calc(100% - 36px); display:block; padding:48px 0 60px; }.hero .eyebrow { text-align:center; }.hero-mark { display:grid; place-items:center; margin:44px 0 32px; }.hero h1 { font-size:92px; text-align:center; margin:0 0 48px; }.hero h1 em { margin-left:.35em; }.tagline { font-size:29px; text-align:center; }.rule { text-align:center; font-size:14px; }.home-actions { display:grid; }.primary,.secondary { width:100%; }.text-button { display:block; margin:26px auto 0; }.memory-card { display:none; }.setup-shell,.center-shell { min-height:calc(100dvh - 64px); padding-top:34px; align-items:start; }.back { margin-bottom:38px; }.panel h1,.lobby h1,.locked h1 { font-size:50px; }.choice-grid { grid-template-columns:repeat(2,1fr); }.round-shell,.reveal-shell,.results-shell { width:calc(100% - 32px); padding:36px 0 70px; }.question-card { margin-top:58px; }.question-card h1,.reveal-heading h1 { font-size:46px; }.name-row,.match-row { grid-template-columns:1fr 80px 1fr; }.match-row { min-height:76px; }.match-row small { font-size:7px; }.stats div { padding:16px 6px; }.stats strong { font-size:30px; }.stats span { font-size:9px; }.result-actions { grid-template-columns:1fr; }.danger { grid-column:auto; }.history summary { grid-template-columns:30px 1fr auto; }.history details div { padding-left:42px; }.history details p { grid-template-columns:80px 1fr; }.room-code span { font-size:25px; } }
@media (max-width:390px) { .hero h1 { font-size:78px; }.choice-grid { grid-template-columns:1fr 1fr; }.length-grid { grid-template-columns:1fr; }.question-card h1 { font-size:40px; }.percentage strong { font-size:110px; } }