/* Desktop: wallpaper, icons and their labels. */
.desktop { position: fixed; inset: 0 0 var(--taskbar-h) 0; overflow: hidden; }

.wallpaper {
  position: absolute; inset: 0;
  background: var(--fallback-wallpaper) center / cover no-repeat;
  transition: opacity 0.8s ease;
}
.wallpaper-caption {
  position: absolute; right: 12px; bottom: 8px; max-width: 60%;
  padding: 2px 8px; border-radius: 3px;
  background: rgb(0 0 0 / 0.45); color: var(--white);
  font: italic 11px var(--ui-font); text-align: right;
}

.icons { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.icon, .icons__header { position: absolute; top: 0; left: 0; }
.icons__header {
  width: 76px; text-align: center;
  color: var(--white); font: 700 10px var(--ui-font); letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: 1px 1px 1px #000, 0 0 3px #000;
}

/* XP icons: a square image, a white label with a drop shadow, a blue highlight when selected. */
.icon__button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 76px; padding: 2px;
  background: none; border: 0;
  cursor: default; touch-action: none;
}
.icon__button:focus-visible { outline: none; }
.icon__button img, .icon__placeholder { width: var(--icon-size); height: var(--icon-size); filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 0.45)); }
.icon__button:focus img, .icon__button:focus .icon__placeholder { filter: drop-shadow(1px 2px 1px rgb(0 0 0 / 0.45)) sepia(1) hue-rotate(180deg) saturate(3) brightness(0.85); }
.icon__placeholder {
  display: grid; place-items: center;
  border-radius: 8px; background: linear-gradient(160deg, var(--blue-300), var(--blue-700));
  color: var(--white); font-size: 18px; font-weight: 700;
}
/* Contrast: a heavy shadow keeps white labels readable on bright paintings, as XP did. */
.icon__label {
  max-width: 74px; padding: 0 2px;
  color: var(--white); font: 11px/1.2 var(--ui-font); text-align: center;
  text-shadow: 1px 1px 1px #000, 0 0 2px #000, 0 0 4px rgb(0 0 0 / 0.8);
}
.icon__button:focus .icon__label { background: var(--select); text-shadow: none; outline: 1px dotted #fff; }

/* Sticky note: our own paper note pinned near the top of the desktop. */
.sticky-note {
  position: absolute;
  top: 36px;
  left: clamp(340px, 42vw, 640px);
  z-index: 1;
  width: 240px;
  padding: 26px 18px 14px;
  background: linear-gradient(180deg, #fff59a, #ffe96b);
  box-shadow: 3px 6px 14px rgb(0 0 0 / 0.35);
  transform: rotate(-1.5deg);
  color: #2b2a1f;
  font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  font-size: 19px;
  line-height: 1.2;
}
.sticky-note__pin {
  position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; margin-left: -9px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a80, #c62828 60%, #7f1515);
  box-shadow: 1px 3px 4px rgb(0 0 0 / 0.4);
}
.sticky-note h2 { margin: 0 0 6px; font-size: 26px; font-weight: 700; }
.sticky-note p { margin: 0 0 4px; }
.sticky-note ul { margin: 0 0 10px; padding-left: 16px; }
.sticky-note li { margin-bottom: 4px; list-style: "– "; }
.sticky-note button {
  display: block; padding: 0; border: 0; background: none; color: #1c4fc4;
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sticky-note__footer { margin-top: 8px; font-size: 15px; color: #5a5640 !important; white-space: nowrap; }
/* Phones (s7): icon rows under full-width group headers, a small note below them, the owl beside it.
   The painting's credit is hidden here (it sat under the owl); Display Properties still shows it. */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  /* Short phones: the desktop scrolls so the note is never cut off; wallpaper and windows stay put. */
  .desktop { overflow-y: auto; overscroll-behavior: contain; }
  .wallpaper { position: fixed; inset: 0 0 var(--taskbar-h) 0; }
  .windows { position: fixed; inset: 0 0 var(--taskbar-h) 0; }
  .icon__button { touch-action: manipulation; } /* phones keep icons fixed, so a finger on one can still scroll */
  .wallpaper-caption { display: none; }
  .icons__header {
    width: calc(100vw - 12px); padding-bottom: 2px; text-align: left; font-size: 12px;
    border-bottom: 1px solid rgb(255 255 255 / 0.55); box-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
  }
  .sticky-note {
    top: calc(var(--icons-bottom, 380px) + 18px); bottom: auto; left: 16px; right: auto;
    width: min(210px, calc(100vw - 132px)); padding: 18px 12px 10px; font-size: 15px; transform: rotate(-1.2deg);
  }
  .sticky-note h2 { font-size: 21px; margin-bottom: 2px; }
  .sticky-note p { margin-bottom: 4px; }
  .sticky-note ul { margin-bottom: 6px; }
  .sticky-note li { margin-bottom: 2px; }
  .sticky-note__footer { font-size: 13px; white-space: normal; }
  .sticky-note__link { margin-bottom: 4px; padding: 4px 0 !important; } /* two stacked links: room between taps */
}