@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /*
   * Fuente de verdad — 3 tintas (proyecto.md §5). No inventar una cuarta.
   * 1) navy sobre blanco  →  --navy + --surface-on-light + --frame-on-light-width
   * 2) blanco sobre azul  →  --text + --blue + --border-on-color
   * 3) blanco sobre naranja → --text + --orange + --border-on-color
   * Clases: .ui-on-light / .ui-on-blue / .ui-on-orange
   *
   * Excepciones (no son estilo de botón): placeholder gris; id aparato;
   * iconos check/x (rojo dual pie/informe); casilla vacía; panel debug #151515;
   * chevrons del menú en blanco (estilo 2: filter invert / máscara blanca).
   */
  --bg-top: #0A8CFF;
  --bg-bottom: #0058E6;
  --blue: #007AFE;
  --orange: #FE7800;
  --navy: #0A32B8;
  --surface-on-light: #FFFFFF;
  --border-on-color: #FFFFFF;
  --frame-on-light-width: 2px;
  --text: #FFFFFF;
  --text-shadow: 1px 2px 2px rgba(0, 0, 40, 0.5);

  /* Alias: mismos tokens con nombres viejos (no cambiar el valor aquí). */
  --border-light: var(--border-on-color); /* alias legacy (p. ej. debug-answer) */
  --border-on-light: var(--navy);
  --ink: var(--navy);
  --pending-letter: var(--navy);
  --pending-border: var(--navy);

  --acierto-top: #02EE00;
  --acierto-bottom: #008B01;
  --acierto-mid: #01BC00;
  --fallo-top: #F61444;
  --fallo-bottom: #9F0323;
  /* Rojo dual intencional: check/x sobre fondo azul vs sobre lista blanca. */
  --fallo-on-blue: #B8092E;
  --fallo-on-light: #E0103A;
  --pending-top: #FFFFFF;
  --pending-bottom: #E6E9F6;
  --empty-bg: #2A5AA8;
  --empty-border: #1E447F;
  /* Bloques Ajustes/Progreso sobre el degradado (no es 4.ª tinta de botón). */
  --surface: rgba(0, 40, 120, 0.28);
  --surface-border: rgba(99, 172, 250, 0.55);

  /* Hex sueltos → vars (valor actual; no “mejorar” hacia navy). */
  --placeholder: #8B93A7;
  --mark-on-outline: #ffe08a;
  --mark-on-bg: #fff3c4;
  --debug-panel-bg: #151515;
  /* Glow letra activa: anillo con el rgba histórico (no sustituir por --navy). */
  --active-glow-ring: rgba(10, 57, 239, 0.35);
}

/* Móvil táctil: mismo navy, un poco más lejos del negro (PC no cambia). */
@media (hover: none) and (pointer: coarse) {
  :root {
    --navy: #0A38D0;
  }
}

/* Estilos 1/2/3 — mismas tintas que arriba; migración mecánica (mismo aspecto). */
.ui-on-light,
.btn-back,
.btn-debug-toggle,
.btn-step,
.pr-marca-btn,
.btn-icon,
.aparato-input,
.answer-input,
.btn-game,
.btn-mark,
.ficha-item,
.informe-list {
  border: var(--frame-on-light-width) solid var(--navy);
  background: var(--surface-on-light);
  color: var(--navy);
  text-shadow: none;
}

.ui-on-blue,
.menu-btn,
.format-panel,
.format-panel.is-format-blue,
.clue {
  border: 2px solid var(--border-on-color);
  background: var(--blue);
  color: var(--text);
  text-shadow: var(--text-shadow);
}

.ui-on-orange,
.brand,
.format-panel.is-format-orange {
  border: 2px solid var(--border-on-color);
  background: var(--orange);
  color: var(--text);
  text-shadow: var(--text-shadow);
}

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

/* display:flex/inline-flex de botones no debe tapar el atributo hidden. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  color: var(--text);
  text-shadow: var(--text-shadow);
}

.app {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
}

/* Sin Volver ni Debug (menú / juego): no reservar la tira vacía. */
.topbar:not(:has(button:not([hidden]))) {
  display: none;
  min-height: 0;
  padding: 0;
}

.btn-back,
.btn-debug-toggle,
.btn-step,
.pr-marca-btn {
  font: inherit;
  cursor: pointer;
  border-radius: 0.45rem;
}

.menu-btn {
  font: inherit;
  cursor: pointer;
  border-radius: 0.45rem;
}

