/* =====================================================================
   AISU HERO — tipografía (rediseño festival)
   Copied from the font kit (fonts/final/fonts.css) with the SPEC 1.2 / 1.3 / 8.1 edits:
   font URLs -> ../fonts/aisu/, the five colour variables removed from :root (tokens.css owns
   --ink, --halo, --cream, --sun, --don), .num removed from the .tk--num selector (ui.js uses .num
   on leaderboard columns, which stay in AISU Body 900), .tk--plate / .tk--plate-red and .stroke added,
   explicit symbol fallbacks added to the stacks (⋯ U+22EF is in no AISU face: fontTools check).
   Fuentes locales (CSP: font-src 'self'), sin CDNs.
   - AISU Display : DynaPuff Bold, instancias estáticas sin solapamientos
                    (75 / 85 / 100 de ancho). Títulos, botones, juicios.
   - AISU Digits  : DynaPuff Bold w85 con dígitos tabulares (solo cifras
                    y separadores). Puntaje, combo, contadores que cambian.
   - AISU Body    : M PLUS Rounded 1c 700/800/900. Texto, etiquetas,
                    tablas, y fallback de símbolos (← ↑ ↓ ◀ ♪) del display.
   Licencias: OFL-DynaPuff.txt, OFL-MPLUSRounded1c.txt (SIL OFL 1.1).
   ===================================================================== */

@font-face {
  font-family: 'AISU Display';
  src: url('../fonts/aisu/dynapuff-bold-w85.woff2') format('woff2');
  font-weight: 700; font-stretch: 85%; font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'AISU Display';
  src: url('../fonts/aisu/dynapuff-bold-w75.woff2') format('woff2');
  font-weight: 700; font-stretch: 75%; font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'AISU Display';
  src: url('../fonts/aisu/dynapuff-bold-w100.woff2') format('woff2');
  font-weight: 700; font-stretch: 100%; font-style: normal;
  font-display: block;
}
/* solo cifras + separadores: lo demás cae a 'AISU Display' por la pila */
@font-face {
  font-family: 'AISU Digits';
  src: url('../fonts/aisu/dynapuff-tab-digits-bold-w85.woff2') format('woff2');
  font-weight: 700; font-style: normal;
  unicode-range: U+0020, U+0025, U+002B-002F, U+0030-003A, U+0078, U+00D7, U+2212, U+2605;
  font-display: block;
}
@font-face {
  font-family: 'AISU Body';
  src: url('../fonts/aisu/mplusrounded1c-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AISU Body';
  src: url('../fonts/aisu/mplusrounded1c-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AISU Body';
  src: url('../fonts/aisu/mplusrounded1c-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* system symbol faces close the stacks: ⋯ (board gap) is in no AISU face; CJK / Arabic names fall back here too */
  --font-symbols: 'Hiragino Maru Gothic ProN', 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Math', system-ui, sans-serif;
  --font-display: 'AISU Display', 'AISU Body', var(--font-symbols);
  --font-num: 'AISU Digits', 'AISU Display', 'AISU Body', var(--font-symbols);
  --font-body: 'AISU Body', var(--font-symbols);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------
   Texto "Taiko": relleno + contorno oscuro + halo blanco exterior.
   Uso: <span class="tk" data-text="Who's playing?">Who's playing?</span>
   (data-text debe ser idéntico al texto; ver setTk() en el informe)
   Grosores en em: escalan solos con font-size.
   --------------------------------------------------------------------- */
.tk {
  --tk-d: max(3px, .11em);   /* trazo oscuro TOTAL (se ve la mitad, afuera) */
  --tk-w: max(2px, .075em);  /* ancho visible del halo blanco */
  position: relative;
  display: inline-block;
  isolation: isolate;        /* el ::before z-index:-1 queda dentro del elemento */
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .03em;
  line-height: 1.15;
  color: var(--tk-fill, #fff);
  -webkit-text-stroke: var(--tk-d) var(--tk-ink, var(--ink));
  paint-order: stroke fill;  /* el trazo queda DEBAJO del relleno (Chrome 123+) */
  padding-inline: calc(var(--tk-d) / 2 + var(--tk-w));
  white-space: nowrap;
}
.tk::before {
  content: attr(data-text);           /* fallback */
  content: attr(data-text) / "";      /* oculto a lectores de pantalla */
  position: absolute;
  inset: 0;
  padding: inherit;                   /* misma caja de contenido que el texto */
  z-index: -1;
  color: var(--tk-halo, var(--halo));
  -webkit-text-stroke: calc(var(--tk-d) + 2 * var(--tk-w)) var(--tk-halo, var(--halo));
  paint-order: stroke fill;
  text-shadow: 0 var(--tk-drop, .07em) 0 var(--tk-shadow, rgb(70 20 10 / .35));
  pointer-events: none;
}

/* tamaños: chico necesita trazos proporcionalmente más gruesos */
.tk--s  { --tk-d: max(3px, .17em); --tk-w: max(2px, .1em); }
.tk--xl { --tk-d: .1em; --tk-w: .07em; }

/* anchos */
.tk--narrow { font-stretch: 75%; }    /* títulos largos de canciones */
.tk--wide   { font-stretch: 100%; }   /* logo / palabras sueltas */

/* rellenos */
.tk--cream  { --tk-fill: var(--cream); }
.tk--sun    { --tk-fill: var(--sun); }
.tk--don    { --tk-fill: var(--don); }
.tk--flat   { --tk-drop: 0; }

/* off-register plate behind the halo (SPEC 1.4): cobalt by default, red with --plate-red */
.tk--plate { --tk-shadow: var(--cobalt); --tk-drop: .07em; }
.tk--plate::before { text-shadow: .05em .07em 0 var(--tk-shadow); }
.tk--plate-red { --tk-shadow: var(--red); --tk-drop: .07em; }
.tk--plate-red::before { text-shadow: .05em .07em 0 var(--tk-shadow); }

/* relleno degradado: el gradiente va en ::after ENCIMA (el elemento conserva
   el trazo oscuro; background-clip:text en el propio elemento no funciona
   porque el trazo cubriría el interior) */
.tk--grad::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  padding: inherit;
  -webkit-text-stroke: 0;
  color: transparent;
  background: var(--tk-gradient, linear-gradient(#fff36b 15%, #ffb21e 55%, #ff5a1f 90%));
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}

/* números que cambian (puntaje, combo): cifras tabulares, sin saltos.
   (.num quitado del selector: las columnas del ranking siguen en AISU Body 900) */
.tk--num { font-family: var(--font-num); font-stretch: 85%; }

/* text under 1.75rem on coloured or busy backgrounds: one ink stroke under the fill (SPEC 1.3) */
.stroke {
  -webkit-text-stroke: max(1.5px, .12em) var(--tk-ink, var(--ink));
  paint-order: stroke fill;
}

/* cuerpo */
.body-text { font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; line-height: 1.55; }
.label     { font-family: var(--font-body); font-weight: 800; letter-spacing: .05em; }
.figures   { font-family: var(--font-body); font-weight: 900; font-variant-numeric: tabular-nums; }