:root {
  --accent: #42e8ff;
  --accent-rgb: 66, 232, 255;
  --ink: #edf9ff;
  --muted: #8295a4;
  --panel: rgba(6, 13, 21, .74);
  --line: rgba(255, 255, 255, .12);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #03070c; }
body {
  color: var(--ink); font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: none;
}
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
#scene, #scene canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#scene { background: radial-gradient(circle at 60% 40%, #10202d, #03070c 70%); }
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 160px rgba(0,0,0,.48); }
.speed-fx {
  position: fixed; inset: -20%; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg at 50% 54%, transparent 0deg 5deg, rgba(var(--accent-rgb),.12) 5.15deg 5.3deg);
  -webkit-mask-image: radial-gradient(circle at 50% 54%, transparent 0 25%, #000 72%); mask-image: radial-gradient(circle at 50% 54%, transparent 0 25%, #000 72%);
  transition: opacity .12s;
}
.screen { position: fixed; inset: 0; z-index: 10; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility .35s; }
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }
.menu { background: linear-gradient(90deg, rgba(3,8,14,.96) 0%, rgba(3,8,14,.82) 33%, rgba(3,8,14,.25) 62%, transparent 100%); }
.brand { position: absolute; left: 40px; top: 28px; display: flex; align-items: center; gap: 12px; }
.brand-icon { width: 40px; height: 40px; border: 1px solid rgba(var(--accent-rgb),.45); border-radius: 50%; display: grid; place-items: center; color: var(--accent); box-shadow: inset 0 0 20px rgba(var(--accent-rgb),.08); }
.brand-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.35; }
.brand strong { display: block; font-size: 13px; letter-spacing: .22em; }
.brand span { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: .25em; }
.menu-copy { position: absolute; left: 40px; top: 105px; width: 380px; }
.eyebrow { color: var(--accent); font-size: 9px; letter-spacing: .22em; font-weight: 650; display: flex; align-items: center; gap: 11px; }
.eyebrow::before { content: ""; width: 27px; height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
h1 { margin: 17px 0 14px; font-size: clamp(48px,5vw,74px); line-height: .98; letter-spacing: -.055em; }
h1 span { display: inline-block; margin-left: 15px; color: transparent; -webkit-text-stroke: 1px rgba(225,246,255,.72); font-weight: 500; }
.menu-copy p { width: 340px; color: #8ea1af; font-size: 11px; line-height: 1.85; letter-spacing: .05em; }
.track-select { position: absolute; left: 40px; bottom: 69px; width: min(850px, calc(100% - 80px)); }
.section-label { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.section-label span { color: var(--accent); font-size: 8px; letter-spacing: .2em; }
.section-label b { font-size: 10px; font-weight: 500; letter-spacing: .12em; }
.track-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.track-card {
  position: relative; height: 126px; padding: 15px; overflow: hidden; text-align: left; cursor: pointer; color: #d6e4eb;
  border: 1px solid var(--line); border-radius: 11px; background: rgba(9,17,26,.64); backdrop-filter: blur(14px); transition: .22s;
}
.track-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),.4); background: rgba(13,25,36,.8); }
.track-card.selected { border-color: var(--accent); background: linear-gradient(135deg, rgba(var(--accent-rgb),.13), rgba(8,16,25,.84)); box-shadow: inset 0 0 24px rgba(var(--accent-rgb),.05), 0 0 22px rgba(var(--accent-rgb),.07); }
.track-card .card-number { color: #5d7180; font-size: 8px; letter-spacing: .16em; }
.track-card h3 { margin: 12px 0 5px; font-size: 16px; letter-spacing: .04em; font-weight: 600; }
.track-card p { margin: 0; color: #758997; font-size: 8px; letter-spacing: .12em; }
.track-card .difficulty { position: absolute; left: 15px; bottom: 13px; display: flex; gap: 4px; }
.difficulty i { width: 13px; height: 2px; background: rgba(255,255,255,.13); }
.difficulty i.on { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb),.5); }
.track-card .map { position: absolute; width: 118px; height: 78px; right: 6px; top: 8px; opacity: .7; }
.track-card .map path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.track-card.selected .map { opacity: 1; filter: drop-shadow(0 0 5px rgba(var(--accent-rgb),.45)); }
.track-detail { display: flex; align-items: center; gap: 30px; margin-top: 12px; min-height: 58px; }
.track-detail > div { min-width: 95px; }
.track-detail > div span { display: block; color: #647886; font-size: 8px; letter-spacing: .12em; }
.track-detail > div b { display: block; margin-top: 6px; color: #c9d9e1; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.primary-button {
  min-width: 196px; height: 50px; margin-left: auto; padding: 0 19px; border: 0; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 25px; color: #021014; background: var(--accent);
  box-shadow: 0 0 30px rgba(var(--accent-rgb),.16); font-weight: 700; transition: transform .2s, filter .2s;
}
.primary-button:hover { filter: brightness(1.15); transform: translateY(-1px); }
.primary-button:active { transform: scale(.98); }
.primary-button span { font-size: 12px; letter-spacing: .12em; }
.primary-button i { font-size: 7px; letter-spacing: .13em; font-style: normal; opacity: .55; }
.menu-footer { position: absolute; left: 40px; right: 40px; bottom: 23px; display: flex; justify-content: space-between; align-items: center; }
.key-guide { display: flex; align-items: center; gap: 7px; color: #617482; font-size: 8px; }
kbd { min-width: 22px; height: 21px; padding: 0 5px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-bottom-color: rgba(255,255,255,.28); border-radius: 4px; background: rgba(255,255,255,.045); color: #a4b5c0; font: 7px Inter,sans-serif; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.key-guide span { margin-right: 8px; }
.menu-footer a { color: #526673; font-size: 8px; letter-spacing: .12em; text-decoration: none; }
.menu-footer a:hover { color: var(--accent); }
.glass-button { border: 1px solid var(--line); background: rgba(6,13,21,.58); color: #9cadb8; backdrop-filter: blur(12px); cursor: pointer; }
.sound-toggle { position: fixed; z-index: 30; right: 28px; top: 27px; height: 36px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.sound-toggle svg, .pause-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle span { font-size: 7px; letter-spacing: .14em; }
.sound-toggle.on { color: var(--accent); border-color: rgba(var(--accent-rgb),.35); }
.hud { position: fixed; inset: 0; z-index: 6; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s; }
.hud.active { opacity: 1; visibility: visible; }
.hud-top-left { position: absolute; left: 28px; top: 26px; display: flex; gap: 10px; }
.hud-block { min-width: 108px; padding: 12px 15px; border-left: 2px solid var(--accent); background: linear-gradient(90deg,rgba(5,13,21,.68),transparent); }
.hud-block span, .race-clock span { display: block; color: #6d818f; font-size: 7px; letter-spacing: .2em; }
.hud-block b { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hud-block b i { font-style: normal; }
.race-clock { position: absolute; left: 50%; top: 27px; transform: translateX(-50%); text-align: center; }
.race-clock b { display: block; margin-top: 6px; font-size: 22px; font-weight: 350; letter-spacing: .06em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px #000; }
.minimap-wrap { position: absolute; right: 27px; top: 80px; width: 180px; height: 130px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(3,10,16,.42); backdrop-filter: blur(8px); overflow: hidden; }
.minimap-wrap canvas { width: 100%; height: 105px; display: block; }
.minimap-wrap > span { display: block; padding: 4px 9px; color: #7f929f; font-size: 7px; letter-spacing: .15em; text-align: right; }
.pause-button { position: absolute; right: 28px; top: 27px; width: 38px; height: 36px; border-radius: 8px; pointer-events: auto; display: grid; place-items: center; }
.hud.active ~ .sound-toggle, body.racing .sound-toggle { right: 77px; }
.speed-panel { position: absolute; right: 31px; bottom: 28px; width: 175px; text-align: right; }
.speed-panel > b { font-size: 72px; line-height: .85; font-weight: 250; letter-spacing: -.075em; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(var(--accent-rgb),.2); }
.speed-panel > span { display: block; margin-top: 10px; color: var(--accent); font-size: 8px; letter-spacing: .28em; }
.speed-bars { display: flex; justify-content: flex-end; gap: 3px; margin-top: 12px; height: 16px; align-items: flex-end; }
.speed-bars i { width: 6px; height: 5px; background: rgba(255,255,255,.12); }
.speed-bars i.on { background: var(--accent); box-shadow: 0 0 7px rgba(var(--accent-rgb),.55); }
.nitro-panel { position: absolute; left: 50%; bottom: 31px; transform: translateX(-50%); width: 330px; }
.nitro-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.nitro-label span { color: #9aadb8; font-size: 8px; letter-spacing: .2em; }
.nitro-label b { color: var(--accent); font-size: 9px; font-weight: 500; }
.nitro-track { position: relative; height: 10px; padding: 2px; border: 1px solid rgba(var(--accent-rgb),.28); background: rgba(3,10,16,.7); transform: skewX(-15deg); overflow: hidden; }
.nitro-track i { display: block; height: 100%; width: 70%; background: var(--accent); box-shadow: 0 0 15px var(--accent); transition: width .08s linear; }
.nitro-track em { position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 29px,rgba(3,10,16,.65) 29px 31px); }
.nitro-hint { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 9px; color: #5f7380; font-size: 7px; letter-spacing: .1em; }
.drift-display { position: absolute; left: 50%; top: 61%; transform: translate(-50%,-50%) scale(.9); text-align: center; opacity: 0; transition: opacity .15s, transform .15s; }
.drift-display.active { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.drift-display span { display: block; color: var(--accent); font-size: 14px; font-style: italic; font-weight: 800; letter-spacing: .28em; text-shadow: 0 0 16px var(--accent); }
.drift-display b { display: inline-block; margin-top: 5px; font-size: 27px; font-weight: 350; font-variant-numeric: tabular-nums; }
.drift-display i { margin-left: 8px; color: #ffbd62; font-size: 11px; font-style: normal; }
.race-message { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); color: #ffbf66; font-size: 11px; letter-spacing: .2em; text-shadow: 0 2px 12px #000; opacity: 0; transition: opacity .2s; }
.race-message.show { opacity: 1; }
.countdown { position: fixed; z-index: 9; left: 50%; top: 43%; transform: translate(-50%,-50%); text-align: center; opacity: 0; visibility: hidden; pointer-events: none; }
.countdown.active { opacity: 1; visibility: visible; }
.countdown span { display: block; color: #fff; font-size: 124px; line-height: 1; font-weight: 750; font-style: italic; text-shadow: 0 0 45px rgba(var(--accent-rgb),.45); animation: countPulse .75s infinite; }
.countdown small { color: var(--accent); font-size: 9px; letter-spacing: .35em; }
@keyframes countPulse { 0% { transform: scale(1.18); opacity: .3; } 35% { opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
.toast { position: fixed; z-index: 20; left: 50%; top: 105px; transform: translate(-50%,-10px); padding: 10px 17px; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 7px; background: rgba(4,12,19,.82); color: var(--accent); font-size: 9px; letter-spacing: .15em; opacity: 0; transition: .25s; pointer-events: none; backdrop-filter: blur(10px); }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.modal { display: grid; place-items: center; background: rgba(2,7,12,.6); backdrop-filter: blur(10px); }
.modal-card { width: 360px; padding: 31px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg,rgba(12,23,34,.96),rgba(5,12,20,.96)); box-shadow: 0 25px 80px rgba(0,0,0,.45); text-align: center; }
.modal-card .eyebrow { justify-content: center; }
.modal-card h2 { margin: 17px 0 8px; font-size: 28px; letter-spacing: .04em; }
.modal-card p { margin: 0 0 24px; color: var(--muted); font-size: 11px; }
.modal-card .primary-button, .modal-card .secondary-button { width: 100%; margin: 14px 0 0; }
.secondary-button { height: 44px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.045); color: #b6c6cf; cursor: pointer; font-size: 11px; letter-spacing: .1em; }
.secondary-button:hover { border-color: rgba(var(--accent-rgb),.4); color: #fff; }
.text-button { margin-top: 18px; border: 0; background: none; color: #647987; cursor: pointer; font-size: 9px; letter-spacing: .1em; }
.text-button:hover { color: var(--accent); }
.result-card { position: relative; }
.medal { width: 66px; height: 66px; margin: 20px auto 15px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid var(--accent); background: rgba(var(--accent-rgb),.09); box-shadow: 0 0 28px rgba(var(--accent-rgb),.15); }
.medal span { transform: rotate(-45deg); color: var(--accent); font-size: 30px; font-weight: 700; }
.result-time span { display: block; color: #657a88; font-size: 7px; letter-spacing: .2em; }
.result-time b { display: block; margin-top: 7px; font-size: 32px; font-weight: 300; font-variant-numeric: tabular-nums; }
.result-time i { display: inline-block; margin-top: 7px; padding: 3px 7px; color: #021014; background: var(--accent); font-size: 7px; font-style: normal; letter-spacing: .13em; }
.result-time i.hidden { visibility: hidden; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 4px; }
.result-stats div { padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; }
.result-stats span { display: block; color: #687d8a; font-size: 8px; }
.result-stats b { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; }
.touch-controls { display: none; }
.loader { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #04090f; transition: opacity .7s, visibility .7s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-ring { position: relative; width: 72px; height: 72px; margin-bottom: 24px; display: grid; place-items: center; border: 1px solid rgba(66,232,255,.14); border-radius: 50%; }
.loader-ring::after { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; border-top-color: #42e8ff; border-radius: 50%; animation: spin 1.2s linear infinite; }
.loader-ring svg { width: 31px; fill: none; stroke: #42e8ff; stroke-width: 1.2; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader > strong { font-size: 11px; letter-spacing: .24em; }
.loader > span { margin-top: 10px; color: #607582; font-size: 9px; letter-spacing: .12em; }
.loader-line { width: 180px; height: 1px; margin-top: 22px; background: rgba(255,255,255,.08); overflow: hidden; }
.loader-line i { display: block; width: 45%; height: 100%; background: #42e8ff; animation: load 1.3s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
#retryBtn { margin-top: 20px; padding: 9px 17px; border: 1px solid #28434f; border-radius: 7px; color: #bceff7; background: #0b1820; cursor: pointer; font-size: 10px; }
@media (max-height: 760px) and (min-width: 801px) {
  .menu-copy { top: 90px; }
  .menu-copy p { display: none; }
  .track-card { height: 108px; }
  .track-select { bottom: 58px; }
  .track-detail { margin-top: 8px; }
  .menu-footer { bottom: 17px; }
}
@media (max-width: 1000px) {
  .track-select { width: min(720px,calc(100% - 60px)); left: 30px; }
  .brand, .menu-copy { left: 30px; }
  .track-detail { gap: 17px; }
  .track-detail > div { min-width: 79px; }
  .track-card .map { width: 95px; opacity: .45; }
}
@media (max-width: 800px) {
  .menu { overflow-y: auto; background: linear-gradient(180deg,rgba(3,8,14,.86),rgba(3,8,14,.64) 60%,rgba(3,8,14,.9)); touch-action: pan-y; }
  .brand { left: 20px; top: 20px; }
  .brand span { display: none; }
  .sound-toggle { right: 18px; top: 20px; }
  body.racing .sound-toggle { display: none; }
  .menu-copy { left: 20px; top: 90px; width: calc(100% - 40px); }
  .menu-copy p { display: none; }
  h1 { font-size: 46px; margin-top: 13px; }
  .track-select { left: 16px; top: 222px; bottom: auto; width: calc(100% - 32px); padding-bottom: 20px; }
  .track-list { display: flex; overflow-x: auto; gap: 8px; padding: 2px 1px 8px; touch-action: pan-x; scrollbar-width: none; }
  .track-card { min-width: 190px; height: 116px; }
  .track-detail { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 10px; }
  .track-detail > div { min-width: 0; }
  .track-detail .primary-button { grid-column: 1 / -1; width: 100%; margin: 3px 0 0; }
  .menu-footer { display: none; }
  .hud-top-left { left: 13px; top: 14px; gap: 3px; }
  .hud-block { min-width: 73px; padding: 9px; }
  .hud-block span { font-size: 6px; }
  .hud-block b { font-size: 12px; }
  .race-clock { top: 70px; left: 14px; transform: none; text-align: left; }
  .race-clock b { font-size: 16px; }
  .minimap-wrap { right: 13px; top: 65px; width: 116px; height: 94px; }
  .minimap-wrap canvas { height: 73px; }
  .minimap-wrap > span { font-size: 5px; padding: 3px 6px; }
  .pause-button { right: 13px; top: 14px; }
  .speed-panel { right: 15px; top: 174px; bottom: auto; width: 110px; }
  .speed-panel > b { font-size: 48px; }
  .speed-panel > span { font-size: 6px; margin-top: 6px; }
  .speed-bars { display: none; }
  .nitro-panel { bottom: 145px; width: 230px; }
  .nitro-hint { display: none; }
  .drift-display { top: 52%; }
  .drift-display span { font-size: 11px; }
  .drift-display b { font-size: 23px; }
  .countdown span { font-size: 92px; }
  .touch-controls.active { position: fixed; z-index: 8; left: 13px; right: 13px; bottom: max(15px,env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
  .touch-steer, .touch-actions { display: flex; gap: 8px; align-items: flex-end; pointer-events: auto; }
  .touch-controls button { width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(6,14,22,.58); color: #d6e5ec; backdrop-filter: blur(9px); font-size: 17px; touch-action: none; }
  .touch-controls button.pressed { color: #021014; background: var(--accent); border-color: var(--accent); transform: scale(.95); }
  .touch-actions button { width: 49px; height: 49px; font-size: 9px; }
  .touch-actions .touch-throttle { width: 66px; height: 66px; color: #021014; background: rgba(var(--accent-rgb),.85); border-color: var(--accent); font-weight: 700; }
  .touch-actions .touch-nitro { color: var(--accent); border-color: rgba(var(--accent-rgb),.45); }
  .touch-brake { display: none; }
  .toast { top: 67px; }
}
@media (max-width: 420px) {
  .track-select { top: 207px; }
  .menu-copy { top: 82px; }
  h1 { font-size: 41px; }
  .track-card { min-width: 174px; }
  .track-detail > div b { font-size: 9px; }
  .touch-controls button { width: 53px; height: 53px; }
  .touch-actions { gap: 5px; }
  .touch-actions button { width: 43px; height: 43px; font-size: 8px; }
  .touch-actions .touch-throttle { width: 59px; height: 59px; }
  .nitro-panel { width: 210px; bottom: 126px; }
  .modal-card { width: calc(100% - 38px); padding: 26px; }
}