/* ═══════════════════════════════════════════════════════════════════════════
   LA PUERTA · mini-landing del portero (se sirve en /door)
   Vive aparte de la web (su propio HTML, CSS y JS) porque es otro sitio: la
   web es la sala y esto es la acera de fuera. Pero se viste con lo mismo —las
   tres fuentes y los colores de siempre— para que al entrar no cambie el
   mundo, sólo el lado de la puerta.

   ───────────────────────────────────────────────────────────────────────────
   LA FOTO MANDA. Antes había un retrato vertical pequeño que se usaba de
   fondo y, en pantallas grandes, media pantalla partida en dos. Ahora hay dos
   fotos de la puerta de verdad —el neón, el cartel de «there is no list, only
   questions» y los dos porteros mirándote— y cada una está encuadrada para su
   pantalla: `door-pc` apaisada, `door-mobile` vertical larga.

   Eso cambia el reparto: la foto ya no es un fondo al que se le sube el brillo,
   es LA PIEZA, y va a sangre en todas las pantallas. El texto no se pone al
   lado: se pone DEBAJO, en el negro que sube desde el borde inferior, que es
   exactamente donde estarías tú si esa foto fuera una puerta y tú la persona
   de la cola. Se ve la puerta entera, y tú hablas desde abajo.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Power Grotesk";
  src:url("assets/fonts/powergrotesk-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Dirtyline";
  src:url("assets/fonts/dirtyline.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0030-0039,U+0041-005A,U+0061-007A,U+00C0-00FF;
}

:root{
  --red:#e30613;
  --gold:#c99e67;
  --ink:#000;
  --bone:#efece7;
  --dim:#9a9793;
  --line:rgba(255,255,255,.15);
  --display:"HelveticaNeue-CondensedBlack","Helvetica Neue","Arial Black",
            Haettenschweiler,Impact,"Arial Narrow",Arial,sans-serif;
  --text:"Power Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",
         Helvetica,Arial,sans-serif;
  --ls-6:.18em;
  --ls-4:.12em;
  /* Cuánto se le ve a la puerta. Lo mueve el JS (`ver()`) y es el único mando
     de toda la pieza: de él salen el brillo de la foto Y la oscuridad del velo
     que hay encima, que van justo al revés. Ver `.scrim`. */
  --see:.62;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--text);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                       /* la puerta no tiene scroll */
  overscroll-behavior:none;
}

/* ── LA PUERTA ──────────────────────────────────────────────────────────────
   A sangre, siempre puesta. `--see` es cuánto se le ve: en la cola se ve casi
   entera —es la entrada, y una entrada es una foto—, mientras lees una
   pregunta se retira, y en la espera vuelve a subir según te acercas. */
.doorman{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  opacity:var(--see,.62);
  transition:opacity 1.1s ease;
}
.doorman picture{
  display:block;width:100%;height:100%;
  /* EL NEÓN QUE ARRANCA. Un fundido normal aquí decía «página cargando». Esto
     dice «se encienden las luces de la puerta»: el tubo prende, parpadea dos
     veces y se queda. Suena una sola vez, al llegar, y no vuelve. */
  animation:neon 2.3s ease both;
}
.doorman img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transform:scale(1.04);
  animation:breathe 26s ease-in-out infinite alternate;
}
@keyframes breathe{ to{ transform:scale(1.12) } }
@keyframes neon{
  0%  {opacity:0;   filter:brightness(.15) contrast(1.25)}
  14% {opacity:1;   filter:brightness(1.55) contrast(1.1)}
  20% {opacity:.28; filter:brightness(.45)}
  27% {opacity:1;   filter:brightness(1.3)}
  34% {opacity:.55; filter:brightness(.8)}
  42% {opacity:1;   filter:brightness(1.12)}
  100%{opacity:1;   filter:none}
}

/* Grano: sin él, un negro a pantalla completa se lee como una página que no ha
   cargado. Con él se lee como una calle de noche. */
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='120' height='120' filter='url(%23n)'/></svg>");
  animation:shift 1.2s steps(3) infinite;
}
@keyframes shift{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)}
}

