/* =============================================
   VOLVER.CSS — el botón de "volver / salir" de los 14 juegos
   FutbolHUB

   Igual que ads.css y guia-link.css, esto NO es el design system de los
   juegos: cada uno mantiene su paleta, su tipografía y su :root. Aquí vive
   UNA sola pieza, la que saca al jugador de donde está.

   EL PROBLEMA QUE RESUELVE
   Había SIETE clases distintas para lo mismo (.back-btn, .hol-back-btn,
   .hub-back-link, .menu-back-btn, .hud-back, #mode-back, #game-back), OCHO
   textos ("← Volver", "← Hub", "← Volver al Hub", "Volver al hub", "← MENÚ",
   "VOLVER AL MENU", "Salir", "← Salir") y cinco posiciones distintas
   (top 14/16/18/22/28px, y en La Carrera y En el Top ni siquiera era un
   botón de esquina: iba metido en el flujo de la tarjeta). Además el de
   Higher or Lower durante la partida era `fixed; left:16px`, o sea que en
   pantallas de 1240px o más quedaba ENCIMA de la columna de anuncios
   izquierda, y Blackjack tenía un parche `left:110px` para dos pantallas
   sueltas por lo mismo.

   AHORA
   Una clase, `.fh-volver`, fija en la esquina superior izquierda del ÁREA DE
   JUEGO — no del viewport: el `left` se calcula sumando --ad-col-w, así que
   nunca pisa la columna de anuncios y en móvil (donde --ad-col-w vale 0) se
   pega al borde. Misma caja, mismo tamaño y mismo sitio en las 13 portadas,
   en todas sus pantallas.

   TEXTO
     · "← VOLVER"  → navegar hacia atrás (al hub, o al menú del propio juego).
     · "← SALIR"   → abandonar una sala online. Es la única excepción, y es a
                     propósito: ahí el botón no solo navega, te saca de la
                     partida de los demás.

   COLORES
   Se leen de los tokens que ya define cada juego (--np-ink, --np-paper2…) y
   de los del tema Moderno con respaldo (--r-md, --bd-c, --sh-*), así que
   funciona igual en los dos diseños sin tocar nada. Ver CLAUDE.md,
   "Diseños de la web".
   ============================================= */

:root {
  /* Separación al borde del área de juego. Un único sitio donde tocarla. */
  --volver-gap: 14px;
}

/* ── LA FILA DE CABECERA ──────────────────────────────────────────────
   El botón y el círculo de perfil van DENTRO de esta fila, que la monta
   js/cabecera.js alrededor del .fh-volver que esté visible. Ocupa su sitio
   en el flujo: empuja el contenido hacia abajo y se va con el scroll, así
   que no puede taparle nada a nadie por construcción.

   Antes los dos eran `position: fixed` y se dibujaban ENCIMA: se comían el
   título en 13 de las 15 páginas y en Bingo el círculo llegaba a tapar
   medio botón SALTAR. Se probó a reservarles una banda con paddings, pero
   eso compensa el síntoma: mientras floten, cada pantalla nueva vuelve a
   nacer con el problema. */
.fh-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;

  /* A RAS DEL BORDE, como cuando flotaban. El botón queda a 14px del borde
     de la pantalla y el círculo a 14px del otro: son las mismas posiciones
     de siempre, solo que ahora ocupando sitio en vez de por encima. Que la
     fila herede el padding del contenedor del juego (16, 20, 28px según el
     juego) los metía hacia dentro y los descolocaba; js/cabecera.js cancela
     ese padding con márgenes negativos, ver sacarDelPadding(). */
  padding: var(--volver-gap) var(--volver-gap) 10px;

  /* `flex: 0 0 auto` y NUNCA `flex-basis: 100%` aquí.

     En un contenedor flex EN COLUMNA el eje principal es el VERTICAL, así
     que un flex-basis del 100% no es "todo el ancho": es TODO EL ALTO. En El
     Estadio la fila acabó midiendo 803px de alto y empujó el menú entero por
     debajo del borde inferior de la pantalla.

     El 100% que sí hace falta —el de las portadas cuyo contenedor es flex en
     dirección FILA (#mode-screen de En el Top, #intro-screen de La Carrera),
     donde sin él la cabecera se coloca AL LADO de la tarjeta y la empuja
     fuera— lo pone js/cabecera.js, que es quien mira la dirección del padre
     antes de tocar nada. */
  flex: 0 0 auto;

  position: relative;
  z-index: 30;
}

