/* Ya cayó. Base visual: Inter, acromático, terracota como único acento.
   El ámbar es del mundo del juego (los relés), no de la marca. Sin esquinas redondeadas. */
:root {
  --negro: #0e0e0e;
  --carbon: #1f1f1c;
  --hueso: #f5f1e8;
  --blanco: #ffffff;
  --gris: rgba(245, 241, 232, 0.55);
  --terracota: #8a4b3a;
  --terracota-viva: #c0704f;
  --ambar: #e8a33a;
  --rojo-dano: #a3261c;
  --sans: 'Barlow', 'Inter', system-ui, sans-serif;   /* 13-nov: Barlow en todo el juego */
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --militar: 'Big Shoulders Stencil Display', 'Barlow Condensed', sans-serif;   /* letra de estarcido, como en las cajas de munición */
  --condensada: 'Barlow Condensed', 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
}

.pantalla { position: fixed; inset: 0; }
.oculto, .oculta { display: none !important; }

/* Accion: texto con flecha y filete fino, nunca botón */
.accion {
  display: inline-block;
  margin-top: 28px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.accion::after { content: '  \2192'; }

/* ---------- Aviso ---------- */
.aviso { display: grid; place-items: center; background: var(--negro); padding: 24px 16px; cursor: pointer; }
.aviso-caja { max-width: 640px; width: 100%; }
.aviso-titulo { font-weight: 600; font-size: clamp(64px, 16vw, 168px); letter-spacing: -0.05em; line-height: 0.9; color: var(--blanco); }
.aviso-sub { margin-top: 18px; font-size: clamp(17px, 2.4vw, 22px); color: var(--gris); max-width: 30ch; }
.aviso-lista { list-style: none; margin-top: 36px; border-top: 1px solid rgba(245,241,232,0.18); }
.aviso-lista li { padding: 11px 0; border-bottom: 1px solid rgba(245,241,232,0.12); font-size: 15px; }
.aviso-lista li:first-child { color: var(--terracota-viva); }
.aviso-nota { margin-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--gris); }

/* ---------- Escenas ---------- */
.escena { background-size: cover; background-position: center; opacity: 0; transition: opacity .45s ease; cursor: pointer; overflow: hidden; }
.escena.entra { opacity: 1; }
.escena.sale { opacity: 0; }
.escena::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.88) 100%); }
.escena::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Fondos de cada lugar mientras no haya imagen */
.fondo-sala { background:
  radial-gradient(ellipse 30% 22% at 30% 38%, rgba(120,170,255,.55), transparent 70%),
  radial-gradient(ellipse 24% 18% at 62% 34%, rgba(150,190,255,.45), transparent 70%),
  radial-gradient(ellipse 18% 14% at 82% 40%, rgba(255,255,255,.25), transparent 70%),
  repeating-linear-gradient(90deg, #2a1d17 0 26px, #33241c 26px 52px),
  #1b130f; }
.fondo-pasillo { background:
  radial-gradient(ellipse 14% 40% at 50% 30%, rgba(255,214,150,.35), transparent 70%),
  linear-gradient(90deg, #0b0a09 0%, #2a2219 35%, #3a2e22 50%, #2a2219 65%, #0b0a09 100%); }
.fondo-mesa { background:
  radial-gradient(ellipse 40% 30% at 50% 62%, rgba(255,226,170,.35), transparent 70%),
  linear-gradient(180deg, #0d0d0f 0%, #1a1712 55%, #3a2c1c 100%); }
.fondo-tiuna { background:
  radial-gradient(ellipse 34% 26% at 40% 42%, rgba(90,140,255,.45), transparent 70%),
  linear-gradient(180deg, #0a0c12 0%, #141826 60%, #1c1c22 100%); }

.sello {
  position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--blanco); padding: 5px 8px; border: 1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.35);
}
/* Lienzo 16:9 que cubre la pantalla; todo lo de dentro se mueve con él */
.escena-lienzo {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.78vh); height: max(56.25vw, 100vh);
  transform: translate(-50%, -50%) scale(1);
  animation: empuje 26s cubic-bezier(.25,.1,.25,1) forwards;
}
@keyframes empuje {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-51.2%, -50.6%) scale(1.09); }
}
.escena-fondo { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* planos que cortan según quién habla: cada uno cubre la pantalla, encuadrado en su foco */
.planos { position: absolute; inset: 0; overflow: hidden; background: #050505; }
.plano {
  position: absolute; inset: 0; background-size: cover; background-position: var(--fx) var(--fy);
  transform-origin: var(--fx) var(--fy); opacity: 0; transition: opacity .12s linear, filter .18s steps(3, end);
  animation: acerca 14s cubic-bezier(.25,.1,.25,1) forwards;
}
.plano.visible { opacity: 1; }
@keyframes acerca { from { transform: scale(1.01); } to { transform: scale(1.07); } }
/* se va la luz: casi negro, frío, con un parpadeo antes de apagarse del todo */
.planos.apagon .plano { filter: brightness(.1) saturate(.3); animation: acerca 14s cubic-bezier(.25,.1,.25,1) forwards, apagon .9s steps(1, end) both; }
@keyframes apagon { 0% { filter: none; } 20% { filter: brightness(.15) saturate(.3); } 35% { filter: brightness(.8); } 50% { filter: brightness(.1) saturate(.3); } 100% { filter: brightness(.1) saturate(.3); } }
.credito { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,.55); }
/* figuras recortadas: se colocan por su pie (x, y) y su alto; derivan más cuanto más cerca están */
.figura {
  position: absolute; left: var(--x); top: var(--y); height: var(--alto);
  transform: translate(-50%, -100%);
  animation: deriva 26s cubic-bezier(.25,.1,.25,1) forwards;
}
.figura-img {
  display: block; height: 100%; width: auto; transform-origin: 50% 100%;
  animation: respira 5.5s ease-in-out var(--retraso) infinite alternate;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.45));
}
@keyframes deriva {
  from { transform: translate(-50%, -100%); }
  to   { transform: translate(calc(-50% - var(--prof) * 2.4%), -100%) scale(calc(1 + var(--prof) * .05)); }
}
@keyframes respira {
  from { transform: translateY(0) rotate(-.5deg); }
  to   { transform: translateY(-.8%) rotate(.6deg); }
}
/* luz de lámpara que parpadea de forma irregular */
.escena-luz {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--lx) var(--ly), rgba(255,190,120,.30), rgba(255,170,90,0) 38%);
  animation: parpadeo 7s steps(1, end) infinite;
}
@keyframes parpadeo {
  0%, 100% { opacity: .9; } 8% { opacity: .55; } 9% { opacity: .95; } 37% { opacity: .8; }
  38% { opacity: .35; } 39% { opacity: .9; } 70% { opacity: 1; } 71% { opacity: .6; } 72% { opacity: .95; }
}
/* tarjeta de llamada: texto solo, filete fino, sin esquinas redondas */
.llamada {
  position: absolute; z-index: 3; left: 16px; top: 168px;
  display: flex; flex-direction: column; gap: 3px; padding: 10px 14px;
  border-left: 2px solid var(--terracota-viva); background: rgba(10,10,10,.62);
  backdrop-filter: blur(4px); animation: aparece .6s ease-out .4s both;
}
.llamada-et { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-viva); }
.llamada-quien { font-size: 15px; color: var(--blanco); }
.llamada-crono { font-family: var(--mono); font-size: 13px; color: var(--gris); }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .escena-lienzo, .figura, .figura-img, .escena-luz, .plano { animation: none; }
}
@media (max-width: 700px) { .llamada { top: auto; bottom: 200px; } }
/* en el móvil el rótulo y el feed ocupan arriba: la foto empieza debajo, fundida, para no tapar caras */
@media (max-width: 700px) {
  .planos { top: 24vh; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
}

/* el sello lo pone siempre el juego, encima de todo: así no lo saca de cuadro el acercamiento */
.sello { z-index: 4; }
.rotulo { position: absolute; top: max(56px, calc(env(safe-area-inset-top) + 40px)); left: 16px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.rotulo-lugar { font-weight: 600; font-size: clamp(22px, 3.4vw, 40px); letter-spacing: -0.04em; color: var(--blanco); }
.rotulo-hora { font-family: var(--mono); font-size: 12px; color: var(--gris); }

.dialogo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 16px max(28px, env(safe-area-inset-bottom)); max-width: 900px; margin: 0 auto; }
.dialogo-quien { font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--terracota-viva); min-height: 18px; margin-bottom: 8px; }
.dialogo-texto { font-size: clamp(20px, 2.6vw, 30px); line-height: 1.32; letter-spacing: -0.015em; color: var(--blanco); min-height: 3.2em; }
.dialogo.narra .dialogo-texto { color: var(--gris); }
.dialogo-seguir { margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--gris); opacity: 0; transition: opacity .2s; }
.dialogo-seguir.listo { opacity: 1; }
.dialogo-seguir::after { content: ' \2192'; }

