/* Monza — every style in the game.
   The look: a royal-park circuit on race day. Deep park green for the ground
   the game sits on, cream for type and for everything that marks a choice,
   gold for the one thing to press next, ink for rims. The six space colours
   belong to the rules and never appear in the chrome except where they mean
   "this die / this space".

   Everything below is built from the token block at the top: colour, surface,
   space, radius, depth, motion and type. A one-off pixel value in a rule
   further down is a bug in this file, not a decision — the tokens are what
   stop two panels on two screens drifting apart.

   Contrast (measured, not eyeballed, against the composited panel colour
   #203228): cream 11.8:1, --mz-cream-2 7.5:1, --mz-cream-3 5.3:1 (the smallest
   text on the page), gold 9.2:1; ink on gold 12.0:1; white on --mz-go 5.35:1,
   on --mz-warn 5.3:1; cream on a ghost button 7.1:1. White text on the green,
   red and blue SPACE colours measures 3.3-4.2:1, so no label is ever set on a
   space colour — move buttons carry a colour swatch and cream text instead. */

:root {
  /* ---- colour ---------------------------------------------------------- */
  --mz-night:   #0d1d14;     /* the page */
  --mz-deep:    #081209;
  --mz-park:    #173524;
  --mz-ink:     #15191d;     /* rims, and text on light surfaces */
  --mz-cream:   #f6efdc;     /* text on dark surfaces */
  --mz-cream-2: rgba(246,239,220,.76);
  --mz-cream-3: rgba(246,239,220,.6);
  --mz-gold:    #ffcf4a;
  --mz-gold-hi: #ffe08a;
  --mz-gold-sh: #b98a12;
  --mz-go:      #1d7a45;  --mz-go-sh:   #0f5530;
  --mz-warn:    #b54a24;  --mz-warn-sh: #7d2f14;
  --mz-flag:    #ff9b80;     /* the final round: warm, and not a space colour */
  --mz-asphalt: #2d3237;

  /* ---- surfaces -------------------------------------------------------- */
  --mz-panel: rgba(18,37,26,.9);
  --mz-s1:    rgba(255,255,255,.06);
  --mz-s2:    rgba(255,255,255,.10);
  --mz-s3:    rgba(255,255,255,.16);
  --mz-line:  rgba(255,255,255,.12);
  --mz-field: rgba(0,0,0,.28);

  /* ---- space ----------------------------------------------------------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;

  /* ---- radius ---------------------------------------------------------- */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 22px; --r-pill: 999px;

  /* ---- depth ----------------------------------------------------------- */
  --sh-1: 0 2px 8px rgba(0,0,0,.28);
  --sh-2: 0 8px 22px rgba(0,0,0,.36);
  --sh-3: 0 20px 50px rgba(0,0,0,.55);
  --sh-in: inset 0 1px 0 rgba(255,255,255,.09);
  --lip: 0 4px 0;

  /* ---- motion ---------------------------------------------------------- */
  --t-fast: 110ms; --t-mid: 210ms; --t-slow: 420ms;
  --ease:     cubic-bezier(.22,.68,.36,1);
  --ease-pop: cubic-bezier(.34,1.5,.64,1);

  /* ---- type ------------------------------------------------------------ */
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fs-logo: 30px;
  --fs-h2: 21px;
  --fs-h3: 12.5px;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-tiny: 11.5px;

  /* ---- measured at run time by js/main.js ------------------------------ */
  --hdr-h: 60px;
  --dock-h: 250px;
  --tap: 44px;               /* the smallest thing a finger has to hit */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Paint the root too: with viewport-fit=cover iOS extends past the body. */
html { background: var(--mz-night); }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font); font-size: var(--fs-body); color: var(--mz-cream);
  background:
    radial-gradient(ellipse at 22% -10%, #24583a 0%, transparent 55%),
    radial-gradient(ellipse at 90% 110%, #123322 0%, transparent 60%),
    linear-gradient(180deg, var(--mz-park) 0%, var(--mz-night) 70%);
  background-color: var(--mz-night);   /* AFTER the shorthand, or it is a no-op */
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; line-height: 1.15; }
h2 { font-size: var(--fs-h2); font-weight: 900; font-style: italic; letter-spacing: .3px; }
h3 { font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: 1.4px; color: var(--mz-cream-3); font-weight: 800; }
.hint { color: var(--mz-cream-3); font-size: var(--fs-small); line-height: 1.45; margin: var(--sp-1) 0 0; }

/* ------------------------------- buttons ---------------------------------- */
/* One button system, five states. */
button { font-family: inherit; }
.btn {
  --bg: var(--mz-s3); --sh: rgba(0,0,0,.34); --fg: var(--mz-cream);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 10px 16px;
  border: 0; border-radius: var(--r-2);
  background: var(--bg); color: var(--fg);
  font-weight: 800; font-size: 15px; letter-spacing: .2px; line-height: 1.1;
  box-shadow: var(--lip) var(--sh), var(--sh-in);
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.btn.gold { --bg: linear-gradient(180deg, var(--mz-gold-hi), var(--mz-gold) 55%); --sh: var(--mz-gold-sh); --fg: var(--mz-ink); }
.btn.go   { --bg: var(--mz-go);   --sh: var(--mz-go-sh);   --fg: #fff; }
.btn.warn { --bg: var(--mz-warn); --sh: var(--mz-warn-sh); --fg: #fff; }
.btn.ghost { --bg: var(--mz-s3); }
.btn.big  { font-size: 18px; padding: 15px var(--sp-6); }
.btn.wide { width: 100%; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 12.5px; }
/* Hover only where there is a real pointer: a phone that emulates it leaves
   the button stuck in its hover state after a tap. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
  .icon-btn:hover { background: var(--mz-s3); }
  .seg button:hover:not(.sel) { background: var(--mz-s3); }
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--sh), var(--sh-in); }
.btn:disabled { filter: grayscale(.6) brightness(.72); cursor: default; box-shadow: 0 2px 0 var(--sh); }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .check:focus-within {
  outline: 3px solid var(--mz-gold); outline-offset: 3px;
}

.icon-btn {
  min-width: var(--tap); height: var(--tap); padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--r-2);
  background: var(--mz-s2); color: var(--mz-cream);
  font-size: 18px; font-weight: 700; cursor: pointer; flex: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn .lbl { font-size: var(--fs-small); }
.icon-btn:active { transform: scale(.94); }

/* -------------------------------- header ---------------------------------- */
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: calc(var(--sp-2) + env(safe-area-inset-top)) max(var(--sp-5), env(safe-area-inset-right)) var(--sp-2) max(var(--sp-5), env(safe-area-inset-left));
}
.brand { display: flex; align-items: center; gap: var(--sp-2); }
.brand-flag { width: 30px; height: 30px; color: var(--mz-cream); transform-origin: 20% 90%; animation: flagWave 2.6s ease-in-out infinite; }
@keyframes flagWave { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
.logo {
  font-size: var(--fs-logo); font-weight: 900; font-style: italic; letter-spacing: 3px;
  color: var(--mz-cream); text-shadow: 0 3px 0 rgba(0,0,0,.35);
  position: relative; padding-bottom: 5px;
}
/* A speed stripe under the name. */
.logo::after {
  content: ""; position: absolute; left: 2px; right: -6px; bottom: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--mz-gold) 0 62%, transparent 62% 68%, var(--mz-gold) 68% 80%, transparent 80% 85%, var(--mz-gold) 85%);
  transform: skewX(-24deg);
}
.topbar .sub { flex: 1; color: var(--mz-cream-3); font-size: var(--fs-small); }

/* --------------------------------- panels --------------------------------- */
.panel {
  background: var(--mz-panel);
  border: 1px solid var(--mz-line); border-radius: var(--r-4);
  box-shadow: var(--sh-2), var(--sh-in);
  padding: var(--sp-5);
}
.panel h3 { margin-bottom: var(--sp-2); }

/* ------------------------------ setup screen ------------------------------ */
#setupScreen {
  max-width: 680px; margin: 0 auto; padding: 0 var(--sp-4) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
  animation: rise var(--t-slow) var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero { height: clamp(96px, 19vh, 150px); border-radius: var(--r-4); overflow: hidden; box-shadow: var(--sh-2); border: 1px solid var(--mz-line); }
#heroCv { width: 100%; height: 100%; display: block; }

.resume { display: none; border-color: rgba(255,207,74,.55); background: linear-gradient(180deg, rgba(255,207,74,.14), rgba(255,207,74,.05)), var(--mz-panel); }
.resume.on { display: block; animation: sheetIn var(--t-mid) var(--ease-pop) both; }
.resume-head { display: flex; align-items: center; gap: var(--sp-2); font-size: 16px; }
.pitboard { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-1); background: var(--mz-ink); color: var(--mz-gold); font-size: 14px; }
.row-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }

