/* entrelampistas · juegos y su marca (03-11-2026). Quien encarga: «para juegos aplica tal cual su propuesta»;
   juegos es una sección propia, sin relación por mapa. Estilo de design/mocks/juegos-2026-10-31/ y Propuesta_A_Periodico.pdf:
   Newsreader + IBM Plex Sans, borde 2 px tinta, radios, sombra dura, grano, un color por juego.
   Excepción acotada del check en scripts/check.mjs (JUEGOS). Contraste: si un color del mock no da 4,5:1 con el texto, se oscurece el texto.

   Pensado para reutilizarse en el resto de la web (la fusión la especifica otro paso):
   · Ámbito de los tokens: body.pagina-juegos, .jg-tema (cualquier contenedor que quiera la marca) y .jg-recinto.
   · Tokens: --jg-fondo, --jg-partida, --jg-blanco, --jg-tinta, --jg-negro, --jg-gris, --jg-hundido, --jg-tecla-gris, --jg-borde-suave,
     paleta --jg-amarillo, --jg-amarillo-claro, --jg-lima, --jg-rosa, --jg-azul, --jg-cielo, --jg-naranja, --jg-rojo, --jg-lila,
     estados --jg-ok, --jg-mal, --jg-conflicto, tipos --jg-serif, --jg-sans, forma --jg-borde, --jg-sombra(-l), --jg-r-celda/tarjeta/grande/pildora.
   · Color por pieza: .jg-c-<juego> fija --jg-color y --jg-sobre (texto encima).
   · Componentes: .jg-tarjeta (+ --grande), .jg-recinto, .jg-destacado, .jg-ficha-mapa, .jg-pildora, .jg-boton (+ --primario, --grande,
     --suave, --icono), .jg-enlace-boton, .jg-chip (+ .es-en-curso), .jg-pegatina, .jg-redondo, .jg-cab, .jg-ayuda, .jg-miniatura,
     .jg-grano (textura), .jg-icono (iconos de juego en SVG: juegos.mjs › icono()). */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/juegos/newsreader-latin-opsz-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/juegos/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/juegos/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/juegos/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/juegos/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); }

/* ── tokens de juegos (solo en su ámbito) ── */
body.pagina-juegos, .jg-tema, .jg-recinto {
  --jg-fondo: #F3F2EF; --jg-partida: #FBF6E6; --jg-blanco: #FFFFFF; --jg-tinta: #1F1D1A; --jg-negro: #000000;
  --jg-gris: #5E5A54; --jg-hundido: #E2DED6; --jg-tecla-gris: #D9D5CE; --jg-borde-suave: #B8B3AA;
  --jg-amarillo: #F7E04A; --jg-amarillo-claro: #FBF3B8; --jg-lima: #BCE04E; --jg-rosa: #F27BB8; --jg-azul: #4F80E6;
  --jg-cielo: #CFE1F8; --jg-naranja: #F5A043; --jg-rojo: #E9503F; --jg-lila: #CDB0F0;
  --jg-ok: #2F6B3F; --jg-mal: #B3261E; --jg-conflicto: #F6B3AA;
  --jg-serif: 'Newsreader', Georgia, serif; --jg-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --jg-borde: 2px solid var(--jg-tinta);
  --jg-sombra: 3px 3px 0 var(--jg-tinta); --jg-sombra-l: 4px 4px 0 var(--jg-tinta);
  --jg-r-celda: 10px; --jg-r-tarjeta: 14px; --jg-r-grande: 18px; --jg-r-pildora: 23px;
  font-family: var(--jg-sans); color: var(--jg-tinta);
}
body.pagina-juegos { background: var(--jg-fondo); }
body.pagina-juegos .app { background: var(--jg-partida); }
/* color por juego (unscoped: solo fija variables que existen dentro del ámbito) */
.jg-c-mini { --jg-color: var(--jg-azul); --jg-sobre: var(--jg-negro); }  /* tinta sobre azul da 4,45: el texto va en negro (5,0) */
.jg-c-grupos { --jg-color: var(--jg-lila); --jg-sobre: var(--jg-tinta); }
.jg-c-cinco-letras { --jg-color: var(--jg-lima); --jg-sobre: var(--jg-tinta); }
.jg-c-panal { --jg-color: var(--jg-amarillo); --jg-sobre: var(--jg-tinta); }
.jg-c-akari { --jg-color: var(--jg-naranja); --jg-sobre: var(--jg-tinta); }
body.jg-pagina-mini { --jg-color: var(--jg-azul); --jg-sobre: var(--jg-negro); }
body.jg-pagina-grupos { --jg-color: var(--jg-lila); --jg-sobre: var(--jg-tinta); }
body.jg-pagina-cinco-letras { --jg-color: var(--jg-lima); --jg-sobre: var(--jg-tinta); }
body.jg-pagina-panal { --jg-color: var(--jg-amarillo); --jg-sobre: var(--jg-tinta); }
body.jg-pagina-akari { --jg-color: var(--jg-naranja); --jg-sobre: var(--jg-tinta); }

