/* ===========================================================================
   La cueva de los activos digitales — ajuste para celular
   IIAA, octubre de 2026.

   El juego ya trae controles táctiles y se juega bien en un teléfono. Lo que
   no entra es el encabezado: a 390 px de ancho, el título de la etapa, los
   corazones y los botones compiten por la misma fila, el título se parte en
   una palabra por renglón («El / acceso / a / la / montaña») y el bloque se
   come 190 px de la pantalla, encima del escenario.

   Esta hoja no toca el juego: sólo reordena ese encabezado en pantallas
   angostas, para que el título ocupe su propia línea y los corazones y los
   botones vayan abajo. Va aparte y no dentro del archivo original a propósito:
   cuando llegue una compilación nueva del autor se reemplaza la carpeta y se
   vuelve a enlazar esta hoja, sin rehacer el parche.
   =========================================================================== */

@media (max-width: 620px) {

  .hud { padding: .45rem .6rem .4rem; gap: .25rem; }

  /* El título necesita el ancho entero; los corazones y los botones caben
     holgados en la línea de abajo. */
  .hud-row { flex-wrap: wrap; gap: .4rem .6rem; }
  .stage { flex: 1 0 100%; order: 1; }
  .stage strong { font-size: .92rem; line-height: 1.2; }
  .stage span { font-size: .78rem; }
  .lives { order: 2; margin-right: auto; }
  /* Los botones de Silencio y Pausa van dentro de otro .hud-row anidado; sin
     darles orden quedaban arriba de todo, por delante del título. */
  .hud-row .hud-row { order: 3; }

  .heart { width: .95rem; height: .95rem; }
  .lives b { font-size: .82rem; margin-left: .25rem; }
  .pips i { width: 1.1rem; height: .28rem; }
  .brands { font-size: .68rem; }
}