@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/fraunces-latin-400-800.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/fraunces-italic-latin-400-800.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-400-700.woff2") format("woff2");
}

:root {
  --identity-ground: #121b10;
  --gloss-sheen: #324438;
  --gloss-upper: #17291f;
  --gloss-low: #101b14;
  --gloss-edge: #19291f;
  --identity-gloss: linear-gradient(160deg, var(--gloss-sheen) 0%, var(--gloss-upper) 24%, var(--gloss-low) 56%, var(--gloss-edge) 100%);
  --identity-cream: #f3ead8;
  --identity-gold: #b49a5c;
  --identity-accent: var(--identity-gold);
  --identity-warm: var(--identity-gold);
  --status-danger: #e18b82;
  --status-success: #9dc9ac;
  --color-bg: var(--identity-ground);
  --color-red: var(--status-danger);
  --color-green: var(--status-success);
  --color-text: var(--identity-cream);
  --color-dim: color-mix(in srgb, var(--identity-cream) 42%, transparent);
  --color-dark: color-mix(in srgb, var(--identity-cream) 18%, transparent);
  --color-panel: color-mix(in srgb, var(--identity-ground) 94%, var(--identity-cream));
  --color-panel-raised: color-mix(in srgb, var(--identity-ground) 90%, var(--identity-cream));
  --color-track: color-mix(in srgb, var(--identity-cream) 14%, transparent);
  --color-soft-text: color-mix(in srgb, var(--identity-cream) 64%, transparent);
  --color-focus: var(--identity-gold);
  --coat-bay: #783b29;
  --coat-dark-bay: #3e2725;
  --coat-chestnut: #ae4f26;
  --coat-liver-chestnut: #5c2830;
  --coat-black: #171b1e;
  --coat-grey: #929792;
  --coat-dapple-grey: #c8cbc4;
  --coat-roan: #a96f66;
  --coat-palomino: #d5aa58;
  --coat-buckskin: #af8a50;
  --coat-white: #ece9df;
  --coat-dark-points: #241d1a;
  --coat-black-points: #111518;
  --coat-chestnut-mane: #73321f;
  --coat-liver-mane: #351b22;
  --coat-grey-mane: #555b59;
  --coat-cream-mane: #efe0b1;
  --coat-dapple-mark: #707672;
  --coat-roan-points: #70423d;
  --coat-roan-mark: #d7b0a7;
  --coat-mane: #1d1714;
  --silk-black: #111820;
  --silk-white: #f4f1e8;
  --silk-red: #e61938;
  --silk-yellow: #ffd400;
  --silk-green: #008b45;
  --silk-cyan: #00b7c7;
  --silk-blue: #2057d4;
  --silk-purple: #7d2dbb;
  --pattern-contrast-dark: #0a0a0a;
  --pattern-contrast-light: #f4f1e8;
  --scene-sky: #67aee5;
  --scene-sky-horizon: #cfe9f5;
  --scene-sun: #fff0c7;
  --scene-ground: #365f2f;
  --scene-cloud: #f5f5ef;
  --scene-turf: #589643;
  --scene-turf-dark: #315f31;
  --scene-turf-stripe: #4f893b;
  --scene-dirt: #b48558;
  --scene-dirt-inside: #936642;
  --scene-dirt-light: #c99a69;
  --scene-track-firm: #b48558;
  --scene-track-good: #b48558;
  --scene-track-soft: #765541;
  --scene-track-muddy: #614537;
  /* Per-going base tones. Runtime procedural maps add the broad running wear,
     roughness and divots; these variables keep every authored colour themeable.
     The infield stays green except in mud, where the whole course churns out.
       firm  = dry compacted brown with pale dust
       good  = honest tan with light wear
       soft  = dark damp brown with displaced clods
       muddy = dark wet brown with sheen and heavy divots */
  --going-firm-turf: #589643;
  --going-firm-track: #b48558;
  --going-good-turf: #589643;
  --going-good-track: #b48558;
  --going-soft-turf: #3b5c38;
  --going-soft-track: #765541;
  --going-muddy-turf: #385137;
  --going-muddy-track: #614537;
  --scene-rail: #f3f2ea;
  --scene-rail-top: #e9dfc0;
  --scene-rail-post: #1e6b3d;
  --scene-hedge: #35753b;
  --scene-treeline: #2f6d37;
  --scene-treeline-light: #4a8642;
  --scene-tower: #d8dcdb;
  --scene-stand: #e8dfc5;
  --scene-tote: #183d28;
  --scene-concrete: #a8ada9;
  --scene-crowd-light: #f0c779;
  --scene-crowd-dark: #3e5b50;
  --scene-furniture: #a94b2e;
  --scene-gate: #28543a;
  --scene-dust: #c19162;
  --scene-mud-spray: #332017;
  --scene-skin: #b77b5a;
  --scene-leather: #2c1e18;
  --scene-shadow: #171b18;
  --scene-warm-light: #ffe0b4;
  --weather-clear-sky: #67aee5;
  --weather-clear-horizon: #d9edf7;
  --weather-clear-sun: #fff0c7;
  --weather-overcast-sky: #8999a7;
  --weather-overcast-horizon: #b9bec0;
  --weather-overcast-sun: #e5e0d2;
  --weather-dusk-sky: #75647f;
  --weather-dusk-horizon: #d49b79;
  --weather-dusk-sun: #ffc27a;
  --doc-plate: var(--identity-ground);
  --doc-panel: var(--color-panel);
  --doc-band: color-mix(in srgb, var(--identity-ground) 90%, transparent);
  --doc-green: var(--identity-gold);
  --doc-green-bright: var(--identity-gold);
  --doc-line: var(--card-rule-strong);
  --doc-gold: var(--identity-gold);
  --doc-magenta: var(--identity-gold);
  --doc-record: var(--identity-gold);
  --doc-white: var(--identity-cream);
  --yard-panel: #17140be8;
  --yard-panel-edge: #ddb924;
  --yard-bar-track: #19344b;
  --yard-bar-fill: #41b9d8;
  --yard-purple: #41278fd9;
  --yard-purple-edge: #8266df;
  --yard-heart: #f02038;
  --training-pool: #297fbb;
  --training-wood: #a77543;
  --training-verdict: #e99616;
  /* Derby 3.0 racecard language (2026-09-08). The printed racecourse
     programme is the frame: a solid heading band, hairline rules between
     runners, the saddle-cloth patch carrying the runner's colours, names in
     a human display face, figures in tabular numerals. No panel boxes.
       night = the page ground        turf = the raised surface, never grey
       band  = solid behind a heading rail = the running rail: rules and text
       chalk = tote-board secondary   flood = floodlight, live state only */
  --card-night: var(--color-bg);
  --card-turf: var(--color-panel);
  --card-band: var(--color-panel-raised);
  --card-rail: var(--identity-cream);
  --card-rail-lit: color-mix(in srgb, var(--identity-cream) 88%, var(--identity-gold));
  --card-chalk: color-mix(in srgb, var(--identity-cream) 64%, transparent);
  --card-flood: var(--identity-gold);
  --card-rule: color-mix(in srgb, var(--identity-gold) 22%, transparent);
  --card-rule-strong: color-mix(in srgb, var(--identity-gold) 46%, transparent);
  --owner-control-wash: var(--identity-gloss);
  --card-overlay: var(--identity-gloss);
  --card-pattern-wash: color-mix(in srgb, var(--identity-ground) 94%, transparent);
  /* Horse identity patches retain the member's silks; interface accents use gold. */
  --card-silk: var(--silk-red);
  --card-silk-ink: var(--silk-white);

  --font-ui: "Source Sans 3", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-data: "Source Sans 3", system-ui, sans-serif;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-bg);
  color-scheme: dark;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.launch-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.launch-options label {
  display: grid;
  gap: 6px;
  color: var(--color-soft-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.launch-options select {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  background: var(--color-panel-raised);
  color: var(--color-text);
  font: 600 15px var(--font-ui);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--color-text);
  font-family: var(--font-display);
  line-height: 1.1;
}

h1 {
  margin-bottom: 8px;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: -0.04em;
}

h2 {
  margin-bottom: 7px;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: -0.025em;
}

h3 {
  margin-bottom: 5px;
  font-size: 1rem;
}

.data {
  font-family: var(--font-data);
}

.shell {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 44px;
}

.topbar {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.game-header {
  background-color: var(--card-night);
  background-image:
    linear-gradient(var(--card-pattern-wash), var(--card-pattern-wash)),
    url("/textures/game-icon.png");
  background-position: center;
  background-repeat: repeat, repeat-x;
  background-size: auto, 56px;
}

.game-logo {
  display: block;
  width: 300px;
  max-width: 42vw;
  height: 64px;
  object-fit: cover;
}

@media (max-width: 600px) {
  .game-logo { width: 52px; max-width: none; height: 52px; object-fit: contain; }
}

.top-status,
.eyebrow,
.helper,
.muted {
  color: var(--color-soft-text);
}

.top-status {
  font-size: 0.8rem;
}

.sound-desk {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.sound-button {
  min-height: 44px;
  border: 1px solid var(--card-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-panel);
  color: var(--color-text);
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.sound-button:hover {
  border-color: var(--color-soft-text);
}

.sound-button[data-state="attention"] {
  border-color: var(--color-focus);
  color: var(--color-focus);
}

.sound-button[aria-pressed="true"] {
  border-color: var(--color-focus);
  color: var(--color-focus);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-soft-text);
  font-size: 0.7rem;
}

.volume-control input {
  width: 92px;
  accent-color: var(--color-focus);
  cursor: pointer;
}

.sound-status {
  max-width: 250px;
  overflow: hidden;
  color: var(--color-soft-text);
  font-family: var(--font-data);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--color-focus);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.8fr);
  gap: 28px;
  align-items: end;
  margin: 26px 0 24px;
}

.intro-copy {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--color-soft-text);
  font-size: 1.08rem;
}

