/* Revista de pasatiempos de playa: papel de diario con puntitos, títulos en bloques de color y tinta negra. */
:root {
  --arena: #e9d3a8;
  --papel: #fffaf0;
  --hoja: #fbf3df;
  --tinta: #1f1a17;
  --suave: #7a6d5e;
  --rojo: #e8432e;
  --turquesa: #12a4b4;
  --amarillo: #ffd23f;
  --azul: #2f5fd0;
  --sombra: rgba(31, 26, 23, 0.25);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--tinta);
  font-family: Verdana, Tahoma, sans-serif;
  background: var(--arena);
  background-image: radial-gradient(rgba(120, 80, 30, 0.12) 1px, transparent 1.6px);
  background-size: 9px 9px;
}
button { font-family: inherit; color: inherit; }

/* ---------- El lienzo ---------- */
.vista { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.vista.arrastrando { cursor: grabbing; }
.mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --z: 1; }
.hoja {
  position: absolute;
  background: var(--hoja);
  background-image: radial-gradient(rgba(31, 26, 23, 0.07) 1px, transparent 1.5px);
  background-size: 12px 12px;
  box-shadow: 0 calc(8px / var(--z)) calc(30px / var(--z)) var(--sombra);
  transition: left 0.9s ease, top 0.9s ease, width 0.9s ease, height 0.9s ease;
}

