:root{--phosphor:#8affd6;--amber:#ffb45e;--cold:#7cc7ff;--magenta:#ff436b;--cyan:#46d8ff;--text:#d6d1de;--dim:#7a7488;}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{background:#000;color:var(--text);font-family:"Space Mono",ui-monospace,monospace;overflow:hidden;cursor:default;-webkit-font-smoothing:antialiased;}

/* la escena se centra con transform (el centrado de grid/flex alinea al borde
   cuando el contenido desborda el viewport — visto en celulares) */
.viewport{position:fixed;inset:0;background:#000;overflow:hidden;}
.scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:0;}
/* cover: la foto llena la pantalla completa, sin barras. El tamaño exacto
   (ajustar al alto o al ancho) lo decide engine.js según el ratio de la
   variante de sala activa (apaisada o vertical). */
.bg{display:block;height:100vh;width:auto;user-select:none;-webkit-user-drag:none;}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% 46%,transparent 60%,rgba(0,0,0,.4) 100%);animation:breathe 9s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.9}50%{opacity:1}}
/* encendido: la sala arranca a oscuras y "prende" como tubo fluorescente.
   Overlay negro que parpadea irregular y se apaga. Default = invisible, así
   con prefers-reduced-motion (animation:none) no tapa nada. */
.boot{position:fixed;inset:0;background:#000;z-index:120;pointer-events:none;opacity:0;animation:fluor 2.4s linear both;}
@keyframes fluor{
  0%{opacity:1}
  14%{opacity:1}
  15%{opacity:.45}   /* primer chispazo */
  17%{opacity:1}
  32%{opacity:1}
  33%{opacity:.15}   /* casi arranca */
  36%{opacity:.9}
  38%{opacity:1}
  52%{opacity:1}
  53%{opacity:.05}   /* destello largo */
  60%{opacity:.75}
  62%{opacity:1}
  70%{opacity:1}
  71%{opacity:0}     /* prende */
  76%{opacity:.35}   /* último titileo */
  79%{opacity:0}
  100%{opacity:0}
}
.grain{position:fixed;inset:-20%;pointer-events:none;opacity:.05;mix-blend-mode:screen;z-index:40;
  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='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:gshift .5s steps(3) infinite;}
@keyframes gshift{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}

/* pantallas (warp con perspectiva) */
.screen{position:absolute;top:0;left:0;transform-origin:0 0;cursor:pointer;outline:none;will-change:transform;}
.screen.ph{cursor:default;}
.screen:focus-visible{box-shadow:0 0 0 3px var(--phosphor);}
.media-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#04060a;}
/* Interferencia: capa que vive DENTRO de la pantalla (overflow:hidden) y se dibuja
   POR ENCIMA del recorte. Nunca reescala ni recorta el video → no asoma el fondo. */
.glitch{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;}
.screen:hover .glitch,.screen.gli .glitch{opacity:1;}
/* scanlines suaves */
.glitch .lines{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.4;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.35) 2px 3px);}
/* barra de roll que barre la pantalla de arriba a abajo, apenas visible */
.glitch::after{content:"";position:absolute;left:0;right:0;height:26%;mix-blend-mode:screen;background:linear-gradient(180deg,transparent,rgba(255,255,255,.08),transparent);opacity:0;}
.screen:hover .glitch::after,.screen.gli .glitch::after{opacity:1;animation:vroll 2s linear infinite;}
@keyframes vroll{0%{top:-30%}100%{top:112%}}
/* separación RGB: latidos tenues sobre el recorte */
.glitch .tear{position:absolute;left:-6%;right:-6%;height:9%;mix-blend-mode:screen;opacity:0;}
.glitch .tear.r{background:var(--magenta);}
.glitch .tear.c{background:var(--cyan);}
.screen:hover .tear,.screen.gli .tear{animation:tear .4s steps(2) infinite;}
.glitch .tear.c{animation-delay:.08s;}
@keyframes tear{0%{opacity:0;top:6%}25%{opacity:.3;top:30%}50%{opacity:0;top:52%}75%{opacity:.22;top:74%}100%{opacity:0;top:94%}}
.glitch .flick{position:absolute;inset:0;background:rgba(255,255,255,.04);opacity:0;}
.screen:hover .flick,.screen.gli .flick{animation:flick .35s steps(2) infinite;}
@keyframes flick{0%,100%{opacity:0}50%{opacity:.25}}
/* el recorte NO cambia de geometría en hover (no se mueve ni recorta → no asoma
   el fondo); solo un realce de tubo. La interferencia va toda en las capas de arriba. */
.screen:hover .media-el,.screen.gli .media-el{filter:contrast(1.1) brightness(1.04) saturate(1.08);}

/* HUD */
.ident{position:fixed;top:20px;left:24px;z-index:50;user-select:none;line-height:1;}
.ident .sub{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);}
.live{position:fixed;right:22px;bottom:18px;z-index:50;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:8px;user-select:none;}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--magenta);box-shadow:0 0 8px var(--magenta);animation:rec 1.6s steps(1) infinite;}
@keyframes rec{0%,50%{opacity:1}51%,100%{opacity:.15}}

/* modal */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(2,3,6,.82),rgba(0,0,0,.96));backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;}
.modal.open{opacity:1;visibility:visible;}
.stage{width:min(680px,88vw);transform:translateY(14px) scale(.97);transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.modal.open .stage{transform:none;}
.bigscreen{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#03040a;background-repeat:no-repeat;box-shadow:0 0 0 6px #0c0c10,0 0 0 7px #000,0 40px 90px rgba(0,0,0,.85),0 0 70px rgba(124,199,255,.12);}
/* modal en vertical: para shorts (9:16). Se limita por el alto de la ventana. */
.stage.portrait{width:min(46vh,380px);}
.stage.portrait .bigscreen{aspect-ratio:9/16;}
/* en vertical el ancho es angosto: el OSD baja y la desc usa todo el ancho,
   así cada frase de la descripción queda en una línea */
.stage.portrait .meta{flex-direction:column;align-items:stretch;}
.stage.portrait .desc{max-width:none;}
.stage.portrait .osd{margin-top:10px;}
.bigscreen video,.bigscreen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;}
.bigscreen .crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.22) 3px 4px),radial-gradient(120% 120% at 50% 50%,transparent 58%,rgba(0,0,0,.5) 100%);}
.bigscreen .scan{position:absolute;left:0;right:0;height:16%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.07) 50%,transparent);animation:roll 6s linear infinite;}
@keyframes roll{0%{top:-16%}100%{top:108%}}
.meta{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:18px;}
.title{font-family:"Syne",sans-serif;font-weight:700;font-size:clamp(20px,3.2vw,32px);line-height:1.05;color:var(--text);}
.desc{margin-top:8px;font-size:12.5px;color:var(--dim);max-width:46ch;line-height:1.6;white-space:pre-line;}
.osd{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--phosphor);text-align:right;white-space:nowrap;}
.close{position:absolute;top:18px;right:22px;z-index:210;background:none;border:1px solid var(--dim);color:var(--dim);font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.2em;padding:8px 14px;border-radius:6px;cursor:pointer;transition:.2s;}
.close:hover{color:var(--text);border-color:var(--text);}
@media (prefers-reduced-motion:reduce){*{animation:none!important;}}