/*
 * styles.css
 * Interfaz del juego: HUD, diálogos y pantallas. El escenario se dibuja en el
 * canvas; todo lo que es TEXTO vive aquí, en DOM, para que escale con el zoom
 * del navegador y lo pueda leer un lector de pantalla.
 *
 * Los tamaños de texto van en rem, nunca en px fijos: con "Texto grande" o con
 * el zoom al 200 % la interfaz sigue siendo legible sin recortes.
 */

:root {
  --bg: #10131a;
  --panel: #1b2030;
  --panel-soft: #232a3d;
  /* Aclarado a propósito: con #3a4257 el borde de un botón sin seleccionar
     daba 1.62:1 contra el panel, por debajo del 3:1 que exige un elemento de
     interfaz. Así un botón se ve como botón aunque no tenga el foco. */
  --border: #6b7590;
  --text: #f4f6fb;
  --text-dim: #b9c1d4;
  --accent: #ffce5c;
  --accent-ink: #1a1405;
  --ok: #7fe0a8;
  --low: #ffce5c;
  --critical: #ff9c8a;
  --shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
  --radius: 0.75rem;
  --ui-scale: 1;
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font: calc(1rem * var(--ui-scale)) / 1.5 system-ui, "Segoe UI", Roboto, sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Sin esto, arrastrar el dedo sobre el juego en iPadOS dispara el rebote
     elástico de la página y el toque se pierde. */
  overscroll-behavior: none;
}

body.large-text { --ui-scale: 1.25; }

/* --- Escenario ------------------------------------------------------------ */

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* 100dvh como segunda declaración, no como sustituta: en Safari de iPadOS
     `100vh` es la altura SIN la barra de herramientas, así que el borde
     inferior —donde viven los botones táctiles— quedaba fuera de alcance.
     Los navegadores que no entienden dvh se quedan con la línea anterior. */
  height: 100dvh;
  display: grid;
  place-items: center;
}

.game-canvas {
  display: block;
  /* El orden importa: gana la última declaración válida, y `pixelated` es la
     que define el escalado por vecino más cercano de forma normativa.
     `crisp-edges` va antes como respaldo para navegadores que solo tengan esa. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background: #000;
}

/* La capa de interfaz se superpone al canvas y solo captura eventos donde hay
   algo con lo que interactuar: así los clics no roban el foco al juego. */
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.overlay > * { pointer-events: auto; }

.hidden { display: none !important; }

/* --- Controles en pantalla -------------------------------------------------
   Existen porque el juego nació para un mando de 3 botones y en una tablet no
   había ninguna forma de jugar ni de salir de un nivel.

   Van anclados al borde del .stage y NO al canvas: en un iPad apaisado el
   canvas se escala a 960x540 sobre ~1180x820, así que queda banda libre arriba
   y abajo y los botones no tapan nada del escenario. Nunca se acercan al
   centro-izquierda, que es por donde corre Pablo. */

.touch-controls {
  position: absolute;
  inset: 0;
  /* Obligatorio: `.overlay > *` pone pointer-events:auto, y sin esto el
     contenedor entero robaría los toques sobre el canvas. */
  pointer-events: none;
}

.touch-btn {
  position: absolute;
  pointer-events: auto;
  display: none; /* la visibilidad la deciden las reglas de estado de abajo */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  border-radius: 999px;
  cursor: pointer;
  /* Mata el zoom por doble toque, el scroll desde el botón, la lupa y el menú
     contextual de iOS. Va SOLO en los botones: en .overlay rompería el
     desplazamiento con el dedo de los paneles de Ajustes y Cómo se juega. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Feedback con clase propia y no con :active, que en iOS es poco fiable.
   Cambio instantáneo de escala: sin animación y sin destello. */
.touch-btn.is-down { transform: scale(0.94); filter: brightness(0.88); }

.touch-glyph { font-size: 1.5em; }
.touch-word { font-size: 0.72rem; letter-spacing: 0.03em; }

.touch-jump {
  right: 1.25rem;
  bottom: 1.25rem;
  /* Muy por encima del mínimo de 44 px: es la acción más frecuente y la usan
     manos de 8 a 12 años. */
  width: 6rem;
  height: 6rem;
  min-width: 44px;
  min-height: 44px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid var(--accent-ink);
}

.touch-share {
  left: 1.25rem;
  bottom: 1.25rem;
  width: 5rem;
  height: 5rem;
  min-width: 44px;
  min-height: 44px;
  /* Fondo opaco propio: así el contraste es calculable y no depende del color
     que tenga detrás el escenario. */
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--border);
}

.touch-pause {
  right: 1rem;
  top: 1rem;
  width: 3rem;
  height: 3rem;
  min-width: 44px;
  min-height: 44px;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--border);
  /* Atenuado para no distraer en proyector, pero nunca invisible. */
  opacity: 0.55;
  z-index: 2;
}
.touch-pause:hover,
.touch-pause:focus-visible { opacity: 1; }
.touch-pause .touch-glyph { font-size: 1em; }
.touch-pause .touch-word { font-size: 0.6rem; }

