/* ── Mosaic (free-region flood) ─────────────────────────────────────────────
   Flat and quiet everywhere except the board — the palette is the one place
   vivid colour is allowed. The colour cells fill a crisp grid; the player arms
   a colour chip (shared optionChips, the armed chip glows) and taps a patch to
   recolour it — or drags the chip straight onto the patch. Shares the puzzle
   chrome (q-chrome / q-sub / q-ur / q-foot). Values from tokens.css only; the
   six hues are the --mo-c* tokens.                                              */

.mosaic-play {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* stage + colour tray: tray under the board in portrait, beside it in landscape */
.mo-arena {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-5);
}
.mo-arena .q-stage { flex: 0 1 auto; padding: 0; }

/* ── the board ────────────────────────────────────────────────────────── */

/* The board sits straight in the shared .q-stage (the .mo-arena wrapper above
   is legacy). Slim the stage's side padding — on a 412px phone every horizontal
   px the frame spends comes straight out of the (already small) colour cells. */
.mosaic-play .q-stage { padding: var(--space-4) var(--space-2); }

.mo-board {
  display: grid;
  width: min(97vw, 60vh, 500px);
  max-width: 100%;               /* never wider than the stage's content box */
  aspect-ratio: 1;
  /* 1px grout: still reads as grout, and on a 13-wide board the 12px saved is
     nearly half a cell — phone cells stay ≥ ~30px instead of ~27px */
  gap: 1px;
  padding: 2px;
  /* the grout is the palette's, not the chrome's: it has to hold against six
     counters that separate by lightness, which --line-2 has no reason to do */
  background: var(--mo-grout);
  border-radius: var(--radius);
  outline: var(--hairline) solid var(--mo-grout);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mo-cell {
  padding: 0;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* the wave: each cell waits its turn (--mo-d, set from JS by distance from the
     tapped cell) before the colour fade, so a region fills nearest-first */
  transition: background-color var(--duration-2) var(--ease) var(--mo-d, 0ms);
  position: relative;
}
/* the patch a hint points at */
.mo-cell.hinted { z-index: 1; animation: mo-cell-pulse 1.4s var(--ease) 2; }
@keyframes mo-cell-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--accent); }
  50% { box-shadow: inset 0 0 0 3px var(--accent); }
}

/* ── the colour tray ──────────────────────────────────────────────────────
   The chips themselves are the shared .ng-chip.po-chip from play-options.js —
   each holds a .po-swatch wearing a --mo-c* hue. Only the hint pulse is ours. */

.mosaic-play .po-chip.hinted { border-color: var(--accent); animation: mo-pulse 1.4s var(--ease) 2; }
@keyframes mo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-line); }
  50% { box-shadow: 0 0 0 4px var(--accent-line); }
}

/* ── the moves counter ────────────────────────────────────────────────── */


/* Pips: one dot per move in the PAR target, filling left to right as you spend
   moves. There is no penalty for going over — the pips just show how your
   solution compares to par, so the goal (flood in as few moves as you can) stays
   visible. Once you pass par every pip is spent and the count turns amber. */

/* ── landscape phone: board left, tray to its right, controls stacked ──── */
@media (orientation: landscape) and (max-height: 700px) {
  /* board left, colours standing to its RIGHT — selections live on the right */
  .mo-arena { flex-direction: row; }
  /* the tray's landscape column comes from the shared .q-foot .ng-pal rule */
  .mo-board { width: min(70vw, 88vh); }
}

/* ── the win screen's verdict + "show me the best way" ────────────────────
   Slotted into the victory sheet above the cat's menu: your move count against
   the best line the solver found, and the way into the replay. */
.mo-verdict {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-5);
  text-align: center;
}
.mo-verdict-say {
  margin: 0; max-width: 36ch;
  font-size: var(--text-base); line-height: var(--leading-body); color: var(--text);
}
.mo-verdict-go { margin-top: var(--space-2); }

/* ── the replay ───────────────────────────────────────────────────────────
   A full-screen scrub of that line: the grid as it stood before each pour, the
   patch about to go outlined, and the chip that pours it lit. Above the
   victory sheet (z 63 vs the veil's 60), so closing it lands back on the win. */
.mo-way {
  position: fixed; inset: 0; z-index: 63;
  background: var(--bg);
  display: flex; flex-direction: column; min-height: 0;
  padding: max(14px, var(--sat)) 18px max(18px, var(--sab));
  animation: fade var(--duration-2) var(--ease) both;
  user-select: none; -webkit-user-select: none;
}
.mo-way-stage {
  flex: 1; min-height: 0; display: grid; place-items: center;
  padding: var(--space-5) 0; overflow: hidden;
}
.mo-way-board { width: min(92vw, 46vh, 460px); max-width: 100%; pointer-events: none; }
.mo-way-board .mo-cell { cursor: default; }
/* the patch this frame is about to pour into — an outline, not a colour, so
   the cell keeps showing the hue it is being poured OVER */
/* Same idiom as the teaching overlay's .dd-mark — the ring has to hold against
   straw and clay, which sit close to the accent's own hue. */
.mo-way-lit {
  outline: 3px solid var(--accent); outline-offset: -2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent),
              inset 0 0 0 5px color-mix(in srgb, var(--bg) 55%, transparent);
  z-index: 2;
}

/* the palette, replayed: the chip doing the work lights up */
.mo-way-chips { flex: none; display: flex; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-4); }
.mo-way-chip {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 var(--hairline) var(--mo-grout);
  opacity: 0.34; transition: var(--t);
}
.mo-way-chip.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent); transform: scale(1.1); }

.mo-way-say {
  flex: none; margin: 0 auto var(--space-4); max-width: 48ch;
  text-align: center; font-size: var(--text-base); line-height: var(--leading-body);
  color: var(--text); min-height: 3.2em;
}

/* the timeline: one tick per pour, wearing the colour it pours */
.mo-way-line {
  flex: none; display: flex; gap: var(--space-2); align-items: stretch;
  overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
}
.mo-way-line::-webkit-scrollbar { display: none; }
.mo-way-tick {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--space-2) var(--space-3);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--mute); transition: var(--t);
}
.mo-way-tick.on { border-color: var(--accent); color: var(--accent); background: var(--raised); }
.mo-way-n { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; }
.mo-way-n svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: var(--stroke); }
.mo-way-swatch { width: 14px; height: 14px; border-radius: 2px; box-shadow: inset 0 0 0 var(--hairline) var(--mo-grout); }
.mo-way-end .mo-way-n { color: inherit; }

@media (prefers-reduced-motion: reduce) { .mo-way { animation: none; } }

/* ── the thumbnail on a journey level card ────────────────────────────── */
.mo-mini {
  display: grid;
  aspect-ratio: 1;
  width: 100%;
  gap: 1px;
  padding: 2px;
  background: var(--mo-grout);
  border-radius: var(--radius-sm);
}
.mo-mini i { display: block; border-radius: 1px; }

/* ── the six hues (the only vivid colour in the system) ───────────────── */
.mo-c0 { background: var(--mo-c0); }
.mo-c1 { background: var(--mo-c1); }
.mo-c2 { background: var(--mo-c2); }
.mo-c3 { background: var(--mo-c3); }
.mo-c4 { background: var(--mo-c4); }
.mo-c5 { background: var(--mo-c5); }