/* Smartsbook. A sportsbook after dark: green baize, a tote board in gold, and the
   racing colours on the saddle cloths. */

:root {
  --paper: #eef2ec;
  --surface: #ffffff;
  --ink: #13211a;
  --ink-soft: #56685d;
  --rule: #d0dad2;
  --accent: #e9b52f;
  --on-accent: #1d1603;
  --accent-ink: #8a6200;
  --good: #1d8a50;
  --close: #a87400;
  --bad: #c2412f;
  --turf: #2f7d4f;
  --turf-2: #358a58;
  --rail: #f4f1ea;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

/* Dark: the default, set by data-theme="dark" on <html>. Without it, follows the device. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1712;
    --surface: #13211a;
    --ink: #ecf1ea;
    --ink-soft: #9db0a3;
    --rule: #26392f;
    --accent: #f0c040;
    --on-accent: #1d1603;
    --accent-ink: #f0c040;
    --good: #6ad39b;
    --close: #f0c040;
    --bad: #ff8a75;
    --turf: #164a2f;
    --turf-2: #1a5636;
    --rail: #d9d4c7;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0c1712;
  --surface: #13211a;
  --ink: #ecf1ea;
  --ink-soft: #9db0a3;
  --rule: #26392f;
  --accent: #f0c040;
  --on-accent: #1d1603;
  --accent-ink: #f0c040;
  --good: #6ad39b;
  --close: #f0c040;
  --bad: #ff8a75;
  --turf: #164a2f;
  --turf-2: #1a5636;
  --rail: #d9d4c7;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* Jockey silks: Smartsbook's edge, under the Goldfish Water Cooler bar. A gold and green check. */
.edge {
  display: block;
  height: 8px;
  background: repeating-conic-gradient(#f0c040 0 25%, #1f6f4a 0 50%) 0 0 / 8px 8px;
}

/* --- Header ---------------------------------------------------------------- */

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px clamp(16px, 3vw, 28px);
  height: 64px;
}
.wordmark {
  margin: 0;
  font-size: 27px;
  font-weight: 850;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  letter-spacing: -0.015em;
  line-height: 1;
}
.wordmark span { color: var(--accent-ink); }
.edition {
  margin: 0 0 0 6px;
  flex: 1;
  color: var(--ink-soft);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
  font-size: 17px;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--ink); }
/* A red dot on What's new until you've opened the latest entry. */
.unread-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 0 2px var(--paper);
}

/* --- The two games ------------------------------------------------------------ */

