/* Fareroute — a blueprint on the hearing-room table. */

:root {
  --pad: 8px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gutter: 60px;
  --S: min(
    calc(100dvw - 2 * var(--pad) - var(--safe-l) - var(--safe-r)),
    calc(100dvh - 2 * var(--pad) - var(--safe-t) - var(--safe-b) - 56px - 46px - 290px),
    640px
  );
  --cell: calc(var(--S) * 0.13333);
  --line: color-mix(in srgb, var(--ak-bg) 42%, transparent);
  --line-faint: color-mix(in srgb, var(--ak-bg) 12%, transparent);
  --slate: color-mix(in srgb, var(--ak-bg) 70%, var(--ak-ink-muted));
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

/* ---------- Layout: board above, desk below; sideways, board left, desk right ---------- */

.play {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 56px var(--S) 46px minmax(0, 1fr);
  grid-template-areas: "top" "board" "rec" "desk";
  justify-items: center;
  row-gap: 0;
  padding:
    calc(var(--pad) + var(--safe-t))
    calc(var(--pad) + var(--safe-r))
    calc(var(--pad) + var(--safe-b))
    calc(var(--pad) + var(--safe-l));
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.play[hidden] { display: none; }

.top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 64px;
}

.logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.board-wrap {
  grid-area: board;
  width: var(--S);
  height: var(--S);
}

.desk > * { flex-shrink: 0; }

.desk {
  grid-area: desk;
  width: min(100%, var(--S));
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}

@media (orientation: landscape) {
  :root {
    --S: min(
      calc(100dvh - 2 * var(--pad) - var(--safe-t) - var(--safe-b)),
      calc(100dvw - 2 * var(--pad) - var(--safe-l) - var(--safe-r) - var(--gutter) - 290px),
      720px
    );
  }

  .play {
    grid-template-columns: var(--gutter) var(--S) minmax(260px, 400px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      ". board top"
      ". board desk"
      ". board rec";
    justify-content: center;
    align-content: center;
    justify-items: stretch;
    column-gap: 0;
  }

  .board-wrap { align-self: center; }

  .top {
    justify-content: flex-start;
    padding: 2px 60px 0 20px;
    height: 52px;
  }

  .logo { height: 42px; }

  .desk {
    width: 100%;
    gap: 8px;
    padding: 6px 0 0 20px;
    max-height: calc(var(--S) - 52px - 46px);
  }

  .desk { gap: 6px; }
  .say { font-size: 16px; min-height: 0; line-height: 1.3; }
  .coach { padding: 6px 10px 8px; }
  .coach-step { margin-bottom: 2px; }
  .driver { min-height: 46px; padding: 4px 10px; }
  .driver img { width: 28px; height: 32px; }
  .driver { grid-template-columns: 28px 1fr; }
  .act, .dir, .act-rival, .act .hint { min-height: 50px; }
}

/* ---------- Mute, top left ---------- */

.mute {
  position: fixed;
  top: max(12px, var(--safe-t));
  left: max(12px, var(--safe-l));
  z-index: 30;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--ak-bg);
  border: 2px solid var(--ak-ink);
  border-radius: var(--ak-radius);
  cursor: pointer;
}

.mute svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mute .mute-cone { fill: var(--ak-ink); }
.mute .mute-off { display: none; }
.mute[aria-pressed="true"] .mute-on { display: none; }
.mute[aria-pressed="true"] .mute-off { display: inline; stroke: var(--ak-accent); stroke-width: 2.4; }
.mute:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 3px; }

/* ---------- The board: a drafting sheet ---------- */

.board {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--ak-surface);
  border: 3px solid var(--ak-ink-muted);
  border-radius: var(--ak-radius);
  box-shadow: inset 0 0 0 1px var(--ak-ink);
  overflow: visible;
  container-type: size;
  transition: border-color 220ms ease, outline-color 220ms ease;
}

/* The frame says whose turn it is: solid brass for you, dashed ink for the rival. */
.board[data-turn="you"] {
  border-color: var(--ak-accent-2);
  outline: 3px solid var(--ak-accent-2);
}

.board[data-turn="rival"] {
  border-color: var(--ak-ink-muted);
  outline: 3px dashed var(--ak-ink-muted);
}

