/* security.css */
body { margin: 0; background: #000; overflow: hidden; font-family: monospace; }

#security-screen {
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #0a0a0a; color: #fff;
}

#id-badge {
    width: 220px; height: 320px;
    background: #e5e5e5; border-radius: 8px; color: #111;
    padding: 15px; box-shadow: 0 0 40px rgba(0,0,0,0.8);
    cursor: grab; border: 2px solid #333;
}

.badge-header { font-weight: bold; border-bottom: 2px solid #333; margin-bottom: 20px; }
.badge-photo-box { width: 140px; height: 140px; background: #fff; margin: 0 auto; border: 1px solid #999; }

#scanner-zone {
    width: 280px; height: 120px;
    border: 4px solid #1a1a1a; background: #050505;
    margin-top: 60px; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}

#laser-line {
    width: 100%; height: 2px; background: #f00;
    position: absolute; top: 0; animation: scan 2s infinite;
    box-shadow: 0 0 10px #f00;
}

@keyframes scan { 
    0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } 
}

/* MASTER CSS: OTF NETWORK HQ */
body, html { 
    margin: 0; padding: 0; width: 100%; height: 100%; 
    background: #000; color: #0f0; font-family: 'Courier New', monospace; 
    overflow: hidden;
}

/* 📼 CRT SCANLINE FILTER */
.crt-screen::before {
    content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 1000; background-size: 100% 2px, 3px 100%; pointer-events: none; opacity: 0.2;
}

/* 🔦 LIGHTING FILTER (Inverse Square Overlay) */
#light-filter {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 50; pointer-events: none; background-color: rgba(0, 0, 0, 0);
}

/* 📺 VHS POPUP UI */
#vhs-popup {
    position: fixed; bottom: 10%; left: 50%; transform: translateX(-50%);
    background: rgba(0, 20, 0, 0.95); border-left: 10px solid #ffff00;
    color: #fff; padding: 20px; z-index: 1100; display: none;
    min-width: 450px; box-shadow: 10px 10px 0px #000; text-transform: uppercase;
}

/* 🏢 PARALLAX LAYERING */
#world-container { position: relative; width: 100vw; height: 100vh; }
.layer { position: absolute; top: 0; left: 0; height: 100%; }

#bg-stage { display: flex; z-index: 1; height: 100%; transition: transform 0.1s ease-out; }
.bg-segment { height: 100%; position: relative; }
.bg-left { width: 1200px; }
.bg-break { width: 1600px; background: #1a1a1a; box-shadow: inset 100px 0 100px #000, inset -100px 0 100px #000; }
.bg-right { width: 800px; }
.wall-wood { background: url('woodfloor.png'); background-size: 400px; }

#mid-layer { z-index: 10; width: 100%; height: 100%; }
#office-track { position: absolute; display: flex; top: 40%; left: 0; align-items: center; gap: 28px; padding-left: 30px; }

#fg-layer { 
    position: fixed; bottom: 0; width: 100%; height: 22%; 
    z-index: 100; pointer-events: none; 
    background: url('Cubicle Wall.png'); background-size: 300px; background-repeat: repeat-x; background-position: center bottom;
    border-top: 8px solid #222;
}

/* PASSCODE PANEL */
#passcode-panel { position: fixed; left: 10px; top: 10px; background: rgba(0,0,0,0.75); color: #0f0; border: 2px solid #0f0; padding: 8px 12px; z-index: 1200; font-family: 'Courier New', monospace; }
#passcode-panel button { margin-left: 8px; background: transparent; border: 1px solid #0f0; color: #0f0; padding: 4px 8px; cursor: pointer; }

/* QUICK GLITCH EFFECT */
@keyframes quick-glitch { 0% { transform: none; } 20% { transform: skewX(2deg) translateX(4px); } 40% { transform: skewX(-2deg) translateX(-4px); } 60% { transform: none; } }
.glitch { animation: quick-glitch 0.6s linear; }