/* ===============================
   DESKTOP ICON LAYOUT (like Win95)
================================== */
#desktop{
  position: fixed;
  inset: 38px 0 38px 0;          /* your bars */
  z-index: 4;
  padding: 18px;

  display: grid;
  grid-auto-flow: column;        /* fill DOWN first */
  grid-template-rows: repeat(var(--rows, 6), 110px); /* rows set by JS */
  grid-auto-columns: 110px;      /* width of each column */
  gap: 12px 22px;                /* row gap, column gap */
  align-content: start;
  justify-content: start;

  overflow: hidden;              /* no scrolling; wraps to new columns */
}

/* Full-screen GIF layer & overlay order */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background: url("/Assets/GIFS/f55b0f3e0d9b878ed9192b8358fd1480.gif")
              center/cover no-repeat fixed;
  image-rendering: pixelated;
  filter: contrast(1.1) brightness(0.9) saturate(1.05);
  pointer-events: none;
  z-index: -1 !important;      /* below stars/noise/desktop */
}
#stars{ z-index: 2 !important; }
#noiseOverlay{ z-index: 3 !important; }
#desktop{ z-index: 4 !important; }
.win{ z-index: 6 !important; }
#taskbar{ z-index: 8 !important; }

/* Desktop icons */
#desktop .icon{
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: #fff;
  cursor: pointer;
  gap: 6px;
  filter: drop-shadow(0 0 6px rgba(0,255,255,.4));
}
#desktop .icon img{
  width:48px; height:48px;      /* enforce size */
  image-rendering:pixelated;
  object-fit:contain;
}

/* Safety: any loose images in desktop area won’t explode layout */
#desktop img{ max-width:96px; max-height:96px; }

/* Desktop Buddy */
#desktopBuddy{position:fixed;right:10px;bottom:50px;z-index:9999;pointer-events:none}
#desktopBuddy img{width:64px;height:auto;image-rendering:pixelated}

/* Projects (generic media preview tiles) */
#projects .media{position:relative;width:100%;height:160px;margin-bottom:10px;border:1px dashed var(--neon-pink);overflow:hidden}
#projects .media iframe,#projects .media img,#projects .media video{width:100%;height:100%;object-fit:cover;border:none}
.media.pixelated iframe,.media.pixelated img,.media.pixelated video{filter:grayscale(70%) contrast(250%) brightness(85%);image-rendering:pixelated;transition:filter .25s ease,image-rendering .25s ease}
.media.pixelated:hover iframe,.media.pixelated:hover img,.media.pixelated:hover video,.media.pixelated:focus-within iframe,.media.pixelated:focus-within img,.media.pixelated:focus-within video{filter:none;image-rendering:auto}
.media.pixelated .unpixelate{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);color:#fff;font-family:'Press Start 2P';font-size:11px;text-shadow:0 0 6px #0ff, 0 0 12px #f0f;cursor:pointer;z-index:3}

/* == GIF Box (viewport-anchored) == */
#gifBox {
  position: fixed;        /* stays at screen corner on scroll */
  bottom: 430px;           /* offset from bottom */
  right: 770px;            /* offset from right */
  z-index: 2;         /* above your windows/taskbar */
  pointer-events: none;   /* lets clicks pass through; remove if you need clicks */
  width: 240px;           /* force box width */
  height: 190px;          /* force box height */
  overflow: hidden;       /* crop overflow if needed */
}

#gifBox img {
  display: block;
  width: 100%;            /* stretch to 200px wide */
  height: 100%;           /* stretch to 200px tall */
  object-fit: fill;       /* distort to fill exact box */
  image-rendering: pixelated;
}