/* Guessdom — estructura común. Cada temática redefine los tokens de :root
   en su propia hoja (colores, fuentes, fondo, texturas). */

:root {
  --bg: #0d0b1a;
  --fondo: radial-gradient(1000px 500px at 50% -150px, rgba(139, 92, 246, .22), transparent), var(--bg);
  --surface: #17142b;
  --surface-2: #211d3a;
  --borde: rgba(255, 255, 255, .09);
  --texto: #f3f1ff;
  --suave: #9d98b8;
  --acento: #a78bfa;
  --acento-2: #f0abfc;
  --grad: linear-gradient(135deg, #8b5cf6, #ec4899);
  --sobre-acento: #fff;
  --ok: #22c55e;
  --sobre-ok: #04210f;
  --casi: #eab308;
  --sobre-casi: #2a2000;
  --mal: #3a1d2c;
  --sobre-mal: #fecaca;
  --r: 14px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Space Grotesk', 'Inter', sans-serif;
  --cab-bg: rgba(13, 11, 26, .85);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--fondo);
  background-attachment: fixed;
  color: var(--texto);
  font: 15px/1.5 var(--font);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: default; opacity: .4; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; }
main.ancho { max-width: 1060px; }

/* ── Cabecera ── */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: var(--cab-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.logo { font: 700 24px/1 'Space Grotesk', var(--font); letter-spacing: -.5px; text-decoration: none; color: var(--texto); }
.logo b { font-weight: inherit; background: linear-gradient(135deg, #a78bfa, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tema-link { font: 20px/1 var(--font-d); text-decoration: none; color: var(--acento); white-space: nowrap; }
.nav { display: flex; gap: 2px; flex: 1; justify-content: center; }
.nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--suave); text-decoration: none; white-space: nowrap;
}
.nav a:hover { color: var(--texto); background: var(--surface-2); }
.nav a.on { color: var(--texto); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--acento); }
.top-acciones { display: flex; gap: 6px; margin-left: auto; }
.icono {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--borde); font-weight: 700; font-size: 13px;
}
.icono:hover { border-color: var(--acento); }
/* Racha de Guessdom: llama con el número de días */
.icono.racha { width: auto; padding: 0 10px; gap: 4px; display: flex; align-items: center; font-size: 15px; }
.icono.racha b { font-size: 14px; }
.icono.racha.apagada span { filter: grayscale(1); opacity: .55; }
.icono.racha.peligro { border-color: #ffb020; animation: racha-latido 1.4s ease-in-out infinite; }
@keyframes racha-latido { 50% { box-shadow: 0 0 0 4px rgba(255, 176, 32, .25); } }
@media (prefers-reduced-motion: reduce) { .icono.racha.peligro { animation: none; } }
.racha-web { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 120, 30, .18), rgba(255, 60, 90, .12)); border: 1px solid rgba(255, 140, 40, .35); text-align: left; }
.racha-web .llama { font-size: 34px; line-height: 1; }
.racha-web.apagada .llama { filter: grayscale(1); opacity: .5; }
.racha-web > div { flex: 1; font-size: 14px; }
.racha-web > div > b { font: 26px/1 var(--font-d); }
.racha-web small { display: block; color: var(--suave); margin-top: 2px; }
.racha-web .record { text-align: center; font-size: 11px; color: var(--suave); }
.racha-web .record b { display: block; font: 22px/1 var(--font-d); color: var(--texto); }
.racha-ayuda { font-size: 13px; color: var(--suave); margin-top: 10px; }
.menu { display: none; }

@media (max-width: 860px) {
  .menu { display: grid; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; padding: 8px 16px 16px;
    background: var(--bg); border-bottom: 1px solid var(--borde);
  }
  .nav.abierto { display: flex; }
  .nav a { font-size: 15px; padding: 12px; }
}
@media (max-width: 420px) {
  .tema-link { display: none; }
}

/* ── Pie ── */
.pie { text-align: center; padding: 28px 16px; font-size: 13px; color: var(--suave); border-top: 1px solid var(--borde); }
.pie a { color: var(--suave); }
.pie p { margin-top: 6px; }
.aviso-legal { max-width: 640px; margin: 10px auto 0; font-size: 12px; opacity: .8; }