.field { margin: var(--sp-5) 0; }
.label { display: block; font-weight: 800; margin-bottom: var(--sp-2); font-size: 15px; }
.seg { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.seg button {
  min-height: var(--tap); min-width: var(--tap); padding: 8px 14px;
  border: 1px solid var(--mz-line); border-radius: var(--r-2);
  background: var(--mz-s2); color: var(--mz-cream);
  font-weight: 800; font-size: 14.5px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.seg button small { display: block; font-weight: 600; font-size: var(--fs-tiny); color: var(--mz-cream-3); }
.seg button:active { transform: scale(.96); }
.seg button.sel { background: var(--mz-cream); color: var(--mz-ink); border-color: var(--mz-cream); box-shadow: 0 0 0 2px rgba(255,207,74,.0), var(--sh-1); }
.seg button.sel small { color: rgba(21,25,29,.7); }

.player-row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; position: relative; }
.car-pick {
  width: 64px; height: var(--tap); flex: none; padding: 0; position: relative;
  border: 1px solid var(--mz-line); border-radius: var(--r-2);
  background: linear-gradient(180deg, #353b41, #2a2f34); cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--car), var(--sh-in);
  transition: transform var(--t-fast) var(--ease-pop);
}
.car-pick canvas { width: 54px; height: 32px; display: block; margin: 0 auto; }
.car-pick:active { transform: scale(.93); }
input, select {
  font-family: inherit; font-size: 15px; color: var(--mz-cream);
  min-height: var(--tap); padding: 8px 12px;
  background: var(--mz-field); border: 1px solid var(--mz-line); border-radius: var(--r-2);
}
input::placeholder { color: rgba(246,239,220,.45); }
select option { color: var(--mz-ink); }
.player-row input { flex: 1; min-width: 0; }
.player-row .first { position: absolute; left: -6px; top: -8px; font-size: 10.5px; font-weight: 800; color: var(--mz-ink); background: var(--mz-gold); padding: 1px 5px; border-radius: var(--r-pill); pointer-events: none; }
.player-row .first:empty { display: none; }
.player-row .mv { width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: var(--r-2); background: var(--mz-s2); color: var(--mz-cream); font-size: 13px; cursor: pointer; }
.player-row .mv:disabled { opacity: .3; cursor: default; }
#selStarter { min-width: 200px; }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-body); line-height: 1.4; cursor: pointer; padding: var(--sp-2) 0; border-radius: var(--r-1); }
.check input { width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--mz-gold); }
.check input:focus-visible { outline: none; }
#startBtn { width: 100%; margin-top: var(--sp-4); }

/* ------------------------------- leaderboard ------------------------------ */
.lb { width: 100%; border-collapse: collapse; font-size: var(--fs-body); margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
.lb th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--mz-cream-3); text-align: right; padding: 6px; border-bottom: 1px solid var(--mz-line); }
.lb td { text-align: right; padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.lb th:nth-child(2), .lb td:nth-child(2) { text-align: left; }
.lb td:first-child { color: var(--mz-cream-3); font-weight: 800; width: 34px; }
.lb tr.lead td:first-child { color: var(--mz-gold); }
.lb tr.me td { background: rgba(255,207,74,.13); font-weight: 800; }
.lb tr.me td:first-child { box-shadow: inset 3px 0 0 var(--mz-gold); }
.lbEmpty { color: var(--mz-cream-3); font-size: var(--fs-small); padding: var(--sp-2) 0; }
.lbFoot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-3); font-size: var(--fs-tiny); color: var(--mz-cream-3); gap: var(--sp-2); flex-wrap: wrap; }
.tonight { font-size: var(--fs-small); font-weight: 800; color: var(--mz-gold-hi); margin-top: var(--sp-2); }
.tonight:empty { display: none; }

