:root { color-scheme: dark; --bg:#07111f; --panel:#111e30; --line:#26374d; --text:#eff7ff; --muted:#94aac1; --cyan:#56e3dd; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:Inter,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,a { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
button:disabled { cursor:wait; opacity:.55; }
[hidden] { display:none !important; }
#app { position:relative; width:100%; height:100%; height:100dvh; }
canvas { display:block; }
#menu,#hud { position:absolute; inset:0; }
#menu { z-index:25; }
#menu:empty { pointer-events:none; }
.menu-overlay { position:absolute; inset:0; overflow:auto; padding:28px 5vw 48px; background:radial-gradient(ellipse at 22% 35%,#13334880,transparent 55%),radial-gradient(ellipse at 90% 80%,#1b214c80,transparent 60%),var(--bg); }
.menu-nav { max-width:1240px; margin:0 auto 44px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; color:#bbcee1; }
.menu-nav a:hover { color:var(--cyan); }
.status-pill { border:1px solid #2c4b55; border-radius:99px; padding:8px 13px; color:var(--cyan); font-size:11px; letter-spacing:.06em; }
.eyebrow { color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.2em; margin-bottom:18px; }
.mode-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; max-width:1140px; margin:auto; min-height:calc(100dvh - 170px); }
.menu-title { margin:0 0 22px; font-size:clamp(36px,4.8vw,64px); line-height:1.16; letter-spacing:-.065em; font-weight:850; }
.menu-title span { color:var(--cyan); }
.menu-sub { color:var(--muted); font-size:15px; line-height:1.8; margin:0 0 20px; }
.hero-stats { display:flex; gap:34px; border-top:1px solid var(--line); padding-top:24px; color:var(--muted); font-size:11px; letter-spacing:.08em; }
.hero-stats b { display:block; color:var(--text); font-size:27px; letter-spacing:-.04em; margin-bottom:7px; }
.hero-car { position:relative; height:190px; max-width:390px; margin:16px 0 12px; transform:rotate(-8deg); }
.car-glow { position:absolute; width:85%; height:90px; left:5%; top:75px; border-radius:50%; background:#47e3dc; filter:blur(60px); opacity:.25; }
.car-body { position:absolute; width:280px; height:98px; left:32px; top:46px; background:linear-gradient(135deg,#91ffeb,#37afa7 60%,#175d73); clip-path:polygon(3% 36%,18% 12%,72% 8%,89% 26%,100% 54%,93% 91%,15% 100%,0 72%); transform:skewY(-7deg); border-radius:20px; box-shadow:0 14px 30px #000; }
.car-window { position:absolute; left:75px; top:13px; width:124px; height:52px; background:linear-gradient(140deg,#101b32,#294351); clip-path:polygon(15% 0,86% 5%,100% 96%,0 90%); }
.car-stripe { position:absolute; bottom:14px; left:36px; width:232px; height:3px; background:#d4fff9; opacity:.7; }
.car-wheel { position:absolute; top:111px; width:47px; height:42px; border:9px solid #0a1424; background:#667b8c; border-radius:50%; box-shadow:0 3px 6px #0008; }
.wheel-left { left:80px; }.wheel-right { left:247px; top:93px; }
.speed-line { position:absolute; height:1px; background:linear-gradient(90deg,transparent,#56e3dd); opacity:.35; left:-10px; width:120px; }
.line-one { top:85px; }.line-two { top:117px; left:-35px; width:140px; }
.mode-panel { padding:34px; border:1px solid var(--line); background:linear-gradient(135deg,#15263be6,#101a2de6); border-radius:24px; box-shadow:0 30px 90px #0004; }
.mode-panel h2 { font-size:26px; letter-spacing:-.05em; margin:0 0 10px; }
.mode-panel>p { color:var(--muted); font-size:13px; margin:0 0 30px; }
.mode-panel label { display:block; font-size:12px; margin:16px 0 8px; }.mode-panel label span { float:right; color:var(--muted); font-size:10px; }
.menu-name-input { width:100%; padding:14px; color:var(--text); border:1px solid #344458; border-radius:10px; background:#0a1525; }
.menu-name-input::placeholder { color:#627c97; }
.mode-buttons { display:grid; gap:10px; margin-top:25px; }
.menu-btn,.result-restart-btn { display:inline-block; padding:14px 20px; border:1px solid #3c4e65; border-radius:11px; background:#15263b; color:var(--text); transition:background .2s,border-color .2s,transform .2s; }
.menu-btn:hover,.result-restart-btn:hover { border-color:var(--cyan); background:#1b3448; transform:translateY(-1px); }
.menu-btn.primary { background:var(--cyan); border-color:var(--cyan); color:#062027; font-weight:700; }
.menu-btn.primary:hover { background:#91fff1; }
.mode-buttons .menu-btn { text-align:left; padding:17px 20px; }.mode-buttons b { display:block; font-size:16px; }.mode-buttons small { display:block; font-size:11px; opacity:.65; margin-top:6px; }
.control-guide { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:#acbfd3; }.control-guide summary { cursor:pointer; color:#d5e7f5; }.control-guide p { line-height:2.2; margin-bottom:0; }
kbd { font-family:inherit; color:#dcf6f5; padding:2px 5px; border-radius:4px; border:1px solid #405268; background:#1d3147; font-size:10px; }
.track-heading { max-width:1200px; margin:0 auto 40px; }.track-heading .menu-title { font-size:clamp(28px,4vw,42px); margin-bottom:13px; }
.menu-section { max-width:1200px; margin:0 auto 32px; }.menu-section h2 { font-size:13px; color:#b9cad9; margin:0 0 14px; font-weight:500; }
.menu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.track-card { border:1px solid var(--line); border-radius:16px; background:#101e30; padding:12px; color:var(--text); text-align:left; transition:transform .2s,border-color .2s; }
.track-card:hover { transform:translateY(-5px); border-color:var(--cyan); }.track-thumb { width:100%; aspect-ratio:16/9; border-radius:10px; margin-bottom:15px; background:#12293a; }
.track-name { font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-.02em; }.track-meta { color:var(--muted); font-size:11px; padding-bottom:6px; }
.tool-btn { border:1px solid #3b536880; border-radius:9px; background:#0b172bcf; color:#edf8ff; padding:10px 13px; font-size:12px; backdrop-filter:blur(12px); }.tool-btn:hover { border-color:var(--cyan); }
#hud { z-index:10; pointer-events:none; }.hud-hidden { display:none; }
.hud-player { position:absolute; left:24px; top:24px; width:250px; padding:18px 20px; border-radius:15px; border:1px solid #94b3cb44; background:#07111fba; backdrop-filter:blur(14px); }
.hud-player.p2 { left:auto; right:24px; }.hud-player-title { font-size:11px; color:#c4dbeb; margin-bottom:12px; font-weight:600; letter-spacing:.05em; overflow:hidden; text-overflow:ellipsis; }.hud-player-speed { font-size:34px; font-weight:800; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }.hud-player-lap { margin:10px 0 8px; font-size:12px; color:var(--cyan); }.hud-player-time { font-size:14px; font-variant-numeric:tabular-nums; color:#c4d6e3; }.hud-player-warning { font-size:11px; color:#ffb97b; margin-top:8px; min-height:0; }.hud-player-warning:empty { display:none; }
.boost-label { font-size:9px; color:#a4c7d6; margin:14px 0 5px; letter-spacing:.12em; }.boost-track { height:4px; background:#ffffff22; border-radius:6px; overflow:hidden; }.boost-fill { height:100%; width:100%; background:var(--cyan); transition:width .1s; }
.hud-ranking { position:absolute; right:24px; top:24px; width:255px; padding:17px 18px; border:1px solid #94b3cb44; border-radius:15px; background:#07111fba; backdrop-filter:blur(14px); }.hud-ranking-title { font-size:10px; color:#bad3e4; margin-bottom:12px; }.hud-ranking-list { list-style:none; padding:0; margin:0; font-size:10px; }.hud-ranking-list li { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid #ffffff12; }.hud-ranking-list li span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:115px; }.split-mode .hud-ranking { right:auto; left:24px; top:253px; }
.hud-controls-hint { position:absolute; bottom:35px; left:50%; transform:translateX(-50%); padding:12px 18px; border-radius:99px; color:#e6f2ff; background:#07111fb0; font-size:11px; white-space:nowrap; transition:opacity .7s; }.hud-controls-hint.fade-out { opacity:0; }
.minimap { position:absolute; bottom:24px; right:24px; width:150px; height:150px; overflow:hidden; border:1px solid #7ec8d26b; border-radius:18px; background:#07111fba; backdrop-filter:blur(14px); }
#split-divider { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#56e3dd88; z-index:12; pointer-events:none; display:none; }
#race-controls { position:absolute; inset:0; z-index:22; pointer-events:none; }.race-toolbar { position:absolute; top:24px; left:50%; transform:translateX(-50%); display:flex; gap:7px; pointer-events:auto; }
.touch-controls { display:none; position:absolute; bottom:24px; left:18px; right:18px; align-items:end; justify-content:space-between; gap:14px; pointer-events:none; }.touch-steer,.touch-drive { display:flex; gap:8px; pointer-events:auto; }.touch-controls button { min-width:58px; min-height:60px; border-radius:15px; border:1px solid #badbe36b; color:#eaffff; background:#0d1c32c7; backdrop-filter:blur(10px); touch-action:none; user-select:none; font-size:12px; font-weight:700; }.touch-controls button.pressed { background:#4de5d4b0; color:#062223; }.touch-controls .touch-small { font-size:10px; min-width:54px; }.touch-controls .touch-accelerate { background:#4de5d499; color:#062223; }
.countdown-overlay { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; pointer-events:none; text-shadow:0 10px 30px #0006; }.countdown-number { font-size:100px; font-weight:850; color:#fff; }.countdown-caption { color:#e5f6ff; font-size:13px; letter-spacing:.2em; }
.result-overlay { position:absolute; inset:0; z-index:35; display:flex; justify-content:center; align-items:center; background:#04101ccc; backdrop-filter:blur(10px); overflow:auto; padding:24px; }.result-panel { max-width:500px; width:100%; padding:38px; background:linear-gradient(135deg,#182b40,#0d1c2f); border:1px solid #36576c; border-radius:24px; text-align:center; box-shadow:0 30px 80px #0004; }.result-title { font-size:30px; margin:0 0 20px; word-break:break-word; letter-spacing:-.04em; }.result-total-time { font-size:32px; font-weight:700; margin-bottom:12px; font-variant-numeric:tabular-nums; }.result-best-lap { color:var(--cyan); font-size:14px; margin-bottom:20px; }.result-lap-list { list-style:none; padding:0; margin:0 0 28px; }.result-lap-list li { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:12px 0; font-size:13px; }.result-lap-list .best { color:var(--cyan); }.result-restart-btn { font-size:13px; padding:12px 18px; }.pause-actions { display:grid; gap:10px; }.pause-hint { font-size:11px; color:var(--muted); margin:22px 0 0; }
#loading-screen { position:absolute; inset:0; z-index:100; background:radial-gradient(ellipse at 50% 35%,#17364b,var(--bg) 65%); transition:opacity .5s; }.loading-inner { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(430px,85vw); text-align:center; }.loading-inner h1 { font-size:28px; letter-spacing:-.03em; margin-bottom:18px; }.loading-inner .eyebrow { margin-bottom:12px; }#loading-text { color:var(--muted); font-size:13px; line-height:1.9; }.loading-track { height:4px; background:#263951; border-radius:5px; margin-top:26px; overflow:hidden; }#loading-bar { height:100%; width:0; background:var(--cyan); transition:width .2s; }.error-actions { display:flex; justify-content:center; gap:10px; margin-top:26px; font-size:12px; }
@media (pointer:coarse) { #race-controls.single-player .touch-controls { display:flex; }.hud-controls-hint { display:none; }.single-player .race-toolbar { top:auto; bottom:110px; }.minimap { bottom:115px; width:100px; height:100px; }.minimap canvas { width:100%; height:100%; } }
@media (max-width:900px) { .mode-layout { gap:30px; }.mode-panel { padding:26px; }.menu-title { font-size:44px; }.hero-car { transform:scale(.85) rotate(-8deg); transform-origin:left center; }.race-toolbar { top:auto; bottom:25px; }.split-mode .hud-player { width:calc(50% - 30px); }.hud-ranking { width:220px; } }
@media (max-width:650px) { .menu-overlay { padding:22px 20px 40px; }.menu-nav { margin-bottom:34px; }.status-pill { font-size:9px; }.mode-layout { display:flex; flex-direction:column; align-items:stretch; gap:28px; min-height:0; }.mode-hero .menu-title { font-size:44px; }.mode-hero .menu-sub { font-size:13px; }.hero-car { display:none; }.hero-stats { padding-top:18px; gap:30px; }.hero-stats b { font-size:22px; }.mode-panel { border-radius:18px; padding:24px; }.mode-panel h2 { font-size:24px; }.menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.track-card { padding:9px; border-radius:12px; }.track-name { font-size:13px; }.track-meta { font-size:9px; line-height:1.5; }.track-thumb { margin-bottom:10px; }.track-heading { margin-bottom:28px; }.track-heading .menu-title { font-size:30px; }.track-heading .menu-sub { font-size:12px; }.menu-section h2 { font-size:11px; }.hud-player { top:14px; left:14px; width:170px; padding:14px; }.hud-player.p2 { right:14px; }.hud-player-speed { font-size:28px; }.hud-player-title { margin-bottom:7px; }.hud-player-lap { font-size:10px; }.hud-ranking { width:155px; right:14px; top:14px; padding:12px; }.hud-ranking-title { font-size:9px; line-height:1.5; }.hud-ranking-list { font-size:8px; }.hud-ranking-list li { padding:5px 0; }.minimap { right:14px; bottom:95px; width:100px; height:100px; }.minimap canvas { width:100%; height:100%; }.race-toolbar { bottom:22px; width:max-content; }.race-toolbar .tool-btn { font-size:10px; padding:10px; }.split-mode .hud-ranking { top:230px; left:14px; width:calc(50% - 30px); }.result-panel { padding:26px; }.result-title { font-size:26px; }.result-total-time { font-size:26px; }.touch-controls { bottom:20px; left:12px; right:12px; gap:8px; }.touch-controls button { min-width:44px; min-height:52px; border-radius:12px; font-size:10px; }.touch-controls .touch-small { min-width:40px; font-size:8px; }.touch-steer,.touch-drive { gap:5px; }.single-player .race-toolbar { bottom:91px; }.hud-controls-hint { display:none; } }
@media (max-height:500px) and (pointer:coarse) { .hud-player { top:12px; padding:10px 14px; width:190px; }.hud-player-title { margin-bottom:4px; }.hud-player-speed { font-size:25px; }.hud-ranking { top:12px; padding:10px; }.minimap { width:88px; height:88px; bottom:93px; }.single-player .race-toolbar { top:12px; bottom:auto; }.touch-controls { bottom:12px; }.touch-controls button { min-height:45px; }.hud-player-lap { margin:6px 0; }.boost-label { margin-top:8px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

.difficulty-tabs { display:flex; gap:8px; max-width:1200px; margin:0 auto 24px; position:sticky; top:0; z-index:2; padding:12px; border:1px solid #263a4e; border-radius:15px; background:#091728f2; backdrop-filter:blur(15px); }
.difficulty-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:11px; min-height:48px; color:#a7bdcf; border:1px solid transparent; border-radius:10px; background:transparent; font-size:15px; font-weight:700; transition:color .2s,background .2s,border-color .2s; }
.difficulty-tab:hover { color:#efffff; background:#20364b; }
.difficulty-tab[aria-selected="true"] { color:#062127; background:var(--cyan); border-color:#a2fff3; }
.difficulty-count { font-size:11px; min-width:27px; padding:4px 6px; border-radius:6px; background:#ffffff12; color:inherit; }
.difficulty-tab[aria-selected="true"] .difficulty-count { background:#073c3e18; }
.difficulty-panel h2 { font-size:17px; font-weight:700; color:#d7e9f4; margin-bottom:8px; }
.difficulty-description { margin:0 0 22px; font-size:12px; color:var(--muted); line-height:1.7; }
@media (max-width:650px) { .difficulty-tabs { gap:5px; padding:7px; margin-bottom:20px; border-radius:12px; }.difficulty-tab { min-height:43px; font-size:13px; gap:7px; }.difficulty-count { min-width:23px; font-size:10px; padding:3px 5px; }.difficulty-panel h2 { font-size:14px; }.difficulty-description { font-size:11px; margin-bottom:18px; } }