:root { --ink:#191b20; --paper:#faf9f6; --coral:#e45d43; --yellow:#f0ece5; --mint:#e8e4dc; --muted:#77787e; --line:rgba(25,27,32,.14); }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:Manrope,system-ui,sans-serif; background:radial-gradient(circle at 80% 10%,#e8dfcb 0,transparent 22rem),var(--paper); }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%,720px); min-height:100vh; margin:auto; padding:24px 20px 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-family:Fraunces,serif; font-size:1.42rem; font-weight:700; text-decoration:none; letter-spacing:-.07em; }.brand span{color:var(--coral)}
.rules-button,.text-button { border:0; color:var(--ink); background:none; font-size:.76rem; font-weight:800; letter-spacing:.02em; }.rules-button span{font-size:1.1rem;margin-left:4px}
.screen { padding-top:62px; }.hidden { display:none !important; }
.eyebrow,.kicker,.meta-label { color:var(--muted); font-size:.67rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.pulse{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(240,100,69,.13)}
h1,h2,p { margin-top:0; } h1,h2 { font-family:Fraunces,serif; letter-spacing:-.055em; line-height:.98; } h1 { max-width:550px; margin:16px 0 20px; font-size:clamp(3.2rem,12vw,5.7rem); } h1 em{color:var(--coral);font-style:italic}.intro{max-width:450px;color:#55596b;font-size:1rem;line-height:1.7}
.start-card { position:relative; isolation:isolate; overflow:hidden; min-height:198px; margin-top:42px; padding:31px; border-radius:20px; color:#fff; background:var(--ink); box-shadow:8px 9px 0 var(--yellow); }.card-copy{position:relative;z-index:2;max-width:340px}.kicker{color:var(--mint)}.start-card h2{margin:10px 0;font-size:2rem}.start-card p{max-width:290px;margin-bottom:24px;color:#caced9;font-size:.88rem;line-height:1.55}.orbit{position:absolute;border:1px solid rgba(246,242,234,.17);border-radius:50%;z-index:0}.orbit-one{width:330px;height:330px;right:-115px;top:-79px}.orbit-two{width:235px;height:235px;right:-55px;top:-28px}.sound-mark{position:absolute;right:33px;bottom:36px;display:flex;align-items:center;gap:5px;height:60px;z-index:1}.sound-mark i{display:block;width:7px;border-radius:5px;background:var(--coral)}.sound-mark i:nth-child(1){height:20px}.sound-mark i:nth-child(2){height:42px}.sound-mark i:nth-child(3){height:60px}.sound-mark i:nth-child(4){height:34px}.sound-mark i:nth-child(5){height:15px}
.primary-button { display:inline-flex; align-items:center; gap:16px; padding:14px 18px; border:0; border-radius:9px; color:#fff; background:var(--coral); font-size:.82rem; font-weight:800; box-shadow:0 3px 0 #b94631; transition:transform .15s,box-shadow .15s; }.primary-button span{font-size:1.2rem}.small-note{margin-top:33px;color:var(--muted);font-size:.68rem;text-align:center}.start-actions{display:grid;gap:9px;width:min(100%,240px)}.start-actions .secondary-button{min-height:45px;color:#fff;border-color:rgba(255,255,255,.55)}
button:disabled{cursor:not-allowed;opacity:.48;transform:none!important}
.game-screen{padding-top:48px}.game-meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:end}.game-meta>div:last-child{text-align:right}.game-meta strong{font-family:DM Mono,monospace;font-size:1.55rem}.round-total{color:var(--muted);font-family:DM Mono,monospace;font-size:.85rem}.tier-pill{padding:6px 10px;border-radius:30px;color:#155b50;background:var(--mint);font-size:.66rem;font-weight:800}.meta-label{display:block;margin-bottom:2px;font-size:.59rem}.lives{min-height:22px;margin:12px 0 -7px;color:var(--coral);font-size:1.1rem;letter-spacing:.18em;text-align:center}.progress-track{height:5px;margin-top:17px;border-radius:10px;background:#d8d2c6;overflow:hidden}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--coral);transition:width .35s ease}.prompt{margin:54px 0 17px;text-align:center;font-family:Fraunces,serif;font-size:clamp(1.65rem,7vw,2.25rem);font-weight:700;letter-spacing:-.045em}
.listen-button{display:flex;align-items:center;width:100%;padding:20px 19px;border:1px solid #c9c3b8;border-radius:15px;color:var(--ink);background:#fffdf8;box-shadow:0 5px 0 #d9d2c6;transition:transform .15s,box-shadow .15s}.listen-button.playing{border-color:var(--coral);box-shadow:0 5px 0 #e9b19f}.speaker{display:grid;place-items:center;width:39px;height:39px;margin-right:13px;border-radius:50%;color:#fff;background:var(--coral);font-size:1.7rem;transform:rotate(180deg)}.listen-copy{text-align:left}.listen-copy small{display:block;color:var(--muted);font-size:.65rem;font-weight:700}.listen-copy strong{display:block;margin-top:2px;font-size:.88rem}.wave{display:flex;align-items:center;gap:3px;height:28px;margin-left:auto}.wave i{width:3px;border-radius:5px;background:var(--ink)}.wave i:nth-child(1){height:8px}.wave i:nth-child(2){height:19px}.wave i:nth-child(3){height:12px}.wave i:nth-child(4){height:24px}.wave i:nth-child(5){height:10px}.playing .wave i{animation:bounce .55s ease-in-out infinite alternate}.playing .wave i:nth-child(even){animation-delay:.18s}@keyframes bounce{to{transform:scaleY(.35)}}.audio-status{min-height:17px;margin:11px 0 22px;color:var(--muted);font-size:.68rem;text-align:center}
.answers{display:grid;gap:10px;margin-top:20px}.answer{display:flex;align-items:center;width:100%;min-height:58px;padding:13px 16px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:transparent;font-size:.92rem;font-weight:800;text-align:left;transition:background .15s,border .15s,transform .15s}.answer .letter{display:grid;place-items:center;width:26px;height:26px;margin-right:12px;border-radius:50%;color:var(--muted);background:#e5e0d7;font-family:DM Mono,monospace;font-size:.67rem}.answer.correct{border-color:#469276;background:#dcefe4}.answer.wrong{border-color:#dc6b59;background:#f8ded8}.answer:disabled{cursor:default}.round-points{margin-top:21px;color:var(--muted);font-size:.72rem;text-align:center}.round-points strong{color:var(--coral);font-family:DM Mono,monospace}
.end-screen{padding-top:54px;text-align:center}.end-mark{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 21px;border-radius:50%;color:#fff;background:var(--coral);font:2rem Fraunces,serif}.end-eyebrow{color:var(--coral)}.end-screen h1{margin:12px auto 14px;font-size:clamp(2.9rem,11vw,4.6rem)}.result-copy{max-width:350px;margin:0 auto;color:#5c5d68;font-size:.92rem;line-height:1.65}.final-score{margin:31px auto;width:min(100%,280px);padding:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.final-score span{display:block;color:var(--muted);font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.final-score strong{font:2.8rem DM Mono,monospace}.score-form{max-width:410px;margin:auto;text-align:left}.score-form label{display:block;margin-bottom:8px;font-size:.74rem;font-weight:800}.score-form>div{display:flex;gap:8px}.score-form input{min-width:0;flex:1;padding:0 13px;border:1px solid #bcb6aa;border-radius:9px;background:#fffdf8;outline-color:var(--coral)}.end-screen>.secondary-button{min-height:44px;margin-top:17px;padding:0 15px}.text-button{margin-top:22px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.exit-game{display:block;margin:18px auto 0}
.leaderboard-section{margin-top:68px;padding-top:28px;border-top:1px solid var(--line)}.leaderboard-heading{display:flex;align-items:end;justify-content:space-between}.leaderboard-heading h2{margin:8px 0 0;font-size:2.15rem}.local-tag{padding:5px 8px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:.59rem;font-weight:800;text-transform:uppercase}.leaderboard-list{margin:23px 0 0;padding:0;list-style:none}.leaderboard-list li{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;padding:13px 0;border-top:1px solid var(--line)}.rank{color:var(--coral);font: .73rem DM Mono,monospace}.run-details{display:grid;gap:3px}.player{font-size:.85rem;font-weight:800;line-height:1.2}.run-round{color:var(--muted);font:.56rem DM Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.board-score{font: .95rem DM Mono,monospace}.empty-board{display:block;color:var(--muted);font-size:.85rem;font-weight:600}
dialog{width:min(calc(100% - 40px),450px);padding:33px;border:0;border-radius:17px;color:var(--ink);background:var(--paper);box-shadow:0 20px 70px rgba(0,0,0,.3)}dialog::backdrop{background:rgba(21,27,50,.52);backdrop-filter:blur(3px)}dialog h2{margin:9px 0 18px;font-size:2.6rem}dialog p:not(.eyebrow){color:#585b69;font-size:.91rem;line-height:1.65}.close-dialog{position:absolute;top:10px;right:13px;border:0;background:none;color:var(--ink);font-size:1.8rem}.room-name-form{display:grid;gap:10px}.room-name-form input{min-height:48px;padding:0 13px;border:1px solid #c9c3b8;border-radius:8px;background:#fff;outline-color:var(--coral)}
@media (min-width:600px){.app-shell{padding:31px 38px 64px}.screen{padding-top:83px}.start-card{margin-top:50px;padding:41px}.game-screen{padding-top:58px}.answers{grid-template-columns:1fr 1fr}.answer{min-height:67px}.leaderboard-section{margin-top:90px}}
@media (hover:hover) and (pointer:fine){.primary-button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #b94631}.listen-button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #d9d2c6}.answer:hover:not(:disabled){border-color:var(--ink);background:#fffdf8;transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.room-entry{margin:42px 0 0;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fffdf8}.room-entry h2{margin:7px 0 18px;font-size:1.7rem}.room-entry input,.invite-link input{width:100%;min-height:45px;padding:0 13px;border:1px solid #c9c3b8;border-radius:8px;background:#fff;outline-color:var(--coral)}.room-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:9px}.room-actions .text-button{padding:0 4px;text-decoration:underline}.secondary-button{border:1px solid var(--ink);border-radius:8px;color:var(--ink);background:transparent;font-size:.73rem;font-weight:800}.room-help,.lobby-note{margin:13px 0 0;color:var(--muted);font-size:.68rem;line-height:1.5}.room-lobby,.room-result{padding-top:62px}.room-lobby h1,.room-result h1{font-size:clamp(3rem,11vw,4.8rem)}.invite-link{display:flex;gap:8px;margin-top:28px}.invite-link button{padding:0 14px;border:0;border-radius:8px;color:#fff;background:var(--ink);font-size:.72rem;font-weight:800}.room-player-list{margin:25px 0;padding:0;list-style:none}.room-player-list>div,.room-player-list li{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);font-size:.85rem;font-weight:800}.room-player-list span{color:var(--muted);font: .78rem DM Mono,monospace}.room-lobby .text-button{margin-left:12px}.room-clock{margin:-8px 0 14px;color:var(--coral);font:.75rem DM Mono,monospace;text-align:center}.final-room-list li:first-child{color:var(--coral)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}.start-card{min-height:164px}.start-actions{grid-template-columns:1fr 1fr;width:100%;gap:10px}.start-actions .primary-button,.start-actions .secondary-button{min-height:52px;justify-content:center;padding:12px}.start-actions .secondary-button{color:#fff;border-color:rgba(255,255,255,.68)}.game-heading{display:flex;align-items:start;gap:12px}.game-heading .game-meta{flex:1}.exit-game{width:36px;height:36px;margin:0;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:transparent;font-size:1.5rem;line-height:1}.lives{display:flex;align-items:center;justify-content:center;gap:10px;min-height:25px;margin:10px 0 -5px;color:var(--muted);font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.lives-cats{display:flex;gap:3px;font-size:1.05rem;letter-spacing:0}.lives-cats .lost{opacity:.22;filter:grayscale(1)}.room-status{margin:9px 0 -5px;color:var(--muted);font:.67rem DM Mono,monospace;text-align:center}.prompt{margin:35px 0 15px}.speaker{transform:none;font-size:1rem}.audio-status{font-size:.78rem}.end-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:410px;margin:0 auto 28px}.end-actions .primary-button,.end-actions .secondary-button{min-height:48px;justify-content:center;padding:10px}.score-form{padding-top:22px;border-top:1px solid var(--line)}.score-form .secondary-button{min-width:104px}.save-confirmation{margin:9px 0 0;color:#155b50;font-size:.76rem;font-weight:800}.invite-link button{min-height:45px}.invite-link #share-invite{color:var(--ink);background:transparent;border:1px solid var(--ink)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.game-meta{grid-template-columns:repeat(3,1fr)}.game-meta>div:nth-child(2){text-align:center}.game-meta .lives{display:block;min-height:0;margin:0;color:var(--ink);font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none}.game-meta .lives strong{font-family:DM Mono,monospace;font-size:1.55rem}.room-rounds{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:.72rem;font-weight:800}.room-rounds input{width:84px;min-height:42px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;color:var(--ink)}.room-waiting{padding-top:62px}.room-waiting h1{font-size:clamp(2.8rem,10vw,4.4rem)}