/* ══════════════════════════════════════════════
   WORDLE — style.css
   Newspaper edition — matches FutbolHUB aesthetic
   ══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables (mismos nombres que el resto de la web: theme-v2-app.css
   los redefine globalmente bajo :root[data-theme="v2"], así que este juego
   se retiñe solo al cambiar de diseño, sin tocar nada aquí). ── */
:root {
  --np-paper:     #f4ead2;
  --np-paper2:    #ede0c0;
  --np-white:     #ffffff;
  --np-ink:       #0f120e;
  --np-ink-mid:   rgba(var(--np-ink-rgb, 15,18,14), 0.62);
  --np-ink-soft:  rgba(var(--np-ink-rgb, 15,18,14), 0.15);
  --np-red:       #b5221e;
  --np-green:     #2d6a35;

  --font-serif:   'Playfair Display', Georgia, serif;
  --font-mono:    'DM Mono', monospace;
  --font-display: 'Anton', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Colores de las fichas: son la identidad visual del propio juego (igual
     que el verde/amarillo/gris del Wordle original), así que se quedan
     fijos y NO se retiñen con el diseño de la web — cambiar de tema no
     debe cambiar el significado de un color en pleno tablero. */
  --wd-correct: #538d4e;
  --wd-present: #b59f3b;
  --wd-absent:  #3a3a3c;
}

html, body {
  min-height: 100%;
  background: var(--np-paper);
  color: var(--np-ink);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.65;
}

.hidden { display: none !important; }
button { cursor: pointer; }

/* ══════════════════════════════════════════════
   COLUMNAS LATERALES DE ANUNCIOS
   ══════════════════════════════════════════════ */
.fh-rail {
  position: fixed;
  top: 0; bottom: 0; width: var(--ad-col-w, 72px);
  display: flex; flex-direction: column;
  z-index: 3;
  background: var(--np-paper);
}
.fh-rail--left  { left: 0;  border-right: 1px solid var(--np-ink-soft); }
.fh-rail--right { right: 0; border-left:  1px solid var(--np-ink-soft); }

@media (max-width: 759px) {
  .fh-rail { display: none; }
}

/* ══════════════════════════════════════════════
   PANTALLAS
   ══════════════════════════════════════════════ */
.screen { display: none; position: relative; z-index: 1; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* ── Shared: eyebrow label ───────────────────── */
.eyebrow { display: flex; align-items: center; gap: 6px; }
.eyebrow-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; color: var(--np-ink-mid); text-transform: uppercase; }
.eyebrow-sep { font-family: var(--font-mono); font-size: 10px; color: var(--np-ink-mid); }
.eyebrow-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--np-red); text-transform: uppercase; }

/* ══════════════════════════════════════════════
   BOTONES / ENLACES COMPARTIDOS
   ══════════════════════════════════════════════ */
.btn-primary {
  background: var(--np-ink); color: var(--np-paper);
  border: none; border-radius: var(--r-md, 0);
  padding: 13px 24px;
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  width: 100%; transition: opacity 0.15s, transform 0.1s;
  box-shadow: var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c-red,var(--np-red));
}
.btn-primary:hover { opacity: 0.86; }
.btn-primary:active { transform: scale(0.99); }

.btn-secondary {
  background: transparent; color: var(--np-ink);
  border: 1.5px solid var(--bd-c, var(--np-ink)); border-radius: var(--r-md, 0);
  padding: 11px 20px;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover { background: var(--np-ink); color: var(--np-paper); }

a.btn-secondary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ══════════════════════════════════════════════
   PANTALLA DE JUEGO
   ══════════════════════════════════════════════ */
#screen-game { align-items: center; padding: 8px 12px 200px; }
/* Apartarse de las columnas de anuncios, como La Carrera y En el Top. Sin
   esto, a partir de 1240px (--ad-col-w: 172px) la columna izquierda, que va
   fija y por encima, tapaba el botón "← Volver" de la cabecera. */
@media (min-width: 760px) {
  #screen-game { margin-left: var(--ad-col-w, 0px); margin-right: var(--ad-col-w, 0px); }
}

#wd-topbar {
  width: 100%; max-width: 420px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px 10px;
  /* Sin margin-top: los 44px de móvil eran para no quedar debajo del
     "← Volver" cuando flotaba. Ahora va en la fila .fh-cabecera, en el
     flujo, y ese margen solo dejaba un hueco vacío. */
}

