/* =============================================
   icons.css
   Purpose: Desktop icon grid layout and
   individual icon appearance + interactions.
   ============================================= */


/* ----------------------------
   ICON GRID CONTAINER
   Sits in the bottom-left of the desktop,
   above the taskbar, like a real OS.
   ---------------------------- */
.desktop-icons {
  position: absolute;
  top: 10%;
  left: 24px;
  display: grid;
  grid-template-columns: repeat(4, 80px);
  /*
    grid-template-columns defines how many columns
    and how wide each one is.
    repeat(2, 80px) = two columns, each 80px wide.
    Icons stack in 2 columns down the left side.
  */
  gap: 24px 16px;
  /*
    gap: row-gap column-gap.
    24px between rows, 16px between columns.
  */
  z-index: 50;
  padding-bottom: 48px;
  /*
    Padding at bottom keeps icons above the taskbar.
  */
}


/* ----------------------------
   INDIVIDUAL ICON
   ---------------------------- */
.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: 80px;
  padding: 6px;
  border: 2px solid transparent;
  /*
    Transparent border by default —
    becomes visible on hover/focus.
    Pre-allocating the border space means
    the layout won't shift when it appears.
  */
  transition: border-color 0.1s, background 0.1s;
  user-select: none;
  border-radius: 2px;
}

.desktop-icon:hover {
  border-color: rgba(255, 110, 180, 0.5);
  background: rgba(255, 110, 180, 0.1);
  /*
    Subtle pink highlight on hover —
    classic OS icon selection feel.
  */
}

.desktop-icon:active {
  background: rgba(255, 110, 180, 0.25);
  /*
    Slightly stronger on click/active state.
  */
}

/* Selected state — added by JS on single click */
.desktop-icon.selected {
  border-color: rgba(255, 110, 180, 0.7);
  background: rgba(255, 110, 180, 0.2);
}


/* ----------------------------
   ICON IMAGE
   Your pixel art from Aseprite.
   ---------------------------- */
.desktop-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  /*
    object-fit: contain scales the image to fit
    within 48x48 without cropping or stretching.
    Perfect for pixel art of varying dimensions.
  */
  image-rendering: pixelated;
  /*
    This is CRITICAL for pixel art.
    Without it, the browser smooths/blurs the pixels
    when scaling. pixelated keeps the crisp edges.
  */
}


/* ----------------------------
   ICON LABEL
   The text below each icon.
   ---------------------------- */
.desktop-icon span {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: white;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
  /*
    word-break: break-word allows long labels
    to wrap onto two lines instead of overflowing.
  */

  /* Text shadow so label is readable over any background */
  text-shadow:
    1px  1px 0px rgba(0,0,0,0.9),
    -1px 1px 0px rgba(0,0,0,0.9),
    1px -1px 0px rgba(0,0,0,0.9),
    0px  1px 2px rgba(0,0,0,0.8);
  /*
    Four directional shadows = a dark outline on all sides.
    This makes white text readable on both light and dark
    backgrounds — essential for a desktop wallpaper.
  */
}

/* ----------------------------
   ICON HOVER FLOAT
   Icons lift gently when hovered.
   ---------------------------- */
.desktop-icon {
  transition: transform 0.2s ease, border-color 0.1s, background 0.1s;
  /*
    Add transform to the existing transition list.
  */
}

.desktop-icon:hover {
  transform: translateY(-4px);
  /*
    Moves icon 4px upward on hover.
    Combined with the existing border/background
    change = feels very alive and responsive.
  */
}

/* ----------------------------
   TABLET & PHONE LAYOUT
   Icons move near the taskbar so there's
   no shared vertical space with the logo,
   regardless of exact screen width.
   ---------------------------- */
@media (max-width: 1024px) {
  .desktop-icons {
    top: 34%;
    bottom: auto;
    left: 16px;
    grid-template-columns: repeat(4, 64px);
    gap: 14px 10px;
    padding-bottom: 0;
  }

  .desktop-icon {
    width: 64px;
  }

  .desktop-icon img {
    width: 38px;
    height: 38px;
  }

  .desktop-icon span {
    font-size: 0.55rem;
  }
}

@media (max-width: 600px) {
  .desktop-icons {
    top: 30%;
    left: 10px;
    grid-template-columns: repeat(4, 58px);
    gap: 12px 8px;
  }

  .desktop-icon {
    width: 58px;
  }

  .desktop-icon img {
    width: 34px;
    height: 34px;
  }

  .desktop-icon span {
    font-size: 0.5rem;
  }
}

/* ----------------------------
   LANDSCAPE TABLET / SMALLER DESKTOP
   Enough width for icons + logo side-by-side,
   but needs a narrower icon grid (3 columns)
   and a smaller logo cap to avoid collision.
   ---------------------------- */
@media (min-width: 1025px) and (max-width: 1500px) {
  .desktop-icons {
    grid-template-columns: repeat(3, 72px);
    gap: 14px 12px;
    left: 16px;
  }

  .desktop-icon {
    width: 72px;
  }

  .desktop-icon img {
    width: 40px;
    height: 40px;
  }

  .desktop-icon span {
    font-size: 0.58rem;
  }
}