:root {
    --neon: #00ffcc; --neon-dim: rgba(0,255,204,0.12);
    --bg: #05060a; --panel: rgba(8,10,16,0.93);
    --danger: #ff0055; --gold: #ffd700; --xp-blue: #00aaff;
    --border: rgba(0,255,204,0.2);
}
* { margin:0; padding:0; box-sizing:border-box; scrollbar-width:none; }
*::-webkit-scrollbar { display:none; }
body { background:var(--bg); color:#ddd; font-family:'Rajdhani',sans-serif; overflow:hidden; user-select:none; }
#gameCanvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; display:block; touch-action:none; }
.screen-particles {
    position:absolute; top:0; left:0; width:100%; height:100%;
    z-index:0; pointer-events:none;
}

/* ===== LOBBY ===== */
#lobby {
    position:fixed; inset:0; z-index:200;
    background:transparent;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition: opacity 0.4s;
    overflow-y:auto; overflow-x:hidden;
}
#lobby.hidden { display:none; }
.lobby-bg {
    position:fixed; inset:0; z-index:-1;
    background:
        radial-gradient(ellipse 40% 35% at 50% 50%, rgba(0,255,204,0.04) 0%, transparent 100%),
        repeating-linear-gradient(0deg, transparent 0px, transparent 79px, rgba(0,255,204,0.02) 80px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 79px, rgba(0,255,204,0.02) 80px),
        #05060a;
    width:100vw; height:100vh;
}.title {
    font-family:'Orbitron',monospace; font-size:3.4rem; font-weight:900;
    letter-spacing:14px; color:var(--neon);
    text-shadow: 0 0 40px rgba(0,255,204,0.25), 0 0 80px rgba(0,255,204,0.1);
    margin-bottom:2px; position:relative; z-index:1;
    animation:titleGlow 4s ease-in-out infinite alternate;
}
@keyframes titleGlow {
    0% { text-shadow: 0 0 30px rgba(0,255,204,0.2), 0 0 60px rgba(0,255,204,0.05); }
    100% { text-shadow: 0 0 50px rgba(0,255,204,0.35), 0 0 100px rgba(0,255,204,0.1); }
}
.subtitle {
    font-family:'Rajdhani'; font-size:0.75rem; font-weight:600; letter-spacing:10px;
    color:rgba(200,208,224,0.25); margin-bottom:24px; position:relative; z-index:1;
}
/* Discord & How to Play buttons on login/lobby screen */
.login-links-row {
    display:flex; align-items:center; justify-content:center; gap:10px;
    position:relative; z-index:1;
    margin-top:12px; margin-bottom:10px; width:100%;
}
.login-discord {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(88,101,242,0.15); color:#7289da;
    border:1px solid rgba(88,101,242,0.3); border-radius:6px;
    padding:6px 14px;
    font-family:'Rajdhani',sans-serif; font-size:0.8rem; font-weight:600;
    letter-spacing:1px; text-decoration:none; text-transform:uppercase;
    transition:all 0.2s;
}
.login-discord:hover { background:rgba(88,101,242,0.3); border-color:#7289da; color:#fff; }
.login-discord.htp-btn {
    background:rgba(0,255,204,0.08); color:rgba(0,255,204,0.7);
    border-color:rgba(0,255,204,0.2);
}
.login-discord.htp-btn:hover {
    background:rgba(0,255,204,0.18); border-color:#00ffcc; color:#fff;
}
/* Discord & How to Play icons in game HUD */
#hud-bottom-links {
    position:fixed; bottom:22px; right:12px; z-index:50;
    display:flex; gap:12px; align-items:center;
}
#hud-discord {
    color:rgba(114,137,218,0.4); text-decoration:none;
    transition:color 0.2s;
}
#hud-discord:hover { color:#7289da; }
#hud-howtoplay {
    color:rgba(0,255,204,0.35); text-decoration:none;
    transition:color 0.2s;
}
#hud-howtoplay:hover { color:#00ffcc; }
.lobby-box {
    position:relative; z-index:1;
    background:linear-gradient(165deg, rgba(8,10,16,0.96), rgba(6,8,18,0.98));
    border:1px solid rgba(0,255,204,0.12);
    border-radius:14px; padding:28px 34px; width:90vw; max-width:520px;
    backdrop-filter:blur(24px);
    box-shadow:
        0 0 40px rgba(0,255,204,0.04),
        0 0 80px rgba(0,255,204,0.02),
        inset 0 1px 0 rgba(255,255,255,0.03);
}
.lobby-box::before {
    content:''; position:absolute; inset:-1px; border-radius:14px; z-index:-1;
    background:linear-gradient(135deg, rgba(0,255,204,0.15), transparent 40%, transparent 60%, rgba(180,77,255,0.1));
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:xor; -webkit-mask-composite:xor;
    padding:1px;
}
/* Lobby callsign banner — sits behind the #playerName input when equipped */
.lobby-callsign-wrap.has-banner {
    overflow:hidden; border-radius:8px;
    /* outline so the banner has a defined edge that matches the input */
    box-shadow:0 0 0 1px rgba(255,215,0,0.25), 0 0 12px rgba(255,215,0,0.15);
}
.lobby-callsign-banner {
    position:absolute; inset:0; z-index:0;
    pointer-events:none; border-radius:8px; overflow:hidden;
}
.lobby-callsign-banner .banner-svg {
    width:100%; height:100%; display:block;
}
.lobby-callsign-wrap.has-banner #callsign-prestige-icon { z-index:2; }
.lobby-callsign-wrap.has-banner .lobby-input {
    position:relative; z-index:1;
    /* Darker scrim so the callsign text stays readable over colored banner art */
    background:rgba(0,0,0,0.45) !important;
    border-color:rgba(255,255,255,0.25) !important;
    text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.lobby-input {
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
    color:#fff; padding:12px 16px; border-radius:8px; width:100%;
    font-family:'Orbitron',monospace; font-size:0.75rem; font-weight:600; outline:none; text-align:center;
    letter-spacing:2px; transition:border-color 0.3s, box-shadow 0.3s;
}
.lobby-input:focus { border-color:var(--neon); box-shadow:0 0 16px rgba(0,255,204,0.1); }
.lobby-input::placeholder { color:rgba(255,255,255,0.18); font-weight:400; letter-spacing:1px; }
.section-label {
    font-family:'Orbitron'; font-size:0.6rem; letter-spacing:4px;
    opacity:0.3; margin:16px 0 8px; text-align:center;
}

/* Shape Selector */
.shape-selector { display:flex; justify-content:center; gap:10px; margin:12px 0 18px; }
.shape-card {
    position:relative; width:105px; padding:12px 6px 8px;
    border:1px solid rgba(255,255,255,0.06); border-radius:10px;
    cursor:pointer; text-align:center; transition:all 0.25s;
    background:rgba(255,255,255,0.015);
}
.shape-card:hover { border-color:rgba(255,255,255,0.15); background:rgba(255,255,255,0.03); }
.shape-card.active {
    border-color:var(--neon); background:var(--neon-dim);
    box-shadow:0 0 20px rgba(0,255,204,0.1), inset 0 0 20px rgba(0,255,204,0.04);
}
.shape-icon { font-size:1.7rem; margin-bottom:3px; display:block; text-align:center; }
.shape-icon-canvas { display:block; margin:0 auto 3px; width:48px; height:48px; }
.shape-name { font-family:'Orbitron'; font-size:0.5rem; letter-spacing:2px; opacity:0.6; display:block; text-align:center; }
.shape-role { font-size:0.65rem; opacity:0.35; margin-top:1px; display:block; text-align:center; }
.shape-tooltip {
    display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    width:200px; background:rgba(0,0,0,0.96); border:1px solid var(--neon);
    padding:12px; border-radius:8px; text-align:left; font-size:0.75rem;
    z-index:300; pointer-events:none; line-height:1.5;
}
.shape-card:hover .shape-tooltip, .shape-card.gp-focus .shape-tooltip { display:block; }
.tt-title { font-family:'Orbitron'; font-size:0.6rem; color:var(--neon); letter-spacing:2px; margin-bottom:5px; }
.tt-stat { color:rgba(255,255,255,0.55); }
.tt-stat b { color:var(--neon); }

/* Shape detail panel (mobile tooltip replacement) — hidden on desktop */
.shape-detail { display:none; }

.btn-row { display:flex; gap:10px; margin-top:6px; }
.btn {
    flex:1; padding:11px; border:none; border-radius:6px;
    font-family:'Orbitron'; font-size:0.65rem; font-weight:700;
    letter-spacing:2px; cursor:pointer; transition:all 0.2s;
}
.btn-primary { background:var(--neon); color:#000; }
.btn-primary:hover { background:#fff; box-shadow:0 0 20px var(--neon); }
.btn-secondary { background:transparent; color:var(--neon); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--neon-dim); border-color:var(--neon); }
.divider { text-align:center; font-size:0.55rem; opacity:0.15; margin:10px 0; letter-spacing:3px; }
#myIdDisplay {
    text-align:center; font-size:0.5rem; letter-spacing:2px; opacity:0.4; margin-bottom:10px;
    font-family:'Orbitron',monospace;
}
#myIdDisplay b { color:var(--neon); opacity:1; font-size:0.85rem; }
#lobby-level {
    text-align:center; margin-bottom:6px; padding:8px 14px;
    background:rgba(255,215,0,0.04); border:1px solid rgba(255,215,0,0.08);
    border-radius:6px;
}
.lobby-level-top {
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:700;
    letter-spacing:2px; color:var(--gold); margin-bottom:5px;
}
.lobby-level-xp {
    display:flex; align-items:center; gap:8px;
}
.lobby-xp-bar {
    flex:1; height:4px; background:rgba(255,215,0,0.08); border-radius:2px; overflow:hidden;
}
.lobby-xp-fill {
    height:100%; background:linear-gradient(90deg, var(--gold), #ffaa00);
    border-radius:2px; transition:width 0.3s;
    box-shadow:0 0 4px rgba(255,215,0,0.3);
}
.lobby-xp-text {
    font-family:'Orbitron',monospace; font-size:0.38rem; font-weight:600;
    letter-spacing:1px; color:rgba(255,215,0,0.4); white-space:nowrap;
}

/* Retention row — login streak flame + daily challenge pill */
.lobby-level-retention {
    display:flex; align-items:center; gap:12px;
    margin-top:7px; padding-top:6px;
    border-top:1px solid rgba(255,215,0,0.08);
    font-family:'Orbitron',monospace;
}
.lobby-streak {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px 3px 8px;
    background:linear-gradient(90deg, rgba(255,68,34,0.14), rgba(255,136,34,0.04));
    border:1px solid rgba(255,136,34,0.3);
    border-radius:14px;
    animation:lobbyStreakGlow 2s ease-in-out infinite;
}
@keyframes lobbyStreakGlow {
    0%, 100% { box-shadow:0 0 4px rgba(255,136,34,0.15); }
    50%      { box-shadow:0 0 10px rgba(255,136,34,0.5); }
}
.lobby-streak-flame { line-height:1; display:inline-block; }
.lobby-streak-count {
    font-size:0.5rem; letter-spacing:1.5px; font-weight:700;
    color:#ffcc66;
}
.lobby-daily {
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 10px;
    background:rgba(0,255,204,0.06);
    border:1px solid rgba(0,255,204,0.25);
    border-radius:14px;
    cursor:default;
}
.lobby-daily.done {
    background:rgba(68,221,136,0.08);
    border-color:rgba(68,221,136,0.3);
}
.lobby-daily-icon { font-size:11px; line-height:1; }
.lobby-daily-text {
    font-size:0.48rem; letter-spacing:1.2px; font-weight:700;
    color:#88eedd;
}
.lobby-daily.done .lobby-daily-text { color:#88ffaa; }

/* ===== LOGIN SCREEN ===== */
#login-screen {
    position:fixed; inset:0; z-index:300;
    background:#030305;
    display:flex; flex-direction:column; align-items:center;
    overflow-y:auto; padding:20px 0;
}
#login-screen::before, #login-screen::after { content:''; flex:1 0 0px; }
#login-screen.hidden { display:none; }

/* — Logo Emblem (SVG collision scene) — */
.login-logo {
    position:relative; z-index:1; margin-bottom:4px;
}
.logo-emblem {
    width:200px; height:200px;
    display:block; margin:0 auto;
}
.logo-zone-ring {
    animation:zoneRingSpin 30s linear infinite;
    transform-box:fill-box; transform-origin:center;
}
@keyframes zoneRingSpin { to { transform:rotate(360deg); } }
.logo-pulse {
    animation:logoPulse 2s ease-in-out infinite;
    transform-box:fill-box; transform-origin:center;
}
@keyframes logoPulse { 0%,100%{opacity:0.8} 50%{opacity:1} }

/* — Login Box (matches lobby-box) — */
.login-box {
    background:var(--panel); border:1px solid var(--border);
    border-radius:12px; padding:32px 40px;
    width:90vw; max-width:420px;
    text-align:center; position:relative; z-index:1;
    backdrop-filter:blur(20px);
}
.login-title {
    font-family:'Orbitron'; font-size:1.8rem; font-weight:900;
    color:var(--neon); letter-spacing:6px; margin-bottom:2px;
    text-shadow:0 0 15px rgba(0,255,204,0.5);
}
.login-sub { font-size:0.7rem; opacity:0.3; letter-spacing:3px; margin-bottom:20px; }

/* — Input Fields — */
.login-field { margin-bottom:12px; text-align:left; }
.login-field label {
    font-family:'Orbitron'; font-size:0.5rem; letter-spacing:3px;
    opacity:0.4; display:block; margin-bottom:4px;
}
.login-input-wrap { position:relative; }
.login-field-icon {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:rgba(255,255,255,0.25); font-size:0.85rem; pointer-events:none;
}
.login-input {
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
    color:#fff; padding:11px 14px; border-radius:6px; width:100%;
    font-family:'Rajdhani'; font-size:1rem; outline:none; transition:border-color 0.2s;
}
.login-input-wrap .login-input { padding-left:36px; }
.login-input:focus { border-color:var(--neon); }
.login-input::placeholder { color:rgba(255,255,255,0.2); }
.login-pass-warning {
    color:#ff4466; font-size:0.65rem; margin-top:5px; text-align:center;
    opacity:0.8; letter-spacing:0.02em;
}

/* — Buttons — */
.login-btn {
    width:100%; padding:12px; border:none; border-radius:6px; margin-top:6px;
    background:var(--neon); color:#000;
    font-family:'Orbitron'; font-size:0.7rem; font-weight:700; letter-spacing:3px;
    cursor:pointer; transition:0.2s;
}
.login-btn:hover { background:#fff; box-shadow:0 0 20px var(--neon); }
.login-btn.secondary { background:transparent; color:var(--neon); border:1px solid var(--border); margin-top:8px; }
.login-btn.secondary:hover { background:var(--neon-dim); border-color:var(--neon); }

/* — Messages & Stats — */
.login-msg { font-size:0.7rem; margin-top:8px; min-height:18px; }
.login-msg.error { color:var(--danger); }
.login-msg.ok { color:var(--neon); }
.login-stats { font-size:0.7rem; opacity:0.35; margin-top:12px; line-height:1.6; }

/* ===== SKILL TREE PANEL ===== */
#skilltree-panel {
    position:fixed; inset:0; background:rgba(0,0,0,0.9);
    display:none; align-items:center; justify-content:center;
    z-index:310; backdrop-filter:blur(10px);
    overflow-y:auto; overflow-x:hidden;
}
#skilltree-panel.show { display:flex; }
.st-box-wrapper {
    position:relative;
}
.st-box {
    background:#060610; border:1px solid var(--border);
    border-radius:14px; padding:20px 24px; width:96vw; max-width:1200px; max-height:92vh; overflow-y:auto;
}
.st-header { text-align:center; margin-bottom:16px; }
.st-title { font-family:'Orbitron'; font-size:1rem; font-weight:700; letter-spacing:5px; color:var(--gold); }
.st-subtitle { font-size:0.7rem; opacity:0.3; margin-top:2px; }
.st-points { font-family:'Orbitron'; font-size:0.75rem; color:var(--gold); letter-spacing:2px; margin:8px 0; }
.st-branches { display:block; }
.st-branch {
    flex:1; border:1px solid rgba(255,255,255,0.06); border-radius:10px;
    padding:14px; background:rgba(255,255,255,0.01);
}
.st-branch-title {
    font-family:'Orbitron'; font-size:0.6rem; font-weight:700; letter-spacing:3px;
    text-align:center; margin-bottom:4px; padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.st-branch-desc { font-size:0.6rem; opacity:0.3; text-align:center; margin-bottom:10px; }
.st-tier-label {
    font-family:'Orbitron'; font-size:0.4rem; letter-spacing:2px;
    opacity:0.2; margin:8px 0 4px; text-align:center;
}
.st-node {
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border:1px solid rgba(255,255,255,0.06);
    border-radius:6px; margin-bottom:5px; background:rgba(255,255,255,0.01);
    cursor:pointer; transition:0.2s;
}
.st-node:hover { border-color:rgba(255,255,255,0.15); background:rgba(255,255,255,0.03); }
.st-node.unlocked { border-color:rgba(255,215,0,0.3); background:rgba(255,215,0,0.04); }
.st-node.maxed { border-color:rgba(255,215,0,0.5); background:rgba(255,215,0,0.08); }
.st-node.locked { opacity:0.35; cursor:not-allowed; }
.st-node.st-bridge { border-left:2px solid rgba(255,170,0,0.4); }
.st-node.st-bridge.maxed { border-left:2px solid rgba(255,170,0,0.7); }
.st-node.st-capstone { border-left:3px solid rgba(255,215,0,0.5); background:rgba(255,215,0,0.02); }
.st-node.st-capstone.maxed { border-left:3px solid rgba(255,215,0,0.8); background:rgba(255,215,0,0.06); box-shadow:0 0 12px rgba(255,215,0,0.1); }
.st-tier-special { color:var(--gold) !important; opacity:0.5 !important; font-size:0.42rem !important; }
.st-tier-locked { opacity:0.15 !important; }
.st-branch-pts { font-size:0.45rem; opacity:0.5; letter-spacing:1px; }
.st-node-icon { font-size:1.1rem; width:24px; text-align:center; }
.st-node-info { flex:1; }
.st-node-name { font-weight:600; font-size:0.8rem; }
.st-node-desc { font-size:0.6rem; opacity:0.4; }
.st-node-rank { font-family:'Orbitron'; font-size:0.55rem; color:var(--gold); letter-spacing:1px; white-space:nowrap; }
.st-close {
    display:block; margin:16px auto 0; padding:9px 36px;
    background:transparent; border:1px solid var(--border); color:var(--neon);
    font-family:'Orbitron'; font-size:0.6rem; letter-spacing:3px;
    cursor:pointer; border-radius:6px; transition:0.2s;
}
.st-close:hover { background:var(--neon-dim); }

/* ===== SKILL TREE TABS (legacy — removed, kept for compat) ===== */
.st-tabs { display:none; }
.st-tab { display:none; }

/* ===== VESSEL ABILITIES SECTION (below skill tree) ===== */
.st-vessel-section { margin-top:12px; padding:8px; }
.st-vessel-title {
    font-family:'Orbitron'; font-size:0.6rem; letter-spacing:3px;
    color:#ffaa00; text-align:center; padding:6px 0 8px;
    border-top:1px solid rgba(255,215,0,0.15);
}
.st-vessel-grid { display:flex; justify-content:center; gap:20px; padding:8px 0; }
.st-vessel-node {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    cursor:pointer; transition:transform 0.2s;
}
.st-vessel-node:hover { transform:scale(1.08); }
.st-vessel-circle {
    width:50px; height:50px; border-radius:50%;
    border:2px solid #ffaa00; background:rgba(255,170,0,0.08);
    display:flex; align-items:center; justify-content:center;
    transition:all 0.3s;
}
.st-vessel-icon { width:28px; height:28px; }
.st-vessel-icon img, .st-vessel-icon .ab-ico { width:28px; height:28px; }
.st-vessel-name {
    font-family:'Orbitron',monospace; font-size:0.4rem; letter-spacing:1px;
    color:rgba(255,255,255,0.6); text-align:center; max-width:70px;
}
.st-vessel-tier {
    font-family:'Orbitron',monospace; font-size:0.35rem; font-weight:700;
    letter-spacing:1.5px;
}

/* ===== ABILITY UPGRADES GRID (inside skill tree) ===== */
.st-abilities-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; max-height:65vh; overflow-y:auto; }
.st-abilities-grid::-webkit-scrollbar { width:4px; }
.st-abilities-grid::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
.st-ab-section-title {
    grid-column:1/-1; font-family:'Orbitron'; font-size:0.6rem; letter-spacing:3px;
    padding:8px 0 4px; border-bottom:1px solid rgba(255,255,255,0.08); margin-top:4px;
}
.st-ab-card {
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
    border-radius:6px; padding:10px; display:flex; flex-direction:column; gap:5px;
}
.st-ab-card-header { display:flex; align-items:center; gap:6px; }
.st-ab-card-header .ab-ico { width:20px; height:20px; vertical-align:middle; filter:brightness(1.2); }
.st-ab-card-name { font-weight:700; font-size:0.75rem; flex:1; letter-spacing:1px; }
.st-ab-tier-badge {
    font-family:'Orbitron'; font-size:0.5rem; padding:2px 6px; border-radius:3px;
    letter-spacing:1px; white-space:nowrap;
}
.st-ab-tier-badge.tier-t1 { background:rgba(120,120,120,0.25); color:#999; border:1px solid rgba(120,120,120,0.3); }
.st-ab-tier-badge.tier-t2 { background:rgba(0,255,204,0.12); color:var(--neon); border:1px solid rgba(0,255,204,0.3); }
.st-ab-tier-badge.tier-t3a { background:rgba(255,60,60,0.12); color:#ff4444; border:1px solid rgba(255,60,60,0.3); }
.st-ab-tier-badge.tier-t3b { background:rgba(60,120,255,0.12); color:#4488ff; border:1px solid rgba(60,120,255,0.3); }
.st-ab-desc { font-size:0.6rem; opacity:0.4; line-height:1.4; }
.st-ab-btn {
    padding:5px 10px; border:1px solid rgba(255,215,0,0.2); background:rgba(255,215,0,0.05);
    color:var(--gold); font-family:'Orbitron'; font-size:0.58rem; letter-spacing:1px;
    cursor:pointer; border-radius:4px; transition:0.2s; text-align:center;
}
.st-ab-btn:hover { background:rgba(255,215,0,0.15); border-color:var(--gold); }
.st-ab-btn:disabled { opacity:0.2; cursor:default; border-color:rgba(255,255,255,0.06); color:#555; background:transparent; }
.st-ab-btn-label { font-weight:700; font-size:0.62rem; margin-bottom:2px; }
.st-ab-btn-desc { font-size:0.55rem; opacity:0.5; }
.st-ab-path-choice { display:flex; gap:6px; }
.st-ab-path {
    flex:1; padding:6px 8px; border-radius:4px; cursor:pointer;
    font-family:'Orbitron'; font-size:0.56rem; letter-spacing:0.5px;
    transition:0.2s; text-align:center;
}
.st-ab-path:hover { filter:brightness(1.3); }
.st-ab-path:disabled { opacity:0.2; cursor:default; filter:none; }
.st-ab-path-a {
    border:1px solid rgba(255,60,60,0.2); background:rgba(255,60,60,0.04); color:#ff6666;
}
.st-ab-path-a:hover:not(:disabled) { background:rgba(255,60,60,0.08); }
.st-ab-path-b {
    border:1px solid rgba(60,120,255,0.2); background:rgba(60,120,255,0.04); color:#6699ff;
}
.st-ab-path-b:hover:not(:disabled) { background:rgba(60,120,255,0.08); }
.st-ab-path-name { font-weight:700; font-size:0.62rem; margin-bottom:2px; }
.st-ab-path-cost { font-size:0.5rem; opacity:0.5; margin-bottom:2px; }
.st-ab-path-desc { font-size:0.52rem; opacity:0.45; }
.st-ab-maxed { text-align:center; font-family:'Orbitron'; font-size:0.55rem; color:var(--neon); opacity:0.6; letter-spacing:2px; padding:4px 0; }
.st-ab-locked-path { text-align:center; font-size:0.55rem; opacity:0.25; padding:4px 0; font-family:'Orbitron'; letter-spacing:1px; }

/* ===== SKILL TREE SVG ===== */
.st-tree-svg { width:100%; display:block; margin:0 auto; }
.st-tnode { cursor:pointer; }
.st-tnode.locked { cursor:not-allowed; }
.st-tnode-icon, .st-tnode-rank, .st-tnode-lock { pointer-events:none; }
.st-hover-ring { transition:opacity 0.2s; }
.st-tnode:not(.locked):hover .st-hover-ring { opacity:0.5 !important; }

/* Rank 11 maxed node — animated power glow */
@keyframes stNodePulseOuter {
    0%, 100% { opacity:0.15; r:30; }
    50% { opacity:0.45; r:34; }
}
@keyframes stNodePulseInner {
    0%, 100% { opacity:0.1; r:26; }
    50% { opacity:0.3; r:29; }
}
.st-node-pulse-outer {
    animation: stNodePulseOuter 2s ease-in-out infinite;
}
.st-node-pulse-inner {
    animation: stNodePulseInner 2s ease-in-out infinite 0.5s;
}
.st-tnode:not(.locked):hover .st-tnode-circle { stroke-width:3; }
@keyframes stConnPulse {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.55; }
}
.st-conn-available {
    animation: stConnPulse 1.8s ease-in-out infinite;
}
/* Onboarding "start here" highlight on the recommended next node */
@keyframes stRecommendPulse {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 0.4; }
}
.st-recommend-ring, .st-recommend-badge, .st-recommend-conn {
    animation: stRecommendPulse 1.4s ease-in-out infinite;
}

/* Tooltip */
.st-tooltip {
    position:fixed; display:none; z-index:350;
    background:rgba(8,8,18,0.95); border:1px solid rgba(255,255,255,0.12);
    border-radius:8px; padding:16px 20px; pointer-events:none;
    max-width:360px; min-width:200px;
    backdrop-filter:blur(8px); box-shadow:0 4px 20px rgba(0,0,0,0.5);
    font-size:0.85rem; line-height:1.5;
}

/* ===== UPGRADE PANEL (now SESSION upgrades) ===== */
#upgrade-panel {
    position:fixed; inset:0; background:rgba(0,0,0,0.85);
    display:none; align-items:center; justify-content:center;
    z-index:250; backdrop-filter:blur(8px);
}
#upgrade-panel.show { display:flex; }
.upgrade-box {
    background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:24px 28px; width:94vw; max-width:780px; max-height:85vh; overflow-y:auto;
}
.upgrade-header {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px;
}
.upgrade-title { font-family:'Orbitron'; font-size:1rem; font-weight:700; letter-spacing:4px; color:var(--neon); white-space:nowrap; }
.upgrade-points { font-family:'Orbitron'; font-size:0.75rem; color:var(--gold); letter-spacing:2px; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.upgrade-close {
    width:32px; height:32px; background:transparent; border:1px solid var(--border);
    border-radius:6px; color:var(--neon); font-size:1.2rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:0.2s; flex-shrink:0;
}
.upgrade-close:hover { background:var(--neon); color:#000; }
.upgrade-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.upgrade-card {
    background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
    border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:8px;
}
.upgrade-card-header {
    display:flex; align-items:center; gap:8px;
}
.upgrade-card-header .ab-ico { width:22px; height:22px; vertical-align:middle; filter:brightness(1.2); }
.upgrade-card-name { font-weight:700; font-size:0.85rem; flex:1; letter-spacing:1px; }
.upgrade-tier-badge {
    font-family:'Orbitron'; font-size:0.55rem; font-weight:700; letter-spacing:1px;
    padding:2px 8px; border-radius:4px; white-space:nowrap;
}
.upgrade-tier-badge.tier-t1 { background:rgba(120,120,120,0.25); color:#999; border:1px solid rgba(120,120,120,0.3); }
.upgrade-tier-badge.tier-t2 { background:rgba(0,255,204,0.12); color:var(--neon); border:1px solid rgba(0,255,204,0.3); }
.upgrade-tier-badge.tier-t3a { background:rgba(255,60,60,0.12); color:#ff4444; border:1px solid rgba(255,60,60,0.3); }
.upgrade-tier-badge.tier-t3b { background:rgba(60,120,255,0.12); color:#4488ff; border:1px solid rgba(60,120,255,0.3); }
.upgrade-card-current {
    font-size:0.7rem; opacity:0.4; line-height:1.3;
}
.upgrade-btn {
    width:100%; padding:8px 12px; background:rgba(255,215,0,0.06);
    border:1px solid rgba(255,215,0,0.25); border-radius:6px; color:var(--gold);
    font-family:'Rajdhani',sans-serif; font-size:0.75rem; font-weight:600;
    cursor:pointer; transition:0.2s; text-align:left; letter-spacing:0.5px;
}
.upgrade-btn:hover { background:rgba(255,215,0,0.15); border-color:var(--gold); }
.upgrade-btn:disabled { opacity:0.2; cursor:default; border-color:rgba(255,255,255,0.06); color:#555; background:transparent; }
.upgrade-btn-label { font-weight:700; font-size:0.72rem; margin-bottom:2px; }
.upgrade-btn-desc { font-size:0.65rem; opacity:0.5; }
/* Session upgrade rows */
.upgrade-row {
    display:flex; align-items:center; gap:8px; padding:6px 10px;
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.upgrade-row.maxed { opacity:0.4; }
.upgrade-name { font-family:'Orbitron'; font-size:0.6rem; font-weight:700; color:var(--gold); min-width:90px; letter-spacing:1px; }
.upgrade-desc { font-size:0.6rem; opacity:0.4; flex:1; }
.upgrade-pips { display:flex; gap:3px; }
.upgrade-pip { width:8px; height:8px; border-radius:2px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); }
.upgrade-pip.filled { background:var(--gold); border-color:var(--gold); }
.upgrade-row .upgrade-btn { width:auto; min-width:32px; padding:4px 10px; font-size:0.7rem; text-align:center; }
.upgrade-path-choice {
    display:flex; gap:8px;
}
.upgrade-path {
    flex:1; padding:8px 10px; border-radius:6px; cursor:pointer;
    font-size:0.72rem; font-weight:600; transition:0.2s; text-align:left;
    background:rgba(255,255,255,0.02);
}
.upgrade-path:hover { filter:brightness(1.3); }
.upgrade-path:disabled { opacity:0.2; cursor:default; filter:none; }
.upgrade-path-a {
    border:1px solid rgba(255,60,60,0.3); color:#ff6666;
}
.upgrade-path-a:hover:not(:disabled) { background:rgba(255,60,60,0.08); }
.upgrade-path-b {
    border:1px solid rgba(60,120,255,0.3); color:#6699ff;
}
.upgrade-path-b:hover:not(:disabled) { background:rgba(60,120,255,0.08); }
.upgrade-path-name { font-weight:700; font-size:0.7rem; margin-bottom:2px; }
.upgrade-path-cost { font-size:0.6rem; opacity:0.5; margin-bottom:3px; font-family:'Orbitron'; }
.upgrade-path-desc { font-size:0.62rem; opacity:0.45; }
.upgrade-maxed {
    font-family:'Orbitron'; font-size:0.65rem; font-weight:700; letter-spacing:2px;
    color:#44ff88; text-align:center; padding:6px 0; opacity:0.7;
}

/* ===== DEATH SCREEN ===== */
#death-screen {
    position:fixed; inset:0; background:rgba(0,0,0,0.82);
    display:none; align-items:center; justify-content:center;
    z-index:300; backdrop-filter:blur(5px);
}
#death-screen.show { display:flex; }
.death-box { text-align:center; background:var(--panel); border:1px solid var(--danger); border-radius:12px; padding:28px 50px; }
.death-title { font-family:'Orbitron'; font-size:1.5rem; color:var(--danger); letter-spacing:5px; margin-bottom:8px; }
.death-stats { font-size:0.85rem; opacity:0.5; margin-bottom:4px; line-height:1.6; }
.death-xp { font-family:'Orbitron'; font-size:0.75rem; color:var(--gold); margin:12px 0 4px; letter-spacing:2px; }
.death-tip { color:#aaa; font-size:13px; margin:8px 0 14px; font-style:italic; text-align:center; min-height:18px; }
.death-btn-row { display:flex; gap:12px; justify-content:center; }
.death-btn {
    padding:11px 30px; border:none; border-radius:6px;
    font-family:'Orbitron'; font-size:0.65rem; font-weight:700;
    letter-spacing:2px; cursor:pointer; transition:0.2s;
}
.death-btn-respawn {
    background:transparent; border:1px solid var(--border); color:var(--neon);
}
.death-btn-respawn:hover { background:var(--neon-dim); }
.death-btn-revenge { background:#ff3333; color:#fff; border:1px solid #ff5555; }
.death-btn-revenge:hover { background:#ff5555; }
.death-btn-spectate { background:transparent; border:1px solid rgba(0,170,255,0.4); color:#00aaff; }
.death-btn-spectate:hover { background:rgba(0,170,255,0.12); }
.death-btn-loadout { background:transparent; border:1px solid var(--border); color:var(--neon); }
.death-btn-loadout:hover { background:var(--neon-dim); }
.death-btn-lobby { background:transparent; border:1px solid var(--border); color:var(--neon); }
.death-btn-lobby:hover { background:var(--neon-dim); }
#death-respawn-msg {
    font-family:'Orbitron'; font-size:0.6rem; letter-spacing:2px;
    color:var(--danger); margin-top:10px; min-height:16px;
}
.death-btn-respawn:disabled { opacity:0.4; cursor:not-allowed; }
.death-shape-label { font-family:'Orbitron'; font-size:0.55rem; letter-spacing:3px; opacity:0.4; margin-bottom:10px; }
.death-shape-selector { display:flex; flex-direction:row; justify-content:center; gap:10px; margin-bottom:18px; }
.death-shape-selector .shape-card { width:72px; padding:10px 6px 8px; border-radius:8px; }
.death-shape-selector .shape-icon { font-size:1.3rem; }
.death-shape-selector .shape-icon-canvas { width:36px; height:36px; }
.death-shape-selector .shape-name { font-size:0.45rem; }
.death-shape-selector .shape-tooltip { display:none !important; }
.death-shape-selector .shape-card.active {
    border-color:var(--neon); background:rgba(0,255,204,0.12);
    box-shadow:0 0 14px rgba(0,255,204,0.35), inset 0 0 14px rgba(0,255,204,0.08);
    transform:scale(1.1);
}
.death-shape-selector .shape-card:not(.active) { opacity:0.45; }
.death-shape-hover { position:relative; }
.death-shape-hover .shape-role { display:block; font-size:0.35rem; color:rgba(200,210,230,0.4); letter-spacing:1px; font-family:'Rajdhani',sans-serif; }
.death-shape-tooltip {
    display:none; position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
    width:200px; background:#0a0a1a; border:1px solid var(--neon); border-radius:8px;
    padding:10px 12px; text-align:left; z-index:9999; pointer-events:none;
    box-shadow:0 0 15px rgba(0,255,204,0.15), 0 6px 20px rgba(0,0,0,0.6);
}
.death-shape-hover:hover .death-shape-tooltip { display:block; }
.dst-title { font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:700; color:var(--neon); margin-bottom:6px; letter-spacing:1px; }
.dst-stat { font-size:0.65rem; color:rgba(200,210,230,0.75); line-height:1.4; margin-bottom:2px; }
.dst-stat b { color:#fff; }

/* ===== SPECTATE HUD ===== */
#spectate-hud {
    display:none; position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    z-index:300; background:rgba(0,10,20,0.85); border:1px solid rgba(0,170,255,0.35);
    border-radius:8px; padding:8px 24px; font-family:'Orbitron'; font-size:0.6rem;
    letter-spacing:2px; color:#00aaff; backdrop-filter:blur(6px);
    box-shadow:0 0 20px rgba(0,170,255,0.15);
}
#spectate-hud.show { display:flex; gap:14px; align-items:center; }
#spectate-name { color:#fff; }
.spec-btn {
    display:block; background:rgba(0,170,255,0.15); border:1px solid rgba(0,170,255,0.4);
    color:#00aaff; font-family:'Orbitron'; font-size:0.55rem; letter-spacing:1px;
    padding:8px 14px; border-radius:6px; cursor:pointer; transition:0.2s;
    touch-action:manipulation;
}
.spec-btn:hover { background:rgba(0,170,255,0.25); }
.spec-btn:active { background:rgba(0,170,255,0.35); }
.spec-btn-exit { color:#ff4466; border-color:rgba(255,68,102,0.4); background:rgba(255,68,102,0.12); }
.spec-btn-exit:hover { background:rgba(255,68,102,0.2); }
.spec-btn-exit:active { background:rgba(255,68,102,0.3); }
.spec-menu-btn {
    background:rgba(0,10,20,0.85); border:1px solid var(--border); color:var(--neon);
    font-family:'Orbitron'; font-size:0.5rem; letter-spacing:1px;
    padding:8px 16px; border-radius:6px; cursor:pointer; transition:0.2s;
}
.spec-menu-btn:hover { background:var(--neon-dim); }
#waiting-menu {
    position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
    z-index:250; display:flex; flex-direction:column; align-items:center;
    pointer-events:all;
}
.waiting-box {
    background:rgba(0,10,20,0.88); border:1px solid var(--border); border-radius:10px;
    padding:14px 28px; text-align:center; backdrop-filter:blur(6px);
    box-shadow:0 0 20px rgba(0,170,255,0.12);
}
.waiting-title {
    font-family:'Orbitron'; font-size:0.5rem; letter-spacing:2px; color:var(--neon);
    margin-bottom:6px;
}
.waiting-countdown {
    font-family:'Orbitron'; font-size:1.1rem; letter-spacing:3px; color:#fff;
    margin-bottom:10px;
}
.waiting-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
/* Collapsed waiting menu — small tab */
#waiting-menu.wait-collapsed .waiting-box { display:none; }
#waiting-menu.wait-collapsed::after {
    content:'MENU'; display:block;
    font-family:'Orbitron'; font-size:0.4rem; letter-spacing:2px;
    color:rgba(0,170,255,0.7); background:rgba(0,10,20,0.8);
    border:1px solid rgba(0,170,255,0.3); border-radius:6px;
    padding:4px 14px; cursor:pointer; text-align:center;
    backdrop-filter:blur(4px);
}

/* ===== ZONE HUD ===== */
#zone-warning {
    position:absolute; top:38px; left:50%; transform:translateX(-50%);
    font-family:'Orbitron'; font-size:0.8rem; font-weight:700; letter-spacing:4px;
    color:var(--danger); opacity:0; transition:opacity 0.3s;
    pointer-events:none; z-index:15;
    text-shadow:0 0 15px rgba(255,0,85,0.7), 0 0 30px rgba(255,0,85,0.3);
}
#zone-warning.show { opacity:1; animation:zoneFlash 1.5s ease-in-out infinite; }
@keyframes zoneFlash { 0%,100%{opacity:0.7} 50%{opacity:1} }

#zone-timer-hud {
    position:absolute; top:54px; left:50%; transform:translateX(-50%);
    text-align:center; pointer-events:none; z-index:15;
}

/* Hardpoint score HUD — top center, reuses the zone-timer real estate since
   Hardpoint matches don't run the zone timer. Shows per-team score and the
   current zone status (neutral / team-owned / contested). */
#hardpoint-hud {
    position:absolute; top:54px; left:50%; transform:translateX(-50%);
    text-align:center; pointer-events:none; z-index:15;
    min-width:320px; padding:10px 18px;
    background:rgba(10,14,22,0.65); border:1px solid rgba(100,140,200,0.25);
    border-radius:8px;
}
#hardpoint-title {
    font-family:'Orbitron'; font-size:0.55rem; letter-spacing:4px;
    opacity:0.5; margin-bottom:2px;
}
#hardpoint-status {
    font-family:'Orbitron'; font-size:0.75rem; font-weight:900;
    letter-spacing:3px; margin-bottom:8px;
    transition:color 0.25s ease;
}
#hardpoint-status.owner-ally { color:#4488ff; text-shadow:0 0 10px rgba(80,140,255,0.6); }
#hardpoint-status.owner-enemy { color:#ff4433; text-shadow:0 0 10px rgba(255,80,80,0.6); }
#hardpoint-status.contested { color:#ffcc22; text-shadow:0 0 10px rgba(255,200,60,0.6); }
#hardpoint-status.neutral { color:rgba(200,208,224,0.45); }
#hardpoint-score-row {
    display:flex; justify-content:space-between; align-items:center; gap:24px;
}
.hp-team { text-align:center; flex:1; }
.hp-team-label {
    font-family:'Orbitron'; font-size:0.5rem; letter-spacing:3px; opacity:0.55;
}
.hp-team-score {
    font-family:'Orbitron'; font-size:1.4rem; font-weight:900;
    letter-spacing:2px; margin-top:2px;
}
#hp-team-a .hp-team-score { color:#4488ff; text-shadow:0 0 10px rgba(80,140,255,0.4); }
#hp-team-b .hp-team-score { color:#ff4466; text-shadow:0 0 10px rgba(255,80,120,0.4); }
#hp-team-a.active .hp-team-score,
#hp-team-b.active .hp-team-score {
    animation:timerPulse 0.9s ease-in-out infinite;
}
#hardpoint-target {
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:2.5px;
    opacity:0.4; margin-top:4px;
}
#zone-timer-label {
    font-family:'Orbitron'; font-size:0.5rem; letter-spacing:3px;
    opacity:0.4;
}
#zone-timer-value {
    font-family:'Orbitron'; font-size:1.4rem; font-weight:900;
    letter-spacing:3px; color:var(--neon);
    text-shadow:0 0 12px rgba(0,255,204,0.4);
    transition:color 0.3s;
}
#zone-timer-value.danger {
    color:var(--danger);
    text-shadow:0 0 12px rgba(255,0,85,0.6);
    animation:timerPulse 0.8s ease-in-out infinite;
}
#zone-timer-value.shrinking {
    color:#ff8800;
    text-shadow:0 0 12px rgba(255,136,0,0.5);
}
@keyframes timerPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes deathTimerPulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.08)} }
#zone-phase-label {
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:2px;
    opacity:0.35; margin-top:2px;
}
#zone-bar-container {
    width:160px; height:4px; margin:4px auto 0;
    background:rgba(255,255,255,0.06); border-radius:2px;
    overflow:hidden;
}
#zone-bar-fill {
    height:100%; width:100%;
    background:var(--neon); border-radius:2px;
    transition:width 0.5s linear, background 0.3s;
}
#zone-bar-fill.danger { background:var(--danger); }
#zone-bar-fill.shrinking { background:#ff8800; }