/* The painted sheet, stretched so its grid sits under ours, darkened toward ink. */
.sheet {
  position: absolute;
  inset: 4.5%;
  background-color: var(--ak-ink);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ak-ink) 64%, transparent), color-mix(in srgb, var(--ak-ink) 64%, transparent)),
    url("./art/street-plan.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%, 118.45% 133.96%;
  background-position: 0 0, 50% 49.23%;
  outline: 1px solid var(--ak-ink);
}

.ink, .guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ink .minor { stroke: var(--line-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ink .street { stroke: var(--line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ink .tick { stroke: var(--ak-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ink .dim { stroke: var(--ak-ink-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ink .leader { stroke: var(--ak-ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; fill: none; }
.ink .leader-in { stroke: var(--ak-bg); stroke-width: 1.2; vector-effect: non-scaling-stroke; fill: none; }
.ink .leader-dot { fill: var(--ak-bg); }

.trail {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.trail-you { stroke: var(--ak-accent-2); }
.trail-rival { stroke: var(--slate); stroke-dasharray: 5 4; }
.trail-chase {
  fill: none;
  stroke: var(--ak-bg);
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 8 92;
}

/* Drive lines: every straight drive from the cab, drawn like dimensions. */
.drive-back {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.drive-line {
  fill: none;
  stroke: var(--ak-accent-2);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.drive-tick {
  stroke: var(--ak-accent-2);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.drive-blocked .drive-back { stroke-width: 5; }
.drive-blocked .drive-line { stroke: var(--slate); stroke-width: 2; stroke-dasharray: 3 4; }
.drive-blocked .drive-tick { stroke: var(--slate); }

.drive-x {
  fill: none;
  stroke: var(--ak-bg);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.drive-rival .drive-back { stroke-width: 8; }
.drive-rival .drive-line { stroke: var(--ak-bg); stroke-width: 4; stroke-dasharray: 8 5; }
.drive-rival .drive-tick { stroke: var(--ak-bg); stroke-width: 2.5; }

.drive.hot .drive-line { stroke: var(--ak-bg); stroke-width: 4.5; }
.drive.hot .drive-tick { stroke: var(--ak-bg); }

/* The hint's pencil route, drawn by hand under the corner discs. */
.sketch-line,
.sketch-head,
.sketch-ring {
  fill: none;
  stroke: var(--ak-bg);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sketch-line { stroke-dasharray: 9 3 2 3; }
.sketch-ring { stroke-width: 2; stroke-dasharray: 96 4; }

/* A pencilled drive: bold parchment line, the others fade back. */
.has-pencil .drive:not(.pencil) { opacity: 0.35; }
.drive.pencil .drive-back { stroke-width: 10; }
.drive.pencil .drive-line,
.drive.pencil .drive-tick { stroke: var(--ak-bg); stroke-width: 5; }

/* Callout tags live in the parchment border. */
.labels { position: absolute; inset: 0; pointer-events: none; }

.tag {
  position: absolute;
  height: 4.5%;
  display: flex;
  align-items: center;
  font-family: var(--ak-font-body);
  font-weight: 700;
  font-size: clamp(13px, 3.6cqw, 17px);
  letter-spacing: 0.08em;
  color: var(--ak-ink);
  white-space: nowrap;
  line-height: 1;
}

.tag-fare { top: 0; left: 57.5%; letter-spacing: 0.03em; }

/* Whose turn it is, on a filled plate in the plan's border. It sits above the pieces so a cab
   on the top row can't hide it; that cab's number badge drops below it instead. */
.tag-turn {
  z-index: 5;
  transform-origin: left center;
  top: 0;
  left: 9%;
  gap: 0.5em;
  padding: 0 0.6em;
  font-size: clamp(13px, 3.7cqw, 18px);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  outline: 1.5px solid var(--ak-ink);
}

.tag-turn[data-turn="rival"] { background: var(--ak-ink); color: var(--ak-bg); }
.tag-turn[data-turn="none"] { background: var(--ak-bg); color: var(--ak-ink); }

.turn-mark {
  display: inline-block;
  width: 0.75em;
  height: 1em;
  border: 2px solid var(--ak-ink);
  border-radius: 3px;
  background: var(--ak-accent-2);
}

.tag-turn[data-turn="rival"] .turn-mark {
  border: 0;
  border-radius: 0;
  width: 1em;
  background: var(--ak-bg);
  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);
}

.tag-turn[data-turn="none"] .turn-mark { display: none; }
.tag-you { bottom: 0; left: 17%; }
.tag-rival { bottom: 0; right: 17%; }

/* ---------- Corners ---------- */

.corners { position: absolute; inset: 0; }

.corner {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
}

.corner .num {
  width: 66%;
  height: 66%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ak-bg);
  color: var(--ak-ink);
  border: 2px solid var(--ak-ink);
  font-family: var(--ak-font-body);
  font-weight: 700;
  font-size: max(17px, calc(var(--cell) * 0.44));
  line-height: 1;
  transition: transform 180ms var(--ease-back), background-color 160ms ease;
}

.corner.is-under .num,
.corner.is-fare .num { visibility: hidden; }

.corner.legal { z-index: 4; }
.corner.legal .num {
  background: var(--ak-accent-2);
  color: var(--ak-ink);
  border: 2.5px solid var(--ak-ink);
  box-shadow: 0 0 0 2px var(--ak-bg);
}

.corner.legal::after {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 3px solid var(--ak-accent-2);
  pointer-events: none;
}

.corner.hot .num { transform: scale(1.18); background: var(--ak-bg); }
.corner.hot::after { border-color: var(--ak-bg); }

.corner.legal.is-fare::after { inset: -4%; border-width: 3px; }

.corner.wrong::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 3px dashed var(--ak-bg);
  pointer-events: none;
}

.corner.wrong .num {
  background: var(--ak-surface);
  border: 2.5px solid var(--ak-accent);
}

/* Hollis's target: a dashed diamond, never a ring, so it can't be read as the fare's seal. */
.corner.flash::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 3px;
  transform: rotate(45deg);
  border: 4px dashed var(--ak-bg);
  box-shadow: 0 0 0 2px var(--ak-ink), inset 0 0 0 2px var(--ak-ink);
  pointer-events: none;
}

/* A dashed cab outline waits on the pencilled corner. */
.corner.picked::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: -6%;
  bottom: -6%;
  border: 3px dashed var(--ak-bg);
  border-radius: 28%;
  box-shadow: 0 0 0 2px var(--ak-ink), inset 0 0 0 2px var(--ak-ink);
  pointer-events: none;
}

.corner.picked .num { background: var(--ak-bg); transform: scale(1.1); }

.corner:focus-visible { outline: 3px solid var(--ak-bg); outline-offset: -2px; }
.corner:active .num { transform: scale(0.9); }

@media (hover: hover) {
  .corner.legal:hover .num { transform: scale(1.18); }
}

/* ---------- Pieces ---------- */

.pieces { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.piece {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.fare img { width: 86%; height: 86%; transition: transform 420ms var(--ease-back); }
.fare.taken { z-index: 1; }
.fare.taken img { transform: scale(1.5); }
.fare.taken .fare-pulse { display: none; }
.pieces.over .badge { display: none; }

.fare-pulse {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 2px solid var(--ak-bg);
}

.cab { z-index: 2; }
.cab-you > img {
  width: 66%;
  height: 108%;
  transform: rotate(var(--turn, 0deg));
  transition: transform 160ms var(--ease-out);
}

.cab-rival > img {
  width: 94%;
  height: 94%;
  filter: grayscale(1) contrast(1.08) brightness(1.08);
}

.cab.on-top { z-index: 3; }

/* The number under a parked cab, lifted to its shoulder so it stays readable. */
.badge {
  position: absolute;
  top: -14%;
  right: -16%;
  width: 54%;
  height: 54%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ak-bg);
  color: var(--ak-ink);
  border: 2.5px solid var(--ak-ink);
  font-family: var(--ak-font-body);
  font-weight: 700;
  font-size: max(16px, calc(var(--cell) * 0.38));
  line-height: 1;
}

.cab.top-row .badge { top: auto; bottom: -14%; }
.cab.moving .badge { visibility: hidden; }

.cab.active::before {
  content: "";
  position: absolute;
  inset: -10%;
  border: 2px solid var(--ak-bg);
  border-radius: 50%;
  opacity: 0.85;
}

/* Your cab wears square drafting brackets, never a ring, so it cannot be read as a corner to tap. */
.cab-you.active::before { display: none; }
.cab-rival.active::before { border-style: dashed; }

.spot {
  --c: var(--ak-accent-2);
  --l: 30%;
  --t: 4px;
  position: absolute;
  inset: -16% -8%;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) left top / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) right top / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--l);
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 200ms ease;
}

.cab-you.active .spot { opacity: 1; }

.who-tag {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translate(-50%, -50%);
  padding: 2px 4px 1px;
  font-family: var(--ak-font-body);
  font-weight: 700;
  font-size: max(13px, calc(var(--cell) * 0.26));
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ak-ink);
  background: var(--ak-bg);
  border: 2px solid var(--ak-ink);
  border-left: 4px solid var(--ak-accent-2);
  white-space: nowrap;
  z-index: 1;
}

.who-tag[data-spot="ul"] { top: 0; }
.who-tag[data-spot="lr"] { left: 100%; }

.cab.stuck::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 44%, var(--ak-bg) 44%, var(--ak-bg) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--ak-bg) 44%, var(--ak-bg) 56%, transparent 56%);
  opacity: 0.9;
  pointer-events: none;
}

/* ---------- Teaching overlay ---------- */

.guide .ring {
  fill: none;
  stroke: var(--ak-bg);
  stroke-width: 3.5;
  vector-effect: non-scaling-stroke;
}

.guide .ring-back {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 7;
  vector-effect: non-scaling-stroke;
}

.guide .arrow-back {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.guide .arrow {
  fill: none;
  stroke: var(--ak-bg);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }

.flare {
  position: absolute;
  width: calc(var(--cell) * 1.1);
  height: calc(var(--cell) * 1.1);
  border-radius: 50%;
  border: 3px solid var(--ak-bg);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}

.chit {
  position: absolute;
  width: 8px;
  height: 12px;
  border: 1px solid var(--ak-ink);
}

/* ---------- Desk ---------- */

.drivers {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1.5px solid var(--ak-ink);
  border-bottom: 1.5px solid var(--ak-ink);
}

.drivers-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: var(--ak-choice-selected-bg);
  transition: transform 380ms var(--ease-back);
}

.drivers[data-turn="rival"] .drivers-mark { transform: translateX(100%); }
.drivers[data-turn="none"] .drivers-mark { opacity: 0; }

.driver {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 7px 10px;
  min-height: 56px;
  color: var(--ak-ink);
  transition: color 200ms ease;
}

.driver + .driver { border-left: 1.5px solid var(--ak-ink); }

.driver img {
  grid-row: 1 / span 2;
  width: 34px;
  height: 40px;
  object-fit: contain;
}

.driver-rival img { filter: grayscale(1) contrast(1.08) brightness(1.08); }

.driver-name {
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.05;
}

.driver-state {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 1.2em;
}

.drivers[data-turn="you"] .driver-you,
.drivers[data-turn="rival"] .driver-rival { color: var(--ak-choice-selected-ink); }

.say {
  margin: 0;
  font-size: 18px;
  text-wrap: pretty;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ak-ink);
  min-height: 2.7em;
}

.say strong {
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 1.25em;
  color: var(--ak-accent);
  margin-right: 0.15em;
}

.say b {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 0.1em;
  border-radius: 50%;
  border: 2px solid var(--ak-ink);
  background: var(--ak-bg);
  font-size: 0.95em;
  line-height: 1;
  color: var(--ak-ink);
}

/* The key, like a drawing's legend: each mark copies the board's own, with what it means. */
.how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  border-top: 1.5px solid var(--ak-ink);
  border-bottom: 1.5px solid var(--ak-ink);
  background: var(--ak-bg);
}

.how-step {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ak-ink);
  transition: background-color 200ms ease, color 200ms ease;
}

.how-step + .how-step { border-left: 1px solid var(--ak-ink); }

.how-g {
  flex: none;
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* Your corner's number: the board's parchment disc. */
.how-g-num {
  background: var(--ak-bg);
  color: var(--ak-ink);
  border: 2px solid var(--ak-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.how-g-way svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* A glowing corner: the board's brass disc inside its ring. */
.how-g-glow {
  width: 30px;
  height: 30px;
  border: 3px solid var(--ak-accent-2);
}

.how-g-glow::after {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ak-accent-2);
  border: 2px solid var(--ak-ink);
  box-shadow: 0 0 0 1.5px var(--ak-bg);
}

.how-t { min-width: 0; text-wrap: balance; }

.how-step.now {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

.how[data-step="0"] .how-step { color: var(--ak-ink-muted); }
.how.waiting .how-g-glow { opacity: 0.35; }

.act {
  min-height: 56px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}

.act[data-mode="rival"] { grid-template-columns: minmax(0, 1fr); }
.act[data-mode="none"] { visibility: hidden; }

.dir {
  min-height: 56px;
  padding: 4px 2px;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  column-gap: 4px;
  border-radius: var(--ak-radius);
  border: 2px solid var(--ak-btn-fill);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  cursor: pointer;
  transition: transform 140ms var(--ease-back), background-color 140ms ease;
}

.dir svg {
  width: 18px;
  height: 18px;
  align-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dir-name { font-weight: 700; font-size: 16px; line-height: 1.1; }

.dir-sub {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.dir-no {
  background: var(--ak-surface);
  color: var(--ak-ink-muted);
  border: 2px dashed var(--ak-ink-muted);
}

.dir.hot { background: var(--ak-btn-hover); }
.dir.picked {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  border-color: var(--ak-accent-2);
  box-shadow: inset 0 0 0 2px var(--ak-accent-2);
}
.dir:active { transform: scale(0.94); }
.dir:not(.dir-no):active { background: var(--ak-btn-active); }
.dir:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 2px; }

@media (hover: hover) {
  .dir:not(.dir-no):hover { background: var(--ak-btn-hover); }
}

.act-rival {
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: var(--ak-surface);
  border: 2px dashed var(--ak-ink-muted);
  border-radius: var(--ak-radius);
  color: var(--ak-ink);
}

.act-rival img {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.08) brightness(1.08);
}

.act-who { font-family: var(--ak-font-display); font-weight: 700; font-size: 21px; line-height: 1.05; }
.act-what { font-size: 15px; font-weight: 600; }

.note {
  margin: 0;
  padding: 8px 12px 8px 14px;
  font-size: 17px;
  line-height: 1.35;
  background: var(--ak-bg);
  color: var(--ak-ink);
  border-left: 4px solid var(--ak-accent);
}

.note[hidden], .coach[hidden], .hint[hidden], .ruling[hidden] { display: none; }

.coach {
  position: relative;
  padding: 10px 14px 12px;
  background: var(--ak-bg);
  border: 2px solid var(--ak-ink);
  border-radius: var(--ak-radius);
}

.coach-step {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.coach.route .coach-text {
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
}

.coach-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ak-ink);
}

.coach-turn {
  display: none;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 1.2em;
  color: var(--ak-accent);
}

/* On phones the teaching caption already says what to do, so it stands in for the instruction
   line and, where there is room, carries the turn itself. Elsewhere the board's turn plate and
   the drivers strip say whose turn it is. */
@media (max-height: 920px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .desk.coaching .say { display: none; }
}

@media (min-height: 761px) and (max-height: 920px) and (orientation: portrait) {
  .desk.coaching .coach-turn { display: inline; }
}

@media (min-height: 761px) and (max-height: 920px) and (orientation: portrait) {
  .desk.coaching { gap: 6px; padding-top: 8px; }
  .desk.coaching .coach { padding: 6px 12px 8px; }
}

/* The first round's Hint, a tile beside the directions. */
.hint {
  min-height: 56px;
  min-width: 0;
  padding: 4px 2px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  border: 2px solid var(--ak-ink);
  border-radius: var(--ak-radius);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 140ms var(--ease-back), background-color 140ms ease;
}

.hint.on { background: var(--ak-bg); box-shadow: inset 0 0 0 2px var(--ak-accent-2); }
.hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.hint:active { transform: scale(0.95); }
.hint:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 3px; }

/* The record: a ruled strip under the plan, newest drive first, only whole entries shown. */
.record {
  grid-area: rec;
  align-self: end;
  width: var(--S);
  height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1.5px solid var(--ak-ink);
  border-top-width: 0;
  background: var(--ak-bg);
}

@media (orientation: landscape) {
  .record {
    width: auto;
    margin: 6px 0 0 20px;
    border-top-width: 1.5px;
  }
}

.record-label {
  display: grid;
  place-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ak-bg);
  background: var(--ak-ink);
  writing-mode: horizontal-tb;
}

.record-list {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
}

.record-list li {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ak-ink);
  white-space: nowrap;
  border-right: 1px solid color-mix(in srgb, var(--ak-ink) 30%, transparent);
}

