/* Pantalla de juego y resultado: el glifo domina la pantalla y hay una sola
   decisión posible en cada momento. */

.screen--game, .screen--teach { gap: var(--sp-lg); }

/* --- Barra de progreso ---
   En la partida va por tramos, uno por pregunta: se ve cuánto queda sin tener
   que leer ningún número. En las estadísticas sigue siendo continua. */

.gauge {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.gauge__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.2s ease;
}

.gauge--steps {
  display: flex;
  gap: 4px;
  background: transparent;
  overflow: visible;
}

.gauge__step { flex: 1; min-width: 4px; height: 6px; background: var(--surface-2); border-radius: 3px; }
.gauge__step--on { background: var(--accent); }

/* --- Modo Panic (§23) ---
   La barra de la cabecera es la cuenta atrás: empieza llena y se vacía en el
   tiempo de la pregunta (la transición la pone el JS, que es quien sabe cuánto).
   A la derecha, las vidas y la puntuación. */

.gauge--timer .gauge__fill { width: 100%; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
}

.lives { display: inline-flex; gap: 2px; color: var(--danger); }
.lives__heart--off { color: var(--fg-subtle); }

.score {
  min-width: 2ch;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.screen--panic { gap: var(--sp-lg); }

/* Desafíos (§23): debajo de empezar, para leer, no para pulsar. */
.challenges {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.challenges__title,
.ranking__title {
  margin: 0;
  color: var(--fg-subtle);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.row--done .row__icon { background: var(--accent); color: var(--bg); }

/* Ranking local (§23): misma lista que los desafíos, con el puesto en vez de icono. */
.ranking { width: 100%; display: flex; flex-direction: column; gap: var(--sp-sm); }
.ranking .row__icon { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* El global llega después y ocupa su hueco sólo cuando trae algo; la fila propia va resaltada. */
.ranking:empty { display: none; }
.row--me .row__icon { background: var(--accent); color: var(--bg); }
.row--me .row__name { color: var(--accent); }

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm);
}

/* --- Enunciado --- */

.glyph {
  font-family: var(--font-glyph);
  font-size: clamp(100px, 25vw, 148px);
  line-height: 1;
  margin: var(--sp-sm) 0 var(--sp-md);
  text-align: center;
  user-select: none;
}

/* Enunciados que no son un glifo suelto */

.glyph--latin { font-family: var(--font); font-weight: 700; text-transform: uppercase; }

/* El nombre de la letra como enunciado: es palabra, no carácter. */
.glyph--name {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(40px, 12vw, 64px);
  letter-spacing: -0.01em;
}

.glyph--hidden { color: var(--fg-subtle); }

/* Más de dos formas juntas —las cuatro del árabe— a un tamaño que quepan. */
.glyph--many { font-size: clamp(56px, 14vw, 88px); }

/* --- Presentación de un carácter nuevo --- */

.teach {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

/* Todas las formas del carácter juntas: manda la primera y las demás la
   acompañan, para que se lean como el mismo signo y no como dos. */
.teach__glyph {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-glyph);
  line-height: 1;
  margin: 0;
  user-select: none;
}

.teach__form { font-size: clamp(100px, 25vw, 148px); }
.teach__form--rest { font-size: clamp(70px, 18vw, 104px); color: var(--fg-subtle); }

/* En un alfabeto sin mayúsculas ni minúsculas no hay nada que comparar: el
   único signo puede ocupar todo el sitio. */
.teach__glyph--single .teach__form { font-size: clamp(120px, 30vw, 172px); }

.teach__name { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }

/* Aviso de que el carácter es nuevo */
.pill--new {
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Opciones de respuesta --- */

.options {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.btn--option {
  min-height: 64px;
  font-size: 20px;
  font-weight: 500;
  padding: 12px 8px;
  text-transform: none;
}

/* De un vistazo se distingue en qué se responde: los caracteres del alfabeto
   que se aprende se ven en su propia letra, y las respuestas escritas no. */
.options--glyph .btn--option { font-family: var(--font-glyph); font-size: 30px; }
.options--latin .btn--option { font-weight: 600; text-transform: uppercase; }
.options--name .btn--option { font-size: 16px; font-weight: 600; }

.btn--option.is-correct {
  background: var(--success-dim);
  border-color: var(--success-line);
  color: var(--success);
}

.btn--option.is-wrong {
  background: var(--danger-dim);
  border-color: var(--danger-line);
  color: var(--danger);
}

.btn--option:disabled { opacity: 1; }

/* --- Apoyos del enunciado --- */

/* Dirección de la pregunta: de qué se parte y a qué se responde. */
.direction {
  margin: 0;
  color: var(--fg-subtle);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.screen--game .hint { font-size: 14px; text-align: center; }

/* Nombre del carácter (apoyo de las primeras fases) y ficha que lo repasa al
   responder: los dos son cápsulas bajo el enunciado. */
.prompt-name, .recap { margin: calc(-1 * var(--sp-sm)) 0 0; }
.recap { gap: 10px; }
.recap__glyph { font-family: var(--font-glyph); font-size: 19px; color: var(--fg); }

/* --- Palabra con hueco --- */

.word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: var(--sp-md) 0 var(--sp-lg);
  font-family: var(--font-glyph);
  font-size: clamp(44px, 13vw, 72px);
  line-height: 1.1;
  user-select: none;
}

/* Letras que se enlazan: texto seguido y sin cajas, para que el navegador
   las una a través de los span. El hueco corta el enlace a ambos lados, que
   es justo lo que se quiere ver. El sentido lo pone el `dir` del nodo. */
.word--joined {
  display: block;
  text-align: center;
  line-height: 1.4;
}

.word--joined .word__char, .word--joined .word__blank { display: inline; }

.word__blank { color: var(--accent); }

/* --- Resultado --- */

.screen--result { justify-content: center; padding-top: 8vh; text-align: center; }
.screen--result .stars { gap: 6px; }
.result__title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.result__score { margin: 0; font-size: 48px; font-weight: 700; line-height: 1.1; }
.result__detail { margin: 0; color: var(--fg-muted); }

.actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}

/* Logro recién conseguido */
.badge {
  background: var(--accent-dim);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
}