/* ── Arrows ───────────────────────────────────────────────────────────────────
   One SVG, a `0 0 N M` viewBox, one user unit per cell. Everything below is
   therefore in CELLS, and the board scales by resizing the element rather than
   by recomputing any geometry.

   PAINT ORDER IS LOAD-BEARING. Every body is stroked in PAPER first (the halo
   layer), and ALL those knockouts are drawn before ANY ink, so one arrow's gap
   can never eat its neighbour's line. Reorder these groups and touching bodies
   merge into a blob. The layers, back to front: dots, lane, halo, ink, catcher.

   See sandbox-arrows.html at the repo root for the dossier.                   */

.arrows-play .q-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aw-board {
  /* The board is a PORTRAIT RECTANGLE, so the height cap has to be divided by
     the aspect ratio or a tall board overflows the viewport on a short screen. */
  width: min(92vw, calc(72vh * var(--aw-ar)), 560px);
  aspect-ratio: var(--aw-ar);
  display: block;
  background: var(--aw-paper);
  border: var(--hairline) solid var(--aw-frame);
  border-radius: var(--radius-sm);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.aw-dot { fill: var(--aw-dot); }

/* the knockout — paper, drawn under every ink */
.aw-halo {
  fill: none;
  stroke: var(--aw-paper);
  stroke-width: calc(var(--aw-stroke) + 2 * var(--aw-gap));
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* head and tail are solids, so their knockout GROWS the shape instead */
.aw-halo-b {
  fill: var(--aw-paper);
  stroke: var(--aw-paper);
  stroke-width: calc(2 * var(--aw-gap));
  stroke-linejoin: round;
}

.aw-body {
  fill: none;
  stroke: var(--aw-ink);
  stroke-width: var(--aw-stroke);
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* The head is a SOLID and must never take a stroke. SVG's default stroke-width
   is 1 user unit, and this viewBox is one unit per cell — a head that picks up
   a stroke colour without a width swells to a full cell across and turns the
   board into blobs. Setting fill alone is the fix. */
.aw-head { fill: var(--aw-ink); stroke: none; }

/* One board-wide catcher. Hit testing is nearest-line in JS, not per-cell: at a
   .115 stroke a 1x1 cell rect is six times wider than the ink inside it, so a
   tap in the empty half of a cell used to land on that cell's owner while the
   arrow the player was aiming at, visibly nearer, never saw the event. */
.aw-hit { fill: transparent; pointer-events: all; }

/* hover on a pointer device: lift the whole body so it can be traced end to end
   without moving your finger */
.aw-arrow.hi .aw-body { stroke: var(--aw-mark); }
.aw-arrow.hi .aw-head { fill: var(--aw-mark); }

/* peek: hold an arrow and the rest of the board steps back */
.aw-board.peek .aw-arrow { opacity: 0.22; }
.aw-board.peek .aw-arrow.on { opacity: 1; }
.aw-lane-cell { fill: var(--aw-lane); stroke: var(--aw-lane-line); stroke-width: 0.03; }
.aw-stop-cell { fill: none; stroke: var(--aw-stop); stroke-width: 0.09; }

/* the cat's ring on an arrow she has picked out */
.aw-arrow.mark .aw-body { stroke: var(--aw-mark); }
.aw-arrow.mark .aw-head { fill: var(--aw-mark); }
.aw-arrow.mark { animation: aw-pick 0.9s var(--ease) 2; }
@keyframes aw-pick {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.aw-arrow, .aw-halo-g {
  transition: transform var(--duration-3) var(--ease), opacity var(--duration-2) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .aw-arrow, .aw-halo-g { transition: none; }
  .aw-arrow.mark { animation: none; }
}