:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--panel: rgba(12, 20, 31, .58);--panel-strong: rgba(8, 13, 22, .9);--text: #f7fbff;--muted: #a9bdd1;--accent: #ffd166;--blue: #4ea1ff;--red: #ff6b5f;--line: rgba(255, 255, 255, .16)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#87c8f6}body{overscroll-behavior:none;-webkit-touch-callout:none}button,input,select{font:inherit}.game-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.perf-telemetry{position:fixed;left:10px;right:10px;bottom:10px;z-index:5;padding:7px 9px;color:#e9f6ff;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:#050a12c2;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;line-height:1.35;pointer-events:none}.perf-telemetry.is-hidden{display:none}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;color:var(--text);text-shadow:0 2px 14px rgba(0,0,0,.36)}.hud.is-hidden,.menu-panel.is-hidden{display:none}.hud-row{position:absolute;left:24px;top:18px;display:grid;grid-template-columns:180px 148px;gap:10px;width:max-content}.hud-block{min-height:58px;padding:10px 12px;border:1px solid var(--line);background:var(--panel);border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-block span{display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.hud-block strong{font-size:22px;line-height:1}.health-block{min-width:180px}.health-meter{width:100%;height:18px;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:5px;background:#ffffff1f}.health-fill{width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#45d483,#ffd166);transition:width .14s ease,background .14s ease}.hud.danger .health-fill{background:linear-gradient(90deg,var(--red),#ffd166)}.hud-center{position:absolute;left:50%;top:31%;transform:translate(-50%);min-height:38px;padding:8px 14px;color:#fff9e7;font-weight:800;font-size:18px;text-align:center}.touch-controls{--touch-button-size: clamp(52px, 11vmin, 74px);--touch-side-inset: max(16px, env(safe-area-inset-left));--touch-right-inset: max(16px, env(safe-area-inset-right));--touch-bottom-inset: max(18px, env(safe-area-inset-bottom));position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;display:none;pointer-events:none;user-select:none;-webkit-user-select:none}.touch-controls.is-touch-capable.is-active{display:block}.touch-controls-left,.touch-controls-right{position:absolute;bottom:var(--touch-bottom-inset);pointer-events:auto}.touch-controls-left{left:var(--touch-side-inset)}.touch-stick{position:relative;width:calc(var(--touch-button-size) * 2.35);aspect-ratio:1;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0 16%,transparent 17%),linear-gradient(#ffffff24,#ffffff08),#070d1680;box-shadow:0 14px 34px #00000047,inset 0 1px #ffffff38,inset 0 -16px 28px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:none}.touch-stick:before,.touch-stick:after{content:"";position:absolute;left:50%;top:50%;width:68%;height:1px;background:#fff3;transform:translate(-50%,-50%)}.touch-stick:after{width:1px;height:68%}.touch-stick-gate{position:absolute;top:18%;right:18%;bottom:18%;left:18%;border:1px solid rgba(255,255,255,.2);border-radius:50%}.touch-stick-knob{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;border:1px solid rgba(255,255,255,.36);border-radius:50%;background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.44),transparent 0 26%),#ffd166b8;box-shadow:0 8px 18px #00000047,inset 0 -8px 16px #00000038;transform:translate(-50%,-50%);pointer-events:none;transition:transform 70ms ease-out}.touch-stick.is-pressed .touch-stick-knob{transition-duration:0ms}.touch-controls-right{right:var(--touch-right-inset);display:grid;grid-template-columns:calc(var(--touch-button-size) * 1.45);gap:10px;align-content:end}.touch-control{width:100%;min-width:0;min-height:0;border:1px solid rgba(255,255,255,.28);border-radius:8px;color:#f8fbff;background:#070d1685;box-shadow:0 12px 28px #0000003d,inset 0 1px #fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:24px;font-weight:900;line-height:1;text-align:center;touch-action:none;cursor:pointer}.touch-control-shift{height:calc(var(--touch-button-size) * .82);color:#111827;background:#ffd166c2;font-size:16px;text-transform:uppercase}.touch-control-fire{height:calc(var(--touch-button-size) * 1.15);background:#ff6b5fc2;font-size:17px;text-transform:uppercase}.touch-control.is-pressed,.touch-control:active{transform:translateY(1px) scale(.96);border-color:#ffffff80;filter:brightness(1.16)}.menu-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:min(360px,calc(100vw - 32px));padding:14px;color:var(--text);border:1px solid var(--line);border-radius:8px;background:var(--panel-strong);box-shadow:0 24px 60px #00000040;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}.brand-mark{width:38px;height:38px;border-radius:8px;background:linear-gradient(135deg,#ffd166f2,#ff6b5feb),#ffd166;box-shadow:inset 0 -10px 24px #0003}.brand h1{margin:0;font-size:19px;line-height:1.1;letter-spacing:0}.brand p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.3}.menu-actions{display:grid;gap:8px}.menu-actions.is-hidden,.room-lobby.is-hidden{display:none}.menu-actions button,.menu-actions input,.menu-actions select,.room-lobby button{min-height:38px;border:1px solid var(--line);border-radius:8px}.menu-actions button,.room-lobby button{cursor:pointer;color:#111827;background:var(--accent);font-weight:800}.menu-actions button:hover,.room-lobby button:hover{filter:brightness(1.06)}.menu-actions .ghost,.room-lobby .ghost{color:var(--text);background:#ffffff14}.menu-actions form{display:grid;grid-template-columns:1fr 76px;gap:8px}.menu-actions input,.menu-actions select{width:100%;padding:0 10px;color:var(--text);background:#ffffff14;outline:none}.menu-actions input:focus,.menu-actions select:focus{border-color:var(--accent)}.quality-select{display:grid;grid-template-columns:82px 1fr;gap:8px;align-items:center}.quality-select span{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:0;text-transform:uppercase}.room-lobby{display:grid;gap:8px}.room-code-card{display:grid;gap:6px;min-height:94px;padding:12px;align-content:center;border:1px solid var(--line);border-radius:8px;background:#ffffff12;text-align:center}.room-code-card span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:0;text-transform:uppercase}.room-code-card strong{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:40px;line-height:1;letter-spacing:4px}.room-share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.menu-controls{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:#ffffff0f;font-size:12px;font-weight:700;line-height:1.35}.menu-status{margin-top:10px;color:var(--muted);font-size:12px;font-weight:700}@media (max-width: 860px){.hud-row{left:10px;top:10px;grid-template-columns:minmax(150px,1fr) 120px;width:min(100vw - 20px,310px)}.hud-block{min-height:50px;padding:8px}.hud-block strong{font-size:18px}.menu-panel{width:calc(100vw - 20px)}}@media (max-height: 460px){.touch-controls{--touch-button-size: clamp(48px, 12vmin, 60px)}.touch-controls-right{gap:8px}}@media (orientation: landscape) and (pointer: coarse),(orientation: landscape) and (hover: none){.touch-controls{--touch-side-inset: calc(env(safe-area-inset-left) + clamp(44px, 7.5vw, 96px)) ;--touch-right-inset: calc(env(safe-area-inset-right) + clamp(44px, 7.5vw, 96px)) ;--touch-bottom-inset: calc(env(safe-area-inset-bottom) + clamp(24px, 7vh, 56px)) }}