/* Outside-zone death timer on player */
#zone-death-timer {
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    font-family:'Orbitron'; font-size:3.2rem; font-weight:900;
    letter-spacing:6px; color:#ff0055;
    text-shadow:0 0 40px rgba(255,0,85,1), 0 0 80px rgba(255,0,85,0.6), 0 0 120px rgba(255,0,85,0.3), 0 2px 4px rgba(0,0,0,0.9);
    -webkit-text-stroke: 1px rgba(0,0,0,0.5);
    pointer-events:none; z-index:300;
    opacity:0; transition:opacity 0.15s;
    padding:18px 32px; background:rgba(0,0,0,0.55); border-radius:12px;
    border:2px solid rgba(255,0,85,0.5);
}
#zone-death-timer.show { opacity:1; animation:deathTimerPulse 0.4s ease-in-out infinite; }

/* ===== IN-GAME HUD ===== */
.game-hud { display:none; }
.game-hud.active { display:block; }
.game-hud.active[id="bottom-menu-bar"] { display:flex; }
#game-title-hud {
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    font-family:'Orbitron'; font-size:1.3rem; font-weight:900;
    letter-spacing:12px; color:var(--neon); opacity:0.35;
    pointer-events:none; z-index:5;
    text-shadow:0 0 20px rgba(0,255,204,0.25), 0 0 60px rgba(0,255,204,0.08);
}
#xp-bar-container { display:none; }
#xp-bar-fill { display:none; }
#xp-info {
    position:absolute; bottom:140px; left:50%; transform:translateX(-50%);
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:2px;
    color:var(--gold); opacity:0.5; z-index:10; pointer-events:none;
    white-space:nowrap;
}
#level-up-toast {
    position:absolute; top:38%; left:50%; transform:translateX(-50%) scale(0.8);
    font-family:'Orbitron'; font-size:1.6rem; font-weight:900;
    color:var(--gold); letter-spacing:5px;
    text-shadow:0 0 25px rgba(255,215,0,0.6);
    pointer-events:none; z-index:20; opacity:0;
    transition:opacity 0.3s, transform 0.3s;
}
#level-up-toast.show { opacity:1; transform:translateX(-50%) scale(1); }

/* Size Milestone Toast (F1) */
#team-assignment-banner {
    position:absolute; top:28%; left:50%; transform:translateX(-50%) scale(0.85);
    font-family:'Orbitron'; text-align:center;
    pointer-events:none; z-index:25; opacity:0;
    transition:opacity 0.35s, transform 0.35s;
    background:rgba(0,0,0,0.55); border-radius:10px;
    padding:14px 36px 12px; border:2px solid currentColor;
}
#team-assignment-banner.show { opacity:1; transform:translateX(-50%) scale(1); }
#tab-label {
    font-size:0.75rem; font-weight:700; letter-spacing:5px; opacity:0.7; margin-bottom:4px;
}
#tab-name {
    font-size:2rem; font-weight:900; letter-spacing:6px;
    text-shadow:0 0 30px currentColor, 0 0 60px currentColor;
}
#tab-sub {
    font-size:0.55rem; font-weight:600; letter-spacing:3px; opacity:0.6; margin-top:6px;
}

#milestone-toast {
    position:absolute; top:31%; left:50%; transform:translateX(-50%) scale(0.8);
    font-family:'Orbitron'; font-size:1.8rem; font-weight:900;
    color:#ffd700; letter-spacing:6px;
    text-shadow:0 0 30px rgba(255,215,0,0.7), 0 0 60px rgba(255,215,0,0.3);
    pointer-events:none; z-index:20; opacity:0;
    transition:opacity 0.3s, transform 0.3s;
}
#milestone-toast.show { opacity:1; transform:translateX(-50%) scale(1); }

/* Revenge Toast (F6) */
#revenge-toast {
    position:absolute; top:26%; left:50%; transform:translateX(-50%) scale(0.8);
    font-family:'Orbitron'; font-size:2rem; font-weight:900;
    color:#ff4400; letter-spacing:5px;
    text-shadow:0 0 25px rgba(255,68,0,0.7), 0 0 50px rgba(255,0,0,0.3);
    pointer-events:none; z-index:20; opacity:0;
    transition:opacity 0.3s, transform 0.3s;
}
#revenge-toast.show { opacity:1; transform:translateX(-50%) scale(1); }

/* Top-3 Death Announcement Banner */
#death-announce {
    position:absolute; top:28px; left:50%; transform:translateX(-50%) scaleY(0);
    font-family:'Orbitron'; font-weight:900; letter-spacing:6px;
    text-align:center; z-index:25; pointer-events:none;
    padding:10px 40px; border-radius:6px;
    background:linear-gradient(180deg, rgba(255,0,85,0.15), rgba(0,0,0,0.5));
    border:1px solid rgba(255,0,85,0.35);
    transition:transform 0.35s cubic-bezier(.17,.67,.32,1.2), opacity 0.4s;
    opacity:0;
}
#death-announce.show {
    transform:translateX(-50%) scaleY(1); opacity:1;
}
.da-label { font-size:0.5rem; color:rgba(255,0,85,0.7); letter-spacing:4px; margin-bottom:2px; }
.da-name {
    font-size:1.1rem; color:#fff; letter-spacing:5px;
    text-shadow:0 0 15px rgba(255,0,85,0.5);
}
.da-sub { font-size:0.5rem; opacity:0.4; letter-spacing:3px; margin-top:2px; }
/* Settings gear button */
#music-btn {
    position:fixed; bottom:14px; right:64px; z-index:1000;
    width:44px; height:44px;
    background:var(--panel); border:1px solid rgba(0,255,204,0.4);
    color:var(--neon); font-size:1.4rem;
    border-radius:8px; cursor:pointer; transition:all 0.2s;
    backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 10px rgba(0,255,204,0.1);
    line-height:1;
}
#music-btn:hover { border-color:var(--neon); color:#fff; box-shadow:0 0 18px rgba(0,255,204,0.25); }
#music-dropdown {
    position:fixed; bottom:64px; right:64px; z-index:1001;
    background:rgba(5,10,20,0.95); border:1px solid var(--border);
    border-radius:8px; padding:8px 0; min-width:160px;
    backdrop-filter:blur(10px); box-shadow:0 0 20px rgba(0,0,0,0.5);
}
.music-dropdown-title {
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:2px;
    color:var(--neon); padding:4px 14px 8px; opacity:0.7;
}
.music-toggle-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:4px 14px 6px;
}
.music-toggle-label {
    font-family:'Rajdhani'; font-size:0.8rem; color:#ccc; letter-spacing:1px;
}
.music-onoff-btn {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    color:rgba(255,255,255,0.5); font-family:'Orbitron',monospace;
    font-size:0.55rem; letter-spacing:2px; padding:6px 14px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
}
.music-onoff-btn:hover { border-color:var(--neon); color:var(--neon); }
.music-onoff-btn.on {
    color:var(--neon); border-color:var(--neon);
    box-shadow:0 0 12px rgba(0,255,204,0.15);
}
.music-divider {
    height:1px; background:var(--border); margin:2px 14px 4px; opacity:0.4;
}
.music-option {
    display:block; width:100%; background:none; border:none;
    color:#ccc; font-family:'Rajdhani'; font-size:0.8rem;
    padding:8px 14px; text-align:left; cursor:pointer;
    transition:background 0.15s;
}
.music-option:hover { background:rgba(0,255,204,0.1); color:#fff; }
.music-option.active { color:var(--neon); }
#settings-btn {
    position:fixed; bottom:14px; right:14px; z-index:1000;
    width:44px; height:44px;
    background:var(--panel); border:1px solid rgba(0,255,204,0.4);
    color:var(--neon); font-size:1.5rem;
    border-radius:8px; cursor:pointer; transition:all 0.2s;
    backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 10px rgba(0,255,204,0.1);
    line-height:1;
}
#settings-btn:hover { border-color:var(--neon); color:#fff; box-shadow:0 0 18px rgba(0,255,204,0.25); }

/* Settings panel overlay */
#settings-panel {
    position:fixed; inset:0; background:rgba(0,0,0,0.85);
    display:none; align-items:center; justify-content:center;
    z-index:1001; backdrop-filter:blur(10px);
}
#settings-panel.show { display:flex; }
.settings-box {
    background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:24px 30px; width:280px;
}
.settings-title {
    font-family:'Orbitron'; font-size:1rem; font-weight:700;
    letter-spacing:5px; color:var(--neon); text-align:center; margin-bottom:18px;
}
.settings-row {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:14px;
}
.settings-label {
    font-family:'Orbitron'; font-size:0.55rem; letter-spacing:2px; opacity:0.5;
}
#persistent-id {
    cursor:pointer; transition:0.2s; font-size:0.7rem;
    padding:4px 8px; border-radius:4px;
}
#persistent-id:hover { background:var(--neon-dim); color:var(--neon); }
.copy-hint {
    display:block; font-family:'Orbitron'; font-size:0.35rem;
    letter-spacing:1px; opacity:0.3; text-align:right; margin-top:1px;
}
/* Volume control — custom slider */
.volume-control { display:flex; align-items:center; gap:10px; }
.vol-track {
    position:relative; width:100px; height:22px;
    cursor:pointer; touch-action:none; user-select:none;
    background:transparent;
}
.vol-track::before {
    content:''; position:absolute; top:9px; left:0; right:0; height:4px;
    border-radius:2px; background:rgba(255,255,255,0.18);
    box-shadow:inset 0 0 2px rgba(0,0,0,0.4);
}
.vol-fill {
    position:absolute; top:9px; left:0; width:5%; height:4px;
    border-radius:2px; background:var(--neon);
    box-shadow:0 0 6px rgba(0,255,204,0.3);
    pointer-events:none; z-index:1;
}
.vol-thumb {
    position:absolute; top:4px; left:5%; width:14px; height:14px;
    border-radius:50%; background:var(--neon);
    box-shadow:0 0 10px rgba(0,255,204,0.5);
    pointer-events:none; transform:translateX(-50%);
    z-index:2;
}
#volume-value, #sfx-value {
    font-family:'Orbitron',monospace; font-size:0.5rem;
    letter-spacing:1px; color:var(--neon); min-width:30px;
    text-align:right;
}
.settings-close,
.settings-leave-btn,
.settings-logout-btn {
    display:block; width:100%; margin:8px auto 0; padding:10px 36px;
    background:transparent; border:1px solid var(--border); color:var(--neon);
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:600; letter-spacing:3px;
    cursor:pointer; border-radius:6px; transition:0.2s;
}
.settings-close:hover,
.settings-leave-btn:hover,
.settings-logout-btn:hover { background:var(--neon-dim); }
.settings-leave-btn { color:#ff4444; border-color:rgba(255,68,68,0.3); }
.settings-leave-btn:hover { background:rgba(255,68,68,0.15); border-color:rgba(255,68,68,0.5); }
.settings-danger-zone {
    margin-top:20px; padding-top:16px;
    border-top:1px solid rgba(255,0,85,0.15);
    text-align:center;
}
.settings-danger-label {
    font-family:'Orbitron'; font-size:0.45rem; font-weight:700;
    letter-spacing:3px; color:rgba(255,0,85,0.5); margin-bottom:10px;
}
.settings-delete-btn {
    padding:8px 24px; border-radius:6px;
    background:rgba(255,0,85,0.1); border:1px solid rgba(255,0,85,0.3);
    color:#ff4466; font-family:'Orbitron'; font-size:0.5rem;
    letter-spacing:2px; cursor:pointer; transition:all 0.2s; font-weight:700;
}
.settings-delete-btn:hover {
    background:rgba(255,0,85,0.25); border-color:rgba(255,0,85,0.5); color:#ff0055;
}
.settings-danger-note {
    font-size:0.5rem; color:rgba(200,208,224,0.25); margin-top:8px; line-height:1.4;
}
#keyboard-move-toggle {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    color:rgba(255,255,255,0.5); font-family:'Orbitron',monospace;
    font-size:0.55rem; letter-spacing:2px; padding:6px 14px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
}
#keyboard-move-toggle:hover { border-color:var(--neon); color:var(--neon); }
#keyboard-move-toggle.active { color:var(--neon); border-color:var(--neon);
    box-shadow:0 0 12px rgba(0,255,204,0.15);
}
#move-lock-toggle {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    color:rgba(255,255,255,0.5); font-family:'Orbitron',monospace;
    font-size:0.55rem; letter-spacing:2px; padding:6px 14px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
}
#move-lock-toggle:hover { border-color:var(--danger); color:var(--danger); }
#move-lock-toggle.active { color:var(--danger); border-color:var(--danger);
    box-shadow:0 0 12px rgba(255,0,85,0.15);
}
#gamepad-toggle {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    color:rgba(255,255,255,0.5); font-family:'Orbitron',monospace;
    font-size:0.55rem; letter-spacing:2px; padding:6px 14px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
}
#gamepad-toggle:hover { border-color:var(--neon); color:var(--neon); }
#gamepad-toggle.active { color:var(--neon); border-color:var(--neon);
    box-shadow:0 0 12px rgba(0,255,204,0.15);
}
#screenshake-toggle {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    color:rgba(255,255,255,0.5); font-family:'Orbitron',monospace;
    font-size:0.55rem; letter-spacing:2px; padding:6px 14px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
}
#screenshake-toggle:hover { border-color:var(--neon); color:var(--neon); }
#screenshake-toggle.active { color:var(--neon); border-color:var(--neon);
    box-shadow:0 0 12px rgba(0,255,204,0.15);
}
#fullscreen-toggle {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    color:rgba(255,255,255,0.5); font-family:'Orbitron',monospace;
    font-size:0.55rem; letter-spacing:2px; padding:6px 14px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
}
#fullscreen-toggle:hover { border-color:var(--neon); color:var(--neon); }
#fullscreen-toggle.active { color:var(--neon); border-color:var(--neon);
    box-shadow:0 0 12px rgba(0,255,204,0.15);
}

/* Gamepad focus highlight */
.gp-focus {
    outline:2px solid var(--neon) !important;
    outline-offset:2px;
    box-shadow:0 0 12px rgba(0,255,204,0.3) !important;
}
/* SVG skill tree node focus (outline doesn't work on SVG) */
g.st-tnode.gp-focus .st-tnode-circle { stroke:var(--neon) !important; stroke-width:3.5 !important; }
g.st-tnode.gp-focus .st-hover-ring { opacity:0.5 !important; }

/* Gamepad selected hotbar slot */
.hotbar-slot.gp-selected {
    outline:2px solid var(--gold);
    outline-offset:1px;
    box-shadow:0 0 10px rgba(255,215,0,0.4);
}

/* Last-used slot — universal "this will fire next" indicator (all platforms).
   Uses a softer cyan glow so it doesn't clash with gp-selected (gold) when
   both apply to the same slot. A subtle corner ticker makes it readable in
   both landscape phones and desktop. */
.hotbar-slot.last-used {
    border-color:rgba(0,255,204,0.75);
    box-shadow:0 0 8px rgba(0,255,204,0.35), inset 0 0 4px rgba(0,255,204,0.2);
}
.hotbar-slot.last-used::before {
    content:'';
    position:absolute; top:2px; right:2px;
    width:6px; height:6px; border-radius:50%;
    background:#00ffcc;
    box-shadow:0 0 6px rgba(0,255,204,0.9);
    animation:hotbarSelectedPulse 1.4s ease-in-out infinite;
    pointer-events:none;
}
@keyframes hotbarSelectedPulse {
    0%, 100% { opacity:0.6; transform:scale(1); }
    50%      { opacity:1;   transform:scale(1.25); }
}
/* When BOTH last-used and gp-selected apply, keep gold outline dominant but
   layer the cyan inner glow underneath so both cues are visible. */
.hotbar-slot.last-used.gp-selected {
    box-shadow:0 0 10px rgba(255,215,0,0.4), inset 0 0 6px rgba(0,255,204,0.3);
}

/* On-screen keyboard (gamepad text input) */
#osk-overlay {
    display:none; position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.95); z-index:10000;
    align-items:center; justify-content:center; flex-direction:column;
}
#osk-overlay.show { display:flex; }
#osk-preview {
    font-family:'Orbitron',monospace; font-size:1.2rem; color:#fff;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2);
    padding:12px 24px; border-radius:8px; margin-bottom:16px;
    min-width:300px; text-align:center; letter-spacing:2px;
    min-height:1.6em;
}
#osk-preview .osk-cursor { animation:osk-blink 1s step-end infinite; }
@keyframes osk-blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
#osk-grid {
    display:grid; grid-template-columns:repeat(10, 1fr); gap:4px;
    max-width:420px; padding:8px;
}
.osk-key {
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15);
    color:rgba(255,255,255,0.8); font-family:'Rajdhani',monospace;
    font-size:0.9rem; padding:10px 0; text-align:center;
    border-radius:6px; cursor:pointer; transition:all 0.15s;
    min-width:32px;
}
.osk-key.wide { grid-column:span 2; }
.osk-key.gp-focus {
    background:rgba(0,255,204,0.25); color:#fff;
    border-color:var(--neon);
    box-shadow:0 0 8px rgba(0,255,204,0.3);
}
.osk-key.osk-enter {
    background:rgba(0,255,204,0.12); color:var(--neon);
    border-color:rgba(0,255,204,0.3); font-weight:700;
}
#osk-hint {
    margin-top:12px; font-family:'Rajdhani'; font-size:0.7rem;
    color:rgba(255,255,255,0.35); letter-spacing:1px;
}

/* Quick chat panel (gamepad) */
#quick-chat {
    display:none; position:fixed; bottom:60px; left:14px;
    z-index:200; background:rgba(0,0,0,0.9); border:1px solid var(--border);
    border-radius:10px; padding:8px 4px; min-width:260px;
}
.qc-custom { color:var(--neon) !important; font-style:italic; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:2px; padding-bottom:10px !important; }
#quick-chat.show { display:block; }
.qc-option {
    padding:8px 16px; color:rgba(255,255,255,0.6); font-family:'Rajdhani';
    font-size:0.8rem; letter-spacing:1px; border-radius:6px;
    cursor:pointer; transition:all 0.15s;
}
.qc-option.gp-focus {
    background:rgba(0,255,204,0.12); color:#fff;
}
#qc-title {
    font-family:'Orbitron'; font-size:0.55rem; color:rgba(255,255,255,0.3);
    letter-spacing:2px; text-align:center; padding:2px 0 6px;
}

