/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Head Kings — KIT DE INTERFAZ (tema «foco y pizarra»)

   Sistema visual para que la interfaz case con el arte de los personajes: luz de escenario que cae
   desde arriba (haz amarillo, núcleo dorado, cuerpo ocre) fundida con una pizarra azul arriba y
   turquesa abajo; títulos amarillo-naranja con contorno marrón grueso; paneles de pizarra
   translúcida; botones de dos tonos partidos por la mitad (luz arriba) con contorno oscuro, canto y
   brillo; botones redondos tipo ficha; pestañas turquesa de cristal y tira de tarjetas por rareza.

   Todo va con el prefijo `hk-` (clases) y `--hk-` (variables): convive con main.css/ui.css sin
   pisar nada. Catálogo con todos los componentes: tools/ui-kit.html. El marcado lo generan las
   funciones de client/js/ui/components/ (lo recomendable) y los iconos, client/js/ui/icons-kit.js.

   Los tamaños van en rem (siguen el tamaño de letra raíz del juego) y, dentro de cada componente,
   en em o en % del componente: cambiar el font-size o el ancho de uno lo escala entero.

   Las texturas del fondo son SVG en línea, cada una detrás de su comentario marcador «textura:…»;
   se regeneran con node tools/ui-kit-texturas.mjs (no se editan a mano).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes (las mismas de main.css: el kit funciona también sin él) ── */
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lilita-one-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lilita-one-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/baloo-2-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/baloo-2-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/baloo-2-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/baloo-2-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; }

/* Como en el juego (main.css): las medidas incluyen relleno y borde. Especificidad cero: no pisa nada. */
:where([class^="hk-"], [class*=" hk-"]), :where([class^="hk-"], [class*=" hk-"])::before, :where([class^="hk-"], [class*=" hk-"])::after { box-sizing: border-box; }

/* ═════════════════════════════════════ TOKENS ═════════════════════════════════════ */
:root {
  --hk-font-title: 'Lilita One', 'Baloo 2', system-ui, sans-serif;
  --hk-font-body: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Tinta: el contorno de todo es casi negro y cálido (nunca azul marino) */
  --hk-ink: #120a05;
  --hk-ink-title: #2c1300;        /* contorno de los títulos amarillos */
  --hk-ink-soft: rgba(18, 10, 5, .55);
  --hk-line: 2.5px;               /* grosor del contorno de botones, tarjetas y pestañas */

  /* Pizarra de los lados: azul violáceo arriba → turquesa abajo */
  --hk-edge-1: #261c48;
  --hk-edge-2: #1a3147;
  --hk-edge-3: #1e383f;
  --hk-edge-4: #1a4252;
  /* Foco (RGB sin coma para poder poner alfa: rgb(var(--hk-spot-1) / .8)). La luz cae desde arriba:
     haz amarillo intenso arriba en el centro, núcleo dorado, cuerpo ocre, borde cobrizo y un fundido
     violáceo con la pizarra. Valores ajustados por mínimos cuadrados contra la referencia. */
  --hk-spot-0: 253 222 56;        /* haz de arriba */
  --hk-spot-1: 255 224 72;        /* núcleo */
  --hk-spot-2: 195 129 55;        /* cuerpo */
  --hk-spot-3: 164 98 62;         /* borde */
  --hk-spot-4: 80 83 100;         /* fundido con la pizarra */

  /* Texto */
  --hk-text: #ffffff;
  --hk-text-dim: #c9d9e2;
  --hk-text-mute: #8fa8b6;
  --hk-title: #ffab00;            /* títulos grandes */
  --hk-accent: #ffc81a;           /* acentos de lectura: «/22», etiquetas de sección */
  --hk-value: #8cf01e;            /* valores de estadística */
  --hk-cyan: #58e1ff;             /* «+1», mejoras */

  /* Colores de botón: hi (mitad de arriba) · lo (mitad de abajo) · lip (canto) · ink (contorno del texto) */
  --hk-green-hi: #c3fb0e;  --hk-green-lo: #63dc05;  --hk-green-lip: #3aa000;  --hk-green-ink: #173f00;
  --hk-teal-hi: #5fe0f2;   --hk-teal-lo: #10abd0;   --hk-teal-lip: #067ea1;   --hk-teal-ink: #05303f;
  --hk-blue-hi: #52c4ff;   --hk-blue-lo: #1a8df2;   --hk-blue-lip: #0b5fc0;   --hk-blue-ink: #06224d;
  --hk-red-hi: #ff7666;    --hk-red-lo: #ef3b2f;    --hk-red-lip: #b01d14;    --hk-red-ink: #4a0603;
  --hk-gold-hi: #ffe24a;   --hk-gold-lo: #ffae0a;   --hk-gold-lip: #cc7400;   --hk-gold-ink: #4d2400;
  --hk-purple-hi: #e785ff; --hk-purple-lo: #b334ec; --hk-purple-lip: #7a16b4; --hk-purple-ink: #2e0550;
  --hk-gray-hi: #d5dde3;   --hk-gray-lo: #93a3ae;   --hk-gray-lip: #66757f;   --hk-gray-ink: #1c252b;

  /* Pizarra de los paneles */
  --hk-slate: rgba(22, 18, 17, .62);
  --hk-slate-head: rgba(8, 8, 12, .5);
  --hk-slate-ring: rgba(255, 255, 255, .2);
  --hk-well: rgba(8, 7, 8, .72);

  /* Tarjeta de la tira (azul-gris) y estante turquesa donde se apoya */
  --hk-card-top: #1c6071;
  --hk-card-bot: #164e5f;
  --hk-card-glass: rgba(172, 206, 220, .3);
  --hk-shelf-top: #062a41;
  --hk-shelf-bot: #0795bd;
  --hk-shelf-rim: #1283b4;
  --hk-select: #2de3f5;

  /* Rareza: franja (band), texto de la franja (text) y contador de cartas (count) */
  --hk-rar-comun-band: #2d4a60;      --hk-rar-comun-text: #b9e3f6;      --hk-rar-comun-count: #e3f1f8;
  --hk-rar-rara-band: #0c5299;       --hk-rar-rara-text: #86d8ff;       --hk-rar-rara-count: #7fd6ff;
  --hk-rar-epica-band: #43196a;      --hk-rar-epica-text: #dc8cff;      --hk-rar-epica-count: #e79cff;
  --hk-rar-legendaria-band: #93620c; --hk-rar-legendaria-text: #ffe14a; --hk-rar-legendaria-count: #ffd21a;

  /* Escala tipográfica */
  --hk-fs-display: 3rem;    /* JUGAR, VICTORIA */
  --hk-fs-h1: 2.35rem;      /* nombre del personaje, título de pantalla */
  --hk-fs-h2: 1.65rem;      /* cabecera de panel */
  --hk-fs-h3: 1.3rem;       /* subtítulos, números de la barra superior */
  --hk-fs-body: 1rem;       /* texto de apoyo (Baloo 2) */
  --hk-fs-sm: .86rem;
  --hk-fs-xs: .74rem;

  /* Radios y sombras */
  --hk-r-sm: .45rem;
  --hk-r-md: .75rem;
  --hk-r-lg: 1rem;
  --hk-r-xl: 1.35rem;
  --hk-drop: 0 .3rem .7rem rgba(0, 0, 0, .3);
}

/* ═════════════════════════════════════ FONDOS ═════════════════════════════════════
   <div class="hk-bg hk-bg--menu"><i class="hk-bg__rays"></i></div>   (bgHTML('menu') lo genera)
   Variantes: --menu (dorado) · --shop (turquesa) · --pack (magenta, con rayos) ·
              --win (dorado intenso, con rayos) · --lose (azul frío, sin foco cálido) · --match (oscuro, para pausas)
   Se coloca como primer hijo de la pantalla (position:absolute; inset:0) o con .hk-bg--fixed. */
