:root{--paper:#f6efdd;--paper-deep:#ece1c5;--card:#fbf6e9;--ink:#241809;--ink-soft:#5c4d38;--red:#d93a20;--red-deep:#b02c16;--mustard:#e09a1a;--mustard-soft:#f6d998;--teal:#1f7565;--teal-soft:#cde5da;--display:"Fraunces", "Georgia", serif;--body:"Karla", "Helvetica Neue", sans-serif;--mono:"Spline Sans Mono", "Courier New", monospace;color:var(--ink);background:var(--paper);font-family:var(--body);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(circle at 85% -10%, var(--paper-deep), transparent 42rem);min-width:320px;min-height:100vh;margin:0}::selection{background:var(--mustard-soft)}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;padding:0}button:disabled{cursor:not-allowed;opacity:.45}.app{width:min(1120px,100% - 32px);margin:0 auto;padding:34px 0 70px}.topbar{justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px;display:flex}.brand{font-family:var(--display);font-variation-settings:"SOFT" 40, "WONK" 1;letter-spacing:-.02em;align-items:center;gap:12px;font-size:clamp(1.9rem,4vw,2.5rem);font-weight:900;line-height:1;display:flex}.brand em{color:var(--red);font-style:italic}.brand-disc{border:2px solid var(--ink);background:repeating-radial-gradient(circle,#191410 0 2px,#2b241d 2px 3.5px);border-radius:999px;width:34px;height:34px;position:relative}.brand-disc:after{background:var(--red);content:"";border-radius:999px;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}h2{font-family:var(--display);font-variation-settings:"SOFT" 40, "WONK" 1;letter-spacing:-.01em;margin:0 0 18px;font-weight:800}.hero-actions{align-items:center;gap:10px;display:flex}.status-pill{border:2px dashed var(--ink);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:var(--mustard-soft);border-radius:6px;padding:10px 16px;font-weight:700}.ghost-button{border:2px solid var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--ink);border-radius:6px;padding:8px 14px;font-weight:800;transition:transform 80ms,box-shadow 80ms}.ghost-button:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}.ghost-button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.connection-banner{border:2px solid var(--ink);font-family:var(--mono);text-align:center;background:var(--mustard);box-shadow:4px 4px 0 var(--ink);border-radius:8px;margin-bottom:18px;padding:12px 16px;font-weight:700}.setup-grid,.game-grid{gap:22px;display:grid}.setup-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,.6fr);align-items:start}.game-grid{grid-template-columns:minmax(0,1fr) 330px;align-items:start}.panel{border:2px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 var(--ink);border-radius:12px;padding:26px}label{gap:8px;margin-bottom:14px;font-weight:700;display:grid}input,select{border:2px solid var(--ink);background:#fffdf6;border-radius:8px;outline:0;width:100%;padding:13px 14px}input:focus,select:focus{border-color:var(--red);box-shadow:3px 3px 0 var(--red)}input::placeholder{color:#a4977f}.settings-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 20px;display:grid}.category-card{border:2px solid var(--ink);text-align:left;background:#fffdf6;border-radius:10px;min-height:130px;padding:16px;transition:transform 80ms,box-shadow 80ms;position:relative}.category-card:before{background:var(--accent,var(--red));border:2px solid var(--ink);content:"";border-radius:999px;width:14px;height:14px;position:absolute;top:12px;right:12px}.category-card:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.category-card.selected{background:color-mix(in srgb, var(--accent,var(--red)) 16%, #fffdf6);box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.category-card strong{font-family:var(--display);margin-bottom:8px;padding-right:20px;font-size:1.15rem;font-weight:800;display:block}.category-card span{color:var(--ink-soft);font-size:.92rem;line-height:1.45}.cta,.secondary{border:2px solid var(--ink);font-family:var(--display);width:100%;box-shadow:4px 4px 0 var(--ink);border-radius:8px;margin-top:10px;padding:14px 18px;font-size:1.08rem;font-weight:800;transition:transform 80ms,box-shadow 80ms}.cta{background:var(--red);color:var(--paper)}.cta:hover:not(:disabled){background:var(--red-deep);box-shadow:5px 5px 0 var(--ink);transform:translate(-1px,-1px)}.secondary{background:var(--mustard)}.secondary:hover:not(:disabled){box-shadow:5px 5px 0 var(--ink);transform:translate(-1px,-1px)}.cta:active:not(:disabled),.secondary:active:not(:disabled){box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.hint{color:var(--ink-soft);font-size:.92rem;line-height:1.5}.error{border:2px solid var(--red);color:var(--red-deep);background:color-mix(in srgb, var(--red) 10%, #fffdf6);border-radius:8px;margin-top:14px;padding:10px 14px;font-weight:700}code{font-family:var(--mono);background:var(--paper-deep);border-radius:4px;padding:1px 5px}.join-panel{position:sticky;top:24px}.arena-topline{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;font-size:.85rem;font-weight:700;display:flex}.timer{border:2px solid var(--ink);font-family:var(--mono);text-align:center;z-index:0;background:#fffdf6;border-radius:6px;min-width:84px;padding:8px 12px;font-weight:700;position:relative;overflow:hidden}.timer-bar{background:var(--mustard-soft);transform-origin:0;z-index:-1;transition:transform .2s linear;position:absolute;inset:0}.timer.urgent{color:var(--red-deep);border-color:var(--red-deep)}.timer.urgent .timer-bar{background:color-mix(in srgb, var(--red) 25%, #fffdf6)}.player-shell{border:2px solid var(--ink);background:repeating-linear-gradient(90deg, transparent 0 26px, #24180909 26px 27px), var(--paper-deep);border-radius:12px;align-items:center;gap:26px;min-height:240px;padding:26px 30px;display:flex;position:relative;overflow:hidden}.player-shell.empty{color:var(--ink-soft);font-family:var(--mono);justify-content:center}.vinyl-stage{flex-shrink:0;width:190px;height:190px;position:relative}.vinyl{border:2px solid var(--ink);background:repeating-radial-gradient(circle,#191410 0 3px,#2b241d 3px 5px);border-radius:999px;width:190px;height:190px;animation:2.2s linear infinite paused spin;position:relative;box-shadow:5px 5px #24180959}.player-shell.spinning .vinyl{animation-play-state:running}.vinyl-label{background:var(--red);border:2px solid var(--ink);color:var(--paper);font-family:var(--display);border-radius:999px;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.7rem;font-style:italic;font-weight:900;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vinyl-label:after{background:var(--paper);content:"";border-radius:999px;width:7px;height:7px;position:absolute}.tonearm{pointer-events:none;transform-origin:14px 14px;width:28px;height:110px;transition:transform .5s;position:absolute;top:-10px;right:-12px;transform:rotate(-28deg)}.player-shell.spinning .tonearm,.player-shell.paused .tonearm{transform:rotate(4deg)}.tonearm:before{background:var(--ink);content:"";border-radius:999px;width:28px;height:28px;position:absolute;top:0;left:0}.tonearm:after{background:var(--ink);content:"";border-radius:3px;width:6px;height:92px;position:absolute;top:14px;left:11px}@keyframes spin{to{transform:rotate(360deg)}}.player-caption{z-index:1;position:relative}.player-caption strong{font-family:var(--display);margin-bottom:8px;font-size:clamp(1.4rem,3vw,2.1rem);font-style:italic;font-weight:900;display:block}.player-caption p{color:var(--ink-soft);margin:0;line-height:1.5}.audio-action{border:2px solid var(--ink);background:var(--mustard);box-shadow:3px 3px 0 var(--ink);border-radius:8px;margin-top:14px;padding:11px 16px;font-weight:800}.audio-action:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.playback-controls{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;margin-top:16px;display:grid}.host-buttons{gap:10px;display:flex}.host-buttons button{border:2px solid var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--ink);border-radius:8px;padding:11px 16px;font-weight:800}.host-buttons button:hover:not(:disabled){box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}.host-buttons button:active:not(:disabled){box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.playback-controls label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0;font-size:.8rem;font-weight:700}input[type=range]{accent-color:var(--red);background:0 0;border:0;padding:0}input[type=range]:focus{box-shadow:none}.control-hint{margin:0}.waiting-card,.guess-box,.reveal-card,.loading-card,.answered-card{border:2px solid var(--ink);background:#fffdf6;border-radius:10px;margin-top:18px;padding:22px}.loading-card{color:var(--ink-soft);font-family:var(--mono);text-align:center;border-style:dashed}.answered-card{background:var(--teal-soft);text-align:center;margin-top:0;font-weight:700}.answered-card b{font-family:var(--mono)}.reveal-card{background:var(--mustard-soft)}.reveal-card span{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;font-weight:700}.reveal-card strong{font-family:var(--display);margin-top:8px;font-size:clamp(1.7rem,4vw,2.6rem);font-style:italic;font-weight:900;line-height:1.05;display:block}.reveal-card p{color:var(--ink-soft);margin:6px 0 0;font-weight:700}.waiting-card h2{font-size:1.7rem}.waiting-card h2 .code{color:var(--red);font-family:var(--mono);letter-spacing:.12em;font-style:normal}.guess-flash{border:2px solid var(--ink);border-radius:8px;margin:14px 0 0;padding:10px 14px;font-weight:800;animation:.16s ease-out flash-in}.guess-flash.correct{background:var(--teal-soft)}.guess-flash.artist{background:var(--mustard-soft)}.guess-flash.wrong,.guess-flash.not-playing,.guess-flash.too-fast,.guess-flash.already{background:color-mix(in srgb, var(--red) 14%, #fffdf6);color:var(--red-deep)}@keyframes flash-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.suggestions{gap:8px;margin-top:12px;display:grid}.suggestions button{border:2px solid var(--ink);text-align:left;background:var(--card);border-radius:8px;padding:11px 14px;transition:transform 60ms,background 60ms}.suggestions button:hover{background:var(--mustard-soft);transform:translate(3px)}.scoreboard{position:sticky;top:24px}.score-row{border:2px solid var(--ink);background:#fffdf6;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;padding:12px 14px;display:flex}.score-row.me{background:var(--mustard-soft)}.score-row strong{font-family:var(--display);font-size:1.05rem;font-weight:800}.score-row span{color:var(--ink-soft);margin-top:2px;font-size:.85rem;display:block}.score-row b{font-family:var(--mono);font-size:1.45rem}.round-points{color:var(--teal);font-family:var(--mono);margin-left:6px;font-size:.85rem;font-style:normal}.feed{border-top:2px dashed var(--ink);margin-top:16px;padding-top:14px}.feed-item{font-family:var(--mono);margin:0 0 8px;font-size:.82rem;line-height:1.45}.feed-item:before{content:"▸ "}.feed-item.correct{color:var(--teal)}.feed-item.join{color:var(--ink-soft)}.feed-item.leave{color:var(--red-deep)}.feed-item.system{color:var(--ink);font-weight:700}@media (width<=880px){.app{width:min(100% - 20px,640px);padding:22px 0 50px}.topbar{flex-wrap:wrap;gap:12px}.setup-grid,.game-grid,.category-grid,.playback-controls{grid-template-columns:1fr}.panel{padding:20px}.player-shell{text-align:center;flex-direction:column;padding:22px}.arena-topline{flex-wrap:wrap}.join-panel,.scoreboard{position:static}}