/* ══════════════════════════════════════════════════════════════════════════
   The playable board — everything play.js does NOT paint from the theme.

   ⛔ THE SPLIT IS DELIBERATE. Every colour that belongs to a board THEME (the
   surface, the lines, the empty points, the selection ring) is written onto the
   SVG elements by `applyTheme` in play.js, because its source is a Dart file
   and one table of five themes is easier to keep honest than five blocks of
   CSS. This file holds only what a theme never changes: hit behaviour, the
   focus ring, the hint marks, motion, and the controls around the board.

   Loads AFTER site.css and uses its tokens. Nothing here is invented.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the board itself ────────────────────────────────────────────────────── */
svg.mp-board {
  /* Without this a tap costs 300ms while the browser waits to see whether it is
     the first half of a double-tap-to-zoom — which on a board reads as the game
     ignoring you. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
  outline-offset: 4px;
  border-radius: 14px;
}
svg.mp-board .mp-hit { cursor: pointer; }

/* A bead is not a button and must never look like selectable text. */
svg.mp-board text {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* ── the bead that has been picked up ────────────────────────────────────── */
/* ⚠️ The lift lives on the INNER `.mp-body`. The outer group carries the
   bead's position as a translate, so a lift written there would fight the
   travel transform on the very next move and the bead would land 4px high. */
svg.mp-board .mp-body {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.2);
}
svg.mp-board .mp-lifted .mp-body { transform: translateY(-4px) scale(1.06); }

/* ── legal destinations ──────────────────────────────────────────────────── */
/* ⛔ ONE MARK FOR EVERY LEGAL DESTINATION, WHETHER OR NOT IT IS A CAPTURE.
   Owner's standing rule: never force, hint or highlight a capture. A second
   colour for the jumps would be the assist that rule forbids — and it would be
   the first thing a visitor learned about the game.

   Amber because these are the amber player's own moves. The shadow is what
   keeps it legible on the two pale boards (Classic Cardboard, Terracotta),
   where amber-on-tan alone is nearly invisible. */
svg.mp-board .mp-hint {
  fill: rgba(255,179,0,.12);
  stroke: #FFB300;
  stroke-width: 2.4;
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
}
@media (prefers-reduced-motion: no-preference) {
  svg.mp-board .mp-hint {
    transform-box: fill-box;
    transform-origin: center;
    animation: mp-hint-in .22s cubic-bezier(.2,.9,.3,1.2) backwards;
  }
}
@keyframes mp-hint-in { from { opacity: 0; transform: scale(.4); } }

svg.mp-board .mp-sel-ring { pointer-events: none; opacity: .85; }

/* ── the keyboard cursor ─────────────────────────────────────────────────── */
/* Shown only once an arrow key has been pressed — a dashed ring sitting on the
   board from the first paint reads as part of the game, and a mouse user never
   needs it. play.js hides it again on blur and on any click. */
svg.mp-board .mp-cursor-ring {
  pointer-events: none;
  opacity: .95;
}

/* ── depth ───────────────────────────────────────────────────────────────── */
/* Nothing is needed here: site.css already drop-shadows `svg.board g[data-cell]`
   and lifts `svg.board g.moving`, and the playable beads carry both of those
   hooks on purpose, so the demo board and this one cast the same shadow.
   ⚠️ SVG HAS NO z-index — a travelling bead is raised above the ones it passes
   by being moved to the END of the bead group, in play.js's `hop`. */

/* ⛔ EVERY TRANSITION IS SET IN JS AND MUST BE, because the same property is
   animated with three different durations (a first hop, a chain hop, a fade).
   `prefers-reduced-motion` is therefore honoured in play.js, by not setting
   them at all — this block only covers what CSS owns. */
@media (prefers-reduced-motion: reduce) {
  svg.mp-board .mp-body { transition: none; }
  svg.mp-board .mp-hint { animation: none; }
}

/* ── the announcement region ─────────────────────────────────────────────── */
/* Visually hidden, never `display: none` — a display-none live region is not
   announced at all, which is the usual way this is got wrong. */
.mp-live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══ the furniture around the board ═══════════════════════════════════════
   The score line, the reset button and the theme picker. Built from site.css's
   tokens so they belong to the same page, and laid out with logical properties
   so the اردو flip costs nothing.                                            */

.mp-stage { display: flex; flex-direction: column; gap: .8rem; }

.mp-bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

/* One side's live standing. Amber is player one and blue player two, exactly as
   on the board — the score chip is how a reader ties the number to the beads. */
.mp-score {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .78rem;
  color: var(--ink-faint);
  /* ⚠️ Isolated in both directions: left to the paragraph's direction "19" next
     to an اردو label reorders, exactly as site.css documents for every other
     numeric run on this site. */
  unicode-bidi: isolate;
}
.mp-score b {
  font-family: var(--display);
  font-variation-settings: 'wght' 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mp-score.you b { color: var(--amber); }
.mp-score.them b { color: var(--blue-light); }

.mp-btn {
  min-height: 36px;
  font: inherit;
  font-size: .82rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-dim);
  border-radius: var(--radius-sm);
  padding: .42rem .85rem;
  cursor: pointer;
}
.mp-btn:hover { border-color: var(--line-2); color: var(--ink); }

.mp-select {
  font: inherit;
  /* ⚠️ 36px minimum. This was 32 and it is the only dropdown on the site — a
     control a thumb has to hit on a board the reader is already poking at. */
  min-height: 36px;
  font-size: .82rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-dim);
  border-radius: var(--radius-sm);
  padding: .42rem .7rem;
  cursor: pointer;
  margin-inline-start: auto;
}
.mp-select:hover { border-color: var(--line-2); color: var(--ink); }
/* The list itself is drawn by the OS, which does not inherit the page's dark
   ground — without this the options are black on black on Linux and Windows. */
.mp-select option { background: var(--surface); color: var(--ink); }

/* On a narrow screen the picker drops to its own line rather than squeezing the
   score chips into two characters each. */
@media (max-width: 420px) {
  .mp-select { margin-inline-start: 0; width: 100%; }
}