/* 70 CRT effects: reflection, phosphor, glitches, debug controls, motion. */
.chassis-light-cast {
  position:absolute;
  z-index:55;
  inset:0;
  pointer-events:none;
  opacity:var(--chassis-cast-strength, .23);
  mix-blend-mode:screen;
  transition:opacity 240ms cubic-bezier(.23,1,.32,1);
}
.chassis-light-cast::before {
  content:"";
  position:absolute;
  left:6.5%;
  right:6.5%;
  top:9.1%;
  bottom:14.8%;
  border-radius:5.2% / 6.8%;
  box-shadow:0 -7px 18px rgb(var(--chassis-cast-primary,35 72 255) / .38),-7px 0 16px rgb(var(--chassis-cast-secondary,111 181 82) / .28),7px 0 17px rgb(var(--chassis-cast-primary,35 72 255) / .34),0 10px 23px rgb(var(--chassis-cast-primary,35 72 255) / .3);
  filter:blur(2px) brightness(var(--chassis-cast-brightness,1.06));
}
.chassis-light-cast::before,.chassis-light-cast span {
  position:absolute;
  opacity:1;
  will-change:opacity;
  animation:chassis-phosphor-flicker var(--chassis-flicker-speed,5600ms) steps(1,end) infinite;
}
.chassis-cast-top {
  left:8%;
  right:8%;
  top:5.7%;
  height:6.5%;
  background:radial-gradient(ellipse 68% 100% at 54% 100%,rgb(var(--chassis-cast-primary,35 72 255) / .68),transparent 74%);
  filter:blur(clamp(7px,.85vw,14px)) brightness(var(--chassis-cast-brightness,1.06));
}
.chassis-cast-left,.chassis-cast-right {
  top:10.5%;
  bottom:17%;
  width:5.4%;
  filter:blur(clamp(6px,.72vw,12px)) brightness(var(--chassis-cast-brightness,1.06));
}
.chassis-cast-left {
  left:3.2%;
  background:radial-gradient(ellipse 100% 66% at 100% 46%,rgb(var(--chassis-cast-secondary,111 181 82) / .58),transparent 78%);
  animation-delay:-1730ms;
}
.chassis-cast-right {
  right:3.2%;
  background:radial-gradient(ellipse 100% 66% at 0 46%,rgb(var(--chassis-cast-primary,35 72 255) / .64),transparent 78%);
  animation-delay:-3110ms;
}
.chassis-cast-deck {
  left:7%;
  right:7%;
  top:83.5%;
  height:12.5%;
  background:radial-gradient(ellipse 66% 92% at 53% 0,rgb(var(--chassis-cast-primary,35 72 255) / .52),transparent 76%),radial-gradient(ellipse 26% 75% at 18% 0,rgb(var(--chassis-cast-secondary,111 181 82) / .3),transparent 82%);
  filter:blur(clamp(9px,1vw,17px)) brightness(var(--chassis-cast-brightness,1.06));
  animation-delay:-4270ms;
}
.monitor:has(.crt-screen.glitch-dip) .chassis-light-cast { filter:brightness(.43); }
.monitor:has(.crt-screen.glitch-rgb) .chassis-light-cast { filter:brightness(1.2) hue-rotate(-8deg); }
.monitor:has(.crt-screen.signal-loss) .chassis-light-cast { filter:brightness(.15); }
.monitor:has(.crt-screen.powering-on) .chassis-light-cast { filter:brightness(1.45); }

