/* ================================================================
   CYBERTRON ACADEMY — 90s Geocities × G1 Transformers
   ================================================================ */

:root {
  --bg-space:   #08001a;
  --bg-deep:    #1a0033;
  --bg-violet:  #2e0066;
  --magenta:    #ff00cc;
  --magenta-hi: #ff66dd;
  --cyan:       #00ffff;
  --cyan-hi:    #99ffff;
  --bumble:     #ffcc00;
  --bumble-hi:  #fff066;
  --autobot:    #d61f1f;
  --autobot-hi: #ff5050;
  --lime:       #aaff00;
  --silver-1:   #ffffff;
  --silver-2:   #c8d0d8;
  --silver-3:   #6a7480;
  --silver-4:   #2a2f38;
  --ink:        #f4f6ff;
  --ink-dim:    #c8b8ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: 'Orbitron', 'VT323', system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}
button { font-family: inherit; cursor: pointer; }

/* ---------- 90s starfield + scanlines background ---------- */
body.space {
  background:
    /* big stars */
    radial-gradient(2px 2px at 20% 30%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 10%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 60%, #fff, transparent 60%),
    radial-gradient(2px 2px at 12% 75%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 85%, #fff, transparent 60%),
    radial-gradient(1px 1px at 35% 50%, #fff, transparent 60%),
    radial-gradient(2px 2px at 80% 35%, var(--bumble), transparent 60%),
    radial-gradient(2px 2px at 5% 18%, var(--cyan), transparent 60%),
    /* tiled star + grid layer */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='10' cy='12' r='0.7' fill='%23ffffff'/><circle cx='37' cy='65' r='0.6' fill='%23ffffff' opacity='0.7'/><circle cx='82' cy='40' r='0.8' fill='%23ffffff' opacity='0.85'/><circle cx='66' cy='88' r='0.5' fill='%2300ffff' opacity='0.7'/><circle cx='90' cy='12' r='0.5' fill='%23ffcc00' opacity='0.8'/></svg>"),
    /* purple cosmic gradient */
    radial-gradient(ellipse at 30% 0%, rgba(255,0,204,0.20), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(0,255,255,0.18), transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-space) 60%, #000 100%);
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100px 100px,
    100% 100%, 100% 100%, 100% 100%;
}

body.space::before {
  /* scanlines overlay */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  background-size: 100% 3px;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ---------- Screens ---------- */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; padding: 0; z-index: 2; }
.screen.active { display: flex; }

/* ---------- Top marquee ---------- */
.marquee {
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--autobot) 0%, var(--bumble) 50%, var(--autobot) 100%);
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  overflow: hidden;
  padding: 6px 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #1a0000;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  box-shadow: 0 4px 0 rgba(0,0,0,0.4);
  position: relative;
  z-index: 5;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
  gap: 60px;
  padding-left: 60px;
}
.marquee-track span { white-space: nowrap; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Browser window chrome ---------- */
.window {
  flex: 1 1 auto;
  margin: 14px clamp(10px, 2.4vw, 28px) 10px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #2a0044 0%, #110022 100%);
  border: 3px solid var(--cyan);
  box-shadow:
    0 0 0 3px #000,
    0 0 24px rgba(0, 255, 255, 0.45),
    0 0 60px rgba(255, 0, 204, 0.25),
    inset 0 0 20px rgba(255, 0, 204, 0.10);
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
}

.window-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #ff66dd 0%, #aa0099 50%, #660066 100%);
  border-bottom: 3px solid #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}
.window-dots { display: flex; gap: 5px; }
.window-dots .dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid #000;
  display: block;
}
.dot.r { background: radial-gradient(circle at 30% 30%, #ff8a8a, #c00); }
.dot.y { background: radial-gradient(circle at 30% 30%, #ffe96b, #b58a00); }
.dot.g { background: radial-gradient(circle at 30% 30%, #aaff90, #2a8a00); }
.window-title { flex: 1; text-align: center; letter-spacing: 0.08em; }
.window-x { font-family: 'VT323', monospace; font-size: 18px; }

.window-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 18px);
  padding: clamp(10px, 1.8vh, 22px);
  overflow: auto;
}

/* ---------- Hero row ---------- */
/*
   Sizing per #109 — asymmetric flank, reclaim above-the-fold height for
   the academy map. Solo: player only at 140px, single-column grid so the
   title fills. VS: player 140px, rival 80px (shrunk harder — your hero
   is the protagonist; the rival is a threat, not equal billing). The
   previous 220px-each layout ate ~280px of vertical and pushed the map
   below the iPad-portrait fold; the previous solo-mode rule hid BOTH
   figures, leaving the kid's default mode with zero hero presence.
*/
.hero-row {
  display: grid;
  grid-template-columns: 160px 1fr 100px;
  align-items: center;
  gap: 18px;
}

/* Solo mode: restore the player portrait (was display:none — #109
   pushback), drop the rival, collapse to a 2-column grid so the title
   sits next to the hero instead of being shoved alone. Sized to keep
   the academy map's top edge above the iPad fold. */
body:not(.mode-vs) #home .hero-row { grid-template-columns: 160px 1fr; }
body:not(.mode-vs) #home .hero-fig.optimus  { display: block; }
body:not(.mode-vs) #home .hero-fig.megatron { display: none; }

.hero-fig {
  text-align: center;
  position: relative;
  /* Cheer / sympathy emotes ride on the .hero-fig (figure) so the inner
     img's existing floatY bob keeps running independently — animations
     stack across nested elements but not within the same element. */
  transform-origin: center bottom;
}
.hero-fig img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 3px solid #000;
  box-shadow:
    0 0 0 2px #fff,
    0 0 14px rgba(255, 0, 204, 0.6),
    8px 8px 0 rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, #f8f8ff 0%, #c0c0d8 100%);
  filter: contrast(1.05) saturate(1.05);
  animation: floatY 4s ease-in-out infinite;
}
/* Asymmetric sizing — player twice the rival. */
.hero-fig.optimus  img { max-width: 140px; }
.hero-fig.megatron img { max-width: 80px;  animation-delay: -2s; transform: scaleX(-1); }
@keyframes floatY {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(3px); }
}
.hero-fig.megatron img { animation: floatY-flip 4s ease-in-out infinite; animation-delay: -2s; }
@keyframes floatY-flip {
  0%, 100% { transform: translateY(-3px) scaleX(-1); }
  50%      { transform: translateY(3px) scaleX(-1); }
}

/* ---------- Reactive emotes (#109) ----------
   .cheering and .commiserating are added by JS on home re-mount when
   state.lastRunResult is set, and removed via the animationend event so
   the figure returns to the idle floatY bob. Tap-pulse is a short scale
   flash on every portrait tap (alongside the picker opening + the voice
   line) — purely visual feedback that the tap registered. */
.hero-fig.cheering       { animation: heroCheer 1500ms ease-out 1; }
.hero-fig.commiserating  { animation: heroSympathy 900ms ease-in-out 1; }
.hero-fig.tap-pulse      { animation: heroTapPulse 240ms ease-out 1; }
@keyframes heroCheer {
  0%   { transform: rotate(0)    scale(1);    }
  15%  { transform: rotate(-6deg) scale(1.07); }
  35%  { transform: rotate(6deg)  scale(1.10); }
  55%  { transform: rotate(-4deg) scale(1.07); }
  75%  { transform: rotate(4deg)  scale(1.04); }
  100% { transform: rotate(0)    scale(1);    }
}
@keyframes heroSympathy {
  0%   { transform: translateX(0)    scale(1); }
  25%  { transform: translateX(-6px) scale(0.97); }
  50%  { transform: translateX(6px)  scale(0.97); }
  75%  { transform: translateX(-3px) scale(0.98); }
  100% { transform: translateX(0)    scale(1); }
}
@keyframes heroTapPulse {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}

.hero-fig figcaption {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Pickable frame around the home portraits */
.hero-fig.pickable {
  cursor: pointer;
  outline: none;
}
.pickable-frame {
  position: relative;
  display: inline-block;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.hero-fig.pickable:hover .pickable-frame,
.hero-fig.pickable:focus-visible .pickable-frame {
  transform: scale(1.03);
  filter: brightness(1.12);
}
.hero-fig.pickable:hover img,
.hero-fig.pickable:focus-visible img {
  box-shadow:
    0 0 0 2px var(--bumble),
    0 0 24px rgba(255, 204, 0, 0.85),
    8px 8px 0 rgba(0, 0, 0, 0.7);
}
/* "Tap to change" caption — overlays the bottom of the image with a dark
   gradient backing so it stays inside the frame and never collides with the
   AUTOBOT/DECEPTICON tag below. */
.pickable-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 4px 5px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: 0.05em;
  color: var(--bumble);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.82) 95%);
  text-shadow: 1px 1px 0 #000, 0 0 6px rgba(255, 204, 0, 0.55);
  pointer-events: none;
  animation: hintPulse 1.8s ease-in-out infinite;
}
.hero-fig.megatron .pickable-hint {
  color: var(--magenta-hi);
  text-shadow: 1px 1px 0 #000, 0 0 6px rgba(255, 0, 204, 0.55);
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1;    }
}

/* Character popup — uses .modal layout but with a tighter grid inside */
.char-popup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px auto 4px;
  max-width: 520px;
}
.char-popup .char-pick {
  padding: 8px 6px 10px;
}
.char-popup .char-pick img {
  aspect-ratio: 1 / 1;
}
.hero-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 4px 8px;
  border: 2px solid #000;
  letter-spacing: 0.08em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.45);
}
.hero-tag.autobot { background: var(--autobot); color: #fff; box-shadow: 2px 2px 0 #000; }
.hero-tag.decepticon { background: var(--magenta); color: #fff; box-shadow: 2px 2px 0 #000; }
.hero-name {
  font-family: 'Audiowide', sans-serif;
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--bumble);
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    0 0 8px rgba(255, 204, 0, 0.6);
}
.hero-name.danger { color: var(--magenta-hi); text-shadow:
    1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    0 0 8px rgba(255, 0, 204, 0.7); }

/* ---------- Chrome WordArt title ---------- */
.hero-center { text-align: center; position: relative; }
.chrome-title {
  font-family: 'Audiowide', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 7.5vh, 84px);
  line-height: 0.92;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ct-line {
  display: block;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e6e6f0 18%,
    #b8c2cf 40%,
    #6c7686 50%,
    #b8c2cf 60%,
    #ffffff 78%,
    #d8dde6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #c8d0d8,
    0 3px 0 #aab2bd,
    0 4px 0 #6a7480,
    0 5px 0 #4a525d,
    0 6px 0 #2a2f38,
    0 8px 12px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(0, 255, 255, 0.35);
  filter: drop-shadow(0 0 12px rgba(255, 0, 204, 0.4));
}
.ct-line-1 { transform: skewX(-6deg); }
.ct-line-2 { transform: skewX(-6deg); margin-top: 4px; }

.hero-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-sparks span {
  position: absolute;
  color: var(--cyan);
  font-size: 18px;
  text-shadow: 0 0 8px var(--cyan);
  animation: twinkle 1.4s ease-in-out infinite;
}
.hero-sparks span:nth-child(1)::before { content:'✦'; }
.hero-sparks span:nth-child(2)::before { content:'★'; color: var(--bumble); text-shadow: 0 0 8px var(--bumble); }
.hero-sparks span:nth-child(3)::before { content:'✧'; color: var(--magenta-hi); text-shadow: 0 0 8px var(--magenta-hi); }
.hero-sparks span:nth-child(4)::before { content:'✦'; }
.hero-sparks span:nth-child(5)::before { content:'★'; color: var(--lime); text-shadow: 0 0 8px var(--lime); }
.hero-sparks span:nth-child(1) { top: 0%;  left: 6%;  animation-delay: 0s; }
.hero-sparks span:nth-child(2) { top: 18%; left: 92%; animation-delay: -0.4s; }
.hero-sparks span:nth-child(3) { top: 78%; left: 4%;  animation-delay: -0.8s; }
.hero-sparks span:nth-child(4) { top: 60%; left: 96%; animation-delay: -0.2s; }
.hero-sparks span:nth-child(5) { top: 100%;left: 50%; animation-delay: -1s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.2) rotate(180deg); }
}

.hero-tag-line {
  margin-top: 10px;
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 2.4vh, 22px);
  color: var(--cyan-hi);
  text-shadow: 0 0 8px var(--cyan), 1px 1px 0 #000;
  letter-spacing: 0.04em;
}
.hero-pitch { margin: 0 8px; color: var(--bumble); }

.blink {
  color: var(--magenta-hi);
  text-shadow: 0 0 8px var(--magenta), 1px 1px 0 #000;
  animation: blink 0.95s steps(2, end) infinite;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  display: inline-block;
  vertical-align: middle;
  padding: 2px 4px;
}
@keyframes blink {
  to { visibility: hidden; }
}

.under-construction {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: repeating-linear-gradient(45deg, #ffcc00 0 12px, #1a0000 12px 24px);
  border: 3px solid #000;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #1a0000;
  background-color: var(--bumble);
}
.uc-bar { width: 18px; height: 12px; background: #000; border-left: 3px solid #ffcc00; border-right: 3px solid #ffcc00; }
.uc-text { background: var(--bumble); padding: 2px 4px; }

/* ---------- Setup grid (cards) ---------- */
/* Top row: hero (always) + rival (VS only). Auto-fit so hero spans full
   width when alone in solo, and splits 50/50 with rival in VS. */
.setup-grid-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

/* Bottom row: language, mission, and mode-specific settings.
   Auto-fit because the visible-card count differs between modes. */
.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.setup-card {
  background:
    linear-gradient(180deg, rgba(0,255,255,0.06), rgba(255,0,204,0.04)),
    #0d0024;
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px var(--cyan),
    inset 0 0 14px rgba(0, 255, 255, 0.15),
    4px 4px 0 rgba(0, 0, 0, 0.6);
  padding: 10px 10px 12px;
  border-radius: 2px;
}
.card-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--bumble);
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255,204,0,0.5);
  margin-bottom: 8px;
}
.card-arrow { color: var(--magenta-hi); margin-right: 6px; }