.record-list li .n {
  font-size: 12px;
  font-weight: 700;
  color: var(--ak-ink-muted);
  letter-spacing: 0.06em;
}

.record-list li svg { width: 14px; height: 16px; flex: none; }
.record-list li.pass { color: var(--ak-ink-muted); font-style: italic; }

/* Par to beat, set off at the strip's end like a drawing's scale note. */
.record-par {
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-left: 1.5px solid var(--ak-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ak-ink);
}
.record-par:empty { display: none; }

/* ---------- Ruling: the title block in the corner ---------- */

.ruling {
  position: fixed;
  right: calc(var(--pad) + var(--safe-r));
  bottom: calc(var(--pad) + var(--safe-b));
  z-index: 20;
  width: min(380px, calc(100vw - 2 * var(--pad) - var(--safe-l) - var(--safe-r)));
}

.ruling-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ak-bg);
  border: 3px solid var(--ak-ink);
  outline: 1px solid var(--ak-ink);
  outline-offset: -7px;
  padding: 7px;
}

.rb-cell {
  padding: 6px 10px 7px;
  border-right: 1px solid var(--ak-ink);
  border-bottom: 1px solid var(--ak-ink);
  min-width: 0;
}

.rb-cell.rb-streak { border-right: 0; }
.rb-cell.rb-rival { grid-column: 1 / -1; border-right: 0; }

