/*!
 * pipeline-juego.css — Sillage
 * -----------------------------------------------------------------------
 * Solo el juego. Ni una regla de aqui toca el resto de la pagina: todo cuelga
 * de .pipeline-game-fullscreen o de .game-launcher, que son los dos nodos del
 * juego.
 *
 * EL CURSOR
 * Dentro del juego el cursor tiene que VERSE. El puntero del sistema se pierde
 * sobre un fondo negro, asi que se pone el de la marca, con su version @2x
 * para pantallas de mucha densidad y un respaldo del sistema por si la imagen
 * no carga. El punto activo es la esquina superior izquierda (0 0), que es
 * donde apunta el dibujo.
 *
 * Tipografia: Sofia Sans Extra Condensed 800 en mayusculas para los titulos y
 * las cifras del HUD, Sofia Sans para el resto. Son las de la marca y ya estan
 * cargadas por la pagina, asi que no cuestan una peticion mas.
 */

:root {
  --sill-cian: #00ffe0;
  --sill-morado: #8000ff;
  --sill-negro: #05070c;
  --sill-blanco: #ffffff;
  --sill-tenue: rgba(255, 255, 255, 0.58);
  --sill-borde: rgba(255, 255, 255, 0.16);
}

/* ------------------------------------------------------------------ */
/* Cartel de la escena 03                                              */
/* ------------------------------------------------------------------ */
/* Sirve para la imagen y para el video: los dos llevan la misma clase, asi
   que la tarjeta se ve igual haya bucle o no. */
.game-launcher__cartel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Detras de la rejilla y del texto, como estaba el video. */
  z-index: 0;
  opacity: 0.72;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* La capa a pantalla completa                                         */
/* ------------------------------------------------------------------ */
.sill-jugando,
.sill-jugando body {
  /* Mientras se juega no se desplaza la pagina de detras. En movil esto es lo
     que evita que un arrastre lateral acabe haciendo scroll en vez de mover
     la botella. */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.pipeline-game-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  display: block;
  /* Aqui esta el cursor visible. La imagen es de marca y lleva su @2x. */
  cursor: url("/assets/img/cursor-pipeline.png") 0 0, crosshair;
  cursor: -webkit-image-set(
      url("/assets/img/cursor-pipeline.png") 1x,
      url("/assets/img/cursor-pipeline-2x.png") 2x
    ) 0 0, crosshair;
  cursor: image-set(
      url("/assets/img/cursor-pipeline.png") 1x,
      url("/assets/img/cursor-pipeline-2x.png") 2x
    ) 0 0, crosshair;
}

/* Sobre los botones, el cursor cambia: hay que notar que se puede pulsar. */
.pipeline-game-fullscreen button {
  cursor: pointer;
}

/* Y mientras se pilota, no hay cursor: la botella ES el puntero. Va sobre el
   lienzo y no sobre la capa entera, asi que los botones siguen teniendo el
   suyo -la capa del HUD no intercepta el raton, o sea que el cursor que vale
   en todo lo que no es un boton es el del lienzo-. */
.sill-lienzo.es-pilotando { cursor: none; }

/* El avisador de cookies, fuera mientras se juega. La pestana de "Manage
   consent" vive pegada al borde de la ventana con position:fixed, y la capa
   del juego va por encima de la pagina: se quedaba encima del HUD tapandolo,
   y ademas detras de un modal no se puede ni pulsar. Vuelve al salir, que es
   cuando sirve de algo. */
.sill-jugando .ck-tab,
.sill-jugando .ck-banner { display: none !important; }

/* El punto cian de la pagina tambien fuera mientras se juega: la capa del
   juego pone su propio cursor de marca, y el punto (z-index mayor) se
   dibujaba encima con retraso, dos cursores a la vez. */
.sill-jugando #cursor-follow { display: none !important; }

.sill-sala {
  position: absolute;
  inset: 0;
}

.sill-lienzo {
  display: block;
  width: 100%;
  height: 100%;
  /* El lienzo no captura gestos del navegador: los queremos enteros. */
  touch-action: none;
}

.sill-salir {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 40;
  width: 44px;               /* 44 px es el minimo tocable comodo */
  height: 44px;
  display: grid;
  place-items: center;
  font: 300 28px/1 "Sofia Sans", system-ui, sans-serif;
  color: var(--sill-blanco);
  background: rgba(5, 7, 12, 0.55);
  border: 1px solid var(--sill-borde);
  border-radius: 0;          /* botones cuadrados, como toda la marca */
  transition: background 0.18s ease, border-color 0.18s ease;
}

