:root{
  --bg:#050812;
  --bg2:#0b1322;
  --card:#0f172a;
  --card2:#111827;
  --text:#f8fafc;
  --muted:#9ca3af;
  --border:rgba(255,255,255,.08);
  --shadow:0 18px 45px rgba(0,0,0,.45);

  --aura:#93c5fd;
  --auraSoft:rgba(147,197,253,.18);

  --btn1:#3b82f6;
  --btn2:#93c5fd;

  --softCard:rgba(147,197,253,.07);
  --softBorder:rgba(147,197,253,.18);

  --hero1:#0b1220;
  --hero2:#1b2435;
  --hero3:#0a0f18;

  --badgeText:#ffffff;
}

.tema-goku{
  --aura:#93c5fd;
  --auraSoft:rgba(147,197,253,.18);
  --btn1:#3b82f6;
  --btn2:#93c5fd;
  --softCard:rgba(147,197,253,.07);
  --softBorder:rgba(147,197,253,.18);
  --hero1:#0b1220;
  --hero2:#1b2435;
  --hero3:#0a0f18;
  --badgeText:#ffffff;
}

.tema-vegeta{
  --aura:#38bdf8;
  --auraSoft:rgba(56,189,248,.22);
  --btn1:#0ea5e9;
  --btn2:#60a5fa;
  --softCard:rgba(56,189,248,.09);
  --softBorder:rgba(56,189,248,.24);
  --hero1:#07111f;
  --hero2:#0d2342;
  --hero3:#091424;
  --badgeText:#ffffff;
}

.tema-rose{
  --aura:#f472b6;
  --auraSoft:rgba(244,114,182,.22);
  --btn1:#ec4899;
  --btn2:#f472b6;
  --softCard:rgba(244,114,182,.09);
  --softBorder:rgba(244,114,182,.22);
  --hero1:#160811;
  --hero2:#3a1028;
  --hero3:#12060d;
  --badgeText:#ffffff;
}

.tema-ultra{
  --aura:#fde68a;
  --auraSoft:rgba(253,230,138,.22);
  --btn1:#f59e0b;
  --btn2:#fde68a;
  --softCard:rgba(253,230,138,.09);
  --softBorder:rgba(253,230,138,.24);
  --hero1:#18130a;
  --hero2:#3d2f0f;
  --hero3:#120f08;
  --badgeText:#111827;
}

.tema-broly{
  --aura:#4ade80;
  --auraSoft:rgba(74,222,128,.22);
  --btn1:#22c55e;
  --btn2:#86efac;
  --softCard:rgba(74,222,128,.09);
  --softBorder:rgba(74,222,128,.22);
  --hero1:#071309;
  --hero2:#12351a;
  --hero3:#091109;
  --badgeText:#111827;
}

/* BASE GLOBAL */
body{
  background:
    radial-gradient(circle at top left, var(--auraSoft), transparent 22%),
    radial-gradient(circle at top right, rgba(255,255,255,.04), transparent 20%),
    linear-gradient(180deg,#050812 0%, #0a1220 55%, #0b1322 100%);
  color:var(--text);
}

.game-card,
.card,
.box,
.panel{
  background:linear-gradient(145deg,var(--hero1),var(--hero2) 58%, var(--hero3) 100%);
  border:1px solid var(--softBorder);
  box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    0 0 18px var(--auraSoft);
}

.btn-theme,
button.primary,
.btn-primary{
  background:linear-gradient(135deg,var(--btn1),var(--btn2));
  color:var(--badgeText);
  border:none;
  box-shadow:0 12px 26px var(--auraSoft);
}

.badge-theme,
.rank-badge{
  background:linear-gradient(135deg,var(--btn1),var(--btn2));
  color:var(--badgeText);
}

.soft-box{
  background:var(--softCard);
  border:1px solid var(--softBorder);
}

.text-theme{
  color:var(--aura);
}

.border-theme{
  border-color:var(--softBorder);
}