/* Margen extra por el área segura de iOS, como declaración ADICIONAL: si el
   navegador no entiende env(), se queda con el valor en rem de arriba. */
.touch-jump { bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
.touch-share { bottom: calc(1.25rem + env(safe-area-inset-bottom)); }

/* Visibilidad por estado de juego. `data-state` ya lo escribe States.setState,
   así que esto no necesita ni una línea de JavaScript.
   Consecuencia buscada: en los menús no hay ningún botón táctil visible, luego
   States.routeInput() sigue siendo la única verdad sobre qué hace cada botón. */
body.touch-on[data-state="playing"] .touch-jump,
body.touch-on[data-state="playing"] .touch-share { display: flex; }

/* La pausa NO exige .touch-on: existe siempre, también con mando o teclado,
   porque quedarse atrapado dentro de un nivel era un fallo independiente del
   táctil. Se mantiene durante los diálogos para que nunca haya atrapamiento. */
body[data-state="playing"] .touch-pause,
body[data-state="dialog"] .touch-pause { display: flex; }

/* La banda de Dialog.flow está centrada abajo y chocaría con los dos botones. */
body.touch-on .dialog-flow { bottom: 7.5rem; max-width: min(30rem, 60vw); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- HUD ------------------------------------------------------------------ */

.hud {
  position: absolute;
  inset: auto 0 auto 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  /* El margen derecho reserva el hueco del botón de pausa: el contenido del
     HUD mide ~780 px y en un iPad en vertical (768 px) llegaría justo debajo
     de él. El HUD es pointer-events:none, así que nunca robaría el toque, pero
     sí se solaparía visualmente. */
  padding: 0.6rem 4.5rem 0.6rem 1rem;
  /* Fondo propio: el HUD no depende del color del escenario para tener
     contraste suficiente. */
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.85), rgba(8, 10, 16, 0));
  font-size: 0.9rem;
  pointer-events: none;
}

.hud-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hud-label,
.hud-cap {
  color: var(--text-dim);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hud-bar {
  width: 9rem;
  height: 0.85rem;
  border: 2px solid var(--text);
  border-radius: 0.5rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
}

.hud-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--ok);
  transition: width 0.15s linear;
}

.hud-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 2.2ch;
  text-align: right;
}

/* El estado se dice también con PALABRAS: nunca solo por el color de la barra. */
.hud-state {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}

.hud[data-firmeza="low"] .hud-bar-fill { background: var(--low); }
.hud[data-firmeza="critical"] .hud-bar-fill { background: var(--critical); }
.hud[data-firmeza="critical"] .hud-state { color: var(--critical); font-style: normal; font-weight: 700; }

.hud-counter { display: inline-flex; align-items: center; gap: 0.3rem; }
.hud-icon { color: var(--accent); }
.hud-num { font-variant-numeric: tabular-nums; font-weight: 700; }

