:root{--bg-dark: #070b16;--bg-gradient: linear-gradient(135deg, #0c1326 0%, #060a16 100%);--surface: rgba(20, 32, 63, .72);--surface-hover: rgba(34, 52, 96, .85);--surface-border: rgba(255, 255, 255, .1);--accent: #ffd23f;--accent-glow: rgba(255, 210, 63, .45);--text: #f4f7ff;--text-muted: #9fb0cf;--flag-red: #ff3b3b;--flag-blue: #2ec4ff;--flag-yellow: #ffd23f;--flag-green: #2bd576;--flag-gradient: linear-gradient(90deg, #ff3b3b 0%, #ffd23f 35%, #2bd576 68%, #2ec4ff 100%);--neon-green: #2bd576;--neon-blue: #2ec4ff;--neon-red: #ff3b3b;--panel-blur: 16px;--font-main: "Inter", sans-serif;--font-display: "Pixelify Sans", "Orbitron", sans-serif;--border-radius: 16px}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}body{background:var(--bg-dark);background-image:var(--bg-gradient);display:flex;align-items:center;justify-content:center;height:100vh;height:100dvh;width:100vw;overflow:hidden;font-family:var(--font-main);color:var(--text)}#app-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;touch-action:none;overflow:hidden}#app-container.pseudo-fullscreen{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100dvh!important;z-index:99999!important;background:#080d1e!important;padding:0!important;margin:0!important}.fullscreen-btn{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:#080d1e99;border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s ease;pointer-events:auto;outline:none}.fullscreen-btn:hover{background:var(--accent);border-color:var(--accent);color:#000;transform:scale(1.1);box-shadow:0 0 12px var(--accent-glow)}.fullscreen-btn:active{transform:scale(.92)}.fullscreen-btn svg{width:18px;height:18px;fill:currentColor}#wrap{position:relative;width:960px;height:600px;background:#000;border-radius:var(--border-radius);overflow:hidden;box-shadow:0 20px 50px #000000b3,0 0 1px 1px var(--surface-border);transform-origin:center center;flex-shrink:0}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;background:radial-gradient(circle at 50% -10%,rgba(46,196,255,.12),transparent 55%),radial-gradient(circle at 50% 115%,rgba(43,213,118,.16),transparent 50%),#080d1eeb;-webkit-backdrop-filter:blur(var(--panel-blur));backdrop-filter:blur(var(--panel-blur));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 30px 30px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .3s ease}.overlay.active{opacity:1;pointer-events:all}.overlay:before{content:"";position:absolute;top:0;left:-2px;right:-2px;height:24px;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='112' height='24'><line x1='0' y1='2' x2='112' y2='2' stroke='%23ffffff' stroke-opacity='0.3' stroke-width='1.5'/><polygon points='0,2 28,2 14,22' fill='%23ff3b3b'/><polygon points='28,2 56,2 42,22' fill='%23ffd23f'/><polygon points='56,2 84,2 70,22' fill='%232bd576'/><polygon points='84,2 112,2 98,22' fill='%232ec4ff'/></svg>");background-repeat:repeat-x;background-size:112px 24px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}.menu-scene-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}#menu-bg{z-index:-1}.menu-fx-layer{z-index:1}.menu-header{text-align:center;margin-bottom:20px}.menu-title{font-family:var(--font-display);font-size:clamp(24px,5.5vw,48px);font-weight:900;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 26px var(--accent-glow);text-transform:uppercase}.menu-title .accent{background:linear-gradient(180deg,#fff3b0,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}.menu-tagline{font-size:clamp(10px,1.8vw,13px);letter-spacing:.25em;color:var(--text-muted);text-transform:uppercase;margin-top:4px}.title-ball{width:.9em;height:.9em;vertical-align:-.06em;margin-right:.08em}.tag-trophy{width:1.25em;height:1.25em;vertical-align:-.3em;margin:0 .2em}.btn-icon{width:1.2em;height:1.2em;vertical-align:-.22em;margin-left:.4em}.menu-tabs{display:flex;gap:8px;margin-bottom:20px;background:#ffffff08;padding:4px;border-radius:30px;border:1px solid var(--surface-border)}.tab-btn{background:transparent;border:none;padding:8px 18px;color:var(--text-muted);font-weight:600;font-size:clamp(10px,2vw,13px);cursor:pointer;border-radius:20px;transition:all .2s ease}.tab-btn:hover{color:#fff}.tab-btn.active{background:var(--accent);color:#000;box-shadow:0 0 14px var(--accent-glow)}.tab-pane{display:none;width:100%;max-width:780px;height:280px;overflow-y:auto;padding-right:4px}.tab-pane.active{display:block}.tab-pane::-webkit-scrollbar{width:4px}.tab-pane::-webkit-scrollbar-track{background:#ffffff03}.tab-pane::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.section-title{text-align:center;font-size:16px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.mode-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--border-radius);padding:18px 12px;cursor:pointer;text-align:center;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.mode-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--flag-gradient);opacity:.35;transition:opacity .2s ease}.mode-card:hover:before,.mode-card.selected:before{opacity:1}.mode-card:hover{transform:translateY(-4px);background:var(--surface-hover);border-color:var(--accent);box-shadow:0 10px 20px #0000004d}.mode-card.selected{background:#ffd23f1a;border-color:var(--accent);box-shadow:0 0 15px #ffd23f26}.mode-icon{font-size:32px;line-height:0}.mode-icon svg{width:44px;height:44px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}.mode-card h3{font-size:clamp(12px,2.2vw,15px);font-weight:800;color:#fff}.mode-card p{font-size:clamp(8px,1.6vw,11px);color:var(--text-muted);line-height:1.3}.hidden-panel{display:none;flex-direction:column;gap:12px;background:#ffffff05;border:1px dashed var(--surface-border);border-radius:var(--border-radius);padding:16px;margin-bottom:16px;animation:slideDown .2s ease forwards}.hidden-panel.active{display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.hidden-panel h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.network-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.net-action{flex:1;display:flex;gap:8px;align-items:center}.net-action input{flex:1;background:#00000080;border:1px solid var(--surface-border);border-radius:8px;padding:10px;color:#fff;font-family:inherit;font-size:13px;outline:none}.net-action input:focus{border-color:var(--accent)}.action-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.15);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s}.action-btn:hover{background:#fff;color:#000}.net-divider{color:var(--text-muted);font-size:10px;font-weight:800;padding:0 10px}.room-code-display{display:flex;align-items:center;gap:6px;background:#0006;padding:6px 12px;border-radius:8px;font-size:12px;border:1px solid rgba(255,210,63,.2)}.room-code-display.hidden{display:none}.copy-btn{background:var(--accent);color:#000;border:none;padding:2px 6px;font-size:9px;font-weight:800;text-transform:uppercase;border-radius:4px;cursor:pointer}.network-status{text-align:center;font-size:11px;color:var(--text-muted)}.play-btn{display:block;margin:0 auto;background:linear-gradient(90deg,#ff3b3b,#ffd23f,#2bd576);color:#0a1124;border:none;font-family:var(--font-main);font-weight:800;font-size:clamp(13px,2.5vw,18px);padding:12px 40px;border-radius:40px;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 1px 0 rgba(255,255,255,.25);cursor:pointer;box-shadow:0 4px 18px var(--accent-glow);transition:all .1s ease}.play-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px var(--accent-glow)}.play-btn:active:not(:disabled){transform:translateY(1px)}.play-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.sec-btn{background:transparent;color:var(--text);border:2px solid var(--surface-border);box-shadow:none;text-shadow:none}.sec-btn:hover:not(:disabled){background:#ffffff0d;box-shadow:none}.selection-layout{display:flex;gap:20px}.chars-grid{flex:1.4;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;height:240px;overflow-y:auto}.char-card{background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;padding:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:all .2s ease}.char-card:hover{border-color:var(--accent);background:var(--surface-hover)}.char-card.selected{border-color:var(--accent);background:#ffd23f26}.char-card canvas{width:40px;height:40px;border-radius:50%;background:#0000004d;border:1px solid rgba(255,255,255,.1);image-rendering:auto}.char-card span{font-size:clamp(8px,1.8vw,11px);font-weight:600;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100%}.detail-card{flex:1;background:#0006;border:1px solid var(--surface-border);border-radius:var(--border-radius);padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}.detail-portrait-container{width:64px;height:64px;border-radius:50%;background:#ffffff0d;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;overflow:hidden}.detail-portrait-container canvas{width:64px;height:64px;image-rendering:auto}.detail-name-row{display:flex;align-items:center;justify-content:center;gap:10px}.detail-name{font-size:18px;font-weight:800;color:#fff;letter-spacing:.05em;text-transform:uppercase}.detail-flag{width:36px;height:24px;object-fit:cover;image-rendering:pixelated;border:1px solid rgba(255,255,255,.3);border-radius:3px;box-shadow:0 1px 3px #0006}.stats-container{width:100%;display:flex;flex-direction:column;gap:6px}.stat-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;color:var(--text-muted)}.stat-bar{width:100px;height:6px;background:#ffffff0d;border-radius:3px;overflow:hidden}.stat-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .3s ease}.ability-card{width:100%;background:#ffffff08;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.05)}.ability-title{font-size:11px;font-weight:800;color:var(--accent);text-transform:uppercase;margin-bottom:2px}.ability-desc{font-size:10px;color:var(--text-muted);line-height:1.3}.arena-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:4px}.arena-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--border-radius);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:all .2s ease}.arena-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--flag-gradient);opacity:.35;transition:opacity .2s ease}.arena-card:hover:before,.arena-card.selected:before{opacity:1}.arena-card:hover{transform:translateY(-2px);background:var(--surface-hover);border-color:var(--accent)}.arena-card.selected{border-color:var(--accent);background:#ffd23f1f}.arena-card h3{font-size:clamp(12px,2.2vw,16px);font-weight:800;color:#fff}.arena-card .arena-desc{font-size:clamp(9px,1.8vw,11px);color:var(--text-muted);line-height:1.3}.arena-card .arena-badge{align-self:flex-start;font-size:8px;font-weight:800;padding:2px 6px;border-radius:10px;background:#ffffff14;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.arena-card.selected .arena-badge{background:var(--accent);color:#000}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}.setting-item{display:flex;justify-content:space-between;align-items:center;background:var(--surface);padding:12px 16px;border-radius:12px;border:1px solid var(--surface-border)}.setting-item label{font-size:13px;font-weight:600}.setting-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}.setting-item select{background:#000;color:#fff;border:1px solid var(--surface-border);padding:4px 8px;border-radius:6px;font-family:inherit;font-size:12px;outline:none;cursor:pointer}.controls-cheat-sheet{background:#ffffff05;border:1px solid var(--surface-border);border-radius:var(--border-radius);padding:16px}.controls-cheat-sheet h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;color:var(--accent)}.controls-row{display:flex;gap:20px}.controls-col{flex:1}.controls-col strong{display:block;font-size:11px;margin-bottom:6px;color:#fff}.controls-col ul{list-style:none}.controls-col li{font-size:11px;color:var(--text-muted);margin-bottom:4px}kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:10px;color:#fff}#hud-overlay{position:absolute;top:0;left:0;right:0;z-index:10;pointer-events:none;padding:12px 20px;display:none}.hud-content{display:flex;justify-content:space-between;align-items:center;width:100%}.hud-team{display:flex;align-items:center;gap:12px;background:#00000080;border:1px solid var(--surface-border);padding:6px 14px;border-radius:40px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-char-indicator{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--accent);background:#ffffff0d;overflow:hidden}.hud-char-indicator canvas{width:32px;height:32px;image-rendering:pixelated}.hud-meta{display:flex;flex-direction:column}.hud-name{font-size:12px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.05em}.ability-cooldown-text{font-size:8px;color:var(--neon-green);text-transform:uppercase;font-weight:800;margin-top:1px}.ability-cooldown-text.charging{color:var(--text-muted)}.hud-score{font-family:var(--font-display);font-size:26px;font-weight:900;color:#fff;line-height:1}.team-left .hud-score{margin-left:8px;color:var(--neon-blue)}.team-right .hud-score{margin-right:8px;color:var(--neon-red)}.hud-center{display:flex;flex-direction:column;align-items:center;gap:4px}.timer-card{display:flex;align-items:center;gap:12px;background:transparent;border:none;border-radius:10px;padding:0}#hud-timer{display:none}.ping-indicator{font-size:8px;font-weight:800;color:var(--neon-green);text-transform:uppercase;background:#00000080;padding:2px 6px;border-radius:6px;border:1px solid var(--surface-border)}.ping-indicator.hidden{display:none}#banner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:15}#banner.show{animation:bannerPop 2s cubic-bezier(.175,.885,.32,1.275) forwards}#bannerTxt{font-family:var(--font-display);font-size:clamp(40px,12vw,84px);font-weight:900;font-style:italic;color:var(--accent);text-shadow:4px 4px 0 #000,0 0 40px var(--accent-glow);transform:skew(-10deg);letter-spacing:-.01em;text-transform:uppercase}@keyframes bannerPop{0%{opacity:0;transform:scale(.3) rotate(-5deg)}15%{opacity:1;transform:scale(1.05) rotate(2deg)}25%{transform:scale(1) rotate(0)}80%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.8) translateY(-40px)}}.result-box{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--surface-border);border-radius:24px;padding:30px;max-width:500px;width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;box-shadow:0 30px 60px #000c}.result-box:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--flag-gradient)}.res-score-board{display:flex;align-items:center;justify-content:center;gap:24px;width:100%;margin:10px 0}.res-player-score{flex:1}.res-player-score h3{font-size:14px;font-weight:600;color:var(--text-muted);text-transform:uppercase;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.res-player-score span{font-family:var(--font-display);font-size:48px;font-weight:900;color:#fff}.res-divider{font-family:var(--font-display);font-size:36px;font-weight:900;color:var(--accent)}.res-sub{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.result-actions{display:flex;gap:12px;width:100%}.result-actions .play-btn{flex:1;margin:0;padding:12px}#mctrl{position:absolute;bottom:0;left:0;right:0;display:none;justify-content:space-between;align-items:flex-end;padding:24px 32px;z-index:10;pointer-events:none}.joystick-zone{pointer-events:all;display:flex;align-items:center;justify-content:center;width:140px;height:140px;user-select:none;-webkit-user-select:none;touch-action:none}.joystick-base{width:100px;height:100px;border-radius:50%;background:#080d1e80;border:2px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 20px #0009,0 8px 16px #0006}.joystick-base:after{content:"";position:absolute;width:60px;height:60px;border-radius:50%;border:1px dashed rgba(255,255,255,.1);pointer-events:none}.joystick-handle{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.4),transparent 60%),linear-gradient(135deg,var(--accent),var(--accent-glow));border:2px solid rgba(255,255,255,.3);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 12px #00000080,0 0 10px var(--accent-glow);pointer-events:none}.actbtn{pointer-events:all;position:relative;width:170px;height:160px;user-select:none;-webkit-user-select:none;touch-action:none}.cb{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);color:#fff;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;transition:all .1s cubic-bezier(.175,.885,.32,1.275)}.cb:active{transform:scale(.9)!important}#mb-kick{position:absolute;right:12px;bottom:12px;width:76px;height:76px;border-radius:50%;font-size:15px;font-weight:900;letter-spacing:.05em;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.25),transparent 70%),linear-gradient(135deg,var(--neon-blue),#0d4b75);border:2px solid rgba(46,196,255,.7);box-shadow:0 6px 15px #0006,0 0 15px #2ec4ff66;text-shadow:0 2px 4px rgba(0,0,0,.5);z-index:3}#mb-jump{position:absolute;right:94px;bottom:16px;width:66px;height:66px;border-radius:50%;font-size:13px;font-weight:900;letter-spacing:.05em;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.25),transparent 70%),linear-gradient(135deg,var(--neon-green),#0d753b);border:2px solid rgba(57,255,20,.7);box-shadow:0 6px 15px #0006,0 0 15px #39ff1466;text-shadow:0 2px 4px rgba(0,0,0,.5);z-index:2}#mb-special{position:absolute;right:64px;bottom:88px;width:54px;height:54px;border-radius:50%;font-size:10px;font-weight:900;letter-spacing:.05em;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.3),transparent 70%),linear-gradient(135deg,var(--accent),#754b0d);border:2px solid rgba(255,210,63,.7);box-shadow:0 5px 12px #0006,0 0 15px #ffd23f73;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6);z-index:1}.hud-ability-bar-wrap{width:138px;height:20px;background:#0000008c;border-radius:8px;overflow:hidden;position:relative;border:1.5px solid rgba(255,255,255,.14);margin-top:4px;transition:box-shadow .2s ease,border-color .2s ease}.hud-ability-bar-fill{height:100%;background:linear-gradient(90deg,#ffd23f,#ffe08a);width:100%;border-radius:8px;transition:width .1s linear}.hud-ability-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;text-shadow:1px 1px 1px #000;text-transform:uppercase;letter-spacing:.05em;pointer-events:none}.hud-ability-bar-wrap.charged{border-color:#aef6ff;animation:ultPulse .55s ease-in-out infinite}.hud-ability-bar-wrap.charged .hud-ability-bar-fill{background:linear-gradient(90deg,#1f7fb8,#2ec4ff,#fff,#aef6ff,#2ec4ff,#1f7fb8);background-size:220% 100%;animation:ultElectric .5s linear infinite}.hud-ability-bar-wrap.charged .hud-ability-text{animation:ultFlicker .12s steps(2) infinite}@keyframes ultElectric{0%{background-position:0% 0}to{background-position:220% 0}}@keyframes ultPulse{0%,to{box-shadow:0 0 8px #2ec4ffbf,0 0 14px #2ec4ff73}50%{box-shadow:0 0 16px #aef6ff,0 0 30px #2ec4ffb3}}@keyframes ultFlicker{0%{opacity:1}to{opacity:.7}}.lobby-panels{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:18px;width:100%;max-width:540px}.lobby-player-card{flex:1;background:#00000073;border:1px solid var(--surface-border);border-radius:var(--border-radius);padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.lobby-player-role{font-size:8px;font-weight:800;padding:2px 8px;border-radius:10px;background:#ffffff14;color:var(--text-muted);text-transform:uppercase}.lobby-portrait-wrap{width:56px;height:56px;border-radius:50%;background:#ffffff0a;border:1.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;overflow:hidden}.lobby-portrait-wrap canvas{width:56px;height:56px;image-rendering:auto}.lobby-player-name{font-size:13px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.03em}.lobby-ready-status{font-size:9px;font-weight:900;color:var(--neon-red);text-transform:uppercase;letter-spacing:.05em}.lobby-ready-status.ready{color:var(--neon-green);text-shadow:0 0 8px rgba(57,255,20,.3)}.lobby-vs{font-family:var(--font-display);font-size:26px;font-weight:900;color:var(--accent);text-shadow:0 0 10px var(--accent-glow)}.lobby-selection-section{width:100%;max-width:540px;margin-bottom:14px}.lobby-chars-row{display:flex;gap:6px;overflow-x:auto;padding:6px;background:#ffffff05;border-radius:12px;border:1px solid var(--surface-border)}.lobby-chars-row .char-card{min-width:68px;padding:6px;flex-shrink:0;border-radius:10px}.lobby-chars-row::-webkit-scrollbar{height:4px}.lobby-chars-row::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.lobby-settings-row{display:flex;gap:12px;margin-bottom:14px;width:100%;max-width:540px}.lobby-setting-box{flex:1;display:flex;align-items:center;justify-content:space-between;background:var(--surface);padding:8px 12px;border-radius:10px;border:1px solid var(--surface-border)}.lobby-setting-box label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase}.lobby-setting-box select{background:#000;color:#fff;border:1px solid var(--surface-border);padding:2px 6px;border-radius:6px;font-size:11px;outline:none;font-family:inherit;cursor:pointer}.lobby-setting-box select:disabled{opacity:.7;cursor:not-allowed}.lobby-chat-section{width:100%;max-width:540px;margin-bottom:16px}.lobby-chat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.chat-phrase-btn{background:#ffffff0d;border:1px solid var(--surface-border);color:#fff;padding:6px 2px;border-radius:8px;font-size:9px;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit}.chat-phrase-btn:hover{background:var(--surface-hover);border-color:var(--accent);transform:translateY(-1px)}.lobby-actions{display:flex;gap:12px;width:100%;max-width:540px}.lobby-actions .play-btn{flex:1;margin:0;padding:10px 0}.hud-pause-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#ffffffd9;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:all .2s cubic-bezier(.4,0,.2,1);padding:0;outline:none;transform:translate(80px)}.hud-pause-btn:hover{background:var(--accent);border-color:var(--accent);color:#000;transform:translate(80px) scale(1.1);box-shadow:0 0 10px #ff9d0066}.hud-pause-btn:active{transform:translate(80px) scale(.92)}.pause-warning-message{color:var(--neon-red)!important;text-shadow:0 0 8px rgba(255,59,48,.3);font-weight:700;font-size:11px;margin-bottom:8px}.pause-actions{display:flex;flex-direction:column;gap:10px;width:100%}#orientation-warning{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#080d1e;z-index:99999;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px;touch-action:none;user-select:none;-webkit-user-select:none}#orientation-warning .phone-icon{font-size:64px;margin-bottom:20px;animation:rotatePhone 2s infinite ease-in-out}#orientation-warning h2{font-size:24px;margin-bottom:10px;color:#ff9d00;font-family:Outfit,sans-serif;font-weight:800}#orientation-warning p{font-size:16px;color:#ffffffb3;font-family:Outfit,sans-serif}@keyframes rotatePhone{0%{transform:rotate(0)}50%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media screen and (max-aspect-ratio:13/10)and (max-width:900px){#orientation-warning{display:flex}}@media screen and (max-width:900px)and (orientation:landscape){#app-container{padding:0}.overlay{padding:15px 20px;overflow-y:auto}.menu-header{margin-bottom:8px}.menu-title{font-size:20px}.menu-tagline{display:none}#lobby-room-id-display{display:block!important;font-size:11px;margin-top:2px;color:var(--accent)!important}#lobby-room-code{font-size:12px;font-weight:800;color:#fff;background:#0006;padding:2px 6px;border-radius:4px;border:1px solid rgba(255,210,63,.2);margin-left:4px}.menu-tabs{margin-bottom:10px;padding:2px}.tab-btn{padding:6px 12px}.tab-pane{max-height:calc(100dvh - 120px);height:auto}.mode-grid{gap:8px;margin-bottom:8px}.mode-card{padding:8px 10px;gap:4px}.mode-icon svg{width:24px;height:24px}.mode-card h3{font-size:11px}.mode-card p{font-size:8px;line-height:1.2}#kickoff-btn.play-btn{padding:8px 24px;font-size:12px;margin-top:4px}.selection-layout{gap:12px}.chars-grid{height:130px;grid-template-columns:repeat(5,1fr);gap:4px}.char-card{padding:4px;gap:4px}.char-card canvas{width:28px;height:28px}.char-card span{font-size:9px}.detail-card{padding:8px 10px;gap:4px}.detail-portrait-container{width:44px;height:44px}.detail-portrait-container canvas{width:44px;height:44px}.detail-name{font-size:12px}.detail-flag{width:14px;height:10px}.stats-container{gap:4px}.stat-row{font-size:9px}.stat-bar{height:6px}.ability-card{padding:6px 8px;gap:2px}.ability-title{font-size:10px}.ability-desc{font-size:8px;line-height:1.15}.detail-card .action-btn{font-size:9px!important;padding:4px 8px!important;margin-top:2px!important}.arena-grid{gap:8px}.arena-card{padding:10px;gap:4px}.arena-card h3{font-size:11px}.arena-card .arena-desc{font-size:9px}.arena-card .arena-badge{font-size:7px;padding:1px 4px}.settings-grid{gap:8px;margin-bottom:10px}.setting-item{padding:8px 12px;border-radius:8px}.setting-item label{font-size:11px}.setting-item input[type=checkbox]{width:14px;height:14px}.setting-item select{padding:2px 4px;font-size:10px}.setting-item .action-btn{font-size:10px!important;padding:4px 10px!important}.controls-cheat-sheet{padding:8px;margin-top:8px}.controls-cheat-sheet h4{font-size:11px;margin-bottom:6px}.controls-row{gap:12px}.controls-col{font-size:9px}.controls-col ul{gap:2px;margin-top:4px}.controls-col kbd{font-size:9px;padding:1px 3px}#mctrl{padding:8px 16px;opacity:.65}.joystick-zone{width:220px;height:220px}.joystick-base{width:160px;height:160px}.joystick-base:after{width:96px;height:96px}.joystick-handle{width:72px;height:72px}.actbtn{width:280px;height:260px}#mb-kick{width:124px;height:124px;font-size:20px;right:16px;bottom:16px}#mb-jump{width:104px;height:104px;font-size:16px;right:152px;bottom:24px}#mb-special{width:88px;height:88px;font-size:14px;right:100px;bottom:144px}.lobby-panels{gap:12px;margin-bottom:10px}.lobby-player-card{padding:8px;gap:4px}.lobby-portrait-wrap{width:40px;height:40px}.lobby-portrait-wrap canvas{width:40px;height:40px}.lobby-selection-section{margin-bottom:8px}.lobby-chat-section{margin-bottom:10px}.lobby-chat-grid{gap:4px}.chat-phrase-btn{padding:4px 8px;font-size:10px}.lobby-actions{margin-top:8px}#online-setup{padding:6px}.network-controls{flex-direction:row;gap:8px;align-items:stretch}.net-action{flex-direction:column;align-items:center;gap:6px}.net-divider{padding:0;align-self:center}.room-code-display{padding:4px 8px;font-size:11px;width:100%;justify-content:center;background:#0009;border:1px solid var(--accent)}#room-code-value{font-size:15px;font-weight:900;color:var(--accent)!important;text-shadow:0 0 8px rgba(255,210,63,.4);letter-spacing:.05em}.copy-btn{padding:2px 6px;font-size:9px}}.keyboard-focused,.char-card.keyboard-focused,.arena-card.keyboard-focused,.mode-card.keyboard-focused,.tab-btn.keyboard-focused,.play-btn.keyboard-focused,.action-btn.keyboard-focused,.chat-phrase-btn.keyboard-focused{outline:3px solid var(--accent)!important;outline-offset:2px!important;box-shadow:0 0 15px var(--accent-glow)!important}.tab-btn.keyboard-focused,.mode-card.keyboard-focused,.char-card.keyboard-focused,.arena-card.keyboard-focused,.play-btn.keyboard-focused:not(:disabled),.action-btn.keyboard-focused,.chat-phrase-btn.keyboard-focused{transform:translateY(-2px) scale(1.02)}