/* Airport Panic — paleta y encaje de las dos mitades.

   El mundo se dibuja dentro del canvas; el panel de colas es DOM de verdad,
   porque el arrastre, el scroll y el táctil de una lista salen gratis y en
   canvas hay que escribirlos a mano. El CSS solo reparte el espacio. */

:root {
  --fondo: #040807;
  --fondo-lienzo: #060b0b;
  --fondo-panel: #0a1211;
  --borde: #17302a;
  --texto: #dff0ea;
  --tenue: #6f8f86;
  --panel: 280px;

  /* La misma familia que el lienzo. El panel es la tira de progresión del
     controlador: matrículas, pistas y segundos en columna, y eso se lee con
     ancho fijo o no se lee. */
  --tipo: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

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

html,
body {
  height: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo);
  overflow: hidden;
}

#escena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
}

/* El lienzo mantiene su resolución lógica fija (1280x720) y se escala por CSS
   hasta lo que quepa, pero NUNCA por encima de su tamaño nativo: ampliarlo
   emborrona el dibujo. Descuenta el panel del ancho disponible. */
#lienzo {
  width: min(calc(100vw - var(--panel) - 24px), 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 jugar. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* El panel acompaña al lienzo en altura para que las dos mitades se lean como
   una sola pantalla, no como una página con un cajón al lado. */
#panel {
  width: var(--panel);
  height: min(calc((100vw - var(--panel) - 24px) * 9 / 16), 100vh, 540px);
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  overflow: hidden;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;

  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 8px;

  /* El panel se come el gesto entero: arrastrar una fila no puede desplazar la
     lista debajo, o el arrastre es imposible en un móvil. */
  touch-action: none;
}

/* En vertical las dos mitades no caben una al lado de la otra y el juego es
   injugable. */
#gira {
  display: none;
  position: absolute;
  padding: 0 24px;
  color: var(--tenue);
  font-size: 15px;
  text-align: center;
}

@media (orientation: portrait) and (max-width: 900px) {
  #lienzo,
  #panel {
    opacity: 0.12;
  }

  #gira {
    display: block;
  }
}

/* --- Las dos zonas del panel -------------------------------------------

   Apiladas y no lado a lado como en el boceto del README: en 280 px, dos
   columnas dejan las matrículas en dos líneas y el arrastre de una a otra en
   diagonal. Apiladas, el gesto es siempre vertical.

   La cola manda en el reparto del alto: es el mando, y verla entera importa
   más que ver todos los pendientes a la vez. */

.zona {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.zona.pendientes {
  flex: 0 1 auto;
  max-height: 42%;
}

.zona.cola {
  flex: 1 1 auto;
}

/* --- Las tres marchas, arriba del todo ---------------------------------- */

.marchas {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.marcha {
  flex: 1 1 0;
  padding: 5px 0;
  font: 600 11px/1 var(--tipo);
  letter-spacing: 0.08em;
  color: var(--tenue);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 3px;
  cursor: pointer;
  /* El panel se come el gesto entero, y estos botones son parte del panel. */
  touch-action: none;
}

.marcha:hover { color: var(--texto); border-color: var(--tenue); }

.marcha.activa {
  color: var(--fondo-panel);
  background: var(--texto);
  border-color: var(--texto);
}

.zona h2 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--tenue);
  padding: 2px 6px 6px;
}

