/* HUD cleanup lane: learn-b (2026-10-31). Builds on styles/72-hud-taste.css tokens.
   Games: crownRhythmTap, wordFamilies, musicSequencer, candyMath, mathArray, mathGraph, memory, butterflyNet.
   One family: frosted pearl panel or pill, one gold hairline, plum ink, rounded type, no side stripes.
   Removed panels are hidden here (DOM kept) so nothing that reads them breaks. */

/* ---------- shared visually-hidden helper (keeps aria-live text for screen readers) ---------- */
.mini-game-board.musicSequencer #ms-pattern-note,
.mini-game-board.wordFamilies .word-family-level-badge,
.mini-game-board.candyMath .candy-math-round {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ======================= Crown Rhythm Conductor ======================= */
/* Card: mode name + the movement's rule. Count lives in the shell progress pill; the
   "Conduct beat N of M" line repeats the big tap button, so it hides while that button shows. */
.mini-game-board.crownRhythmTap .crown-rhythm-card {
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 300px));
  min-height: 0;
  padding: 9px 18px 10px;
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: var(--hud-text);
  text-align: center;
  box-shadow: var(--hud-shadow);
  backdrop-filter: var(--hud-blur);
}
.mini-game-board.crownRhythmTap .crown-rhythm-card strong {
  margin-bottom: 2px;
  color: var(--hud-rose);
  font: 800 16px/1.15 var(--hud-font);
}
.mini-game-board.crownRhythmTap .crown-rhythm-card span {
  color: var(--hud-ink);
  font: var(--hud-text);
}
.mini-game-board.crownRhythmTap .crown-rhythm-card em {
  margin-top: 3px;
  color: var(--hud-ink-soft);
  font: var(--hud-text-small);
}
.mini-game-board.crownRhythmTap .crown-rhythm-stage:has([data-rhythm-tap]:not([hidden])) [data-rhythm-next] {
  display: none;
}
/* Clue chips sit bare under the card: no dark box around them. */
.mini-game-board.crownRhythmTap .crown-rhythm-pattern {
  top: 104px;
  width: auto;
  min-height: 0;
  padding: 0;
  gap: 8px;
  border: 0;
  background: none;
}
.mini-game-board.crownRhythmTap .crown-rhythm-chip {
  min-width: 70px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font: 800 13px/1.1 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}
.mini-game-board.crownRhythmTap .crown-rhythm-replay {
  min-width: 0;
  min-height: var(--hud-tap);
  padding: 0 18px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  box-shadow: var(--hud-shadow-soft);
  font: var(--hud-text);
}
.mini-game-board.crownRhythmTap .crown-rhythm-replay::before {
  content: "↻ ";
  color: var(--hud-gold);
}
.mini-game-board.crownRhythmTap .crown-rhythm-choices small { font-size: 13px; }
.mini-game-board.crownRhythmTap .crown-rhythm-choices strong { font-size: 14px; }
@media (max-width: 620px) {
  .mini-game-board.crownRhythmTap .crown-rhythm-card {
    left: 8px;
    right: 8px;
    top: 8px;
    transform: none;
    width: auto;
    padding: 8px 12px;
  }
  .mini-game-board.crownRhythmTap .crown-rhythm-card span { font: var(--hud-text-small); }
  .mini-game-board.crownRhythmTap .crown-rhythm-pattern {
    top: 96px;
    left: 8px;
    width: calc(100% - 160px);
    gap: 5px;
  }
  .mini-game-board.crownRhythmTap .crown-rhythm-chip {
    min-width: 0;
    padding: 7px 4px;
    font-size: 13px;
  }
  .mini-game-board.crownRhythmTap .crown-rhythm-replay {
    top: 92px;
    right: 8px;
    min-width: 0;
    width: auto;
    padding: 0 14px;
  }
  .mini-game-board.crownRhythmTap .crown-rhythm-ring { margin-top: 96px; }
}

/* ======================= Word Families ======================= */
/* Level card = the one goal (title + prompt). "Reading level 1 of 5" repeats the progress pill. */
.mini-game-board.wordFamilies .word-family-reading-level {
  gap: 2px;
  width: min(100%, 760px);
  padding: 10px 20px;
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  text-align: center;
  box-shadow: var(--hud-shadow);
  backdrop-filter: var(--hud-blur);
}
.mini-game-board.wordFamilies .word-family-level-title { color: var(--hud-ink); }
.mini-game-board.wordFamilies .word-family-level-prompt {
  color: var(--hud-ink-soft);
  font: var(--hud-text);
}
/* Voice ladder: four small pearl pills (number + one word). The long prompt is still spoken
   and announced when tapped (setLive + clip), and stays in each button's aria-label. */