/* Ability Hotbar (Space + 5-6 slots) */
#ability-hud { position:absolute; bottom:44px; left:50%; transform:translateX(-50%); z-index:10; text-align:center; }
#ability-text { font-family:'Orbitron'; font-size:0.5rem; letter-spacing:2px; margin-bottom:4px; opacity:0.5; }
#ability-bar { display:none; }
#ability-fill { display:none; }
#ability-key-hint { display:none; }
#hotbar {
    display:flex; gap:3px; padding:4px; background:rgba(0,0,0,0.5);
    border:1px solid rgba(255,255,255,0.08); border-radius:8px;
}
.hotbar-slot {
    width:42px; height:42px; position:relative;
    border:1px solid rgba(255,255,255,0.1); border-radius:5px;
    background:rgba(255,255,255,0.02); cursor:pointer; transition:0.15s;
    display:flex; align-items:center; justify-content:center;
}
.hotbar-slot:hover { border-color:rgba(255,255,255,0.25); }
.hotbar-slot.on-cd { opacity:0.5; }
.hotbar-slot.active-now { border-color:var(--neon); box-shadow:0 0 12px rgba(0,255,204,0.4); }
.hotbar-slot.shape-slot { border-color:rgba(0,255,204,0.3); }
.hotbar-icon { font-size:1rem; pointer-events:none; }
.hotbar-key {
    position:absolute; top:1px; left:3px;
    font-family:'Orbitron'; font-size:0.4rem; opacity:0.35;
}
.hotbar-cd {
    position:absolute; bottom:2px; right:0; left:0;
    font-family:'Orbitron'; font-size:0.7rem; font-weight:900; color:#fff;
    text-shadow:0 0 6px rgba(255,0,85,0.9), 0 1px 3px rgba(0,0,0,1);
    text-align:center; z-index:2;
}
.hotbar-cd-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(0,0,0,0.7); border-radius:0 0 4px 4px;
    transition:height 0.15s linear;
}
.hotbar-fuel {
    position:absolute; bottom:2px; right:0; left:0;
    font-family:'Orbitron'; font-size:0.5rem; font-weight:700; color:var(--neon);
    text-shadow:0 0 4px rgba(0,255,204,0.6);
    text-align:center; z-index:2;
}
.hotbar-fuel-bar {
    position:absolute; bottom:0; left:2px; right:2px; height:3px;
    background:rgba(0,0,0,0.5); border-radius:2px; z-index:2;
}
.hotbar-fuel-fill {
    height:100%; border-radius:2px;
    background:linear-gradient(90deg, var(--neon), #44ff88);
    transition:width 0.1s linear;
}
.hotbar-slot.active-now .hotbar-fuel { color:#fff; text-shadow:0 0 6px rgba(255,255,255,0.8); }
.hotbar-slot.active-now .hotbar-fuel-fill { background:linear-gradient(90deg, #ffaa00, #ff4400); }

/* Loadout Panel */
#loadout-panel {
    position:fixed; inset:0; background:rgba(0,0,0,0.9);
    display:none; align-items:center; justify-content:center;
    z-index:310; backdrop-filter:blur(10px);
    overflow-y:auto; overflow-x:hidden;
}
#loadout-panel.show { display:flex; }

/* Mega size announcement */
.mega-size-announce {
    position:fixed; top:15%; left:50%; transform:translateX(-50%) scale(0.5);
    z-index:5000; pointer-events:none; text-align:center;
    opacity:0; transition:all 0.4s ease-out;
}
.mega-size-announce.show { opacity:1; transform:translateX(-50%) scale(1); }
.mega-size-name {
    font-family:'Orbitron',monospace; font-size:2.5rem; font-weight:900;
    color:#fff; letter-spacing:6px; text-transform:uppercase;
    text-shadow:0 0 40px rgba(255,170,0,0.6), 0 0 80px rgba(255,100,0,0.3), 0 4px 12px rgba(0,0,0,0.8);
}
.mega-size-sub {
    font-family:'Orbitron',monospace; font-size:0.9rem; font-weight:700;
    color:var(--gold); letter-spacing:8px; margin-top:6px;
    text-shadow:0 0 20px rgba(255,215,0,0.5);
}

/* Navigation arrows between Skill Tree and Loadout — bordering the panel box */
.panel-nav-arrow {
    position:absolute; top:50%; z-index:999;
    transform:translateY(-50%);
    background:rgba(0,255,204,0.1); border:1px solid rgba(0,255,204,0.3);
    color:var(--neon); font-size:1.5rem; padding:10px 6px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
    font-family:'Orbitron',sans-serif; line-height:1;
}
.panel-nav-arrow:hover { background:rgba(0,255,204,0.25); border-color:var(--neon); transform:translateY(-50%) scale(1.1); }
.panel-nav-left { left:-40px; }
.panel-nav-right { right:-40px; }
.lo-box-wrapper {
    position:relative;
}
.lo-box {
    background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:24px 30px; width:96vw; max-width:1200px;
}
.lo-title { font-family:'Orbitron'; font-size:1.3rem; font-weight:700; letter-spacing:5px; color:var(--neon); text-align:center; margin-bottom:6px; }
.lo-subtitle { text-align:center; font-size:0.9rem; opacity:0.3; margin-bottom:18px; }
.lo-slots {
    display:flex; gap:8px; justify-content:center; margin-bottom:20px;
    padding:12px; background:rgba(0,0,0,0.3); border-radius:8px;
}
.lo-slot {
    width:72px; height:72px; position:relative;
    border:2px dashed rgba(255,255,255,0.1); border-radius:8px;
    background:rgba(255,255,255,0.02); cursor:pointer; transition:0.2s;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.lo-slot:hover { border-color:rgba(0,255,204,0.4); background:rgba(0,255,204,0.03); }
.lo-slot.selected { border-color:var(--neon); background:rgba(0,255,204,0.08); box-shadow:0 0 15px rgba(0,255,204,0.2); }
.lo-slot.filled { border-style:solid; border-color:rgba(255,255,255,0.2); }
.lo-slot.shape-slot { border-color:rgba(0,255,204,0.4); border-style:solid; }
.lo-slot-key { font-family:'Orbitron'; font-size:0.55rem; opacity:0.3; position:absolute; top:3px; left:5px; }
.lo-slot-icon { font-size:1.8rem; }
.lo-slot-icon img.ab-ico { width:30px; height:30px; }
.lo-slot-name { font-size:0.55rem; opacity:0.5; margin-top:2px; font-family:'Orbitron'; letter-spacing:1px; }
.lo-section-title {
    font-family:'Orbitron'; font-size:0.75rem; letter-spacing:3px; opacity:0.35;
    margin:14px 0 8px; text-align:center;
}
.lo-abilities { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:12px; }
.lo-ability {
    width:150px; padding:12px 8px; text-align:center;
    border:1px solid rgba(255,255,255,0.06); border-radius:8px;
    background:rgba(255,255,255,0.01); cursor:pointer; transition:0.2s;
}
.lo-ability:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.03); }
.lo-ability.equipped { border-color:var(--neon); background:rgba(0,255,204,0.05); }
.lo-ability.locked { opacity:0.25; cursor:not-allowed; }
.lo-ability-icon { font-size:1.8rem; display:block; margin-bottom:4px; line-height:1; }
img.ab-ico { width:24px; height:24px; display:inline-block; vertical-align:middle; pointer-events:none; }
.lo-ability-icon img.ab-ico { width:36px; height:36px; }
.hotbar-icon img.ab-ico { width:24px; height:24px; }
.touch-ab-icon img.ab-ico { width:28px; height:28px; }
.lo-tooltip img.ab-ico { width:20px; height:20px; }
#st-tooltip img.ab-ico { width:18px; height:18px; }
.prestige-tt-ability img.ab-ico { width:18px; height:18px; }
.lo-ability-name { font-family:'Orbitron'; font-size:0.65rem; letter-spacing:1px; display:block; }
.lo-ability-tier { font-size:0.7rem; opacity:0.3; }
.lo-ability-cd { font-size:0.7rem; opacity:0.4; color:var(--neon); }
.lo-ability-desc { font-size:0.45rem; opacity:0.35; margin-top:2px; line-height:1.4; }
.lo-close {
    display:block; margin:14px auto 0; padding:9px 36px;
    background:transparent; border:1px solid var(--border); color:var(--neon);
    font-family:'Orbitron'; font-size:0.6rem; letter-spacing:3px;
    cursor:pointer; border-radius:6px; transition:0.2s;
}
.lo-close:hover { background:var(--neon-dim); }
.lo-tooltip {
    position:fixed; display:none; z-index:380;
    background:rgba(8,8,18,0.95); border:1px solid rgba(255,255,255,0.12);
    border-radius:8px; padding:16px 20px; pointer-events:none;
    max-width:360px; min-width:200px;
    backdrop-filter:blur(8px); box-shadow:0 4px 20px rgba(0,0,0,0.5);
    font-size:0.85rem; line-height:1.5;
}

#upgrade-btn-hud {
    background:var(--panel); border:1px solid rgba(255,215,0,0.25);
    color:var(--gold); padding:6px 16px;
    font-family:'Orbitron'; font-size:0.55rem; letter-spacing:2px;
    border-radius:5px; cursor:pointer; z-index:10; transition:0.2s;
}
#upgrade-btn-hud:hover { background:rgba(255,215,0,0.1); }
#skilltree-btn-hud {
    background:var(--panel); border:1px solid rgba(255,215,0,0.25);
    color:var(--gold); padding:6px 16px;
    font-family:'Orbitron'; font-size:0.55rem; letter-spacing:2px;
    border-radius:5px; cursor:pointer; z-index:10; transition:0.2s;
}
#skilltree-btn-hud:hover { background:rgba(255,215,0,0.1); }
#loadout-btn-hud {
    background:var(--panel); border:1px solid rgba(0,255,204,0.25);
    color:var(--neon); padding:6px 16px;
    font-family:'Orbitron'; font-size:0.55rem; letter-spacing:2px;
    border-radius:5px; cursor:pointer; z-index:10; transition:0.2s;
}
#loadout-btn-hud:hover { background:rgba(0,255,204,0.08); }
#bottom-menu-bar {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    gap:8px; z-index:10; align-items:center;
}
.badge {
    background:var(--danger); color:#fff; border-radius:50%;
    width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center;
    font-size:0.55rem; margin-left:5px; font-family:'Rajdhani';
}

