/* annabel.css — Annabel's Room (age 10-11, "maths coach", NEVER babyish).
   Gaming-HUD / Roblox / DTI / Olivia-Rodrigo aesthetic.
   Ported from the T2 visual contract (annabel-room-mockup.html) + build additions.
   Mobile-first: base = tablet portrait (768). Scales to landscape + laptop.
   Touch targets >=48px. Confidence-protective: NO red for wrong, no "incorrect". */

:root{
  --bg0:#0C0A1C;
  --bg1:#181138;
  --bg2:#241657;
  --panel:rgba(255,255,255,.055);
  --panel-2:rgba(255,255,255,.09);
  --line:rgba(167,139,250,.30);
  --line-bright:rgba(167,139,250,.6);
  --ink:#F3F0FF;
  --muted:#ABA4D6;
  --violet:#A78BFA;
  --violet-d:#8B5CF6;
  --pink:#F472B6;
  --cyan:#22D3EE;
  --lime:#A3E635;
  --xp:#FBBF24;
  --green:#34D399;
  --warm:#FBBF24;       /* "tiny slip" — never red */
  --radius:22px;
  --radius-sm:14px;
  --tap:52px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(139,92,246,.45) 0%, transparent 55%),
    radial-gradient(800px 600px at 95% 5%, rgba(244,114,182,.35) 0%, transparent 50%),
    radial-gradient(700px 700px at 70% 110%, rgba(34,211,238,.22) 0%, transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 60%,var(--bg0));
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:1120px;margin:0 auto;padding:14px 14px 40px;position:relative;z-index:2;}

/* accessibility helpers */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--violet-d);color:#fff;
  padding:12px 18px;border-radius:0 0 12px 0;font-family:'Space Grotesk';font-weight:700;}
.skip-link:focus{left:0;}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}

/* subtle particle/grid sheen */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(167,139,250,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(167,139,250,.06) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,#000 30%,transparent 90%);}
.spark{position:fixed;border-radius:50%;z-index:0;pointer-events:none;filter:blur(1px);
  animation:float 9s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);opacity:.6;}50%{transform:translateY(-22px);opacity:1;}}

/* glass card base */
.glass{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);}

/* ===================== HUD ===================== */
.hud{display:flex;align-items:center;gap:12px;padding:12px 14px;flex-wrap:wrap;}
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;
  font-family:'Space Grotesk';font-weight:600;font-size:13.5px;padding:8px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);min-height:44px;}
.backlink .material-icons-round{font-size:19px;}
.rank{display:flex;align-items:center;gap:11px;}
.rank .badge{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:26px;flex:none;
  background:linear-gradient(145deg,var(--violet-d),var(--pink));
  box-shadow:0 0 18px rgba(167,139,250,.55), inset 0 1px 0 rgba(255,255,255,.3);}
.rank .meta{line-height:1.15;}
.rank .meta .name{font-family:'Space Grotesk';font-weight:700;font-size:18px;}
.rank .meta .tier{font-size:12.5px;color:var(--violet);font-weight:600;letter-spacing:.3px;}

.xpwrap{flex:1 1 200px;min-width:160px;}
.xprow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.xprow .lv{font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--ink);}
.xprow .nx{font-size:12px;color:var(--muted);font-weight:500;}
.xptrack{height:14px;border-radius:10px;background:rgba(0,0,0,.35);overflow:hidden;border:1px solid var(--line);}
.xpfill{height:100%;width:0%;border-radius:10px;
  background:linear-gradient(90deg,var(--xp),#F59E0B);box-shadow:0 0 12px rgba(251,191,36,.7);
  transition:width .8s cubic-bezier(.2,.9,.3,1);}

.streak{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:14px;
  background:linear-gradient(145deg,rgba(244,114,182,.22),rgba(251,146,60,.18));border:1px solid rgba(251,146,60,.4);
  font-family:'Space Grotesk';font-weight:700;font-size:18px;white-space:nowrap;}
.streak .fl{font-size:20px;animation:flame 1.4s ease-in-out infinite;}
@keyframes flame{0%,100%{transform:scale(1) rotate(-3deg);}50%{transform:scale(1.15) rotate(3deg);}}

.avatarcard{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 8px;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line);}
.avatarcard .main{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:28px;flex:none;
  background:radial-gradient(circle at 40% 30%,#3A2A6E,#1C1240);box-shadow:inset 0 0 12px rgba(167,139,250,.4);}
.squad{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1;}
.squad span{opacity:.85;}
.iconbtn{width:var(--tap);height:var(--tap);min-width:var(--tap);border:1px solid var(--line);border-radius:14px;cursor:pointer;
  background:var(--panel-2);display:grid;place-items:center;transition:transform .12s, background .12s;}
.iconbtn .material-icons-round{font-size:26px;color:var(--ink);}
.iconbtn:active{transform:scale(.92);}
.iconbtn.muted{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.5);}
.iconbtn.muted .material-icons-round{color:var(--warm);}

/* ===================== MODE / LEVEL CHIPS ===================== */
.modes{display:flex;gap:9px;overflow-x:auto;padding:14px 2px 4px;margin-top:14px;scrollbar-width:none;}
.modes::-webkit-scrollbar{display:none;}
.chip{flex:none;display:flex;align-items:center;gap:7px;padding:11px 16px;border-radius:14px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:14px;
  font-family:'Space Grotesk';white-space:nowrap;transition:all .15s;min-height:48px;}
.chip .em{font-size:18px;}
.chip:active{transform:scale(.96);}
.chip.active{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--violet-d),var(--pink));box-shadow:0 0 16px rgba(167,139,250,.5);}
.chip.locked{opacity:.5;cursor:not-allowed;}
.chip .lk{font-size:13px;}