.btn-back {
  padding: 0.35rem 0.75rem;
}

.btn-debug-toggle {
  margin-left: auto;
  padding: 0.35rem 0.75rem;
}

.view {
  flex: 1;
  min-height: 0;
  padding: 0.75rem;
  overflow: auto;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.view[hidden] {
  display: none !important;
}

.placeholder {
  margin: 0;
  opacity: 0.7;
}

.brand {
  /* Misma unidad de alto que un .menu-btn (1 parte; el nav lleva 4). */
  flex: 1 1 0;
  min-height: 3.1rem;
  max-height: 5.25rem;
  margin: 0;
  padding: 0 1.1rem;
  max-width: 22.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.85rem, 6.2vw, 2.4rem);
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  /* Estilo 3 vía .ui-on-orange (solo marca). */
  border-radius: 0.65rem;
  box-sizing: border-box;
}

.view-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Llena el alto de .view para que el pie no quede fuera. */
  flex: 1;
  min-height: 0;
  height: 100%;
  /* Mismo aire que .view (0.75rem) en los 4 lados; sin overrides asimétricos. */
  padding: 0.75rem;
  overflow: hidden;
}

.view-menu[hidden] {
  display: none !important;
}

/* Mismo flex que el título: distancia título↔modos = modos↔pie. */
.menu-spring {
  flex: 1 1 0;
  min-height: 0.65rem;
  width: 100%;
  max-width: 22.5rem;
  pointer-events: none;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 22.5rem;
  width: 100%;
  /* 4 partes: cada botón ≈ alto del .brand (1 parte). */
  flex: 4 1 0;
  min-height: 0;
  justify-content: flex-start;
  padding-top: 0;
}

.menu-btn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  /* Comparte el alto disponible: dobles cuando hay sitio, encogen si no. */
  flex: 1 1 0;
  min-height: 3.1rem;
  max-height: 5.25rem;
  font-size: 1.42rem;
  text-align: center;
  padding: 0.7rem 2.75rem;
  /* Tinta: .ui-on-blue; pie del menú sigue .ui-on-light. */
}

.menu-btn-label {
  flex: 1;
  text-align: center;
}

/* Chevron a la derecha, blanco sobre el botón celeste. */
.menu-btn > .icon {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  filter: brightness(0) invert(1);
}

.menu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 0;
  max-width: 22.5rem;
  width: 100%;
}

.icon {
  display: block;
  /* ~+27 % respecto a 1.35rem (menú, Volver, marcas). */
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  pointer-events: none;
}

/* Estilo 1: tinta = --navy siempre (máscara; el stroke del SVG ya no manda). */
.icon-navy {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  pointer-events: none;
  background-color: var(--navy);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.icon-navy.icon-chevron-left {
  -webkit-mask-image: url('../assets/icons/chevron-left.svg');
  mask-image: url('../assets/icons/chevron-left.svg');
}
.icon-navy.icon-chart {
  -webkit-mask-image: url('../assets/icons/chart-column.svg');
  mask-image: url('../assets/icons/chart-column.svg');
}
.icon-navy.icon-settings {
  -webkit-mask-image: url('../assets/icons/settings.svg');
  mask-image: url('../assets/icons/settings.svg');
}
.icon-navy.icon-send {
  -webkit-mask-image: url('../assets/icons/send-horizontal.svg');
  mask-image: url('../assets/icons/send-horizontal.svg');
}
.icon-navy.icon-info {
  -webkit-mask-image: url('../assets/icons/info.svg');
  mask-image: url('../assets/icons/info.svg');
}
.icon-navy.icon-heart {
  -webkit-mask-image: url('../assets/icons/heart.svg');
  mask-image: url('../assets/icons/heart.svg');
}
.icon-navy.icon-ban {
  -webkit-mask-image: url('../assets/icons/ban.svg');
  mask-image: url('../assets/icons/ban.svg');
}
.icon-navy.icon-flag {
  -webkit-mask-image: url('../assets/icons/flag.svg');
  mask-image: url('../assets/icons/flag.svg');
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 0.55rem;
  cursor: pointer;
}

.btn-back.btn-icon {
  width: 3.2rem;
  height: 3.2rem;
}

.btn-mark.btn-icon {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
}

.settings-block {
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--surface-border);
}

.settings-block h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.settings-fieldset {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  border-radius: 0.5rem;
}

.settings-fieldset legend {
  padding: 0 0.25rem;
  font-size: 0.9rem;
}

