body{background:radial-gradient(ellipse at 20% 0,#36245466,transparent 55%),#0a0b19}header{background:#0b0c1acc;border-color:#ffffff12}.intro p{margin-bottom:0}.intro h1{font-weight:950}h1 span{color:#b5ff75}button{background:linear-gradient(135deg,#e0ff9e,#a5ee65);box-shadow:0 4px 22px #b6ff6e18}.sound{box-shadow:none}.audio-controls{display:flex;gap:12px;align-items:center}.audio-controls label{font-size:12px}.audio-controls input{width:70px;accent-color:#bcfa7d}.layout{grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr)}.panel{background:linear-gradient(145deg,#1c1c35,#131428);border:1px solid #ffffff18;box-shadow:0 20px 60px #0004}.race-panel{position:relative}.race-panel .panelhead{background:linear-gradient(110deg,#41305c66,#141628);padding:22px}.race-panel .panelhead h2{text-transform:uppercase;letter-spacing:.13em;font-size:15px}.stats{background:#0c0e20;padding:18px 22px;justify-content:space-between;font-size:13px}.stats b{font-variant-numeric:tabular-nums}.track{padding:12px 20px 20px;background:linear-gradient(#0b0e1a66,#17172944)}.lane{position:relative;height:76px;grid-template-columns:110px minmax(0,1fr) 36px;gap:10px;border-bottom:1px solid #ffffff0b;--c:#aaa}.name{font-size:12px;line-height:1.25;z-index:3}.name small{letter-spacing:.12em;font-size:9px;margin-top:5px}.road{height:65px;border:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#ffffff0a calc(10% - 1px),#ffffff0a 10%);isolation:isolate}.road:before{content:'';position:absolute;left:0;right:0;bottom:6px;height:3px;background:linear-gradient(90deg,var(--c),#ffffff10);opacity:.4;box-shadow:0 3px 14px var(--c)}.road:after{height:65px;width:10px;background:repeating-conic-gradient(#ffffffb0 0% 25%,#0b0c20 0% 50%) 50%/10px 10px;opacity:.6}.horse{top:1px;display:block;width:66px;height:58px;transition:left .72s cubic-bezier(.17,.65,.24,1);filter:drop-shadow(0 5px 5px #0008)}.horse .figure{display:block;font-size:43px;line-height:1.15;transform:scaleX(-1);transform-origin:50% 85%;position:relative;z-index:2}.horse .number{position:absolute;left:23px;top:19px;z-index:4;min-width:17px;text-align:center;font-size:11px;padding:2px 4px;box-shadow:0 2px 4px #0007}.horse:before{content:'';position:absolute;bottom:1px;left:5px;width:54px;height:8px;border-radius:50%;background:var(--c);filter:blur(5px);opacity:.4}.horse.moving .figure{animation:gallop .18s ease-in-out 4 alternate}.horse.moving:after{content:'';position:absolute;left:-20px;bottom:9px;width:35px;height:12px;background:linear-gradient(90deg,transparent,var(--c));filter:blur(5px);animation:dust .7s ease-out}.score{font-size:20px;font-weight:850;color:var(--c);font-variant-numeric:tabular-nums}.yourlane{background:linear-gradient(90deg,#d2ff7615,transparent);border-left:3px solid #c5ff82;padding-left:7px}.leader .name:before{content:'LEADER';display:block;font-size:8px;letter-spacing:.15em;color:#dcff9e;margin-bottom:4px}.leader{background-color:#ffffff03}.lane.winner{background:linear-gradient(90deg,#d5ff8233,#b68cff22);box-shadow:inset 0 0 30px #ceff8614}.gain{position:absolute;right:15px;top:0;color:var(--c);font-size:20px;font-weight:900;opacity:0}.moving .gain{animation:gain .75s ease-out}.recent{padding-top:12px;font-size:13px;letter-spacing:.02em;color:#d5ff9e}.footer{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.finish{background:radial-gradient(ellipse at top,#d4ffad,#ad8fff);border:1px solid #e9ffbb;box-shadow:0 0 70px #beff7522;padding:30px;position:relative;overflow:hidden}.finish h2{font-size:clamp(25px,4vw,45px);letter-spacing:-.04em}.finish .podium-label{font-size:12px;font-weight:850;letter-spacing:.25em;margin-bottom:12px}.boardwrap canvas{border:1px solid #ac91e455;box-shadow:0 0 35px #9678fa14,inset 0 0 30px #0005}.feedback{color:#c9ff91}#roll{width:100%;max-width:360px;margin-top:16px;padding:17px;font-size:18px;text-transform:uppercase;letter-spacing:.08em}.badge{color:#c8ff96;background:#c2ff7910;border:1px solid #b4ff721a}.sound[aria-pressed=true]{color:#cbff98;border-color:#cbff9866}.spark{position:fixed;pointer-events:none;z-index:30;top:-15px;width:8px;height:14px;background:var(--c);animation:confetti 2.6s ease-in forwards;left:var(--x)}@keyframes gallop{to{transform:scaleX(-1) translateY(-4px) rotate(-4deg)}}@keyframes dust{to{opacity:0;transform:translateX(-20px) scale(1.6)}}@keyframes gain{0%{opacity:1;transform:translateY(6px)}100%{opacity:0;transform:translateY(-25px)}}@keyframes confetti{to{transform:translateY(105vh) rotate(650deg);opacity:.2}}
@media(max-width:850px){.layout{grid-template-columns:1fr}.lane{height:63px;grid-template-columns:76px minmax(0,1fr) 24px;gap:4px}.road,.road:after{height:56px}.name{font-size:10px}.name small{font-size:8px}.horse .figure{font-size:36px}.horse{width:60px;top:0}.horse .number{top:17px;left:20px}.track{padding:8px}.score{font-size:16px}.audio-controls label{display:none}.stats{font-size:11px;padding:13px}.intro{gap:12px}#start{font-size:13px;padding:12px}.race-panel .panelhead{padding:16px}.footer{font-size:9px}.yourlane{padding-left:3px}}
@media(prefers-reduced-motion:reduce){.horse{transition:none}.horse.moving .figure,.horse.moving:after,.moving .gain,.spark{animation:none}.spark{display:none}}
#roll{position:relative;isolation:isolate;overflow:hidden;min-height:96px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:18px 24px;border:1px solid #e9ffc8;border-radius:20px;background:linear-gradient(#e3ffad,#b4ee6d 65%,#8fc94e);box-shadow:0 8px 0 #4d7029,0 12px 25px #0008,inset 0 2px 2px #ffffffaa;transition:transform .08s,box-shadow .08s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;letter-spacing:.06em}#roll .launch-icon{grid-row:1/3;font-size:40px;line-height:1;text-shadow:0 2px #ffffff55}#launch-label{font-size:19px;font-weight:950}#launch-detail{font-size:10px;letter-spacing:.09em;opacity:.7;font-weight:750}#roll:not(:disabled):active{transform:translateY(7px);box-shadow:0 1px 0 #4d7029,0 4px 12px #0006,inset 0 3px 12px #42641855}#roll:focus-visible{outline:3px solid #fff;outline-offset:7px}#roll.ready{animation:ready-glow 1.7s ease-in-out infinite}#roll.reloading{opacity:1;background:#202a29;border-color:#93c77055;box-shadow:0 5px 0 #101915,0 9px 16px #0005;color:#ddf7c9;transform:translateY(3px)}.reload-fill{position:absolute;inset:0;background:linear-gradient(90deg,#91d95622,#adf77855);z-index:-1;transform-origin:left;transform:scaleX(var(--reload,0));display:none}.reloading .reload-fill{display:block}.haptic-option{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:20px;font-size:12px;color:#aaa8c1}.haptic-option input{accent-color:#b5ef79}.launch-kick{animation:launch-kick .2s ease-out}@keyframes launch-kick{35%{transform:translateY(3px)}70%{transform:translateY(-1px)}}@keyframes ready-glow{50%{box-shadow:0 8px 0 #4d7029,0 12px 32px #b7ff7133,inset 0 2px 2px #ffffffaa}}@media(prefers-reduced-motion:reduce){#roll.ready,.launch-kick{animation:none}#roll{transition:none}}
.sound-check{display:flex;gap:12px;align-items:center;max-width:1500px;margin:auto;padding:12px 4vw;border-bottom:1px solid #ffffff0b}.sound-check span{font-size:12px;color:#bbb8ce;line-height:1.5}.sound-check button{flex-shrink:0}.audio-controls label{display:flex;align-items:center;gap:5px}@media(max-width:550px){.audio-controls{gap:7px}.audio-controls label{font-size:0}.audio-controls input{width:55px}.sound-check{padding:12px 14px}.sound-check span{font-size:11px}}
.final-stretch .road:after{opacity:1;box-shadow:0 0 15px #e1ff9a}.final-stretch .panelhead{background:linear-gradient(110deg,#66822d55,#402a5955)}.final-stretch #status{background:#d7ff91;color:#172115;border-color:#d7ff91;font-weight:900}.final-stretch .road:before{opacity:.8}.final-stretch{border-color:#c8ff7777}
/* Larger racers with proportional finish positioning at every viewport. */
.lane{height:104px}.road,.road:after{height:94px}.horse{width:96px;height:90px;top:0}.horse .figure{font-size:76px;line-height:1.05}.horse .number{left:36px;top:34px;min-width:24px;font-size:17px;border:1px solid #ffffff88;padding:2px 5px}.horse:before{width:78px;left:9px;height:10px;bottom:4px}.horse.moving:after{bottom:15px;width:44px}.gain{right:8px;font-size:26px;top:2px}.name{font-size:14px}.name small{font-size:10px}.score{font-size:24px}
@media(max-width:850px){.lane{height:82px;grid-template-columns:76px minmax(0,1fr) 25px}.road,.road:after{height:74px}.horse{width:72px;height:70px}.horse .figure{font-size:54px;line-height:1.1}.horse .number{left:25px;top:25px;min-width:20px;font-size:13px;padding:2px 4px}.horse:before{width:60px;left:5px;bottom:7px}.name{font-size:11px}.name small{font-size:8px}.score{font-size:18px}.gain{font-size:22px}}
.racer-art{display:block;width:112px;height:94px;overflow:visible}.horse{width:112px}.racer-art .leg{fill:none;stroke:#865431;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;transform-box:view-box}.racer-art .far{stroke:#4c352c}.racer-art .hoof{stroke:#201d29;stroke-width:6}.racer-art .rear{transform-origin:36px 51px}.racer-art .front{transform-origin:77px 51px}.racer-art .tail{transform-origin:33px 43px}.racer-art .horse-body{transform-origin:60px 48px}.racing .rear.near{animation:hind-stride .48s linear infinite}.racing .front.near{animation:front-stride .48s linear infinite}.racing .rear.far{animation:hind-stride .48s linear -.24s infinite}.racing .front.far{animation:front-stride .48s linear -.24s infinite}.racing .horse-body{animation:body-gallop .24s ease-in-out infinite alternate}.racing .tail{animation:tail-swish .48s ease-in-out infinite alternate}.racing .jockey{animation:rider-bob .24s ease-in-out infinite alternate}.racing .lane:nth-child(even) .leg{animation-duration:.52s}.racing .lane:nth-child(3n) .horse-body{animation-delay:-.09s}.horse.moving .racer-art{filter:drop-shadow(0 0 5px var(--c))}@keyframes hind-stride{0%,100%{transform:rotate(-27deg)}50%{transform:rotate(32deg)}}@keyframes front-stride{0%,100%{transform:rotate(32deg)}50%{transform:rotate(-33deg)}}@keyframes body-gallop{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-4px) rotate(1deg)}}@keyframes tail-swish{to{transform:rotate(-16deg)}}@keyframes rider-bob{to{transform:translateY(1.5px)}}@media(max-width:850px){.horse{width:84px}.racer-art{width:84px;height:70px}}@media(prefers-reduced-motion:reduce){.racing .racer-art *{animation:none!important}}
.tournament-panel{margin-top:25px;padding:22px;background:#191a30;border:1px solid #ffffff22;border-radius:18px}.tournament-panel summary{font-weight:800;cursor:pointer}.tournament-panel p{font-size:13px}.tournament-panel label{display:block;margin:12px 0 6px}.tournament-panel textarea{display:block;width:100%;max-width:600px;background:#0e1022;color:#fff;font:14px system-ui;padding:12px;border:1px solid #77728c;border-radius:10px;margin-bottom:12px}.setup-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.race-schedule{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;list-style:none;padding:0}.race-schedule li{border:1px solid #ffffff15;border-radius:9px;padding:12px}.race-schedule span,.race-schedule small{display:block;font-size:12px;color:#b5b2c9;margin-top:7px;line-height:1.5}.race-schedule .current-race{border-color:#b9ef7d88;background:#b9ef7d08}.setup-actions [hidden]{display:none}
.ball-panel{background:linear-gradient(135deg,#342519,#201a18);border-color:#95673666}.ball-panel .panelhead{background:linear-gradient(100deg,#684325,#37281e);border-color:#b2885044}.ball-panel .panelhead h2{color:#ffe4b1;font-family:Georgia,serif;font-size:20px}.ball-panel .badge{background:#1e171444;color:#e9c99a;border-color:#b98d5044}.ball-panel .boardwrap{background:radial-gradient(ellipse at 50% 40%,#87603922,transparent 70%)}.ball-panel canvas{border:5px solid #754722;outline:1px solid #c89e61;box-shadow:0 12px 30px #0008,inset 0 0 15px #0008;border-radius:16px;background:#c49a60}.ball-panel .hint,.ball-panel label,.ball-panel .legend{color:#dbc9b3}.ball-panel select{background:#241c17;border-color:#987347;color:#fff0d7}.ball-panel .feedback{color:#ffe0a4}.ball-panel #roll{background:linear-gradient(#ffe1a5,#daa455 65%,#b97b34);border-color:#ffe7b8;box-shadow:0 8px 0 #77491f,0 12px 25px #0008,inset 0 2px 2px #ffffff88}.ball-panel #roll.reloading{background:#34271b;color:#ffe3ad}.ball-panel #roll:not(:disabled):active{box-shadow:0 1px 0 #77491f,0 4px 12px #0006,inset 0 3px 12px #58351466}.ball-panel #roll.ready{animation:wood-ready 1.7s ease-in-out infinite}.ball-panel .reload-fill{background:linear-gradient(90deg,#c58a3d22,#e1b56566)}@keyframes wood-ready{50%{box-shadow:0 8px 0 #77491f,0 12px 32px #edba6033,inset 0 2px 2px #ffffff88}}@media(prefers-reduced-motion:reduce){.ball-panel #roll.ready{animation:none}}