.toggle-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.big-toggle {
  flex: 1 1 0;
  min-width: 0;
  min-height: 64px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* 90s bevel button */
  background: linear-gradient(180deg, #6a7080 0%, #2a2f38 100%);
  border-top: 3px solid #d8dde6;
  border-left: 3px solid #d8dde6;
  border-right: 3px solid #1a1d22;
  border-bottom: 3px solid #1a1d22;
  color: var(--ink);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  transition: filter 0.1s ease;
}
.big-toggle:active {
  border-top: 3px solid #1a1d22;
  border-left: 3px solid #1a1d22;
  border-right: 3px solid #d8dde6;
  border-bottom: 3px solid #d8dde6;
}
.big-toggle.active {
  background: linear-gradient(180deg, var(--bumble-hi) 0%, var(--bumble) 100%);
  color: #1a0000;
  border-top: 3px solid #fff8c0;
  border-left: 3px solid #fff8c0;
  border-right: 3px solid #806600;
  border-bottom: 3px solid #806600;
  box-shadow: 0 0 16px rgba(255, 204, 0, 0.65);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
.bt-flag { font-size: 22px; line-height: 1; }
.bt-glyph {
  font-family: 'Audiowide', sans-serif;
  font-size: 26px;
  line-height: 1;
  color: var(--cyan-hi);
  text-shadow: 1px 1px 0 #000, 0 0 8px var(--cyan);
}
.big-toggle.active .bt-glyph { color: #1a0000; text-shadow: 1px 1px 0 rgba(255,255,255,0.5); }
.bt-glyph.dashed {
  background: repeating-linear-gradient(180deg, currentColor 0 3px, transparent 3px 6px);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
}
.bt-glyph.faint { color: rgba(0, 255, 255, 0.2); -webkit-text-stroke: 1px var(--cyan); }
.bt-glyph.dual { font-size: 22px; }
.bt-label {
  font-size: 6px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0;
  word-break: keep-all;
  white-space: normal;
}
.big-toggle { padding: 6px 2px; gap: 3px; }

/* ---------- Mega start button ---------- */
.mega-start {
  align-self: center;
  position: relative;
  margin: 10px 0;
  padding: 0;
  background: transparent;
  border: 0;
  transition: transform 0.08s;
}
.mega-start:active { transform: translateY(3px); }
.ms-edge {
  position: absolute;
  inset: 6px -6px -6px 6px;
  background: linear-gradient(135deg, #1a0000, #4a0000);
  border-radius: 6px;
  z-index: 0;
}
.ms-body {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 40px;
  background: linear-gradient(180deg, #ff8a40 0%, var(--autobot) 45%, #8a0a0a 100%);
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #ffdab0,
    inset 0 -8px 12px rgba(0, 0, 0, 0.45),
    inset 0 8px 12px rgba(255, 255, 255, 0.3),
    0 0 24px rgba(255, 85, 0, 0.7),
    0 0 50px rgba(255, 85, 0, 0.35);
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(22px, 4vh, 36px);
  letter-spacing: 0.10em;
  color: #fff;
  text-shadow: 2px 2px 0 #000, 0 0 14px var(--bumble);
}
.ms-star {
  color: var(--bumble-hi);
  text-shadow: 0 0 10px var(--bumble);
  animation: spinStar 2s linear infinite;
  display: inline-block;
}
@keyframes spinStar { to { transform: rotate(360deg); } }

/* ---------- Footer 90s strip ---------- */
.footer-90s {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}
.stat-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.stat-pill {
  display: inline-flex;
  gap: 6px;
  padding: 4px 10px;
  background: #000;
  border: 2px solid var(--lime);
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--lime);
  text-shadow: 0 0 6px var(--lime);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.6);
}
.sl { color: var(--cyan); text-shadow: 0 0 6px var(--cyan); }
.sv { font-weight: bold; }
#visitor-count {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  background: #001a00;
  padding: 2px 4px;
  border: 1px solid var(--lime);
  letter-spacing: 0.10em;
}

.web-ring {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.web-btn {
  width: 88px;
  height: 31px;
  border: 1px solid #fff;
  outline: 1px solid #000;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, var(--cyan) 0%, #006c80 100%);
  color: #001018;
  padding: 0 4px;
}
.web-btn b { display: block; color: var(--magenta); text-shadow: 1px 1px 0 #000; font-size: 7px; margin-bottom: 1px; }
.web-btn.alt {
  background: linear-gradient(180deg, var(--bumble) 0%, #806600 100%);
  color: #1a0000;
}
.web-btn.alt b { color: var(--autobot); }

.legal-blink {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--magenta-hi);
  text-shadow: 0 0 8px var(--magenta);
  letter-spacing: 0.08em;
}

/* ============================================================
   ===================== GAME SCREEN ==========================
   ============================================================ */

#game { background: linear-gradient(180deg, #0a0020 0%, #04000d 100%); }

.game-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #ff66dd 0%, #aa0099 50%, #660066 100%);
  border-bottom: 3px solid #000;
  position: relative;
  z-index: 3;
}
.title-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.game-progress {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 0.06em;
}
.prog-sep { color: var(--bumble); margin: 0 6px; }
#progress-count { color: var(--bumble); }
.energon-bar {
  width: min(360px, 60vw);
  height: 10px;
  background: #1a0000;
  border: 2px solid #000;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.7), 0 0 0 1px #fff;
  overflow: hidden;
  position: relative;
}
.energon-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(45deg, var(--cyan) 0 8px, #00aacc 8px 16px);
  box-shadow: 0 0 10px var(--cyan), inset 0 0 6px rgba(255,255,255,0.4);
  transition: width 0.3s ease;
}

.chrome-btn {
  min-height: 44px;
  padding: 0 14px;
  background: linear-gradient(180deg, #d8dde6 0%, #6a7480 50%, #2a2f38 100%);
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  border-right: 3px solid #1a1d22;
  border-bottom: 3px solid #1a1d22;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #000;
}
.chrome-btn:active {
  border-top: 3px solid #1a1d22;
  border-left: 3px solid #1a1d22;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

.mega-action {
  min-height: 56px;
  padding: 0 24px;
  background: linear-gradient(180deg, #ff8a40 0%, var(--autobot) 50%, #8a0a0a 100%);
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px #ffdab0,
    inset 0 -6px 10px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(255, 85, 0, 0.55);
  color: #fff;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.2vh, 22px);
  letter-spacing: 0.10em;
  text-shadow: 2px 2px 0 #000;
}
.mega-action:active { transform: translateY(2px); }

.play-area {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: 10px;
  padding: 10px;
  min-height: 0;
}
.play-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 6px;
  gap: 6px;
}
.mascot {
  width: 100%;
  max-width: 140px;
  border: 3px solid #000;
  background: linear-gradient(180deg, #f8f8ff 0%, #c0c0d8 100%);
  box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(0, 255, 255, 0.5);
  overflow: hidden;
}
.mascot img { width: 100%; display: block; }
.mascot-bumblebee { animation: bobble 2s ease-in-out infinite; }
.mascot-optimus { animation: bobble 2.2s ease-in-out -0.7s infinite; }
@keyframes bobble {
  0%, 100% { transform: translateY(-2px) rotate(-1.2deg); }
  50%      { transform: translateY(2px) rotate(1.2deg); }
}
.speech {
  position: relative;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  background: #fff;
  color: #000;
  padding: 6px 8px;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.speech::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 22px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #000;
}
.speech::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #fff;
}
.speech.alt { background: var(--bumble); }
.speech.alt::after { border-bottom-color: var(--bumble); }

/* ---------- Canvas wrap ---------- */
.canvas-wrap {
  position: relative;
  background:
    radial-gradient(ellipse at center, rgba(0,255,255,0.10), transparent 65%),
    #0a0020;
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px var(--cyan),
    inset 0 0 30px rgba(0, 255, 255, 0.18),
    0 0 22px rgba(255, 0, 204, 0.35);
  overflow: hidden;
}

.target-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: linear-gradient(180deg, var(--bumble-hi) 0%, var(--bumble) 100%);
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  z-index: 3;
}
.tb-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #1a0000;
  letter-spacing: 0.08em;
}
.tb-glyph {
  font-family: 'Audiowide', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: #1a0000;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
.guide-layer, .trace-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.guide-layer { pointer-events: none; z-index: 1; }
.trace-layer { z-index: 2; touch-action: none; cursor: crosshair; }
.canvas-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--cyan-hi);
  background: rgba(0, 0, 0, 0.75);
  padding: 6px 10px;
  border: 2px solid var(--cyan);
  text-shadow: 0 0 6px var(--cyan);
  pointer-events: none;
}
.canvas-hint.hidden { display: none; }

/* SVG guide stroke styles */
.guide-stroke-bg {
  fill: none;
  stroke: rgba(0, 255, 255, 0.14);
  stroke-width: 56;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guide-stroke-fg {
  fill: none;
  stroke: rgba(0, 255, 255, 0.75);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 10;
  animation: marchAnt 0.8s linear infinite;
  filter: drop-shadow(0 0 5px var(--cyan));
}
@keyframes marchAnt {
  to { stroke-dashoffset: -22; }
}
.guide-start-dot {
  fill: var(--bumble);
  filter: drop-shadow(0 0 10px var(--bumble));
  animation: pulseDot 1.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(0.9); }
  50%      { transform: scale(1.3); }
}

.game-buttonbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #660066 0%, #1a0033 100%);
  border-top: 3px solid #000;
}

/* Trace-only chrome buttons. CHECK / CLEAR / HEAR are meaningless
   for subitize / math / phonics / karaoke and they were cluttering
   the kid's screen with non-functional controls. The bottom button
   bar gets dropped for non-trace; non-trace exercises surface their
   own controls inside the canvas-wrap (the success / fail modals
   handle advance). */
body.exercise-non-trace .game-buttonbar { display: none; }
body.exercise-non-trace #say-btn { display: none; }
body.exercise-non-trace .target-banner { display: none; }
/* NB: play-side mascots stay visible for non-trace too. Hiding them
   here broke the .canvas-wrap flex sizing and the kid saw the layout
   collapsed into a narrow column. The mascots are decorative; they
   share the play-area row without claiming space the exercise needs. */

/* ============================================================
   ===================== MODALS ===============================
   ============================================================ */
.modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,0,40,0.85), rgba(0,0,0,0.95));
  backdrop-filter: blur(4px);
  z-index: 10;
  animation: fadeIn 0.2s ease;
}
.modal.show { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  width: min(620px, 92vw);
  padding: 20px 22px 22px;
  text-align: center;
  background:
    linear-gradient(180deg, #2a0044 0%, #110022 100%);
  border: 4px solid var(--bumble);
  outline: 3px solid #000;
  box-shadow:
    0 0 0 7px #000,
    0 0 0 10px var(--cyan),
    0 0 60px rgba(255, 204, 0, 0.4),
    0 0 120px rgba(0, 255, 255, 0.3);
  animation: popIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.modal-card.fail {
  border-color: var(--magenta);
  box-shadow:
    0 0 0 7px #000,
    0 0 0 10px var(--autobot),
    0 0 60px rgba(255, 0, 204, 0.5);
}
@keyframes popIn {
  from { transform: scale(0.6) rotate(-3deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.modal-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.modal-stars span {
  position: absolute;
  font-size: 22px;
  color: var(--bumble);
  text-shadow: 0 0 10px var(--bumble);
  animation: twinkle 1.1s ease-in-out infinite;
}
.modal-stars span:nth-child(1) { top: 4%;  left: 6%;  animation-delay: 0s; }
.modal-stars span:nth-child(2) { top: 8%;  right: 6%; animation-delay: -0.2s; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.modal-stars span:nth-child(3) { top: 50%; left: 2%;  animation-delay: -0.4s; color: var(--magenta-hi); text-shadow: 0 0 10px var(--magenta); }
.modal-stars span:nth-child(4) { top: 50%; right: 2%; animation-delay: -0.6s; color: var(--lime); text-shadow: 0 0 10px var(--lime); }
.modal-stars span:nth-child(5) { bottom: 4%;left:8%;  animation-delay: -0.8s; }
.modal-stars span:nth-child(6) { bottom: 8%;right:8%; animation-delay: -1s; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }

.modal-hero {
  width: 120px;
  display: block;
  margin: 0 auto;
  border: 3px solid #000;
  box-shadow: 0 0 0 2px #fff, 4px 4px 0 rgba(0,0,0,0.6);
  background: linear-gradient(180deg, #f8f8ff 0%, #c0c0d8 100%);
  animation: heroPop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.modal-hero.villain { animation: heroShake 0.5s ease-in-out 2; transform: scaleX(-1); }
@keyframes heroPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes heroShake {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  25% { transform: scaleX(-1) translateX(-6px); }
  75% { transform: scaleX(-1) translateX(6px); }
}

.modal-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px auto 4px;
  padding: 6px 16px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--bumble) 100%);
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(11px, 1.7vh, 14px);
  letter-spacing: 0.06em;
  color: #1a0000;
}
.modal-banner.danger {
  background: linear-gradient(90deg, var(--magenta) 0%, var(--autobot) 100%);
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.modal-big {
  margin: 10px auto 0;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(96px, 18vh, 168px);
  line-height: 1;
  color: var(--bumble);
  text-shadow:
    0 2px 0 var(--bumble),
    0 4px 0 #806600,
    0 6px 0 #403300,
    0 8px 14px rgba(0,0,0,0.6),
    0 0 28px rgba(255, 204, 0, 0.7);
}
.modal-word {
  margin-top: 4px;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(22px, 3.4vh, 32px);
  color: var(--cyan-hi);
  text-shadow: 0 0 12px var(--cyan), 1px 1px 0 #000;
  letter-spacing: 0.06em;
}
.mw-de { color: var(--ink-dim); margin-right: 8px; font-size: 0.7em; }

.modal-energon {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: #000;
  border: 2px solid var(--lime);
  color: var(--lime);
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-shadow: 0 0 8px var(--lime);
  letter-spacing: 0.08em;
}

.modal-sub {
  margin-top: 8px;
  color: var(--ink);
  font-family: 'VT323', monospace;
  font-size: clamp(15px, 2vh, 19px);
  letter-spacing: 0.04em;
}

.modal-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   ===================== INTRO OVERLAY ========================
   ============================================================ */
.intro {
  position: fixed; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  z-index: 100;
  cursor: pointer;
}
.intro.hidden { display: none; }
.intro-inner { text-align: center; }
.intro-logo {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(28px, 6vh, 56px);
  letter-spacing: 0.10em;
  color: var(--cyan-hi);
  text-shadow:
    0 0 12px var(--cyan),
    0 0 24px rgba(0, 255, 255, 0.6);
  animation: pulseGlow 1.6s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}
.intro p {
  margin-top: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--bumble);
  text-shadow: 1px 1px 0 #000, 0 0 8px var(--bumble);
}
.intro-tip {
  margin-top: 8px !important;
  color: var(--ink-dim) !important;
  font-size: 10px !important;
}

/* ============================================================
   ===================== MODE + VS PANEL ======================
   ============================================================ */
.mode-card {
  background: linear-gradient(180deg, rgba(255,91,26,0.08), rgba(0,255,255,0.04)), #0d0024;
}
.mode-toggle .big-toggle {
  padding: 8px 12px;
}
.mode-toggle .big-toggle .bt-glyph { font-size: 32px; }
.mode-toggle .big-toggle.active { background: linear-gradient(180deg, #ff8a40 0%, var(--autobot) 100%); color: #fff;
  border-top: 3px solid #ffb888; border-left: 3px solid #ffb888;
  border-right: 3px solid #4a0000; border-bottom: 3px solid #4a0000;
  text-shadow: 1px 1px 0 #000; box-shadow: 0 0 20px rgba(255,91,26,0.6); }
.mode-toggle .big-toggle.active .bt-glyph { color: var(--bumble-hi); text-shadow: 0 0 10px var(--bumble); }

/* Per-card visibility by mode (setup-grid stays visible in both modes) */
body.mode-vs .solo-only-card { display: none; }
body:not(.mode-vs) .vs-only-card { display: none; }

/* Card-title swap: in solo show the "character" label, in VS show "hero" */
body.mode-vs .title-solo { display: none; }
body:not(.mode-vs) .title-vs { display: none; }

.character-card { padding: 8px; }
.character-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.char-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 8px;
  background: linear-gradient(180deg, #1a1a2a 0%, #0a0a16 100%);
  border-top: 3px solid #4a4a6a;
  border-left: 3px solid #4a4a6a;
  border-right: 3px solid #0a0a14;
  border-bottom: 3px solid #0a0a14;
  cursor: pointer;
  transition: transform 0.1s;
}
.char-pick:active { transform: translateY(2px); }
.char-pick img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  background: linear-gradient(180deg, #f8f8ff 0%, #c0c0d8 100%);
  border: 2px solid #000;
  filter: grayscale(0.6) brightness(0.7);
  transition: filter 0.2s;
}
.char-pick .char-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--text-dim, #c8b8ff);
  text-shadow: 1px 1px 0 #000;
}
.char-pick.active {
  border-top: 3px solid var(--bumble-hi);
  border-left: 3px solid var(--bumble-hi);
  border-right: 3px solid #806600;
  border-bottom: 3px solid #806600;
  box-shadow: 0 0 16px rgba(255, 204, 0, 0.5);
}
.char-pick.active img { filter: none; box-shadow: 0 0 0 2px var(--bumble); }
.char-pick.active .char-name { color: var(--bumble); text-shadow: 0 0 8px var(--bumble), 1px 1px 0 #000; }

/* ============================================================
   ===================== AI OPPONENT PANEL ====================
   ============================================================ */
.ai-panel {
  display: none;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,0,204,0.05), rgba(0,0,0,0.4));
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px var(--magenta),
    inset 0 0 30px rgba(255, 0, 204, 0.15),
    0 0 22px rgba(255, 0, 204, 0.3);
  overflow: hidden;
}
body.mode-vs .ai-panel { display: flex; }
body.mode-vs .play-side { display: none; }
body.mode-vs .play-area { grid-template-columns: 1fr 1fr; }

.ai-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #5a005a 0%, #2a002a 100%);
  border-bottom: 2px solid #000;
}
#ai-portrait {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: top;
  border: 2px solid #000;
  background: linear-gradient(180deg, #f8f8ff 0%, #c0c0d8 100%);
  box-shadow: 0 0 0 1px #fff, 0 0 10px rgba(255, 0, 204, 0.4);
  transform: scaleX(-1);
}
.ai-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ai-name {
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  color: var(--magenta-hi);
  text-shadow: 1px 1px 0 #000, 0 0 8px var(--magenta);
  letter-spacing: 0.06em;
}
.ai-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-dim, #c8b8ff);
}
.ai-status.drawing { color: var(--bumble); text-shadow: 0 0 6px var(--bumble); }
.ai-status.done   { color: var(--lime); text-shadow: 0 0 6px var(--lime); }

.ai-canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  background: radial-gradient(ellipse at center, rgba(255,0,204,0.08), transparent 65%);
}
.ai-svg, .ai-canvas-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ai-canvas-overlay { pointer-events: none; }

.ai-trace-path {
  fill: none;
  stroke: var(--magenta-hi);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--magenta));
}
.ai-guide-path {
  fill: none;
  stroke: rgba(255, 0, 204, 0.15);
  stroke-width: 56;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-timer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.5);
  border-top: 2px solid #000;
}
.ai-timer-label { font-size: 16px; }
.ai-timer-track {
  flex: 1;
  height: 8px;
  background: #1a0000;
  border: 1.5px solid #000;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6), 0 0 0 1px #fff;
}
.ai-timer-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--magenta) 0%, var(--autobot) 100%);
  box-shadow: 0 0 8px var(--magenta);
  transition: width 0.1s linear;
}
.ai-timer-value {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--bumble);
  text-shadow: 0 0 6px var(--bumble);
  min-width: 50px;
  text-align: right;
}