/* ------------------------------- race layout ------------------------------ */
/* Wide screens: board on the left and the turn dock, standings and log on the
   right. Phones held upright: one column, the board sized to what the header
   and the dock leave, and the dock stuck to the bottom of the screen so
   nobody scrolls past the board to roll. Phones on their side: two columns
   again, because height is what they lack. */
#game { display: none; padding: 0 var(--sp-4) var(--sp-5); gap: var(--sp-4); }
#game.on { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; align-items: start; }
#stage { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: var(--sp-2); }
#boardWrap {
  position: relative; height: calc(100vh - var(--hdr-h) - 28px); height: calc(100svh - var(--hdr-h) - 28px);
  min-height: 340px;
  border-radius: var(--r-4); overflow: hidden;
  background: #214a2d;
  box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.08);
}
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
#stage.shake #boardWrap { animation: shakeB .45s ease; }
@keyframes shakeB { 0%, 100% { transform: none; } 20% { transform: translate(-6px,3px); } 40% { transform: translate(5px,-4px); } 60% { transform: translate(-4px,-2px); } 80% { transform: translate(3px,3px); } }
#dock { grid-column: 2; grid-row: 1; }
#sidePanel { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: var(--sp-3); }
#sidePanel .panel { padding: var(--sp-4); }

/* ---------------------------------- dock ---------------------------------- */
#dock {
  --car: var(--mz-cream);
  position: relative;
  background: var(--mz-panel);
  border: 1px solid var(--mz-line); border-radius: var(--r-4);
  box-shadow: var(--sh-2), var(--sh-in);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