.hk-bg {
  --a0: var(--hk-spot-0); --a1: var(--hk-spot-1); --a2: var(--hk-spot-2); --a3: var(--hk-spot-3); --a4: var(--hk-spot-4);
  --e1: var(--hk-edge-1); --e2: var(--hk-edge-2); --e3: var(--hk-edge-3); --e4: var(--hk-edge-4);
  --sx: 50.4%; --sy: 30.8%;       /* centro del foco */
  --sw: 46%; --sh: 65.6%;         /* radios del foco (elipse) */
  --by: -2.6%; --bw: 17.2%; --bh: 49.6%;   /* haz de arriba: altura del centro y radios */
  --grid: rgba(255, 244, 214, .085);
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background-color: var(--e2);
  background-image:
    radial-gradient(ellipse var(--bw) var(--bh) at var(--sx) var(--by), rgb(var(--a0) / .83) 0%, rgb(var(--a0) / .8) 45%, rgb(var(--a0) / 0) 100%),
    radial-gradient(ellipse var(--sw) var(--sh) at var(--sx) var(--sy), rgb(var(--a1)) 0%, rgb(var(--a2) / .95) 44%, rgb(var(--a3) / .87) 61%, rgb(var(--a4) / .48) 80%, rgb(var(--a4) / 0) 100%),
    linear-gradient(172deg, var(--e1) 0%, var(--e2) 30%, var(--e3) 68%, var(--e4) 100%);
}
.hk-bg--fixed { position: fixed; }
/* Haces del foco, rejilla de plató y salpicaduras claras: solo en el centro */
.hk-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    /* textura:haces */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cfilter id='d'%3E%3CfeGaussianBlur stdDeviation='.8'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%23fff6d0' filter='url(%23b)'%3E%3Cpath d='M390 -20L470 -20L400 600L100 600Z' fill-opacity='0.16'/%3E%3Cpath d='M526 -20L594 -20L900 600L620 600Z' fill-opacity='0.13'/%3E%3Cpath d='M474 -20L526 -20L625 600L385 600Z' fill-opacity='0.1'/%3E%3C/g%3E%3Cg fill='%23fff3c4' filter='url(%23d)'%3E%3Ccircle cx='625.9' cy='48.1' r='6.5' fill-opacity='0.37'/%3E%3Ccircle cx='181.9' cy='138' r='2.5' fill-opacity='0.41'/%3E%3Ccircle cx='710.8' cy='549' r='1.2' fill-opacity='0.16'/%3E%3Ccircle cx='316.2' cy='189.4' r='7' fill-opacity='0.25'/%3E%3Ccircle cx='737.5' cy='290.8' r='7' fill-opacity='0.36'/%3E%3Ccircle cx='792.8' cy='494' r='7.6' fill-opacity='0.40'/%3E%3Ccircle cx='348.6' cy='378.3' r='4.9' fill-opacity='0.26'/%3E%3Ccircle cx='238.3' cy='45' r='1.6' fill-opacity='0.33'/%3E%3Ccircle cx='564.3' cy='321.2' r='2.7' fill-opacity='0.13'/%3E%3Ccircle cx='526.9' cy='113.3' r='2.3' fill-opacity='0.32'/%3E%3Ccircle cx='228.3' cy='287.2' r='1.8' fill-opacity='0.12'/%3E%3Ccircle cx='377.4' cy='272.1' r='1.6' fill-opacity='0.16'/%3E%3Ccircle cx='578.4' cy='537.6' r='2' fill-opacity='0.33'/%3E%3Ccircle cx='260.3' cy='495.7' r='3.1' fill-opacity='0.30'/%3E%3Ccircle cx='666.1' cy='253.1' r='3.5' fill-opacity='0.37'/%3E%3Ccircle cx='343' cy='208.1' r='2.6' fill-opacity='0.24'/%3E%3Ccircle cx='736' cy='123.1' r='2.9' fill-opacity='0.13'/%3E%3Ccircle cx='483.9' cy='116.1' r='1.2' fill-opacity='0.26'/%3E%3Ccircle cx='529.5' cy='504.4' r='3' fill-opacity='0.17'/%3E%3Ccircle cx='199.8' cy='57.3' r='3.1' fill-opacity='0.33'/%3E%3Ccircle cx='363' cy='420.9' r='2.7' fill-opacity='0.38'/%3E%3Ccircle cx='183.6' cy='369.1' r='1.5' fill-opacity='0.16'/%3E%3Ccircle cx='660.3' cy='298.9' r='1.3' fill-opacity='0.25'/%3E%3Ccircle cx='285' cy='356.7' r='3.5' fill-opacity='0.33'/%3E%3Ccircle cx='356.5' cy='286.3' r='1' fill-opacity='0.23'/%3E%3Ccircle cx='470.4' cy='414' r='1.4' fill-opacity='0.30'/%3E%3Ccircle cx='217.1' cy='143.6' r='1.1' fill-opacity='0.28'/%3E%3Ccircle cx='562.8' cy='517.7' r='1.8' fill-opacity='0.40'/%3E%3Ccircle cx='520.2' cy='136.1' r='3.2' fill-opacity='0.17'/%3E%3Ccircle cx='640.7' cy='446.8' r='2.1' fill-opacity='0.23'/%3E%3Ccircle cx='754.7' cy='502.1' r='1.9' fill-opacity='0.35'/%3E%3Ccircle cx='369.4' cy='144' r='1.5' fill-opacity='0.34'/%3E%3Ccircle cx='257.4' cy='489.7' r='1.2' fill-opacity='0.27'/%3E%3Ccircle cx='214' cy='305.5' r='1.3' fill-opacity='0.19'/%3E%3Ccircle cx='310.5' cy='395.6' r='1.7' fill-opacity='0.15'/%3E%3Ccircle cx='364.4' cy='471.6' r='3.1' fill-opacity='0.41'/%3E%3Ccircle cx='669.6' cy='320.7' r='1.1' fill-opacity='0.27'/%3E%3Ccircle cx='804.2' cy='107.9' r='1.5' fill-opacity='0.42'/%3E%3Ccircle cx='798.3' cy='348.6' r='1.2' fill-opacity='0.22'/%3E%3Ccircle cx='544.8' cy='31' r='2.5' fill-opacity='0.31'/%3E%3Ccircle cx='383.5' cy='111.4' r='3.1' fill-opacity='0.21'/%3E%3Ccircle cx='641.8' cy='326.3' r='2.3' fill-opacity='0.13'/%3E%3Ccircle cx='809.7' cy='374.2' r='2.1' fill-opacity='0.32'/%3E%3Ccircle cx='444' cy='320.8' r='2.7' fill-opacity='0.36'/%3E%3Ccircle cx='462.7' cy='411.6' r='1.9' fill-opacity='0.27'/%3E%3Ccircle cx='575.8' cy='346.6' r='1.2' fill-opacity='0.30'/%3E%3C/g%3E%3C/svg%3E"),
    /* textura:salpicado */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='%23fff0c0' fill-opacity='.07'%3E%3Ccircle cx='406.4' cy='-0.4' r='2'/%3E%3Ccircle cx='397.7' cy='95.9' r='12.5'/%3E%3Ccircle cx='423' cy='-7.4' r='2.4'/%3E%3Ccircle cx='403' cy='91.9' r='5.4'/%3E%3Ccircle cx='410.1' cy='44.4' r='11.6'/%3E%3Ccircle cx='343' cy='76' r='11'/%3E%3Ccircle cx='446' cy='54.1' r='12.3'/%3E%3Ccircle cx='409.4' cy='68.7' r='9.4'/%3E%3Ccircle cx='367.1' cy='61.3' r='3'/%3E%3Ccircle cx='399.4' cy='78.2' r='9.9'/%3E%3Ccircle cx='367.3' cy='45' r='9'/%3E%3Ccircle cx='426.2' cy='87.5' r='3.8'/%3E%3Ccircle cx='355.1' cy='75.6' r='2.8'/%3E%3Ccircle cx='377' cy='77.7' r='2.1'/%3E%3Ccircle cx='208.6' cy='295.5' r='8.8'/%3E%3Ccircle cx='230' cy='278.2' r='9.7'/%3E%3Ccircle cx='245.9' cy='344.5' r='10.9'/%3E%3Ccircle cx='173.1' cy='236.6' r='6.7'/%3E%3Ccircle cx='256.3' cy='264.4' r='4.8'/%3E%3Ccircle cx='187.7' cy='332.9' r='6.2'/%3E%3Ccircle cx='215.3' cy='270.9' r='10.2'/%3E%3Ccircle cx='236.2' cy='289.8' r='3.8'/%3E%3Ccircle cx='232.1' cy='305.9' r='8'/%3E%3Ccircle cx='248.2' cy='244' r='3.7'/%3E%3Ccircle cx='211.1' cy='284.5' r='10.8'/%3E%3Ccircle cx='202.6' cy='257.5' r='10.3'/%3E%3Ccircle cx='178.5' cy='215.3' r='2.1'/%3E%3Ccircle cx='200.8' cy='267.2' r='3.5'/%3E%3Ccircle cx='438' cy='340' r='3.8'/%3E%3Ccircle cx='379.7' cy='240.7' r='9.6'/%3E%3Ccircle cx='415.5' cy='354.9' r='2.2'/%3E%3Ccircle cx='404' cy='343.2' r='10.1'/%3E%3Ccircle cx='443' cy='353.9' r='2.6'/%3E%3Ccircle cx='420.6' cy='311.2' r='7.9'/%3E%3Ccircle cx='374.3' cy='256.2' r='5.2'/%3E%3Ccircle cx='450.6' cy='292.4' r='4.2'/%3E%3Ccircle cx='426.9' cy='295.6' r='9.9'/%3E%3Ccircle cx='428' cy='271.2' r='6.2'/%3E%3Ccircle cx='463.9' cy='256.1' r='5.9'/%3E%3Ccircle cx='420.7' cy='279.8' r='4.4'/%3E%3Ccircle cx='431.6' cy='375.4' r='3.3'/%3E%3Ccircle cx='424.4' cy='302.3' r='7.3'/%3E%3Ccircle cx='94.6' cy='329.4' r='4.2'/%3E%3Ccircle cx='81' cy='290.5' r='3.2'/%3E%3Ccircle cx='73.4' cy='393.5' r='11'/%3E%3Ccircle cx='130.1' cy='296.7' r='8.1'/%3E%3Ccircle cx='114.9' cy='327.1' r='12.7'/%3E%3Ccircle cx='91.9' cy='328.3' r='12.8'/%3E%3Ccircle cx='121.5' cy='301.9' r='2.9'/%3E%3Ccircle cx='67.9' cy='361.2' r='2'/%3E%3Ccircle cx='51.7' cy='284.7' r='5.5'/%3E%3Ccircle cx='112.1' cy='378.1' r='5.4'/%3E%3Ccircle cx='79.5' cy='260.5' r='7.5'/%3E%3Ccircle cx='142.5' cy='339.3' r='9.3'/%3E%3Ccircle cx='49.4' cy='340.9' r='6.5'/%3E%3Ccircle cx='48.9' cy='291.4' r='10.9'/%3E%3Ccircle cx='257.1' cy='452.8' r='8.8'/%3E%3Ccircle cx='269.2' cy='408.6' r='8.6'/%3E%3Ccircle cx='249.8' cy='451.7' r='8.1'/%3E%3Ccircle cx='311.8' cy='394.2' r='3'/%3E%3Ccircle cx='323.7' cy='388.7' r='10.5'/%3E%3Ccircle cx='243.4' cy='448.6' r='8.9'/%3E%3Ccircle cx='259.9' cy='385.1' r='4.1'/%3E%3Ccircle cx='233.1' cy='380.3' r='2.3'/%3E%3Ccircle cx='282.8' cy='433.7' r='10.7'/%3E%3Ccircle cx='266.6' cy='319.9' r='11.4'/%3E%3Ccircle cx='272.2' cy='355.1' r='9.4'/%3E%3Ccircle cx='304.1' cy='462.5' r='2.1'/%3E%3Ccircle cx='298.6' cy='393.5' r='5.7'/%3E%3Ccircle cx='216.2' cy='429.3' r='10.8'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 3.1rem),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 3.1rem);
  background-size: 64% 100%, 22rem 22rem, auto, auto;
  background-position: 50% 0, 50% 40%, 50% 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, repeat;
  -webkit-mask-image: radial-gradient(ellipse calc(var(--sw) * 1.05) calc(var(--sh) * 1.05) at var(--sx) var(--sy), #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse calc(var(--sw) * 1.05) calc(var(--sh) * 1.05) at var(--sx) var(--sy), #000 40%, transparent 100%);
}
/* Pizarra de los lados (manchas y rayas de tiza; el foco las tapa casi del todo), el campo de fútbol
   enorme borrado en la pizarra (círculo central, línea de medio campo y las dos medias lunas: arcos
   anchos un poco más oscuros que dan profundidad) y viñeta */