.wd-topbar-left { display: flex; align-items: center; gap: 8px; }
.wd-day { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.05em; color: var(--np-ink); }

.wd-archive-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--np-ink-mid); border: 1px solid var(--np-ink-soft); border-radius: var(--r-sm, 0);
  padding: 3px 6px;
}

.wd-topbar-actions { display: flex; align-items: center; gap: 8px; }

.wd-icon-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--bd-c, var(--np-ink)); background: transparent; color: var(--np-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.wd-icon-btn:hover { background: var(--np-ink); color: var(--np-paper); }
#wd-rules-btn { font-family: var(--font-serif); font-style: italic; font-weight: 900; font-size: 0.95rem; }

/* ── Cargando / error de arranque ──
   Sustituye al botón "JUGAR" que antes hacía de indicador: ahora no hay
   pantalla de menú donde ponerlo, así que el hueco que iba a ocupar el
   tablero avisa de que todavía no hay nada que pintar. fatal() reescribe
   su texto y lo deja fijo (a diferencia del toast, que desaparece solo). */
.wd-loading {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--np-ink-mid); text-align: center; margin: 36px 0;
}

/* ── Tablero ──
   max-width + overflow-x: red de seguridad para palabras muy largas. El
   ancho de ficha calculado en JS (applyCellSize) tiene un suelo de 26px
   para que la letra siga siendo legible, así que una palabra curada larga
   (nada impide ahora su longitud) puede acabar con una fila más ancha que
   la pantalla; mejor que se pueda deslizar horizontalmente esa fila que
   desbordar toda la página. */
