.ag-studio p,.ag-studio li{margin:0;color:inherit;font-size:inherit;line-height:inherit}

.ag-eyebrow{font-size:.64rem!important;font-weight:800;letter-spacing:.2em;color:#97b8c5;margin:0 0 .7rem}
.ag-studio{--ag-accent:var(--cyan-soft);isolation:isolate;color:var(--ink)}
.ag-body{display:grid;grid-template-columns:minmax(0,1fr) 260px}
.ag-play{padding:2rem 2.5rem;min-width:0}
.ag-player{display:flex;align-items:center;gap:1rem;min-height:90px}
.ag-avatar{width:60px;height:60px;flex:none;display:grid;place-items:center;border:1px solid #86cbbb66;border-radius:18px;background:linear-gradient(135deg,#45675f,#192b37);font:800 1.5rem var(--head);box-shadow:0 0 35px #7fe3ff15}
.ag-player h2{font:800 clamp(1.2rem,2vw,1.65rem) var(--head);margin:.25rem 0}
.ag-player p{color:#b3c5d1;font-size:.76rem;margin:0;line-height:1.6}
.ag-player .ag-eyebrow{font-size:.56rem!important}
.ag-bank{margin-left:auto;text-align:right;flex:none}
.ag-bank span,.ag-bank small{display:block;color:#b3c5d1;font-size:.65rem;letter-spacing:.1em}
.ag-bank strong{display:block;font:800 clamp(1.4rem,2.5vw,2rem) var(--head);color:#baf4dc;font-variant-numeric:tabular-nums}
.ag-question-wrap{position:relative;border-top:1px solid #ffffff18;margin-top:1.6rem;padding-top:1.5rem;min-height:410px}
.ag-question-meta{display:flex;justify-content:space-between;gap:1rem;color:#a6c4ce;font-size:.69rem;letter-spacing:.08em}
.ag-question-meta span:first-child{color:#b8f3de}
.ag-kicker{font-size:.6rem;font-weight:700;letter-spacing:.22em;color:#9bb3c2;margin:2rem 0 1rem}
.ag-question-wrap h2{font:700 clamp(1.35rem,2.5vw,2.2rem)/1.4 var(--head);letter-spacing:-.02em;min-height:3.9em;margin:0 0 1.6rem;max-width:850px;text-wrap:pretty}
.ag-answers{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;min-height:144px}
.ag-answer{display:flex;gap:.8rem;align-items:center;padding:1.1rem;border:1px solid #38515e;border-radius:12px;background:#15212cc4;font-size:clamp(.85rem,1.4vw,1.05rem);line-height:1.45;transition:background .4s,border-color .4s;overflow-wrap:anywhere;min-width:0}
.ag-answer b{font-size:.72rem;font-weight:800;color:#a8c8cf;width:26px;flex:none}
.ag-answer.locked{border-color:#f5c987;background:#51402a;color:#fff1d5}
.ag-answer.correct{border-color:#b2f6d4;background:#214d40;color:#ebfff2}
.ag-answer.incorrect{border-color:#f4a6b4;background:#4e2536;color:#ffe6eb}
.ag-answer.removed{opacity:.3;text-decoration:line-through}
.ag-result-label{margin-left:auto;font-size:.65rem;letter-spacing:.04em}
.ag-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:58px;margin-top:1rem;font-size:.85rem;color:#d4e6ed}
.ag-status>span:last-child{font-variant-numeric:tabular-nums;color:#a4c5cf;flex:none}
.ag-timer{height:2px;background:#ffffff15;overflow:hidden}
.ag-timer>div{height:100%;background:#a8e3d5;transform-origin:left}
.ag-fact{font-size:.75rem;line-height:1.8;color:#adc0cc;min-height:2.7em;margin:1rem 0 0}
.ag-ladder-panel{padding:2.2rem 1.4rem;background:#09121bc9;border-left:1px solid #ffffff12}
.ag-ladder-panel h2{font:700 1.4rem var(--head);margin:0 0 .5rem}
.ag-ladder-note{font-size:.7rem;color:#a5b8c6;margin:0 0 1.3rem}
.ag-ladder{display:flex;flex-direction:column-reverse;list-style:none;padding:0;margin:0;gap:.32rem}
.ag-ladder li{display:flex;justify-content:space-between;align-items:center;border:1px solid transparent;border-radius:7px;padding:.5rem .65rem;color:#91a9b8;font-size:.8rem;font-variant-numeric:tabular-nums}
.ag-ladder li span{font-size:.6rem;letter-spacing:.08em}
.ag-ladder li.safe{color:#e1cba4;background:#bca4770b}
.ag-ladder li.passed{color:#c1ddd2}
.ag-ladder li.current{background:#a8e3d51a;border-color:#a8e3d580;color:#e9fff7;box-shadow:0 0 24px #baf4dc0a}
.ag-help{border-top:1px solid #ffffff14;padding-top:1.3rem;margin-top:1.3rem}
.ag-help>span{font-size:.58rem;letter-spacing:.12em;color:#a8bfcd}
.ag-help p{font-size:.73rem;line-height:1.8;color:#c3d6df}
.ag-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:1.1rem 2.5rem;border-top:1px solid #ffffff14;background:#070d1599;gap:1rem}
.ag-stat span{display:block;color:#a5bbc7;font-size:.6rem;letter-spacing:.1em}
.ag-stat strong{display:block;font:700 1.2rem var(--head);margin-top:.35rem;font-variant-numeric:tabular-nums}
.ag-assistance{border:1px solid #c6b1e55c;background:#342b4766;border-radius:10px;padding:1rem;margin-top:1rem;color:#e0d4f7;font-size:.82rem;line-height:1.8}
.ag-votes{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.7rem}
.ag-votes div{background:#ffffff09;border-radius:6px;padding:.6rem;text-align:center}
.ag-votes strong{display:block}
.ag-studio[data-phase="SUSPENSE"]{--ag-accent:#e9c38e}
.ag-studio[data-phase="SUSPENSE"] .ag-question-wrap{border-color:#d6b58980}
.ag-studio[data-phase="CORRECT"] .ag-avatar{box-shadow:0 0 45px #7fe3ff40}
.ag-studio:fullscreen{max-width:none;width:100%;height:100%;border:0;border-radius:0;overflow:auto;display:flex;flex-direction:column;justify-content:center}
.ag-studio:fullscreen .ag-body{width:100%;max-width:1600px;align-self:center}
.ag-studio:fullscreen .ag-play{padding:3vh 4vw}
.ag-studio:fullscreen .ag-question-wrap h2{font-size:clamp(1.5rem,3vw,3rem)}

@media(min-width:1500px){.ag-play{padding:2.5rem 3rem}
.ag-question-wrap{min-height:450px}
}

@media(max-width:1480px){}

@media(max-width:1000px){.ag-body{grid-template-columns:minmax(0,1fr) 210px}
.ag-play{padding:1.5rem}
.ag-ladder-panel{padding:1.5rem 1rem}
.ag-bank strong{font-size:1.35rem}
.ag-avatar{width:48px;height:48px}
}

@media(max-width:760px){.ag-description br{display:none}
.ag-body{display:block}
.ag-ladder-panel{border-left:0;border-top:1px solid #ffffff14}
.ag-ladder-panel h2,.ag-ladder-note,.ag-ladder-panel>.ag-eyebrow{display:none}
.ag-ladder{display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem}
.ag-ladder li{padding:.45rem .15rem;flex-direction:column;gap:.25rem;font-size:.68rem}
.ag-ladder li span{font-size:.5rem}
.ag-help{margin-top:.7rem;padding-top:.7rem}
.ag-help p{margin:.4rem 0 0}
.ag-question-wrap{min-height:0}
.ag-question-wrap h2{min-height:4.2em}
.ag-stats{padding:1rem;gap:.5rem}
.ag-stat strong{font-size:1rem}
.ag-stat span{font-size:.5rem}
.ag-play{padding:1.25rem}
.ag-player{gap:.65rem;flex-wrap:wrap}
.ag-player>div:nth-child(2){flex:1;min-width:120px}
.ag-bank{margin-left:0}
.ag-kicker{margin-top:1.6rem}
.ag-answers{gap:.6rem}
.ag-answer{padding:.8rem;gap:.45rem}
.ag-answer b{width:16px}
}

@media(max-width:430px){.ag-play{padding:1rem}
.ag-answers{grid-template-columns:1fr;min-height:260px}
.ag-answer{min-height:58px}
.ag-question-wrap h2{font-size:1.3rem;min-height:0}
.ag-bank{width:100%;display:flex;align-items:baseline;gap:.4rem;border-top:1px solid #ffffff12;padding-top:.7rem}
.ag-bank strong{margin-left:auto}
.ag-ladder{grid-template-columns:repeat(4,1fr)}
.ag-question-meta{font-size:.6rem}
.ag-status{font-size:.77rem}
}

@media(prefers-reduced-motion:reduce){.ag-studio *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Shared Sleep Live frame; quiz-specific content stays inside it. */
.ag-page .doc{max-width:900px}

.ag-studio .game-head .g-actions{flex-wrap:wrap}

.ag-studio .g-btn{min-height:44px}


.ag-studio *{box-sizing:border-box}
.ag-studio h2,.ag-studio p,.ag-status,.ag-question-meta{overflow-wrap:anywhere}
.ag-player>div:nth-child(2){min-width:0}
.ag-studio .g-actions{min-width:0}
.ag-studio .g-btn{white-space:normal}
/* `.g-btn{display:grid}` outranks the user-agent `[hidden]{display:none}`, so
   the rotate control would stay on screen on desktop without this. */
.ag-studio .g-btn[hidden]{display:none}

/* ---------- Afterglow stage theme ----------
 * A gold-framed studio set under blue spotlights: each part of the show
 * (challenger, question, console, ladder, stats) sits on its own lit panel.
 * Everything is scoped to .ag-studio so the shared Sleep Live frame is untouched. */
.ag-studio{--ag-gold:#f0c46c;--ag-gold-hi:#ffe4a6;--ag-gold-line:#e9b75fb3;--ag-serif:'DM Serif Display',Georgia,'Times New Roman',serif}
.ag-studio.game-card{border-color:#e9b75f80;background:
  radial-gradient(ellipse 14% 75% at 18% -5%,#6f86ff38,transparent 70%),
  radial-gradient(ellipse 14% 75% at 50% -5%,#8a9bff30,transparent 70%),
  radial-gradient(ellipse 14% 75% at 82% -5%,#6f86ff38,transparent 70%),
  radial-gradient(ellipse 70% 22% at 50% 102%,#f3b24a30,transparent 70%),
  radial-gradient(ellipse 120% 90% at 50% 35%,#1d2282,#0a0d45 55%,#04051c);
  box-shadow:0 0 0 1px #ffd98a1a,0 0 50px #f3b24a26,0 30px 80px #000a}
.ag-studio .game-head{border-bottom:0;background:none;padding:.9rem 1.2rem .5rem}
.ag-studio .g-live{color:#ff8a8a}
.ag-studio .g-btn{border:1px solid var(--ag-gold-line);background:linear-gradient(180deg,#161c55,#080b2e);color:#fff;border-radius:12px;padding:0 .9rem;box-shadow:inset 0 1px 0 #ffffff14,0 0 14px #f3b24a26}
.ag-studio #ag-rotate:not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap}
.ag-studio .g-btn:hover{border-color:var(--ag-gold-hi);color:#fff;box-shadow:inset 0 1px 0 #ffffff1f,0 0 18px #f3b24a55}
.ag-studio .g-btn[aria-pressed="true"]{color:#fff;border-color:#ffd98a;background:linear-gradient(180deg,#2438b8,#101a6e);box-shadow:inset 0 1px 0 #ffffff2a,0 0 18px #5b7bff80}
.ag-studio .ag-body{grid-template-columns:minmax(0,1fr) 270px;gap:1.2rem;padding:.4rem 1.2rem 1.2rem;background:none}
.ag-studio .ag-play{padding:0}
.ag-studio .ag-eyebrow{color:var(--ag-gold)}

/* shared panel look: gold hairline, deep navy glass, warm glow */
.ag-studio .ag-player,.ag-studio .ag-console,.ag-studio .ag-ladder-panel,.ag-studio .ag-stats{border:1px solid var(--ag-gold-line);border-radius:16px;background:linear-gradient(180deg,#141b5ce6,#070a2cf0);box-shadow:inset 0 0 0 1px #ffd98a14,inset 0 1px 0 #ffe4a622,0 0 22px #f3b24a33,0 12px 30px #0000007a}

/* challenger */
.ag-studio .ag-player{padding:1rem 1.4rem;min-height:0;gap:1.1rem}
.ag-studio .ag-avatar{width:72px;height:72px;border-radius:50%;border:2px solid var(--ag-gold);background:radial-gradient(circle at 50% 35%,#3a5bff,#0d1660 72%);color:#fff;font:800 1.45rem var(--head);box-shadow:0 0 0 4px #0a0f3a,0 0 0 5px #e9b75f88,0 0 26px #f3b24a66}
.ag-studio .ag-player h2{font:400 clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--ag-serif);color:#fff;margin:.2rem 0}
.ag-studio .ag-player p{color:#cfd6f6}
.ag-studio .ag-player .ag-eyebrow{letter-spacing:.24em}
.ag-studio .ag-bank{text-align:center;border-left:1px solid #e9b75f55;padding-left:1.6rem;min-width:120px}
.ag-studio .ag-bank span,.ag-studio .ag-bank small{color:var(--ag-gold);letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.ag-studio .ag-bank strong{font:400 clamp(1.8rem,3vw,2.5rem)/1.05 var(--ag-serif);color:#fff;text-shadow:0 0 18px #ffe4a655}

/* question: an angled, gold-edged marquee */
.ag-studio .ag-question-wrap{border-top:0;margin-top:1.2rem;padding-top:0;min-height:0}
.ag-question-panel{--ag-cut:30px;position:relative;isolation:isolate;padding:1.1rem calc(var(--ag-cut) + 1.2rem) 1.5rem;clip-path:polygon(var(--ag-cut) 0,calc(100% - var(--ag-cut)) 0,100% 50%,calc(100% - var(--ag-cut)) 100%,var(--ag-cut) 100%,0 50%);background:linear-gradient(180deg,#ffe4a6,#d59a3e 50%,#ffe4a6);filter:drop-shadow(0 0 16px #f3b24a55)}
.ag-question-panel::before{content:"";position:absolute;inset:2px;z-index:-1;clip-path:inherit;background:radial-gradient(ellipse 80% 90% at 50% 0,#2a36a8,transparent 70%),linear-gradient(180deg,#141c62,#070a30)}
.ag-studio .ag-question-meta{align-items:center;color:#dfe4ff;font-size:.66rem}
.ag-studio .ag-question-meta span:first-child{display:inline-block;padding:.35rem 1.4rem .35rem .8rem;background:linear-gradient(180deg,#f7cf7c,#b97d24);color:#1b1204;font-weight:800;letter-spacing:.14em;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);border-radius:3px 0 0 3px;margin-left:-.6rem}
.ag-studio .ag-kicker{color:#e8ebff;font-size:.66rem;letter-spacing:.3em;margin:.7rem 0 .4rem}
.ag-studio .ag-question-wrap h2{font:400 clamp(1.6rem,3vw,2.6rem)/1.2 var(--ag-serif);letter-spacing:0;min-height:2.6em;margin:0 auto;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff8ea;text-shadow:0 2px 0 #0006,0 0 22px #ffe4a633}

/* answers */
.ag-studio .ag-answers{margin-top:1.1rem}
.ag-studio .ag-answer{border:1px solid var(--ag-gold-line);border-radius:14px;background:linear-gradient(180deg,#151d60,#080c34);color:#fff;box-shadow:inset 0 1px 0 #ffe4a61f,0 0 12px #f3b24a1f}
.ag-studio .ag-answer b{color:var(--ag-gold)}
.ag-studio .ag-answer.locked{border-color:#ffd98a;background:linear-gradient(180deg,#b4781f,#6b420c);color:#fff;box-shadow:0 0 22px #f3b24a80}
.ag-studio .ag-answer.correct{border-color:#a6f5c8;background:linear-gradient(180deg,#1f7a55,#0d3f2c);color:#effff5;box-shadow:0 0 22px #4fe0a070}
.ag-studio .ag-answer.incorrect{border-color:#ffa3b3;background:linear-gradient(180deg,#7d2338,#3e0f1d);color:#ffe9ee}
.ag-studio .ag-answer.locked b,.ag-studio .ag-answer.correct b,.ag-studio .ag-answer.incorrect b{color:inherit}
.ag-studio .ag-assistance{border-color:#9fb4ff80;background:#1a2272cc;color:#e5e9ff}

/* host console: status, gold timer, disclaimer */
.ag-console{margin-top:1.2rem;padding:.9rem 1.4rem 1rem}
.ag-studio .ag-status{margin-top:0;min-height:1.6em;color:#eef1ff}
.ag-studio .ag-status>span:last-child{color:#dfe4ff}
.ag-studio .ag-timer{height:10px;margin-top:.55rem;border-radius:999px;background:#060935;border:1px solid #ffffff26;box-shadow:inset 0 1px 3px #000a}
.ag-studio .ag-timer>div{border-radius:999px;background:linear-gradient(180deg,#fff0c4,#f0b545 55%,#c98722);box-shadow:0 0 12px #f3b24a99}
.ag-studio .ag-fact{text-align:center;color:#d4daf6;margin:.7rem 0 0;min-height:1.8em;font-size:.84rem;line-height:1.6}
.ag-studio .ag-fact:empty{display:none}

/* ladder */
.ag-studio .ag-ladder-panel{padding:1.2rem 1rem;text-align:center;align-self:start}
.ag-studio .ag-ladder-panel>.ag-eyebrow{letter-spacing:.22em;margin-bottom:.35rem}
.ag-studio .ag-ladder-panel h2{font:400 clamp(1.6rem,2.4vw,2rem)/1.1 var(--ag-serif);margin:0 0 .3rem;background:linear-gradient(180deg,#fff3cf,#f0c46c 55%,#c98a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.ag-studio .ag-ladder-note{color:#dfe4ff;font-size:.82rem;margin:0 0 .9rem}
.ag-studio .ag-ladder{gap:.4rem}
.ag-studio .ag-ladder li{border:1px solid #5a72e0a6;border-radius:10px;background:linear-gradient(180deg,#131b5c,#0a0f3c);color:#fff;font-size:.9rem;font-weight:700;padding:.45rem .8rem;box-shadow:inset 0 1px 0 #ffffff12}
.ag-studio .ag-ladder li span{color:#d6ddff;font-size:.72rem;font-weight:600}
.ag-studio .ag-ladder li.passed{border-color:#9fb4ff;background:linear-gradient(180deg,#22339a,#121c66)}
.ag-studio .ag-ladder li.safe{border-color:#ffd98a;background:linear-gradient(90deg,#7a4c12,#d99a35 50%,#7a4c12);color:#fff;text-shadow:0 1px 2px #0008;box-shadow:0 0 14px #f3b24a55}
.ag-studio .ag-ladder li.safe span{color:#fff3d6;letter-spacing:.14em}
.ag-studio .ag-ladder li.current{border:2px solid #ffe4a6;background:linear-gradient(90deg,#8a5714,#e7aa42 50%,#8a5714);color:#fff;text-shadow:0 1px 2px #0009;box-shadow:0 0 22px #f3b24acc,inset 0 0 12px #fff3}
.ag-studio .ag-ladder li.current span{color:#fff}
.ag-studio .ag-help{text-align:left;border-top-color:#e9b75f44}
.ag-studio .ag-help>span{color:var(--ag-gold);letter-spacing:.16em;font-weight:700}
.ag-studio .ag-help p{color:#e3e7ff}

/* session stats */
.ag-studio .ag-stats{margin:0 1.2rem 1.2rem;padding:.9rem 0;gap:0}
.ag-studio .ag-stat{text-align:center;padding:0 .5rem;min-width:0}
.ag-studio .ag-stat+.ag-stat{border-left:1px solid #e9b75f44}
.ag-studio .ag-stat span{color:var(--ag-gold);letter-spacing:.18em;font-weight:700}
.ag-studio .ag-stat strong{font:400 1.8rem/1.1 var(--ag-serif);color:#fff}

@media(max-width:1000px){
  .ag-studio .ag-body{grid-template-columns:minmax(0,1fr) 220px;gap:1rem;padding:.4rem 1rem 1rem}
  .ag-studio .ag-avatar{width:56px;height:56px;font-size:1.15rem}
  .ag-studio .ag-ladder li{padding:.4rem .6rem;font-size:.82rem}
  .ag-studio .ag-stats{margin:0 1rem 1rem}
}
@media(max-width:760px){
  .ag-studio .ag-body{display:flex;flex-direction:column;padding:.3rem .8rem .8rem;gap:.8rem}
  .ag-studio .ag-player{padding:.9rem 1rem}
  .ag-studio .ag-bank{margin-left:auto;padding-left:1rem;min-width:0}
  .ag-question-panel{--ag-cut:18px;padding:.9rem calc(var(--ag-cut) + .6rem) 1.1rem}
  .ag-studio .ag-question-meta span:first-child{margin-left:0}
  .ag-studio .ag-question-wrap h2{font-size:clamp(1.3rem,5.4vw,1.8rem);min-height:3.6em}
  .ag-studio .ag-console{padding:.8rem 1rem .9rem}
  .ag-studio .ag-ladder-panel{padding:.8rem;align-self:stretch}
  .ag-studio .ag-ladder{gap:.3rem}
  .ag-studio .ag-ladder li{padding:.4rem .15rem;font-size:.7rem;justify-content:center}
  .ag-studio .ag-ladder li span{font-size:.52rem}
  .ag-studio .ag-stats{margin:0 .8rem .8rem;padding:.7rem 0}
  .ag-studio .ag-stat strong{font-size:1.3rem}
  .ag-studio .ag-stat span{letter-spacing:.08em}
}
@media(max-width:430px){
  .ag-studio .ag-bank{width:100%;margin-left:0;padding:.6rem 0 0;border-left:0;border-top:1px solid #e9b75f44;display:flex;align-items:baseline;gap:.4rem;text-align:left}
  .ag-studio .ag-question-meta{flex-wrap:wrap;gap:.4rem}
  .ag-studio .ag-stat span{font-size:.46rem}
}

/* ---------- fullscreen and landscape rotation ----------
 * Mirrors the other Sleep Live games: FullscreenManager pins the card for
 * browsers without the Fullscreen API and OrientationRotator holds landscape
 * (Screen Orientation lock where allowed, CSS card rotation otherwise).
 * Scrolling is intentional inside the card — at extreme zoom or a 320x480
 * phone the quiz must stay readable rather than clip the question or answers. */
html.ag-fullscreen,body.ag-fullscreen{overflow:hidden;overscroll-behavior:none}
.ag-fullscreen .ag-studio{position:fixed;inset:0;z-index:10000;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;overflow:auto;display:block;container-type:size;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
/* The card's box is swapped to landscape and then turned 90deg, so its
   children lay out in a real landscape frame. Safe-area insets swap axes. */
.ag-rotated .ag-studio{inset:auto;left:50%;top:50%;width:100dvh;height:100dvw;transform:translate(-50%,-50%) rotate(90deg);padding:max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-bottom))}
.ag-fullscreen .ag-play{padding:12px 18px}
.ag-fullscreen .ag-player{gap:10px}
.ag-fullscreen .ag-avatar{width:38px;height:38px;font-size:1rem}
.ag-fullscreen .ag-question-wrap{min-height:0;margin-top:10px;padding-top:10px}
.ag-fullscreen .ag-kicker{margin:6px 0}
.ag-fullscreen .ag-question-wrap h2{min-height:0;font-size:clamp(1.1rem,2.2vw,2rem);line-height:1.25;margin:8px 0 12px}
.ag-fullscreen .ag-answers{min-height:0}
.ag-fullscreen .ag-answer{min-height:44px;padding:9px;font-size:.9rem}
.ag-fullscreen .ag-status{min-height:0;margin-top:10px;font-size:.8rem;line-height:1.4}
.ag-fullscreen .ag-fact{min-height:0;line-height:1.4;margin-top:8px}
.ag-fullscreen .ag-ladder-panel{padding:12px}
.ag-fullscreen .ag-ladder li{padding:5px}
.ag-fullscreen .ag-stats{padding:8px 18px}
.ag-fullscreen .ag-stat strong{margin-top:2px}
.ag-fullscreen .ag-assistance{padding:8px;margin-top:8px;line-height:1.4}
.ag-fullscreen .ag-help{padding-top:8px;margin-top:8px}
/* Wide frames (rotated phone, tablet, desktop) get the two-column studio. The
   container query — not a media query — is what makes this work: the viewport
   is still portrait while the card is rotated. 520px is the narrowest real
   landscape frame (a 320x568 phone turned side-on), so nothing is ever left on
   the single-column path just because the viewport reports portrait. */
@container(min-width:520px){
  .ag-fullscreen .ag-body{display:grid;grid-template-columns:minmax(0,1fr) 168px}
  .ag-fullscreen .ag-answers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-fullscreen .ag-ladder{display:flex;flex-direction:column-reverse}
  .ag-fullscreen .ag-ladder li{flex-direction:row;font-size:.7rem;padding:.35rem .5rem}
  .ag-fullscreen .ag-ladder-panel h2,.ag-fullscreen .ag-ladder-note,.ag-fullscreen .ag-ladder-panel>.ag-eyebrow{display:none}
  .ag-fullscreen .ag-help{padding-top:.6rem;margin-top:.6rem}
  .ag-fullscreen .ag-help p{font-size:.66rem;line-height:1.5}
  .ag-fullscreen .ag-bank{width:auto;display:block;border:0;margin-left:auto;padding:0}
  .ag-fullscreen .ag-player{flex-wrap:nowrap}
  .ag-fullscreen .game-head{display:flex;flex-wrap:nowrap;gap:6px;padding:6px 12px}
  .ag-fullscreen .game-head .g-actions{width:auto;margin-left:auto;flex-wrap:nowrap}
  .ag-fullscreen .g-actions .g-btn{flex:0 0 auto;padding:0 .55rem}
}
/* Short landscape frames (a phone held side-on is ~320-390px tall) cannot carry
   the reading-page rhythm, so the studio drops to a single tight column of
   essentials: question, four answers, status. The running commentary line and
   the hint are the first things to go, then every vertical gap shrinks. */
@container(max-height:440px){
  .ag-fullscreen .ag-fact{display:none}
  .ag-fullscreen .game-head{padding:4px 10px}
  .ag-fullscreen .game-head .g-btn{min-width:34px;min-height:34px;padding:0 .45rem;font-size:.6rem}
  .ag-fullscreen .game-head .g-btn svg{width:15px;height:15px}
  .ag-fullscreen .g-live{font-size:.56rem}
  .ag-fullscreen .ag-play{padding:8px 12px}
  .ag-fullscreen .ag-player{min-height:0;gap:.6rem}
  .ag-fullscreen .ag-avatar{width:30px;height:30px;font-size:.8rem;border-radius:12px}
  .ag-fullscreen .ag-player h2{font-size:.9rem;margin:0}
  .ag-fullscreen .ag-player p{font-size:.66rem;line-height:1.4}
  .ag-fullscreen .ag-player .ag-eyebrow{font-size:.5rem!important;margin-bottom:.15rem}
  .ag-fullscreen .ag-question-wrap{margin-top:.5rem;padding-top:.5rem}
  .ag-fullscreen .ag-question-meta{font-size:.55rem}
  .ag-fullscreen .ag-kicker{margin:.3rem 0;font-size:.5rem}
  .ag-fullscreen .ag-question-wrap h2{font-size:clamp(.95rem,2.4vh,1.3rem);line-height:1.25;margin:.35rem 0 .5rem}
  .ag-fullscreen .ag-answers{gap:.4rem}
  .ag-fullscreen .ag-answer{min-height:38px;padding:.5rem .6rem;font-size:.78rem;gap:.45rem;border-radius:9px}
  .ag-fullscreen .ag-answer b{width:15px;font-size:.62rem}
  .ag-fullscreen .ag-status{margin-top:.5rem;font-size:.72rem;min-height:0}
  .ag-fullscreen .ag-assistance{padding:.5rem;margin-top:.5rem;font-size:.72rem;line-height:1.35}
  .ag-fullscreen .ag-stats{padding:5px 12px}
  .ag-fullscreen .ag-stat span{font-size:.5rem}
  .ag-fullscreen .ag-stat strong{font-size:.82rem;margin-top:1px}
  .ag-fullscreen .ag-ladder li{padding:.28rem .45rem;font-size:.62rem}
  .ag-fullscreen .ag-ladder{gap:.2rem}
  .ag-fullscreen .ag-ladder-panel{padding:.6rem}
  .ag-fullscreen .ag-help{margin-top:.5rem;padding-top:.5rem}
  .ag-fullscreen .ag-help p{font-size:.58rem;line-height:1.35}
}

.ag-page .law-article h2{font:italic 900 clamp(1.65rem,3.5vw,2.6rem)/1.05 var(--head);text-transform:uppercase;margin:3rem 0 1rem}

@media(max-width:760px){.ag-studio .g-actions{width:100%;margin-left:0}
.ag-studio .g-btn{flex:1;font-size:.65rem;padding:.4rem}
.ag-studio .game-head{gap:.6rem}
}

/* Fullscreen keeps the stage theme but restores the compact rhythm above: the
   theme rules match the fullscreen selectors' specificity and come later, so
   the sizing that matters in a fixed frame is re-asserted here. */
.ag-fullscreen .ag-studio .game-head{padding:6px 12px}
.ag-fullscreen .ag-studio .ag-body{padding:4px 12px 10px;gap:10px}
.ag-fullscreen .ag-studio .ag-player{padding:8px 14px}
.ag-fullscreen .ag-studio .ag-avatar{width:44px;height:44px;font-size:1rem;box-shadow:0 0 0 3px #0a0f3a,0 0 0 4px #e9b75f88,0 0 16px #f3b24a55}
.ag-fullscreen .ag-studio .ag-question-wrap{margin-top:10px}
.ag-fullscreen .ag-question-panel{--ag-cut:20px;padding:8px calc(var(--ag-cut) + 10px) 10px}
.ag-fullscreen .ag-studio .ag-question-wrap h2{min-height:0;font-size:clamp(1.1rem,2.6vw,2.2rem);margin:4px auto}
.ag-fullscreen .ag-studio .ag-answers{margin-top:10px}
.ag-fullscreen .ag-studio .ag-console{margin-top:10px;padding:8px 14px}
.ag-fullscreen .ag-studio .ag-fact{min-height:0}
.ag-fullscreen .ag-studio .ag-ladder-panel{padding:10px}
.ag-fullscreen .ag-studio .ag-ladder li{padding:5px 8px;font-size:.78rem}
.ag-fullscreen .ag-studio .ag-stats{margin:0 12px 10px;padding:6px 0}
.ag-fullscreen .ag-studio .ag-stat strong{font-size:1.2rem}
@container(min-width:520px){
  .ag-fullscreen .ag-studio .ag-body{display:grid;grid-template-columns:minmax(0,1fr) 190px}
}
@container(max-height:440px){
  .ag-fullscreen .ag-studio .game-head{padding:4px 10px}
  .ag-fullscreen .ag-studio .ag-body{padding:2px 8px 6px;gap:8px}
  .ag-fullscreen .ag-studio .ag-player{padding:5px 10px}
  .ag-fullscreen .ag-studio .ag-avatar{width:30px;height:30px;font-size:.75rem;border-width:1px}
  .ag-fullscreen .ag-studio .ag-player h2{font-size:1rem;margin:0}
  .ag-fullscreen .ag-studio .ag-bank{padding-left:.8rem;min-width:0}
  .ag-fullscreen .ag-studio .ag-bank strong{font-size:1.1rem}
  .ag-fullscreen .ag-studio .ag-question-wrap{margin-top:6px}
  .ag-fullscreen .ag-question-panel{--ag-cut:14px;padding:5px calc(var(--ag-cut) + 8px) 6px}
  .ag-fullscreen .ag-studio .ag-question-meta span:first-child{padding:.2rem 1rem .2rem .5rem;margin-left:0}
  .ag-fullscreen .ag-studio .ag-kicker{margin:.25rem 0}
  .ag-fullscreen .ag-studio .ag-question-wrap h2{font-size:clamp(.95rem,2.6vh,1.3rem);line-height:1.2;margin:.2rem auto}
  .ag-fullscreen .ag-studio .ag-answers{margin-top:6px}
  .ag-fullscreen .ag-studio .ag-answer{border-radius:9px}
  .ag-fullscreen .ag-studio .ag-console{margin-top:6px;padding:5px 10px}
  .ag-fullscreen .ag-studio .ag-timer{height:6px;margin-top:4px}
  .ag-fullscreen .ag-studio .ag-ladder-panel{padding:6px}
  .ag-fullscreen .ag-studio .ag-ladder li{padding:.22rem .45rem;font-size:.62rem;border-radius:7px}
  .ag-fullscreen .ag-studio .ag-ladder li span{font-size:.5rem}
  .ag-fullscreen .ag-studio .ag-stats{margin:0 8px 6px;padding:4px 0}
  .ag-fullscreen .ag-studio .ag-stat strong{font-size:.9rem}
}



/* ---------- arena backdrop ----------
 * The studio set photo is the background of the game card only; the rest of
 * the page keeps the shared site background. The card's own layers stack as:
 * the spotlight glows, a cinematic dark overlay, then the photo. Because the
 * card is the element that goes fullscreen, the same backdrop fills the screen
 * there too. The first background-image is the WebP fallback for browsers
 * without image-set() type() support; the second picks AVIF where it can. */
.ag-studio.game-card{background-color:#04051c;background-position:0 0,0 0,0 0,0 0,50% 45%,50% 45%,50% 45%;background-size:auto,auto,auto,auto,cover,cover,cover;background-repeat:no-repeat;
  background-image:
    radial-gradient(ellipse 14% 75% at 18% -5%,#6f86ff2e,transparent 70%),
    radial-gradient(ellipse 14% 75% at 50% -5%,#8a9bff26,transparent 70%),
    radial-gradient(ellipse 14% 75% at 82% -5%,#6f86ff2e,transparent 70%),
    radial-gradient(ellipse 70% 22% at 50% 102%,#f3b24a26,transparent 70%),
    radial-gradient(ellipse 75% 65% at 50% 45%,#04051c00,#04051c66 70%,#02030fb3),
    linear-gradient(180deg,#02030fb3,#04051c73 30%,#04051c8c 70%,#02030fd9),
    url(../images/pulse-afterglow/arena-background.webp);
  background-image:
    radial-gradient(ellipse 14% 75% at 18% -5%,#6f86ff2e,transparent 70%),
    radial-gradient(ellipse 14% 75% at 50% -5%,#8a9bff26,transparent 70%),
    radial-gradient(ellipse 14% 75% at 82% -5%,#6f86ff2e,transparent 70%),
    radial-gradient(ellipse 70% 22% at 50% 102%,#f3b24a26,transparent 70%),
    radial-gradient(ellipse 75% 65% at 50% 45%,#04051c00,#04051c66 70%,#02030fb3),
    linear-gradient(180deg,#02030fb3,#04051c73 30%,#04051c8c 70%,#02030fd9),
    image-set(url(../images/pulse-afterglow/arena-background.avif) type("image/avif"),url(../images/pulse-afterglow/arena-background.webp) type("image/webp"))}

/* glass panels: translucent navy, blurred arena behind, gold hairline + glow */
.ag-studio .ag-player,.ag-studio .ag-console,.ag-studio .ag-ladder-panel,.ag-studio .ag-stats{background:linear-gradient(180deg,#141b5ce0,#070a2ceb);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:inset 0 0 0 1px #ffd98a14,inset 0 1px 0 #ffe4a622,0 0 24px #f3b24a3d,0 0 40px #5b7bff1f,0 12px 30px #0000008c}
.ag-studio .ag-timer{background:#060935e6}

/* question marquee: the gold becomes a 2px ring (an evenodd polygon whose hole
   matches the inner fill exactly) so the fill itself can be translucent */
.ag-question-panel{background:none}
.ag-question-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#ffe4a6,#d59a3e 50%,#ffe4a6);clip-path:polygon(evenodd,
  var(--ag-cut) 0,calc(100% - var(--ag-cut)) 0,100% 50%,calc(100% - var(--ag-cut)) 100%,var(--ag-cut) 100%,0 50%,var(--ag-cut) 0,
  calc(var(--ag-cut) + 2px) 2px,2px 50%,calc(var(--ag-cut) + 2px) calc(100% - 2px),calc(100% - var(--ag-cut) - 2px) calc(100% - 2px),calc(100% - 2px) 50%,calc(100% - var(--ag-cut) - 2px) 2px,calc(var(--ag-cut) + 2px) 2px)}
.ag-question-panel::before{background:radial-gradient(ellipse 80% 90% at 50% 0,#2a36a8d9,transparent 70%),linear-gradient(180deg,#141c62eb,#070a30f2)}

/* answers keep every state colour, now slightly see-through */
.ag-studio .ag-answer{background:linear-gradient(180deg,#151d60e6,#080c34f0)}
.ag-studio .ag-answer.locked{background:linear-gradient(180deg,#b4781ff0,#6b420cf2)}
.ag-studio .ag-answer.correct{background:linear-gradient(180deg,#1f7a55f0,#0d3f2cf2)}
.ag-studio .ag-answer.incorrect{background:linear-gradient(180deg,#7d2338f0,#3e0f1df2)}

/* ladder rungs */
.ag-studio .ag-ladder li{background:linear-gradient(180deg,#131b5ce0,#0a0f3ceb)}
.ag-studio .ag-ladder li.passed{background:linear-gradient(180deg,#22339ae6,#121c66eb)}
.ag-studio .ag-ladder li.safe{background:linear-gradient(90deg,#7a4c12f0,#d99a35 50%,#7a4c12f0)}

.ag-studio:fullscreen::backdrop{background:#02030f}

/* without backdrop blur, firm the glass up so text contrast holds */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ag-studio .ag-player,.ag-studio .ag-console,.ag-studio .ag-ladder-panel,.ag-studio .ag-stats{background:linear-gradient(180deg,#141b5cf2,#070a2cf7)}
}
/* tall cards (portrait phones): keep the podium and spotlights centred */
@media(orientation:portrait){.ag-studio.game-card{background-position:0 0,0 0,0 0,0 0,50% 60%,50% 60%,50% 60%}}
/* short landscape phones: favour the upper rig so it isn't all floor */
@media(orientation:landscape) and (max-height:500px){.ag-studio.game-card{background-position:0 0,0 0,0 0,0 0,50% 35%,50% 35%,50% 35%}}