/* HUD cleanup lane: maze (2026-10-31). Builds on styles/72-hud-taste.css tokens.
   Games: rubyMaze, lanternGardenMaze, gardenGrow. One goal line per game, pads and chips as one
   pearl-and-gold family, meters bare. Folded pieces stay in the DOM (QA hooks, screen readers). */

/* ---------- shared visually-hidden helper (kept for screen readers) ---------- */
.mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-goal,
.mini-game-board.garden-grow-board .garden-grow-area-card {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* =====================================================================
   RUBY MAZE
   ===================================================================== */

/* One goal line: the clue board becomes a single pearl pill. The current step reads in full;
   done and later steps shrink to small icon beads, so the whole path is still visible. */
body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board {
  top: max(14px, env(safe-area-inset-top));
  right: auto;
  left: 50%;
  width: auto;
  max-width: min(560px, calc(100% - 380px));
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  transform: translateX(-50%);
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow-soft);
  color: var(--hud-ink);
  font: var(--hud-text);
}

body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board > :is(span, button) {
  display: flex !important;
  align-items: center;
  gap: 0;
  min-height: 30px;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: var(--hud-pill);
  background: transparent;
  box-shadow: none;
  opacity: 1;
  color: var(--hud-ink);
  font-size: 0;
  white-space: nowrap;
}

body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board > :is(span, button) b {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--hud-rose);
  font: 800 13px/1 var(--hud-font);
  box-shadow: inset 0 0 0 1px var(--hud-gold-line);
  opacity: 0.6;
}

body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board > .done b {
  background: rgba(111, 211, 189, 0.22);
  color: #237c62;
  font-size: 0;
  opacity: 1;
}

body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board > .done b::before {
  content: "✓";
  font: 800 15px/1 var(--hud-font);
}

body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board > .current {
  gap: 9px;
  min-height: 38px;
  padding: 4px 16px 4px 4px;
  overflow: hidden;
  background: var(--hud-pearl-strong);
  box-shadow: 0 1px 4px rgba(91, 35, 70, 0.1);
  font: var(--hud-text);
  text-overflow: ellipsis;
}

body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board > .current b {
  background: var(--hud-gold);
  color: #fff;
  box-shadow: none;
  opacity: 1;
}

/* The current step is a button when it can act (tag the thief, open the gate): make it a real 48 px target. */
body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board > button.current {
  min-height: 48px;
  padding-right: 18px;
  background: #fff3d6;
  box-shadow: 0 0 16px rgba(212, 166, 78, 0.55);
  cursor: pointer;
}

/* "Tag action clue" duplicated the clue-board step button and the thief ring; both still tag. */
.mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-action-clue {
  display: none !important;
}

/* Minimap: pearl frame, one gold hairline. */
.mini-game-board.ruby-maze .ruby-maze-minimap {
  filter: none;
}

.mini-game-board.ruby-maze .ruby-maze-minimap canvas {
  border: 4px solid var(--hud-pearl-strong);
  border-radius: var(--hud-radius);
  box-shadow: 0 0 0 1px var(--hud-gold-line), var(--hud-shadow-soft);
}

/* Pad + Guide / Map / Dash: one pearl family, 52 px targets, icon plus a short word. */
.mini-game-board.ruby-maze .ruby-maze-controls.maze3d {
  background: none;
}

.mini-game-board.ruby-maze .ruby-maze-controls.maze3d button {
  min-width: 52px;
  height: auto;
  min-height: 52px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  color: var(--hud-ink);
  font: 800 22px/1 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}

.mini-game-board.ruby-maze .ruby-maze-controls.maze3d button:active {
  background: var(--hud-pearl-press);
}

.mini-game-board.ruby-maze .ruby-maze-controls.maze3d .ruby-maze-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 18px;
  font: 800 16px/1 var(--hud-font) !important;
}

.mini-game-board.ruby-maze .ruby-maze-controls.maze3d .ruby-maze-guide::before { content: "✨"; }
.mini-game-board.ruby-maze .ruby-maze-controls.maze3d .ruby-maze-map::before { content: "🗺️"; }
.mini-game-board.ruby-maze .ruby-maze-controls.maze3d .ruby-maze-dash::before { content: "⚡"; }

.mini-game-board.ruby-maze .ruby-maze-controls.maze3d .ruby-maze-map:is(.active, [aria-pressed="true"]) {
  background: #fff3d6;
  border-color: var(--hud-gold);
}

.mini-game-board.ruby-maze .ruby-maze-controls.maze3d .ruby-maze-dash:not(:disabled) {
  background: #fff3d6;
  border-color: var(--hud-gold);
}