.mini-game-board.wordFamilies .word-family-voice-ladder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(100%, 760px);
}
.mini-game-board.wordFamilies .word-family-voice-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--hud-tap);
  padding: 0 16px 0 6px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
  backdrop-filter: var(--hud-blur);
}
.mini-game-board.wordFamilies .word-family-voice-step em { display: none; }
.mini-game-board.wordFamilies .word-family-voice-step span {
  width: 34px;
  height: 34px;
  font: 800 15px/34px var(--hud-font);
}
.mini-game-board.wordFamilies .word-family-voice-step strong {
  font: 800 15px/1 var(--hud-font);
  color: var(--hud-ink);
}
.mini-game-board.wordFamilies .word-family-card-tray {
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: rgba(255, 250, 247, 0.32);
}
@media (max-width: 620px) {
  body.mini-game-page-open .mini-game-board.wordFamilies.word-families .word-family-stage {
    align-self: start;
    height: 100dvh;
    min-height: 0;
    padding-top: 64px;
    overflow-y: auto;
  }
  .mini-game-board.wordFamilies .word-family-reading-level { padding: 8px 12px; }
  .mini-game-board.wordFamilies .word-family-level-prompt { font: var(--hud-text-small); }
  .mini-game-board.wordFamilies .word-family-voice-ladder { gap: 6px; }
  .mini-game-board.wordFamilies .word-family-voice-step {
    flex: 1 1 calc(50% - 6px);
    padding: 0 10px 0 5px;
  }
  .mini-game-board.wordFamilies .word-family-voice-step strong { font-size: 14px; }
}

/* ======================= Music Sequencer (Enchanted Music Stage) ======================= */
/* Gone: big title + subtitle (the world pill and progress pill name the game), the × close
   (duplicate of the shell's Back, and it sat under the progress pill), the "Royal Moonlight
   Stage" plaque, the helper prompt sentence, and the summary line (the three story chips show
   the same thing; the line stays for screen readers). */
.mini-game-board.musicSequencer #ms-container > h2,
.mini-game-board.musicSequencer #ms-subtitle,
.mini-game-board.musicSequencer #ms-close-btn,
.mini-game-board.musicSequencer #ms-helper-panel > p {
  display: none;
}
.mini-game-board.musicSequencer #ms-stage::before { display: none; }
.mini-game-board.musicSequencer #ms-stage {
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  box-shadow: var(--hud-shadow);
}
.mini-game-board.musicSequencer #ms-stage-prompt {
  color: var(--hud-ink);
  font: var(--hud-text-small);
}
/* Story chips + helper tunes: one row family of pearl pills. */
.mini-game-board.musicSequencer #ms-proof-list { margin-top: 0; }
.mini-game-board.musicSequencer .ms-proof-chip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 8px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  color: var(--hud-ink);
  font: var(--hud-text-small);
}
.mini-game-board.musicSequencer .ms-proof-chip.done {
  border-color: var(--hud-mint);
  background: rgba(239, 252, 246, 0.95);
  color: #2f6b5c;
}
.mini-game-board.musicSequencer #ms-helper-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.mini-game-board.musicSequencer #ms-helper-row { gap: 8px; }
.mini-game-board.musicSequencer .ms-helper-btn {
  min-height: var(--hud-tap);
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: var(--hud-text);
  box-shadow: var(--hud-shadow-soft);
}
@media (max-width: 620px) {
  .mini-game-board.musicSequencer .ms-helper-btn { font: var(--hud-text-small); padding: 4px 6px; }
}
.mini-game-board.musicSequencer .ms-helper-btn::before {
  content: "🎻 ";
}
.mini-game-board.musicSequencer .ms-btn {
  min-height: var(--hud-tap);
  border-radius: var(--hud-pill);
  font: 800 15px/1 var(--hud-font);
}
.mini-game-board.musicSequencer #ms-save-confirm {
  color: var(--hud-ink) !important;
  font: var(--hud-text-small);
  text-align: center;
}