.sill-salir:hover,
.sill-salir:focus-visible {
  background: rgba(0, 255, 224, 0.16);
  border-color: var(--sill-cian);
  outline: none;
}

.sill-cargando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 400 14px/1.4 "Sofia Sans", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sill-tenue);
}

/* ------------------------------------------------------------------ */
/* HUD                                                                 */
/* ------------------------------------------------------------------ */
.sill-hud {
  position: absolute;
  inset: 0;
  z-index: 20;
  /* La capa del HUD NO intercepta gestos: solo sus botones. Sin esto, un
     arrastre que empezase sobre el marcador no movia la botella. */
  pointer-events: none;
  font-family: "Sofia Sans", system-ui, sans-serif;
  color: var(--sill-blanco);
  -webkit-user-select: none; user-select: none;
}

.sill-hud button { pointer-events: auto; }

.sill-barra {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: calc(max(14px, env(safe-area-inset-right)) + 52px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sill-bloque {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sill-bloque--centro { align-items: center; flex: 1 1 auto; }
.sill-bloque--der { align-items: flex-end; }

.sill-eti {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sill-tenue);
  white-space: nowrap;
}

.sill-cifra {
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 5.2vw, 40px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;   /* las cifras no bailan al cambiar */
}

.sill-progreso {
  width: min(190px, 34vw);
  height: 2px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.18);
}

.sill-progreso > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sill-cian);
  transition: width 0.18s linear;
}

.sill-racha {
  position: absolute;
  top: 50%;
  right: max(16px, env(safe-area-inset-right));
  transform: translateY(-50%) scale(0.9);
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 7vw, 56px);
  color: var(--sill-cian);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sill-racha--activa { opacity: 0.92; transform: translateY(-50%) scale(1); }

.sill-frase {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  text-align: center;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(30px, 8vw, 68px);
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
}

.sill-frase--entra { animation: sill-frase 2.6s ease forwards; }

@keyframes sill-frase {
  0%   { opacity: 0; transform: translateY(14px); }
  14%  { opacity: 1; transform: translateY(0); }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Carga del especial. Abajo a la izquierda: fuera del carril, pero donde la
   vista cae al mirar la botella. */
.sill-especial {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(190px, 34vw);
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
}

.sill-especial > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sill-tenue);
  transition: width 0.18s linear, background 0.2s ease;
}

.sill-especial__eti {
  position: absolute;
  left: 0;
  bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sill-tenue);
  white-space: nowrap;
}

/* Lista: se enciende en morado y late. Es la unica cosa del HUD que llama la
   atencion, porque es la unica que pide que hagas algo. */
.sill-especial--lista > i { background: var(--sill-morado); width: 100% !important; }
.sill-especial--lista .sill-especial__eti {
  color: var(--sill-morado);
  animation: sill-late 1.1s ease-in-out infinite;
}

/* En tactil la barra del especial es un boton: tocar la pantalla ya no lo
   lanza, porque tocar es colocar la nave. El area de toque es mucho mayor que
   la barra, que solo tiene 4 px de alto. */
@media (pointer: coarse) {
  .sill-especial { pointer-events: auto; touch-action: none; }
  .sill-especial::before {
    content: "";
    position: absolute;
    left: -14px; right: -14px;
    top: -34px; bottom: -14px;
  }
}

@keyframes sill-late {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Nivel de arma: guiones que se encienden, encima de la carga del especial. */
.sill-arma {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 34px);
  display: flex;
  gap: 4px;
}

.sill-arma > i {
  display: block;
  width: 14px;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.22s ease;
}

.sill-arma > i.sill-arma--on { background: var(--sill-cian); }

.sill-jefe {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(360px, 68vw);
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.sill-jefe > i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sill-morado);
  transition: width 0.12s linear;
}

