/* ============================================================================
 *  juegos.css — minijuegos de SecondRadar
 * ============================================================================
 *  Se carga DESPUÉS de style.css y solo añade: los colores, la tipografía, los
 *  botones y los diálogos son los del juego principal, para que pasar de uno a
 *  otro se sienta el mismo sitio. Nada de la paleta verde neón de songspot.
 * ========================================================================== */

.topbar h1 a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
#sonido-btn { min-width: 44px; }

.juego { max-width: 34rem; }

/* Fila de marcador: vidas a la izquierda, puntos a la derecha. Números
   tabulares para que no bailen al cambiar de 9 a 10. */
.marcador-barra {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 1rem; color: var(--muted); font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.marcador-barra strong { color: var(--text); font-size: 1.15rem; }
.vidas { letter-spacing: .15em; }

.etiqueta {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}

/* La tarjeta central de cada juego: la afirmación, el candidato, la canción. */
.carta {
  background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
  padding: 1.5rem 1.25rem; text-align: center; margin-bottom: 1rem;
  animation: pop .2s ease-out;
}
.carta-texto {
  margin: .75rem 0 0; font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  font-weight: 800; line-height: 1.3; letter-spacing: -0.01em;
}
.carta-sub { margin: .35rem 0 0; color: var(--muted); }

.botones-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.btn-grande {
  min-height: 64px; border-radius: .9rem; font-size: 1.1rem; font-weight: 800;
  transition: transform .08s ease;
}
.btn-grande:active { transform: scale(.97); }
.btn-grande:disabled { opacity: .45; cursor: default; }
.btn-verdad { border-color: var(--hit); }
.btn-bulo   { border-color: var(--near); }
.btn-verdad:hover:not(:disabled) { background: color-mix(in srgb, var(--hit) 22%, var(--panel)); }
.btn-bulo:hover:not(:disabled)   { background: color-mix(in srgb, var(--near) 22%, var(--panel)); }
.btn-grande.primary { background: var(--accent); border-color: var(--accent); }
.primary-ancho { width: 100%; min-height: 52px; font-weight: 800; background: var(--accent); border-color: var(--accent); }

/* La explicación tras responder: verde si acertaste, naranja si no. */
.veredicto {
  margin: 1rem 0; padding: .9rem 1rem; border-radius: .8rem;
  border: 1.5px solid var(--line); animation: pop .18s ease-out;
}
.veredicto.bien { border-color: var(--hit); background: color-mix(in srgb, var(--hit) 12%, var(--panel)); }
.veredicto.mal  { border-color: var(--near); background: color-mix(in srgb, var(--near) 12%, var(--panel)); }
.veredicto h3 { margin: 0 0 .3rem; font-size: 1rem; }
.veredicto p { margin: 0 0 .75rem; color: var(--muted); font-size: .92rem; }
.veredicto[hidden] { display: none; }

.temblor { animation: temblor .3s ease; }
@keyframes temblor {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* -------------------------------------------------------- ranking a ciegas */

.huecos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hueco {
  display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: .6rem;
  width: 100%; min-height: 54px; padding: .4rem .8rem; text-align: left;
  border-radius: .8rem; border: 1.5px dashed var(--line); background: transparent;
}
.hueco .num { font-weight: 800; font-size: 1.1rem; color: var(--muted); text-align: center; }
.hueco .quien { font-weight: 700; }
.hueco .pista { font-size: .75rem; color: var(--muted); }
.hueco.libre:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hueco.lleno { border-style: solid; background: var(--panel); cursor: default; animation: pop .18s ease-out; }
.hueco.lleno .num { color: var(--text); }
.hueco:disabled { opacity: 1; }
.hueco .gente { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.hueco .gente.igual { color: var(--hit); font-weight: 700; }

.carta-boca-abajo {
  cursor: pointer; min-height: 9rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem; width: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, var(--panel)), var(--panel));
}
.carta-boca-abajo .grande { font-size: 2.4rem; }
/* `display: flex` le gana al atributo hidden si no se dice explícitamente. */
.carta-boca-abajo[hidden], #mesa[hidden] { display: none; }

.coincidencia { font-size: 2rem; font-weight: 800; margin: .25rem 0; font-variant-numeric: tabular-nums; }
dialog p.coincidencia, .carta p.coincidencia, .veredicto p.coincidencia {
  color: var(--text); font-size: 2rem; margin: .25rem 0;
}

/* --------------------------------------------------------------- de qué año */

.rondas { display: flex; gap: .4rem; justify-content: center; margin-bottom: 1rem; }
.ronda-punto { width: .7rem; height: .7rem; border-radius: 50%; background: var(--miss); }
.ronda-punto.actual { background: var(--accent); }
.ronda-punto.hecha { background: var(--hit); }
.ronda-punto.floja { background: var(--near); }

.anio-control { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; margin: 1.25rem 0 .5rem; }
.anio-num { font-size: 3rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.paso { min-width: 52px; min-height: 52px; font-size: 1.4rem; font-weight: 800; border-radius: 50%; }
.deslizador { width: 100%; accent-color: var(--accent); margin: 0 0 1rem; height: 2rem; }

.puntos-ronda { font-size: 2.2rem; font-weight: 800; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.resumen-anios { list-style: none; padding: 0; margin: 1rem 0; text-align: left; }
.resumen-anios li {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem;
  padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.resumen-anios small { color: var(--muted); display: block; }
.resumen-anios .pts { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- palabra musical */

.rejilla { display: grid; grid-template-rows: repeat(6, 1fr); gap: .35rem; max-width: 19rem; margin: 0 auto 1rem; }
.fila-letras { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.letra {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); border-radius: .5rem;
  font-size: 1.6rem; font-weight: 800; text-transform: uppercase;
}
.letra.llena { border-color: var(--muted); }
.letra.nueva { animation: pop .1s ease-out; }
.letra.hit  { background: var(--hit);  border-color: var(--hit);  color: #fff; }
.letra.near { background: var(--near); border-color: var(--near); color: #1b1405; }
.letra.miss { background: var(--miss); border-color: var(--miss); color: var(--muted); }
.letra.girar { animation: girar .35s ease both; }
@keyframes girar { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

.teclado { display: grid; gap: .35rem; user-select: none; }
.tecla-fila { display: flex; gap: .3rem; justify-content: center; }
.tecla {
  flex: 1; max-width: 2.6rem; min-height: 52px; padding: 0;
  font-weight: 800; font-size: .95rem; border-radius: .45rem; text-transform: uppercase;
}
.tecla.ancha { max-width: 4.2rem; flex: 1.6; font-size: .75rem; }
.tecla.hit  { background: var(--hit);  border-color: var(--hit);  color: #fff; }
.tecla.near { background: var(--near); border-color: var(--near); color: #1b1405; }
.tecla.miss { background: var(--bg); color: #555b6e; }

.modo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: 1rem; }

/* ---------------------------------------------------------------- ranking */

.ranking { margin-top: 1.25rem; text-align: left; }
.ranking h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--text); }
.ranking-lista { list-style: none; padding: 0; margin: 0; }
.ranking-lista li {
  display: grid; grid-template-columns: 1.8rem 1fr auto; gap: .5rem; align-items: center;
  padding: .4rem .5rem; border-radius: .45rem; font-size: .9rem;
}
.ranking-lista li:nth-child(odd) { background: color-mix(in srgb, var(--line) 45%, transparent); }
.ranking-lista li.yo { outline: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.ranking-lista .pos { color: var(--muted); font-weight: 700; text-align: center; }
.ranking-lista li:nth-child(-n+3) .pos { color: var(--near); }
.ranking-lista .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-lista .pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.ranking-nota { margin: .5rem 0 0; }
.ranking-nota:empty { display: none; }
.alias-form { display: flex; gap: .5rem; margin-bottom: .75rem; }
.alias-form input {
  flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: .6rem; padding: .55rem .8rem;
}
.alias-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* El diálogo de resultado de los minijuegos puede ser largo (ranking dentro). */
dialog.fin { max-height: 88vh; overflow-y: auto; text-align: center; width: min(32rem, calc(100vw - 2rem)); }
dialog.fin .actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
dialog.fin .actions button { min-height: 48px; font-weight: 700; flex: 1; }

/* ------------------------------------------------------------- más juegos */

/* 1 · Botón de menú: tres rayas en un círculo, primero de la cabecera. */
.menu-btn {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.menu-raya { width: 18px; height: 2px; border-radius: 2px; background: var(--text); }
.topbar h1 { margin-right: auto; min-width: 0; }

/* El cajón: panel desde la izquierda, como el de songspot. Es un <dialog>
   modal, así que el foco queda dentro y Esc lo cierra sin código extra. */
dialog.cajon {
  margin: 0; inset: 0 auto 0 0; height: 100dvh; max-height: 100dvh;
  width: min(320px, 88vw); max-width: none; padding: 0;
  border: 0; border-right: 1px solid var(--line); border-radius: 0 1rem 1rem 0;
  background: var(--bg); overflow-y: auto;
}
dialog.cajon[open] { animation: cajon-entra .2s ease-out; }
dialog.cajon::backdrop { background: rgb(0 0 0 / .65); backdrop-filter: blur(3px); }
@keyframes cajon-entra { from { transform: translateX(-100%); } to { transform: none; } }
.cajon-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(1rem, env(safe-area-inset-top)) 1rem .5rem;
}
.cajon-cab h2 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cajon-cerrar { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.cajon-lista { display: grid; gap: .5rem; padding: .5rem 1rem 1.5rem; }

/* Filas del cajón y tarjetas del carrusel comparten estructura. */
.fila-juego, .tarjeta-juego {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .7rem;
  border: 1.5px solid var(--line); background: var(--panel);
  color: var(--text); text-decoration: none;
}
.fila-juego { min-height: 60px; padding: .55rem .8rem; border-radius: .9rem; }
.fila-juego::after { content: '›'; margin-left: auto; font-size: 1.4rem; color: var(--muted); }
.fila-juego:hover { border-color: var(--accent); }
.juego-emoji { font-size: 1.5rem; flex: none; }
.juego-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.juego-txt b { font-size: .95rem; }
.juego-lema { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Estás aquí: borde morado, sin flecha, no es enlace. */
.fila-juego.actual, .tarjeta-juego.actual { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.fila-juego.actual::after { content: none; }
.fila-juego.actual .juego-lema, .tarjeta-juego.actual .juego-lema { color: var(--text); }
/* Hecho hoy: en verde. Es otra cosa que "estás aquí", y se ve distinta. */
.hecho:not(.actual) .juego-lema { color: var(--hit); font-weight: 700; }

/* Cinta diagonal de juego nuevo. */
.cinta {
  position: absolute; top: 9px; right: -26px; transform: rotate(35deg);
  width: 90px; text-align: center; padding: 1px 0;
  background: var(--near); color: #1b1405; font-size: .55rem; font-weight: 800; letter-spacing: .08em;
}
/* En el cajón la cinta diagonal taparía la flecha: ahí es una etiqueta. */
.fila-juego .cinta {
  position: static; transform: none; width: auto; margin-left: auto;
  padding: .15rem .5rem; border-radius: 999px; font-size: .58rem;
}
.fila-juego:has(.cinta)::after { margin-left: .4rem; }

/* 2 · Carrusel al pie de la primera pantalla. `margin-top: auto` dentro del
   body flex lo empuja al fondo cuando el juego es corto. */
.mas-juegos { margin: 2rem auto 0; margin-top: auto; padding-top: 2rem; width: 100%; max-width: 46rem; }
.mas-juegos ~ .site-footer { margin-top: 0; }
/* Nunca un anuncio pegado a la navegación: invita a clics por error, y la
   política de AdSense lo prohíbe. */
.mas-juegos + .ad-slot { margin-top: 2rem; }
.mas-juegos h2 {
  margin: 0 0 .5rem; text-align: center; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.carrusel {
  overflow: hidden; touch-action: pan-y; cursor: grab; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.carrusel:active { cursor: grabbing; }
.carrusel-pista { display: flex; gap: 10px; width: max-content; will-change: transform; }
.tarjeta-juego {
  width: 210px; min-height: 64px; padding: .5rem .75rem; border-radius: .9rem;
  user-select: none; -webkit-user-drag: none;
}
.tarjeta-juego * { pointer-events: none; }
.tarjeta-juego:hover { border-color: var(--accent); }
.tarjeta-juego.actual { opacity: .55; }

/* 3 · Siguiente juego, en la pantalla de fin. */
.siguiente { margin-top: 1.25rem; text-align: left; }
.sig-juego {
  display: flex; align-items: center; gap: .8rem; min-height: 76px; padding: .8rem 1rem;
  border-radius: 1rem; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
  box-shadow: 0 8px 24px rgb(111 92 255 / .3);
}
.sig-juego .juego-emoji { font-size: 2rem; }
.sig-juego .juego-lema { color: rgb(255 255 255 / .8); }
.sig-etiqueta { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.sig-jugar { margin-left: auto; flex: none; font-weight: 800; padding: .4rem .65rem; border-radius: 999px; background: rgb(255 255 255 / .18); }
.sig-todo { margin: 0; font-weight: 800; color: var(--text) !important; text-align: center; }
.siguiente > .fine { text-align: center; margin: .25rem 0 0; }
.sig-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; justify-content: center; }
.sig-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .6rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font-size: .72rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sig-chip:hover { border-color: var(--accent); color: var(--text); }
.sig-chip.hecho::after { content: ' ✓'; color: var(--hit); white-space: pre; }

@media (max-width: 30rem) {
  .carta { padding: 1.2rem 1rem; }
  .anio-num { font-size: 2.5rem; }
  .letra { font-size: 1.35rem; }
  .tecla { min-height: 48px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carta, .veredicto, .hueco.lleno, .letra.nueva, .letra.girar, .temblor, dialog.cajon[open] { animation: none; }
}

/* ------------------------------------------------------------ muro de pago */

/* Sin partidas: solo queda el aviso. El resto del tablero se oculta para que
   nada parezca jugable cuando no lo es. */
.juego.bloqueado > :not(.bloqueo) { display: none !important; }
.bloqueo .primary-ancho { margin-top: 1rem; }

.muro { margin-top: 1rem; text-align: center; }
.muro .pay-btn { width: 100%; background: var(--accent); border-color: var(--accent); }
.quedan { margin: .75rem 0 0; }
dialog#muro > button.link { display: block; margin: .5rem auto 0; }
/* Con el muro en pantalla solo hay UN botón morado: el de pagar. Compartir
   pasa a secundario para no competir con él. */
dialog.fin:has(.muro) .actions .primary,
.veredicto:has(.muro) .btn-grande.primary { background: var(--panel); border-color: var(--line); }

/* ------------------------------------------------------------------ móvil */

/* Toques rápidos sin zoom: en iOS dos toques seguidos sobre un botón (teclear
   "SALSA" en Palabra musical, pulsar + + + en el año) hacen zoom a la página.
   `manipulation` lo desactiva y quita además el retardo de 300 ms. */
button, a, input[type="range"], .hueco, .tecla { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }

/* La barra de inicio del iPhone tapa lo que haya pegado abajo. */
body { padding-bottom: max(3rem, env(safe-area-inset-bottom)); }
.topbar { padding-top: max(.5rem, env(safe-area-inset-top)); }

/* Los diálogos miden con dvh: con vh, en Safari móvil la barra de direcciones
   se come el final y el botón de cerrar queda fuera. */
dialog.fin { max-height: 88dvh; }

/* Palabra musical: tablero y teclado tienen que caber A LA VEZ sin desplazar.
   Si hay que hacer scroll para ver el teclado, en móvil no se puede jugar. La
   rejilla mide 5 de ancho por 6 de alto, así que su ancho máximo sale del alto
   que deja libre todo lo demás (cabecera, modo y teclado ≈ 330px). */
.rejilla { width: min(19rem, calc((100dvh - 330px) * 5 / 6), 100%); }
@media (max-height: 620px) {
  .tecla { min-height: 42px; }
  .letra { font-size: 1.15rem; }
  .modo-fila { margin-bottom: .5rem; }
  .modo-fila .lang-btn { min-height: 38px; }
}

/* Pantallas de 320px (iPhone SE de primera generación y Android pequeños). */
@media (max-width: 22rem) {
  .marcador-barra { font-size: .8rem; gap: .3rem; }
  .marcador-barra .etiqueta { font-size: .62rem; padding: .15rem .45rem; }
  .botones-grandes { gap: .5rem; }
  .btn-grande { font-size: 1rem; min-height: 58px; }
  .tecla-fila { gap: .2rem; }
  .tecla { font-size: .8rem; }
  .paso { min-width: 46px; min-height: 46px; }
  .anio-num { font-size: 2.2rem; }
}

/* El deslizador del año, con un tirador grande: el de serie mide 16px y en
   móvil se escapa del dedo. */
.deslizador { -webkit-appearance: none; appearance: none; background: transparent; }
.deslizador::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--line); }
.deslizador::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--text);
}
.deslizador::-moz-range-track { height: 8px; border-radius: 4px; background: var(--line); }
.deslizador::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--text); }

/* Portada en móvil: la pestaña fija "Sobre este juego" (abajo a la derecha)
   se montaba encima del carrusel. Pasa a ir en el flujo, debajo de él. En
   escritorio sigue pegada al borde, donde no estorba a nada. */
@media (max-width: 30rem) {
  body:has(#mas-juegos) .about-tab {
    position: static; display: block; margin: 1.25rem auto 0; transform: none;
    writing-mode: horizontal-tb; border: 1px solid var(--line); border-radius: .5rem;
  }
}
/* La cinta diagonal ocupa la esquina: el título no puede pasar por debajo. */
.tarjeta-juego:has(.cinta) { padding-right: 2rem; }

/* Con el botón de menú delante, "Adivina el Artista" se partía en dos líneas
   en un móvil normal. Se acorta el botón, no el nombre (la misma regla que
   style.css ya aplicaba por debajo de 23rem). */
@media (max-width: 30rem) {
  body:has(.menu-btn) #new-btn { font-size: 0; padding: .45rem .7rem; }
  body:has(.menu-btn) #new-btn::before { content: "↻"; font-size: 1.1rem; }
  .topbar h1 { white-space: nowrap; }
}
/* 44px, el mínimo táctil: estos dos se pulsan con el pulgar y la cabecera. */
#ayuda-btn, #sonido-btn { min-width: 44px; min-height: 44px; padding: 0; }
/* Dentro del muro, la salida gratis va en segundo plano: un solo botón morado
   (pagar). Fuera del muro, la tarjeta sí es la acción principal. */
.muro .sig-juego { background: var(--panel); border: 1px solid var(--line); box-shadow: none; color: var(--text); min-height: 64px; }
.muro .sig-juego .juego-lema { color: var(--muted); }
.muro .sig-jugar { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ------------------------------------------------------- demo animada ("GIF") */

/* Una partida en miniatura que se juega sola dentro de "Cómo se juega". Alto
   fijo: si cambiara con cada paso, el diálogo daría saltos mientras se lee. */
.demo-anim {
  position: relative; overflow: hidden; height: 236px; margin: .25rem 0 1rem;
  padding: .75rem; border-radius: 1rem; border: 1px solid var(--line);
  background: var(--bg); pointer-events: none; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.d-dedo {
  position: absolute; left: 0; top: 0; font-size: 1.6rem; opacity: 0; z-index: 2;
  transition: transform .5s cubic-bezier(.3,.7,.3,1), opacity .2s;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .6));
}
.d-dedo.visible { opacity: 1; }
.d-dedo.oculto { display: none; }
.d-toque { transform: scale(.9); filter: brightness(1.4); }

.d-carta {
  width: 100%; padding: .6rem; border-radius: .8rem; text-align: center;
  background: var(--panel); border: 1.5px solid var(--line); transition: border-color .2s, background .2s;
}
.d-carta.bien { border-color: var(--hit); background: color-mix(in srgb, var(--hit) 15%, var(--panel)); }
.d-etq { display: block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.d-txt { margin: .2rem 0 0; font-weight: 800; font-size: 1rem; color: var(--text) !important; }
.d-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
.d-btn {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: .7rem; border: 1.5px solid var(--line); background: var(--panel);
  font-weight: 800; font-size: .9rem; transition: transform .1s, filter .1s;
}
.d-verdad { border-color: var(--hit); }
.d-mentira { border-color: var(--near); }
.d-fijar { width: 100%; background: var(--accent); border-color: var(--accent); }
.d-msg { margin: 0; min-height: 1.3em; font-size: .85rem; font-weight: 700; text-align: center; color: var(--muted) !important; }
.d-msg.bien { color: var(--hit) !important; }

.d-huecos { display: grid; gap: 3px; width: 100%; }
.d-hueco {
  display: flex; gap: .6rem; align-items: center; height: 22px; padding: 0 .6rem;
  border: 1px dashed var(--line); border-radius: .4rem; font-size: .72rem; color: var(--muted);
  transition: transform .1s, filter .1s;
}
.d-hueco.lleno { border-style: solid; background: var(--panel); color: var(--text); font-weight: 700; }
.d-carta:has(+ .d-huecos) { padding: .4rem; }
.d-carta:has(+ .d-huecos) .d-txt { font-size: .9rem; }

.d-anio { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.d-paso {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;
  transition: transform .1s, filter .1s;
}
.d-num { font-size: 1.8rem; font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: center; }

.d-rejilla { display: grid; gap: 5px; margin-top: .25rem; }
.d-fila { display: grid; grid-template-columns: repeat(5, 34px); gap: 5px; }
.d-letra {
  height: 34px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); border-radius: .4rem; font-weight: 800; transition: background .25s, border-color .25s;
}
.d-letra.hit  { background: var(--hit);  border-color: var(--hit);  color: #fff; }
.d-letra.near { background: var(--near); border-color: var(--near); color: #1b1405; }
.d-letra.miss { background: var(--miss); border-color: var(--miss); color: var(--muted); }

.d-campo {
  width: 100%; padding: .55rem .75rem; border-radius: .6rem; border: 1px solid var(--accent);
  background: var(--panel); font-weight: 700; min-height: 2.6rem;
}
.d-cursor { color: var(--accent); animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.d-fichas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; width: 100%; min-height: 3.6rem; }
.d-ficha {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: .6rem; padding: .35rem .2rem; animation: pop .2s ease-out; text-align: center;
}
.d-ficha small { font-size: .55rem; text-transform: uppercase; font-weight: 700; opacity: .85; }
.d-ficha b { font-size: .8rem; }
.d-ficha.hit { background: var(--hit); color: #fff; }
.d-ficha.near { background: var(--near); color: #1b1405; }
.d-ficha.miss { background: var(--miss); color: var(--muted); }

/* Los pasos de "Cómo se juega": tres líneas grandes con un emoji delante. */
.pasos { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .6rem; }
.pasos li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.05rem; line-height: 1.35; color: var(--text); }
.pasos li > span:first-child { font-size: 1.4rem; flex: none; line-height: 1.1; }
#ayuda { max-height: 90dvh; overflow-y: auto; }
#ayuda h2 { margin-bottom: .5rem; }
.pay-confianza { margin-top: .15rem; }
.mas-detalles { margin-top: .75rem; }
.mas-detalles summary { cursor: pointer; color: var(--muted); font-weight: 700; padding: .6rem 0; min-height: 44px; }
/* Alto a la medida de cada demo: el fijo de 236px dejaba un hueco vacío. */
.demo-anim[data-demo="verdad"]  { height: 158px; }
.demo-anim[data-demo="anio"]    { height: 212px; }
.demo-anim[data-demo="palabra"] { height: 160px; }

/* ---------------------------------------------------- ranking en directo */

.ranking-titular { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 800; color: var(--text) !important; }
.ranking-titular:empty { display: none; }
.ranking-lista li.hueco-lista { display: block; text-align: center; color: var(--muted); padding: 0; background: none !important; }
.ranking-lista li.cambio { animation: destello 1.2s ease-out; }
@keyframes destello { from { background: color-mix(in srgb, var(--near) 45%, transparent); } }

/* Botón 🏆 de la cabecera: solo en móvil (en escritorio el panel ya se ve). */
.trofeo-btn { min-height: 44px; min-width: 44px; padding: 0 .6rem; font-weight: 800; white-space: nowrap; }

/* El panel: cajón desde la derecha en móvil… */
.panel-ranking {
  position: fixed; top: 0; right: 0; z-index: 40; height: 100dvh; width: min(320px, 88vw);
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1.5rem; overflow-y: auto;
  background: var(--bg); border-left: 1px solid var(--line); border-radius: 1rem 0 0 1rem;
  transform: translateX(105%); transition: transform .22s ease-out; visibility: hidden;
}
.panel-ranking.abierto { transform: none; visibility: visible; }
.panel-fondo { position: fixed; inset: 0; z-index: 39; background: rgb(0 0 0 / .6); opacity: 0; pointer-events: none; transition: opacity .2s; }
.panel-fondo.visible { opacity: 1; pointer-events: auto; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.panel-cab h2 { margin: 0; font-size: 1rem; }
.panel-cerrar { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none; }
.en-directo { margin: .2rem 0 .75rem; font-size: .72rem; font-weight: 700; color: var(--hit); text-transform: uppercase; letter-spacing: .06em; }
.en-directo::before { content: '● '; animation: parpadeo 1.6s steps(1) infinite; }
.en-directo.caido { color: var(--muted); }
.en-directo.caido::before { animation: none; }
.panel-yo { margin: 0 0 .75rem; padding: .6rem .75rem; border-radius: .7rem; background: var(--panel); border: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.panel-yo.dentro { border-color: var(--accent); color: var(--text); font-weight: 800; }

/* …y columna fija a la derecha en pantallas anchas, donde sobra sitio al lado
   del tablero (34rem centrados). El carrusel se estrecha al ancho del juego
   para no pasar por debajo del panel. */
@media (min-width: 72rem) {
  .panel-ranking {
    top: 5rem; right: 1.25rem; height: auto; max-height: calc(100dvh - 7rem); width: 17rem;
    transform: none; visibility: visible; border: 1px solid var(--line); border-radius: 1rem;
    background: var(--panel); z-index: 5;
  }
  .panel-ranking .panel-yo { background: var(--bg); }
  .panel-cerrar, .trofeo-btn, .panel-fondo { display: none; }
  body:has(.panel-ranking) .mas-juegos { max-width: 34rem; }
}

/* Aviso flotante ("te han adelantado"). */
.toast {
  position: fixed; left: 50%; top: max(.75rem, env(safe-area-inset-top)); z-index: 60;
  transform: translate(-50%, -150%); max-width: calc(100vw - 2rem);
  padding: .6rem 1rem; border-radius: 999px; background: var(--text); color: var(--bg);
  font-weight: 800; font-size: .9rem; box-shadow: 0 8px 24px rgb(0 0 0 / .4);
  transition: transform .25s ease-out; pointer-events: none;
}
.toast.visible { transform: translate(-50%, 0); }

/* Cabecera estrecha con menú + 🏆 + 📖 + 🔊: el título cede (se recorta con
   "…") antes que los botones, y por debajo de 22rem el logo se va: el nombre
   del juego ya está en el carrusel y en el título de la pestaña. */
.topbar h1 { overflow: hidden; }
.topbar h1 a { min-width: 0; }
.topbar h1 a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { flex: none; }
@media (max-width: 22rem) {
  .topbar:has(.trofeo-btn) .logo { display: none; }
  .topbar-actions { gap: .3rem; }
  .trofeo-btn { padding: 0 .4rem; }
}
/* La demo del artista tiene tarjeta de misterio + campo + fichas + mensaje. */
.demo-note .demo-anim { margin: .25rem 0 .75rem; }
.demo-note .demo-lead { text-align: center; margin-bottom: .5rem !important; }
.demo-note .demo-cta { text-align: center; }

/* Bienvenida de Adivina el Artista: el GIF, debajo del juego (que se ve entero). */
.demo-note .demo-anim { height: 170px; }
.demo-anim[data-demo="artista"] { height: 170px; }
.demo-note .demo-lead { text-align: center; margin-bottom: .5rem !important; }
.demo-note .demo-cta { text-align: center; }

/* El <main> es hijo de un body flex en columna con `margin: auto`: sin ancho
   propio se encoge al contenido. En Palabra musical (que ya no tiene la fila de
   pestañas) el teclado quedaba en 14 px por tecla. Ancho completo, siempre. */
main.juego { width: 100%; }
.teclado, .tecla-fila { width: 100%; }

/* ---------------------------------------------------------- muro (v2, simple) */
.muro { margin-top: 1rem; text-align: center; }
.muro-beneficio { display: grid; justify-items: center; gap: .1rem; margin-bottom: 1rem; }
.muro-icono { font-size: 2.4rem; line-height: 1; }
.muro-beneficio b { font-size: 1.35rem; color: var(--text); }
.muro-sub { color: var(--muted); font-size: .95rem; }
.muro .pay-btn { min-height: 56px; font-size: 1.15rem; margin-top: 0; }
.muro .pay-note { margin: .45rem 0 1.1rem; }
.muro .invite-btn { min-height: 52px; }
.muro .invite-note { margin: .4rem 0 0; }
.muro .pay-or, .pay-confianza { display: none; }
dialog.muro-dialogo, #limit { position: relative; }
.cerrar-x, #limit-close {
  position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; min-height: 44px;
  padding: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1;
}
#limit form[method="dialog"] { margin: 0; }
#limit form[method="dialog"] button { width: 44px; min-height: 44px; font-weight: 400; }
#limit h2 { text-align: center; padding: 0 2.5rem; }
#limit-text:empty { display: none; }
#invitar-dialogo .invite-btn { background: var(--accent); border-color: var(--accent); min-height: 56px; font-size: 1.1rem; }
#invitar-dialogo .muro-beneficio b { font-size: 1.3rem; }
#invitar-dialogo .muro-sub { text-align: center; max-width: 22rem; }

/* La promesa del regalo, en grande: es lo que decide si se invita. */
#invitar-dialogo .muro-beneficio b { font-size: 1.35rem; max-width: 18rem; line-height: 1.25; }
#invitar-dialogo .muro-sub.destacado { color: var(--text); font-size: 1.1rem; font-weight: 700; margin-top: .35rem; }
.invite-note[hidden] { display: none; }

/* ------------------------------------------------- selector de juegos (fijo) */
.selector-juegos {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.selector-juegos .tarjeta-juego { width: auto; min-height: 68px; }
/* Con cinco juegos, el último ocupa la fila entera en móvil: nada huérfano. */
.selector-juegos .tarjeta-juego:last-child:nth-child(odd) { grid-column: 1 / -1; }
.selector-juegos .tarjeta-juego.actual { opacity: 1; }
@media (min-width: 52rem) {
  .selector-juegos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .selector-juegos .tarjeta-juego:last-child:nth-child(odd) { grid-column: auto; }
}
.selector-juegos .tarjeta-juego * { pointer-events: auto; }
.selector-juegos .juego-txt b { font-size: .88rem; }
.carrusel, .carrusel-pista { display: contents; }
.mas-juegos { padding-left: clamp(.8rem, 3vw, 1.5rem); padding-right: clamp(.8rem, 3vw, 1.5rem); }

.ranking-bonus { margin: -.4rem 0 .6rem; }
.ranking-bonus:empty { display: none; }

/* ------------------------------------------------------------------ portada */
.portada-main { max-width: 40rem; margin: 0 auto; width: 100%; padding: 1.5rem clamp(.8rem, 3vw, 1.5rem) 0; }
.portada-titulo { margin: 0 0 1rem; text-align: center; font-size: 1.6rem; letter-spacing: -0.01em; }
body.portada .mas-juegos { margin: 0; padding: 0; max-width: none; }
body.portada .mas-juegos h2 { display: none; }
/* Tarjetas grandes: en la portada ES la interfaz, no un pie de página. */
body.portada .selector-juegos { grid-template-columns: 1fr; gap: .75rem; }
body.portada .tarjeta-juego { min-height: 84px; padding: .9rem 1.1rem; border-radius: 1.1rem; gap: 1rem; }
body.portada .tarjeta-juego .juego-emoji { font-size: 2.2rem; }
body.portada .tarjeta-juego .juego-txt b { font-size: 1.15rem; }
body.portada .tarjeta-juego .juego-lema { font-size: .9rem; white-space: normal; }
body.portada .tarjeta-juego::after { content: '›'; margin-left: auto; font-size: 1.8rem; color: var(--muted); }
body.portada .selector-juegos .tarjeta-juego:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 52rem) {
  body.portada .selector-juegos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.portada .selector-juegos .tarjeta-juego:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Las frases de los juegos se leen ENTERAS: nada de "Descubre al arti…". */
.juego-lema { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; }
.selector-juegos .tarjeta-juego { align-items: flex-start; min-height: 84px; }
.selector-juegos .tarjeta-juego .juego-emoji { margin-top: .1rem; }
.fila-juego { min-height: 68px; }

.pasos-cortos { gap: .5rem; margin-top: .5rem; }
.pasos-cortos li { font-size: .95rem; }
.pasos-cortos li > span:first-child { min-width: 1.6rem; text-align: center; }

/* Pasos numerados (sin emojis): un círculo con el número y la frase. */
ol.pasos { counter-reset: none; }
.pasos li > span:first-child:not(:only-child) { }
ol.pasos li > span:first-child {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: .9rem; font-weight: 800; line-height: 1;
}
.detalles-lista { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .45rem; }
.detalles-lista li { color: var(--muted); font-size: .95rem; }
.detalles-lista b { color: var(--text); }

/* ---------------------------------------------------- ranking visual (rk) */
.rk { margin-top: 1.4rem; }
.rk-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1rem; text-align: center; }
.rk-bloque {
  position: relative; display: grid; justify-items: center; align-content: center; gap: .1rem;
  padding: .7rem .4rem; border-radius: .9rem; background: var(--bg); border: 1px solid var(--line);
}
.rk-num { font-size: 2.2rem; line-height: 1; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.rk-etq { font-size: .75rem; color: var(--muted); }
.rk-bloque:first-child .rk-num { color: var(--accent); }
.rk-flecha { position: absolute; top: .4rem; right: .55rem; font-size: .85rem; font-weight: 800; }
.rk-flecha:empty { display: none; }
.rk-flecha.sube { color: var(--hit); animation: rk-sube .7s ease-out both; }
.rk-flecha.baja { color: var(--near); animation: rk-baja .7s ease-out both; }
@keyframes rk-sube { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rk-baja { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.rk-lista { margin-top: .7rem; }
.ranking-lista .pos { min-width: 1.4rem; }

/* Cierre ✕ de los modales de resultado con paywall. */
dialog.result, dialog.fin { position: relative; }
.cerrar-x { z-index: 2; }

.rk-compartir {
  display: block; margin: .7rem auto 0; padding: .45rem .9rem; min-height: 40px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: .85rem; font-weight: 700;
}
.rk-compartir:hover { color: var(--text); border-color: var(--accent); }
.rk-compartir[hidden] { display: none; }

/* Límite del día: invitar (principal) y volver mañana (aviso). */
.muro-vuelve { display: grid; gap: .15rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: .9rem; background: var(--bg); border: 1px solid var(--line); text-align: center; }
.muro-vuelve b { color: var(--text); }
.muro-vuelve span { color: var(--muted); font-size: .9rem; }
.muro .invite-btn { background: var(--accent); border-color: var(--accent); min-height: 56px; font-size: 1.1rem; }
.rk-racha { margin: .6rem 0 0; text-align: center; font-size: .85rem; color: var(--muted); }

.marca { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

.rk-racha { padding: .65rem .85rem; border-radius: .8rem; font-size: .95rem; line-height: 1.35; color: var(--text);
  background: color-mix(in srgb, var(--hit) 14%, var(--bg)); border: 1px solid color-mix(in srgb, var(--hit) 55%, var(--line)); }
.rk-racha b { color: #7be0a3; }
.rk-racha { margin-bottom: 1.1rem; }

/* ---------------------------------------------- páginas de SEO (trivia de…) */
body.seo .topbar { justify-content: flex-start; }
body.seo .marca { color: inherit; text-decoration: none; }
.seo-main { max-width: 40rem; margin: 0 auto; width: 100%; padding: 1rem clamp(.8rem, 3vw, 1.5rem) 2rem; }
.seo-main h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; margin: .4rem 0 .6rem; letter-spacing: -0.02em; }
.seo-main h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
.seo-intro { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.25rem; }
.seo-intro b { color: var(--text); }
.migas { font-size: .8rem; color: var(--muted); }
.migas a { color: var(--muted); }
.seo-quiz { margin: 1rem 0; }
.quiz-prog { margin: 0 0 .5rem; font-size: .85rem; color: var(--muted); font-weight: 700; }
.quiz-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.datos { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.datos li { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); display: grid; gap: .15rem; }
.datos li span { color: var(--muted); font-size: .92rem; }
.datos li.falso b { color: var(--near); }
.seo-cta { margin-top: 2rem; padding: 1.25rem; border-radius: 1rem; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); text-align: center; }
.seo-cta h2 { margin-top: 0; }
.seo-cta .empezar-btn { display: block; text-decoration: none; text-align: center; line-height: 56px; }
.seo-mas ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.seo-mas a { display: inline-block; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .88rem; }
.seo-mas a:hover { color: var(--text); border-color: var(--accent); }

/* El selector se adapta al ancho DISPONIBLE (con el panel de ranking a la
   derecha, el contenido mide 34 rem): tarjetas de 11 rem como mínimo y las que
   quepan por fila. Antes eran siempre 5 columnas y se aplastaban. */
.selector-juegos { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
body.portada .selector-juegos { grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  .selector-juegos { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .selector-juegos .tarjeta-juego:last-child:nth-child(odd) { grid-column: auto; }
  body.portada .selector-juegos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.selector-juegos .tarjeta-juego { min-width: 0; }

/* ¿Quién canta esto?: cuatro opciones a dos columnas (una en pantallas muy estrechas). */
.opciones-4 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.btn-grande.opcion { min-height: 72px; font-size: 1rem; line-height: 1.2; padding: .5rem; overflow-wrap: anywhere; }
.btn-grande.opcion.correcta { border-color: var(--hit); background: color-mix(in srgb, var(--hit) 25%, var(--panel)); opacity: 1; }
.btn-grande.opcion.incorrecta { border-color: var(--near); background: color-mix(in srgb, var(--near) 22%, var(--panel)); opacity: 1; }
@media (max-width: 22rem) { .opciones-4 { grid-template-columns: 1fr; } }

.d-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; width: 100%; }
.d-opciones .d-btn { min-height: 44px; font-size: .78rem; text-align: center; padding: .2rem; }
.d-btn.d-ok { border-color: var(--hit); background: color-mix(in srgb, var(--hit) 25%, var(--panel)); }
.demo-anim[data-demo="quien"] { height: 190px; }


/* Curiosidades de las páginas SEO: en el HTML (lo lee Google) pero plegadas. */
.seo-plegable { margin-top: 1.5rem; }
.seo-plegable summary { cursor: pointer; color: var(--muted); font-size: .9rem; font-weight: 700; padding: .5rem 0; }
.seo-plegable summary:hover { color: var(--text); }
.seo-plegable[open] summary { margin-bottom: .6rem; }

/* Con el teclado abierto: el diálogo se pega arriba de la zona visible. */
dialog.con-teclado {
  margin-top: calc(var(--vv-top, 0px) + .5rem); margin-bottom: auto;
  max-height: calc(var(--vv-h, 100dvh) - 1rem); overflow-y: auto;
}

.panel-sub { margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; }

.portada-texto { margin: 1.5rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; text-align: center; }
.portada-texto b { color: var(--muted); font-weight: 700; }

.portada-subtitulo { margin: 0 0 .7rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.invite-wa { margin-top: .5rem; }