/* ============================================================
   MLBB.MOBI — alternate themes (scoped via :root[data-theme])
   default (no attr) = original neon. Switchable live.
   ============================================================ */

/* ============================================================
   PREMIUM — clean / Linear-style: graphite, one indigo accent,
   air, hairline borders, minimal glow, flatter surfaces.
   ============================================================ */
:root[data-theme="premium"] {
  --bg-0: #0b0c10; --bg-1: #121319; --bg-2: #1a1c23; --bg-3: #23262f;
  --line: #2c303b; --line-soft: #20232d;
  --tx-0: #f3f5f9; --tx-1: #c7cdda; --tx-2: #8b92a3; --tx-3: #5b6172;
  --cyan: #818cf8; --blue: #6366f1; --violet: #a78bfa; --pink: #a78bfa; --gold: #e2b658; --green: #4ade80; --red: #f87171;
  --grad-brand: linear-gradient(120deg, #6366f1, #818cf8);
  --grad-gift: linear-gradient(120deg, #6366f1, #a78bfa);
  --grad-gold: linear-gradient(120deg, #e2b658, #cf9a3c);
  --grad-card: linear-gradient(160deg, rgba(99,102,241,0.05), rgba(129,140,248,0.02));
  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
  --shadow: 0 14px 40px -26px rgba(0,0,0,0.85);
  --glow-cyan: inset 0 0 0 1px var(--line);
  --glow-pink: 0 8px 24px -14px rgba(99,102,241,0.5);
}
:root[data-theme="premium"] body {
  background: radial-gradient(900px 520px at 85% -12%, rgba(99,102,241,0.07), transparent 60%), var(--bg-0);
}
/* flatter, calmer headings — less "gamer" */
[data-theme="premium"] .brand { font-family: var(--ff); font-weight: 800; letter-spacing: -0.4px; }
[data-theme="premium"] .hero h1 { font-family: var(--ff); font-weight: 800; letter-spacing: -1px; }
[data-theme="premium"] .hero { background: linear-gradient(160deg, #15171e, #0e1014); box-shadow: inset 0 0 0 1px var(--line-soft); }
/* solid, flat buttons */
[data-theme="premium"] .btn.primary { background: var(--blue); color: #fff; box-shadow: none; }
[data-theme="premium"] .btn.primary:hover { background: #5458e0; }
[data-theme="premium"] .btn.gift { background: linear-gradient(120deg, #6366f1, #8b5cf6); color: #fff; box-shadow: var(--glow-pink); }
[data-theme="premium"] .btn.gold { background: var(--grad-gold); color: #1c1304; }
/* calmer cards — hairline border, minimal shadow, no neon glow */
[data-theme="premium"] .card { box-shadow: inset 0 0 0 1px var(--line-soft); }
[data-theme="premium"] .card.glow,
[data-theme="premium"] .pcard:hover,
[data-theme="premium"] .pack:hover,
[data-theme="premium"] .msg:hover { box-shadow: inset 0 0 0 1px var(--line); background: var(--bg-1); }
[data-theme="premium"] .pcard:hover { transform: translateY(-2px); }
/* tone down avatar neon frames */
[data-theme="premium"] .av-frame-gold { box-shadow: 0 0 0 2px var(--gold); }
[data-theme="premium"] .av-frame-cyan { box-shadow: 0 0 0 2px var(--blue); }
[data-theme="premium"] .av-frame-pink { box-shadow: 0 0 0 2px var(--violet); }
[data-theme="premium"] .safe-badge { color: var(--green); }
[data-theme="premium"] .vtile.speaking .vring { box-shadow: 0 0 0 2px var(--green); transform: none; }

/* ============================================================
   ESPORTS — dark navy, electric blue + teal, sharper corners,
   crisp grid, "pro" data feel.
   ============================================================ */
:root[data-theme="esports"] {
  --bg-0: #070b16; --bg-1: #0b1120; --bg-2: #111a30; --bg-3: #16223c;
  --line: #233252; --line-soft: #172139;
  --tx-0: #eef4ff; --tx-1: #b9c6e0; --tx-2: #7d8cad; --tx-3: #51607f;
  --cyan: #38bdf8; --blue: #3b82f6; --violet: #60a5fa; --pink: #3b82f6; --gold: #fbbf24; --green: #34d399; --red: #fb5b6b;
  --grad-brand: linear-gradient(120deg, #22d3ee, #3b82f6);
  --grad-gift: linear-gradient(120deg, #3b82f6, #22d3ee);
  --grad-gold: linear-gradient(120deg, #fbbf24, #f59e0b);
  --grad-card: linear-gradient(160deg, rgba(59,130,246,0.08), rgba(34,211,238,0.04));
  --radius: 12px; --radius-sm: 9px; --radius-lg: 16px;
  --shadow: 0 16px 44px -22px rgba(0,0,0,0.8);
  --glow-cyan: 0 0 0 1px rgba(56,189,248,0.32), 0 10px 30px -14px rgba(59,130,246,0.5);
  --glow-pink: 0 10px 30px -12px rgba(59,130,246,0.55);
}
:root[data-theme="esports"] body {
  background:
    radial-gradient(1000px 560px at 80% -10%, rgba(59,130,246,0.16), transparent 60%),
    radial-gradient(820px 460px at -5% 0%, rgba(34,211,238,0.1), transparent 55%),
    linear-gradient(180deg, #070b16, #060912 60%), var(--bg-0);
}
[data-theme="esports"] .hero {
  background:
    radial-gradient(700px 320px at 80% 8%, rgba(59,130,246,0.24), transparent 60%),
    radial-gradient(620px 360px at 12% 92%, rgba(34,211,238,0.16), transparent 60%),
    linear-gradient(150deg, #0f1c38, #0a0f1e);
}
[data-theme="esports"] .btn.gift { background: linear-gradient(120deg, #3b82f6, #22d3ee); color: #06121f; }
/* crisp esports cards: subtle blue hairline + faint inner grid feel */
[data-theme="esports"] .card { box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow); }
[data-theme="esports"] .pcard:hover,
[data-theme="esports"] .pack:hover { box-shadow: inset 0 0 0 1px rgba(56,189,248,0.4), 0 10px 30px -16px rgba(59,130,246,0.5); }
[data-theme="esports"] .chip.violet { color: #93c5fd; box-shadow: inset 0 0 0 1px rgba(59,130,246,0.4); background: rgba(59,130,246,0.1); }
[data-theme="esports"] .av-frame-pink { box-shadow: 0 0 0 3px var(--blue), 0 0 22px -2px rgba(59,130,246,0.7); }

/* ============================================================
   LIGHT — clean light premium: off-white, indigo accent,
   soft shadows, crisp hairlines, dark text.
   ============================================================ */
:root[data-theme="light"] {
  --bg-0: #f3f5fb; --bg-1: #ffffff; --bg-2: #eef1f8; --bg-3: #e3e8f3;
  --line: #d6dcea; --line-soft: #e6eaf3;
  --tx-0: #0f1320; --tx-1: #3a4258; --tx-2: #6a7388; --tx-3: #98a1b5;
  --cyan: #0891b2; --blue: #4f46e5; --violet: #7c3aed; --pink: #db2777; --gold: #b45309; --green: #059669; --red: #dc2626;
  --grad-brand: linear-gradient(120deg, #4f46e5, #7c3aed);
  --grad-gift: linear-gradient(120deg, #db2777, #a855f7);
  --grad-gold: linear-gradient(120deg, #f59e0b, #d97706);
  --grad-card: linear-gradient(160deg, rgba(79,70,229,0.05), rgba(124,58,237,0.03));
  --radius: 16px; --radius-sm: 11px; --radius-lg: 22px;
  --shadow: 0 14px 34px -22px rgba(30,40,80,0.35);
  --glow-cyan: inset 0 0 0 1px var(--line), 0 10px 30px -18px rgba(79,70,229,0.4);
  --glow-pink: 0 10px 28px -14px rgba(219,39,119,0.4);
}
:root[data-theme="light"] body {
  color: var(--tx-0);
  background:
    radial-gradient(900px 520px at 85% -12%, rgba(124,58,237,0.08), transparent 60%),
    radial-gradient(800px 480px at -5% 0%, rgba(79,70,229,0.07), transparent 55%),
    var(--bg-0);
}
/* glass surfaces → light */
[data-theme="light"] #topbar { background: rgba(255,255,255,0.78); border-bottom-color: var(--line-soft); }
[data-theme="light"] #mobilenav { background: rgba(255,255,255,0.92); border-top-color: var(--line-soft); }
[data-theme="light"] .modal-backdrop { background: rgba(20,24,40,0.45); }
/* cards: white with soft shadow + hairline */
[data-theme="light"] .card { background: #fff; box-shadow: 0 10px 30px -20px rgba(30,40,80,0.28), inset 0 0 0 1px var(--line-soft); }
[data-theme="light"] .card.glow,
[data-theme="light"] .pcard:hover,
[data-theme="light"] .pack:hover,
[data-theme="light"] .msg:hover { box-shadow: 0 14px 34px -20px rgba(79,70,229,0.35), inset 0 0 0 1px var(--line); }
[data-theme="light"] .msg:hover { background: rgba(79,70,229,0.04); border-radius: 8px; }
[data-theme="light"] .hero {
  background: radial-gradient(680px 320px at 82% 8%, rgba(124,58,237,0.1), transparent 60%), linear-gradient(150deg, #eef1fc, #e7ecfb);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* buttons readable on light */
[data-theme="light"] .btn.primary { color: #fff; }
[data-theme="light"] .btn.gift { color: #fff; }
[data-theme="light"] .chip.btn-like.on { color: #fff; }
[data-theme="light"] .tile { background: var(--bg-2); }
/* chat surfaces */
[data-theme="light"] .chat-rules { background: rgba(79,70,229,0.06); box-shadow: inset 0 0 0 1px rgba(79,70,229,0.18); }
[data-theme="light"] .chat-compose,
[data-theme="light"] .composer textarea,
[data-theme="light"] .input, [data-theme="light"] .select { background: var(--bg-2); }
[data-theme="light"] .emoji-pop { background: #fff; }
[data-theme="light"] .av-online { box-shadow: 0 0 0 3px #fff; }
/* avatar frames a touch softer on light */
[data-theme="light"] .av-frame-cyan { box-shadow: 0 0 0 3px var(--blue); }
[data-theme="light"] .av-frame-gold { box-shadow: 0 0 0 3px var(--gold); }
[data-theme="light"] .av-frame-pink { box-shadow: 0 0 0 3px var(--pink); }

/* ============================================================
   Theme toggle (topbar day/night — user feature)
   ============================================================ */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 17px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: transform .12s, background .2s; flex-shrink: 0;
}
.theme-toggle:hover { transform: translateY(-1px); }