/* Novoc — tema oscuro, sin dependencias. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Las tres candidatas para la tipografía de la pista. Están declaradas pero
   no se usan hasta que una gane: el navegador solo baja la que se pide, así
   que mientras estén en el repo no pesan en la carga. */

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/rubik-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0d110f;
  --bg-degradado: radial-gradient(1200px 600px at 50% -10%, #17251d 0%, var(--bg) 60%);
  --superficie: #141917;
  --superficie-alta: #1b221e;
  --borde: #263029;
  --borde-fuerte: #37443a;
  --texto: #e9f0e9;
  --texto-tenue: #93a395;
  --acento: #f5a04c;
  --acento-fuerte: #dd7c2e;
  --ok: #57d17a;
  --error: #ff7b72;
  --aviso: #e3b341;
  --radio: 14px;
  --radio-chico: 10px;
  --ancho: 720px;
  --fuente: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* La tipografía de la pista (las letras grandes). Es Rubik: se distingue de
     la general (Space Grotesk) y se lee bien en tamaño grande. Para cambiarla
     es una línea: poné otra de las candidatas (Fredoka, Outfit) o la general.
     Los @font-face de arriba tienen las tres. */
  --fuente-letra: 'Rubik', var(--fuente);
  --fuente-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--bg-degradado);
  background-attachment: fixed;
  color: var(--texto);
  font-family: var(--fuente);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 0 16px 24px;
  /* El padding de abajo deja aire para la barra del navegador y el notch.
     Como max() y env() no existen en todos los navegadores, el 24px de
     arriba queda como respaldo. */
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.oculto { display: none !important; }

/* ---------- layout ---------- */

/* La pantalla del juego reparte el alto: la pista queda en el medio y los
   botones abajo del todo. Solo index.html: crear.html es un formulario y se
   lee de arriba abajo, así que su body queda como está. */
body.pantalla-juego {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app {
  max-width: var(--ancho);
  width: 100%;
  margin: 0 auto;
  padding-top: 24px;
}

/* El .app y la pantalla de juego se estiran para ocupar el alto disponible.
   flex-shrink: 0 para que el contenido nunca se comprima: si no entra, la
   página scrollea. */
body.pantalla-juego .app {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

body.pantalla-juego #estado-juego {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* La pantalla de inicio también se reparte: título arriba, ejemplos en el
   medio y el botón abajo del todo. */
body.pantalla-juego #estado-vacio {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.app--ancho { max-width: 780px; }

.app__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--borde);
}

/* El nombre del juego y la marca del header comparten criterio: mayúsculas,
   color de acento y letter-spacing. */
.marca,
.titulo-juego {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}

.marca {
  font-size: 0.82rem;
  text-decoration: none;
}

.marca:hover { color: #ffc182; }

.app__nav a {
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: 0.9rem;
}

.app__nav a:hover { color: var(--texto); }

.pagina__titulo {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.pagina__bajada {
  color: var(--texto-tenue);
  margin: 0 0 28px;
  max-width: 56ch;
}

/* ---------- paneles ---------- */

.panel {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px;
  text-align: center;
}

.panel--error {
  border-color: rgba(255, 123, 114, 0.45);
  background: rgba(255, 123, 114, 0.06);
}

.panel--ok {
  border-color: rgba(87, 209, 122, 0.4);
  background: rgba(87, 209, 122, 0.05);
  text-align: left;
  margin-top: 28px;
}

.panel__titulo {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

/* El nombre del juego, arriba de la pantalla de inicio: la marca del header,
   pero más grande. */
.titulo-juego {
  font-size: clamp(2rem, 8vw, 2.6rem);
  margin: 0 0 12px;
  /* El letter-spacing también suma un espacio después de la última letra: con
     el texto centrado hay que compensarlo con un text-indent, así el nombre
     queda ópticamente centrado. */
  text-indent: 0.14em;
}

.panel__texto {
  color: var(--texto-tenue);
  margin: 0 0 20px;
}

.aviso {
  background: rgba(227, 179, 65, 0.08);
  border: 1px solid rgba(227, 179, 65, 0.35);
  color: #f0d08a;
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  font-size: 0.9rem;
  margin: 0 0 24px;
}
.aviso code {
  font-family: var(--fuente-mono);
  font-size: 0.85em;
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 5px;
  border-radius: 5px;
}

.aviso a {
  color: #f0d08a;
  font-weight: 600;
}

/* ---------- juego ---------- */

/* El bloque de la pista (categoría + consonantes) se queda cerca del medio
   de la pantalla: los márgenes auto se comen el espacio que sobra. */
.pista {
  margin: auto 0;
}

.etiqueta {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--texto-tenue);
  margin: 0 0 6px;
}

.categoria {
  margin: 0 0 28px;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  letter-spacing: 0.02em;
  color: var(--acento);
  overflow-wrap: anywhere;
}

.consonantes {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1em;
  justify-content: center;
  margin-bottom: 32px;
  font-size: 2.4rem;
  line-height: 1;
}

.consonantes--preview {
  justify-content: flex-start;
  font-size: 1.8rem;
}

.consonantes--preview:empty {
  display: none;
}

.consonante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.85em;
  height: 1.08em;
  padding: 0 0.12em;
  border-radius: 0.12em;
  background: var(--superficie-alta);
  font-family: var(--fuente-letra);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--texto);
}