.fh-volver {
  /* En el flujo. Ver .fh-cabecera arriba. */
  position: static;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 5px 10px;

  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  color: var(--np-ink);
  background: var(--np-paper2);
  border: 1px solid var(--bd-c, var(--np-ink));
  border-radius: var(--r-md, 0);
  box-shadow: var(--sh-x, 2px) var(--sh-y, 2px) var(--sh-b, 0) var(--sh-c, var(--np-ink));

  transition: background 0.12s, color 0.12s;
  cursor: pointer;
  transform: none;
  /* Blackjack y El Mentiroso le ponían backdrop-filter a sus botones
     secundarios; aquí no hace falta y en Street View emborronaba el fondo. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Esta hoja se carga DESPUÉS del CSS de cada juego, así que su
   `display:inline-flex` le ganaría por orden al `.hidden { display:none }`
   que define cada juego (misma especificidad). Blackjack y Bingo esconden
   así botones de salir que solo salen en modo local: sin esto aparecerían
   siempre. */
.fh-volver.hidden,
.fh-volver[hidden] { display: none; }

.fh-volver:hover {
  background: var(--np-ink);
  color: var(--np-paper);
  transform: none;
  box-shadow: var(--sh-x, 2px) var(--sh-y, 2px) var(--sh-b, 0) var(--sh-c, var(--np-ink));
}

/* El botón se apoya muchas veces sobre papel claro, donde el outline por
   defecto casi no se ve. */
.fh-volver:focus-visible {
  outline: 2px solid var(--np-red);
  outline-offset: 2px;
}

/* .fh-volver-hueco ya NO reserva nada, y la clase se queda solo para no
   tener que tocar el HTML de La Carrera y En el Top, que la llevan puesta.

   Reservaba 44px en la barra superior de esos juegos porque el botón
   flotaba por encima y el contenido se le metía debajo. Ahora el botón va
   en .fh-cabecera, en el flujo y ENCIMA de esa barra, así que esos 44px
   eran hueco muerto: medido en La Carrera, 130px entre la cabecera y el
   "Intento 1 / 7". */
.fh-volver-hueco { margin-top: 0; }

/* #loading-screen (La Carrera, En el Top): el spinner se centra con
   #loading-body{margin:auto} dentro de un flex EN COLUMNA. La fila de
   cabecera vive dentro de ese mismo contenedor (el botón Volver está
   ahí para poder salir si la carga falla) y, en el flujo normal, ocupa
   una línea más arriba: el margin:auto ya no centra en el viewport
   entero, sino en el hueco que queda DEBAJO de esa línea, y el spinner
   se ve desplazado hacia abajo. Se saca del flujo (position:absolute,
   #loading-screen ya es position:relative) para que no reste alto: el
   botón se queda arriba a la izquierda, en el mismo sitio de siempre, y
   el spinner vuelve a centrarse en toda la pantalla. */
#loading-screen > .fh-cabecera {
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* ══════════════════════════════════════════════════════════════════
   LO QUE HUBO AQUÍ, Y POR QUÉ YA NO ESTÁ
   ══════════════════════════════════════════════════════════════════
   Hubo un bloque que reservaba una banda de 56px en las portadas de los
   14 juegos, apartaba el botón SALTAR de Bingo y encogía el bloque de la
   cabecera de la portada. Existía por una razón: .fh-volver y el círculo
   de perfil eran `position: fixed` y se dibujaban ENCIMA del contenido,
   así que había que apartarles el contenido a mano, página por página.

   Está borrado a propósito. Los dos van ahora dentro de .fh-cabecera, en
   el flujo: ocupan su sitio y ya no pueden pisar nada, así que compensar
   sobra. Si vuelve a hacer falta algo así, es señal de que algo ha vuelto
   a flotar.
   ══════════════════════════════════════════════════════════════════ */