/* ---------- Feed ---------- */
.feed {
  position: fixed; z-index: 30; top: 16px; right: 16px; width: 300px;
  pointer-events: none; font-size: 13px;
}
.feed-cab { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); padding-bottom: 6px; border-bottom: 1px solid rgba(245,241,232,.2); }
.post {
  background: rgba(14,14,14,.82); backdrop-filter: blur(6px);
  border-left: 2px solid var(--terracota);
  padding: 10px 12px; margin-top: 8px;
  transform: translateX(24px); opacity: 0; transition: transform .35s ease, opacity .35s ease;
}
.post.entra { transform: none; opacity: 1; }
.post-cab { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.post-cuenta { font-weight: 600; color: var(--blanco); }
.post-hora { font-family: var(--mono); font-size: 10px; color: var(--gris); }
.post-texto { line-height: 1.4; color: var(--hueso); }
.post.borrado .post-texto { color: var(--gris); font-style: normal; }
.post.borrado { border-left-color: #444; }

/* ---------- Nivel ---------- */
.nivel { background: #000; }
.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--sans); color: var(--hueso); }
.hud-et { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.hud-obj { position: absolute; top: 16px; left: 16px; max-width: 46vw; }
.hud-obj-t { display: block; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; margin-top: 3px; text-transform: uppercase; }
.hud-reles { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-family: var(--mono); font-size: 11px; }
.hud-reles i { width: 10px; height: 10px; border: 1px solid var(--ambar); }
.hud-reles i.hecho { background: var(--ambar); }
.hud-reles b { font-weight: 400; margin-left: 6px; color: var(--gris); }

.hud-brujula { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 360px; max-width: 46vw; height: 34px; overflow: hidden; border-bottom: 1px solid rgba(245,241,232,.25); -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.hud-brujula::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 10px; background: var(--hueso); }
.hud-brujula-cinta { position: absolute; left: 50%; top: 2px; }
.hud-brujula-cinta span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: var(--hueso); }
.marca-rele { position: absolute; bottom: 2px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; color: var(--ambar); white-space: nowrap; }

.hud-vida { position: absolute; left: 16px; bottom: 16px; width: 180px; }
.hud-vida b { font-weight: 600; font-size: 26px; letter-spacing: -0.03em; }
.hud-barra { height: 3px; background: rgba(245,241,232,.15); margin-top: 4px; }
.hud-barra i { display: block; height: 100%; background: var(--hueso); transition: width .2s; }

.hud-municion { position: absolute; right: 16px; bottom: 14px; text-align: right; }
.hud-municion b { font-weight: 600; font-size: 52px; letter-spacing: -0.05em; line-height: 1; }
.hud-municion span { font-family: var(--mono); font-size: 13px; color: var(--gris); margin-left: 4px; }
.hud-municion em { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); min-height: 14px; }
.hud-municion.baja b { color: var(--ambar); }

.hud-mira { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); }
.hud-mira::before, .hud-mira::after { content: ''; position: absolute; background: rgba(255,255,255,.85); }
.hud-mira::before { left: 50%; top: 0; width: 1px; height: 100%; }
.hud-mira::after { top: 50%; left: 0; height: 1px; width: 100%; }
.hud-acierto { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; }
.hud-acierto::before, .hud-acierto::after { content: ''; position: absolute; background: #fff; }
.hud-acierto::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); -webkit-mask: linear-gradient(#000 30%, transparent 30% 70%, #000 70%); mask: linear-gradient(#000 30%, transparent 30% 70%, #000 70%); }
.hud-acierto::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); -webkit-mask: linear-gradient(90deg, #000 30%, transparent 30% 70%, #000 70%); mask: linear-gradient(90deg, #000 30%, transparent 30% 70%, #000 70%); }
.hud-acierto.si { animation: acierto .22s ease-out; }
@keyframes acierto { from { opacity: 1; } to { opacity: 0; } }

.hud-radio { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); text-align: center; font-size: 15px; line-height: 1.4; color: var(--blanco); text-shadow: 0 1px 8px #000; opacity: 0; transition: opacity .3s; }
.hud-radio.visible { opacity: 1; }
.hud-accion { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .2s; font-family: var(--mono); font-size: 13px; color: var(--ambar); text-transform: uppercase; letter-spacing: .08em; }
.hud-accion.visible { opacity: 1; }
.hud-progreso { width: 200px; height: 3px; background: rgba(232,163,58,.25); margin: 8px auto 0; }
.hud-progreso i { display: block; height: 100%; width: 0; background: var(--ambar); }
.hud-dano { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(163,38,28,.75) 100%); }
.hud-aviso { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 600; font-size: clamp(30px, 6vw, 72px); letter-spacing: -0.05em; text-transform: lowercase; color: var(--blanco); text-shadow: 0 2px 30px rgba(0,0,0,.8); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.hud-aviso.visible { opacity: 1; }

.pausa { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px; background: rgba(5,6,10,.72); cursor: pointer; z-index: 5; }
.pausa-t { font-weight: 600; font-size: clamp(40px, 8vw, 96px); letter-spacing: -0.05em; line-height: .95; color: var(--blanco); text-transform: lowercase; }
.pausa-s { margin-top: 12px; font-size: 17px; color: var(--hueso); }
.pausa-c { margin-top: 24px; font-family: var(--mono); font-size: 11px; color: var(--gris); max-width: 60ch; line-height: 1.6; }

/* N1 · Vuelo: calor del arma, cuenta atrás a la costa y aviso de reflector */
.hud-calor { width: 180px; }
.hud-calor .hud-barra { margin-top: 6px; }
.hud-calor .hud-barra i { width: 0; transition: width .08s linear; }
.hud-calor.baja .hud-barra i { background: var(--ambar); }
.hud-costa { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--gris); }
.hud-costa b { font-weight: 500; color: var(--blanco); }
.hud-visto { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; background: radial-gradient(ellipse at center, rgba(220,232,255,.18) 0%, rgba(220,232,255,0) 60%); }
.hud-visto.visible { opacity: 1; }