.format-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-dark);
}

.format-strip > div {
  padding: 12px 13px;
  background: var(--color-panel);
}

.format-strip strong,
.format-strip span {
  display: block;
}

.format-strip strong {
  font-size: 1rem;
}

.format-strip span {
  color: var(--color-dim);
  font-size: 0.72rem;
}

.card {
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
}

.builder-layout {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.preview-column {
  position: sticky;
  z-index: 5;
  top: 12px;
}

.preview-card {
  overflow: hidden;
}

.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px 0;
}

.preview-head h2 {
  margin: 0;
  font-size: 1.12rem;
}

.pill,
.state-pill {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  border: 1px solid var(--color-dark);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--color-soft-text);
  font-size: 0.72rem;
  white-space: nowrap;
}

.pill.looks {
  border-color: color-mix(in srgb, var(--color-green) 45%, var(--color-dark));
  color: var(--color-green);
}

.pill.performance {
  border-color: color-mix(in srgb, var(--color-red) 55%, var(--color-dark));
  color: var(--color-red);
}

.preview-stage {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  padding: 4px 10px 0;
  background: var(--scene-sky);
}

#horsePreview {
  display: block;
  width: 100%;
  height: 260px;
  cursor: grab;
  touch-action: none;
}

#horsePreview.is-dragging {
  cursor: grabbing;
}

.preview-orbit-hint {
  position: absolute;
  right: 15px;
  bottom: 12px;
  border: 1px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-soft-text);
  font-size: 0.68rem;
  padding: 4px 8px;
  pointer-events: none;
}

.preview-name {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 13px 17px;
  border-top: 1px solid var(--color-dark);
  background: var(--color-panel-raised);
}

.cloth-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-data);
  font-weight: 700;
}

.preview-name strong,
.preview-name span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-name span {
  color: var(--color-soft-text);
  font-size: 0.78rem;
}

.builder-form {
  min-width: 0;
  overflow: hidden;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-bottom: 1px solid var(--color-dark);
  background: var(--color-dark);
}

.tab-button {
  min-height: 66px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: var(--color-panel);
  cursor: pointer;
  text-align: left;
}

.tab-button:first-child {
  padding-left: 20px;
}

.tab-button:last-child {
  padding-right: 20px;
}

.tab-button strong,
.tab-button span {
  display: block;
}

.tab-button strong {
  font-size: 0.95rem;
}

.tab-button span {
  color: var(--color-dim);
  font-size: 0.74rem;
}

.tab-button[aria-selected="true"] {
  border-bottom-color: var(--color-green);
  background: var(--color-panel-raised);
}

.tab-panel {
  padding: 20px;
}

.tab-panel[hidden] {
  display: none;
}

.panel-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.panel-intro p {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--color-soft-text);
}

.randomise-button {
  min-height: 36px;
  margin-top: 10px;
  padding-inline: 12px;
}

.choice-section + .choice-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-dark);
}

.cosmetic-section {
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.cosmetic-section + .cosmetic-section {
  margin-top: 8px;
  padding-top: 0;
  border-top: 1px solid var(--color-dark);
}

.cosmetic-section .choice-head {
  align-items: center;
  min-height: 48px;
  margin: 0;
  cursor: pointer;
  padding: 10px 12px;
  list-style: none;
}

.cosmetic-section .choice-head::-webkit-details-marker {
  display: none;
}

.cosmetic-section .choice-head::after {
  color: var(--color-dim);
  content: "+";
  font-family: var(--font-data);
}

.cosmetic-section[open] .choice-head::after {
  content: "−";
}

.cosmetic-section .choice-head span {
  margin-left: auto;
}

.cosmetic-section > .swatch-grid,
.cosmetic-section > .option-grid {
  margin: 0 10px 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-dark);
}

.letter-picker-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-dark);
}

.choice-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.choice-head h3 {
  margin: 0;
}

.choice-head span {
  color: var(--color-dim);
  font-size: 0.76rem;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}

.swatch-option,
.text-option {
  position: relative;
  min-width: 0;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  text-align: left;
  transition: border-color 130ms ease, background 130ms ease, transform 130ms ease;
}

.swatch-option {
  min-height: 56px;
  padding: 8px;
}

.swatch-option::before {
  display: block;
  width: 100%;
  height: 15px;
  margin-bottom: 7px;
  border-radius: 4px;
  background: var(--swatch, var(--color-dark));
  content: "";
}

.swatch-option span {
  display: block;
  overflow: hidden;
  font-size: 0.78rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-option {
  min-height: 65px;
  padding: 10px 11px;
}

.text-option strong,
.text-option span {
  display: block;
}

.text-option strong {
  margin-bottom: 2px;
  font-size: 0.88rem;
}

.text-option span {
  color: var(--color-soft-text);
  font-size: 0.75rem;
  line-height: 1.35;
}

.swatch-option:hover,
.text-option:hover {
  border-color: var(--color-dim);
  transform: translateY(-1px);
}

.swatch-option[aria-pressed="true"],
.text-option[aria-pressed="true"] {
  border-color: var(--color-green);
  background: var(--color-panel-raised);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cosmetic-option-grid .text-option {
  min-height: 56px;
}

.cosmetic-option-grid .text-option strong {
  font-size: 0.82rem;
}

.cosmetic-option-grid .text-option span {
  font-size: 0.7rem;
}

.letter-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.letter-picker {
  width: 92px;
  height: 44px;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-data);
  font-size: 1rem;
  padding: 0 11px;
}

.number-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.number-input {
  width: 92px;
  height: 44px;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-data);
  padding: 0 11px;
}

.identity-panel {
  padding: 20px;
  border-top: 1px solid var(--color-dark);
  background: var(--color-panel-raised);
}

.identity-panel h2 {
  margin-bottom: 4px;
  font-size: 1.2rem;
}

.identity-panel > p {
  margin-bottom: 15px;
  color: var(--color-soft-text);
  font-size: 0.88rem;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-soft-text);
  font-size: 0.8rem;
  font-weight: 500;
}

.text-input,
.search-input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  caret-color: var(--color-green);
  padding: 0 12px;
}

.text-input::placeholder,
.search-input::placeholder {
  color: var(--color-dim);
}

.submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.submit-note {
  margin: 0;
  color: var(--color-dim);
  font-size: 0.76rem;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-panel-raised);
  color: var(--color-text);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  padding: 0 16px;
  transition: border-color 130ms ease, transform 130ms ease, opacity 130ms ease;
}

.button:hover:not(:disabled) {
  border-color: var(--color-dim);
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

.button-primary {
  border-color: var(--identity-gold);
  background: var(--color-bg);
  color: var(--color-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.button-danger {
  border-color: var(--color-red);
  background: var(--color-panel-raised);
}

.button-quiet {
  background: transparent;
}

.form-status {
  display: none;
  margin: 14px 0 0;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.84rem;
}

.form-status.visible {
  display: block;
}

.form-status.success {
  border-color: color-mix(in srgb, var(--color-green) 55%, var(--color-dark));
  background: var(--color-panel-raised);
}

.form-status.error {
  border-color: color-mix(in srgb, var(--color-red) 65%, var(--color-dark));
  background: var(--color-panel-raised);
}

.locked-banner {
  display: none;
  margin-bottom: 16px;
  border: 1px solid var(--color-red);
  border-radius: var(--radius-md);
  background: var(--color-panel-raised);
  padding: 13px 15px;
}

.locked-banner.visible {
  display: block;
}

.admin-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin: 28px 0 20px;
}

.admin-head p {
  margin-bottom: 0;
  color: var(--color-soft-text);
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}

.field-card {
  overflow: hidden;
}

.field-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--color-dark);
}

.field-toolbar h2 {
  margin: 0;
  font-size: 1.15rem;
}

.field-toolbar .search-input {
  width: min(300px, 46vw);
}

.field-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-row {
  display: grid;
  grid-template-columns: 48px minmax(160px, 0.8fr) minmax(180px, 1fr) minmax(300px, 1.7fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 67px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--color-dark);
}

.field-row:last-child {
  border-bottom: 0;
}

.mini-cloth {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 6px;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-data);
  font-size: 0.76rem;
  font-weight: 700;
}

.field-main,
.field-member,
.field-build {
  min-width: 0;
}

.field-main strong,
.field-main span,
.field-member {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-main span,
.field-build {
  color: var(--color-soft-text);
  font-size: 0.76rem;
}

.filter-note {
  color: var(--color-red);
  font-size: 0.72rem;
}

.empty-state {
  padding: 46px 18px;
  color: var(--color-dim);
  text-align: center;
}

.control-card {
  position: sticky;
  top: 12px;
  padding: 18px;
}

.control-card h2 {
  font-size: 1.15rem;
}

.control-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 15px 0;
}

.control-stat {
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: 9px;
}

.control-stat strong,
.control-stat span {
  display: block;
}