/* ============================================================
   ===================== VS SCORE DISPLAY =====================
   ============================================================ */
.vs-score-display {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.4);
  border: 2px solid var(--cyan);
  border-radius: 10px;
  font-family: 'Audiowide', sans-serif;
}
body.mode-vs .vs-score-display { display: inline-flex; }
body.mode-vs .lives-display { display: none; }
body.mode-vs .energon-bar { display: none; }

/* mode-vs is a kid setting that applies to trace racing. For non-trace
   exercises (subitize / math / phonics / etc.) the VS chrome is
   meaningless — there's no AI to race, no round counter that matters,
   no rival. So when the kid plays a non-trace exercise WHILE mode=vs
   is still toggled on, restore the solo chrome (lives + energon) and
   hide the VS score panel. main.js renderCurrent sets the
   exercise-non-trace class, so the combined selector below catches
   the case cleanly. */
body.mode-vs.exercise-non-trace .vs-score-display { display: none; }
body.mode-vs.exercise-non-trace .lives-display { display: inline-flex; }
body.mode-vs.exercise-non-trace .energon-bar { display: block; }

.vs-side-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: var(--bumble);
  text-shadow: 0 0 6px var(--bumble);
}
.vs-side-score.them { color: var(--magenta-hi); text-shadow: 0 0 6px var(--magenta); }
.vs-side-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.vs-divider { color: var(--ink-dim, #c8b8ff); font-size: 14px; }

/* Round-win flashes */
.round-flash-win, .round-flash-lose {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(48px, 8vh, 80px);
  letter-spacing: 0.10em;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  animation: flashIn 1s ease-out forwards;
}
.round-flash-win {
  color: var(--bumble);
  text-shadow: 0 0 16px var(--bumble), 0 0 32px var(--autobot), 4px 4px 0 #000;
}
.round-flash-lose {
  color: var(--magenta-hi);
  text-shadow: 0 0 16px var(--magenta), 0 0 32px var(--autobot), 4px 4px 0 #000;
}
@keyframes flashIn {
  0%   { opacity: 0; transform: scale(0.4); }
  20%  { opacity: 1; transform: scale(1.15); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

/* ============================================================
   ===================== BATTLE BAR ===========================
   ============================================================ */
.battle-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(255,91,26,0.12) 0%, rgba(0,0,0,0.4) 50%, rgba(255,0,204,0.12) 100%);
  border-bottom: 2px solid #000;
  position: relative;
  z-index: 4;
}
.battle-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 64px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.battle-side img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: top;
  border: 2px solid #000;
  background: linear-gradient(180deg, #f8f8ff 0%, #c0c0d8 100%);
  box-shadow: 0 0 0 1px #fff, 0 0 10px rgba(0, 255, 255, 0.3);
}
.battle-decepticon img {
  transform: scaleX(-1);
  box-shadow: 0 0 0 1px #fff, 0 0 10px rgba(255, 0, 204, 0.4);
}
.battle-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: 0.05em;
  color: var(--bumble);
  text-shadow: 1px 1px 0 #000;
}
.battle-decepticon .battle-name { color: var(--magenta-hi); }

/* Advance animation on round results */
.battle-side.advance { transform: translateY(-4px) scale(1.08); }
.battle-side.advance img { box-shadow: 0 0 0 2px var(--bumble), 0 0 20px var(--bumble-hi); }
.battle-decepticon.advance img { box-shadow: 0 0 0 2px var(--magenta), 0 0 20px var(--magenta-hi); }
.battle-side.recoil { transform: translateY(4px) scale(0.92); filter: brightness(0.55) saturate(0.5); }

.battle-track {
  position: relative;
  height: 22px;
  border: 2px solid #000;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,91,26,0.25), rgba(0,0,0,0.5) 50%, rgba(255,0,204,0.25));
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 0 0 1px #fff;
}
.battle-fill {
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg,
    var(--autobot) 0%,
    var(--bumble) 60%,
    var(--cyan) 100%);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.3),
    0 0 18px rgba(255, 204, 0, 0.5);
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.battle-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 4px;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 16px var(--cyan);
  transform: translateX(-50%);
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.battle-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: #fff;
  text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* ============================================================
   ===================== ENERGON COUNTER ======================
   ============================================================ */
.energon-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--cyan);
  border-radius: 999px;
  box-shadow:
    0 0 12px rgba(0, 255, 255, 0.35),
    inset 0 0 6px rgba(0, 255, 255, 0.10);
  font-family: 'Audiowide', sans-serif;
  font-size: 16px;
  color: var(--cyan-hi);
  text-shadow: 0 0 6px var(--cyan), 1px 1px 0 #000;
  letter-spacing: 0.04em;
  user-select: none;
}
.ec-spark {
  color: var(--bumble);
  text-shadow: 0 0 8px var(--bumble);
  font-size: 16px;
  line-height: 1;
  animation: ecSpark 1.8s ease-in-out infinite;
}
@keyframes ecSpark {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.12); }
}
/* "+N" floater that animates up from the counter when it's bumped */
.energon-counter.bump { animation: ecBump 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes ecBump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); box-shadow: 0 0 24px rgba(255, 204, 0, 0.85), 0 0 12px rgba(0, 255, 255, 0.7); }
  100% { transform: scale(1); }
}
.energon-pop {
  position: absolute;
  pointer-events: none;
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  color: var(--bumble-hi);
  text-shadow: 0 0 8px var(--bumble), 1px 1px 0 #000;
  animation: ecPop 1.0s ease-out forwards;
  z-index: 20;
}
@keyframes ecPop {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  20%  { opacity: 1; transform: translate(-50%, -10px); }
  100% { opacity: 0; transform: translate(-50%, -40px); }
}

/* ============================================================
   ===================== LIVES ================================
   ============================================================ */
.lives-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.life {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--autobot-hi);
  filter: drop-shadow(0 0 4px var(--autobot));
  transition: transform 0.25s, opacity 0.4s;
}
.life::before { content: '♥'; }
.life.lost { color: #3a3a4a; filter: none; opacity: 0.55; transform: scale(0.78); }
.life.lost::before { content: '✕'; font-size: 13px; }
.life.lose-pulse { animation: lifeLose 0.6s ease; }
@keyframes lifeLose {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.4); color: #fff; }
  60%  { transform: scale(0.5) rotate(-12deg); }
  100% { transform: scale(0.78); }
}
.lives-row {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.4);
  border: 2px solid var(--magenta);
  border-radius: 10px;
}

/* ============================================================
   ===================== STARS & SCORE ========================
   ============================================================ */
.score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.stars {
  display: inline-flex;
  gap: 4px;
}
.star {
  font-size: 30px;
  line-height: 1;
  color: #2a2f38;
  text-shadow: 1px 1px 0 #000;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3), color 0.2s;
}
.star.on {
  color: var(--bumble);
  text-shadow: 0 0 10px var(--bumble), 0 0 20px var(--bumble-hi), 1px 1px 0 #000;
  animation: starPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.star.on:nth-child(2) { animation-delay: 0.15s; }
.star.on:nth-child(3) { animation-delay: 0.30s; }
@keyframes starPop {
  0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.score-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--cyan);
  border-radius: 10px;
}
.score-badge.danger { border-color: var(--magenta); }
.sb-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--text-dim, #c8b8ff);
}
.sb-value {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--cyan-hi);
  text-shadow: 0 0 8px var(--cyan);
}
.score-badge.danger .sb-value { color: var(--magenta-hi); text-shadow: 0 0 8px var(--magenta); }

/* VS mode falling back to solo for a non-trace exercise: hide the
   rival drawing panel entirely. The battle-bar at the top stays
   visible because it still tracks round wins. */
body.vs-no-race .play-side-right { display: none; }

/* Word-target — shared visual hook used by phoneme-segment,
   syllable-clap and similar 'kid hears a word, performs an action'
   exercises. The kid is a non-reader, but seeing the print while
   the audio plays is the entire point of phonics. Friendly readable
   sans, not Audiowide (which is display-y and harder for word-shape
   recognition). */
.sc-target-word, .ps-target-word {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(44px, 9vh, 72px);
  text-align: center;
  margin: 8px 0 12px;
  color: var(--cyan, #00e5ff);
  text-shadow: 0 0 14px rgba(0, 255, 255, 0.5);
}

/* Counters across exercises — use a friendlier system font so the
   '0' digit renders as a plain 0 instead of the slashed-zero glyph
   that Audiowide uses (which the kid reads as 'no entry'). */
.ca-count, .ca-target, .sc-count, .sh-count, .tf-count, .sub-count {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ===================== NOW SAY IT GATE ======================
   ============================================================
   Visual cues for the trace+speak loop: NEXT is gated until the
   kid has actually said the letter (or burned through attempts);
   the SAY IT button pulses to tell them what to do.
   ============================================================ */

.mega-action.gated-by-speak {
  filter: grayscale(0.6) brightness(0.6);
  cursor: not-allowed;
  pointer-events: none;
}

.speak-btn.pulse-attention {
  animation: speak-pulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(255, 204, 0, 0.7);
}

.skip-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 8px 14px;
  margin-left: 8px;
  opacity: 0.75;
}
.skip-btn:hover { opacity: 1; }
.skip-btn.hidden { display: none; }
@keyframes speak-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 12px rgba(255, 204, 0, 0.55); }
  50%      { transform: scale(1.06); box-shadow: 0 0 22px rgba(255, 204, 0, 0.9); }
}

