/* =========================
   AI REVIVAL MOBILE / PWA APP LAYOUT
   Desktop remains controlled by style.css + sections.css.
========================= */

.mobile-app-title,
.mobile-story-link,
.mobile-app-controls{
  display:none;
}

@media (max-width:620px){

  :root{
    --mobile-topbar:72px;
    --mobile-safe-bottom:env(safe-area-inset-bottom, 0px);
  }
  
  #storyCard{
  scroll-margin-top:calc(var(--mobile-topbar) + env(safe-area-inset-top, 0px) + 22px);
  }

  html,
  body{
    width:100%;
    min-height:100%;
    background:#050505;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  body{
  color:#fff;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  }

  .page{
    width:100%;
    min-height:100svh;
    background:
      radial-gradient(circle at 50% 16%, rgba(212,175,55,.14), transparent 28%),
      linear-gradient(180deg,#050505 0%,#020202 100%);
    overflow-x:hidden;
  }

  /* APP TOP BAR */
  .topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:10000;

    height:calc(var(--mobile-topbar) + env(safe-area-inset-top, 0px));
    padding:env(safe-area-inset-top, 0px) 18px 0;

    display:grid;
    grid-template-columns:64px 1fr 64px;
    align-items:center;

    background:rgba(5,5,5,.96);
    border-bottom:1px solid rgba(212,175,55,.18);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .brand-logo,
  .breaking-news,
  .nav{
    display:none;
  }

  .menu{
    grid-column:1;
    width:54px;
    height:54px;
    padding:0;
    display:grid;
    place-items:center;
    background:transparent;
    border:0;
    color:var(--gold2);
    font-size:34px;
    line-height:1;
    justify-self:start;
  }

  .mobile-app-title{
    display:block;
    grid-column:2;
    text-align:center;
    color:#fff;
    font:800 13px/1 Inter,sans-serif;
    letter-spacing:.24em;
  }

  .mobile-story-link{
    display:block;
    grid-column:3;
    justify-self:end;
    color:var(--gold2);
    text-decoration:none;
    font:800 11px/1 Inter,sans-serif;
    letter-spacing:.16em;
  }

  /* APP MENU */
  .hero-menu{
    position:fixed;
    top:calc(var(--mobile-topbar) + env(safe-area-inset-top, 0px) + 10px);
    left:18px;
    right:18px;
    width:auto;
    min-width:0;
    transform:none;
    z-index:10001;

    padding:22px 24px;
    display:none;
    flex-direction:column;
    gap:0;

    background:rgba(3,3,3,.97);
    border:1px solid rgba(241,210,122,.34);
    border-radius:24px;
    box-shadow:0 28px 80px rgba(0,0,0,.88);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .hero-menu.open{
    display:flex;
  }

  .hero-menu a{
    padding:13px 0;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.09);
    text-align:center;
    text-decoration:none;
    font:800 15px/1 Inter,sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .hero-menu a:first-child{
    color:var(--gold2);
  }

  .hero-menu a:last-child{
    border-bottom:0;
  }

  /* NOW PLAYING SCREEN */
  .hero{
    min-height:100svh;
    height:auto;
    padding:
      calc(var(--mobile-topbar) + env(safe-area-inset-top, 0px) + 18px)
      20px
      calc(28px + var(--mobile-safe-bottom));

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
  }

  .side-index,
  .hero-logo,
  .tagline,
  .subline,
  .intro{
    display:none;
  }

  .cover-card{
    order:1;
    width:min(100%, 410px);
    max-width:none;
    aspect-ratio:1/1;
    margin:0 auto;

    border:1px solid rgba(212,175,55,.34);
    border-radius:34px;
    overflow:hidden;
    background:#020202;

    box-shadow:
      0 24px 70px rgba(0,0,0,.82),
      0 0 48px rgba(212,175,55,.20);
   }

  .cover-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .booklet-shade{
    background:
      radial-gradient(circle at 70% 20%, rgba(255,221,135,.10), transparent 22%),
      linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.08));
  }

  .hero-copy{
    order:2;
    width:100%;
    max-width:430px;
    margin:0 auto;
    padding:0;
    transform:none;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .now{
    order:1;
    width:100%;
    max-width:430px;
    margin:20px auto 0;
    padding:0;
    display:block;
    text-align:center;
  }

  .now strong{
    display:none;
  }

  .now-text{
    width:100%;
  }

  .now-row{
    margin:0;
    color:#fff;
    text-align:center;
  }

  .now-row span{
    display:none;
  }

  .now-row b{
    display:block;
    color:#fff;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .now-row:nth-of-type(1) b{
    color:var(--gold2);
    font:800 27px/1.05 Oswald,sans-serif;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  .now-row:nth-of-type(2) b{
    margin-top:8px;
    color:#fff;
    font:700 22px/1.18 Inter,sans-serif;
    letter-spacing:.01em;
  }

  #nowVersionRow{
    display:block !important;
  }

  #nowVersionRow b{
    margin-top:9px;
    color:rgba(255,255,255,.66);
    font:700 12px/1.3 Inter,sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .time{
    display:none;
  }

  .progress{
    width:100%;
    height:5px;
    margin:13px 0 0;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.16);
  }

  .progress i{
    display:block;
    height:100%;
    width:0;
    border-radius:999px;
    background:linear-gradient(90deg,var(--gold2),var(--gold));
  }

  /* Hide desktop action buttons on app screen */
  .actions{
    display:none;
  }

  .mobile-app-controls{
    order:2;
    width:100%;
    max-width:430px;
    margin:26px auto 0;
    display:grid;
    grid-template-columns:1fr 1fr 92px 1fr 1fr;
    align-items:center;
    gap:4px;
  }

  .mobile-app-action,
  .mobile-app-play{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  .mobile-app-action{
    min-height:66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    font:700 10px/1 Inter,sans-serif;
    letter-spacing:.04em;
    text-align:center;
  }

  .mobile-app-icon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    color:#fff;
  }

  .mobile-app-icon svg{
    width:34px;
    height:34px;
    display:block;
    fill:currentColor;
  }

  .mobile-app-action.is-active .mobile-app-icon,
  .mobile-app-action.is-favorite .mobile-app-icon{
    color:var(--gold2);
  }

  .mobile-app-play{
    position:relative;
    width:92px;
    height:92px;
    display:grid;
    place-items:center;
    justify-self:center;
    border-radius:50%;
    color:#fff;
    background:transparent;
  }

  .mobile-app-play::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255,216,107,.96) 90deg,
      rgba(255,242,178,.98) 155deg,
      rgba(255,216,107,.96) 220deg,
      transparent 330deg
    );
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation:mobilePlayRing 6s linear infinite;
  }

  .mobile-app-play::after{
    content:"";
    position:absolute;
    inset:7px;
    border-radius:50%;
    background:#000;
    border:1px solid rgba(241,210,122,.40);
  }

  .mobile-play-icon{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:78px;
    height:78px;
  }

  .mobile-play-icon svg{
    width:42px;
    height:42px;
    display:block;
    fill:#fff;
  }

  .mobile-app-play.is-paused::before{
    opacity:.42;
    animation:none;
  }

  @keyframes mobilePlayRing{
    to{ transform:rotate(360deg); }
  }

  /* AI STORY becomes the first card under app screen */
  .track-info{
  display:none;
  }

  .track-info h4{
    margin:0 0 16px;
    color:var(--gold2);
    font:800 12px/1 Inter,sans-serif;
    letter-spacing:.24em;
  }

  .track-info p{
    max-height:none;
    overflow:visible;
    margin:0 0 18px;
    color:rgba(255,255,255,.78);
    font:300 15px/1.6 Inter,sans-serif;
  }

  .track-meta{
    gap:7px;
    font-size:13px;
  }

  .track-disclaimer{
    margin-top:13px;
    padding-top:13px;
    color:rgba(255,255,255,.42);
    font-size:11px;
    line-height:1.55;
  }

  /* Tiles become a compact app menu below Now Playing */
  .tiles{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:20px;
    border:0;
    background:#020202;
  }

  .tile,
  .tile.radio{
    min-height:92px;
    padding:18px 20px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:22px;
    background:rgba(255,255,255,.035);
  }

  .tile:before{
    opacity:.22;
  }

  .tile:after{
    background:linear-gradient(90deg, rgba(0,0,0,.60), rgba(0,0,0,.92));
  }

  .tile b{
    position:static;
    display:block;
    margin:0 0 8px;
    color:var(--gold2);
    font:800 12px/1 Inter,sans-serif;
    letter-spacing:.22em;
  }

  .tile h3{
    margin:0 0 8px;
    color:#fff;
    font:800 24px/.95 Oswald,sans-serif;
    letter-spacing:.05em;
  }

  .tile p{
    margin:0;
    max-width:260px;
    color:rgba(255,255,255,.66);
    font:300 13px/1.35 Inter,sans-serif;
  }

  .tile span{
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    color:var(--gold2);
    font-size:24px;
  }

  .tile.radio{
    display:block;
  }

  .tile.radio:after{
    display:none;
  }

  .tile.radio p{
    display:grid;
    gap:12px;
    margin:0;
  }

  .tile.radio a{
    display:block;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#fff;
    font:800 14px/1 Inter,sans-serif;
    letter-spacing:.16em;
  }

  .tile.radio a:last-child{
    border-bottom:0;
  }

  /* Sections: single-column app cards */
  .content-section{
    padding:54px 20px;
  }

  .section-kicker,
  .discovery-more-title,
  .coming-track-head{
    font-size:11px;
    letter-spacing:.22em;
    line-height:1.35;
  }

  .rotation-head,
  .discovery-layout,
  .coming-layout,
  .producers-layout,
  .merch-hero{
    display:block;
  }

  .rotation-head h2,
  .discovery-copy h2,
  .coming-copy h2,
  .producers-copy h2,
  .merch-copy h2{
    font-size:42px;
    line-height:.92;
  }

  .rotation-head p,
  .discovery-copy p,
  .coming-copy p,
  .producers-copy p,
  .merch-copy p{
    font-size:15px;
    line-height:1.55;
  }

  .rotation-legend{
    margin-top:18px;
    white-space:normal;
  }

  .rotation-item{
    grid-template-columns:1fr;
    gap:9px;
    min-height:0;
    padding:18px;
    border-radius:18px;
  }

  .rotation-artist{
    font-size:24px;
  }

  .rotation-badge{
    justify-self:start;
    margin-top:8px;
  }

  .discovery-booklet,
  .coming-studio,
  .merch-image{
    margin-top:28px;
  }

  .discovery-booklet:before,
  .coming-studio:before,
  .merch-image:after{
    display:none;
  }

  .discovery-grid,
  .coming-grid,
  .coming-process,
  .coming-steps,
  .producers-grid,
  .producers-stats,
  .merch-icons,
  .merch-products{
    grid-template-columns:1fr;
  }

  .discovery-card,
  .coming-card{
    border-radius:18px;
  }

  .coming-card{
    grid-template-columns:112px 1fr;
  }

  .coming-card img{
    width:112px;
    height:112px;
  }

  .producer-card,
  .merch-product{
    border-radius:20px;
  }

  .producer-card{
    min-height:auto;
  }

  .producer-card img{
    height:320px;
    object-fit:cover;
    object-position:center top;
  }

  .producers-stats div{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:18px 0;
  }

  .producers-stats div:last-child{
    border-bottom:0;
  }

  .footer{
    height:auto;
    min-height:0;
    padding:36px 20px calc(40px + var(--mobile-safe-bottom));
    display:flex;
    flex-direction:column;
    gap:16px;
    text-align:center;
  }

  .footer strong{
    justify-self:auto;
  }

  .social{
    white-space:normal;
    letter-spacing:.22em;
  }

  .modal{
    align-items:flex-start;
    padding-top:calc(var(--mobile-topbar) + env(safe-area-inset-top, 0px) + 14px);
  }

  .modal-box{
    width:auto;
    max-width:none;
    margin:0 18px 18px;
    max-height:calc(100svh - 110px);
    overflow:auto;
    border-radius:24px;
  }
}