.settings-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.2rem 0.75rem 0.2rem 0;
  cursor: pointer;
}

.settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0.35rem 0;
}

.settings-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.settings-step-value {
  min-width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.btn-step {
  min-width: 2rem;
  padding: 0.2rem 0.45rem;
}

.difficulty-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.difficulty-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.difficulty-band {
  min-width: 1.25rem;
  font-weight: 700;
}

.settings-hint {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.app-message {
  margin: 0 0.75rem 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  border-radius: 0.5rem;
  font-size: 0.95rem;
}

.app-message[data-kind="error"] {
  border-color: var(--fallo-top);
  background: linear-gradient(180deg, var(--fallo-top), var(--fallo-bottom));
}

.datos-aparato {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.field-label {
  font-size: 0.9rem;
}

.aparato-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
  max-width: 24rem;
}

.aparato-input {
  flex: 1;
  min-width: 8rem;
  font: inherit;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
}

.aparato-id {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.75;
  word-break: break-all;
}

.datos-ligera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.ligera-status {
  margin: 0;
  opacity: 0.9;
}

.ligera-meta {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* —— Pantalla de juego —— */

.view-juego {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Mismo aire a los 4 lados: borde pantalla → tira / borde → .game-main. */
  padding: 0.5rem;
}

.view-juego[hidden] {
  display: none !important;
}

.game-layout {
  /* Para calcular el ancho de la tira (casillas cuadradas) según el alto útil. */
  container-type: size;
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0.5rem;
}

.letter-strip {
  list-style: none;
  margin: 0;
  /* padding vertical 0.15rem×2 + gap 1px×24 entre 25 letras. */
  padding: 0.15rem 0;
  /* Ancho = alto de casilla; el sobrante horizontal va a .game-main. */
  width: calc((100cqh - 0.3rem - 24px) / 25);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  overflow: visible;
}

.letter-strip li {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.62rem, 2.55dvh, 1.02rem);
  font-weight: 800;
  border: 1.5px solid var(--pending-border);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--pending-top), var(--pending-bottom));
  color: var(--pending-letter);
  text-shadow: none;
  z-index: 0;
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.letter-strip li.is-pending {
  background: linear-gradient(180deg, var(--pending-top), var(--pending-bottom));
  color: var(--pending-letter);
  border-color: var(--pending-border);
}

.letter-strip li.is-acierto {
  background: linear-gradient(180deg, var(--acierto-top), var(--acierto-bottom));
  color: var(--text);
  border-color: var(--border-on-color);
  text-shadow: var(--text-shadow);
}

.letter-strip li.is-fallo {
  background: linear-gradient(180deg, var(--fallo-top), var(--fallo-bottom));
  color: var(--text);
  border-color: var(--border-on-color);
  text-shadow: var(--text-shadow);
}

.letter-strip li.is-empty {
  background: var(--empty-bg);
  color: rgba(255, 255, 255, 0.55);
  border-color: var(--empty-border);
  border-style: dashed;
  text-shadow: none;
}

/* Activa: borde + brillo (referencia Pasapalabra). */
.letter-strip li.is-active {
  z-index: 1;
  border-width: 2.5px;
  border-color: var(--pending-border);
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 1px;
  box-shadow:
    0 0 0 2px var(--active-glow-ring),
    0 0 10px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(99, 172, 250, 0.7);
  transform: scale(1.08);
}

/* Móvil: el resalte no debe pedir más margen; cabe en el padding simétrico. */
@media (max-width: 767px) {
  .letter-strip li.is-active {
    outline-width: 1.5px;
    outline-offset: 0;
    transform: scale(1.04);
    box-shadow:
      0 0 0 1.5px var(--active-glow-ring),
      0 0 6px rgba(255, 255, 255, 0.8),
      0 0 10px rgba(99, 172, 250, 0.55);
  }
}

.game-main {
  /* Contenedor de consulta: .format-panel usa cqi respecto a este ancho. */
  container-type: inline-size;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.format-panel {
  flex: 0 0 auto;
  /* Crece con la tipografía; el sobrante se lo come .clue (flex). */
  height: calc(1em + 1.7rem);
  min-height: 2.9rem;
  max-height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hueco ≈ 0,7× el ancho del _ (medida del programa). */
  /* cqi = ancho de .game-main. Fijo respecto a la longitud (3–16 iguales). */
  font-size: clamp(1.2rem, 7.6cqi, 2.15rem);
  gap: 0.29em;
  padding: 0 0.45rem;
  border-radius: 0.65rem;
  box-shadow: 0 2px 6px rgba(0, 0, 40, 0.25);
  overflow: hidden;
}

/* Misma Nunito y mismas reglas para letra y _. */
.format-slot {
  display: inline-block;
  text-align: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: var(--text-shadow);
}

/* Modo empieza: gap efectivo letra→primer _ = 0.29em − 0.14em = 0.15em. Contiene no usa esta clase. */
.format-slot.is-start-letter {
  margin-inline-end: -0.14em;
}

.clue {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: auto;
  overflow-wrap: break-word;
  padding: 0.5rem 0.6rem;
  border-radius: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.25;
}

/*
 * Tramos por longitud. «Largo» ≈ máximo que cabe 150 caracteres sin scroll
 * en móvil (~360×640 con Paso); margen bajo el tope medido (26px / 1.625rem).
 * Más largas → scroll solo en .clue. PC: un poco más grande.
 */
.clue.clue-len-short {
  font-size: 2rem;
}

.clue.clue-len-medium {
  font-size: 1.75rem;
}

.clue.clue-len-long {
  font-size: 1.6rem;
}

@media (min-width: 768px) and (min-height: 700px) {
  .clue.clue-len-short {
    font-size: 2.25rem;
  }

  .clue.clue-len-medium {
    font-size: 2rem;
  }

  .clue.clue-len-long {
    font-size: 1.8rem;
  }
}

.answer-row,
.action-row {
  flex: 0 0 auto;
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
}

.action-row .btn-game {
  flex: 1;
  min-height: 2.6rem;
  font-size: 1.05rem;
}

.answer-row {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: transparent;
  padding-top: 0.15rem;
}

.answer-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.1rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.45rem;
  caret-color: var(--navy);
}

.answer-input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

/* Solo sin foco: al enfocar basta el caret. */
.answer-input:focus::placeholder {
  color: transparent;
}

.answer-input:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.answer-input::selection {
  background: color-mix(in srgb, var(--navy) 28%, transparent);
  color: var(--navy);
}

.btn-send.btn-icon {
  flex: 0 0 auto;
  width: 3.2rem;
  height: auto;
  min-height: 2.6rem;
  align-self: stretch;
}

.btn-game {
  font: inherit;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0.45rem;
}

.last-resolved {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.35rem 0 0.15rem;
  border-top: 1px solid var(--surface-border);
}

.last-word {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.last-word-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.last-word-zipf {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

/* Iconos Lucide: máscara + color sólido (sin degradado). */
.result-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.result-icon.is-acierto {
  color: var(--acierto-mid);
  -webkit-mask-image: url('../assets/icons/circle-check.svg');
  mask-image: url('../assets/icons/circle-check.svg');
}

.result-icon.is-fallo {
  color: var(--fallo-on-blue);
  -webkit-mask-image: url('../assets/icons/circle-x.svg');
  mask-image: url('../assets/icons/circle-x.svg');
}

.last-marks {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Móvil: fila 1 = palabra anterior; fila 2 = Volver + marcas (roba alto a la pista). */
@media (max-width: 767px) {
  .last-resolved {
    flex-wrap: wrap;
  }

  .last-word {
    order: -1;
    flex: 1 1 100%;
  }
}

.btn-mark {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
  border-radius: 0.4rem;
}

.btn-mark.is-on {
  outline: 2px solid var(--mark-on-outline);
  background: var(--mark-on-bg);
}

.btn-mark:disabled {
  opacity: 0.45;
  cursor: default;
}

.ficha-warning {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, var(--fallo-top), var(--fallo-bottom));
  color: var(--text);
}

.ficha-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  counter-reset: ficha-acepcion;
}

.ficha-item {
  position: relative;
  padding: 0.7rem 0.75rem 0.7rem 2.1rem;
  border-radius: 0.55rem;
  counter-increment: ficha-acepcion;
}

.ficha-item::before {
  content: counter(ficha-acepcion) '.';
  position: absolute;
  left: 0.65rem;
  top: 0.7rem;
  font-size: 0.95rem;
  opacity: 0.75;
}

/* Actual: lenguaje de la tira, verde oscuro de acierto (sin scale: no mueve la lista). */
.ficha-item.is-current {
  z-index: 1;
  border-width: 2.5px;
  border-color: var(--acierto-bottom);
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 1px;
  box-shadow:
    0 0 0 2px rgba(0, 139, 1, 0.4),
    0 0 10px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(0, 139, 1, 0.5);
}

@media (max-width: 767px) {
  .ficha-item.is-current {
    outline-width: 1.5px;
    outline-offset: 0;
    box-shadow:
      0 0 0 1.5px rgba(0, 139, 1, 0.4),
      0 0 6px rgba(255, 255, 255, 0.8),
      0 0 10px rgba(0, 139, 1, 0.4);
  }
}

.ficha-meta {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

.ficha-pista {
  margin: 0;
  white-space: pre-wrap;
  font-size: 1.02rem;
  line-height: 1.35;
}

.ficha-examples {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  opacity: 0.8;
  font-size: 0.92rem;
  font-style: italic;
}

.ficha-empty {
  opacity: 0.7;
}

.pr-subhead {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.95rem;
}

.pr-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pr-list-letters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.25rem 0.5rem;
}

.pr-row,
.pr-empty {
  margin: 0;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--surface-border);
  border-radius: 0.4rem;
  background: var(--surface);
  font-size: 0.92rem;
}

.pr-row-compact {
  padding: 0.25rem 0.4rem;
}

.pr-row-clickable {
  cursor: pointer;
}

.pr-row-clickable.is-selected,
.pr-row-clickable:focus {
  outline: 2px solid var(--mark-on-outline);
  border-color: var(--mark-on-outline);
}

.pr-empty {
  opacity: 0.7;
  border-style: dashed;
}

.pr-summary,
.pr-hint {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.9rem;
}

.pr-hint {
  opacity: 0.75;
}

.pr-marca-row {
  margin: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--surface-border);
  border-radius: 0.4rem;
  background: var(--surface);
}

