/* HUD cleanup lane: learn-a (2026-10-31). Builds on styles/72-hud-taste.css tokens.
   Games: Berry Book Sort, Leaf Flip Friends, Honeycomb Trail, Caramel Tower, Petal Paint Mixer,
   Candy Match Royale, Gumball Burst. One family: a single pearl "learn dock" in the top-right
   corner holds the one goal line, a bare counter only where the shell pill is hidden, and the
   game's own buttons. Title cards, blurbs, stat readouts and the second copy of the "next"
   sentence are hidden (kept in the DOM: the game scripts still write to them).
   Each game injects its own <style> after this file, so rules start with `body` to win. */

/* ---------- The dock (one panel per game) ---------- */
body .mini-game-board:is(.berry-books-board, .leaf-pairs-board, .honeycomb-path-board, .caramel-stack-board, .color-mixer-board, .match-grid-board.candyMatch, .match-grid-board.gumballBurst) :is(.berry-books-side, .leaf-pairs-side, .honeycomb-path-side, .caramel-stack-side, .color-mixer-side, .match-grid-side) {
  position: absolute;
  z-index: 8;
  top: 72px;
  right: var(--hud-edge);
  bottom: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: min(272px, 30vw);
  min-width: 0;
  max-height: calc(100% - 96px);
  margin: 0;
  padding: 14px;
  overflow: auto;
  grid-template: none;
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: var(--hud-pearl);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow);
  color: var(--hud-ink);
  font: var(--hud-text);
  text-align: left;
  pointer-events: none;
  scrollbar-width: none;
}
/* Children lose their own card boxes: one panel, no stacked cards. */
body .mini-game-board:is(.berry-books-board, .leaf-pairs-board, .honeycomb-path-board, .caramel-stack-board, .color-mixer-board, .match-grid-board.candyMatch, .match-grid-board.gumballBurst) :is(.berry-books-side, .leaf-pairs-side, .honeycomb-path-side, .caramel-stack-side, .color-mixer-side, .match-grid-side) > * {
  position: static;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--hud-ink);
  transform: none;
}

/* ---------- Hidden: title cards, blurbs, stat readouts, repeated "next" copies ---------- */
body .mini-game-board.berry-books-board .berry-books-card,
body .mini-game-board.berry-books-board .berry-books-next,
body .mini-game-board.berry-books-board .berry-books-meter > span,
body .mini-game-board.leaf-pairs-board .leaf-pairs-card,
body .mini-game-board.leaf-pairs-board .leaf-pairs-stat,
body .mini-game-board.leaf-pairs-board .leaf-pairs-next > span,
body .mini-game-board.honeycomb-path-board .honeycomb-path-card,
body .mini-game-board.honeycomb-path-board .honeycomb-path-stat,
body .mini-game-board.honeycomb-path-board .honeycomb-path-next > span,
body .mini-game-board.caramel-stack-board .caramel-stack-card > strong,
body .mini-game-board.caramel-stack-board .caramel-stack-stat:nth-child(n + 2),
body .mini-game-board.caramel-stack-board .caramel-stack-stat > span,
body .mini-game-board.color-mixer-board .color-mixer-card,
body .mini-game-board.color-mixer-board .color-mixer-meter > strong,
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-card > strong,
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-card > span,
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-plan-head > b,
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-jar > strong,
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-jar::after {
  display: none !important;
}
/* "Royal shelves" is a bare text node in the meter: silence it, keep its buttons. */
body .mini-game-board.berry-books-board .berry-books-meter {
  font-size: 0;
  line-height: 0;
}