#wd-board {
  --wd-cell: clamp(42px, 13.5vw, 60px);
  display: flex; flex-direction: column; gap: 6px;
  margin: 10px 0 22px;
  max-width: 100%;
  overflow-x: auto;
}
.wd-row { display: flex; gap: 6px; width: max-content; margin: 0 auto; }
.wd-row--shake { animation: wdShake 0.42s ease; }
@keyframes wdShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.wd-cell {
  width: var(--wd-cell); height: var(--wd-cell);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bd-c, var(--np-ink-soft));
  border-radius: var(--r-sm, 0);
  font-family: var(--font-display);
  font-size: calc(var(--wd-cell) * 0.42);
  color: var(--np-ink);
  background: var(--np-paper);
  transition: border-color 0.1s;
}
.wd-cell--filled { border-color: var(--np-ink-mid); }
.wd-cell--correct, .wd-cell--present, .wd-cell--absent { color: #ffffff; border-color: transparent; }
.wd-cell--correct { background: var(--wd-correct); }
.wd-cell--present { background: var(--wd-present); }
.wd-cell--absent  { background: var(--wd-absent); }

.wd-cell--flip { animation: wdFlip 0.5s ease; }
@keyframes wdFlip {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wd-cell--flip { animation: none; }
  .wd-row--shake { animation: none; }
}

/* ── Teclado ── */
#wd-keyboard { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 7px; }
.wd-krow { display: flex; justify-content: center; gap: 5px; }

.wd-key {
  flex: 1; max-width: 42px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm, 4px);
  background: var(--np-paper2); color: var(--np-ink);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; text-transform: uppercase;
  transition: background 0.12s, color 0.12s, transform 0.08s;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.wd-key:active { transform: scale(0.94); }
.wd-key--wide { max-width: 58px; font-size: 0.65rem; letter-spacing: 0.04em; }
.wd-key--correct { background: var(--wd-correct); color: #fff; }
.wd-key--present  { background: var(--wd-present); color: #fff; }
.wd-key--absent   { background: var(--wd-absent); color: #fff; opacity: 0.75; }

@media (max-width: 380px) {
  .wd-key { height: 44px; font-size: 0.82rem; }
  .wd-key--wide { font-size: 0.6rem; }
}

/* ── Contenido SEO bajo el teclado (ver CLAUDE.md, "Páginas de contenido") ──
   Antes vivía en la pantalla de menú, que ya no existe. */
#wd-footer { width: 100%; max-width: 480px; margin-top: 30px; }

/* ══════════════════════════════════════════════
   MODALES / OVERLAYS
   ══════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wd-overlay-backdrop { position: absolute; inset: 0; background: rgba(var(--np-ink-rgb, 15,18,14), 0.55); }

.np-modal {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 88vh; overflow-y: auto;
  background: var(--np-white);
  border: 1px solid var(--np-ink-soft);
  border-radius: var(--r-md, 0);
  box-shadow: var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c,var(--np-ink));
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
}

.close-btn {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--np-ink-soft); background: var(--np-paper); color: var(--np-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; transition: border-color 0.15s, color 0.15s;
}
.close-btn:hover { border-color: var(--np-red); color: var(--np-red); }

.np-modal h2 { font-family: var(--font-serif); font-style: italic; font-weight: 900; font-size: 1.5rem; color: var(--np-ink); }

/* ── Reglas ── */
.wd-rules-list { display: flex; flex-direction: column; gap: 10px; font-size: 0.85rem; line-height: 1.55; color: var(--np-ink); }
.wd-rules-example { display: flex; gap: 5px; margin: 4px 0; }
.wd-rules-example .wd-mini { width: 28px; height: 28px; }
.wd-rules-note { font-size: 0.78rem; color: var(--np-ink-mid); line-height: 1.5; }

/* ── Miniaturas de fichas (resumen del intento) ── */
.wd-mini-row { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; }
.wd-mini {
  width: 20px; height: 20px; border-radius: 3px;
  display: inline-block;
}
.wd-mini--correct { background: var(--wd-correct); }
.wd-mini--present  { background: var(--wd-present); }
.wd-mini--absent   { background: var(--wd-absent); }

/* ── Resultado ── */
#wd-result-overlay .np-modal { max-width: 380px; text-align: center; align-items: center; }
.wd-result-title { font-family: var(--font-serif); font-style: italic; font-weight: 900; font-size: 1.6rem; }
.wd-result-title--win { color: var(--np-green); }
.wd-result-title--lose { color: var(--np-red); }
#wd-result-answer { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--np-ink-mid); }
#wd-result-grid { display: flex; flex-direction: column; gap: 4px; align-items: center; margin: 4px 0; }

/* ── Resultado en la página (#wd-fin), encima del tablero ──
   Mismo aire que la pantalla final de La Carrera (#reveal): foto con marco
   y sombra, nombre en serif cursiva. La foto es más grande que allí porque
   aquí es la pieza principal del resultado. */
.wd-fin {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; margin: 4px 0 8px;
}
.wd-fin-titulo { font-family: var(--font-serif); font-style: italic; font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.wd-fin-sub { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--np-ink-mid); }
.wd-fin-sub:empty { display: none; }
.wd-fin-jugador { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 4px 0; }
.wd-fin-foto {
  width: 150px; height: 150px; overflow: hidden;
  border: 2px solid var(--bd-c, var(--np-ink));
  border-radius: var(--r-md, 0);
  box-shadow: var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c,var(--np-ink));
  background: var(--np-paper2);
  margin-bottom: 4px;
}
.wd-fin-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.wd-fin-nombre { font-family: var(--font-serif); font-style: italic; font-weight: 900; font-size: 1.4rem; line-height: 1.15; color: var(--np-ink); }
.wd-fin-acciones { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; justify-content: center; margin-top: 6px; }
.wd-fin-acciones > * { flex: 1; min-width: 140px; max-width: 200px; width: auto; }

.wd-player-datos { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; line-height: 1.4; color: var(--np-ink-mid); }
/* Bandera en línea con el texto (con flex, el texto largo saltaba entero a
   la línea de abajo y la bandera se quedaba sola). */
.wd-player-datos img { width: 18px; height: 12px; object-fit: cover; border: 1px solid rgba(0,0,0,.15); vertical-align: -1px; margin-right: 5px; }
.wd-player-clubes { font-family: var(--font-body); font-size: 0.8rem; line-height: 1.3; color: var(--np-ink); }

.wd-stats-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--np-ink-mid); align-self: flex-start; }
.wd-stats-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.wd-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wd-stat-num { font-family: var(--font-display); font-size: 1.4rem; color: var(--np-ink); }
.wd-stat-lbl { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--np-ink-mid); text-align: center; text-transform: uppercase; }

