:root{--cctv-green:#2ecc71;--cctv-red:#e74c3c;--cctv-bg:#050505;--scan-color:rgba(18,16,16,0.1);--ui-font:'JetBrains Mono','Courier New',monospace}body.surveillance-page{background-color:#000;color:var(--cctv-green);font-family:var(--ui-font);margin:0;padding:0;overflow:hidden;display:flex;justify-content:center;align-items:center;height:100vh}.cctv-container{position:relative;width:90vw;height:90vh;max-width:1200px;background-color:var(--cctv-bg);border:4px solid #333;box-shadow:0 0 40px rgba(0,255,0,0.05);overflow:hidden;border-radius:20px}.cctv-container::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 0,rgba(0,0,0,0.2) 100%);pointer-events:none;z-index:50;box-shadow:inset 0 0 100px rgba(0,0,0,0.5)}.monitor-screen{position:relative;width:100%;height:100%;background:#000;display:flex;justify-content:center;align-items:center}.hallway-base{position:absolute;width:100%;height:100%;background-image:radial-gradient(circle at 50% 50%,transparent 20%,rgba(0,0,0,0.4) 100%),repeating-linear-gradient(90deg,#222 0,#222 2px,transparent 2px,transparent 40px);filter:contrast(1.1) brightness(1.5) sepia(0.2) hue-rotate(80deg)}.corridor{width:100%;height:100%;perspective:1200px;position:relative}.wall-left,.wall-right,.floor,.ceiling{position:absolute;background:#050505;border:1px solid #1a1a1a}.wall-left{width:200%;height:100%;transform:rotateY(90deg) translateZ(-500px);background:linear-gradient(rgba(0,0,0,0.5),transparent),url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)' opacity='0.2'/%3E%3C/svg%3E"),linear-gradient(to right,#222,#555)}.wall-right{width:200%;height:100%;transform:rotateY(-90deg) translateZ(-500px);background:linear-gradient(rgba(0,0,0,0.5),transparent),url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)' opacity='0.2'/%3E%3C/svg%3E"),linear-gradient(to left,#222,#555)}.industrial-pipe{position:absolute;height:10px;width:200%;background:linear-gradient(to bottom,#111,#333,#111);border-top:1px solid #444;border-bottom:1px solid #000;top:20%;transform-origin:left}.industrial-pipe.pipe-left{transform:rotateY(90deg) translateZ(-495px) translateY(50px)}.industrial-pipe.pipe-right{transform:rotateY(-90deg) translateZ(-495px) translateY(80px)}.floor{width:100%;height:200%;bottom:0;transform:rotateX(90deg) translateZ(-200px);background:radial-gradient(circle at 50% 0%,#666,#222 85%)}.ceiling{width:100%;height:200%;top:0;transform:rotateX(-90deg) translateZ(-200px);background:#020202}.door-end{position:absolute;width:90px;height:160px;background:#050505;border:2px solid #111;left:calc(50% - 45px);top:calc(50% - 40px);transition:transform 4s ease-in-out}.door-end.open{transform:rotateY(-75deg) translateX(-40px)}.dirt-texture{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.4 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.5 0'/%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");pointer-events:none;z-index:3;opacity:.5;mix-blend-mode:multiply}.overlay-humbar{position:absolute;top:-100px;left:0;width:100%;height:60px;background:rgba(255,255,255,0.03);box-shadow:0 0 30px rgba(255,255,100,0.02);pointer-events:none;z-index:6;animation:humbar-move 5s linear infinite}@keyframes humbar-move{from{top:-100px}to{top:100%}}.flicker-light{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;z-index:1;animation:light-flicker 10s infinite}@keyframes light-flicker{0%,100%{opacity:0}95%{opacity:0}96%{opacity:.05}97%{opacity:0}98%{opacity:.1}99%{opacity:0}}.cam-view{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden}.storage-view{background:radial-gradient(circle at 70% 30%,#222,#050505 80%)}.storage-shelf{position:absolute;background:linear-gradient(to bottom,#1a1a1a,#0a0a0a);border:1px solid #222}.storage-crate{position:absolute;background-color:#333;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)' opacity='0.2'/%3E%3C/svg%3E"),linear-gradient(45deg,rgba(0,0,0,0.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 75%,transparent 75%,transparent);background-size:100% 100%,20px 20px;border:2px solid #222;box-shadow:inset 0 0 10px #000}.storage-crate::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(transparent,rgba(0,0,0,0.4));pointer-events:none}.stairwell-view{perspective:800px;background:#050505}.stair-step{position:absolute;width:140%;height:45px;background:linear-gradient(to bottom,#333,#111);left:-20%;border-top:2px solid #444;transform:rotateX(20deg) rotate(-6deg);box-shadow:0 10px 20px rgba(0,0,0,0.8)}.stair-step::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");pointer-events:none}.stair-rail{position:absolute;width:4px;height:150%;background:linear-gradient(to bottom,#422,#100);left:15%;top:-25%;transform:rotate(-6deg);box-shadow:2px 0 10px #000;border-left:1px solid #533}.cctv-ui{position:absolute;top:0;left:0;width:100%;height:100%;padding:40px;box-sizing:border-box;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;z-index:20}.ui-log-panel{position:absolute;right:40px;bottom:120px;width:250px;height:100px;background:rgba(0,20,0,0.4);border-left:2px solid var(--cctv-green);font-size:.65rem;padding:10px;overflow-y:hidden;display:flex;flex-direction:column-reverse;gap:4px;pointer-events:none;opacity:.7}.log-entry{animation:log-slide .3s ease-out;white-space:nowrap}@keyframes log-slide{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}.ui-left-panel{position:absolute;left:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:15px;pointer-events:auto}.cam-btn{background:rgba(0,40,0,0.4);border:1px solid rgba(46,204,113,0.3);color:var(--cctv-green);padding:10px 15px;font-family:var(--ui-font);font-size:.75rem;cursor:pointer;transition:all .2s;text-align:left;width:160px;backdrop-filter:blur(2px)}.cam-btn:hover{background:rgba(46,204,113,0.2)}.cam-btn.active{background:var(--cctv-green);color:#000;box-shadow:0 0 15px rgba(46,204,113,0.5);border-color:var(--cctv-green)}.ui-top{display:flex;justify-content:space-between;align-items:flex-start;text-shadow:0 0 8px var(--cctv-green)}.ui-right-panel{position:absolute;right:40px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:30px;align-items:flex-end}.signal-bar{width:60px;height:3px;background:#222;position:relative}.battery-icon{width:35px;height:16px;border:1px solid var(--cctv-green);position:relative;padding:1px}.battery-tip{position:absolute;right:-4px;top:4px;width:3px;height:6px;background:var(--cctv-green)}.jittery-ui{animation:ui-jitter .2s infinite}@keyframes ui-jitter{0%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(-1px,-1px)}}.meta-glitch-text{font-family:serif;color:red!important;text-shadow:0 0 10px red}.ui-bottom{display:flex;justify-content:space-between;align-items:flex-end;text-shadow:0 0 8px var(--cctv-green)}.overlay-noise{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.12;pointer-events:none;animation:noise-move .2s steps(2) infinite}.overlay-scanlines{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,0.3) 50%),linear-gradient(90deg,rgba(255,0,0,0.05),rgba(0,255,0,0.02),rgba(0,0,255,0.05));background-size:100% 4px,3px 100%;pointer-events:none}.overlay-vignette{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,transparent 70%,rgba(0,0,0,0.5) 100%);pointer-events:none}.shadow-figure{position:absolute;width:70px;height:180px;background:rgba(0,0,0,0.98);filter:blur(12px);bottom:12%;left:-100px;transition:left 10s linear;pointer-events:none}.shadow-figure.passing{left:110%}.shadow-crawling{position:absolute;width:120px;height:40px;background:rgba(0,0,0,0.9);filter:blur(15px);bottom:5%;left:-150px;transition:left 15s linear;z-index:2}.shadow-crawling.active{left:110%}.blood-text{position:absolute;color:rgba(139,0,0,0.6);font-family:serif;font-size:2rem;pointer-events:none;filter:blur(1px);opacity:0;z-index:4;transition:opacity 2s}.ceiling-entity{position:absolute;width:100px;height:60px;background:#000;filter:blur(10px);top:-80px;left:50%;transform:translateX(-50%);transition:top 5s ease-in-out;z-index:2}.ceiling-entity.active{top:10%}.glitch{animation:glitch-anim .2s cubic-bezier(.25,.46,.45,.94) both infinite}.interference{position:absolute;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none}.flash-active{animation:flash .05s linear infinite}.stalker-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 400 300'%3E%3Cpath d='M200 120 Q200 180 160 200 Q200 190 240 200 Q200 180 200 120' fill='%23000' opacity='0.8'/%3E%3Ccircle cx='185' cy='145' r='1.5' fill='%23fff' opacity='0' id='left-eye'%3E%3Canimate attributeName='opacity' values='0;0.8;0' dur='10s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='215' cy='145' r='1.5' fill='%23fff' opacity='0' id='right-eye'%3E%3Canimate attributeName='opacity' values='0;0.8;0' dur='10s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center/cover no-repeat;opacity:0;pointer-events:none;transition:opacity 8s ease-in;z-index:4}.stalker-active{opacity:.15}.glitch::before,.glitch::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;mix-blend-mode:screen;pointer-events:none;z-index:5}.glitch::before{left:4px;background:rgba(255,0,0,0.4);animation:glitch-anim-2 .3s infinite}.glitch::after{left:-4px;background:rgba(0,255,255,0.4);animation:glitch-anim-2 .2s infinite reverse}@keyframes noise-move{0%{transform:translate(0,0)}100%{transform:translate(4px,4px)}}@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}@keyframes flash{0%,100%{opacity:0}50%{opacity:.15}}@keyframes glitch-anim{0%{transform:translate(0)}20%{transform:translate(-8px,4px)}40%{transform:translate(-8px,-4px)}60%{transform:translate(8px,4px)}80%{transform:translate(8px,-4px)}100%{transform:translate(0)}}@keyframes glitch-anim-2{0%{transform:translate(0)}33%{transform:translate(-10px,-4px)}66%{transform:translate(10px,4px)}100%{transform:translate(0)}}.rec-dot{width:10px;height:10px;background:var(--cctv-red);border-radius:50%;animation:blink 1.2s infinite}@media(max-width:768px){.cctv-ui{padding:20px}.ui-left-panel{left:20px;scale:.8}.ui-right-panel{right:20px;scale:.8}.cam-btn{width:120px}}