/* Flash the session-points badge so players notice they have upgrades to spend */
.badge.badge-pulse {
    animation:badgePulse 0.9s ease-in-out infinite;
    box-shadow:0 0 0 0 rgba(255,60,60,0.7);
    font-weight:700;
}
@keyframes badgePulse {
    0%   { transform:scale(1);    box-shadow:0 0 0 0   rgba(255,60,60,0.8); background:#ff3c3c; }
    50%  { transform:scale(1.25); box-shadow:0 0 0 6px rgba(255,60,60,0);    background:#ff6666; }
    100% { transform:scale(1);    box-shadow:0 0 0 0   rgba(255,60,60,0);    background:#ff3c3c; }
}

/* Also warm the SESSION button itself so the unspent points read from across
   the screen, not just the tiny badge */
#upgrade-btn-hud.btn-has-points {
    border-color:rgba(255,60,60,0.55) !important;
    background:rgba(255,60,60,0.08) !important;
    color:#ffcc44 !important;
    animation:upgradeBtnBreathe 1.8s ease-in-out infinite;
}
@keyframes upgradeBtnBreathe {
    0%, 100% { box-shadow:0 0 4px rgba(255,60,60,0.25); }
    50%      { box-shadow:0 0 14px rgba(255,60,60,0.55); }
}

/* Store button in lobby */
.lobby-store-btn {
    border-color:rgba(180,77,255,0.3) !important;
    color:#b44dff !important;
}
.lobby-store-btn:hover { background:rgba(180,77,255,0.12) !important; }

/* ===== STORE PANEL (Clash Royale inspired) ===== */
#store-panel {
    position:fixed; inset:0; background:rgba(0,0,0,0.94);
    display:none; align-items:flex-start; justify-content:center;
    z-index:280; backdrop-filter:blur(14px);
    overflow-y:auto; overflow-x:hidden; padding:20px 0;
}
#store-panel.show { display:flex; }
.store-box {
    background:linear-gradient(180deg, #0c0a1e 0%, #080614 100%);
    border:1px solid rgba(180,77,255,0.18);
    border-radius:16px; padding:0; width:96vw; max-width:760px;
    box-shadow:0 0 60px rgba(180,77,255,0.08), 0 20px 60px rgba(0,0,0,0.6);
}

/* Header */
.store-header {
    background:linear-gradient(135deg, rgba(180,77,255,0.12), rgba(100,40,200,0.06));
    border-bottom:1px solid rgba(180,77,255,0.15);
    padding:16px 22px 14px; border-radius:16px 16px 0 0;
}
.store-title-row {
    display:flex; align-items:center; justify-content:space-between;
}
.store-title {
    font-family:'Orbitron'; font-size:1.1rem; font-weight:900;
    letter-spacing:6px; color:#b44dff;
    text-shadow:0 0 20px rgba(180,77,255,0.4);
}
.store-close-x {
    background:none; border:none; color:rgba(200,208,224,0.4); font-size:1.6rem;
    cursor:pointer; padding:0 4px; transition:0.2s; line-height:1;
}
.store-close-x:hover { color:#fff; }

/* Footer close button */
.store-footer {
    padding:16px 20px 20px; text-align:center;
    border-top:1px solid rgba(100,120,160,0.15);
}
.store-close-bottom {
    background:rgba(100,120,160,0.15); border:1px solid rgba(100,120,160,0.25);
    color:rgba(200,208,224,0.7); font:600 0.85rem 'Segoe UI',sans-serif;
    letter-spacing:0.08em; padding:10px 48px; border-radius:6px;
    cursor:pointer; transition:0.2s;
}
.store-close-bottom:hover {
    background:rgba(100,120,160,0.3); color:#fff;
    border-color:rgba(100,120,160,0.5);
}

/* Wallet bar */
.store-wallet {
    display:flex; align-items:center; justify-content:center; gap:20px;
    margin-top:12px; padding:10px 16px;
    background:rgba(0,0,0,0.3); border-radius:10px;
    border:1px solid rgba(255,255,255,0.04);
}
.wallet-item {
    display:flex; align-items:center; gap:6px;
    font-family:'Orbitron'; font-size:0.75rem; color:#fff; letter-spacing:1px;
}
.wallet-icon { color:#ffd700; font-size:1rem; }
.wallet-icon.perm-icon { color:#00ffcc; }
.wallet-label { font-size:0.5rem; letter-spacing:2px; color:rgba(200,208,224,0.4); text-transform:uppercase; }
.wallet-divider { width:1px; height:24px; background:rgba(255,255,255,0.08); }

/* Tabs */
.store-vessel-selector {
    display:flex; align-items:center; gap:6px; padding:6px 12px;
    background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(180,77,255,0.08);
}
.store-vessel-label {
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:2px;
    color:rgba(200,180,255,0.4); margin-right:4px;
}
.store-vessel-btn {
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:1px;
    padding:4px 10px; border-radius:4px; cursor:pointer;
    background:rgba(255,255,255,0.03); border:1px solid rgba(180,77,255,0.12);
    color:rgba(200,180,255,0.5); transition:all 0.2s;
}
.store-vessel-btn:hover { border-color:rgba(180,77,255,0.3); color:rgba(200,180,255,0.8); }
.store-vessel-btn.active { color:#b44dff; border-color:#b44dff; box-shadow:0 0 8px rgba(180,77,255,0.15); }
.store-tabs {
    display:flex; gap:0; border-bottom:1px solid rgba(180,77,255,0.1);
}
.store-tab {
    flex:1; font-family:'Orbitron'; font-size:0.55rem; letter-spacing:2px;
    padding:12px 10px; text-align:center;
    background:transparent; border:none; border-bottom:2px solid transparent;
    color:rgba(200,208,224,0.35); cursor:pointer; transition:all 0.2s;
}
.store-tab:hover { color:rgba(200,208,224,0.7); background:rgba(180,77,255,0.04); }
.store-tab.active {
    color:#b44dff; border-bottom-color:#b44dff;
    background:rgba(180,77,255,0.06);
}

/* Content area — vertical scroll feed */
.store-content {
    padding:18px 20px 20px; min-height:300px;
}

/* ── FEATURED TAB — Star Credit packages ── */
.store-section-label {
    font-family:'Orbitron'; font-size:0.55rem; font-weight:700;
    letter-spacing:4px; color:rgba(200,208,224,0.3);
    text-transform:uppercase; margin-bottom:14px; padding-left:4px;
}

/* Featured hero banner */
.store-hero {
    position:relative; border-radius:12px; overflow:hidden;
    background:linear-gradient(135deg, rgba(180,77,255,0.15), rgba(255,215,0,0.08));
    border:1px solid rgba(180,77,255,0.2);
    padding:28px 24px; margin-bottom:20px; text-align:center;
}
.store-hero-badge {
    position:absolute; top:0; right:0;
    background:linear-gradient(135deg, #b44dff, #7b2fbe);
    color:#fff; font-family:'Orbitron'; font-size:0.45rem;
    letter-spacing:2px; padding:5px 14px;
    border-radius:0 12px 0 12px;
}
.store-hero-title {
    font-family:'Orbitron'; font-size:1rem; font-weight:900;
    letter-spacing:4px; color:#ffd700; margin-bottom:6px;
    text-shadow:0 0 16px rgba(255,215,0,0.3);
}
.store-hero-sub {
    font-size:0.75rem; color:rgba(200,208,224,0.5); margin-bottom:4px;
}
.store-hero-coming {
    font-family:'Orbitron'; font-size:0.65rem; letter-spacing:3px;
    color:rgba(180,77,255,0.7); margin-top:10px;
}

/* Package cards grid (CR style: tall cards in a row) */
.store-packages-wrap { position:relative; margin-bottom:24px; }
.store-packages {
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:10px;
}
.store-packages.store-locked {
    filter:blur(2px) saturate(0.3); opacity:0.35; pointer-events:none; user-select:none;
}
.store-coming-soon {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    z-index:2; pointer-events:none;
}
.store-coming-soon span {
    font-family:'Orbitron',sans-serif; font-size:1.3rem; font-weight:900;
    letter-spacing:5px; color:#fff;
    text-shadow:0 0 20px rgba(180,77,255,0.8), 0 0 40px rgba(180,77,255,0.4);
    background:rgba(10,8,24,0.7); padding:14px 32px; border-radius:10px;
    border:1px solid rgba(180,77,255,0.3);
}
.store-pkg {
    background:linear-gradient(180deg, rgba(180,77,255,0.06) 0%, rgba(0,0,0,0.2) 100%);
    border:1px solid rgba(180,77,255,0.12);
    border-radius:12px; padding:18px 10px 14px; text-align:center;
    position:relative; transition:all 0.25s;
}
.store-pkg:hover { border-color:rgba(180,77,255,0.35); transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(180,77,255,0.1); }
.store-pkg.best-value {
    border-color:rgba(255,215,0,0.3);
    background:linear-gradient(180deg, rgba(255,215,0,0.08) 0%, rgba(180,77,255,0.06) 100%);
}
.pkg-bonus {
    position:absolute; top:-8px; left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg, #ff6b35, #e04020);
    color:#fff; padding:3px 14px;
    border-radius:10px; font-family:'Orbitron'; font-size:0.4rem;
    letter-spacing:2px; white-space:nowrap; font-weight:700;
    box-shadow:0 2px 8px rgba(255,107,53,0.3);
}
.pkg-star-icon {
    font-size:1.6rem; margin-bottom:4px; display:block;
    text-shadow:0 0 12px rgba(255,215,0,0.4);
}
.pkg-points {
    font-family:'Orbitron'; font-size:0.85rem; font-weight:700;
    color:#ffd700; margin:4px 0 4px; letter-spacing:1px;
}
.pkg-price {
    font-size:0.85rem; color:rgba(200,208,224,0.5); margin-bottom:10px;
}
.pkg-buy-btn {
    width:100%; padding:8px 6px; border-radius:8px;
    background:linear-gradient(180deg, rgba(180,77,255,0.25), rgba(180,77,255,0.12));
    border:1px solid rgba(180,77,255,0.35);
    color:#d9a0ff; font-family:'Orbitron'; font-size:0.45rem;
    letter-spacing:2px; cursor:pointer; transition:all 0.2s; font-weight:700;
}
.pkg-buy-btn:hover { background:linear-gradient(180deg, rgba(180,77,255,0.4), rgba(180,77,255,0.2)); color:#fff; }
.pkg-buy-btn:disabled { cursor:not-allowed; opacity:0.4; }
.store-note {
    text-align:center; font-size:0.7rem; opacity:0.25; margin-top:12px;
}
.store-disclaimer {
    text-align:center; font-size:0.55rem; color:rgba(255,200,200,0.4);
    line-height:1.6; margin-top:16px; padding:10px 14px;
    border-top:1px solid rgba(255,255,255,0.05);
}

/* ── COSMETICS TAB ── */
.cos-filters {
    display:flex; gap:6px; justify-content:center; margin-bottom:18px; flex-wrap:wrap;
}
.cos-filter {
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:1.5px;
    padding:6px 16px; border-radius:20px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
    color:rgba(200,208,224,0.35); cursor:pointer; transition:all 0.2s;
}
.cos-filter:hover { color:#ccc; background:rgba(255,255,255,0.06); }
.cos-filter.active { background:rgba(180,77,255,0.12); border-color:rgba(180,77,255,0.3); color:#b44dff; }

/* Section headers (CR style dividers) */
.cos-section-title {
    font-family:'Orbitron'; font-size:0.6rem; font-weight:700;
    letter-spacing:4px; color:#b44dff;
    text-align:center;
    padding:8px 16px; margin-top:20px; margin-bottom:14px;
    position:relative;
}
.cos-section-title::before, .cos-section-title::after {
    content:''; position:absolute; top:50%; height:1px;
    width:calc(50% - 80px);
    background:linear-gradient(90deg, transparent, rgba(180,77,255,0.3));
}
.cos-section-title::before { left:0; }
.cos-section-title::after { right:0; background:linear-gradient(270deg, transparent, rgba(180,77,255,0.3)); }
.cos-section-title:first-of-type { margin-top:0; }

/* Cosmetic cards — CR offer tile style */
.cos-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    gap:10px; margin-bottom:8px;
}
.cos-card {
    background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.15) 100%);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px; padding:16px 10px 12px; text-align:center;
    transition:all 0.25s; position:relative;
}
.cos-card:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.3); }

/* Rarity-themed card backgrounds and borders */
.cos-card-common {
    background:linear-gradient(180deg, rgba(150,150,150,0.06) 0%, rgba(80,80,80,0.08) 100%);
    border-color:rgba(150,150,150,0.15);
}
.cos-card-common:hover { border-color:rgba(150,150,150,0.35); box-shadow:0 6px 16px rgba(150,150,150,0.1); }

.cos-card-rare {
    background:linear-gradient(180deg, rgba(50,120,255,0.08) 0%, rgba(20,60,160,0.1) 100%);
    border-color:rgba(50,120,255,0.2);
}
.cos-card-rare:hover { border-color:rgba(50,120,255,0.45); box-shadow:0 6px 16px rgba(50,120,255,0.15); }

.cos-card-epic {
    background:linear-gradient(180deg, rgba(180,77,255,0.1) 0%, rgba(100,30,180,0.1) 100%);
    border-color:rgba(180,77,255,0.25);
}
.cos-card-epic:hover { border-color:rgba(180,77,255,0.5); box-shadow:0 6px 16px rgba(180,77,255,0.2); }

.cos-card-legendary {
    background:linear-gradient(180deg, rgba(255,170,0,0.1) 0%, rgba(180,100,0,0.1) 100%);
    border-color:rgba(255,170,0,0.3);
    box-shadow:0 0 8px rgba(255,170,0,0.08);
}
.cos-card-legendary:hover { border-color:rgba(255,215,0,0.6); box-shadow:0 6px 20px rgba(255,170,0,0.2); }

.cos-card.owned {
    /* Owned cards keep their rarity colors — ownership shown via EQUIP button */
}
.cos-card.active {
    border-color:#22cc44; box-shadow:0 0 16px rgba(34,204,68,0.25);
    background:linear-gradient(180deg, rgba(34,204,68,0.1) 0%, rgba(0,0,0,0.15) 100%);
}
.cos-card.active .cos-name { color:#44ee66; }
.cos-card.active .cos-rarity { border-color:rgba(34,204,68,0.3); background:rgba(34,204,68,0.15); color:#44ee66; text-shadow:none; }
.cos-card.active .cos-owned-check { color:#22cc44; }
.cos-card .cos-owned-check {
    position:absolute; top:6px; right:8px;
    font-size:0.6rem; color:#00ffcc; opacity:0.7;
}
.cos-preview {
    width:64px; height:64px; border-radius:12px; margin:0 auto 10px;
    border:2px solid rgba(255,255,255,0.08);
    box-shadow:0 0 12px rgba(0,0,0,0.4);
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}

/* Color preview — ship silhouette */
.cos-preview-color {
    background:rgba(0,0,0,0.3);
}
.cos-ship-sil {
    width:48px; height:20px; border-radius:50%; position:relative;
    -webkit-mask-image:radial-gradient(ellipse 100% 100% at center, #000 60%, transparent 100%);
    mask-image:radial-gradient(ellipse 100% 100% at center, #000 60%, transparent 100%);
    box-shadow:0 0 10px currentColor;
}
.cos-ship-sil::before {
    content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    width:20px; height:18px; border-radius:50%;
    background:inherit; opacity:0.85;
}

/* Skin preview — canvas pattern on ship */
.cos-preview-skin {
    background:rgba(0,0,0,0.4); border-radius:12px;
}
.cos-skin-img {
    width:64px; height:64px; display:block;
    image-rendering:auto;
}

/* Trail preview — swoosh with glow dot */
.cos-preview-trail {
    background:rgba(0,0,0,0.3);
}
.cos-trail-swoosh {
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    width:38px; height:6px; border-radius:3px;
    filter:blur(2px); opacity:0.7;
}
.cos-trail-dot {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:10px; height:10px; border-radius:50%;
    box-shadow:0 0 8px currentColor, 0 0 16px currentColor;
}

/* Kill FX preview — animated burst */
.cos-preview-killfx {
    background:rgba(0,0,0,0.4);
}
.cos-fx-burst {
    width:28px; height:28px; border-radius:50%;
    background:radial-gradient(circle, var(--fx-color) 0%, transparent 70%);
    box-shadow:0 0 12px var(--fx-color), 0 0 24px var(--fx-color);
    animation:fxPulse 1.5s ease-in-out infinite;
}
.cos-fx-burst::before, .cos-fx-burst::after {
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); border-radius:50%;
}
.cos-fx-burst::before {
    width:40px; height:40px;
    border:1px solid var(--fx-color); opacity:0.3;
    animation:fxRing 1.5s ease-out infinite;
}
.cos-fx-burst::after {
    width:52px; height:52px;
    border:1px solid var(--fx-color); opacity:0.15;
    animation:fxRing 1.5s ease-out infinite 0.3s;
}
@keyframes fxPulse {
    0%,100% { transform:scale(1); opacity:0.8; }
    50% { transform:scale(1.15); opacity:1; }
}
@keyframes fxRing {
    0% { transform:translate(-50%,-50%) scale(0.5); opacity:0.5; }
    100% { transform:translate(-50%,-50%) scale(1.3); opacity:0; }
}

/* Banner preview — nameplate behind callsign */
.cos-preview-banner {
    background:rgba(0,0,0,0.35); border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    padding:10px;
}
.banner-svg {
    width:100%; height:auto; max-height:60px;
    border-radius:4px; overflow:hidden;
}
.banner-anim-shimmer rect[fill^="url(#"] { animation:bannerShimmer 2.5s ease-in-out infinite; }
@keyframes bannerShimmer {
    0%,100% { transform:translateX(-30%); opacity:0.4; }
    50% { transform:translateX(30%); opacity:0.9; }
}
.banner-anim-scroll { animation:bannerScroll 3s linear infinite; }
@keyframes bannerScroll {
    0% { transform:translateX(0); }
    100% { transform:translateX(-40px); }
}
.banner-anim-pulse { animation:bannerPulse 1.5s ease-in-out infinite; }
@keyframes bannerPulse {
    0%,100% { opacity:0.4; stroke-width:2; }
    50% { opacity:1; stroke-width:3; }
}
.banner-anim-twinkle { animation:bannerTwinkle 1.8s ease-in-out infinite; }
@keyframes bannerTwinkle {
    0%,100% { opacity:0.2; transform:scale(0.6); }
    50% { opacity:1; transform:scale(1.3); }
}
.banner-anim-flames { animation:bannerFlames 1.2s ease-in-out infinite; transform-origin:center bottom; }
@keyframes bannerFlames {
    0%,100% { opacity:0.45; transform:scaleY(1); }
    50% { opacity:0.85; transform:scaleY(1.15); }
}
.banner-anim-aurora { animation:bannerAurora 4s linear infinite; }
@keyframes bannerAurora {
    0% { transform:translateX(-100%); }
    100% { transform:translateX(100%); }
}
.banner-anim-rainbow { animation:bannerHue 6s linear infinite; }
@keyframes bannerHue {
    0% { filter:hue-rotate(0deg); }
    100% { filter:hue-rotate(360deg); }
}

/* Victory screen — banner sits behind the name in the standings table */
.summary-name-cell { padding:6px 8px; min-width:180px; }
.summary-banner-wrap {
    position:relative; display:inline-block; min-width:160px;
    padding:4px 10px; border-radius:4px; overflow:hidden;
}
.summary-banner-wrap .banner-svg {
    position:absolute; inset:0; width:100%; height:100%;
    z-index:0; opacity:0.85;
}
.summary-banner-name {
    position:relative; z-index:1;
    font-weight:600; letter-spacing:0.03em;
    text-shadow:0 1px 2px rgba(0,0,0,0.85);
}

/* Winner banner shown above the name at the top of the summary box */
.summary-winner-banner {
    display:flex; justify-content:center; gap:8px;
    margin:0 auto 12px; max-width:520px; flex-wrap:wrap;
}
.summary-winner-banner .banner-svg,
.summary-winner-banner-slot .banner-svg {
    width:280px; height:84px; border-radius:6px;
    box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
.summary-winner-banner-slot {
    width:180px; height:54px;
    overflow:hidden; border-radius:6px;
    box-shadow:0 2px 10px rgba(0,0,0,0.4);
}
.summary-winner-banner-slot .banner-svg {
    width:180px; height:54px;
}

/* Rarity badges */
.cos-rarity {
    position:absolute; top:4px; left:4px;
    font-family:'Orbitron'; font-size:0.3rem; font-weight:700;
    letter-spacing:1.5px; padding:2px 6px; border-radius:4px;
    z-index:2;
}
.cos-rarity-common { background:rgba(150,150,150,0.2); color:rgba(200,200,200,0.6); border:1px solid rgba(150,150,150,0.15); }
.cos-rarity-rare { background:rgba(50,120,255,0.15); color:rgba(100,170,255,0.8); border:1px solid rgba(50,120,255,0.2); }
.cos-rarity-epic { background:rgba(180,77,255,0.15); color:rgba(200,130,255,0.9); border:1px solid rgba(180,77,255,0.25); }
.cos-rarity-legendary { background:rgba(255,170,0,0.15); color:#ffd700; border:1px solid rgba(255,170,0,0.3); text-shadow:0 0 6px rgba(255,170,0,0.4); }
.cos-type {
    font-family:'Orbitron'; font-size:0.4rem; letter-spacing:2px;
    color:rgba(200,208,224,0.25); margin-bottom:3px;
}
.cos-name {
    font-family:'Orbitron'; font-size:0.55rem; letter-spacing:1.5px;
    color:#ddd; margin-bottom:10px;
}
.cos-card-common .cos-name { color:rgba(200,200,200,0.7); }
.cos-card-rare .cos-name { color:rgba(100,170,255,0.9); }
.cos-card-epic .cos-name { color:rgba(200,130,255,0.95); }
.cos-card-legendary .cos-name { color:#ffd700; text-shadow:0 0 6px rgba(255,170,0,0.3); }
.cos-btn-row { display:flex; gap:4px; }
.cos-btn {
    flex:1; padding:7px 8px; border-radius:8px;
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:1.5px;
    cursor:pointer; transition:all 0.2s; border:1px solid; font-weight:700;
}
.cos-inspect {
    background:rgba(100,120,160,0.08); border-color:rgba(100,120,160,0.2); color:rgba(200,208,224,0.5);
    flex:0 0 auto;
}
.cos-inspect:hover { background:rgba(100,120,160,0.2); color:#fff; }

/* Inspect Modal */
.inspect-overlay {
    position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,0.9); display:flex; justify-content:center; align-items:center;
}
.inspect-box {
    position:relative; text-align:center; padding:30px;
    background:linear-gradient(135deg,#0c0a1e,#080614);
    border:1px solid rgba(100,120,160,0.15); border-radius:14px;
    box-shadow:0 0 60px rgba(0,0,0,0.5);
}
.inspect-close {
    position:absolute; top:10px; right:14px;
    background:none; border:none; color:rgba(200,208,224,0.4); font-size:1.6rem;
    cursor:pointer; transition:0.2s; line-height:1;
}
.inspect-close:hover { color:#fff; }
#inspect-canvas {
    display:block; margin:0 auto 16px;
    border-radius:8px; background:rgba(0,0,0,0.3);
}
/* Banner inspect — replaces the canvas with an animated SVG nameplate that
 * matches exactly what appears behind the callsign when the banner is equipped. */
.inspect-banner-overlay {
    display:flex; align-items:center; justify-content:center;
    position:relative; width:280px; height:280px; margin:0 auto 16px;
    border-radius:8px; background:rgba(0,0,0,0.3);
    overflow:hidden;
}
.inspect-banner-plate {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:70px 20px;
}
.inspect-banner-plate .banner-svg {
    width:100%; height:100%; border-radius:6px;
}
.inspect-banner-callsign {
    position:relative; z-index:1;
    font-family:'Orbitron',monospace; font-size:1rem; font-weight:700;
    letter-spacing:4px; color:#fff;
    text-shadow:0 2px 4px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.6);
}
.inspect-name {
    font-family:'Orbitron',monospace; font-size:0.8rem; font-weight:800;
    letter-spacing:3px; color:#fff; margin-bottom:4px;
}
.inspect-rarity {
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:600;
    letter-spacing:2px; margin-bottom:4px;
}
.inspect-rarity.r-common { color:rgba(200,200,200,0.6); }
.inspect-rarity.r-rare { color:rgba(100,170,255,0.9); }
.inspect-rarity.r-epic { color:rgba(200,130,255,0.95); }
.inspect-rarity.r-legendary { color:#ffd700; text-shadow:0 0 8px rgba(255,170,0,0.4); }
.inspect-type {
    font-family:'Orbitron',monospace; font-size:0.4rem; letter-spacing:2px;
    color:rgba(200,208,224,0.3); text-transform:uppercase;
}
.cos-buy {
    background:linear-gradient(180deg, rgba(255,215,0,0.12), rgba(255,215,0,0.04));
    border-color:rgba(255,215,0,0.25); color:#ffd700;
}
.cos-buy:hover { background:rgba(255,215,0,0.22); }
.cos-equip {
    background:linear-gradient(180deg, rgba(0,255,204,0.1), rgba(0,255,204,0.03));
    border-color:rgba(0,255,204,0.25); color:#00ffcc;
}
.cos-equip:hover { background:rgba(0,255,204,0.2); }
.cos-equipped {
    background:linear-gradient(180deg, rgba(34,204,68,0.25), rgba(34,204,68,0.08));
    border-color:#22cc44; color:#44ee66;
}

/* ── EXCHANGE TAB ── */
.exchange-section {
    text-align:center; padding:10px 0;
}
.exchange-card {
    background:linear-gradient(180deg, rgba(0,255,204,0.06) 0%, rgba(0,0,0,0.2) 100%);
    border:1px solid rgba(0,255,204,0.15);
    border-radius:14px; padding:28px 24px; max-width:400px; margin:0 auto 24px;
}
.exchange-card.credits-card {
    background:linear-gradient(180deg, rgba(255,215,0,0.06) 0%, rgba(0,0,0,0.2) 100%);
    border-color:rgba(255,215,0,0.15);
}
.exchange-title {
    font-family:'Orbitron'; font-size:0.75rem; font-weight:700;
    letter-spacing:3px; color:#fff; margin-bottom:6px;
}
.exchange-desc {
    font-size:0.75rem; color:rgba(200,208,224,0.45); margin-bottom:18px;
}
.exchange-rate {
    font-family:'Orbitron'; font-size:0.85rem; letter-spacing:1px;
    color:rgba(200,208,224,0.7); margin-bottom:18px;
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.exchange-rate-from { color:#00ffcc; font-weight:700; }
.exchange-rate-arrow { color:rgba(200,208,224,0.3); font-size:1.1rem; }
.exchange-rate-to { color:#ffd700; font-weight:700; }
.exchange-qty-row {
    display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:14px;
}
.exchange-qty-btn {
    width:34px; height:34px; border-radius:50%;
    background:rgba(0,255,204,0.08); border:1px solid rgba(0,255,204,0.25);
    color:#00ffcc; font-family:'Orbitron'; font-size:0.9rem;
    cursor:pointer; transition:0.2s;
}
.exchange-qty-btn:hover { background:rgba(0,255,204,0.2); }
.exchange-qty-btn.credits-btn {
    background:rgba(255,215,0,0.08); border-color:rgba(255,215,0,0.25); color:#ffd700;
}
.exchange-qty-btn.credits-btn:hover { background:rgba(255,215,0,0.2); }
.exchange-qty {
    font-family:'Orbitron'; font-size:1.3rem; color:#fff;
    letter-spacing:2px; min-width:36px;
}
.exchange-summary {
    font-size:0.8rem; color:rgba(200,208,224,0.5); margin-bottom:16px;
}
.exchange-summary .hl-perm { color:#00ffcc; font-weight:600; }
.exchange-summary .hl-credits { color:#ffd700; font-weight:600; }
.exchange-btn {
    padding:11px 36px; border-radius:8px;
    background:linear-gradient(180deg, rgba(0,255,204,0.18), rgba(0,255,204,0.06));
    border:1px solid rgba(0,255,204,0.3);
    color:#00ffcc; font-family:'Orbitron'; font-size:0.55rem;
    letter-spacing:2px; cursor:pointer; transition:all 0.2s; font-weight:700;
}
.exchange-btn:hover { background:rgba(0,255,204,0.3); color:#fff; }
.exchange-btn.credits-btn {
    background:linear-gradient(180deg, rgba(255,215,0,0.18), rgba(255,215,0,0.06));
    border-color:rgba(255,215,0,0.3); color:#ffd700;
}
.exchange-btn.credits-btn:hover { background:rgba(255,215,0,0.3); color:#fff; }
.exchange-btn.disabled {
    opacity:0.35; cursor:not-allowed;
    background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.08);
    color:rgba(200,208,224,0.3);
}
.exchange-note {
    font-size:0.65rem; opacity:0.2; margin-top:14px;
}
.exchange-divider {
    height:1px; max-width:300px; margin:0 auto 24px;
    background:linear-gradient(90deg, transparent, rgba(180,77,255,0.2), transparent);
}

/* Perm Points buy with credits (in exchange tab) */
.pp-section { text-align:center; padding:20px 0; }
.pp-info { margin-bottom:24px; }
.pp-current {
    font-family:'Orbitron'; font-size:0.8rem; letter-spacing:2px;
    color:rgba(200,208,224,0.7); margin-bottom:8px;
}
.pp-cost { font-size:0.85rem; color:rgba(200,208,224,0.5); }
.pp-val { color:#ffd700; font-weight:600; }
.pp-buy-row { display:flex; flex-direction:column; align-items:center; gap:12px; }
.pp-qty-row { display:flex; align-items:center; gap:16px; }
.pp-qty-btn {
    width:36px; height:36px; border-radius:50%;
    background:rgba(180,77,255,0.1); border:1px solid rgba(180,77,255,0.3);
    color:#b44dff; font-family:'Orbitron'; font-size:1rem;
    cursor:pointer; transition:0.2s;
}
.pp-qty-btn:hover { background:rgba(180,77,255,0.25); }
.pp-qty {
    font-family:'Orbitron'; font-size:1.4rem; color:#ffd700;
    letter-spacing:2px; min-width:40px;
}
.pp-total { font-size:0.85rem; color:rgba(200,208,224,0.6); letter-spacing:1px; }
.pp-confirm {
    padding:12px 32px; border-radius:8px;
    background:rgba(180,77,255,0.2); border:1px solid rgba(180,77,255,0.4);
    color:#b44dff; font-family:'Orbitron'; font-size:0.65rem;
    letter-spacing:2px; cursor:pointer; transition:all 0.2s;
}
.pp-confirm:hover { background:rgba(180,77,255,0.35); color:#fff; }
.pp-confirm.disabled {
    opacity:0.4; cursor:not-allowed;
    background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.08);
    color:rgba(200,208,224,0.3);
}
.pp-warning { font-size:0.7rem; opacity:0.25; margin-top:16px; }

/* Responsive store */
@media (max-width:700px) {
    .store-packages { grid-template-columns:repeat(2, 1fr); }
    .cos-grid { grid-template-columns:repeat(2, 1fr); }
    .store-content { padding:14px 12px 16px; }
    .store-header { padding:14px 16px 12px; }
    .store-coming-soon span { font-size:1rem; padding:10px 20px; letter-spacing:3px; }
}
@media (max-width:420px) {
    .store-packages { grid-template-columns:repeat(2, 1fr); gap:8px; }
    .store-pkg { padding:14px 8px 10px; }
    .pkg-points { font-size:0.7rem; }
    .cos-grid { grid-template-columns:repeat(2, 1fr); gap:8px; }
    .wallet-item { font-size:0.6rem; }
    .wallet-label { font-size:0.4rem; }
}

#minimap-container {
    position:absolute; top:46px; left:14px;
    width:240px; height:240px; background:rgba(0,0,0,0.5);
    border:1px solid var(--border); border-radius:50%; overflow:hidden; z-index:10;
}
#team-hud {
    position:absolute; top:294px; left:14px;
    width:240px; background:rgba(0,10,8,0.7);
    border:1px solid rgba(0,255,136,0.3); border-radius:8px;
    padding:8px 12px; z-index:10; font-size:0.75rem;
}
#team-hud .team-header {
    font-family:'Orbitron',monospace; font-size:0.5rem; letter-spacing:2px;
    color:#00ff88; opacity:0.6; margin-bottom:4px;
}
#team-hud .team-member {
    display:flex; align-items:center; gap:6px; margin-bottom:3px; font-size:0.72rem;
}
#team-hud .team-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
#team-hud .team-name {
    color:#cceedd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#leaderboard {
    position:absolute; top:46px; right:14px; width:160px;
    background:var(--panel); border:1px solid var(--border);
    padding:8px 10px; border-radius:8px; z-index:10;
}
.lb-header { font-family:'Orbitron'; font-size:0.5rem; letter-spacing:3px; opacity:0.3; margin-bottom:6px; }
#lb-content {
    max-height:132px; overflow-y:auto; overflow-x:hidden;
    scrollbar-width:thin; scrollbar-color:var(--neon) rgba(255,255,255,0.05);
}
#lb-content::-webkit-scrollbar { width:4px; }
#lb-content::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:4px; }
#lb-content::-webkit-scrollbar-thumb { background:var(--neon); border-radius:4px; opacity:0.6; }
#lb-content::-webkit-scrollbar-thumb:hover { background:#33ffdd; }
.lb-entry { position:relative; display:flex; justify-content:space-between; font-size:0.75rem; margin-bottom:2px; align-items:center; padding:1px 6px; border-radius:3px; overflow:hidden; }
.lb-entry b { font-family:'Orbitron'; font-size:0.65rem; position:relative; z-index:1; text-shadow:0 1px 2px rgba(0,0,0,0.85); }
.lb-entry > span { position:relative; z-index:1; text-shadow:0 1px 2px rgba(0,0,0,0.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-entry-banner { position:absolute; inset:0; z-index:0; opacity:0.65; pointer-events:none; }
.lb-entry-banner .banner-svg { width:100%; height:100%; display:block; }
.lb-crown { font-size:0.7rem; margin-right:2px; }

#kill-feed { position:absolute; top:90px; right:190px; text-align:right; pointer-events:none; z-index:15; }
.kill-msg {
    font-size:0.75rem; margin-bottom:3px; color:var(--danger); font-weight:600;
    text-shadow:0 1px 3px rgba(0,0,0,0.8); animation:fadeKill 4s forwards;
}
/* Prestige icon slotted inline with a player name in the kill feed */
.kill-msg .kf-prestige {
    display:inline-block; vertical-align:-2px; margin-right:2px;
}
.kill-msg .kf-name { color:#ffd86b; font-weight:700; }
@keyframes fadeKill { 0%,75%{opacity:1} 100%{opacity:0} }

#chat-container {
    position:fixed; bottom:14px; left:14px; width:240px; z-index:110;
    background:transparent; border:none; border-radius:8px;
}
#chat-container:focus-within {
    background:var(--panel); border:1px solid rgba(255,255,255,0.05);
}
#chat-messages {
    height:auto; padding:0 8px; font-size:0.7rem;
    color:rgba(255,255,255,0.6); display:flex; flex-direction:column;
}
#chat-input {
    background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.3); padding:5px 8px; width:100%; font-family:'Rajdhani'; font-size:0.8rem;
    outline:none; border-radius:0; transition:all 0.2s;
}
#chat-input::placeholder { color:rgba(255,255,255,0.15); }
#chat-container:focus-within #chat-input {
    color:#fff; background:rgba(0,0,0,0.5); border-bottom-color:var(--neon);
}
#chat-container:focus-within #chat-input::placeholder { color:rgba(255,255,255,0.3); }
#chat-container:focus-within #chat-messages { padding:6px 8px; }

/* Chat message fade-out */
.chat-msg {
    margin-bottom:3px; text-shadow:0 1px 3px rgba(0,0,0,0.9);
    animation:chatFade 10s forwards;
}
#chat-container:focus-within .chat-msg { animation:none; opacity:1; }
@keyframes chatFade { 0%,70%{opacity:1} 100%{opacity:0} }
@keyframes connectSpin { 0%{opacity:0.3} 50%{opacity:1} 100%{opacity:0.3} }
.connecting-spinner { animation: connectSpin 1.2s ease-in-out infinite; font-size:24px; color:var(--neon); }
#hud-stats {
    position:absolute; top:296px; left:14px;
    background:var(--panel); border:1px solid var(--border);
    padding:6px 12px; border-radius:6px; z-index:10;
    font-size:0.8rem; line-height:1.6; min-width:110px;
}
.hud-row { white-space:nowrap; }
.hud-hp-row { color:#6f6; font-weight:600; }
#hud-hp-bar {
    width:100%; height:6px; background:#441111; border-radius:3px;
    margin:2px 0 4px; overflow:hidden;
}
#hud-hp-fill {
    height:100%; width:100%; background:#44dd44; border-radius:3px;
    transition: width 0.15s ease, background 0.3s ease;
}
#move-lock-hud {
    position:absolute; top:50%; left:50%; transform:translate(-50%, 40px);
    background:rgba(255,0,85,0.15); border:1px solid rgba(255,0,85,0.4);
    padding:4px 10px; border-radius:5px; z-index:10;
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:2px;
    color:var(--danger); display:none; pointer-events:none;
}
#move-lock-hud.active.show { display:block; }

/* Lobby Browser */
#lobby-browser {
    width:100%; margin-top:8px; max-height:180px; overflow-y:auto;
    border:1px solid var(--border); border-radius:8px;
    background:rgba(0,0,0,0.3);
}
.lobby-list-header {
    display:grid; grid-template-columns:1fr auto auto; gap:8px; padding:6px 10px;
    font-family:'Orbitron'; font-size:0.45rem; letter-spacing:2px;
    opacity:0.4; border-bottom:1px solid rgba(255,255,255,0.05);
}
.lobby-row {
    display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;
    padding:7px 10px; cursor:pointer; transition:0.15s;
    border-bottom:1px solid rgba(255,255,255,0.03);
}
.lobby-ping { font-family:'Orbitron'; font-size:0.55rem; letter-spacing:1px; }
.lobby-row:hover { background:rgba(0,255,204,0.06); }
.lobby-row.official { border-left:2px solid var(--gold); }
.lobby-name { font-size:0.8rem; font-weight:600; }
.lobby-name .otag { font-family:'Orbitron'; font-size:0.4rem; color:var(--gold); letter-spacing:1px; margin-left:6px; }
.mode-tag {
    font-family:'Orbitron'; font-size:0.4rem; font-weight:700;
    letter-spacing:1.2px; margin-left:6px; padding:1px 5px;
    border-radius:3px; border:1px solid currentColor;
    vertical-align:middle;
}
.mode-juggernaut { color:#ff8844; background:rgba(255,136,68,0.12); }
.mode-faction    { color:#66ddaa; background:rgba(102,221,170,0.12); }
.mode-hardpoint  { color:#88bbff; background:rgba(136,187,255,0.12); }
.lobby-players { font-family:'Orbitron'; font-size:0.55rem; letter-spacing:1px; color:var(--neon); }
.lobby-empty { text-align:center; padding:20px; opacity:0.3; font-size:0.75rem; }
.lrefresh { background:none; border:1px solid var(--border); color:var(--neon); padding:3px 10px; border-radius:4px; cursor:pointer; font-family:'Orbitron'; font-size:0.4rem; letter-spacing:1px; transition:0.2s; margin-left:8px; }
.lrefresh:hover { background:var(--neon-dim); border-color:var(--neon); }
#server-latency { text-align:center; font-family:'Orbitron'; font-size:0.4rem; letter-spacing:1px; opacity:0.35; padding:4px 0 0; }
#ping-hud { position:absolute; bottom:60px; right:14px; font-family:'Orbitron'; font-size:0.5rem; letter-spacing:1px; opacity:0.4; z-index:10; pointer-events:none; color:var(--neon); }
#net-warnings { position:absolute; bottom:80px; right:14px; z-index:10; pointer-events:none; display:flex; gap:6px; }
.net-warn-icon { opacity:0; color:#f44; transition:opacity 0.4s ease; }
.net-warn-icon.show { opacity:0.85; }
#net-warn-jitter { color:#ff0; }
#net-warn-loss { color:#f44; }
#host-migration-banner {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.92); border:2px solid var(--gold);
    padding:24px 40px; border-radius:12px; z-index:500;
    text-align:center; display:none;
}
#host-migration-banner.show { display:block; }
#host-migration-banner h2 { font-family:'Orbitron'; color:var(--gold); font-size:1.1rem; letter-spacing:4px; margin-bottom:6px; }
#host-migration-banner p { font-size:0.75rem; opacity:0.5; letter-spacing:1px; }

.hidden { display:none !important; }

/* ===== SUMMARY / END-GAME SCREEN ===== */
#summary-screen {
    position:fixed; inset:0; background:rgba(0,0,0,0.92);
    display:none; align-items:center; justify-content:center;
    z-index:400; backdrop-filter:blur(8px);
}
#summary-screen.show { display:flex; }
.summary-box {
    text-align:center; background:var(--panel);
    border:1px solid var(--gold); border-radius:14px;
    padding:32px 52px; width:90vw; max-width:720px;
}
.summary-winner-label { font-family:'Orbitron'; font-size:0.5rem; letter-spacing:6px; color:var(--gold); opacity:0.7; margin-bottom:6px; }
.summary-winner-name  { font-family:'Orbitron'; font-size:1.9rem; letter-spacing:6px; margin-bottom:4px; }
.summary-winner-sub   { font-size:0.6rem; opacity:0.35; letter-spacing:3px; margin-bottom:26px; }
.summary-table-wrap {
    max-height:320px; overflow-y:auto; margin-bottom:22px; border-radius:6px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.summary-table-wrap::-webkit-scrollbar { width:6px; }
.summary-table-wrap::-webkit-scrollbar-track { background:transparent; }
.summary-table-wrap::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }
.summary-table-wrap::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.25); }
.summary-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.summary-table thead { position:sticky; top:0; z-index:1; background:var(--panel); }
.summary-table th { font-family:'Orbitron'; font-size:0.42rem; letter-spacing:2px; color:rgba(255,255,255,0.3); padding:5px 10px; border-bottom:1px solid rgba(255,255,255,0.08); text-align:left; }
.summary-table td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.04); text-align:left; }
.summary-row-winner td { background:rgba(255,210,0,0.07); }
.summary-rank { font-family:'Orbitron'; font-size:0.58rem; color:var(--gold); }
#summary-countdown { font-family:'Orbitron'; font-size:0.7rem; letter-spacing:3px; color:var(--neon); text-align:center; margin-bottom:12px; }
.summary-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.summary-btn { padding:12px 28px; border:none; border-radius:6px; font-family:'Orbitron'; font-size:0.6rem; font-weight:700; letter-spacing:2px; cursor:pointer; transition:0.2s; background:var(--neon); color:#000; }
.summary-btn:hover { background:#fff; }
.summary-btn-alt { background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.15); }
.summary-btn-alt:hover { background:rgba(255,255,255,0.2); }

/* ===== POWERUP HUD ===== */
#powerup-hud { position:absolute; bottom:88px; left:50%; transform:translateX(-50%); display:flex; gap:10px; pointer-events:none; z-index:15; min-height:28px; }
.pu-hud-item { font-family:'Orbitron'; font-size:0.45rem; padding:5px 13px; border-radius:20px; border:1px solid; letter-spacing:2px; white-space:nowrap; animation:puPop 0.3s ease-out; }
@keyframes puPop { from{transform:scale(1.35);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes lo-swap-fade { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.05)} }

/* ===== VIRTUAL TOUCH JOYSTICK (floating) ===== */
#touch-joystick {
    display:none; position:fixed; z-index:100;
    pointer-events:none; /* container is non-interactive; touches go through to canvas */
}
#touch-joystick.visible { display:block; }
#joystick-base {
    width:120px; height:120px; border-radius:50%;
    background:rgba(255,255,255,0.05); border:2px solid rgba(0,255,204,0.15);
    position:absolute; top:-60px; left:-60px; /* centered on container origin */
    touch-action:none; pointer-events:none;
}
#joystick-knob {
    width:50px; height:50px; border-radius:50%;
    background:rgba(0,255,204,0.2); border:2px solid rgba(0,255,204,0.4);
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    pointer-events:none;
}

/* ===== VIRTUAL TOUCH ABILITY BUTTONS ===== */
#touch-abilities { display:none !important; }
.touch-ability-grid {
    display:flex; flex-wrap:wrap; justify-content:flex-end;
    gap:6px; margin-bottom:8px; max-width:160px; margin-left:auto;
}
.touch-ability-btn {
    position:relative; border-radius:50%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    touch-action:none; cursor:pointer;
    background:rgba(255,255,255,0.05); border:2px solid rgba(255,255,255,0.12);
    transition:border-color 0.15s;
}
.touch-ability-btn.on-cd { opacity:0.5; }
.touch-ability-btn.active-now { border-color:var(--neon); box-shadow:0 0 14px rgba(0,255,204,0.5); }
.touch-ability-btn.locked { opacity:0.25; }
.touch-ability-main {
    width:64px; height:64px; margin-left:auto;
    border-color:rgba(0,255,204,0.35); background:rgba(0,255,204,0.08);
}
.touch-ability-slot { width:48px; height:48px; }
.touch-ab-icon { font-size:1.3rem; pointer-events:none; z-index:1; position:relative; }
.touch-ability-slot .touch-ab-icon { font-size:1rem; }
.touch-ab-cd {
    position:absolute; bottom:2px; left:0; right:0;
    font-family:'Orbitron'; font-size:0.65rem; font-weight:900; color:#fff;
    text-shadow:0 0 6px rgba(255,0,85,0.9), 0 1px 3px rgba(0,0,0,1);
    text-align:center; z-index:2; pointer-events:none;
}
.touch-ab-cd-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(0,0,0,0.7); border-radius:0 0 50% 50%;
    transition:height 0.15s linear; pointer-events:none;
}

/* ===== ERROR TOAST ===== */
.error-toast {
    position:fixed; bottom:14px; left:14px;
    background:var(--panel); color:rgba(255,255,255,0.8);
    border:1px solid var(--border);
    padding:10px 18px; font-family:'Rajdhani',sans-serif; font-size:0.8rem;
    letter-spacing:0.5px;
    border-radius:8px; z-index:99999;
    cursor:pointer; max-width:60vw; word-break:break-all;
    box-shadow:0 0 16px rgba(0,255,204,0.12);
    opacity:0.95; transition:opacity 0.3s;
    pointer-events:auto;
}
.error-toast:hover { opacity:1; border-color:var(--neon); }
#error-toast-container {
    position:fixed; bottom:14px; left:264px;
    z-index:99999; display:flex; flex-direction:column-reverse; gap:4px;
    pointer-events:none;
}

/* Music toggle (inside settings panel) */
#music-toggle {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    color:rgba(255,255,255,0.5); font-family:'Orbitron',monospace;
    font-size:0.55rem; letter-spacing:2px; padding:6px 14px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
}
#music-toggle:hover { border-color:var(--neon); color:var(--neon); }
#music-toggle.playing { color:var(--neon); border-color:var(--neon);
    box-shadow:0 0 12px rgba(0,255,204,0.15);
}
#music-next {
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    color:rgba(255,255,255,0.5); font-family:'Orbitron',monospace;
    font-size:0.5rem; padding:6px 10px; margin-left:6px;
    border-radius:6px; cursor:pointer; transition:all 0.2s;
}
#music-next:hover { border-color:var(--neon); color:var(--neon); }

/* ===== LEGAL (PRIVACY + TOS) ===== */
.legal-footer {
    font-size:0.55rem; opacity:0.35; color:var(--neon);
    letter-spacing:1px;
    text-align:center; margin-top:10px; margin-bottom:10px;
    flex-shrink:0;
}
.legal-link { cursor:pointer; transition:0.2s; color:var(--neon); text-decoration:none; }
.legal-link:visited { color:var(--neon); }
.legal-link:hover { opacity:0.7; }
.legal-sep { margin:0 6px; opacity:0.4; }

/* — Age Confirmation Checkbox — */
.login-age-check {
    margin:12px 0 8px; text-align:left;
}
.age-check-label {
    display:flex; align-items:flex-start; gap:8px; cursor:pointer;
}
.age-check-label input[type="checkbox"] {
    margin-top:2px; flex-shrink:0;
    accent-color:var(--neon); width:16px; height:16px; cursor:pointer;
}
.age-check-text {
    font-size:0.6rem; color:rgba(200,208,224,0.5); line-height:1.5;
    letter-spacing:0.5px;
}

