/* =====================================================================
   SANGITIFY — small-screen refinements (≤ 1023px) and phone sizes
   ===================================================================== */

@media (max-width: 1023px) {
  /* Leave room for the official YouTube player when it is docked */
  body.yt-active .main { padding-bottom: calc(var(--nav-h) + var(--mini-h) + 300px + var(--safe-b)); }
  body.yt-active .toasts { bottom: calc(var(--nav-h) + var(--mini-h) + 280px + var(--safe-b)); }
  body.no-player .main { padding-bottom: calc(var(--nav-h) + 28px + var(--safe-b)); }
  body.no-player .toasts { bottom: calc(var(--nav-h) + 16px + var(--safe-b)); }
  body.no-player .install-bar { bottom: calc(var(--nav-h) + 12px + var(--safe-b)); }
  .topbar .brand img { width: 30px; height: 30px; }
  .view-inner > .mobile-search { margin-top: 16px; }
  .desktop-search { display: none; }
}

/* 360–389px phones: tighter spacing, keep 44px touch targets */
@media (max-width: 389px) {
  :root { --gutter: 14px; }
  .brand { font-size: .9rem; letter-spacing: .06em; }
  .greeting h1 { font-size: 1.3rem; }
  .hero { padding: 22px 18px; }
  .hero h2 { font-size: 1.35rem; }
  .rail:not(.orbs):not(.wide) { grid-auto-columns: 44%; gap: 12px; }
  .rail.orbs { grid-auto-columns: 78px; }
  .orb .ball { width: 68px; height: 68px; font-size: 1.5rem; }
  .row { gap: 10px; }
  .row .actions .icon-btn { width: 38px; }
  .player .p-btn { width: 40px; }
  .share-grid .ic { width: 44px; height: 44px; }
  .pick { padding: 10px; }
}

/* 390–479px: default phone layout is tuned for this range */
@media (min-width: 390px) and (max-width: 479px) {
  .rail:not(.orbs):not(.wide) { grid-auto-columns: 40%; }
}

/* Landscape phones: shrink the full-player artwork */
@media (max-height: 500px) and (orientation: landscape) {
  .fullplayer .fp-art { width: 38vh; }
  .fullplayer .fp-body { gap: 10px; }
}

/* Tablets (768–1023px): hybrid navigation — bottom nav + wider content */
@media (min-width: 768px) and (max-width: 1023px) {
  .main { padding-left: 32px; padding-right: 32px; }
  .player { left: 50%; right: auto; width: min(640px, calc(100vw - 48px)); transform: translateX(-50%); }
  .player[hidden] { transform: translate(-50%, 160%); }
  .player .p-extra { display: flex; align-items: center; }
  .player .p-extra .range, .player .p-extra .vol { display: none; }
  .bottom-nav { padding-left: 10%; padding-right: 10%; }
  .yt-dock { left: auto; right: 24px; width: 380px; }
}

/* Very tall content guard: never allow sideways scrolling */
.main { overflow-x: clip; }