:root{--bg:#101323;--panel:#1b2035;--text:#f5f5fa;--muted:#a0a6bb;--line:#34384c;--yellow:#ffdf5c;--font:'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;color-scheme:dark;font-family:var(--font);color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}button{transition:transform .16s,background .16s,border-color .16s}button:active{transform:scale(.97)}h1,h2,h3,p{margin:0;text-wrap:balance}h1,h2,h3{max-width:35ch}button[hidden],[hidden]{display:none!important}#world{position:fixed;inset:0;width:100%;height:100%;z-index:-1}#garage{max-width:1440px;margin:auto;padding:0 52px;min-height:100dvh;background:linear-gradient(90deg,rgba(16,19,35,.97) 0%,rgba(16,19,35,.84) 37%,rgba(16,19,35,.06) 75%)}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff13}.wordmark{display:flex;align-items:center;gap:7px;color:white;text-decoration:none;font-family:'Arial Black',Arial,sans-serif;font-size:19px;font-weight:900;font-style:italic;letter-spacing:-.5px}.wordmark>span:last-child{color:var(--yellow)}.brand-symbol{display:grid;place-items:center;margin-right:7px;width:31px;height:31px;background:var(--yellow);color:var(--bg);border-radius:7px;font-size:24px;transform:skew(-8deg)}.top-actions{display:flex;align-items:center;gap:18px;font-size:12px}.mode-label{color:var(--muted)}.small-button{min-height:38px;padding:8px 12px;border:1px solid #ffffff28;border-radius:7px;background:#171c2ce6;font-size:12px}.small-button:hover{background:#34394d}.small-button span{margin-left:8px;color:var(--muted)}.garage-layout{display:grid;grid-template-columns:460px 1fr;gap:55px;min-height:652px;padding-top:37px;padding-bottom:28px}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--yellow);font:700 11px Arial,sans-serif;letter-spacing:2px}.checkered{width:15px;height:15px;background:conic-gradient(white 25%,transparent 0 50%,white 0 75%,transparent 0);background-size:8px 8px}h1{font-size:36px;line-height:1.3;font-weight:800;margin-top:15px}.intro{font-size:14px;color:var(--muted);margin:12px 0 29px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-heading h2{font-size:15px;font-weight:700}.section-heading>span{font-size:10px;color:#737c97;font-variant-numeric:tabular-nums}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.character-card{position:relative;height:108px;border-radius:11px;background:#22273b;border:2px solid transparent;padding:0 0 9px;overflow:hidden}.character-card canvas{display:block;width:100%;height:79px}.character-card .name{font-size:12px;font-weight:600}.character-card:hover{background:#30374d}.character-card[aria-pressed=true]{border-color:var(--yellow);background:#37342e}.character-card[aria-pressed=true]::after,.kart-card[aria-pressed=true]::after{content:'✓';position:absolute;right:6px;top:6px;width:17px;height:17px;display:grid;place-items:center;font-size:11px;background:var(--yellow);color:#161822;border-radius:50%;font-weight:900}.kart-heading{margin-top:23px}.kart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.kart-card{position:relative;background:#22273b;border:2px solid transparent;border-radius:9px;padding:4px 2px 9px;min-width:0}.kart-card canvas{width:100%;height:59px;display:block}.kart-card .name{font-size:11px;white-space:nowrap}.kart-card:hover{background:#30374d}.kart-card[aria-pressed=true]{border-color:var(--yellow);background:#37342e}.preview-panel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding-bottom:12px}.course-info{position:absolute;top:6px;right:0;text-align:right}.cup-label{font:700 10px Arial,sans-serif;letter-spacing:3px;color:#d9dced;display:inline-block;margin-bottom:10px}.course-info h2{font-family:'Arial Black',Impact,Arial,sans-serif;font-size:clamp(38px,4.4vw,65px);font-weight:900;font-style:italic;line-height:.97;letter-spacing:-1px;text-shadow:0 3px 0 #253754}.course-info h2 span{color:var(--yellow)}.course-info p{font-size:13px;margin-top:13px;color:#dde0ee}.course-info p span{padding:3px 7px;border-radius:4px;background:#ffffff1c;margin-left:6px;font:600 10px Arial,sans-serif}.preview-stage{height:345px;position:relative;margin-top:140px}.preview-stage canvas{position:absolute;width:100%;height:100%;z-index:2}.orbit{position:absolute;left:7%;right:3%;height:102px;border:1px solid #d4def83b;border-radius:50%;bottom:23px;transform:rotate(-5deg);background:#1d2b4b38}.orbit-two{left:11%;right:7%;height:88px;bottom:30px;border-style:dashed;opacity:.4}.preview-caption{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font:700 9px Arial;letter-spacing:3px;color:#aab6d9}.racer-details{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 22px}.racer-details h3{font-size:28px;font-weight:800}.racer-details p{font-size:13px;margin-top:5px;color:#afb8d0}.racer-details>span{font-size:12px;color:#bcc4d8}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.stat-label{font-size:11px;display:flex;justify-content:space-between;color:#c4c9dc;margin-bottom:9px}.stat-label strong{color:var(--text);font-size:10px;font-weight:500}.stat-track{display:flex;gap:4px}.stat-track i{flex:1;height:6px;background:#ffffff20;border-radius:1px;transform:skew(-15deg)}.stat-track i.filled{background:var(--yellow)}.race-footer{min-height:96px;border-top:1px solid #ffffff23;display:flex;align-items:center;justify-content:space-between;gap:20px}.course-summary{display:flex;align-items:center;gap:17px}.track-icon{font:64px Arial;transform:rotate(-20deg);line-height:1;color:#bac4dc}.course-summary strong{font-size:15px}.course-summary p{font-size:11px;color:var(--muted);margin-top:7px}.course-summary p span{margin-left:13px;font:9px Arial;letter-spacing:1px}.start-button{background:var(--yellow);color:#1c2030;min-height:58px;min-width:238px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:9px;font-size:17px;font-weight:800}.start-button:hover{background:#ffea8c;transform:translateY(-2px)}.start-button>span{font-size:27px;font-weight:400}.bottomline{display:flex;justify-content:space-between;font-size:10px;color:#777f99;padding:4px 0 20px}.bottomline>span:first-child{font:9px Arial;letter-spacing:1.1px}
body.racing{overflow:hidden}#race-ui{height:100dvh;position:fixed;inset:0;padding:28px 40px;pointer-events:none}#race-ui button{pointer-events:auto}.race-top{display:flex;justify-content:space-between;align-items:flex-start}.rank{display:flex;align-items:baseline;gap:10px;text-shadow:0 3px 8px #101324}.rank strong{font:italic 900 96px/1 'Arial Black',Arial;color:var(--yellow)}.rank>span{font-weight:700}.lap-info{display:flex;align-items:center;gap:15px;background:#121629dd;padding:14px 22px;border-radius:12px}.lap-info>span{font:800 12px Arial;color:var(--yellow)}.lap-info strong{font:800 27px Arial}.lap-info small{font-size:15px;color:var(--muted)}#timer{font:17px monospace;padding-left:15px;border-left:1px solid var(--line)}#countdown{position:absolute;top:33%;left:0;right:0;text-align:center;font:italic 900 135px 'Arial Black',Arial;color:var(--yellow);text-shadow:0 8px 0 #181d3b}#race-message{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:18px;font-weight:800;text-align:center;text-shadow:0 2px 8px #111}.race-bottom{position:absolute;bottom:35px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:flex-end}.boost-info{background:#121629d9;padding:17px 20px;border-radius:12px;display:grid;gap:5px;min-width:190px}.boost-info>span{font-size:10px;letter-spacing:1px;color:#b2bbd5}.boost-info strong{font-size:27px;letter-spacing:6px;color:var(--yellow)}.boost-info small{font-size:9px;color:var(--muted)}.drift-meter{height:5px;background:#ffffff20;margin:6px 0 1px}.drift-meter i{display:block;height:100%;background:#71ddff;width:0}.speedometer{text-align:right;text-shadow:0 3px 10px #121629}.speedometer strong{font:italic 900 73px/1 'Arial Black',Arial}.speedometer>span{font:13px Arial;margin-left:5px}#speed-bar{height:5px;background:var(--yellow);margin:10px 0 0 auto;width:0;max-width:220px}#touch-controls{display:none}dialog{background:#1c2238;color:var(--text);border:1px solid #414964;border-radius:22px;padding:38px;width:min(460px,calc(100% - 32px));box-shadow:0 28px 140px #080b1ccb}dialog::backdrop{background:#080b1caf;backdrop-filter:blur(8px)}dialog h2{margin:16px 0 24px;font-size:30px}dialog .start-button{width:100%;justify-content:center;margin-top:23px;font-size:15px}.dialog-close{position:absolute;right:15px;top:10px;background:none;font-size:28px;color:#aeb4ce;min-width:44px;min-height:44px}.control-list{display:grid;grid-template-columns:90px 1fr;gap:14px 20px;font-size:13px;line-height:1.5}.control-list dt{color:var(--yellow);font-weight:700}.control-list dd{margin:0;color:#d4daec}dialog p{font-size:13px;color:#b2bdd7;line-height:1.7}dialog .secondary-button{width:100%;margin-top:10px;min-height:44px;background:transparent;color:#bbc3d9;font-size:13px}#standings{padding:0;list-style:none;counter-reset:racer;margin:22px 0}#standings li{counter-increment:racer;display:flex;gap:14px;padding:9px 12px;font-size:13px}#standings li::before{content:counter(racer);color:var(--muted);width:14px}#standings li.player{background:#ffdf5c20;color:var(--yellow);border-radius:6px}#standings small{margin-left:auto;color:var(--muted)}
@media(min-width:1536px){#garage{padding:0 60px}.garage-layout{min-height:calc(100dvh - 230px);padding-top:50px}.preview-stage{height:400px}.choose-panel{align-self:center}.preview-panel{justify-content:center}.course-info{top:25px}}
@media(max-width:1279px){#garage{padding:0 32px}.garage-layout{grid-template-columns:400px 1fr;gap:32px}.topbar{height:80px}.course-info h2{font-size:48px}.preview-stage{height:300px}.racer-details>span{display:none}.stats{gap:12px}.character-card{height:105px}.intro{font-size:13px}.course-summary{gap:10px}.bottomline{font-size:9px}}
@media(max-width:1023px){#garage{padding:0 24px}.garage-layout{grid-template-columns:340px 1fr;gap:25px;min-height:620px}h1{font-size:30px}.character-card{height:96px}.character-card canvas{height:67px}.kart-card .name{font-size:10px}.course-info h2{font-size:40px}.preview-stage{height:250px}.stats{grid-template-columns:1fr;gap:12px}.stat-label{margin-bottom:5px}.top-actions{gap:8px}.mode-label{display:none}.wordmark{font-size:16px}.bottomline>span:last-child{display:none}.race-top{gap:15px}.rank strong{font-size:70px}.lap-info{padding:12px}.lap-info>span{display:none}}
@media(max-width:767px){#garage{padding:0 20px;background:linear-gradient(180deg,#101323c9,#101323f5 650px)}.topbar{height:70px}.top-actions{gap:6px}.top-actions .small-button{font-size:10px;padding:6px 8px}.top-actions .small-button span{display:none}.wordmark{font-size:13px;gap:4px}.brand-symbol{width:25px;height:25px;font-size:20px;margin-right:3px}.garage-layout{display:flex;flex-direction:column;gap:20px;padding-top:24px;min-height:0}.choose-panel{order:2}.preview-panel{order:1;min-height:265px;display:block;padding-bottom:0}.course-info{top:0;right:0}.course-info h2{font-size:39px}.cup-label{font-size:8px;letter-spacing:2px}.course-info p{font-size:11px}.preview-stage{height:220px;margin:0 90px 0 -15px}.preview-caption{display:none}.orbit{bottom:25px}.racer-details{position:absolute;left:0;bottom:20px;margin:0}.racer-details h3{font-size:23px}.racer-details p{font-size:11px}.stats{position:absolute;right:0;bottom:10px;width:44%;gap:8px}.stat-label{font-size:9px;margin-bottom:4px}.stat-track i{height:4px}.eyebrow{font-size:9px}h1{font-size:24px;line-height:1.3;margin-top:11px}h1 br{display:none}.intro{font-size:12px;margin:8px 0 24px}.character-grid{gap:8px}.character-card{height:96px}.character-card canvas{height:67px}.kart-heading{margin-top:20px}.kart-card canvas{height:54px}.kart-card .name{font-size:10px}.race-footer{position:sticky;bottom:0;z-index:4;background:#101323f5;min-height:86px;border-top:1px solid var(--line);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}.course-summary{display:none}.race-footer .start-button{width:100%;min-height:55px}.bottomline{padding-top:12px}.section-heading h2{font-size:14px}.section-heading span{font-size:9px}#race-ui{padding:20px}.rank strong{font-size:54px}.rank>span{font-size:12px}.lap-info{display:grid;gap:5px;text-align:center;padding:8px 13px}.lap-info strong{font-size:22px}#timer{font-size:11px;border:0;padding:0}#pause{font-size:10px;padding:8px}#pause>span{display:none}#countdown{font-size:90px}.race-bottom{left:20px;right:20px;bottom:180px}.speedometer strong{font-size:45px}.boost-info{padding:10px 13px;min-width:120px}.boost-info strong{font-size:18px}.boost-info>span{font-size:8px}#touch-controls{display:flex;position:absolute;bottom:28px;left:14px;right:14px;justify-content:space-between;gap:12px;pointer-events:auto;user-select:none;touch-action:none}#touch-controls>div{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;max-width:55%}#touch-controls button{min-width:49px;min-height:54px;background:#202944e6;border:1px solid #ffffff45;border-radius:12px;font-size:10px;touch-action:none}#touch-controls>div:first-child{flex-wrap:nowrap}#touch-controls>div:first-child button{font-size:25px}#touch-controls .accelerate{background:var(--yellow);color:#101323;font-weight:800}#race-message{font-size:14px;width:90%;top:25%}dialog{padding:28px}dialog h2{font-size:25px}.control-list{font-size:12px;grid-template-columns:72px 1fr;gap:12px}}
@media(max-width:359px){#garage{padding:0 14px}.wordmark{font-size:11px}.top-actions .small-button{padding:5px;font-size:9px}.preview-stage{margin-right:65px}.course-info h2{font-size:34px}.kart-card .name{font-size:9px}.character-card .name{font-size:11px}.control-list{gap:10px}.start-button{min-width:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Keep the race statistics legible over every passing road color. */
.racer-details,.stats{background:#101728db;padding:14px 18px;border-radius:10px}.racer-details{margin-bottom:8px}.race-footer{background:#101323ef;padding-left:18px;padding-right:18px;border-radius:10px}.bottomline{background:#101323c9;padding:12px 4px 16px}.racer-details>span{color:#c6cce0}
@media(max-width:767px){.racer-details{padding:8px 11px;bottom:10px}.stats{padding:10px;width:46%;bottom:10px}.race-footer{padding-left:0;padding-right:0;border-radius:0}}
/* Touch controls must also be available on landscape phones and tablets. */
@media(pointer:coarse) and (min-width:768px){#touch-controls{display:flex;position:absolute;bottom:24px;left:24px;right:24px;justify-content:space-between;gap:16px;pointer-events:auto;user-select:none;touch-action:none}#touch-controls>div{display:flex;gap:9px;align-items:flex-end}#touch-controls button{min-width:66px;min-height:60px;background:#202944e6;border:1px solid #ffffff45;border-radius:12px;font-size:12px;touch-action:none}#touch-controls>div:first-child button{font-size:28px}#touch-controls .accelerate{background:var(--yellow);color:#101323;font-weight:800}.race-bottom{bottom:110px}.rank strong{font-size:65px}}
/* The game world and selected racer are now actual lit 3D geometry. */
#preview{position:absolute;inset:0}.orbit{display:none}.preview-caption{background:#101323d9;padding:5px 10px;border-radius:4px}#physics-status{position:absolute;top:106px;left:50%;transform:translateX(-50%);padding:8px 13px;background:#121629dd;border-radius:7px;color:#c7d5e8;font-size:11px}.webgl-error{position:relative;z-index:5;background:#762d39;padding:18px;line-height:1.5}.start-button:disabled{cursor:not-allowed;background:#747783}
@media(max-width:767px){#physics-status{top:98px;font-size:9px}.preview-stage{pointer-events:none}}
@media(max-width:767px){#garage{background:linear-gradient(180deg,#10132330 0,#10132315 320px,#101323ef 365px,#101323 650px)}.topbar{background:#101323aa}.course-info h2{text-shadow:0 2px 6px #101323}.racer-details{background:#101728e8}.stats{background:#101728ef}}
/* Explicit DOM/WebGL stacking keeps native canvas layers behind interactive UI. */
#world{z-index:0;pointer-events:none}#garage{position:relative;z-index:1}#race-ui{z-index:2}
h1,h2,h3,p{word-break:keep-all}