body.resuelto .consonante {
  background: rgba(87, 209, 122, 0.12);
  color: var(--ok);
}

/* ---------- ejemplos de la pantalla de inicio ---------- */

.ejemplos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Los márgenes auto dejan los ejemplos en el medio de la pantalla; el
     padding es el hueco mínimo con el botón de abajo. */
  margin: auto 0;
  padding-bottom: 24px;
}

.ejemplo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--superficie-alta);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
}

.ejemplo:hover {
  border-color: var(--acento-fuerte);
  background: #212a24;
  transform: translateY(-1px);
}

.ejemplo__categoria {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--acento);
}

.ejemplo__pista {
  margin-bottom: 0;
  font-size: 1.6rem;
}

/* ---------- formularios ---------- */

.intento { margin: 0; }

.intento__label,
.campo label,
.campo__label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
  margin-bottom: 8px;
}

.intento__fila {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  width: 100%;
  background: #0f1310;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--acento-fuerte);
  box-shadow: 0 0 0 3px rgba(245, 160, 76, 0.18);
}

input[type="text"]::placeholder { color: #5f6d61; }

input[readonly] { color: var(--acento); }

select {
  flex: 1 1 220px;
  min-width: 0;
  width: 100%;
  background: #0f1310;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

select:focus {
  outline: none;
  border-color: var(--acento-fuerte);
  box-shadow: 0 0 0 3px rgba(245, 160, 76, 0.18);
}

select option {
  background: #141917;
  color: var(--texto);
}

.formulario {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px;
}

.campo { margin-bottom: 20px; }

.campo__ayuda {
  color: var(--texto-tenue);
  font-size: 0.83rem;
  margin: 8px 0 0;
}

.campo__ayuda code {
  font-family: var(--fuente-mono);
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 5px;
  border-radius: 5px;
}

/* ---------- botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-alta);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}

.boton:hover { border-color: var(--acento-fuerte); }

.boton:active { transform: translateY(1px); }

.boton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.boton--primario {
  background: var(--acento-fuerte);
  border-color: var(--acento-fuerte);
  color: #1b0d02;
}

.boton--primario:hover { background: #f0923a; }

.boton--fantasma {
  background: transparent;
  color: var(--texto-tenue);
}

.boton--fantasma:hover { color: var(--texto); }

/* ---------- resultado ---------- */

.resultado {
  min-height: 1.4em;
  margin: 16px 0 0;
  font-weight: 600;
}

.resultado--ok { color: var(--ok); }
.resultado--error { color: var(--error); }
.resultado--aviso { color: var(--aviso); }

.respuesta {
  margin: 12px 0 0;
  font-size: 1.1rem;
  color: var(--ok);
  overflow-wrap: anywhere;
}

.acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* El hueco mínimo entre el contenido y los botones: con padding, porque el
     margin-top auto lo taparía cuando hay espacio de sobra. */
  padding-top: 22px;
}

/* En la pantalla de juego los botones se van abajo del todo. */
body.pantalla-juego .acciones {
  margin-top: auto;
}

.acciones .boton { flex: 0 0 auto; }

@media (max-width: 520px) {
  .panel { padding: 22px 18px; }
  .formulario { padding: 18px; }
  .intento__fila .boton { width: 100%; }
}