.rb-head {
  grid-column: 1 / -1;
  border-right: 0;
  padding-right: 118px;
}

/* The line under the ruling runs the full width, clear of the stamp. */
.rb-head .rb-what { margin-right: -108px; }

.rb-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.rb-says {
  margin: 4px 0 0;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ak-ink);
}

.rb-what {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ak-ink);
}

.rb-quip {
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ak-ink-muted);
}

.rb-who { font-family: var(--ak-font-body); font-size: 15px; color: var(--ak-ink); }

.rb-sub {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ak-ink-muted);
}

.rb-sub.fresh { color: var(--ak-accent); font-weight: 700; }

.rb-value {
  display: block;
  font-family: var(--ak-font-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
}

.rb-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px 3px 3px;
}

.rb-btn {
  min-height: 48px;
  border-radius: var(--ak-radius);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  transition: transform 140ms var(--ease-back);
}

.rb-main {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  border-color: var(--ak-btn-fill);
}

.rb-btn:active { transform: scale(0.95); }
.rb-main:active { background: var(--ak-btn-active); }
.rb-btn:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 2px; }

@media (hover: hover) {
  .rb-main:hover { background: var(--ak-btn-hover); }
  .hint:hover { background: var(--ak-bg); }
}

.stamp {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 112px;
  padding: 6px 4px;
  text-align: center;
  font-family: var(--ak-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.1em;
  color: var(--ak-accent);
  background: var(--ak-bg);
  border: 3px double var(--ak-accent);
  outline: 2px solid var(--ak-accent);
  outline-offset: 2px;
  transform: rotate(-9deg);
}

/* Sideways, the title block takes the desk's own column, under the ? button, and sits at its
   foot like a drawing's title block. The board keeps its whole half of the screen. */
@media (orientation: landscape) {
  .ruling {
    position: relative;
    right: auto;
    bottom: auto;
    grid-column: 3;
    grid-row: 1 / -1;
    width: auto;
    min-height: 0;
    margin: 56px 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .ruling[hidden] { display: none; }
  .ruling-block { max-height: 100%; overflow-y: auto; }
}

/* At the ruling the board steps back a little, still whole and readable, so the title block gets
   a wider column with room for full-size type and buttons. */
@media (orientation: landscape) {
  .play.over {
    --S: min(
      calc(100dvh - 2 * var(--pad) - var(--safe-t) - var(--safe-b)),
      max(300px, calc(100dvw - 2 * var(--pad) - var(--safe-l) - var(--safe-r) - var(--gutter) - 440px)),
      720px
    );
    --cell: calc(var(--S) * 0.13333);
    grid-template-columns: var(--gutter) var(--S) minmax(300px, 460px);
  }
}

/* A phone on its side: every line and both buttons show at once, at full size.
   The board's border already reads RACE OVER, so the block's own heading is left to screen readers. */
@media (orientation: landscape) and (max-height: 500px) {
  .ruling { margin-top: 54px; }
  .ruling-block { padding: 5px; outline-offset: -5px; }
  .rb-cell { padding: 5px 12px 6px; }
  .rb-head { padding-right: 116px; }
  .rb-head .rb-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rb-says { margin: 0; font-size: 24px; line-height: 1.1; }
  .rb-what { margin-top: 4px; font-size: 16px; }
  .rb-head .rb-what { margin-right: 0; }
  .rb-value { font-size: 20px; }
  .rb-quip { font-size: 17px; }
  .rb-who { font-size: 15px; }
  .rb-actions { padding-top: 7px; gap: 10px; }
  .rb-btn { min-height: 56px; font-size: 18px; }
  .stamp { top: 10px; right: 10px; width: 106px; font-size: 15px; }
}

/* Shorter still: Hollis's remark gives way so the ruling and the buttons keep their size. */
@media (orientation: landscape) and (max-height: 380px) {
  .rb-cell.rb-rival { display: none; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .corner.legal::after { animation: legal-pulse 1.3s ease-in-out infinite; }
  .fare-pulse { animation: seal-pulse 2.6s ease-in-out infinite; }
  .cab.active > img { animation: idle-bob 2.2s ease-in-out infinite; }
  .cab-you.active > img { animation-name: idle-bob-you; }
  .cab.thinking > img { animation: think-wobble 0.9s ease-in-out infinite; }
  .corner.wrong .num { animation: nope 360ms ease; }
  .corner.flash::before { animation: flash-ring 420ms var(--ease-out); }
  .guide .pulse { animation: guide-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .guide .nudge { animation: guide-nudge 1.1s ease-in-out infinite; }
  .trail-chase { animation: chase 1.8s linear infinite; }
  .dots::after { content: ""; animation: dots 1.2s steps(4) infinite; }
  .drivers.turned .driver img { animation: turn-hop 420ms var(--ease-back); }
  .tag-turn.turned { animation: turn-pop 460ms var(--ease-back); }
  .cab-you.active .spot { animation: spot-breathe 1.6s ease-in-out infinite; }
  .drive { animation: drive-in 260ms var(--ease-out) both; }
  .act-rival, .dir { animation: note-in 240ms var(--ease-out) both; }
  .corner.picked::before { animation: ghost-in 260ms var(--ease-back); }
  .dir.picked { animation: turn-pop 300ms var(--ease-back); }
  .how-step.now { animation: note-in 260ms var(--ease-out); }
  .sketch-leg { animation: drive-in 360ms ease-out both; animation-delay: calc(var(--i) * 260ms); }
  .sketch-ring { animation: drive-in 360ms ease-out both; animation-delay: 700ms; }
  .act-rival img { animation: think-wobble 0.9s ease-in-out infinite; }
  .note.fresh { animation: note-in 260ms var(--ease-out); }
  .coach.fresh { animation: note-in 300ms var(--ease-out); }
  .record-list li.fresh { animation: pen-in 520ms ease-out both; }
  .ruling.show .ruling-block { animation: block-in 420ms var(--ease-out) both; }
  .ruling.show .stamp { animation: stamp-down 520ms 380ms cubic-bezier(0.5, 0, 0.6, 1.4) both; }
  .cab.stuck > img { animation: stuck-shake 420ms ease 2; }
}

@keyframes legal-pulse {
  0%, 100% { transform: scale(0.92); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.45; }
}

@keyframes seal-pulse {
  0%, 100% { transform: scale(0.96); opacity: 0.9; }
  50% { transform: scale(1.16); opacity: 0.25; }
}

@keyframes idle-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3%) scale(1.03); }
}

@keyframes idle-bob-you {
  0%, 100% { transform: rotate(var(--turn, 0deg)) scale(1); }
  50% { transform: rotate(var(--turn, 0deg)) scale(1.05); }
}

@keyframes think-wobble {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-4deg); }
  70% { transform: rotate(4deg); }
}

