/* Base: tokens de diseño, reset y colores de equipo.
   Estilo: app oscura tipo wearable deportivo — barra de fases flotante, hero con
   resplandores de los 4 equipos, rejilla bento de categorías, dock de progreso flotante. */

:root{
  color-scheme:dark;
  /* Superficies y texto */
  --bg:#09090e; --panel:#13131b; --glass:rgba(22,22,32,.72); --stroke:rgba(255,255,255,.09); --stroke2:rgba(255,255,255,.16);
  --field:rgba(255,255,255,.05); --ink:#f5f5f8; --muted:#9b9bad; --faint:#5f5f72;
  /* Dorado de trofeo */
  --gold:#ffcf3f; --gold2:#ff9a1f; --gold-ink:#1a1100; --focus:#ffcf3f;
  /* Equipos */
  --bw:#f5f5f8; --royals:#9d6dff; --playboys:#ff4d5e; --maquina:#2ddc7e;
  /* Tipografía */
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* Radios */
  --r:22px; --r-sm:12px;
}

/* Margen seguro para teléfonos con notch */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--f-body);margin:0;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* Colores por equipo / categoría: definen --c (color) y --on (texto encima) */
.c-bw{--c:var(--bw);--on:#0b0b10}
.c-royals{--c:var(--royals);--on:#ffffff}
.c-playboys{--c:var(--playboys);--on:#ffffff}
.c-maquina{--c:var(--maquina);--on:#03200f}
.c-gold{--c:var(--gold);--on:var(--gold-ink)}
.c-none{--c:var(--faint);--on:var(--ink)}