/* Three playable art directions; positions and checkpoint rules are shared. */
body[data-playing="yes"][data-scene="1"]{--scene:url('/assets/stadium.webp');--tint:#e4efd6}
body[data-playing="yes"][data-scene="2"]{--scene:url('/assets/safari.webp');--tint:#f2e2c6;--ink:#543c29;--muted:#806747;--scene-accent:#a75e35}
body[data-playing="yes"][data-scene="3"]{--tint:#101c34;--ink:#f3ebd1;--muted:#a8bfd3;--scene-accent:#93ecd0;--forest:#152b45}
body[data-playing="yes"]::before{background:linear-gradient(transparent,#e4efd675),var(--scene) center/cover;opacity:.65}
body[data-playing="yes"] .runner{background:none!important;padding:0;border:0;box-shadow:none!important;overflow:visible;filter:drop-shadow(0 5px 3px #24312645)}
.runner .racer-character{display:block;width:100%;height:100%;background:url('/assets/racers.webp') calc(var(--sprite)*25%) center/500% 100% no-repeat;transition:scale .2s,rotate .2s;pointer-events:none}
.runner:hover .racer-character{scale:1.12;rotate:-5deg}.runner.pet .racer-character{animation:themePet .5s}.runner.hopping .racer-character{animation:themeGallop .65s}.runner.backstep .racer-character{animation:penaltyWobble .65s}.runner.overtake .racer-character{filter:drop-shadow(0 0 8px #ffd95b)}
.runner>span{bottom:-4px!important;background:#fff9dfed;color:#204638;left:8%;right:8%;font-size:clamp(8px,.7vw,12px);border-radius:10px;padding:1px 4px}.runner .dino-feet{display:none}
.lane-name{z-index:2;top:4px!important;left:6px!important;font-size:10px!important;opacity:.8}.lane-name small{font-size:8px!important}.lane-grid{opacity:.2}
.lane-spaces{position:absolute;inset:0;display:grid;grid-template-columns:repeat(calc(var(--finish) + 1),1fr);align-items:end;pointer-events:none;padding-bottom:4px;gap:3px}
.lane-spaces i{font-style:normal;text-align:center;font-size:clamp(10px,.9vw,17px);font-weight:800;color:#72532f88}
body[data-playing="yes"][data-scene="1"] .track-panel{border:3px solid #5d9b5c;box-shadow:0 6px 0 #386f3830}
body[data-playing="yes"][data-scene="1"] .track-panel::after{background:#fff1d549;backdrop-filter:none;border:0;inset:52px 10px 70px}
body[data-scene="1"] .lane{background:linear-gradient(#dba45a7d,#ffe2ab9c);border:0;border-top:3px solid #6fa34190;border-bottom:3px solid #74aa4990;border-radius:10px}
body[data-scene="1"] .lane-spaces i{border-right:1px solid #fff4d777;height:100%;display:flex;align-items:center;justify-content:center;opacity:.6}
body[data-scene="1"] .track-ruler{color:#285933}body[data-scene="1"] .turn-hud.your-turn{border-radius:14px 28px 14px 28px;background:linear-gradient(100deg,#ffeb97,#fff5c9)}
body[data-scene="2"][data-playing="yes"] header{background:linear-gradient(110deg,#61432e,#9b6d43);border-color:#e6b777}
body[data-scene="2"] .track-panel{background:#edddbf;border:3px solid #ad855a;box-shadow:0 7px 0 #bd987155,0 15px 35px #5c3d2520;border-radius:24px}
body[data-scene="2"] .track-panel::before{opacity:.9}body[data-scene="2"] .track-panel::after{background:#fff1da45;backdrop-filter:none;border:0}
body[data-scene="2"] .lane{background:color-mix(in srgb,var(--dino) 28%,#fff3dd);border:2px solid #fff3dd;border-bottom:4px solid color-mix(in srgb,var(--dino) 50%,#aa855c);margin-bottom:4px;border-radius:20px 8px 20px 8px;box-shadow:0 3px 5px #73543220}
body[data-scene="2"] .lane-spaces{inset:3px;align-items:stretch;padding:0;gap:4px}.lane-spaces i{min-width:0}
body[data-scene="2"] .lane-spaces i{display:grid;place-items:center;background:#fff8e24d;border:1px solid #fff8e298;border-radius:12px;color:#634a3980}
body[data-scene="2"] .racer-character{filter:drop-shadow(3px 5px 1px #553b3255);transform:rotate(-7deg)}
body[data-scene="2"] .panel{background:#fff7e9f5;border-color:#c9a476}.track-panel .section-head h2{letter-spacing:-.4px}
body[data-scene="2"] .turn-hud{background:#226d70;border-color:#164e51;color:#fff9df}body[data-scene="2"] .turn-hud.your-turn{background:linear-gradient(120deg,#a9e4dd,#fff1b1);color:#244d4f;border-color:#6cafa8}
body[data-scene="2"] .market{border:3px solid #ad855a;border-radius:24px;background:#f7e6c8}.market .race-card{transform-origin:center bottom}
body[data-scene="2"] .race-card{box-shadow:3px 5px 0 #a2805333;border:3px solid #fff3da;rotate:-2deg}body[data-scene="2"] .race-card:nth-child(even){rotate:2deg}
body[data-scene="2"] .leader-chip{background:#fff6e5;border-color:#b99772}.player-copy>small{color:var(--muted)}
body[data-scene="3"][data-playing="yes"]::before{background:linear-gradient(#08162e7a,#0d1836a8),var(--scene) center/cover;opacity:1}
body[data-scene="3"][data-playing="yes"] header{background:#101d34;border-color:#5b738e}.brand small{color:#d8e9cf}
body[data-scene="3"] .panel{background:#15253eeF;border-color:#49647f;box-shadow:0 5px 0 #060f2355;color:#f2ead5}
body[data-scene="3"] .track-panel{border:2px solid #467986;background:#15233b}
body[data-scene="3"] .track-panel::before{opacity:1}body[data-scene="3"] .track-panel::after{background:#07152766;border:0;backdrop-filter:none;inset:48px 6px 75px}
body[data-scene="3"] .track-panel .section-head h2{color:#abecd7;text-shadow:none}body[data-scene="3"] .track-panel .section-head>span{background:#1d3d54;color:#e2f7d2;border-color:#558479}
body[data-scene="3"] .lane{background:linear-gradient(90deg,color-mix(in srgb,var(--dino) 18%,#132039),#0d1b3299);border:1px solid #7895b344;border-radius:15px;margin-bottom:3px}
body[data-scene="3"] .lane-name{color:#dcf2e9;text-shadow:none}body[data-scene="3"] .lane-grid{display:none}
body[data-scene="3"] .lane-spaces{align-items:center;padding:3px;gap:5px}body[data-scene="3"] .lane-spaces i{border:1px solid #aac7d34d;background:linear-gradient(#62748b,#384b65);border-radius:40%;height:32%;box-shadow:0 3px 0 #081022;color:#f3efdac9;font-size:clamp(9px,.8vw,15px)}
body[data-scene="3"] .track-ruler,body[data-scene="3"] .track-caption{color:#c0d4d8;text-shadow:none}
body[data-scene="3"] .leader-chip{background:#18304ae8;border-color:color-mix(in srgb,var(--dino) 60%,#617885);color:#f5ecd5}
body[data-scene="3"] .checkpoint{background:#243e53;border-color:#70a4a1;color:#a1edd8;box-shadow:0 0 12px #7bdec22b}
body[data-scene="3"] .runner .racer-character{filter:drop-shadow(0 0 6px #badfff55)}
body[data-scene="3"] .runner>span{background:#1c3048ec;color:#f7edcf;border:1px solid #769ca2}
body[data-scene="3"] .turn-hud{background:#1b3550;color:#e5f1ed;border-color:#557990}body[data-scene="3"] .turn-hud.your-turn{background:linear-gradient(100deg,#ffd870,#ffeab0);color:#3c3015;border:2px solid #ffe278;box-shadow:0 0 25px #ffd45944}
body[data-scene="3"] .market{background:#11273ff0;border:2px solid #68b3ab}body[data-scene="3"] .market.your-draft{background:linear-gradient(120deg,#23434a,#17283e)}
body[data-scene="3"] .section-head h2{color:#bdebd5}body[data-scene="3"] .section-head small,body[data-scene="3"] .section-head>span{color:#c2d4d8}
body[data-scene="3"] .player{background:#1a2f45;border-color:#496379;color:#f8ebd2}body[data-scene="3"] .player.active-player{background:linear-gradient(110deg,#3e4943,#254248);border-color:#dfc777}body[data-scene="3"] .player:hover{background:#2b4558}
body[data-scene="3"] .collection-item{background:#24334a;border-color:color-mix(in srgb,var(--dino) 55%,#497385);color:#f9edd2}body[data-scene="3"] .collection-item small,body[data-scene="3"] .collection-rate{color:#c2d6de}
body[data-scene="3"] .projected-score{background:#27483f;color:#c8f4cb}body[data-scene="3"] .crew-hint,body[data-scene="3"] .diary-list small{color:#acbfca}
body[data-scene="3"] .chat-drawer{background:#14273f;color:#f6eed6}body[data-scene="3"] .messages p{background:#243e51}body[data-scene="3"] .messages p.own-message{background:#354d43}body[data-scene="3"] .messages p b{color:#9ee1c8}
body[data-scene="3"] .chat form input,body[data-scene="3"] .chat .reactions button{background:#243e51;color:#f5eaca;border-color:#638190}
body[data-scene="3"] .audio-popover{background:#172d46;color:#f5ecd1;border-color:#71909b}body[data-scene="3"] .sfx-preview{background:#254a47;color:#e0f3cd}
@media(min-width:1200px) and (min-height:850px){
 body[data-scene="2"][data-playing="yes"] .game-layout{grid-template-columns:minmax(0,1fr) clamp(300px,25vw,440px);grid-template-rows:auto auto auto;align-items:start}
 body[data-scene="2"] .main-board{display:contents}
 body[data-scene="2"] .track-panel{grid-column:1;grid-row:1/4}.track-panel{min-width:0}
 body[data-scene="2"] .turn-hud{grid-column:2;grid-row:1;flex-wrap:wrap}body[data-scene="2"] .market{grid-column:2;grid-row:2}
 body[data-scene="2"] .race-sidebar{grid-column:2;grid-row:3}body[data-scene="2"] .collection{grid-column:1;grid-row:4}body[data-scene="2"] .results{grid-column:1;grid-row:4}
 body[data-scene="2"] .lane{height:clamp(75px,calc((100dvh - 360px)/5),170px)}body[data-scene="2"] .runner{height:clamp(65px,calc((100dvh - 420px)/5),150px);width:clamp(85px,calc((100dvh - 300px)/5),170px);margin-left:calc(clamp(85px,calc((100dvh - 300px)/5),170px)/-2)}
 body[data-scene="2"] .market-tray{flex-direction:column;align-items:stretch}body[data-scene="2"] .market-tray .reveal-deck{flex-basis:auto;min-height:70px;width:100%}body[data-scene="2"] .market-cards{justify-content:center}
 body[data-scene="2"] .market-tray .race-card{flex-basis:clamp(75px,6vw,120px);width:clamp(75px,6vw,120px)}body[data-scene="2"] .market-tray .race-card img{height:clamp(70px,9vh,110px)}
 body[data-scene="2"] .collection-item{display:grid;grid-template-columns:50px 1fr;text-align:left}body[data-scene="2"] .collection-item img{width:50px;height:50px}
 body[data-scene="2"] .player{min-height:70px;padding:7px}.race-sidebar{min-width:0}
}
@media(min-width:761px){
 body[data-scene="3"] .main-board>.track-panel{grid-row:1}body[data-scene="3"] .main-board>.turn-hud{grid-row:2}body[data-scene="3"] .main-board>.market,body[data-scene="3"] .main-board>.collection{grid-row:3}
}
@media(max-width:760px){
 .lane-spaces i{font-size:9px}.runner>span{font-size:7px!important;left:0;right:0}.lane-name{display:none}
 body[data-scene="2"] .lane{border-radius:14px 5px 14px 5px;margin-bottom:3px}
 body[data-scene="3"] .lane-spaces{gap:2px}body[data-scene="3"] .lane-spaces i{font-size:8px;border-radius:7px}
 body[data-scene="3"] .main-board{display:flex}body[data-scene="3"] .main-board>.turn-hud{order:0}body[data-scene="3"] .main-board>.track-panel{order:1}body[data-scene="3"] .main-board>.market{order:2}body[data-scene="3"] .main-board>.collection{order:3}
}
@keyframes themeGallop{20%{translate:0 -9px;rotate:-7deg}45%{translate:0 0;rotate:3deg}70%{translate:0 -5px;rotate:-4deg}}
@keyframes themePet{25%{scale:1.14 .9;rotate:-8deg}65%{scale:.95 1.12;translate:0 -8px}}
@media(prefers-reduced-motion:reduce){.racer-character{animation:none!important;transition:none!important}}
/* Preserve sprite proportions despite each dinosaur's different silhouette. */
.runner .racer-character{position:absolute;width:100%;height:auto;aspect-ratio:434.4/724;top:50%;left:0;translate:0 -50%;background-size:500% 100%;clip-path:inset(9% 3% 16% 3%)}
body[data-scene="1"] .lane{background:linear-gradient(#e2b375df,#f6d291e8)}
body[data-scene="1"] .track-panel::before{background-position:center top}
.runner .racer-character{clip-path:inset(9% 0 16% 0)}
@media(min-width:1200px) and (min-height:850px){
 body[data-scene="2"] .lane{height:clamp(68px,calc((100dvh - 570px)/5),150px)}
 body[data-scene="2"] .runner{height:clamp(62px,calc((100dvh - 600px)/5),138px);width:clamp(75px,calc((100dvh - 520px)/5),155px);margin-left:calc(clamp(75px,calc((100dvh - 520px)/5),155px)/-2)}
 body[data-scene="2"] .game-layout{align-content:start}
}
body[data-playing="yes"][data-scene="3"]{background:#101c34}
body[data-scene="3"] .leader-chip:first-child{background:#34554a;color:#fff1c3}
body[data-scene="3"] .race-card span{color:#223e35}
body[data-scene="3"] .game-top .eyebrow,body[data-scene="3"] .connection{color:#b7cad2}
.runner .racer-character[style="--sprite:0"]{background-size:471.7% 100%;background-position:0 center;aspect-ratio:460/724}
.runner .racer-character[style="--sprite:1"]{background-size:517.1% 100%;background-position:26.26% center;aspect-ratio:420/724;clip-path:inset(9% 0 16% 2%)}
.runner .racer-character[style="--sprite:2"]{background-size:482.7% 100%;background-position:50.81% center;aspect-ratio:450/724}
.runner .racer-character[style="--sprite:3"]{background-size:482.7% 100%;background-position:76.66% center;aspect-ratio:450/724}
.runner .racer-character[style="--sprite:4"]{background-size:514.7% 100%;background-position:100% center;aspect-ratio:422/724}
body[data-scene="3"] dialog{color:#193f35;background:#fffdf0}
body[data-scene="3"] dialog .collection-item{background:#f0f4e7;color:#193f35}
body[data-scene="3"] dialog .collection-item small,body[data-scene="3"] dialog .collection-rate{color:#50694f}
.runner .racer-character[style="--sprite:4"]{width:78%;left:11%}
.runner .racer-character[style="--sprite:1"]{clip-path:polygon(2% 9%,100% 9%,100% 55%,91% 55%,91% 84%,2% 84%)}
body[data-playing="yes"][data-scene="2"]{background:#f2e2c6}
@media(min-width:1200px) and (min-height:850px){
 body[data-scene="2"] .game-layout:has(.results) .collection{grid-row:5}
 body[data-scene="2"] .collection-item img{grid-column:1;grid-row:1/span 3}
 body[data-scene="2"] .collection-item b{grid-column:2;grid-row:1}
 body[data-scene="2"] .collection-rate{grid-column:2;grid-row:2}
 body[data-scene="2"] .collection-item small{grid-column:2;grid-row:3}
}
body[data-scene="3"] .player.self b{color:#d6f4d8}
body[data-scene="3"] .leader-chip>span{color:#f6eed6}body[data-scene="3"] .leader-chip small{color:#d2e1e5;opacity:.9}