@media (max-width:380px){
    .cover-card{
      width:min(100%, 335px);
      border-radius:28px;
    }

    .now-row:nth-of-type(1) b{
      font-size:24px;
    }

    .now-row:nth-of-type(2) b{
      font-size:19px;
    }

    .mobile-app-controls{
      grid-template-columns:1fr 1fr 78px 1fr 1fr;
      gap:2px;
    }

    .mobile-app-play{
      width:78px;
      height:78px;
    }

    .mobile-play-icon{
      width:64px;
      height:64px;
    }

    .mobile-play-icon svg{
      width:36px;
      height:36px;
    }

    .mobile-app-action{
      font-size:8px;
    }

    .mobile-app-icon,
    .mobile-app-icon svg{
      width:30px;
      height:30px;
    }
}

.story-modal{
  position:fixed;
  inset:0;
  z-index:30000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.86);
  }

.story-modal.open{
  display:flex;
  }

.story-modal-box{
  width:100%;
  max-width:390px;
  max-height:82svh;
  overflow:auto;
  padding:26px;
  border-radius:28px;
  background:#050505;
  border:1px solid rgba(241,210,122,.45);
  box-shadow:0 30px 90px rgba(0,0,0,.85);
  text-align:center;
  }

.story-modal-box h3{
  margin:0 0 22px;
  color:var(--gold2);
  font:800 18px/1 Inter,sans-serif;
  letter-spacing:.24em;
  }