.celda {
  position: absolute;
  width: 300px;
  height: 300px;
  padding: 0;
  border: 0;
  background: var(--papel);
  box-shadow: inset 0 0 0 max(2px, calc(2px / var(--z))) var(--tinta);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
}
.celda:hover { background: #fff3cf; }
.c-seccion {
  background: var(--rojo);
  color: #fff;
  font: 900 24px "Arial Black", Impact, sans-serif;
  padding: 4px 14px;
  white-space: nowrap;
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--tinta);
}
.celda[data-tipo="sopa"] .c-seccion { background: var(--turquesa); }
.celda[data-tipo="ahorcado"] .c-seccion { background: var(--azul); }
.celda[data-tipo="laberinto"] .c-seccion { background: #f08a24; }
.celda[data-tipo="picross"] .c-seccion { background: #5a2ca0; }
.celda[data-tipo="buscaminas"] .c-seccion { background: #1f8a3a; }
.celda[data-tipo="cruzadas"] .c-seccion { background: #c2185b; }
.celda[data-tipo="anagramas"] .c-seccion { background: #0f6e8c; }
.celda[data-tipo="memotest"] .c-seccion { background: #d4471f; }
.celda[data-tipo="deslizante"] .c-seccion { background: #3d5a1e; }
.celda[data-tipo="mayormenor"] .c-seccion { background: #7a3b10; }
.celda[data-tipo="diferencias"] .c-seccion { background: #b0306a; }
.celda[data-tipo="codigo"] .c-seccion { background: #24356b; }
.celda[data-tipo="mate"] .c-seccion { background: #4a3426; }
.celda[data-tipo="luces"] .c-seccion { background: #c99400; }
.celda[data-tipo="piramide"] .c-seccion { background: #a0522d; }
.celda[data-tipo="secuencia"] .c-seccion { background: #0b7a5a; }
.celda[data-tipo="contar"] .c-seccion { background: #5b4bb7; }
.celda[data-tipo="edificios"] .c-seccion { background: #4b6584; }
.celda[data-tipo="solyluna"] .c-seccion { background: #d68910; }
.celda[data-tipo="carpas"] .c-seccion { background: #3c7a2e; }
.celda[data-tipo="canerias"] .c-seccion { background: #0f6f8f; }
.celda[data-tipo="refranes"] .c-seccion { background: #6d4c41; }
.celda[data-tipo="torres"] .c-seccion { background: #b23a48; }
.celda[data-tipo="naval"] .c-seccion { background: #1b4f72; }
.celda[data-tipo="palabra"] .c-seccion { background: #2e8b57; }
.celda[data-tipo="intruso"] .c-seccion { background: #c0392b; }
.celda[data-tipo="rompecabezas"] .c-seccion { background: #16a085; }
.celda[data-tipo="sumas"] .c-seccion { background: #7d3c98; }
.celda[data-tipo="cajas"] .c-seccion { background: #2c3e50; }
.c-icono { font-size: 88px; line-height: 1; }
.c-nivel { font-size: 30px; color: #e09a00; letter-spacing: 2px; }
.c-estado { font: 700 20px Verdana, sans-serif; text-transform: uppercase; color: var(--suave); }
.celda.a-medias .c-estado { color: var(--rojo); }
.celda.hecha { background: #fffdf7; cursor: zoom-in; }
.mini { position: absolute; inset: 22px; opacity: 0.9; }
.mini svg { width: 100%; height: 100%; display: block; }
.sello {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: var(--turquesa);
  color: #fff;
  font: 900 26px "Arial Black", Impact, sans-serif;
  padding: 2px 12px;
  border-radius: 8px;
  transform: rotate(-8deg);
  box-shadow: 3px 3px 0 var(--tinta);
}
.celda.perdida { background: #efe6d3; cursor: zoom-in; }
.celda.perdida .mini { opacity: 0.35; filter: grayscale(1); }
.tachon { position: absolute; inset: 14px; pointer-events: none; }
.tachon::before, .tachon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 16px;
  border-radius: 8px;
  background: var(--rojo);
  opacity: 0.85;
}
.tachon::before { transform: translate(-50%, -50%) rotate(45deg); }
.tachon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sello-perdida {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: var(--tinta);
  color: #fff;
  font: 900 22px "Arial Black", Impact, sans-serif;
  padding: 2px 10px;
  border-radius: 6px;
  transform: rotate(-8deg);
}
.celda.con-candado { background: #f6efdc; }
.celda.con-candado .c-icono { filter: grayscale(0.7); opacity: 0.6; }
.celda.con-candado .c-estado { color: #b8860b; }
.celda.nueva { animation: aparecer 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes aparecer { from { transform: scale(0.2) rotate(-12deg); opacity: 0; } }

/* ---------- Arriba y abajo ---------- */
.hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  pointer-events: none;
  z-index: 10;
}
.hud > * { pointer-events: auto; }
.logo {
  margin: 0;
  font: 900 clamp(20px, 4.5vw, 34px) "Arial Black", Impact, sans-serif;
  color: var(--amarillo);
  -webkit-text-stroke: 1.5px var(--tinta);
  text-shadow: 3px 3px 0 var(--tinta);
  transform: rotate(-2deg);
  letter-spacing: 1px;
}
.logo span { color: var(--rojo); }
.hud-der { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.marcador, .quien {
  background: var(--papel);
  border: 2px solid var(--tinta);
  box-shadow: 2px 2px 0 var(--tinta);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 15px;
  white-space: nowrap;
}
.marcador.demo { background: var(--amarillo); font: 700 14px Verdana, sans-serif; cursor: pointer; }
.redondo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  background: var(--papel);
  box-shadow: 2px 2px 0 var(--tinta);
  font-size: 17px;
  cursor: pointer;
}
.redondo:active { transform: translate(2px, 2px); box-shadow: none; }
.ayuda {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100% - 32px);
  text-align: center;
  background: rgba(255, 250, 240, 0.9);
  border: 2px solid var(--tinta);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  z-index: 10;
}

/* ---------- La página de un pasatiempo ---------- */
.pagina {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--papel);
  background-image: radial-gradient(rgba(31, 26, 23, 0.06) 1px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pagina.visible { opacity: 1; }
.pagina-cabeza {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 4px double var(--tinta);
}
.pagina-titulo { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pagina-datos { margin: 0; white-space: nowrap; font-size: 14px; }
.pagina-titulo h2 {
  margin: 0;
  background: var(--rojo);
  color: #fff;
  font: 900 clamp(15px, 4.5vw, 30px) "Arial Black", Impact, sans-serif;
  white-space: nowrap;
  padding: 2px 12px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--tinta);
}
.pagina[data-tipo="sopa"] h2 { background: var(--turquesa); }
.pagina[data-tipo="ahorcado"] h2 { background: var(--azul); }
.pagina[data-tipo="laberinto"] h2 { background: #f08a24; }
.pagina[data-tipo="picross"] h2 { background: #5a2ca0; }
.pagina[data-tipo="buscaminas"] h2 { background: #1f8a3a; }
.pagina[data-tipo="cruzadas"] h2 { background: #c2185b; }
.pagina[data-tipo="anagramas"] h2 { background: #0f6e8c; }
.pagina[data-tipo="memotest"] h2 { background: #d4471f; }
.pagina[data-tipo="deslizante"] h2 { background: #3d5a1e; }
.pagina[data-tipo="mayormenor"] h2 { background: #7a3b10; }
.pagina[data-tipo="diferencias"] h2 { background: #b0306a; }
.pagina[data-tipo="codigo"] h2 { background: #24356b; }
.pagina[data-tipo="mate"] h2 { background: #4a3426; }
.pagina[data-tipo="luces"] h2 { background: #c99400; }
.pagina[data-tipo="piramide"] h2 { background: #a0522d; }
.pagina[data-tipo="secuencia"] h2 { background: #0b7a5a; }
.pagina[data-tipo="contar"] h2 { background: #5b4bb7; }
.pagina[data-tipo="edificios"] h2 { background: #4b6584; }
.pagina[data-tipo="solyluna"] h2 { background: #d68910; }
.pagina[data-tipo="carpas"] h2 { background: #3c7a2e; }
.pagina[data-tipo="canerias"] h2 { background: #0f6f8f; }
.pagina[data-tipo="refranes"] h2 { background: #6d4c41; }
.pagina[data-tipo="torres"] h2 { background: #b23a48; }
.pagina[data-tipo="naval"] h2 { background: #1b4f72; }
.pagina[data-tipo="palabra"] h2 { background: #2e8b57; }
.pagina[data-tipo="intruso"] h2 { background: #c0392b; }
.pagina[data-tipo="rompecabezas"] h2 { background: #16a085; }
.pagina[data-tipo="sumas"] h2 { background: #7d3c98; }
.pagina[data-tipo="cajas"] h2 { background: #2c3e50; }
.estrellas { color: #e09a00; letter-spacing: 1px; font-size: 18px; white-space: nowrap; }
.vale { font-weight: 700; white-space: nowrap; }
.consigna { text-align: center; color: var(--suave); margin: 10px 16px 4px; font-size: 14px; }
.caja-juego {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 24px;
  --lado: min(calc(100vw - 32px), calc(100dvh - 290px), 560px);
}
.caja-juego.solo-ver .jugable { pointer-events: none; }
.tema { margin: 0; font-size: 16px; }

.boton {
  font: 900 17px "Arial Black", Impact, sans-serif;
  padding: 11px 18px;
  border: 3px solid var(--tinta);
  border-radius: 10px;
  background: var(--amarillo);
  box-shadow: 0 4px 0 var(--tinta);
  cursor: pointer;
}
.boton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.boton.chico { font-size: 14px; padding: 7px 12px; white-space: nowrap; }
.boton.secundario { background: #fff; }
.boton.peligro { background: var(--rojo); color: #fff; }

.tecla {
  min-width: 40px;
  height: 44px;
  padding: 0 6px;
  font: 700 19px Verdana, sans-serif;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 0 var(--tinta);
  cursor: pointer;
}
.tecla:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }
.tecla:disabled { cursor: default; }

/* Sudoku */
.sudoku {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  width: var(--lado);
  aspect-ratio: 1;
  gap: 1px;
  background: #b9ad9a;
  border: 3px solid var(--tinta);
}
.casilla {
  padding: 0;
  border: 0;
  background: #fff;
  font: 700 calc(var(--lado) / var(--n) * 0.52) Verdana, sans-serif;
  color: var(--azul);
  cursor: pointer;
  min-width: 0;
}
.casilla.borde-der { border-right: 3px solid var(--tinta); }
.casilla.borde-abajo { border-bottom: 3px solid var(--tinta); }
.casilla.dada { color: var(--tinta); background: #f4ecd8; }
.casilla.pariente { background: #eaf5f6; }
.casilla.dada.pariente { background: #e2ebe4; }
.casilla.marcada { background: #c7ecf0; }
.casilla.elegida { background: var(--amarillo); }
.casilla.mal { color: var(--rojo); }
.teclado-num { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: var(--lado); }
.teclado-num .borrar { background: #f4ecd8; }

/* Sopa de letras */
.sopa {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  width: var(--lado);
  aspect-ratio: 1;
  background: #fff;
  border: 3px solid var(--tinta);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.letra {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 calc(var(--lado) / var(--n) * 0.5) Verdana, sans-serif;
  border-radius: 6px;
  cursor: pointer;
}
.letra.sel { outline: 3px solid var(--rojo); outline-offset: -3px; background: #ffe9a8 !important; }
.lista-palabras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; max-width: var(--lado); font-weight: 700; }
.lista-palabras .hallada { text-decoration: line-through 3px var(--rojo); color: var(--suave); }

/* Ahorcado */
.horca { width: min(200px, 45vw); aspect-ratio: 1; }
.horca svg { width: 100%; height: 100%; }
.palabra-oculta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.palabra-oculta span {
  width: 1.3em;
  height: 1.4em;
  border-bottom: 3px solid var(--tinta);
  text-align: center;
  font: 900 clamp(22px, 6vw, 32px) "Arial Black", Impact, sans-serif;
}
.vidas { margin: 0; color: var(--suave); }
.teclado-letras { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; width: min(calc(100vw - 32px), 470px); }
.teclado-letras .tecla { min-width: 0; padding: 0; }
.teclado-letras .tecla.bien { background: var(--turquesa); color: #fff; }
.teclado-letras .tecla.mal { background: #ddd5c6; color: #9a8f80; box-shadow: none; }
.otra { text-align: center; }
.otra p { margin: 0 0 8px; }

/* Laberinto */
.laberinto { width: var(--lado); aspect-ratio: 1; background: #fff; border: 3px solid var(--tinta); touch-action: none; }
.flechas { display: grid; grid-template-columns: repeat(4, 48px); gap: 8px; }

/* ---------- Carteles ---------- */
.velo {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(31, 22, 10, 0.5);
}
.tarjeta {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  text-align: center;
  background: var(--papel);
  border: 3px solid var(--tinta);
  box-shadow: 8px 8px 0 var(--tinta);
}
.tarjeta h2 { margin: 0; font: 900 24px "Arial Black", Impact, sans-serif; }
.tarjeta p { margin: 0; }
.botones { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.festejo { animation: rebote 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.festejo-titulo { font: 900 40px "Arial Black", Impact, sans-serif; color: var(--amarillo); -webkit-text-stroke: 2px var(--tinta); text-shadow: 4px 4px 0 var(--tinta); transform: rotate(-3deg); }
.festejo-puntos { font: 900 28px "Arial Black", Impact, sans-serif; color: var(--turquesa); }
@keyframes rebote { from { transform: scale(0.4); opacity: 0; } }
.festejo.perdio .festejo-titulo { color: var(--rojo); }
.festejo.perdio .festejo-puntos { color: var(--tinta); }

/* Botones de modo (picross, buscaminas) */
.modos { display: flex; gap: 8px; }
.modos .tecla { font-size: 15px; padding: 0 12px; }
.modos .tecla.activo { background: var(--amarillo); }

/* Picross */
.picross {
  display: grid;
  grid-template-columns: auto repeat(var(--n), 1fr);
  grid-template-rows: auto repeat(var(--n), 1fr);
  width: var(--lado);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pista-col, .pista-fila { display: flex; gap: 2px; align-items: flex-end; justify-content: center; font: 700 clamp(10px, calc(var(--lado) / var(--n) * 0.32), 16px) Verdana, sans-serif; color: var(--tinta); }
.pista-col { flex-direction: column; align-items: center; padding-bottom: 4px; }
.pista-fila { justify-content: flex-end; align-items: center; padding-right: 6px; gap: 5px; }
.pista-col.cumplida, .pista-fila.cumplida { color: #b9ad9a; }
.cuadro { aspect-ratio: 1; background: #fff; border: 1px solid #b9ad9a; margin: 0 -1px -1px 0; cursor: pointer; position: relative; }
.cuadro.borde-der { border-right: 2px solid var(--tinta); }
.cuadro.borde-abajo { border-bottom: 2px solid var(--tinta); }
.cuadro.lleno { background: var(--tinta); }
.cuadro.cruz::after { content: "✕"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--rojo); font-size: calc(var(--lado) / var(--n) * 0.45); }

/* Buscaminas */
.minas-cuenta { margin: 0; font-weight: 700; }
.buscaminas { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: var(--lado); gap: 2px; padding: 3px; background: var(--tinta); }
.mina {
  aspect-ratio: 1;
  padding: 0;
  min-width: 0;
  border: 0;
  background: #cfc4ae;
  box-shadow: inset -2px -2px 0 #a89a80, inset 2px 2px 0 #eee5d2;
  font: 900 calc(var(--lado) / var(--n) * 0.5) Verdana, sans-serif;
  cursor: pointer;
}
.mina.abierta { background: var(--papel); box-shadow: none; cursor: default; }
.mina.boom { background: var(--rojo); }

/* Palabras cruzadas */
.cruzadas {
  display: grid;
  grid-template-columns: repeat(var(--w), calc(var(--lado) / var(--m)));
  grid-template-rows: repeat(var(--h), calc(var(--lado) / var(--m)));
}
.hueco {
  padding: 0;
  border: 2px solid var(--tinta);
  margin: 0 -2px -2px 0;
  background: #fff;
  font: 900 calc(var(--lado) / var(--m) * 0.55) Verdana, sans-serif;
  color: var(--azul);
  cursor: pointer;
  min-width: 0;
}
.hueco.dada { color: var(--tinta); background: #f4ecd8; }
.hueco.en-palabra { background: #c7ecf0; }
.hueco.elegida { background: var(--amarillo); }
.lista-cruzadas { max-width: var(--lado); text-align: center; }
.lista-cruzadas p { margin: 2px 0; }
.lista-cruzadas span { font-weight: 700; margin-right: 6px; }
.lista-cruzadas .puesta { text-decoration: line-through 3px var(--rojo); color: var(--suave); }
.teclado-letras .borrar { grid-column: span 2; background: #f4ecd8; }

/* Anagramas */
.respuesta, .fichas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: var(--lado); }
.ficha {
  width: clamp(26px, calc((min(100vw, 560px) - 92px) / 10), 46px);
  height: clamp(34px, 10.5vw, 52px);
  padding: 0;
  font: 900 clamp(18px, 5.5vw, 26px) "Arial Black", Impact, sans-serif;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: #f4ecd8;
  box-shadow: 0 3px 0 var(--tinta);
  cursor: pointer;
}
.ficha:disabled { opacity: 0.25; box-shadow: none; cursor: default; }
.hueco-ficha { background: #fff; box-shadow: none; border-style: dashed; }
.respuesta.error { animation: sacudir 0.4s; }
.respuesta.error .ficha { border-color: var(--rojo); color: var(--rojo); }
@keyframes sacudir { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Memotest */
.intentos { margin: 0; font-weight: 700; }
.memotest {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 6px;
  width: min(var(--lado), calc((100dvh - 250px) * var(--cols) / var(--filas)));
}
.carta {
  aspect-ratio: 1;
  padding: 0;
  min-width: 0;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: var(--turquesa) repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 0 6px, transparent 6px 12px);
  box-shadow: 0 3px 0 var(--tinta);
  cursor: pointer;
  font-size: calc(var(--lado) / var(--cols) * 0.5);
}
.carta .cara { visibility: hidden; }
.carta.boca-arriba { background: var(--papel); }
.carta.boca-arriba .cara { visibility: visible; }
.carta.hecha { background: #fff3cf; box-shadow: none; cursor: default; }

/* Deslizante */
.deslizante { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 5px; width: min(var(--lado), 420px); padding: 5px; background: var(--tinta); border-radius: 8px; }
.pieza {
  aspect-ratio: 1;
  padding: 0;
  min-width: 0;
  border: 0;
  border-radius: 6px;
  background: #f4ecd8;
  box-shadow: inset 0 -4px 0 #cfc4ae;
  font: 900 calc(min(var(--lado), 420px) / var(--n) * 0.4) "Arial Black", Impact, sans-serif;
  cursor: pointer;
}
.pieza.en-su-lugar { background: var(--amarillo); box-shadow: inset 0 -4px 0 #d9a800; }
.pieza.hueco-pieza { background: transparent; box-shadow: none; cursor: default; }

/* Mayor o menor */
.futoshiki {
  display: grid;
  width: min(var(--lado), 440px);
}
.numero {
  aspect-ratio: 1;
  padding: 0;
  min-width: 0;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  background: #fff;
  font: 700 calc(min(var(--lado), 440px) / (var(--n) * 1.5) * 0.6) Verdana, sans-serif;
  color: var(--azul);
  cursor: pointer;
}
.numero.dada { color: var(--tinta); background: #f4ecd8; }
.numero.elegida { background: var(--amarillo); }
.numero.mal { color: var(--rojo); }
.signo { display: flex; align-items: center; justify-content: center; font: 900 calc(min(var(--lado), 440px) / (var(--n) * 1.5) * 0.42) Verdana, sans-serif; color: var(--suave); }
.signo.roto { color: var(--rojo); }

/* Diferencias */
.diferencias { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dif-cuadro {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  width: min(var(--lado), calc((100dvh - 290px) / 2), 420px);
  background: #fff;
  border: 3px solid var(--tinta);
  border-radius: 8px;
}
.dif {
  aspect-ratio: 1;
  padding: 0;
  min-width: 0;
  border: 0;
  background: none;
  font-size: calc(min(var(--lado), calc((100dvh - 290px) / 2), 420px) / var(--n) * 0.6);
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.dif span { display: inline-block; }
.dif.vuelta span { transform: scaleX(-1); }
.dif.chico span { transform: scale(0.6); }
.dif.hallada { box-shadow: inset 0 0 0 3px var(--rojo); }
.dif.errada { animation: sacudir 0.35s; }
@media (min-width: 900px) { .dif-cuadro { width: min(calc((100vw - 80px) / 2), calc(100dvh - 260px), 420px); } .dif { font-size: calc(min(calc((100vw - 80px) / 2), calc(100dvh - 260px), 420px) / var(--n) * 0.6); } }

/* Código secreto */
.codigo-tablero { display: flex; flex-direction: column; gap: 6px; }
.codigo-fila { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; background: #fff; border: 2px solid #ddd5c6; }
.codigo-fila.actual { border-color: var(--tinta); }
.codigo-fila .pistas { min-width: 70px; margin-left: 8px; font-size: 18px; letter-spacing: 1px; }
.bolita { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--tinta); background: #f4ecd8; display: inline-block; }
.paleta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bolita-color { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--tinta); box-shadow: 0 3px 0 var(--tinta); cursor: pointer; }
.bolita-color:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }
.otra .codigo-fila { justify-content: center; margin: 0 auto 8px; width: max-content; }

/* Mate en uno */
.ajedrez { display: grid; grid-template-columns: repeat(8, 1fr); width: min(var(--lado), 480px); border: 3px solid var(--tinta); }
.escaque {
  aspect-ratio: 1;
  padding: 0;
  min-width: 0;
  border: 0;
  font: calc(min(var(--lado), 480px) / 8 * 0.72) / 1 "Segoe UI Symbol", "DejaVu Sans", serif;
  color: #fffaf0;
  -webkit-text-stroke: 1.2px var(--tinta);
  cursor: pointer;
}
.escaque.claro { background: #f4e4c1; }
.escaque.oscuro { background: #c9a46b; }
.escaque.pieza-negra { color: var(--tinta); -webkit-text-stroke: 0; }
.escaque.elegida { box-shadow: inset 0 0 0 4px var(--azul); }
.escaque.posible { background-image: radial-gradient(rgba(47, 95, 208, 0.45) 22%, transparent 24%); }
.escaque.jaque { background: #ff9a8a; }
.escaque.llegada { background: #ffe27a; }
.escaque.no-es { background: #ffb3a7; }

/* Apagá las luces */
.luces { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(var(--lado), 420px); padding: 8px; background: #2b2f42; border-radius: 12px; }
.lampara { aspect-ratio: 1; padding: 0; min-width: 0; border: 2px solid var(--tinta); border-radius: 10px; background: #3a3f55; font-size: calc(min(var(--lado), 420px) / var(--n) * 0.45); filter: grayscale(1) brightness(0.55); cursor: pointer; }
.lampara.prendida { background: #fff3b0; filter: none; box-shadow: 0 0 14px #ffd23f; }

/* Pirámide de sumas */
.piramide { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fila-piramide { display: flex; gap: 4px; }
.ladrillo { width: clamp(44px, 14vw, 64px); height: 40px; padding: 0; border: 2px solid var(--tinta); border-radius: 6px; background: #ffd9c2; font: 700 17px Verdana, sans-serif; color: var(--azul); cursor: pointer; }
.ladrillo.dado { background: #f4ecd8; color: var(--tinta); cursor: default; }
.ladrillo.elegida { background: var(--amarillo); }
.ladrillo.mal { color: var(--rojo); }

/* Secuencia */
.secuencia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(var(--lado), 360px); }
.luz-color { aspect-ratio: 1; border: 3px solid var(--tinta); border-radius: 50%; background: var(--c); opacity: 0.4; box-shadow: 0 4px 0 var(--tinta); cursor: pointer; transition: opacity 0.08s, transform 0.08s; }
.luz-color.prendida { opacity: 1; transform: scale(1.06); box-shadow: 0 0 22px var(--c), 0 4px 0 var(--tinta); }

/* ¿Cuántos hay? */
.pregunta-contar { margin: 0; font-weight: 700; font-size: 18px; }
.pregunta-contar .grande { font-size: 30px; vertical-align: middle; }
.contar { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(var(--lado), 460px); background: #fff; border: 3px solid var(--tinta); border-radius: 8px; padding: 4px; }
.contar span { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: calc(min(var(--lado), 460px) / var(--n) * 0.62); }
.contador { display: flex; align-items: center; gap: 10px; }
.contador .cuenta { min-width: 48px; text-align: center; font: 900 30px "Arial Black", Impact, sans-serif; }

/* Edificios y Carpas: grilla con números en el borde */
.edificios, .camping { display: grid; grid-template-columns: repeat(var(--l), 1fr); width: min(var(--lado), 440px); gap: 2px; }
.pista-borde { display: flex; align-items: center; justify-content: center; font: 900 calc(min(var(--lado), 440px) / var(--l) * 0.42) "Arial Black", Impact, sans-serif; color: var(--rojo); }
.pista-borde.cumplida { color: #b9ad9a; }
.pista-borde.rota { color: #fff; background: var(--rojo); border-radius: 6px; }
.piso {
  aspect-ratio: 1;
  padding: 0;
  min-width: 0;
  border: 2px solid var(--tinta);
  border-radius: 4px;
  background: linear-gradient(to top, #9fb4d8 calc(var(--alto, 0) * 100%), #fff 0);
  font: 700 calc(min(var(--lado), 440px) / var(--l) * 0.5) Verdana, sans-serif;
  cursor: pointer;
}
.piso.elegida { outline: 4px solid var(--amarillo); outline-offset: -4px; }
.piso.mal { color: var(--rojo); }
.camping { gap: 0; }
.camping .pista-borde { color: var(--tinta); }
.parcela { aspect-ratio: 1; padding: 0; min-width: 0; border: 1px solid #9db588; background: #eaf3dc; font-size: calc(min(var(--lado), 440px) / var(--l) * 0.6); cursor: pointer; }
.parcela.arbol { cursor: default; }
.parcela.pasto { background: #b9dc96; }
.parcela.mal { background: #ffb3a7; }

/* Sol y luna */
.solyluna { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(var(--lado), 440px); border: 3px solid var(--tinta); background: #b9ad9a; gap: 1px; }
.astro { aspect-ratio: 1; padding: 0; min-width: 0; border: 0; background: #fff; font-size: calc(min(var(--lado), 440px) / var(--n) * 0.55); cursor: pointer; }
.astro.dada { background: #f4ecd8; cursor: default; }
.astro.mal { background: #ffcfc7; }

/* Cañerías */
.canerias { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(var(--lado), 440px); background: #f4ecd8; border: 3px solid var(--tinta); }
.cano { aspect-ratio: 1; padding: 0; min-width: 0; border: 1px solid #e3d8c0; background: none; cursor: pointer; }
.cano svg { width: 100%; height: 100%; display: block; }

/* Refranes */
.refran-armado, .refran-fichas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: min(var(--lado), 520px); min-height: 48px; }
.refran-armado { padding: 8px; border: 2px dashed var(--tinta); border-radius: 10px; background: #fff; width: 100%; }
.refran-armado.error { animation: sacudir 0.4s; border-color: var(--rojo); }
.refran-armado .vacio { color: var(--suave); font-style: italic; align-self: center; }
.palabra-ficha { padding: 8px 12px; font: 700 17px Georgia, serif; border: 2px solid var(--tinta); border-radius: 8px; background: #f4ecd8; box-shadow: 0 3px 0 var(--tinta); cursor: pointer; }
.palabra-ficha:disabled { opacity: 0.25; box-shadow: none; }
.refranes-hechos { margin: 0; padding-left: 20px; max-width: min(var(--lado), 520px); font: italic 15px Georgia, serif; color: var(--suave); }

/* Torres */
.torres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(var(--lado), 480px); }
.poste {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  height: calc(var(--d) * 30px + 60px);
  padding: 0 0 8px;
  border: 0;
  border-bottom: 8px solid #8a7f70;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.poste.meta { background: #fff3cf; }
.poste.alzada { box-shadow: inset 0 0 0 3px var(--azul); }
.palo { position: absolute; bottom: 0; left: calc(50% - 4px); width: 8px; height: calc(100% - 20px); background: #8a7f70; border-radius: 4px; }
.disco { position: relative; width: calc(28% + var(--t) * 10%); max-width: 96%; height: 26px; border: 2px solid var(--tinta); border-radius: 8px; background: var(--c); }
.disco.arriba { transform: translateY(-14px); }

/* Batalla naval */
.flota { margin: 0; letter-spacing: 1px; }
.naval { display: grid; grid-template-columns: repeat(var(--l), 1fr); width: min(var(--lado), 440px); }
.naval .pista-borde { color: var(--tinta); }
.ola { aspect-ratio: 1; padding: 0; min-width: 0; border: 1px solid #a9d3dc; background: #eef8fa; cursor: pointer; }
.ola.barco { background: radial-gradient(circle, #24356b 58%, #eef8fa 60%); }
.ola.agua { background: #b9e2ea; }
.ola.dada { border: 2px solid var(--tinta); cursor: default; }

/* Palabra secreta */
.palabras-tablero { display: flex; flex-direction: column; gap: 5px; }
.palabra-fila { display: grid; grid-template-columns: repeat(var(--largo), 1fr); gap: 5px; }
.palabra-fila span { width: clamp(34px, 11vw, 48px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #ddd5c6; border-radius: 6px; background: #fff; font: 900 clamp(18px, 6vw, 26px) "Arial Black", Impact, sans-serif; }
.palabra-fila span.escrita { border-color: var(--tinta); }
.palabra-fila span.bien { background: #4caf50; border-color: #2e7d32; color: #fff; }
.palabra-fila span.cerca { background: var(--amarillo); border-color: #d9a800; }
.palabra-fila span.no { background: #cfc4ae; border-color: #b9ad9a; color: #6d6253; }
.teclado-letras .tecla.cerca { background: var(--amarillo); }
.teclado-letras .enviar { background: var(--turquesa); color: #fff; }

/* ¿Cuál no va? */
.intruso { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: min(var(--lado), 520px); }
.intruso .palabra-ficha { font: 900 18px "Arial Black", Impact, sans-serif; padding: 12px 16px; }
.intruso .palabra-ficha.errada { background: #ffcfc7; text-decoration: line-through; }
.tema-revelado { margin: 0; color: var(--suave); font-style: italic; min-height: 1.2em; }

/* Rompecabezas */
.rompecabezas { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; width: min(var(--lado), 460px); background: var(--tinta); border: 3px solid var(--tinta); }
.pieza-rompe { aspect-ratio: 1; padding: 0; min-width: 0; border: 0; background: #fff; cursor: pointer; overflow: hidden; }
.pieza-rompe svg { width: 100%; height: 100%; display: block; }
.pieza-rompe.elegida { outline: 4px solid var(--amarillo); outline-offset: -4px; }
.modelo { max-width: 200px; text-align: center; }
.modelo summary { cursor: pointer; color: var(--suave); }
.modelo svg { width: 160px; height: 160px; border: 2px solid var(--tinta); margin-top: 6px; }

/* Sumas tachadas */
.sumas { display: grid; grid-template-columns: repeat(var(--l), 1fr); gap: 4px; width: min(var(--lado), 460px); }
.sumando { aspect-ratio: 1; padding: 0; min-width: 0; border: 2px solid var(--tinta); border-radius: 50%; background: var(--amarillo); font: 900 calc(min(var(--lado), 460px) / var(--l) * 0.42) "Arial Black", Impact, sans-serif; cursor: pointer; }
.sumando.tachado { background: #efe6d3; color: #b9ad9a; text-decoration: line-through 3px var(--rojo); }
.sumas .pista-borde { color: var(--azul); }
.sumas .pista-borde.rota { background: none; color: var(--rojo); }

/* Cajas que suman */
.cajas { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(var(--lado), 440px); border: 3px solid var(--tinta); background: #fff; }
.celda-caja { position: relative; aspect-ratio: 1; padding: 0; min-width: 0; border: 1px dashed #c9bfae; background: #fff; font: 700 calc(min(var(--lado), 440px) / var(--n) * 0.48) Verdana, sans-serif; color: var(--azul); cursor: pointer; }
.celda-caja.b-izq { border-left: 3px solid var(--tinta); }
.celda-caja.b-der { border-right: 3px solid var(--tinta); }
.celda-caja.b-arr { border-top: 3px solid var(--tinta); }
.celda-caja.b-aba { border-bottom: 3px solid var(--tinta); }
.celda-caja[data-suma]::before { content: attr(data-suma); position: absolute; left: 3px; top: 1px; font: 700 calc(min(var(--lado), 440px) / var(--n) * 0.2) Verdana, sans-serif; color: var(--rojo); }
.celda-caja.dada { color: var(--tinta); background: #f4ecd8; cursor: default; }
.celda-caja.elegida { background: var(--amarillo); }
.celda-caja.mal { color: var(--rojo); }

/* ---------- Trofeos ---------- */
.aviso-trofeo {
  position: fixed;
  left: 50%;
  top: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  background: var(--papel);
  border: 3px solid var(--tinta);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--tinta);
  transform: translateX(-50%);
}
.aviso-trofeo.entra { animation: trofeo-entra 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes trofeo-entra { from { transform: translate(-50%, -140%); } }
.at-emoji { font-size: 34px; }
.aviso-trofeo b, .lista-trofeos b { display: block; font-family: "Arial Black", Impact, sans-serif; }
.aviso-trofeo small, .lista-trofeos small { display: block; color: var(--suave); }
.lista-trofeos { list-style: none; margin: 0; padding: 0; max-height: 55dvh; overflow: auto; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.lista-trofeos li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: #f1e9d6; opacity: 0.6; }
.lista-trofeos li.ganado { background: #fff3cf; opacity: 1; }
.lista-trofeos .t-emoji { font-size: 24px; }
.lista-trofeos .t-xp { margin-left: auto; font-weight: 700; white-space: nowrap; }
.tarjeta:has(.lista-trofeos:not([hidden])) { max-width: 460px; }

@media (max-width: 560px) {
  .hud { flex-direction: column; align-items: flex-start; }
  .ayuda { font-size: 12px; }
}