/* N3 · visor nocturno: el lienzo en verde de fósforo, viñeta y líneas */
.gl.nocturno { filter: grayscale(1) sepia(1) hue-rotate(58deg) saturate(2.4) brightness(1.15) contrast(1.15); }
.visor { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.9) 100%), repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); }

/* Mandos tactiles */
.mandos { position: absolute; inset: 0; z-index: 4; touch-action: none; }
.palanca { position: absolute; left: 30px; bottom: 120px; width: 100px; height: 100px; border: 1px solid rgba(245,241,232,.3); opacity: .5; }
.palanca.activa { opacity: 1; }
.palanca i { position: absolute; left: 35px; top: 35px; width: 30px; height: 30px; background: rgba(245,241,232,.6); }
.m-btn { position: absolute; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blanco); border: 1px solid rgba(245,241,232,.5); background: rgba(0,0,0,.25); }
.m-fuego { right: 20px; bottom: 120px; width: 92px; height: 92px; }
.m-e { right: 124px; bottom: 150px; width: 56px; height: 56px; color: var(--ambar); border-color: var(--ambar); }
.m-r { right: 124px; bottom: 82px; width: 56px; height: 56px; }

/* ---------- Verificación ---------- */
.verificacion { background: var(--hueso); color: var(--carbon); overflow-y: auto; touch-action: pan-y; user-select: text; }
.verif-caja { max-width: 860px; margin: 0 auto; padding: 56px 16px 72px; }
.verif-ant { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,31,28,.5); }
.verif-t { margin-top: 10px; font-weight: 600; font-size: clamp(36px, 6vw, 68px); letter-spacing: -0.05em; line-height: .98; color: var(--negro); }
.verif-sub { margin-top: 14px; font-size: 18px; color: rgba(31,31,28,.55); }
.verif-resumen { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 36px; border-top: 1px solid var(--carbon); }
.verif-cifra { padding: 14px 0; }
.verif-cifra b { display: block; font-weight: 600; font-size: 40px; letter-spacing: -0.04em; }
.verif-cifra span { font-size: 12px; color: rgba(31,31,28,.6); }
.verif-lista { list-style: none; margin-top: 24px; border-top: 1px solid rgba(31,31,28,.2); }
.verif-item { padding: 18px 0; border-bottom: 1px solid rgba(31,31,28,.14); }
.verif-cab { display: flex; gap: 14px; align-items: baseline; }
.verif-cat { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; min-width: 92px; }
.cat-hecho .verif-cat { color: var(--carbon); }
.cat-bulo .verif-cat { color: var(--terracota); }
.cat-meme .verif-cat, .cat-sátira .verif-cat { color: rgba(31,31,28,.5); }
.cat-no-probado .verif-cat { color: #8a6a2a; }
.verif-cuenta { font-size: 13px; color: rgba(31,31,28,.55); }
.verif-texto { margin-top: 6px; font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
.cat-bulo .verif-texto { text-decoration: line-through; text-decoration-color: var(--terracota); text-decoration-thickness: 1px; }
.verif-fuente { margin-top: 6px; font-size: 13px; color: rgba(31,31,28,.6); }
.verif-pie { margin-top: 28px; font-family: var(--mono); font-size: 12px; color: rgba(31,31,28,.55); }
.verif-sigue { margin-top: 8px; font-size: 15px; }

/* ---------- Móvil ---------- */
@media (max-width: 700px) {
  .feed { top: 128px; left: 16px; right: 16px; width: auto; }
  .feed .post:nth-child(n+2) { display: none; }
  .hud-brujula { top: 64px; width: 240px; max-width: 70vw; }
  .hud-obj { max-width: 70vw; }
  .hud-obj-t { font-size: 13px; }
  .hud-vida { width: 120px; bottom: 16px; }
  .hud-municion b { font-size: 38px; }
  .hud-municion { bottom: 236px; }
  .hud-calor { width: 120px; }
  .hud-radio { bottom: 310px; font-size: 13px; }
  .verif-resumen { grid-template-columns: repeat(3, 1fr); }
  .rotulo { top: 50px; }
  .dialogo-texto { min-height: 4.2em; }
}

/* galería de personajes (?ver=personajes) */
.galeria { position: fixed; inset: 0; background: #15171a; }
.galeria .gl { width: 100%; height: 100%; display: block; }
.galeria-pie { position: absolute; left: 16px; right: 16px; bottom: 18px; color: #d8d4cc; font: 500 14px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0.01em; }

/* ventana «en directo» de los niveles (pip.js) */
.pip { position: absolute; left: 16px; top: 96px; width: min(340px, 44vw); background: #0d0e10; border: 1px solid rgba(255,255,255,.28);
  opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .35s; pointer-events: none; z-index: 6; }
.pip.abierta { opacity: 1; transform: none; }
.pip-rotulo { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #f1eee8; background: rgba(0,0,0,.55); }
.pip-punto { width: 7px; height: 7px; background: #d0352b; animation: pip-latido 1.2s infinite; }
@keyframes pip-latido { 50% { opacity: .25; } }
.pip-lienzo { display: block; width: 100%; aspect-ratio: 16 / 10; }
.pip-pie { padding: 8px 10px 10px; font: 400 13px/1.4 Inter, system-ui, sans-serif; color: #e9e5dd; background: rgba(0,0,0,.6); }
.pip-pie b { font-weight: 600; }
.pip-sello { position: absolute; right: 8px; top: 34px; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: rgba(255,255,255,.8); }
@media (max-width: 600px) { .pip { top: 84px; width: 56vw; } .pip-pie { font-size: 12px; } }

/* retablo 3D en las escenas (retablo.js): de fondo a pantalla completa, o dentro de la tarjeta de llamada */
.escena-retablo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.llamada-retablo { display: block; width: 240px; aspect-ratio: 4 / 3; margin-bottom: 6px; }
@media (max-width: 700px) { .llamada-retablo { width: 160px; } }

/* ---------- HUD de shooter de consola (hud_cod.js) ---------- */
.hud.con-cod .hud-obj { top: 182px; }
.hud.con-cod .hud-accion { display: none; }
.cod { position: absolute; inset: 0; pointer-events: none; font-family: var(--sans); color: var(--hueso); }
.cod-mapa { position: absolute; left: 16px; top: 16px; width: 156px; height: 156px; }
.cod-arma { position: absolute; right: 18px; bottom: 16px; text-align: right; min-width: 210px; }
.cod-arma-n { display: flex; justify-content: flex-end; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.cod-arma-nombre { color: var(--blanco); }
.cod-arma-modo { color: var(--ambar); }
.cod-arma-m { margin-top: 2px; line-height: 1; }
.cod-arma-m b { font-weight: 600; font-size: 54px; letter-spacing: -0.05em; color: var(--blanco); }
.cod-arma-m span { font-family: var(--mono); font-size: 15px; color: var(--gris); margin-left: 6px; }
.cod-arma-m span::before { content: '/ '; }
.cod-balas { display: flex; justify-content: flex-end; gap: 2px; margin-top: 6px; }
.cod-balas i { width: 4px; height: 12px; background: var(--hueso); opacity: .9; }
.cod-balas i.vacia { opacity: .16; }
.cod-arma-aviso { margin-top: 6px; min-height: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }
.cod-arma.baja .cod-arma-m b { color: var(--ambar); }

.cod-marca { position: absolute; left: 0; top: 0; will-change: transform; }
.cod-marca.objetivo { display: flex; flex-direction: column; align-items: center; margin-left: -14px; margin-top: -14px; width: 28px; }
.cod-marca.objetivo i { width: 18px; height: 18px; margin-top: 4px; background: var(--ambar); transform: rotate(45deg); box-shadow: 0 0 12px rgba(232,163,58,.55); }
.cod-marca.objetivo b { position: absolute; top: 3px; font-weight: 700; font-size: 12px; color: #0d0e10; }
.cod-marca.objetivo span { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--blanco); white-space: nowrap; text-shadow: 0 1px 2px #000; }
.cod-marca.objetivo.borde i { opacity: .85; }
.cod-marca.aliado b { display: block; transform: translate(-50%, -100%); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8fc1ff; white-space: nowrap; text-shadow: 0 1px 2px #000; }

.cod-dano { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.cod-dano-arco { position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-top: 6px solid rgba(214,52,40,.85); border-radius: 50%; animation: cod-dano 1.1s ease-out forwards; }
@keyframes cod-dano { from { opacity: 1; } to { opacity: 0; } }

.cod-bajas { position: absolute; right: 18px; top: 44%; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.cod-baja { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--blanco); padding: 3px 0 3px 10px; border-left: 2px solid var(--ambar); background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0)); transition: opacity .5s; }
.cod-baja.sale { opacity: 0; }

.cod-tecla { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); display: none; align-items: center; gap: 10px; font-size: 14px; color: var(--blanco); text-shadow: 0 1px 2px #000; }
.cod-tecla.visible { display: flex; }
.cod-tecla kbd { font-family: var(--mono); font-size: 13px; font-weight: 600; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--blanco); background: rgba(0,0,0,.4); }
.cod-tecla-barra { width: 90px; height: 3px; background: rgba(255,255,255,.2); }
.cod-tecla-barra i { display: block; height: 100%; width: 0; background: var(--ambar); }

/* menú de pausa */
.pausa.cod-pausa { flex-direction: row; align-items: center; gap: 56px; padding: 24px 6vw; cursor: default; background: linear-gradient(90deg, rgba(5,6,10,.92) 0%, rgba(5,6,10,.7) 55%, rgba(5,6,10,.45) 100%); }
.cod-pausa-col { max-width: 520px; }
.cod-pausa-et { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar); margin-bottom: 10px; }
.cod-menu { display: flex; flex-direction: column; margin-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.cod-menu-i { display: block; padding: 14px 0 14px 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--hueso); border-bottom: 1px solid rgba(255,255,255,.14); border-left: 3px solid transparent; cursor: pointer; text-transform: uppercase; }
.cod-menu-i:hover, .cod-menu-i.activo { color: var(--blanco); border-left-color: var(--ambar); background: linear-gradient(90deg, rgba(232,163,58,.14), rgba(232,163,58,0)); }
.cod-panel { width: min(380px, 40vw); padding-left: 24px; border-left: 1px solid rgba(255,255,255,.14); }
.cod-panel-t { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-bottom: 16px; }
.cod-op { display: block; margin-bottom: 20px; font-size: 14px; color: var(--hueso); }
.cod-op output { float: right; font-family: var(--mono); color: var(--blanco); }
.cod-op input[type=range] { display: block; width: 100%; margin-top: 8px; accent-color: #e8a33a; }
.cod-op-c { display: flex; align-items: center; gap: 10px; }
.cod-op-c input { accent-color: #e8a33a; width: 16px; height: 16px; }
.cod-ctl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14px; }
.cod-ctl dt { font-family: var(--mono); color: var(--blanco); }
.cod-ctl dd { margin: 0; color: var(--hueso); }

@media (max-width: 700px) {
  .cod-mapa { width: 92px; height: 92px; }
  .hud.con-cod .hud-obj { top: 16px; left: 120px; max-width: calc(100vw - 136px); }
  .hud.con-cod .hud-obj-t { font-size: 13px; }
  .cod-arma { right: 12px; bottom: 232px; min-width: 0; }   /* por encima de los mandos táctiles */
  .hud.con-cod .hud-brujula { top: 100px; }
  .cod-arma-m b { font-size: 38px; }
  .cod-balas i { width: 3px; height: 9px; }
  .pausa.cod-pausa { flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 16px; overflow-y: auto; }
  .cod-panel { width: 100%; padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; }
  .cod-menu-i { font-size: 17px; }
}

/* ---------- Tarjeta de misión (mision.js): verde fósforo, terminal ---------- */
.mision { position: fixed; inset: 0; z-index: 50; background: #020503; display: flex; align-items: center; padding: 6vw; overflow: hidden; animation: mision-parpadeo 6s steps(1) infinite; transition: opacity .5s; }
.mision.sale { opacity: 0; }
.mision-caja { max-width: 980px; font-family: var(--mono); color: #39ff6a; text-shadow: 0 0 6px rgba(57,255,106,.75), 0 0 22px rgba(57,255,106,.25); }
.mision-l { font-size: clamp(13px, 1.5vw, 17px); letter-spacing: .08em; line-height: 1.75; white-space: pre-wrap; }
.mision-l.dato { color: #2bd157; opacity: .82; }
.mision-l.aviso { color: #d6ff3a; text-shadow: 0 0 6px rgba(214,255,58,.7); }
.mision-l.titulo { font-size: clamp(30px, 6vw, 76px); font-weight: 700; letter-spacing: .02em; line-height: 1.05; margin: 14px 0 18px; text-transform: uppercase; color: #6dff91; }
.mision-cursor { display: inline-block; width: .6em; height: 1em; margin-left: .12em; vertical-align: -0.12em; background: currentColor; box-shadow: 0 0 8px currentColor; animation: mision-cursor .9s steps(1) infinite; }
.mision-barrido { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px); }
.mision-barrido::after { content: ''; position: absolute; left: 0; right: 0; height: 18vh; background: linear-gradient(180deg, transparent, rgba(57,255,106,.06), transparent); animation: mision-barra 5s linear infinite; }
.mision-ruido { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.85) 100%); }
@keyframes mision-cursor { 50% { opacity: 0; } }
@keyframes mision-barra { from { top: -20vh; } to { top: 110vh; } }
@keyframes mision-parpadeo { 0%, 100% { filter: none; } 47% { filter: brightness(1.25) blur(.3px); } 48% { filter: none; transform: translateX(2px); } 49% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mision, .mision-barrido::after, .mision-cursor { animation: none; } }

/* escenas: el rótulo de lugar y hora con el mismo verde fósforo */
.rotulo-hora { font-family: var(--mono); color: #39ff6a; text-shadow: 0 0 6px rgba(57,255,106,.6); letter-spacing: .06em; }

/* N1 · marcadores de blancos, mira con puntero y arma (12-nov) */
.blancos { position: absolute; inset: 0; pointer-events: none; }
.blanco { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.blanco i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 2px solid #ff3a2a; transform: rotate(45deg); box-shadow: 0 0 8px rgba(255,58,42,.6); }
.blanco span { position: absolute; left: 14px; top: -7px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #ff6a5a; white-space: nowrap; text-shadow: 0 1px 4px #000; }
.blanco.fuera i { width: 12px; height: 12px; left: -6px; top: -6px; background: #ff3a2a; }
.blanco.fuego i { animation: fuego .3s steps(2) infinite; }
@keyframes fuego { 50% { border-color: #ffd04a; box-shadow: 0 0 14px rgba(255,208,74,.9); } }
.hud-mira.mira-roja { width: 34px; height: 34px; }
.hud-mira.mira-roja::before, .hud-mira.mira-roja::after { background: rgba(255,255,255,.7); -webkit-mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%); mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%); }
.hud-mira.mira-roja::after { -webkit-mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%); mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%); }
.hud-mira.fijado::before, .hud-mira.fijado::after { background: #ff3a2a; }
.hud-mira.fijado { outline: 1px solid rgba(255,58,42,.8); outline-offset: 6px; }
.hud-arma b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blanco); }
.hud-arma span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--gris); margin-bottom: 4px; }
.hud-calor.lanza .hud-barra, .hud-calor.lanza > .hud-et { display: none; }
.mision-hud { position: fixed; left: 18px; top: auto; bottom: 120px; z-index: 40; pointer-events: none; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #5dff7a; text-shadow: 0 0 8px rgba(93,255,122,.6); transition: opacity .6s; }
.mision-hud .titulo { font-size: 14px; }
.mision-hud.sale { opacity: 0; }

/* Pantalla de título (13-nov): el salón con el televisor, la cadena, los clips y el menú */
.titulo { background: #000; overflow: hidden; transition: opacity .5s; }
.titulo.sale { opacity: 0; }
.titulo-escena { position: absolute; left: 50%; top: 50%; width: max(100vw, 177.78vh); height: max(56.25vw, 100vh); transform: translate(-50%, -50%); }
.titulo-fondo { position: absolute; inset: 0; background: #050608; }
.titulo-tele { position: absolute; overflow: hidden; background: #000; }
.titulo-video, .titulo-nieve, .titulo-cadena, .titulo-lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.titulo-video { object-fit: cover; filter: contrast(1.15) saturate(.85) blur(.4px); }
.titulo-nieve { image-rendering: pixelated; mix-blend-mode: screen; }
.titulo-lineas { background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 8vw rgba(0,0,0,.85); animation: parpadeo .12s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: .9; } }
.titulo-cadena { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .4em; background: linear-gradient(180deg, #f4c300 0 33.3%, #0a3a8c 33.3% 66.6%, #c8102e 66.6%); opacity: 0; font-family: var(--sans); text-transform: uppercase; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.titulo-cadena span { font-weight: 700; font-size: 2.1vw; letter-spacing: -.02em; }
.titulo-cadena b { font-weight: 500; font-size: .9vw; letter-spacing: .12em; }
.titulo-cadena.visible { opacity: 1; }
.titulo-rotulo { position: absolute; left: 4%; bottom: 5%; font-family: var(--mono); font-size: .75vw; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px #000; }
.titulo-marco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.titulo-sub { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); text-align: center; font-size: clamp(14px, 1.4vw, 20px); line-height: 1.4; color: #fff; text-shadow: 0 2px 10px #000; }
.titulo-pulsa { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); text-align: center; transition: opacity .4s; width: min(640px, calc(100vw - 32px)); }
.titulo-pulsa.fuera { opacity: 0; pointer-events: none; }
.titulo-pulsa-t { font-family: var(--mono); font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: #fff; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }
.titulo-aviso { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--gris); }
.titulo-marca { position: absolute; right: 5vw; top: 12vh; font-weight: 700; font-size: clamp(56px, 11vw, 170px); letter-spacing: -.06em; line-height: .85; color: #fff; text-transform: lowercase; text-shadow: 0 6px 40px rgba(0,0,0,.9); opacity: 0; transform: scale(1.25); transition: opacity .25s, transform .5s cubic-bezier(.2,.8,.2,1); }
.titulo-marca.visible { opacity: 1; transform: none; }
.titulo-menu { position: absolute; right: 5vw; top: calc(12vh + clamp(56px, 11vw, 170px) + 28px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; opacity: 0; transition: opacity .4s; background: linear-gradient(90deg, transparent, rgba(0,0,0,.55) 30%); padding: 14px 0 14px 60px; }
.titulo-menu.visible { opacity: 1; }
.titulo-op { appearance: none; background: none; border: 0; border-radius: 0; cursor: pointer; text-align: right; color: var(--gris); font-family: var(--sans); padding: 4px 0; border-bottom: 1px solid transparent; }
.titulo-op span { display: block; font-weight: 600; font-size: clamp(20px, 2.2vw, 32px); letter-spacing: -.03em; text-transform: lowercase; }
.titulo-op em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,241,232,.4); }
.titulo-op:hover, .titulo-op:focus-visible { color: #fff; border-bottom-color: #fff; outline: none; }
.titulo-creditos { max-width: 420px; text-align: right; font-size: 13px; line-height: 1.55; color: var(--hueso); margin-bottom: 10px; }
@media (max-width: 760px) {
  .titulo-marca { right: 16px; top: 6vh; }
  .titulo-menu { right: 16px; top: auto; bottom: 6vh; padding-left: 30px; }
  .titulo-rotulo { font-size: 9px; }
  .titulo-cadena span { font-size: 16px; } .titulo-cadena b { font-size: 8px; }
}
@media (orientation: portrait) {
  /* en vertical, el televisor al centro de la pantalla (su centro está al 27,7 % del ancho de la imagen) */
  .titulo-escena { left: calc(50vw - 49.25vh); transform: translateY(-50%); width: 177.78vh; height: 100vh; }
}

/* tipografía militar en la pantalla de título (13-nov) */
.titulo-marca { font-family: var(--militar); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .82; }
.titulo-op span { font-family: var(--condensada); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.titulo-pulsa-t { font-family: var(--condensada); font-weight: 600; font-size: 18px; letter-spacing: .3em; }
.titulo-sub { font-family: var(--condensada); font-weight: 500; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: .01em; }
.titulo-cadena span { font-family: var(--condensada); font-weight: 700; letter-spacing: .02em; }

/* Feed como X, con vidrio líquido (13-nov) */
.feed .feed-cab { font-family: var(--condensada); font-weight: 600; font-size: 13px; letter-spacing: .06em; color: #e7e9ea; border: 0; padding: 0 2px 8px; }
.feed .post { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(255,255,255,.16); border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, rgba(0,0,0,.25)); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.35); font-family: 'Barlow', var(--sans); }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 17px; color: #fff; text-transform: uppercase; }
.post-cuerpo { min-width: 0; }
.feed .post-cab { display: flex; align-items: center; gap: 4px; justify-content: flex-start; margin: 0 0 2px; white-space: nowrap; overflow: hidden; }
.post-nombre { font-weight: 600; font-size: 15px; color: #e7e9ea; overflow: hidden; text-overflow: ellipsis; }
.post-verif { color: #1d9bf0; font-size: 16px; }
.feed .post-cuenta { font-weight: 500; font-size: 14px; color: #8b98a5; overflow: hidden; text-overflow: ellipsis; }
.feed .post-texto { font-size: 15px; line-height: 1.35; color: #e7e9ea; }
.post-acciones { display: flex; justify-content: space-between; margin-top: 8px; color: #8b98a5; font-size: 13px; max-width: 300px; }
.post-acc { display: inline-flex; align-items: center; gap: 4px; }
.post-acc i { font-size: 17px; }
.post-acc b { font-weight: 500; }
.feed .post.borrado .post-texto { color: #8b98a5; }

/* Escenas con la tipografía nueva y el diálogo grande (13-nov) */
.rotulo-lugar { font-family: var(--militar); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(28px, 4.2vw, 56px); line-height: .9; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.rotulo-hora { font-family: var(--mono); color: #5dff7a; text-shadow: 0 0 8px rgba(93,255,122,.5); }
.escena .dialogo { max-width: none; padding: 60px max(5vw, 16px) max(36px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.7) 60%, transparent); }
.escena .dialogo-quien { font-family: var(--condensada); font-weight: 700; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: .08em; color: #fff; margin-bottom: 10px; padding-left: 14px; border-left: 4px solid var(--ambar); }
.escena .dialogo-texto { font-family: 'Barlow', var(--sans); font-weight: 500; font-size: clamp(24px, 3vw, 42px); line-height: 1.22; letter-spacing: -0.005em; max-width: 1150px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.escena .dialogo.narra .dialogo-texto { font-style: normal; color: #cfd3d6; }
.escena .dialogo-seguir { font-family: var(--condensada); letter-spacing: .2em; }

.dialogo-voz { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 8px; opacity: 0; }
.dialogo-voz.visible { opacity: 1; }
.feed { width: 340px; }
@media (max-width: 760px) { .feed { top: auto; bottom: 230px; } }
.titulo-saltar { position: absolute; right: 18px; bottom: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); opacity: 0; transition: opacity .4s; }
.titulo-saltar.visible { opacity: 1; }

/* ============ Sistema visual de todo el juego (13-nov) ============
   Títulos: estarcido militar (--militar), en mayúsculas. Etiquetas, cifras y menús: Barlow Condensed (--condensada).
   Texto: Barlow. Datos de terminal: JetBrains Mono en verde. Acento: ámbar. Fondos oscuros con vidrio. */
:root { --verde: #39ff6a; --vidrio: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 45%, rgba(0,0,0,.3)); }
.accion { font-family: var(--condensada); font-weight: 600; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }

/* HUD de los tres niveles */
.hud-obj-t { font-family: var(--condensada); font-weight: 700; font-size: 18px; letter-spacing: .04em; }
.hud-et { color: rgba(245,241,232,.6); }
.hud-vida b { font-family: var(--condensada); font-weight: 700; font-size: 34px; letter-spacing: 0; }
.hud-municion b, .cod-arma-m b { font-family: var(--condensada); font-weight: 700; font-size: 60px; letter-spacing: 0; }
.cod-arma-n, .hud-arma b { font-family: var(--condensada); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.hud-aviso { font-family: var(--militar); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(34px, 6.4vw, 84px); }
.hud-radio { font-family: var(--condensada); font-weight: 500; font-size: 19px; letter-spacing: .01em; }
.hud-accion span { font-family: var(--condensada); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cod-marca.objetivo span, .cod-bajas { font-family: var(--condensada); letter-spacing: .06em; }
.hud-barra i, .hud-calor .hud-barra i { background: var(--blanco); }
.hud-calor.baja .hud-barra i, .hud-vida.baja .hud-barra i { background: var(--ambar); }
.hud-costa { font-family: var(--condensada); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.hud-costa b { color: var(--verde); font-family: var(--mono); }

/* Pantalla de pausa y de entrada de cada nivel */
.pausa { background: radial-gradient(ellipse at 30% 50%, rgba(5,6,10,.55), rgba(5,6,10,.9)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 6vh 6vw; }
.pausa-t { font-family: var(--militar); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(44px, 8vw, 110px); line-height: .88; }
.pausa-s { font-family: var(--sans); font-weight: 500; font-size: 19px; max-width: 52ch; color: #e7e9ea; }
.pausa-c { font-family: var(--condensada); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,241,232,.55); }
.cod-panel-t, .cod-menu-i, .cod-op { font-family: var(--condensada); letter-spacing: .06em; text-transform: uppercase; }
.cod-menu-i { font-weight: 600; font-size: 22px; }

/* Ventanas «en directo» y llamada: vidrio, como el feed */
.pip, .llamada { border: 1px solid rgba(255,255,255,.16); background: var(--vidrio); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.4); }
.pip-rotulo, .llamada-et { font-family: var(--condensada); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.llamada-quien { font-family: var(--condensada); font-weight: 600; font-size: 16px; }
.sello { font-family: var(--condensada); font-weight: 600; letter-spacing: .16em; }

/* Pantalla final: lo que se vio en redes, verificado, en oscuro y con las publicaciones como en X */
.verificacion { background: #07090c url(../assets/escenas/comic/fin_general.jpg) center / cover no-repeat; color: #e7e9ea; }
.verificacion::before { content: ''; position: fixed; inset: 0; background: rgba(5,7,10,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.verif-caja { position: relative; }
.verif-ant { color: var(--verde); }
.verif-t { font-family: var(--militar); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: .9; color: #fff; }
.verif-sub { color: rgba(231,233,234,.7); }
.verif-resumen { border-color: rgba(255,255,255,.14); }
.verif-cifra b { font-family: var(--condensada); font-weight: 700; color: #fff; }
.verif-cifra span { font-family: var(--condensada); letter-spacing: .08em; text-transform: uppercase; color: rgba(231,233,234,.6); }
.verif-lista { border-top: 0; display: grid; gap: 10px; }
.verif-item { padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: var(--vidrio); }
.verif-cuenta, .verif-fuente { color: #8b98a5; }
.verif-texto { color: #e7e9ea; }
.verif-pie { color: var(--verde); }
.verif-sigue { font-family: var(--condensada); letter-spacing: .1em; text-transform: uppercase; color: rgba(231,233,234,.6); }
.verificacion .accion { color: #fff; }
.cat-hecho .verif-cat { color: var(--verde); }
.cat-bulo .verif-cat { color: #ff5a4a; }
.cat-bulo .verif-texto { text-decoration-color: #ff5a4a; }
.cat-meme .verif-cat, .cat-sátira .verif-cat { color: rgba(231,233,234,.55); }
.cat-no-probado .verif-cat { color: var(--ambar); }

/* Mira holográfica (fusil.js): al apuntar se quita la cruz del HUD, la retícula está en el cristal de la mira */
.hud-mira { transition: opacity .12s ease-out; }
.apuntando .hud-mira { opacity: 0; }
.apuntando .cod-marca.objetivo:not(.borde) { opacity: .55; }
/* botón táctil de la mira: cuadrado, como los demás mandos; encendido en rojo de retícula */
.m-mira { right: 20px; bottom: 222px; width: 56px; height: 56px; }
.m-mira.activo { color: #ff4a3a; border-color: #ff4a3a; background: rgba(255,40,20,.12); }
.m-mira { right: 190px; bottom: 116px; }

/* N1 · vuelo libre: flecha guía y ayuda de mandos (14-nov) */
.guia { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transition: opacity .4s; }
.guia.visible { opacity: 1; }
.guia-flecha { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 26px solid var(--verde); filter: drop-shadow(0 0 6px rgba(57,255,106,.7)); transition: transform .12s linear; }
.guia-t { font-family: var(--condensada); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 6px #000; }
.guia-pista { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--condensada); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; }
@media (max-width: 760px) { .guia-pista { display: none; } }
/* N2 · enemigo que te ha visto o te dispara: círculo rojo con punto encima de él (14-nov) */
.cod-marca.enemigo { display: flex; flex-direction: column; align-items: center; }
.cod-marca.enemigo i { width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid #ff3a2a; border-radius: 50%; box-shadow: 0 0 10px rgba(255,58,42,.7); position: relative; }
.cod-marca.enemigo i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #ff3a2a; border-radius: 50%; }
.cod-marca.enemigo b { display: none; }
.cod-marca.enemigo span { margin: 4px 0 0 -11px; font-family: var(--condensada); font-size: 11px; letter-spacing: .08em; color: #ff6a5a; text-shadow: 0 1px 4px #000; }

/* ===== Móvil en horizontal (14-nov): todo táctil y que nada se pise en una pantalla de ~340 px de alto ===== */
.m-sube, .m-baja, .m-arma { width: 50px; height: 40px; font-size: 10px; }
@media (pointer: coarse) {
  .feed { width: 230px; top: 6px; right: 6px; bottom: auto; left: auto; }
  .feed .post:nth-child(n+2) { display: none; }
  .feed .post { padding: 8px 10px; grid-template-columns: 30px 1fr; gap: 8px; }
  .feed .post-avatar { width: 30px; height: 30px; font-size: 13px; }
  .feed .post-texto { font-size: 13px; }
  .feed .post-acciones, .feed .feed-cab { display: none; }
  .pausa { padding: 4vh 5vw; overflow-y: auto; justify-content: flex-start; }
  .pausa-t { font-size: clamp(28px, 7vh, 56px); }
  .pausa-s { font-size: 14px; }
  .pausa-c { font-size: 11px; }
  .cod-menu-i { font-size: 16px; padding: 6px 10px; }
  .palanca { left: 18px; bottom: 18px; width: 96px; height: 96px; opacity: .55; }   /* cuadrada, como los botones (regla de la casa: nada redondeado) */
  .palanca i { left: 33px; top: 33px; width: 30px; height: 30px; transition: transform .05s; }
  .m-fuego { right: 14px; bottom: 14px; width: 78px; height: 78px; }
  .m-mira { right: 100px; bottom: 14px; width: 54px; height: 54px; }
  .m-e { right: 100px; bottom: 76px; width: 50px; height: 50px; }
  .m-r { right: 14px; bottom: 100px; width: 50px; height: 50px; }
  .m-arma { right: 14px; bottom: 100px; }
  .m-sube { left: 124px; bottom: 62px; }
  .m-baja { left: 124px; bottom: 16px; }
}
@media (pointer: coarse) and (max-height: 520px) {
  .cod-mapa { width: 70px; height: 70px; left: 8px; top: 8px; }
  .hud-obj { top: 8px; left: 8px; max-width: 42vw; }
  .cod-mapa ~ .hud-obj, .hud .cod-mapa + * { }
  .hud-obj-t { font-size: 12px; }
  .hud-vida { left: 8px; bottom: auto; top: 112px; width: 110px; }
  .hud-vida b { font-size: 20px; }
  .cod-arma, .hud-municion { right: 166px; bottom: 10px; min-width: 0; }
  .cod-arma-m b, .hud-municion b { font-size: 30px; }
  .cod-balas, .hud-arma span { display: none; }
  .hud-radio { bottom: 104px; width: 46vw; font-size: 14px; }
  .hud-aviso { font-size: 34px; top: 22%; }
  .guia { top: 6px; }
  .mision-hud { bottom: auto; top: 160px; font-size: 10px; }
  .rotulo-lugar { font-size: 24px; }
  .escena .dialogo { padding: 40px 4vw 14px; }
  .escena .dialogo-texto { font-size: 18px; }
  .escena .dialogo-quien { font-size: 14px; margin-bottom: 4px; }
  .pip { width: 180px; }
}
/* En vertical, en los niveles: pedir que se gire el móvil */
.girar { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; text-align: center; padding: 24px; background: #07090c; color: #fff; font-family: var(--condensada); font-weight: 600; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.girar i { display: block; font-size: 48px; margin-bottom: 12px; color: var(--verde); }
@media (pointer: coarse) and (orientation: portrait) { body.en-nivel .girar { display: grid; } }
@media (pointer: coarse) and (max-height: 520px) { .hud-arma b { font-size: 12px; } .hud-calor { width: 130px; } }

/* ===== Armas de los niveles a pie (14-nov): lista de armas, visor del ACOG y botón táctil de cambio ===== */
.cod-armas { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cod-armas div { display: flex; gap: 8px; align-items: baseline; padding: 2px 0 2px 10px; color: rgba(232,228,218,.55); text-shadow: 0 1px 2px #000; border-right: 2px solid transparent; padding-right: 8px; transition: color .15s, border-color .15s; }
.cod-armas div b { font-weight: 500; color: rgba(232,228,218,.55); }
.cod-armas div span { min-width: 34px; text-align: right; }
.cod-armas div.activa { color: var(--blanco); border-right-color: var(--ambar); background: linear-gradient(270deg, rgba(232,163,58,.16), rgba(232,163,58,0)); }
.cod-armas div.activa b { color: var(--ambar); }
.cod-armas div.vacia span { color: #ff6a5a; }
.cod-arma.cambia .cod-arma-nombre { animation: cod-cambia .35s ease-out; }
@keyframes cod-cambia { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* visor de 4 aumentos: el ocular redondo (es una lente, no un botón), negro alrededor, galón rojo y escala */
.cod-visor { position: absolute; inset: 0; opacity: var(--visor, 0); visibility: hidden; pointer-events: none; }
body.con-visor .cod-visor { visibility: visible; }
.cod-visor-lente { position: absolute; left: 50%; top: 50%; width: 86vmin; height: 86vmin; margin: -43vmin 0 0 -43vmin; transform: translate(var(--visor-x, 0), var(--visor-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0 58%, rgba(0,0,0,.35) 64%, rgba(0,0,0,.92) 68.5%, #000 70.7%); box-shadow: 0 0 0 200vmax #000; }
.cod-visor-lente::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 38% 34%, rgba(140,190,255,.08), rgba(0,0,0,0) 40%); }
.cod-visor svg { position: absolute; left: 50%; top: 50%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; overflow: visible; }
.apuntando.con-visor .hud-mira { opacity: 0; }
body.con-visor .cod-marca.enemigo { opacity: calc(1 - var(--visor, 0)); }
.m-cambio { right: 190px; bottom: 50px; width: 56px; height: 56px; }
@media (pointer: coarse) { .m-cambio { right: 14px; bottom: 158px; width: 50px; height: 40px; font-size: 10px; } }
@media (max-width: 700px) { .cod-armas { display: none; } }
@media (pointer: coarse) and (max-height: 520px) { .cod-armas { display: none; } }

/* N1 · marca de la plataforma de aterrizaje (15-nov) */
.lz-marca { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.lz-marca.visible { opacity: 1; }
.lz-marca i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border: 2px solid var(--verde); transform: rotate(45deg); box-shadow: 0 0 12px rgba(57,255,106,.8); background: rgba(57,255,106,.15); }
.lz-marca span { position: absolute; left: -100px; width: 200px; top: 18px; text-align: center; font-family: var(--condensada); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); text-shadow: 0 1px 6px #000; }
.lz-marca.borde i { animation: latido 1s ease-in-out infinite; }

/* Subtítulo del nombre (15-nov-2026): «Maduro Extraction» bajo CARLOS DUTY */
.titulo-marca-sub { display: block; margin-top: .9vh; font-family: var(--condensada); font-weight: 600; font-size: clamp(14px, 1.9vw, 30px); letter-spacing: .42em; line-height: 1.1; color: #d9b25a; text-shadow: 0 2px 14px rgba(0,0,0,.9); }

/* Portada épica (15-nov-2026): la foto de la detención de fondo del menú, con empuje lento y oscurecida a la derecha
   para que se lean el nombre y el menú */
.titulo-portada { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease;
  background: linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.82) 100%), url(../assets/escenas/portada.jpg) 12% 40% / cover no-repeat; }
.titulo-portada.visible { opacity: 1; animation: portada-empuje 26s ease-out forwards; }
@keyframes portada-empuje { from { transform: scale(1.08); filter: brightness(1.6) contrast(1.1); } 8% { filter: none; } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .titulo-portada.visible { animation: none; } }
@media (max-width: 700px) { .titulo-portada { background-position: 30% 40%, 22% 40%; } }
.verif-creditos { margin-top: 18px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55); max-width: 760px; }

/* ---------- Mandos táctiles al estilo de los shooters de móvil (16-nov-2026) ----------
   Se pidieron palanca y botones CIRCULARES como Call of Duty en el móvil: excepción expresa, solo para los mandos
   táctiles del juego, a la regla de la casa de nada redondeado. Icono Phosphor arriba y nombre pequeño debajo. */
.palanca { border-radius: 50%; border: 2px solid rgba(245,241,232,.35); background: radial-gradient(circle, rgba(0,0,0,.05) 40%, rgba(0,0,0,.28) 100%); }
.palanca i { border-radius: 50%; background: rgba(245,241,232,.75); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.m-btn { border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 9px; letter-spacing: .08em; background: rgba(10,12,14,.38); border: 2px solid rgba(245,241,232,.45); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.m-btn i { font-size: 22px; line-height: 1; }
.m-btn:active, .m-btn.activo { background: rgba(245,241,232,.22); border-color: #fff; }
.m-fuego { border-color: rgba(255,255,255,.7); }
.m-fuego i { font-size: 34px; }
.m-e { color: var(--ambar); border-color: var(--ambar); }
@media (pointer: coarse) {
  .palanca { width: 120px; height: 120px; opacity: .7; }
  .palanca i { left: 39px; top: 39px; width: 42px; height: 42px; }
  .m-fuego { width: 86px; height: 86px; }
}

/* Franja de teclas en el ordenador (como Arena Criolla): abajo, al empezar cada nivel */
.franja-teclas { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center;
  padding: 12px 20px 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-family: var(--mono); font-size: 12px; color: rgba(245,241,232,.85);
  pointer-events: none; transition: opacity .8s; }
.franja-teclas.sale { opacity: 0; }
.franja-g { display: inline-flex; align-items: center; gap: 5px; }
.franja-g kbd { font-family: var(--mono); font-size: 11px; min-width: 22px; padding: 2px 6px; text-align: center; color: #fff; border: 1px solid rgba(245,241,232,.55); border-bottom-width: 2px; background: rgba(0,0,0,.4); }
.franja-g em { font-style: normal; margin-left: 3px; }
@media (pointer: coarse) { .m-sube, .m-baja { left: 152px; width: 54px; height: 54px; } .m-sube { bottom: 74px; } .m-baja { bottom: 14px; } }

/* Pantalla final: solo el nombre y «Volver a jugar» (16-nov-2026) */
.fin-partida { background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6vh; }
.fin-partida .fin-marca { position: static; transform: none; text-align: center; }
.fin-partida .fin-otra { cursor: pointer; }