/* === BOOT & REBOOT STYLES === */
#boot-overlay, #reboot-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  z-index: 100000; cursor: none;
  background: rgba(0,0,0,1);
}
#boot-overlay .boot-text { font-family: 'Courier New', monospace; color:#00ff00; font-size:28px; text-shadow:0 0 6px #00ff00; }
#reboot-overlay { display:none; opacity:0; }
#reboot-overlay .reboot-text { font-family:'Courier New', monospace; color:#ff0000; font-size:32px; text-shadow:0 0 8px #ff0000; }
#boot-overlay.hidden { animation: flicker-out 1.5s forwards ease-in-out; }
#reboot-overlay.visible { display:flex; animation: fade-in 0.8s forwards ease; }
#reboot-overlay.hidden { animation: flicker-out 1.2s forwards ease-in-out; }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes flicker-out {
  0%{opacity:1} 20%{opacity:.8} 30%{opacity:1} 50%{opacity:.4} 60%{opacity:.9} 80%{opacity:.2} 100%{opacity:0;visibility:hidden}
}

/* === BASE / BACKGROUNDS / SPOTLIGHT / CRT === */
html, body { height:100%; margin:0; padding:0; cursor:none; font-family: Arial, sans-serif; }
body {
  background: url("Backgrounds/main_bg.jpg") center center fixed;
  background-size: 150% 150%;
  transition: background-position .12s linear, background-size .3s ease;
}
body.secret-mode {
  background: url("Backgrounds/secret_bg2.gif") center center fixed;
  background-size: 150% 150%;
}
body::before {
  content: "";
  position: fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  background: radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),
    rgba(255,255,255,0.08) 100px,
    rgba(0,0,0,0.85) 420px);
  z-index: 30;
}
body::after {
  content:""; position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0.12) 0px,
      rgba(0,0,0,0.12) 2px,
      transparent 2px,
      transparent 4px),
    radial-gradient(circle at center, rgba(0,0,0,0.06), rgba(0,0,0,0.5));
  mix-blend-mode: multiply;
  z-index: 50;
  animation: crt-flicker 0.06s infinite alternate;
  opacity: 1;
}
@keyframes crt-flicker { 0%{opacity:0.82;filter:brightness(.95);} 25%{opacity:0.95;filter:brightness(1.05);} 50%{opacity:1;filter:brightness(.9);} 75%{opacity:0.92;filter:brightness(1.08);} 100%{opacity:0.86;filter:brightness(.9);} }

/* === RETRO CURSOR === */
#retro-cursor {
  position: fixed;
  width: 26px; height: 26px;
  background: url('UntitledAssets/retro-cursor2.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

/* === DESKTOP ICONS === */
#desktop { position: fixed; top:10px; left:10px; z-index:10; display:grid; grid-template-columns: repeat(3,1fr); grid-gap:20px; width:calc(3*100px + 2*20px); }
.icon { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100px; height:100px; user-select:none; cursor:pointer; }
.icon img { width:80px; height:80px; display:block; }
.icon span { margin-top:6px; color:#fff; text-shadow:1px 1px 2px #000; font-size:12px; }
#icon1 { grid-column:1/2; grid-row:1 } #icon2 { grid-column:2/3; grid-row:1 } #icon3 { grid-column:3/4; grid-row:1 }
#icon4 { grid-column:1/2; grid-row:2 } #icon5 { grid-column:2/3; grid-row:2 } #icon6 { grid-column:1/4; grid-row:3 }
#icon7, #icon8 { position: fixed; bottom: 180px; z-index: 15; } #icon7 { right: 120px; } #icon8 { right: 230px; }
#icon9 { position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:70; display:none; opacity:0; pointer-events:none; }
#icon9.show-glitch { display:flex; opacity:1; pointer-events:auto; animation: glitchy-appear .45s ease; }
@keyframes glitchy-appear { 0%{ opacity:0; transform:translate(-50%,-50%) skewX(-8deg) } 100%{ opacity:1; transform:translate(-50%,-50%) skewX(0deg) } }

/* === WINDOWS / POPUPS === */
.window { position: fixed; width: 420px; height: 320px; background: #fff; border: 2px solid #000; display:none; z-index: 55; top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
.window-header { background:#222; color:#fff; padding:6px 8px; display:flex; align-items:center; justify-content:space-between; cursor:grab; user-select:none; }
.window-content { padding:12px; height: calc(100% - 40px); overflow:auto; color:#222; }
.close-btn { background:none; border:none; color:#fff; font-weight:bold; cursor:pointer; }
#lightbox { z-index: 9999 }

/* === TASKBAR === */
#taskbar { position: fixed; bottom:0; left:0; width:100%; height:44px; background:#ebae8e; display:flex; align-items:center; padding:0 10px; z-index:10; border-top:2px solid #555; }
.taskbar-start { margin-right:12px; }
.taskbar-start button { background:#ebae8e; border:1px solid #555; color:#fff; padding:6px 10px; cursor:pointer; font-weight:bold; }
#taskbar-windows { display:flex; align-items:center; gap:6px; }
.taskbar-window-button { width:40px; height:36px; padding:4px; background:#111; border:2px solid #222; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.taskbar-window-button img { max-width:100%; max-height:100%; display:block; }

/* small responsive tweaks */
@media (max-width:700px) {
  .window { width: 92%; height: 70%; left: 50%; transform: translateX(-50%); top:50% }
}

/* header glitch styling (small, subtle but creepy) */
.window-header span.header-glitch {
  color: #ff5a5a;
  text-shadow:
    0 0 6px rgba(255,90,90,0.7),
    -1px 0 1px rgba(0,0,0,0.6);
  transition: color 80ms linear, text-shadow 80ms linear;
}

/* Slight jitter so text seems to "twitch" */
.window-header span.header-glitch {
  display: inline-block;
  transform-origin: center;
  animation: header-jitter 120ms linear;
}
@keyframes header-jitter {
  0% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  25% { transform: translateX(-1px) translateY(0px) rotate(-0.6deg); }
  50% { transform: translateX(1px) translateY(-1px) rotate(0.6deg); }
  75% { transform: translateX(-1px) translateY(1px) rotate(-0.4deg); }
  100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
}