#storyContent{
  color:#fff;
  font:300 16px/1.6 Inter,sans-serif;
}

.story-close{
  position:absolute;
  right:24px;
  top:20px;
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:24px;
}

.sleep-modal{
  position:fixed;
  inset:0;
  z-index:30000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.86);
}

.sleep-modal.open{
  display:flex;
}

.sleep-box{
  position:relative;
  width:100%;
  max-width:390px;
  max-height:90svh;
  overflow:auto;
  padding:34px 26px 28px;
  border-radius:32px;
  background:#050505;
  border:1px solid rgba(241,210,122,.45);
  box-shadow:0 30px 90px rgba(0,0,0,.86);
  text-align:center;
}

.sleep-close{
  position:absolute;
  right:20px;
  top:18px;
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  line-height:1;
}

.sleep-box h3{
  margin:0 0 28px;
  color:#fff;
  font:300 31px/1 Inter,sans-serif;
  letter-spacing:.20em;
}

.sleep-label{
  margin-bottom:15px;
  color:#fff;
  font:400 10px/1 Inter,sans-serif;
  letter-spacing:.12em;
}

.sleep-list{
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(241,210,122,.35);
  text-align:left;
}

.sleep-option{
  width:100%;
  min-height:38px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  border-bottom:1px solid rgba(241,210,122,.22);
  background:#050505;
  color:#fff;
  font:400 11px/1 Inter,sans-serif;
  text-align:left;
}

