/* ============================================================================
   EL ESTILO B («Noche de estadio»): lo que comparten la portada y las pantallas
   ============================================================================

   La portada (css/portada.css) y las pantallas que salen de ella (css/pantalla.css)
   hablan el mismo idioma: la misma unidad, el mismo oro y el mismo cristal. Estan
   aqui UNA vez; con dos copias, afinar el oro en una dejaria la otra en otro tono sin
   que nada avise. Las decisiones, en DISEÑO/interfaz/INTERFAZ.md.

   `.pf-velo` es la capa del perfil de otro jugador y la de «Editar perfil»
   (css/perfil.css), `.mesa-velo` la del dialogo de abrir mesa (css/dialogo-mesa.css) y
   `.duelo-velo` la de la propuesta de partido y la invitacion a una mesa (css/duelo.css): van
   encima de lo que estes y no cuelgan de ninguna pantalla, asi que los tokens tambien se les
   ponen a ellas. Y `.camaras` y `.hud-abajo`, el panel de camaras y la barra de abajo del
   partido (css/camaras.css y css/hud-abajo.css), que viven en el HUD de partida.html; y
   `.avisos`, `.pista-repeticion` y `.marca-repeticion`, los avisos del partido y las dos piezas de
   la repeticion del gol (css/avisos.css), que cuelgan del body; y `.menu-partido`, el menu del
   partido (css/menu-partida.css), tambien del body. Y `.club-velo`, `.escudo-modal`,
   `.jugadores-modal` y `.equip-modal`, el dialogo del nombre del club y los talleres del escudo, de la
   apariencia y de la camiseta (css/dialogo-club.css, css/escudo-taller.css y
   css/taller-apariencia.css), que van encima de Mi club en la caja de sus dialogos. Y
   `.taller-raiz`, el taller de Mi estadio (css/taller.css):
   una pantalla que monta js/taller/marco.js donde le digan, tambien en /taller.html. Y `.sis-velo`,
   `.menu-jug`, `.aviso-flotante`, `.aviso-raton` y `.banner-conexion-perdida`, los avisos de la
   sala: los cinco dialogos del sistema, el menu de un jugador, los dos avisos que se van solos y el
   banner de la conexion perdida (css/avisos-sala.css), que tampoco cuelgan de ninguna pantalla. Y
   `.tutorial`, el entrenador del tutorial con su bocadillo (css/tutorial.css), en el body del partido.
   Y `.barra-jugada`, `.panel-jugada`, `.aviso-jugada` y `.ayuda-jugada`, la barra, los paneles, el
   aviso y la linea de ayuda de una jugada de entrenamiento (css/entrenamiento.css), tambien en el body
   del partido. Y `.bienvenida`, el entrenador a la puerta de la sala (css/bienvenida.css). Y
   `.puerta`, la puerta de entrada (css/puerta.css), que va encima de todo antes de entrar. Y
   `.franja-mando`, la franja de los botones del mando en el partido (css/mando.css).
   Y `.landing`, la pagina de la raiz de la web (landing.html, css/landing.css): coge el oro, el
   cristal y la tinta, pero NO `--u`, porque es una pagina que se desplaza y se lee en un movil.

   Los nombres dicen «portada» porque nacieron alli, y se quedan asi: renombrarlos
   seria tocar cada regla de la portada para nada.

   UNA SOLA UNIDAD: `--u`, que vale 10 px en una pantalla de 1920x1080 y crece o
   encoge con ella. Es el menor de dos cocientes —el alto entre 108 y el ancho
   entre 192— para que en 16:10 (la Steam Deck, 1280x800) mande el ancho y nada
   se salga por los lados. NINGUN TEXTO POR DEBAJO DE 1.8u: a 1280x800 son 12 px.

   EL ORO MACIZO ES DE LA ACCION PRINCIPAL. Lo demas lleva filo dorado fino sobre
   cristal azul oscuro: si todo brillara, no brillaria nada.
*/
.portada,
.pantalla,
.pf-velo,
.mesa-velo,
.duelo-velo,
.camaras,
.hud-abajo,
.avisos,
.pista-repeticion,
.marca-repeticion,
.menu-partido,
.club-velo,
.escudo-modal,
.jugadores-modal,
.equip-modal,
.taller-raiz,
.sis-velo,
.menu-jug,
.aviso-flotante,
.aviso-raton,
.banner-conexion-perdida,
.tutorial,
.barra-jugada,
.panel-jugada,
.aviso-jugada,
.ayuda-jugada,
.bienvenida,
.puerta,
.franja-mando,
.marco-mando,
.mando-paleta,
.landing {
  --u: min(calc(100vh / 108), calc(100vw / 192));
  --oro-filo: linear-gradient(135deg, #FFF1BC 0%, #D6A043 32%, #FFE4A2 52%, #AD771F 78%, #F2CF74 100%);
  --oro-filo-vivo: linear-gradient(135deg, #FFF8DA 0%, #EDBB57 32%, #FFF0C4 52%, #C58D2B 78%, #FFE08E 100%);
  --cristal: linear-gradient(180deg, rgba(20, 37, 72, .86) 0%, rgba(7, 16, 37, .93) 100%);
  --cristal-vivo: linear-gradient(180deg, rgba(30, 54, 102, .9) 0%, rgba(10, 23, 52, .95) 100%);
  --tinta-portada: #EEF3FC;
  --tinta-portada-baja: #C4CFE3;
  --oro-texto: #F4D688;
  --filo: max(1.5px, calc(.2 * var(--u)));
}