/* WORLD MEDIA V3.12 — Mobile Premium
   Presentation-only layer. No playback/source logic is changed. */

@media (max-width: 620px) {
  :root {
    --wm-safe-top: env(safe-area-inset-top, 0px);
    --wm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-nav-h: 74px;
    --mobile-dock-h: 72px;
  }

  html,
  body {
    min-height: 100%;
    background: #07080b;
  }

  body {
    background:
      radial-gradient(120% 72% at 88% -8%, rgba(222, 186, 101, .15), transparent 42%),
      radial-gradient(80% 42% at -8% 23%, rgba(102, 111, 128, .08), transparent 55%),
      linear-gradient(180deg, #090a0d 0%, #07080a 58%, #060709 100%);
    background-attachment: fixed;
  }

  /* Floating top chrome — app-like instead of browser-like. */
  .topbar {
    top: calc(var(--wm-safe-top) + 8px);
    left: 10px;
    right: 10px;
    min-height: 58px;
    padding: 7px 9px;
    border: 1px solid rgba(235, 239, 244, .10);
    border-radius: 20px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 43%, rgba(222,186,101,.035)),
      rgba(10, 11, 15, .88);
    box-shadow:
      0 18px 48px rgba(0,0,0,.36),
      inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
  }

  .menu-btn,
  .top-actions .icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border-color: rgba(238,241,246,.10);
    background:
      linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
      #111318;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background:
      linear-gradient(115deg, #72531f 0%, #f4d78d 27%, #a4772e 55%, #ffe5a2 80%, #806023 100%);
    box-shadow:
      0 8px 25px rgba(213,173,83,.15),
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -1px 0 rgba(65,43,8,.42);
  }

  .brand-copy strong {
    font-size: 11.5px;
    letter-spacing: .18em;
  }

  .main-content {
    padding: calc(var(--wm-safe-top) + 82px) 12px 24px;
  }

  /* Player cards / radio hero get a smaller, more intentional footprint. */
  .player-card,
  .radio-hero {
    border-color: rgba(236, 239, 244, .10);
    box-shadow:
      0 24px 62px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.035);
  }

  .player-card { border-radius: 22px; }
  .player-stage { border-radius: 21px 21px 0 0; }

  .radio-hero {
    grid-template-columns: 70px minmax(0,1fr) 38px;
    gap: 12px;
    padding: 12px;
    border-radius: 22px;
    background:
      radial-gradient(circle at 12% 25%, rgba(225,188,102,.19), transparent 42%),
      linear-gradient(145deg, rgba(26,29,35,.96), rgba(10,11,15,.98));
  }

  .radio-hero-art {
    width: 70px;
    border-radius: 18px;
    border-color: rgba(236,239,244,.11);
    background:
      radial-gradient(circle at 30% 20%, rgba(225,188,102,.08), transparent 48%),
      linear-gradient(145deg,#151922,#08090c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  }

  .radio-hero-copy .eyebrow {
    color: #e5c982;
    font-size: 8px;
    letter-spacing: .20em;
  }

  .radio-hero-copy h1 {
    font-size: 18px;
    line-height: 1.12;
    max-height: 2.24em;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .radio-hero-copy > p:not(.eyebrow) {
    margin-top: 3px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .radio-hero-expand {
    width: 38px;
    height: 38px;
    border-color: rgba(236,239,244,.10);
    background: rgba(255,255,255,.035);
  }

  /* Browser section uses editorial spacing. */
  .browser-section { padding-top: 18px; }
  .browser-head { align-items: flex-end; padding: 0 2px; }
  .browser-head .eyebrow { margin-bottom: 4px; font-size: 8px; letter-spacing: .21em; }
  .browser-head h2 { font-size: 27px; line-height: 1; }
  .channel-total {
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    font-size: 9px;
  }

  .mobile-context-row {
    gap: 7px;
    margin: 12px 0 2px;
    padding: 1px 1px 2px;
  }

  .context-pill {
    min-height: 40px;
    padding: 0 13px;
    border-color: rgba(236,239,244,.095);
    background:
      linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
      rgba(13,15,20,.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    font-size: 11px;
    font-weight: 750;
  }

  /* Sticky search becomes a compact command bar. */
  .filters {
    top: calc(var(--wm-safe-top) + 76px);
    margin: 8px -4px 5px;
    padding: 7px 4px 8px;
    gap: 7px;
    background: linear-gradient(180deg, rgba(7,8,11,.96) 76%, rgba(7,8,11,.72) 100%);
  }

  .search-box {
    height: 46px;
    border-radius: 16px;
    border-color: rgba(238,241,246,.10);
    background:
      linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.008)),
      #0d0f14;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }

  .search-box:focus-within {
    border-color: rgba(235,202,126,.34);
    box-shadow: 0 0 0 3px rgba(213,174,84,.06), inset 0 1px 0 rgba(255,255,255,.035);
  }

  .search-box input { font-size: 16px; }

  .compat-toggle {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border-color: rgba(238,241,246,.10);
    background: #0d0f14;
  }

  /* Discovery: one horizontal premium rail, no giant select row. */
  .discovery-toolbar {
    gap: 8px;
    margin: 1px 0 9px;
  }

  .discovery-toolbar-row {
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .discovery-toolbar-row::-webkit-scrollbar { display: none; }

  .discovery-chips {
    order: 1;
    width: auto;
    flex: 0 0 auto;
  }

  .discovery-sort {
    order: 2;
    width: auto;
    min-height: 38px;
    padding: 0 5px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: rgba(12,14,18,.90);
  }

  .discovery-sort > span { display: none; }
  .discovery-sort select {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    height: 34px;
    padding: 0 27px 0 11px;
    border-radius: 999px;
    font-size: 16px;
    background: #101319;
  }

  .discovery-chip,
  .category-chip {
    min-height: 38px;
    padding: 0 13px;
    border-color: rgba(225,190,106,.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.010)),
      #0e1115;
    font-size: 10px;
  }

  .category-chips {
    gap: 7px;
    padding: 0 1px 3px;
  }

  .status-bar {
    min-height: 20px;
    margin: 1px 3px 5px;
    color: #767d89;
    font-size: 9px;
    line-height: 1.35;
  }

  /* Content cards: independent surfaces instead of dashboard rows. */
  .channel-grid {
    gap: 8px;
    padding-bottom: 4px;
  }

  .channel-card,
  .channel-card.is-radio {
    min-height: 78px;
    grid-template-columns: 56px minmax(0,1fr);
    gap: 11px;
    padding: 10px 10px;
    border: 1px solid rgba(235,239,244,.075);
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.006)),
      rgba(12,14,18,.72);
    box-shadow:
      0 8px 24px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.025);
  }

  .channel-card:hover { background: rgba(17,19,24,.92); }
  .channel-card:active { transform: scale(.988); }

  .channel-card.is-active {
    margin: 0;
    padding: 10px;
    border-color: rgba(234,198,116,.38);
    border-radius: 18px;
    background:
      radial-gradient(circle at 8% 28%, rgba(218,180,92,.12), transparent 43%),
      linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.006)),
      #101216;
    box-shadow:
      0 12px 32px rgba(0,0,0,.18),
      inset 3px 0 0 rgba(223,187,102,.75),
      inset 0 1px 0 rgba(255,255,255,.04);
  }

  .card-logo,
  .skeleton-logo {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    border-color: rgba(235,239,244,.08);
    background: #090b0e;
  }

  .card-copy { padding-right: 37px; }
  .card-copy strong {
    font-size: 14px;
    line-height: 1.18;
    white-space: nowrap;
  }
  .card-copy span { margin-top: 4px; font-size: 10px; }
  .compat-pill,
  .fresh-pill {
    margin-top: 5px !important;
    border-radius: 999px;
    font-size: 7px !important;
  }

  .card-fav {
    right: 4px;
    top: 50%;
    width: 42px;
    height: 42px;
    transform: translateY(-50%);
    border-radius: 50%;
    color: #747b88;
  }
  .channel-card.is-active .card-fav { right: 4px; }

  /* Skeleton is now a proper app card. */
  .channel-card.skeleton {
    min-height: 78px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 18px;
    background: rgba(255,255,255,.018);
  }
  .skeleton-lines i { background: rgba(255,255,255,.045); }

  /* Error / empty state becomes a recovery card, not a technical page. */
  .empty-state {
    margin: 12px 0 6px;
    padding: 28px 20px;
    gap: 9px;
    border: 1px solid rgba(236,239,244,.08);
    border-radius: 22px;
    background:
      radial-gradient(circle at 50% 0%, rgba(221,185,99,.08), transparent 52%),
      rgba(12,14,18,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  }
  .empty-state div {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(235,202,126,.16);
    border-radius: 50%;
    background: rgba(216,177,94,.045);
    font-size: 22px;
  }
  .empty-state strong { margin-top: 2px; font-size: 16px; }
  .empty-state span { max-width: 300px; font-size: 11px; line-height: 1.5; }
  .empty-state .empty-retry {
    min-height: 42px;
    margin-top: 5px;
    padding: 0 18px;
    border-color: rgba(234,198,116,.25);
    border-radius: 999px;
    color: #ead18e;
    background: rgba(216,177,94,.055);
  }

  /* Floating bottom dock — visually separated from app content. */
  .mobile-bottom-nav {
    left: 10px;
    right: 10px;
    bottom: calc(var(--wm-safe-bottom) + 8px);
    min-height: 64px;
    padding: 5px;
    border: 1px solid rgba(237,240,245,.105);
    border-radius: 22px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
      rgba(10,11,15,.91);
    box-shadow:
      0 20px 55px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.045);
  }

  .bottom-mode-btn {
    min-height: 52px;
    border-radius: 17px;
    color: #747b88;
    font-size: 9px;
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }

  .bottom-mode-icon { font-size: 20px; }

  .bottom-mode-btn.is-active {
    color: #f1d386;
    background:
      radial-gradient(circle at 50% 0%, rgba(230,195,112,.12), transparent 65%),
      rgba(216,177,94,.055);
  }

  .bottom-mode-btn.is-active::after {
    bottom: 4px;
    width: 22px;
    height: 2px;
    background: linear-gradient(90deg,#9d7428,#f1d486,#9d7428);
  }

  /* Mini player is a second floating surface above navigation. */
  .audio-dock {
    left: 10px;
    right: 10px;
    bottom: calc(var(--wm-safe-bottom) + 82px);
    min-height: 68px;
    padding: 8px 9px;
    grid-template-columns: 48px minmax(0,1fr) 22px 46px 40px;
    gap: 8px;
    border: 1px solid rgba(237,240,245,.11);
    border-radius: 21px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 48%, rgba(220,184,98,.026)),
      rgba(11,13,17,.94);
    box-shadow:
      0 24px 62px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  .audio-dock.is-playing {
    border-color: rgba(230,194,108,.18);
  }

  .audio-dock-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .audio-dock-copy strong { font-size: 13px; }
  .audio-dock-copy span { margin-top: 1px; font-size: 9px; }
  .audio-main-btn {
    width: 46px;
    height: 46px;
    background: linear-gradient(145deg,#f1d184,#ad8031);
    box-shadow: 0 9px 24px rgba(212,170,74,.18), inset 0 1px 0 rgba(255,255,255,.48);
  }

  /* Premium Now Playing: compact enough for smaller iPhones, still cinematic. */
  .now-sheet-panel {
    padding: calc(14px + var(--wm-safe-top)) 18px calc(20px + var(--wm-safe-bottom));
    background:
      linear-gradient(180deg, rgba(7,8,11,.16), rgba(7,8,11,.74) 46%, #07080b 78%),
      radial-gradient(circle at 50% 14%, rgba(216,177,94,.26), transparent 36%),
      #090a0d;
  }

  .now-sheet-top { grid-template-columns: 44px 1fr 44px; }

  .now-sheet-art-wrap {
    width: min(70vw, 304px);
    margin-top: clamp(18px, 4.5vh, 38px);
  }

  .now-sheet-art {
    border-radius: 27px;
    box-shadow:
      0 32px 85px rgba(0,0,0,.52),
      0 0 0 1px rgba(229,194,111,.055),
      inset 0 1px 0 rgba(255,255,255,.065);
  }

  .now-sheet-copy {
    width: min(94vw, 520px);
    margin-top: clamp(20px, 3.5vh, 34px);
  }

  .now-sheet-copy h2 {
    max-height: 2.16em;
    font-size: clamp(26px, 7.2vw, 36px);
    line-height: 1.08;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .now-sheet-copy > p:last-child {
    margin-top: 7px;
    font-size: 12px;
  }

  .now-sheet-controls {
    grid-template-columns: 52px 74px 52px;
    gap: 25px;
    margin-top: clamp(22px, 4vh, 36px);
  }

  .now-sheet-play {
    width: 74px;
    height: 74px;
    background: linear-gradient(145deg,#f3d58d,#a97829);
    box-shadow: 0 18px 44px rgba(216,177,94,.24), inset 0 1px 0 rgba(255,255,255,.52);
  }

  .now-sheet-volume-row {
    width: min(84vw, 390px);
    margin-top: clamp(22px, 4vh, 36px);
  }

  .now-sheet-source {
    padding-top: 16px;
    font-size: 9px;
  }

  .site-footer {
    padding: 18px 12px 20px;
    opacity: .72;
  }

  /* Body padding must account for floating nav/dock plus safe area. */
  body {
    padding-bottom: calc(92px + var(--wm-safe-bottom));
  }
  body.has-audio-dock {
    padding-bottom: calc(168px + var(--wm-safe-bottom));
  }
}

@media (max-width: 390px) {
  .topbar { left: 8px; right: 8px; }
  .brand-copy strong { font-size: 10px; }
  .radio-hero { grid-template-columns: 64px minmax(0,1fr) 36px; }
  .radio-hero-art { width: 64px; }
  .radio-hero-copy h1 { font-size: 16px; }
  .browser-head h2 { font-size: 25px; }
  .channel-card,
  .channel-card.is-radio { grid-template-columns: 52px minmax(0,1fr); }
  .card-logo,
  .skeleton-logo { width: 52px; height: 52px; }
  .now-sheet-art-wrap { width: min(66vw, 258px); }
  .now-sheet-copy h2 { font-size: clamp(24px, 7.1vw, 31px); }
  .now-sheet-controls { gap: 21px; }
}

@media (display-mode: standalone) and (max-width: 620px) {
  .topbar { top: calc(var(--wm-safe-top) + 6px); }
  .mobile-bottom-nav { bottom: calc(var(--wm-safe-bottom) + 6px); }
  .audio-dock { bottom: calc(var(--wm-safe-bottom) + 80px); }
}