/* Corruption & glitch effects */
#fxLayer { position: absolute; inset: 0; pointer-events: none; z-index: 8500; }

#wallface { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center 40%; background-size: 800px 600px;
  opacity: 0; transition: opacity 1.4s; pointer-events: none; mix-blend-mode: screen; }
#wallface.show { opacity: 0.3; }

.icon.jitter { animation: jitter 0.08s steps(2) 8; }
@keyframes jitter { 0% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 100% { transform: translate(-1px, -2px); } }

.label.glitched { color: #f33 !important; font-family: "Courier New", monospace; }

.tear { position: absolute; left: 0; right: 0; height: 18px; background: rgba(255,255,255,0.08); mix-blend-mode: difference;
  box-shadow: 0 0 0 1px rgba(0,255,255,0.3); animation: tear 0.25s steps(3) 1 forwards; }
@keyframes tear { 0% { transform: translateX(-20px); } 50% { transform: translateX(30px); } 100% { transform: translateX(0); opacity: 0; } }

.scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px); }

#game.glitch { animation: glitchShift 0.3s steps(4) infinite; }
@keyframes glitchShift {
  0% { filter: none; transform-origin: 0 0; }
  25% { filter: hue-rotate(90deg) saturate(3); }
  50% { filter: invert(1); }
  75% { filter: contrast(3) brightness(0.8); }
}
.flash { position: absolute; inset: 0; background: #fff; animation: flash 0.4s ease-out forwards; }
@keyframes flash { from { opacity: 0.9; } to { opacity: 0; } }

.shake { animation: shake 0.12s linear infinite; }
@keyframes shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, -3px); } }

.fade-black { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 1.5s; }
.fade-black.on { opacity: 1; }

/* ── animation helpers ───────────────────────────── */
#screen { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; background: var(--desk); }
.zoomrect { position: absolute; border: 2px solid #808080; outline: 1px dotted #fff; pointer-events: none; }
.particle { position: absolute; pointer-events: none; image-rendering: pixelated; }
.trail { position: absolute; width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }

.ghost.lifted { opacity: 0.85; filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.3)); }
.icon.dragging-src { opacity: 0.45; }

.icon.folder.drop-hover img { transform: scale(1.12); }
.icon.folder[data-folder="QUARANTINE"].drop-hover img { filter: drop-shadow(0 0 3px #ff3b30); }
.icon.hov:not(.dragging-src) img { transform: translateY(-1px); }
.icon img { transition: transform 0.12s; }

#startMenu:not(.hidden) { animation: menuUp 0.16s steps(4, end); transform-origin: bottom left; }
@keyframes menuUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }


/* ── CRT glass ───────────────────────────────────── */
#crt { position: absolute; inset: 0; pointer-events: none; z-index: 9990; display: none; overflow: hidden; }
#game.crt #crt { display: block; }
#game.crt { background: #000; }
/* scanlines live inside #screen so the barrel filter bends them with the picture */
#scan { position: absolute; inset: 0; pointer-events: none; z-index: 9800; display: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 1px, rgba(255,255,255,0.025) 1px 2px, transparent 2px 3px); }
#game.crt #scan { display: block; }
#crt::after { /* vignette: darker toward the curved edges, like light falling off the tube */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 58%, rgba(0,0,0,0.25) 82%, rgba(0,0,0,0.65) 100%);
}
#crt .glare { position: absolute; inset: 0;
  background: linear-gradient(128deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 22%, transparent 38%),
              radial-gradient(ellipse 60% 30% at 28% 6%, rgba(255,255,255,0.08), transparent 70%); }
#crt .roll { position: absolute; left: 0; right: 0; top: 0; height: 140px;
  background: linear-gradient(transparent, rgba(255,255,255,0.045) 45%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.045) 55%, transparent);
  animation: roll 9s linear infinite; }
@keyframes roll { from { transform: translateY(-160px); } to { transform: translateY(780px); } }
#crt .flicker { position: absolute; inset: 0; background: rgba(255,255,255,0.018); animation: flick 0.12s steps(2) infinite; }
@keyframes flick { 50% { opacity: 0; } }
#game.crt .icon .label, #game.crt .ov-black { text-shadow: 0 0 3px rgba(255,255,255,0.35); }
#game.crt .ov-black .ok { text-shadow: 0 0 6px rgba(63,220,90,0.8); }
#game.crt .title-logo h1 { text-shadow: 3px 3px 0 #0a5a1a, 0 0 14px rgba(63,220,90,0.6); }
@media (prefers-reduced-motion: reduce) { #crt .roll, #crt .flicker { animation: none; } }

/* small screens: scanlines alias into bands, so soften them */
#game.crt.crt-lite #scan { background: repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 5px); }

/* ── atmosphere: the desktop drains of color and the edges close in, day by day ── */
#game.day-2 #desktop { filter: saturate(0.92); }
#game.day-3 #desktop { filter: saturate(0.8) brightness(0.95); }
#game.day-4 #desktop { filter: saturate(0.62) brightness(0.86) contrast(1.05); }
#game.day-5 #desktop { filter: saturate(0.7) brightness(0.8) contrast(1.08); }
#game.day-3 #fxLayer { box-shadow: inset 0 0 120px rgba(0,0,0,0.25); }
#game.day-4 #fxLayer { box-shadow: inset 0 0 170px rgba(0,0,0,0.45); }
#game.day-5 #fxLayer { box-shadow: inset 0 0 200px rgba(0,0,0,0.6); }
.icon.phantom { pointer-events: none; }
.ghostcursor { position: absolute; left: 0; top: 0; width: 13px; height: 20px; pointer-events: none; z-index: 9600; }
.ov-black .warn { color: #e8b830; }