.hk-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 85% 80% at 50% 40%, transparent 58%, rgba(4, 10, 16, .38) 100%),
    /* textura:campo */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='s' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='13'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.075' stroke-width='46' filter='url(%23s)'%3E%3Ccircle cx='800' cy='470' r='520'/%3E%3Cpath d='M800 -40V940'/%3E%3Ccircle cx='-120' cy='470' r='330'/%3E%3Ccircle cx='1720' cy='470' r='330'/%3E%3C/g%3E%3Cg fill='none' stroke='%23eaf6ff' stroke-opacity='.045' stroke-width='3' stroke-dasharray='120 14 60 22'%3E%3Ccircle cx='800' cy='470' r='520'/%3E%3Cpath d='M800 -40V940'/%3E%3Ccircle cx='-120' cy='470' r='330'/%3E%3Ccircle cx='1720' cy='470' r='330'/%3E%3C/g%3E%3C/svg%3E"),
    /* textura:pizarra */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cdefs%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.021' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  3 0 0 0 -1.62'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.017' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 .03  0 0 0 0 .06  -3.2 0 0 0 1.38'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='480' height='480' filter='url(%23d)' opacity='.3'/%3E%3Crect width='480' height='480' filter='url(%23l)' opacity='.07'/%3E%3Cg fill='%23dff4ff' filter='url(%23b)'%3E%3Cellipse cx='375.9' cy='125.7' rx='92' ry='17.9' transform='rotate(-32.7 375.9 125.7)' fill-opacity='0.025'/%3E%3Cellipse cx='118.7' cy='244' rx='55.5' ry='20.2' transform='rotate(-16.6 118.7 244)' fill-opacity='0.034'/%3E%3Cellipse cx='9.6' cy='189.9' rx='30.7' ry='13.2' transform='rotate(-43.2 9.6 189.9)' fill-opacity='0.029'/%3E%3Cellipse cx='489.6' cy='189.9' rx='30.7' ry='13.2' transform='rotate(-43.2 489.6 189.9)' fill-opacity='0.047'/%3E%3Cellipse cx='77.4' cy='75.9' rx='72' ry='11' transform='rotate(-26.2 77.4 75.9)' fill-opacity='0.054'/%3E%3C/g%3E%3Cg fill='none' stroke='%23eaf6ff' stroke-linecap='round'%3E%3Cpath d='M336.6 399.1Q418.4 405.9 499 421.3' stroke-opacity='0.067' stroke-width='1.15'/%3E%3Cpath d='M-143.4 399.1Q-61.6 405.9 19 421.3' stroke-opacity='0.067' stroke-width='1.15'/%3E%3Cpath d='M96.7 384.1Q276.6 417.1 454.5 459.7' stroke-opacity='0.045' stroke-width='0.55'/%3E%3Cpath d='M216.5 234.4Q326.8 296.4 442.3 348.1' stroke-opacity='0.050' stroke-width='1.23'/%3E%3Cpath d='M60.4 277.8Q85.7 294.5 108.9 313.9' stroke-opacity='0.085' stroke-width='0.84'/%3E%3Cpath d='M74.1 318.8Q89 331.3 102.1 345.6' stroke-opacity='0.109' stroke-width='0.96'/%3E%3Cpath d='M406.2 420.3Q427.9 456.3 454.7 488.8' stroke-opacity='0.063' stroke-width='0.91'/%3E%3Cpath d='M406.2 -59.7Q427.9 -23.7 454.7 8.8' stroke-opacity='0.063' stroke-width='0.91'/%3E%3Cpath d='M144.8 284.9Q150.3 296 155.6 307.3' stroke-opacity='0.062' stroke-width='1.36'/%3E%3Cpath d='M315.7 327.6Q317.8 338.4 319.8 349.4' stroke-opacity='0.063' stroke-width='0.62'/%3E%3Cpath d='M307.5 31.3Q305.4 61.4 304.9 91.7' stroke-opacity='0.089' stroke-width='0.62'/%3E%3Cpath d='M108.6 49.6Q108.4 62.4 106.2 75' stroke-opacity='0.090' stroke-width='0.60'/%3E%3Cpath d='M218.9 17.6Q207.8 56.8 194.7 95.4' stroke-opacity='0.058' stroke-width='1.40'/%3E%3Cpath d='M362.4 4.6Q349.8 25.6 335.1 45.2' stroke-opacity='0.064' stroke-width='1.33'/%3E%3Cpath d='M464.9 230.6Q439.5 255.5 416.8 283' stroke-opacity='0.097' stroke-width='1.11'/%3E%3Cpath d='M172.3 380.2Q160.6 388.3 150.3 398' stroke-opacity='0.115' stroke-width='0.76'/%3E%3Cpath d='M78.8 153.6Q53 166.4 26.8 178.4' stroke-opacity='0.097' stroke-width='1.31'/%3E%3Cpath d='M290.7 420.1Q260 431.5 228.2 439.1' stroke-opacity='0.113' stroke-width='0.86'/%3E%3Cpath d='M153.1 61.4Q134.2 61.4 115.5 63.8' stroke-opacity='0.091' stroke-width='1.08'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, cover, 30rem 30rem;
  background-position: 0 0, 50% 45%, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  -webkit-mask-image: radial-gradient(ellipse var(--sw) var(--sh) at var(--sx) var(--sy), transparent 30%, #000 88%);
          mask-image: radial-gradient(ellipse var(--sw) var(--sh) at var(--sx) var(--sy), transparent 30%, #000 88%);
}
/* Rayos giratorios (pack, victoria): <i class="hk-bg__rays"> */
.hk-bg__rays { display: none; }
.hk-bg--rays .hk-bg__rays, .hk-bg--pack .hk-bg__rays, .hk-bg--win .hk-bg__rays {
  display: block; position: absolute; left: var(--sx); top: var(--sy); width: 150vmax; height: 150vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgb(var(--a1) / .26) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 42%);
          mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 42%);
  animation: hk-spin 40s linear infinite;
}
@keyframes hk-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.hk-bg--menu { --sy: 30.8%; }   /* la de por defecto (foco dorado): la clase queda por claridad */
.hk-bg--shop { --a0: 190 252 250; --a1: 160 242 246; --a2: 36 178 204; --a3: 24 108 138; --a4: 44 64 104; --grid: rgba(220, 255, 255, .08); }
.hk-bg--pack { --a0: 255 200 250; --a1: 255 160 246; --a2: 200 60 212; --a3: 118 36 150; --a4: 64 42 104; --sy: 38%; --sw: 40%; --sh: 60%; --grid: rgba(255, 220, 255, .07); }
.hk-bg--win  { --a0: 255 244 130; --a1: 255 234 96; --a2: 242 164 42; --a3: 198 114 42; --a4: 110 76 74; --sw: 54%; --sh: 76%; }
.hk-bg--lose { --a0: 176 200 222; --a1: 150 178 202; --a2: 84 112 142; --a3: 50 70 98; --a4: 40 50 82; --e1: #1d1f36; --e2: #172236; --e3: #13293a; --e4: #0e202c; --grid: rgba(220, 235, 255, .05); }
.hk-bg--match { --a0: 110 130 150; --a1: 90 110 132; --a2: 42 60 82; --a3: 26 38 54; --a4: 20 26 40; --e1: #12131f; --e2: #101a26; --e3: #0f2230; --e4: #0a1822; --grid: transparent; }

/* ═════════════════════════════════════ TIPOGRAFÍA ═════════════════════════════════════
   Contorno con -webkit-text-stroke + paint-order (el trazo queda por DEBAJO del relleno: la letra no
   adelgaza) y la sombra de abajo con text-shadow. --hk-sc = color del contorno, --hk-sw = grosor
   (el visible es la mitad), --hk-sd = caída de la sombra. */
.hk-title, .hk-num, .hk-stroke, .hk-label {
  --hk-sc: var(--hk-ink); --hk-sw: .16em; --hk-sd: .085em;
  font-family: var(--hk-font-title); font-weight: 400; line-height: 1.02; letter-spacing: .015em;
  -webkit-text-stroke: var(--hk-sw) var(--hk-sc);
  paint-order: stroke fill;
  text-shadow: 0 var(--hk-sd) 0 var(--hk-sc), 0 calc(var(--hk-sd) + .06em) .12em rgba(0, 0, 0, .28);
}
/* Título grande amarillo-naranja con contorno marrón grueso («Lola Flamenca») */
.hk-title { --hk-sc: var(--hk-ink-title); --hk-sw: .2em; --hk-sd: .09em; color: var(--hk-title); font-size: var(--hk-fs-h1); margin: 0; }
.hk-title--display { font-size: var(--hk-fs-display); --hk-sw: .18em; }
.hk-title--h2 { font-size: var(--hk-fs-h2); }
.hk-title--h3 { font-size: var(--hk-fs-h3); --hk-sw: .22em; }
.hk-title--white { color: #fff; --hk-sc: var(--hk-ink); }
/* Números blancos con contorno (500/500, 12.480, marcador) */
.hk-num { color: #fff; font-size: var(--hk-fs-h3); --hk-sw: .17em; --hk-sd: .07em; font-variant-numeric: tabular-nums; }
.hk-num--lg { font-size: var(--hk-fs-h1); }
.hk-num--sm { font-size: var(--hk-fs-body); --hk-sw: .2em; }
/* Etiqueta corta en Lilita (encima de las barras, «Velocidad») */
.hk-label { color: #fff; font-size: 1.02rem; --hk-sw: .2em; --hk-sd: .06em; }
.hk-stroke { color: #fff; }
/* Colores de acento para cualquier texto con contorno */
.hk-c-accent { color: var(--hk-accent); }
.hk-c-title { color: var(--hk-title); }
.hk-c-value { color: var(--hk-value); }
.hk-c-cyan { color: var(--hk-cyan); }
.hk-c-dim { color: var(--hk-text-dim); }
/* Texto de apoyo (Baloo 2): sin contorno, con una sombra corta para leerse sobre el foco */
.hk-text { font-family: var(--hk-font-body); font-weight: 700; font-size: var(--hk-fs-body); line-height: 1.3; color: var(--hk-text-dim);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55); -webkit-text-stroke: 0; }
.hk-text--sm { font-size: var(--hk-fs-sm); }
.hk-text--xs { font-size: var(--hk-fs-xs); }
.hk-text--strong { color: #fff; font-weight: 800; }
/* Línea de datos «Nivel ★6  ⚡ 956» */
.hk-meta { display: inline-flex; align-items: center; gap: .35em; }
.hk-meta > .hk-ico { width: 1.35em; height: 1.35em; }

/* ═════════════════════════════════════ ICONOS ═════════════════════════════════════
   kitIcon(nombre) → <svg class="hk-ico">; kitGlyph(nombre, tono) → <svg class="hk-glyph"> */
.hk-ico, .hk-glyph { display: inline-block; width: 1.4em; height: 1.4em; flex: none; vertical-align: middle; overflow: visible; }
.hk-ico--sm { width: 1.1em; height: 1.1em; }
.hk-ico--lg { width: 2.2em; height: 2.2em; }
.hk-ico--xl { width: 3.2em; height: 3.2em; }

/* Baldosa de icono (estadísticas): cuadrado redondeado con fondo cálido, contorno y brillo */
.hk-tile {
  --t1: #ff8a4c; --t2: #e3321b; --t3: #8e1208;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 2.35rem; height: 2.35rem; border-radius: .55rem;
  border: var(--hk-line) solid var(--hk-ink);
  background: radial-gradient(circle at 30% 25%, var(--t1) 0%, var(--t2) 55%, var(--t3) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25);
  overflow: hidden;
}
.hk-tile::after { content: ''; position: absolute; right: 12%; top: 9%; width: 22%; height: 14%; border-radius: 50%; background: rgba(255, 255, 255, .85); transform: rotate(35deg); }
.hk-tile > .hk-ico { width: 84%; height: 84%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.hk-tile--blue   { --t1: #7fd8ff; --t2: #1f8ae6; --t3: #0b3f8a; }
.hk-tile--purple { --t1: #e7a0ff; --t2: #9f35e0; --t3: #4a0e82; }
.hk-tile--green  { --t1: #c9ff6a; --t2: #45c51a; --t3: #1a6408; }
.hk-tile--teal   { --t1: #8ff4ff; --t2: #10aace; --t3: #075a78; }
.hk-tile--gold   { --t1: #fff09a; --t2: #ffb315; --t3: #a55a00; }

/* ═════════════════════════════════════ BOTONES ═════════════════════════════════════
   <button class="hk-btn hk-btn--green">Mejorar</button>
   Variantes de color: --green (primario) --teal (secundario tipo pestaña) --blue --red --gold --purple --gray
   Tamaños: --sm --lg --xl (JUGAR) · --block (ancho entero) · --col (dos líneas) · [disabled] */
.hk-btn {
  --hi: var(--hk-green-hi); --lo: var(--hk-green-lo); --lip: var(--hk-green-lip); --bink: var(--hk-green-ink);
  --hk-sc: var(--bink); --hk-sw: .18em; --hk-sd: .07em;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 44px; padding: .42em 1.1em .5em; margin: 0 0 .22em;
  font-family: var(--hk-font-title); font-size: 1.15rem; line-height: 1.05; color: #fff; letter-spacing: .02em; white-space: nowrap;
  -webkit-text-stroke: var(--hk-sw) var(--hk-sc); paint-order: stroke fill;
  text-shadow: 0 var(--hk-sd) 0 var(--hk-sc);
  border: var(--hk-line) solid var(--hk-ink); border-radius: .62em;
  background: linear-gradient(180deg, var(--hi) 0%, var(--hi) 49%, var(--lo) 51%, var(--lo) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),         /* filo de luz de arriba */
    inset 0 -.2em 0 var(--lip),                       /* canto de abajo */
    0 .2em 0 var(--hk-ink),                           /* grosor */
    0 .35em .6em rgba(0, 0, 0, .28);
  cursor: pointer; transform: translateY(0);
  transition: transform .06s ease-out, box-shadow .06s ease-out, filter .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.hk-btn::after {  /* punto de brillo arriba a la derecha */
  content: ''; position: absolute; z-index: 1; right: .42em; top: .26em; width: .5em; height: .3em;
  border-radius: 50%; background: rgba(255, 255, 255, .9); transform: rotate(32deg); pointer-events: none;
}
.hk-btn > * { position: relative; z-index: 2; }
.hk-btn:hover { filter: brightness(1.06); }
.hk-btn:active, .hk-btn.is-pressed {
  transform: translateY(.2em);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 -.08em 0 var(--lip), 0 0 0 var(--hk-ink), 0 .1em .25em rgba(0, 0, 0, .3);
}
.hk-btn:focus-visible { outline: 3px solid #fff6a8; outline-offset: 3px; }
.hk-btn[disabled], .hk-btn.is-disabled {
  --hi: var(--hk-gray-hi); --lo: var(--hk-gray-lo); --lip: var(--hk-gray-lip); --bink: var(--hk-gray-ink);
  cursor: default; filter: none;
}
.hk-btn[disabled]:active { transform: none; }

.hk-btn--green  { --hi: var(--hk-green-hi);  --lo: var(--hk-green-lo);  --lip: var(--hk-green-lip);  --bink: var(--hk-green-ink); }
.hk-btn--blue   { --hi: var(--hk-blue-hi);   --lo: var(--hk-blue-lo);   --lip: var(--hk-blue-lip);   --bink: var(--hk-blue-ink); }
.hk-btn--red    { --hi: var(--hk-red-hi);    --lo: var(--hk-red-lo);    --lip: var(--hk-red-lip);    --bink: var(--hk-red-ink); }
.hk-btn--gold   { --hi: var(--hk-gold-hi);   --lo: var(--hk-gold-lo);   --lip: var(--hk-gold-lip);   --bink: var(--hk-gold-ink); }
.hk-btn--purple { --hi: var(--hk-purple-hi); --lo: var(--hk-purple-lo); --lip: var(--hk-purple-lip); --bink: var(--hk-purple-ink); }
.hk-btn--gray   { --hi: var(--hk-gray-hi);   --lo: var(--hk-gray-lo);   --lip: var(--hk-gray-lip);   --bink: var(--hk-gray-ink); }
/* Secundario turquesa tipo pestaña: cuerpo turquesa y píldora de cristal en la mitad de arriba */
.hk-btn--teal {
  --hi: #19b9da; --lo: #0a86ab; --lip: #055f7e; --bink: var(--hk-teal-ink);
  background: linear-gradient(180deg, #1ac4e4 0%, #0e9fc4 55%, #0a82a6 100%);
  box-shadow: inset 0 2px 0 #7cf1ff, inset 0 -.2em 0 var(--lip), 0 .2em 0 var(--hk-ink), 0 .35em .6em rgba(0, 0, 0, .28);
}
.hk-btn--teal::before {
  content: ''; position: absolute; z-index: 0; left: .28em; right: .28em; top: .22em; height: 46%;
  border-radius: 999px; background: rgba(210, 248, 255, .42); pointer-events: none;
}
.hk-btn--teal:active { box-shadow: inset 0 2px 0 #7cf1ff, inset 0 -.08em 0 var(--lip), 0 0 0 var(--hk-ink); }

.hk-btn--sm { font-size: .95rem; padding: .34em .85em .4em; border-radius: .55em; }
.hk-btn--lg { font-size: 1.5rem; padding: .42em 1.35em .5em; }
.hk-btn--xl { font-size: var(--hk-fs-display); padding: .3em 1.4em .38em; border-radius: .42em; --hk-sw: .14em; }
.hk-btn--xl::after { width: .34em; height: .2em; right: .3em; top: .2em; }
.hk-btn--block { display: flex; width: 100%; }
.hk-btn--col { flex-direction: column; gap: .05em; }
.hk-btn__sub { font-family: var(--hk-font-body); font-weight: 800; font-size: .62em; -webkit-text-stroke: .22em var(--hk-sc); letter-spacing: 0; }
.hk-btn > .hk-ico { width: 1.25em; height: 1.25em; }

/* Precio dentro de un botón («1.000 [moneda]»): número gris claro con contorno, moneda detrás */
.hk-price { display: inline-flex; align-items: center; gap: .18em; color: #eef1f4; font-family: var(--hk-font-title); }
.hk-price > .hk-ico { width: 1.15em; height: 1.15em; margin-right: -.1em; }
.hk-price--short { color: #ffb4a8; }   /* no te llega */
/* Botón de precio: texto a la izquierda, precio a la derecha */
.hk-btn--price { justify-content: space-between; gap: .9em; }

/* ── Botón redondo con icono (cerrar, colección, ver, volver) ──
   <button class="hk-round hk-round--red">[glifo]</button> · colores: --blue --red --green --gold --teal --purple
   --ring: aro blanco grueso (para ponerlo encima del partido o de un fondo muy cargado) · --sm / --lg */
.hk-round {
  --hi: #52b8ff; --lo: #1f8ff5; --lip: #0f5fcc; --rim: #082a6b; --gl: #072765;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 3.4rem; height: 3.4rem; padding: 0; margin: 0 0 .2rem;
  border-radius: 50%; border: 2px solid var(--rim);
  background: radial-gradient(ellipse 72% 58% at 50% 32%, var(--hi) 0%, var(--hi) 42%, var(--lo) 100%);
  box-shadow:
    inset 0 -.3rem 0 var(--lip),                    /* canto de la ficha */
    inset 0 2px 1px rgba(255, 255, 255, .5),         /* filo de luz */
    0 .14rem 0 var(--rim),                           /* grosor */
    0 .32rem .5rem rgba(0, 0, 0, .32);
  color: var(--gl); cursor: pointer; transition: transform .06s ease-out, box-shadow .06s ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hk-round::after { content: ''; position: absolute; right: 15%; top: 10%; width: 20%; height: 12%; border-radius: 50%; background: rgba(255, 255, 255, .9); transform: rotate(40deg); }
.hk-round > svg { width: 60%; height: 60%; margin-top: -5%; }
.hk-round:active { transform: translateY(.14rem); box-shadow: inset 0 -.14rem 0 var(--lip), inset 0 2px 1px rgba(255, 255, 255, .4), 0 0 0 var(--rim), 0 .12rem .25rem rgba(0, 0, 0, .3); }
.hk-round:focus-visible { outline: 3px solid #fff6a8; outline-offset: 3px; }
.hk-round--red    { --hi: #ff7a6e; --lo: #f0453a; --lip: #b8231b; --rim: #5c0806; --gl: #4a0605; }
.hk-round--green  { --hi: #c2f73e; --lo: #6fd51a; --lip: #3c9a08; --rim: #174a00; --gl: #0f3a00; }
.hk-round--gold   { --hi: #ffe45c; --lo: #ffb41a; --lip: #cc7a00; --rim: #5a2c00; --gl: #4a2400; }
.hk-round--teal   { --hi: #74e8f7; --lo: #17b3d6; --lip: #0a7fa3; --rim: #043546; --gl: #04303f; }
.hk-round--purple { --hi: #e88fff; --lo: #b43cee; --lip: #7a18b6; --rim: #300858; --gl: #2c0450; }
.hk-round--sm { width: 2.6rem; height: 2.6rem; }
.hk-round--lg { width: 4.3rem; height: 4.3rem; }
/* --ring: aro blanco grueso (encima del partido o de un fondo muy cargado) */
.hk-round--ring { box-shadow: 0 0 0 .2rem #fff, 0 0 0 calc(.2rem + 2px) var(--rim), inset 0 -.3rem 0 var(--lip), inset 0 2px 1px rgba(255, 255, 255, .5), 0 .4rem .6rem rgba(0, 0, 0, .35); margin: .3rem; }
.hk-round--ring:active { box-shadow: 0 0 0 .2rem #fff, 0 0 0 calc(.2rem + 2px) var(--rim), inset 0 -.14rem 0 var(--lip); }

/* ═════════════════════════════════════ PANELES ═════════════════════════════════════
   <section class="hk-panel"><header class="hk-panel__head">…</header><div class="hk-panel__body">…</div></section>
   Pizarra oscura translúcida, esquinas redondeadas, contorno oscuro y filo claro por dentro. */
.hk-panel {
  position: relative; border-radius: var(--hk-r-lg);
  background: var(--hk-slate);
  border: 1.5px solid var(--hk-ink);
  box-shadow: inset 0 0 0 1.5px var(--hk-slate-ring), var(--hk-drop);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  overflow: hidden;
}
.hk-panel::after { content: ''; position: absolute; right: .55rem; top: .38rem; width: .55rem; height: .3rem; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(35deg); pointer-events: none; }
.hk-panel__head {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .45rem .9rem .5rem; background: var(--hk-slate-head);
  border-bottom: 1.5px solid rgba(0, 0, 0, .6); box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.hk-panel__head > .hk-ico { width: 2.1rem; height: 2.1rem; }
.hk-panel__body { padding: .55rem .8rem .75rem; }
.hk-panel--solid { --hk-slate: rgba(20, 17, 16, .86); }
/* Hueco hundido dentro de un panel */
.hk-well { background: var(--hk-well); border-radius: var(--hk-r-md); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 255, 255, .1); }

/* Ventana modal: panel de pizarra con cabecera y botón redondo rojo de cerrar */
.hk-modal { position: relative; max-width: min(34rem, 92vw); border-radius: var(--hk-r-xl); }
.hk-modal > .hk-round--red { position: absolute; right: -.7rem; top: -.8rem; z-index: 2; }

/* ═════════════════════════════════════ BARRAS ═════════════════════════════════════
   <div class="hk-bar" style="--p:.45;--add:.08"><i class="hk-bar__fill"></i><i class="hk-bar__add"></i><span class="hk-bar__txt">…</span></div>
   --p: lo lleno (0..1) · --add: lo que suma la próxima mejora (segmento turquesa con «+1»). */
.hk-bar {
  --p: 0; --add: 0;
  --f-hi: #c3fb0e; --f-lo: #5fd906;
  position: relative; height: 1.3rem; border-radius: 999px; overflow: hidden;
  background: #1d1b1d; border: 1.5px solid var(--hk-ink);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45);
}
.hk-bar::before {  /* franja clara del carril (cristal) */
  content: ''; position: absolute; left: .35rem; right: .35rem; top: 12%; height: 36%; border-radius: 999px; background: rgba(255, 255, 255, .2);
}
.hk-bar::after {   /* punto de brillo al final del carril */
  content: ''; position: absolute; right: .3rem; top: 16%; width: .45rem; height: .28rem; border-radius: 50%; background: rgba(255, 255, 255, .7); transform: rotate(25deg);
}
.hk-bar__fill, .hk-bar__add { position: absolute; top: 0; bottom: 0; }
.hk-bar__fill {
  left: 0; width: calc(var(--p) * 100%); z-index: 1;
  background: linear-gradient(180deg, var(--f-hi) 0 50%, var(--f-lo) 50% 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 1.5px 0 0 var(--hk-ink);
  border-radius: 999px 0 0 999px; transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
.hk-bar__add {
  left: calc(var(--p) * 100%); width: calc(var(--add) * 100%); z-index: 1;
  background: linear-gradient(180deg, #56e6ff 0 50%, #16b3dd 50% 100%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 1.5px 0 0 var(--hk-ink);
  animation: hk-add-pulse 1.3s ease-in-out infinite alternate;
}
@keyframes hk-add-pulse { from { filter: brightness(.9); } to { filter: brightness(1.18); } }
.hk-bar__txt {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .2em;
  font-family: var(--hk-font-title); font-size: .95rem; line-height: 1; color: #fff;
  -webkit-text-stroke: .2em var(--hk-ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--hk-ink);
}
/* «+1» pegado al segmento turquesa */
.hk-bar__plus {
  position: absolute; z-index: 2; top: 50%; left: min(calc((var(--p) + var(--add)) * 100% + .3rem), calc(100% - 2.4em)); transform: translateY(-50%);
  font-family: var(--hk-font-title); font-size: .92rem; line-height: 1; color: var(--hk-cyan);
  -webkit-text-stroke: .22em var(--hk-ink); paint-order: stroke fill;
}
.hk-bar--lg { height: 1.7rem; }
.hk-bar--lg .hk-bar__txt { font-size: 1.2rem; }
.hk-bar--sm { height: .85rem; }
.hk-bar--sm::before, .hk-bar--sm::after { display: none; }
.hk-bar--xp { --f-hi: #8ee6ff; --f-lo: #1ea4e8; }
.hk-bar--gold { --f-hi: #ffe45a; --f-lo: #ffab0a; }
.hk-bar--power { --f-hi: #f2a6ff; --f-lo: #b63cf0; }
.hk-bar--cards { --f-hi: #58dcff; --f-lo: #149ee0; }   /* cartas para mejorar (azul) */
.hk-bar.is-full .hk-bar__fill { --f-hi: #c3fb0e; --f-lo: #5fd906; animation: hk-full 1s ease-in-out infinite alternate; }
@keyframes hk-full { from { filter: brightness(1); } to { filter: brightness(1.22); } }

/* Fila de estadística: baldosa + (etiqueta encima de la barra) + valor */
.hk-stat { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .45rem; align-items: center; }
.hk-stat > .hk-tile { grid-row: 1 / 3; }
.hk-stat__name { grid-column: 2; text-align: center; font-size: .98rem; margin-bottom: .08rem; }
.hk-stat > .hk-bar { grid-column: 2; }
.hk-stat__val { grid-column: 3; grid-row: 2; min-width: 1.6em; text-align: right; color: var(--hk-value); font-size: 1.12rem; }
.hk-stats { display: grid; gap: .3rem; }

/* ═════════════════════════════════════ INSIGNIAS ═════════════════════════════════════ */
/* Nivel: estrella azul de seis puntas con el número */
.hk-lvl { position: relative; display: inline-grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; }
.hk-lvl > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hk-lvl > b { position: relative; font-family: var(--hk-font-title); font-weight: 400; font-size: 1.02rem; line-height: 1; color: #fff; margin-top: .06em;
  -webkit-text-stroke: .22em #062347; paint-order: stroke fill; }
.hk-lvl--lg { width: 3rem; height: 3rem; }
.hk-lvl--lg > b { font-size: 1.45rem; }
.hk-lvl--sm { width: 1.7rem; height: 1.7rem; }
.hk-lvl--sm > b { font-size: .8rem; }

/* Notificación: etiqueta roja con pico, número blanco */
.hk-notif {
  position: absolute; z-index: 3; top: -.55rem; right: -.35rem; min-width: 1.5rem; height: 1.55rem; padding: 0 .32rem;
  display: grid; place-items: center; border-radius: .35rem .35rem .35rem .35rem;
  font-family: var(--hk-font-title); font-size: .95rem; line-height: 1; color: #fff;
  -webkit-text-stroke: .2em #4a0406; paint-order: stroke fill;
  background: linear-gradient(180deg, #ff5a55 0 50%, #e0172a 50% 100%);
  border: 1.5px solid var(--hk-ink); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .5), 0 .1rem 0 var(--hk-ink);
  pointer-events: none;
}
.hk-notif::after {  /* pico hacia abajo a la izquierda */
  content: ''; position: absolute; left: .18rem; bottom: -.42rem; width: .5rem; height: .45rem;
  background: #e0172a; border: 1.5px solid var(--hk-ink); border-top: 0; border-right: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%); transform: skewY(-8deg);
}
.hk-notif--dot { min-width: 1rem; width: 1rem; height: 1rem; padding: 0; border-radius: 50%; }
.hk-notif--dot::after { display: none; }
.hk-notif--pop { animation: hk-bob 1.5s ease-in-out infinite; }
@keyframes hk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.14rem); } }

/* «¡NUEVO!» (sello amarillo inclinado) */
.hk-new {
  display: inline-block; padding: .1em .45em .14em; border-radius: .35em; transform: rotate(-8deg);
  font-family: var(--hk-font-title); font-size: .82rem; color: #fff; -webkit-text-stroke: .22em #5a1b00; paint-order: stroke fill;
  background: linear-gradient(180deg, #ffd84a 0 50%, #ff9a0a 50% 100%); border: 1.5px solid var(--hk-ink);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6), 0 .1rem 0 var(--hk-ink);
}

/* Píldora de recurso de la barra superior: icono que sobresale + número + botón «+» */
.hk-pill {
  position: relative; display: inline-flex; align-items: center; gap: .3rem; height: 2.3rem;
  padding: 0 .3rem 0 2.1rem; min-width: 7.5rem; border-radius: 999px;
  background: var(--hk-well); border: 1.5px solid var(--hk-ink); box-shadow: inset 0 0 0 1.5px var(--hk-slate-ring), inset 0 2px 4px rgba(0, 0, 0, .5);
}
.hk-pill > .hk-ico:first-child { position: absolute; left: -.55rem; top: 50%; width: 2.6rem; height: 2.6rem; transform: translateY(-50%); }
.hk-pill > .hk-num { flex: 1; text-align: right; font-size: 1.15rem; padding-right: .15rem; }
.hk-pill > .hk-round { width: 1.75rem; height: 1.75rem; margin: 0; box-shadow: inset 0 -.14rem 0 var(--lip), inset 0 1.5px 0 rgba(255, 255, 255, .55); }

/* ═════════════════════════════════════ PESTAÑAS ═════════════════════════════════════
   <nav class="hk-tabs"><button class="hk-tab is-active">[glifo]</button>…</nav>
   Grandes, turquesa de cristal; la activa sube y se ilumina. Se apoyan en .hk-shelf. */
.hk-tabs { display: flex; align-items: flex-end; gap: .3rem; padding: 0 .4rem; }
.hk-tab {
  position: relative; flex: 1 1 0; min-width: 0; height: 3.9rem; padding: .2rem 0 0; margin: 0;
  display: grid; place-items: center;
  border: var(--hk-line) solid var(--hk-ink); border-bottom: 0; border-radius: 1rem 1rem 0 0;
  background: linear-gradient(180deg, #243f4c 0%, #1a3440 100%);
  box-shadow: inset 0 2px 0 rgba(160, 200, 210, .3);
  color: #fff; cursor: pointer; transition: height .12s ease-out, filter .12s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hk-tab::before {  /* píldora de cristal */
  content: ''; position: absolute; left: .45rem; right: .45rem; top: .35rem; height: 42%; border-radius: .75rem;
  background: rgba(142, 164, 170, .38); pointer-events: none;
}
.hk-tab::after {  /* punto de brillo */
  content: ''; position: absolute; right: .55rem; top: .45rem; width: .5rem; height: .34rem; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: rotate(40deg); pointer-events: none;
}
.hk-tab > svg { position: relative; width: 3.25rem; height: 3.25rem; margin-top: .1rem; filter: drop-shadow(0 0 .25rem rgba(60, 220, 255, .35)); }
.hk-tab:has(.hk-tab__txt) > svg { width: 2.5rem; height: 2.5rem; }
.hk-tab.is-active:has(.hk-tab__txt) > svg { width: 3.1rem; height: 3.1rem; }
.hk-tab > .hk-tab__txt { position: relative; font-family: var(--hk-font-title); font-size: .85rem; color: #fff; -webkit-text-stroke: .2em var(--hk-ink); paint-order: stroke fill; margin-top: -.2rem; }
.hk-tab:hover { filter: brightness(1.1); }
.hk-tab.is-active {
  flex-grow: 1.3; height: 5.1rem;
  background: linear-gradient(180deg, #0a93b6 0%, #0a7292 45%, #0e5c7d 100%);
  box-shadow: inset 0 2.5px 0 #5ce6f3, inset 2.5px 0 0 rgba(92, 230, 243, .45), inset -2.5px 0 0 rgba(92, 230, 243, .45);
}
.hk-tab.is-active::before { background: rgba(178, 222, 236, .62); height: 40%; top: .45rem; }
.hk-tab.is-active::after { background: rgba(255, 255, 255, .85); }
.hk-tab.is-active > svg { width: 4.3rem; height: 4.3rem; }

/* Estante turquesa (la tira de cartas va encima) */
.hk-shelf {
  position: relative;
  background: linear-gradient(180deg, var(--hk-shelf-top) 0%, #073c58 35%, var(--hk-shelf-bot) 100%);
  border-top: var(--hk-line) solid #021a2e; box-shadow: inset 0 2.5px 0 var(--hk-shelf-rim);
}
.hk-strip { display: flex; gap: .3rem; padding: .45rem .5rem .55rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hk-strip::-webkit-scrollbar { display: none; }

/* ═════════════════════════════════════ TARJETA DE PERSONAJE (tira) ═════════════════════════════════════
   <button class="hk-card" data-rarity="rara">
     <canvas class="hk-card__art"></canvas> <span class="hk-lvl">…</span> <span class="hk-card__up">…</span>
     <span class="hk-card__count">4/10</span> <span class="hk-card__timer">…</span> <span class="hk-card__check">…</span>
     <span class="hk-card__foot">Rara</span></button>
   Estados: .is-selected (la del centro) · .is-locked (gris) · .is-equipped (con la marca verde) */
.hk-card {
  --w: 7.2rem;
  --band: var(--hk-rar-comun-band); --band-text: var(--hk-rar-comun-text); --count: var(--hk-rar-comun-count);
  position: relative; flex: none; display: block; width: var(--w); height: calc(var(--w) * .88); padding: 0; margin: 0;
  border: var(--hk-line) solid var(--hk-ink); border-radius: .8rem; overflow: hidden;
  background: linear-gradient(180deg, var(--hk-card-top) 0%, var(--hk-card-bot) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .07);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .1s ease-out;
}
.hk-card::before {  /* cristal de la mitad de arriba */
  content: ''; position: absolute; left: .32rem; right: .32rem; top: .3rem; height: 46%; border-radius: .55rem;
  background: var(--hk-card-glass);
}
.hk-card::after {  /* punto de brillo arriba a la izquierda */
  content: ''; position: absolute; left: .5rem; top: .42rem; width: .7rem; height: .38rem; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(-35deg);
}
.hk-card:active { transform: scale(.96); }
.hk-card[data-rarity="rara"]       { --band: var(--hk-rar-rara-band);       --band-text: var(--hk-rar-rara-text);       --count: var(--hk-rar-rara-count); }
.hk-card[data-rarity="epica"]      { --band: var(--hk-rar-epica-band);      --band-text: var(--hk-rar-epica-text);      --count: var(--hk-rar-epica-count); }
.hk-card[data-rarity="legendaria"] { --band: var(--hk-rar-legendaria-band); --band-text: var(--hk-rar-legendaria-text); --count: var(--hk-rar-legendaria-count); }
.hk-card__art { position: absolute; z-index: 1; left: 2%; top: 2%; width: 96%; height: 78%; display: block; }
.hk-card__foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 23%;
  display: grid; place-items: center; background: var(--band); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .16), 0 -1.5px 0 rgba(0, 0, 0, .35);
  font-family: var(--hk-font-title); font-size: calc(var(--w) * .145); line-height: 1; color: var(--band-text);
  -webkit-text-stroke: .2em var(--hk-ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--hk-ink);
}
.hk-card > .hk-lvl { position: absolute; z-index: 3; left: .1rem; top: .1rem; width: calc(var(--w) * .34); height: calc(var(--w) * .34); }
.hk-card > .hk-lvl > b { font-size: calc(var(--w) * .15); }
.hk-card__up { position: absolute; z-index: 3; right: .1rem; top: .05rem; width: calc(var(--w) * .3); height: calc(var(--w) * .33); animation: hk-bob 1.3s ease-in-out infinite; }
.hk-card__up > svg { width: 100%; height: 100%; }
.hk-card__count {
  position: absolute; z-index: 3; right: .35rem; top: .2rem; font-family: var(--hk-font-title); font-size: calc(var(--w) * .19); line-height: 1; color: var(--count);
  -webkit-text-stroke: .2em var(--hk-ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--hk-ink);
}
.hk-card__timer {
  position: absolute; z-index: 3; left: .3rem; right: .2rem; top: .2rem; display: flex; align-items: center; gap: .15rem;
  font-family: var(--hk-font-title); font-size: calc(var(--w) * .17); line-height: 1; color: #fff;
  -webkit-text-stroke: .2em var(--hk-ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--hk-ink);
}
.hk-card__timer > .hk-ico { width: 1.15em; height: 1.15em; }
.hk-card__check { position: absolute; z-index: 3; right: 4%; bottom: 17%; width: 46%; height: 46%; filter: drop-shadow(0 .1rem 0 rgba(0, 0, 0, .35)); }
.hk-card__check > svg { width: 100%; height: 100%; }
.hk-card__new { position: absolute; z-index: 4; left: .1rem; bottom: 22%; font-size: calc(var(--w) * .11); }
.hk-card.is-selected { border-color: var(--hk-select); box-shadow: 0 0 0 1.5px var(--hk-ink), 0 0 .8rem rgba(45, 227, 245, .75), inset 0 0 0 2px rgba(45, 227, 245, .6); }
.hk-card.is-locked .hk-card__art { filter: grayscale(1) contrast(.88) brightness(1.08); opacity: .82; }
.hk-card.is-locked::before { background: rgba(172, 206, 220, .22); }
.hk-card--sm { --w: 5.6rem; }
.hk-card--lg { --w: 9rem; }

/* ═════════════════════════════════════ CAJA DE CARTAS ═════════════════════════════════════
   Abanico de cartas (del color de su rareza) + caja de progreso con marco dorado y cuerpo de pizarra:
   la barra de cartas en la franja dorada de arriba y el botón de mejorar. */
.hk-cardfan { position: relative; width: 10.5rem; height: 8rem; margin: 0 auto -1.2rem; z-index: 0; }
.hk-cardfan__c {
  position: absolute; bottom: 0; width: 5.8rem; height: 7.6rem; border-radius: .6rem;
  border: var(--hk-line) solid var(--hk-ink); overflow: hidden;
  background: linear-gradient(180deg, #8f8a92 0%, #d88a4a 60%, #f39a2c 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 .2rem .4rem rgba(0, 0, 0, .3);
  transform-origin: 50% 110%;
}
.hk-cardfan__c::after { content: ''; position: absolute; right: .35rem; top: .3rem; width: .6rem; height: .35rem; border-radius: 50%; background: rgba(255, 255, 255, .8); transform: rotate(35deg); }
.hk-cardfan__c:nth-child(1) { left: 3.9rem; transform: rotate(9deg); filter: brightness(.82); }
.hk-cardfan__c:nth-child(2) { left: 2.9rem; transform: rotate(4deg); filter: brightness(.92); }
.hk-cardfan__c:nth-child(3) { left: 1.2rem; transform: rotate(-7deg); }
.hk-cardfan__c > canvas { position: absolute; inset: 6% 2% 10%; width: 96%; height: 84%; }
.hk-cardfan[data-rarity="epica"] .hk-cardfan__c { background: linear-gradient(180deg, #8b7fa4 0%, #b05ad8 60%, #d36cf2 100%); }
.hk-cardfan[data-rarity="rara"] .hk-cardfan__c { background: linear-gradient(180deg, #7f95a6 0%, #3d8fd8 60%, #45b4f2 100%); }
.hk-cardfan[data-rarity="comun"] .hk-cardfan__c { background: linear-gradient(180deg, #8d99a2 0%, #6c8497 60%, #7fa2b4 100%); }

.hk-cardbox {
  position: relative; z-index: 1; width: 13.5rem; border-radius: var(--hk-r-md);
  border: var(--hk-line) solid var(--hk-ink);
  background: rgba(24, 20, 19, .9);
  box-shadow: inset 0 0 0 .28rem var(--hk-gold-lo), inset 0 0 0 calc(.28rem + 1.5px) rgba(0, 0, 0, .55), inset 0 .5rem .8rem rgba(0, 0, 0, .35), var(--hk-drop);
  padding: 0 0 .6rem; overflow: visible;
}
.hk-cardbox__head {
  position: relative; display: flex; align-items: center; padding: .45rem .5rem .45rem 1.7rem; margin-bottom: .55rem;
  border-radius: calc(var(--hk-r-md) - 3px) calc(var(--hk-r-md) - 3px) 0 0;
  background: linear-gradient(180deg, var(--hk-gold-hi) 0 50%, var(--hk-gold-lo) 50% 100%);
  border-bottom: 2px solid var(--hk-ink); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6);
}
.hk-cardbox__head > .hk-bar { flex: 1; height: 1.75rem; background: #2a2b35; border-width: 2px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45), 0 .12rem 0 rgba(0, 0, 0, .45); }
.hk-cardbox__head > .hk-bar .hk-bar__txt { font-size: 1.25rem; }
.hk-cardbox__arrow { position: absolute; left: .05rem; top: -1.05rem; width: 2.7rem; height: 3.05rem; z-index: 3; filter: drop-shadow(0 .12rem 0 rgba(0, 0, 0, .35)); }
.hk-cardbox__arrow > svg { width: 100%; height: 100%; }
.hk-cardbox > .hk-btn { display: flex; width: calc(100% - 1.3rem); margin: 0 auto .2rem; }
.hk-cardbox.is-ready .hk-cardbox__arrow { animation: hk-bob 1.1s ease-in-out infinite; }

/* ═════════════════════════════════════ MARCADOR DEL PARTIDO ═════════════════════════════════════
   <div class="hk-score"> [lado] [goles] [reloj] [goles] [lado] </div> */
.hk-score { display: inline-flex; align-items: stretch; gap: 0; max-width: 100%; filter: drop-shadow(0 .25rem .35rem rgba(0, 0, 0, .35)); }
.hk-score__side {
  display: flex; align-items: center; gap: .4rem; padding: .25rem .6rem; min-width: min(9.5rem, 24vw);
  background: var(--hk-slate); border: 1.5px solid var(--hk-ink); box-shadow: inset 0 0 0 1.5px var(--hk-slate-ring);
}
.hk-score__side--l { border-radius: var(--hk-r-lg) 0 0 var(--hk-r-lg); border-right: 0; }
.hk-score__side--r { border-radius: 0 var(--hk-r-lg) var(--hk-r-lg) 0; border-left: 0; flex-direction: row-reverse; text-align: right; }
.hk-score__av { position: relative; width: 2.5rem; height: 2.5rem; border-radius: .55rem; border: 1.5px solid var(--hk-ink); background: linear-gradient(180deg, var(--hk-card-top), var(--hk-card-bot)); flex: none; }
.hk-score__av > canvas { width: 100%; height: 100%; display: block; border-radius: calc(.55rem - 1.5px); }
.hk-score__av > .hk-lvl { position: absolute; left: -.55rem; bottom: -.45rem; }
.hk-score__side--r .hk-score__av > .hk-lvl { left: auto; right: -.55rem; }
.hk-score__id { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.hk-score__side--r .hk-score__id { flex-direction: row-reverse; }
.hk-score__flag { width: 1.6rem; height: 1.07rem; flex: none; border-radius: 3px; border: 1.5px solid var(--hk-ink); }
.hk-score__who { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.hk-score__name { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-score__side .hk-bar { height: .75rem; }
.hk-score__side .hk-bar::before { display: none; }
.hk-score__goals {
  display: grid; place-items: center; min-width: 3rem; padding: 0 .3rem;
  font-size: 2.3rem; border: var(--hk-line) solid var(--hk-ink);
  background: linear-gradient(180deg, #2f2a2a 0 50%, #1b1818 50% 100%);
}
.hk-score__goals--l { box-shadow: inset 0 -3px 0 var(--team, #e63b2e); }
.hk-score__goals--r { box-shadow: inset 0 -3px 0 var(--team, #2e8de6); }
.hk-score__clock {
  position: relative; display: grid; place-items: center; min-width: 4.6rem; padding: .1rem .5rem .2rem;
  background: linear-gradient(180deg, #1ac4e4 0%, #0e9fc4 55%, #0a82a6 100%);
  border: var(--hk-line) solid var(--hk-ink); border-left: 0; border-right: 0;
  box-shadow: inset 0 2px 0 #7cf1ff;
}
.hk-score__clock::before { content: ''; position: absolute; left: .25rem; right: .25rem; top: .2rem; height: 40%; border-radius: 999px; background: rgba(210, 248, 255, .35); }
.hk-score__clock > .hk-num { position: relative; font-size: 1.55rem; }
.hk-score__clock.is-hurry > .hk-num { color: #ffe14a; animation: hk-bob .6s ease-in-out infinite; }
.hk-score__half { position: relative; font-family: var(--hk-font-body); font-weight: 800; font-size: .7rem; color: #dff9ff; letter-spacing: .06em; margin-top: -.15rem; }

/* ═════════════════════════════════════ BOTONES TÁCTILES DEL PARTIDO ═════════════════════════════════════
   Redondos, grandes, de cristal: flechas turquesa, saltar verde, tiro alto azul, tiro bajo naranja y poder
   morado con el anillo de carga (--charge 0..1). Semitransparentes para no tapar el juego; al pulsar se hunden. */
.hk-touch {
  --hi: var(--hk-teal-hi); --lo: var(--hk-teal-lo); --lip: var(--hk-teal-lip); --rim: #043546; --gl: #fff; --charge: 1;
  position: relative; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; padding: 0;
  border-radius: 50%; border: 2px solid var(--rim);
  background: radial-gradient(ellipse 72% 58% at 50% 30%, var(--hi) 0%, var(--hi) 40%, var(--lo) 100%);
  box-shadow: inset 0 -.4rem 0 var(--lip), inset 0 2px 1px rgba(255, 255, 255, .55), 0 .16rem 0 var(--rim), 0 .35rem .6rem rgba(0, 0, 0, .3);
  opacity: .85; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: transform .05s ease-out, box-shadow .05s ease-out, opacity .1s;
}
.hk-touch::after { content: ''; position: absolute; right: 16%; top: 10%; width: 19%; height: 11%; border-radius: 50%; background: rgba(255, 255, 255, .88); transform: rotate(40deg); }
.hk-touch > svg { width: 54%; height: 54%; margin-top: -6%; }
.hk-touch:active, .hk-touch.is-down { opacity: 1; transform: translateY(.16rem) scale(.97); box-shadow: inset 0 -.16rem 0 var(--lip), inset 0 2px 1px rgba(255, 255, 255, .45), 0 0 0 var(--rim), 0 .12rem .25rem rgba(0, 0, 0, .3); }
.hk-touch--jump  { --hi: var(--hk-green-hi); --lo: var(--hk-green-lo); --lip: var(--hk-green-lip); --rim: #174a00; }
.hk-touch--high  { --hi: var(--hk-blue-hi); --lo: var(--hk-blue-lo); --lip: var(--hk-blue-lip); --rim: #06224d; }
.hk-touch--low   { --hi: #ffa45c; --lo: #f2581f; --lip: #b3330b; --rim: #561500; }
.hk-touch--high > svg, .hk-touch--low > svg { width: 68%; height: 68%; }   /* la bota y su trayectoria: más anchas que altas */
.hk-touch--power { --hi: var(--hk-purple-hi); --lo: var(--hk-purple-lo); --lip: var(--hk-purple-lip); --rim: #300858; width: 4.4rem; height: 4.4rem; }
.hk-touch--power::before {  /* anillo de carga */
  content: ''; position: absolute; inset: -.55rem; border-radius: 50%; z-index: -1;
  background: conic-gradient(#ffe14a calc(var(--charge) * 360deg), rgba(18, 10, 5, .55) 0);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%);
}
.hk-touch--power.is-ready { animation: hk-ready 1s ease-in-out infinite; }
@keyframes hk-ready { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 225, 74, 0)); } 50% { filter: drop-shadow(0 0 .6rem rgba(255, 225, 74, .95)); } }
.hk-touch--sm { width: 4.2rem; height: 4.2rem; }
.hk-touch__lbl { position: absolute; bottom: -1.15rem; left: 50%; transform: translateX(-50%); font-size: .8rem; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .hk-bg__rays, .hk-card__up, .hk-notif--pop, .hk-bar__add, .hk-bar.is-full .hk-bar__fill, .hk-touch--power.is-ready, .hk-cardbox.is-ready .hk-cardbox__arrow, .hk-score__clock.is-hurry > .hk-num { animation: none !important; }
}