.pr-marca-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.pr-marca-lema {
  font-size: 0.95rem;
}

.pr-marca-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pr-marca-btn {
  font-size: 0.85rem;
  padding: 0.25rem 0.45rem;
}

.pr-marca-comment {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  opacity: 0.85;
}

.pr-card-detail {
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--surface-border);
  border-radius: 0.45rem;
  background: var(--surface);
}

.pr-reset-row {
  margin: 0.55rem 0 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.debug-answer {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.25rem 0.35rem;
  font-size: 0.9rem;
  opacity: 0.85;
  border: 1px dashed var(--border-light);
  border-radius: 0.35rem;
  background: var(--surface);
  text-transform: uppercase;
}

/* Pantalla completa a demanda (?debug=1 → botón Debug); no toca el layout del juego. */
.debug-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: auto;
  margin: 0;
  padding: 0.75rem;
  border: none;
  background: var(--debug-panel-bg);
  font-size: 0.85rem;
}

.debug-panel[hidden] {
  display: none !important;
}

.debug-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.debug-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.debug-sub {
  margin: 0.5rem 0 0.25rem;
  opacity: 0.8;
}

.debug-list {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.35;
}

.view-informe {
  display: flex;
  flex-direction: column;
  max-width: 28rem;
  margin: 0 auto;
  width: 100%;
}