/* ── Piezas comunes ── */
h1.titulo { font: clamp(36px, 8vw, 48px)/1.05 var(--font-d); text-align: center; }
.subtitulo { text-align: center; color: var(--suave); margin: 6px 0 24px; }
.tarjeta { background: var(--surface); border: 1px solid var(--borde); border-radius: var(--r); padding: 20px; }
.btn {
  display: block; width: 100%; padding: 13px 18px; border-radius: 12px;
  background: var(--grad); color: var(--sobre-acento); font-weight: 700; text-align: center; text-decoration: none;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn.sec { background: var(--surface-2); color: var(--texto); border: 1px solid var(--borde); }
.campo { position: relative; }
.campo input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--borde); color: var(--texto); font: inherit;
}
.campo input::placeholder { color: var(--suave); }
.campo input:focus { outline: none; border-color: var(--acento); }
.sugerencias {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  list-style: none; max-height: 340px; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.sugerencias li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.sugerencias li img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; object-position: top; flex-shrink: 0; background: var(--surface); }
.sugerencias li small { display: block; color: var(--suave); font-size: 12px; }
.sugerencias li.sel, .sugerencias li:hover { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.mensaje { text-align: center; min-height: 24px; margin: 12px 0; color: var(--suave); }
.estrecho { max-width: 560px; margin-left: auto; margin-right: auto; }
.campo.estrecho { margin-bottom: 20px; }
.aviso-fin { text-align: center; margin-bottom: 20px; }
.aviso-fin .btn { margin-top: 12px; }

/* ── Modal ── */
.modal {
  margin: auto; width: min(420px, calc(100% - 32px)); max-height: 90dvh;
  padding: 28px 22px 22px; border-radius: 18px;
  background: var(--surface); color: var(--texto); border: 1px solid var(--borde);
}
.modal::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.modal h2 { font: 28px/1.1 var(--font-d); text-align: center; margin-bottom: 14px; }
.modal p { margin-bottom: 10px; }
.modal .cerrar { position: absolute; top: 10px; right: 14px; font-size: 26px; color: var(--suave); }
.modal .btn { margin-top: 14px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 0 4px; text-align: center; font-size: 11px; color: var(--suave); }
.stats b { display: block; font: 28px/1.1 var(--font-d); color: var(--texto); }
.cuenta { text-align: center; font-size: 13px; margin-top: 14px; color: var(--suave); }
.cuenta span { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 700; }
.siguientes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.siguientes a { padding: 6px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; text-decoration: none; }

/* ── Tarjetas de juegos (portada de cada temática) ──
   Arriba una "muestra" del juego (componentes reales a escala), abajo título y botón. */
.juegos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.juego {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: calc(var(--r) + 4px); text-decoration: none; color: var(--texto);
  background: var(--surface); border: 1px solid var(--borde);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.juego:hover { transform: translateY(-4px); border-color: var(--acento); box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
.juego .muestra { position: relative; height: 200px; overflow: hidden; border-bottom: 1px solid var(--borde); background: var(--surface-2); }
/* La escena se dibuja a tamaño real (520px) y se reduce para caber en la tarjeta */
.juego .escena { position: absolute; top: 18px; left: 50%; width: 520px; transform: translateX(-50%) scale(.6); transform-origin: top center; pointer-events: none; }
.juego:hover .escena { transform: translateX(-50%) scale(.63); transition: transform .3s; }
.juego .cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.juego .cuerpo b { font-size: 22px; line-height: 1.1; }
.juego .cuerpo span { color: var(--suave); font-size: 14px; }
.juego .ir { align-self: flex-start; margin-top: 10px; padding: 8px 18px; border-radius: 999px; background: var(--grad); color: var(--sobre-acento) !important; font-weight: 700; font-size: 14px !important; }
.juego .estado { position: absolute; z-index: 2; top: 12px; right: 12px; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--ok); color: var(--sobre-ok); }

/* ── Animaciones ── */
@keyframes girar { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes temblar { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.temblar { animation: temblar .25s 2; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Páginas de texto ── */
main.texto { max-width: 720px; }
.texto h2 { font: 24px/1.2 var(--font-d); margin: 26px 0 8px; }
.texto p, .texto li { margin-bottom: 10px; }
.texto ul { padding-left: 20px; }
.texto a { color: var(--acento); }

/* Bloques largos bilingües: <div data-lang="es">…</div><div data-lang="en">…</div> */
html[lang="es"] [data-lang="en"], html[lang="en"] [data-lang="es"] { display: none; }