/* Slot Panic — la paleta de Rail Panic y el encaje del lienzo.
   Toda la interfaz del juego se dibuja dentro del canvas; el CSS solo
   se ocupa de centrarlo y escalarlo conservando la proporción 16:9. */

:root {
  --fondo: #12141a;
  --fondo-lienzo: #1b1e26;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--fondo);
  color: #e6e8ee;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Sin rebote elástico: el juego ocupa la primera pantalla entera y la prosa
     para los buscadores va debajo. */
  overscroll-behavior: none;
}

/* En la app no hay prosa ni pie: nada que desplazar. */
.app,
.app body {
  height: 100%;
  overflow: hidden;
}

/* La primera pantalla, entera: 100dvh sigue a la barra de direcciones del
   móvil (100vh es el respaldo). Las muescas, con las áreas seguras. Sin gestos
   de scroll en toda ella: en horizontal en el móvil quedan bandas a los lados
   del lienzo, y un dedo ahí no debe mover la página en mitad de una carrera. */
#escena {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: none;
}

/* La prosa bajo el lienzo (la generan tools/gen-pages.mjs). */
.info {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 72px;
  color: #8b93a7;
  font-size: 15px;
  line-height: 1.6;
}

.info h1 {
  margin: 8px 0 12px;
  color: #e6e8ee;
  font-size: 1.4rem;
}

.info h2 {
  margin: 24px 0 8px;
  color: #e6e8ee;
  font-size: 1.1rem;
}

.info ul {
  margin: 8px 0;
  padding-left: 20px;
}

.info b {
  color: #c9ccd6;
}

.info table {
  margin: 8px 0;
  border-collapse: collapse;
}

.info th,
.info td {
  padding: 4px 14px 4px 8px;
  border: 1px solid #2c313f;
  text-align: left;
}

.info th {
  color: #c9ccd6;
}

.info a {
  color: #88aede;
}

kbd {
  padding: 0 5px;
  border: 1px solid #2c313f;
  border-radius: 3px;
  background: #1b1e26;
  color: #e6e8ee;
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
}

.idiomas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 0 !important;
  list-style: none;
}

.idiomas [aria-current] {
  color: #e6e8ee;
  font-weight: 600;
}

.legal {
  margin-top: 24px;
  font-size: 13px;
}

/* Resolución lógica fija (1280x720) escalada por CSS hasta lo que quepa, pero
   nunca por encima de 960 px de ancho: como en Rail Panic, un píxel lógico
   mide 0,75 px reales y todo se ve un 25 % más pequeño que sus números. */
#lienzo {
  width: min(100vw, calc(100vh * 16 / 9), 960px);
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--fondo-lienzo);
  display: block;
  cursor: pointer;

  /* Táctil: el lienzo se come el gesto. Sin esto, arrastrar desplaza la página
     y un doble toque hace zoom justo cuando se intenta frenar. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Pie: enlaces a los demás juegos Panic y «Cookies» (reabre el aviso de cookies
   común, vendor/pnyk/consentimiento.js). Discreto, pegado abajo, para no
   competir con el juego. */
#pie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 4px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 12px;
  padding: 0 8px;
  color: #8b93a7;
  font: 12px system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0.6;
}

#pie:hover,
#pie:focus-within {
  opacity: 1;
}

#otros {
  margin: 0;
}

#pie a {
  color: inherit;
}

#cookies {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* En la app el lienzo llena lo que haya, también en una tableta: el tope de
   960 px es para no verlo enorme en un monitor. */
.app #lienzo {
  width: min(100vw, calc(100dvh * 16 / 9));
}

/* El modo lupa (lupa.js): en el móvil en vertical (la misma condición que
   VERTICAL en juego.js) el lienzo pasa a vertical, con el alto de la
   proporción de la pantalla (--alto-lupa), y sigue al coche. Lo pone juego.js
   con la clase .lupa. Antes, en vertical, se pedía girar el móvil. */
.lupa #lienzo {
  width: min(100vw, calc(100dvh * 540 / var(--alto-lupa, 960)));
  aspect-ratio: 540 / var(--alto-lupa, 960);
}

/* El pie fijo caía encima del coche: en la lupa va debajo, en su sitio. */
.lupa #pie {
  position: static;
  padding: 8px;
}