.mini-game-board.ruby-maze .ruby-maze-controls.maze3d button:disabled {
  opacity: 0.55;
}

@media (max-width: 820px) {
  body.mini-game-page-open .mini-game-modal .mini-game-board.ruby-maze .ruby-maze-3d .ruby-maze-clue-board {
    top: max(66px, calc(env(safe-area-inset-top) + 66px));
    max-width: calc(100% - 20px);
  }

  .mini-game-board.ruby-maze .ruby-maze-minimap canvas {
    width: 96px !important;
    height: 96px !important;
  }

  .mini-game-board.ruby-maze .ruby-maze-controls.maze3d .ruby-maze-actions button {
    padding: 0 14px;
  }
}

/* =====================================================================
   LANTERN GARDEN MAZE
   ===================================================================== */

/* One route panel: the lantern chips (tap the glowing one to walk there) with the lantern's clue
   as the single goal line under them. The old card title repeated the glowing chip. */
.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-route {
  position: absolute;
  z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 4px 8px;
  transform: translateX(-50%);
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: var(--hud-pearl);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow-soft);
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-route .lantern-maze-chips {
  position: static;
  inset: auto;
  display: flex;
  gap: 4px;
  padding: 0;
  transform: none;
  border: 0;
  background: none;
  box-shadow: none;
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-target {
  min-width: 70px;
  min-height: 48px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--hud-pill);
  background: transparent;
  color: var(--hud-ink);
  font: 800 15px/1 var(--hud-font);
  box-shadow: none;
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-target.current {
  background: #fff3d6;
  color: var(--hud-ink);
  box-shadow: inset 0 0 0 1px var(--hud-gold), 0 0 14px rgba(212, 166, 78, 0.5);
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-target.lit {
  background: rgba(111, 211, 189, 0.22);
  color: #1f6b55;
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-target.lit::before {
  content: "✓ ";
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-route .lantern-maze-card {
  position: static;
  inset: auto;
  width: auto;
  max-width: none;
  display: block;
  padding: 0 12px;
  transform: none;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--hud-ink);
  text-align: center;
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-card strong {
  display: none;
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-card span {
  display: block;
  color: var(--hud-ink);
  font: var(--hud-text);
}

.mini-game-board.lantern-garden-maze .lantern-maze-minimap {
  filter: none;
}

.mini-game-board.lantern-garden-maze .lantern-maze-minimap canvas {
  border: 4px solid var(--hud-pearl-strong);
  border-radius: var(--hud-radius);
  box-shadow: 0 0 0 1px var(--hud-gold-line), var(--hud-shadow-soft);
}

.mini-game-board.lantern-garden-maze .lantern-maze-pad button {
  min-width: 52px;
  min-height: 52px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: 800 22px/1 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}

.mini-game-board.lantern-garden-maze .lantern-maze-pad button:active {
  background: var(--hud-pearl-press);
}

.mini-game-board.lantern-garden-maze .lantern-maze-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 18px;
  font: 800 16px/1 var(--hud-font);
}

.mini-game-board.lantern-garden-maze .lantern-maze-tools .lantern-maze-guide::before { content: "✨"; }
.mini-game-board.lantern-garden-maze .lantern-maze-tools .lantern-maze-map::before { content: "🗺️"; }

.mini-game-board.lantern-garden-maze .lantern-maze-tools .lantern-maze-map:is(.active, [aria-pressed="true"]) {
  background: #fff3d6;
  border-color: var(--hud-gold);
}

/* Proof cards (second half): pearl pills, done = mint. */
.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-actions button {
  min-height: 52px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: 800 16px/1.15 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}

.mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-actions button.done {
  background: rgba(214, 246, 236, 0.95);
  color: #1f6b55;
}

@media (max-width: 820px) {
  .mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-route {
    top: max(66px, calc(env(safe-area-inset-top) + 66px));
    max-width: calc(100% - 16px);
  }

  .mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-route .lantern-maze-chips {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-target {
    min-width: 48px;
    flex: 1 1 auto;
    padding: 6px 10px;
    font-size: 14px;
  }

  .mini-game-board.lantern-garden-maze .lantern-maze-3d .lantern-maze-card span {
    font: var(--hud-text-small);
    font-size: 14px;
  }

  .mini-game-board.lantern-garden-maze .lantern-maze-minimap canvas {
    width: 96px !important;
    height: 96px !important;
  }
}

/* =====================================================================
   GARDEN GROW (its own <style> is injected at runtime, so selectors carry the board class)
   ===================================================================== */

/* One top panel: the area buttons (travel) with the next step as the single goal line under them.
   The area name already shows on the glowing area button, the garden sign and the progress pill. */
.mini-game-board.garden-grow-board .garden-grow-hud-top {
  position: absolute;
  z-index: 6;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  width: max-content;
  max-width: min(680px, calc(100vw - 400px));
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 4px 9px;
  transform: translateX(-50%);
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: var(--hud-pearl);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow-soft);
}

.mini-game-board.garden-grow-board .garden-grow-hud-top .garden-grow-navigator {
  position: static;
  width: auto;
  max-width: 100%;
  gap: 3px;
  padding: 0;
  transform: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.mini-game-board.garden-grow-board .garden-grow-navigator button {
  min-width: 88px;
  min-height: 48px;
  padding: 4px 14px;
  border-radius: var(--hud-pill);
  background: transparent;
  color: var(--hud-ink);
  font: 800 15px/1 var(--hud-font);
  box-shadow: none;
}

.mini-game-board.garden-grow-board .garden-grow-navigator button.is-active {
  background: #fff3d6;
  color: var(--hud-ink);
  box-shadow: inset 0 0 0 1px var(--hud-gold), 0 0 14px rgba(212, 166, 78, 0.45);
}

.mini-game-board.garden-grow-board .garden-grow-navigator button.is-complete {
  background: rgba(111, 211, 189, 0.2);
  color: #1f6b55;
}

.mini-game-board.garden-grow-board .garden-grow-navigator button.is-complete.is-active {
  background: #fff3d6;
}

.mini-game-board.garden-grow-board .garden-grow-navigator button.is-locked {
  opacity: 0.6;
}

.mini-game-board.garden-grow-board .garden-grow-hud-top .garden-grow-cue {
  position: static;
  width: auto;
  max-width: 100%;
  padding: 0 12px;
  transform: none;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.mini-game-board.garden-grow-board .garden-grow-cue strong {
  display: none;
}

.mini-game-board.garden-grow-board .garden-grow-cue span {
  color: var(--hud-ink);
  font: var(--hud-text);
}

.mini-game-board.garden-grow-board .garden-grow-center {
  top: max(76px, calc(env(safe-area-inset-top) + 76px));
  right: max(14px, env(safe-area-inset-right));
  min-width: 0;
  min-height: 48px;
  padding: 0 18px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  color: var(--hud-ink);
  font: 800 15px/1 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}

/* Bottom: no panel. Tool buttons as pearl pills; the seal counter goes bare beside them. */
.mini-game-board.garden-grow-board .garden-grow-controls {
  width: auto;
  max-width: calc(100vw - 32px);
  grid-template-columns: auto auto;
  grid-template-areas: "actions meter";
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.mini-game-board.garden-grow-board .garden-grow-actions {
  gap: 8px;
}

.mini-game-board.garden-grow-board .garden-grow-actions button {
  min-width: 108px;
  min-height: 52px;
  padding: 6px 20px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: 800 16px/1.1 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}

.mini-game-board.garden-grow-board .garden-grow-actions button.selected {
  background: #fff3d6;
  color: var(--hud-ink);
  border-color: var(--hud-gold);
  box-shadow: 0 0 0 3px rgba(212, 166, 78, 0.28), var(--hud-shadow-soft);
}

.mini-game-board.garden-grow-board .garden-grow-meter {
  min-width: 0;
  min-height: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--hud-ink);
  font: 800 16px/1 var(--hud-font);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.mini-game-board.garden-grow-board .garden-grow-meter[data-empty="true"] {
  visibility: hidden;
}

@media (max-width: 720px) {
  .mini-game-board.garden-grow-board .garden-grow-hud-top {
    top: max(66px, calc(env(safe-area-inset-top) + 66px));
    width: calc(100vw - 16px);
    max-width: none;
  }

  .mini-game-board.garden-grow-board .garden-grow-hud-top .garden-grow-navigator {
    width: 100%;
  }

  .mini-game-board.garden-grow-board .garden-grow-navigator button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 4px;
    font-size: 13px;
  }

  .mini-game-board.garden-grow-board .garden-grow-cue span {
    font-size: 14px;
  }

  .mini-game-board.garden-grow-board .garden-grow-center {
    top: auto;
    right: 8px;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 72px));
    padding: 0 14px;
    font-size: 14px;
  }

  .mini-game-board.garden-grow-board .garden-grow-controls {
    width: calc(100vw - 16px);
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "actions";
    gap: 6px;
  }

  .mini-game-board.garden-grow-board .garden-grow-actions button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 8px;
  }

  /* Meter sits bare at the left, level with the butterfly button. */
  .mini-game-board.garden-grow-board .garden-grow-meter {
    position: absolute;
    left: 6px;
    bottom: calc(100% + 24px);
    grid-area: auto;
  }
}