.hud-power {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.85rem;
}

.hud-warning {
  position: absolute;
  top: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--critical);
  color: #2a0f0a;
  font-weight: 700;
  /* Pulso LENTO (1.4 s), muy por debajo de los 3 Hz que pueden causar
     molestias o convulsiones. Nunca es un parpadeo. */
  animation: soft-pulse 1.4s ease-in-out infinite;
}

@keyframes soft-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* --- Diálogos -------------------------------------------------------------- */

.dialog-flow {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(46rem, 92vw);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(10, 13, 20, 0.92);
  border: 1px solid var(--border);
  text-align: center;
  font-size: 0.95rem;
}

.dialog-modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 13, 0.72);
  padding: 1.5rem;
}

.dialog-box {
  max-width: min(38rem, 92vw);
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.dialog-title {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  color: var(--accent);
}

.dialog-text {
  margin: 0 0 1.2rem;
  font-size: 1.05rem;
  /* Altura mínima para que el texto que se va tecleando no mueva el botón. */
  min-height: 4.5em;
}

.dialog-hint {
  font: inherit;
  font-weight: 700;
  padding: 0.55rem 1.4rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

/* --- Pantallas ------------------------------------------------------------- */

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 13, 0.9);
  padding: 1.5rem;
  overflow: auto;
}

.screen-panel {
  width: min(44rem, 94vw);
  max-height: 92vh;
  overflow: auto;
  padding: 1.8rem;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.screen-title {
  margin: 0 0 0.3rem;
  font-size: 1.6rem;
  color: var(--accent);
}

.screen-subtitle {
  margin: 0 0 1.2rem;
  color: var(--text-dim);
}

.menu-verse {
  margin: 0 0 1.4rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--text-dim);
}

.screen-actions {
  display: grid;
  gap: 0.6rem;
  margin: 1.2rem 0 0.8rem;
}

.screen-action {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  border: 2px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
}

.screen-action-label { font-weight: 700; }
.screen-action-hint { font-size: 0.85rem; color: var(--text-dim); }

.screen-action.selected,
.screen-action:hover {
  border-color: var(--accent);
  background: #2c3348;
}

/* Foco visible propio: no se confía en el outline por defecto del navegador. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.screen-footer {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* --- Bloques reutilizables -------------------------------------------------- */

.controls-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.92rem;
}

.controls-table th,
.controls-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.controls-table thead th {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.controls-note,
.scrolls-empty {
  margin: 0.6rem 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.howto-rules ul { margin: 0.8rem 0 0; padding-left: 1.2rem; }
.howto-rules li { margin-bottom: 0.35rem; }

.summary-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
}

.summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.summary-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.scroll-card {
  margin: 0.6rem 0;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--panel-soft);
  border-radius: 0 0.5rem 0.5rem 0;
}

.scroll-title { margin: 0 0 0.3rem; font-size: 1rem; color: var(--accent); }
.scroll-text { margin: 0; font-size: 0.95rem; }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.6rem 0;
}

.settings-row input[type="range"] { flex: 0 0 12rem; }

.final-verse {
  margin: 1rem 0;
  padding: 1.2rem 1.4rem;
  border-left: 4px solid var(--accent);
  background: var(--panel-soft);
  font-size: 1.15rem;
  font-style: italic;
}

.final-verse cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

.final-note { color: var(--text-dim); font-size: 0.9rem; }

/* --- Depuración y sin JavaScript -------------------------------------------- */

.debug-overlay {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.75);
  color: #9df;
  font: 0.75rem/1.4 ui-monospace, Consolas, monospace;
  white-space: pre;
  pointer-events: none;
}

.noscript {
  max-width: 36rem;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--panel);
  border-radius: var(--radius);
}

.noscript blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
}

/* --- Movimiento reducido ---------------------------------------------------- */

body.reduced-motion .hud-warning { animation: none; opacity: 1; }
body.reduced-motion .hud-bar-fill { transition: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .hud-bar-fill { transition: none; }
}