/* ======================= Math worksheets: candyMath, mathArray, mathGraph ======================= */
.mini-game-board.mathArray .math-mini-card,
.mini-game-board.mathGraph .math-mini-card {
  padding: 10px 22px 11px;
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow);
  backdrop-filter: var(--hud-blur);
}
.mini-game-board.mathArray .math-mini-card strong,
.mini-game-board.mathGraph .math-mini-card strong { color: var(--hud-ink); }
.mini-game-board.mathArray .math-mini-card span,
.mini-game-board.mathGraph .math-mini-card span {
  color: var(--hud-ink);
  font: var(--hud-text);
}
.mini-game-board.mathArray .math-mini-card em,
.mini-game-board.mathGraph .math-mini-card em {
  color: var(--hud-rose);
  font: var(--hud-text-small);
  font-style: normal;
}
/* Count goes bare: no box, no label, just the number line under the pieces. */
.mini-game-board.mathArray .math-build-status,
.mini-game-board.mathGraph .math-build-status {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--hud-ink);
  font: var(--hud-text);
}
/* Helper line now only speaks when it has something new (first sentence repeated the card). */
.mini-game-board.mathArray .math-helper-line,
.mini-game-board.mathGraph .math-helper-line,
.mini-game-board.candyMath .candy-math-hint {
  justify-self: center;
  width: fit-content;
  max-width: min(640px, 100%);
  margin-inline: auto;
  padding: 8px 18px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  color: var(--hud-ink);
  font: var(--hud-text);
  text-align: center;
  box-shadow: var(--hud-shadow-soft);
}
.mini-game-board.mathArray .math-helper-line:empty,
.mini-game-board.mathGraph .math-helper-line:empty { display: none; }
.mini-game-board.mathArray .math-answer-choice,
.mini-game-board.mathGraph .math-answer-choice { min-height: var(--hud-tap); }

/* ======================= Memory Lantern Code ======================= */
/* Proof strip keeps the step line (the one goal); the "Chunk proof" label is gone. */
.mini-game-board.memory .mini-memory-proof {
  justify-self: center;
  width: fit-content;
  max-width: min(560px, 100%);
  padding: 9px 20px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
  backdrop-filter: var(--hud-blur);
}
.mini-game-board.memory .mini-memory-proof b { display: none; }
.mini-game-board.memory .mini-memory-proof span { font: var(--hud-text); }

/* ======================= Butterfly Net Meadow ======================= */
/* "Space = classify" is a keyboard hint; the Classify button is right there for small hands. */
.mini-game-board.butterflyNet .butterfly-space-hint { display: none !important; }
.mini-game-board.butterflyNet .butterfly-mission-chip {
  min-width: 0;
  width: fit-content;
  max-width: min(420px, calc(100% - 24px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  padding: 8px 20px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: var(--hud-text);
  box-shadow: var(--hud-shadow-soft);
  backdrop-filter: var(--hud-blur);
}
.mini-game-board.butterflyNet .butterfly-mission-chip strong {
  margin: 0;
  color: var(--hud-ink);
  font: var(--hud-text);
}
@media (max-width: 620px) {
  .mini-game-board.butterflyNet .butterfly-mission-chip {
    max-width: min(230px, calc(100% - 150px));
    padding: 7px 14px;
  }
  .mini-game-board.butterflyNet .butterfly-mission-chip strong { font: var(--hud-text-small); }
}
/* Control bar: no full-width wash, just the pearl buttons; 48 px targets. */
.mini-game-board.butterflyNet .butterfly-controls {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  padding: 0 0 14px;
  background: none;
}
.mini-game-board.butterflyNet .butterfly-controls button {
  min-width: var(--hud-tap);
  min-height: var(--hud-tap);
  height: var(--hud-tap);
  border: var(--hud-hairline);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
  font: 800 20px/1 var(--hud-font);
}
.mini-game-board.butterflyNet .butterfly-controls [data-butterfly-catch] {
  padding: 0 20px;
  font: 800 16px/1 var(--hud-font);
}

/* Music: a shared phone rule pins buttons to 44 px; kids get 48 px here. Bunny line readable. */
.mini-game-board.musicSequencer #ms-container .ms-btn,
.mini-game-board.musicSequencer #ms-container .ms-helper-btn {
  min-height: var(--hud-tap) !important;
}
.mini-game-board.musicSequencer #ms-orchestra-reaction {
  color: var(--hud-ink);
  font: var(--hud-text-small);
}

/* Story chips are status, not buttons: bare checklist marks so they never read as tappable. */
.mini-game-board.musicSequencer .ms-proof-chip {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--hud-ink-soft);
}
.mini-game-board.musicSequencer .ms-proof-chip::before {
  content: "○";
  margin-right: 5px;
  color: var(--hud-gold);
}
.mini-game-board.musicSequencer .ms-proof-chip.done {
  border: 0;
  background: none;
  color: #2f6b5c;
}
.mini-game-board.musicSequencer .ms-proof-chip.done::before {
  content: "✓";
  color: var(--hud-mint);
}
@media (max-width: 620px) {
  .mini-game-board.musicSequencer .ms-proof-chip {
    padding-inline: 0;
    white-space: nowrap;
    font: var(--hud-text-small);
  }
  .mini-game-board.musicSequencer .ms-proof-chip::before { margin-right: 3px; }
}