/* ── Mambo ────────────────────────────────────────────────────────────────
   A goban: slate and shell on kaya, and it follows the theme (the note that
   used to sit here claiming otherwise was written for a worksheet this board
   stopped being). The two kinds are one silhouette in opposite lightnesses, so
   hue carries nothing and the pair survives any colour vision. A stone the
   player set gleams and casts a shadow; a printed one lies flush. A broken rule
   crosses its cells in red; "=" / "×" links are brushed straight onto the wood.
   Borrows the shared puzzle chrome. Values from tokens.css only.               */

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

/* ── the board ────────────────────────────────────────────────────────── */
.ma-board {
  position: relative;
  width: min(92vw, 66vh, 520px);
  aspect-ratio: 1;
  background: var(--ma-paper);
  /* a thick-edged board with a barely-there corner: a goban is a slab of wood,
     not a rounded card */
  outline: 4px solid var(--ma-frame);
  border-radius: 2px;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.ma-cells, .ma-edges { position: absolute; inset: 0; display: grid; }
.ma-edges { pointer-events: none; display: block; }

.ma-cell {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ma-grid);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-1) var(--ease);
}
.ma-cell:not(.v0):not(.v1):hover { background: var(--ma-hover); }

/* The cells are the wood: the board is one continuous plank, so a cell carries
   no fill of its own. The stone IS the mark — the tile used to be the colour
   and the glyph a shape on top of it, which is what made this read as a
   spreadsheet rather than a board. */
.ma-cell.v0, .ma-cell.v1 { background: transparent; }

.ma-mark { display: grid; place-items: center; width: 76%; height: 76%; }
.ma-glyph { width: 100%; height: 100%; overflow: visible; }
.ma-stone { stroke: none; }
.ma-cell.v0 .ma-stone { fill: var(--ma-cell-a); }   /* slate */
.ma-cell.v1 .ma-stone { fill: var(--ma-cell-b); }   /* shell */

/* ── placed vs given ────────────────────────────────────────────────────────
   The ONLY difference is the light. A stone the player set catches a gleam and
   casts a shadow; a printed one lies flush in the wood and does neither.

   Nothing is dimmed to say "you can't touch this". A given used to also wear a
   wash, and a wash on a board this dark just made the stone harder to see while
   telling you nothing the gleam wasn't already telling you. The distinction is
   additive — a placed stone has something extra — never subtractive. */
.ma-gloss { stroke: none; fill: var(--ma-cell-b); opacity: 0.3; }
.ma-cell.v1 .ma-gloss { fill: var(--ma-cell-a); opacity: 0.1; }
.ma-cell.filled .ma-mark { filter: drop-shadow(0 1.6px 1.4px var(--ma-frame)); }
.ma-cell.given .ma-gloss { display: none; }
.ma-cell.given .ma-mark { filter: none; }

/* the red cross over a rule-breaking cell. Held back a beat before it fades in
   — a mistake corrected within a second never flashes — then fades straight
   back out when the cell is fixed. Always laid out; visibility is opacity. */
.ma-x {
  position: absolute; inset: 16%; display: block; pointer-events: none;
  opacity: 0; transition: opacity 340ms var(--ease);   /* fade OUT immediately */
}
.ma-cell.bad .ma-x { opacity: 1; transition-delay: 1s; }   /* … wait 1s to fade IN */
.ma-x::before, .ma-x::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
  background: var(--ma-bad); border-radius: 2px;
}
.ma-x::before { transform: rotate(45deg); }
.ma-x::after { transform: rotate(-45deg); }

.ma-cell.hinted { animation: ma-hint 1.4s var(--ease) 2; z-index: 2; }
@keyframes ma-hint {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--accent); }
  50% { box-shadow: inset 0 0 0 3px var(--accent-line); }
}

/* ── the "=" / "×" links on the borders ─────────────────────────────────────
   Brushed straight onto the wood. They used to sit on a paper chip — a scrap of
   a different material floating on the board, belonging to nothing. On a goban
   the mark is just ink on the grain. */
.ma-edge {
  position: absolute;
  width: 20px; height: 20px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: none;
  z-index: 1;
}
.ma-edge svg { width: 17px; height: 17px; fill: none; stroke: var(--ma-edge); stroke-width: 2.6; stroke-linecap: round; transition: stroke 340ms var(--ease); }
.ma-edge.bad svg { stroke: var(--ma-bad); transition-delay: 1s; }   /* the link reddens a beat late, eases back */

/* ── footer bits (shared chrome via q-*) ────────────────────────────────── */
.mambo-play .q-foot .q-hint.busy { opacity: 0.5; pointer-events: none; }

/* the foot chips (shared .po-chip shell from play-options): the mono "A" of the
   auto-cycle mode, and the two stones wearing the exact board fills — the chip
   IS the piece, not a plain swatch. The shell stone gets a hairline edge so it
   doesn't sink into a light chip face. Ghost shares the classes. */
.ma-po-auto { font-family: var(--font-mono); font-weight: 700; }
.ma-po { display: grid; place-items: center; width: 62%; height: 62%; }
.ma-po .ma-glyph { width: 100%; height: 100%; }
.ma-po-b .ma-stone { fill: var(--ma-cell-a); }
.ma-po-w .ma-stone { fill: var(--ma-cell-b); stroke: var(--line-2); stroke-width: 1; }
.ma-po-w .ma-gloss { fill: var(--ma-cell-a); opacity: 0.1; }

/* ── landscape phone ────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 700px) {
  .mambo-play .ma-board { width: min(88vh, 78vw); }
}

/* ── the thumbnail on a journey level card ──────────────────────────────── */
.ma-mini {
  position: relative;
  width: 100%; aspect-ratio: 1;
  background: var(--ma-paper);
  outline: 1.5px solid var(--ma-frame);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ma-mini .ma-cell { border-color: var(--ma-grid); cursor: default; }
.ma-mini .ma-edge { width: 9px; height: 9px; }
.ma-mini .ma-edge svg { width: 7px; height: 7px; stroke-width: 3; }
.ma-mini .ma-mark { width: 66%; height: 66%; }