/* — Purchase Confirmation Modal — */
.purchase-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.85);
    display:none; align-items:center; justify-content:center;
    z-index:350; backdrop-filter:blur(8px);
}
.purchase-modal-overlay.show { display:flex; }
.purchase-modal-box {
    background:linear-gradient(180deg, #0c0a1e 0%, #080614 100%);
    border:1px solid rgba(255,0,85,0.25);
    border-radius:14px; padding:28px 32px;
    width:90vw; max-width:440px; text-align:center;
    box-shadow:0 0 40px rgba(255,0,85,0.1), 0 20px 60px rgba(0,0,0,0.6);
}
.purchase-modal-title {
    font-family:'Orbitron'; font-size:0.9rem; font-weight:900;
    letter-spacing:5px; color:#ff0055; margin-bottom:16px;
    text-shadow:0 0 15px rgba(255,0,85,0.4);
}
.purchase-modal-item {
    font-family:'Orbitron'; font-size:0.8rem; font-weight:700;
    color:#ffd700; margin-bottom:16px; letter-spacing:2px;
}
.purchase-modal-disclaimer {
    font-size:0.65rem; color:rgba(255,200,200,0.7); line-height:1.6;
    margin-bottom:12px; padding:12px 14px;
    background:rgba(255,0,85,0.08); border:1px solid rgba(255,0,85,0.15);
    border-radius:8px;
}
.purchase-modal-age {
    font-size:0.6rem; color:rgba(200,208,224,0.45); line-height:1.5;
    margin-bottom:18px;
}
.purchase-modal-buttons {
    display:flex; gap:10px;
}
.purchase-modal-btn {
    flex:1; padding:11px 8px; border-radius:8px;
    font-family:'Orbitron'; font-size:0.55rem; font-weight:700;
    letter-spacing:2px; cursor:pointer; transition:all 0.2s; border:none;
}
.purchase-modal-btn.confirm {
    background:linear-gradient(180deg, rgba(255,0,85,0.3), rgba(255,0,85,0.15));
    border:1px solid rgba(255,0,85,0.4); color:#ff6688;
}
.purchase-modal-btn.confirm:hover {
    background:linear-gradient(180deg, rgba(255,0,85,0.5), rgba(255,0,85,0.25));
    color:#fff;
}
.purchase-modal-btn.cancel {
    background:transparent; border:1px solid rgba(255,255,255,0.1);
    color:rgba(200,208,224,0.5);
}
.purchase-modal-btn.cancel:hover {
    border-color:rgba(255,255,255,0.3); color:#fff;
}

.privacy-box {
    background:var(--panel); border:1px solid var(--border);
    border-radius:14px; padding:28px 32px; width:90vw; max-width:520px;
    max-height:80vh; display:flex; flex-direction:column;
}
.privacy-title {
    font-family:'Orbitron'; font-size:1rem; font-weight:700;
    letter-spacing:5px; color:var(--neon); text-align:center; margin-bottom:4px;
}
.privacy-updated {
    font-size:0.6rem; opacity:0.3; text-align:center;
    letter-spacing:2px; margin-bottom:16px;
}
.privacy-body {
    overflow-y:auto; flex:1; padding-right:8px;
    font-size:0.8rem; line-height:1.7; color:rgba(255,255,255,0.7);
}
.privacy-body h3 {
    font-family:'Orbitron'; font-size:0.6rem; font-weight:700;
    letter-spacing:3px; color:var(--neon); margin:18px 0 6px; opacity:0.8;
}
.privacy-body h3:first-child { margin-top:0; }
.privacy-body p { margin-bottom:8px; }
.privacy-body ul { margin:0 0 8px 18px; }
.privacy-body li { margin-bottom:4px; }
.privacy-body b { color:rgba(255,255,255,0.9); }
.privacy-body::-webkit-scrollbar { width:4px; }
.privacy-body::-webkit-scrollbar-track { background:transparent; }
.privacy-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.privacy-close {
    display:block; margin:14px auto 0; padding:9px 36px;
    background:transparent; border:1px solid var(--border); color:var(--neon);
    font-family:'Orbitron'; font-size:0.6rem; letter-spacing:3px;
    cursor:pointer; border-radius:6px; transition:0.2s;
}
.privacy-close:hover { background:var(--neon-dim); }

/* =====================================================
   MODAL PANELS (Browser, Armory)
   ===================================================== */
.modal-panel {
    display:none; position:fixed; inset:0; z-index:700;
    background:rgba(0,0,0,0.92); overflow-y:auto;
}
.modal-panel.show { display:block; }
.modal-panel-box {
    max-width:500px; margin:40px auto; background:linear-gradient(135deg,#0c0a1e,#080614);
    border:1px solid rgba(100,120,160,0.15); border-radius:10px; padding:0 0 0;
}
.modal-panel-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 20px 12px;
}
.modal-panel-title {
    font:700 1.1rem 'Rajdhani',sans-serif; color:rgba(200,208,224,0.9);
    letter-spacing:0.12em;
}
.modal-panel-close {
    background:none; border:none; color:rgba(200,208,224,0.4); font-size:1.6rem;
    cursor:pointer; padding:0 4px; transition:0.2s; line-height:1;
}
.modal-panel-close:hover { color:#fff; }
.modal-panel-box .section-label { padding:0 20px; }
.modal-panel-box .shape-selector { padding:0 16px; }
.modal-panel-box .shape-detail { padding:0 20px; }
.modal-panel-box .btn-row { padding:0 20px; }
.modal-panel-box #lobby-browser { padding:0 16px; }
.modal-panel-box .lobby-list-header { padding:0 4px; }
.modal-panel-box #server-latency { padding:0 20px; }
.modal-panel-box .divider { padding:0 20px; }
.modal-panel-box .btn-row { padding:0 16px; }

/* =====================================================
   LOBBY PLAY NOW + NAV BUTTONS
   ===================================================== */
.lobby-nav-row {
    display:flex; gap:6px; margin-top:6px; margin-bottom:8px;
}
.lobby-nav-row.lobby-nav-center { justify-content:center; }
.lobby-nav-btn {
    flex:1; padding:9px 8px;
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:600; letter-spacing:2px;
    background:rgba(100,120,160,0.06); color:rgba(200,208,224,0.55);
    border:1px solid rgba(100,120,160,0.12); border-radius:6px;
    cursor:pointer; transition:all 0.25s; text-align:center;
}
.lobby-nav-btn:hover {
    background:rgba(100,120,160,0.15); color:rgba(200,208,224,0.9);
    border-color:rgba(100,120,160,0.3);
    box-shadow:0 0 12px rgba(100,120,160,0.08);
}
.lobby-btn-gold { color:var(--gold); border-color:rgba(255,215,0,0.2); }
.lobby-btn-gold:hover { background:rgba(255,215,0,0.1); color:var(--gold); border-color:rgba(255,215,0,0.4); box-shadow:0 0 12px rgba(255,215,0,0.1); }
.lobby-btn-neon { color:var(--neon); border-color:rgba(0,255,204,0.2); }
.lobby-btn-neon:hover { background:rgba(0,255,204,0.1); color:var(--neon); border-color:rgba(0,255,204,0.4); box-shadow:0 0 12px rgba(0,255,204,0.1); }
.lobby-btn-purple { color:#b44dff; border-color:rgba(180,77,255,0.2); }
.lobby-btn-purple:hover { background:rgba(180,77,255,0.1); color:#b44dff; border-color:rgba(180,77,255,0.4); box-shadow:0 0 12px rgba(180,77,255,0.1); }
.lobby-play-btn {
    width:100%; padding:16px; margin:14px 0 10px;
    font-family:'Orbitron',monospace; font-size:0.9rem; font-weight:800; letter-spacing:4px;
    background:linear-gradient(135deg, rgba(0,255,204,0.15), rgba(0,200,160,0.08));
    color:var(--neon);
    border:1px solid rgba(0,255,204,0.3);
    position:relative; overflow:hidden;
    text-shadow:0 0 20px rgba(0,255,204,0.3);
}
.lobby-play-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(0,255,204,0.06), transparent);
    animation:playBtnShimmer 3s ease-in-out infinite;
}
@keyframes playBtnShimmer {
    0%,100% { transform:translateX(-100%); }
    50% { transform:translateX(100%); }
}
.lobby-play-btn:hover {
    background:linear-gradient(135deg, rgba(0,255,204,0.25), rgba(0,200,160,0.15));
    border-color:rgba(0,255,204,0.5); color:#fff;
    box-shadow:0 0 30px rgba(0,255,204,0.15), 0 0 60px rgba(0,255,204,0.05);
    text-shadow:0 0 30px rgba(0,255,204,0.5);
    transform:scale(1.01);
}
.lobby-play-btn:active { transform:scale(0.98); }
/* SOLO / OFFLINE — secondary (muted) play button next to PLAY NOW */
.lobby-offline-btn {
    width:100%; padding:10px; margin:0 0 10px;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    font-family:'Orbitron',monospace; letter-spacing:3px; text-align:center;
    background:rgba(120,140,180,0.06); color:rgba(200,210,230,0.7);
    border:1px solid rgba(120,140,180,0.25); border-radius:10px;
    cursor:pointer; transition:0.2s;
}
.lobby-offline-btn .play-btn-label { font-size:0.7rem; font-weight:700; }
.lobby-offline-btn .play-btn-mode { font-size:0.45rem; opacity:0.5; letter-spacing:2px; }
.lobby-offline-btn:hover { background:rgba(120,140,180,0.14); border-color:rgba(120,140,180,0.45); color:#fff; }
.lobby-offline-btn:active { transform:scale(0.98); }
/* INSTALL APP — PWA install (download to device). Shown only when installable. */
.lobby-install-btn {
    width:100%; padding:11px; margin:0 0 10px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Orbitron',monospace; letter-spacing:2px; font-size:0.65rem; font-weight:700;
    background:linear-gradient(135deg, rgba(0,255,160,0.14), rgba(0,200,120,0.07));
    color:#5effc0; border:1px solid rgba(0,255,160,0.4); border-radius:10px;
    cursor:pointer; transition:0.2s;
}
.lobby-install-btn .install-icon { font-size:0.95rem; line-height:1; }
.lobby-install-btn:hover { background:linear-gradient(135deg, rgba(0,255,160,0.24), rgba(0,200,120,0.13)); border-color:#5effc0; color:#fff; }
.lobby-install-btn:active { transform:scale(0.98); }
/* Connectivity-aware UI — hide online-only surfaces when there's no server reachable */
body.no-server #btn-open-friends,
body.no-server #btn-open-browser,
body.no-server #btn-store-lobby,
body.no-server #global-leaderboard,
body.no-server #party-widget,
body.no-server #sync-status { display:none !important; }
body.no-server .lobby-offline-btn { border-color:rgba(0,255,204,0.4); color:#fff; box-shadow:0 0 14px rgba(0,255,204,0.08); }
#btn-play-now:disabled { opacity:0.4; cursor:not-allowed; filter:grayscale(0.6); }
#btn-play-now:disabled::before { display:none; }
/* Offline match — hide online-only in-game readouts (cosmetic ping / net warnings) */
body.offline-match #ping-hud,
body.offline-match #net-warnings { display:none !important; }
.play-btn-label { display:block; }
.play-btn-mode {
    display:block; margin-top:5px;
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:700;
    letter-spacing:2.5px; opacity:0.85;
    text-shadow:0 0 10px currentColor;
}
.play-btn-mode.mode-ffa { color:var(--neon); }
.play-btn-mode.mode-juggernaut { color:#ff8844; }
.play-btn-mode.mode-faction { color:#66ddaa; }
.play-btn-mode.mode-hardpoint { color:#88bbff; }
.play-mode-picker { position:relative; width:100%; margin:0 0 10px; }
.play-mode-btn {
    width:100%; padding:10px 12px;
    font-family:'Orbitron',monospace; font-size:0.65rem; font-weight:700;
    letter-spacing:2px;
    background:rgba(0,0,0,0.4);
    color:var(--neon);
    border:1px solid rgba(0,255,204,0.2);
    border-radius:4px;
    cursor:pointer;
    transition:border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.play-mode-btn:hover { border-color:rgba(0,255,204,0.4); background:rgba(0,0,0,0.6); box-shadow:0 0 10px rgba(0,255,204,0.08); color:#fff; }
.play-mode-btn[aria-expanded="true"] { border-color:rgba(0,255,204,0.6); color:#fff; box-shadow:0 0 14px rgba(0,255,204,0.12); }
.play-mode-caret { font-size:0.9em; opacity:0.7; transition:transform 0.2s; display:inline-block; }
.play-mode-btn[aria-expanded="true"] .play-mode-caret { transform:rotate(180deg); }
.play-mode-dropdown {
    position:absolute; left:0; right:0; top:calc(100% + 4px);
    background:rgba(10,10,20,0.98);
    border:1px solid rgba(0,255,204,0.3);
    border-radius:4px;
    padding:4px;
    z-index:50;
    box-shadow:0 6px 20px rgba(0,0,0,0.6), 0 0 18px rgba(0,255,204,0.08);
}
.play-mode-option {
    display:block; width:100%; padding:9px 10px;
    font-family:'Orbitron',monospace; font-size:0.6rem; font-weight:700;
    letter-spacing:2px;
    background:transparent;
    color:var(--neon);
    border:none;
    cursor:pointer;
    text-align:center;
    border-radius:3px;
    transition:background 0.15s, color 0.15s;
}
.play-mode-option:hover { background:rgba(0,255,204,0.1); color:#fff; }
.play-mode-option.active { background:rgba(0,255,204,0.16); color:#fff; }
.play-mode-option[data-mode="juggernaut"]           { color:#ff8844; }
.play-mode-option[data-mode="juggernaut"]:hover     { background:rgba(255,136,68,0.12); color:#ffb080; }
.play-mode-option[data-mode="juggernaut"].active    { background:rgba(255,136,68,0.18); color:#ffcc99; }
.play-mode-option[data-mode="faction"]              { color:#66ddaa; }
.play-mode-option[data-mode="faction"]:hover        { background:rgba(102,221,170,0.12); color:#88ffcc; }
.play-mode-option[data-mode="faction"].active       { background:rgba(102,221,170,0.18); color:#aaffdd; }
.play-mode-option[data-mode="hardpoint"]            { color:#88bbff; }
.play-mode-option[data-mode="hardpoint"]:hover      { background:rgba(136,187,255,0.12); color:#aaccff; }
.play-mode-option[data-mode="hardpoint"].active     { background:rgba(136,187,255,0.18); color:#cce0ff; }
.lobby-store-btn {
    width:100%; padding:14px; margin:0 0 10px;
    font-family:'Orbitron',monospace; font-size:0.85rem; font-weight:800; letter-spacing:4px;
    background:linear-gradient(135deg, rgba(180,77,255,0.15), rgba(140,50,220,0.08));
    color:#b44dff;
    border:1px solid rgba(180,77,255,0.3);
    position:relative; overflow:hidden;
    text-shadow:0 0 20px rgba(180,77,255,0.3);
}
.lobby-store-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(180,77,255,0.06), transparent);
    animation:playBtnShimmer 3s ease-in-out infinite;
}
.lobby-store-btn:hover {
    background:linear-gradient(135deg, rgba(180,77,255,0.25), rgba(140,50,220,0.15));
    border-color:rgba(180,77,255,0.5); color:#cc77ff;
    box-shadow:0 0 30px rgba(180,77,255,0.15), 0 0 60px rgba(180,77,255,0.05);
    text-shadow:0 0 30px rgba(180,77,255,0.5);
    transform:scale(1.01);
}
.lobby-store-btn:active { transform:scale(0.98); }
/* Next goal widget */
.next-goal {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:6px 12px; margin:4px 0;
    background:rgba(255,215,0,0.04); border:1px solid rgba(255,215,0,0.1);
    border-radius:6px; min-height:0;
}
.next-goal:empty { display:none; }
.next-goal-icon { font-size:0.8rem; }
.next-goal-text {
    font-family:'Orbitron',monospace; font-size:0.42rem; font-weight:600;
    letter-spacing:1px; color:rgba(255,215,0,0.6);
}

/* Sync status indicator */
.sync-status {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:4px 0; margin-top:4px;
    font-family:'Orbitron',monospace; font-size:0.38rem; letter-spacing:1px;
    color:rgba(200,208,224,0.25);
}
.sync-dot {
    width:6px; height:6px; border-radius:50%;
    background:rgba(100,120,160,0.3);
    transition:background 0.3s, box-shadow 0.3s;
}
.sync-dot.green { background:#44dd88; box-shadow:0 0 6px rgba(68,221,136,0.5); }
.sync-dot.yellow { background:#ffcc00; box-shadow:0 0 6px rgba(255,204,0,0.4); }
.sync-dot.red { background:#ff4444; box-shadow:0 0 6px rgba(255,68,68,0.4); }

.lobby-divider {
    height:1px; margin:4px 20px 8px;
    background:linear-gradient(90deg, transparent, rgba(100,120,160,0.12), transparent);
}

/* Friend request */
.friend-search-msg {
    font-size:0.65rem; text-align:center; min-height:1em; padding:2px 0;
}
.friend-search-msg.ok { color:var(--neon); }
.friend-search-msg.error { color:#ff4466; }

/* Friends panel */
.friends-section { padding:0 16px 8px; }
.friends-section-title {
    font:700 0.7rem 'Rajdhani',sans-serif; color:rgba(200,208,224,0.4);
    letter-spacing:0.08em; margin-bottom:6px;
}
.friends-inbox-header {
    font:700 0.72rem 'Rajdhani',sans-serif; color:#ff8844;
    letter-spacing:0.08em; margin-bottom:8px; padding:8px 10px;
    background:rgba(255,136,68,0.06); border:1px solid rgba(255,136,68,0.15);
    border-radius:6px; text-align:center;
}
.friends-inbox-count {
    display:inline-block; min-width:18px; height:18px; line-height:18px;
    background:#ff4466; color:#fff; border-radius:9px; font-size:0.6rem;
    text-align:center; margin-left:6px; vertical-align:middle;
}
.friend-row-pending {
    border-color:rgba(255,136,68,0.15); background:rgba(255,136,68,0.04);
}
.friend-row {
    display:flex; align-items:center; gap:8px; padding:7px 10px;
    background:rgba(100,120,160,0.06); border:1px solid rgba(100,120,160,0.1);
    border-radius:6px; margin-bottom:4px; font-size:0.72rem;
}
.friend-status {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.friend-status.online { background:#44dd88; box-shadow:0 0 6px rgba(68,221,136,0.5); }
.friend-status.offline { background:rgba(100,120,160,0.3); }
.friend-name { flex:1; color:rgba(200,208,224,0.85); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friend-room { font-size:0.6rem; color:rgba(200,208,224,0.35); }
.friend-actions { display:flex; gap:4px; }
.friend-btn {
    font:600 0.6rem 'Rajdhani',sans-serif; letter-spacing:0.05em;
    padding:3px 8px; border-radius:4px; cursor:pointer; transition:0.2s; border:1px solid;
}
.friend-btn-join {
    background:rgba(0,255,204,0.1); border-color:rgba(0,255,204,0.25); color:var(--neon);
}
.friend-btn-join:hover { background:rgba(0,255,204,0.25); }
.friend-btn-accept {
    background:rgba(0,255,204,0.1); border-color:rgba(0,255,204,0.25); color:var(--neon);
}
.friend-btn-accept:hover { background:rgba(0,255,204,0.25); }
.friend-btn-remove {
    background:rgba(255,68,68,0.06); border-color:rgba(255,68,68,0.15); color:rgba(255,68,68,0.5);
}
.friend-btn-remove:hover { background:rgba(255,68,68,0.15); color:#ff4444; }
.friends-add-row { display:flex; gap:6px; }
.friends-empty { text-align:center; color:rgba(200,208,224,0.25); font-size:0.68rem; padding:12px; }
.friends-badge {
    position:absolute; top:-4px; right:-4px;
    min-width:16px; height:16px; padding:0 4px;
    background:#ff4466; color:#fff; border-radius:8px;
    font:700 0.55rem 'Rajdhani',sans-serif; line-height:16px; text-align:center;
    animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%,100% { box-shadow:0 0 4px rgba(255,68,102,0.4); }
    50% { box-shadow:0 0 10px rgba(255,68,102,0.7); }
}
.friends-autocomplete {
    display:none; position:absolute; top:100%; left:0; right:48px; z-index:10;
    background:#0c0a1e; border:1px solid rgba(100,120,160,0.3); border-top:none;
    border-radius:0 0 6px 6px; max-height:180px; overflow-y:auto;
}
.friends-autocomplete.show { display:block; }
.friends-ac-item {
    display:flex; align-items:center; gap:8px; padding:7px 10px;
    cursor:pointer; transition:0.15s; font-size:0.7rem; color:rgba(200,208,224,0.75);
}
.friends-ac-item:hover { background:rgba(100,120,160,0.15); color:#fff; }
.friends-ac-item .friend-status { width:6px; height:6px; }
.friends-ac-name { flex:1; font-weight:600; cursor:pointer; }
.friends-ac-level { font-size:0.55rem; color:rgba(200,208,224,0.3); white-space:nowrap; }
.friends-ac-add {
    font-family:'Orbitron',monospace; font-size:0.4rem; font-weight:700; letter-spacing:1px;
    background:rgba(0,255,204,0.1); border:1px solid rgba(0,255,204,0.25); color:var(--neon);
    padding:2px 8px; border-radius:4px; cursor:pointer; transition:0.2s;
}
.friends-ac-add:hover { background:rgba(0,255,204,0.25); }

/* =====================================================
   PRESTIGE
   ===================================================== */
.st-prestige-area { margin-top:10px; }

.st-prestige-banner {
    border-radius:8px; padding:10px 16px; text-align:center;
}
.st-prestige-banner.locked {
    background:rgba(100,120,160,0.04); border:1px solid rgba(100,120,160,0.08);
}
.st-prestige-banner.ready {
    background:linear-gradient(135deg, rgba(255,215,0,0.06), rgba(180,120,0,0.04));
    border:1px solid rgba(255,215,0,0.2);
}
.st-prestige-banner.maxed {
    background:linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,170,0,0.06));
    border:1px solid rgba(255,215,0,0.3);
    box-shadow:0 0 15px rgba(255,215,0,0.08);
}

.st-prestige-top {
    display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px;
}
.st-prestige-icon { font-size:1rem; }
.st-prestige-banner.maxed .st-prestige-icon { font-size:1.2rem; }
.st-prestige-level {
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:700;
    letter-spacing:2px; color:rgba(200,208,224,0.4);
}
.st-prestige-banner.ready .st-prestige-level { color:var(--gold); }
.st-prestige-banner.maxed .st-prestige-text {
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:700;
    letter-spacing:2px; color:var(--gold);
}

/* Progress bar (locked state) */
.st-prestige-progress { display:flex; align-items:center; gap:8px; }
.st-prestige-bar {
    flex:1; height:4px; background:rgba(100,120,160,0.1); border-radius:2px; overflow:hidden;
}
.st-prestige-fill {
    height:100%; background:linear-gradient(90deg, rgba(255,215,0,0.4), rgba(255,170,0,0.6));
    border-radius:2px; transition:width 0.3s;
}
.st-prestige-pct {
    font-family:'Orbitron',monospace; font-size:0.38rem; letter-spacing:1px;
    color:rgba(200,208,224,0.25); white-space:nowrap;
}

/* Prestige button (ready state) */
.st-prestige-btn {
    display:block; width:100%; margin:0; padding:12px 16px;
    background:linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,170,0,0.06));
    border:1px solid rgba(255,215,0,0.3); border-radius:8px;
    cursor:pointer; transition:all 0.25s; position:relative; overflow:hidden;
}
.st-prestige-btn::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,215,0,0.06), transparent);
    animation:prestigeShimmer 3s ease-in-out infinite;
}
@keyframes prestigeShimmer {
    0%,100% { transform:translateX(-100%); }
    50% { transform:translateX(100%); }
}
.st-prestige-btn:hover {
    background:linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,170,0,0.12));
    border-color:var(--gold); box-shadow:0 0 20px rgba(255,215,0,0.15);
    transform:scale(1.01);
}
.st-prestige-btn-icon { display:block; font-size:1.4rem; margin-bottom:4px; }
.st-prestige-btn-text {
    display:block; font-family:'Orbitron',monospace; font-size:0.6rem; font-weight:800;
    letter-spacing:3px; color:var(--gold);
    text-shadow:0 0 12px rgba(255,215,0,0.3);
}
.st-prestige-btn-sub {
    display:block; font-family:'Orbitron',monospace; font-size:0.35rem;
    letter-spacing:1px; color:rgba(255,215,0,0.4); margin-top:2px;
}

/* Modal */
.prestige-modal-overlay {
    position:fixed; inset:0; z-index:1100;
    background:rgba(0,0,0,0.92); display:flex; justify-content:center; align-items:center;
}
.prestige-modal-box {
    background:linear-gradient(135deg,#0c0a1e,#080614);
    border:1px solid rgba(255,215,0,0.2); border-radius:14px;
    padding:28px 28px; max-width:600px; width:92%; max-height:85vh; overflow:visible;
    text-align:center; box-shadow:0 0 40px rgba(255,215,0,0.05);
}
.prestige-modal-title {
    font-family:'Orbitron',monospace; font-size:1.1rem; font-weight:900;
    letter-spacing:5px; color:var(--gold); margin-bottom:6px;
    text-shadow:0 0 25px rgba(255,215,0,0.3);
}
.prestige-modal-desc {
    font-family:'Orbitron',monospace; font-size:0.7rem; letter-spacing:1px;
    color:rgba(200,208,224,0.65); margin-bottom:18px; line-height:1.7;
}
.prestige-modal-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px;
    margin-bottom:18px; text-align:center;
}
.prestige-choice {
    background:rgba(100,120,160,0.05); border:1px solid rgba(100,120,160,0.12);
    border-radius:10px; padding:14px 10px 10px; cursor:pointer; transition:all 0.2s; text-align:center;
    position:relative;
}
.prestige-choice:hover {
    transform:translateY(-3px); border-color:rgba(255,215,0,0.4);
    box-shadow:0 6px 16px rgba(0,0,0,0.3); background:rgba(255,215,0,0.06);
}
.prestige-choice-unlock {
    display:block; color:#ffcc44; font-size:0.6rem; margin-top:4px; font-family:'Rajdhani',sans-serif;
}
/* Themed hover tooltip — fixed so it renders above everything */
.prestige-tooltip {
    display:none; position:fixed; width:270px; background:#0a0a1a; border:1px solid var(--neon, #00ffcc); border-radius:10px;
    padding:12px 14px; text-align:left; z-index:99999; pointer-events:none;
    box-shadow:0 0 20px rgba(0,255,204,0.15), 0 8px 24px rgba(0,0,0,0.6);
}
.prestige-tt-name {
    font-family:'Orbitron',monospace; font-size:0.85rem; font-weight:700;
    color:var(--neon, #00ffcc); margin-bottom:6px; letter-spacing:1px;
}
.prestige-tt-desc {
    font-size:0.75rem; color:rgba(200,210,230,0.8); margin-bottom:8px; line-height:1.3;
}
.prestige-tt-milestone {
    background:rgba(255,255,255,0.04); border-radius:6px; padding:6px 8px; margin-bottom:5px;
}
.prestige-tt-rank {
    font-family:'Orbitron',monospace; font-size:0.6rem; font-weight:700;
    color:#ffcc44; margin-right:4px; letter-spacing:1px;
}
.prestige-tt-mname {
    font-family:'Orbitron',monospace; font-size:0.65rem; font-weight:600; color:#fff;
}
.prestige-tt-mdesc {
    font-size:0.7rem; color:rgba(200,210,230,0.7); margin-top:2px; line-height:1.2;
}
.prestige-tt-unlocks {
    border-top:1px solid rgba(255,204,68,0.2); margin-top:8px; padding-top:8px;
}
.prestige-tt-unlocks::before {
    content:'UNLOCKS'; display:block; font-family:'Orbitron',monospace; font-size:0.55rem;
    color:#ffcc44; letter-spacing:2px; margin-bottom:5px; font-weight:700;
}
.prestige-tt-ability { margin-bottom:4px; }
.prestige-tt-ability > span {
    font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:600;
}
.prestige-tt-abdesc {
    font-size:0.65rem; color:rgba(200,210,230,0.6); margin-top:1px; line-height:1.2;
}
.prestige-choice-icon { display:block; font-size:1.4rem; margin-bottom:6px; }
.prestige-choice-name {
    display:block; font-family:'Orbitron',monospace; font-size:0.48rem; font-weight:700;
    letter-spacing:0.5px; color:rgba(200,208,224,0.85); margin-bottom:3px;
}
.prestige-choice-branch {
    display:block; font-family:'Orbitron',monospace; font-size:0.35rem;
    letter-spacing:1px; opacity:0.5;
}
.prestige-cancel {
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:600;
    letter-spacing:3px; padding:9px 28px; border-radius:6px;
    background:transparent; border:1px solid rgba(100,120,160,0.2);
    color:rgba(200,208,224,0.4); cursor:pointer; transition:0.2s;
}
.prestige-cancel:hover { background:rgba(100,120,160,0.15); color:#fff; }

/* =====================================================
   LOCKER
   ===================================================== */
.locker-box {
    width:95vw; max-width:900px; max-height:92vh; margin:20px auto;
    background:linear-gradient(135deg,#0c0a1e,#080614);
    border:1px solid rgba(100,120,160,0.15); border-radius:12px;
    overflow-y:auto; display:flex; flex-direction:column;
}
.locker-box .modal-panel-header { padding:16px 20px 10px; }
.locker-box .store-footer { padding:10px 20px 14px; }
.locker-content { padding:0 20px 12px; flex:1; overflow-y:auto; }

/* Equipped summary at top */
.locker-equipped {
    background:rgba(180,77,255,0.05); border:1px solid rgba(180,77,255,0.12);
    border-radius:10px; padding:14px 18px; margin-bottom:16px;
}
.locker-equipped-title {
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:700;
    letter-spacing:3px; color:rgba(180,77,255,0.5); margin-bottom:10px;
}
.locker-equipped-row { display:flex; gap:10px; }
.locker-eq-slot {
    flex:1; background:rgba(0,0,0,0.25); border-radius:8px; padding:10px 12px; text-align:center;
    border:1px solid rgba(180,77,255,0.06);
}
.locker-eq-label {
    display:block; font-family:'Orbitron',monospace; font-size:0.4rem;
    letter-spacing:2px; color:rgba(200,208,224,0.3); margin-bottom:4px;
}
.locker-eq-value {
    display:block; font-family:'Orbitron',monospace; font-size:0.55rem;
    font-weight:700; letter-spacing:0.5px; color:#b44dff;
}

/* Section headers */
.locker-section-title {
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:700;
    letter-spacing:2px; color:rgba(200,208,224,0.4); margin:16px 0 8px;
    display:flex; align-items:center; gap:10px;
}
.locker-count {
    font-size:0.45rem; font-weight:400; letter-spacing:1px;
    color:rgba(200,208,224,0.2);
}

/* Wrapping grid instead of horizontal scroll */
.locker-row {
    display:flex; flex-wrap:wrap; gap:8px; padding-bottom:6px;
}

/* Cards — bigger */
.locker-card {
    flex:0 0 120px; background:rgba(100,120,160,0.05); border:1px solid rgba(100,120,160,0.1);
    border-radius:10px; padding:12px 8px 8px; text-align:center;
    cursor:pointer; transition:all 0.2s; position:relative;
}
.locker-card:hover { border-color:rgba(180,77,255,0.35); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.3); }
.locker-card.equipped { border-color:#22cc44; background:rgba(34,204,68,0.08); box-shadow:0 0 12px rgba(34,204,68,0.15); }

/* Rarity tints */
.locker-rare { border-color:rgba(50,120,255,0.15); }
.locker-rare:hover { border-color:rgba(50,120,255,0.4); }
.locker-epic { border-color:rgba(180,77,255,0.15); }
.locker-epic:hover { border-color:rgba(180,77,255,0.4); }
.locker-legendary { border-color:rgba(255,170,0,0.2); }
.locker-legendary:hover { border-color:rgba(255,215,0,0.5); box-shadow:0 4px 12px rgba(255,170,0,0.1); }

.locker-card-preview { height:65px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.locker-card-preview .cos-preview { transform:scale(1); }
.locker-card-name {
    font-family:'Orbitron',monospace; font-size:0.45rem; letter-spacing:0.5px;
    color:rgba(200,208,224,0.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.locker-card.equipped .locker-card-name { color:#22cc44; }
.locker-check {
    position:absolute; top:4px; right:4px;
    font-family:'Orbitron',monospace; font-size:0.35rem; font-weight:700;
    letter-spacing:0.5px; color:#22cc44; background:rgba(0,0,0,0.6);
    padding:2px 6px; border-radius:4px;
}
.locker-inspect-btn {
    position:absolute; bottom:2px; right:2px;
    font-family:'Orbitron',monospace; font-size:0.3rem; font-weight:700;
    letter-spacing:0.5px; color:#aab; background:rgba(0,0,0,0.7);
    border:1px solid rgba(170,170,187,0.3); padding:2px 5px; border-radius:3px;
    cursor:pointer; opacity:0; transition:opacity 0.15s;
}
.locker-card:hover .locker-inspect-btn { opacity:1; }
.locker-inspect-btn:hover { color:#fff; border-color:rgba(255,255,255,0.4); }
.locker-default-icon {
    font-size:1.8rem; color:rgba(200,208,224,0.15); font-weight:300;
}
.locker-empty {
    flex:1; text-align:center; color:rgba(200,208,224,0.2);
    font-family:'Orbitron',monospace; font-size:0.4rem; letter-spacing:1px;
    padding:16px; white-space:nowrap;
}

/* =====================================================
   PARTY SYSTEM
   ===================================================== */
.party-widget {
    margin:8px 0; padding:8px 12px;
    background:rgba(180,77,255,0.06); border:1px solid rgba(180,77,255,0.15);
    border-radius:8px;
}
.party-header {
    display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
}
.party-label {
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:700;
    letter-spacing:3px; color:rgba(180,77,255,0.7);
}
.party-leave-btn {
    font-family:'Orbitron',monospace; font-size:0.45rem; letter-spacing:1px;
    background:rgba(255,68,68,0.08); border:1px solid rgba(255,68,68,0.2); color:rgba(255,68,68,0.6);
    padding:3px 8px; border-radius:4px; cursor:pointer; transition:0.2s;
}
.party-leave-btn:hover { background:rgba(255,68,68,0.2); color:#ff4444; }
.party-members { display:flex; flex-direction:column; gap:3px; }
.party-member {
    display:flex; align-items:center; gap:6px; padding:3px 6px;
    font-family:'Orbitron',monospace; font-size:0.5rem; letter-spacing:1px;
    color:rgba(200,208,224,0.7); border-radius:4px;
}
.party-member.host { color:rgba(180,77,255,0.9); }
.party-member .friend-status { width:6px; height:6px; }
.party-member-name { flex:1; }
.party-member-tag {
    font-size:0.4rem; letter-spacing:1px; color:rgba(180,77,255,0.5);
}
.party-member-prestige {
    display:inline-flex; align-items:center; line-height:0;
}
.party-member-prestige img { vertical-align:middle; }
.party-invite-prestige {
    display:inline-flex; align-items:center; margin-right:4px; line-height:0;
}
.party-invite-prestige img { vertical-align:middle; }
.friend-prestige {
    display:inline-flex; align-items:center; line-height:0; margin-right:2px;
}
.friend-prestige img { vertical-align:middle; }
.profile-name-prestige {
    display:inline-flex; align-items:center; margin-right:6px; line-height:0;
}
.profile-name-prestige img { vertical-align:middle; filter:drop-shadow(0 0 4px rgba(255,215,0,0.5)); }

.party-toast {
    position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-60px);
    z-index:950; padding:10px 24px;
    background:linear-gradient(135deg,rgba(12,10,30,0.97),rgba(24,16,60,0.97));
    border:1px solid rgba(180,77,255,0.25); border-radius:8px;
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:600;
    letter-spacing:2px; color:rgba(200,208,224,0.85);
    opacity:0; pointer-events:none; transition:transform 0.3s, opacity 0.3s;
    box-shadow:0 0 20px rgba(180,77,255,0.1);
}
.party-toast.show {
    transform:translateX(-50%) translateY(0); opacity:1;
}

.party-invite-popup {
    position:fixed; top:20px; left:50%; transform:translateX(-50%);
    z-index:900; padding:14px 20px;
    background:linear-gradient(135deg,rgba(12,10,30,0.97),rgba(24,16,60,0.97));
    border:1px solid rgba(180,77,255,0.3); border-radius:10px;
    text-align:center; animation:partySlideIn 0.3s ease-out;
    box-shadow:0 0 30px rgba(180,77,255,0.1);
}
@keyframes partySlideIn {
    from { transform:translateX(-50%) translateY(-20px); opacity:0; }
    to { transform:translateX(-50%) translateY(0); opacity:1; }
}
.party-invite-text {
    font-family:'Orbitron',monospace; font-size:0.55rem; letter-spacing:1px;
    color:rgba(200,208,224,0.8); margin-bottom:10px;
}
.party-invite-text span { color:var(--neon); font-weight:700; }
.party-invite-actions { display:flex; gap:8px; justify-content:center; }

/* Party create button in friends panel */
.party-create-btn {
    display:block; width:100%; margin-bottom:10px; padding:9px;
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:700;
    letter-spacing:2px; text-align:center;
    background:rgba(180,77,255,0.08); border:1px solid rgba(180,77,255,0.2);
    color:rgba(180,77,255,0.7); border-radius:6px; cursor:pointer; transition:0.2s;
}
.party-create-btn:hover { background:rgba(180,77,255,0.18); color:#b44dff; border-color:rgba(180,77,255,0.4); }

/* Invite button for friends list */
.friend-btn-invite {
    background:rgba(180,77,255,0.1); border-color:rgba(180,77,255,0.25); color:rgba(180,77,255,0.8);
}
.friend-btn-invite:hover { background:rgba(180,77,255,0.25); color:#b44dff; }

/* =====================================================
   DAILY LOGIN REWARD
   ===================================================== */
.daily-reward-overlay {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,0.85); justify-content:center; align-items:center;
}
.daily-reward-overlay.show { display:flex; }
.daily-reward-box {
    background:linear-gradient(135deg,#0c0a1e,#1a1040);
    border:1px solid rgba(255,215,0,0.3); border-radius:12px;
    padding:28px 32px; text-align:center; max-width:420px; width:90%;
}
.daily-reward-title {
    font:700 1.3rem 'Rajdhani',sans-serif; color:var(--gold);
    letter-spacing:0.12em; margin-bottom:16px;
}
.daily-reward-grid {
    display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:16px;
}
.daily-day {
    background:rgba(100,120,160,0.1); border:1px solid rgba(100,120,160,0.2);
    border-radius:6px; padding:8px 2px; text-align:center; transition:0.2s;
}
.daily-day .day-label { font-size:0.55rem; color:rgba(200,208,224,0.4); letter-spacing:0.05em; }
.daily-day .day-reward { font:700 0.85rem 'Rajdhani',sans-serif; color:var(--gold); }
.daily-day .day-icon { font-size:1rem; }
.daily-day.claimed { background:rgba(0,255,204,0.08); border-color:rgba(0,255,204,0.3); }
.daily-day.claimed .day-icon::after { content:'✓'; color:var(--neon); }
.daily-day.current { background:rgba(255,215,0,0.12); border-color:var(--gold); box-shadow:0 0 12px rgba(255,215,0,0.2); }
.daily-reward-msg {
    font-size:0.8rem; color:rgba(200,208,224,0.7); margin-bottom:14px;
}
.daily-reward-claim {
    background:linear-gradient(135deg,#b44dff,#7b2fff); border:none; color:#fff;
    font:700 0.9rem 'Rajdhani',sans-serif; letter-spacing:0.1em;
    padding:10px 40px; border-radius:6px; cursor:pointer; transition:0.2s;
}
.daily-reward-claim:hover { filter:brightness(1.2); }
.daily-reward-claim:disabled { opacity:0.4; cursor:default; filter:none; }

/* =====================================================
   LOBBY TIP
   ===================================================== */
.lobby-tip {
    text-align:center; font-family:'Orbitron',monospace; font-size:0.45rem; color:rgba(200,208,224,0.25);
    font-style:italic; padding:8px 16px; min-height:1.4em;
    transition:opacity 0.6s; letter-spacing:1px; line-height:1.6;
    border-top:1px solid rgba(100,120,160,0.06);
    margin-top:4px;
}

/* Landscape 3-column wrappers — invisible in portrait/desktop */
.lobby-left-rail,
.lobby-center-stage,
.lobby-right-rail,
.lobby-callsign-wrap { display:contents; }

/* =====================================================
   GLOBAL LEADERBOARD (LOBBY)
   ===================================================== */
.lobby-leaderboard {
    margin:10px 0 4px; background:rgba(10,8,30,0.4);
    border:1px solid rgba(100,120,160,0.08); border-radius:8px;
    padding:10px 12px; max-height:180px; overflow-y:auto;
    scrollbar-width:none;
}
.lobby-leaderboard::-webkit-scrollbar { display:none; }
.lb-title {
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:700;
    color:rgba(200,208,224,0.35);
    letter-spacing:3px; margin-bottom:6px; text-align:center;
}
.lb-list { display:flex; flex-direction:column; gap:2px; }
.lb-row {
    display:flex; align-items:center; gap:8px; padding:4px 8px;
    border-radius:4px; font-size:0.68rem; color:rgba(200,208,224,0.55);
    transition:background 0.2s;
}
.lb-row:hover { background:rgba(100,120,160,0.06); }
.lb-row:nth-child(1) { color:var(--gold); }
.lb-row:nth-child(2) { color:rgba(200,200,220,0.8); }
.lb-row:nth-child(3) { color:rgba(180,140,100,0.8); }
.lb-row.lb-self { background:rgba(0,255,204,0.06); color:var(--neon); }
.lb-rank { width:18px; text-align:center; font-weight:700; opacity:0.5; font-size:0.6rem; }
.lb-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* When a leaderboard row carries a banner, the name slot becomes a mini
   banner strip with the player's name sitting on top of their equipped art. */
.lb-name-bannered {
    position:relative; display:inline-block; flex:1;
    min-width:0; padding:2px 8px; border-radius:4px; overflow:hidden;
    min-height:18px;
}
.lb-name-bannered .banner-svg {
    position:absolute; inset:0; width:100%; height:100%;
    z-index:0; opacity:0.7;
}
.lb-name-text {
    position:relative; z-index:1; font-weight:600;
    text-shadow:0 1px 2px rgba(0,0,0,0.85);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
}
.lb-lvl { font-size:0.55rem; color:var(--gold); opacity:0.6; white-space:nowrap; }
.lb-wins { font-size:0.55rem; color:var(--gold); opacity:0.7; white-space:nowrap; font-weight:600; }
.lb-kills { font-weight:600; font-size:0.6rem; opacity:0.6; white-space:nowrap; }
.lb-food { font-size:0.55rem; opacity:0.4; white-space:nowrap; color:rgba(68,221,136,0.7); }
.lb-games { font-size:0.55rem; opacity:0.4; white-space:nowrap; }
.lb-size { font-size:0.55rem; opacity:0.4; white-space:nowrap; }
.lb-size::before { content:'⬟ '; }
.lb-crown { font-size:0.75rem; }

/* =====================================================
   MATCH HISTORY
   ===================================================== */
.stats-section-title {
    font:700 0.75rem 'Rajdhani',sans-serif; color:rgba(200,208,224,0.5);
    letter-spacing:0.1em; margin:16px 0 8px; text-align:center;
}
.match-history-list { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.match-entry {
    display:flex; align-items:center; gap:10px; padding:6px 10px;
    background:rgba(100,120,160,0.06); border:1px solid rgba(100,120,160,0.1);
    border-radius:6px; font-size:0.68rem; color:rgba(200,208,224,0.65);
}
.match-shape { font-size:0.9rem; width:22px; text-align:center; }
.match-stats { flex:1; display:flex; gap:12px; flex-wrap:wrap; }
.match-stat { white-space:nowrap; }
.match-stat b { color:rgba(200,208,224,0.85); }
.match-time { font-size:0.6rem; opacity:0.4; white-space:nowrap; }
.match-empty { text-align:center; color:rgba(200,208,224,0.3); font-size:0.7rem; padding:12px; }

/* =====================================================
   ACHIEVEMENTS PANEL
   ===================================================== */
.achievements-overlay {
    display:none; position:fixed; inset:0; z-index:800;
    background:rgba(0,0,0,0.92); overflow-y:auto;
}
.achievements-overlay.show { display:block; }
.achievements-box {
    max-width:600px; margin:40px auto; background:linear-gradient(135deg,#0c0a1e,#080614);
    border:1px solid rgba(100,120,160,0.15); border-radius:10px;
}
.achievements-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 20px 12px;
}
.achievements-title {
    font:700 1.1rem 'Rajdhani',sans-serif; color:var(--gold);
    letter-spacing:0.12em;
}
.achievements-close {
    background:none; border:none; color:rgba(200,208,224,0.4); font-size:1.6rem;
    cursor:pointer; padding:0 4px; transition:0.2s; line-height:1;
}
.achievements-close:hover { color:#fff; }
.achievements-progress {
    text-align:center; font-size:0.7rem; color:rgba(200,208,224,0.4);
    padding:0 20px 12px; letter-spacing:0.05em;
}
.achievements-grid {
    display:grid; grid-template-columns:1fr; gap:4px; padding:0 16px 16px;
}
.achievement-card {
    display:flex; align-items:center; gap:12px; padding:10px 12px;
    background:rgba(100,120,160,0.06); border:1px solid rgba(100,120,160,0.1);
    border-radius:6px; transition:0.2s;
}
.achievement-card.completed {
    background:rgba(0,255,204,0.05); border-color:rgba(0,255,204,0.2);
}
.achievement-icon {
    width:32px; height:32px; flex:0 0 32px; text-align:center;
    color:rgba(200,208,224,0.6);
    display:flex; align-items:center; justify-content:center;
}
.achievement-icon svg { width:100%; height:100%; }
.achievement-card.completed .achievement-icon { color:var(--neon); }
.ach-cat-kills .achievement-icon      { color:#ff7766; }
.ach-cat-wins .achievement-icon       { color:#ffcc44; }
.ach-cat-size .achievement-icon       { color:#66ddff; }
.ach-cat-streak .achievement-icon     { color:#ff4488; }
.ach-cat-games .achievement-icon      { color:#aabbff; }
.ach-cat-food .achievement-icon       { color:#88ff88; }
.ach-cat-loyalty .achievement-icon    { color:#cc88ff; }
.ach-cat-mastery .achievement-icon    { color:#ffee66; }
.achievement-card.completed.ach-cat-kills .achievement-icon,
.achievement-card.completed.ach-cat-wins .achievement-icon,
.achievement-card.completed.ach-cat-size .achievement-icon,
.achievement-card.completed.ach-cat-streak .achievement-icon,
.achievement-card.completed.ach-cat-games .achievement-icon,
.achievement-card.completed.ach-cat-food .achievement-icon,
.achievement-card.completed.ach-cat-loyalty .achievement-icon,
.achievement-card.completed.ach-cat-mastery .achievement-icon {
    filter:drop-shadow(0 0 6px currentColor);
}
.achievement-cat-header {
    display:flex; justify-content:space-between; align-items:baseline;
    padding:12px 16px 4px;
    font-family:'Orbitron', monospace;
    font-size:0.7rem; letter-spacing:0.15em;
}
.achievement-cat-name { color:rgba(200,208,224,0.7); }
.achievement-cat-count { color:rgba(200,208,224,0.45); font-size:0.65rem; }
.achievement-cat-grid { display:grid; grid-template-columns:1fr; gap:4px; padding:0 16px; }
.achievement-banner-badge {
    display:inline-block; margin-top:3px;
    font-family:'Orbitron', monospace; font-size:0.55rem;
    letter-spacing:0.12em; padding:2px 5px; border-radius:3px;
    background:linear-gradient(135deg, rgba(255,215,0,0.25), rgba(200,100,255,0.25));
    color:#ffe088; border:1px solid rgba(255,215,0,0.35);
}
/* Inline banner-unlock preview shown on achievement cards that grant a banner. */
.achievement-banner-reward {
    display:flex; align-items:center; gap:8px; margin-top:6px;
    padding:6px 8px; border-radius:5px;
    background:linear-gradient(135deg, rgba(255,215,0,0.10), rgba(200,100,255,0.10));
    border:1px solid rgba(255,215,0,0.30);
}
.achievement-banner-label {
    font-family:'Orbitron', monospace; font-size:0.5rem;
    letter-spacing:0.14em; color:#ffe088;
    flex:0 0 auto; line-height:1;
}
.achievement-banner-preview {
    flex:1 1 auto; min-width:0; max-width:140px;
    height:22px; display:flex; align-items:center;
}
.achievement-banner-preview .banner-svg {
    width:100%; height:100%;
}
.achievement-banner-name {
    font-family:'Orbitron', monospace; font-size:0.55rem;
    letter-spacing:0.08em; color:#ffd47a;
    flex:0 0 auto; white-space:nowrap;
}
.achievement-card.completed .achievement-banner-reward {
    background:linear-gradient(135deg, rgba(0,255,204,0.12), rgba(255,215,0,0.10));
    border-color:rgba(0,255,204,0.40);
}
.achievement-card.completed .achievement-banner-name,
.achievement-card.completed .achievement-banner-label {
    color:var(--neon);
}
.achievement-info { flex:1; }
.achievement-name {
    font:600 0.8rem 'Rajdhani',sans-serif; color:rgba(200,208,224,0.9);
    letter-spacing:0.03em;
}
.achievement-card.completed .achievement-name { color:var(--neon); }
.achievement-desc { font-size:0.65rem; color:rgba(200,208,224,0.4); }
.achievement-reward {
    font:700 0.75rem 'Rajdhani',sans-serif; color:var(--gold);
    white-space:nowrap;
}
.achievement-card.completed .achievement-reward { color:rgba(200,208,224,0.3); text-decoration:line-through; }
.achievement-check { color:var(--neon); font-size:1rem; }

/* Achievements panel sections */
.achievements-section { padding:0 16px 8px; }
.ach-section-header {
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:700;
    letter-spacing:2px; color:rgba(200,208,224,0.4); margin-bottom:8px;
    padding-bottom:4px; border-bottom:1px solid rgba(100,120,160,0.08);
}

/* Daily login strip */
.daily-login-strip {
    display:flex; gap:4px; margin-bottom:12px;
}
.dl-day {
    flex:1; text-align:center; padding:6px 2px;
    background:rgba(100,120,160,0.06); border:1px solid rgba(100,120,160,0.1);
    border-radius:5px; transition:0.2s;
}
.dl-day .dl-label {
    font-family:'Orbitron',monospace; font-size:0.4rem; letter-spacing:1px;
    color:rgba(200,208,224,0.35); margin-bottom:2px;
}
.dl-day .dl-amt {
    font-family:'Orbitron',monospace; font-size:0.5rem; font-weight:700;
    color:var(--gold);
}
.dl-day.claimed { background:rgba(0,255,204,0.06); border-color:rgba(0,255,204,0.2); }
.dl-day.claimed .dl-amt { color:var(--neon); }
.dl-day.current {
    background:rgba(255,215,0,0.1); border-color:rgba(255,215,0,0.3);
    box-shadow:0 0 8px rgba(255,215,0,0.1);
}

/* Daily challenges */
.challenge-card {
    display:flex; align-items:center; gap:10px; padding:8px 10px;
    background:rgba(100,120,160,0.06); border:1px solid rgba(100,120,160,0.1);
    border-radius:6px; margin-bottom:4px;
}
.challenge-card.completed {
    background:rgba(0,255,204,0.04); border-color:rgba(0,255,204,0.15);
}
.challenge-info { flex:1; }
.challenge-desc {
    font-family:'Orbitron',monospace; font-size:0.45rem; font-weight:600;
    letter-spacing:0.5px; color:rgba(200,208,224,0.75); margin-bottom:4px;
}
.challenge-card.completed .challenge-desc { color:var(--neon); }
.challenge-bar {
    height:4px; background:rgba(100,120,160,0.15); border-radius:2px;
    overflow:hidden; margin-bottom:2px;
}
.challenge-fill {
    height:100%; background:linear-gradient(90deg, var(--neon), #44ff88);
    border-radius:2px; transition:width 0.3s;
}
.challenge-card.completed .challenge-fill { background:var(--neon); }
.challenge-progress {
    font-family:'Orbitron',monospace; font-size:0.4rem; letter-spacing:0.5px;
    color:rgba(200,208,224,0.35);
}
.challenge-reward {
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:700;
    color:var(--gold); white-space:nowrap;
}
.challenge-card.completed .challenge-reward {
    color:var(--neon); font-size:0.7rem;
}
/* Difficulty tag — color-coded, appears inline with the description */
.challenge-diff-tag {
    display:inline-block; margin-right:6px;
    font-family:'Orbitron', monospace; font-size:0.5rem; font-weight:700;
    letter-spacing:0.12em; padding:1px 5px; border-radius:3px;
    vertical-align:baseline;
}
.challenge-diff-easy   .challenge-diff-tag { background:rgba(100,220,120,0.18); color:#86e896; border:1px solid rgba(100,220,120,0.35); }
.challenge-diff-medium .challenge-diff-tag { background:rgba(255,200,80,0.18);  color:#ffd070; border:1px solid rgba(255,200,80,0.35); }
.challenge-diff-hard   .challenge-diff-tag { background:rgba(255,80,120,0.22);  color:#ff86a0; border:1px solid rgba(255,80,120,0.40); }

/* Hard-challenge banner-unlock preview — mirrors the achievement card version */
.challenge-banner-reward {
    display:flex; align-items:center; gap:8px; margin-top:6px;
    padding:5px 8px; border-radius:5px;
    background:linear-gradient(135deg, rgba(255,80,120,0.10), rgba(200,100,255,0.10));
    border:1px solid rgba(255,80,120,0.30);
}
.challenge-banner-label {
    font-family:'Orbitron', monospace; font-size:0.48rem;
    letter-spacing:0.14em; color:#ff86a0;
    flex:0 0 auto; line-height:1;
}
.challenge-banner-preview {
    flex:1 1 auto; min-width:0; max-width:120px;
    height:20px; display:flex; align-items:center;
}
.challenge-banner-preview .banner-svg { width:100%; height:100%; }
.challenge-banner-name {
    font-family:'Orbitron', monospace; font-size:0.52rem;
    letter-spacing:0.08em; color:#ff9ab8;
    flex:0 0 auto; white-space:nowrap;
}
.challenge-card.completed .challenge-banner-reward {
    background:linear-gradient(135deg, rgba(0,255,204,0.12), rgba(255,80,120,0.08));
    border-color:rgba(0,255,204,0.40);
}
.challenge-card.completed .challenge-banner-label,
.challenge-card.completed .challenge-banner-name { color:var(--neon); }
.achievement-toast {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
    z-index:950; padding:12px 24px;
    background:linear-gradient(135deg,rgba(12,10,30,0.97),rgba(10,20,40,0.97));
    border:1px solid rgba(255,215,0,0.3); border-radius:8px;
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:600;
    letter-spacing:1px; color:var(--gold);
    opacity:0; pointer-events:none; transition:transform 0.3s, opacity 0.3s;
    box-shadow:0 0 25px rgba(255,215,0,0.1);
}
.achievement-toast.show {
    transform:translateX(-50%) translateY(0); opacity:1;
}

/* =====================================================
   LOBBY CHAT
   ===================================================== */
.lobby-chat-box {
    margin-top:8px; border-top:1px solid rgba(180,77,255,0.1);
    padding-top:8px;
}
.lobby-chat-header {
    display:flex; align-items:center; margin-bottom:6px;
}
.lobby-chat-title {
    font-family:'Orbitron',monospace; font-size:0.45rem; font-weight:700;
    letter-spacing:2px; color:rgba(180,77,255,0.5);
}
.lobby-chat-body { max-height:200px; overflow:hidden; }
.lobby-chat-messages {
    height:120px; overflow-y:auto; padding:4px 2px;
    font-family:'Orbitron',monospace; font-size:0.45rem; letter-spacing:0.5px;
    color:rgba(200,208,224,0.5);
    background:rgba(0,0,0,0.2); border-radius:4px; margin-bottom:6px;
}
.lobby-chat-messages::-webkit-scrollbar { width:3px; }
.lobby-chat-messages::-webkit-scrollbar-thumb { background:rgba(180,77,255,0.2); border-radius:2px; }
.lobby-chat-msg { margin-bottom:3px; line-height:1.5; padding:1px 6px; }
.lobby-chat-msg .chat-sender { color:rgba(180,77,255,0.8); font-weight:700; }
.lobby-chat-input-row { display:flex; gap:4px; }
.lobby-chat-input {
    flex:1; background:rgba(0,0,0,0.25); border:1px solid rgba(180,77,255,0.12);
    border-radius:4px; color:#fff;
    font-family:'Orbitron',monospace; font-size:0.45rem; letter-spacing:0.5px;
    padding:6px 8px; outline:none; transition:border-color 0.2s;
}
.lobby-chat-input:focus { border-color:rgba(180,77,255,0.4); }
.lobby-chat-input::placeholder { color:rgba(200,208,224,0.2); }
.lobby-chat-send {
    background:rgba(180,77,255,0.1); border:1px solid rgba(180,77,255,0.2);
    color:rgba(180,77,255,0.7); border-radius:4px; padding:0 10px; cursor:pointer;
    font-size:0.7rem; transition:0.2s;
}
.lobby-chat-send:hover { background:rgba(180,77,255,0.25); color:#b44dff; }

/* =====================================================
   DEAL OF THE DAY (FEATURED TAB)
   ===================================================== */
.deal-card {
    background:linear-gradient(135deg,rgba(255,215,0,0.08),rgba(180,77,255,0.08));
    border:2px solid rgba(255,215,0,0.3); border-radius:10px;
    padding:20px; text-align:center; margin:16px 0;
    position:relative; overflow:hidden;
}
.deal-badge {
    position:absolute; top:8px; right:8px;
    background:linear-gradient(135deg,#ff4466,#ff2244); color:#fff;
    font:700 0.6rem 'Rajdhani',sans-serif; letter-spacing:0.08em;
    padding:3px 10px; border-radius:10px;
}
.deal-item-name {
    font:700 1.1rem 'Rajdhani',sans-serif; color:#fff;
    letter-spacing:0.05em; margin-bottom:4px;
}
.deal-item-type { font-size:0.65rem; color:rgba(200,208,224,0.4); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:12px; }
.deal-prices { display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:14px; }
.deal-price-old {
    font:700 0.9rem 'Rajdhani',sans-serif; color:rgba(200,208,224,0.35);
    text-decoration:line-through;
}
.deal-price-new {
    font:700 1.2rem 'Rajdhani',sans-serif; color:var(--gold);
}
.deal-btn {
    background:linear-gradient(135deg,#b44dff,#7b2fff); border:none; color:#fff;
    font:700 0.85rem 'Rajdhani',sans-serif; letter-spacing:0.08em;
    padding:10px 32px; border-radius:6px; cursor:pointer; transition:0.2s;
}
.deal-btn:hover { filter:brightness(1.2); }
.deal-btn:disabled { opacity:0.4; cursor:default; filter:none; }
.deal-btn.deal-owned {
    background:rgba(0,255,204,0.15); border:1px solid rgba(0,255,204,0.3);
    color:var(--neon); cursor:default;
}
.deal-timer {
    font-size:0.6rem; color:rgba(200,208,224,0.3); margin-top:10px;
}

/* =====================================================
   ACHIEVEMENTS BUTTON (LOBBY)
   ===================================================== */
.lobby-action-btn {
    background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.2);
    color:var(--gold); font:600 0.7rem 'Rajdhani',sans-serif;
    letter-spacing:0.06em; padding:8px 12px; border-radius:6px;
    cursor:pointer; transition:0.2s; white-space:nowrap;
}
.lobby-action-btn:hover { background:rgba(255,215,0,0.15); border-color:rgba(255,215,0,0.4); }

/* =====================================================
   COSMETIC PREVIEW ON SHAPE CARDS
   ===================================================== */
.shape-card .shape-preview-cos {
    font-size:0.5rem; color:rgba(200,208,224,0.3); text-align:center;
    margin-top:2px; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Lobby — scrollable on mobile */
    #lobby {
        justify-content:flex-start; padding:16px 0 24px;
    }
    #login-screen { padding:12px 0; }

    /* Title & subtitle */
    .title { font-size:1.6rem; letter-spacing:5px; margin-bottom:2px; }
    .subtitle { font-size:0.6rem; letter-spacing:4px; margin-bottom:10px; }

    /* Login screen */
    .logo-emblem { width:120px; height:120px; }
    .login-logo { margin-bottom:0; }
    .login-box { padding:20px 16px; }
    .login-title { font-size:1.2rem; letter-spacing:4px; }

    /* Lobby box */
    .lobby-box { padding:14px 12px; }

    /* Lobby nav buttons — bigger tap targets on mobile */
    .lobby-nav-row { flex-wrap:wrap; gap:5px; }
    .lobby-nav-btn {
        font-size:0.55rem; letter-spacing:1px; padding:10px 6px;
        min-height:38px;
    }
    .lobby-play-btn { font-size:0.8rem; padding:14px; letter-spacing:3px; }

    /* Level display */
    .lobby-level-top { font-size:0.45rem; letter-spacing:1px; }
    .lobby-xp-text { font-size:0.35rem; }

    /* Leaderboard — compact */
    .lobby-leaderboard { max-height:140px; padding:8px 8px; }
    .lb-row { font-size:0.58rem; padding:3px 4px; gap:4px; }
    .lb-lvl, .lb-food, .lb-games, .lb-wins { font-size:0.45rem; }
    .lb-kills { font-size:0.5rem; }

    /* Tips */
    .lobby-tip { font-size:0.4rem; padding:5px 8px; }

    /* Modal panels — full width on mobile */
    .modal-panel-box { margin:10px auto; width:96vw; }
    .locker-box { margin:10px auto; width:98vw; }

    /* Friends panel */
    .friend-row { font-size:0.6rem; padding:5px 6px; }
    .friend-btn { font-size:0.5rem; padding:3px 6px; }

    /* Store */
    .cos-card { padding:10px 6px 8px; }
    .cos-name { font-size:0.45rem; }
    .cos-btn { font-size:0.4rem; padding:5px 6px; }

    /* Sync status */
    .sync-status { font-size:0.32rem; }

    /* Shape selector — 2×2 grid on small screens */
    .shape-selector { flex-wrap:wrap; gap:6px; justify-content:center; margin:8px 0 12px; }
    .shape-card { width:calc(50% - 6px); min-width:70px; max-width:110px; padding:8px 4px 6px; }
    .shape-icon { font-size:1.3rem; }
    .shape-icon-canvas { width:36px; height:36px; }
    .shape-name { font-size:0.45rem; }
    .shape-role { font-size:0.55rem; }
    .shape-tooltip { display:none !important; }

    /* Shape detail panel — visible on mobile, shows selected class info */
    .shape-detail {
        display:block; background:rgba(0,0,0,0.4);
        border:1px solid var(--border); padding:10px 14px;
        border-radius:8px; font-size:0.7rem; line-height:1.6;
        text-align:left; margin:6px 0 8px;
    }
    .shape-detail:empty { display:none; }
    .shape-detail .tt-title { font-family:'Orbitron'; font-size:0.6rem; color:var(--neon); letter-spacing:2px; margin-bottom:4px; }
    .shape-detail .tt-stat { color:rgba(255,255,255,0.55); }
    .shape-detail .tt-stat b { color:var(--neon); }

    /* Lobby browser — shorter on mobile */
    #lobby-browser { max-height:130px; }
    .section-label { margin:10px 0 6px; }
    .lobby-input { padding:9px 12px; font-size:16px; }
    .divider { margin:6px 0; }
    #myIdDisplay { font-size:0.65rem; margin-bottom:8px; }

    /* Buttons */
    .btn { padding:9px 8px; font-size:0.55rem; letter-spacing:1px; }
    .btn-row { flex-wrap:wrap; }

    /* Skill tree — scrollable + pinch-zoomable on mobile */
    #skilltree-panel {
        align-items:flex-start; justify-content:flex-start;
        padding:10px 0 20px;
    }
    .st-box {
        padding:12px 8px; padding-bottom:52px; max-height:none; width:98vw;
        overflow-x:auto; overflow-y:visible;
        -webkit-overflow-scrolling:touch;
    }
    .st-tree-svg {
        min-width:700px;
        touch-action:pan-x pan-y pinch-zoom;
    }
    .st-header { margin-bottom:10px; }
    .st-title { font-size:0.85rem; letter-spacing:3px; }
    .st-subtitle { font-size:0.6rem; }
    .st-points { font-size:0.65rem; margin:4px 0; }
    .st-branches { flex-direction:column; gap:10px; }
    .st-branch { padding:10px; }
    .st-branch-title { font-size:0.55rem; }
    .st-node { padding:6px 8px; gap:6px; }
    .st-node-icon { font-size:1rem; width:20px; }
    .st-node-name { font-size:0.75rem; }
    .st-node-desc { font-size:0.55rem; }
    .st-node-rank { font-size:0.5rem; }
    .st-close { margin-top:10px; padding:8px 28px; font-size:0.55rem; position:sticky; left:0; right:0; width:fit-content; margin-left:auto; margin-right:auto; }
    .st-tooltip { display:none !important; }

    /* Upgrade panel */
    .upgrade-box { padding:16px 12px; }
    .upgrade-header { flex-wrap:wrap; gap:8px; }
    .upgrade-title { font-size:0.85rem; letter-spacing:2px; }
    .upgrade-grid { grid-template-columns:1fr; }
    .upgrade-card { padding:10px; }
    .upgrade-card-name { font-size:0.8rem; }
    .upgrade-path-choice { flex-direction:column; gap:6px; }

    /* Nav arrows — reposition inside the panel box on mobile */
    .panel-nav-arrow {
        top:auto; bottom:12px; transform:none;
        padding:8px 10px; font-size:1.2rem;
        z-index:1000;
    }
    .panel-nav-arrow:hover { transform:scale(1.1); }
    .panel-nav-left { left:8px; right:auto; }
    .panel-nav-right { right:8px; left:auto; }
    .lo-box-wrapper, .st-box-wrapper { position:relative; }

    /* Loadout panel — scrollable on mobile */
    #loadout-panel {
        align-items:flex-start; justify-content:flex-start;
        padding:12px 0 20px;
    }
    .lo-box { padding:14px 10px; padding-bottom:52px; }
    .lo-title { font-size:1rem; letter-spacing:3px; margin-bottom:4px; }
    .lo-subtitle { font-size:0.75rem; margin-bottom:10px; }
    .lo-slots { flex-wrap:wrap; gap:5px; margin-bottom:12px; padding:8px; }
    .lo-slot { width:42px; height:42px; }
    .lo-slot-icon { font-size:1.3rem; }
    .lo-slot-name { font-size:0.45rem; }
    .lo-slot-key { font-size:0.45rem; }
    .lo-section-title { font-size:0.6rem; margin:8px 0 5px; }
    .lo-abilities { gap:4px; margin-bottom:8px; }
    .lo-ability { width:calc(33% - 4px); min-width:70px; padding:8px 4px; }
    .lo-ability-icon { font-size:1.3rem; margin-bottom:2px; }
    .lo-ability-name { font-size:0.5rem; }
    .lo-ability-tier { font-size:0.6rem; }
    .lo-ability-cd { font-size:0.6rem; }
    .lo-close { margin-top:10px; padding:8px 28px; font-size:0.55rem; }

    /* Spectate HUD — compact on mobile */
    #spectate-hud {
        padding:5px 10px; border-radius:6px;
        bottom:10px; font-size:0.45rem;
    }
    #spectate-hud.show { gap:6px; }
    .spec-btn { padding:5px 8px; font-size:0.4rem; letter-spacing:0.5px; }
    #spectate-name { font-size:0.4rem; }
    /* Waiting menu — compact on mobile */
    #waiting-menu { bottom:55px; }
    .waiting-box { padding:8px 14px; }
    .waiting-title { font-size:0.4rem; letter-spacing:1px; margin-bottom:3px; }
    .waiting-countdown { font-size:0.8rem; letter-spacing:2px; margin-bottom:5px; }
    .waiting-btns { gap:5px; }
    .spec-menu-btn { padding:5px 10px; font-size:0.4rem; letter-spacing:0.5px; }

    /* Death screen — wrap cards and buttons on mobile */
    .death-box { padding:18px 14px; max-width:96vw; overflow-y:auto; max-height:90vh; }
    .death-title { font-size:1.1rem; letter-spacing:3px; }
    .death-shape-selector { flex-wrap:wrap; gap:8px; justify-content:center; }
    .death-shape-selector .shape-card { width:56px; padding:8px 4px 6px; }
    .death-shape-selector .shape-icon { font-size:1rem; }
    .death-shape-selector .shape-icon-canvas { width:28px; height:28px; }
    .death-shape-selector .shape-name { font-size:0.4rem; }
    .death-shape-tooltip { display:none !important; }
    .death-btn-row { flex-wrap:wrap; gap:8px; justify-content:center; }
    .death-btn { padding:10px 16px; font-size:0.55rem; min-height:40px; }

    /* Summary / end-game screen */
    .summary-box { padding:20px 16px; }
    .summary-winner-name { font-size:1.2rem; letter-spacing:3px; }
    .summary-table-wrap { max-height:240px; }
    .summary-table { font-size:0.65rem; }
    .summary-table th { font-size:0.38rem; padding:4px 4px; }
    .summary-table td { padding:5px 4px; }
    .summary-btns { gap:8px; }
    .summary-btn { padding:10px 18px; font-size:0.5rem; }

    /* Settings — wrap rows and constrain width on mobile */
    .settings-box { padding:20px 14px; width:92vw; max-width:280px; }
    .settings-row { flex-wrap:wrap; gap:6px; margin-bottom:10px; }
    .settings-label { font-size:0.5rem; letter-spacing:1px; flex:1 1 auto; min-width:0; }
    .volume-control { flex-shrink:0; }
    .vol-track { width:80px; }

    /* In-game HUD — minimap (tap-to-expand: default 160px, expanded 280px) */
    #minimap-container {
        width:160px; height:160px; top:40px; left:8px;
        transition:width 0.25s ease, height 0.25s ease;
        cursor:pointer;
    }
    #minimap-container canvas { width:160px; height:160px; transition:width 0.25s ease, height 0.25s ease; }
    #minimap-container.minimap-expanded { width:280px; height:280px; }
    #minimap-container.minimap-expanded canvas { width:280px; height:280px; }

    /* Leaderboard */
    #leaderboard { width:110px; top:40px; right:8px; padding:6px 8px; }
    .lb-header { font-size:0.4rem; letter-spacing:2px; }
    .lb-entry { font-size:0.6rem; }
    .lb-entry b { font-size:0.5rem; }

    /* Chat — moved above joystick area, lifts when keyboard opens */
    #chat-container { width:180px; bottom:160px; left:8px; }
    #chat-container:focus-within {
        position:fixed; bottom:0; left:0; right:0; width:100%;
        z-index:500; background:rgba(8,10,16,0.95);
        border-radius:0; padding:6px 8px;
    }
    #chat-container:focus-within #chat-input {
        font-size:16px; /* prevents iOS zoom on focus */
        padding:10px 8px;
    }
    #chat-messages { font-size:0.6rem; }
    #chat-input { font-size:0.7rem; padding:5px 6px; }

    /* Virtual touch ability buttons — hidden on mobile, use hotbar instead */
    #touch-abilities { display:none !important; }

    /* Hotbar — enlarged for touch targets on mobile */
    .hotbar-slot { width:46px; height:46px; touch-action:manipulation; }
    .hotbar-icon { font-size:1.1rem; }
    .hotbar-key { display:none; }
    #hotbar { gap:5px; padding:5px; touch-action:none; }

    /* HUD stats — below minimap (160px + 40px top + margin) */
    #hud-stats { top:210px; left:8px; font-size:0.65rem; padding:4px 8px; min-width:90px; }
    #team-hud { top:290px; left:8px; width:160px; font-size:0.6rem; padding:4px 8px; }

    /* Kill feed — avoid overlapping leaderboard */
    #kill-feed { right:125px; top:80px; max-width:40vw; }
    .kill-msg { font-size:0.6rem; }

    /* Zone HUD — compact on mobile, avoid overlap with title */
    #zone-warning { font-size:0.6rem; letter-spacing:2px; top:30px; }
    #zone-timer-hud { top:42px; }
    #zone-timer-value { font-size:0.9rem; }
    #zone-timer-label { font-size:0.35rem; letter-spacing:2px; }
    #zone-phase-label { font-size:0.35rem; }
    #zone-bar-container { width:80px; }

    /* Game title HUD — smaller on mobile */
    #game-title-hud { font-size:0.7rem; letter-spacing:4px; top:6px; }

    /* XP bar */
    #xp-bar-container { bottom:110px; }
    #xp-info { bottom:114px; font-size:0.35rem; }

    /* Ability hotbar — positioned above bottom menu with breathing room */
    #ability-hud { bottom:50px; }
    #ability-text { font-size:0.4rem; margin-bottom:2px; }

    /* Bottom menu bar — compact for mobile */
    #bottom-menu-bar { bottom:4px; gap:3px; }
    #bottom-menu-bar { width:90vw; max-width:350px; }
    #upgrade-btn-hud, #skilltree-btn-hud, #loadout-btn-hud {
        padding:5px 4px !important; font-size:0.38rem !important; letter-spacing:0.5px !important;
        min-height:28px; touch-action:manipulation;
        flex:1 1 0 !important; text-align:center; overflow:hidden;
        white-space:nowrap; box-sizing:border-box;
    }

    /* Powerup HUD */
    #powerup-hud { bottom:72px; }
    .pu-hud-item { font-size:0.4rem; padding:3px 8px; }

    /* Ping HUD */
    #ping-hud { bottom:50px; right:8px; font-size:0.4rem; }
    #net-warnings { bottom:68px; right:8px; }

    /* Settings and music buttons — smaller on mobile */
    #settings-btn, #music-btn { width:36px; height:36px; font-size:1.1rem; }
    #settings-btn { bottom:10px; right:10px; }
    #music-btn { bottom:10px; right:52px; }
    #music-dropdown { bottom:52px; right:10px; min-width:140px; }
    #hud-bottom-links { display:none !important; }

    /* Zone death timer */
    #zone-death-timer { font-size:2rem; padding:12px 20px; letter-spacing:3px; }

    /* Death announcement */
    #death-announce { padding:8px 20px; }
    .da-name { font-size:0.85rem; letter-spacing:3px; }

    /* Host migration banner */
    #host-migration-banner { padding:18px 24px; }
    #host-migration-banner h2 { font-size:0.85rem; letter-spacing:3px; }

    /* Error toast */
    #error-toast-container { left:8px; bottom:8px; }
    .error-toast { font-size:10px; max-width:80vw; }

    /* Lobby browser rows */
    .lobby-name { font-size:0.7rem; }
    .lobby-players { font-size:0.45rem; }

    /* Privacy panel */
    .privacy-box { padding:20px 18px; max-height:85vh; }

    /* New features — mobile overrides */
    .lobby-chat-messages { height:90px; }
    .daily-reward-grid { grid-template-columns:repeat(4,1fr); }
    .achievements-box { margin:20px 10px; }
    .lobby-leaderboard { max-height:160px; }
}

/* STATS PANEL */
#stats-panel {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.85); z-index:600;
    display:none; align-items:center; justify-content:center;
}
#stats-panel.show { display:flex; }
.stats-box {
    background:linear-gradient(135deg, #1a1a2e, #16213e);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px; padding:30px; width:340px;
    text-align:center;
}
.stats-title {
    font-family:'Orbitron'; font-size:22px; font-weight:700; color:#fff;
    letter-spacing:2px; margin-bottom:20px;
}
.stats-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:12px; text-align:left;
}
.stat-item { padding:10px; background:rgba(255,255,255,0.05); border-radius:8px; }
.stat-label { font-size:11px; color:#888; text-transform:uppercase; letter-spacing:1px; }
.stat-value { font-size:20px; font-weight:700; color:#fff; margin-top:2px; }
.stats-close { margin-top:20px; }

/* ===== EXTRA-SMALL MOBILE (< 420px) ===== */
@media (max-width: 420px) {
    /* Minimap even smaller on very small screens */
    #minimap-container { width:120px; height:120px; }
    #minimap-container canvas { width:120px; height:120px; }
    #minimap-container.minimap-expanded { width:220px; height:220px; }
    #minimap-container.minimap-expanded canvas { width:220px; height:220px; }

    /* HUD stats below smaller minimap */
    #hud-stats { top:170px; font-size:0.6rem; }

    /* Death screen — tighter */
    .death-box { padding:14px 10px; }
    .death-shape-selector .shape-card { width:48px; }
    .death-btn { padding:8px 12px; font-size:0.5rem; }

    /* Hotbar slots — slightly smaller on tiny screens */
    .hotbar-slot { width:40px; height:40px; }

    /* Stats panel — mobile width */
    .stats-box { width:92vw; padding:20px 16px; }
    .stats-grid { gap:8px; }
    .stat-value { font-size:16px; }

    /* Leaderboard — very compact */
    #leaderboard { width:90px; padding:4px 6px; }
    .lb-entry { font-size:0.5rem; }
    .lb-entry b { font-size:0.4rem; }
}

/* =====================================================
   TUTORIAL OVERLAY
   ===================================================== */
#tutorial-overlay {
    position:fixed; inset:0; z-index:9999;
    display:none; align-items:center; justify-content:center;
}
#tutorial-overlay.active { display:flex; }

.tut-backdrop {
    position:absolute; inset:0;
    background:rgba(2,3,8,0.92);
    backdrop-filter:blur(8px);
}

.tut-card {
    position:relative; z-index:1;
    background:linear-gradient(165deg, rgba(8,10,18,0.98), rgba(4,6,14,0.99));
    border:1px solid rgba(0,255,204,0.15);
    border-radius:16px; padding:32px 36px;
    width:92vw; max-width:560px; max-height:90vh;
    text-align:center;
    overflow-y:auto;
    box-shadow:
        0 0 60px rgba(0,255,204,0.06),
        0 0 120px rgba(0,255,204,0.03),
        inset 0 1px 0 rgba(255,255,255,0.04);
    animation:tutCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tut-card.tut-floating {
    position:fixed !important;
    top:12px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    max-width:480px !important;
    min-width:320px;
    padding:18px 28px !important;
    z-index:99999 !important;
    pointer-events:auto !important;
    border-radius:12px !important;
    margin:0 !important;
    box-shadow:0 4px 30px rgba(0,0,0,0.7), 0 0 40px rgba(0,255,204,0.08);
}
@keyframes tutCardIn {
    from { opacity:0; transform:translateY(30px) scale(0.96); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

.tut-step {
    animation:tutStepIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    text-align:center;
}
@keyframes tutStepIn {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}

.tut-step-tag {
    font-family:'Orbitron',monospace; font-size:0.6rem; font-weight:400;
    letter-spacing:4px; color:rgba(0,255,204,0.35);
    margin-bottom:8px;
}

.tut-title {
    font-family:'Orbitron',monospace; font-size:1.5rem; font-weight:900;
    letter-spacing:6px; color:var(--neon);
    text-shadow:0 0 30px rgba(0,255,204,0.3);
    margin-bottom:8px;
}

.tut-text {
    font-family:'Rajdhani',sans-serif; font-size:0.9rem; font-weight:500;
    color:rgba(220,225,240,0.8); line-height:1.5;
    margin-bottom:18px;
}
.tut-dim { color:rgba(180,190,210,0.45); }

/* --- Step 1: Vessel grid --- */
.tut-vessels-grid {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
    margin-bottom:20px;
}
.tut-vessel {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:10px 6px; border-radius:10px;
    background:rgba(0,255,204,0.03);
    border:1px solid rgba(0,255,204,0.08);
    transition:border-color 0.2s;
}
.tut-vessel:hover { border-color:rgba(0,255,204,0.2); }
.tut-vessel-icon { display:block; }
.tut-vessel-name {
    font-family:'Orbitron',monospace; font-size:0.6rem; font-weight:700;
    letter-spacing:2px; color:var(--neon);
}
.tut-vessel-role {
    font-family:'Rajdhani',sans-serif; font-size:0.65rem; font-weight:500;
    color:rgba(200,210,230,0.45); letter-spacing:1px;
}

/* --- Step 2: Pick grid --- */
.tut-pick-grid {
    display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
    margin-bottom:6px;
}
.tut-pick-card {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:14px 10px 10px; border-radius:12px;
    background:rgba(0,255,204,0.02);
    border:2px solid rgba(0,255,204,0.08);
    transition:all 0.25s;
    cursor:pointer;
    position:relative;
}
.tut-pick-card:hover { border-color:rgba(0,255,204,0.3); background:rgba(0,255,204,0.05); }
.tut-pick-card.selected {
    border-color:var(--neon); background:rgba(0,255,204,0.08);
    box-shadow:0 0 20px rgba(0,255,204,0.15);
}
.tut-pick-name {
    font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:700;
    letter-spacing:2px; color:var(--neon);
}
.tut-pick-role {
    font-family:'Rajdhani',sans-serif; font-size:0.65rem; font-weight:600;
    color:rgba(200,210,230,0.5); letter-spacing:1px; margin-bottom:4px;
}
.tut-pick-tip {
    font-family:'Rajdhani',sans-serif; font-size:0.7rem; font-weight:400;
    color:rgba(200,210,230,0.6); line-height:1.4; text-align:center;
    max-height:0; overflow:hidden; opacity:0;
    transition:all 0.3s;
}
.tut-pick-card:hover .tut-pick-tip,
.tut-pick-card.selected .tut-pick-tip {
    max-height:80px; opacity:1; margin-bottom:6px;
}
.tut-pick-play { color:rgba(0,255,204,0.5); font-style:italic; margin-top:2px; }
.tut-btn-select {
    font-family:'Orbitron',monospace; font-size:0.6rem; font-weight:700;
    letter-spacing:2px; padding:6px 16px;
    background:rgba(0,255,204,0.08); color:var(--neon);
    border:1px solid rgba(0,255,204,0.2); border-radius:6px;
    cursor:pointer; transition:all 0.2s;
    opacity:0; pointer-events:none;
}
.tut-pick-card:hover .tut-btn-select,
.tut-pick-card.selected .tut-btn-select { opacity:1; pointer-events:auto; }
.tut-btn-select:hover { background:var(--neon); color:#000; }

/* --- Step 3: Skill tree --- */
.tut-points-display {
    font-family:'Orbitron',monospace; font-size:0.75rem; font-weight:700;
    letter-spacing:3px; color:var(--gold);
    margin-bottom:14px;
    text-shadow:0 0 15px rgba(255,215,0,0.3);
}
#tut-points-count { font-size:1rem; }

.tut-branches {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
    margin-bottom:18px;
}
.tut-branch {
    padding:12px 8px; border-radius:10px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
}
.tut-branch-header {
    font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:900;
    letter-spacing:3px; margin-bottom:2px;
}
.tut-branch-icon { font-size:0.9rem; margin-right:4px; }
.tut-branch-desc {
    font-family:'Rajdhani',sans-serif; font-size:0.6rem; font-weight:400;
    color:rgba(200,210,230,0.4); letter-spacing:1px; margin-bottom:8px;
}
.tut-branch-nodes { display:flex; flex-direction:column; gap:6px; }

.tut-node {
    display:flex; align-items:center; gap:8px;
    padding:8px; border-radius:8px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    cursor:pointer; transition:all 0.2s;
    text-align:left;
}
.tut-node:hover { border-color:rgba(255,255,255,0.15); background:rgba(255,255,255,0.04); }
.tut-node.invested { border-color:rgba(0,255,204,0.3); background:rgba(0,255,204,0.06); }
.tut-node-icon { font-size:1rem; flex-shrink:0; width:22px; text-align:center; }
.tut-node-info { flex:1; min-width:0; }
.tut-node-name {
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:700;
    letter-spacing:1px; color:rgba(220,225,240,0.85);
}
.tut-node-desc {
    font-family:'Rajdhani',sans-serif; font-size:0.6rem; font-weight:400;
    color:rgba(200,210,230,0.45); line-height:1.3;
}
.tut-node-rank {
    font-family:'Orbitron',monospace; font-size:0.55rem; font-weight:700;
    color:var(--neon); flex-shrink:0;
}
.tut-node.invested .tut-node-rank { color:var(--gold); }

/* --- Step 4: Hotbar preview --- */
.tut-hotbar-preview {
    display:flex; gap:6px; justify-content:center;
    margin-bottom:10px; flex-wrap:wrap;
}
.tut-hotbar-slot {
    width:54px; padding:8px 4px; border-radius:8px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(0,255,204,0.1);
    text-align:center;
}
.tut-hotbar-shape { border-color:rgba(0,255,204,0.25); }
.tut-key {
    font-family:'Orbitron',monospace; font-size:0.65rem; font-weight:900;
    color:var(--neon); letter-spacing:1px; margin-bottom:3px;
}
.tut-slot-label {
    font-family:'Rajdhani',sans-serif; font-size:0.5rem;
    color:rgba(200,210,230,0.35);
}

/* --- Step 5: Zone diagram --- */
.tut-zone-diagram {
    display:flex; justify-content:center; margin-bottom:12px;
}
.tut-zone-phases {
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Rajdhani',sans-serif; font-size:0.75rem; font-weight:600;
    color:rgba(200,210,230,0.5); letter-spacing:1px;
    margin-bottom:18px;
}
.tut-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,0,60,0.4); }

/* --- Buttons --- */
.tut-btn {
    font-family:'Orbitron',monospace; font-size:0.75rem; font-weight:700;
    letter-spacing:4px; padding:12px 36px;
    border:1px solid rgba(0,255,204,0.3); border-radius:8px;
    background:rgba(0,255,204,0.08); color:var(--neon);
    cursor:pointer; transition:all 0.25s;
    display:inline-block;
}
.tut-btn:hover:not(:disabled) {
    background:var(--neon); color:#000;
    box-shadow:0 0 30px rgba(0,255,204,0.3);
}
.tut-btn:disabled {
    opacity:0.3; cursor:not-allowed;
}
.tut-btn-go {
    background:rgba(0,255,204,0.12); border-color:var(--neon);
    font-size:0.85rem; padding:14px 44px;
    animation:tutPulseBtn 2s ease-in-out infinite;
}
@keyframes tutPulseBtn {
    0%, 100% { box-shadow:0 0 10px rgba(0,255,204,0.1); }
    50% { box-shadow:0 0 30px rgba(0,255,204,0.25); }
}

/* --- Mobile responsive --- */
@media (max-width:600px) {
    .tut-card { padding:22px 18px; max-width:95vw; }
    .tut-title { font-size:1.1rem; letter-spacing:4px; }
    .tut-vessels-grid { grid-template-columns:repeat(2, 1fr); }
    .tut-pick-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .tut-branches { grid-template-columns:1fr; gap:8px; }
    .tut-hotbar-preview { gap:4px; }
    .tut-hotbar-slot { width:42px; padding:6px 2px; }
    .tut-btn { font-size:0.65rem; padding:10px 24px; letter-spacing:3px; }
}

/* Rotate hint removed — game works in both orientations */

/* ═══════════════════════════════════════════════════════
   MOBILE LANDSCAPE — phones held horizontally
   Targets: max-height 500px + landscape orientation
   ═══════════════════════════════════════════════════════ */
@media (max-height:500px) and (orientation:landscape) {
    /* Minimap — small top-left, tappable to expand */
    #minimap-container {
        left:max(6px, env(safe-area-inset-left)); top:6px;
        width:80px !important; height:80px !important;
    }
    #minimap-container canvas { width:80px !important; height:80px !important; }
    #minimap-container.minimap-expanded { width:160px !important; height:160px !important; }
    #minimap-container.minimap-expanded canvas { width:160px !important; height:160px !important; }
    /* HUD stats — below minimap */
    #hud-stats {
        left:max(6px, env(safe-area-inset-left)); top:90px;
        font-size:0.38rem; line-height:1.3;
        padding:3px 6px; min-width:auto; border-radius:3px;
        background:rgba(0,0,0,0.4); border:none;
        transition:top 0.2s ease;
    }
    #hud-hp-bar { height:3px; margin:1px 0 2px; width:40px; border-radius:2px; }
    /* Shift stats down when minimap expanded */
    #minimap-container.minimap-expanded ~ #hud-stats { top:170px; }
    /* Leaderboard — top right, wider, tap to expand */
    #leaderboard {
        right:max(8px, env(safe-area-inset-right)); top:8px;
        width:190px; font-size:0.35rem; cursor:pointer;
    }
    .lb-entry { padding:1px 4px; }
    /* Show only top 3 by default, top 6 when expanded */
    #leaderboard #lb-content > div:nth-child(n+4) { display:none; }
    #leaderboard.lb-expanded #lb-content > div:nth-child(n+4) { display:block; }
    #leaderboard.lb-expanded #lb-content > div:nth-child(n+7) { display:none; }
    #kill-feed { right:max(8px, env(safe-area-inset-right)); top:auto; bottom:50px; max-width:140px; font-size:0.38rem; }
    #game-title-hud { display:none; }

    /* Zone timer — smaller, below the menu bar */
    #zone-timer-hud { top:30px; }
    #zone-timer-value { font-size:0.35rem; letter-spacing:1px; }
    #zone-timer-label { font-size:0.18rem; letter-spacing:1px; }

    #chat-container { left:max(4px, env(safe-area-inset-left)); bottom:4px; width:180px; }
    #chat-container .chat-input { font-size:0.5rem; padding:3px 6px; }
    #xp-bar { height:3px; }
    #xp-info { font-size:0.4rem; }

    /* Spectate HUD — compact, auto-collapses */
    #spectate-hud {
        padding:3px 8px; border-radius:5px; bottom:6px;
        font-size:0.35rem; letter-spacing:1px;
    }
    #spectate-hud.show { gap:4px; }
    .spec-btn { padding:3px 6px; font-size:0.3rem; letter-spacing:0.5px; border-radius:4px; }
    #spectate-name { font-size:0.32rem; }
    /* Collapsed state — just a small indicator */
    #spectate-hud.spec-collapsed {
        padding:3px 10px; cursor:pointer;
    }
    #spectate-hud.spec-collapsed .spec-btn { display:none; }
    #spectate-hud.spec-collapsed #spectate-name {
        font-size:0.3rem; opacity:0.7;
    }

    /* Tree/Loadout/Session — top center */
    #bottom-menu-bar {
        position:fixed !important;
        top:4px !important; bottom:auto !important;
        left:50% !important; transform:translateX(-50%) !important;
        right:auto !important;
        display:flex !important; gap:4px;
        padding:3px 8px !important;
        background:rgba(0,0,0,0.6) !important;
        border:1px solid rgba(255,255,255,0.08);
        border-radius:6px;
    }
    #bottom-menu-bar > div {
        font-size:0.35rem !important; padding:4px 8px !important;
    }
    #bottom-menu-bar img { width:12px; height:12px; }

    /* Hotbar/Abilities — bottom center, horizontal. Raised off the edge and
       slightly larger slots so they're comfortable to tap in landscape. */
    #ability-hud {
        bottom:22px !important; left:50% !important;
        transform:translateX(-50%) !important;
    }
    #hotbar {
        flex-direction:row !important;
        position:relative !important;
        right:auto !important; bottom:auto !important;
        transform:none !important; left:auto !important;
        gap:5px;
    }
    .hotbar-slot { width:46px; height:46px; }
    .hotbar-icon { font-size:0.9rem; }
    .hotbar-key { font-size:0.34rem; }

    /* === LOBBY — 3-column landscape layout === */
    #lobby {
        justify-content:center; align-items:center;
        padding:0; overflow:hidden;
    }
    .login-logo { display:none; }
    #lobby > .title { display:none; }
    #lobby > .subtitle { display:none; }

    .lobby-box {
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-template-rows:1fr;
        align-items:stretch;
        width:100vw; max-width:100vw; height:100vh; max-height:100vh;
        padding:32px max(12px, env(safe-area-inset-right)) 32px max(12px, env(safe-area-inset-left));
        gap:0; overflow:hidden;
        border:none; border-radius:0;
        background:transparent;
    }

    /* Left Rail */
    .lobby-left-rail {
        display:flex; flex-direction:column; align-items:stretch;
        justify-content:center; padding:0 8px; gap:6px;
        border-right:1px solid rgba(100,120,160,0.06);
        overflow:hidden;
    }
    #lobby-level { font-size:0.45rem; margin:0 0 2px; padding:5px 8px; text-align:center; }
    .lobby-callsign-wrap { display:flex; width:100%; margin-bottom:2px; }
    .lobby-callsign-wrap .lobby-input { width:100%; height:36px; padding:7px 10px; font-size:0.5rem; }
    .lobby-left-rail .lobby-nav-row { flex-direction:column; gap:5px; }
    .lobby-left-rail .lobby-nav-btn {
        font-size:0.5rem; padding:10px 8px; letter-spacing:1.5px; min-height:44px; width:100%;
    }
    .lobby-left-rail #lobby-tip {
        margin-top:auto; font-size:0.4rem; padding:4px 6px;
        white-space:normal; line-height:1.3; opacity:1; color:rgba(200,220,240,0.7);
    }
    .lobby-left-rail #sync-status { font-size:0.28rem; padding:2px 0; }
    .lobby-left-rail #sync-status .sync-text { font-size:0.26rem; }

    /* Center Stage — buttons at top, leaderboard below */
    .lobby-center-stage {
        display:flex; flex-direction:column; align-items:center;
        justify-content:flex-start; gap:8px; padding:8px 0 0;
    }
    .lobby-play-btn {
        width:80% !important; height:60px !important; max-height:60px !important;
        padding:0 20px !important; font-size:0.7rem !important; font-weight:800 !important;
        letter-spacing:3px !important; margin:0 !important; border-radius:8px !important;
        display:flex !important; align-items:center; justify-content:center;
    }
    .lobby-store-btn {
        width:80% !important; height:48px !important; max-height:48px !important;
        padding:0 14px !important; font-size:0.5rem !important; font-weight:700 !important;
        letter-spacing:2.5px !important; margin:0 !important; border-radius:8px !important;
        display:flex !important; align-items:center; justify-content:center;
    }
    #party-widget { width:80%; padding:4px 8px; margin-top:8px; max-height:50px; overflow-y:auto; }
    .party-members { font-size:0.38rem; }

    /* Right Rail */
    .lobby-right-rail {
        display:flex; flex-direction:column; align-items:stretch;
        justify-content:center; padding:0 8px; gap:6px;
        border-left:1px solid rgba(100,120,160,0.06);
    }
    .lobby-right-rail .lobby-nav-row {
        flex-direction:column; gap:6px; margin:0;
    }
    .lobby-right-rail .lobby-nav-btn {
        font-size:0.5rem; padding:10px 8px; letter-spacing:1.5px; min-height:44px; width:100%;
    }

    /* Leaderboard — compact, inside center stage below store, top 6 only */
    #global-leaderboard {
        width:80%; overflow:hidden;
        margin-top:4px; font-size:0.35rem;
    }
    #global-leaderboard .lb-title { font-size:0.35rem; margin-bottom:2px; }
    #global-leaderboard .lb-list { font-size:0.32rem; }
    #global-leaderboard .lb-entry, #global-leaderboard .lb-row { padding:1px 4px; }
    #global-leaderboard .lb-list .lb-row:nth-child(n+7) { display:none; }

    /* Music + Settings — side by side, bottom right */
    #settings-btn {
        position:fixed; bottom:8px; right:max(8px, env(safe-area-inset-right));
        top:auto; width:36px; height:36px; font-size:1.1rem;
    }
    #music-btn {
        position:fixed; bottom:8px; right:max(48px, calc(env(safe-area-inset-right) + 40px));
        top:auto; width:36px; height:36px; font-size:1.1rem;
    }

    /* Fixed overlays */
    .login-links-row {
        position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
        top:auto; right:auto;
        z-index:100; gap:6px;
    }
    .login-links-row .discord-btn { font-size:0.3rem; padding:3px 6px; }
    .legal-footer {
        position:fixed; bottom:2px; left:50%; transform:translateX(-50%);
        z-index:100; font-size:0.28rem;
    }

    /* Shape selector — compact in landscape */
    .shape-selector { gap:3px; }
    .shape-card { width:50px; min-height:46px; padding:3px; }
    .shape-icon-canvas { width:28px; height:28px; }
    .shape-name { font-size:0.3rem; }
    .shape-role { font-size:0.26rem; }

    /* Modals — fit in landscape viewport */
    .modal-panel-box, .locker-box { max-height:calc(100vh - 10px); overflow-y:auto; padding:10px 14px; }
    .modal-panel-title { font-size:0.8rem; }
    .section-label { font-size:0.5rem; margin:4px 0; }
    .lo-box { max-height:calc(100vh - 10px); overflow-y:auto; padding:10px 14px; }
    .lo-title { font-size:0.8rem; }
    .lo-subtitle { font-size:0.5rem; margin-bottom:6px; }
    .st-box { max-height:calc(100vh - 10px); overflow-y:auto; padding:10px 14px; }
    .st-title { font-size:0.7rem; }

    /* Death screen — compact horizontal layout */
    .death-box { padding:10px 14px; max-height:calc(100vh - 10px); overflow-y:auto; }
    .death-title { font-size:0.9rem; margin-bottom:4px; }
    .death-subtitle { font-size:0.45rem; }
    .death-shape-selector { gap:3px; }
    .death-shape-card { width:48px; padding:3px; }
    .death-btn-row { gap:3px; flex-wrap:wrap; }
    .death-btn-row button { font-size:0.4rem; padding:5px 8px; }

    /* Settings — compact */
    .settings-box { max-height:calc(100vh - 10px); overflow-y:auto; padding:10px; }
    .settings-row { margin-bottom:4px; }
    .settings-label { font-size:0.45rem; }

    /* Summary screen */
    #summary-screen .summary-box { max-height:calc(100vh - 10px); overflow-y:auto; padding:10px 14px; }

    /* Store */
    .store-container { max-height:calc(100vh - 10px); }
    .cos-grid { grid-template-columns:repeat(3, 1fr); gap:6px; }
    .cos-card { padding:6px; }
    .cos-name { font-size:0.4rem; }
    .cos-btn { font-size:0.35rem; padding:4px 6px; }

    /* Locker */
    .locker-row { gap:6px; }
    .locker-card { width:60px; min-height:60px; }
    .locker-card-name { font-size:0.32rem; }

    /* Upgrade panel — compact in landscape */
    .upgrade-box { max-height:calc(100vh - 10px); overflow-y:auto; padding:10px 14px; }
    .upgrade-header { margin-bottom:8px; }
    .upgrade-title { font-size:0.7rem; letter-spacing:2px; }
    .upgrade-points { font-size:0.55rem; }
    .upgrade-grid { grid-template-columns:1fr; gap:6px; }
    .upgrade-card { padding:8px; gap:5px; }
    .upgrade-card-name { font-size:0.7rem; }
    .upgrade-card-current { font-size:0.6rem; }
    .upgrade-btn { padding:5px 8px; font-size:0.65rem; }
    .upgrade-path { padding:5px 8px; font-size:0.62rem; }
    .upgrade-path-choice { flex-direction:column; gap:4px; }
    .upgrade-tier-badge { font-size:0.45rem; padding:2px 5px; }
    .upgrade-maxed { font-size:0.55rem; padding:4px 0; }

    /* Touch — ensure all interactive elements have no tap delay */
    button, .hotbar-slot, .lo-slot, .lo-ability, .shape-card, .cos-card, .locker-card { touch-action:manipulation; }
}

/* ===== ABILITY DETAIL OVERLAY ===== */
.abd-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.82);
    display:none; align-items:center; justify-content:center;
    z-index:9998; backdrop-filter:blur(6px);
}
.abd-overlay.show { display:flex; }
.abd-panel {
    width:400px; max-height:90vh; background:#0a0a18;
    border:1px solid rgba(255,215,0,0.18); border-radius:14px;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 0 40px rgba(0,0,0,0.6);
    font-family:'Orbitron',monospace;
}
.abd-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 10px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.abd-header-left { display:flex; align-items:center; gap:10px; }
.abd-icon-wrap {
    width:48px; height:48px; display:flex; align-items:center; justify-content:center;
    border-radius:10px; background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 0 12px var(--abd-branch, rgba(255,215,0,0.15));
    font-size:1.5rem;
}
.abd-icon-wrap img.ab-ico { width:32px; height:32px; }
.abd-header-text { display:flex; flex-direction:column; gap:2px; }
.abd-name { font-size:0.85rem; font-weight:700; color:#fff; letter-spacing:1px; }
.abd-branch-label { font-size:0.55rem; letter-spacing:2px; opacity:0.5; }
.abd-header-right { display:flex; align-items:center; gap:8px; }
.abd-rank-badge {
    font-size:0.7rem; font-weight:700; padding:3px 10px;
    border-radius:5px; letter-spacing:1px;
    background:rgba(255,215,0,0.1); color:var(--gold);
    border:1px solid rgba(255,215,0,0.2);
}
.abd-close {
    background:transparent; border:none; color:rgba(255,255,255,0.3);
    font-size:1.4rem; cursor:pointer; padding:0 4px; line-height:1;
    transition:color 0.2s;
}
.abd-close:hover { color:#fff; }
.abd-body {
    flex:1; overflow-y:auto; padding:12px 16px 8px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.abd-body::-webkit-scrollbar { width:4px; }
.abd-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
.abd-section-label {
    font-size:0.5rem; letter-spacing:3px; opacity:0.3;
    margin-bottom:8px; margin-top:14px;
}
.abd-desc-section {
    padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
.abd-desc-ability-name { font-size:0.75rem; font-weight:600; color:var(--neon); margin-bottom:3px; }
.abd-desc-text { font-size:0.65rem; opacity:0.5; line-height:1.5; font-weight:700; }
.abd-desc-cd { font-size:0.6rem; opacity:0.35; margin-top:4px; }
.abd-stats-section { padding:4px 0; }
.abd-bars-container { padding:4px 0; }
.abd-bar-row {
    display:flex; align-items:center; gap:8px;
    margin-bottom:6px;
}
.abd-bar-label {
    font-family:'Orbitron',monospace;
    font-size:0.55rem; letter-spacing:1.5px;
    color:rgba(255,255,255,0.5);
    min-width:90px; width:90px; text-align:right;
    text-transform:uppercase;
}
.abd-bar-track {
    flex:1; height:14px;
    background:rgba(255,255,255,0.06);
    border-radius:3px;
    position:relative; overflow:hidden;
}
/* Tick marks showing individual rank segments */
.abd-bar-ticks {
    position:absolute; top:0; left:0; right:0; bottom:0;
    display:flex; z-index:2; pointer-events:none;
}
.abd-bar-tick {
    flex:1; border-right:1px solid rgba(0,0,0,0.3);
}
.abd-bar-tick:last-child { border-right:none; }
.abd-bar-tick.t2-tick { border-right:1px solid rgba(255,215,0,0.5); }
.abd-bar-tick.t3-tick { border-right:1px solid rgba(255,215,0,0.5); }
.abd-bar-base {
    position:absolute; top:0; left:0; height:100%;
    border-radius:3px;
    opacity:0.2;
    transition:width 0.4s ease;
}
.abd-bar-fill {
    position:absolute; top:0; left:0; height:100%;
    border-radius:3px;
    transition:width 0.4s ease;
}
/* Preview of what the NEXT rank will add — flashes so the player can
   distinguish already-earned fill (solid) from upcoming gains (pulsing). */
.abd-bar-preview {
    position:absolute; top:0; height:100%;
    border-radius:3px;
    opacity:0.65;
    z-index:1;
    pointer-events:none;
    animation:abdBarPreviewFlash 1.1s ease-in-out infinite;
}
@keyframes abdBarPreviewFlash {
    0%, 100% { opacity:0.25; }
    50%      { opacity:0.85; }
}
.abd-bar-value {
    font-family:'Courier New',monospace;
    font-size:0.7rem; color:rgba(255,255,255,0.7);
    min-width:70px; width:70px; text-align:right;
}
/* Branch colors */
.abd-bar-fill.bar-attack { background:#ff4444; }
.abd-bar-base.bar-attack { background:#ff4444; }
.abd-bar-preview.bar-attack { background:#ff8888; box-shadow:0 0 6px rgba(255,68,68,0.6); }
.abd-bar-fill.bar-survival { background:#44dd88; }
.abd-bar-base.bar-survival { background:#44dd88; }
.abd-bar-preview.bar-survival { background:#88eeaa; box-shadow:0 0 6px rgba(68,221,136,0.6); }
.abd-bar-fill.bar-mobility { background:#4488ff; }
.abd-bar-base.bar-mobility { background:#4488ff; }
.abd-bar-preview.bar-mobility { background:#88aaff; box-shadow:0 0 6px rgba(68,136,255,0.6); }
/* Cooldown special (cyan) */
.abd-bar-fill.bar-cooldown { background:#00cccc; }
.abd-bar-base.bar-cooldown { background:#00cccc; }
.abd-bar-preview.bar-cooldown { background:#66eeee; box-shadow:0 0 6px rgba(0,204,204,0.6); }
/* Progress timeline */
.abd-checklist { padding:0; }
.abd-timeline { margin:4px 0 8px; }
.abd-timeline-track {
    height:6px; background:rgba(255,255,255,0.06); border-radius:3px;
    overflow:hidden; margin-bottom:6px;
}
.abd-timeline-fill {
    height:100%; border-radius:3px; transition:width 0.4s ease;
    background:#4488ff;
}
.abd-timeline-fill.bar-attack { background:#ff4444; }
.abd-timeline-fill.bar-survival { background:#44dd88; }
.abd-timeline-fill.bar-mobility { background:#4488ff; }
.abd-timeline-dots {
    display:flex; justify-content:space-between; margin:0 -2px;
}
.abd-timeline-dot {
    width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Orbitron',monospace; font-size:0.35rem; font-weight:700;
    border:1.5px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03);
    color:rgba(255,255,255,0.25); transition:all 0.3s;
}
.abd-timeline-dot.filled {
    border-color:#44dd88; background:rgba(68,221,136,0.15); color:#44dd88;
}
.abd-timeline-dot.next {
    border-color:#ffd700; background:rgba(255,215,0,0.1); color:#ffd700;
    box-shadow:0 0 8px rgba(255,215,0,0.2);
}
.abd-timeline-dot.milestone {
    width:26px; height:26px; font-size:0.4rem;
    border-width:2px; border-color:rgba(255,215,0,0.25);
}
.abd-timeline-dot.milestone.filled {
    border-color:#ffd700; background:rgba(255,215,0,0.15); color:#ffd700;
}
.abd-timeline-labels {
    display:flex; flex-direction:column; gap:4px; margin-top:8px;
}
.abd-timeline-label {
    font-family:'Rajdhani',sans-serif; font-size:0.7rem;
    color:rgba(255,255,255,0.3); display:flex; align-items:center; gap:6px;
}
.abd-timeline-label.reached { color:rgba(255,255,255,0.7); }
.abd-tl-tag {
    font-family:'Orbitron',monospace; font-size:0.45rem; font-weight:700;
    letter-spacing:1px; padding:2px 6px; border-radius:3px;
    background:rgba(255,215,0,0.08); color:rgba(255,215,0,0.5);
    min-width:24px; text-align:center;
}
.abd-timeline-label.reached .abd-tl-tag {
    background:rgba(255,215,0,0.15); color:#ffd700;
}
.abd-path-compare-section { padding:4px 0; }
.abd-compare-grid {
    display:grid;
    grid-template-columns: 1fr auto auto;
    gap:2px 10px;
    align-items:center;
}
.abd-compare-header {
    font-family:'Orbitron',monospace;
    font-size:0.5rem;
    letter-spacing:1.5px;
    font-weight:700;
    text-transform:uppercase;
    padding:2px 6px 6px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.abd-compare-header.col-label { opacity:0.3; text-align:left; }
.abd-compare-header.col-a { color:#ff4444; text-align:right; }
.abd-compare-header.col-b { color:#4488ff; text-align:right; }
.abd-compare-stat {
    font-family:'Orbitron',monospace;
    color:rgba(255,255,255,0.5);
    font-size:0.55rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    padding:4px 0;
}
.abd-compare-val {
    font-family:'Courier New',monospace;
    font-size:0.7rem;
    color:rgba(255,255,255,0.55);
    text-align:right;
    padding:3px 8px;
    border-radius:3px;
    min-width:60px;
}
.abd-compare-val.winner-a {
    background:rgba(255,68,68,0.12);
    color:#ff8888;
    font-weight:700;
    box-shadow:inset 0 0 0 1px rgba(255,68,68,0.25);
}
.abd-compare-val.winner-b {
    background:rgba(68,136,255,0.12);
    color:#88aaff;
    font-weight:700;
    box-shadow:inset 0 0 0 1px rgba(68,136,255,0.25);
}
.abd-paths-section { padding:4px 0; }
.abd-paths-row { display:flex; gap:10px; }
.abd-path-card {
    flex:1; padding:12px; border-radius:8px; cursor:pointer;
    border:2px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02);
    transition:border-color 0.2s, background 0.2s;
}
.abd-path-card:hover { background:rgba(255,255,255,0.04); }
.abd-path-card.path-a { border-color:rgba(255,68,68,0.25); }
.abd-path-card.path-a:hover { border-color:rgba(255,68,68,0.5); }
.abd-path-card.path-a.active { border-color:#ff4444; background:rgba(255,68,68,0.08); }
.abd-path-card.path-b { border-color:rgba(68,136,255,0.25); }
.abd-path-card.path-b:hover { border-color:rgba(68,136,255,0.5); }
.abd-path-card.path-b.active { border-color:#4488ff; background:rgba(68,136,255,0.08); }
.abd-path-name {
    font-size:0.7rem; font-weight:700; margin-bottom:4px; letter-spacing:1px;
}
.abd-path-card.path-a .abd-path-name { color:#ff4444; }
.abd-path-card.path-b .abd-path-name { color:#4488ff; }
.abd-path-desc { font-family:'Rajdhani',sans-serif; font-size:0.72rem; opacity:0.6; line-height:1.4; }
.abd-path-badge {
    display:inline-block; font-size:0.45rem; letter-spacing:2px; padding:2px 6px;
    border-radius:3px; margin-top:6px; font-weight:700;
}
.abd-path-card.path-a .abd-path-badge { background:rgba(255,68,68,0.15); color:#ff4444; }
.abd-path-card.path-b .abd-path-badge { background:rgba(68,136,255,0.15); color:#4488ff; }
.abd-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px 12px; border-top:1px solid rgba(255,255,255,0.06);
    background:rgba(0,0,0,0.3);
}
.abd-points-avail {
    font-size:0.6rem; opacity:0.5; letter-spacing:1px;
}
.abd-upgrade-btn {
    padding:8px 20px; border:1px solid var(--gold);
    background:rgba(255,215,0,0.08); color:var(--gold);
    font-family:'Orbitron',monospace; font-size:0.6rem;
    letter-spacing:2px; border-radius:6px; cursor:pointer;
    transition:background 0.2s, transform 0.1s;
}
.abd-upgrade-btn:hover:not(:disabled) { background:rgba(255,215,0,0.18); transform:scale(1.02); }
.abd-upgrade-btn:disabled {
    opacity:0.3; cursor:not-allowed; border-color:rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.3); background:transparent;
}
.abd-close-bottom {
    width:100%; padding:10px; border:none; border-top:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.4);
    font-family:'Orbitron',monospace; font-size:0.6rem; letter-spacing:3px;
    cursor:pointer; transition:0.2s; flex-shrink:0;
    border-radius:0 0 12px 12px;
}
.abd-close-bottom:hover { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); }
.abd-upgrade-btn.abd-btn-choose {
    border-color:#ff8800; color:#ff8800; background:rgba(255,136,0,0.08);
}
.abd-upgrade-btn.abd-btn-choose:hover { background:rgba(255,136,0,0.18); }

/* Ability detail responsive */
@media (max-width:700px) {
    .abd-panel { width:100%; max-width:100%; border-radius:0; max-height:100vh; }
    .abd-header { padding:10px 12px 8px; }
    .abd-icon-wrap { width:38px; height:38px; font-size:1.2rem; }
    .abd-icon-wrap img.ab-ico { width:26px; height:26px; }
    .abd-name { font-size:0.75rem; }
    .abd-body { padding:8px 12px 6px; }
    .abd-footer { padding:8px 12px 10px; }
    .abd-paths-row { flex-direction:column; gap:8px; }
}
@media (max-height:500px) and (orientation:landscape) {
    .abd-panel { max-height:100vh; border-radius:8px; }
    .abd-header { padding:6px 12px 4px; }
    .abd-icon-wrap { width:32px; height:32px; font-size:1rem; }
    .abd-icon-wrap img.ab-ico { width:22px; height:22px; }
    .abd-name { font-size:0.7rem; }
    .abd-rank-badge { font-size:0.55rem; padding:2px 6px; }
    .abd-body { padding:4px 10px; }
    .abd-timeline-dot { width:18px; height:18px; font-size:0.3rem; }
    .abd-timeline-dot.milestone { width:22px; height:22px; }
    .abd-footer { padding:6px 10px; }
    .abd-upgrade-btn { padding:5px 14px; font-size:0.5rem; }
}

/* =====================================================================
   MOBILE READABILITY & FIT REFINEMENTS  (v56 — mobile optimization pass)
   Appended last so these win the cascade over the earlier mobile rules.
   Fixes: sub-9px text, panels overflowing in landscape, lobby vertical
   fit, skill-tree horizontal overflow, gear-button overlap, touch targets.
   ===================================================================== */

/* Gear + music buttons: keep them above the HUD and lobby (z<=200) but
   BELOW every full-screen panel (z>=250) so they stop covering panel content. */
#settings-btn, #music-btn { z-index:230; }
#upgrade-panel { z-index:305; }   /* was 200 — lift above the gear buttons */

@media (max-width:768px) {
    /* ---- READABILITY: lift tiny text to a legible floor (~10px+) ---- */
    .sync-status, .sync-status .sync-text { font-size:0.5rem; }
    .lobby-tip { font-size:0.55rem; }
    .lb-lvl, .lb-food, .lb-games, .lb-wins { font-size:0.52rem; }
    .login-field label { font-size:0.7rem; }
    .login-sub { font-size:0.65rem; opacity:0.5; }
    .copy-hint { font-size:0.6rem; }
    .wallet-label { font-size:0.6rem; letter-spacing:1px; }
    .store-tab { font-size:0.62rem; }
    .store-vessel-label, .store-vessel-btn { font-size:0.55rem; }
    .settings-label { font-size:0.6rem; }
    .locker-eq-label { font-size:0.55rem; }
    .lrefresh { font-size:0.55rem; padding:6px 12px; }
    .challenge-desc { font-size:0.55rem; }
    .achievement-desc { font-size:0.62rem; }
    .death-shape-selector .shape-name { font-size:0.55rem; }
    .death-shape-selector .shape-role { font-size:0.55rem; opacity:0.7; }
    .death-btn { font-size:0.62rem; }
    #zone-timer-label, #zone-phase-label { font-size:0.5rem; }
    .st-vessel-name { font-size:0.55rem; }

    /* ---- TOUCH TARGETS: >=40px for real controls ---- */
    .lobby-nav-btn { min-height:44px; }
    .friend-btn { min-height:40px; padding:6px 10px; font-size:0.58rem; }
    .pkg-buy-btn { padding:10px 8px; font-size:0.55rem; }
    .store-vessel-btn { padding:8px 12px; }

    /* ---- LOBBY portrait: reclaim vertical space so the leaderboard +
       right-rail nav stop getting pushed off the bottom of the screen ---- */
    .logo-emblem { width:96px; height:96px; }
    .title { font-size:1.5rem; }
    .subtitle { margin-bottom:8px; }
    .lobby-box { padding:12px 12px; }
    .lobby-leaderboard { max-height:120px; }

    /* ---- SETTINGS box: use the width that's actually available ---- */
    .settings-box { max-width:340px; }

    /* ---- SKILL TREE: fit the whole tree to the screen width. The SVG has a
       viewBox, so dropping the 700px min-width scales it instead of clipping. ---- */
    .st-tree-svg { min-width:0; width:100%; }

    /* ---- IN-GAME bottom menu bar: anchor it with a right gap so the fixed
       gear buttons no longer cover its rightmost button ---- */
    #bottom-menu-bar { left:8px; right:108px; transform:none; width:auto; max-width:none; }

    /* loadout ability tooltip: never wider than the screen */
    #lo-tooltip, .lo-tooltip { max-width:calc(100vw - 20px); }

    /* ---- LOADOUT: compact the ability cards so the panel isn't so tall/scroll-heavy ---- */
    .lo-ability { padding:6px 3px; }
    .lo-ability-icon { font-size:1.05rem; margin-bottom:1px; }
    .lo-ability-icon img.ab-ico { width:26px; height:26px; }
    .lo-ability-desc { font-size:0.48rem; line-height:1.25; }
    .lo-abilities { gap:4px; margin-bottom:6px; }
    .lo-section-title { margin:6px 0 4px; }

    /* ---- SPECTATE HUD (portrait): controls were ~6px; bump text for
       readability and add vertical padding for a ~30px tap target. Horizontal
       padding stays tight so the 3 buttons + name still fit the narrow width. ---- */
    #spectate-hud { font-size:0.5rem; }
    #spectate-hud .spec-btn { font-size:0.5rem; padding:8px 9px; min-height:30px; }
    #spectate-name { font-size:0.5rem; }
}

@media (max-width:420px) {
    .logo-emblem { width:80px; height:80px; }
    .hotbar-slot { width:44px; height:44px; }   /* keep above 40px on tiny screens */
    .stats-box { width:92vw; }
}

@media (max-height:500px) and (orientation:landscape) {
    /* ---- LOGIN: no landscape layout existed — give it a scrollable one ---- */
    #login-screen { justify-content:flex-start; padding:8px 0; overflow-y:auto; }
    #login-screen .login-logo { display:none; }
    #login-screen > .title, #login-screen > .subtitle { display:none; }
    #login-screen .login-links-row, #login-screen .legal-footer { display:none; }
    .login-box { margin:6px auto; padding:12px 22px; }
    /* compact the form so it fits the short landscape height without scrolling
       (keep .login-input font-size at 1rem/16px to avoid iOS zoom-on-focus) */
    .login-title { font-size:1.3rem; }
    .login-sub { margin-bottom:8px; }
    .login-field { margin-bottom:7px; }
    .login-input { padding:8px 14px; }
    .login-pass-warning { margin-top:3px; font-size:0.6rem; }
    .login-age-check { margin:6px 0 4px; }
    .age-check-text { line-height:1.35; }
    .login-btn { padding:9px; margin-top:5px; }

    /* ---- MODALS: constrain height + scroll so nothing is cut off and the
       CLOSE button is always reachable on the short landscape viewport ---- */
    #stats-panel { align-items:flex-start; }
    .stats-box { width:90vw; max-height:calc(100vh - 10px); overflow-y:auto; padding:12px 16px; margin-top:5px; }
    .achievements-box { margin:5px auto; max-height:calc(100vh - 10px); overflow-y:auto; }
    .store-box { max-height:calc(100vh - 16px); overflow-y:auto; }
    .locker-content { overflow-y:auto; }
    #lobby-browser { max-height:90px; }
    .modal-panel-box .btn-row { flex-wrap:nowrap; }
    #joinIdBrowser { min-width:60px; }

    /* readability + layout bumps for landscape */
    #zone-timer-value { font-size:0.7rem; }
    #zone-timer-label { font-size:0.35rem; }
    .locker-card-name { font-size:0.45rem; }
    .lobby-play-btn { flex-direction:column; }
    .legal-footer { font-size:0.4rem; }

    /* ---- Nav arrows (Skill Tree <-> Loadout <-> Locker/Vessel): the base puts
       them at left:-40px/right:-40px, which is half off-screen on a wide
       landscape phone because the <=768px reposition doesn't apply here.
       Pull them fully on-screen at the vertical center. ---- */
    .panel-nav-arrow { top:50%; bottom:auto; transform:translateY(-50%); padding:8px 5px; font-size:1.1rem; z-index:1000; }
    .panel-nav-left { left:2px; right:auto; }
    .panel-nav-right { right:2px; left:auto; }
    .lo-box-wrapper, .st-box-wrapper { position:relative; }

    /* loadout cards compact in landscape too */
    .lo-ability-icon img.ab-ico { width:26px; height:26px; }
    .lo-ability-desc { font-size:0.5rem; line-height:1.25; }

    /* ---- LANDSCAPE is only ~393px tall: compact the top sections so the
       limited height goes to the actual content (tree nodes / ability cards),
       not oversized headers and slot rows. ---- */
    /* Skill tree header */
    .st-header { margin-bottom:4px; }
    .st-subtitle { display:none; }
    .st-points { font-size:0.6rem; margin:2px 0; }
    .st-prestige-area { margin-top:3px; }
    .st-prestige-banner { padding:4px 12px; }
    .st-prestige-top { margin-bottom:2px; }
    .st-vessel-section { margin-top:6px; padding:4px; }
    .st-vessel-title { margin-bottom:2px; }
    /* Loadout title + equip-slot row */
    .lo-title { margin-bottom:2px; }
    .lo-slots { margin-bottom:6px; padding:5px; gap:5px; }
    .lo-slot { width:46px; height:46px; }
    .lo-slot-icon { font-size:1.1rem; }
    .lo-slot-icon img.ab-ico { width:22px; height:22px; }
    .lo-slot-name { font-size:0.4rem; margin-top:1px; }
    .lo-section-title { margin:4px 0 3px; font-size:0.55rem; }

    /* ---- DEATH screen: the respawn-card role text ("Scout"/"Heavy"/...) is
       5.6px at base; the portrait bump doesn't reach a wide landscape phone. ---- */
    .death-shape-selector .shape-role { font-size:0.5rem; opacity:0.7; }
    .death-shape-selector .shape-name { font-size:0.5rem; }

    /* ---- In-game HUD: bump the glanceable Size/HP/Kills readout off 6px. ---- */
    #hud-stats { font-size:0.45rem; }

    /* ---- LOCKER (landscape): compact the EQUIPPED row and shrink the skin
       cards so more than one row is visible. (The earlier `width:60px` rule was
       dead because `.locker-card` uses `flex:0 0 120px` — flex-basis wins.) ---- */
    .locker-equipped { padding:6px 12px; margin-bottom:8px; }
    .locker-equipped-title { margin-bottom:4px; }
    .locker-eq-slot { padding:5px 8px; }
    .locker-section-title { margin:6px 0 4px; }
    .locker-content { padding:0 14px 10px; }
    .locker-card { flex:0 0 88px; width:88px; min-height:0; padding:6px 6px 5px; }
    .locker-card-preview { height:46px; margin-bottom:4px; }

    /* ---- STORE (landscape): trim the header, wallet, tabs and the oversized
       promo banner, and drop the 300px content min-height, so the packages
       aren't pushed entirely below the fold. ---- */
    .store-header { padding:8px 16px 6px; }
    .store-title { font-size:0.85rem; letter-spacing:3px; }
    .store-wallet { margin-top:6px; padding:5px 12px; gap:14px; }
    .store-vessel-selector { padding:3px 12px; }
    .store-tab { padding:6px 8px; }
    .store-content { padding:8px 16px 12px; min-height:0; }
    .store-hero { padding:10px 16px; margin-bottom:10px; }
    .store-hero-title { font-size:0.8rem; margin-bottom:3px; }
    .store-hero-sub { font-size:0.6rem; }
    .store-hero-coming { margin-top:5px; font-size:0.55rem; }

    /* ---- SETTINGS (landscape): a tall single-column scroll wastes the wide
       screen. Lay the label+control rows out in two columns; keep the title,
       buttons and danger zone full-width. ---- */
    .settings-box {
        width:88vw; max-width:640px;
        display:flex; flex-wrap:wrap; justify-content:space-between; align-content:flex-start;
        column-gap:24px; padding:10px 20px 14px;
    }
    .settings-title { width:100%; margin-bottom:8px; font-size:0.85rem; }
    .settings-row { width:calc(50% - 12px); margin-bottom:9px; }
    .settings-leave-btn, .settings-logout-btn, .settings-close { width:100%; }
    .settings-danger-zone { width:100%; margin-top:6px; }

    /* ---- SPECTATE HUD (landscape): controls were ~5px text on ~16px tap
       targets — bump for readability and tappability. ---- */
    #spectate-hud { font-size:0.5rem; padding:5px 10px; bottom:8px; }
    #spectate-hud .spec-btn { font-size:0.5rem; padding:8px 14px; min-height:30px; }
    #spectate-name { font-size:0.55rem; }
    #spectate-hud.spec-collapsed #spectate-name { font-size:0.5rem; }
}