.lista {
  list-style: none;
  flex: 1 1 auto;
  min-height: 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- La fila ------------------------------------------------------------

   Rejilla de columnas fijas para que las matrículas, los sitios y los segundos
   queden alineados en vertical: una lista que se lee de reojo se lee por
   columnas, no por filas. El alto está pactado con ALTO_FILA de `panel.js`. */

.fila {
  display: grid;
  grid-template-columns: 14px 10px 9px 1fr 48px 24px 24px 34px;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  cursor: grab;
}

.fila:hover {
  background: #0f1f1b;
}

.fila .orden,
.fila .tipo,
.fila .donde,
.fila .resto {
  color: var(--tenue);
  font-size: 10.5px;
}

/* El tipo va apagado a propósito: es una letra que casi nunca cambia de
   significado y que solo hace falta mirar cuando se está decidiendo un orden.
   Al brillo del texto normal competiría con la matrícula, que es lo que se
   busca con los ojos. */
.fila .tipo {
  text-align: center;
}

.fila .donde {
  text-align: right;
}

.fila .resto {
  text-align: right;
}

.fila .via {
  color: #4e8375;
}

/* --- El coste de la secuencia --------------------------------------------

   Los segundos que hay que esperar entre estas dos operaciones, ENTRE las dos
   filas que los causan. Es la ley del juego dicha donde se decide.

   Sin color, y es deliberado: en este panel el ámbar y el rojo significan
   combustible y solo combustible. Un hueco caro pintado de ámbar le robaría el
   idioma al aviso que de verdad mata, así que lo caro se dice con el BRILLO y
   el grosor — un hueco barato es una raya que casi no se ve, que es justo lo
   que uno quiere de él. */

.separacion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  height: 14px;
  padding: 0 6px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

.separacion .raya {
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.separacion .segundos {
  letter-spacing: 0.04em;
}

.separacion.barato { color: #3a6155; }
.separacion.medio  { color: #4e8375; }

.separacion.caro {
  color: #86c7b4;
}

/* El caro además separa de verdad: la banda ocupa sitio, así que dos
   operaciones que no se llevan bien se VEN lejos una de otra. */
.separacion.caro .raya {
  height: 2px;
  opacity: 0.8;
}

.fila.llegada .via {
  color: #8fd8ff;
}

.fila .matricula {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El medidor de combustible. Solo lo llenan las llegadas que siguen en el
   aire; en los demás se queda vacío para que la columna no baile. */
.fila .medidor {
  height: 4px;
  border-radius: 2px;
  background: #10201c;
  overflow: hidden;
}

.fila .medidor i {
  display: block;
  height: 100%;
  width: 0;
  background: #4a90c8;
}

.fila.precaucion .medidor i {
  background: #ffc53d;
}

.fila.precaucion .resto {
  color: #ffc53d;
}

.fila.critico .medidor i {
  background: #ff5d67;
}

.fila.critico .resto {
  color: #ff8f96;
}

/* Rojo y parpadeo, como dice el README. Es el único elemento animado del
   panel: si parpadeara algo más, dejaría de significar «se está muriendo». */
.fila.critico {
  animation: alarma 1s steps(2, end) infinite;
}

@keyframes alarma {
  50% { background: #2b1416; }
}

/* --- Estados del mando --------------------------------------------------- */

.fila.encolado {
  background: #0e1c19;
}

.fila.autorizado {
  box-shadow: inset 2px 0 0 #5df2a0;
}

/* Comprometido: ya no se puede tocar, y se ve que no se puede tocar. */
.fila.comprometido {
  cursor: default;
  opacity: 0.62;
}

.fila.seleccionado {
  background: #143a44;
  box-shadow: inset 0 0 0 1px #4a90c8;
}

.fila.arrastrando {
  opacity: 0.4;
}

/* Dónde caería lo que se está arrastrando. */
.fila.hueco-encima {
  box-shadow: inset 0 2px 0 #4a90c8;
}

.lista.hueco-final {
  box-shadow: inset 0 -2px 0 #4a90c8;
}

/*
 * La celda de acción: los tres verbos de la etapa 10. Existe siempre aunque
 * esté vacía, porque una columna que aparece y desaparece movería las otras
 * seis cada vez que un avión cambia de estado.
 */
.fila .accion {
  text-align: center;
  opacity: 0.55;
}

.fila:hover .accion {
  opacity: 1;
}

/*
 * Armada: la fila entera se enciende, porque el segundo toque es la fila y no
 * la celda, y hay que ver dónde hay que dar.
 */
.fila.armado {
  background: rgba(220, 80, 70, 0.22);
}

.fila.armado .accion {
  opacity: 1;
  font-weight: bold;
}

/* Parado en el umbral, con la pista reservada para él. */
.fila.alineado .donde {
  font-weight: bold;
}