/* ============================================================
   NoWordStart — Responsive Breakpoints Patch
   Covers: 4K / ultrawide / standard / tablet / portrait / landscape
   ============================================================ */

/* ── 4K & large displays (≥ 2560px wide) ──────────────────── */
@media (min-width: 2560px) {
  .clock { font-size: 64px; }
  .date  { font-size: 16px; margin-top: 10px; }
  .corner.tl { top: 44px; left: 52px; }
  .corner.tr { top: 38px; right: 48px; }
  .corner.br { bottom: 38px; right: 48px; }
  .corner.bl { bottom: 36px; left: 52px; }
  .keyhint, .gdir-hint { font-size: 13px; }
  .gdir-item { font-size: 14px; padding: 7px 10px; }
  .btn { font-size: 14px; padding: 11px 20px; }
  .dock { gap: 16px; padding: 18px 28px; margin-bottom: 32px; }
  .tile { width: 64px; height: 64px; border-radius: 18px; font-size: 26px; }
  .search-box { padding: 20px 28px; }
  .search-box input { font-size: 20px; }
  .panel { width: min(720px, 80vw); }
}

/* ── Ultrawide (aspect > 2.1 : 1) ─────────────────────────── */
@media (min-aspect-ratio: 21/10) {
  /* Constrain dock width so it doesn't span the entire ultrawide screen */
  .dock { max-width: 900px; }
  /* Group directory: limit so it doesn't climb too high */
  .group-dir { max-height: 50vh; }
  /* Search panel stays reasonable */
  .panel { width: min(640px, 40vw); }
  /* Corner elements: pull inward a bit on very wide screens */
  .corner.tl { left: max(38px, 3vw); }
  .corner.tr { right: max(32px, 3vw); }
  .corner.br { right: max(32px, 3vw); }
  .corner.bl { left: max(38px, 3vw); }
}

/* ── Standard desktop 1280–1919px ───────────────────────────── */
@media (min-width: 1280px) and (max-width: 1919px) {
  /* Already the primary design target — no changes needed */
}

/* ── Mid-range 1024–1279px ──────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .clock { font-size: 38px; }
  .corner.tl { top: 28px; left: 30px; }
  .corner.tr { top: 22px; right: 26px; }
  .corner.br { bottom: 22px; right: 26px; }
  .corner.bl { bottom: 20px; left: 30px; }
  .tile { width: 48px; height: 48px; font-size: 18px; }
  .dock { padding: 12px 16px; gap: 10px; }
  .gdir-item { font-size: 12px; }
}

/* ── Narrow desktop / small laptop 769–1023px ────────────────── */
@media (min-width: 769px) and (max-width: 1023px) {
  .clock { font-size: 34px; }
  .date  { font-size: 12px; }
  .corner.tl { top: 22px; left: 24px; }
  .corner.tr { top: 18px; right: 20px; }
  .corner.br { bottom: 18px; right: 20px; }
  .corner.bl { bottom: 16px; left: 24px; }
  .tile { width: 44px; height: 44px; font-size: 17px; }
  .dock { padding: 10px 14px; gap: 8px; margin-bottom: 18px; }
  .gdir-item { font-size: 11.5px; }
  .btn { font-size: 12.5px; padding: 8px 14px; }
  .panel { width: min(560px, 88vw); }
  .group-dir { max-height: 55vh; }
}

/* ── Tablet portrait (768px and below, tall screens) ─────────── */
/* Already covered by existing mobile-only breakpoint */

/* ── Landscape phone / short screens (height < 500px) ────────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Very short: compress everything vertically */
  .desktop-only .corner.tl { top: 10px; left: 16px; }
  .desktop-only .corner.tr { top: 8px; right: 14px; }
  .desktop-only .corner.br { bottom: 8px; right: 14px; }
  .desktop-only .corner.bl { bottom: 6px; left: 16px; display: none; } /* hide hints - no room */
  .clock { font-size: 26px; }
  .date  { display: none; }
  /* Dock smaller and closer to bottom */
  .dock-wrap { --dock-mb: 8px; }
  .dock { padding: 8px 14px; gap: 7px; margin-bottom: 8px; }
  .tile { width: 40px; height: 40px; border-radius: 11px; font-size: 16px; }
  /* Search overlay: use full height */
  .overlay { padding-top: 8vh; }
  .panel { width: min(520px, 90vw); }
  /* Mobile swipe pages: compress */
  .mp-group { padding-top: 50px; padding-bottom: 50px; }
  .mp-group-name { font-size: 16px; margin-bottom: 14px; }
  .mp-icon { width: 48px; height: 48px; border-radius: 12px; }
  .mp-grid { gap: 12px 6px; grid-template-columns: repeat(5, 1fr); }
  /* Mobile top bar */
  .mobile-bar { padding-top: 8px; padding-bottom: 8px; }
  .mb-clock { font-size: 22px; }
}

/* ── Tablet landscape (769–1024px, landscape, height 500–768px) ── */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .mobile-pages { display: none; }
  .mobile-dots  { display: none; }
  .desktop-only { display: block !important; }
  .mobile-only  { display: none !important; }
}

/* ── Tall/portrait desktop monitor (aspect < 3:4) ─────────────── */
@media (max-aspect-ratio: 3/4) and (min-width: 769px) {
  /* Rotated / portrait desktop monitor */
  .panel { width: min(500px, 88vw); padding-top: 15vh; }
  .dock { max-width: 480px; flex-wrap: wrap; justify-content: center; }
  .group-dir { max-height: 40vh; }
}

/* ── Square-ish screens (aspect ~1:1, desktop) ─────────────────── */
@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 5/4) and (min-width: 769px) {
  .clock { font-size: 40px; }
  .dock { max-width: 600px; }
  .panel { width: min(520px, 86vw); padding-top: 20vh; }
}

/* ── Mobile portrait refinements (≤ 768px, portrait) ─────────── */
@media (max-width: 768px) and (orientation: portrait) {
  /* Ensure swipe pages fill screen correctly */
  .mobile-pages { height: 100dvh; }
  /* Stack dock labels more readable on narrow screen */
  .mp-icon-label { font-size: 10px; max-width: 60px; }
  /* Small phone (< 375px) */
}
@media (max-width: 374px) {
  .mb-clock { font-size: 24px; }
  .mp-icon { width: 52px; height: 52px; }
  .mp-grid { gap: 16px 4px; grid-template-columns: repeat(4, 1fr); }
  .overlay { padding-top: 18vh; }
}

/* ── Large mobile (≥ 414px portrait) ─────────────────────────── */
@media (min-width: 414px) and (max-width: 768px) and (orientation: portrait) {
  .mp-icon { width: 68px; height: 68px; }
  .mp-icon-label { font-size: 12px; max-width: 76px; }
  .mp-grid { gap: 22px 10px; }
}

/* ── Safe area for notch/Dynamic Island / bottom bar ──────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  .mobile-bar {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }
  .dock-wrap {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-dots {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .mb-theme {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════
   PORTRAIT WORLD MAP FIX
   In portrait, the equirectangular world map looks squished
   vertically. We use CSS to scale-up / crop to a square zone.
   ═══════════════════════════════════════════════════════ */