/* grano al 20 % multiplicado (textura propia: assets/img/juegos-grano.png) */
.jg-grano { position: relative; isolation: isolate; }
.jg-grano::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url('/assets/img/juegos-grano.png'); background-size: 128px 128px; opacity: .2; mix-blend-mode: multiply; pointer-events: none; border-radius: inherit; }

/* ── piezas comunes ── */
.pagina-juegos :focus-visible, .jg-tema :focus-visible, .jg-recinto :focus-visible { outline: 3px solid var(--jg-tinta); outline-offset: 2px; }
.jg-pildora, .jg-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 18px; border-radius: var(--jg-r-pildora); border: var(--jg-borde);
  background: var(--jg-blanco); color: var(--jg-tinta); cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--jg-sans); font-size: 14px; font-weight: 700; line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jg-pildora:active, .jg-boton:active { transform: translate(1px, 1px); }
.jg-boton--primario { background: var(--jg-amarillo); box-shadow: var(--jg-sombra); }
.jg-boton--grande { min-height: 52px; border-radius: 26px; font-size: 15px; box-shadow: var(--jg-sombra-l); background: var(--jg-amarillo); width: 100%; }
.jg-boton--suave { border-color: var(--jg-hundido); color: var(--jg-gris); }
.jg-boton--icono { width: 46px; padding: 0; }
.jg-boton[aria-disabled="true"] { background: var(--jg-hundido); color: var(--jg-gris); border-color: var(--jg-borde-suave); box-shadow: none; cursor: default; }
.jg-enlace-boton { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--jg-tinta); cursor: pointer; font-family: var(--jg-sans); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.jg-enlace-boton[aria-disabled="true"] { color: var(--jg-gris); cursor: default; }
.jg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--jg-blanco); color: var(--jg-tinta); border: 1.5px solid var(--jg-tinta); font-size: 11px; font-weight: 700; white-space: nowrap; }
.jg-chip.es-en-curso { background: var(--jg-tinta); color: var(--jg-fondo); }
.jg-chip[hidden], .jg-pegatina[hidden] { display: none; }
.jg-pegatina { position: absolute; top: -10px; right: 14px; z-index: 2; padding: 3px 10px; background: var(--jg-rosa); color: var(--jg-tinta); border: 1.5px solid var(--jg-tinta); border-radius: 4px; font-size: 11px; font-weight: 700; transform: rotate(4deg); }
.jg-icono { flex: 0 0 auto; }

