/* Appearance layers and Pixel-only affine screen mapping; no interpolation or race state. */
.track-style{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:0;flex:0 0 auto}
.track-style select{font:inherit;color:#173b2c;border:1px solid #b8c7bc;background:#fff9e9;border-radius:5px;min-height:32px;padding:4px 8px;max-width:130px}
.board-heading{flex-wrap:wrap}
/* Stable geometry at all viewport widths, including the former mobile breakpoint. */
#track .lane{height:34px}#track .marker{width:26px;height:26px;top:4px}
.pixel-scenery,.pixel-verge,.painted-number,.finish-post{display:none;pointer-events:none}
.board[data-skin=pixel]{background:#23644b;border:3px solid #173f38;padding:15px 25px;box-shadow:0 6px 0 #14392e,0 12px 24px #17362620}
.board[data-skin=pixel] .board-heading{color:#fff3ce}
/* A common visual boundary includes the existing 8px grass/marker overhang.
   The matching inner offset keeps the lane origin and width exactly unchanged. */
.track-viewport{display:contents}
.board[data-skin=pixel] .track-viewport{display:block;margin:12px 0 0 -8px;overflow:hidden}
.board[data-skin=pixel] .pixel-scenery{display:block;position:relative;overflow:hidden;height:104px;margin:0;background:#6bc8f5 url('assets/track/scenery.svg?v=art-4') repeat-x bottom center;image-rendering:pixelated}
.board[data-skin=pixel] .pixel-scenery:before{content:'';position:absolute;width:246px;height:65px;left:50%;bottom:10px;transform:translateX(-50%);background:url('assets/track/grandstand.svg?v=art-4') no-repeat center;pointer-events:none}
.board[data-skin=pixel] .pixel-scenery:after{content:'';position:absolute;left:0;right:0;bottom:0;height:17px;background:url('assets/track/fence-upper.svg') repeat-x left bottom;pointer-events:none}
.board[data-skin=pixel] #track{position:relative;isolation:isolate;margin:0 0 0 8px;border-radius:0;background:transparent;box-shadow:none}
/* One surface, including both 18px gutters. The extra 8px on the left covers
   the existing 26px starting markers without moving their lane origin. */
.board[data-skin=pixel] #track:before{content:'';position:absolute;inset:0 0 0 -8px;z-index:-1;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 33px,#eff5ce80 33px 34px),url('assets/track/grass.svg') repeat left top,repeating-linear-gradient(to bottom,#7fbd50 0 34px,#70af49 34px 68px);image-rendering:pixelated}
.board[data-skin=pixel] .lane{background:transparent;border-bottom:1px solid transparent}
.board[data-skin=pixel] .lane:nth-child(even){background:transparent}
.board[data-skin=pixel] .lane:last-child{border-bottom:0}
.board[data-skin=pixel] .lane:before{border-left:3px solid #fff;z-index:0}
/* Grass viewport origin is 26px before the old start. A 52px sprite needs
   32px more start room for a 6px minimum margin. The common affine mapping
   x' = x + 32px * (1 - x/finish) preserves the exact finish and stays smooth
   through runoff. Individual translate composes with the existing anchor. */
.board[data-skin=pixel]{--start-shift:32px}
.board[data-skin=pixel] #track .marker{translate:calc(var(--start-shift) * var(--start-weight,1)) 0}
.board[data-skin=pixel] .lane:before{left:var(--start-shift)}
.board[data-skin=pixel] .track-labels>span:first-child{translate:var(--start-shift) 0}
/* The stripe starts at the same --finish coordinate set by the locked renderer. */
.board[data-skin=pixel] #track .lane:after{border:0;width:8px;background:conic-gradient(#fff6da 25%,#263c39 0 50%,#fff6da 0 75%,#263c39 0) 0 0/8px 8px;z-index:0}
.board[data-skin=pixel] .painted-number{display:block;position:absolute;left:calc(var(--start-shift) + 5px);top:0;height:34px;width:18px;font-size:0;text-shadow:none;background:url('assets/track/lane-numbers.svg') no-repeat 0 0;image-rendering:pixelated;z-index:0}
.board[data-skin=pixel] .lane:nth-child(2) .painted-number{background-position-x:-18px}
.board[data-skin=pixel] .lane:nth-child(3) .painted-number{background-position-x:-36px}
.board[data-skin=pixel] .lane:nth-child(4) .painted-number{background-position-x:-54px}
.board[data-skin=pixel] .lane:nth-child(5) .painted-number{background-position-x:-72px}
.board[data-skin=pixel] .lane:nth-child(6) .painted-number{background-position-x:-90px}
.board[data-skin=pixel] .lane:nth-child(7) .painted-number{background-position-x:-108px}
.board[data-skin=pixel] .lane:nth-child(8) .painted-number{background-position-x:-126px}
.board[data-skin=pixel] .lane:nth-child(9) .painted-number{background-position-x:-144px}
.board[data-skin=pixel] .finish-post{display:block;position:absolute;left:var(--finish);top:-24px;width:8px;height:24px;background:repeating-linear-gradient(#fff6da 0 4px,#263c39 4px 8px);z-index:0}
.board[data-skin=pixel] .finish-post:before{content:'';position:absolute;left:8px;top:0;width:22px;height:14px;background:conic-gradient(#fff6da 25%,#263c39 0 50%,#fff6da 0 75%,#263c39 0) 0 0/8px 8px;clip-path:polygon(0 0,100% 0,80% 50%,100% 100%,0 100%)}
.board[data-skin=pixel] .pixel-verge{display:block;height:22px;background:url('assets/track/fence-lower.svg') repeat-x left top;border-bottom:4px solid #2c6845;margin-bottom:10px;position:relative;image-rendering:pixelated}
.board[data-skin=pixel] .pixel-verge:after{display:none}
@media(max-width:560px){.board[data-skin=pixel]{padding:13px}.track-style{gap:4px}.board-heading{gap:8px}}
/* Use an outline so skin changes never alter the lane's containing-block width. */
.board[data-skin=pixel]{border:0;outline:3px solid #173f38;outline-offset:-3px;padding:18px 28px}
@media(max-width:560px){.board[data-skin=pixel]{padding:16px}}