/* Phones and small screens (< 768px): icon grid, full-screen windows, compact taskbar. */
@media (max-width: 767px) {
  .icons {
    --art: 64px;
    position: absolute; inset: 10px 8px auto 8px;
    grid-auto-flow: row; grid-template-rows: none;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto;
    gap: 6px 4px;
  }
  .desk-icon { width: 100%; height: auto; padding: 6px 0 4px; }
  .di-label { width: 100%; max-width: 154px; height: auto; aspect-ratio: 154 / 29; }

  .win[data-mode="full"] {
    position: absolute; inset: 0 !important;
    width: auto !important; height: auto !important; min-width: 0;
    animation: win-slide 180ms var(--ease-out);
  }
  @keyframes win-slide { from { transform: translateY(24px); opacity: 0; } }
  /* The landing reel sits above the taskbar so the icon grid stays visible. */
  .win[data-mode="full"][data-fit="compact"] { top: auto !important; height: auto !important; }
  .win[data-mode="full"] .win-btn[data-act="min"], .win[data-mode="full"] .win-btn[data-act="max"] { display: none; }
  .win[data-mode="full"] .win-title { height: 34px; font-size: var(--fs-m); }
  .win[data-mode="full"] .win-btn { width: 30px; height: 26px; }
  .win[data-mode="full"] .win-body { overflow: auto; }

  .player { flex-direction: column; }
  .pl-frame { width: 100%; }
  .pl-credits { width: auto; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 10px; }
  .contact { flex-direction: column; align-items: stretch; }
  .phone { align-self: center; width: min(300px, 100%); }
  .np-figure { float: none; width: min(220px, 70%); margin: 0 0 12px; }

  .start-btn span { display: none; }
  .start-btn { padding: 2px 4px; }
  .task-btn { width: auto; flex: 0 1 140px; }
  .tray a[data-kind] { display: none; }
}
@media (max-width: 479px) {
  .icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}