/* Shahi Radio v3.04 — mobile app shell inspired by the approved phone mockup. */
.mobile-radio-app{display:none}

@media (max-width:620px){
  :root{--mobile-gold:#f2bd46;--mobile-panel:#0d0d12;--mobile-card:#17171e;--mobile-border:rgba(255,255,255,.085)}
  html{scroll-padding-top:0}
  body{padding:0 0 calc(76px + env(safe-area-inset-bottom));background:#08080b;min-height:100svh;overflow-x:hidden}
  .topbar{display:none!important}
  .player-bar{display:none!important}
  .setup-notice{position:relative;top:0}
  main>.hero,
  main>.stats-strip,
  #artists,
  #request,
  #connect,
  footer{display:none!important}
  #schedule,#library{display:none!important}
  body[data-mobile-view="schedule"] #schedule{display:block!important}
  body[data-mobile-view="library"] #library{display:block!important}

  .mobile-radio-app{display:block;width:100%;max-width:600px;margin:0 auto;background:#08080b;min-height:100svh;color:#fff}
  .mobile-radio-home{min-height:100svh;padding-bottom:76px;background:#08080b}
  body[data-mobile-view="schedule"] .mobile-radio-home,
  body[data-mobile-view="library"] .mobile-radio-home{display:none}
  /* On Schedule/Library the mobile shell only supplies the fixed bottom nav.
     Collapse its normal document height so the page ends at the final card. */
  body[data-mobile-view="schedule"] .mobile-radio-app,
  body[data-mobile-view="library"] .mobile-radio-app{min-height:0;height:0;overflow:visible}

  .mobile-ad-stage{position:relative;height:clamp(300px,42svh,430px);overflow:hidden;background:#111;border-bottom:1px solid rgba(242,189,70,.28)}
  .mobile-ad-link{position:absolute;inset:0;display:block;background:#111}
  .mobile-ad-link img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  .mobile-ad-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72) 100%),linear-gradient(90deg,rgba(0,0,0,.5),transparent 62%)}
  .mobile-ad-topline{position:absolute;z-index:2;left:18px;right:18px;top:max(15px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:12px;text-shadow:0 2px 12px rgba(0,0,0,.8)}
  .mobile-ad-topline strong{max-width:68%;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-ad-topline span{font-size:8px;font-weight:900;letter-spacing:1.7px;color:#ddd;text-transform:uppercase}
  .mobile-ad-branding{display:none!important}
  .mobile-ad-kicker{font-size:9px;letter-spacing:1.8px;color:#d7d7db;font-weight:800;margin-bottom:2px}
  .mobile-ad-branding strong{font-size:clamp(27px,8vw,40px);line-height:.92;letter-spacing:-1.8px}
  .mobile-ad-branding b{font-size:clamp(34px,10vw,52px);line-height:.86;color:var(--mobile-gold);letter-spacing:-2.2px;margin-top:3px}
  .mobile-ad-branding small{font-size:12px;font-weight:750;margin-top:9px;color:#f1f1f1}
  .mobile-ad-dots{position:absolute;z-index:3;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
  .mobile-ad-dots i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
  .mobile-ad-dots i:first-child{background:var(--mobile-gold)}

  .mobile-control-panel{position:relative;margin-top:-1px;padding:0 13px 10px;background:linear-gradient(180deg,#0c0c10,#09090c)}
  .mobile-station-strip{min-height:64px;display:grid;grid-template-columns:40px minmax(0,1fr) 48px;align-items:center;gap:9px;border:1px solid rgba(242,189,70,.38);border-radius:18px 18px 0 0;padding:8px 10px;background:#111116}
  .mobile-station-strip>img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid var(--mobile-gold);background:#000;padding:2px}
  .mobile-station-copy{min-width:0;display:grid;gap:4px}
  .mobile-station-title-row{display:flex;align-items:center;gap:6px;min-width:0}
  .mobile-station-title-row>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.1}
  .mobile-live-pill{flex:0 0 auto;padding:4px 7px;border-radius:7px;background:#ff3855;color:#fff;font-size:8px;font-weight:950;letter-spacing:.4px}
  .mobile-live-pill.offline{background:#45454e;color:#d6d6da}
  .mobile-station-copy>small{font-size:7.5px;line-height:1.2;color:var(--mobile-gold);font-weight:800;letter-spacing:.22px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-listeners{width:44px;border:0;background:transparent;color:#fff;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:center;align-items:center;gap:0 3px;padding:0;cursor:pointer}
  .mobile-listeners>span{grid-row:1/3;font-size:12px;opacity:.75}
  .mobile-listeners strong{font-size:12px;line-height:1}
  .mobile-listeners small{font-size:6.5px;color:#8f899a;line-height:1}

  .mobile-now-card{display:grid;grid-template-columns:46px minmax(0,1fr) 38px;align-items:center;gap:10px;margin-top:8px;padding:10px;border:1px solid var(--mobile-border);border-radius:14px;background:var(--mobile-card);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
  .mobile-now-card>img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#111;border:1px solid rgba(242,189,70,.28)}
  .mobile-now-copy{display:grid;min-width:0;gap:2px}
  .mobile-now-copy>span{font-size:7px;color:var(--mobile-gold);font-weight:950;letter-spacing:1.2px}
  .mobile-now-copy>strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-now-copy>small{font-size:10px;color:#9f99a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-wave{height:28px;display:flex;align-items:flex-end;justify-content:center;gap:3px}
  .mobile-wave i{width:3px;height:7px;border-radius:3px;background:var(--mobile-gold);animation:mobile-wave .8s ease-in-out infinite alternate;animation-play-state:paused}
  .mobile-wave i:nth-child(2){height:16px;animation-delay:.11s}.mobile-wave i:nth-child(3){height:23px;animation-delay:.22s}.mobile-wave i:nth-child(4){height:12px;animation-delay:.33s}
  body.is-playing .mobile-wave i{animation-play-state:running}
  @keyframes mobile-wave{to{height:25px}}

  .mobile-main-controls{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;gap:8px;padding:11px 4px 8px}
  .mobile-round-btn,.mobile-play-btn{border:0;cursor:pointer;display:grid;place-items:center;transition:transform .15s ease,background .15s ease}
  .mobile-round-btn{width:42px;height:42px;border-radius:50%;background:#181820;color:#fff;font-size:20px;border:1px solid rgba(255,255,255,.035)}
  .mobile-round-btn svg{width:20px;height:20px;fill:#f4f4f6;stroke:none}
  .mobile-round-btn:active,.mobile-play-btn:active{transform:scale(.94)}
  .mobile-favorite-active{color:#ff5b7b;background:rgba(255,91,123,.12);border-color:rgba(255,91,123,.25)}
  .mobile-play-btn{width:60px;height:60px;border-radius:50%;background:linear-gradient(180deg,#ffd164,#f0b436);color:#111;font-size:26px;padding-left:4px;box-shadow:0 7px 24px rgba(242,189,70,.2)}
  body.is-playing .mobile-play-btn{padding-left:0;font-size:24px}

  .mobile-utility-row{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:8px;margin:0 2px 7px}
  .mobile-volume-control{height:47px;display:grid;grid-template-columns:24px minmax(0,1fr) 22px;align-items:center;gap:4px;padding:0 8px;border:1px solid rgba(255,255,255,.045);border-radius:12px;background:#111116}
  .mobile-volume-control button{border:0;background:transparent;color:#ddd;padding:0;font-size:12px;cursor:pointer}
  .mobile-volume-control>span{font-size:12px;text-align:center}
  .mobile-volume-control input{width:100%;height:3px;accent-color:var(--mobile-gold)}
  .mobile-utility-btn{height:47px;border:1px solid rgba(255,255,255,.045);border-radius:12px;background:#111116;color:#fff;display:grid;place-items:center;align-content:center;gap:2px;cursor:pointer;padding:4px}
  .mobile-utility-btn>span{font-size:13px}
  .mobile-utility-btn>small{font-size:8px;line-height:1.05;color:#d4d0db;font-weight:750;text-align:center}
  .mobile-utility-btn.is-active{border-color:rgba(242,189,70,.4);color:var(--mobile-gold)}

  .mobile-sleep-modal{position:fixed;inset:0;z-index:420;display:block}
  .mobile-sleep-modal.hidden{display:none}
  .mobile-sleep-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
  .mobile-sleep-sheet{position:absolute;left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));border:1px solid rgba(242,189,70,.22);border-radius:18px;background:linear-gradient(180deg,#14141b,#0d0d12);box-shadow:0 16px 44px rgba(0,0,0,.45);padding:15px 15px 16px}
  .mobile-sleep-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
  .mobile-sleep-sheet-header strong{font-size:18px;letter-spacing:-.2px}
  .mobile-sleep-close{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:#191922;color:#fff;font-size:18px;cursor:pointer}
  .mobile-sleep-sheet p{margin:0 0 14px;font-size:12px;color:#bdb7c7}
  .mobile-sleep-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .mobile-sleep-options button{min-height:44px;border-radius:12px;border:1px solid rgba(242,189,70,.18);background:#17171e;color:#fff;font-weight:800;font-size:12px;cursor:pointer}
  .mobile-sleep-options button.is-active{border-color:rgba(242,189,70,.55);background:rgba(242,189,70,.14);color:var(--mobile-gold)}
  body.mobile-sleep-open{overflow:hidden}

  .mobile-bottom-nav{position:fixed;z-index:260;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:600px;height:calc(65px + env(safe-area-inset-bottom));padding:5px 34px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);align-items:center;border-top:1px solid rgba(255,255,255,.055);background:rgba(11,11,15,.97);backdrop-filter:blur(18px);box-shadow:0 -12px 28px rgba(0,0,0,.22)}
  .mobile-bottom-nav a{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;height:54px;color:#86818f;font-size:16px}
  .mobile-bottom-nav a small{font-size:7px}
  .mobile-bottom-nav a.active{color:#fff}
  .mobile-bottom-nav a.active:after{content:"";position:absolute;bottom:1px;width:36px;height:3px;border-radius:99px;background:var(--mobile-gold)}
  .mobile-bottom-nav a.active span{color:var(--mobile-gold)}

  /* Mobile Schedule / Library use the same app styling and the same live data. */
  body[data-mobile-view="schedule"] main,
  body[data-mobile-view="library"] main{padding:14px 13px 10px;min-height:auto;background:#09090c}
  body[data-mobile-view="schedule"] #schedule,
  body[data-mobile-view="library"] #library{width:100%;margin:0;padding:8px 0 0}
  #schedule .section-heading,#library .section-heading{align-items:flex-start;margin-bottom:15px;gap:10px}
  #schedule .section-heading h2,#library .section-heading h2{font-size:26px;letter-spacing:-.7px}
  #schedule .eyebrow,#library .eyebrow{font-size:8px;letter-spacing:1.5px}
  .station-time-panel{font-size:8px!important;padding:7px 9px!important;border-radius:10px!important}
  .station-time-panel strong{font-size:10px!important}
  .schedule-grid{grid-template-columns:1fr!important;gap:8px}
  .schedule-card{border-radius:13px;padding:13px}
  .schedule-card h3{font-size:15px}
  .schedule-card p{font-size:11px}
  .library-heading{display:grid!important;align-items:stretch!important}
  .library-filters{width:100%;display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .library-filters label{width:100%!important}
  .library-filters select,.library-filters input{width:100%!important;max-width:none!important}
  .track-list-scroll{max-height:none!important;overflow:visible!important;padding-bottom:0!important;margin-bottom:0!important;overscroll-behavior:auto!important}
  .track-list-item{border-radius:12px!important;padding:9px!important}
  .track-list-item h3{font-size:12px!important}
  .track-list-item p{font-size:9px!important}
  .track-list-actions{gap:5px!important}
  .track-list-actions button{min-height:36px!important}

  @media(max-width:430px){
    .mobile-sleep-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  @media(max-width:380px){
    .mobile-ad-stage{height:290px}
    .mobile-ad-branding{bottom:40px}
    .mobile-station-strip{grid-template-columns:36px minmax(0,1fr) 42px;padding-inline:8px}
    .mobile-station-strip>img{width:34px;height:34px}
    .mobile-station-title-row>strong{font-size:12px}
    .mobile-station-copy>small{font-size:6.5px}
    .mobile-main-controls{gap:4px}
    .mobile-round-btn{width:38px;height:38px}
    .mobile-play-btn{width:56px;height:56px}
    .mobile-bottom-nav{padding-inline:24px}
  }

  @media(prefers-reduced-motion:reduce){.mobile-wave i{animation:none}}
}