/* ── /juegos · revista ── */
.pagina-juegos .jg-indice { background: var(--jg-partida); padding-bottom: calc(var(--pestanas) + var(--s-4)); }
.jg-revista { padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 14px; }
.jg-revista__titulo { font-family: var(--jg-serif); font-weight: 700; letter-spacing: -.01em; font-size: 40px; line-height: 1; }
.jg-seccion { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.jg-seccion[hidden] { display: none; }
.jg-seccion__tipo { font-family: var(--jg-serif); font-weight: 700; font-size: 22px; margin-top: 8px; }
.jg-mosaico { display: flex; flex-direction: column; gap: 14px; }
.jg-tarjeta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px; border: var(--jg-borde); border-radius: var(--jg-r-grande); background: var(--jg-color); color: var(--jg-sobre);
}
.jg-tarjeta__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.jg-tarjeta__nombre { display: flex; align-items: center; gap: 8px; font-family: var(--jg-serif); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -.01em; }
.jg-tarjeta__regla { font-size: 13px; line-height: 1.35; }
.jg-tarjeta .jg-pildora { min-height: 44px; margin-top: 4px; }
.jg-tarjeta > .jg-chip { position: absolute; top: 12px; right: 12px; z-index: 2; }
.jg-tarjeta--grande { grid-template-columns: 1fr; box-shadow: var(--jg-sombra-l); padding: 16px; }
.jg-tarjeta--grande .jg-tarjeta__nombre { font-size: 28px; }
.jg-tarjeta--grande .jg-tarjeta__regla { font-size: 14px; max-width: 30ch; }
.jg-miniatura { position: relative; display: grid; place-items: center; width: 72px; height: 64px; background: var(--jg-blanco); border: var(--jg-borde); border-radius: 12px; color: var(--jg-tinta); }
.jg-miniatura b { position: absolute; font-family: var(--jg-serif); font-size: 20px; }
.jg-miniatura svg path.jg-hex-central { fill: var(--jg-amarillo); stroke: var(--jg-tinta); stroke-width: 5; stroke-linejoin: round; }
.jg-miniatura--grupos, .jg-miniatura--cinco { grid-template-columns: repeat(4, 10px); gap: 3px; place-content: center; }
.jg-miniatura--cinco { grid-template-columns: repeat(5, 9px); }
.jg-miniatura i { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--jg-tinta); border-radius: 3px; }
.jg-miniatura .f1, .jg-miniatura .y { background: var(--jg-amarillo); }
.jg-miniatura .f2, .jg-miniatura .g { background: var(--jg-lima); }
.jg-miniatura .f3 { background: var(--jg-cielo); }
.jg-miniatura .f4 { background: var(--jg-lila); }
.jg-miniatura .x { background: var(--jg-tecla-gris); }
/* miniatura del mini con la pista real y de akari con su cuadrícula */
.jg-mini-vista, .jg-akari-vista { background: var(--jg-blanco); color: var(--jg-tinta); border: var(--jg-borde); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.jg-mini-vista__pista { font-size: 13px; font-weight: 600; line-height: 1.3; }
.jg-mini-vista__pista span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jg-gris); }
.jg-mini-vista__rejilla, .jg-akari-vista__rejilla { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; padding: 2px; background: var(--jg-tinta); border-radius: 6px; max-width: 240px; }
.jg-mini-vista__rejilla span, .jg-akari-vista__rejilla span { position: relative; aspect-ratio: 1; background: var(--jg-blanco); border-radius: 2px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.jg-mini-vista__rejilla .es-negra, .jg-akari-vista__rejilla .es-pared { background: var(--jg-tinta); color: var(--jg-fondo); }
.jg-mini-vista__rejilla .es-activa { background: var(--jg-amarillo); }
.jg-mini-vista__rejilla .es-palabra { background: var(--jg-amarillo-claro); }
.jg-mini-vista__rejilla i { position: absolute; top: 1px; left: 3px; font-style: normal; font-size: 9px; font-weight: 600; }

/* ── recinto «Juegos de este mapa» (pantalla de mapa) ── */
.jg-recinto { background: var(--jg-blanco); border: var(--jg-borde); border-radius: 20px; box-shadow: var(--jg-sombra-l); padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-right: 4px; }
.jg-recinto__titulo { font-family: var(--jg-serif); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.jg-destacado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); background: var(--jg-color); color: var(--jg-sobre); text-decoration: none; min-height: 64px; }
.jg-destacado__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jg-destacado__sobre { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jg-destacado__pista { font-family: var(--jg-serif); font-weight: 700; font-size: 18px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jg-destacado__jugar { min-height: 36px; padding: 0 14px; font-size: 13px; }
.jg-destacado > .jg-chip { grid-column: 2 / -1; justify-self: start; }
.jg-fichas-mapa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.jg-ficha-mapa { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 76px; padding: 10px; border: var(--jg-borde); border-radius: 12px; background: var(--jg-color); color: var(--jg-sobre); text-decoration: none; }
.jg-ficha-mapa__nombre { font-family: var(--jg-serif); font-weight: 700; font-size: 17px; line-height: 1; }
.jg-recinto__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--jg-gris); }
.jg-enlace { min-height: 44px; display: inline-flex; align-items: center; color: var(--jg-tinta); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── página de juego ── */
.jg-partida { display: flex; flex-direction: column; min-height: 100dvh; background: var(--jg-partida); }
.jg-cab { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 14px 12px; background: var(--jg-color); color: var(--jg-sobre); border-bottom: var(--jg-borde); }
.jg-cab__centro { text-align: center; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jg-cab__titulo { font-family: var(--jg-serif); font-weight: 700; letter-spacing: -.01em; font-size: 26px; line-height: 1.1; }
.jg-cab__sub { font-size: 11px; font-weight: 600; }
.jg-redondo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; background: var(--jg-blanco); border: var(--jg-borde); color: var(--jg-tinta); cursor: pointer; padding: 0; }
.jg-cuerpo { flex: 1; display: flex; flex-direction: column; padding: 14px 20px 28px; }
.jg-pagina-mini .jg-cuerpo { background: var(--jg-cielo); }
.jg { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.jg-ayuda { background: var(--jg-blanco); border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.jg-ayuda[hidden] { display: none; }
.jg-barra { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: flex-end; }
.jg-barra:empty { display: none; }
.jg-conmuta { min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--jg-tinta); cursor: pointer; font-family: var(--jg-sans); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.jg-conmuta::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--jg-tinta); border-radius: 4px; background: var(--jg-blanco); }
.jg-conmuta[aria-pressed="true"]::before { background: var(--jg-tinta); box-shadow: inset 0 0 0 2px var(--jg-blanco); }
.jg-crono { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jg-crono[hidden] { display: none; }
.jg-estado { min-height: 1.4em; text-align: center; font-family: var(--jg-serif); font-weight: 700; letter-spacing: -.01em; font-size: 18px; line-height: 1.25; }
.jg-controles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.jg-controles:empty { display: none; }
.jg-pie { font-size: 13px; font-weight: 600; }
.jg-ancho { margin-inline: -20px; }
@media (min-width: 360px) { .jg-ancho { margin-inline: 0; } }

/* teclado de la propuesta a todo lo ancho (03-11-2026, decisión nuestra por encargo de quien encarga): 48 de alto (44 en el Mini), ancho hasta 44, separadas 4; a 320 cada tecla mide ≈ 27,6 de ancho, por encima de los 24 de WCAG 2.2 AA (2.5.8). Enmienda E1 del brief §1. */
.jg-dock { position: sticky; bottom: 0; z-index: 3; margin: 0 -20px -28px; background: var(--jg-blanco); border-top: var(--jg-borde); padding: 10px 4px 18px; }
.jg-teclado { display: flex; flex-direction: column; gap: 7px; }
.jg-teclado__fila { display: flex; justify-content: center; gap: 4px; }
.jg-tecla {
  flex: 1 1 0; max-width: 44px; min-width: 0; height: 48px; padding: 0;
  border: var(--jg-borde); border-radius: 8px; background: var(--jg-fondo); color: var(--jg-tinta); cursor: pointer;
  font-family: var(--jg-sans); font-size: 15px; font-weight: 700;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.jg-pagina-mini .jg-tecla { height: 44px; font-size: 17px; }
.jg-tecla:active { transform: translate(1px, 1px); }
.jg-tecla--ancha { flex: 1.6 1 0; max-width: 56px; background: var(--jg-tecla-gris); }
.jg-tecla--enviar { flex: 2 1 0; max-width: 72px; font-size: 11px; }
.jg-tecla.es-liso { background: var(--jg-lima); }
.jg-tecla.es-rayado { background: var(--jg-amarillo); }
.jg-tecla.es-hundido { background: var(--jg-tecla-gris); color: var(--jg-gris); }
.jg-tecla[aria-disabled="true"] { background: var(--jg-blanco); border-color: var(--jg-borde-suave); color: var(--jg-gris); }

/* casillas */
.jg-casilla { position: relative; display: grid; place-items: center; background: var(--jg-blanco); color: var(--jg-tinta); font-family: var(--jg-sans); font-weight: 700; text-transform: uppercase; line-height: 1; }

/* ── grupos ── */
.jg-bandas { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.jg-bandas:empty { display: none; }
.jg-banda { border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.jg-banda--1 { background: var(--jg-amarillo); }
.jg-banda--2 { background: var(--jg-lima); }
.jg-banda--3 { background: var(--jg-cielo); }
.jg-banda--4 { background: var(--jg-lila); }
.jg-banda--revelada { background: var(--jg-hundido); border-style: dashed; }
.jg-banda.es-nueva { animation: jg-aparece var(--dur-slow) var(--ease-out); }
.jg-banda__nombre { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.jg-banda__palabras { font-size: 14px; font-weight: 500; text-transform: uppercase; }
.jg-fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.jg-fichas > li { display: flex; min-width: 0; }
.jg-ficha {
  width: 100%; min-width: 0; height: 72px; padding: 4px; border: var(--jg-borde); border-radius: var(--jg-r-tarjeta);
  background: var(--jg-blanco); color: var(--jg-tinta); cursor: pointer;
  font-family: var(--jg-sans); font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere; hyphens: manual;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jg-ficha--larga { font-size: 11px; }
.jg-ficha[aria-pressed="true"] { background: var(--jg-tinta); color: var(--jg-fondo); box-shadow: var(--jg-sombra); }
.jg-ficha[aria-disabled="true"] { cursor: default; }
.jg-fichas.es-sacude .jg-ficha[aria-pressed="true"] { animation: jg-sacude var(--dur-normal) var(--ease-out); }
.jg-fallos { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; }
.jg-fallos__caja { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--jg-tinta); background: var(--jg-tinta); }
.jg-fallos__caja.es-gastado { background: var(--jg-hundido); }

/* ── mini ── */
.jg-cuadricula { width: 100%; max-width: 360px; margin: 0 auto; border-collapse: separate; border-spacing: 2px; table-layout: fixed; background: var(--jg-tinta); border: var(--jg-borde); border-radius: var(--jg-r-celda); }
.jg-cuadricula td { padding: 0; background: var(--jg-tinta); }
.jg-cuadricula .jg-casilla { width: 100%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 4px; cursor: pointer; font-size: 28px; font-weight: 600; }
.jg-cuadricula .jg-casilla.es-en-palabra { background: var(--jg-amarillo-claro); }
.jg-cuadricula .jg-casilla.es-activa { background: var(--jg-amarillo); }
.jg-cuadricula .jg-casilla.es-erronea { color: var(--jg-mal); }
.jg-cuadricula .jg-casilla.es-erronea::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 18%; border-bottom: 2px solid var(--jg-mal); } /* también por forma: subrayado */
.jg-cuadricula .jg-casilla.es-revelada { color: var(--jg-gris); }
.jg-cuadricula .jg-casilla.es-liso { background: var(--jg-lima); }
.jg-cuadricula .jg-casilla.es-liso.es-revelada { background: var(--jg-blanco); }
.jg-num { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 600; line-height: 1; }
.jg-pista { display: flex; align-items: center; gap: 10px; background: var(--jg-amarillo); border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); padding: 8px 10px; box-shadow: var(--jg-sombra); margin: 12px 0 10px; }
.jg-pista__btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 22px; border: var(--jg-borde); background: var(--jg-blanco); color: var(--jg-tinta); cursor: pointer; font-family: var(--jg-sans); font-size: 18px; font-weight: 700; }
.jg-pista__texto { flex: 1 1 0; width: auto; height: auto; min-height: 44px; border: 0; border-radius: 0; background: transparent; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.jg-pista__n { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.jg-pagina-mini .jg-dock { margin-top: 0; }
.jg-mini-acciones { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; }
.jg-lista-pistas { display: flex; flex-direction: column; gap: 18px; background: var(--jg-blanco); border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); padding: 14px; }
.jg-lista-pistas[hidden] { display: none; }
.jg-lista-pistas h2 { font-family: var(--jg-serif); font-weight: 700; font-size: 20px; }
.jg-lista-pistas ol { display: flex; flex-direction: column; gap: 14px; list-style: none; padding: 0; margin: 8px 0 0; }
.jg-lista-pistas label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; }
.jg-lista-pistas input { height: 44px; width: 100%; max-width: 240px; padding: 0 12px; border: var(--jg-borde); border-radius: 8px; background: var(--jg-fondo); color: var(--jg-tinta); font-family: var(--jg-sans); font-size: 17px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.jg-lista-pistas input.es-liso { background: var(--jg-lima); }

/* ── cinco letras ── */
.jg-cinco { position: relative; margin-inline: auto; width: min(100%, 278px, calc((100svh - 380px) * 5 / 6)); min-width: 200px; }
.jg-intentos { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.jg-intento { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; position: relative; border-radius: var(--jg-r-celda); }
.jg-intento .jg-casilla { aspect-ratio: 1; border: var(--jg-borde); border-radius: var(--jg-r-celda); font-size: 26px; }
.jg-intento .jg-casilla.es-liso { background: var(--jg-lima); }
.jg-intento .jg-casilla.es-rayado { background: var(--jg-amarillo); }
.jg-intento .jg-casilla.es-hundido { background: var(--jg-tecla-gris); color: var(--jg-gris); }
.jg-intento .jg-casilla.es-nueva { animation: jg-aparece var(--dur-normal) var(--ease-out) both; }
.jg-intento:not(.es-actual) .jg-casilla:empty { border-color: var(--jg-borde-suave); }
.jg-cinco__entrada { position: absolute; left: 0; width: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; cursor: text; }
.jg-cinco:has(.jg-cinco__entrada:focus-visible) .jg-intento.es-actual { outline: 3px solid var(--jg-tinta); outline-offset: 3px; }
.jg-revelada { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.jg-revelada .jg-casilla { aspect-ratio: 1; border: 2px dashed var(--jg-gris); border-radius: var(--jg-r-celda); font-size: 26px; background: var(--jg-hundido); color: var(--jg-gris); }

/* ── panal ── */
.jg-panal-cab { display: flex; flex-direction: column; gap: 6px; }
.jg-panal-cab__fila { display: flex; justify-content: space-between; align-items: baseline; }
.jg-panal-cab__fila b { font-family: var(--jg-serif); font-weight: 700; font-size: 18px; }
.jg-panal-cab__fila span { font-size: 13px; font-weight: 700; }
.jg-panal-pista { display: flex; align-items: center; }
.jg-panal-pista span { flex: 1 1 0; height: 2px; background: var(--jg-tinta); display: flex; align-items: center; justify-content: center; }
.jg-panal-pista i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--jg-tinta); background: var(--jg-blanco); }
.jg-panal-pista i.es-hecho { background: var(--jg-amarillo); }
.jg-palabra { width: 100%; min-height: 48px; padding: 0; text-align: center; background: transparent; color: var(--jg-tinta); border: 0; border-bottom: var(--jg-borde); border-radius: 0; caret-color: var(--jg-amarillo); font-family: var(--jg-serif); font-weight: 700; font-size: 30px; letter-spacing: .08em; text-transform: uppercase; }
.jg-panal { position: relative; width: min(100%, 300px); aspect-ratio: 300 / 310; margin: 4px auto 0; }
.jg-hex { position: absolute; width: 29.33%; height: 32.26%; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; font-family: var(--jg-serif); font-weight: 700; font-size: 30px; color: var(--jg-tinta); text-transform: uppercase; clip-path: polygon(50% 3%, 93% 25%, 93% 75%, 50% 97%, 7% 75%, 7% 25%); }
.jg-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.jg-hex svg path { fill: var(--jg-blanco); stroke: var(--jg-tinta); stroke-width: 3; stroke-linejoin: round; transition: fill var(--dur-fast) var(--ease-out); }
.jg-hex.es-centro svg path { fill: var(--jg-amarillo); }
.jg-hex:active svg path { fill: var(--jg-amarillo-claro); }
.jg-hex span { position: relative; }
.jg-hex:focus-visible { outline: 0; }
.jg-hex:focus-visible svg path { stroke-width: 6; }
.jg-encontradas-caja { background: var(--jg-blanco); border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.jg-encontradas-caja p { font-size: 12px; font-weight: 700; }
.jg-encontradas { display: flex; flex-wrap: wrap; gap: 0 4px; list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; color: var(--jg-gris); }
.jg-encontradas li:not(:last-child)::after { content: ","; }
.jg-encontradas .es-pangrama { font-weight: 700; color: var(--jg-tinta); }

/* ── akari ── */
.jg-luces { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; background: var(--jg-tinta); border: var(--jg-borde); border-radius: 12px; }
.jg-luces td { padding: 0; background: var(--jg-tinta); }
.jg-pared { border-radius: 4px; color: var(--jg-fondo); font-size: 20px; font-weight: 700; }
.jg-pared__n { display: grid; place-items: center; aspect-ratio: 1; line-height: 1; }
.jg-pared.es-cumplido { background: var(--jg-ok); }
.jg-pared.es-excedido { background: var(--jg-mal); }
.jg-luces .jg-casilla { width: 100%; aspect-ratio: 1; border: 0; border-radius: 4px; padding: 0; cursor: pointer; }
.jg-luces .jg-casilla.es-iluminada { background: var(--jg-amarillo); }
.jg-luces .jg-casilla.es-luz { background: var(--jg-amarillo); }
.jg-luces .jg-casilla.es-conflicto { background: var(--jg-conflicto); }
.jg-lampara { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--jg-tinta); background: var(--jg-amarillo); }
.jg-casilla.es-conflicto .jg-lampara { background: var(--jg-rojo); border-style: dashed; } /* también por forma */
@media (max-width: 359px) { .jg-luces { border-spacing: 1px; border-radius: 0; border-inline: 0; } }
.jg-akari-datos { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }

/* ── resultado ── */
.jg-resultado { margin: 8px -20px -28px; background: var(--jg-fondo); border-top: var(--jg-borde); border-radius: 26px 26px 0 0; padding: 12px 20px 36px; display: flex; flex-direction: column; gap: 16px; }
.jg-resultado::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--jg-tinta); margin: 0 auto; }
.jg-resultado__cab { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.jg-resultado__sobre { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jg-gris); }
.jg-resultado__titulo { font-family: var(--jg-serif); font-weight: 700; letter-spacing: -.01em; font-size: 34px; line-height: 1.05; }
.jg-resultado__titulo:focus { outline: none; }
.jg-resultado__titulo:focus-visible { outline: 3px solid var(--jg-tinta); outline-offset: 2px; }
.jg-resultado__sub { font-size: 14px; font-weight: 600; color: var(--jg-gris); }
.jg-resultado__rejilla { display: grid; gap: 4px; margin: 0 auto; }
.jg-resultado__rejilla i { display: block; width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid var(--jg-tinta); background: var(--jg-blanco); }
.jg-resultado__rejilla i.liso, .jg-resultado__rejilla i.g2 { background: var(--jg-lima); }
.jg-resultado__rejilla i.rayado, .jg-resultado__rejilla i.g1 { background: var(--jg-amarillo); }
.jg-resultado__rejilla i.hundido { background: var(--jg-tecla-gris); }
.jg-resultado__rejilla i.g3 { background: var(--jg-cielo); }
.jg-resultado__rejilla i.g4 { background: var(--jg-lila); }
.jg-resultado__rejilla i.revelada { background: var(--jg-hundido); border-style: dashed; }
.jg-resultado__rejilla i.negra { background: var(--jg-tinta); }
.jg-resultado__datos { background: var(--jg-blanco); border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); padding: 12px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; margin: 0; }
.jg-resultado__datos div { display: flex; flex-direction: column-reverse; }
.jg-resultado__datos dd { margin: 0; font-family: var(--jg-serif); font-weight: 700; font-size: 22px; }
.jg-resultado__datos dt { font-size: 10px; font-weight: 600; color: var(--jg-gris); text-transform: uppercase; letter-spacing: .06em; }
.jg-frases { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.jg-frase-caja { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--jg-blanco); border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); color: var(--jg-tinta); text-decoration: none; }
.jg-frase-caja:hover .jg-frase-caja__ir { text-decoration: underline; text-underline-offset: 3px; }
.jg-frase { font-family: var(--jg-serif); font-size: 19px; line-height: 1.3; font-weight: 500; }
.jg-frase-caja__ir { font-size: 13px; font-weight: 700; }
.jg-resultado__fila { display: flex; gap: 10px; }
.jg-resultado__fila > * { flex: 1 1 0; min-width: 0; }
.jg-imagen-bloque { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.jg-imagen-bloque:empty { display: none; }
.jg-imagen { width: 100%; max-width: 270px; border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); }
.jg-aviso { font-size: 14px; }

@keyframes jg-aparece { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes jg-sacude { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── /juegos/<juego>: colección de partidas (sin JS; con JS se abre la siguiente sin resolver) ── */
.jg-partidas { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.jg-partida-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; background: var(--jg-blanco); color: var(--jg-tinta); border: var(--jg-borde); border-radius: var(--jg-r-tarjeta); text-decoration: none; }
.jg-partida-fila:hover { box-shadow: var(--jg-sombra); }
.jg-partida-fila__n { font-family: var(--jg-serif); font-weight: 700; font-size: 20px; }
.jg-coleccion { display: flex; flex-direction: column; gap: 14px; }
.jg-coleccion__regla { font-size: 14px; font-weight: 500; }
.jg-boton[hidden] { display: none; }
.jg-resultado__datos dd { white-space: nowrap; font-size: 20px; }
.jg-resultado__fila { flex-wrap: wrap; }
.jg-resultado__fila .jg-boton { white-space: normal; text-align: center; line-height: 1.2; padding: 6px 12px; flex: 1 1 130px; }