@keyframes nope {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-12%); }
  75% { transform: translateX(12%); }
}

@keyframes flash-ring {
  from { transform: rotate(45deg) scale(1.5); opacity: 0; }
  to { transform: rotate(45deg) scale(1); opacity: 1; }
}

@keyframes guide-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.14); opacity: 0.7; }
}

@keyframes guide-nudge {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--nx, 0), var(--ny, 0)); }
}

@keyframes chase {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

@keyframes turn-hop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-6px) scale(1.12, 0.92); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes ghost-in {
  from { transform: scale(1.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes spot-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes turn-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes drive-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes note-in {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pen-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes block-in {
  from { transform: translate(24px, 24px); opacity: 0; }
  to { transform: translate(0, 0); opacity: 1; }
}

@keyframes stamp-down {
  0% { transform: rotate(-16deg) scale(2.4); opacity: 0; }
  60% { transform: rotate(-8deg) scale(0.9); opacity: 1; }
  80% { transform: rotate(-9deg) scale(1.06); }
  100% { transform: rotate(-9deg) scale(1); opacity: 1; }
}

@keyframes stuck-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8%); }
  75% { transform: translateX(8%); }
}

@media (max-height: 760px) and (orientation: portrait) {
  .say { font-size: 17px; min-height: 0; }
  .desk { gap: 5px; padding-top: 5px; }
  .coach { padding: 6px 10px 8px; }
  .coach-step { margin-bottom: 2px; }
  .driver { min-height: 46px; padding: 4px 10px; grid-template-columns: 28px 1fr; }
  .driver img { width: 28px; height: 32px; }
}

@media (max-height: 760px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .coach-step { display: none; }
  .how-step { min-height: 38px; padding: 2px 6px; gap: 5px; line-height: 1.12; }
  .how-g { width: 24px; height: 24px; }
  .how-g-num { font-size: 14px; }
  .how-g-way svg { width: 22px; height: 22px; }
  .how-g-glow::after { width: 14px; height: 14px; }
  .driver { min-height: 38px; grid-template-columns: 26px auto 1fr; grid-template-rows: auto; column-gap: 7px; padding: 3px 8px; }
  .driver img { grid-row: auto; width: 26px; height: 30px; }
  .driver-name { font-size: 18px; }
  .driver-state { font-size: 12px; text-align: right; }
}


/* ---------- The start screen (built by start.js), tuned for this sheet ----------
   The doubled id outranks the screen's own layout rules without replacing them. */

#activity-start#activity-start { padding-top: max(10px, env(safe-area-inset-top)); }

/* Play stays pinned in view on short screens (the house sticky button). A paper-coloured
   collar masks the text scrolling under it, so it never reads as sitting on top of the rules. */
#activity-start#activity-start .ak-go,
#activity-start#activity-start .ak-go:active {
  box-shadow: var(--ak-shadow), 0 0 0 var(--ak-space-3) var(--ak-bg);
}
#activity-start#activity-start .ak-go {
  margin-top: var(--ak-space-5);
  margin-bottom: var(--ak-space-4);
}