/* ------------------------------------------------------------------ */
/* Paneles: eleccion, pausa, final                                     */
/* ------------------------------------------------------------------ */
.sill-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 4, 8, 0.74);
  pointer-events: auto;
  /* -webkit- incluido a proposito: Safari sigue necesitandolo. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sill-panel[hidden] { display: none; }

.sill-caja {
  width: min(520px, 100%);
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
  border: 1px solid var(--sill-borde);
  background: rgba(5, 7, 12, 0.82);
  padding: clamp(18px, 4vw, 30px);
}

.sill-titulo {
  margin: 0 0 6px;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", system-ui, sans-serif;
  font-weight: 800;               /* 800 para titulos, nunca 900 */
  text-transform: uppercase;
  font-size: clamp(28px, 6.4vw, 48px);
  line-height: 0.95;
  letter-spacing: 0.01em;
}

.sill-sub {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sill-tenue);
}

.sill-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.sill-boton {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 12px 18px;
  font: 600 12px/1 "Sofia Sans", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sill-blanco);
  background: transparent;
  border: 1px solid var(--sill-borde);
  border-radius: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sill-boton:hover,
.sill-boton:focus-visible {
  background: var(--sill-cian);
  border-color: var(--sill-cian);
  color: var(--sill-negro);
  outline: none;
}

/* El medidor de fotogramas (`?fps`). Abajo a la derecha, donde no tapa ni el
   marcador ni la barra del especial. Solo existe si se pide. */
.sill-medidor {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  padding: 4px 8px;
  background: rgba(5, 7, 12, 0.72);
  border: 1px solid var(--sill-borde);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sill-cian);
  white-space: nowrap;
}

.sill-medidor.es-mal { color: #ff4d4d; border-color: rgba(255, 77, 77, 0.6); }

/* ------------------------------------------------------------------ */
/* EL CODEC DE KALVIN                                                  */
/* ------------------------------------------------------------------ */
/* La transmision que cuenta de que va esto, a un lado y SOBRE la partida:
   la radio de un juego de sigilo, no un cartel modal.

   TRES REGLAS QUE NO SE SALTAN AQUI:
   1. No intercepta el raton. La capa del HUD ya es pointer-events:none y solo
      los botones vuelven a escuchar; si el codec capturase gestos, pasar el
      cursor por encima dejaria de mover la botella, que se pilota con el
      raton.
   2. Nada de backdrop-filter. Desenfocar lo que hay detras de una caja que
      esta encima de un lienzo repintandose a 60 fps se paga en cada
      fotograma, y el presupuesto de este juego no lo tiene.
   3. Solo se animan `transform` y `opacity`, que van por el compositor. Una
      animacion de `width` o de `filter` aqui mete maquetado o pintado en
      medio del bucle del juego. */
.sill-codec {
  position: absolute;
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  transform: translateY(-50%);
  width: min(340px, 34vw);
  padding: 12px 14px 14px;
  background: rgba(5, 7, 12, 0.82);
  border: 1px solid rgba(0, 255, 224, 0.34);
  /* La linea de dentro es la que le da el aire de aparato: dos bordes, sin
     una sola esquina redondeada, como el resto de la marca. */
  box-shadow: inset 0 0 0 1px rgba(0, 255, 224, 0.1), 0 0 26px rgba(0, 0, 0, 0.55);
  animation: sill-codec-entra 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes sill-codec-entra {
  from { opacity: 0; transform: translate(18px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

.sill-codec__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sill-cian);
}

/* La onda de la señal: tres barras que laten. Es un degradado quieto al que
   se le mueve la escala, asi que no repinta nada. */
.sill-codec__onda {
  flex: 0 0 auto;
  width: 40px;
  height: 8px;
  background: repeating-linear-gradient(90deg,
    var(--sill-cian) 0 3px, transparent 3px 8px);
  transform-origin: right center;
  animation: sill-codec-onda 1.1s ease-in-out infinite;
}

@keyframes sill-codec-onda {
  0%, 100% { transform: scaleX(0.45); opacity: 0.5; }
  50%      { transform: scaleX(1); opacity: 1; }
}

.sill-codec__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* El marco del retrato, con sus lineas de barrido encima. Las lineas son un
   degradado repetido y QUIETO: el aire de monitor sale gratis. */
.sill-codec__marco {
  position: relative;
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(0, 255, 224, 0.45);
  background: radial-gradient(circle at 50% 40%,
    rgba(0, 255, 224, 0.16), rgba(5, 7, 12, 0.9) 70%);
  overflow: hidden;
}

.sill-codec__marco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
    rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.sill-codec__cara {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0, 255, 224, 0.4));
  animation: sill-flota 3.4s ease-in-out infinite;
}

@keyframes sill-flota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.sill-codec__quien { min-width: 0; }

.sill-codec__nombre {
  display: block;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--sill-blanco);
}