/* ===================== BOSS / LEVEL BANNER ===================== */
.levelbanner{margin-top:14px;display:flex;align-items:center;gap:14px;padding:14px 18px;}
.levelbanner .bossface{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:32px;flex:none;
  background:linear-gradient(145deg,#3A1D63,#5B1E6B);box-shadow:0 0 18px rgba(244,114,182,.45);}
.levelbanner .bi{flex:1;min-width:0;}
.levelbanner .bi h2{margin:0;font-family:'Space Grotesk';font-weight:700;font-size:20px;}
.levelbanner .bi p{margin:3px 0 0;font-size:13px;color:var(--muted);}
.bosshp{margin-top:7px;height:9px;border-radius:6px;background:rgba(0,0,0,.4);overflow:hidden;border:1px solid var(--line);}
.bosshp .b{height:100%;width:0%;border-radius:6px;background:linear-gradient(90deg,var(--pink),var(--violet));transition:width .6s;}
.levelbanner .diff{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;}
.diff .pips{display:flex;gap:3px;}
.diff .pip{width:9px;height:18px;border-radius:3px;background:rgba(255,255,255,.12);}
.diff .pip.on{background:var(--lime);box-shadow:0 0 8px rgba(163,230,53,.6);}
.diff small{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;}

/* ===================== QUESTION CARD ===================== */
.session-grid{margin-top:14px;}
.qcard{padding:22px;}
.qhead{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.qtag{font-family:'Space Grotesk';font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  padding:6px 12px;border-radius:10px;background:rgba(34,211,238,.16);color:var(--cyan);border:1px solid rgba(34,211,238,.4);}
.qcount{margin-left:auto;font-size:13px;color:var(--muted);font-family:'Space Grotesk';font-weight:600;}
.qphase{font-size:11px;color:var(--violet);font-family:'Space Grotesk';font-weight:600;text-transform:uppercase;
  letter-spacing:.5px;margin-right:4px;}

.problem{font-size:19px;line-height:1.5;font-weight:500;}
.problem .trap{background:linear-gradient(transparent 55%, rgba(244,114,182,.4) 55%);font-weight:700;padding:0 2px;border-radius:3px;}
.problem .hl{color:var(--cyan);font-weight:700;}

.readbtn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--line);border-radius:13px;padding:11px 16px;font-family:'Space Grotesk';font-weight:600;font-size:14px;
  cursor:pointer;min-height:48px;transition:transform .12s;}
.readbtn:active{transform:scale(.96);}
.readbtn .material-icons-round{font-size:21px;color:var(--violet);}
.readbtn.speaking{border-color:var(--violet);box-shadow:0 0 14px rgba(167,139,250,.5);}

/* ---------- DECODE prompt ---------- */
.decode-q{margin-top:18px;font-family:'Space Grotesk';font-weight:600;font-size:16px;color:var(--lime);}
.choices{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.choice{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border-radius:14px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);font-size:15.5px;font-weight:500;transition:all .14s;
  min-height:56px;text-align:left;color:var(--ink);width:100%;line-height:1.4;}
.choice .k{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;margin-top:1px;
  font-family:'Space Grotesk';font-weight:700;background:rgba(167,139,250,.2);color:var(--violet);}
.choice:active{transform:scale(.985);}
.choice.right{background:rgba(52,211,153,.18);border-color:var(--green);}
.choice.right .k{background:var(--green);color:#04261A;}
.choice.miss{background:rgba(251,191,36,.14);border-color:var(--warm);}

/* ---------- SEQUENCE order chips ---------- */
.seq{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.seqitem{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);font-size:15px;font-weight:500;transition:all .14s;
  min-height:56px;text-align:left;color:var(--ink);width:100%;line-height:1.35;}
.seqitem .ord{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:'Space Grotesk';font-weight:700;background:rgba(255,255,255,.08);color:var(--muted);transition:all .2s;}
.seqitem.picked{border-color:var(--cyan);background:rgba(34,211,238,.12);}
.seqitem.picked .ord{background:var(--cyan);color:#04222A;}
.seqhint{margin-top:10px;font-size:13px;color:var(--muted);}

/* ---------- COMPUTE answer (fraction/decimal/%) ---------- */
.compute{margin-top:18px;}
.ansrow{display:flex;gap:12px;align-items:stretch;}
.prefix{display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:30px;color:var(--muted);padding:0 4px;}
.ansbox{flex:1;min-height:66px;border-radius:14px;border:1.5px solid var(--violet);background:rgba(167,139,250,.08);
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:34px;color:var(--ink);min-width:0;padding:0 10px;}
.ansbox.empty{color:rgba(171,164,214,.5);}
.mic{width:66px;height:auto;flex:none;border-radius:16px;border:none;cursor:pointer;
  background:linear-gradient(160deg,var(--cyan),#0E91A8);display:grid;place-items:center;transition:transform .12s;}
.mic .material-icons-round{font-size:30px;color:#04222A;}
.mic:active{transform:scale(.93);}
.mic.listening{background:linear-gradient(160deg,var(--pink),#BE3F87);animation:micp 1s ease-in-out infinite;}
@keyframes micp{0%,100%{box-shadow:0 0 0 0 rgba(244,114,182,.5);}50%{box-shadow:0 0 0 12px rgba(244,114,182,0);}}
.pad{margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.key{min-height:var(--tap);border:1px solid var(--line);border-radius:13px;background:var(--panel-2);cursor:pointer;
  font-family:'Space Grotesk';font-weight:700;font-size:23px;color:var(--ink);transition:transform .1s,background .1s;padding:12px 0;}
.key:active{transform:scale(.93);background:var(--panel);}
.key.fn{font-size:17px;}
.key.del{color:var(--pink);}

.submit{margin-top:14px;width:100%;min-height:62px;border:none;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,var(--violet-d),var(--pink));color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:20px;
  box-shadow:0 0 22px rgba(167,139,250,.45);transition:transform .1s;display:flex;align-items:center;justify-content:center;gap:9px;}
.submit:active{transform:scale(.98);}
.submit .material-icons-round{font-size:24px;}

/* ===================== HELP CONTROLS ===================== */
.helprow{margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;}
.hbtn{min-height:60px;border-radius:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-family:'Space Grotesk';font-weight:600;font-size:13.5px;border:1px solid var(--line);transition:transform .12s;
  background:var(--panel-2);color:var(--ink);padding:8px 6px;line-height:1.15;text-align:center;}
.hbtn:active{transform:scale(.96);}
.hbtn .em{font-size:22px;}
.hbtn.reexplain{border-color:rgba(167,139,250,.5);}
.hbtn.power{border-color:rgba(163,230,53,.5);color:var(--lime);}
.hbtn.harder{border-color:rgba(244,114,182,.55);color:var(--pink);}
.hbtn:disabled{opacity:.45;cursor:default;}

/* squad reaction toast */
.reaction{margin-top:14px;display:none;align-items:center;gap:12px;padding:13px 16px;border-radius:15px;
  background:var(--panel-2);border:1px solid var(--line);}
.reaction.show{display:flex;animation:slidein .3s ease;}
@keyframes slidein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.reaction .emo{font-size:30px;}
.reaction .emo.wiggle{animation:wiggle .6s ease;}
@keyframes wiggle{0%,100%{transform:rotate(0);}25%{transform:rotate(-18deg) scale(1.15);}75%{transform:rotate(18deg) scale(1.15);}}
.reaction .line{font-size:14.5px;color:var(--muted);font-style:italic;}

/* personal-best banner (transient) */
.pbtoast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-120%);z-index:80;
  display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:16px;
  background:linear-gradient(135deg,rgba(244,114,182,.95),rgba(139,92,246,.95));color:#fff;
  font-family:'Space Grotesk';font-weight:700;font-size:16px;box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:transform .45s cubic-bezier(.2,1.4,.3,1);max-width:90vw;text-align:center;}
.pbtoast.show{transform:translateX(-50%) translateY(0);}

/* ===================== OVERLAYS ===================== */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(8,6,20,.7);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
.overlay.show{display:flex;animation:fade .22s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.sheet{background:linear-gradient(165deg,rgba(40,26,90,.95),rgba(20,14,45,.97));border:1px solid var(--line-bright);
  border-radius:26px;max-width:460px;width:100%;padding:26px 24px;margin:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  animation:rise .32s cubic-bezier(.2,.9,.3,1);}
@keyframes rise{from{transform:translateY(26px) scale(.97);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.sheet .icon{font-size:60px;text-align:center;line-height:1;margin-bottom:6px;}
.sheet h3{font-family:'Space Grotesk';font-weight:700;font-size:25px;margin:4px 0 6px;text-align:center;}
.sheet p{font-size:15.5px;color:var(--muted);line-height:1.5;margin:6px 0;text-align:center;}
.sheet .recipe{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:14px;}
.sheet .recipe .s{display:flex;gap:11px;align-items:flex-start;margin:9px 0;font-size:15px;line-height:1.4;}
.sheet .recipe .s .n{width:26px;height:26px;flex:none;border-radius:8px;background:linear-gradient(145deg,var(--violet-d),var(--pink));
  display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:13px;color:#fff;}
.sheet .recipe .s b{color:var(--cyan);}
.powerchip{display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;padding:10px 16px;border-radius:13px;
  background:rgba(163,230,53,.14);border:1px solid rgba(163,230,53,.5);color:var(--lime);font-family:'Space Grotesk';font-weight:700;font-size:14.5px;}
.xpgain{font-family:'Space Grotesk';font-weight:700;font-size:22px;color:var(--xp);text-align:center;margin-top:14px;text-shadow:0 0 14px rgba(251,191,36,.6);}
.sheet .actions{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.bigbtn{min-height:58px;border:none;border-radius:15px;cursor:pointer;font-family:'Space Grotesk';font-weight:700;font-size:18px;
  transition:transform .1s;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);}
.bigbtn:active{transform:scale(.97);}
.bigbtn.go{background:linear-gradient(135deg,var(--violet-d),var(--pink));color:#fff;box-shadow:0 0 18px rgba(167,139,250,.4);}
.bigbtn.alt{background:rgba(34,211,238,.16);border:1px solid rgba(34,211,238,.4);color:var(--cyan);}
.bigbtn.ghost{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);}

/* RANK UP flair */
.rankup .icon{font-size:70px;animation:rankpop .7s cubic-bezier(.2,1.4,.4,1);}
@keyframes rankpop{0%{transform:scale(0) rotate(-30deg);}70%{transform:scale(1.25) rotate(8deg);}100%{transform:scale(1) rotate(0);}}
.rankrow{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px;flex-wrap:wrap;}
.rankrow .from{color:var(--muted);font-family:'Space Grotesk';font-weight:600;font-size:15px;}
.rankrow .arr{color:var(--violet);font-size:22px;}
.rankrow .to{font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--pink);text-shadow:0 0 14px rgba(244,114,182,.6);}

/* power-move library tags */
.movewrap{margin-top:6px;text-align:center;}
.movetag{display:inline-flex;align-items:center;gap:6px;margin:0 6px 6px 0;padding:7px 12px;border-radius:11px;
  background:rgba(163,230,53,.13);border:1px solid rgba(163,230,53,.4);color:var(--lime);font-size:13px;font-weight:600;}
.movetag.locked{opacity:.45;}

/* ===================== ACHIEVEMENT CARD ===================== */
.achieve{background:linear-gradient(160deg,#241657,#140C2D);border:1px solid var(--line-bright);max-width:480px;
  position:relative;overflow:hidden;}
.achieve::before{content:'';position:absolute;inset:-2px;background:
  conic-gradient(from 0deg, transparent, rgba(167,139,250,.35), transparent 30%, rgba(244,114,182,.3), transparent 60%);
  animation:spin 8s linear infinite;z-index:0;}
@keyframes spin{to{transform:rotate(360deg);}}
.achieve > *{position:relative;z-index:1;}
.achieve .ach-top{display:flex;align-items:center;gap:12px;}
.achieve .ach-av{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font-size:30px;flex:none;
  background:radial-gradient(circle at 40% 30%,#3A2A6E,#1C1240);}
.achieve .ach-top .t b{font-family:'Space Grotesk';font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);}
.achieve .ach-top .t h3{margin:2px 0 0;text-align:left;font-size:22px;}
.ach-stats{display:flex;gap:10px;margin-top:16px;}
.ach-stat{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:13px;padding:12px;text-align:center;}
.ach-stat b{font-family:'Space Grotesk';font-weight:700;font-size:22px;display:block;}
.ach-stat small{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;}
.ach-moves{margin-top:14px;}
.ach-moves .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;}
.ach-next{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center;}
.ach-next b{color:var(--pink);}

/* ===================== CONFETTI / FX ===================== */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;}

/* loading / boot state */
.boot{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:var(--bg0);color:var(--ink);transition:opacity .4s;}
.boot.hide{opacity:0;pointer-events:none;}
.boot .spin{width:44px;height:44px;border-radius:50%;border:4px solid rgba(167,139,250,.25);border-top-color:var(--violet);
  animation:rot 1s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}
.boot .msg{font-family:'Space Grotesk';font-weight:600;color:var(--muted);}
.boot .err{color:var(--warm);max-width:420px;text-align:center;line-height:1.5;font-size:14px;}

/* ===================== RIDICULOUS MODE ===================== */
:root{ --danger:#FF2D6F; --danger-2:#FF6B3D; }

/* the chip — danger/neon-warning, gently pulsing (skull-but-fun) */
.chip.ridiculous{
  color:#fff;border-color:rgba(255,45,111,.7);
  background:linear-gradient(135deg,#3a0a1f,#7a0f2e);
  font-weight:700;letter-spacing:.4px;text-shadow:0 0 8px rgba(255,45,111,.9);
  box-shadow:0 0 14px rgba(255,45,111,.45), inset 0 0 10px rgba(255,45,111,.25);
  animation:ridpulse 1.8s ease-in-out infinite;
}
.chip.ridiculous .em{font-size:19px;}
.chip.ridiculous.active{background:linear-gradient(135deg,var(--danger),var(--danger-2));
  border-color:transparent;box-shadow:0 0 24px rgba(255,45,111,.85);}
@keyframes ridpulse{
  0%,100%{box-shadow:0 0 14px rgba(255,45,111,.45), inset 0 0 10px rgba(255,45,111,.25);}
  50%{box-shadow:0 0 22px rgba(255,45,111,.85), inset 0 0 14px rgba(255,45,111,.4);}
}

/* the 5x gate sheet — dark danger glass, escalating drama lvl1 -> lvl5 */
.sheet.ridiculous{
  background:linear-gradient(165deg,rgba(60,10,30,.97),rgba(20,6,16,.98));
  border:1.5px solid rgba(255,45,111,.6);
  box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 30px rgba(255,45,111,.3), inset 0 1px 0 rgba(255,255,255,.08);
  text-align:center;
}
.sheet.ridiculous .ridskull{font-size:58px;line-height:1;margin-bottom:4px;
  filter:drop-shadow(0 0 14px rgba(255,45,111,.7));animation:ridshake 2.4s ease-in-out infinite;}
.ridmeter{font-family:'Space Grotesk';font-weight:700;font-size:13px;color:var(--danger);
  letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.ridmeter .ridmeterlabel{opacity:.8;}
.ridmeter b{color:#fff;margin-left:4px;}
.ridq{color:#fff !important;text-shadow:0 0 12px rgba(255,45,111,.6);}
.bigbtn.danger{background:linear-gradient(135deg,var(--danger),var(--danger-2));color:#fff;
  box-shadow:0 0 20px rgba(255,45,111,.55);text-shadow:0 0 8px rgba(0,0,0,.3);font-weight:700;}
.sheet.ridiculous.lvl2{box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 42px rgba(255,45,111,.42);}
.sheet.ridiculous.lvl3{box-shadow:0 20px 60px rgba(0,0,0,.75), 0 0 52px rgba(255,45,111,.58);animation:ridjitter 3s ease-in-out infinite;}
.sheet.ridiculous.lvl4{box-shadow:0 20px 60px rgba(0,0,0,.8), 0 0 62px rgba(255,45,111,.72);animation:ridjitter 1.6s ease-in-out infinite;}
.sheet.ridiculous.lvl5{border-color:var(--danger);box-shadow:0 20px 60px rgba(0,0,0,.85), 0 0 78px rgba(255,45,111,.92);animation:ridjitter .9s ease-in-out infinite;}
@keyframes ridshake{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg) scale(1.06);}}
@keyframes ridjitter{0%,100%{transform:translate(0,0);}25%{transform:translate(-1.5px,1px);}50%{transform:translate(1.5px,-1px);}75%{transform:translate(-1px,-1.5px);}}

/* bragging-rights win card */
.sheet.ridwin{background:linear-gradient(160deg,rgba(70,12,36,.97),rgba(24,8,20,.98));
  border:1.5px solid var(--danger);box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 36px rgba(255,45,111,.45);text-align:center;}
.sheet.ridwin .icon{filter:drop-shadow(0 0 16px rgba(255,45,111,.8));animation:rankpop .7s cubic-bezier(.2,1.4,.4,1);}
.sheet.ridwin h3{color:#fff;text-shadow:0 0 14px rgba(255,45,111,.7);}
.ridbadge{display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;padding:11px 18px;border-radius:13px;
  background:linear-gradient(135deg,rgba(255,45,111,.22),rgba(255,107,61,.18));border:1px solid var(--danger);
  color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:14.5px;
  box-shadow:0 0 18px rgba(255,45,111,.4);text-shadow:0 0 8px rgba(255,45,111,.6);}

/* ===================== RIDICULOUS BAIL-OUT (B2) ===================== */
/* Kid-obvious exit shown only inside ridiculous mode. Deliberately CALM cyan/lime (not the
   danger-red of the mode itself) so it reads unmistakably as the safe, no-penalty way out.
   Sits above the question card -- not hidden in the chip row. Tap target >= 48px. */
.ridbail{margin-bottom:14px;display:flex;flex-direction:column;gap:9px;padding:14px 16px;border-radius:18px;
  background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(163,230,53,.13));
  border:1.5px solid rgba(34,211,238,.65);box-shadow:0 0 20px rgba(34,211,238,.3), inset 0 1px 0 rgba(255,255,255,.08);
  animation:ridbailIn .3s ease;}
@keyframes ridbailIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.ridbailbtn{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:12px 22px;
  border-radius:14px;cursor:pointer;border:none;
  background:linear-gradient(135deg,var(--cyan),#0E91A8);color:#04222A;
  font-family:'Space Grotesk';font-weight:700;font-size:17px;letter-spacing:.2px;
  box-shadow:0 0 18px rgba(34,211,238,.55);transition:transform .1s;}
.ridbailbtn:active{transform:scale(.97);}
.ridbailbtn:hover{box-shadow:0 0 26px rgba(34,211,238,.8);}
.ridbailnote{font-size:13.5px;color:var(--ink);opacity:.95;font-style:italic;line-height:1.45;}

/* ===================== JOKE BUTTON (topbar) ===================== */
.jokebtn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-family:'Space Grotesk';font-weight:600;font-size:13.5px;
  cursor:pointer;transition:transform .12s,border-color .12s;}
.jokebtn .em{font-size:17px;}
.jokebtn:active{transform:scale(.95);}
.jokebtn:hover{border-color:var(--line-bright);}

/* ===================== ESCAPE ROOM CHIP (unlocked) ===================== */
.chip.escape-ready{opacity:1;cursor:pointer;color:#fff;border-color:rgba(34,211,238,.6);
  background:linear-gradient(135deg,#0e2a33,#15202b);box-shadow:0 0 14px rgba(34,211,238,.4);
  animation:escChipPulse 2.6s ease-in-out infinite;}
@keyframes escChipPulse{0%,100%{box-shadow:0 0 12px rgba(34,211,238,.35);}50%{box-shadow:0 0 20px rgba(163,230,53,.5);}}

/* ===================== RESPONSIVE ===================== */
@media (min-width:960px){
  .session-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:16px;align-items:start;}
  .col-right{position:sticky;top:16px;}
  .problem{font-size:20px;}
}
@media (max-width:380px){
  .helprow{grid-template-columns:1fr;}
  .pad{gap:7px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important;}
}