:root { color-scheme: dark; --ink:#fff7ef; --muted:#c8afa0; --bg:#241812; --panel:#38261e; --line:#5f4438; --gold:#f1c40f; --coral:#ef7657; --good:#78d59a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; background:radial-gradient(circle at top,#4a2b21 0,#241812 50rem); color:var(--ink); font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { border:0; border-radius:16px; min-height:52px; padding:12px 16px; font-weight:800; cursor:pointer; }
button.primary { background:var(--gold); color:#241812; } button.secondary { background:#fff0e8; color:#241812; } button.ghost { background:transparent; border:1px solid var(--line); color:var(--ink); }
button:disabled { opacity:.45; cursor:not-allowed; }
input { width:100%; min-height:54px; padding:0 15px; border-radius:14px; border:1px solid var(--line); background:#211510; color:var(--ink); }
.phone-shell { width:min(100%,560px); min-height:100dvh; margin:auto; padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom); background:linear-gradient(165deg,rgba(255,255,255,.045),transparent 25%); }
.topbar { min-height:77px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-size:13px; font-weight:800; letter-spacing:.03em; }
.brand svg { width:64px; height:36px; }.room-badge { background:rgba(241,196,15,.16); color:var(--gold); padding:7px 10px; border-radius:999px; font-size:12px; font-weight:800; }
.screen { padding:16px 0 36px; }.eyebrow { color:var(--gold); text-transform:uppercase; font-size:12px; font-weight:900; letter-spacing:.11em; }.hero h1 { font-size:clamp(34px,10vw,52px); line-height:.98; margin:11px 0 15px; letter-spacing:-.055em; }.hero p,.subtle { color:var(--muted); line-height:1.5; }
.card { background:rgba(56,38,30,.86); border:1px solid var(--line); padding:18px; border-radius:22px; margin-top:16px; }.stack { display:grid; gap:11px; }.split { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.field { display:grid; gap:7px; font-size:13px; color:var(--muted); font-weight:700; }.choice { text-align:left; background:#fff0e8; color:#241812; min-height:100px; padding:18px; }.choice strong { display:block; font-size:18px; }.choice span { display:block; margin-top:5px; font-size:13px; opacity:.7; font-weight:600; }
.code { font-size:38px; letter-spacing:.15em; font-weight:1000; color:var(--gold); text-align:center; margin:8px 0 16px; }.players { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; }.players li { display:flex; align-items:center; justify-content:space-between; background:#241812; padding:12px; border-radius:12px; }.host-tag,.you-tag { color:var(--gold); font-size:11px; font-weight:900; }
.game-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }.round { font-weight:900; }.clues { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.clue { min-height:128px; border-radius:18px; padding:15px; display:flex; flex-direction:column; justify-content:space-between; color:#241812; }.clue:nth-child(4n+1){background:#e7c763}.clue:nth-child(4n+2){background:#ef9c7c}.clue:nth-child(4n+3){background:#91c9bd}.clue:nth-child(4n+4){background:#c8b9e4}.clue .icon { font-size:32px; }.clue small { font-size:11px; text-transform:uppercase; font-weight:900; letter-spacing:.08em; opacity:.65; }.clue strong { font-size:15px; line-height:1.2; }
.answer-row { display:flex; gap:8px; margin-top:16px; }.answer-row input { min-width:0; }.answer-row button { min-height:54px; white-space:nowrap; }.notice { margin-top:12px; padding:11px 12px; background:rgba(241,196,15,.13); color:#ffe795; border-radius:12px; font-size:13px; }.scoreboard { margin-top:18px; }.scoreboard h2 { font-size:15px; margin:0 0 8px; }.scoreboard li { font-size:14px; }.correct { color:var(--good); }.error { color:#ffad9b; margin-top:10px; font-size:13px; font-weight:700; }.loading { padding:60px 0; text-align:center; color:var(--muted); }
@media (max-width:360px){ .phone-shell{padding-left:13px;padding-right:13px}.split{grid-template-columns:1fr}.clues{gap:7px}.clue{min-height:112px;padding:12px}.answer-row{flex-wrap:wrap}.answer-row button{width:100%} }