@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--paper:#f4f1e9;--ink:#22302e;--muted:#7c827b;--line:#d9dbd0;--orange:#ec7751;--mint:#b7d9c9}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'Noto Sans KR',sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;padding:12px 16px;border:1px solid #bac2b7;border-radius:7px;background:#f8f7f1;color:var(--ink);transition:background .15s,transform .15s}button:hover:not(:disabled){background:#e6e9dc;transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.quiet{background:transparent;border-color:var(--line)}.primary{background:var(--orange);border-color:var(--orange);color:#fffaf0;font-weight:800}.primary:hover:not(:disabled){background:#dc6440}.dark{background:var(--ink);color:white;border-color:var(--ink)}.dark:hover:not(:disabled){background:#3b4a43}.wide{width:100%;display:flex;justify-content:space-between;align-items:center}.wide span{font-size:11px;font-weight:500}a{color:inherit;text-decoration:none}header{display:flex;justify-content:space-between;align-items:center;padding:22px 4%;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;gap:13px;align-items:center;font:800 29px 'Barlow Condensed',sans-serif;letter-spacing:1px}.brand small{display:block;font:8px 'Noto Sans KR';letter-spacing:1.7px;margin-top:4px;color:var(--muted)}.brand-mark{position:relative;display:block;background:var(--orange);color:#fff2de;font:900 italic 37px 'Barlow Condensed';width:47px;height:47px;line-height:47px;text-align:center;border-radius:11px}.brand-mark span{position:absolute;font-size:15px;right:4px;top:-6px}nav{display:flex;align-items:center;gap:18px;font-size:11px}nav button{font-size:11px;padding:9px 12px}.status{font-size:10px;white-space:nowrap;color:#43866b}.status:before{content:'';width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:6px;background:currentColor}.status.off{color:#b57e47}main{max-width:1560px;margin:auto;padding:0 4%}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(42px,4.4vw,68px);line-height:1.16;letter-spacing:-3.8px;font-weight:900}h2{font-size:25px;letter-spacing:-1px}h3{font-size:15px}em{font-style:normal;color:var(--orange)}.eyebrow{font:600 11px 'Barlow Condensed';letter-spacing:1.8px;color:var(--muted)}.eyebrow i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:7px}.hero{display:grid;grid-template-columns:.92fr 1.15fr;align-items:center;gap:44px;padding:55px 0 46px}.hero h1{margin:26px 0 22px}.lede{font-size:15px;color:#7a8278;line-height:1.9}.hero-stats{display:flex;gap:30px;margin:30px 0}.hero-stats span{font-size:10px;color:var(--muted);display:flex;gap:8px;align-items:center}.hero-stats b{font:600 31px 'Barlow Condensed';color:var(--ink)}.hero-note{display:flex;gap:13px;align-items:center;padding-top:22px;border-top:1px solid var(--line)}.hero-note p{font-size:12px;margin:0}.hero-note small{display:block;color:var(--muted);font-size:10px;margin-top:6px}.round-icon{display:block;width:36px;height:36px;line-height:34px;text-align:center;border:1px solid #bcc5b7;border-radius:50%;font-size:23px}.hero-display{border:1px solid #c5cbbf;border-radius:12px;overflow:hidden;background:#e7e9da;box-shadow:14px 18px 0 #dfdfd133;transform:rotate(1deg)}.display-label{display:flex;justify-content:space-between;padding:15px 19px;font:600 10px 'Barlow Condensed';letter-spacing:1.5px;background:#e9ebdf}.display-bottom{display:flex;align-items:center;gap:12px;padding:15px 18px;font-size:10px}.display-bottom b{margin-left:auto;font-size:23px}.tag{background:#d7e1cb;padding:6px 9px;border-radius:4px;font:600 10px 'Barlow Condensed';letter-spacing:.8px}#homeView{height:360px;position:relative;overflow:hidden}#viewport{position:absolute;inset:0;overflow:hidden}#viewport canvas{display:block;width:100%;height:100%;outline:0}#renderError{position:absolute;inset:0;display:grid;place-content:center;background:#354238;color:white;font-size:13px;line-height:2;padding:25px;z-index:3}.home-grid{display:grid;grid-template-columns:.8fr 1.25fr;gap:35px;margin-bottom:55px}.panel{background:#fbfaf4;border:1px solid var(--line);border-radius:11px;padding:27px}.launch h2{margin:17px 0 23px}.launch>label{font-size:11px;color:var(--muted);display:block;margin-bottom:8px}input,select{background:#fffef9;border:1px solid #cbd0c3;border-radius:6px;padding:12px;min-width:0;color:var(--ink)}#name{width:100%;margin-bottom:12px}.divider{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted);margin:17px 0}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}.join-row{display:flex;gap:8px;margin-top:11px}.join-row input{flex:1;width:0;text-transform:uppercase;letter-spacing:1px}.tiny{font-size:11px;line-height:1.85}.muted{color:var(--muted)}#offlineHint{margin:17px 0 0}.section-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px}.section-head h2,.section-head h1{margin:0}.section-head .eyebrow{margin-bottom:9px}.pill{font-size:9px;border:1px solid #c6ccb9;border-radius:30px;padding:6px 9px;white-space:nowrap;color:var(--muted)}.courses{padding-top:8px}.track-card{display:flex;align-items:center;text-align:left;width:100%;padding:15px 19px;margin-bottom:11px;gap:20px;background:#e8ede0;border-color:#cbd4bf}.track-card.selected{border:2px solid var(--ink);padding:14px 18px}.track-card[data-track=canyon]{background:#eee0d2;border-color:#dec8b4}.track-card[data-track=neon]{background:#dfe2ee;border-color:#c5cadd}.track-card.selected[data-track]{border-color:var(--ink)}.track-card svg{width:95px;height:66px;overflow:visible;flex-shrink:0}.track-card .course-info small{font:600 10px 'Barlow Condensed';letter-spacing:1px;color:#777f73}.track-card h3{font-size:20px;letter-spacing:-.7px;margin:5px 0}.track-card p{font-size:10px;color:#7b8078;margin:0}.course-end{margin-left:auto;font:600 28px 'Barlow Condensed';opacity:.5}.course-info{flex:1}.courses>.tiny{margin:15px 0 0}footer{border-top:1px solid var(--line);padding:23px 0 30px;display:flex;justify-content:space-between;align-items:center;gap:15px;color:#8a8e82;font-size:9px;line-height:1.8}.footer-brand{font:700 17px 'Barlow Condensed';letter-spacing:.5px;color:var(--ink)}.footer-brand span{display:block;font-size:7px;margin-top:5px;color:var(--muted)}footer>span:last-child{font:600 9px 'Barlow Condensed';letter-spacing:1px}.lobby-heading{margin:40px 0 30px}.lobby-heading h1{font-size:39px;letter-spacing:-2px}.lobby-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:25px;margin-bottom:55px}#roomCode{font:700 25px 'Barlow Condensed';letter-spacing:3px;color:var(--orange);margin-left:10px}.lobby-settings{display:flex;gap:15px;margin-bottom:25px}.lobby-settings label{flex:1;min-width:0;font-size:11px;color:var(--muted)}.lobby-settings select{display:block;width:100%;margin-top:7px}.driver{display:flex;gap:13px;align-items:center;padding:15px 0;border-top:1px solid var(--line);min-height:75px}.driver .helmet{width:40px;height:40px;border-radius:14px 14px 11px 11px;position:relative;box-shadow:inset -5px -5px #0001}.helmet:after{content:'';display:block;background:#273e48;width:28px;height:12px;border-radius:5px;position:absolute;top:13px;left:6px;border-top:2px solid #ffffffa6}.driver strong{font-size:12px}.driver small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.driver .driver-ready{margin-left:auto;font-size:11px;color:#518364}.driver button{font-size:9px;padding:5px}.driver.empty{color:#afb4a8;font-size:12px}.button-row{display:flex;gap:10px}.button-row button{flex:1}.lobby-brief h2{line-height:1.55;margin:25px 0}.lobby-brief p{font-size:12px;line-height:1.9;color:var(--muted)}.note-number{display:flex;align-items:center;gap:18px;border-block:1px solid var(--line);padding:18px 0;margin:26px 0}.note-number>b{font:700 56px 'Barlow Condensed';color:var(--orange)}.note-number span{font-size:11px;color:var(--muted);line-height:1.8}.race-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0}.race-toolbar>div{display:flex;align-items:center;gap:12px}.race-toolbar>div:first-child{display:block}.race-toolbar b{display:block;font-size:13px;margin-top:4px}.race-toolbar button{padding:8px 10px;font-size:11px}.toggle{font-size:10px;color:var(--muted);display:flex;gap:4px;align-items:center}.toggle input{accent-color:var(--orange);margin:0}#raceView{height:clamp(450px,65vh,760px);position:relative;background:#374541;border-radius:12px;overflow:hidden;isolation:isolate;touch-action:none}#raceView #viewport{z-index:-1}.hud-top{position:absolute;left:25px;right:25px;top:22px;display:flex;align-items:start;gap:25px;pointer-events:none;color:white;text-shadow:0 2px 10px #0005}.position{display:flex;align-items:center;gap:10px}.position>strong{font:800 italic 85px 'Barlow Condensed';line-height:.9}.position>span{font:600 11px 'Barlow Condensed';letter-spacing:1px;display:flex;flex-direction:column;gap:5px}.position span b{font:500 22px 'Barlow Condensed';color:#ffead6}.lap-clock{display:flex;gap:24px;padding:5px 20px;border-left:1px solid #ffffff70}.lap-clock small{font:500 10px 'Barlow Condensed';letter-spacing:1.5px;display:block;margin-bottom:5px}.lap-clock b{font:600 30px 'Barlow Condensed';font-variant-numeric:tabular-nums}.lap-clock i{font-style:normal;opacity:.65;font-size:19px}#leaderboard{margin-left:auto;min-width:150px;font-size:10px;display:grid;gap:5px}.leader{display:flex;gap:8px;background:#1d303c80;backdrop-filter:blur(6px);padding:6px 9px;border-radius:4px}.leader.you{background:#fff2dded;color:#253839;text-shadow:none}.leader b{font:700 13px 'Barlow Condensed'}.leader i{width:6px;height:6px;border-radius:50%;margin-top:4px}.leader span:last-child{margin-left:auto;font:11px 'Barlow Condensed'}#attackWarning{position:absolute;top:120px;left:50%;transform:translateX(-50%);background:#ea674af2;color:white;padding:10px 20px;border-radius:8px;font-size:12px;box-shadow:0 8px 25px #0002;text-align:center}#raceNotice{position:absolute;left:50%;top:36%;transform:translateX(-50%);background:#20333bd9;color:white;padding:17px 25px;border-radius:10px;text-align:center;font-size:13px;max-width:85%;width:max-content}.hud-bottom{position:absolute;bottom:25px;left:27px;right:27px;display:flex;align-items:end;justify-content:space-between;gap:15px;pointer-events:none}.speed{color:white;text-shadow:0 2px 12px #0004}.speed strong{font:700 italic 72px 'Barlow Condensed';line-height:1}.speed>span{font:600 12px 'Barlow Condensed';margin-left:8px;letter-spacing:1px}#boostMeter{width:175px;height:6px;background:#1e344267;border-radius:5px;overflow:hidden;margin-top:8px}#boostMeter i{display:block;width:0;height:100%;background:#ffe28e;transition:width .1s}.speed small{display:block;font-size:9px;margin-top:8px;color:#fff0df}.item-slot{pointer-events:auto;background:#fffcf0ee;border:2px solid #fff5dc;backdrop-filter:blur(10px);border-radius:15px;padding:10px 17px;width:150px;min-height:115px;box-shadow:0 8px 30px #17273744;position:absolute;left:50%;bottom:0;transform:translateX(-50%)}.item-slot:hover:not(:disabled){transform:translateX(-50%) translateY(-2px);background:#fff9df}.item-slot:disabled{opacity:.7}.item-slot>span{font:700 43px 'Barlow Condensed';display:block;line-height:1}.item-slot b{display:block;font-size:11px;margin-top:6px}.item-slot small{display:block;font-size:9px;color:#849184;margin-top:5px}#minimap{width:160px;height:120px;background:#1d303c70;backdrop-filter:blur(8px);border:1px solid #ffffff40;border-radius:12px}.overlay{position:absolute;inset:0;background:#1b303a69;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:5}#countdown{flex-direction:column;color:#fff8dc;gap:15px;font:600 13px 'Barlow Condensed';letter-spacing:3px}#countdown b{font:800 italic 145px 'Barlow Condensed';line-height:1;color:#ffedb7}.result-card{background:#f7f5e9;width:min(490px,92%);border:1px solid #fff9e9;padding:30px;border-radius:16px;box-shadow:0 20px 80px #17283466;text-align:center}.result-card h2{font-size:38px;margin:15px 0 10px}.result-card>p:not(.eyebrow){font-size:11px;color:var(--muted)}.result-row{display:flex;align-items:center;gap:13px;text-align:left;padding:12px 0;border-top:1px solid var(--line);font-size:12px}.result-row>b{font:700 italic 30px 'Barlow Condensed';width:23px}.result-row small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.result-row time{margin-left:auto;font:600 23px 'Barlow Condensed'}.result-card .button-row{margin-top:18px}.result-card button{font-size:12px}#speedLines{position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 48%,transparent 0deg 12deg,#fff5 12.05deg 12.15deg,transparent 12.25deg 20deg);mask-image:radial-gradient(ellipse,transparent 42%,#000 100%);transition:opacity .2s;z-index:1}.drive-controls{margin-top:13px;display:flex;justify-content:center;align-items:center;padding:13px;border-radius:9px;background:#e8eadd}.keys-hint{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px}.keys-hint>span{margin:0 12px}kbd{font:10px sans-serif;padding:4px 6px;border:1px solid #b8c1b2;border-radius:4px;background:#f5f7ee;color:#647462}.touch-controls{display:none;gap:8px;width:100%;justify-content:space-between}.touch-controls>div{display:flex;gap:8px}.touch-controls button{touch-action:none;user-select:none;font-size:11px;min-height:48px;min-width:47px}.touch-controls .touch-drift{background:var(--orange);border-color:var(--orange);color:white;font:700 15px 'Barlow Condensed';padding:12px 22px}.touch-controls button.pressed{background:#c5d9bd;transform:scale(.96)}#raceTip{margin:13px 0 25px;text-align:center}#race:fullscreen{background:var(--paper);padding:10px;width:100%;overflow:auto}#race:fullscreen #raceView{height:calc(100dvh - 145px)}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);z-index:20;max-width:calc(100% - 25px);width:max-content;background:#253d37;color:#fffaf0;padding:13px 20px;border-radius:8px;font-size:12px;pointer-events:none;opacity:0;transition:.2s;box-shadow:0 9px 35px #24332933}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(680px,calc(100% - 28px));max-height:85dvh;overflow:auto;background:#f7f6ed;color:var(--ink);border:1px solid #b6c1ad;border-radius:13px;padding:27px}dialog::backdrop{background:#20352db3;backdrop-filter:blur(5px)}dialog p{font-size:12px;line-height:1.9;color:#7a8377}dialog h3{margin-top:25px}#itemGuide{display:grid;grid-template-columns:1fr 1fr;gap:10px}.item-guide{font-size:10px;padding:12px;background:#e9edde;border-radius:7px;line-height:1.8}.item-guide b{display:block;font-size:12px}.item-guide span{display:block;color:#7a8377}[hidden]{display:none!important}
@media(max-width:1100px){.hero{gap:25px}.hero-stats{gap:18px}.hero-stats span{font-size:9px}.hero-stats b{font-size:26px}.home-grid{gap:22px}.track-card{gap:12px}.course-info h3{font-size:18px}#homeView{height:340px}nav{gap:10px}.race-toolbar>div:last-child{gap:8px}}@media(max-width:800px){header{padding:16px 4%;gap:8px}.brand{font-size:24px;gap:8px}.brand small{font-size:6px;letter-spacing:1px}.brand-mark{width:38px;height:38px;line-height:38px;font-size:32px}nav{gap:7px}nav>a,#serverStatus{display:none}nav button{font-size:9px;padding:8px}.hero{grid-template-columns:1fr;gap:26px;padding:30px 0}.hero h1{font-size:49px;letter-spacing:-3px;margin:20px 0}.hero-copy .eyebrow{font-size:10px}.hero-stats{gap:23px;margin:23px 0}.hero-stats span{font-size:9px}.hero-note{padding-top:15px}.hero-display{transform:none}#homeView{height:290px}.home-grid,.lobby-grid{grid-template-columns:1fr}.panel{padding:21px}.courses{margin-top:10px}.courses .section-head{align-items:start}.courses h2{font-size:22px}.courses .pill{display:none}.track-card svg{width:76px}.lobby-heading h1{font-size:30px}.lobby-heading>button{padding:9px;font-size:10px}#roomCode{display:block;margin-left:0;margin-top:5px}.lobby-settings{gap:10px}.lobby-settings select{padding:10px 7px;font-size:11px}.race-toolbar{flex-wrap:wrap;gap:10px;margin:15px 0}.race-toolbar>div:last-child{width:100%;justify-content:space-between}.race-toolbar>div:first-child{display:flex;gap:12px}.race-toolbar b{font-size:11px}.race-toolbar .eyebrow{font-size:10px}.race-toolbar .status{font-size:9px}.toggle{font-size:9px}.race-toolbar button{font-size:10px;padding:7px}#raceView{height:60dvh;min-height:400px;border-radius:9px}.hud-top{left:14px;right:14px;top:16px;gap:14px}.position>strong{font-size:59px}.position>span{font-size:8px}.position span b{font-size:16px}.lap-clock{padding:2px 12px;gap:13px}.lap-clock small{font-size:8px}.lap-clock b{font-size:23px}.lap-clock i{font-size:13px}#leaderboard{position:absolute;right:0;top:80px;min-width:110px;font-size:8px}.leader{padding:4px 6px;gap:5px}.leader b{font-size:10px}.leader span:last-child{font-size:9px}.hud-bottom{left:14px;right:14px;bottom:17px}.speed strong{font-size:52px}.speed>span{font-size:9px}.speed small{font-size:8px;max-width:125px}#boostMeter{width:112px}#minimap{width:90px;height:75px}.item-slot{width:106px;min-height:97px;padding:9px 5px;bottom:0}.item-slot>span{font-size:34px}.item-slot b{font-size:9px}.item-slot small{font-size:8px}#attackWarning{top:85px;left:14px;transform:none;max-width:calc(100% - 140px);font-size:10px;padding:9px;line-height:1.6}.keys-hint{display:none}.touch-controls{display:flex}.drive-controls{padding:8px}.touch-controls{gap:5px}.touch-controls>div{gap:5px}.touch-controls button{padding:10px 7px;min-width:39px;font-size:9px}.touch-controls .touch-drift{padding:10px 13px;font-size:13px}footer{flex-wrap:wrap;gap:12px}.footer-brand{width:100%}footer>span:last-child{font-size:8px}#raceTip{font-size:10px}.result-card{padding:20px}.result-card h2{font-size:30px}.result-row{padding:9px 0;font-size:11px}.result-row time{font-size:20px}.result-card .eyebrow{font-size:9px}.result-card button{font-size:11px;padding:10px}#itemGuide{grid-template-columns:1fr}dialog h2{font-size:20px}}
[data-record]{display:block;margin-top:5px;font-size:9px!important;letter-spacing:0!important;color:#4e7e69!important}[data-record]:empty{display:none}
@media(max-height:540px) and (orientation:landscape){#raceView{height:75dvh;min-height:280px}.hud-top{top:10px}.hud-bottom{bottom:10px}.position>strong{font-size:52px}.speed strong{font-size:46px}.result-card{padding:12px}.result-card h2{font-size:22px;margin:6px}.result-card .eyebrow{display:none}.result-row{padding:4px}.result-card .button-row{margin-top:8px}#leaderboard{top:60px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.item-slot{touch-action:none;user-select:none}.item-slot.aiming{border-color:#ff6c78;box-shadow:0 0 0 4px #ff6c7855}#aimReticle{position:absolute;transform:translate(-50%,-50%);color:#ffed92;font:64px sans-serif;text-shadow:0 0 6px #ff493c;pointer-events:none;z-index:3}#aimStatus{position:absolute;left:50%;bottom:155px;transform:translateX(-50%);background:#302237e8;border:1px solid #ffb24e;color:#fff3d4;border-radius:10px;padding:10px 14px;font-size:12px;max-width:85%;text-align:center;pointer-events:none;z-index:3}@media(max-width:800px){#aimStatus{font-size:10px;bottom:125px;width:85%}}