.view-informe[hidden] {
  display: none !important;
}

.informe-title {
  margin: 0 0 0.65rem;
  text-align: center;
  font-size: 1.25rem;
}

.informe-summary {
  margin: 0 0 0.85rem;
  text-align: center;
}

.informe-stat {
  margin: 0.1rem 0;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.informe-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.35rem 0.55rem;
  line-height: 1.35;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 55dvh;
  overflow-y: auto;
  border-radius: 0.65rem;
}

.informe-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.55rem;
  align-items: center;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-size: 0.98rem;
}

.informe-row:last-child {
  border-bottom: none;
}

.informe-row-main {
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}

.informe-trail {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.informe-zipf {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--navy);
  white-space: nowrap;
}

.informe-trail .result-icon.is-fallo {
  color: var(--fallo-on-light);
}

.informe-typed {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--navy);
  text-transform: none;
}

.informe-row.is-sin_ver .informe-row-main,
.informe-row.is-sin_tarjeta .informe-row-main {
  text-transform: none;
  color: var(--navy);
  font-style: italic;
}

.informe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.btn-informe {
  flex: 1;
  min-height: 2.7rem;
  font-size: 1.05rem;
}

.view-ficha {
  max-width: 32rem;
  margin: 0 auto;
  width: 100%;
}

.view-ficha[hidden] {
  display: none !important;
}

.ficha-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: 0.01em;
}