:root { --space-dark: #0a0e27; --neon-purple: #7c3aed; --neon-blue: #00f5ff; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: var(--space-dark); min-height: 100vh; font-family: 'Segoe UI', sans-serif; color: #fff; overflow-x: hidden; }
  .stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
  .star { position: absolute; border-radius: 50%; background: #fff; animation: twinkle var(--d,3s) ease-in-out infinite alternate; }
  @keyframes twinkle { from{opacity:.2;transform:scale(.8)} to{opacity:1;transform:scale(1.2)} }

  .app { position: relative; z-index: 1; max-width: 420px; margin: 0 auto; padding: 0 0 90px; }

  /* ── TOP BAR ── */
  .top-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px 14px;
    background: linear-gradient(180deg,rgba(10,14,39,1) 0%,transparent 100%);
    position: sticky; top: 0; z-index: 10;
  }
  .back-btn { width:36px;height:36px;background:rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;text-decoration:none;color:#fff; }
  .top-title { font-size:1.1rem;font-weight:800;flex:1; }
  .shop-mini {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #b45309, #f59e0b);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 1rem;
    box-shadow: 0 0 10px rgba(245,158,11,.35), 0 3px 0 #78350f;
    margin-right: 6px;
  }
  .settings-btn { width:36px;height:36px;background:rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer; }

  /* ── HERO ── */
  .hero {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 20px 20px; gap: 10px;
  }
  .helmet-wrap { position:relative;width:100px;height:100px; }
  .helmet {
    width:100px;height:100px;
    background:radial-gradient(circle at 38% 32%,#c7d2fe,#4338ca);
    border-radius:55% 55% 50% 50%;
    position:relative;
    box-shadow:0 0 30px rgba(99,102,241,.6),inset -8px -8px 20px rgba(0,0,0,.3);
  }
  .visor { position:absolute;top:28%;left:18%;width:64%;height:40%;background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(14,165,233,.4));border-radius:50%;border:2px solid rgba(255,255,255,.3);overflow:hidden; }
  .visor::after { content:'';position:absolute;top:8%;left:10%;width:30%;height:40%;background:rgba(255,255,255,.35);border-radius:50%; }
  .antenna { position:absolute;top:-18px;right:18px;width:4px;height:22px;background:linear-gradient(to top,#6366f1,#a5b4fc);border-radius:2px; }
  .antenna::after { content:'';position:absolute;top:-5px;left:-3px;width:10px;height:10px;background:radial-gradient(circle,#fb923c,#ea580c);border-radius:50%;box-shadow:0 0 8px #fb923c;animation:antPulse 1.2s ease-in-out infinite alternate; }
  @keyframes antPulse{from{opacity:.6;transform:scale(.8)}to{opacity:1;transform:scale(1.3)}}
  .online-dot { position:absolute;bottom:6px;right:6px;width:14px;height:14px;background:#22c55e;border-radius:50%;border:2px solid #0a0e27;box-shadow:0 0 8px #22c55e; }

  .player-name { font-size:1.3rem;font-weight:800; }
  .rank-badge { background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:20px;padding:4px 16px;font-size:.75rem;font-weight:700;letter-spacing:1px;box-shadow:0 0 12px rgba(124,58,237,.5); }

  .mini-stats { display:flex;gap:20px; }
  .mini-stat { text-align:center; }
  .mini-val { font-size:1rem;font-weight:800; }
  .mini-lbl { font-size:.65rem;color:#64748b; }

  /* ── XP CARD ── */
  .xp-card {
    margin: 0 20px;
    background: linear-gradient(135deg,#4f46e5,#7c3aed,#ec4899);
    border-radius: 20px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(79,70,229,.4);
  }
  .xp-card::before {
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    animation:shimmer 2.5s linear infinite;
  }
  @keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
  .xp-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:12px; }
  .xp-level { font-size:1.5rem;font-weight:900; }
  .xp-next { font-size:.72rem;color:rgba(255,255,255,.75); }
  .xp-track { height:10px;background:rgba(255,255,255,.2);border-radius:10px;overflow:hidden;margin-bottom:8px; }
  .xp-fill { height:100%;width:0%;min-width:0;background:rgba(255,255,255,.6);border-radius:10px; }
  .xp-labels { display:flex;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.7); }
  .next-rank { font-size:.72rem;color:rgba(255,255,255,.8);margin-top:8px;text-align:center; }

  /* ── STATS GRID ── */
  .section-title { padding:18px 20px 8px;font-size:.78rem;color:#64748b;font-weight:700;letter-spacing:1px;text-transform:uppercase; }
  .stats-grid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 20px; }
  .stat-chip {
    border-radius:14px;padding:12px 8px;text-align:center;border:1px solid;
  }
  .stat-val { font-size:1.1rem;font-weight:800; }
  .stat-lbl { font-size:.62rem;margin-top:3px; }
  .s-green { background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:#4ade80; box-shadow:0 0 10px rgba(34,197,94,.15); }
  .s-red { background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#f87171; box-shadow:0 0 10px rgba(239,68,68,.15); }
  .s-orange { background:rgba(251,146,60,.1);border-color:rgba(251,146,60,.25);color:#fb923c; box-shadow:0 0 10px rgba(251,146,60,.15); }
  .s-gold { background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.25);color:#fbbf24; box-shadow:0 0 10px rgba(251,191,36,.15); }
  .s-blue { background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.25);color:#60a5fa; box-shadow:0 0 10px rgba(96,165,250,.15); }
  .s-purple { background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.25);color:#a78bfa; box-shadow:0 0 10px rgba(167,139,250,.15); }

  /* ── ACHIEVEMENTS ── */
  .badges-scroll { display:flex;gap:10px;padding:0 20px;overflow-x:auto;scrollbar-width:none; }
  .badges-scroll::-webkit-scrollbar { display:none; }
  .badge-item { display:flex;flex-direction:column;align-items:center;gap:5px;min-width:68px; }
  .badge-icon {
    width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;
    border:2px solid;
  }
  .badge-earned { border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1);box-shadow:0 0 12px rgba(251,191,36,.3); }
  .badge-locked { border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04);filter:grayscale(1) brightness(.5); }
  .badge-name { font-size:.6rem;color:#94a3b8;text-align:center;max-width:64px; }

  /* ── MATCH HISTORY ── */
  .match-list { padding:0 20px;display:flex;flex-direction:column;gap:8px; }
  .match-row {
    display:flex;align-items:center;gap:12px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
    border-radius:14px;padding:12px;
  }
  .wl-badge { width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900; }
  .wl-w { background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.3); }
  .wl-l { background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3); }
  .match-info { flex:1; }
  .match-opp { font-size:.85rem;font-weight:700; }
  .match-mode { display:inline-block;padding:2px 8px;border-radius:10px;font-size:.6rem;font-weight:700;margin-top:3px; }
  .mode-duel { background:rgba(239,68,68,.15);color:#f87171; }
  .mode-solo { background:rgba(96,165,250,.15);color:#60a5fa; }
  .match-xp { font-size:.85rem;font-weight:700; }
  .xp-pos { color:#4ade80; }
  .xp-neg { color:#f87171; }

  /* ── SETTINGS ── */
  .settings-list { padding:0 20px;display:flex;flex-direction:column;gap:1px; }
  .settings-row {
    display:flex;align-items:center;gap:12px;
    background:rgba(255,255,255,.04);
    padding:14px 16px;
  }
  .settings-row:first-child { border-radius:16px 16px 0 0; }
  .settings-row:last-child { border-radius:0 0 16px 16px; }
  .settings-icon { font-size:1.2rem;width:24px;text-align:center; }
  .settings-label { flex:1;font-size:.88rem; }
  .settings-arrow { color:#475569;font-size:1rem; }

  /* Toggle */
  .toggle { width:42px;height:24px;border-radius:12px;background:#1e293b;position:relative;cursor:pointer;transition:background .3s;border:none;flex-shrink:0; }
  .toggle.on { background:#7c3aed; }
  .toggle::after { content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 1px 4px rgba(0,0,0,.3); }
  .toggle.on::after { transform:translateX(18px); }

  .logout-row { color:#ef4444 !important; }
  .logout-row .settings-label { color:#ef4444; }

  /* ── BOTTOM NAV ── */
  nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:rgba(7,11,21,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:flex-end;justify-content:space-around;padding:10px 4px 24px;z-index:200;}
  .nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:#6B7280;font-family:inherit;font-size:10px;font-weight:500;cursor:pointer;padding:0 6px;min-width:52px;transition:color .15s;text-decoration:none;}
  .nav-btn .nav-ico{width:22px;height:22px;display:block;margin-bottom:1px;}
  .nav-btn .nav-ico img{width:100%;height:100%;object-fit:contain;display:block;opacity:.45;transition:opacity .15s;}
  .nav-btn.active{color:#8B5CF6;}
  .nav-btn.active .nav-ico img{opacity:1;filter:brightness(0) saturate(100%) invert(49%) sepia(97%) saturate(1283%) hue-rotate(235deg) brightness(101%) contrast(94%);}
  .nav-center{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:-26px;cursor:pointer;}
  .nav-disc{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#6d28d9 0%,#8b5cf6 60%,#a78bfa 100%);box-shadow:0 4px 28px rgba(109,40,217,.7),0 0 0 3px #070B15;display:flex;align-items:center;justify-content:center;font-size:27px;}
  .nav-center-lbl{font-size:10px;font-weight:700;color:#6B7280;}
  .nav-item{display:none;} .nav-orb{display:none;}