/* =========================================================
   DESKTOP — teal background, left icon column, Recycle Bin
   ========================================================= */
.os { position: fixed; inset: 0; overflow: hidden; background: var(--teal); }

.desktop { position: absolute; inset: 0 0 4.5rem 0; }

.window-layer { position: absolute; inset: 0 0 4.5rem 0; pointer-events: none; }
.window-layer > * { pointer-events: auto; }

.desktop-icons {
  position: absolute;
  left: 2.9rem;
  top: 4.2rem;
  display: flex;
  flex-direction: column;
}

.desktop-icon {
  width: 10.6rem;
  height: 8.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: 0;
  color: #fff;
  outline: none;
}
.desktop-icon .ico { width: 4.6rem; height: 4.6rem; }
.desktop-icon__label {
  font-size: 1.7rem;
  line-height: 1.15;
  padding: 0 0.2rem;
  text-align: center;
  white-space: nowrap;
}
.desktop-icon.is-selected .ico {
  filter: brightness(0.62) sepia(1) hue-rotate(190deg) saturate(5);
}
.desktop-icon.is-selected .desktop-icon__label {
  background: var(--navy);
  outline: 1px dotted #ffff80;
}
.desktop-icon:focus-visible .desktop-icon__label { outline: 1px dotted #fff; }

.desktop-icon--recycle {
  position: absolute;
  right: 3.2rem;
  bottom: 2.6rem;
  height: auto;
}
.desktop-icon--recycle .ico { width: 5.6rem; height: 5.6rem; }
.desktop-icon--recycle .desktop-icon__label { font-size: 1.8rem; }

/* ---------- MOBILE (ver el bloque equivalente en window.css) ---------- */

/* El escritorio y las ventanas dejan sitio a la taskbar y, cuando lo hay, a la
   franja inferior del teléfono. Sin notch, env() vale 0 y no cambia nada. */
[data-mobile] .desktop,
[data-mobile] .window-layer { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

/* Los iconos venían pegados sin ninguna separación: un toque impreciso
   seleccionaba el de al lado. */
[data-mobile] .desktop-icons {
  left: calc(2.9rem + env(safe-area-inset-left, 0px));
  top: calc(4.2rem + env(safe-area-inset-top, 0px));
  gap: 1rem;
  /* Con el teléfono en horizontal quedan 349 px de escritorio y la columna mide 474:
     ASKR RADIO se metía debajo de la taskbar y ABOUT caía fuera de la pantalla, sin
     forma de abrirlo desde el escritorio (medido en 844x390 y 932x430). Windows 98
     hacía exactamente esto cuando los iconos no cabían de alto: seguir en una segunda
     columna. En vertical sobra sitio y la columna no se parte, así que no cambia nada. */
  max-height: calc(100% - 5.2rem - env(safe-area-inset-top, 0px));
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 1.4rem;
}
[data-mobile] .desktop-icon--recycle { right: calc(3.2rem + env(safe-area-inset-right, 0px)); }