.sleep-option:last-child{
  border-bottom:0;
}

.sleep-option b{
  color:var(--gold2);
  font-size:20px;
}

.sleep-option.active{
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#050505;
}

.sleep-option.active b{
  color:#050505;
}

.sleep-off{
  min-height:72px;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}

.sleep-off small{
  color:rgba(255,255,255,.55);
  font-size:14px;
}

.sleep-status{
  margin-top:28px;
  padding:24px;
  border-radius:20px;
  border:1px solid rgba(241,210,122,.35);
  color:#fff;
}

.sleep-status div{
  font:400 16px/1 Inter,sans-serif;
  letter-spacing:.12em;
}

.sleep-status strong{
  display:block;
  margin-top:18px;
  color:var(--gold2);
  font:600 34px/1 Inter,sans-serif;
}

.sleep-note{
  margin:24px 8px 0;
  color:rgba(255,255,255,.62);
  font:300 14px/1.45 Inter,sans-serif;
}

.favorite-save-btn{
  width:100%;
  min-height:54px;
  margin-bottom:18px;
  border:1px solid rgba(241,210,122,.45);
  border-radius:16px;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#050505;
  font:900 13px/1 Inter,sans-serif;
  letter-spacing:.14em;
}

.favorites-list{
  display:grid;
  gap:12px;
  text-align:left;
  color:#fff;
}

.favorite-item{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(241,210,122,.22);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}

.favorite-item img{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:10px;
}

.favorite-item b{
  display:block;
  color:var(--gold2);
  font:800 14px/1.1 Oswald,sans-serif;
  text-transform:uppercase;
}

.favorite-item span{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.72);
  font:400 12px/1.25 Inter,sans-serif;
}

.favorite-item{
  position:relative;
}

.favorite-remove{
  position:absolute;
  right:8px;
  top:8px;
  width:26px;
  height:26px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:14px;
}

#favoriteIcon{
  transition:.25s;
}

#favoriteIcon.is-favorite{
  color:#d4af37;
  transform:scale(1.08);
}