/* Horse race's own look, on the game template (static/game.css styles the shell): one canvas track (static/race.js
   draws the order strip, the five lanes of cut cells, the runners and the photo finish) and, in Auto, the hairline
   Random at the top right of the track. The panel shows read-only numbers. */

.rc-stage { position: relative; flex: 1; min-height: 340px; }
.rc-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: pan-y; }
.rc-cv:focus-visible { box-shadow: inset 0 0 0 1.5px rgb(216 165 72 / .7); border-radius: 14px; }
.rc-rnd.gm-sec { --fill: var(--stage); --lnc: rgb(151 164 198 / .32); position: absolute; right: 8px; top: 8px; z-index: 2; min-width: 0; height: 34px; padding: 0 12px;
  display: none; align-items: center; gap: 7px; font: 600 14px/1 var(--f-ui); }
.rc-stage.auto .rc-rnd { display: flex; }
.rc-rnd span { color: var(--ink-2); transition: color var(--t-hover); }
.rc-rnd svg { width: 16px; height: 16px; overflow: visible; }
.rc-rnd path { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-rnd.on { --lnc: var(--gold-line); }
.rc-rnd.on span { color: var(--ink); } .rc-rnd.on path { stroke: var(--gold); }
.gm.autoplaying .rc-rnd, .gm.playing .rc-rnd { opacity: .5; pointer-events: none; }

@media (max-width: 899px) {
  .gm[data-game="race"] .gm-play { min-height: 0; }
  .rc-stage { flex: none; height: 360px; min-height: 0; }
}