/* Phase 8C layers are Pixel-only and live inside the existing scrolling track. */
.phase8c-gate,.finish-placards{display:none;position:absolute;pointer-events:none}
.board[data-skin=pixel][data-phase8c] .finish-placards{display:block;inset:0;z-index:4}
.board[data-skin=pixel]:is([data-phase8c=betting],[data-phase8c=locked],[data-phase8c=running]) .phase8c-gate{display:block}
.phase8c-gate{left:-27px;width:62px;image-rendering:pixelated}
/* Betting keeps a clip margin for the horses. Crop the gate itself at the viewport edge (27px overhang minus the track's 8px inset). */
.board[data-skin=pixel][data-phase8c=betting] .phase8c-gate{clip-path:inset(0 0 0 19px)}
.phase8c-gate-floor{top:-34px;height:344px;z-index:0}
.phase8c-gate-roofs{top:-39px;height:349px;z-index:2}
.board[data-skin=pixel][data-phase8c] .pixel-verge{z-index:3}
.board[data-skin=pixel][data-phase8c] #start-overlay{z-index:5}
/* The extra layers follow lane nine in the DOM, so retain its original bottom edge. */
.board[data-skin=pixel][data-phase8c] #track .lane:nth-child(9){border-bottom:0}
.fixed-rank{position:absolute;width:0;height:0}
.board[data-skin=pixel][data-phase8c] .fixed-rank[data-place]::before{left:0;top:0;transform:translateY(-50%);z-index:3}
.board[data-skin=pixel][data-phase8c] .fixed-rank:not([data-burst-state=playing])::after,
.board[data-skin=pixel][data-phase8c] .marker::before,
.board[data-skin=pixel][data-phase8c] .marker::after{display:none!important}
.board[data-skin=pixel][data-phase8c] .fixed-rank[data-burst-state=playing]::after{top:-4px}
/* Keep the existing number cells and the original 3 px stripe footprint. */
.board[data-skin=pixel][data-phase8c] .painted-number{
 background-image:url('assets/track/weathered-numbers.svg');
 filter:none;
}
.board[data-skin=pixel][data-phase8c] #track .lane::before{
 border-left-color:transparent;
}
.board[data-skin=pixel][data-phase8c] #track .lane:first-child::before{
 bottom:auto;
 height:306px;
 background:url('assets/track/weathered-stripe.svg') no-repeat left top border-box;
 image-rendering:pixelated;
 pointer-events:none;
}

/* Both finish decorations share the established finish crossing axis. */
.phase8c-finish-flag{display:none}
.board[data-skin=pixel][data-phase8c] #track .lane::after,
.board[data-skin=pixel][data-phase8c] .finish-post{display:none}
.board[data-skin=pixel][data-phase8c] #track .lane:first-child::after{
 display:block;
 top:12px;
 bottom:auto;
 width:8px;
 height:306px;
 transform:translateX(-50%);
 background:url('assets/track/phase8c-finish-checks.svg') no-repeat;
 image-rendering:pixelated;
 pointer-events:none;
}
.board[data-skin=pixel][data-phase8c] .phase8c-finish-flag{
 display:block;
 position:absolute;
 left:var(--finish);
 top:-64px;
 width:63px;
 height:75px;
 transform:translateX(-9px);
 z-index:1;
 image-rendering:pixelated;
 pointer-events:none;
}

.board[data-skin=pixel][data-phase8c] .fixed-rank{
 --spark-light:#fff8bf;--spark-accent:#ffda53;--sparkle-strength:1;
}
.board[data-skin=pixel][data-phase8c] .fixed-rank[data-place="2"]{
 --spark-light:#ffffff;--spark-accent:#caedff;
}
.board[data-skin=pixel][data-phase8c] .fixed-rank[data-place="3"]{
 --spark-light:#ffebb9;--spark-accent:#ffb36d;
}
.board[data-skin=pixel][data-phase8c] .fixed-rank[data-burst-state=playing]::after{
 left:7px;
 background:var(--spark-light);
 box-shadow:-18px 4px var(--spark-accent),-13px -6px 0 -1px var(--spark-light),
 17px 2px var(--spark-light),13px 7px 0 -1px var(--spark-accent),
 15px -6px 0 -1.5px var(--spark-light),14px -6px 0 -1.5px var(--spark-accent),
 16px -6px 0 -1.5px var(--spark-accent),15px -7px 0 -1.5px var(--spark-accent),
 15px -5px 0 -1.5px var(--spark-accent);
 animation:placement-refined 2500ms linear both;
}
@keyframes placement-refined{
 0%{opacity:0;scale:.36;translate:0 0}
 7%{opacity:var(--sparkle-strength,1);scale:1.12}
 26%{opacity:var(--sparkle-strength,1);scale:1.55}
 50%{opacity:var(--sparkle-strength,1);scale:1.71;translate:0 -1px}
 65%{opacity:calc(var(--sparkle-strength,1) * .90);scale:1.75;translate:0 -1px}
 100%{opacity:0;scale:1.75;translate:0 -2px}
}