:host { position: absolute; inset: 0; pointer-events: none; }
.scene-art { position: absolute; inset: 0; overflow: hidden; background: var(--dark); }
.sky { position: absolute; inset: 0; background: linear-gradient(145deg, var(--dark) 4%, var(--base) 54%, #111614 100%); transition: filter .8s ease; }
.light { position: absolute; border-radius: 50%; opacity: .22; filter: blur(35px); }.light-a { top: -25%; right: 7%; width: 42vw; height: 70vh; background: var(--glow); }.light-b { bottom: -30%; left: 8%; width: 40vw; height: 55vh; background: var(--accent); opacity: .12; }
.grid { position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 6vh 6vh; perspective: 400px; transform: rotateX(58deg) scale(1.6) translateY(32%); transform-origin: bottom; }
.cloud { position: absolute; height: 24%; border-radius: 50%; background: #080c0b; filter: blur(24px); opacity: .72; }.cloud-a { top: -8%; left: -5%; width: 65%; }.cloud-b { top: 5%; right: -8%; width: 58%; opacity: .55; }
.tower { position: absolute; bottom: 7%; width: 15%; height: 75%; }.tower-a { right: 15%; }.tower-b { right: 37%; bottom: 14%; transform: scale(.62); opacity: .52; }
.tower-mast { position: absolute; right: 48%; bottom: 0; width: 3%; height: 77%; background: #080b0a; box-shadow: -2.2vh 4vh 0 -1vh #080b0a, 2.2vh 4vh 0 -1vh #080b0a; }.tower-mast::before,.tower-mast::after { position: absolute; left: 50%; width: 6vh; height: 1px; background: #48544f; content: ''; transform-origin: left; }.tower-mast::before { top: 27%; transform: rotate(32deg); }.tower-mast::after { top: 48%; transform: rotate(-32deg); }
.tower-dish { position: absolute; top: 4%; left: 18%; width: 62%; height: 27%; border: 1.2vh solid #0b100e; border-top-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-42deg); }
.tower-wave { position: absolute; top: -2%; left: 55%; width: 7vh; height: 7vh; border: .3vh solid var(--accent); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: .55; animation: wave 2s ease-out infinite; }.tower-wave.w2 { width: 12vh; height: 12vh; animation-delay: .65s; }
.bunker { position: absolute; right: 0; bottom: 0; width: 38%; height: 24%; background: #0b100e; clip-path: polygon(10% 18%, 78% 0, 100% 28%, 100% 100%, 0 100%, 0 36%); }.bunker-window { position: absolute; top: 39%; left: 35%; width: 19%; height: 19%; background: var(--glow); box-shadow: 0 0 18px var(--glow); opacity: .58; }.bunker-door { position: absolute; right: 12%; bottom: 0; width: 16%; height: 48%; background: #030504; }
.rain-field { position: absolute; inset: 0; transform: skewX(-9deg); }.rain-streak { position: absolute; top: -12%; width: 1px; height: 12vh; background: linear-gradient(transparent, rgba(205,224,217,.45)); animation: rain 1.2s linear infinite; }
.sun-disc { position: absolute; top: 9%; right: 14%; width: 19vh; height: 19vh; border-radius: 50%; background: var(--glow); box-shadow: 0 0 60px rgba(239,210,118,.4); opacity: .67; }
.ridge { position: absolute; right: -5%; bottom: 0; left: -5%; background: #17211d; clip-path: polygon(0 100%,0 65%,9% 43%,18% 58%,29% 22%,40% 62%,52% 35%,63% 68%,76% 25%,86% 51%,100% 38%,100% 100%); }.ridge-back { height: 66%; opacity: .42; transform: translateY(4%); }.ridge-mid { height: 52%; background: #111a16; opacity: .75; transform: translateX(8%); }.ridge-front { height: 35%; background: #09100d; }
.road { position: absolute; bottom: -20%; left: 38%; width: 18%; height: 70%; border-right: 2px solid rgba(244,232,191,.22); border-left: 2px solid rgba(244,232,191,.22); background: rgba(84,87,67,.23); transform: perspective(200px) rotateX(38deg) rotate(-18deg); }.road-b { left: 56%; bottom: 17%; height: 42%; transform: rotate(42deg); opacity: .45; }
.checkpoint-flag { position: absolute; top: 25%; right: 27%; width: 2px; height: 25%; background: rgba(255,255,255,.65); }.flag-cloth { width: 8vh; height: 4.5vh; background: var(--accent); clip-path: polygon(0 0,100% 14%,82% 100%,0 80%); }
.barracks-wall { position: absolute; inset: 9% 4% 7%; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(90deg, transparent 64%, rgba(0,0,0,.3) 64%); }.window { position: absolute; top: 14%; left: 9%; width: 24%; height: 30%; border: 1.2vh solid #151714; background: rgba(242,213,150,.15); box-shadow: 0 0 50px rgba(242,213,150,.1); }.window-cross::before,.window-cross::after { position: absolute; background: #171917; content: ''; }.window-cross::before { top: 48%; width: 100%; height: 1vh; }.window-cross::after { left: 48%; width: 1vh; height: 100%; }
.ceiling-light { position: absolute; top: 5%; left: 46%; width: 18%; height: 2vh; background: var(--glow); box-shadow: 0 0 55px 12px rgba(242,213,150,.24); opacity: .75; }.floor-line { position: absolute; left: 4%; bottom: 7%; width: 92%; height: 1px; background: rgba(255,255,255,.12); }.f1 { transform: rotate(-12deg); }.f2 { transform: rotate(12deg); }.f3 { left: 50%; bottom: 0; width: 1px; height: 54%; }
.locker-silhouette { position: absolute; right: 9%; bottom: 8%; width: 22%; height: 66%; border: 1px solid #2e302c; background: #121411; box-shadow: inset 0 -30px 0 rgba(0,0,0,.2); }.bed-silhouette { position: absolute; left: 7%; bottom: 8%; width: 40%; height: 16%; border: 1.2vh solid #111310; background: #292a24; transform: skewX(-10deg); }
.dust-field { position: absolute; inset: 0; }.dust { position: absolute; border-radius: 50%; background: var(--glow); opacity: .25; animation: dust 8s ease-in-out infinite; }
.scanlines { position: absolute; inset: 0; opacity: .06; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #fff 4px); }.vignette { position: absolute; inset: 0; box-shadow: inset 0 0 14vh 5vh rgba(0,0,0,.78); }
.phase-operation .sky { filter: saturate(1.15) brightness(.9); }.paused .dust,.paused .rain-streak,.paused .tower-wave,.reduced .dust,.reduced .rain-streak,.reduced .tower-wave { animation-play-state: paused; }.reduced .dust,.reduced .rain-streak,.reduced .tower-wave { display: none; }
@keyframes rain { to { transform: translateY(125vh); } } @keyframes wave { from { opacity: .6; transform: scale(.4); } to { opacity: 0; transform: scale(1.35); } } @keyframes dust { 0%,100% { transform: translate(0,0); opacity: .08; } 50% { transform: translate(1.5vh,-3vh); opacity: .32; } }