/* ---------- The goal line (one per game) ---------- */
body .mini-game-board.berry-books-board .berry-books-clue,
body .mini-game-board.leaf-pairs-board .leaf-pairs-next,
body .mini-game-board.honeycomb-path-board .honeycomb-path-next,
body .mini-game-board.caramel-stack-board .caramel-stack-card,
body .mini-game-board.color-mixer-board .color-mixer-request,
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-card {
  display: block;
  font: 700 16px/1.3 var(--hud-font);
  color: var(--hud-ink);
  letter-spacing: 0;
  text-transform: none;
}
body .mini-game-board:is(.leaf-pairs-board, .honeycomb-path-board) :is(.leaf-pairs-next, .honeycomb-path-next)::before {
  content: none;
  display: none;
}
body .mini-game-board:is(.leaf-pairs-board, .honeycomb-path-board) :is(.leaf-pairs-next, .honeycomb-path-next) strong,
body .mini-game-board.caramel-stack-board .caramel-stack-card > span,
body .mini-game-board.color-mixer-board .color-mixer-request strong {
  display: block;
  margin: 0;
  font: inherit;
  color: inherit;
}
body .mini-game-board.color-mixer-board .color-mixer-request span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font: var(--hud-text-small);
  color: var(--hud-ink-soft);
}
body .mini-game-board.color-mixer-board .color-mixer-request .color-mixer-swatch {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: 0 0 22px;
  border: var(--hud-hairline);
}