.sill-codec__cargo {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sill-tenue);
}

/* El alto esta RESERVADO para la linea mas larga: si la caja creciese con el
   texto, la maquina de escribir movería el bloque entero a cada renglon. */
.sill-codec__texto {
  margin: 0;
  min-height: 6.1em;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sill-blanco);
  border-top: 1px solid var(--sill-borde);
  padding-top: 10px;
}

.sill-codec__texto::after {
  content: "_";
  color: var(--sill-cian);
  animation: sill-cursor 1s steps(2) infinite;
}

@keyframes sill-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Linea acabada: el cursor se va y aparece la flecha de "sigue".

   LA FLECHA SE DIBUJA CON BORDES, no con el caracter ▼. Medido: con el
   glifo, el fotograma en que termina la primera linea costaba 66,6 ms en un
   movil con la CPU cuatro veces mas lenta (15 fps de minimo, reproducible en
   las tres pasadas) y luego ninguno mas. Es la busqueda de fuente de reserva:
   ▼ no esta en Sofia Sans, el navegador recorre la cadena de fuentes
   buscando quien lo tenga, y eso se paga UNA vez. Un triangulo de bordes no
   tiene glifo que buscar. */
.sill-codec.es-fin .sill-codec__texto::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--sill-cian);
}

.sill-codec__saltar {
  display: block;
  margin: 10px 0 0 auto;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--sill-borde);
  color: var(--sill-tenue);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.sill-codec__saltar:hover,
.sill-codec__saltar:focus-visible {
  border-color: var(--sill-cian);
  color: var(--sill-cian);
  outline: none;
}

/* En pantalla estrecha el lado no existe: la transmision pasa a una franja
   ARRIBA, debajo del marcador, y el retrato se encoge. Antes iba abajo, pero
   desde que la botella sube y baja y va donde esta el dedo, abajo es justo
   donde se juega: la franja tapaba la nave y el dedo. Arriba solo hay cielo
   lejano. */
@media (max-width: 720px) {
  .sill-codec {
    top: calc(max(12px, env(safe-area-inset-top)) + 64px);
    bottom: auto;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    transform: none;
    animation-name: sill-codec-entra-abajo;
  }
  .sill-codec__marco { width: 44px; height: 44px; }
  .sill-codec__nombre { font-size: 17px; }
  .sill-codec__texto { min-height: 4.6em; font-size: 13px; }
}

@keyframes sill-codec-entra-abajo {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sill-codec,
  .sill-codec__cara,
  .sill-codec__onda,
  .sill-codec__texto::after { animation: none; }
}

/* Eleccion de botella */
.sill-botellas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 18px;
}

.sill-botella {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  background: transparent;
  border: 1px solid var(--sill-borde);
  border-radius: 0;
  color: var(--sill-blanco);
  font: 600 11px/1 "Sofia Sans", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.sill-botella img {
  width: 100%;
  max-width: 96px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.sill-botella:hover,
.sill-botella:focus-visible {
  background: rgba(0, 255, 224, 0.1);
  border-color: var(--sill-cian);
  outline: none;
}

/* ------------------------------------------------------------------ */
/* Vertical: el HUD se aprieta, nunca se solapa                        */
/* ------------------------------------------------------------------ */
@media (max-width: 560px) {
  .sill-progreso { width: min(140px, 40vw); }
  .sill-racha { top: auto; bottom: 16%; transform: translateY(0) scale(0.9); }
  .sill-racha--activa { transform: translateY(0) scale(1); }
  .sill-frase { top: 24%; }
}

/* En una pantalla apaisada y baja (un movil tumbado) la barra se encoge para
   no comerse el carril. */
@media (max-height: 440px) {
  .sill-cifra { font-size: 24px; }
  .sill-frase { top: 18%; font-size: clamp(24px, 6vw, 40px); }
  .sill-botella img { max-width: 64px; }
}

/* ------------------------------------------------------------------ */
/* Respeta a quien pide menos movimiento                               */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sill-frase--entra { animation-duration: 0.01ms; opacity: 1; }
  .sill-especial--lista .sill-especial__eti { animation: none; }
  .sill-progreso > i,
  .sill-jefe > i { transition: none; }
}