.control-stat strong {
  font-family: var(--font-data);
  font-size: 1.05rem;
}

.control-stat span {
  color: var(--color-dim);
  font-size: 0.68rem;
}

.control-card .button {
  width: 100%;
}

.launch-copy {
  margin-bottom: 14px;
  color: var(--color-soft-text);
  font-size: 0.84rem;
}

.launch-result {
  display: none;
  margin-top: 14px;
  border-top: 1px solid var(--color-dark);
  padding-top: 14px;
}

.launch-result.visible {
  display: block;
}

.winner-mini-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.winner-mini-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--color-dark);
  font-size: 0.78rem;
}

.winner-mini-list span {
  color: var(--color-soft-text);
}

.rerun-control {
  margin-top: 14px;
  border-top: 1px solid var(--color-dark);
  padding-top: 14px;
}

.rerun-control .button-rerun {
  min-height: 52px;
  font-size: 1rem;
}

.rerun-control .helper {
  margin: 8px 0 0;
}

.race-call-desk {
  margin-top: 16px;
  padding: 18px;
}

.race-call-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.75fr);
  gap: 28px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-dark);
}

.race-call-head h2 {
  margin-bottom: 7px;
  font-size: 1.35rem;
}

.race-call-head p {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--color-soft-text);
}

.voice-guidance {
  border-left: 2px solid var(--color-green);
  padding-left: 14px;
}

.voice-guidance strong,
.voice-guidance span {
  display: block;
}

.voice-guidance strong {
  margin-bottom: 5px;
}

.voice-guidance span {
  color: var(--color-soft-text);
  font-size: 0.83rem;
}

.race-script-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.race-script-card {
  min-width: 0;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 14px;
}

.race-script-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.race-script-title h3 {
  margin: 2px 0 0;
  font-size: 1.05rem;
}

.race-script-title .data {
  color: var(--color-dim);
  font-size: 0.68rem;
}

.race-script {
  max-height: 430px;
  overflow: auto;
  margin: 14px 0;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-panel);
  color: var(--color-text);
  padding: 14px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.audio-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.audio-upload .button {
  padding: 8px 11px;
  font-size: 0.76rem;
}

.audio-status {
  width: 100%;
  margin: 2px 0 0;
  color: var(--color-soft-text);
  font-size: 0.78rem;
}

.audio-status.error {
  color: var(--color-red);
}

.run-desk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  border-top: 1px solid var(--color-dark);
  padding-top: 16px;
}

.run-desk h3 {
  margin: 3px 0;
  font-size: 1.05rem;
}

.run-desk p {
  margin-bottom: 0;
}

.call-card-status {
  border: 1px solid var(--color-dark);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
}

.call-card-status[data-health="ready"] {
  border-left-color: var(--color-green);
}

.call-card-status[data-health="partial"],
.call-card-status[data-health="waiting"] {
  border-left-color: var(--color-soft-text);
}

.call-card-status[data-health="error"] {
  border-left-color: var(--color-red);
}

.run-actions {
  display: flex;
  gap: 9px;
  flex: 0 0 auto;
}

.result-history {
  margin-top: 34px;
  padding: 18px;
}

.result-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.result-history-head p {
  margin-bottom: 0;
  color: var(--color-soft-text);
}

.result-history-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.archived-result {
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 14px;
}

.archived-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.archived-result-head h3 {
  margin: 2px 0 0;
}

.archived-result-meta {
  color: var(--color-soft-text);
  font-size: 0.76rem;
  text-align: right;
}

.archived-result .winner-mini-list {
  margin-top: 12px;
}

.clear-field-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 64px;
  border-color: color-mix(in srgb, var(--color-red) 62%, var(--color-dark));
  padding: 18px;
}

.clear-field-zone h2 {
  margin-bottom: 5px;
  font-size: 1.25rem;
}

.clear-field-zone p {
  max-width: 820px;
  margin-bottom: 0;
  color: var(--color-soft-text);
  font-size: 0.84rem;
}

.clear-field-zone .button-danger {
  flex: 0 0 auto;
  color: var(--color-red);
}

dialog {
  width: min(460px, calc(100% - 28px));
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  color: var(--color-text);
  padding: 20px;
}

dialog::backdrop {
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
}

.dialog-actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 18px;
}

.race-shell {
  --race-stage-height: clamp(640px, calc(100vh - 188px), 1200px);
  width: min(1800px, calc(100% - 20px));
  padding-top: 10px;
  padding-bottom: 20px;
}

.race-shell .topbar {
  min-height: 40px;
  margin-bottom: 6px;
}

.race-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin: 8px 0 10px;
}

.race-head h1 {
  margin-bottom: 2px;
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
}

.race-head p {
  margin-bottom: 0;
  color: var(--color-soft-text);
}

.going-card {
  min-width: 230px;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  padding: 11px 15px;
}

.going-card span,
.going-card strong {
  display: block;
}

.going-card span {
  color: var(--color-dim);
  font-size: 0.72rem;
}

.going-card strong {
  font-size: 1.25rem;
}

.race-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 280px);
  gap: 8px;
  align-items: stretch;
}

.track-card {
  position: relative;
  min-width: 0;
  min-height: var(--race-stage-height);
  overflow: hidden;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-lg);
  background: var(--scene-sky);
}

#raceCanvas {
  display: block;
  width: 100%;
  height: var(--race-stage-height);
}

.track-chrome {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 13px;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.track-chip {
  border: 1px solid var(--color-dark);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-soft-text);
  font-size: 0.72rem;
  padding: 5px 8px;
}

.race-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  padding: 22px;
  text-align: center;
}

.race-overlay[hidden] {
  display: none;
}

.overlay-panel {
  width: min(720px, 100%);
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  padding: 24px;
}

.overlay-status {
  margin: 3px 0 7px;
  color: var(--color-text);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.overlay-panel p {
  margin-bottom: 0;
  color: var(--color-soft-text);
}

.overlay-results {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-dark);
}

.overlay-results[hidden] {
  display: none;
}

.overlay-result-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-dark);
  padding: 0;
  list-style: none;
  text-align: left;
}

.overlay-result-list li {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 8px;
  background: var(--color-bg);
  padding: 8px 10px;
}

.overlay-result-list li > span:first-child {
  grid-row: 1 / 3;
  color: var(--color-green);
  font-size: 0.7rem;
}

.overlay-result-list strong,
.overlay-result-list li > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-result-list strong {
  font-size: 0.82rem;
}

.overlay-result-list li > span:last-child {
  color: var(--color-soft-text);
  font-size: 0.7rem;
}

.overlay-panel .advance-hint {
  margin: 13px 0 10px;
  font-size: 0.8rem;
}

.overlay-panel .button {
  min-width: 210px;
}

.standings-card {
  display: flex;
  height: var(--race-stage-height);
  min-height: var(--race-stage-height);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
}

.standings-head {
  padding: 15px;
  border-bottom: 1px solid var(--color-dark);
}

.standings-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.standings-title h2 {
  margin: 0;
  font-size: 1.1rem;
}

.standings-title span {
  color: var(--color-dim);
  font-size: 0.7rem;
}

.finder-card {
  min-height: 69px;
  border-bottom: 1px solid var(--color-dark);
  border-left: 3px solid var(--color-green);
  background: var(--color-panel-raised);
  padding: 10px 15px;
}

.finder-card small,
.finder-card strong,
.finder-card span {
  display: block;
}

.finder-card small {
  color: var(--color-green);
  font-size: 0.68rem;
}

.finder-card strong,
.finder-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-card span {
  color: var(--color-soft-text);
  font-size: 0.74rem;
}

.standings-list {
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 0 11px 11px;
  list-style: none;
}

.standing-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid var(--color-dark);
}

.standing-row.watched {
  color: var(--color-green);
}

.standing-rank,
.standing-gap {
  font-family: var(--font-data);
  font-size: 0.68rem;
}

.standing-rank {
  color: var(--color-dim);
}

.standing-main {
  min-width: 0;
}

.standing-main strong,
.standing-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standing-main strong {
  font-size: 0.79rem;
}

.standing-main span {
  color: var(--color-dim);
  font-size: 0.67rem;
}

.standing-gap {
  color: var(--color-soft-text);
}

.race-note {
  min-height: 47px;
  margin: 11px 0 0;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  color: var(--color-soft-text);
  padding: 12px 15px;
}

.results-card {
  margin-top: 11px;
  padding: 18px;
}

.results-card[hidden] {
  display: none;
}

.results-card h2 {
  margin-bottom: 4px;
}