.reflection-video { position:absolute; z-index:8; inset:-8%; width:116%; height:116%; object-fit:cover; transform:scaleX(-1); filter:grayscale(.88) brightness(.38) contrast(.7) blur(3px) sepia(.16) hue-rotate(165deg); opacity:0; mix-blend-mode:screen; pointer-events:none; transition:opacity .5s; }
.reflection-video.is-active { opacity:var(--reflection-opacity); }
.ambient-reflection { position:absolute; z-index:9; inset:0; opacity:calc(var(--reflection-opacity) * .72); pointer-events:none; mix-blend-mode:screen; background:linear-gradient(247deg,transparent 3% 17%,rgba(189,209,219,.05) 22%,transparent 29%),radial-gradient(ellipse at 83% 14%,rgba(211,223,225,.09),transparent 27%),linear-gradient(90deg,transparent 10%,rgba(180,194,194,.025) 22%,transparent 36%); }
.glass-glare { position:absolute; z-index:14; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 18px rgba(141,174,165,.035),inset -5px 3px 10px rgba(231,246,242,.022); }
.glass-light { --glass-wall:clamp(7px,.78vw,14px); position:absolute; z-index:15; inset:0; overflow:hidden; contain:strict; pointer-events:none; border-radius:inherit; }
.glass-light::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(ellipse 48% 27% at 87% 7%,rgba(209,230,225,.052),transparent 72%),linear-gradient(225deg,rgba(181,209,201,.018),transparent 42% 100%),radial-gradient(ellipse 112% 116% at 50% 47%,transparent 0 82%,rgba(184,207,200,.018) 100%); }
.glass-light::after { content:""; position:absolute; inset:.35%; border-radius:4.8% / 6.5%; border-top:1px solid rgba(229,245,240,.115); border-right:1px solid rgba(190,220,212,.075); border-left:1px solid rgba(143,169,161,.035); border-bottom:1px solid rgba(126,149,143,.04); box-shadow:inset -2px 2px 3px rgba(221,241,235,.045),inset 2px -2px 4px rgba(0,0,0,.055); }
.glass-depth-rim { position:absolute; inset:.65%; padding:var(--glass-wall); border-radius:4.7% / 6.4%; opacity:.7; background:linear-gradient(225deg,rgba(182,211,203,.13) 0%,rgba(63,85,78,.055) 22%,rgba(8,14,12,.045) 62%,rgba(0,0,0,.11) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:blur(.15px); }
.glass-depth-lip { position:absolute; inset:calc(.65% + var(--glass-wall)); border-radius:4.1% / 5.7%; border-top:1px solid rgba(220,240,233,.095); border-right:1px solid rgba(178,210,201,.055); border-left:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.14); box-shadow:1px -1px 2px rgba(191,221,212,.035),-1px 1px 3px rgba(0,0,0,.1),inset 0 0 5px rgba(0,0,0,.07); }
.glass-depth-reflection { position:absolute; inset:calc(.8% + var(--glass-wall)); overflow:hidden; border-radius:4% / 5.6%; opacity:.68; mix-blend-mode:screen; background:radial-gradient(ellipse 42% 22% at 84% 8%,rgba(237,248,245,.1) 0%,rgba(174,205,198,.038) 43%,transparent 76%),radial-gradient(ellipse 103% 44% at 70% -9%,transparent 0 70%,rgba(231,244,240,.026) 74%,transparent 79%),linear-gradient(230deg,transparent 9% 24%,rgba(219,237,233,.018) 30%,transparent 38% 100%); filter:blur(.6px); }
body[data-quality="medium"] .glass-depth-reflection { opacity:.66; filter:blur(.5px); }
body[data-quality="low"] .glass-depth-rim { filter:none; }
body[data-quality="low"] .glass-depth-reflection { filter:none; opacity:.52; }
.scanlines { position:absolute; z-index:10; inset:0; pointer-events:none; opacity:var(--scanline-opacity); background:repeating-linear-gradient(to bottom,rgba(255,255,255,.28) 0,rgba(255,255,255,.28) 1px,transparent 1px,transparent 3px); mix-blend-mode:soft-light; }
.phosphor-mask { position:absolute; z-index:11; inset:0; pointer-events:none; opacity:var(--phosphor-opacity); background:repeating-linear-gradient(90deg,rgba(255,20,20,.28) 0 1px,rgba(40,255,40,.16) 1px 2px,rgba(30,60,255,.28) 2px 3px,transparent 3px 5px); mix-blend-mode:screen; }
.noise { position:absolute; z-index:12; inset:-25%; pointer-events:none; opacity:var(--noise-opacity); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='x'%3E%3CfeTurbulence baseFrequency='.91' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23x)'/%3E%3C/svg%3E"); mix-blend-mode:screen; animation:noise-shift .22s steps(2,end) infinite; }
.crt-screen::after { content:""; position:absolute; z-index:13; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 58%,rgba(0 0 0 / calc(var(--vignette-opacity) * .28)) 100%); }
.crt-screen.is-off::after,.crt-screen.powering-off::after { background:radial-gradient(ellipse at center,transparent 53%,rgba(0 0 0 / var(--vignette-opacity)) 100%); }
.crt-screen.is-off .glass-light::before,.crt-screen.powering-off .glass-light::before { background:radial-gradient(ellipse 48% 27% at 87% 7%,rgba(209,230,225,.038),transparent 72%),linear-gradient(225deg,rgba(181,209,201,.022),transparent 31% 72%,rgba(0,0,0,.06)),radial-gradient(ellipse 112% 116% at 50% 47%,transparent 0 75%,rgba(0,3,2,.07) 88%,rgba(0,0,0,.2) 100%); }
.crt-screen.is-off .glass-light::after,.crt-screen.powering-off .glass-light::after { border-left-color:rgba(0,0,0,.42); border-bottom-color:rgba(0,0,0,.68); box-shadow:inset -2px 2px 3px rgba(221,241,235,.04),inset 3px -4px 7px rgba(0,0,0,.25); }
.crt-screen.is-off .glass-depth-rim,.crt-screen.powering-off .glass-depth-rim { opacity:.84; background:linear-gradient(225deg,rgba(182,211,203,.15) 0%,rgba(63,85,78,.13) 14%,rgba(8,14,12,.38) 45%,rgba(0,2,1,.62) 78%,rgba(0,0,0,.75) 100%); }
.crt-screen.is-off .glass-depth-lip,.crt-screen.powering-off .glass-depth-lip { border-left-color:rgba(0,0,0,.5); border-bottom-color:rgba(0,0,0,.66); box-shadow:1px -1px 2px rgba(191,221,212,.035),-2px 2px 4px rgba(0,0,0,.48),inset 0 0 7px rgba(0,0,0,.3); }
.static-bands,.tear-band,.signal-line,.power-flare,.rare-code { position:absolute; z-index:25; pointer-events:none; }
.tear-band { left:0; right:0; top:45%; height:3%; opacity:0; overflow:hidden; background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,rgba(25,70,255,.2) 1px 2px,transparent 2px 4px); mix-blend-mode:screen; }
.static-bands { inset:0; opacity:0; background:repeating-linear-gradient(to bottom,transparent 0 19%,rgba(255,255,255,.28) 19.2% 19.5%,transparent 19.8% 48%,rgba(50,90,255,.25) 48.2% 49%,transparent 49.2%); }
.signal-line { left:7%; right:7%; top:50%; height:2px; opacity:0; background:white; box-shadow:0 0 12px white; }
.power-flare { inset:0; opacity:0; background:radial-gradient(ellipse at center,white 0 1px,rgba(255,255,255,.8) 2px,rgba(255,255,255,.15) 5px,transparent 20px); }
.rare-code { right:8%; top:18%; color:white; background:var(--blue); opacity:0; font-size:11px; }
.camera-status { position:absolute; z-index:60; right:4%; bottom:7%; padding:4px 7px; color:#c9ffae; border:1px solid var(--terminal); background:#020503; font-size:10px; }.camera-status button{border:0;color:white;background:transparent;text-decoration:underline;cursor:pointer}
.reflection-dialog { width:min(440px,80%); padding:0; border:2px solid #eee; color:#111; background:#c4c2b8; box-shadow:0 0 0 2px #111,12px 12px rgba(0,0,0,.45); }.reflection-dialog::backdrop{background:rgba(0,0,0,.45)}.reflection-dialog form{padding:20px}.reflection-dialog h2{margin:0 0 14px;font:900 1.6em/1 Arial,sans-serif}.reflection-dialog p{line-height:1.5}.reflection-dialog form div{display:flex;gap:8px;margin-top:18px}
.screen-off-label { position:absolute; z-index:30; inset:0; display:grid; place-items:center; color:#8a9c8a; opacity:0; letter-spacing:.15em; pointer-events:none; }

.crt-screen.glitch-tear .tear-band { opacity:.72; animation:tear var(--tear-duration,80ms) steps(2,end); top:var(--tear-y,45%); height:var(--tear-height,3%); }
.crt-screen.glitch-rgb .os { filter:drop-shadow(2px 0 rgba(255,0,0,.45)) drop-shadow(-2px 0 rgba(0,60,255,.5)); transform:translateX(1px) scale(1.002); }
.crt-screen.glitch-dip .os { filter:brightness(.52); }
.crt-screen.glitch-static .static-bands { opacity:.65; animation:static-flash 100ms steps(2,end); }
.crt-screen.glitch-ghost .os { filter:drop-shadow(10px 0 rgba(160,190,255,.16)); opacity:.88; }
.crt-screen.glitch-roll .os { animation:vertical-roll 620ms cubic-bezier(.2,.7,.4,1); }
.crt-screen.signal-loss .os { animation:signal-loss 850ms steps(1,end); }
.crt-screen.signal-loss .static-bands{animation:loss-static 850ms steps(1,end)}
.crt-screen.signal-loss .signal-line{animation:loss-line 850ms steps(1,end)}
.crt-screen.signal-loss .reflection-video.is-active{opacity:calc(var(--reflection-opacity) * 1.9)}
.crt-screen.show-code .rare-code{animation:code-flash 90ms steps(1,end)}
.crt-screen.click-pulse .os{filter:drop-shadow(1px 0 rgba(255,0,0,.35)) drop-shadow(-1px 0 rgba(0,60,255,.4))}
.crt-screen.is-off .os,.crt-screen.is-off .scanlines,.crt-screen.is-off .phosphor-mask,.crt-screen.is-off .noise{opacity:0}.crt-screen.is-off .screen-off-label{opacity:.12}.crt-screen.powering-off .os{animation:power-off .5s ease-in forwards}.crt-screen.powering-off .power-flare{animation:flare-off .5s ease-in forwards}.crt-screen.powering-on .os{animation:power-on .72s ease-out forwards}.crt-screen.powering-on .power-flare{animation:flare-on .72s ease-out forwards}

@keyframes cursor-blink{50%{opacity:0}}@keyframes noise-shift{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}}
@keyframes chassis-phosphor-flicker{0%,13.6%,14.5%,47.2%,48%,78.7%,79.4%,100%{opacity:1}13.9%,47.5%,79%{opacity:var(--chassis-flicker-low,.96)}14.1%,47.7%{opacity:.91}}
@keyframes tear{0%{transform:translateX(0)}33%{transform:translateX(var(--tear-shift,16px))}66%{transform:translateX(calc(var(--tear-shift,16px) * -.5))}100%{transform:translateX(0);opacity:0}}
@keyframes static-flash{0%,100%{opacity:0}35%,70%{opacity:.65;transform:translateY(2px)}}
@keyframes vertical-roll{0%{transform:translateY(0)}25%{transform:translateY(-12%)}55%{transform:translateY(5%)}82%{transform:translateY(-1%)}100%{transform:translateY(0)}}
@keyframes signal-loss{0%,9%{opacity:1}10%,52%{opacity:.04}53%,65%{opacity:.16}66%,100%{opacity:1}}@keyframes loss-static{0%,15%,68%,100%{opacity:0}18%,35%,55%{opacity:.6}}@keyframes loss-line{0%,38%,47%,100%{opacity:0}40%,44%{opacity:1}}
@keyframes code-flash{0%,100%{opacity:0}10%,80%{opacity:1}}@keyframes power-off{0%{opacity:1;transform:scale(1)}55%{opacity:1;transform:scaleY(.018) scaleX(.96)}75%{opacity:.8;transform:scale(.015)}100%{opacity:0;transform:scale(0)}}@keyframes flare-off{0%,30%{opacity:0}58%{opacity:1;background-size:100% 3px;background-repeat:no-repeat;background-position:center}82%{opacity:1}100%{opacity:0}}
@keyframes power-on{0%,14%{opacity:0;transform:scale(0)}28%{opacity:.85;transform:scaleX(.02) scaleY(.015)}50%{opacity:1;transform:scaleX(.96) scaleY(.02)}72%{transform:scaleX(1) scaleY(1.04)}100%{opacity:1;transform:scale(1)}}@keyframes flare-on{0%{opacity:1}20%{opacity:1}48%{opacity:.9;background-size:100% 2px;background-repeat:no-repeat;background-position:center}80%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){.chassis-light-cast::before,.chassis-light-cast span{animation:none}}