/* ── LA VELADURA FIJA ───────────────────────────────────────────────────────
   Está siempre y no se mueve: el rescoldo rojo del neón por arriba, la viñeta,
   y —lo importante— el negro que sube desde abajo. Ese negro es la mesa sobre
   la que se apoya TODO el texto de la pieza; sin él, el titular cae encima de
   la grava y de los zapatos de los porteros y se lee a trompicones. */
.vig{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.94) 0%, rgba(0,0,0,.80) 14%, rgba(0,0,0,.52) 30%,
      rgba(0,0,0,.20) 48%, transparent 66%),
    radial-gradient(130% 46% at 50% 0%, rgba(227,6,19,.18), transparent 64%),
    radial-gradient(120% 60% at 50% 108%, rgba(227,6,19,.10), transparent 62%),
    radial-gradient(105% 105% at 50% 42%, transparent 32%, rgba(0,0,0,.68) 100%);
}

/* ── LA VELADURA QUE SE MUEVE ───────────────────────────────────────────────
   Ésta sí depende de `--see`, y va justo al revés que la foto: cuando hay que
   LEER —una pregunta y tres opciones, que es donde se juega la partida— la
   foto baja y este velo sube hasta casi tapar; cuando sólo te miran, se
   retira y la puerta se ve entera.

   Es un solo cálculo y evita el problema clásico de poner texto sobre una
   foto: que se lea a veces. Aquí se lee siempre, porque el fondo del texto se
   oscurece exactamente en el momento en que hay algo que leer. */
.scrim{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,
    #000 0%, rgba(0,0,0,.985) 30%, rgba(0,0,0,.92) 46%,
    rgba(0,0,0,.70) 62%, rgba(0,0,0,.34) 80%, rgba(0,0,0,.06) 100%);
  opacity:clamp(0, calc(1.02 - var(--see,.62)), .94);
  transition:opacity 1.1s ease,background .9s ease;
}

/* EL VELO CAMBIA DE FORMA CUANDO HAY QUE LEER.
   El de arriba sube desde el borde inferior, porque para eso está: el texto de
   la cola, de la espera y del «pasa» vive pegado abajo y lo que hay que apagar
   es el suelo. Pero la pregunta, el latido y el «hoy no» van CENTRADOS, y ahí
   ese degradado deja lo de arriba casi limpio: el titular caía sobre el neón
   encendido y el rojo se le metía por dentro de las letras.

   Así que en esas tres el velo deja de ser una rampa y se vuelve una capa casi
   plana: se apaga también arriba. `show()` pone y quita la clase. */
:root.leyendo .scrim{
  background:linear-gradient(to top,
    #000 0%, rgba(0,0,0,.99) 40%, rgba(0,0,0,.97) 64%,
    rgba(0,0,0,.92) 82%, rgba(0,0,0,.76) 100%);
}

/* ── EL ESCENARIO ───────────────────────────────────────────────────────────
   Abajo, no en el centro. La foto ocupa la pantalla y tú hablas desde el borde
   de abajo, que es donde está la cola. */
.stage{
  position:relative;z-index:4;
  height:100dvh;display:flex;overflow-y:auto;
  padding:max(24px,env(safe-area-inset-top)) 22px
          max(28px,calc(env(safe-area-inset-bottom) + 24px));
}
/* `margin:auto auto 0` y no `align-items:flex-end`: los dos pegan el bloque
   abajo, pero el de flex corta por arriba lo que no cabe —y el veredicto con
   tres fallos no cabe en un móvil pequeño—. Con margen automático, cuando no
   cabe, se hace scroll y no se pierde nada. */
.scr{
  width:100%;max-width:620px;margin:auto auto 0;text-align:center;
  animation:in .5s ease both;
}
.scr[hidden]{display:none}