/* ============================================================
   ===================== SETTINGS DRAWER ======================
   ============================================================
   Trace-era setup cards live behind a gear icon now. Only the
   parent opens this; the kid never sees it. Drawer slides in
   from the right with a backdrop blocking the rest of the page.
   ============================================================ */

.window-library {
  background: none;
  border: 1px solid var(--bumble);
  color: var(--bumble);
  font-family: 'Audiowide', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  margin: 0 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.window-library:hover { background: rgba(255, 204, 0, 0.18); }

/* Force-reload button: same shape as gear / kid so it doesn't visually
   shout. Title attribute carries the explanation since the icon alone
   isn't self-descriptive. */
.window-reload {
  background: none;
  border: 0;
  color: var(--cyan-hi, #66ffff);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.8;
  transition: transform 0.4s ease, opacity 0.15s;
}
.window-reload:hover { opacity: 1; transform: rotate(180deg); }
.window-reload:disabled {
  opacity: 0.4;
  cursor: default;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Free-play library overlay ---- */
.library-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 16, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.library-overlay.show { display: flex; }
.library-card {
  width: min(1100px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0a0a20 0%, #04041a 100%);
  border: 3px solid var(--cyan);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
  overflow: hidden;
}
.library-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 255, 255, 0.35);
}
.library-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--cyan-hi);
}
.library-grid {
  padding: 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.library-section { display: flex; flex-direction: column; gap: 8px; }
.library-section-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--bumble-hi, #ffe066);
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(255, 204, 0, 0.3);
}
.library-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.library-tile {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  border: 2px solid var(--cyan);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  color: #fff;
  /* Make sure clicks always register on mobile. */
  touch-action: manipulation;
}
.library-tile:hover, .library-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.55);
  outline: none;
}
.library-tile:active { transform: translateY(0); }
.library-tile-icon { font-size: 28px; line-height: 1; }
.library-tile-label {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.2;
}

.window-gear, .window-kid {
  background: none;
  border: 0;
  color: var(--bumble);
  font-size: 22px;
  cursor: pointer;
  padding: 0 8px;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
  transition: transform 0.2s ease;
}
.window-gear:hover { transform: rotate(45deg); }
.window-kid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan-hi);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}
.window-kid img {
  width: 28px; height: 28px;
  object-fit: cover;
  border: 2px solid var(--cyan);
  border-radius: 4px;
  vertical-align: middle;
}
.window-kid:hover { transform: scale(1.05); }

/* Kid switcher drawer */
.kid-switcher-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8800;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.kid-switcher-backdrop.show { opacity: 1; pointer-events: auto; }
.kid-switcher {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 92vw);
  z-index: 8900;
  background: linear-gradient(180deg, #06001c 0%, #0d0030 100%);
  border-left: 4px solid var(--cyan);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.6);
  padding: 18px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.kid-switcher.show { transform: translateX(0); }
.ks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(0, 255, 255, 0.25);
  margin-bottom: 16px;
}
.ks-title {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--bumble);
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.55);
}
.ks-close { font-size: 12px; padding: 8px 14px; }
.ks-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ks-card {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  border: 3px solid var(--cyan);
  border-radius: 8px;
}
.ks-card.active {
  border-color: var(--bumble);
  box-shadow: 0 0 14px rgba(255, 204, 0, 0.4);
}
.ks-portrait {
  width: 56px; height: 56px;
  object-fit: cover;
  border: 2px solid #000;
  border-radius: 4px;
}
.ks-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--ink);
}
.ks-stats {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 3px;
}
.ks-flag {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--bumble);
  letter-spacing: 0.06em;
}
.ks-switch { font-size: 10px; padding: 7px 10px; }
.ks-del {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
}
.ks-del:hover { color: #ff6b7a; }
.ks-add {
  width: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  padding: 12px;
  background: linear-gradient(180deg, var(--cyan) 0%, #0e8aa0 100%);
  border: 3px solid #000;
  color: #001a22;
  cursor: pointer;
  letter-spacing: 0.06em;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
}
.ks-add:hover { filter: brightness(1.1); }

.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8800;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.settings-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  z-index: 8900;
  background: linear-gradient(180deg, #06001c 0%, #0d0030 100%);
  border-left: 4px solid var(--cyan);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.6);
  padding: 18px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.settings-drawer.show { transform: translateX(0); }

.sd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(0, 255, 255, 0.25);
  margin-bottom: 18px;
}
.sd-title {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--bumble);
  text-shadow: 1px 1px 0 #000, 0 0 10px rgba(255, 204, 0, 0.6);
}
.sd-close { font-size: 12px; padding: 8px 14px; }

.sd-section { margin-bottom: 22px; }
.sd-section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--cyan-hi);
  letter-spacing: 0.1em;
  margin: 0 0 10px 0;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}
.sd-note {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 12px 0;
  font-style: italic;
}
.sd-slot { display: flex; flex-direction: column; gap: 10px; }
/* Inside the drawer, cards lose their full-card margin and stack
   compactly. */
.sd-slot .setup-card { margin: 0; }
.sd-slot .setup-card .card-title { font-size: 10px; }
.sd-slot .setup-card .toggle-group { gap: 4px; }
.sd-slot .big-toggle { min-height: 48px; padding: 4px 6px; }
.sd-slot .bt-glyph { font-size: 20px; }
.sd-slot .bt-label { font-size: 8px; }

/* ============================================================
   ===================== ALLSPARK CINEMATIC ===================
   ============================================================
   Fullscreen victory overlay when Megatron falls and the kid
   reclaims the AllSpark. Fires exactly once per profile.
   ============================================================ */

.allspark-cinematic {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,4,40,0.85) 0%, rgba(0,0,0,0.97) 70%);
  opacity: 0;
  transition: opacity 0.8s ease;
  cursor: pointer;
}
.allspark-cinematic.show { opacity: 1; }
.allspark-cinematic.dismissing { opacity: 0; transition: opacity 0.6s ease; }

.asc-rays {
  position: absolute;
  width: 600px;
  height: 600px;
  background:
    conic-gradient(from 0deg,
      rgba(255, 220, 80, 0.5) 0deg, rgba(255, 220, 80, 0) 30deg,
      rgba(255, 220, 80, 0.5) 60deg, rgba(255, 220, 80, 0) 90deg,
      rgba(255, 220, 80, 0.5) 120deg, rgba(255, 220, 80, 0) 150deg,
      rgba(255, 220, 80, 0.5) 180deg, rgba(255, 220, 80, 0) 210deg,
      rgba(255, 220, 80, 0.5) 240deg, rgba(255, 220, 80, 0) 270deg,
      rgba(255, 220, 80, 0.5) 300deg, rgba(255, 220, 80, 0) 330deg,
      rgba(255, 220, 80, 0.5) 360deg);
  filter: blur(2px);
  animation: asc-spin 14s linear infinite;
  opacity: 0;
  transition: opacity 1.5s ease 0.4s;
}
.allspark-cinematic.show .asc-rays { opacity: 1; }
@keyframes asc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.asc-cube {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #67e8f9 0%, #ffffff 100%);
  border: 6px solid #fff;
  border-radius: 14px;
  color: #0c4a6e;
  font-size: 90px;
  font-family: 'Audiowide', sans-serif;
  box-shadow:
    0 0 40px #67e8f9,
    0 0 80px #67e8f9,
    0 0 120px rgba(255,255,255,0.6);
  transform: scale(0.2);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1s ease;
}
.allspark-cinematic.show .asc-cube { transform: scale(1); opacity: 1; }

.asc-title {
  margin-top: 36px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 4vh, 36px);
  color: #fde047;
  text-shadow: 2px 2px 0 #000, 0 0 20px rgba(255, 220, 80, 0.8);
  letter-spacing: 0.06em;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}
.allspark-cinematic.show-text .asc-title {
  opacity: 1;
  transform: translateY(0);
}

.asc-sub {
  margin-top: 12px;
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.8s ease 0.6s;
}
.allspark-cinematic.show-text .asc-sub { opacity: 1; }

.asc-dismiss {
  position: absolute;
  bottom: 40px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
  opacity: 0;
  animation: asc-blink 1.2s ease 2s infinite;
}
.allspark-cinematic.show-text .asc-dismiss { opacity: 1; }
@keyframes asc-blink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* ============================================================
   ===================== RESCUE TOAST =========================
   ============================================================
   Celebration overlay for gate-defeats and trapped-Autobot
   rescues. Lives in document.body so it shows over either
   screen. Fades in from the top, dismisses after ~2.8s.
   ============================================================ */

.rescue-toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.4s ease;
}
.rescue-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.rt-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
  color: #1a0000;
  border: 4px solid #000;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 2px #fff8c0,
    0 0 28px rgba(255, 204, 0, 0.7),
    6px 6px 0 rgba(0,0,0,0.6);
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 0.04em;
  min-width: 320px;
}
.rt-portrait {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 3px solid #000;
  border-radius: 4px;
}
.rt-text { display: flex; flex-direction: column; gap: 4px; }
.rt-title {
  font-size: 14px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.55);
}
.rt-sub {
  font-size: 9px;
  opacity: 0.85;
  letter-spacing: 0.06em;
}

/* ============================================================
   ===================== ACADEMY MAP ==========================
   ============================================================
   The Cybertron Crossing. A wide SVG inside a horizontally
   scrollable container, themed to match the 90s/G1 chrome of
   the rest of the home screen.
   ============================================================ */

