:root{--bg:#1b1f3b;--card:#ffffff;--ink:#16182b;--muted:#5b5f7a;--accent:#f45454;--ok:#0f8a6c;--ok-bg:#72f0d8;--no:#c93636;--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:560px;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:120px;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{background:var(--card);border-radius:var(--radius);padding:20px 18px 22px;box-shadow:0 8px 30px rgba(0,0,0,.25);outline:none}
.screen{display:flex;flex-direction:column;gap:14px}
.screen[hidden]{display:none}
.title{font-size:clamp(2.4rem,11vw,3.2rem);margin:.1em 0 0;line-height:1;letter-spacing:-.02em;text-align:center}
.title .or{color:var(--accent)}
.lede{font-size:1.1rem;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:flex-start;font-size:.85rem;padding:3px 10px}
.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}

/* —— Studio stage —— */
.studio-stage{margin:2px 0 4px;display:flex;flex-direction:column;gap:8px}
.studio-stage--end{margin:4px 0 0}
.studio-viewer{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#0e1020;box-shadow:0 6px 18px rgba(0,0,0,.22);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:none}
.studio-viewer:active{cursor:grabbing}
.studio-viewer:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.studio-frames{position:absolute;inset:0}
.studio-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s ease;pointer-events:none}
.studio-frame.is-active{opacity:1}
.studio-viewer.is-playing .studio-frame{opacity:0}
.studio-viewer.is-css-spin .studio-frames{animation:studio-y-spin .9s ease-in-out}
@keyframes studio-y-spin{0%{transform:perspective(800px) rotateY(0)}50%{transform:perspective(800px) rotateY(180deg)}100%{transform:perspective(800px) rotateY(360deg)}}
.studio-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0e1020;z-index:2}
.studio-video[hidden]{display:none}
.dave-hotspot{position:absolute;left:35%;top:22%;width:30%;height:58%;z-index:3;border:0;padding:0;margin:0;background:transparent;cursor:pointer;border-radius:18px}
.dave-hotspot:focus-visible{outline:3px solid var(--gold);outline-offset:2px;background:rgba(248,216,74,.15)}
.studio-viewer.is-playing .dave-hotspot{pointer-events:none}
.studio-hint{position:absolute;left:8px;right:8px;bottom:8px;z-index:4;margin:0;padding:5px 10px;border-radius:999px;background:rgba(14,16,32,.62);color:#fff;font-size:.72rem;font-weight:700;text-align:center;pointer-events:none;opacity:.95;transition:opacity .3s}
.studio-viewer.is-hint-gone .studio-hint{opacity:0}
.studio-controls{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center}
.studio-controls .btn{min-height:48px;padding:8px 10px;font-size:.95rem;text-align:center}
.studio-controls .studio-nav{padding:8px;font-size:1.1rem;line-height:1}
.studio-controls .studio-talk{background:#f3f4fa;box-shadow:inset 0 -3px 0 #c5c8dc}
.studio-controls .studio-talk.is-on{background:var(--accent);color:#fff;box-shadow:none}
.host-names{list-style:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:0;padding:0;text-align:center;font-size:.8rem;font-weight:800;color:var(--muted)}
.host-names [aria-current="true"]{color:var(--ink)}

/* —— Play screen: studio IS the game —— */
/* Keep 16/9 matching studio stills so object-fit:cover does not crop Amanda/Aaron off the sides */
.screen-play{gap:10px}
.play-hud{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.studio-stage--play{margin:0;position:relative;gap:0;width:100%;max-width:100%}
.studio-viewer--play{
  aspect-ratio:16/9;
  width:100%;
  max-width:100%;
  min-height:0;
  max-height:min(48vh,420px);
  border-radius:16px 16px 0 0;
  cursor:default;
  box-shadow:none;
}
.studio-viewer--play:active{cursor:default}
.studio-viewer--play .studio-frame,
.studio-viewer--play .studio-video{
  object-fit:contain;
  object-position:center center;
  background:#0e1020;
}
@media (min-width:480px){
  .studio-viewer--play{max-height:min(52vh,460px)}
}
@media (max-height:640px){
  .studio-viewer--play{max-height:38vh}
}
/* Full desk visible on play — slightly wider card so Aaron isn't past the right edge */
body.playing .app{max-width:640px;overflow-x:clip}
body.playing main{overflow:visible}

/* Host hotspots on studio image (Amanda L · Dave C · Aaron R) — keep all three inside the frame */
.host-spot{position:absolute;z-index:5;border:0;padding:0;margin:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;border-radius:14px;transition:background .2s,box-shadow .2s,transform .08s;max-width:32%}
.amanda-spot{left:1%;top:12%;width:30%;height:72%;pointer-events:none}
.dave-spot{left:34%;top:10%;width:32%;height:74%;cursor:pointer;touch-action:manipulation}
.aaron-spot{left:67%;top:12%;width:31%;height:72%;cursor:pointer;touch-action:manipulation}
.host-spot-name{font-size:.68rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:rgba(14,16,32,.72);padding:3px 8px;border-radius:999px;margin-bottom:6%;pointer-events:none}
.host-chip{font-size:.95rem;font-weight:900;letter-spacing:.02em;min-width:52px;padding:6px 12px;border-radius:999px;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.35);pointer-events:none;margin-bottom:2%}
.host-spot.is-yes .host-chip{background:var(--ok)}
.host-spot.is-bs .host-chip{background:var(--no)}
.host-spot.is-yes{box-shadow:inset 0 0 0 3px rgba(15,138,108,.55)}
.host-spot.is-bs{box-shadow:inset 0 0 0 3px rgba(201,54,54,.5)}
.dave-spot:active,.aaron-spot:active{transform:scale(.97)}
.dave-spot:focus-visible,.aaron-spot:focus-visible{outline:3px solid var(--gold);outline-offset:2px;background:rgba(248,216,74,.18)}
.host-spot[disabled]{opacity:.55;cursor:default;pointer-events:none}
.host-spot.is-talking{background:rgba(248,216,74,.22);box-shadow:inset 0 0 0 3px var(--gold),0 0 24px rgba(248,216,74,.35)}
.amanda-spot.is-talking{background:rgba(244,84,84,.2);box-shadow:inset 0 0 0 3px var(--accent),0 0 22px rgba(244,84,84,.35)}
.studio-viewer.is-playing .host-spot{pointer-events:none}
.studio-viewer.is-playing .host-chip,.studio-viewer.is-playing .host-spot-name{opacity:.35}

/* Lower-third / speech over studio */
.studio-lower{background:linear-gradient(180deg,#1a1e38 0%,#12152a 100%);color:#fff;border-radius:0 0 16px 16px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.studio-lower .badge{align-self:flex-start}
.speech{background:rgba(255,255,255,.1);border-radius:14px;padding:10px 12px;border-left:4px solid var(--accent)}
.speech.is-live{animation:speech-pulse .9s ease-out 1}
@keyframes speech-pulse{0%{box-shadow:0 0 0 0 rgba(244,84,84,.55)}100%{box-shadow:0 0 0 12px rgba(244,84,84,0)}}
.speech-who{display:block;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#f8a0a0;margin-bottom:4px}
.claim{margin:0;font-size:clamp(1.25rem,5.2vw,1.6rem);font-weight:700;line-height:1.3;color:#fff}
.legend{margin:0;text-align:center;font-size:.9rem;color:#c5c8dc;font-weight:700}
.legend strong{color:#fff}
.hint{font-size:.78rem;color:#9aa0c0;text-align:center;margin:0}
@media (pointer:coarse){.hint{display:none}}

/* Reveal overlay on studio */
.studio-reveal{position:absolute;inset:0;z-index:8;background:rgba(14,16,32,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;gap:12px;justify-content:center;overflow:auto}
.studio-reveal[hidden]{display:none!important}
.studio-reveal .reveal{color:#fff}
.studio-reveal .reveal h2{font-size:clamp(1.6rem,7vw,2.1rem);margin:0}
.studio-reveal .reveal.right h2{color:var(--ok-bg)}
.studio-reveal .reveal.wrong h2{color:#ff8e8e}
.studio-reveal .verdict{font-weight:800;font-size:1.05rem;margin:.3em 0;color:#fff}
.studio-reveal .r-claim{font-weight:700;color:#c5c8dc}
.studio-reveal .reveal p{margin:.35em 0;color:#e8eaf6}
.studio-reveal .source{font-size:.9rem;color:#c5c8dc}
.studio-reveal .source a{color:var(--gold);font-weight:700}
.studio-reveal .badge{margin-top:4px}
.reveal-score{font-weight:900;font-size:1.1rem;color:var(--gold)!important}
.studio-reveal .btn{width:100%}

@media (prefers-reduced-motion:reduce){
  .studio-frame{transition:none}
  .studio-viewer.is-css-spin .studio-frames{animation:none}
  .speech.is-live{animation:none}
}

.btn{font:inherit;font-weight:800;border:0;border-radius:14px;min-height:56px;padding:12px 18px;cursor:pointer;touch-action:manipulation;transition:transform .08s;text-align:left}
.btn:active{transform:scale(.97)}
.btn:focus-visible,a:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.btn[disabled]{opacity:.6;cursor:default}
.btn.big{font-size:1.25rem;min-height:64px;text-align:center}
.btn.primary{background:var(--accent);color:#fff;text-align:center}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid #d0d2e0;text-align:center}
.count{color:var(--muted)}
.score{background:var(--gold);border-radius:999px;padding:4px 12px;color:var(--ink)}
.progress{height:8px;background:#eceef6;border-radius:99px;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.final{font-size:4.5rem;font-weight:900;text-align:center;margin:0;line-height:1}
.final .of{font-size:.45em;color:var(--muted)}
#end-title{text-align:center;margin:0}
#end-msg{text-align:center}
.share-status{min-height:1.2em;text-align:center;margin:0;font-weight:700;color:var(--ok)}
.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}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Full-bleed feel on play */
body.playing main{padding:12px 10px 14px}
body.playing .top{padding:0 2px}
body.playing .banner,body.playing .foot{opacity:.92}