/* Tokens de color, reset y tipografía base. */
:root{
  --bg:#050a24;        /* azul noche Red Bull */
  --panel:#0c1440;
  --panel2:#121d55;
  --line:#1e2a6e;
  --txt:#f4f6ff;
  --dim:#9fa8d9;
  --neon:#e8112d;      /* rojo Red Bull */
  --gold:#ffcc00;      /* amarillo Red Bull */
  --up:#3ddc84;
  --down:#ff5a5a;
  --rare:#3da9fc;
  --epic:#a855f7;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,17,45,.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 110%, rgba(31,85,255,.14), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  padding:16px 12px 60px;
  display:flex;justify-content:center;
}
#app{width:100%;max-width:760px}
.display{
  font-family:Impact,"Arial Black","Segoe UI",sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}
h1.logo{
  font-size:clamp(40px,9vw,72px);
  text-align:center;line-height:.95;
  background:linear-gradient(180deg,#fff 20%, var(--neon) 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(232,17,45,.5));
}
.tag{ text-align:center;color:var(--dim);margin-top:6px;font-size:14px;letter-spacing:.14em;text-transform:uppercase }

/* ---------- Selector de tema (fijo, arriba a la derecha) ---------- */
.theme-switch{
  position:fixed;top:8px;right:8px;z-index:500;
  display:flex;gap:2px;padding:3px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.theme-switch .theme-btn{
  width:26px;height:26px;padding:0;border-radius:999px;
  background:none;box-shadow:none;color:var(--dim);
  font-size:13px;line-height:1;opacity:.5;
  transition:opacity .15s ease,background .15s ease;
}
.theme-switch .theme-btn:hover{opacity:1;transform:none}
.theme-switch .theme-btn:active{transform:none}
.theme-switch .theme-btn.sel{opacity:1;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
/* Al ser fijo, en pantallas angostas el logo le pasaría por debajo. */
@media(max-width:700px){#app{padding-top:28px}}