:root{font-family:Inter,Arial,"Microsoft YaHei",sans-serif;color:#fff;background:#07131c}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
body{position:relative;background:var(--map-bg,#0a0f1a);transition:background-color 1s ease}
button,select{font:inherit;cursor:pointer}
.hidden{display:none!important}
canvas{width:100vw;height:100vh;display:block;position:absolute;top:0;left:0;z-index:1;touch-action:none}

.top-hud{position:absolute;z-index:10;top:0;left:0;width:var(--track-left,32vw);min-height:88px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;pointer-events:none;background:linear-gradient(180deg,#000a,transparent)}
.top-hud h1{margin:0;color:#fff;font-size:clamp(22px,2.1vw,32px);font-weight:1000;line-height:1;white-space:nowrap;letter-spacing:-1.3px;text-shadow:0 2px 16px var(--map-glow,#00ffff),0 4px 24px #000}
.mode-switch{display:flex;gap:4px;padding:4px;border:1px solid var(--map-guide,#27e5d1);border-radius:999px;background:#06131eea;pointer-events:auto}
.mode-switch button{padding:7px 12px;border:0;border-radius:999px;background:transparent;color:#bdd7dc;font-size:11px;font-weight:900;white-space:nowrap}
.mode-switch button.is-active{background:var(--map-glow,#00ffff);color:#06151b;box-shadow:0 0 14px #00ffff55}
.mode-switch button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.theme-badge{position:absolute;z-index:13;top:5px;right:10px;padding:5px 9px;border:1px solid var(--map-guide,#27e5d1);border-radius:999px;background:#071621e8;color:var(--map-glow,#00ffff);font-size:10px;font-weight:900;letter-spacing:1px;box-shadow:0 0 10px #0008;transition:color 1s,border-color 1s,background-color 1s}
.top-hud h1 span{color:var(--map-glow,#00ffff)}
.top-controls{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;pointer-events:auto}
.race-capsule{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid var(--map-guide,#27e5d1);border-radius:999px;background:#03131ae6;backdrop-filter:blur(4px);box-shadow:0 0 18px #0008;white-space:nowrap}
.race-capsule strong{font-size:12px;color:#fff}
.race-capsule span{font-size:12px;font-weight:900;color:var(--map-glow,#00ffff)}
.theme-control{display:flex;align-items:center;gap:6px;color:#d9f8f7;font-size:11px;font-weight:900;white-space:nowrap}
.theme-control[hidden]{display:none}
.theme-control select,.hud-button{padding:9px 11px;border:1px solid var(--map-guide,#27e5d1);border-radius:999px;background:#071a23ed;color:#f4ffff;font-size:11px;font-weight:800;backdrop-filter:blur(4px)}
.theme-control select{max-width:104px}
.hud-button:hover,.theme-control select:hover{background:#294653}
.hud-button:focus-visible,.theme-control select:focus-visible{outline:2px solid #fff;outline-offset:2px}

.standings-hud{position:absolute;z-index:10;right:0;top:0;width:min(240px,var(--side-space,240px));height:100vh;display:flex;flex-direction:column;border-left:1px solid var(--map-guide,#27e5d1);border-radius:16px 0 0 16px;background:#07101ce8;backdrop-filter:blur(4px);box-shadow:-14px 0 34px #0007;overflow:hidden}
.perf-hud{position:absolute;z-index:20;left:16px;bottom:12px;padding:6px 9px;border:1px solid var(--map-guide,#27e5d1);border-radius:6px;background:#06111deb;color:#cafff8;font:12px/1.3 monospace;pointer-events:none}
.dev-camera-panel{position:absolute;z-index:22;left:16px;bottom:16px;width:min(260px,calc(100vw - 32px));display:grid;gap:9px;padding:13px;border:1px solid var(--map-guide,#27e5d1);border-radius:12px;background:#06111df2;box-shadow:0 12px 30px #0009;color:#eaffff;font-size:12px}
.dev-camera-panel[hidden],#dev-camera-toggle[hidden],#restart[hidden],#retry[hidden]{display:none!important}
.dev-camera-panel strong{font-size:13px;color:var(--map-glow,#00ffff)}
.dev-camera-panel input{width:100%;accent-color:var(--map-glow,#00ffff)}
.dev-camera-actions{display:flex;gap:4px}
.dev-camera-actions button{flex:1;min-width:0;padding:6px 2px;border:1px solid var(--map-guide,#27e5d1);border-radius:6px;background:#17303c;color:#fff;font:10px Arial,sans-serif;cursor:pointer}
.dev-camera-panel small{color:#a9c6cd;line-height:1.4}
.roster-toggle{display:none}
.standings-heading{padding:22px 16px 14px;border-bottom:1px solid #ffffff25}
.standings-heading span{display:block;font-size:10px;font-weight:900;letter-spacing:2px;color:var(--map-glow,#00ffff)}
.standings-heading h2{margin:7px 0 3px;font-size:22px;letter-spacing:1px;line-height:1}
.standings-heading p{margin:0;color:#b8cbd1;font-size:11px}
.roster-list{flex:1;min-height:0;overflow-y:auto;padding:10px 12px;scrollbar-width:thin;scrollbar-color:var(--map-guide,#27e5d1) transparent}
.roster-row{height:42px;display:flex;align-items:center;gap:8px;padding:5px 6px;border-bottom:1px solid #ffffff17;color:#edf6f5}
.roster-row.is-finished{background:#ffffff11}
.roster-rank{width:19px;flex:none;text-align:right;color:#d6e6e8;font-size:11px;font-weight:900}
.roster-avatar{width:25px;height:25px;flex:none;border-radius:50%;border:2px solid #fff;background-repeat:no-repeat;background-size:400% 400%;box-shadow:0 0 8px #ffffff55}
.roster-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:800}
.roster-identity{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.15}
.roster-identity .roster-name{display:block;flex:none}
.roster-wallet{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8eaab0;font-size:8px;margin-top:2px}
.roster-demo-tag{flex:none;border:1px solid var(--map-guide,#27e5d1);border-radius:4px;padding:1px 3px;color:var(--map-glow,#00ffff);font-size:8px;font-weight:900}
.roster-row.is-demo{opacity:.75}
@media(max-width:650px){.race-capsule{white-space:normal;flex-wrap:wrap;max-width:calc(100vw - 16px)}.roster-wallet{font-size:7px}}
.roster-time{font-size:9px;color:var(--map-glow,#00ffff);white-space:nowrap}
.result{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#020912c9;backdrop-filter:blur(5px)}
.result-card{width:min(470px,100%);padding:24px;border:1px solid var(--map-guide,#27e5d1);border-radius:18px;background:#071621f5;box-shadow:0 20px 80px #0009,0 0 24px var(--map-deep,#091b24);text-align:center}
.result-kicker{display:block;color:var(--map-glow,#00ffff);font-size:10px;font-weight:900;letter-spacing:2px}
.result-card h3{margin:9px 0 8px;font-size:25px;color:#fff}
.result-card p{margin:4px 0;color:#d7e5e7;font-size:13px;line-height:1.5}
.result-prizes{display:grid;gap:7px;margin:17px 0}
.result-prize{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #ffffff24;border-radius:9px;background:#ffffff0b;color:#fff;text-align:left;font-size:13px;font-weight:800}
.result-prize strong{color:#ffdc7a;white-space:nowrap}
.result-card .result-note{color:#aebdc4;font-size:11px}
.result-countdown{margin-top:14px;color:var(--map-glow,#00ffff);font-size:13px;font-weight:900}
.result-card button{margin-top:12px;padding:9px 16px;border:0;border-radius:8px;background:var(--map-glow,#00ffff);color:#061218;font-size:12px;font-weight:900}
.bet-panel{position:fixed;z-index:22;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(600px,calc(100vw - 28px));box-sizing:border-box;padding:16px;border:1px solid var(--map-guide,#27e5d1);border-radius:18px;background:#071621f2;box-shadow:0 16px 55px #000b;backdrop-filter:blur(5px);color:#efffff}
.bet-heading,.bet-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bet-heading small{color:var(--map-glow,#00ffff);font-size:9px;font-weight:900;letter-spacing:1.3px}
.bet-heading h2{margin:2px 0 0;font-size:21px}
.bet-heading>strong{font-size:12px;color:#ffe28d;white-space:nowrap}
.bet-panel p{font-size:12px;margin:8px 0 12px;color:#ccdde3}
.bet-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.bet-choice{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px;border:1px solid #ffffff30;border-radius:11px;background:#ffffff0a;color:#fff;font-size:11px;font-weight:900}
.bet-choice.is-selected{border-color:var(--map-glow,#00ffff);background:#00ffff1c;box-shadow:inset 0 0 12px #00ffff1c}
.bet-choice .roster-avatar{width:34px;height:34px;border:2px solid var(--choice-color,#fff);border-radius:50%;background-size:400% 400%;box-shadow:0 0 11px var(--choice-color,#fff)}
.bet-footer{margin-top:12px;font-size:11px;color:#afcfd4}
.bet-footer button{padding:9px 13px;border:0;border-radius:9px;background:var(--map-glow,#00ffff);color:#06151b;font-size:11px;font-weight:900}
.bet-footer button:disabled{opacity:.45;cursor:not-allowed}
.bet-panel>small{display:block;margin-top:8px;color:#a9bbc2;font-size:10px}
.prediction-result-card{max-height:80vh;overflow:auto}
body[data-mode="betting"] .motto{display:none}
.reward-hud{padding:12px 16px;border-top:1px solid #ffffff29;color:#cbdde0;font-size:11px}
.reward-hud strong{display:block;margin-top:4px;color:var(--map-glow,#00ffff);font-size:12px}

.progress{position:absolute;z-index:10;top:16px;left:var(--track-left,32vw);width:var(--track-width,460px);height:4px;border-radius:999px;background:#ffffff2d;overflow:hidden;pointer-events:none}
.progress>div{width:0;height:100%;background:var(--map-glow,#00ffff);box-shadow:0 0 10px var(--map-glow,#00ffff);transition:width .15s linear}
.go-banner,.winner-banner,.motto,.load-error{position:absolute;z-index:10;pointer-events:none}
.go-banner{top:35%;left:50%;transform:translate(-50%,-50%);font-size:clamp(76px,12vw,160px);font-weight:1000;letter-spacing:8px;color:#fff;text-shadow:0 3px 12px #000,0 0 18px #000}
.winner-banner{top:188px;left:calc(var(--track-left,32vw)/2);transform:translateX(-50%);padding:10px 18px;border:2px solid #ffdf81;border-radius:12px;background:#111827df;color:#fff0ad;font-size:18px;font-weight:900;box-shadow:0 0 24px #ffdb74a0;white-space:nowrap}
.winner-reward-card{position:absolute;z-index:12;right:258px;top:28%;width:238px;padding:17px 20px;border:2px dashed var(--map-guide,#27e5d1);border-radius:18px;background:#090d19e8;box-shadow:0 0 30px var(--map-deep,#091b24),0 0 18px var(--map-glow,#00ffff);text-align:center;pointer-events:none}
.winner-reward-card span{display:block;color:var(--map-glow,#00ffff);font-size:11px;font-weight:900;letter-spacing:2px}
.winner-reward-card strong{display:block;margin:7px 0 0;color:#ffdc7a;font-size:48px;font-weight:1000;line-height:1}
.winner-reward-card p{margin:6px 0;color:#f3eeee;font-size:13px;font-weight:800}
.winner-reward-card small{color:#bdcbd6;font-size:11px}
.motto{bottom:26px;left:22px;width:calc(var(--track-left,32vw) - 44px);margin:0;color:#fff;font-size:clamp(21px,2.4vw,32px);font-weight:1000;line-height:1.25;text-align:left;text-shadow:0 3px 12px #000,0 0 24px #000;letter-spacing:1px}
.load-error{top:50%;left:50%;transform:translate(-50%,-50%);padding:20px;background:#3b1717;color:#fff}
@keyframes gate-go{0%{opacity:0;transform:translate(-50%,-45%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-55%) scale(1.05)}}

@media(max-width:900px){.top-hud{padding:14px}.standings-hud{width:205px}.top-hud h1{font-size:23px}.top-controls{gap:5px}.theme-control{font-size:0}}
@media(min-width:651px) and (max-width:1450px){.standings-heading{padding:16px 8px 10px}.standings-heading h2{font-size:15px}.standings-heading p{font-size:9px}.roster-list{padding:6px 4px}.roster-row{gap:4px;padding:4px 1px}.roster-avatar{width:19px;height:19px}.roster-rank{width:13px;font-size:9px}.roster-name{font-size:9px}.roster-time{display:none}.reward-hud{padding:8px;font-size:9px}.reward-hud strong{font-size:9px}.winner-banner{left:8px;transform:none;max-width:140px;white-space:normal;font-size:12px;padding:7px}.winner-reward-card{left:8px;right:auto;top:34%;width:124px;padding:10px 5px}.winner-reward-card strong{font-size:30px}.winner-reward-card p{font-size:9px}.winner-reward-card small{font-size:8px}.motto{font-size:clamp(13px,1.3vw,20px);letter-spacing:0}}
@media(min-width:651px) and (max-width:1100px){.standings-hud{width:220px;transform:translateX(100%);transition:transform .25s ease}.standings-hud.is-open{transform:none}.roster-toggle{display:block;position:absolute;z-index:11;top:112px;right:8px;padding:7px 11px;border:1px solid var(--map-guide,#27e5d1);border-radius:999px;background:#071a23e8;color:#fff;font-size:11px;font-weight:900}}
@media(max-width:650px){.standings-hud{top:115px;width:148px;height:calc(100vh - 115px);border-radius:12px 0 0 0;transform:translateX(100%);transition:transform .25s ease}.standings-hud.is-open{transform:none}.roster-toggle{display:block;position:absolute;z-index:11;top:120px;right:8px;padding:7px 11px;border:1px solid var(--map-guide,#27e5d1);border-radius:999px;background:#071a23e8;color:#fff;font-size:11px;font-weight:900}.standings-heading{padding:10px}.standings-heading h2{font-size:15px}.standings-heading p{font-size:9px}.roster-list{padding:5px}.roster-row{height:33px;gap:4px;padding:3px}.roster-avatar{width:18px;height:18px}.roster-rank{width:14px;font-size:9px}.roster-name{font-size:8px}.roster-time{display:none}.top-hud{width:100%;min-height:115px;padding:10px 8px;display:block}.top-hud h1{font-size:23px}.top-controls{margin-top:7px;justify-content:flex-start}.race-capsule{padding:6px 8px}.race-capsule strong,.race-capsule span{font-size:9px}.theme-control select,.hud-button{padding:6px;font-size:9px}.progress{top:112px}.motto{display:none}.winner-banner{top:125px;max-width:calc(100% - 20px);white-space:normal;font-size:11px}.reward-hud{padding:8px;font-size:9px}.reward-hud strong{font-size:9px}}
@media(max-width:650px){.winner-banner{left:50%}.winner-reward-card{right:10px;top:auto;bottom:25px;width:180px;padding:10px}.winner-reward-card strong{font-size:32px}.winner-reward-card p{font-size:10px}}

/* Launch countdown and theme-colored GO pulse stay above the physics canvas. */
.go-banner{animation:none}
.go-banner.is-pulsing{animation:gate-go 1.1s ease-out both}
.countdown-pulse{position:absolute;z-index:10;pointer-events:none;top:34%;left:50%;transform:translate(-50%,-50%);font-size:clamp(64px,11vw,160px);font-weight:1000;color:#fff;line-height:1;text-shadow:0 0 18px var(--map-glow),0 0 50px var(--map-glow)}
.countdown-pulse.is-pulsing{animation:gate-count .92s ease-out both}
@keyframes gate-count{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}70%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.34)}}