/* Candy + gumball: the crown plan shows the one step to do now, with a small count. */
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-plan {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-plan-head {
  display: block;
  flex: 0 0 auto;
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-plan-head span {
  display: block;
  margin: 2px 0 0;
  font: var(--hud-text-small);
  color: var(--hud-ink-soft);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-plan-steps {
  display: block;
  flex: 1 1 auto;
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-card .match-grid-plan-step {
  display: none;
  margin: 0;
  font: 700 16px/1.3 var(--hud-font);
  color: var(--hud-ink);
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-card .match-grid-plan-step:not(.is-complete) {
  display: block;
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-card .match-grid-plan-step:not(.is-complete) ~ .match-grid-plan-step {
  display: none;
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-plan-step::before {
  display: none;
}
/* Jar: a bare slim meter (the shell pill already says the number). Gain bounce and full glow still run. */
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-jar {
  position: relative;
  display: block;
  height: 8px;
  min-height: 8px;
  padding: 0;
  overflow: visible;
  border-radius: var(--hud-pill);
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-jar::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: var(--hud-pill);
  background: linear-gradient(to right, var(--hud-rose) var(--jar-fill, 0%), rgba(91, 35, 70, 0.12) var(--jar-fill, 0%));
}

/* ---------- Bare counters ----------
   Caramel and Paint Mixer hide the shell pill in their own CSS, so their own count is the only
   count on screen: it stays, bare (gold glyph + number, no box, no label). */
body .mini-game-board.caramel-stack-board .caramel-stack-meter,
body .mini-game-board.color-mixer-board .color-mixer-meter {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  text-align: left;
  border: 0;
}
body .mini-game-board.caramel-stack-board .caramel-stack-stat {
  display: block;
  min-width: 0;
  padding: 0;
  text-align: left;
}
body .mini-game-board.caramel-stack-board .caramel-stack-meter::before,
body .mini-game-board.color-mixer-board .color-mixer-meter::before {
  color: var(--hud-gold);
  font: 700 16px/1 var(--hud-font);
}
body .mini-game-board.caramel-stack-board .caramel-stack-meter::before { content: "♛"; }
body .mini-game-board.color-mixer-board .color-mixer-meter::before { content: "✿"; }
body .mini-game-board.caramel-stack-board .caramel-stack-stat strong,
body .mini-game-board.color-mixer-board .color-mixer-meter span {
  display: inline;
  margin: 0;
  font: 700 15px/1.2 var(--hud-font);
  color: var(--hud-ink);
}

/* ---------- Buttons: one family ---------- */
body .mini-game-board.berry-books-board .berry-books-shelves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
body .mini-game-board.berry-books-board .berry-books-shelf-btn,
body .mini-game-board.leaf-pairs-board .leaf-pairs-peek,
body .mini-game-board.honeycomb-path-board .honeycomb-path-scout,
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: var(--hud-tap);
  margin: 0;
  padding: 6px 12px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: 700 14px/1.15 var(--hud-font);
  text-align: center;
  text-shadow: none;
  box-shadow: var(--hud-shadow-soft);
  transform: none;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
body .mini-game-board.berry-books-board .berry-books-shelf-btn {
  padding: 6px 8px;
  font-size: 13px;
}
body .mini-game-board.berry-books-board .berry-books-shelf-btn.is-suggested {
  background: var(--hud-pearl-press);
  box-shadow: inset 0 0 0 2px var(--hud-gold), var(--hud-shadow-soft);
}
body .mini-game-board:is(.berry-books-board, .leaf-pairs-board, .honeycomb-path-board, .match-grid-board) :is(.berry-books-shelf-btn, .leaf-pairs-peek, .honeycomb-path-scout, .match-grid-actions button):active {
  background: var(--hud-pearl-press);
}
body .mini-game-board:is(.leaf-pairs-board, .honeycomb-path-board, .match-grid-board) :is(.leaf-pairs-peek, .honeycomb-path-scout, .match-grid-actions button):disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: default;
}
/* Icons for non-readers. */
body .mini-game-board.leaf-pairs-board .leaf-pairs-peek::before { content: "👀"; }
body .mini-game-board.honeycomb-path-board .honeycomb-path-scout::before { content: "🧭"; }
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-actions button::before { content: "👑"; font-size: 17px; line-height: 1; }
body .mini-game-board:is(.leaf-pairs-board, .honeycomb-path-board) :is(.leaf-pairs-peek, .honeycomb-path-scout)::before { font-size: 17px; line-height: 1; }
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-actions {
  display: block;
  padding: 0;
}
body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-actions button {
  animation: none;
}

/* Caramel: the piece picker becomes a pearl tray; the chosen piece wears the gold ring. */
body .mini-game-board.caramel-stack-board .caramel-stack-choices:not(.is-complete) {
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: var(--hud-pearl);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow);
}
body .mini-game-board.caramel-stack-board .caramel-stack-choice {
  min-height: 56px;
  border: var(--hud-hairline);
  border-radius: 14px;
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  box-shadow: none;
}
body .mini-game-board.caramel-stack-board .caramel-stack-choice strong {
  font: 700 16px/1.1 var(--hud-font);
  color: var(--hud-ink);
}
body .mini-game-board.caramel-stack-board .caramel-stack-choice small {
  font: var(--hud-text-small);
  color: var(--hud-ink-soft);
}
body .mini-game-board.caramel-stack-board .caramel-stack-choice[aria-pressed="true"] {
  transform: translateY(-2px);
  border-color: var(--hud-gold);
  background: var(--hud-pearl-press);
  box-shadow: inset 0 0 0 2px var(--hud-gold);
}
body .mini-game-board.caramel-stack-board .caramel-stack-replay,
body .mini-game-board.color-mixer-board .color-mixer-continue {
  min-height: 56px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-rose);
  color: #fff;
  font: 700 17px/1 var(--hud-font);
  text-shadow: none;
  box-shadow: var(--hud-shadow);
}

/* Paint pots: keep each pot's own colour ring (it teaches the colour), pearl body, 48 px tall. */
body .mini-game-board.color-mixer-board .color-mixer-pot-label {
  min-height: var(--hud-tap);
  padding: 6px 12px;
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: 700 14px/1 var(--hud-font);
  letter-spacing: 0;
  text-transform: capitalize;
  white-space: nowrap;
  box-shadow: var(--hud-shadow-soft);
}

/* ---------- Phones and narrow iPads: the dock tucks under the top bar, right-aligned, only as wide as it needs ---------- */
@media (max-width: 720px) {
  body .mini-game-board:is(.berry-books-board, .leaf-pairs-board, .honeycomb-path-board, .caramel-stack-board, .color-mixer-board, .match-grid-board.candyMatch, .match-grid-board.gumballBurst) :is(.berry-books-side, .leaf-pairs-side, .honeycomb-path-side, .caramel-stack-side, .color-mixer-side, .match-grid-side) {
    top: 66px;
    right: 10px;
    left: auto;
    width: auto;
    max-width: calc(100% - 20px);
    max-height: 40%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 6px 6px 6px 14px;
  }
  /* Berry needs the full width for its four shelf buttons. */
  body .mini-game-board.berry-books-board .berry-books-side.berry-books-side {
    left: 10px;
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
  }
  body .mini-game-board.berry-books-board .berry-books-shelves {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  body .mini-game-board.berry-books-board .berry-books-shelf-btn {
    padding: 4px 4px;
    line-height: 1.1;
  }
  body .mini-game-board.berry-books-board .berry-books-clue,
  body .mini-game-board.leaf-pairs-board .leaf-pairs-next,
  body .mini-game-board.honeycomb-path-board .honeycomb-path-next,
  body .mini-game-board.color-mixer-board .color-mixer-request,
  body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-card,
  body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-card .match-grid-plan-step {
    font-size: 15px;
  }
  body .mini-game-board:is(.leaf-pairs-board, .honeycomb-path-board, .color-mixer-board, .match-grid-board) :is(.leaf-pairs-side, .honeycomb-path-side, .color-mixer-side, .match-grid-side) > :is(.leaf-pairs-next, .honeycomb-path-next, .color-mixer-request, .match-grid-card) {
    flex: 1 1 150px;
  }
  body .mini-game-board:is(.leaf-pairs-board, .honeycomb-path-board, .match-grid-board) :is(.leaf-pairs-side, .honeycomb-path-side, .match-grid-side) > :is(.leaf-pairs-meter, .honeycomb-path-meter, .match-grid-actions) {
    flex: 0 0 auto;
  }
  body .mini-game-board:is(.leaf-pairs-board, .honeycomb-path-board, .match-grid-board) :is(.leaf-pairs-peek, .honeycomb-path-scout, .match-grid-actions button) {
    width: auto;
  }
  /* The slim jar bar repeats the pill's number; on phones the strip stays one line. */
  body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-side > .match-grid-jar {
    display: none;
  }
  /* Leaf, honeycomb, candy, gumball: goal line on the left, the one button on the right. */
  body .mini-game-board:is(.leaf-pairs-board, .honeycomb-path-board, .match-grid-board.candyMatch, .match-grid-board.gumballBurst) :is(.leaf-pairs-side, .honeycomb-path-side, .match-grid-side) {
    left: 10px;
    flex-wrap: nowrap;
  }
  body .mini-game-board.match-grid-board:is(.candyMatch, .gumballBurst) .match-grid-side {
    flex-wrap: wrap;
  }
  /* Paint pots sit about 76 px apart on phones: no dot, tighter padding, so labels never touch. */
  body .mini-game-board.color-mixer-board .color-mixer-pot-label {
    min-width: var(--hud-tap);
    padding: 6px 9px;
    font-size: 13px;
  }
  body .mini-game-board.color-mixer-board .color-mixer-pot-label::before {
    display: none;
  }
  /* Caramel on phones: just the bare layer count; the strategy sentence stays a desktop extra
     (the game hid it on phones before too). */
  body .mini-game-board.caramel-stack-board .caramel-stack-side.caramel-stack-side .caramel-stack-card {
    display: none;
  }
  body .mini-game-board.caramel-stack-board .caramel-stack-choice small {
    display: none;
  }
  /* The shape icon sat ghosted behind the word on phones; on pearl it read as a smudge. Icon above the word. */
  body .mini-game-board.caramel-stack-board .caramel-stack-choice {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 2px;
  }
  body .mini-game-board.caramel-stack-board .caramel-stack-choice .caramel-stack-shape-icon {
    position: static;
    opacity: 1;
    transform: scale(0.7);
    margin: -4px 0;
  }
}