/* HUD cleanup lane: motion (2026-10-31). Builds on styles/72-hud-taste.css tokens.
   Games: moonpetalFlight, snowRun (not the ice-skate fallback), danceSteps.
   Rule: keep the game pieces, the controls and ONE next-step line; fold titles, flavour text
   and repeated counters away (kept in the DOM for screen readers and QA hooks). */

/* ---------- Moonpetal Flight ---------- */

/* Side card (title, flavour line, path) and the count card repeat the progress pill and the
   instruction line. The path now lives on the flower buttons (order badges) and in the
   end-of-game reflection. */
.mini-game-board.moonpetal-flight-board .moonpetal-side {
  display: none !important;
}

/* The one next-step line: a pearl pill. */
.mini-game-board.moonpetal-flight-board .moonpetal-instruction {
  top: 68px;
  padding: 8px 18px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow-soft);
  font: var(--hud-text);
  letter-spacing: 0.01em;
}

/* Flower ribbon: no dark tray, four jewel pills in the flowers' own colours. */
.mini-game-board.moonpetal-flight-board .moonpetal-choices {
  bottom: max(16px, env(safe-area-inset-bottom));
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mini-game-board.moonpetal-flight-board .moonpetal-choice {
  position: relative;
  min-height: 56px;
  border: 1px solid rgba(255, 236, 184, 0.85);
  border-radius: var(--hud-radius);
  background: linear-gradient(160deg, var(--moonpetal-color), color-mix(in srgb, var(--moonpetal-color) 55%, #3b1d5c));
  box-shadow: 0 6px 16px rgba(9, 5, 36, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font: 700 16px/1.1 var(--hud-font);
  text-shadow: 0 1px 2px rgba(31, 8, 43, 0.45);
}
.mini-game-board.moonpetal-flight-board .moonpetal-choice::before {
  margin-bottom: 4px;
  font-size: 18px;
}
.mini-game-board.moonpetal-flight-board .moonpetal-choice[data-awake="true"]::before {
  content: var(--moonpetal-symbol) " ✓";
  font: 700 16px/1 var(--hud-font);
}
/* Path order, shown on the flowers themselves: 1, 2, 3, 4. */
.mini-game-board.moonpetal-flight-board .moonpetal-choice[data-order]:not([data-order=""])::after {
  content: attr(data-order);
  position: absolute;
  top: -9px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: var(--hud-hairline);
  border-radius: 50%;
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  box-shadow: var(--hud-shadow-soft);
  font: 700 13px/1 var(--hud-font);
  text-shadow: none;
}

/* End-of-flight reflection: a storybook dialogue box at the bottom, title on a plaque. */
body .moonpetal-reflection {
  place-items: end center;
  padding: 20px 16px max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(17, 10, 51, 0) 40%, rgba(17, 10, 51, 0.36));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .moonpetal-reflection .moonpetal-reflection-card {
  position: relative;
  width: min(92%, 560px);
  padding: 30px 24px 18px;
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow);
}
.moonpetal-reflection .moonpetal-reflection-card strong {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 6px 16px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  box-shadow: var(--hud-shadow-soft);
  font: 700 16px/1.2 var(--hud-story-font);
  white-space: normal;
}
.moonpetal-reflection .moonpetal-reflection-card p {
  margin: 6px 0;
  font: var(--hud-text);
}
.moonpetal-reflection .moonpetal-reflection-card .moonpetal-reflection-path {
  color: var(--hud-ink-soft);
  font: var(--hud-text-small);
}
.moonpetal-reflection .moonpetal-share {
  min-height: var(--hud-tap);
  margin-top: 8px;
  padding: 10px 24px;
  border: var(--hud-hairline);
  color: var(--hud-ink);
  background: linear-gradient(180deg, #fff6d8, #ffe2ee);
  box-shadow: var(--hud-shadow-soft);
  font: 700 16px/1 var(--hud-font);
}

@media (max-width: 430px) {
  .mini-game-board.moonpetal-flight-board .moonpetal-instruction {
    top: 70px;
    max-width: calc(100vw - 32px);
    padding: 7px 14px;
    font: var(--hud-text-small);
  }
  .mini-game-board.moonpetal-flight-board .moonpetal-choices {
    width: calc(100% - 20px);
    gap: 6px;
  }
  .mini-game-board.moonpetal-flight-board .moonpetal-choice {
    min-height: 54px;
    border-radius: 16px;
    font-size: 14px;
  }
  .mini-game-board.moonpetal-flight-board .moonpetal-choice[data-awake="true"]::before {
    font-size: 14px;
  }
}

/* ---------- Snow Run (crystals for Eira) ---------- */

/* Level title badge repeats the progress pill and the world name. */
body.mini-game-page-open .mini-game-board.snow-run:not(.ice-skate-run) .adventure-goal.snow {
  display: none !important;
}

/* Lesson card: in play it keeps only the next-step line ("Steer toward the crystals"),
   the crystal count already lives in the progress pill. */
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run):not([data-snow-demo-step]) .snow-run-lesson-card :is(b, span:first-of-type) {
  display: none !important;
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-lesson-card {
  top: calc(max(12px, env(safe-area-inset-top)) + 56px);
  left: 50%;
  right: auto;
  display: grid;
  grid-template-columns: minmax(0, auto);
  gap: 0;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  min-height: 0;
  padding: 0;
  transform: translateX(-50%);
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow-soft);
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-lesson-card span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--hud-pill);
  color: var(--hud-ink);
  background: none;
  box-shadow: none;
  font: var(--hud-text);
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-lesson-card i {
  display: inline-grid;
  place-items: center;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  color: var(--hud-gold);
  font-style: normal;
  font-size: 16px;
}
/* "Show me" demo: Eira speaks, so her name sits on a small plaque on the top edge. */
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run)[data-snow-demo-step] .snow-run-lesson-card {
  overflow: visible;
  margin-top: 10px;
  border-radius: var(--hud-radius);
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run)[data-snow-demo-step] .snow-run-lesson-card b {
  position: absolute;
  top: 0;
  left: 18px;
  transform: translateY(-55%);
  padding: 2px 12px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  font: var(--hud-text-small);
  letter-spacing: 0;
  text-transform: none;
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run)[data-snow-demo-step] .snow-run-lesson-card span {
  padding-top: 14px;
}

/* Snowdrift recovery cue (only while stuck): pearl panel, one gold hairline. */
body.mini-game-page-open .mini-game-board.snow-run .snow-run-recovery-cue {
  padding: 10px 20px;
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow);
  font-family: var(--hud-font);
}
body.mini-game-page-open .mini-game-board.snow-run .snow-run-recovery-cue strong {
  font: 700 19px/1.1 var(--hud-story-font);
}
body.mini-game-page-open .mini-game-board.snow-run .snow-run-recovery-cue span {
  font: var(--hud-text);
}

/* Controls: pearl pills, no tray. */
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls {
  background: none;
  border: 0;
  box-shadow: none;
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls button {
  min-height: var(--hud-tap);
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow-soft);
  font: 700 17px/1 var(--hud-font);
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls button:active {
  background: var(--hud-pearl-press);
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls [data-snow-lane] {
  font-size: 22px;
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls [data-snow-jump] {
  background: linear-gradient(180deg, #fffaf2, #ffe6f0);
}
body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls [data-snow-slow].is-recovery {
  border-color: var(--hud-gold);
  background: linear-gradient(180deg, #fff6d8, #ffe2ee);
}
@media (max-width: 820px) {
  body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-lesson-card {
    top: calc(var(--game-safe-top, 10px) + 60px);
  }
  body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls {
    padding: 0;
    gap: 6px;
  }
  body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls button {
    height: 52px;
    min-height: 52px;
    padding: 0 4px;
    font-size: 15px;
  }
  body.mini-game-page-open .mini-game-modal .mini-game-board.snow-run:not(.ice-skate-run) .snow-run-controls [data-snow-demo] {
    font-size: 14px;
    line-height: 1.05;
  }
}

/* ---------- Dance Steps ---------- */

/* The side card shrinks to the bare beat meter, one status line and Replay. Its title and
   instruction repeat the feedback line and Help, so they stay for screen readers only
   (castle.js still focuses [data-dance-heading]). */
.mini-game-board.dance-steps-board .dance-steps-side {
  top: 66px;
  left: 50%;
  right: auto;
  width: max-content;
  max-width: calc(100vw - 24px);
  max-height: none;
  transform: translateX(-50%);
}
.mini-game-board.dance-steps-board .dance-steps-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mini-game-board.dance-steps-board .dance-steps-hud h2,
.mini-game-board.dance-steps-board .dance-steps-instruction {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mini-game-board.dance-steps-board .dance-steps-status {
  color: var(--hud-pearl-strong);
  font: 700 15px/1.2 var(--hud-font);
  text-shadow: 0 1px 3px rgba(43, 13, 52, 0.75), 0 0 10px rgba(43, 13, 52, 0.45);
}
.mini-game-board.dance-steps-board .dance-beat-rail {
  gap: 6px;
  height: 14px;
}
.mini-game-board.dance-steps-board .dance-beat-pip {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 236, 184, 0.7);
  background: rgba(255, 250, 247, 0.22);
  box-shadow: none;
}
.mini-game-board.dance-steps-board .dance-beat-pip.is-complete {
  border-color: var(--hud-gold);
  background: radial-gradient(circle at 40% 35%, #fff3c4, var(--hud-gold));
  box-shadow: 0 0 8px rgba(255, 210, 120, 0.7);
}
.mini-game-board.dance-steps-board .dance-beat-pip.is-current {
  border-color: var(--hud-gold);
  background: var(--hud-pearl-strong);
  box-shadow: 0 0 0 3px rgba(212, 166, 78, 0.35);
  transform: scale(1.15);
}
.mini-game-board.dance-steps-board .dance-beat-pip.is-watching {
  border-color: #fff;
  background: radial-gradient(circle at 40% 35%, #fff, var(--hud-mint));
  box-shadow: 0 0 9px rgba(111, 211, 189, 0.8);
}
.mini-game-board.dance-steps-board .dance-steps-replay {
  width: auto;
  height: var(--hud-tap);
  min-height: var(--hud-tap);
  margin: 0;
  padding: 0 18px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  color: var(--hud-ink);
  background: var(--hud-pearl-strong);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow-soft);
  font: 700 16px/1 var(--hud-font);
}
.mini-game-board.dance-steps-board .dance-steps-replay::before {
  content: "↺";
  margin-right: 6px;
  color: var(--hud-gold);
  font-size: 18px;
}
.mini-game-board.dance-steps-board .dance-steps-replay:disabled {
  color: var(--hud-ink-soft);
  background: var(--hud-pearl);
  box-shadow: none;
  opacity: 0.7;
}
.mini-game-board.dance-steps-board .dance-steps-finish {
  border: 1px solid var(--hud-gold);
  border-radius: var(--hud-pill);
  color: var(--hud-ink);
  background: linear-gradient(180deg, #fff6d8, #ffe2ee);
  box-shadow: var(--hud-shadow), 0 0 0 5px rgba(255, 229, 145, 0.18);
  font: 700 19px/1.1 var(--hud-font);
}
.mini-game-board.dance-steps-board .dance-crown-banner {
  border: 1px solid var(--hud-gold-line);
}
@media (max-width: 720px) {
  .mini-game-board.dance-steps-board .dance-steps-side {
    top: 66px;
    right: auto;
    width: max-content;
  }
  .mini-game-board.dance-steps-board .dance-steps-hud {
    gap: 6px 10px;
    padding: 0;
  }
  .mini-game-board.dance-steps-board .dance-steps-status {
    font-size: 14px;
  }
  .mini-game-board.dance-steps-board .dance-steps-replay {
    height: var(--hud-tap);
    font-size: 15px;
  }
}