/* ── DÓNDE CAE EL TEXTO ─────────────────────────────────────────────────────
   Dos sitios, y depende de si hay foto que respetar.

   ABAJO (la cola, la mirada, la espera, el «pasa»): la puerta se ve, y el
   texto se pone en el negro de abajo porque ahí es donde estarías tú.

   EN MEDIO (la pregunta, el latido, el «hoy no»): son las pantallas que se
   ponen negras. Ahí ya no hay foto a la que dejarle sitio —el velo se la ha
   comido entera—, así que un bloque pegado al canto de abajo no es respeto por
   nada: es texto en el borde de la pantalla, con un palmo de negro vacío
   encima y el pulgar tapando la última opción. Cuando la foto se apaga, el
   texto ocupa el hueco que ha dejado.

   Sigue siendo margen automático y no `align-items`: los dos centran, pero el
   de flex corta por arriba lo que no cabe, y el veredicto con tres fallos no
   cabe en un móvil pequeño. Con margen automático, cuando no cabe, se hace
   scroll y no se pierde ni una línea. */
.scr-q, .scr-beat, .scr-out{ margin-bottom:auto }
@keyframes in{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.kick{
  font-size:11px;letter-spacing:var(--ls-6);text-transform:uppercase;
  color:var(--red);margin:0 0 18px;
  text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.kick b{font-weight:400;color:var(--bone)}

.big{
  font-family:var(--display);font-weight:900;
  font-size:clamp(46px,15vw,92px);line-height:.88;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 20px;
  text-shadow:0 2px 40px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.8);
}
/* LA LETRA SUCIA.
   Dirtyline es una caligráfica con rabos: sus letras se salen por los lados de
   su propia caja y por arriba y por abajo de su propia línea. Con una sola por
   titular —como en la web— eso es la gracia y no molesta. Con una por palabra,
   como aquí, se convierte en un choque: la letra sucia se comía a la de al lado
   y el rabo de la línea de arriba caía encima de la de abajo, y «IN THE» no se
   leía.

   Tres correcciones y ninguna cambia el tipo: un pelo menos de cuerpo, un hueco
   a cada lado que compense el rabo, y —sólo en el titular de la cola, que es el
   único con cinco— una interlínea que deja pasar los rabos entre renglones. */
.dl{
  font-family:"Dirtyline",var(--display);font-weight:400;
  font-size:.94em;
  margin-inline:.07em;
}
.scr-queue .big{line-height:1.02}

.lead{
  font-size:clamp(15px,4vw,18px);line-height:1.55;color:#b9b6b1;
  margin:0 auto;max-width:44ch;
  text-shadow:0 1px 16px rgba(0,0,0,.95);
}
.foot{
  margin:30px 0 0;font-size:11px;letter-spacing:var(--ls-4);
  text-transform:uppercase;color:#6b6864;
}
.foot a{color:#6b6864}

/* ── LA ENTRADA ─────────────────────────────────────────────────────────────
   La primera pantalla no aparece de golpe: llega por partes, y en el orden en
   que ocurre una puerta de verdad. Primero el cartel («no hay lista, sólo
   preguntas»), luego dónde estás, luego lo que va a pasar, y al final —cuando
   ya lo has leído todo— el botón, que es lo único que se puede tocar.

   Un segundo y medio de más al entrar; es lo que tarda alguien en levantar la
   vista, ver el neón y darse cuenta de que hay dos tíos mirándole. */
.scr-queue{animation:none}
.scr-queue .kick { animation:in .7s ease .30s both }
.scr-queue .big  { animation:in .9s ease .55s both }
.scr-queue .lead { animation:in .8s ease .90s both }
.scr-queue .knock{ animation:in .7s ease 1.25s both, pulse 2.6s ease-out 2.1s infinite }
.scr-queue .foot { animation:in .7s ease 1.55s both }

/* ── El botón de la cola ────────────────────────────────────────────────── */
.knock{
  margin:34px auto 0;display:block;
  background:var(--red);color:#fff;border:none;border-radius:99px;
  font-family:var(--text);font-size:13px;letter-spacing:var(--ls-6);
  text-transform:uppercase;padding:21px 44px;cursor:pointer;
  box-shadow:0 0 0 0 rgba(227,6,19,.55),0 14px 40px rgba(0,0,0,.6);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{ to{ box-shadow:0 0 0 26px rgba(227,6,19,0),0 14px 40px rgba(0,0,0,.6) } }
.knock:active{transform:translateY(1px)}
.knock:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── Te mira ────────────────────────────────────────────────────────────── */
.stareline{
  font-size:clamp(17px,5vw,22px);color:var(--bone);margin:0;
  text-shadow:0 1px 20px rgba(0,0,0,.95);
  opacity:0;animation:in .8s ease .4s both;
}

/* ── LA PREGUNTA ────────────────────────────────────────────────────────────
   Es la pantalla que hay que LEER, y la única en la que la legibilidad manda
   por encima de la foto. Tres cosas la sostienen: el velo de arriba, que aquí
   sube casi del todo; la sombra propia de cada línea; y las opciones, que ya
   no son un borde sobre la nada sino una placa oscura de verdad. */
.clock{
  position:fixed;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.10);
  z-index:5;
}
.clock[hidden]{display:none}
.clock i{
  display:block;height:100%;width:100%;background:var(--red);
  transform-origin:0 50%;
  box-shadow:0 0 12px rgba(227,6,19,.8);
}
.q{
  font-size:clamp(21px,6vw,30px);line-height:1.32;font-weight:400;
  margin:0 0 26px;max-width:27ch;margin-inline:auto;
  text-shadow:0 2px 24px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9);
}
.opts{display:flex;flex-direction:column;gap:10px;text-align:left}
.opts button{
  display:block;width:100%;
  background:rgba(9,5,5,.72);
  -webkit-backdrop-filter:blur(12px) saturate(.85);
  backdrop-filter:blur(12px) saturate(.85);
  color:var(--bone);
  border:1px solid rgba(255,255,255,.18);border-radius:4px;
  font-family:var(--text);font-size:clamp(14.5px,4vw,16px);line-height:1.4;
  padding:17px 20px;cursor:pointer;text-align:left;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  transition:border-color .18s,background .18s,transform .12s;
}
.opts button:hover{border-color:rgba(227,6,19,.65);background:rgba(40,6,9,.78)}
.opts button:active{transform:translateY(1px)}
.opts button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* Al elegir, se apagan las otras: ya has decidido. */
.opts.done button{opacity:.26;pointer-events:none}
.opts.done button.picked{opacity:1;border-color:var(--bone);background:rgba(20,12,12,.85)}

/* ── El latido ──────────────────────────────────────────────────────────── */
.beatline{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,11vw,58px);margin:0;letter-spacing:-.01em;
  text-shadow:0 2px 40px rgba(0,0,0,.95);
}

