:root{--ink: #0d1016;--panel: rgba(13, 16, 22, .8);--panel-solid: #12161e;--line: rgba(255, 255, 255, .09);--text: #f6efe3;--muted: #a7a194;--accent: #ff5a1f;--accent-soft: rgba(255, 90, 31, .18);--gold: #ffc23d;--silver: #d6dbe3;--bronze: #d98a4e;--win: #8fe36a;--crash: #ff4b4b;--display: "Teko", "Arial Narrow", sans-serif;--ui: "Chakra Petch", "Segoe UI", sans-serif;--cut: 16px;color:var(--text);background:linear-gradient(#2f5f8f,#86b2c4 42%,#f1d0a0 76%,#f2a46c);font-family:var(--ui);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{width:100vw;height:100dvh}#root{width:100%;height:100%}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}kbd{display:inline-block;min-width:1.7em;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;font:600 11px/1.4 var(--ui);text-align:center;color:var(--text);background:#ffffff0d}.app-root{position:relative;width:100%;height:100%;display:flex;align-items:stretch;justify-content:stretch;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}.game-canvas{width:100%;height:100%;display:block;background:#86b2c4;touch-action:none}.error-view{width:min(100%,760px);margin:auto;padding:20px 24px;white-space:pre-wrap;color:var(--text);background:var(--panel-solid);border-left:4px solid var(--crash)}.is-hidden{display:none!important}.menu-layer{position:absolute;inset:0;display:flex;align-items:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)) max(clamp(16px,7vw,112px),env(safe-area-inset-left))}.menu-scrim{position:absolute;inset:0;background:linear-gradient(90deg,#090b10b8,#090b106b 42%,#090b1000 78%),linear-gradient(0deg,#090b1059,#090b1000 40%);pointer-events:none}.menu-panel{position:relative;display:flex;flex-direction:column;width:min(460px,100%);max-height:100%;padding:22px 0 14px;background:var(--panel);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));box-shadow:inset 4px 0 0 var(--accent)}.menu-panel:after{content:"";position:absolute;top:0;right:0;width:46%;height:3px;background:repeating-linear-gradient(-55deg,var(--accent) 0 10px,transparent 10px 16px);opacity:.7}.is-main .menu-panel{width:min(520px,100%);padding-top:28px;background:linear-gradient(180deg,#0d1016db,#0d1016b8)}.menu-head{display:flex;align-items:center;gap:14px;padding:0 26px 14px}.is-main .menu-head{display:block;padding-bottom:18px}.menu-back{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line);background:#ffffff0a;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);transition:background .15s,color .15s}.menu-back svg{width:16px;height:16px}.menu-back:hover{background:var(--accent)}.menu-titles{display:flex;flex-direction:column;min-width:0}.menu-kicker{font:600 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}.menu-title{margin:4px 0 -6px;font:600 44px/.9 var(--display);letter-spacing:.02em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo{display:flex;flex-direction:column;transform:skew(-9deg);transform-origin:left bottom;margin-left:4px}.logo-line{font:700 clamp(44px,min(11vw,13dvh),112px)/.74 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--text)}.logo-accent{position:relative;align-self:flex-start;color:var(--accent);text-shadow:4px 4px 0 rgba(0,0,0,.35)}.logo-accent:after{content:"";position:absolute;left:calc(100% - .2em);top:30%;width:1.1em;height:.12em;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 .2em 0 -.02em #ffc23db3}.logo-tag{margin:14px 0 0;font:500 12px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}.menu-list{touch-action:pan-y;flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 14px 4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.menu-item{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:6px 12px 4px;border:0;background:none;text-align:left;cursor:pointer;font:500 26px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#f6efe3d1;transition:color .15s,padding .18s cubic-bezier(.2,.8,.2,1)}.menu-item:before{content:"";position:absolute;inset:3px 0;z-index:-1;background:linear-gradient(90deg,var(--accent) 0%,rgba(255,90,31,.55) 55%,rgba(255,90,31,0) 100%);transform:skew(-12deg) scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.2,.8,.2,1)}.menu-item.is-selected{padding-left:22px;color:#fff}.menu-item.is-selected:before{transform:skew(-12deg) scaleX(1)}.is-main .menu-item{min-height:54px;font-size:34px}.menu-label{flex:1 1 auto;min-width:0;padding-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chevron{font-family:var(--ui);font-size:22px;opacity:.5;transition:transform .18s,opacity .18s}.menu-item.is-selected .chevron{opacity:1;transform:translate(4px)}.menu-item.is-locked{color:#f6efe366}.lock{display:inline-grid;place-items:center;flex:none}.lock svg{width:14px;height:14px}.menu-setting{justify-content:space-between}.menu-setting .menu-label{flex:0 1 auto}.stepper{display:flex;align-items:center;gap:2px;flex:none}.step{display:grid;place-items:center;width:28px;height:30px;padding:0 0 3px;border:0;background:#ffffff0f;font:600 22px/1 var(--ui);cursor:pointer;transition:background .15s}.step:hover{background:#ffffff2e}.step-value,.league-name{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:110px;max-width:180px;height:30px;padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 14px/1 var(--ui);letter-spacing:.06em;background:#00000047}.step-value.is-locked{color:var(--gold)}.switch{position:relative;flex:none;width:46px;height:24px;border-radius:12px;background:#ffffff24;transition:background .2s}.switch.is-on{background:var(--win)}.menu-item.is-selected .switch.is-on{background:#fff}.switch-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--panel-solid);transition:transform .2s cubic-bezier(.2,.8,.2,1)}.switch.is-on .switch-knob{transform:translate(22px)}.menu-text{margin:0;padding:4px 12px 8px;font:400 14px/1.55 var(--ui);color:var(--muted);user-select:text;-webkit-user-select:text}.menu-text.is-emphasis{padding-top:8px;padding-bottom:4px;font-weight:600;color:var(--text);letter-spacing:.03em}.medal-row{display:flex;align-items:center;gap:12px;padding:6px 12px;font:600 16px/1.2 var(--ui);color:var(--text);font-variant-numeric:tabular-nums}.medal{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;font:700 20px/1 var(--display);padding-top:3px;color:var(--ink);background:var(--gold);box-shadow:inset 0 -3px #0003,0 0 0 3px #ffc23d2e}.place-2 .medal{background:var(--silver);box-shadow:inset 0 -3px #0003,0 0 0 3px #d6dbe326}.place-3 .medal{background:var(--bronze);box-shadow:inset 0 -3px #0003,0 0 0 3px #d98a4e2e}.league-switch{display:flex;align-items:center;gap:2px;padding:6px 12px 10px}.league-name{color:var(--gold)}.menu-hints{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 22px 0 26px;margin-top:8px;border-top:1px solid var(--line);font:500 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.menu-hints span{display:inline-flex;align-items:center;gap:4px}@media(max-height:520px){.menu-panel,.is-main .menu-panel{padding-top:14px}.menu-head,.is-main .menu-head{padding-bottom:8px}.logo-tag{margin-top:8px;font-size:10px}.menu-title{font-size:34px}.menu-item,.is-main .menu-item{min-height:40px;font-size:24px}.menu-hints{display:none}}@media(pointer:coarse){.menu-hints{display:none}}.name-entry-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:6px 12px 8px}.name-entry{display:flex;gap:12px}.name-slot{display:flex;flex-direction:column;align-items:center;gap:4px}.name-step{width:64px;height:26px;padding:0;border:0;font-size:11px;background:#ffffff0f;color:var(--muted);cursor:pointer}.name-step:hover{color:var(--text);background:#ffffff24}.name-letter{width:64px;height:78px;padding:8px 0 0;border:0;border-bottom:3px solid var(--line);background:#0000004d;font:600 64px/1 var(--display);cursor:pointer}.name-slot.is-active .name-letter{border-bottom-color:var(--accent);background:var(--accent-soft);animation:blink-line 1s steps(2,start) infinite}.name-done{width:auto}@keyframes blink-line{50%{border-bottom-color:transparent}}.menu-panel.is-entering{animation:panel-in .38s cubic-bezier(.2,.8,.2,1) both}.menu-panel.is-entering .menu-list>*{animation:item-in .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i, 0) * 28ms + 60ms)}.is-main .menu-panel.is-entering .logo{animation:logo-in .6s cubic-bezier(.2,.8,.2,1) both}@keyframes panel-in{0%{opacity:0;transform:translate(-18px)}}@keyframes item-in{0%{opacity:0;transform:translate(-12px)}}@keyframes logo-in{0%{opacity:0;transform:skew(-9deg) translate(-40px)}}.hud{position:absolute;inset:0;pointer-events:none}.hud-top{display:flex;align-items:flex-start;gap:12px;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}.hud-pause{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;color:var(--text);background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);pointer-events:auto;cursor:pointer;transition:background .15s}.hud-pause svg{width:18px;height:18px;fill:currentColor}.hud-pause:hover{background:var(--accent)}.hud-track{display:flex;flex-direction:column;justify-content:center;min-width:0;height:46px;padding:0 18px 0 14px;background:linear-gradient(90deg,var(--panel),rgba(13,16,22,0))}.hud-track-meta{font:600 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);white-space:nowrap}.hud-track-name{margin-top:3px;font:600 26px/.9 var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-time{margin-left:auto;display:flex;align-items:baseline;height:46px;padding:7px 16px 0 18px;background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);font:700 30px/1 var(--ui);font-variant-numeric:tabular-nums;letter-spacing:.02em}.hud-time-fraction{font-size:18px;color:var(--accent)}.hud-progress{position:absolute;top:calc(max(14px,env(safe-area-inset-top)) + 17px);left:50%;display:flex;align-items:center;gap:8px;width:min(420px,34vw);transform:translate(-50%)}.hud-progress-track{position:relative;flex:1;height:6px;background:#0d10168c;box-shadow:0 0 0 1px #ffffff1f}.hud-progress-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--accent));transform:scaleX(0);transform-origin:left}.hud-progress-rider{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border:3px solid #fff;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #ff5a1fe6}.hud-progress-flag{flex:none;width:16px;height:12px;background:repeating-conic-gradient(#fff 0 25%,#111 0 50%) 0 0 / 8px 6px;box-shadow:0 0 0 1px #0006}@media(max-width:720px){.hud-progress{top:calc(max(14px,env(safe-area-inset-top)) + 58px);left:max(14px,env(safe-area-inset-left));width:calc(100% - 28px);transform:none}.hud-time{font-size:24px}.hud-track-name{font-size:22px}}.toast-layer{position:absolute;left:0;right:0;top:15%;display:flex;justify-content:center;pointer-events:none;opacity:0;transition:opacity .35s}.toast-layer.is-visible{opacity:1}.toast{display:flex;flex-direction:column;align-items:center;padding:10px 34px 4px;background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);box-shadow:inset 0 -4px 0 var(--tone, var(--accent))}.toast-layer.is-visible .toast{animation:toast-in .45s cubic-bezier(.2,1.4,.4,1) both}.toast[data-tone=crash]{--tone: var(--crash)}.toast[data-tone=win]{--tone: var(--win)}.toast[data-tone=warn]{--tone: var(--gold)}.toast-kicker{font:600 11px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--tone, var(--accent))}.toast-kicker:empty{display:none}.toast-title{margin-top:4px;font:600 clamp(40px,7vw,76px)/.95 var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}.toast[data-tone=warn] .toast-title{font-size:clamp(26px,4vw,40px);padding-bottom:4px}@keyframes toast-in{0%{opacity:0;transform:translateY(-14px) scale(.92) skew(-8deg)}}.touch-controls{display:none}@media(pointer:coarse){.touch-controls{display:block;position:absolute;inset:0;touch-action:none}}.touch-button{position:absolute;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:var(--text);background:#0d101680;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:background .08s,transform .08s}.touch-button.pressed{background:var(--accent);border-color:#ffffff80;transform:scale(.92)}.touch-button:before{content:"";width:26px;height:26px;background:currentColor;clip-path:polygon(50% 12%,100% 88%,0 88%)}.touch-left:before{transform:rotate(-90deg)}.touch-right:before{transform:rotate(90deg)}.touch-down:before{transform:rotate(180deg)}.touch-left{left:calc(20px + env(safe-area-inset-left));bottom:calc(24px + env(safe-area-inset-bottom))}.touch-right{left:calc(116px + env(safe-area-inset-left));bottom:calc(24px + env(safe-area-inset-bottom))}.touch-down{right:calc(20px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom))}.touch-up{right:calc(20px + env(safe-area-inset-right));bottom:calc(120px + env(safe-area-inset-bottom));width:96px;height:96px;margin-right:-6px}@media(max-height:420px){.touch-button{width:72px;height:72px}.touch-right{left:calc(104px + env(safe-area-inset-left))}.touch-up{width:80px;height:80px;bottom:calc(106px + env(safe-area-inset-bottom));margin-right:-4px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}
