:root{--bg:#0d1426;--panel:#0c1120d1;--line:#ffffff1f;--text:#eef1f7;--dim:#9aa4bb;--accent:#ff7a1a;--accent2:#37c6ff;--font:"Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:ui-monospace, "SFMono-Regular", Consolas, monospace}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);overscroll-behavior:none;margin:0;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none}#view{width:100%;height:100%;display:block;position:fixed;inset:0}[hidden]{display:none!important}#boot{background:var(--bg);letter-spacing:.1em;color:var(--dim);z-index:50;place-items:center;font-weight:700;transition:opacity .6s;display:grid;position:fixed;inset:0}#boot.gone{opacity:0;pointer-events:none}#gl-lost{color:var(--dim);text-align:center;z-index:60;background:#080a10eb;place-content:center;justify-items:center;gap:14px;padding:16px;font-weight:700;display:grid;position:fixed;inset:0}#gl-lost[hidden]{display:none}#ui{pointer-events:none;z-index:20;place-items:center;padding:16px;display:grid;position:fixed;inset:0}#ui.dim{background:radial-gradient(#05081040,#050810b3)}.panel{pointer-events:auto;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);border-radius:18px;width:min(460px,100%);max-height:calc(100vh - 32px);padding:26px 24px;animation:.25s ease-out pop;overflow:auto;box-shadow:0 20px 60px #00000073}@keyframes pop{0%{opacity:0;transform:translateY(10px)scale(.98)}}#scr-main{width:min(520px,100%)}h1{letter-spacing:-.02em;margin:0;font-size:clamp(40px,9vw,64px);font-style:italic;font-weight:900;line-height:1}h1 span{color:var(--accent)}h2{align-items:center;gap:10px;margin:0 0 16px;font-size:22px;display:flex}h2 code{font-family:var(--mono);color:var(--accent);letter-spacing:.15em;background:#ff7a1a29;border-radius:8px;padding:2px 10px}.tag{color:var(--dim);margin:8px 0 22px}.menu{gap:10px;display:grid}.mode-box{margin:-6px 0 18px}.mode-box>span{color:var(--dim);font-size:13px}.seg{border:1px solid var(--line);background:#ffffff0f;border-radius:12px;gap:4px;margin-top:6px;padding:4px;display:flex}.seg button{text-align:center;color:var(--dim);background:0 0;border-radius:9px;flex:1;padding:9px 6px;font-weight:700}.seg button.on{background:var(--accent);color:#fff}.mode-box .note{min-height:2.9em;margin:8px 0 0}#track-hint,#weather-hint{min-height:0}#track-pick{grid-template-columns:repeat(5,minmax(0,1fr));display:grid}#track-pick button{white-space:nowrap;padding:9px 0;font-size:13px}.menu-row{gap:10px;margin-top:12px;display:flex}.menu-row>*{flex:1}button{font:inherit;color:var(--text);cursor:pointer;text-align:left;background:linear-gradient(#ff8c33,#ec5f00);border:0;border-radius:12px;padding:13px 16px;font-weight:800;transition:transform 80ms,filter .15s}button:hover{filter:brightness(1.08)}button:active{transform:scale(.98)}button:disabled{opacity:.45;cursor:default;filter:none}button small{opacity:.85;margin-top:2px;font-size:12.5px;font-weight:500;display:block}.menu>button:not(.ghost){background:linear-gradient(90deg,#ff7a1af2,#ec5000e6)}.menu>button:nth-child(2){background:linear-gradient(90deg,#37c6ffd9,#1678dcd9)}.menu>button:nth-child(3){background:linear-gradient(90deg,#a05affd9,#6432dcd9)}button.ghost{border:1px solid var(--line);text-align:center;background:#ffffff12}label{color:var(--dim);gap:6px;margin:12px 0;font-size:14px;display:grid}label.check{color:var(--text);align-items:center;gap:10px;display:flex}body:not(.touch) .touch-only{display:none}input,select{font:inherit;color:var(--text);border:1px solid var(--line);background:#ffffff0f;border-radius:10px;padding:10px 12px}select option{background:#1a2238}input[type=range]{accent-color:var(--accent);padding:0}input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.note{color:var(--dim);font-size:13px;line-height:1.55}#invite-url{width:100%;font-size:13px}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatches button{border:3px solid #0000;border-radius:50%;width:34px;height:34px;padding:0}.swatches button.on{border-color:#fff}#lobby-list{gap:6px;margin:10px 0;padding:0;list-style:none;display:grid}#lobby-list li{background:#ffffff0d;border-radius:10px;align-items:center;gap:10px;padding:8px 12px;display:flex}#lobby-list i{border-radius:50%;width:14px;height:14px}#net-diag{color:var(--dim);margin-top:12px;font-size:12px}#net-diag summary{cursor:pointer}#net-diag-body dl{grid-template-columns:auto 1fr;gap:3px 12px;margin:8px 0 0;display:grid}#net-diag-body dt{color:var(--dim)}#net-diag-body dd{color:var(--text);overflow-wrap:anywhere;margin:0}#net-diag-body .warn,.note.warn{color:#ffb347;margin:8px 0 0;line-height:1.5}#lobby-list em{color:var(--dim);margin-left:auto;font-size:12px;font-style:normal}.keys{border-collapse:collapse;width:100%;font-size:14px}.keys td{border-bottom:1px solid var(--line);padding:7px 4px}.keys td:first-child{color:var(--dim)}kbd{font-family:var(--mono);border:1px solid var(--line);background:#ffffff1a;border-bottom-width:2px;border-radius:6px;margin-right:2px;padding:1px 6px;font-size:12px}#res-table{border-collapse:collapse;width:100%;font-size:14px}#res-table td,#res-table th{border-bottom:1px solid var(--line);text-align:left;padding:8px 6px}#res-table th{color:var(--dim);font-size:12px;font-weight:600}#res-table tr.me td{color:var(--accent);font-weight:800}#res-table .t{font-family:var(--mono);text-align:right}#hud{pointer-events:none;z-index:10;text-shadow:0 2px 8px #0009;font-weight:800;position:fixed;inset:0}.hud-tl{left:max(16px, env(safe-area-inset-left));top:max(14px, env(safe-area-inset-top));position:absolute}#hud-pos{font-size:46px;font-style:italic;line-height:1}#hud-pos small{opacity:.8;font-size:22px}#hud-lap{letter-spacing:.06em;color:var(--accent);margin-top:4px;font-size:18px}#hud-board{gap:3px;margin:10px 0 0;padding:0;font-size:13px;font-weight:700;list-style:none;display:grid}#hud-board li{background:#080c1680;border-radius:6px;align-items:center;gap:7px;width:-moz-fit-content;width:fit-content;min-width:130px;padding:3px 10px 3px 6px;display:flex}#hud-board li span{text-align:right;opacity:.7;width:16px}#hud-board li i{border-radius:2px;width:4px;height:14px}#hud-board li.me{background:#ff7a1a59}.hud-tr{right:max(16px, env(safe-area-inset-right));top:max(14px, env(safe-area-inset-top));text-align:right;gap:2px;display:grid;position:absolute}.hud-tr .row{justify-content:flex-end;align-items:baseline;gap:12px;display:flex}.hud-tr span{color:var(--dim);letter-spacing:.1em;font-size:12px}.hud-tr b{font-family:var(--mono);font-size:20px}.hud-tr .row:first-child b{font-size:26px}#hud-map{left:max(12px, env(safe-area-inset-left));bottom:max(12px, env(safe-area-inset-bottom));opacity:.92;width:190px;height:auto;position:absolute}.hud-br{right:max(18px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));text-align:right;position:absolute}#hud-speed{font-size:64px;font-style:italic;line-height:.9;font-family:var(--font)}.hud-br small{color:var(--dim);font-size:14px}.rpm{background:#ffffff26;border-radius:3px;width:170px;height:6px;margin-top:8px;margin-left:auto;overflow:hidden}.rpm i{height:100%;width:calc(var(--rpm,0) * 100%);background:linear-gradient(90deg,#37c6ff,#ffe14d 70%,#ff3b2f);display:block}#hud-lights{background:#0a0a0ebf;border-radius:14px;gap:12px;padding:12px 16px;display:flex;position:absolute;top:18%;left:50%;transform:translate(-50%)}#hud-lights i{background:#2a0a0a;border-radius:50%;width:34px;height:34px;box-shadow:inset 0 0 8px #000}#hud-lights i.r{background:#ff2a1a;box-shadow:0 0 20px #ff2a1a}#hud-lights i.g{background:#2dff6a;box-shadow:0 0 20px #2dff6a}#hud-banner{text-align:center;letter-spacing:.02em;opacity:0;font-size:clamp(34px,7vw,72px);font-style:italic;font-weight:900;transition:opacity .2s,transform .2s;position:absolute;top:30%;left:0;right:0;transform:scale(.9)}#hud-banner.show{opacity:1;transform:none}#hud-banner.good{color:#7dff9a}#hud-banner.warn{color:#ff5a4a}#hud-banner.gold{color:#ffd34d}#hud-toast{opacity:0;background:#080c16b3;border-radius:10px;padding:8px 16px;font-size:14px;transition:opacity .2s;position:absolute;bottom:22%;left:50%;transform:translate(-50%)}#hud-toast.show{opacity:1}#hud-net{top:max(14px, env(safe-area-inset-top));color:var(--dim);background:#080c1699;border-radius:8px;padding:4px 12px;font-size:12px;position:absolute;left:50%;transform:translate(-50%)}#hud-keys{left:50%;bottom:max(16px, env(safe-area-inset-bottom));border:1px solid var(--line);opacity:0;background:#080c16a8;border-radius:12px;flex-wrap:wrap;justify-content:center;gap:6px 16px;width:max-content;max-width:calc(100vw - 460px);padding:9px 16px;font-size:13px;transition:opacity .8s;display:flex;position:absolute;transform:translate(-50%)}#hud-keys.show{opacity:1;transition-duration:.2s}#hud-keys span{white-space:nowrap;color:var(--dim)}#hud-keys kbd{color:#fff}.icon-btn{pointer-events:auto;top:max(118px, calc(env(safe-area-inset-top) + 104px));right:max(16px, env(safe-area-inset-right));text-align:center;border:1px solid var(--line);background:#080c168c;border-radius:50%;width:42px;height:42px;padding:0;font-size:15px;position:absolute}#hud-cam{top:max(168px, calc(env(safe-area-inset-top) + 154px))}#hud-orient{top:max(218px, calc(env(safe-area-inset-top) + 204px))}#touch{z-index:11;pointer-events:none;height:44vh;position:fixed;inset:auto 0 0}.t-steer{pointer-events:auto;width:50%;height:100%;position:absolute;bottom:0;left:0}.t-steer span{background:#ffffff14;border:1px solid #ffffff40;border-radius:28px;width:150px;height:56px;position:absolute;bottom:20%;left:50%;transform:translate(-50%)}.t-steer span:after{content:"";top:6px;left:calc(50% - 22px + var(--knob,0%));background:#ffffff8c;border-radius:50%;width:44px;height:44px;position:absolute}.t-btn{pointer-events:auto;bottom:calc(8% + env(safe-area-inset-bottom));letter-spacing:.08em;background:#ffffff1a;border:2px solid #ffffff59;border-radius:50%;place-items:center;width:92px;height:92px;font-size:13px;font-weight:900;display:grid;position:absolute}.t-gas{right:calc(18px + env(safe-area-inset-right));background:#2dff6a2e}.t-brake{right:calc(124px + env(safe-area-inset-right));background:#ff3c282e}.t-btn.on{filter:brightness(1.8);transform:scale(.95)}body.touch .hud-br{bottom:auto;top:max(118px, calc(env(safe-area-inset-top) + 100px));right:70px}body.touch #hud-speed{font-size:40px}body.touch #hud-map{width:130px;top:50%;bottom:auto}body.touch #hud-keys{max-width:calc(100vw - 32px);font-size:12px;bottom:calc(44vh + 8px)}#hud-map{transition:opacity .4s}body.touch #hud:has(#hud-keys.show) #hud-map{opacity:0}@media (orientation:portrait) and (max-width:600px){body.touch .t-brake{right:calc(18px + env(safe-area-inset-right));bottom:calc(8% + 106px + env(safe-area-inset-bottom))}body.touch #hud-lights{top:max(205px, calc(env(safe-area-inset-top) + 190px))}body.touch #hud-banner{top:max(263px, calc(env(safe-area-inset-top) + 248px));font-size:34px}body.touch #hud-keys{top:max(311px, calc(env(safe-area-inset-top) + 296px));bottom:auto}}@media (orientation:landscape) and (max-height:500px){body.touch #hud-board{display:none}body.touch #hud-pause,body.touch #hud-cam,body.touch #hud-orient{top:max(102px, calc(env(safe-area-inset-top) + 88px))}body.touch #hud-cam{right:calc(max(16px, env(safe-area-inset-right)) + 50px)}body.touch #hud-orient{right:calc(max(16px, env(safe-area-inset-right)) + 100px)}body.touch .hud-br{top:max(100px, calc(env(safe-area-inset-top) + 86px));right:calc(max(16px, env(safe-area-inset-right)) + 156px)}body.touch #hud-speed{font-size:30px}body.touch .hud-br small{font-size:11px}body.touch .hud-br .rpm{width:110px;margin-top:4px}body.touch #hud-map{width:104px;top:96px}body.touch #hud-lights{top:max(12px, env(safe-area-inset-top))}body.touch #hud-lights i{width:24px;height:24px}body.touch #hud-banner{top:max(70px, calc(env(safe-area-inset-top) + 58px));font-size:34px}body.touch #hud-keys{max-width:calc(75vw - 300px);left:calc(62.5vw - 70px);bottom:max(10px, env(safe-area-inset-bottom));gap:4px 10px;padding:7px 10px;font-size:11px}}@media (max-width:1000px){body:not(.touch) #hud-keys{max-width:calc(100vw - 32px);bottom:210px}}@media (max-width:700px){#hud-pos{font-size:34px}.hud-tr b{font-size:15px}.hud-tr .row:first-child b{font-size:19px}#hud-board{display:none}#hud-lights i{width:24px;height:24px}}