/* The driver's colour runs across the top of the dock. */
#dock::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 5px; border-radius: 0 0 6px 6px;
  background: var(--car); box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  transition: background var(--t-mid) var(--ease);
}
#dock.over::before { background: var(--mz-gold); }
.turn-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; }
#turnCar { width: 56px; height: 32px; flex: none; }
#dock.pop #turnCar { animation: carIn var(--t-slow) var(--ease-pop); }
@keyframes carIn { from { transform: translateX(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
.turn-name { flex: 1; min-width: 0; font-size: 19px; font-style: italic; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turn-name b { font-weight: 900; }
.turn-name span { color: var(--mz-cream-2); font-weight: 700; }
/* The final round gets a row of its own across the top of the dock: it is the
   most important thing on the table once a car has finished. */
.final-banner {
  font-size: var(--fs-small); font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
  color: var(--mz-flag); padding: 5px 10px 5px 30px; border-radius: var(--r-2); position: relative;
  background: rgba(255,122,92,.14); box-shadow: inset 0 0 0 1px rgba(255,155,128,.45);
  animation: finalBreathe 1.6s ease-in-out infinite;
}
.final-banner::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 3px;
  background: conic-gradient(#1a1d20 25%, #f4f1e8 0 50%, #1a1d20 0 75%, #f4f1e8 0) 0 0 / 7px 7px;
}
@keyframes finalBreathe { 0%, 100% { background: rgba(255,122,92,.12); } 50% { background: rgba(255,122,92,.26); } }
.phase { min-height: 2.7em; font-size: var(--fs-small); line-height: 1.35; color: var(--mz-cream-2); }
.warn-line { display: block; color: var(--mz-gold-hi); }
.warn-line::before { content: "↺ "; }

/* Dice: raised cubes with the colour's shape. Spent ones sink, dim and carry
   the order they were spent in; ones that can be used right now lift and get
   a cream ring. */
/* Six columns that shrink with the dock but never past what a finger can
   hit: 46px on a phone held upright, about 43px in the side dock of a phone
   on its side. */
.dice { display: grid; grid-template-columns: repeat(6, minmax(0, 46px)); gap: var(--sp-2); min-height: 52px; align-items: center; }
.dice-empty { grid-column: 1 / -1; color: var(--mz-cream-3); font-size: var(--fs-small); }
.die {
  --die: #888;
  position: relative; width: 100%; height: auto; aspect-ratio: 1; padding: 0;
  border: 2px solid rgba(0,0,0,.45); border-radius: 11px;
  background: linear-gradient(155deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.14) 100%), var(--die);
  box-shadow: 0 4px 0 rgba(0,0,0,.42), inset 0 -3px 0 rgba(0,0,0,.14);
  display: grid; place-items: center;
  transition: transform var(--t-mid) var(--ease-pop), opacity var(--t-mid) var(--ease), filter var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.die:disabled { cursor: default; }
.die svg { width: 22px; height: 22px; fill: rgba(255,255,255,.8); filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.die[data-ink="dark"] svg { fill: rgba(21,25,29,.62); filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.die .ord {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--mz-ink); color: var(--mz-cream);
  font-size: 11.5px; font-weight: 900; line-height: 20px; box-shadow: 0 0 0 2px var(--mz-cream);
}
.die .ord:empty { display: none; }
.die.used { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.42); filter: saturate(.35) brightness(.72); opacity: .62; }
.die.live { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,.42), 0 0 0 3px var(--mz-cream), 0 0 14px rgba(255,248,222,.55); }
.die.hot { transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 0 rgba(0,0,0,.42), 0 0 0 4px #fff, 0 0 18px rgba(255,255,255,.8); }
.die.rolling { animation: tumble .14s linear infinite; }
@keyframes tumble { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(14deg) scale(1.08) translateY(-3px); } 50% { transform: rotate(-10deg) scale(.95); } 75% { transform: rotate(7deg) scale(1.05); } 100% { transform: rotate(0); } }
.die.settle { animation: settle .32s var(--ease-pop); }
@keyframes settle { 0% { transform: scale(1.3); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
.die.spend { animation: spend .3s var(--ease); }
@keyframes spend { 0% { transform: translateY(-6px) scale(1.12); } 100% { transform: translateY(3px); } }
.die.selectable { cursor: pointer; outline: 2px dashed var(--mz-cream-2); outline-offset: 3px; }
.die.selected { outline: 3px solid var(--mz-gold); outline-offset: 3px; transform: translateY(-4px) rotate(-6deg); }
.die.selected::after { content: "↻"; position: absolute; bottom: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; background: var(--mz-gold); color: var(--mz-ink); font-weight: 900; font-size: 13px; line-height: 20px; }
.dice.nope { animation: nope .4s var(--ease); }
@keyframes nope { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } }

/* Challenge tiles: the re-roll tile is a button; acceleration tiles show all
   six colours, spent ones as an empty dashed slot. */
.tiles { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tile-row { display: flex; gap: 6px; flex-wrap: wrap; }
.token { display: inline-grid; place-items: center; border-radius: var(--r-1); }
.token.tile {
  --die: #888;
  width: 30px; height: 30px;
  background: var(--die); border: 2px solid rgba(0,0,0,.45); box-shadow: 0 2px 0 rgba(0,0,0,.35);
  transition: transform var(--t-mid) var(--ease-pop), opacity var(--t-mid) var(--ease);
}
.token.tile svg { width: 16px; height: 16px; fill: #fff; }
.token.tile[data-ink="dark"] svg { fill: var(--mz-ink); }
.token.tile.spent { background: transparent; border: 2px dashed rgba(246,239,220,.28); box-shadow: none; }
.token.tile.spent svg { fill: rgba(246,239,220,.22); }
.token.tile.live { transform: translateY(-2px); box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 0 3px var(--mz-cream); }
.token.reroll {
  gap: 6px; grid-auto-flow: column; height: 36px; padding: 0 12px 0 9px; min-width: var(--tap);
  border: 1px solid var(--mz-line); background: var(--mz-s3); color: var(--mz-cream);
  font-weight: 800; font-size: 13px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.34);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.token.reroll svg { width: 18px; height: 18px; }
.token.reroll:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.token.reroll:disabled { opacity: .5; cursor: default; }
.token.reroll.on { background: var(--mz-gold); color: var(--mz-ink); border-color: var(--mz-gold); }
.token.reroll.spent { opacity: .38; text-decoration: line-through; box-shadow: none; }

/* The row of things to do. Moves carry the colour of their space as a swatch,
   never as the button's background (see the contrast note at the top). */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-height: 50px; }
.moves { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.moves:empty { display: none; }
.buttons { display: flex; gap: var(--sp-2); flex: 1 1 auto; justify-content: flex-end; }
.buttons .btn.wide { flex: 1; }
.btn.move { padding: 8px 10px 8px 8px; gap: 7px; }
.btn.move .sw {
  width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: var(--die); border: 2px solid rgba(0,0,0,.45);
}
.btn.move .sw svg { width: 14px; height: 14px; fill: rgba(255,255,255,.85); }
.btn.move[data-ink="dark"] .sw svg { fill: rgba(21,25,29,.7); }
.btn.move.k-bonus { box-shadow: var(--lip) var(--sh), inset 0 0 0 2px var(--mz-cream); background-image: none; outline: 2px dashed rgba(246,239,220,.6); outline-offset: -5px; }
.btn.move kbd { font: 800 10.5px var(--font); color: var(--mz-cream-3); border: 1px solid var(--mz-line); border-radius: 5px; padding: 1px 5px; }
.btn.move .short { display: none; }
.keys { font-size: var(--fs-tiny); color: var(--mz-cream-3); }
@media (hover: none) { .keys, .btn.move kbd { display: none; } }

/* ------------------------------- standings -------------------------------- */
.st-row { --car: #888; display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); border-radius: var(--r-2); }
.st-row.cur { background: var(--mz-s2); box-shadow: inset 3px 0 0 var(--mz-cream); }
.st-row .chip {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--car); border: 2px solid var(--mz-ink); box-shadow: 0 0 0 2px rgba(246,239,220,.5);
}
.st-row .chip i { font-style: normal; font-weight: 900; font-size: 11px; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: #fff; color: var(--mz-ink); }
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row.cur .st-name { font-weight: 900; }
.st-bar { height: 6px; border-radius: var(--r-pill); background: rgba(0,0,0,.4); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--car); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3); transition: width var(--t-slow) var(--ease); }
.st-row.fin .st-bar i { background: repeating-linear-gradient(90deg, #f4f1e8 0 6px, #1a1d20 6px 12px); }
.st-where { font-size: var(--fs-tiny); color: var(--mz-cream-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-row.fin .st-where { color: var(--mz-gold-hi); font-weight: 800; }
.tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--mz-flag); border: 1px solid rgba(255,155,128,.5); border-radius: var(--r-pill); padding: 0 6px; vertical-align: 1px; }
.tag.now { color: var(--mz-ink); background: var(--mz-cream); border-color: var(--mz-cream); }

#log { max-height: 180px; overflow-y: auto; font-size: 12.5px; line-height: 1.5; color: var(--mz-cream-2); }
#log div { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
#log div:first-child { color: var(--mz-cream); animation: logIn .3s var(--ease); }
@keyframes logIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; } }

/* --------------------------------- rules ---------------------------------- */
details.rules { max-width: 900px; margin: 0 auto var(--sp-6); padding: 0 var(--sp-5); color: var(--mz-cream-2); font-size: var(--fs-small); }
details.rules summary { cursor: pointer; font-weight: 800; color: var(--mz-gold); min-height: var(--tap); display: flex; align-items: center; border-radius: var(--r-1); }
details.rules ul { line-height: 1.6; padding-left: 20px; }
details.rules .legend { line-height: 1.6; }

/* ------------------------------- start lights ----------------------------- */
#lights {
  display: none; position: fixed; inset: 0; z-index: 70;
  background: radial-gradient(ellipse at 50% 40%, rgba(12,26,17,.8), rgba(4,9,6,.94));
  align-items: center; justify-content: center; flex-direction: column; gap: var(--sp-5); cursor: pointer;
}
#lights.on { display: flex; animation: fadeIn var(--t-mid) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.gantry { position: relative; padding: 18px 26px; border-radius: var(--r-3); background: linear-gradient(180deg, #23282d, #15191d); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.08); }
.gantry::before, .gantry::after { content: ""; position: absolute; top: 100%; width: 10px; height: 60px; background: linear-gradient(90deg, #2a3035, #1a1e22); }
.gantry::before { left: 26px; } .gantry::after { right: 26px; }
#lightRow { display: flex; gap: clamp(10px, 3vw, 18px); }
.light { width: clamp(38px, 11vw, 54px); height: clamp(38px, 11vw, 54px); border-radius: 50%; background: #3a1114; box-shadow: inset 0 4px 10px rgba(0,0,0,.75), 0 0 0 3px #0c0e10; transition: background .1s, box-shadow .1s; }
.light.on { background: radial-gradient(circle at 40% 35%, #ffb3a6, #ff2e2e 45%, #b3121a); box-shadow: 0 0 28px 8px rgba(255,46,46,.6), 0 0 0 3px #0c0e10; }
#lightsMsg { margin-top: 40px; color: var(--mz-cream); font-size: 17px; font-weight: 900; font-style: italic; letter-spacing: 3px; }
#lightsSkip { color: var(--mz-cream-3); font-size: var(--fs-small); margin-top: calc(-1 * var(--sp-3)); }

/* -------------------------------- results --------------------------------- */
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }
#overlay {
  display: none; position: fixed; inset: 0; z-index: 90;
  background: rgba(5,12,8,.78);
  align-items: center; justify-content: center;
  padding: max(var(--sp-3), env(safe-area-inset-top)) var(--sp-3) max(var(--sp-3), env(safe-area-inset-bottom));
}
#overlay.on { display: flex; animation: fadeIn var(--t-mid) var(--ease); }
#overlayCard {
  width: min(500px, 100%); max-height: 100%; overflow-y: auto;
  background: linear-gradient(180deg, rgba(255,207,74,.12), rgba(255,207,74,0) 40%), #13271b;
  border: 1px solid rgba(255,207,74,.35); border-radius: var(--r-4);
  box-shadow: var(--sh-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-5); text-align: center;
  animation: sheetIn var(--t-slow) var(--ease-pop) both;
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
#podium { width: 100%; max-width: 360px; aspect-ratio: 360 / 170; height: auto; display: block; margin: 0 auto; }
#overlayCard h2 { margin: var(--sp-2) 0 var(--sp-1); font-size: 23px; color: var(--mz-gold-hi); }
#overlayCard .detail { color: var(--mz-cream-2); font-size: var(--fs-body); margin-bottom: var(--sp-4); white-space: pre-line; line-height: 1.5; }
#overlayCard .btns { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin: var(--sp-1) 0 var(--sp-3); }
#overlayCard .btns .btn { flex: 1 1 160px; font-size: 16px; }
#overlayCard .tonight { margin: 0 0 var(--sp-3); }
#overlayCard .lbWrap { text-align: left; border-top: 1px solid var(--mz-line); padding-top: var(--sp-3); }

#installOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: none; align-items: center; justify-content: center; z-index: 60; padding: var(--sp-5); }
#installOverlay.on { display: flex; }
.sheet { max-width: 400px; width: 100%; background: var(--mz-cream); color: var(--mz-ink); border-radius: var(--r-4); padding: var(--sp-5); box-shadow: var(--sh-3); animation: sheetIn var(--t-mid) var(--ease-pop) both; }
.sheet h3 { font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--mz-ink); }
.sheet ol { line-height: 1.7; margin: var(--sp-3) 0 var(--sp-4); padding-left: 22px; font-size: var(--fs-body); }

/* ------------------------------- responsive ------------------------------- */
/* Phones and tablets held upright: one column, dock stuck to the bottom. */
@media (max-width: 899px) {
  .topbar .sub { display: none; }
  .brand { flex: 1; }
  #game { padding: 0 var(--sp-2) var(--sp-4); gap: var(--sp-3); }
  #game.on { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  #stage, #dock, #sidePanel { grid-column: 1; grid-row: auto; }
  #stage { position: static; }
  #boardWrap {
    height: calc(100vh - var(--hdr-h) - var(--dock-h) - 20px);
    height: calc(100svh - var(--hdr-h) - var(--dock-h) - 20px);
    min-height: 250px; border-radius: var(--r-3);
  }
  #dock {
    position: sticky; bottom: 0; z-index: 5;
    margin: 0 calc(-1 * var(--sp-2));
    border-radius: var(--r-4) var(--r-4) 0 0; border-bottom: 0;
    padding: var(--sp-3) max(var(--sp-3), env(safe-area-inset-right)) calc(var(--sp-3) + env(safe-area-inset-bottom)) max(var(--sp-3), env(safe-area-inset-left));
    box-shadow: 0 -10px 30px rgba(0,0,0,.5), var(--sh-in);
    background: rgba(16,33,23,.97);
  }
  .keys { display: none; }
}
@media (max-width: 560px) {
  .topbar { padding-left: max(var(--sp-3), env(safe-area-inset-left)); padding-right: max(var(--sp-3), env(safe-area-inset-right)); gap: var(--sp-2); }
  .topbar .sub { display: none; }
  .brand { flex: 1; }
  :root { --fs-logo: 24px; }
  .icon-btn .lbl { display: none; }
  .panel { padding: var(--sp-4); }
  #setupScreen { padding: 0 var(--sp-3) var(--sp-5); gap: var(--sp-3); }
  .field { margin: var(--sp-4) 0; }
  .seg button { flex: 1 1 auto; padding: 8px 10px; }
  .dice { gap: 7px; }
  .btn { padding: 10px 12px; }
  #undoBtn .lbl { display: none; }
  .phase { min-height: 2.7em; }
  .turn-name { font-size: 17px; }
}
@media (max-width: 400px) {
  .btn.move .long { display: none; }
  .btn.move .short { display: inline; }
  .dice { gap: 6px; }
  .token.tile { width: 26px; height: 26px; }
}
/* Phones on their side: height is the scarce thing. Two columns, a slim
   header, and the decoration gives up its room first. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --fs-logo: 22px; }
  .topbar { padding-top: calc(var(--sp-1) + env(safe-area-inset-top)); padding-bottom: var(--sp-1); }
  .topbar .sub { display: none; }
  .brand-flag { width: 24px; height: 24px; }
  .hero { display: none; }
  #game { padding: 0 max(var(--sp-2), env(safe-area-inset-right)) var(--sp-3) max(var(--sp-2), env(safe-area-inset-left)); gap: var(--sp-2); }
  #game.on { grid-template-columns: minmax(0, 1fr) minmax(300px, 38vw); grid-template-rows: auto 1fr; }
  #stage { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: var(--sp-1); }
  #dock, #sidePanel { grid-column: 2; }
  #dock { grid-row: 1; position: relative; margin: 0; border-radius: var(--r-3); border-bottom: 1px solid var(--mz-line); padding: var(--sp-2) var(--sp-3) var(--sp-3); gap: 6px; }
  #sidePanel { grid-row: 2; }
  #boardWrap { height: calc(100vh - var(--hdr-h) - 14px); height: calc(100svh - var(--hdr-h) - 14px); min-height: 220px; border-radius: var(--r-3); }
  .phase { min-height: 0; }
  .dice { gap: 5px; min-height: 46px; }
  .keys { display: none; }
  .btn.move .long { display: none; }
  .btn.move .short { display: inline; }
}
/* Big screens: a touch more air in the dock. */
@media (min-width: 1200px) {
  #game.on { grid-template-columns: minmax(0, 1fr) 370px; }
}

/* ---------------------------- reduced motion ------------------------------ */
/* Everything on the canvas is gated on Art.motion in js/art.js; this is the
   same promise for the DOM, both for the system setting and for the one
   switch (Art.setMotion) that adds body.reduced-motion. Focus rings and colour
   changes stay: they are information, not decoration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}