:root {
  /* --- superficies: paleta fría, sin beige/crema/dorado -------------------- */
  --bg: #060c20;
  --bg-deep: #01020f;
  --surface: #131c33;
  --surface-2: #222a44;
  --surface-3: #313955;
  --fg: #f2f5fb;
  --muted: #9fa8ba;
  --muted-rgb: 159, 168, 186;
  --border: #3b445e;
  --border-soft: #262d42;

  /* --- acción -------------------------------------------------------------- */
  --accent: #00d7ea;   /* cian eléctrico: color primario     */
  --accent-hi: #64eff7;
  --accent-ink: #001428;   /* texto sobre cian                   */
  --accent-2: #a1ea5a;   /* lima: acento secundario / premio   */
  --accent-2-rgb: 161, 234, 90;

  /* --- la hoja del álbum ---------------------------------------------------
     Referencia: página de álbum impreso. Fondo de página saturado, slots casi
     blancos, tinta oscura. Azul, no crema: mantiene la piel fría del producto. */
  --sheet: #016abe;
  --sheet-2: #0051a2;
  --sheet-ink: #f4f9ff;
  --sheet-ink-rgb: 244, 249, 255;
  --slot: #f2f5f9;
  --slot-2: #e0e5eb;
  --slot-line: #ccd5e0;
  --ink: #182437;
  --ink-soft: #5e6a7b;

  /* --- rarezas ------------------------------------------------------------- */
  --r-common: #8b939f;
  --r-rare: #00cfe8;
  --r-epic: #a671f3;
  --r-epic: #a670f3;
  --r-legend-a: #00e9e0;
  --r-legend-b: #d36dea;
  --r-legend-c: #afee65;
  --r-legend-c: #b0ee65;

  /* --- estado -------------------------------------------------------------- */
  --ok: #75d87a;
  --warn: #f4c947;
  --danger: #f4595e;

  /* --- tipografía (sin Google Fonts: stacks del sistema) ------------------- */
  --font-display: ui-rounded, 'SF Pro Rounded', 'Baloo 2', 'Nunito', 'Poppins',
                  'Segoe UI Variable', system-ui, sans-serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(0.94rem, 0.91rem + 0.18vw, 1.02rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.35vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.70vw, 1.85rem);
  --step-3:  clamp(1.70rem, 1.42rem + 1.40vw, 2.60rem);
  --step-4:  clamp(2.10rem, 1.55rem + 2.75vw, 3.80rem);

  /* --- forma --------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --shadow-1: 0 1px 2px rgba(0, 1, 11, 0.5), 0 4px 14px rgba(0, 1, 11, 0.35);
  --shadow-2: 0 8px 30px rgba(0, 1, 11, 0.55);
  --shadow-glow: 0 0 0 1px rgba(0, 215, 234, 0.35), 0 0 28px rgba(0, 215, 234, 0.28);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  
  --bg-blur: rgba(6, 12, 32, 0.78);
  --bg-blur: rgba(6, 12, 32, 0.78);   /* barra superior, translúcida */
  --rail-bg: rgba(3, 7, 24, 0.92);
  --rail-bg: rgba(3, 6, 24, 0.92);   /* rail y tab bar              */
  --panel-2: #0f172d;         /* fondo bajo del panel        */
  --scrim: rgba(1, 1, 8, 0.78);
  --scrim: rgba(1, 1, 8, 0.78);     /* velo detrás del modal       */

  /* Tinta de los chips que SIEMPRE son papel claro — el avatar de un jugador es
     un pastel al 78% de luminancia en los dos temas. Por eso este token es el
     único que NO se redefine abajo: darlo vuelta con el tema es justo el bug
     que arregla. */
  --chip-ink: #0d1a32;

  --appbar-h: 62px;          /* alto de la barra superior          */
  --nav-h: 68px;             /* alto de la tab bar en móvil        */
  --rail-w: 236px;           /* rail expandido en desktop          */
  --rail-w-collapsed: 76px;  /* rail contraído: sólo iconos        */
  --maxw: 1240px;
}

/* ── Tema claro ───────────────────────────────────────────────────────────────
   SE DA VUELTA EL CHROME, NO EL ÁLBUM. La hoja, los huecos y las figuritas son
   papel impreso: un álbum de kiosco no cambia de color porque afuera sea de
   día. Lo que se invierte es lo que rodea al álbum —fondo, barra, rail,
   paneles, modales, texto—, que es la parte que de verdad molesta a las 3 de la
   tarde contra una ventana. Por eso acá no aparecen `--sheet`, `--slot`,
   `--ink` ni las rarezas: son los mismos tokens en los dos temas, y esa
   ausencia es la decisión de diseño.

   EL ACENTO SÍ CAMBIA, y no por gusto: el cian a 80% de luz es perfecto sobre
   índigo y es ilegible sobre blanco (2,1:1). En claro baja a 52% —mismo tono,
   otra luz— y pasa a 6:1 como texto y a 8:1 como botón con tinta blanca.

   Lo escribe `js/tema.js` en <html data-tema>, antes del primer pintado. */
[data-tema="claro"] {
  --bg: #f0f4f7;
  --bg-deep: #fafcfe;
  --surface: #ffffff;
  --surface-2: #f4f7fa;
  --surface-3: #e6ecf2;
  --fg: #1b2435;
  --muted: #535b69;
  --muted-rgb: 83, 91, 105;
  --border: #cfd5dc;
  --border-soft: #e1e5ea;

  --accent: #0070b3;
  --accent-hi: #005b9f;
  --accent-ink: #fafcfe;
  --accent-2: #007324;
  --accent-2-rgb: 0, 115, 36;

  --bg-blur: rgba(255, 255, 255, 0.82);

  --bg-blur: rgba(255, 255, 255, 0.82);
  --rail-bg: rgba(250, 252, 254, 0.94);
  --rail-bg: rgba(250, 252, 254, 0.94);
  --panel-2: #f2f5f9;
  --scrim: rgba(38, 45, 62, 0.42);
  --scrim: rgba(38, 46, 61, 0.42);

  /* En claro la sombra no puede ser negro al 55%: sobre papel eso es un manchón.
     Misma forma, tinta azulada y mucha menos opacidad. */
  --shadow-1: 0 1px 2px rgba(38, 46, 61, 0.1), 0 4px 14px rgba(38, 46, 61, 0.1);
  --shadow-2: 0 8px 30px rgba(38, 46, 61, 0.16);
  --shadow-glow: 0 0 0 1px rgba(0, 112, 179, 0.3), 0 0 24px rgba(0, 112, 179, 0.18);
}

/* El estado del menú vive en <html> para que el ancho del rail esté resuelto
   antes del primer pintado (sin salto de layout). Lo escribe Kairo.initNavState(). */
html[data-nav-state="collapsed"] { --rail-w: var(--rail-w-collapsed); }

/* --- reset mínimo ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* `[hidden]` gana siempre. El estilo del navegador es `display:none` con
   especificidad cero, así que cualquier `.clase { display:flex }` lo pisa y el
   elemento queda visible aunque el JS le haya puesto `hidden`. Nos pasó con la
   barra de pendientes y con el paginador del álbum. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(1100px 620px at 78% -8%,  rgba(23, 55, 102, 0.55), transparent 62%),
    radial-gradient(900px 540px at 6% 104%,   rgba(57, 33, 90, 0.4), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* scrollbar fría */
* { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); }

/* --- utilidades ------------------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.stack { display: grid; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.hide-mobile { display: none; }
@media (min-width: 960px) { .hide-mobile { display: revert; } .hide-desktop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}