.results-card > p {
  margin-bottom: 0;
  color: var(--color-soft-text);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.result-runner {
  min-width: 0;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: 11px;
}

.result-runner.winner {
  border-color: var(--color-green);
  background: var(--color-panel-raised);
}

.result-runner small,
.result-runner strong,
.result-runner span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-runner small {
  margin-bottom: 7px;
  color: var(--color-dim);
  font-family: var(--font-data);
}

.result-runner strong {
  font-size: 0.84rem;
}

.result-runner span {
  color: var(--color-soft-text);
  font-size: 0.74rem;
}

.fatal-card {
  width: min(620px, calc(100% - 28px));
  margin: 12vh auto 0;
  padding: 22px;
}

@media (max-width: 1050px) {
  .admin-grid,
  .race-grid {
    grid-template-columns: minmax(0, 1fr) 250px;
  }

  .field-card {
    overflow-x: auto;
  }

  .field-list {
    min-width: 900px;
  }

  .result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .race-call-head {
    grid-template-columns: 1fr;
  }

  .result-history-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px) {
  .intro,
  .builder-layout,
  .admin-head,
  .admin-grid,
  .race-head,
  .race-grid,
  .race-script-grid {
    grid-template-columns: 1fr;
  }

  .preview-column {
    top: 0;
  }

  .preview-card {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-panel);
  }

  .preview-stage {
    min-height: 180px;
  }

  #horsePreview {
    height: 180px;
  }

  .admin-actions {
    justify-content: flex-start;
  }

  .control-card {
    position: static;
  }

  .clear-field-zone {
    align-items: stretch;
    flex-direction: column;
  }

  .race-head {
    align-items: start;
  }

  .race-shell {
    --race-stage-height: clamp(520px, 68vh, 720px);
  }

  .race-shell .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .sound-desk {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .sound-status {
    max-width: none;
  }

  .going-card {
    width: 100%;
  }

  .track-card,
  .standings-card {
    min-height: 500px;
  }

  #raceCanvas {
    height: var(--race-stage-height);
  }

  .standings-card {
    height: 530px;
    max-height: 530px;
  }
}

@media (max-width: 620px) {
  .shell,
  .race-shell {
    width: min(100% - 18px, 1480px);
    padding-top: 8px;
  }

  .topbar {
    margin-bottom: 12px;
  }

  .top-status {
    display: none;
  }

  .volume-control {
    flex: 1 1 132px;
  }

  .volume-control input {
    width: 100%;
  }

  .sound-status {
    flex: 1 0 100%;
  }

  .intro {
    gap: 16px;
    margin-top: 18px;
  }

  .format-strip {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .builder-layout {
    gap: 10px;
  }

  .preview-head {
    padding-top: 12px;
  }

  .preview-stage,
  #horsePreview {
    height: 160px;
    min-height: 160px;
  }

  .preview-name {
    padding: 9px 12px;
  }

  .cloth-number {
    width: 36px;
    height: 36px;
  }

  .tab-button {
    min-height: 58px;
    padding-inline: 12px;
  }

  .tab-panel,
  .identity-panel {
    padding: 15px;
  }

  .panel-intro {
    display: block;
  }

  .panel-intro .pill {
    margin-top: 8px;
  }

  .option-grid {
    grid-template-columns: 1fr;
  }

  .cosmetic-option-grid {
    grid-template-columns: 1fr 1fr;
  }

  .letter-picker-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .submit-row {
    display: block;
  }

  .submit-row .button {
    width: 100%;
    margin-top: 10px;
  }

  .result-grid {
    grid-template-columns: 1fr;
  }
}

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

/* Collapsed by default so launching does not spoil the result on Nick's screen.
   Copy script reads from memory, not the DOM, so copying never needs this open. */
.script-reveal {
  margin: 14px 0;
}

