:root{--bg-dark: #060913;--panel-bg: rgba(15, 23, 42, .84);--panel-border: rgba(148, 163, 184, .22);--crimson: #ef4444;--gold: #f59e0b;--cyan: #38bdf8;--emerald: #10b981;--text-main: #f8fafc;--text-muted: #94a3b8}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}html,body{width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at center,#111827,#030712);color:var(--text-main);font-family:Be Vietnam Pro,system-ui,-apple-system,sans-serif}#app{position:relative;width:100vw;height:100vh;overflow:hidden}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;display:block;background:#090d16}#ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;padding:0}.ui-screen{pointer-events:auto;width:100vw;height:100vh;overflow-y:auto;background:#090d16e0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:none;border-radius:0;padding:20px 32px;display:flex;flex-direction:column;justify-content:space-between;animation:fadeInScale .18s ease-out}@keyframes fadeInScale{0%{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.hero-header{text-align:center;margin-bottom:20px}.hero-badge{display:inline-block;padding:4px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:#ef44442e;color:#fca5a5;border:1px solid rgba(239,68,68,.4);margin-bottom:8px}.hero-title{font-family:Chakra Petch,sans-serif;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(90deg,#f8fafc,#fde047,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{color:var(--text-muted);font-size:14px;margin-top:4px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}@media (max-width: 860px){.mode-grid{grid-template-columns:1fr}}.mode-card{background:#1e293bad;border:2px solid rgba(148,163,184,.18);border-radius:14px;padding:18px;cursor:pointer;transition:all .18s ease;display:flex;flex-direction:column;gap:8px}.mode-card:hover,.mode-card.active{border-color:var(--gold);background:#1e293bf2;transform:translateY(-3px);box-shadow:0 12px 30px #f59e0b2e}.mode-card-title{font-family:Chakra Petch,sans-serif;font-size:20px;font-weight:700;color:#fef08a;display:flex;align-items:center;justify-content:space-between}.mode-card-desc{font-size:13px;color:var(--text-muted);line-height:1.45}.selection-layout{flex:1;display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-top:8px}@media (max-width: 980px){.selection-layout{grid-template-columns:1fr}}.section-box{background:#0f172ab8;border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:16px}.section-title{font-family:Chakra Petch,sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#cbd5e1;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}.fighter-select-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}.ninja-card{background:#1e293ba6;border:2px solid rgba(148,163,184,.16);border-radius:10px;padding:10px 12px;cursor:pointer;transition:all .15s ease}.ninja-card:hover{border-color:#ffffff73}.ninja-card.selected-p1{border-color:var(--cyan);background:#0e749040}.ninja-card.selected-p2{border-color:var(--crimson);background:#b91c1c40}.ninja-card-header{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:14px}.ninja-element-pill{font-size:11px;padding:2px 8px;border-radius:99px;background:#ffffff1a}.ninja-ult-text{font-size:11.5px;color:#cbd5e1;margin-top:5px}.map-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.map-card{background:#1e293bb8;border:2px solid rgba(148,163,184,.2);border-radius:12px;padding:10px;cursor:pointer;transition:all .16s ease;display:flex;flex-direction:column;gap:7px}.map-card:hover{border-color:#facc1599}.map-card.active{border-color:#facc15;background:#334155e6;box-shadow:0 0 22px #facc1540}.map-preview-canvas{width:100%;height:96px;border-radius:8px;border:1px solid rgba(255,255,255,.12);display:block}.map-card-top{display:flex;align-items:center;justify-content:space-between}.map-name{font-weight:800;font-size:14px;color:#f8fafc}.map-diff-badge{font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:6px;background:#ef444438;color:#fca5a5;border:1px solid rgba(239,68,68,.35)}.map-hazard-tags{display:flex;flex-wrap:wrap;gap:4px}.hazard-tag{font-size:10px;padding:2px 6px;border-radius:4px;background:#0f172ad9;color:#fde047;border:1px solid rgba(250,204,21,.25)}.online-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:#0e74902e;border:1px solid rgba(56,189,248,.35);border-radius:12px;padding:12px 16px;margin-bottom:14px}.room-code-badge{font-family:Chakra Petch,sans-serif;font-size:22px;font-weight:800;letter-spacing:.16em;color:#38bdf8;background:#020617cc;padding:4px 14px;border-radius:8px;border:1px dashed #38bdf8}.room-input{background:#020617d9;border:1px solid rgba(148,163,184,.4);color:#f8fafc;font-family:Chakra Petch,sans-serif;font-size:16px;font-weight:700;padding:8px 12px;border-radius:8px;width:140px;text-transform:uppercase;letter-spacing:.12em}.btn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}.btn{pointer-events:auto;cursor:pointer;font-family:Chakra Petch,sans-serif;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:12px 24px;border-radius:10px;border:none;transition:all .15s ease}.btn-primary{background:linear-gradient(135deg,#ef4444,#d97706);color:#fff;box-shadow:0 8px 24px #ef444466}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px #ef444499}.btn-secondary{background:#334155d9;color:#e2e8f0;border:1px solid rgba(148,163,184,.3)}.btn-secondary:hover{background:#475569f2}.controls-bar{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(148,163,184,.16);font-size:12px;color:var(--text-muted)}kbd{display:inline-block;padding:2px 6px;font-family:Chakra Petch,monospace;font-size:11px;font-weight:700;color:#f8fafc;background:#1e293b;border:1px solid #475569;border-radius:4px}@keyframes nsoSlideFromLeft{0%{transform:translate(-104%);opacity:.35}to{transform:translate(0);opacity:1}}.battle-floating-bar{position:fixed;top:144px;left:0;pointer-events:auto;display:flex;align-items:flex-start;z-index:22;transition:transform .22s cubic-bezier(.22,1,.36,1)}.battle-floating-bar.collapsed{transform:translate(calc(-100% + 30px))}.nso-hud-drawer-body{width:218px;display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:7px 8px;background:#090d16e6;border:1.8px solid rgba(245,158,11,.55);border-left:none;border-radius:0 11px 11px 0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:8px 10px 26px #0000008c}.nso-hud-toggle-handle{cursor:pointer;pointer-events:auto;width:30px;height:68px;margin-top:8px;background:linear-gradient(180deg,#f59e0b,#b45309);color:#020617;border:1.5px solid #fef08a;border-left:none;border-radius:0 9px 9px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:Chakra Petch,sans-serif;font-size:10px;font-weight:900;box-shadow:4px 4px 14px #00000073}.nso-hud-toggle-handle:hover{filter:brightness(1.1)}.battle-floating-bar .dock-header{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;font-family:Chakra Petch,sans-serif;font-size:9.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#fde047;padding:1px 2px 3px;border-bottom:1px solid rgba(250,204,21,.24)}.battle-floating-bar .btn-mini.span-2{grid-column:1 / -1}.btn-mini{cursor:pointer;background:#0f172ae6;color:#e2e8f0;border:1.4px solid rgba(148,163,184,.32);border-radius:7px;padding:5px 7px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:space-between;gap:4px;transition:all .14s ease;text-align:left}.btn-mini:hover{border-color:#facc15;background:#1e293bf5;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #facc1533}.btn-mini .key-pill{font-family:Chakra Petch,monospace;font-size:9.5px;font-weight:900;padding:1px 4px;border-radius:4px;background:#020617d9;color:#fde047;border:1px solid rgba(250,204,21,.35);flex-shrink:0}.nso-drawer-backdrop{pointer-events:auto;position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;background:#02061747;display:flex;align-items:stretch;justify-content:flex-start;z-index:40}.nso-left-drawer{width:min(525px,95vw);height:100vh;background:linear-gradient(180deg,#0f172af7,#060913fa);border-right:2.5px solid #f59e0b;box-shadow:16px 0 42px #000000b8;padding:10px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}.nso-left-drawer.animate-in{animation:nsoSlideFromLeft .22s cubic-bezier(.22,1,.36,1)}.nso-tab-bar{display:grid;grid-template-columns:repeat(5,1fr) 34px;gap:5px;background:#020617e6;padding:4px;border-radius:9px;border:1px solid rgba(245,158,11,.35)}.nso-tab-btn{cursor:pointer;padding:6px 4px;border-radius:6px;font-family:Chakra Petch,sans-serif;font-size:11px;font-weight:900;border:1.5px solid transparent;background:#0f172acc;color:#94a3b8;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;transition:all .14s ease}.nso-tab-btn:hover{color:#f8fafc;border-color:#facc1573}.nso-tab-btn.active{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;border-color:#fde047;box-shadow:0 0 12px #f59e0b59}.nso-close-btn{cursor:pointer;border-radius:6px;border:1.5px solid rgba(239,68,68,.5);background:#7f1d1d73;color:#fca5a5;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}.nso-close-btn:hover{background:#dc2626;color:#fff}.nso-char-panel{display:grid;grid-template-columns:120px 1fr 120px;gap:8px;padding:8px 10px;border-radius:10px;background:#020617c7;border:1.5px solid rgba(245,158,11,.28);align-items:center}.nso-equip-col{display:flex;flex-direction:column;gap:5px}.nso-equip-mini{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:7px;background:#0f172ae6;border:1.4px solid rgba(148,163,184,.28);font-size:10px;cursor:pointer;transition:all .12s ease}.nso-equip-mini:hover{border-color:#fde047}.nso-equip-mini-icon{width:28px;height:28px;border-radius:6px;background:#020617e6;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}.nso-square-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;overflow-y:auto;padding:4px 2px;flex:1;align-content:start}.nso-slot-cell{position:relative;height:66px;border-radius:8px;background:#0f172ae0;border:1.8px solid rgba(100,116,139,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:3px;transition:all .12s ease}.nso-slot-cell:hover{transform:translateY(-1px);border-color:#fde047}.nso-slot-cell.selected{border-color:#facc15!important;background:#713f126b!important;box-shadow:0 0 0 2px #facc1573,inset 0 0 10px #facc1538}.nso-slot-cell.empty{cursor:default;background:#090d167a;border:1.4px dashed rgba(71,85,105,.35)}.nso-slot-cell.empty:hover{transform:none;border-color:#47556959}.nso-slot-qty{position:absolute;top:2px;right:4px;font-family:Chakra Petch,sans-serif;font-size:9.5px;font-weight:900;color:#f8fafc;background:#020617d9;padding:0 4px;border-radius:4px}.nso-slot-eq-tag{position:absolute;top:2px;left:3px;font-size:8.5px;font-weight:900;color:#020617;background:#4ade80;padding:0 4px;border-radius:3px}.nso-slot-name{font-size:9px;font-weight:700;color:#cbd5e1;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.nso-inspect-box{background:#020617eb;border:1.6px solid rgba(250,204,21,.42);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:6px}.nso-login-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;background:radial-gradient(circle at 50% 35%,#0f172ab8,#020617e6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:18px}.nso-login-container{width:min(920px,96vw);max-height:92vh;display:grid;grid-template-columns:1.05fr .95fr;gap:16px;background:linear-gradient(180deg,#172033,#0b1120);border:2.5px solid #f59e0b;border-radius:16px;box-shadow:0 24px 64px #000000d9,0 0 32px #f59e0b33;padding:20px;overflow-y:auto}@media (max-width: 780px){.nso-login-container{grid-template-columns:1fr}}.nso-form-group{display:flex;flex-direction:column;gap:5px}.nso-form-label{font-size:11.5px;font-weight:800;color:#fde047;text-transform:uppercase;letter-spacing:.4px}.nso-form-input{width:100%;padding:10px 12px;border-radius:8px;background:#020617e6;border:1.6px solid rgba(148,163,184,.35);color:#f8fafc;font-size:13.5px;font-weight:700;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.nso-form-input:focus{border-color:#facc15;box-shadow:0 0 12px #facc1540}