:root{--bg:#1b1f3b;--card:#ffffff;--ink:#16182b;--muted:#5b5f7a;--accent:#f45454;--good:#0f8a6c;--good-bg:#72f0d8;--bad:#c93636;--bad-bg:#ffd7d7;--gold:#f8d84a;--radius:18px;font-size:16px}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.45;-webkit-text-size-adjust:100%}
body.embedded{background:transparent}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:9}
.skip:focus{left:.5rem}
.nojs{padding:1rem;color:#fff}
.app{max-width:520px;margin:0 auto;padding:12px 12px max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;min-height:100vh}
body.embedded .app{min-height:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.show-logo{width:110px;height:auto;background:#fff;border-radius:14px;padding:6px 10px}
.station[hidden]{display:none}
.station{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 14px 6px 6px;font-weight:700;max-width:60%}
.station img{width:36px;height:36px;object-fit:contain;border-radius:50%}
.station span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{position:relative;overflow:hidden;background:var(--card);border-radius:var(--radius);padding:14px 14px 18px;box-shadow:0 8px 30px rgba(0,0,0,.25);outline:none}
.screen{display:flex;flex-direction:column;gap:12px}
.screen[hidden]{display:none}

/* Cartoon host (Dave / Amanda / Aaron): only the chosen host's variant groups show */
.dave .hv{display:none}
.dave[data-host="dave"] .hv-dave,.dave[data-host="amanda"] .hv-amanda,.dave[data-host="aaron"] .hv-aaron{display:inline}
.hosts{border:0;margin:0;padding:0;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.hosts legend{width:100%;text-align:center;font-weight:800;margin-bottom:6px;padding:0}
.host{position:relative;flex:1 1 0;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid #d0d2e0;border-radius:14px;padding:6px 4px 6px;cursor:pointer;font-weight:800;background:#f7f8fc;touch-action:manipulation}
.host img{width:64px;height:64px;display:block}
.host input{position:absolute;opacity:0;width:1px;height:1px}
.host:has(input:checked){border-color:var(--accent);background:#fff1f1;box-shadow:0 0 0 2px var(--accent) inset}
.host:has(input:checked) span::after{content:" ✓"}
.host:has(input:focus-visible){outline:4px solid var(--gold);outline-offset:2px}
.dave-fig{margin:0 auto;text-align:center;width:100%;max-width:300px}
.dave{display:block;width:100%;height:auto;max-height:210px}
.dave-fig figcaption{margin-top:2px;font-size:.85rem}
.tag{display:inline-block;background:var(--ink);color:#fff;font-weight:800;border-radius:999px;padding:2px 10px}
.tiny-cap{color:var(--muted);font-size:.75rem}
.dave .off{display:none}
.dave [data-part]{transform-box:fill-box;transform-origin:center}
.dave .pop{animation:pop .35s ease-out}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.dave.win #arm-l-up,.dave.win #arm-r-up{animation:wave .6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom center}
@keyframes wave{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.dave.lose #eyes-swirl path{animation:spin 1.2s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.dave.lose .onair-box{fill:#8d91ad}
.dave.lose #mic-floor{animation:drop .5s ease-in}
@keyframes drop{from{transform:translateY(-90px)}to{transform:translateY(0)}}

.title{font-size:clamp(2rem,9vw,2.8rem);margin:0;line-height:1.05;letter-spacing:-.02em;text-align:center}
.title .hm{display:block;color:var(--accent)}
.lede{font-size:1.08rem;text-align:center;margin:0}
.meta{color:var(--muted);text-align:center;margin:0;font-size:.95rem}
.sample-note,.badge{background:#fff3c4;color:#5a4500;border:2px dashed #c9a400;border-radius:10px;padding:6px 10px;font-weight:700;text-align:center;margin:0}
.badge{align-self:center;font-size:.8rem;padding:2px 10px}
.btn{font:inherit;font-weight:800;border:0;border-radius:14px;min-height:52px;padding:12px 18px;cursor:pointer;touch-action:manipulation;transition:transform .08s}
.btn:active{transform:scale(.97)}
.btn:focus-visible,a:focus-visible,.key:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:default}
.btn.big{font-size:1.2rem;min-height:60px}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid #d0d2e0}
.btn.link{background:none;color:var(--muted);min-height:44px;text-decoration:underline;font-weight:700}

.bar{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800}
.cat{background:#eef1ff;color:#1d2a7a;border-radius:999px;padding:4px 12px}
.misses{background:var(--gold);border-radius:999px;padding:4px 12px;white-space:nowrap}
.misses.danger{background:var(--bad-bg);color:var(--bad)}

.puzzle{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;padding:4px 0;min-height:48px}
.word{display:flex;gap:4px}
.tile{width:clamp(22px,7.2vw,32px);height:40px;border-bottom:4px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;font-size:clamp(1.25rem,6vw,1.6rem);font-weight:900;line-height:1;padding-bottom:3px}
.tile.punct{border-bottom-color:transparent;width:auto;min-width:10px}
.tile.hit{animation:pop .3s ease-out}
.tile.missed{color:var(--bad)}
.status{min-height:1.4em;text-align:center;margin:0;font-weight:700;color:var(--muted)}

.kb{display:flex;flex-direction:column;gap:6px;user-select:none}
.kb-row{display:flex;justify-content:center;gap:5px}
.key{font:inherit;font-weight:800;font-size:1.15rem;flex:1 1 0;max-width:44px;min-width:0;height:50px;border:0;border-radius:9px;background:#e4e7f3;color:var(--ink);box-shadow:inset 0 -3px 0 #c3c7da;cursor:pointer;touch-action:manipulation;padding:0}
.key:active{transform:translateY(1px)}
.key.hit{background:var(--good-bg);color:#043d30;box-shadow:inset 0 -3px 0 var(--good)}
.key.miss{background:var(--bad-bg);color:#8a1d1d;box-shadow:none;text-decoration:line-through}
.key[disabled]{cursor:default}
.hint{font-size:.8rem;color:var(--muted);text-align:center;margin:0}
@media (pointer:coarse){.hint{display:none}}

#end-title{text-align:center;margin:0;font-size:1.9rem}
.win #end-title{color:var(--good)}
.lose #end-title{color:var(--bad)}
.verdict{font-weight:700;font-size:1.08rem;margin:0;text-align:center}
.answer{text-align:center;margin:0;font-size:1.1rem}
.answer strong{letter-spacing:.06em}
.share-status{min-height:1.2em;text-align:center;margin:0;font-weight:700;color:var(--good)}

.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:fall var(--d,2.4s) var(--delay,0s) ease-in forwards}
@keyframes fall{to{transform:translateY(var(--y,700px)) translateX(var(--x,0)) rotate(var(--r,540deg));opacity:0}}

.banner{background:var(--accent);color:#fff;border-radius:var(--radius);padding:12px 16px;text-align:center}
.banner p{margin:.2em 0}
.banner-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.banner-links a{color:#fff;font-weight:800;background:rgba(0,0,0,.18);border-radius:999px;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.foot{color:#d9dbee;text-align:center;font-size:.9rem}
.foot a{color:#fff;font-weight:700}
body.embedded .foot{color:var(--muted)}
body.embedded .foot a{color:var(--ink)}
.tiny{font-size:.75rem;opacity:.8}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
#end-title:focus{outline:none}