/* Production artwork v1: keep the 26px movement box and right-edge anchor intact. */
.horse-sprite{display:none;pointer-events:none}
.board[data-skin=pixel] #track .marker.horse-prototype{background:transparent!important;border:0;border-radius:0;box-shadow:none;font-size:0}
/* Enlarge only the child artwork. Canvas bottom stays at lane y=32;
   nose stays on the unchanged moving box's right edge. No per-lane clipping. */
.board[data-skin=pixel] .horse-prototype .horse-sprite{display:block;position:absolute;right:0;top:-20px;width:52px;height:48px;background:url('assets/horses/large-v1/horse-1-gallop.png') no-repeat 0 0;background-size:416px 48px;image-rendering:pixelated;animation:horse-gallop 475ms steps(8,end) infinite;animation-play-state:paused}
.board[data-skin=pixel] [data-sprite-horse="2"] .horse-sprite{background-image:url('assets/horses/large-v1/horse-2-gallop.png')}
.board[data-skin=pixel] [data-sprite-horse="3"] .horse-sprite{background-image:url('assets/horses/large-v1/horse-3-gallop.png')}
/* Fixed negative delays spread the cycle without touching movement or RNG.
   Nine distinct phases share eight discrete poses; phases never change mid-race. */
.board[data-skin=pixel] [data-sprite-horse="1"] .horse-sprite{animation-delay:0ms}
.board[data-skin=pixel] [data-sprite-horse="2"] .horse-sprite{animation-delay:-158ms}
.board[data-skin=pixel] [data-sprite-horse="3"] .horse-sprite{animation-delay:-317ms}
.board[data-skin=pixel] [data-sprite-horse="4"] .horse-sprite{background-image:url('assets/horses/large-v1/horse-4-gallop.png');animation-delay:-53ms}
.board[data-skin=pixel] [data-sprite-horse="5"] .horse-sprite{background-image:url('assets/horses/large-v1/horse-5-gallop.png');animation-delay:-211ms}
.board[data-skin=pixel] [data-sprite-horse="6"] .horse-sprite{background-image:url('assets/horses/large-v1/horse-6-gallop.png');animation-delay:-369ms}
.board[data-skin=pixel] [data-sprite-horse="7"] .horse-sprite{background-image:url('assets/horses/large-v1/horse-7-gallop.png');animation-delay:-106ms}
.board[data-skin=pixel] [data-sprite-horse="8"] .horse-sprite{background-image:url('assets/horses/large-v1/horse-8-gallop.png');animation-delay:-264ms}
.board[data-skin=pixel] [data-sprite-horse="9"] .horse-sprite{background-image:url('assets/horses/large-v1/horse-9-gallop.png');animation-delay:-422ms}
/* Preserve the viewport's margin containment and geometry while allowing the
   wider tail at the fixed start origin. Scenery still clips inside its own box. */
.board[data-skin=pixel] .track-viewport{display:flow-root;overflow:clip;overflow-clip-margin:26px}
.board[data-skin=pixel] .horse-prototype[data-galloping=true] .horse-sprite{animation-play-state:running}
.board[data-skin=pixel] #track .marker.horse-prototype.winner{outline:none}
.board[data-skin=pixel] .horse-prototype.winner .horse-sprite{outline:none}
/* Rank comes from the official order only after the existing crossing anchor.
   Marker right edge is the nose; top 5.5 + marker top 4 centers a 15px
   placard at lane y=17. A 2px gap fits the existing responsive runoff. */
.board[data-skin=pixel] .horse-prototype:is([data-place="1"],[data-place="2"],[data-place="3"]):before{content:'1st';position:absolute;left:calc(100% + 2px);top:5.5px;width:23px;height:15px;display:grid;place-items:center;background:var(--medal-fill,#ffe16b);border:2px solid var(--medal-edge,#b47719);color:var(--medal-ink,#53320b);font:900 10px/1 monospace;box-shadow:0 2px var(--medal-shadow,#795019),inset 0 1px #fff6c1;pointer-events:none;z-index:2}
.board[data-skin=pixel] .horse-prototype[data-place="2"]{--medal-fill:#e3edf1;--medal-edge:#7a909d;--medal-ink:#263d49;--medal-shadow:#526570;--sparkle-strength:.65}
.board[data-skin=pixel] .horse-prototype[data-place="3"]{--medal-fill:#e8ae76;--medal-edge:#a46637;--medal-ink:#583318;--medal-shadow:#714524;--sparkle-strength:.5}
.board[data-skin=pixel] .horse-prototype[data-place="2"]:before{content:'2nd'}
.board[data-skin=pixel] .horse-prototype[data-place="3"]:before{content:'3rd'}
.board[data-skin=pixel] .horse-prototype:is([data-place="1"],[data-place="2"],[data-place="3"]):after{content:'';position:absolute;left:calc(100% + 12px);top:11px;width:4px;height:4px;background:#fff5b1;box-shadow:-14px -3px var(--medal-fill,#ffd239),14px -4px var(--medal-fill,#ffe995),-8px -12px var(--medal-fill,#ffdc64),8px -14px #fff3b2,-17px 6px var(--medal-fill,#f4bd45),16px 7px var(--medal-fill,#ffe995);pointer-events:none;animation:winner-sparkles 1600ms ease-out both;z-index:2}
.board[data-skin=pixel] .horse-prototype.bet-horse .horse-sprite{filter:drop-shadow(0 0 2px #fff2a6) drop-shadow(0 0 3px #ffe18b88)}
@media(max-width:360px){.board[data-skin=pixel] .horse-prototype:is([data-place="1"],[data-place="2"],[data-place="3"]):before{left:calc(100% + 1px);width:20px;font-size:9px}}
@keyframes winner-sparkles{0%{opacity:0;scale:.3}12%,35%{opacity:var(--sparkle-strength,1)}60%{opacity:var(--sparkle-strength,.9);scale:1.15}100%{opacity:0;scale:1.65;translate:0 -6px}}
@keyframes horse-gallop{from{background-position-x:0}to{background-position-x:-416px}}
@media(prefers-reduced-motion:reduce){.board[data-skin=pixel] .horse-prototype .horse-sprite{animation:none}}
@media(prefers-reduced-motion:reduce){.board[data-skin=pixel] .horse-prototype:after{animation:none!important;display:none}}