.modes {
  display: flex;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 14px;
}
.mode {
  display: grid;
  gap: 1px;
  flex: 1;
  max-width: 220px;
  padding: 8px 16px 9px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.mode:hover { border-color: var(--ink-soft); }
.mode[aria-current="page"] { border-color: var(--ink); background: var(--surface); }
.mode-name { font-weight: 750; font-stretch: 112%; font-variation-settings: 'wdth' 112; font-size: 16px; line-height: 1.2; }
.mode-sub { font-size: 13px; color: var(--ink-soft); }
.mode.is-done .mode-sub { color: var(--good); }

.stage { max-width: 720px; margin: 0 auto; padding: 0 16px; }

.panel {
  padding: 20px clamp(16px, 4vw, 26px) 22px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
}
.race-no {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.race-q {
  margin: 4px 0 14px;
  font-size: 23px;
  font-weight: 800;
  font-stretch: 112%;
  font-variation-settings: 'wdth' 112;
  line-height: 1.2;
}

/* --- Trivifecta: the board ------------------------------------------------------- */

.board-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); }
.board-chips { flex: none; white-space: nowrap; }
.board-cap b { color: var(--ink); font-variant-numeric: tabular-nums; }
.board, .finish, .slip, .sum-rows, .lines, .crowd { list-style: none; margin: 0; padding: 0; }
.board { display: grid; gap: 6px; }
.runner, .finish li, .sum-rows li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px 8px 10px;
  border-radius: 10px;
  background: var(--paper);
  text-align: left;
}
.runner { border: 1.5px solid transparent; cursor: pointer; }
.runner:hover { border-color: var(--ink-soft); }
.runner.is-picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.cloth {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--cloth);
  color: var(--cloth-ink);
  font-weight: 850;
  font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.35);
}
.who { display: grid; min-width: 0; }
.who b { font-weight: 700; line-height: 1.25; }
.who small { font-size: 13px; color: var(--ink-soft); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark { min-width: 0; font-size: 12px; font-weight: 800; color: var(--on-accent); }
.mark:not(:empty) { padding: 2px 7px; border-radius: 999px; background: var(--accent); }
/* The odds, in the narrow cut of Archivo, like a tote board. */
.odds {
  min-width: 52px;
  text-align: right;
  font-weight: 800;
  font-size: 19px;
  font-stretch: 75%;
  font-variation-settings: 'wdth' 75;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

.builder { margin-top: 16px; }
.bet-types, .stake { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  padding: 7px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pill:hover:not(:disabled) { border-color: var(--ink-soft); }
.pill[aria-checked="true"], .pill.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.pill:disabled { opacity: 0.4; cursor: default; }
.bet-about { margin: 8px 0 12px; font-size: 14px; color: var(--ink-soft); }

.btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 750;
  font-stretch: 112%;
  font-variation-settings: 'wdth' 112;
  font-size: 17px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
.btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.note { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.note:empty { display: none; }

.slip-title { margin: 18px 0 6px; font-size: 15px; font-weight: 750; }
.slip li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.slip li:first-child { border-top: 0; }
.slip li > span:first-child { flex: 1; min-width: 0; }
.slip-amt { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.slip-x { width: 28px; height: 28px; flex: none; border: 1.5px solid var(--rule); border-radius: 50%; background: transparent; line-height: 1; cursor: pointer; }
.slip-x:hover { border-color: var(--ink); }
.settled { margin-top: 12px; }
.settled .is-won .slip-amt { color: var(--good); font-weight: 750; }
.settled .is-lost { color: var(--ink-soft); }
.settled .is-lost .slip-amt { color: var(--bad); }

/* --- Trivifecta: the race -------------------------------------------------------------- */

.track {
  position: relative;
  display: grid;
  margin: 4px 0 14px;
  padding: 4px 0;
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, var(--turf) 0 28px, var(--turf-2) 28px 56px);
  overflow: hidden;
}
.lane { position: relative; height: 48px; border-bottom: 1px dashed rgba(255, 255, 255, 0.18); }
.lane:last-of-type { border-bottom: 0; }
/* A pony, 60 by 42 (js/pony.js), carried from the start to its nose on the post. */
.horse {
  position: absolute;
  top: 3px;
  left: calc(8px + var(--at) * (100% - 164px));
  line-height: 0;
  will-change: left;
}
.pony { display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.28)); }
/* The gallop: legs out ("a"), then gathered under with a little lift ("b"); standing ("s") at the gate and once home. */
.pony .legs-a, .pony .legs-b { display: none; }
.horse[data-gait="a"] .legs-s, .horse[data-gait="b"] .legs-s { display: none; }
.horse[data-gait="a"] .legs-a, .horse[data-gait="b"] .legs-b { display: inline; }
.horse[data-gait="b"] .pony { transform: translateY(-2px); }
/* The finishing post, and where each runner's place and number appear once home. */
.post { position: absolute; top: 0; bottom: 0; right: 96px; width: 4px; background: repeating-linear-gradient(180deg, var(--rail) 0 6px, #d7263d 6px 12px); }
.lane-end {
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  width: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  color: #fff;
  font-size: 12px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lane-end .place-no { font-size: 13px; }
.lane-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.finish { display: grid; gap: 6px; }
.finish li { grid-template-columns: 30px minmax(0, 1fr) auto; }
.finish li:first-child { box-shadow: inset 0 0 0 1.5px var(--accent); }
.bookie { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--paper); font-size: 15px; }
.race-net { margin: 12px 0 0; }
.race-net b { font-variant-numeric: tabular-nums; }

.tote { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.tote div { padding: 8px 10px; border-radius: 10px; background: var(--paper); }
.tote dt { font-size: 12px; color: var(--ink-soft); }
.tote dd { margin: 2px 0 0; font-size: 21px; font-weight: 800; font-stretch: 88%; font-variation-settings: 'wdth' 88; font-variant-numeric: tabular-nums; }
.sum-rows { display: grid; gap: 6px; }
.sum-rows li { grid-template-columns: 22px minmax(0, 1fr) auto; }
.sum-emoji { font-size: 18px; line-height: 1; }
.sum-rows .who small { white-space: normal; }

/* --- The Line ---------------------------------------------------------------------------------- */

.lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.line-card { padding: 12px 14px 14px; border-radius: 10px; background: var(--paper); }
.line-card.is-picked { box-shadow: inset 0 0 0 1.5px var(--accent); }
.line-card.is-right { box-shadow: inset 0 0 0 2px var(--good); }
.line-card.is-wrong { box-shadow: inset 0 0 0 2px var(--bad); }
.line-what { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.line-name { margin: 2px 0 0; font-size: 17px; font-weight: 750; line-height: 1.25; }
.line-desc { margin: 1px 0 0; font-size: 13px; color: var(--ink-soft); }
.line-num {
  margin: 8px 0 10px;
  font-size: 28px;
  font-weight: 850;
  font-stretch: 80%;
  font-variation-settings: 'wdth' 80;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent-ink);
}
.line-num span { font-size: 14px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.04em; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.side {
  padding: 9px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 10px;
  background: transparent;
  font-weight: 750;
  font-stretch: 112%;
  font-variation-settings: 'wdth' 112;
  cursor: pointer;
}
.side:hover:not(:disabled) { border-color: var(--ink); }
.side.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.side:disabled { cursor: default; }
.side:disabled:not(.is-on) { opacity: 0.45; }
.line-bet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--surface);
  font-size: 18px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}
.stepper button:hover:not(:disabled) { border-color: var(--ink); }
.stepper button:disabled { opacity: 0.4; cursor: default; }
.stepper output { min-width: 74px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.leg {
  padding: 6px 12px;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.leg.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.answer { margin: 10px 0 0; font-size: 15px; }
.line-money { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.is-right .line-money b { color: var(--good); }
.is-wrong .line-money b { color: var(--bad); }
.leg-tag { white-space: nowrap; }

.slip-box { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--rule); }
.slip-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; margin: 0; font-size: 15px; }
.slip-line b { font-variant-numeric: tabular-nums; }
.slip-line small { font-size: 13px; color: var(--ink-soft); text-align: right; }

/* --- After a game -------------------------------------------------------------------------- */

.share-text {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  white-space: pre-wrap;
  user-select: all;
}
.next { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); text-align: center; }
/* Another Goldfish Water Cooler game, offered once both of the day's games are done. */
.xpromo {
  display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px;
  border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper);
  color: var(--ink); text-decoration: none; text-align: left;
}
.xpromo:hover { border-color: var(--ink-soft); }
.xpromo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xpromo img { flex: none; width: 88px; height: 88px; border-radius: 6px; }
.xpromo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xpromo-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.xpromo-name { font-size: 20px; font-weight: 800; font-stretch: 112%; font-variation-settings: 'wdth' 112; line-height: 1.15; }
.xpromo-about { font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.xpromo-go { font-size: 15px; font-weight: 750; color: var(--accent-ink); margin-top: 2px; }
.xpromo:hover .xpromo-go, .xpromo:focus-visible .xpromo-go { text-decoration: underline; text-underline-offset: 3px; }

/* --- Dialogs ----------------------------------------------------------------------------- */

dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 26px 26px 22px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
}
dialog::backdrop { background: rgba(6, 12, 9, 0.6); }
dialog h2 { margin: 0 0 12px; font-size: 24px; font-weight: 800; font-stretch: 112%; font-variation-settings: 'wdth' 112; }
dialog h3 { margin: 20px 0 6px; font-size: 16px; font-weight: 750; }
dialog h4 { margin: 18px 0 4px; font-size: 14px; font-weight: 750; }
dialog p, dialog li { font-size: 15px; }
dialog ul { padding-left: 1.1em; margin: 6px 0; }
dialog li { margin: 6px 0; }
dialog .small { font-size: 13px; color: var(--ink-soft); }
dialog.news { width: min(540px, calc(100vw - 32px)); }
.close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.close:hover { background: var(--paper); }

/* How everyone did: a chart for each game. */
dialog.everyone { width: min(560px, calc(100vw - 32px)); }
.ev-section + .ev-section { border-top: 1px solid var(--rule); margin-top: 18px; padding-top: 4px; }
.ev-section h3 { margin-top: 14px; }
.ev-quiet { color: var(--ink-soft); }
.ev-head b { font-variant-numeric: tabular-nums; }
.ev-teaser { margin: 0 0 4px; font-weight: 650; }
.ev-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.ev-figures div { padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; }
.ev-figures dt { font-size: 12px; color: var(--ink-soft); }
.ev-figures dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ev-figures dd small { font-size: 13px; font-weight: 700; }
.ev-chart { position: relative; margin: 16px 0 6px; }
.ev-plot {
  position: relative;
  display: grid;
  column-gap: 2px;
  height: 156px;
  padding-top: 40px;
  border-bottom: 1px solid var(--ink-soft);
}
.ev-slot { position: relative; display: flex; align-items: flex-end; justify-content: center; border-radius: 3px; }
.ev-slot.is-even { box-shadow: inset 1px 0 0 var(--ink-soft); }
.ev-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ev-col { display: block; width: 100%; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.ev-slot:hover .ev-col, .ev-slot:focus-visible .ev-col { background: var(--ink-soft); }
.ev-slot.mine .ev-col { background: var(--accent); }
.ev-you { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: var(--ink); white-space: nowrap; pointer-events: none; }
.ev-you.start { left: 0; transform: none; }
.ev-you.end { left: auto; right: 0; transform: none; }
.ev-start { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--ink); opacity: 0.6; pointer-events: none; }
.ev-start span { position: absolute; right: 0; bottom: 2px; font-size: 11px; font-weight: 650; }
.ev-axis { position: relative; height: 20px; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ev-label { position: absolute; top: 5px; transform: translateX(-50%); white-space: nowrap; }
.ev-label.first { transform: none; }
.ev-label.last { transform: translateX(-100%); }
.ev-chart figcaption { font-size: 12px; color: var(--ink-soft); }
.ev-tip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -100%);
  display: grid;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.ev-tip b { font-size: 14px; }
.ev-tip span { color: var(--ink-soft); }
.crowd-title { margin-top: 14px; }
.crowd li { margin: 6px 0; font-size: 14px; }
.ev-chart.is-own { margin: 14px 0 4px; }
.ev-chart.is-own .ev-plot { height: 104px; padding-top: 20px; }

.changes { list-style: none; margin: 0; padding: 0; }
.changes > li { border-top: 1px solid var(--rule); padding: 14px 0 4px; margin: 0; }
.changes > li:first-child { border-top: 0; padding-top: 2px; }
.changes h3 { margin: 2px 0 6px; }
.changes ul { color: var(--ink-soft); }
.change-date { margin: 0; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
/* Labels that wrap ("Best streak" on a phone) push their own figure down, so each
   figure sits at the bottom and they stay in a line. */
.figures div { display: flex; flex-direction: column; justify-content: flex-end; }
.figures dt { font-size: 12px; color: var(--ink-soft); line-height: 1.25; }
.figures dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }

.colophon { max-width: 720px; margin: 14px auto 22px; padding: 0 22px; font-size: 13px; color: var(--ink-soft); }
.colophon p { margin: 0; }
.colophon a { color: var(--ink); text-underline-offset: 3px; }

/* --- Phones and narrow windows ------------------------------------------------------------- */

@media (max-width: 860px) {
  .bar { height: 56px; }
  .wordmark { font-size: 23px; }
}
@media (max-width: 480px) {
  .race-q { font-size: 20px; }
  .runner, .finish li { gap: 8px; padding: 7px 10px 7px 8px; }
  .odds { min-width: 44px; font-size: 17px; }
  .post { right: 84px; }
  .lane-end { width: 72px; font-size: 11px; }
  .horse { left: calc(6px + var(--at) * (100% - 150px)); }
}
@media (max-width: 380px) {
  .edition { display: none; }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tote dd { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Goldfish Water Cooler bar ----------------------------------------------
   Copied unchanged from goldfishwatercooler.com's brand/gwc-bar.css. */

/* Goldfish Water Cooler: the bar every game wears at the very top.
   Copy this file into a game unchanged and paste gwc-bar.html as the first
   thing in <body>. It brings its own colors, so it looks the same in every game
   whatever the game's palette. It uses Gabarito and Archivo (see README.md) and
   falls back to system fonts without them. */

.gwc-bar {
  --gwc-water: #072b3d;
  --gwc-ink: #cfe6ef;
  --gwc-fish: #f26a1b;
  --gwc-fish-light: #ff9a4d;
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 36px;
  padding: 0 clamp(14px, 3vw, 28px);
  background: var(--gwc-water);
  color: var(--gwc-ink);
  font: 600 13px/1 "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

.gwc-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.gwc-bar .gwc-fish {
  width: 26px;
  height: 16px;
  margin-right: 2px;
  flex: none;
}

/* The hub's own wordmark: lowercase Gabarito. */
.gwc-bar .gwc-name {
  font: 800 15px/1 "Gabarito", "Archivo", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
}

.gwc-bar .gwc-more {
  color: var(--gwc-fish-light);
  font-weight: 750;
}

.gwc-bar .gwc-short {
  display: none;
}

.gwc-bar a:hover .gwc-name,
.gwc-bar .gwc-more:hover {
  text-decoration: underline;
  text-decoration-color: var(--gwc-fish);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.gwc-bar a:focus-visible {
  outline: 2px solid var(--gwc-fish-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On a phone: the fish, the name, and "More games". */
@media (max-width: 480px) {
  .gwc-bar .gwc-long {
    display: none;
  }

  .gwc-bar .gwc-short {
    display: inline;
  }
}

@media print {
  .gwc-bar {
    display: none;
  }
}