:root {
  color-scheme: dark;
  --room-width: min(100vw, 177.7778vh);
  --room-height: min(100vh, 56.25vw);
  --cold: #85caff;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #030508; }
body { color: #e6f4ff; font-family: "IBM Plex Mono", Consolas, "Courier New", monospace; }
.scene { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
.room {
  position: absolute; width: var(--room-width); height: var(--room-height);
  left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden;
  transform-origin: 83% 56%; animation: camera-breathe 20s ease-in-out 1 both;
  background: #060a10;
}
.frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.frame--base { z-index: 0; }
.frame--base { transition: opacity .35s ease; }
.room-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.room.has-room-video .frame--base { opacity: 0; }
.room.has-room-video .room-video { opacity: 1; }

.rain, .screen-lines, .grain, .tv-light, .lamp-breath { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rain {
  opacity: .16; background: url('./assets/textures/rain_overlay_1920x1080.png') left center / auto 114% repeat-x;
  mask-image: linear-gradient(90deg, #000 0%, #000 18%, transparent 25%);
  animation: rain-drift 23s linear infinite;
}
.tv-light {
  background: radial-gradient(ellipse 27% 34% at 48% 44%, #1679ff48, transparent 100%);
  mix-blend-mode: screen; opacity: .2;
}
.lamp-breath {
  background: radial-gradient(ellipse 10% 22% at 77% 39%, #ffb3472b, transparent 100%);
  mix-blend-mode: screen; opacity: .65;
}
.screen-lines {
  inset: 25.8% auto auto 36.6%; width: 25.2%; height: 30.5%; border-radius: 2%;
  background: url('./assets/textures/crt_scanlines_1920x1080.png') center / 100% 100%;
  opacity: .1; mix-blend-mode: screen;
}
.grain {
  opacity: .04; background: url('./assets/textures/dust_scratches_1920x1080.png') center / cover no-repeat;
}
.room.is-ready .tv-light { animation: tv-glow 21.8s ease-in-out 1 both; }
.room.is-ready .lamp-breath { animation: lamp-flicker 14s steps(1, end) 1 both; }

.tv-screen {
  position: absolute; z-index: 3; left: 37.08%; top: 26.04%; width: 24.52%; height: 29.44%;
  overflow: hidden; background: transparent; pointer-events: none;
}
.tv-state, .tv-eye, .tv-eye-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tv-state { object-fit: fill; }
.tv-state--static { z-index: 0; opacity: 1; }
.tv-eye { z-index: 1; opacity: 0; }
.tv-eye-art { object-fit: fill; }
.tv-state--ghost .tv-eye-art { filter: saturate(.74) brightness(.82); }
.tv-state--clear .tv-eye-art {
  -webkit-mask-image: radial-gradient(ellipse 6.8% 10.2% at 51% 48%, transparent 96%, #000 104%);
  mask-image: radial-gradient(ellipse 6.8% 10.2% at 51% 48%, transparent 96%, #000 104%);
}
.eye-lumen { position: absolute; inset: 0; z-index: 1; opacity: 0; mix-blend-mode: screen; background: radial-gradient(ellipse 26% 39% at 51% 48%,#62caff80 0%,#318dff26 42%,transparent 100%); }
.tv-screen.is-ready .eye-lumen { animation: logo-flicker 9s steps(1,end) 4s 1 both; }
.tv-screen.is-ready .tv-state--static { animation: static-cut-in 2.7s steps(1, end) 1 both; }
.tv-screen.is-ready .tv-state--ghost { animation: ghost-emerge 3.5s ease-out 1.1s 1 both; }
.tv-screen.is-ready .tv-state--clear { animation: eye-clear 3s cubic-bezier(.2,.72,.2,1) 3s 1 both, eye-gaze 8s ease-in-out 6s 1 both; }
.pupil-growth { position: absolute; inset: 0; z-index: 2; transform: scale(.25,.3); transform-origin: 51% 48%; opacity: 0; }
.tv-screen.is-ready .pupil-growth { animation: pupil-expand 2.5s cubic-bezier(.2,.75,.2,1) 3.4s 1 both, pupil-breathe 7s ease-in-out 6s infinite alternate; }
.pupil {
  position: absolute; left: 51%; top: 48%; width: 14.2%; height: 20.5%; transform: translate(-50%,-50%);
  border: 1px solid #087ecb88; border-radius: 50%;
  background: radial-gradient(ellipse at 34% 27%, #163954 0%, #02070e 43%, #000207 100%);
  box-shadow: 0 0 11px #078cff77, inset 0 0 8px #0b5c9d55;
}
.tv-caption-mask { position: absolute; z-index: 3; inset: 76% 0 0; background: linear-gradient(180deg,#040b13 0%,#03070c 100%); }
.tv-copy { position: absolute; z-index: 4; inset: auto 3% 5%; min-height: 18%; display: grid; place-items: center; text-align: center; }
.tv-message { grid-area: 1 / 1; opacity: 0; color: #bce5ff; font-size: clamp(12px,1.35vw,24px); line-height: 1.2; letter-spacing: .1em; text-shadow: 0 0 5px #5cbaff, 0 0 16px #268fff; white-space: nowrap; }
.tv-screen.is-ready .tv-message--one { animation: first-message 9s ease-in-out 4s 1 both; }
.tv-screen.is-ready .tv-message--two { animation: second-message 10s ease-in-out 11.8s 1 both; }
.tv-torn { position: absolute; z-index: 5; inset: 47% 0 auto; height: 2px; opacity: 0; background: #9adfff; box-shadow: 0 0 9px #45baff; }
.tv-screen.is-ready .tv-torn { animation: single-tear 13.5s steps(1,end) 1 both; }
.footer-mask { position: absolute; z-index: 3; bottom: 2.4%; height: 7.6%; background: linear-gradient(180deg,#05090dc9,#030609f2); pointer-events: none; }
.footer-mask--brand { left: 1.4%; width: 24%; }
.footer-mask--status { right: 1.4%; width: 22%; }

.controls { position: absolute; z-index: 4; inset: 71.55% 0 auto; height: 6.7%; display: grid; grid-template-columns: repeat(4, 18.8%); justify-content: space-between; padding: 0 5.6%; }
.control {
  display: block; min-width: 0; height: 100%; color: transparent; font-size: 0;
  background-color: #05080b; background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
  transition: filter .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.control:nth-child(1) { background-image: url('./assets/buttons/svg/enter_idle.svg'); }
.control:nth-child(2) { background-image: url('./assets/buttons/svg/who_are_you_idle.svg'); }
.control:nth-child(3) { background-image: url('./assets/buttons/svg/help_idle.svg'); }
.control:nth-child(4) { background-image: url('./assets/buttons/svg/status_idle.svg'); }
.control:nth-child(1):hover, .control:nth-child(1):focus-visible { background-image: url('./assets/buttons/svg/enter_hover.svg'); }
.control:nth-child(2):hover, .control:nth-child(2):focus-visible { background-image: url('./assets/buttons/svg/who_are_you_hover.svg'); }
.control:nth-child(3):hover, .control:nth-child(3):focus-visible { background-image: url('./assets/buttons/svg/help_hover.svg'); }
.control:nth-child(4):hover, .control:nth-child(4):focus-visible { background-image: url('./assets/buttons/svg/status_hover.svg'); }
.control:nth-child(1):active { background-image: url('./assets/buttons/svg/enter_active.svg'); }
.control:nth-child(2):active { background-image: url('./assets/buttons/svg/who_are_you_active.svg'); }
.control:nth-child(3):active { background-image: url('./assets/buttons/svg/help_active.svg'); }
.control:nth-child(4):active { background-image: url('./assets/buttons/svg/status_active.svg'); }
.control:hover { transform: translateY(-2%); filter: drop-shadow(0 0 12px #49aaff8c); }
.control:active { transform: scale(.985); }
.control:focus-visible { outline: 2px solid #9cddff; outline-offset: 3px; filter: drop-shadow(0 0 12px #49aaff); }
.control__text { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

.doorway {
  position: absolute; z-index: 3; left: 83.2%; top: 9%; width: 15.7%; height: 62%;
  display: grid; place-items: center; color: #d9f2ff; text-decoration: none; cursor: pointer;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.doorway:hover, .doorway:focus-visible { background: #3c9dff0a; box-shadow: inset 0 0 70px #42aaff22; outline: none; }
.doorway__hint { opacity: 0; font-size: clamp(18px, 2vw, 42px); text-shadow: 0 0 18px #79cfff; transition: opacity .25s ease; }
.doorway:hover .doorway__hint, .doorway:focus-visible .doorway__hint { opacity: .55; }
.signature, .connection { position: absolute; z-index: 3; bottom: 3.4%; color: #a4aeb8; font-size: clamp(8px, .75vw, 15px); line-height: 1.65; letter-spacing: .08em; text-shadow: 0 1px 5px #000; }
.signature { left: 2.4%; }
.connection { right: 2.4%; display: flex; align-items: center; gap: 12px; text-align: right; }
.connection i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #2ce678; box-shadow: 0 0 12px #1dff76; }





@keyframes camera-breathe { from { transform: translate(-50%,-50%) scale(1); } to { transform: translate(-50%,-50%) scale(1.012); } }
@keyframes rain-drift { from { background-position: 0 center; } to { background-position: 1920px center; } }
@keyframes tv-glow { 0%,100% { opacity: .15; } 18% { opacity: .3; } 37% { opacity: .64; } 54% { opacity: .48; } 72% { opacity: .3; } 84% { opacity: .47; } }
@keyframes lamp-flicker { 0%,31%,36%,64%,69%,100% { opacity: .65; } 32% { opacity: .28; } 33% { opacity: .73; } 34% { opacity: .16; } 35% { opacity: .7; } 65% { opacity: .36; } 66% { opacity: .71; } 67% { opacity: .24; } 68% { opacity: .67; } }
@keyframes static-cut-in { 0%,43% { opacity: 1; filter: brightness(1); } 46% { opacity: .75; filter: brightness(1.4); } 48% { opacity: .28; filter: brightness(.8); } 52% { opacity: .6; filter: brightness(1.25); } 61%,100% { opacity: 0; } }
@keyframes ghost-emerge { 0% { opacity: 0; filter: blur(7px) brightness(.55); } 36% { opacity: .42; filter: blur(3px) brightness(.7); } 69% { opacity: .76; filter: blur(1px) brightness(.9); } 100% { opacity: .56; filter: blur(.5px) brightness(.85); } }
@keyframes eye-clear { 0% { opacity: 0; filter: blur(5px) brightness(.5); } 35% { opacity: .32; filter: blur(2px) brightness(.73); } 72% { opacity: .9; filter: blur(.4px) brightness(1); } 100% { opacity: 1; filter: none; } }
@keyframes logo-flicker { 0%,17%,22%,28%,46%,50%,100% { opacity: 0; } 18% { opacity: .38; } 20% { opacity: .08; } 23% { opacity: .52; } 26% { opacity: .15; } 29% { opacity: .34; } 48% { opacity: .22; } }
@keyframes pupil-expand { 0% { transform: scale(.25,.3); opacity: .45; } 68% { transform: scale(.78,.8); opacity: .88; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pupil-breathe { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes first-message { 0%,10% { opacity: 0; filter: blur(5px); transform: translateY(5px); } 19% { opacity: .8; filter: blur(.6px); transform: none; } 26%,40%,53%,67% { opacity: .97; filter: blur(0); text-shadow: 0 0 6px #5cbaff,0 0 18px #268fff; } 47% { opacity: .72; text-shadow: 0 0 3px #5cbaff; } 60% { opacity: .88; } 78% { opacity: .9; } 89%,100% { opacity: 0; filter: blur(3px); transform: translateY(-2px); } }
@keyframes second-message { 0%,10% { opacity: 0; filter: blur(5px); transform: translateY(5px); } 18% { opacity: .84; filter: blur(.4px); transform: none; } 25%,39%,55%,70% { opacity: .98; text-shadow: 0 0 6px #5cbaff,0 0 18px #268fff; } 46% { opacity: .7; text-shadow: 0 0 2px #5cbaff; } 63% { opacity: .9; } 78% { opacity: .94; } 90%,100% { opacity: 0; filter: blur(3px); transform: translateY(-2px); } }
@keyframes single-tear { 0%,61%,64%,100% { opacity: 0; transform: translateX(0); } 62% { opacity: .7; transform: translateX(-5px); } 63% { opacity: .2; transform: translateX(4px); } }
@keyframes eye-gaze { 0%,100% { transform: translateX(0); } 24% { transform: translateX(-.5%); } 47% { transform: translateX(-.1%); } 73% { transform: translateX(.45%); } }

@media (min-aspect-ratio: 2/1) {
  .room { box-shadow: 0 0 12vw 7vw #000; }
}

@media (max-width: 700px), (max-aspect-ratio: 3/4) {
  :root { --room-width: 100vw; --room-height: 100vh; }
  .room { width: 100vw; height: 100vh; min-height: 100svh; left: 50%; top: 0; transform: translateX(-50%); transform-origin: 53% 43%; animation-name: camera-breathe-mobile; }
  .frame { width: auto; height: 100%; max-width: none; left: 50%; top: 0; transform: translateX(-50%); }
  .tv-screen { left: calc(50vw - 22.999vh); top: 26.04%; width: 43.57vh; height: 29.44%; }
  .tv-message { font-size: clamp(13px,5vw,20px); }
  .rain { opacity: .06; }
  .grain { opacity: .035; }
  .screen-lines { opacity: .07; }
  .room::after { content: ""; position: absolute; z-index: 3; inset: 67% 0 0; background: linear-gradient(180deg, #05080c15, #030609eF 18%, #030609 100%); pointer-events: none; }
  .controls { inset: auto 0 max(3vh, env(safe-area-inset-bottom)); height: auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 12px; padding: 0 18px; z-index: 5; }
  .control { height: auto; aspect-ratio: 5 / 1; }
  .doorway { display: none; }
  .signature, .connection, .footer-mask { display: none; }
  
  @keyframes camera-breathe-mobile { from { transform: translate(-50%,0) scale(1); } to { transform: translate(-50%,0) scale(1.018); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rain, .screen-lines, .grain, .tv-light, .lamp-breath, .tv-eye, .tv-copy, .tv-torn { display: none; }
  .room { animation: none !important; }
}
.tv-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; background:#02060b; }
.tv-copy { position:absolute; z-index:4; inset:auto 3% 5%; min-height:18%; display:grid; place-items:center; text-align:center; opacity:0; color:#bce5ff; font-size:clamp(12px,1.35vw,24px); line-height:1.2; letter-spacing:.1em; text-shadow:0 0 5px #5cbaff,0 0 16px #268fff; white-space:nowrap; transition:opacity 1.5s ease; animation:message-flicker 5s steps(1,end) infinite; }
.tv-copy.is-visible { opacity:1; }
@keyframes message-flicker { 0%,88%,91%,100% { opacity:1 } 89% { opacity:.34 } 90% { opacity:.88 } 94% { opacity:.72 } 95% { opacity:1 } }
.tv-screen.is-ready .tv-torn { animation:single-tear 13.5s steps(1,end) 1 both; }
@media (prefers-reduced-motion: reduce) { .tv-copy { animation:none; transition:none; } }
.tv-screen { border-radius: 2.2% / 3.5%; isolation:isolate; }
.tv-video { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .16s linear; background:#02060b; }
.tv-video.is-active { opacity:1; }
.tv-copy { position:absolute; z-index:2; inset:auto 3% 5%; min-height:18%; display:grid; place-items:center; text-align:center; opacity:0; color:#c3eaff; font-size:clamp(12px,1.2vw,21px); line-height:1.35; letter-spacing:.04em; text-shadow:0 0 5px #5cbaff,0 0 15px #268fff; white-space:normal; transition:opacity 1.25s ease; animation:crt-copy-flicker 5s steps(1,end) infinite; }
.tv-copy span { grid-column:1; grid-row:1; }
.tv-copy span + span { margin-top:2.3em; }
.tv-copy.is-visible { opacity:1; }
@keyframes crt-copy-flicker { 0%,91%,94%,100%{filter:none;opacity:1} 92%{filter:brightness(.65);opacity:.72} 93%{filter:brightness(1.25);opacity:.92} }
.controls { opacity:0; pointer-events:none; transition:opacity .35s ease; }
.controls.is-revealed { animation:menu-arrive 1s ease-out both; pointer-events:auto; }
@keyframes menu-arrive { 0%{opacity:0;transform:translateY(8px)} 38%{opacity:.75} 62%{opacity:.25} 100%{opacity:1;transform:translateY(0)} }
.lightning-video { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; mix-blend-mode:screen; }
.lightning-video.is-active { opacity:.75; }


.debug-panel { position:fixed;z-index:50;right:8px;top:8px;display:grid;grid-template-columns:repeat(2,auto);gap:3px;max-height:80vh;overflow:auto;padding:6px;background:#05090de8;border:1px solid #7bbfff; }
.debug-panel button { color:#d9edff;background:#0a1420;border:1px solid #42617b;padding:4px 6px;font:11px monospace; }
@media(max-width:700px),(max-aspect-ratio:3/4){
 .tv-screen{border-radius:2% / 3%;}
 .tv-copy{font-size:clamp(10px,2.8vw,15px);inset:auto 2% 5%;}
 .controls{inset:auto 0 9%;height:8%;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44%;gap:8px 3%;padding:0 5%;}
 .controls.is-revealed{animation:menu-arrive 1s ease-out both;}
}
@media(prefers-reduced-motion:reduce){.tv-copy{animation:none;transition:none}.controls.is-revealed{animation:none;opacity:1}.lightning-video{display:none}}

.sound-toggle {
  position: absolute;
  z-index: 21;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #a9c9df8c;
  border-radius: 2px;
  color: #dbeeff;
  background: #040a10b8;
  font: 11px/1 "IBM Plex Mono", Consolas, "Courier New", monospace;
  letter-spacing: .08em;
  cursor: pointer;
  opacity: .78;
  transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sound-toggle:hover { opacity: 1; border-color: #9edaff; box-shadow: 0 0 12px #4baaff44; }
.sound-toggle:focus-visible { outline: 2px solid #9cddff; outline-offset: 3px; opacity: 1; }
.sound-toggle[data-enabled="true"] { border-color: #64baffb8; color: #c9eaff; }
.sound-toggle[data-awaiting="true"] { border-color: #d2aa62aa; color: #ffe6b9; }
.sound-toggle__icon { display: grid; width: 18px; height: 18px; place-items: center; }
.sound-toggle__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle__wave, .sound-toggle__mute { display: none; }
.sound-toggle[data-enabled="false"] .sound-toggle__mute { display: block; }
.sound-toggle[data-enabled="true"] .sound-toggle__wave { display: block; }
.sound-toggle__label { white-space: nowrap; }
.sound-choice {
  position: fixed;
  inset: 0;
  width: min(500px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  color: #e6f4ff;
  background: transparent;
}
.sound-choice::backdrop { background: #010407d9; backdrop-filter: blur(3px); }
.sound-choice__panel { padding: clamp(22px, 5vw, 34px); border: 1px solid #a9c9df9c; background: #050b12f5; box-shadow: 0 0 0 1px #0b1b29, 0 20px 70px #000c, inset 0 0 34px #25507722; text-align: center; }
.sound-choice__eyebrow { color: #83c8f2; font: 11px/1.4 "IBM Plex Mono", Consolas, "Courier New", monospace; letter-spacing: .2em; }
.sound-choice h2 { margin: 13px 0 8px; color: #e4f3ff; font: 500 clamp(23px, 5vw, 34px)/1.2 "IBM Plex Mono", Consolas, "Courier New", monospace; letter-spacing: .04em; }
.sound-choice p { margin: 0 0 24px; color: #afc4d2; font: 13px/1.55 "IBM Plex Mono", Consolas, "Courier New", monospace; letter-spacing: .025em; }
.sound-choice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sound-choice__actions button {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #9dbed4a0;
  color: #dbeeff;
  background: #08121dee;
  font: 11px/1.35 "IBM Plex Mono", Consolas, "Courier New", monospace;
  letter-spacing: .06em;
  cursor: pointer;
}
.sound-choice__actions button:first-child { border-color: #75bff0; color: #dff3ff; background: #0d2336; box-shadow: inset 0 0 18px #2b8bc522; }
.sound-choice__actions button:hover, .sound-choice__actions button:focus-visible { outline: 1px solid #a6dcff; border-color: #a6dcff; background: #102033; }
.sound-choice__actions button:focus-visible { outline-width: 2px; outline-offset: 2px; }
@media (max-width: 480px) { .sound-choice__actions { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.debug-audio-title { grid-column: 1 / -1; padding-top: 4px; color: #8fcfff; font: bold 11px monospace; }
.debug-audio-controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,auto); gap: 3px; }
.debug-audio-readout { grid-column: 1 / -1; margin: 2px 0 0; color: #b6d9ef; white-space: pre-wrap; font: 10px/1.4 monospace; }
.room { --tv-x:37.08%; --tv-y:26.04%; --tv-w:24.52%; --tv-h:29.44%; --tv-radius:2.2% / 3.5%; }
.tv-screen { left:var(--tv-x); top:var(--tv-y); width:var(--tv-w); height:var(--tv-h); border-radius:var(--tv-radius); isolation:isolate; }
.screen-lines { left:var(--tv-x); top:var(--tv-y); width:var(--tv-w); height:var(--tv-h); border-radius:var(--tv-radius); }
/* Shared crop follows the glass bounds visible in assets/references/EyeRef.jpg. */
.tv-video { position:absolute; left:-8.5%; top:-4%; z-index:0; width:117%; height:112%; object-fit:fill; opacity:0; transition:opacity .16s linear; background:transparent; }
.tv-video.is-active { opacity:1; }
.tv-fallback { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:1; transition:opacity .3s ease; }
.tv-screen.has-video .tv-fallback { opacity:0; }
.controls { opacity:0; pointer-events:none; transition:opacity .35s ease; }
.controls.is-revealed { animation:menu-arrive 1s ease-out both; pointer-events:auto; }
@keyframes menu-arrive { 0%{opacity:0;transform:translateY(8px)} 38%{opacity:.75} 62%{opacity:.25} 100%{opacity:1;transform:translateY(0)} }
.tv-copy { position:absolute; z-index:2; inset:auto 3% 5%; min-height:18%; display:grid; place-items:center; text-align:center; opacity:0; color:#c3eaff; font-size:clamp(12px,1.2vw,21px); line-height:1.35; letter-spacing:.04em; text-shadow:0 0 5px #5cbaff,0 0 15px #268fff; white-space:normal; transition:opacity 1.25s ease; animation:crt-copy-flicker 5s steps(1,end) infinite; }
.tv-copy span { grid-column:1; grid-row:1; }
.tv-copy span + span { margin-top:2.4em; }
.tv-copy.is-visible { opacity:1; }
@keyframes crt-copy-flicker { 0%,91%,94%,100%{filter:none;opacity:1} 92%{filter:brightness(.65);opacity:.72} 93%{filter:brightness(1.25);opacity:.92} }
.lightning-video { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; mix-blend-mode:screen; }
.lightning-video.is-active { opacity:.75; }


.debug-panel { position:fixed;z-index:50;right:8px;top:8px;display:grid;grid-template-columns:repeat(2,auto);gap:3px;max-height:80vh;overflow:auto;padding:6px;background:#05090de8;border:1px solid #7bbfff; }
.debug-panel button { color:#d9edff;background:#0a1420;border:1px solid #42617b;padding:4px 6px;font:11px monospace; }
.room.is-attending .tv-video.is-active { transform:scale(1.012); filter:brightness(1.1); transition:transform .6s ease,filter .6s ease; }
@media(max-width:700px),(max-aspect-ratio:3/4){
 .room { --tv-x:calc(50vw - 22.999vh); --tv-y:26.04%; --tv-w:43.57vh; --tv-h:29.44%; --tv-radius:2% / 3%; }
 .tv-copy { font-size:clamp(10px,2.8vw,15px);inset:auto 2% 5%; }
 .controls { inset:auto 0 9%;height:8%;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44%;gap:8px 3%;padding:0 5%; }
 
}
@media(prefers-reduced-motion:reduce){.tv-copy{animation:none;transition:none}.controls.is-revealed{animation:none;opacity:1}.lightning-video{display:none}}