@import "../../styles/scrollbars.css";
:root {color-scheme:light; --ink:#28221c; --paper:#fff8e8; --yellow:#ffd139; --rule:#28221c28;}
:root[data-theme="dark"] {color-scheme:dark; --paper:#302e2b; --ink:#fff4dc; --rule:#fff4dc30;}
* {box-sizing:border-box; margin:0; padding:0;}
[hidden] {display:none !important;}
body {overflow:hidden; font:14px/1.35 Arial,sans-serif; color:var(--ink); background:#e8e2c9;}
canvas {display:block;}
button {font:inherit; cursor:pointer; touch-action:manipulation;}
button:focus-visible {outline:3px solid #3498db; outline-offset:3px;}
ol {list-style:none;}
#ui-overlay {position:absolute; inset:0; pointer-events:none;}
#timer, #leaderboard, #scoreboard {border:2px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 #28221c; border-radius:8px;}
#timer {position:absolute; top:12px; left:50%; transform:translateX(-50%); min-width:86px; padding:5px 14px; text-align:center;}
#timer-label {display:block; font-size:10px; font-weight:800; letter-spacing:.12em;}
#timer-value {font:800 24px/1.1 monospace; font-variant-numeric:tabular-nums;}
#leaderboard {position:absolute; right:12px; top:66px; width:164px; padding:9px;}
#leaderboard-title {font-size:10px; letter-spacing:.1em; margin-bottom:6px;}
.leaderboard-entry {display:flex; align-items:center; gap:6px; min-height:29px; border-top:1px solid var(--rule); font-size:12px; font-weight:700;}
.horse-position {font-size:10px; opacity:.65; width:12px; flex-shrink:0;}
.horse-number {display:grid; place-items:center; width:21px; height:21px; flex-shrink:0; background:var(--silk); color:#28221c; border:1.5px solid #28221c; border-radius:50%; font-size:11px;}
.horse-name {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#countdown-overlay {position:absolute; inset:0; display:grid; place-items:center; background:#28221c16;}
#countdown-number {font:900 clamp(72px,17vw,150px)/1 Impact,Arial,sans-serif; color:var(--yellow); -webkit-text-stroke:2px #28221c; text-shadow:5px 6px 0 #28221c;}
.race-caption {position:absolute; bottom:22px; left:50%; transform:translateX(-50%); text-align:center; white-space:nowrap;}
#race-status {display:inline-block; padding:6px 12px; border-radius:5px; background:var(--paper); color:var(--ink); border:1px solid var(--ink); font-size:10px; font-weight:800; letter-spacing:.08em;}
#start-button, #restart-button {display:block; margin:8px auto 0; padding:10px 22px; min-height:42px; border:2px solid #28221c; border-radius:7px; background:var(--yellow); color:#28221c; box-shadow:3px 3px 0 #28221c; font-size:13px; font-weight:800; pointer-events:auto; transition:transform .15s;}
#start-button:hover, #restart-button:hover {transform:translateY(-2px);}
#scoreboard {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(380px,calc(100% - 28px)); max-height:calc(100% - 90px); overflow:auto; padding:18px; pointer-events:auto;}
#scoreboard-title {font:900 27px/1.1 Impact,Arial,sans-serif; letter-spacing:.03em; margin-bottom:12px;}
.scoreboard-entry {display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--rule);}
.scoreboard-entry strong {flex:1; min-width:0; overflow-wrap:anywhere; font-size:13px;}
.result-rank {display:grid; place-items:center; width:24px; height:24px; background:var(--yellow); border:1.5px solid #28221c; color:#28221c; border-radius:50%; font-weight:900;}
.result-time {font:12px monospace;}
#race-progress {position:absolute; bottom:0; left:0; width:100%; height:7px; border:0; background:#28221c20; color:var(--yellow);}
#race-progress::-webkit-progress-bar {background:#28221c20;}
#race-progress::-webkit-progress-value {background:var(--yellow);}
#race-progress::-moz-progress-bar {background:var(--yellow);}
#load-error {position:absolute; inset:30% 10% auto; padding:20px; border:2px solid #ad332b; border-radius:8px; background:var(--paper); text-align:center;}
body #game-audio-controls {top:auto; bottom:16px; left:12px; height:40px; opacity:1; background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:7px; box-shadow:2px 2px 0 #28221c;}
body #game-audio-controls:hover, body #game-audio-controls:focus-within {background:var(--paper);}
body #game-audio-controls button {width:28px; height:32px;}
body #game-audio-controls input {width:65px;}
@media(max-width:600px) {
  #timer {top:10px; left:12px; transform:none; padding:5px 10px; min-width:76px;}
  #timer-value {font-size:21px;}
  #leaderboard {top:62px; right:10px; left:10px; width:auto; padding:5px 7px;}
  #leaderboard-content {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:7px;}
  #leaderboard-title {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
  .horse-position {display:none;}
  .leaderboard-entry {font-size:10px; min-height:22px; gap:4px;}
  #leaderboard-title {font-size:9px;}
  .horse-number {width:18px; height:18px; font-size:10px;}
  .race-caption {left:auto; right:10px; bottom:17px; transform:none;}
  #race-status {font-size:8px; padding:5px 7px;}
  #start-button {padding:8px 12px; font-size:11px; min-height:38px;}
  body #game-audio-controls {left:10px; gap:3px; padding:0 5px;}
  body #game-audio-controls input {width:42px;}
  body #game-audio-controls output {display:none;}
  #scoreboard {padding:12px;}
  .scoreboard-entry {padding:5px 0;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none !important; transition:none !important;}}
/* Derby results share boxing's winner / standings / partner structure. */
#scoreboard {width:min(680px,calc(100% - 32px)); max-height:calc(100% - 32px); padding:0; display:flex; flex-direction:column; overflow:hidden; border-radius:14px; box-shadow:5px 6px 0 #28221c;}
.result-header {position:relative; display:grid; grid-template-columns:1fr 36%; align-items:center; min-height:130px; flex-shrink:0; padding:10px 22px; background:color-mix(in srgb,var(--winner-silk,#ffd139) 58%,var(--paper)); border-bottom:2px solid var(--ink); overflow:hidden;}
.winner-copy {position:relative; z-index:1; min-width:0;}
.eyebrow {font-size:10px; letter-spacing:.18em; font-weight:900;}
#winner-name {font:900 clamp(24px,4vw,38px)/1.05 Impact,Arial,sans-serif; margin:9px 0; overflow-wrap:anywhere;}
#winner-time {font-size:11px; font-weight:700; line-height:1.6; font-variant-numeric:tabular-nums;}
#winner-model {height:112px; width:100%; position:relative; z-index:1;}
#winner-model canvas {width:100%; height:100%;}
#winner-number {position:absolute; right:14px; top:0; font:900 76px/1 Impact,sans-serif; color:var(--ink); opacity:.1;}
.result-scroll {padding:14px 16px 12px 22px; overflow:auto; min-height:0; overscroll-behavior:contain; scrollbar-gutter:stable;  }
.result-icon {display:inline-block; width:16px; height:16px; flex:none; vertical-align:middle; margin-right:6px;}
.eyebrow,#scoreboard-title,#sponsors-label {display:flex; align-items:center;}
.eyebrow .result-icon {width:18px; height:18px;}
#restart-button .result-icon {width:18px; height:18px;}
.time-unit {font:600 10px Arial,sans-serif; opacity:.65;}

#scoreboard-title {font:900 13px/1.3 Arial,sans-serif; letter-spacing:.12em; margin:0 0 10px;}
.result-table {width:100%; border-collapse:separate; border-spacing:0 5px; table-layout:fixed;}
.result-table th,.result-table td {text-align:left; vertical-align:middle; padding:9px 8px;}
.result-table thead th {font-size:10px; font-weight:700; white-space:nowrap; color:var(--ink); opacity:.8; padding-top:2px; padding-bottom:7px;}
.result-table thead .result-icon {width:13px; height:13px; margin-right:4px;}
.result-table thead th:first-child {width:78px;}
.result-table thead th:nth-child(3) {width:100px; text-align:right;}
.result-table thead th:last-child {width:84px; text-align:right;}
.scoreboard-entry {display:table-row; border:0;}
.scoreboard-entry > * {background:color-mix(in srgb,var(--ink) 4%,var(--paper));}
.scoreboard-entry > :first-child {border-radius:7px 0 0 7px;}
.scoreboard-entry > :last-child {border-radius:0 7px 7px 0;}
.scoreboard-entry:first-child > * {background:color-mix(in srgb,var(--winner-silk,#ffd139) 38%,var(--paper));}
.result-horse {display:flex; align-items:center; gap:10px; font-size:14px; min-width:0;}
.result-horse > span:last-child {overflow-wrap:anywhere; min-width:0;}
.horse-number {border-radius:6px; font-weight:900;}
.result-table .result-time,.result-table .result-gap {font:700 13px/1.4 monospace; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right;}
.result-gap {color:color-mix(in srgb,var(--ink) 75%,var(--paper));}
.result-table .result-gap {font-size:12px; font-weight:500;}
.result-rank {width:26px; height:26px; border-radius:7px; background:transparent; border:0; color:var(--ink);}
.scoreboard-entry:first-child .result-rank {background:#f4d995; border:1px solid #28221c; color:#28221c;}
.scoreboard-entry:nth-child(2) .result-rank {background:#dbe3e7; color:#28221c;}
.scoreboard-entry:nth-child(3) .result-rank {background:#ebccb5; color:#28221c;}
#race-sponsors {border-top:1px solid var(--rule); margin-top:12px; padding-top:12px;}
#sponsors-label {font:800 9px/1.3 Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; margin-bottom:9px; opacity:.7;}
#sponsors-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;}
.sponsor-card {display:block; min-width:0; color:var(--ink); text-decoration:none; border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:var(--paper);}
.sponsor-card img {display:block; width:100%; height:76px; object-fit:cover;}
.sponsor-card span {display:block; font-size:10px; font-weight:800; padding:5px 7px; overflow-wrap:anywhere;}
.sponsor-card:focus-visible,.result-scroll:focus-visible {outline:3px solid #3498db; outline-offset:-3px;}
.result-actions {padding:12px 24px 16px; flex-shrink:0; border-top:1px solid var(--rule); background:var(--paper);}
#restart-button {margin:0; width:100%; min-height:44px;}
@media(max-width:600px) {
  #scoreboard {width:calc(100% - 20px); max-height:calc(100% - 20px); padding:0;}
  .result-header {min-height:108px; padding:8px 14px; grid-template-columns:1fr 38%;}
  #winner-model {height:96px;}
  #winner-name {font-size:24px; margin:6px 0;}
  #winner-time {font-size:9px;}
  .result-scroll {padding:12px 10px 8px;}
  .result-table th,.result-table td {padding:8px 3px;}
  .result-table thead th:first-child {width:42px;}
  .result-table thead th:nth-child(3) {width:70px;}
  .result-table thead th:last-child {width:57px;}
  .result-horse {font-size:12px; gap:5px;}
  .result-table thead .result-icon {display:none;}
  .result-table thead th {font-size:9px;}
  .sponsor-card img {height:55px;}
  .result-table .result-time,.result-table .result-gap {font-size:10px;}
  .result-actions {padding:10px 12px 12px;}
  #sponsors-grid {gap:6px;}
}
@media(max-height:480px) {
  .result-header {min-height:90px; padding:8px 16px;}
  #winner-model {height:88px;}
  #winner-name {font-size:25px; margin:5px 0;}
}
#camera-button {position:absolute; top:14px; left:12px; min-height:38px; padding:7px 12px; border:1.5px solid var(--ink); border-radius:7px; background:var(--paper); color:var(--ink); font-size:11px; font-weight:800; pointer-events:auto; box-shadow:2px 2px 0 #28221c;}
#camera-button[aria-pressed="true"] {background:#c5dccc; color:#28221c;}
#scoreboard:not([hidden]) ~ #race-progress {opacity:.4;}
@media(max-width:600px) {#camera-button {left:auto; right:60px; top:12px; font-size:9px; max-width:145px; padding:6px 9px;}}
.result-actions {display:flex; align-items:center; gap:12px;}
.result-actions #restart-button {flex:1; width:auto;}
#scoreboard #game-audio-controls {position:static; flex-shrink:0; margin:0; box-shadow:none; height:40px;}
@media(max-width:600px) {#scoreboard #game-audio-controls input,#scoreboard #game-audio-controls output {display:none;}}
/* Rank changes preserve horse identity while their rows trade places. */
.leaderboard-entry {position:relative; border-radius:4px; transition:background-color 180ms ease;}
.leaderboard-entry[data-leading="true"] {background:color-mix(in srgb,var(--silk) 32%,transparent);}
.result-table .result-rank.podium-cup {width:32px; height:36px; border:0; border-radius:0; background:transparent;}
.podium-cup svg {display:block; width:32px; height:36px; overflow:visible;}
.podium-cup-1 {--cup:#e8b941; --cup-dark:#ad761c; --cup-shine:#fff2bc;}
.podium-cup-2 {--cup:#c8d4df; --cup-dark:#728393; --cup-shine:#f6fbff;}
.podium-cup-3 {--cup:#d7a17d; --cup-dark:#925a36; --cup-shine:#ffe2c5;}
.cup-body,.cup-stem {fill:var(--cup); stroke:var(--cup-dark); stroke-width:1.4; stroke-linejoin:round;}
.cup-handles {fill:none; stroke:var(--cup-dark); stroke-width:2.5; stroke-linecap:round;}
.cup-shine {fill:none; stroke:var(--cup-shine); stroke-width:2; stroke-linecap:round;}
.podium-cup text {fill:#30271c; font:900 10px Arial,sans-serif;}
@media(max-width:600px) {.result-table .result-rank.podium-cup,.podium-cup svg {width:26px; height:30px;}}