/*
 * Magic16 — responsive. Breakpoints: mobile ≤640 · tablet 641–1024 · desktop ≥1025.
 * No horizontal scroll at any width. The Win98 window goes full-bleed on mobile;
 * the menu bar wraps; the taskbar stays.
 */

/* Window WIDTH is owned by the clamp() in base.css (a single smooth curve across all
   viewport sizes, JS-animated on discrete changes). These media queries only tweak the
   things the clamp can't: padding, phone full-bleed, and the menu wrapping. */

@media (max-width: 640px) {
  .app { --app-pad-t: 8px; --app-pad-b: 16px; padding: var(--app-pad-t) 4px var(--app-pad-b); }
  /* Full-bleed via `100%`, NOT `100vw - 8px`: vw includes the scrollbar, so the
     subtraction guessed at a gutter that is 17px on this platform and 0 on others. */
  .window { width: 100%; }
  .win__title-text { font-size: var(--fs-sm); }
  .win__menu { min-height: var(--menubar-h); flex-wrap: wrap; }
  .menu-item { padding: 3px 8px; }
  .content { padding: 14px 12px; }
  .vplayer__theatre { grid-template-columns: 1fr; }
}

/* PORTRAIT, NOT A PHONE (portrait tablet, a phone's "desktop site" mode): the starfield gutters
   either side of the window are wasted width on a tall screen, so the window takes 94vw instead
   of 86vw. Same min(…, 100%) guard as base.css. */
@media (orientation: portrait) and (min-width: 641px) {
  .window { width: min(clamp(340px, 94vw, 1560px), 100%); }
}