.script-reveal > summary {
  cursor: pointer;
  padding: 10px 12px;
  border: 1px dashed var(--color-dark);
  border-radius: var(--radius-sm);
  color: var(--color-dim);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.script-reveal > summary:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

.script-reveal[open] > summary {
  margin-bottom: 10px;
}

.script-reveal .race-script {
  margin-top: 0;
}


/* Steps 2 and 3 are always present so the operator sees the whole run of show at
   once. Before the field is locked they are visibly inert rather than absent. */
.race-call-desk[data-waiting="true"] .race-script-grid,
.race-call-desk[data-waiting="true"] .run-desk:not(.call-card-status) {
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

.waiting-note {
  color: var(--color-dim);
  margin: 8px 0 0;
}

.race-call-desk[data-waiting="false"] .waiting-note {
  display: none;
}


/* The five conditions each race is run under. Every member's choice is measured
   against one of these, so this board is where they see what their horse drew. */
.condition-board {
  margin: 0 0 18px;
}

.condition-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.condition-race-label {
  color: var(--color-dim);
  font-size: 0.85rem;
}

.condition-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.condition-card {
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.condition-card > .condition-label {
  display: block;
  color: var(--color-dim);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.condition-card > .condition-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 4px 0 6px;
}

.condition-card > .condition-flavor {
  display: block;
  color: var(--color-dim);
  font-size: 0.85rem;
  line-height: 1.35;
}


/* Start controls on the race view itself. This tab is the one being screen-shared,
   so the operator cannot flip back to admin to start a race. Sits bottom-right,
   and removes itself the instant a race is running so it is never on camera
   during the race. Keyboard shortcut exists for a completely clean share. */
.show-control {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-sm);
  background: var(--color-panel);
}

.show-control[hidden] {
  display: none;
}

.show-control-hint {
  color: var(--color-dim);
  font-size: 0.8rem;
}


/* Reset stays reachable after a race has begun, unlike the start control which
   hides itself. Deliberately small and low-contrast so it does not draw the eye
   on a screen share, and it takes two clicks to fire. */
.show-reset-dock {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 40;
  opacity: 0.35;
}

.show-reset-dock:hover {
  opacity: 1;
}

.show-reset-dock[hidden] {
  display: none;
}


/* Expected spoken length, so the operator knows before spending a generation. */
.script-length {
  color: var(--color-dim);
  font-size: 0.82rem;
  margin-right: 10px;
}

/* Derby Owners Club race programme. One phase is visible at a time, so plates
   never compete for the same pixels. */
.broadcast-package {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 700;
  filter: drop-shadow(3px 3px 0 var(--color-bg));
}

.broadcast-package[hidden],
.broadcast-package [hidden] {
  display: none !important;
}

.doc-programme,
.doc-programme > section {
  position: absolute;
  inset: 0;
}

.doc-programme > .doc-race-card {
  top: 4%;
  right: 7%;
  bottom: auto;
  left: 7%;
  border: 2px solid var(--doc-line);
  background: var(--doc-plate);
}

.doc-race-card-title,
.doc-result-title {
  margin: 0;
  border-bottom: 2px solid var(--doc-line);
  background: var(--doc-panel);
  color: var(--doc-white);
  font-size: clamp(22px, 2.1vw, 40px);
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-align: center;
}

.doc-race-card-body {
  display: grid;
  grid-template-columns: minmax(260px, 31%) 1fr;
}

.doc-course-map {
  min-height: 348px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 20px;
  border-right: 2px solid var(--doc-line);
  background: var(--doc-panel);
  color: var(--doc-green-bright);
}

.doc-card-conditions { margin: 0; padding: 8px 18px; color: var(--card-rail); background: var(--card-band); font: 600 16px var(--font-ui); }

.doc-course-map-label {
  color: var(--doc-record);
  font-size: clamp(14px, 1.2vw, 22px);
  letter-spacing: 0.06em;
  text-align: center;
}

.doc-course-map svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.doc-course-map path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-course-map-track {
  stroke: var(--doc-green);
}

.doc-course-map-line {
  stroke: var(--scene-dirt-light);
}

.doc-course-map[data-surface="turf"] .doc-course-map-line {
  stroke: var(--scene-turf);
}

.doc-course-map-start {
  stroke: var(--color-red);
  stroke-width: 4;
}

.doc-race-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-race-card-row {
  min-height: 37px;
  display: grid;
  grid-template-columns: 44px 44px minmax(220px, 1fr) 36px 260px 180px;
  align-items: center;
  border-bottom: 1px solid var(--doc-line);
  color: var(--doc-white);
  font-size: clamp(13px, 1.15vw, 22px);
  letter-spacing: 0.08em;
}

.doc-card-number,
.doc-position-token,
.doc-tag-number,
.doc-winner-number,
.doc-result-number,
.doc-lucid-number {
  display: grid;
  place-items: center;
  background: var(--doc-silk, var(--silk-black));
  color: var(--doc-white);
  font-style: normal;
}

.doc-card-number {
  align-self: stretch;
}

.doc-card-rank,
.doc-card-sex,
.doc-card-member {
  text-align: center;
}

.doc-card-name,
.doc-card-member {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-card-sex {
  color: var(--doc-green-bright);
}

.doc-card-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.doc-form-mark {
  font-style: normal;
  font-size: 1.05em;
  line-height: 1;
}

.doc-race-card-more {
  padding: 7px 18px;
  color: var(--doc-record);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-align: right;
}

.doc-programme > .doc-course-record {
  top: auto;
  right: auto;
  bottom: 7%;
  left: 9%;
  width: min(640px, 44%);
  height: 92px;
  padding: 12px 26px;
  display: grid;
  grid-template-columns: 170px 150px 1fr;
  align-items: center;
  border: 2px solid var(--doc-line);
  background: var(--doc-panel);
  color: var(--doc-white);
}

.doc-record-label {
  color: var(--doc-white);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.doc-record-time {
  color: var(--doc-record);
  font-size: 29px;
  letter-spacing: 0.08em;
}

.doc-record-holder {
  font-size: 22px;
  letter-spacing: 0.12em;
}

.doc-ident-wipe {
  overflow: hidden;
}

.doc-ident-number,
.doc-ident-course {
  position: absolute;
  color: var(--doc-white);
  filter: drop-shadow(5px 5px 0 var(--doc-plate));
  line-height: 1;
  text-transform: uppercase;
  transform: skewX(-8deg);
}

.doc-ident-number {
  top: 10%;
  left: 10%;
  font-size: clamp(70px, 9vw, 170px);
  letter-spacing: 0.06em;
}

.doc-ident-course {
  top: 53%;
  right: 7%;
  font-size: clamp(54px, 7vw, 132px);
  letter-spacing: -0.02em;
}

.doc-position-band {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 84px;
  border-bottom: 2px solid var(--doc-green-bright);
  background: var(--doc-band);
}

.doc-position-tokens {
  position: absolute;
  top: 7px;
  right: 12px;
  left: 12px;
  display: grid;
  grid-template-columns: repeat(var(--doc-runner-count, 10), minmax(0, 1fr));
  gap: 1px;
}

.doc-position-token {
  min-width: 0;
  height: 24px;
  border: 1px solid var(--doc-white);
  font-size: clamp(7px, 0.62vw, 12px);
  line-height: 1;
}

.doc-distance {
  position: absolute;
  right: 50%;
  bottom: 3px;
  color: var(--doc-white);
  font-size: 43px;
  line-height: 1;
  letter-spacing: 0.08em;
  transform: translateX(50%);
}

.doc-race-ident {
  position: absolute;
  top: 96px;
  right: 24px;
  min-width: 360px;
  padding: 8px 20px;
  border: 2px solid var(--doc-line);
  background: var(--doc-plate);
  color: var(--doc-white);
  font-size: 25px;
  letter-spacing: 0.09em;
  text-align: right;
}

.doc-runner-tags {
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 22px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.doc-runner-tag {
  min-width: 0;
  height: 34px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--doc-line);
  background: var(--doc-plate);
  color: var(--doc-white);
  font-size: 14px;
}

.doc-runner-tag strong {
  overflow: hidden;
  padding: 0 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-tag-number {
  align-self: stretch;
}

.doc-winner-word {
  position: absolute;
  top: 14%;
  left: 6%;
  margin: 0;
  color: var(--doc-gold);
  font-family: var(--font-ui);
  font-size: clamp(64px, 6.4vw, 124px);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.08em;
}

.doc-winner-plate {
  position: absolute;
  top: 39%;
  right: 6%;
  width: 30%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 160px;
  align-items: center;
  border: 2px solid var(--doc-line);
  background: var(--doc-panel);
  color: var(--doc-white);
  font-size: 27px;
  letter-spacing: 0.1em;
}

.doc-winner-number {
  align-self: stretch;
  font-size: 32px;
}

.doc-winner-horse {
  overflow: hidden;
  padding: 0 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-winner-time {
  text-align: center;
}

.doc-programme > .doc-result-board {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: 62%;
  border: 2px solid var(--doc-line);
  background: color-mix(in srgb, var(--doc-plate) 91%, transparent);
}

.doc-result-record {
  height: 32px;
  display: grid;
  grid-template-columns: 150px 130px 1fr;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--doc-line);
  color: var(--doc-white);
  font-size: 21px;
  letter-spacing: 0.09em;
}

.doc-result-table {
  width: 100%;
  height: calc(100% - 86px);
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--doc-white);
  font-size: clamp(22px, 2.3vw, 44px);
  letter-spacing: 0.06em;
}

.doc-result-table th {
  height: 34px;
  color: var(--doc-magenta);
  font-size: 21px;
  text-align: center;
}

.doc-result-table th:nth-child(1),
.doc-result-table td:nth-child(1) { width: 9%; color: var(--doc-magenta); }
.doc-result-table th:nth-child(2),
.doc-result-table td:nth-child(2) { width: 7%; }
.doc-result-table th:nth-child(3),
.doc-result-table td:nth-child(3) { width: 31%; text-align: left; }
.doc-result-table th:nth-child(4),
.doc-result-table td:nth-child(4) { width: 16%; }
.doc-result-table th:nth-child(5),
.doc-result-table td:nth-child(5) { width: 13%; }
.doc-result-table th:nth-child(6),
.doc-result-table td:nth-child(6) { width: 24%; }

.doc-result-table td {
  height: 43px;
  border-top: 1px solid var(--doc-line);
  text-align: center;
}

.doc-result-number {
  color: var(--doc-white);
}

.doc-final-plate {
  border-top: 110px solid var(--doc-plate);
  border-bottom: 210px solid var(--doc-plate);
}

.doc-final-head {
  position: absolute;
  top: -96px;
  left: 8%;
  width: 43%;
  height: 76px;
  display: grid;
  grid-template-rows: 28px 48px;
  border: 2px solid var(--doc-line);
  background: var(--doc-panel);
  color: var(--doc-white);
  font-size: 21px;
  letter-spacing: 0.08em;
  text-align: center;
}

.doc-final-head strong {
  display: grid;
  place-items: center;
  background: var(--doc-green);
  color: var(--doc-plate);
  font-size: 26px;
  letter-spacing: 0.1em;
}

.doc-final-winner {
  position: absolute;
  bottom: -28px;
  left: 4%;
  margin: 0;
  color: var(--doc-white);
  font-family: var(--font-ui);
  font-size: clamp(82px, 11vw, 200px);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.07em;
}

.doc-final-details {
  position: absolute;
  bottom: -170px;
  left: 8%;
  width: 43%;
  height: 90px;
  display: grid;
  grid-template-columns: 1fr 90px 180px;
  align-items: center;
  border: 2px solid var(--doc-green-bright);
  background: var(--doc-plate);
  color: var(--doc-white);
  font-size: 25px;
  text-align: center;
}

.doc-final-name {
  align-self: stretch;
  display: grid;
  place-items: center;
  background: var(--doc-green);
  color: var(--doc-plate);
}

.doc-next-race {
  position: absolute;
  right: 2%;
  bottom: -190px;
  color: var(--doc-record);
  font-size: 18px;
  letter-spacing: 0.06em;
}

.doc-programme > .doc-lucid-card {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(720px, calc(100% - 96px));
  height: 240px;
  padding: 48px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 26px;
  align-items: center;
  border: 2px solid var(--doc-line);
  background: var(--doc-panel);
  color: var(--doc-white);
  transform: translate(-50%, -50%);
}

.doc-lucid-number {
  width: 96px;
  height: 96px;
  font-size: 28px;
}

.doc-lucid-copy {
  display: grid;
}

.doc-lucid-copy small {
  color: var(--doc-record);
  font-size: 14px;
  letter-spacing: 0.12em;
}

.doc-lucid-copy strong {
  font-size: 34px;
  line-height: 1.3;
}

.doc-lucid-copy span {
  font-size: 20px;
}

@media (max-width: 1400px) {
  .doc-race-card-body { grid-template-columns: minmax(210px, 28%) 1fr; }
  .doc-course-map { min-height: 282px; padding: 14px; }
  .doc-race-card-row {
    min-height: 29px;
    grid-template-columns: 32px 32px minmax(150px, 1fr) 28px 190px 120px;
  }
  .doc-card-form { gap: 5px; }
  .doc-course-record { grid-template-columns: 130px 110px 1fr; height: 72px; }
  .doc-record-label { font-size: 10px; }
  .doc-record-time { font-size: 20px; }
  .doc-record-holder { font-size: 15px; }
  .doc-race-ident { top: 78px; min-width: 280px; font-size: 18px; }
  .doc-position-band { height: 68px; }
  .doc-distance { font-size: 32px; }
  .doc-runner-tags { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .doc-runner-tag:nth-child(n+5) { display: none; }
  .doc-result-table td { height: 34px; }
}

/* The member surface is one 16:9 owner screen, matching the satellite layout:
   yard first, controls on plates, the creation form behind one native dialog. */
.stable-page {
  background: var(--color-bg);
}

.stable-page.is-attract {
  overflow: hidden;
}

.stable-page.is-attract .stable-shell {
  width: 100vw;
  height: 100svh;
  margin: 0;
  padding: 0;
}

.stable-page.is-attract .stable-topbar {
  display: none;
}

.stable-page.is-attract .owner-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  aspect-ratio: auto;
}

.stable-shell {
  width: min(100% - 24px, 1280px);
  margin: 0 auto;
  padding: 12px 0 20px;
}

.stable-topbar,
.stable-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.stable-topbar {
  min-height: 38px;
  margin-bottom: 8px;
}

.stable-edit-button,
.yard-message button,
.yard-actions button {
  border: 1px solid var(--yard-panel-edge);
  background: var(--yard-panel);
  color: var(--doc-gold);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: clamp(0.62rem, 1vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stable-edit-button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  text-decoration: none;
}

.owner-screen {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--doc-line);
  background: var(--scene-sky);
  isolation: isolate;
}

.owner-screen #horsePreview {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.owner-screen #horsePreview.is-dragging {
  cursor: grabbing;
}

.owner-attract,
.owner-transition {
  position: absolute;
  z-index: 10;
  inset: 0;
  color: var(--doc-white);
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
}

.owner-attract[hidden],
.owner-transition[hidden] {
  display: none;
}

.owner-attract {
  cursor: pointer;
  pointer-events: auto;
}

.owner-attract::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 14%;
  background: var(--yard-panel);
  content: "";
  pointer-events: none;
}

.owner-attract-mark {
  position: absolute;
  z-index: 3;
  top: 5%;
  right: 4%;
  display: grid;
  justify-items: end;
  filter: drop-shadow(3px 3px 0 var(--doc-plate));
  line-height: 0.82;
  transform: skewX(-8deg);
}

.owner-attract-mark small,
.owner-attract-mark span {
  color: var(--doc-gold);
  font-size: clamp(0.62rem, 1.3vw, 1.1rem);
  letter-spacing: 0.2em;
}

.owner-attract-mark strong {
  color: var(--doc-white);
  font-size: clamp(2.2rem, 7vw, 5.8rem);
  letter-spacing: -0.04em;
}

.owner-attract-start {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 19%;
  left: 0;
  display: grid;
  place-items: center;
}

.owner-attract-start button {
  min-width: min(38vw, 390px);
  min-height: clamp(58px, 9vh, 86px);
  border: 3px solid var(--doc-plate);
  background: var(--doc-gold);
  color: var(--doc-plate);
  cursor: pointer;
  font: 700 italic clamp(1.7rem, 4vw, 3.7rem) var(--font-ui);
  letter-spacing: 0.08em;
  padding: 0.05em 0.7em 0.12em;
  text-transform: uppercase;
  filter: drop-shadow(5px 5px 0 var(--doc-plate));
  transform: skewX(-8deg);
}

.owner-attract-start button strong {
  display: block;
  animation: press-start-blink 1s steps(1, end) infinite;
}

.is-owner-capture .owner-attract-start button strong {
  animation: none;
}

.owner-attract-start button:hover,
.owner-attract-start button:focus-visible {
  background: var(--doc-white);
}

.owner-attract-instructions,
.owner-attract-status {
  position: absolute;
  z-index: 3;
  bottom: 3.5%;
  filter: drop-shadow(2px 2px 0 var(--doc-plate));
  font-size: clamp(0.68rem, 1.45vw, 1.25rem);
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.owner-attract-instructions {
  left: 3%;
}

.owner-attract-instructions p {
  margin: 0;
}

.owner-attract-status {
  right: 3%;
  display: grid;
  justify-items: end;
  color: var(--doc-gold);
}

.owner-attract-status strong,
.owner-attract-status span {
  display: block;
}

.owner-attract-status strong {
  color: var(--doc-white);
}

.owner-attract-beats,
.owner-attract-ident,
.owner-attract-winner {
  position: absolute;
  z-index: 2;
}

.owner-attract-beats {
  inset: 0;
  pointer-events: none;
}

.owner-attract-ident,
.owner-attract-winner {
  display: none;
}

.owner-attract[data-beat="ident"] .owner-attract-ident,
.owner-attract[data-beat="winner"] .owner-attract-winner {
  display: flex;
}

.owner-attract-ident {
  inset: 0;
  filter: drop-shadow(4px 4px 0 var(--doc-plate));
}

.owner-attract-ident strong {
  position: absolute;
  top: 9%;
  left: 6%;
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.8;
}

.owner-attract-ident span {
  position: absolute;
  top: 27%;
  right: 6%;
  font-size: clamp(2.4rem, 11vw, 10rem);
}

.owner-attract-winner {
  inset: 0;
}

.owner-attract-winner > strong {
  position: absolute;
  top: 10%;
  left: 5%;
  color: var(--doc-gold);
  filter: drop-shadow(5px 5px 0 var(--doc-plate));
  font-size: clamp(3.5rem, 10vw, 9rem);
  line-height: 0.8;
}

.owner-attract-winner span {
  position: absolute;
  top: 43%;
  right: 5%;
  display: grid;
  grid-template-columns: auto 1fr;
  min-width: 36%;
  background: var(--yard-panel);
  font-size: clamp(0.8rem, 2vw, 1.6rem);
  gap: 0.2em 0.7em;
  padding: 0.35em 0.8em;
}

.owner-attract-winner b {
  grid-row: span 2;
  background: var(--doc-gold);
  color: var(--doc-plate);
  font-style: normal;
  padding: 0 0.3em;
}

.owner-attract-winner em {
  font-size: 1.3em;
}

@keyframes press-start-blink {
  0%, 49.99% { visibility: visible; }
  50%, 100% { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .owner-attract-start button strong {
    animation: none;
  }
}

.builder-dialog-prompt {
  border-bottom: 2px solid var(--yard-panel-edge);
  background: var(--yard-purple);
  color: var(--doc-white);
  font: 700 italic clamp(0.72rem, 1.4vw, 1rem) var(--font-ui);
  letter-spacing: 0.08em;
  padding: 10px 18px;
  text-transform: uppercase;
}

.builder-dialog-prompt p {
  margin: 0;
}

.builder-dialog.is-signin .identity-panel {
  order: -1;
}

.builder-dialog.is-signin .builder-form {
  display: flex;
  flex-direction: column;
}

.owner-transition {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--doc-plate) 78%, transparent);
  pointer-events: none;
}

.owner-transition strong {
  border: 5px double var(--doc-white);
  background: var(--yard-panel);
  outline: 4px solid var(--doc-line);
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1;
  padding: 0.08em 0.5em 0.16em;
  transform: skewX(-7deg);
}

.owner-transition span {
  font-size: clamp(0.72rem, 1.5vw, 1.2rem);
  letter-spacing: 0.14em;
}

.owner-transition[data-kind="departure"] {
  place-content: start end;
  justify-items: end;
  background: none;
  padding: 5% 4% 0 0;
}

.owner-transition[data-kind="departure"] strong {
  border-width: 2px;
  outline: none;
  font-size: clamp(1.8rem, 4vw, 3.8rem);
}

.owner-transition[data-kind="departure"] span {
  border: 1px solid var(--doc-line);
  background: var(--yard-panel);
  padding: 5px 10px;
}

.owner-screen.is-attract > :not(#horsePreview, .owner-attract),
.owner-screen.is-departing > :not(#horsePreview, .owner-transition),
.owner-screen.is-transitioning > :not(#horsePreview, .owner-transition) {
  display: none;
}

.yard-stat-panel,
.yard-identity,
.yard-feeding,
.yard-breeding,
.breeding-stage-labels,
.yard-message,
.yard-relationship,
.yard-actions {
  position: absolute;
  z-index: 2;
}

.yard-feeding {
  right: 25%;
  bottom: 20%;
  left: 25%;
  z-index: 3;
  display: grid;
  grid-template-columns: 76px minmax(180px, 1fr) 76px;
  gap: 6px;
  align-items: stretch;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
}

.yard-feeding[hidden] {
  display: none;
}

.yard-breeding {
  top: 1.5%;
  left: 1.2%;
  z-index: 5;
  width: min(34%, 400px);
  max-height: 94%;
  overflow: auto;
  border: 2px solid var(--yard-panel-edge);
  background: var(--yard-panel);
  color: var(--doc-white);
  font-family: var(--font-ui);
  font-weight: 700;
  padding: clamp(8px, 1.2vw, 15px);
  text-transform: uppercase;
}

.yard-breeding[hidden],
.breeding-stage-labels[hidden],
.breeding-stage-labels span[hidden] {
  display: none;
}

.yard-breeding header {
  border-bottom: 2px solid var(--doc-gold);
  margin-bottom: 10px;
  padding-bottom: 7px;
}

.yard-breeding header span,
.yard-breeding label,
.yard-breeding legend {
  color: var(--doc-gold);
  font-size: clamp(0.48rem, 0.72vw, 0.66rem);
  letter-spacing: 0.09em;
}

.yard-breeding h2,
.yard-breeding p {
  margin: 0;
}

.yard-breeding h2 {
  font: 700 italic clamp(1.35rem, 2.5vw, 2.2rem) var(--font-ui);
}

.yard-breeding header p {
  color: var(--color-soft-text);
  font-size: clamp(0.48rem, 0.68vw, 0.62rem);
}

.yard-breeding form {
  display: grid;
  gap: 5px;
}

.yard-breeding select,
.yard-breeding input[type="text"],
.yard-breeding button {
  width: 100%;
  min-height: 31px;
  border: 1px solid var(--yard-panel-edge);
  background: var(--doc-plate);
  color: var(--doc-white);
  font: 700 clamp(0.55rem, 0.82vw, 0.74rem) var(--font-ui);
  text-transform: uppercase;
}

.yard-breeding select,
.yard-breeding input[type="text"] {
  padding: 4px 7px;
}

.yard-breeding fieldset {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  border: 1px solid var(--yard-panel-edge);
  margin: 2px 0;
  padding: 5px;
}

.yard-breeding fieldset label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--doc-white);
  letter-spacing: 0;
}

.yard-breeding fieldset input {
  accent-color: var(--doc-gold);
}

.yard-breeding form > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.yard-breeding button {
  cursor: pointer;
}

.yard-breeding button:hover,
.yard-breeding button:focus-visible {
  background: var(--doc-gold);
  color: var(--doc-plate);
}

.yard-breeding button:disabled,
.yard-breeding select:disabled {
  background: var(--color-dim);
  color: var(--color-soft-text);
  cursor: not-allowed;
}

.breeding-line,
.breeding-status {
  min-height: 1.3em;
  color: var(--color-soft-text);
  font-size: clamp(0.45rem, 0.67vw, 0.6rem);
  line-height: 1.3;
}

.breeding-status {
  color: var(--doc-white);
}

.breeding-stage-labels {
  top: 7%;
  right: 1.5%;
  left: 38%;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  pointer-events: none;
}

.breeding-stage-labels span {
  display: grid;
  border: 2px solid var(--yard-panel-edge);
  background: var(--yard-panel);
  color: var(--doc-white);
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 4px 7px;
  text-align: center;
  text-transform: uppercase;
}

.breeding-stage-labels b {
  color: var(--doc-gold);
  font-size: clamp(0.48rem, 0.66vw, 0.62rem);
}

.breeding-stage-labels em {
  overflow: hidden;
  font-size: clamp(0.52rem, 0.82vw, 0.76rem);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yard-training {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
}

.yard-training[hidden],
.yard-training [hidden] {
  display: none;
}

.yard-training button {
  border: 2px solid var(--yard-panel-edge);
  background: var(--yard-panel);
  color: var(--doc-white);
  cursor: pointer;
  font: 700 clamp(0.5rem, 0.78vw, 0.72rem) var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.yard-training button:hover,
.yard-training button:focus-visible,
.yard-training button[aria-pressed="true"] {
  background: var(--doc-gold);
  color: var(--doc-plate);
}

.training-selector,
.training-drill,
.training-result {
  position: absolute;
  inset: 0;
}

.training-title {
  position: absolute;
  top: 1.5%;
  left: 42%;
  margin: 0;
  border: 2px solid var(--yard-panel-edge);
  background: var(--scene-gate);
  color: var(--doc-white);
  padding: 3px 12px;
  font-size: clamp(0.5rem, 0.78vw, 0.72rem);
  text-align: center;
}

.training-crt {
  position: absolute;
  top: 6%;
  left: 36%;
  width: 34%;
  height: 38%;
  border: clamp(8px, 1.2vw, 15px) solid var(--scene-furniture);
  border-radius: 3%;
  background: var(--doc-plate);
  outline: 3px solid var(--doc-gold);
}

.training-crt::before,
.training-crt::after {
  position: absolute;
  z-index: -1;
  content: "";
  background: var(--scene-leather);
}

.training-crt::before {
  bottom: -42%;
  left: 47%;
  width: 7%;
  height: 42%;
}

.training-crt::after {
  bottom: -45%;
  left: 31%;
  width: 39%;
  height: 5%;
}

.training-crt-screen {
  position: absolute;
  overflow: hidden;
  inset: 5%;
  border: 2px solid var(--doc-line);
  background: linear-gradient(var(--scene-sky), var(--scene-sky-horizon));
}

.training-crt-screen span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48%;
  background: var(--scene-turf);
}

.training-crt[data-selected-course="pool"] .training-crt-screen span {
  background: var(--training-pool);
}

.training-crt[data-selected-course="dirt"] .training-crt-screen span {
  background: var(--scene-dirt);
}

.training-crt[data-selected-course="wood"] .training-crt-screen span {
  background: var(--training-wood);
}

.training-crt[data-selected-course="slope"] .training-crt-screen span {
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%);
  background: var(--scene-turf-dark);
}

.training-crt[data-selected-course="rest"] .training-crt-screen span {
  background: var(--scene-dirt-light);
}

.training-crt-screen i {
  position: absolute;
  z-index: 1;
  right: -4%;
  bottom: 35%;
  left: -4%;
  height: 3px;
  background: var(--scene-rail);
  transform: perspective(120px) rotateX(16deg);
}

.training-crt-screen i:nth-child(2) {
  bottom: 28%;
}

.training-crt-screen i:nth-child(3) {
  bottom: 19%;
}

.training-crt-screen b {
  position: absolute;
  z-index: 2;
  right: 14%;
  bottom: 18%;
  width: 19%;
  height: 52%;
  border: 4px solid var(--scene-gate);
  border-bottom: 0;
}

.training-mode-row,
.training-course-row,
.training-selector-actions {
  position: absolute;
  display: grid;
  pointer-events: auto;
  gap: 3px;
}

.training-mode-row {
  right: 24%;
  bottom: 35%;
  left: 24%;
  grid-template-columns: repeat(2, 1fr);
}

.training-course-row {
  right: 10%;
  bottom: 28%;
  left: 10%;
  grid-template-columns: repeat(6, 1fr);
}

.training-mode-row button,
.training-course-row button,
.training-selector-actions button {
  min-height: clamp(27px, 3.1vw, 38px);
}

.training-selector-actions {
  right: 34%;
  bottom: 21.5%;
  left: 34%;
  grid-template-columns: repeat(2, 1fr);
}

.training-play-marker {
  position: absolute;
  top: 13%;
  left: var(--training-marker, 12%);
  border: 2px solid var(--doc-white);
  background: var(--yard-purple);
  color: var(--doc-white);
  padding: 7px 5px;
  transform: translateX(-50%);
}

.training-play-marker::after {
  position: absolute;
  bottom: -12px;
  left: calc(50% - 8px);
  width: 16px;
  height: 12px;
  content: "";
  background: var(--yard-purple);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.training-clock-row,
.training-meter {
  position: absolute;
  right: 0;
  left: 0;
  display: grid;
  color: var(--doc-white);
}

.training-clock-row {
  bottom: 15.5%;
  grid-template-columns: repeat(2, 1fr);
  gap: 35%;
  background: var(--yard-purple);
  padding: 4px 8px;
  font-size: clamp(0.52rem, 0.86vw, 0.78rem);
}

.training-clock-row span:last-child {
  text-align: right;
}

.training-meter {
  bottom: 7.8%;
  grid-template-columns: 12% 1fr 12%;
  align-items: center;
  border: 4px solid var(--scene-furniture);
  background: var(--doc-plate);
  padding: 6px 12px;
  font-size: clamp(0.5rem, 0.74vw, 0.68rem);
}

.training-meter > span:last-child {
  text-align: right;
}

.training-meter small {
  display: block;
}

.training-meter > i {
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--doc-white);
  background: var(--yard-bar-track);
}

.training-meter > i b {
  display: block;
  width: 0;
  height: 100%;
  background: var(--yard-purple-edge);
}

.training-drill-actions {
  position: absolute;
  top: 10%;
  right: 2%;
  display: grid;
  pointer-events: auto;
  gap: 5px;
}

.training-drill-actions button {
  width: clamp(62px, 7.5vw, 92px);
  min-height: clamp(34px, 4vw, 48px);
}

.training-result strong {
  position: absolute;
  top: 30%;
  right: 8%;
  left: 8%;
  color: var(--training-verdict);
  font-family: var(--font-ui);
  font-size: clamp(3.8rem, 11vw, 8.5rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.training-stat-up {
  position: absolute;
  top: 3%;
  left: 24.5%;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--doc-white);
  font-size: clamp(0.5rem, 0.72vw, 0.66rem);
}

.training-stat-up i {
  width: clamp(8px, 1vw, 13px);
  height: clamp(9px, 1.1vw, 15px);
  background: var(--silk-blue);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.training-result > p {
  display: none;
}

.training-result > div:last-child {
  position: absolute;
  right: 2%;
  bottom: 21%;
  display: flex;
  pointer-events: auto;
  gap: 5px;
}

.training-result button {
  min-height: 34px;
  padding: 0 12px;
}

.yard-feeding button,
.yard-feeding select {
  border: 2px solid var(--yard-panel-edge);
  color: var(--doc-white);
  cursor: pointer;
  font: 700 clamp(0.58rem, 0.9vw, 0.8rem) var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.yard-feed-step {
  border-color: var(--doc-white) !important;
  background: var(--color-red);
  clip-path: polygon(0 50%, 28% 0, 100% 0, 100% 100%, 28% 100%);
}

.yard-feed-step:nth-of-type(2) {
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}

.yard-feed-label {
  display: grid;
  border: 3px solid var(--yard-panel-edge);
  background: var(--scene-furniture);
  color: var(--doc-white);
  padding: 4px 12px 7px;
  text-align: center;
}

.yard-feed-label span {
  color: var(--doc-gold);
  font-size: clamp(0.48rem, 0.65vw, 0.6rem);
  letter-spacing: 0.12em;
}

.yard-feed-label select {
  width: 100%;
  border: 0;
  background: var(--scene-furniture);
  text-align: center;
}

.yard-feed-submit,
.yard-feed-close {
  min-height: 30px;
  background: var(--yard-panel);
}

.yard-feed-submit {
  grid-column: 2;
}

.yard-feed-close {
  grid-column: 3;
}

.yard-feeding button:hover,
.yard-feeding button:focus-visible,
.yard-feeding select:focus-visible {
  background: var(--doc-gold);
  color: var(--doc-plate);
}

.yard-feeding button:disabled {
  background: var(--color-dim);
  color: var(--color-soft-text);
  cursor: not-allowed;
}

.yard-feed-submit:disabled {
  visibility: hidden;
}

.yard-stat-panel {
  top: 1.4%;
  left: 1.2%;
  width: clamp(180px, 23%, 290px);
  border: 2px solid var(--yard-panel-edge);
  background: var(--yard-panel);
  color: var(--doc-white);
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 5px;
  text-transform: uppercase;
}

.yard-stat-panel h1 {
  margin: 0 0 4px;
  border-bottom: 1px solid var(--yard-panel-edge);
  color: var(--doc-gold);
  font-size: clamp(0.56rem, 0.85vw, 0.78rem);
  letter-spacing: 0.08em;
  text-align: center;
}

.yard-stat-panel dl,
.yard-stat-panel dt,
.yard-stat-panel dd {
  margin: 0;
}

.yard-stat-panel dl {
  display: grid;
  gap: 3px;
}

.yard-stat-panel dl > div {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 5px;
  align-items: center;
}

.yard-stat-panel dt {
  overflow: hidden;
  color: var(--doc-gold);
  font-size: clamp(0.48rem, 0.72vw, 0.66rem);
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yard-stat-panel dd {
  position: relative;
  height: clamp(13px, 1.5vw, 19px);
  overflow: hidden;
  border: 1px solid var(--yard-panel-edge);
  background: var(--yard-bar-track);
}

.yard-stat-panel dd span {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: var(--yard-bar-fill, 24%);
  background: var(--yard-bar-fill);
}

.yard-stat-panel dd em {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  color: var(--doc-white);
  font-size: clamp(0.42rem, 0.62vw, 0.58rem);
  font-style: normal;
  line-height: clamp(11px, 1.35vw, 17px);
  padding: 0 3px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yard-identity {
  top: 3%;
  right: 2%;
  display: grid;
  min-width: clamp(175px, 22%, 270px);
  justify-items: end;
  color: var(--doc-white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.55rem, 0.95vw, 0.88rem);
  line-height: 1.25;
  text-align: right;
  text-transform: uppercase;
}

.yard-identity strong {
  font-size: clamp(0.82rem, 1.45vw, 1.32rem);
  letter-spacing: 0.06em;
}

.yard-identity small {
  margin-top: 5px;
  color: var(--doc-gold);
  font-size: 0.8em;
}

.yard-identity b {
  color: var(--doc-gold);
  font-size: clamp(0.72rem, 1.25vw, 1.12rem);
}

.yard-message {
  right: 1.2%;
  bottom: 13.5%;
  left: 1.2%;
  min-height: 13%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 2px solid var(--yard-purple-edge);
  background: var(--yard-purple);
  color: var(--doc-white);
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 1.2% 1.6%;
}

.yard-message p {
  margin: 0;
  font-size: clamp(0.75rem, 1.55vw, 1.35rem);
  letter-spacing: 0.03em;
}

.yard-message button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
}

.yard-relationship {
  right: 1.2%;
  bottom: 9.2%;
  left: 1.2%;
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.5vw, 7px);
  color: var(--doc-white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.48rem, 0.75vw, 0.68rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.yard-relationship i {
  width: clamp(8px, 1vw, 13px);
  height: clamp(7px, 0.9vw, 12px);
  display: inline-block;
  background: var(--yard-heart);
  clip-path: polygon(50% 100%, 0 42%, 7% 14%, 30% 0, 50% 20%, 70% 0, 93% 14%, 100% 42%);
}

.yard-relationship i.empty {
  background: var(--color-dim);
}

.yard-actions {
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  height: 8.2%;
  background: var(--yard-panel);
  padding: 3px;
}

.yard-actions button:hover,
.yard-actions button:focus-visible,
.stable-edit-button:hover,
.yard-message button:hover {
  background: var(--doc-gold);
  color: var(--doc-plate);
}

.owner-screen.is-feeding .yard-message {
  bottom: 6%;
}

.owner-screen.is-feeding .yard-message button,
.owner-screen.is-feeding .yard-actions {
  display: none;
}

.owner-screen.is-feeding .yard-relationship {
  bottom: 1.4%;
}

.owner-screen.is-training-select .yard-actions,
.owner-screen.is-training-drill .yard-stat-panel,
.owner-screen.is-training-drill .yard-identity,
.owner-screen.is-training-drill .yard-message,
.owner-screen.is-training-drill .yard-actions,
.owner-screen.is-training-result .yard-actions {
  display: none;
}

.owner-screen.is-training-select .yard-message,
.owner-screen.is-training-result .yard-message {
  bottom: 6%;
}

.owner-screen.is-training-select .yard-message button,
.owner-screen.is-training-result .yard-message button {
  display: none;
}

.owner-screen.is-training-select .yard-relationship,
.owner-screen.is-training-result .yard-relationship {
  bottom: 1.4%;
}

.owner-screen.is-training-drill .yard-relationship {
  bottom: 1.2%;
}

.owner-screen.is-breeding .yard-stat-panel,
.owner-screen.is-breeding .yard-identity,
.owner-screen.is-breeding .yard-message,
.owner-screen.is-breeding .yard-relationship,
.owner-screen.is-breeding .yard-actions {
  display: none;
}

.builder-dialog {
  width: min(920px, calc(100% - 24px));
  max-height: min(92vh, 900px);
  overflow: auto;
  border: 2px solid var(--doc-line);
  background: var(--color-panel);
  color: var(--color-text);
  padding: 0;
}

.builder-dialog::backdrop {
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
}

.builder-dialog-head {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--color-dark);
  background: var(--color-panel-raised);
  padding: 14px 18px;
}

.builder-dialog-head h2 {
  margin: 0;
}

.builder-dialog .locked-banner.visible {
  margin: 14px 18px 0;
}

@media (max-width: 680px) {
  .stable-shell {
    width: 100%;
    padding-top: 0;
  }

  .stable-topbar {
    padding: 5px 9px;
    margin: 0;
  }

  .stable-topbar .top-status {
    display: none;
  }

  .owner-screen {
    min-height: 500px;
    border-right: 0;
    border-left: 0;
    aspect-ratio: auto;
  }

  .owner-screen #horsePreview {
    height: 100%;
    min-height: 0;
  }

  .yard-stat-panel {
    width: 190px;
  }

  .yard-identity {
    min-width: 145px;
  }

  .yard-message {
    bottom: 17%;
    min-height: 15%;
  }

  .yard-feeding {
    right: 8%;
    bottom: 23%;
    left: 8%;
    grid-template-columns: 58px minmax(140px, 1fr) 58px;
  }

  .yard-breeding {
    width: min(62%, 330px);
  }

  .breeding-stage-labels {
    top: 4%;
    left: 65%;
    grid-template-columns: 1fr;
  }

  .training-crt {
    left: 29%;
    width: 47%;
  }

  .training-mode-row {
    right: 10%;
    left: 10%;
  }

  .training-course-row {
    right: 2%;
    left: 2%;
  }

  .training-selector-actions {
    right: 20%;
    left: 20%;
  }

  .yard-message button {
    display: none;
  }

  .yard-relationship {
    bottom: 12.2%;
  }

  .yard-actions {
    grid-template-columns: repeat(3, 1fr);
    height: 11%;
  }

  .owner-attract-mark {
    top: 3%;
    right: 4%;
  }

  .owner-attract-start {
    bottom: 25%;
  }

  .owner-attract-start button {
    min-width: 82vw;
    min-height: 62px;
  }

  .owner-attract-instructions {
    right: 3%;
    bottom: 8%;
    left: 3%;
    font-size: 0.64rem;
  }

  .owner-attract-status {
    right: 3%;
    bottom: 2%;
    left: 3%;
    display: flex;
    justify-content: space-between;
    font-size: 0.54rem;
  }

  .owner-attract-ident {
    inset: 0;
    display: none;
  }

  .owner-attract-ident strong {
    top: 13%;
    left: 4%;
  }

  .owner-attract-ident span {
    top: 25%;
    right: 4%;
  }

  .owner-attract-winner {
    inset: 0;
  }

  .owner-attract-winner span {
    top: 38%;
    right: 3%;
    left: 3%;
    width: auto;
  }

  .builder-dialog {
    width: calc(100% - 12px);
    max-height: calc(100svh - 12px);
  }

  .builder-dialog-head,
  .builder-dialog-prompt {
    padding-right: 10px;
    padding-left: 10px;
  }
}

/* The six inherited starting-bars the stud book breeds, shown as a ruled list. Both
   the builder yard and the 3D owner stable render through the shared
   breeding-stats renderer, so these classes carry the shared look. The
   inherited panel is in-flow (not an overlay) so it never collides with the
   absolutely-positioned yard panels. */
.yard-inherited,
.godot-owner-inherited {
  margin: 0.5rem 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--card-rule-strong);
  background: none;
  color: var(--card-rail);
  font-family: var(--font-ui);
  font-weight: 500;
}

.inherited-stats-title {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--card-rule);
  color: var(--card-chalk);
  font-size: clamp(0.62rem, 0.85vw, 0.78rem);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.inherited-stats-list,
.inherited-stat-row,
.inherited-stats-list dt,
.inherited-stats-list dd {
  margin: 0;
}

.inherited-stats-list {
  display: grid;
  gap: 0;
}

.inherited-stat-row {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--card-rule);
}

.inherited-stat-row dt {
  overflow: hidden;
  color: var(--card-chalk);
  font-size: clamp(0.48rem, 0.72vw, 0.66rem);
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inherited-stat-row dd {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: clamp(13px, 1.5vw, 19px);
  overflow: hidden;
  border: 0;
  background: none;
}

.inherited-meter {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  accent-color: var(--card-silk);
}

.inherited-build-note {
  margin: 7px 0 0;
  color: var(--card-chalk);
  font-size: 0.7rem;
  text-align: left;
}

.inherited-stat-row dd em {
  flex: 0 0 auto;
  color: var(--card-rail);
  font-size: clamp(0.46rem, 0.68vw, 0.64rem);
  font-style: normal;
  text-align: right;
}

.inherited-total {
  margin: 7px 0 0;
  color: var(--card-rail);
  font-size: clamp(0.5rem, 0.75vw, 0.72rem);
  text-align: left;
  text-transform: none;
}

.currency-wordmark { font-family: var(--font-display); font-style: normal; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.currency-wordmark i { font-style: italic; }