/* ── El veredicto ─────────────────────────────────────────────────────────
   La pantalla con más texto de todas. El velo ya la sostiene, pero lleva
   además su propio negro por debajo: «lo que has fallado» es lo único que se
   ha ganado quien no entra, y tiene que leerse entero de una pasada. */
/* El veredicto ya no lleva sombra propia. La llevaba porque estaba pegado abajo
   y era el bloque con más texto; ahora va centrado, y una sombra puesta detrás
   de un bloque centrado es un rectángulo con cantos —se le veía el borde de
   arriba cruzando el neón, como una tarjeta pegada encima de la foto—. Lo que
   oscurece ahora es el velo de la pantalla entera (`:root.leyendo`), que no
   tiene bordes porque ocupa todo. */
.scr-out{ padding:4px 0 }

/* ── La espera ────────────────────────────────────────────────────────────
   La pantalla más quieta de todas, y la que más trabajo tiene: si parece
   congelada, se lee como una web rota y se cierra. Lo que la mantiene viva
   son tres cosas y ninguna es un reloj: la frase que llega, los palos que se
   apagan, y la puerta que se ve más según te acercas. */
.scr-wait{padding:26px 0 4px}
.waitline{
  font-size:clamp(18px,5.2vw,24px);line-height:1.45;color:var(--bone);
  margin:0 auto;max-width:24ch;
  text-shadow:0 2px 24px rgba(0,0,0,.95);
  /* Alto fijo: sin él, cada frase de distinto largo mueve los palos de abajo
     y la cola parece que respira sola. */
  min-height:4.4em;display:flex;align-items:center;justify-content:center;
  animation:llega 1.1s ease both;
}
@keyframes llega{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Los que tienes delante. Palos, no números: es gente, no una cuenta atrás. */
.queue{display:flex;gap:9px;justify-content:center;margin-top:32px}
.queue i{
  display:block;width:3px;height:34px;background:var(--red);border-radius:2px;
  box-shadow:0 0 10px rgba(227,6,19,.55);
  transition:background .5s ease,opacity .5s ease,transform .5s ease,box-shadow .5s ease;
}
.queue i.gone{background:var(--line);opacity:.5;transform:scaleY(.45);box-shadow:none}
.queuen{
  margin:16px 0 0;font-size:11px;letter-spacing:var(--ls-6);
  text-transform:uppercase;color:var(--dim);
}

/* ── Dentro ──────────────────────────────────────────────────────────────
   El final. Un solo botón: ya no hay código que copiar ni premio que
   enseñar, así que lo único que queda por hacer es comprar. */
.scr-in{
  background:linear-gradient(to top, #000 0%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.35) 100%);
  margin-inline:-22px;padding:26px 26px 4px;
}
.btn{
  display:block;margin:28px auto 0;max-width:420px;
  background:var(--red);color:#fff;text-decoration:none;
  border-radius:99px;padding:20px;
  font-size:13px;letter-spacing:var(--ls-6);text-transform:uppercase;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}

.miss{margin-top:26px;text-align:left}
.missKick{
  font-size:11px;letter-spacing:var(--ls-6);text-transform:uppercase;
  color:var(--red);margin:0 0 12px;
}
.misslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.misslist li{
  border-left:2px solid var(--red);padding:2px 0 2px 14px;
  font-size:15px;line-height:1.45;color:#b1aeaa;
}
.misslist b{display:block;color:var(--bone);font-weight:400}

.again{
  margin:30px auto 0;display:block;background:rgba(9,5,5,.6);color:var(--bone);
  border:1px solid var(--line);border-radius:99px;
  font-family:var(--text);font-size:12px;letter-spacing:var(--ls-6);
  text-transform:uppercase;padding:17px 34px;cursor:pointer;
}
.again[disabled]{color:#6b6864;cursor:default;border-color:var(--line)}
/* Sin esto el botón sigue viéndose aunque lleve `hidden`: un `display:block`
   propio le gana a la regla `[hidden]` que trae el navegador. */
.again[hidden]{display:none}

/* ── Los dos interruptores ──────────────────────────────────────────────── */
.lang,.snd{
  position:fixed;z-index:6;
  top:max(14px,env(safe-area-inset-top));
  background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:99px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--dim);font-family:var(--text);font-size:10px;
  letter-spacing:var(--ls-6);padding:8px 13px;cursor:pointer;
}
.lang{right:14px}
/* A la izquierda del idioma. El hueco está medido sobre el ancho real de «ES»
   y de «EN», que son las dos únicas cosas que puede decir ese botón. */
.snd{right:63px;padding:7px 11px;line-height:0}
.snd svg{
  width:15px;height:15px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.snd svg path:first-child{fill:currentColor;stroke-width:1}
/* Con sonido se ven las ondas; sin él, la cruz. Nunca las dos. */
.snd .off{display:none}
.snd[aria-pressed="false"]{color:#5a5754}
.snd[aria-pressed="false"] .on{display:none}
.snd[aria-pressed="false"] .off{display:inline}

/* Sólo para lectores de pantalla: el botón es un icono y necesita decir qué
   es, pero escrito al lado ocuparía más que el propio interruptor. */
.sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Quien pide menos movimiento se queda sin el grano, sin la respiración y sin
   el neón, que son justo lo que marea. La puerta funciona igual. */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .doorman img{animation:none}
  .doorman picture{animation:none;opacity:1;filter:none}
  .knock{animation:none}
  .scr,.stareline,.waitline,
  .scr-queue .kick,.scr-queue .big,.scr-queue .lead,
  .scr-queue .knock,.scr-queue .foot{animation-duration:.01ms;animation-delay:0s}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESCRITORIO · a partir de 900 px
   ───────────────────────────────────────────────────────────────────────────
   Aquí ya NO se parte la pantalla en dos. Se partía porque la foto vieja era un
   vertical pequeño (760x948) que, estirado a 1920, se ponía blanda; media
   pantalla la salvaba. La de ahora es apaisada y nació para esto: 1536x1024
   contra un 1920x1080 es un estirón de 1,25x y aguanta nítida a sangre.

   Y a sangre es como tiene que ir, porque la foto ES la puerta: el neón entero,
   el cartel de «there is no list, only questions» a la izquierda y los dos
   porteros en el centro mirándote. Recortarla a media pantalla se comía la
   mitad de eso. Lo único que cambia aquí es el tamaño de la letra y cuánto
   sube el negro de abajo: en 1080 px de alto, el texto necesita menos rampa.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){

  /* Anclada MUY arriba, y no al centro. En apaisado el recorte se come alto, y
     lo primero que hay arriba es el neón de UTOPIA, que empieza a dos dedos del
     borde de la foto: con el encuadre centrado, en un 16:9 se le cortaban las
     letras por la coronilla. Lo que se pierde por abajo es grava. */
  .doorman img{object-position:50% 2%}

  .stage{
    padding-inline:clamp(40px,6vw,120px);
    padding-bottom:clamp(40px,6vh,84px);
  }
  .scr{max-width:760px}

  /* La letra, al tamaño de la pantalla. */
  .big{font-size:clamp(64px,7vw,128px)}
  .lead{font-size:clamp(17px,1.35vw,21px);max-width:50ch}
  .q{font-size:clamp(26px,2.2vw,38px);max-width:30ch;margin-bottom:30px}
  .opts{gap:12px;max-width:720px;margin-inline:auto}
  .opts button{font-size:clamp(16px,1.15vw,19px);padding:20px 26px}
  .stareline{font-size:clamp(21px,1.7vw,28px)}
  .beatline{font-size:clamp(52px,5vw,86px)}
  .waitline{font-size:clamp(24px,2vw,34px);max-width:22ch}
  .knock{padding:23px 54px;font-size:14px}
  .kick{font-size:12px}

  /* Los palos de la cola, a escala: son la única cifra de la pantalla. */
  .queue{gap:12px;margin-top:40px}
  .queue i{width:4px;height:46px}
  .queuen{font-size:12px}

  /* Los finales ya no salen a sangre: aquí el negro de abajo llega solo. Pero
     `margin-inline` tiene que seguir siendo `auto`: es lo que centra la columna
     dentro del escenario. Puesto a 0 —que es lo que parecía «quitar la sangre»—
     lo que se quita en realidad es el centrado, y «COME IN.» se iba a la
     esquina de la izquierda con media pantalla vacía al lado. */
  .scr-out,.scr-in{margin-inline:auto;padding:26px 0 0;background:none}
  .misslist li{font-size:17px}
  .btn{font-size:14px;padding:22px}

  .lang{top:20px;right:22px}
  .snd{top:20px;right:75px;padding:8px 12px}
  .snd svg{width:16px;height:16px}
}

/* Pantallas anchas y bajas —un portátil de 1280x720, un monitor 21:9—: con
   menos alto, el recorte sube y el texto tiene que caber igual. */
@media (min-width:900px) and (max-height:800px){
  .doorman img{object-position:50% 0%}
  .big{font-size:clamp(52px,4.6vw,86px)}
  .q{font-size:clamp(23px,1.8vw,31px);margin-bottom:22px}
  .opts button{padding:15px 22px;font-size:16px}
  .opts{gap:9px}
  .lead{font-size:17px}
  .queue{margin-top:26px}
  .queue i{height:36px}
  .knock{padding:19px 46px;margin-top:26px}
  .stage{padding-bottom:clamp(26px,4vh,48px)}
}