/* ── Distribución de intentos ──
   Relleno en un tono cálido intermedio (ni papel ni tinta pura) para que el
   número quede legible en tinta oscura tanto en una barra corta como larga;
   la fila de HOY se pinta del mismo verde que una ficha acertada, con el
   número en blanco, igual que las fichas del tablero. */
.wd-dist { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.wd-dist-row { display: flex; align-items: center; gap: 8px; }
.wd-dist-n { font-family: var(--font-mono); font-size: 10px; color: var(--np-ink-mid); width: 11px; text-align: center; flex-shrink: 0; }
.wd-dist-track { flex: 1; height: 17px; background: var(--np-paper2); }
.wd-dist-fill { height: 100%; background: #cabb8c; display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; min-width: 22px; transition: width 0.4s ease; }
.wd-dist-fill--today { background: var(--wd-correct); }
.wd-dist-count { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--np-ink); }
.wd-dist-fill--today .wd-dist-count { color: #ffffff; }
.wd-dist-count--out { color: var(--np-ink-mid); font-weight: 500; }

.wd-countdown { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--np-ink-mid); }

.wd-result-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; justify-content: center; }
.wd-result-actions > * { flex: 1; min-width: 120px; }

/* ══════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--np-ink); padding: 8px 18px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--np-paper); text-transform: uppercase;
  border-radius: var(--r-sm, 0);
  z-index: 200; opacity: 0; transition: all 0.22s ease;
  pointer-events: none; white-space: nowrap;
  box-shadow: var(--sh-x,3px) var(--sh-y,3px) var(--sh-b,0) var(--sh-c-red,var(--np-red));
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--np-red); }
.toast.ok { background: var(--np-green); }

/* ══════════════════════════════════════════════
   NAVEGACIÓN DE EDICIONES (calendario/archivo)
   Barra fija abajo, visible desde el menú y durante la partida —
   mismo patrón que La Carrera/En el Top/Superdraft.
   ══════════════════════════════════════════════ */
#day-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
  background: var(--np-ink); color: var(--np-paper);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 12px; height: 46px;
}
#day-nav.hidden { display: none; }
@media (min-width: 760px) {
  #day-nav { left: var(--ad-col-w, 0px); right: var(--ad-col-w, 0px); }
}
#day-nav button {
  font-family: var(--font-mono);
  min-width: 34px; height: 32px;
  border: 1px solid rgba(var(--np-paper-rgb, 244,234,210), .3);
  background: transparent; color: var(--np-paper);
  border-radius: var(--r-md, 6px);
  font-size: 1rem; line-height: 1; padding: 4px 11px;
  transition: background .15s, color .15s;
}
#day-nav button:hover:not(:disabled) { background: rgba(var(--np-paper-rgb, 244,234,210), .16); }
#day-nav button:disabled { opacity: 0.28; cursor: default; }
#nav-label { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.05em; min-width: 60px; text-align: center; }