#activity-start#activity-start .ak-badge { display: none; }
#activity-start#activity-start .ak-section .ak-label { margin-top: 0; }
#activity-start#activity-start.layout-poster.is-instructions .ak-logo { max-height: 104px; }
#activity-start#activity-start.layout-poster .ak-tagline { margin-top: var(--ak-space-3); }
#activity-start#activity-start.layout-poster .ak-howto { margin-top: var(--ak-space-4); }
#activity-start#activity-start.layout-poster .ak-first { margin-top: var(--ak-space-4); }

/* A phone held upright can't fit the whole sheet: lift Start here under the tagline, as the
   house does for a sideways phone, so the pinned Play button never covers it. */
@media (orientation: portrait) and (max-height: 920px) {
  #activity-start#activity-start.is-instructions .ak-sheet { display: flex; flex-direction: column; }
  #activity-start#activity-start.is-instructions .ak-head { order: -1; }
  #activity-start#activity-start.is-instructions .ak-first { order: 0; }
  #activity-start#activity-start.is-instructions .ak-howto { order: 1; }
  #activity-start#activity-start.is-instructions .ak-go { order: 2; align-self: stretch; }
}

@media (orientation: landscape) and (max-height: 500px) {
  #activity-start#activity-start.layout-poster.is-instructions .ak-logo { max-height: 56px; }
  #activity-start#activity-start .ak-go { margin-top: var(--ak-space-3); }
}