:root{color:#f8fafc;background:#071224;font-family:system-ui,Apple SD Gothic Neo,Malgun Gothic,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,main,.screen{width:100%;height:100%;margin:0;overflow:hidden}body{position:relative;overscroll-behavior:none;touch-action:none}[hidden]{display:none!important}button{border:0;border-radius:1rem;color:inherit;font:inherit;font-weight:900;cursor:pointer}button:focus-visible{outline:4px solid #fde047;outline-offset:4px}.menu{display:grid;place-items:center;padding:1.5rem;background:radial-gradient(circle at 20% 15%,#2563eb 0 2%,transparent 22%),radial-gradient(circle at 78% 75%,#db2777 0 1%,transparent 25%),linear-gradient(145deg,#101f43,#071224 65%)}.menu:before,.menu:after{content:"";position:fixed;width:23rem;height:23rem;border:2px solid #ffffff18;border-radius:50%;transform:rotate(30deg)}.menu:before{left:-10rem;bottom:-8rem}.menu:after{right:-9rem;top:-9rem}.menu-card{position:relative;z-index:1;width:min(54rem,100%);text-align:center}.eyebrow{margin:0 0 .5rem;color:#67e8f9;font-size:.78rem;font-weight:900;letter-spacing:.2em}h1{margin:0;font:950 clamp(3.5rem,10vw,7rem)/.9 Impact,system-ui,sans-serif;letter-spacing:-.06em;text-shadow:0 .12em 0 #db2777,0 .2em 1em #0008}.lead{margin:1.5rem auto;max-width:38rem;color:#cbd5e1}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.mode-card{display:grid;gap:.4rem;padding:1.35rem;background:#ffffff12;border:2px solid #ffffff24;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:left;transition:transform .15s,background .15s}.mode-card:first-child{border-color:#38bdf899}.mode-card:last-child{border-color:#f472b699}.mode-card:hover{transform:translateY(-4px);background:#ffffff20}.mode-card strong{font-size:1.35rem}.mode-card span{color:#cbd5e1;font-size:.9rem;font-weight:500}.controls{margin:1rem 0;display:grid;gap:.35rem;color:#94a3b8;font-size:.8rem}.controls b{color:#fff}#loading-status{color:#67e8f9;font-size:.8rem}.online-menu{margin:1rem auto;padding:1rem;border:1px solid #67e8f955;border-radius:1.2rem;background:#07122499}.online-menu h2{margin:0 0 .75rem;font-size:1.2rem}.online-menu h2 small{color:#67e8f9;font-size:.72rem}.online-fields{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;text-align:left}.online-fields label{color:#cbd5e1;font-size:.72rem;font-weight:800}.online-fields input{display:block;width:100%;margin-top:.25rem;padding:.75rem;border:1px solid #ffffff33;border-radius:.7rem;color:#fff;background:#ffffff10;font:inherit;text-transform:none}#room-code{text-transform:uppercase;letter-spacing:.12em}.online-actions{display:flex;justify-content:center;gap:.6rem;margin-top:.7rem}.online-actions button{padding:.75rem 1.3rem;background:#2563eb}.online-actions button:last-child{background:#db2777}#online-message{min-height:1.2em;margin:.45rem 0 0;color:#fca5a5;font-size:.78rem}.room-panel{width:min(36rem,100%)}.room-code{padding:.25rem .55rem!important;min-height:auto!important;border-radius:.5rem!important;color:#fde047;background:#ffffff12!important;font-family:ui-monospace,monospace;letter-spacing:.12em}.room-players{display:grid;gap:.45rem;padding:0;list-style:none}.room-players li{display:flex;justify-content:space-between;padding:.7rem .85rem;border-radius:.7rem;background:#ffffff0d;text-align:left}.room-players strong{color:#94a3b8;font-size:.8rem}.room-players strong.is-ready{color:#34d399}.panel button:disabled{cursor:not-allowed;opacity:.4}.game,#game-canvas{display:block;width:100%;height:100%}#hud-layer{position:fixed;inset:0;pointer-events:none}.player-overlay{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}.hud-card{width:min(17rem,45vw);padding:.8rem 1rem;border:1px solid #ffffff35;border-radius:1rem;background:#071224cc;box-shadow:0 .5rem 2rem #0005}.hud-card header{color:#67e8f9;font-size:.75rem;font-weight:900;letter-spacing:.15em}.hud-card strong{font-size:2rem}.hud-card small{color:#94a3b8}.hud-card p{display:flex;justify-content:space-between;margin:.25rem 0;font-size:.8rem;font-weight:900}.hud-card meter{width:100%;height:.6rem;accent-color:#fde047}.hud-card time{color:#cbd5e1;font-variant-numeric:tabular-nums}.hud-card.boosting{border-color:#fde047;box-shadow:0 0 2rem #fde04766}.minimap{display:block;flex:0 0 auto;width:10rem;height:10rem;border:1px solid #ffffff35;border-radius:1rem;background:#071224cc;box-shadow:0 .5rem 2rem #0005}#hud-layer[data-mode=local-two] .player-overlay{width:calc(50% - 1.5rem);right:auto}#hud-layer[data-mode=local-two] .player-overlay[data-player-overlay="1"]{left:calc(50% + .5rem)}#hud-layer[data-mode=local-two]:after{content:"";position:fixed;top:0;bottom:0;left:50%;width:2px;background:#fff8}#countdown{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;font:950 clamp(6rem,22vw,14rem)/1 Impact,system-ui,sans-serif;color:#fff;text-shadow:0 .08em 0 #db2777,0 .12em 1em #000;animation:pop .25s ease-out}#touch-controls{position:fixed;z-index:4;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}.touch-joystick{position:absolute;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));width:clamp(7.5rem,24vw,10rem);aspect-ratio:1;border:2px solid #fff7;border-radius:50%;background:#07122480;box-shadow:inset 0 0 2rem #38bdf833;pointer-events:auto;touch-action:none}.touch-joystick:before,.touch-joystick:after{content:"";position:absolute;inset:48% 18%;border-radius:1rem;background:#ffffff28}.touch-joystick:after{inset:18% 48%}.touch-joystick-knob{position:absolute;z-index:1;inset:27%;border:2px solid #fff9;border-radius:50%;background:#38bdf8dd;box-shadow:0 .35rem 1rem #0008;will-change:transform}.touch-actions{position:absolute;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:clamp(.6rem,2vw,1rem);pointer-events:auto}.touch-button{width:clamp(4.7rem,15vw,6.5rem);aspect-ratio:1;padding:0;border:2px solid #ffffff99;border-radius:50%;box-shadow:0 .4rem 1rem #0008;text-shadow:0 2px #0007;touch-action:none}.touch-button-drift{background:#8b5cf6dd;transform:translateY(-1.7rem)}.touch-button-boost{background:#db2777e8}.touch-button.is-pressed{filter:brightness(1.35);transform:scale(.9)}.touch-button-drift.is-pressed{transform:translateY(-1.7rem) scale(.9)}.touch-pause{position:absolute;top:max(.65rem,env(safe-area-inset-top));left:50%;width:2.8rem;height:2.8rem;padding:0;transform:translate(-50%);border:1px solid #fff6;background:#071224aa;pointer-events:auto}.touch-fullscreen{position:absolute;top:max(.65rem,env(safe-area-inset-top));right:max(.65rem,env(safe-area-inset-right));width:2.8rem;height:2.8rem;padding:0;border:1px solid #fff6;background:#071224aa;font-size:1.35rem;pointer-events:auto}.touch-fullscreen[aria-pressed=true]{background:#2563ebdd}@keyframes pop{0%{transform:scale(1.6);opacity:0}}.overlay{position:fixed;z-index:5;inset:0;display:grid;place-items:center;padding:1rem;background:#071224d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel{width:min(31rem,100%);padding:2rem;border:1px solid #ffffff25;border-radius:1.5rem;background:#101f43;text-align:center;box-shadow:0 2rem 5rem #0008}.panel h2{margin:0 0 .5rem;font-size:2rem}.panel button{min-height:3rem;margin:.3rem;padding:.6rem 1.1rem;background:#2563eb}.panel button:last-child{background:#334155}table{width:100%;margin:1rem 0;border-collapse:collapse}th,td{padding:.65rem;border-bottom:1px solid #ffffff1f;text-align:left}td:first-child{color:#fde047;font-weight:900}@media(max-width:800px){.hud-card{width:min(11rem,45vw);padding:.6rem .75rem}.hud-card strong{font-size:1.45rem}.minimap{width:7rem;height:7rem}}@media(max-width:600px){.mode-grid,.online-fields{grid-template-columns:1fr}.controls div:nth-child(2){display:none}.menu{overflow-y:auto;place-items:start center}.menu-card{padding-bottom:2rem}}@media(hover:hover)and (pointer:fine){#touch-controls{display:none!important}}@media(max-height:500px){.player-overlay{top:.5rem;left:.5rem;right:.5rem}.hud-card{width:9.5rem;padding:.4rem .6rem}.hud-card strong{font-size:1.2rem}.minimap{width:5.5rem;height:5.5rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
