/* Sprite defs (inline in index.html) — keep off-screen */
.desktop-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.desktop-icon-svg {
  display: block;
  width: 32px;
  height: 32px;
}

.desktop-taskbar {
  position: absolute;
  top: 80px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 40;
}

.desktop-icon {
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-align: center;
}

.desktop-icon-box {
  width: 60px;
  height: 60px;
  border: 2px solid var(--ink-black);
  background-color: var(--acid-green);
  color: var(--ink-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.1s,
    background-color 0.1s,
    border-color 0.1s,
    box-shadow 0.1s,
    color 0.1s;
}

.desktop-icon:hover .desktop-icon-box {
  background-color: var(--hot-pink);
}

.desktop-icon:active .desktop-icon-box {
  transform: scale(0.95);
}

.desktop-icon-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--acid-green);
  max-width: 70px;
  word-break: break-word;
  /* thick outline so labels stay readable on busy halftone */
  text-shadow:
    0 0 3px var(--ink-black),
    0 0 6px var(--ink-black),
    -1px -1px 0 var(--ink-black),
    1px -1px 0 var(--ink-black),
    -1px 1px 0 var(--ink-black),
    1px 1px 0 var(--ink-black),
    -1px 0 0 var(--ink-black),
    1px 0 0 var(--ink-black),
    0 -1px 0 var(--ink-black),
    0 1px 0 var(--ink-black),
    -2px 0 0 var(--ink-black),
    2px 0 0 var(--ink-black),
    0 -2px 0 var(--ink-black),
    0 2px 0 var(--ink-black);
}

@media (max-width: 768px) {
  .desktop-icon-svg {
    width: 26px;
    height: 26px;
  }

  .desktop-taskbar {
    top: 50px;
    left: 10px;
    gap: 1.5rem;
  }

  .desktop-icon {
    width: 55px;
  }

  .desktop-icon-box {
    width: 48px;
    height: 48px;
  }

  .desktop-icon-label {
    font-size: 0.62rem;
    max-width: 55px;
  }
}