.academy-map {
  grid-column: 1 / -1;
  /* Grid items default to min-width:auto which lets them grow to fit
     intrinsic content. The 4952px-wide SVG inside .am-scroll triggers
     that growth and breaks the page layout. Pin the grid item to the
     track width so the scroll container actually clips horizontally. */
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(0,255,255,0.08), rgba(255,0,204,0.04)),
    #06001c;
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 2px var(--cyan),
    inset 0 0 18px rgba(0, 255, 255, 0.18),
    4px 4px 0 rgba(0, 0, 0, 0.7);
  padding: 10px 10px 14px;
  border-radius: 2px;
  position: relative;
}
.academy-map .card-title {
  color: var(--bumble);
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.6);
}
.am-hint {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--cyan-hi);
  text-align: center;
  letter-spacing: 0.05em;
  margin: 4px 0 8px 0;
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}
.am-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 2px solid #000;
  border-radius: 2px;
  background: #03000d;
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.15);
  touch-action: pan-x;
}
.am-scroll::-webkit-scrollbar { height: 10px; }
.am-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  border-radius: 5px;
}
.am-scroll::-webkit-scrollbar-track { background: #0a0024; }

.am-svg {
  display: block;
  height: 280px;
  max-width: none;
}

/* Node interaction
   --------------------------------------------------------------
   NEVER use `transform: scale()` on `.am-node` for press feedback.
   The hit-target foreignObject is a CHILD of this group, so any
   parent transform moves the button between mousedown and mouseup
   — Chrome then refuses to fire the `click` event because the
   mousedown and mouseup targets don't match. This was the cause
   of the long-running "click on a map node does nothing, but
   click + Enter works" bug. The button still gets focus from
   mousedown (hence Enter activating it), but the click event
   itself is suppressed.

   Visual press feedback is via brightness only — filter does NOT
   change the hit-test rectangle, so down/up land on the same
   element and click fires reliably. */
.am-node { transition: filter 0.15s ease; }
.am-node.open:hover { filter: brightness(1.15) drop-shadow(0 0 8px #67e8f9); }
.am-node.mastered:hover { filter: brightness(1.15) drop-shadow(0 0 10px #fde047); }
.am-node.locked { pointer-events: none; }
.am-node:active { filter: brightness(1.35) drop-shadow(0 0 12px #67e8f9); }

/* Hero bob (run on the inner sprite group so the parent's SVG-attr
   transform still controls position). Node pulse expands from the
   ring's center. */
@keyframes am-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes am-pulse {
  0%   { opacity: 0.9; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.45); }
}

/* AllSpark — slowly rotating rays + breathing cube glow */
.am-allspark .am-allspark-rays {
  animation: am-allspark-spin 14s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.am-allspark rect:last-of-type {
  animation: am-allspark-glow 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes am-allspark-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes am-allspark-glow {
  0%, 100% { filter: drop-shadow(0 0 6px #67e8f9); }
  50%      { filter: drop-shadow(0 0 18px #fff) drop-shadow(0 0 28px #67e8f9); }
}

/* When the map is active, demote the MISSION card etc. so it doesn't
   compete visually. Other cards (LANGUAGE, GUIDE, LIVES) stay
   visible but smaller — handled in HTML/JS visibility toggling. */
.academy-map ~ .setup-card,
.setup-grid > .academy-map ~ .setup-card {
  opacity: 0.85;
}

@media (max-width: 900px) {
  .am-svg { height: 200px; }
}
@media (max-height: 720px) {
  .am-svg { height: 180px; }
  .academy-map { padding: 6px 6px 10px; }
}

/* ============================================================
   ===================== RESPONSIVE ===========================
   ============================================================ */
@media (max-width: 900px) {
  /* Narrow viewports — keep the asymmetry (player visible, rival
     small) but shrink both. The kid plays in landscape almost always,
     this is mostly a phone-portrait safety net. */
  .hero-row { grid-template-columns: 110px 1fr 70px; gap: 10px; }
  .hero-fig.optimus  img { max-width: 110px; }
  .hero-fig.megatron img { max-width: 70px; }
  .setup-grid { grid-template-columns: 1fr; }
  .play-area { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .play-side { display: none; }
}
@media (max-height: 720px) {
  /* Short viewports — pull both portraits down a notch so the academy
     map fits above the fold. Asymmetry preserved. */
  .hero-fig.optimus  img { max-width: 110px; }
  .hero-fig.megatron img { max-width: 70px;  }
  .chrome-title { font-size: clamp(28px, 6vh, 56px); }
  .setup-card { padding: 8px; }
  .big-toggle { min-height: 52px; }
}

/* ============================================================
   ===================== PARENT DASHBOARD =====================
   ============================================================
   PIN gate + dashboard window. Lives behind a long-press on the
   home title or `#dashboard` fragment — never reachable from any
   regular kid-facing path. Hits #13 (skeleton) and is the parent
   container for #14 (heatmap), #15 (inspector), #16 (levers).
   ============================================================ */

.dash-window {
  max-width: 1100px;
  margin: 40px auto;
}
.dash-window .window-x { cursor: pointer; background: none; border: 0; color: inherit; font: inherit; padding: 0 8px; }

.pin-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
}
.pin-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: 28px;
  margin: 0;
  color: var(--cyan-hi);
  text-shadow: 0 0 12px var(--cyan);
  letter-spacing: 2px;
}
.pin-input {
  font-family: 'Audiowide', sans-serif;
  font-size: 38px;
  text-align: center;
  letter-spacing: 16px;
  padding: 10px 0 10px 16px;   /* compensate for letter-spacing pulling right */
  width: 220px;
  background: #0a0020;
  color: var(--bumble-hi);
  border: 2px solid var(--cyan);
  border-radius: 6px;
  outline: none;
}
.pin-input:focus { box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.25); }
.pin-error {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: #ff5b6b;
  min-height: 24px;
}
.pin-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
.pin-help {
  font-family: 'VT323', monospace;
  color: #b8b8c8;
  max-width: 460px;
  text-align: center;
  font-size: 16px;
  margin-top: 12px;
  line-height: 1.4;
}

.dash-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
}
.dash-tile {
  background: #0a0020;
  border: 2px solid var(--cyan);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 140px;
  color: #e8e8f8;
}
.dash-tile-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--bumble-hi);
  letter-spacing: 1px;
}
.dash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'VT323', monospace;
  font-size: 18px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0, 255, 255, 0.15);
}
.dash-row:last-child { border-bottom: 0; }
.dash-label { color: #b8b8c8; }
.dash-value { color: #e8e8f8; }
.dash-placeholder {
  font-family: 'VT323', monospace;
  color: #6c6c84;
  font-style: italic;
}
@media (max-width: 720px) {
  .dash-body { grid-template-columns: 1fr; }
}

/* ---- Mastery heatmap (#14) ---- */
.heatmap { display: flex; flex-direction: column; gap: 12px; }
.heatmap-group { display: flex; flex-direction: column; gap: 4px; }
.heatmap-group-label {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #b8b8c8;
  letter-spacing: 1px;
}
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 3px;
}
.heatmap-cell {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  font-family: 'Audiowide', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease-out;
}
.heatmap-cell:hover { transform: scale(1.08); }
.heatmap-cell.untouched { color: #6c6c84; }

/* ---- 'Why this?' inspector (#15) ---- */
.inspector { display: flex; flex-direction: column; }
.inspector-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.inspector-item {
  background: rgba(0, 0, 0, 0.25);
  border-left: 3px solid var(--cyan);
  padding: 6px 10px;
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #d8d8e8;
}
.inspector-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.ins-skill {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  color: var(--bumble-hi);
  letter-spacing: 0.5px;
}
.ins-when { color: #888; font-size: 13px; }
.inspector-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.ins-label {
  color: #888;
  margin-right: 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ins-tag {
  background: var(--cyan);
  color: #0a0020;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'Audiowide', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
}
.inspector-prereqs {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
}
.ins-prereq {
  background: rgba(0, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ---- Parent levers (#16) ---- */
.levers { display: flex; flex-direction: column; gap: 10px; }
.lever-input { display: flex; flex-direction: column; gap: 6px; }
#lever-skill-input {
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 6px 8px;
  background: #0a0020;
  color: #e8e8f8;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  outline: none;
}
#lever-skill-input:focus { box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.25); }
.lever-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.lever-buttons .chrome-btn {
  font-size: 12px;
  padding: 4px 10px;
  letter-spacing: 1px;
}
.lever-error {
  font-family: 'VT323', monospace;
  color: #ffaa55;
  font-size: 14px;
  min-height: 18px;
}
.lever-lists {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.lever-list h3 {
  font-family: 'Audiowide', sans-serif;
  font-size: 13px;
  color: #b8b8c8;
  letter-spacing: 1px;
  margin: 0 0 4px;
}
.lever-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lever-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #d8d8e8;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 6px;
  border-radius: 3px;
}
.lever-rm {
  background: transparent;
  color: #ff7a7a;
  border: 0;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.lever-rm:hover { color: #ffaaaa; }
.lever-empty { color: #555; font-style: italic; }
@media (max-width: 720px) {
  .lever-lists { grid-template-columns: 1fr; }
}

/* ---- Custom texts CRUD (#93 Step 2) ----
   Parent-only card. Lives in the dashboard tile grid, so it inherits
   .dash-tile padding + background. We only style the inner controls. */
.custom-texts { display: flex; flex-direction: column; gap: 10px; }
.custom-texts .ct-add { align-self: flex-start; padding: 6px 14px; font-size: 13px; }
.custom-texts .ct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.custom-texts .ct-empty {
  font-family: 'VT323', monospace; font-size: 16px;
  color: rgba(255, 255, 255, 0.45); padding: 4px 0;
}
.custom-texts .ct-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 6px;
}
.custom-texts .ct-lang {
  font-family: 'Audiowide', sans-serif;
  font-size: 11px; letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 255, 255, 0.15);
  color: var(--cyan-hi, #66ffff);
}
.custom-texts .ct-lang-en {
  background: rgba(255, 204, 0, 0.15);
  color: var(--bumble-hi, #ffe066);
}
.custom-texts .ct-title {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.custom-texts .ct-edit, .custom-texts .ct-del {
  padding: 4px 8px; font-size: 12px;
}
.custom-texts .ct-editor { display: flex; flex-direction: column; gap: 10px; }
.custom-texts .ct-field { display: flex; flex-direction: column; gap: 4px; }
.custom-texts .ct-field-label {
  font-family: 'Audiowide', sans-serif;
  font-size: 11px; letter-spacing: 1.5px;
  color: var(--cyan-hi, #66ffff);
}
.custom-texts .ct-lang-radio { display: flex; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.custom-texts .ct-lang-radio label { display: inline-flex; align-items: center; gap: 4px; font-family: system-ui, sans-serif; font-size: 13px; color: #fff; }
.custom-texts .ct-title-input,
.custom-texts .ct-body-input {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: 1px solid rgba(0, 255, 255, 0.35);
  border-radius: 4px;
  padding: 6px 8px;
  resize: vertical;
}
.custom-texts .ct-body-input { min-height: 160px; }
.custom-texts .ct-byte-count {
  font-family: 'VT323', monospace;
  font-size: 14px; color: rgba(255, 255, 255, 0.55);
  text-align: right;
}
.custom-texts .ct-byte-count.over { color: #ff6b7a; }
.custom-texts .ct-error {
  font-family: 'VT323', monospace; color: #ff6b7a;
  min-height: 18px;
}
.custom-texts .ct-editor-buttons { display: flex; gap: 8px; }

/* ---- NOW SAY IT button + status (#24) ---- */
.success-speak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
}
.success-speak.hidden { display: none; }
.speak-btn {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  padding: 8px 18px;
  letter-spacing: 2px;
}
.speak-btn:disabled { opacity: 0.6; cursor: default; }
.speak-status {
  font-family: 'VT323', monospace;
  font-size: 18px;
  min-height: 22px;
  text-align: center;
  letter-spacing: 0.5px;
}
.speak-status.listening { color: var(--cyan-hi); }
.speak-status.success {
  color: var(--bumble-hi);
  text-shadow: 0 0 8px var(--bumble);
}
.speak-status.retry { color: #ffaa55; }
.speak-status.fail-final { color: #ff7a7a; }
.speak-attempts {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #888;
  letter-spacing: 0.5px;
}

/* ============================================================
   ===================== PHASE 1 EXERCISES ====================
   ============================================================ */

/* ---- Rhyme match (#18) ---- */
.rhyme-match {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 20px;
}
.rhyme-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(20px, 3vh, 30px);
  color: var(--cyan-hi);
  text-shadow: 0 0 12px var(--cyan);
  letter-spacing: 2px;
  margin: 0;
  text-align: center;
}
.rhyme-tiles {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.rhyme-tile {
  /* Word-tile. Two-tap interaction: first tap auditions (plays the
     audio), second tap commits as the odd-one-out. The .rhyme-heard
     class flashes after audition so the kid sees they have heard
     this one. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 140px;
  min-height: 140px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  border: 3px solid var(--cyan);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out;
}
.rhyme-tile:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.45);
}
.rhyme-tile:active { transform: translateY(0); }
.rhyme-word {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(28px, 5vh, 44px);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}
.rhyme-ear {
  font-size: clamp(18px, 2.4vh, 24px);
  opacity: 0.85;
}
.rhyme-tile.rhyme-heard {
  border-color: var(--bumble);
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.55);
}
.rhyme-tile.rhyme-heard .rhyme-ear { opacity: 0.4; }
.rhyme-tile.rhyme-correct {
  background: linear-gradient(180deg, #0e4a1e 0%, #042208 100%);
  border-color: #4dffa0;
  box-shadow: 0 0 20px rgba(77, 255, 160, 0.6);
}
.rhyme-tile.rhyme-wrong {
  background: linear-gradient(180deg, #4a0e1e 0%, #220408 100%);
  border-color: #ff6b7a;
  box-shadow: 0 0 20px rgba(255, 107, 122, 0.6);
}
.rhyme-replay {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 8px 16px;
}
.rhyme-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 24px;
  min-height: 32px;
  letter-spacing: 1px;
  text-align: center;
}
.rhyme-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.rhyme-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Sound hunt (#19) ---- */
.sound-hunt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
}
.sh-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 26px);
  color: var(--cyan-hi);
  text-shadow: 0 0 12px var(--cyan);
  letter-spacing: 1.5px;
  text-align: center;
  margin: 0;
}
.sh-phoneme {
  display: inline-block;
  margin-left: 6px;
  color: var(--bumble-hi);
  text-shadow: 0 0 10px var(--bumble);
  font-size: 1.2em;
}
.sh-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  max-width: 600px;
}
.sh-tile {
  /* Word-tile. Tap toggles selection; the corner 🔊 button auditions
     the word so the kid can hear it before committing. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 10px 14px 22px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  border: 3px solid var(--cyan);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.sh-word {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(22px, 4vh, 32px);
  line-height: 1.1;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}
.sh-ear {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: clamp(16px, 2.2vh, 22px);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.85;
}
.sh-ear:hover { opacity: 1; }
.sh-tile:hover:not(:disabled) { transform: translateY(-2px); }
.sh-tile.sh-selected {
  background: linear-gradient(180deg, #2a2a5a 0%, #1a1a40 100%);
  border-color: var(--bumble);
  box-shadow: 0 0 18px rgba(255, 204, 0, 0.55);
}
.sh-tile.sh-correct {
  background: linear-gradient(180deg, #0e4a1e 0%, #042208 100%);
  border-color: #4dffa0;
}
.sh-tile.sh-missed {
  background: #1a1a3a;
  border-color: #888;
  opacity: 0.5;
}
.sh-tile.sh-wrong {
  background: linear-gradient(180deg, #4a0e1e 0%, #220408 100%);
  border-color: #ff6b7a;
}
.sh-actions { display: flex; gap: 16px; align-items: center; }
.sh-replay, .sh-done {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 8px 18px;
}
.sh-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  min-height: 30px;
  letter-spacing: 1px;
  text-align: center;
}
.sh-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.sh-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }
@media (max-width: 720px) {
  .sh-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Syllable clap (#20) ---- */
.syllable-clap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}
.sc-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(14px, 2.2vh, 22px);
  color: var(--cyan-hi);
  letter-spacing: 1.5px;
  margin: 0;
  text-align: center;
}
.sc-word {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(36px, 7vh, 64px);
  color: var(--bumble-hi);
  text-shadow: 0 0 16px var(--bumble), 1px 1px 0 #000;
  letter-spacing: 4px;
}
.sc-drum {
  font-size: clamp(64px, 12vh, 100px);
  background: linear-gradient(180deg, #2a1a0a 0%, #100400 100%);
  border: 4px solid var(--bumble);
  border-radius: 50%;
  width: clamp(120px, 18vh, 160px);
  height: clamp(120px, 18vh, 160px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.05s ease-out, box-shadow 0.15s;
}
.sc-drum:active { transform: scale(0.92); }
.sc-drum.sc-drum-hit {
  animation: sc-drum-flash 0.32s ease-out;
}
@keyframes sc-drum-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.0); transform: scale(1); }
  20%  { box-shadow: 0 0 28px 12px rgba(255, 204, 0, 0.85); transform: scale(0.93); }
  100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.0); transform: scale(1); }
}
.sc-count {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 5vh, 48px);
  color: var(--cyan-hi);
  text-shadow: 0 0 10px var(--cyan);
  min-width: 60px;
  text-align: center;
}
.sc-actions { display: flex; gap: 16px; }
.sc-replay, .sc-done {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 8px 16px;
}
.sc-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  min-height: 30px;
  letter-spacing: 1px;
  text-align: center;
}
.sc-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.sc-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Phoneme blend (#21) ---- */
.phoneme-blend, .phoneme-segment {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}
.pb-prompt, .ps-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi);
  letter-spacing: 1.5px;
  text-align: center;
  margin: 0;
}
.pb-tiles {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.pb-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 120px;
  padding: 16px 16px 26px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  border: 3px solid var(--cyan);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.pb-word {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(28px, 5vh, 44px);
  line-height: 1.1;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}
.pb-ear {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: clamp(16px, 2.2vh, 22px);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.85;
}
.pb-tile:hover:not(:disabled) { transform: translateY(-2px); }
.pb-tile.pb-correct {
  background: linear-gradient(180deg, #0e4a1e 0%, #042208 100%);
  border-color: #4dffa0;
  box-shadow: 0 0 20px rgba(77, 255, 160, 0.6);
}
.pb-tile.pb-wrong {
  background: linear-gradient(180deg, #4a0e1e 0%, #220408 100%);
  border-color: #ff6b7a;
  box-shadow: 0 0 20px rgba(255, 107, 122, 0.6);
}
.pb-replay { padding: 8px 18px; }
.pb-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  min-height: 30px;
  letter-spacing: 1px;
  text-align: center;
}
.pb-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.pb-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Phoneme segment (#21) ---- */
.ps-word {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(40px, 8vh, 72px);
  color: var(--bumble-hi);
  text-shadow: 0 0 16px var(--bumble), 1px 1px 0 #000;
  letter-spacing: 6px;
}
.ps-chips {
  display: flex;
  gap: 10px;
  min-height: 32px;
}
.ps-chip {
  display: inline-block;
  font-size: 26px;
  color: var(--cyan-hi);
  text-shadow: 0 0 8px var(--cyan);
  animation: ps-chip-in 0.18s ease-out;
}
@keyframes ps-chip-in {
  0%   { transform: scale(0.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.ps-tap {
  font-family: 'Audiowide', sans-serif;
  font-size: 24px;
  padding: 18px 40px;
  letter-spacing: 3px;
}
.ps-actions { display: flex; gap: 16px; }
.ps-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px;
  min-height: 28px;
  letter-spacing: 1px;
  text-align: center;
}
.ps-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.ps-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ============================================================
   ===================== MATH M0 EXERCISES ====================
   ============================================================ */

/* ---- Subitize (#43) ---- */
.subitize {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
}
.sub-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 26px);
  color: var(--cyan-hi);
  text-shadow: 0 0 12px var(--cyan);
  letter-spacing: 1.5px;
  margin: 0;
  text-align: center;
}
.sub-stage {
  width: clamp(200px, 30vh, 260px);
  height: clamp(200px, 30vh, 260px);
  background: rgba(0, 0, 0, 0.35);
  border: 3px dashed rgba(0, 255, 255, 0.45);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-pattern { width: 90%; height: 90%; }
.sub-dot {
  fill: var(--bumble-hi);
  filter: drop-shadow(0 0 6px var(--bumble));
}
.sub-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.sub-choice {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(24px, 4vh, 36px);
  min-width: 60px;
  min-height: 60px;
  padding: 8px 18px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--cyan-hi);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--cyan), 1px 1px 0 #000;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sub-choice:disabled { opacity: 0.45; cursor: default; }
.sub-choice:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 18px rgba(0, 255, 255, 0.5); }
.sub-choice.sub-correct {
  background: linear-gradient(180deg, #0e4a1e 0%, #042208 100%);
  border-color: #4dffa0;
  color: #4dffa0;
}
.sub-choice.sub-wrong {
  background: linear-gradient(180deg, #4a0e1e 0%, #220408 100%);
  border-color: #ff6b7a;
  color: #ff6b7a;
}
.sub-again {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 6px 14px;
}
.sub-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  min-height: 30px;
  letter-spacing: 1px;
  text-align: center;
}
.sub-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.sub-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Count-along (#44) ---- */
.count-along {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}
.ca-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(14px, 2.2vh, 22px);
  color: var(--cyan-hi);
  letter-spacing: 1.5px;
  margin: 0;
  text-align: center;
}
.ca-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-content: center;
  min-height: clamp(80px, 18vh, 140px);
  width: 100%;
  max-width: 560px;
}
.ca-cube {
  width: clamp(40px, 7vh, 60px);
  height: clamp(40px, 7vh, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 4vh, 32px);
  background: linear-gradient(180deg, #2a2a5a 0%, #0a0820 100%);
  border: 2px solid var(--bumble);
  border-radius: 8px;
  color: var(--bumble-hi);
  text-shadow: 0 0 8px var(--bumble);
  animation: ca-cube-in 0.18s ease-out;
}
@keyframes ca-cube-in {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.ca-count {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 6vh, 56px);
  color: var(--cyan-hi);
  text-shadow: 0 0 12px var(--cyan);
  min-width: 80px;
  text-align: center;
}
.ca-tap, .ca-done {
  font-family: 'Audiowide', sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  padding: 10px 20px;
}
.ca-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px;
  min-height: 28px;
  letter-spacing: 1px;
  text-align: center;
}
.ca-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.ca-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Count on / back (#45) ---- */
.count-on {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
}
.co-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi);
  letter-spacing: 1.5px;
  margin: 0;
  text-align: center;
}
.co-cubes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 560px;
}
.co-cube {
  width: clamp(36px, 6vh, 50px);
  height: clamp(36px, 6vh, 50px);
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0020;
  border: 2px solid rgba(0, 255, 255, 0.4);
  border-radius: 6px;
  color: #7a7a92;
  transition: background 0.15s, transform 0.1s;
}
.co-cube.co-passed {
  background: #1a3a1a;
  border-color: #4dffa0;
  color: #4dffa0;
}
.co-cube.co-active {
  background: linear-gradient(180deg, #3a3a2a 0%, #1a1a08 100%);
  border-color: var(--bumble);
  color: var(--bumble-hi);
  text-shadow: 0 0 8px var(--bumble);
  transform: scale(1.12);
}
.co-counter {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(40px, 7vh, 64px);
  color: var(--cyan-hi);
  text-shadow: 0 0 12px var(--cyan);
  min-width: 80px;
  text-align: center;
}
.co-step, .co-done {
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  padding: 10px 24px;
}
.co-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px;
  min-height: 28px;
  letter-spacing: 1px;
  text-align: center;
}
.co-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.co-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ============================================================
   ===================== MATH M1 EXERCISES ====================
   ============================================================ */

/* ---- Ten-frame builder (#47) ---- */
.ten-frame {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
}
.tf-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 26px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.tf-target {
  color: var(--bumble-hi); text-shadow: 0 0 10px var(--bumble);
  font-size: 1.4em; margin-left: 8px;
}
.tf-grid {
  display: grid;
  grid-template-columns: repeat(5, clamp(50px, 8vh, 70px));
  grid-template-rows: repeat(2, clamp(50px, 8vh, 70px));
  gap: 6px;
}
.tf-cell {
  background: #0a0020;
  border: 3px solid var(--cyan);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.tf-cell:hover:not(.tf-filled) { background: #1a1a3a; }
.tf-cell.tf-filled {
  background: radial-gradient(circle, var(--bumble) 0%, var(--bumble-hi) 100%);
  box-shadow: 0 0 12px var(--bumble);
  transform: scale(0.95);
}
.tf-count {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(20px, 3vh, 28px);
  color: var(--cyan-hi); text-shadow: 0 0 8px var(--cyan);
  letter-spacing: 1px;
}
.tf-done {
  font-family: 'Audiowide', sans-serif;
  font-size: 16px; letter-spacing: 2px;
  padding: 10px 22px;
}
.tf-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px; min-height: 28px;
  text-align: center; letter-spacing: 1px;
}
.tf-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.tf-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Number bond (#48) ---- */
.number-bond {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
}
.nb-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 26px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.nb-whole {
  color: var(--bumble-hi); text-shadow: 0 0 12px var(--bumble);
  font-size: 1.6em; margin-left: 8px;
}
.nb-bond {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(32px, 6vh, 56px);
  color: var(--cyan-hi);
  text-shadow: 0 0 10px var(--cyan);
}
.nb-left, .nb-right {
  min-width: 70px; text-align: center;
  background: #0a0020;
  border: 3px solid var(--cyan);
  border-radius: 8px;
  padding: 6px 16px;
  color: var(--bumble-hi);
  text-shadow: 0 0 8px var(--bumble);
}
.nb-op, .nb-eq, .nb-sum { color: var(--cyan-hi); }
.nb-sum { color: var(--bumble-hi); }
.nb-inc, .nb-dec {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px; padding: 8px 14px;
}
.nb-done {
  font-family: 'Audiowide', sans-serif;
  font-size: 16px; letter-spacing: 2px; padding: 10px 22px;
}
.nb-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px; min-height: 28px;
  text-align: center; letter-spacing: 1px;
}
.nb-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.nb-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Add / Sub / Missing addend (shared chrome) (#49 / #50 / #51) ---- */
.add-sub {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
}
.as-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 26px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.as-equation {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(28px, 5vh, 48px);
  color: var(--cyan-hi);
  text-shadow: 0 0 10px var(--cyan);
}
.as-group {
  width: clamp(80px, 14vh, 120px);
  height: clamp(80px, 14vh, 120px);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  border: 2px dashed rgba(0,255,255,0.4);
  border-radius: 10px;
}
.addsub-group { width: 88%; height: 88%; }
.addsub-dot { fill: var(--bumble-hi); filter: drop-shadow(0 0 4px var(--bumble)); }
.addsub-dot.crossed { fill: #555; }
.addsub-cross { stroke: #ff6b7a; stroke-width: 3; stroke-linecap: round; }
.as-op { color: var(--bumble-hi); text-shadow: 0 0 8px var(--bumble); }
.as-q  { color: var(--bumble-hi); text-shadow: 0 0 8px var(--bumble); min-width: 50px; text-align: center; }
.as-num { color: var(--bumble-hi); text-shadow: 0 0 8px var(--bumble); }
.as-choices {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.as-choice {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(24px, 4vh, 36px);
  min-width: 64px; min-height: 64px;
  padding: 8px 18px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--cyan-hi);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--cyan), 1px 1px 0 #000;
  transition: transform 0.1s, box-shadow 0.1s;
}
.as-choice:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 18px rgba(0, 255, 255, 0.5); }
.as-choice.as-correct {
  background: linear-gradient(180deg, #0e4a1e 0%, #042208 100%);
  border-color: #4dffa0; color: #4dffa0;
}
.as-choice.as-wrong {
  background: linear-gradient(180deg, #4a0e1e 0%, #220408 100%);
  border-color: #ff6b7a; color: #ff6b7a;
}
.as-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px; min-height: 28px;
  letter-spacing: 1px; text-align: center;
}
.as-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.as-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Compare (#52) ---- */
.compare {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 16px;
}
.cmp-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(18px, 3vh, 30px);
  color: var(--cyan-hi); text-shadow: 0 0 12px var(--cyan);
  letter-spacing: 1.5px; margin: 0; text-align: center;
}
.cmp-row { display: flex; gap: 30px; }
.cmp-card {
  width: clamp(130px, 22vh, 200px);
  height: clamp(130px, 22vh, 200px);
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  border: 3px solid var(--cyan);
  border-radius: 12px;
  cursor: pointer;
  padding: 12px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.cmp-card:hover { transform: translateY(-3px); box-shadow: 0 0 18px rgba(0, 255, 255, 0.5); }
.cmp-card.cmp-correct {
  background: linear-gradient(180deg, #0e4a1e 0%, #042208 100%);
  border-color: #4dffa0;
}
.cmp-card.cmp-wrong {
  background: linear-gradient(180deg, #4a0e1e 0%, #220408 100%);
  border-color: #ff6b7a;
}
.cmp-group { width: 100%; height: 100%; }
.cmp-dot { fill: var(--bumble-hi); filter: drop-shadow(0 0 4px var(--bumble)); }
.cmp-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px; min-height: 28px;
  letter-spacing: 1px; text-align: center;
}
.cmp-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.cmp-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ============================================================
   ===================== MATH M2 EXERCISES ====================
   ============================================================ */

/* ---- Number-line hop (#53) ---- */
.number-line-hop, .empty-number-line {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; padding: 16px;
}
.nlh-prompt, .enl-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.nlh-line, .enl-line {
  position: relative;
  width: clamp(280px, 80%, 640px);
  height: 80px;
}
.nlh-track, .enl-track {
  position: absolute; top: 50%;
  left: 0; right: 0; height: 4px;
  background: var(--cyan);
  transform: translateY(-50%);
  box-shadow: 0 0 8px var(--cyan);
}
.nlh-tick {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  padding: 0;
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  color: var(--cyan-hi);
  background: #0a0020;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  cursor: pointer;
}
.nlh-tick:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.15); }
.nlh-tick.nlh-correct {
  background: #0e4a1e; border-color: #4dffa0; color: #4dffa0;
}
.nlh-tick.nlh-wrong {
  background: #4a0e1e; border-color: #ff6b7a; color: #ff6b7a;
}
.nlh-optimus {
  position: absolute; top: -22px;
  transform: translateX(-50%);
  font-size: 28px;
  color: var(--bumble-hi);
  text-shadow: 0 0 12px var(--bumble);
  transition: left 0.35s ease-in-out;
}
.nlh-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px; min-height: 28px;
  text-align: center; letter-spacing: 1px;
}
.nlh-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.nlh-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Empty number line (#54) ---- */
.enl-line { cursor: crosshair; }
.enl-end {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  color: var(--bumble-hi);
  background: #0a0020;
  border: 2px solid var(--bumble);
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
}
.enl-zero { left: 0; }
.enl-max { left: 100%; }
.enl-mid {
  transform: translate(-50%, -50%);
  opacity: 0.7;
  font-size: 14px;
  width: 30px; height: 30px;
  border-width: 1px;
}
.enl-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  pointer-events: none;
}
.enl-tick.minor { height: 12px; background: rgba(0, 255, 255, 0.35); }
.enl-tick.major { height: 22px; background: rgba(255, 255, 255, 0.6); }
.enl-marker {
  position: absolute; top: 50%;
  width: 6px; height: 30px;
  transform: translate(-50%, -50%);
  background: var(--cyan-hi);
  box-shadow: 0 0 10px var(--cyan);
  border-radius: 3px;
}
.enl-marker.enl-correct { background: #4dffa0; box-shadow: 0 0 12px rgba(77, 255, 160, 0.85); }
.enl-marker.enl-wrong { background: #ff6b7a; box-shadow: 0 0 12px rgba(255, 107, 122, 0.85); }
.enl-feedback { font-family: 'Audiowide', sans-serif; font-size: 20px; min-height: 28px; text-align: center; }
.enl-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.enl-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Making ten (#55) ---- */
.making-ten, .doubles {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 16px;
}
.mt-prompt, .db-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.mt-equation, .db-equation {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(28px, 5vh, 44px);
  color: var(--bumble-hi);
  text-shadow: 0 0 10px var(--bumble);
}
.mt-num, .mt-q, .mt-split, .mt-ten, .db-q {
  display: inline-block;
  min-width: 40px;
  padding: 4px 10px;
  background: #0a0020;
  border: 2px solid var(--cyan);
  border-radius: 6px;
  text-align: center;
}
.mt-q, .db-q { color: var(--bumble-hi); }
.mt-ten { color: #4dffa0; border-color: #4dffa0; }
.mt-op, .mt-arrow { color: var(--cyan-hi); font-size: 0.9em; }
.mt-strategy {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 8px;
  border: 1px dashed rgba(0, 255, 255, 0.3);
  border-radius: 8px;
}
.mt-label {
  font-family: 'VT323', monospace;
  color: #b8b8c8; letter-spacing: 1px;
  font-size: 14px;
}
.mt-chain { display: flex; align-items: center; gap: 6px; font-size: 0.7em; }
.mt-choices, .db-choices {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.mt-choice, .db-choice {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(22px, 4vh, 32px);
  min-width: 64px; min-height: 60px;
  padding: 8px 18px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--cyan-hi);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--cyan), 1px 1px 0 #000;
}
.mt-choice:hover:not(:disabled), .db-choice:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 18px rgba(0, 255, 255, 0.5); }
.mt-choice.mt-correct, .db-choice.db-correct {
  background: #0e4a1e; border-color: #4dffa0; color: #4dffa0;
}
.mt-choice.mt-wrong, .db-choice.db-wrong {
  background: #4a0e1e; border-color: #ff6b7a; color: #ff6b7a;
}
.mt-feedback, .db-feedback { font-family: 'Audiowide', sans-serif; font-size: 20px; min-height: 28px; text-align: center; letter-spacing: 1px; }
.mt-feedback.ok, .db-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.mt-feedback.fail, .db-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Doubles (#56) ---- */
.db-tag {
  font-family: 'Audiowide', sans-serif;
  font-size: 13px;
  color: var(--bumble);
  letter-spacing: 2px;
  background: rgba(255, 204, 0, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
}
.db-tray {
  display: flex; align-items: center; gap: 16px;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(24px, 4vh, 40px);
  color: var(--cyan-hi);
}
.db-side {
  width: clamp(80px, 14vh, 110px); height: clamp(80px, 14vh, 110px);
  background: rgba(0,0,0,0.35);
  border: 2px dashed rgba(0,255,255,0.4);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.db-group { width: 88%; height: 88%; }
.db-dot { fill: var(--bumble-hi); filter: drop-shadow(0 0 4px var(--bumble)); }
.db-op { color: var(--bumble-hi); }

/* ============================================================
   ===================== MATH M3 EXERCISES ====================
   ============================================================ */

/* ---- Base-10 blocks (#57) ---- */
.base10 {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 16px;
}
.b10-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.b10-blocks {
  display: flex; gap: 18px; align-items: flex-end;
  min-height: 110px;
}
.b10-tens, .b10-ones {
  display: flex; gap: 4px; flex-wrap: wrap;
  max-width: 240px;
}
.b10-rod {
  display: flex; flex-direction: column; gap: 2px;
  width: 16px; height: 100px;
  background: linear-gradient(180deg, var(--cyan) 0%, #0a3a5a 100%);
  border: 1px solid var(--cyan-hi);
  border-radius: 4px;
  padding: 2px;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}
.b10-rod span { flex: 1; background: rgba(0,0,0,0.25); border-radius: 1px; }
.b10-cube {
  width: 16px; height: 16px;
  background: linear-gradient(180deg, var(--bumble) 0%, #aa7700 100%);
  border: 1px solid var(--bumble-hi);
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}
.b10-choices { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.b10-choice {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(22px, 4vh, 32px);
  min-width: 64px; padding: 10px 18px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--cyan-hi);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--cyan), 1px 1px 0 #000;
}
.b10-choice.b10-correct { background: #0e4a1e; border-color: #4dffa0; color: #4dffa0; }
.b10-choice.b10-wrong   { background: #4a0e1e; border-color: #ff6b7a; color: #ff6b7a; }
.b10-feedback { font-family: 'Audiowide', sans-serif; font-size: 20px; min-height: 28px; text-align: center; }
.b10-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.b10-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Two-digit operations (#58 / #59 / #60) ---- */
.tdop {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 16px;
}
.tdop-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi); letter-spacing: 1.5px; margin: 0;
}
.tdop-eq {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(36px, 6vh, 56px);
  color: var(--bumble-hi);
  text-shadow: 0 0 12px var(--bumble);
}
.tdop-num, .tdop-q {
  display: inline-block;
  background: #0a0020;
  border: 3px solid var(--cyan);
  border-radius: 8px;
  padding: 6px 16px;
  min-width: 70px; text-align: center;
}
.tdop-op { color: var(--cyan-hi); }
.tdop-choices { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tdop-choice {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(22px, 4vh, 32px);
  min-width: 70px; padding: 10px 18px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--cyan-hi);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--cyan), 1px 1px 0 #000;
}
.tdop-choice.tdop-correct { background: #0e4a1e; border-color: #4dffa0; color: #4dffa0; }
.tdop-choice.tdop-wrong   { background: #4a0e1e; border-color: #ff6b7a; color: #ff6b7a; }
.tdop-feedback { font-family: 'Audiowide', sans-serif; font-size: 20px; min-height: 28px; text-align: center; }
.tdop-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.tdop-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ============================================================
   ===================== MATH M4 EXERCISES ====================
   ============================================================ */

/* ---- Shared MCQ (#61 #62 #63 #64 #65 #66) ---- */
.mmcq {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 16px;
}
.mmcq-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.mmcq-eq {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(36px, 6vh, 52px);
  color: var(--bumble-hi);
  text-shadow: 0 0 12px var(--bumble);
  padding: 8px 18px;
  background: #0a0020;
  border: 3px solid var(--cyan);
  border-radius: 8px;
  letter-spacing: 2px;
}
.mmcq-visual { display: flex; justify-content: center; }
.mmcq-groups { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.mmcq-group {
  display: flex; flex-wrap: wrap;
  gap: 4px; max-width: 70px;
  padding: 6px;
  border: 2px dashed rgba(0, 255, 255, 0.4);
  border-radius: 8px;
}
.mmcq-array {
  display: grid; gap: 4px; padding: 8px;
}
.mmcq-dot {
  width: 16px; height: 16px;
  background: radial-gradient(circle, var(--bumble) 0%, var(--bumble-hi) 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--bumble);
}
.mmcq-choices { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mmcq-choice {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(22px, 4vh, 32px);
  min-width: 64px; padding: 10px 18px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--cyan-hi);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--cyan), 1px 1px 0 #000;
}
.mmcq-choice.mmcq-correct { background: #0e4a1e; border-color: #4dffa0; color: #4dffa0; }
.mmcq-choice.mmcq-wrong   { background: #4a0e1e; border-color: #ff6b7a; color: #ff6b7a; }
.mmcq-feedback { font-family: 'Audiowide', sans-serif; font-size: 20px; min-height: 28px; text-align: center; }
.mmcq-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.mmcq-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ============================================================
   ===================== MATH M5 EXERCISES ====================
   ============================================================ */

/* ---- Word problem (#67) ---- */
.word-problem, .bar-model, .mixed {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 20px;
}
.wp-story {
  font-family: 'VT323', monospace;
  font-size: clamp(20px, 3.5vh, 32px);
  color: #e8e8f8;
  max-width: 560px; line-height: 1.4;
  text-align: center;
  background: #0a0020;
  border: 2px solid var(--cyan);
  border-radius: 10px;
  padding: 16px 22px;
}
.wp-choices, .bm-choices, .mx-choices { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.wp-choice, .bm-choice, .mx-choice {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(20px, 3.5vh, 30px);
  min-width: 64px; padding: 10px 18px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--cyan-hi);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--cyan), 1px 1px 0 #000;
}
.wp-choice.wp-correct, .bm-choice.bm-correct, .mx-choice.mx-correct { background: #0e4a1e; border-color: #4dffa0; color: #4dffa0; }
.wp-choice.wp-wrong,   .bm-choice.bm-wrong,   .mx-choice.mx-wrong   { background: #4a0e1e; border-color: #ff6b7a; color: #ff6b7a; }
.wp-feedback, .bm-feedback, .mx-feedback { font-family: 'Audiowide', sans-serif; font-size: 20px; min-height: 28px; text-align: center; }
.wp-feedback.ok, .bm-feedback.ok, .mx-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.wp-feedback.fail, .bm-feedback.fail, .mx-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Bar model (#68) ---- */
.bm-prompt, .mx-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.bm-total {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(32px, 5vh, 44px);
  color: var(--bumble-hi);
  text-shadow: 0 0 10px var(--bumble);
  padding: 4px 16px;
  border: 3px solid var(--bumble);
  border-radius: 8px;
  background: #0a0020;
}
.bm-bar {
  display: flex; width: clamp(280px, 70%, 480px);
  height: 60px; gap: 4px;
}
.bm-part {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  border-radius: 8px;
  border: 3px solid var(--cyan);
}
.bm-a { background: linear-gradient(180deg, #1a3a5a 0%, #0a2040 100%); color: var(--cyan-hi); }
.bm-b { background: linear-gradient(180deg, #5a3a1a 0%, #402008 100%); color: var(--bumble-hi); }

/* ---- Mixed ops (#69) ---- */
.mx-eq {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(28px, 5vh, 44px);
  color: var(--bumble-hi);
  text-shadow: 0 0 12px var(--bumble);
  padding: 10px 22px;
  background: #0a0020;
  border: 3px solid var(--cyan);
  border-radius: 8px;
  letter-spacing: 2px;
}

/* ============================================================
   ===================== PHASE 4 EXERCISES ====================
   ============================================================ */

/* ---- Spell-tile (#37) ---- */
.spell-tile, .bc {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
}
.st-prompt, .bc-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.st-slots, .st-pool { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.st-slot {
  width: 50px; height: 60px;
  background: rgba(0,0,0,0.35);
  border: 3px dashed var(--cyan);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Audiowide', sans-serif;
  font-size: 28px; color: var(--bumble-hi);
  cursor: pointer;
}
.st-letter {
  width: 46px; height: 56px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--bumble-hi);
  border: 2px solid var(--bumble);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Audiowide', sans-serif;
  font-size: 24px;
}
.st-actions { display: flex; gap: 12px; }
.st-hear, .st-done { font-family: 'Audiowide', sans-serif; font-size: 13px; padding: 8px 14px; }
.st-feedback { font-family: 'Audiowide', sans-serif; font-size: 18px; min-height: 24px; text-align: center; }
.st-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.st-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Bilingual contrasts (#39) ---- */
.bc-pair { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.bc-word { display: flex; gap: 6px; }
.bc-letter {
  width: 50px; height: 56px;
  background: #1a1a3a;
  border: 2px solid var(--cyan);
  border-radius: 8px;
  font-family: 'Audiowide', sans-serif;
  font-size: 24px;
  color: var(--cyan-hi);
  cursor: pointer;
}
.bc-letter.bc-cognate { border-color: #4dffa0; color: #4dffa0; }
.bc-letter.bc-correct { background: #0e4a1e; color: #4dffa0; }
.bc-letter.bc-wrong   { background: #4a0e1e; color: #ff6b7a; border-color: #ff6b7a; }
.bc-feedback { font-family: 'Audiowide', sans-serif; font-size: 18px; min-height: 24px; text-align: center; }
.bc-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.bc-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ---- Vocab deck (#40) ---- */
.vocab {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
}
.v-prompt {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(16px, 2.5vh, 24px);
  color: var(--cyan-hi); letter-spacing: 1.5px;
  margin: 0; text-align: center;
}
.v-replay { font-family: 'Audiowide', sans-serif; font-size: 13px; padding: 8px 14px; }
.v-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 220px));
  gap: 12px;
}
.v-choice {
  /* Word-tile vocab choice. Tap body = commit. The corner 🔊
     auditions without committing. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 18px 18px 28px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  border: 3px solid var(--cyan);
  border-radius: 12px;
  cursor: pointer;
}
.v-word {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(26px, 4.6vh, 40px);
  line-height: 1.1;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
}
.v-ear {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: clamp(16px, 2.2vh, 22px);
  opacity: 0.55;
}
.v-choice.v-correct { background: #0e4a1e; border-color: #4dffa0; color: #4dffa0; }
.v-choice.v-wrong   { background: #4a0e1e; border-color: #ff6b7a; color: #ff6b7a; }
.v-feedback { font-family: 'Audiowide', sans-serif; font-size: 20px; min-height: 28px; text-align: center; }
.v-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.v-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }

/* ============================================================
   ===================== PHASE 3 STORY READER =================
   ============================================================ */

.story-read {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 16px;
}
.sr-title {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(20px, 3.5vh, 30px);
  color: var(--bumble-hi);
  text-shadow: 0 0 12px var(--bumble);
  letter-spacing: 1.5px;
  margin: 0;
}
.sr-pageinfo {
  font-family: 'VT323', monospace;
  font-size: 14px; color: #8a8a9a;
  letter-spacing: 1px;
}
.sr-page {
  font-family: 'VT323', monospace;
  font-size: clamp(24px, 4vh, 36px);
  line-height: 1.5;
  color: #e8e8f8;
  background: #0a0020;
  border: 2px solid var(--cyan);
  border-radius: 10px;
  padding: 18px 24px;
  max-width: 720px;
  text-align: left;
}
.sr-word { display: inline; transition: background 0.18s, color 0.18s; }
.sr-word.sr-pending { color: #e8e8f8; }
.sr-word.sr-heard   { color: #4dffa0; text-shadow: 0 0 6px rgba(77, 255, 160, 0.6); }
.sr-word.sr-skipped { color: #ff6b7a; opacity: 0.75; }
.sr-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sr-listen, .sr-solo, .sr-next {
  font-family: 'Audiowide', sans-serif;
  font-size: 13px; padding: 8px 14px;
  letter-spacing: 1px;
}
.sr-feedback {
  font-family: 'Audiowide', sans-serif;
  font-size: 18px; min-height: 24px;
  text-align: center; letter-spacing: 0.5px;
}
.sr-feedback.ok { color: #4dffa0; text-shadow: 0 0 12px rgba(77, 255, 160, 0.7); }
.sr-feedback.fail { color: #ff6b7a; text-shadow: 0 0 10px rgba(255, 107, 122, 0.7); }
.sr-feedback.listening { color: var(--cyan-hi); }

/* ---- Comprehension Q&A (#33) ---- */
.sr-comprehension {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding: 16px;
  max-width: 720px;
}
.sr-q {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(20px, 3.5vh, 30px);
  color: var(--cyan-hi);
  text-shadow: 0 0 8px var(--cyan);
  text-align: center; margin: 0;
}
.sr-q-choices {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.sr-q-choice {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(18px, 3vh, 24px);
  padding: 12px 22px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--bumble-hi);
  border: 3px solid var(--cyan);
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--bumble), 1px 1px 0 #000;
}
.sr-q-choice:disabled { opacity: 0.6; }
.sr-q-choice.sr-q-correct { background: #0e4a1e; border-color: #4dffa0; color: #4dffa0; }
.sr-q-choice.sr-q-wrong { background: #4a0e1e; border-color: #ff6b7a; color: #ff6b7a; }

.sr-intervention {
  font-family: 'VT323', monospace;
  font-size: 16px;
  min-height: 20px;
  color: #ffaa55;
  text-align: center;
}
.sr-intervention.show {
  background: rgba(255, 170, 85, 0.12);
  border: 1px solid #ffaa55;
  border-radius: 6px;
  padding: 6px 14px;
}

/* ============================================================
   ===================== KARAOKE PHONICS READER (#93 #96) =====
   ============================================================
   The kid sees ONE word at a time at full focus, with the current
   syllable lit up while audio plays. Tap any syllable to re-hear.
   Context strip below shows the surrounding sentence so the kid
   knows where in the text they are. */

.karaoke-read {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  padding: 20px;
  overflow-y: auto;
}

/* ---- Picker (one card per source) ---- */
.kr-picker { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 900px; width: 100%; }
.kr-picker-header {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(22px, 4vh, 32px);
  letter-spacing: 2px;
  color: var(--cyan-hi, #66ffff);
  margin: 0;
}
.kr-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
}
.kr-picker-card {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  border: 3px solid var(--cyan, #00e5ff);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.1s, box-shadow 0.1s;
}
.kr-picker-card:hover { transform: translateY(-2px); box-shadow: 0 0 18px rgba(0, 255, 255, 0.5); }
.kr-source-badge {
  display: inline-block;
  font-family: 'Audiowide', sans-serif;
  font-size: 11px; letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(0, 255, 255, 0.18);
  color: var(--cyan-hi, #66ffff);
  align-self: flex-start;
}
.kr-source-custom { background: rgba(255, 204, 0, 0.18); color: var(--bumble-hi, #ffe066); }
.kr-picker-title {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 3vh, 22px);
  color: #fff;
}
.kr-picker-empty {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.55);
  padding: 8px 0;
}

/* ---- Reader ---- */
.kr-reader { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 900px; }

.kr-progress {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  max-width: 600px;
}
.kr-progress-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.15s, transform 0.15s;
}
.kr-progress-dot.current { background: var(--bumble, #ffcc00); transform: scale(1.4); }
.kr-progress-dot.done { background: #4dffa0; }
.kr-progress-dot.skip { background: #ff6b7a; }

.kr-current {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 12vh, 96px);
  letter-spacing: 0.04em;
  display: flex; gap: 0.18em;
  justify-content: center; align-items: baseline; flex-wrap: wrap;
  min-height: clamp(80px, 14vh, 120px);
  color: #fff;
}
.kr-syl {
  color: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: color 0.18s, text-shadow 0.18s, transform 0.1s;
  padding: 0 2px;
  border-radius: 6px;
}
.kr-syl:hover { color: rgba(255, 255, 255, 0.6); }
.kr-syl:active { transform: scale(0.96); }
.kr-syl-active {
  color: var(--cyan, #00e5ff);
  text-shadow: 0 0 18px rgba(0, 255, 255, 0.65);
}
.kr-punct {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.kr-context {
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(16px, 2.4vh, 22px);
  line-height: 1.5;
  max-width: 800px;
  text-align: center;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.kr-ctx-word { color: rgba(255, 255, 255, 0.42); padding: 0 2px; }
.kr-ctx-word.kr-ctx-active {
  color: var(--bumble-hi, #ffe066);
  background: rgba(255, 204, 0, 0.18);
  border-radius: 4px;
}
.kr-ctx-word.kr-ctx-done { color: #4dffa0; }
.kr-ctx-word.kr-ctx-skip { color: #ff6b7a; text-decoration: line-through; }
.kr-ctx-punct { color: rgba(255, 255, 255, 0.3); }

.kr-actions { display: flex; gap: 14px; }
.kr-listen, .kr-skip {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 8px 18px;
}
.kr-skip:disabled { opacity: 0.4; cursor: default; }

.kr-status {
  font-family: 'VT323', monospace;
  font-size: 18px;
  min-height: 22px;
  text-align: center;
  letter-spacing: 0.5px;
}
.kr-status.fail { color: #ff6b7a; }

.kr-finish {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(36px, 8vh, 64px);
  letter-spacing: 2px;
  color: #4dffa0;
  text-shadow: 0 0 16px rgba(77, 255, 160, 0.7);
}

.kr-stuck {
  margin-top: 14px;
  padding: 10px 16px;
  background: rgba(255, 107, 122, 0.08);
  border: 1px solid rgba(255, 107, 122, 0.5);
  border-radius: 8px;
  max-width: 600px;
}
.kr-stuck-label {
  font-family: 'Audiowide', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #ff6b7a;
  margin-bottom: 6px;
}
.kr-stuck ul {
  list-style: disc inside;
  margin: 0; padding: 0;
  font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: #fff;
}

.kr-empty {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   ===================== ENERGON SHOP =========================
   ============================================================ */

.shop-trigger {
  margin-left: 6px;
  font-size: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 6px;
}
.shop-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 16, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.shop-overlay.show { display: flex; }
.shop-card {
  width: min(900px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0a0a20 0%, #04041a 100%);
  border: 3px solid var(--cyan);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}
.shop-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.shop-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  color: var(--bumble-hi);
  text-shadow: 0 0 12px var(--bumble);
  letter-spacing: 2px;
  margin: 0; flex: 1;
}
.shop-balance {
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  color: var(--cyan-hi);
  background: #0a0020;
  border: 2px solid var(--cyan);
  border-radius: 8px;
  padding: 6px 14px;
}
.shop-balance strong { color: var(--bumble-hi); margin-left: 4px; }
.shop-close { font-family: 'Audiowide', sans-serif; font-size: 13px; }
.shop-category { margin-bottom: 18px; }
.shop-cat-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 16px;
  color: var(--cyan-hi);
  letter-spacing: 2px;
  margin: 0 0 10px;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.shop-tile {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(0, 255, 255, 0.35);
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.shop-tile.affordable { border-color: var(--bumble); box-shadow: 0 0 10px rgba(255, 204, 0, 0.3); }
.shop-tile.owned { opacity: 0.6; border-color: #4dffa0; }
.shop-tile-label {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  color: #e8e8f8;
  letter-spacing: 1px;
}
.shop-tile-cost {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--bumble);
}
.shop-bar {
  height: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  overflow: hidden;
}
.shop-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bumble) 0%, var(--bumble-hi) 100%);
}
.shop-buy {
  font-family: 'Audiowide', sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #2a2a5a 0%, #0a0a40 100%);
  color: var(--cyan-hi);
  border: 2px solid var(--cyan);
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 1px;
}
.shop-buy:disabled { opacity: 0.5; cursor: default; }
.shop-buy.is-owned {
  background: #0e4a1e; border-color: #4dffa0; color: #4dffa0;
}

/* ---- Mission of the day (#75) ---- */
/* ---- Practice of the Day banner (#104) ----
   Sits above the Cybertron Crossing map card. Hidden when the
   picker returns null (no review-due / stuck-practicing skill).
   Visually distinct from the map (smaller, bumble-themed, single
   line) so the kid reads it as a side-nudge, not as the main
   action. ROLL OUT is still the primary CTA. */
.practice-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 12px auto;
  padding: 10px 18px;
  max-width: 600px;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.15) 0%, rgba(255, 204, 0, 0.15) 100%);
  border: 2px solid var(--bumble);
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(255, 204, 0, 0.35);
}
.practice-banner.is-done {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(0, 255, 255, 0.10) 100%);
  border-color: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}
.practice-banner-tag {
  font-family: 'Audiowide', sans-serif;
  font-size: 12px;
  color: var(--bumble-hi);
  text-shadow: 0 0 6px var(--bumble);
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.practice-banner-skill {
  font-family: 'Audiowide', sans-serif;
  font-size: 18px;
  color: var(--cyan-hi);
  flex: 1;
  text-align: center;
  letter-spacing: 1px;
  text-transform: capitalize;
}
.practice-banner-go {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  padding: 8px 14px;
}
.practice-banner-done {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  color: #22c55e;
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ---- Hall of Glory (#71) ---- */
.hall-trigger, .library-trigger {
  margin-left: 4px;
  font-size: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 4px;
}
.hall-overlay, .library-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 16, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.hall-overlay.show, .library-overlay.show { display: flex; }
.hall-card, .library-card {
  width: min(900px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0a0a20 0%, #04041a 100%);
  border: 3px solid var(--bumble);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.5);
}
.hall-header, .library-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hall-title, .library-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  color: var(--bumble-hi);
  text-shadow: 0 0 12px var(--bumble);
  letter-spacing: 2px;
  margin: 0; flex: 1;
}
.hall-close, .library-close { font-family: 'Audiowide', sans-serif; font-size: 13px; }
.hall-group, .library-section { margin-bottom: 18px; }
.hall-group-title, .library-cat-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 16px;
  color: var(--cyan-hi);
  letter-spacing: 2px;
  margin: 0 0 10px;
}
.hall-grid, .library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.hall-tile {
  background: linear-gradient(180deg, #3a2a0a 0%, #1a1000 100%);
  border: 3px solid var(--bumble);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.4);
  transition: transform 0.1s;
}
.hall-tile:hover { transform: translateY(-2px); }
.hall-key {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px;
  color: var(--bumble-hi);
  text-shadow: 0 0 8px var(--bumble);
}
.hall-meta { font-family: 'VT323', monospace; font-size: 13px; color: #b8a880; }
.hall-empty, .library-empty {
  font-family: 'VT323', monospace;
  color: #8a8a9a;
  font-style: italic;
  text-align: center;
  padding: 20px;
}
.library-tile {
  background: linear-gradient(180deg, #3a2a0a 0%, #1a1000 100%);
  border: 3px solid var(--bumble);
  border-radius: 10px;
  padding: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.4);
}
.library-label {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px;
  color: var(--bumble-hi);
  text-align: center;
  letter-spacing: 1px;
}

/* ---- Reciting Hall (#73) ---- */
.reciting-trigger { margin-left: 4px; font-size: 16px; background: none; border: 0; cursor: pointer; padding: 0 4px; }
.reciting-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 16, 0.85);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.reciting-overlay.show { display: flex; }
.reciting-card {
  width: min(720px, 100%); max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #0a0a20 0%, #04041a 100%);
  border: 3px solid var(--bumble); border-radius: 12px; padding: 20px;
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.5);
}
.reciting-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.reciting-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 20px; letter-spacing: 2px;
  color: var(--bumble-hi);
  margin: 0; flex: 1;
}
.reciting-record {
  font-family: 'Audiowide', sans-serif;
  font-size: 13px; padding: 8px 14px;
  letter-spacing: 1.5px;
}
.reciting-record.is-recording {
  background: linear-gradient(180deg, #4a0e1e 0%, #220408 100%);
  color: #ff6b7a; border-color: #ff6b7a;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 107, 122, 0.4); }
  50% { box-shadow: 0 0 20px rgba(255, 107, 122, 0.9); }
}
.reciting-status {
  font-family: 'VT323', monospace; font-size: 16px;
  min-height: 22px; margin-bottom: 8px;
  color: #b8b8c8;
}
.reciting-status.listening { color: #ff6b7a; }
.reciting-status.fail { color: #ffaa55; }
.reciting-list { display: flex; flex-direction: column; gap: 8px; }
.reciting-empty {
  font-family: 'VT323', monospace; color: #8a8a9a;
  font-style: italic; text-align: center; padding: 20px;
}
.reciting-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--cyan);
  border-radius: 8px;
}
.reciting-meta { flex: 1; }
.reciting-date { font-family: 'Audiowide', sans-serif; font-size: 13px; color: var(--cyan-hi); }
.reciting-duration { font-family: 'VT323', monospace; font-size: 14px; color: #8a8a9a; }
.reciting-play, .reciting-share, .reciting-del {
  font-family: 'Audiowide', sans-serif;
  font-size: 12px; padding: 6px 10px;
}

/* ---- Build a story (#74) ---- */
.bs-trigger { margin-left: 4px; font-size: 16px; background: none; border: 0; cursor: pointer; padding: 0 4px; }
.build-story-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 16, 0.85);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.build-story-overlay.show { display: flex; }
.bs-card {
  width: min(820px, 100%); max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #0a0a20 0%, #04041a 100%);
  border: 3px solid var(--cyan); border-radius: 12px; padding: 20px;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}
.bs-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.bs-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 22px; letter-spacing: 2px;
  color: var(--bumble-hi); text-shadow: 0 0 12px var(--bumble);
  margin: 0; flex: 1;
}
.bs-close { font-family: 'Audiowide', sans-serif; font-size: 13px; }
.bs-prompt {
  font-family: 'VT323', monospace;
  color: #b8b8c8; text-align: center;
  margin: 0 0 14px;
}
.bs-pickers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bs-col { display: flex; flex-direction: column; gap: 6px; }
.bs-col-title {
  font-family: 'Audiowide', sans-serif;
  font-size: 13px; letter-spacing: 1.5px;
  color: var(--cyan-hi);
  margin: 0 0 4px; text-align: center;
}
.bs-option {
  font-family: 'Audiowide', sans-serif;
  font-size: 14px; padding: 10px 8px;
  background: linear-gradient(180deg, #1a1a3a 0%, #0a0020 100%);
  color: var(--cyan-hi);
  border: 2px solid var(--cyan);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.bs-option.selected {
  background: linear-gradient(180deg, #3a2a0a 0%, #1a1000 100%);
  border-color: var(--bumble); color: var(--bumble-hi);
  box-shadow: 0 0 12px rgba(255, 204, 0, 0.5);
}
/* Story Studio reader (#41) — multi-page generated story */
.bs-reader { display: none; margin: 16px 0; }
.bs-reader.show { display: block; }
.bs-story-title {
  font-family: 'Audiowide', sans-serif;
  font-size: clamp(18px, 2.6vh, 24px);
  color: var(--bumble-hi); text-shadow: 0 0 10px var(--bumble);
  text-align: center; margin: 0 0 12px; letter-spacing: 1px;
}
.bs-page {
  font-family: 'VT323', monospace;
  font-size: clamp(26px, 4.5vh, 40px);
  color: #e8e8f8; line-height: 1.4; text-align: center;
  background: #0a0020;
  border: 2px solid var(--cyan);
  border-radius: 10px;
  padding: 28px 22px; margin: 0 auto 14px;
  min-height: 110px; max-width: 700px;
  display: flex; align-items: center; justify-content: center;
}
.bs-page-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.bs-nav {
  font-family: 'Audiowide', sans-serif; font-size: 14px;
  padding: 10px 18px; min-width: 48px;
}
.bs-nav:disabled { opacity: 0.35; cursor: default; }
.bs-page-counter {
  font-family: 'VT323', monospace; font-size: 18px;
  color: var(--cyan-hi); min-width: 70px; text-align: center;
}
.bs-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.bs-build { font-family: 'Audiowide', sans-serif; font-size: 14px; padding: 10px 22px; letter-spacing: 2px; }
.bs-save, .bs-again { font-family: 'Audiowide', sans-serif; font-size: 12px; padding: 8px 14px; }