/* =========================================================
   MQ3 MUSIC — MOBILE PREMIUM PLAYER
   ========================================================= */


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.player-app .catalog-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(0,1fr);

  grid-template-areas:
    "search listen"
    "filters listen"
    "status listen"
    "songs listen";

  column-gap:28px;
  row-gap:0;

  align-items:start;

  padding-top:18px;
}


.player-app .search-block{
  grid-area:search;
  min-width:0;
}


.player-app .search-meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:16px;

  margin-bottom:7px;
}


.player-app .search-meta label{
  margin:0;
}


.player-app .filters{
  grid-area:filters;
}


.player-app #catalog-status{
  grid-area:status;
}


.player-app #song-grid{
  grid-area:songs;
}


.player-app .listen{
  grid-area:listen;
}



/* =========================================================
   MQ3 HEADER
   Matches the supplied visual:
   logo + Pick a Song + PRESS PLAY + gold divider
   ========================================================= */

.player-app .topbar.topbar-hero{
  min-height:auto;

  padding:8px 0 4px;

  border-bottom:0;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}


.player-app .topbar-hero .brand{
  display:flex;

  align-items:flex-start;

  gap:13px;

  text-decoration:none;
}


.player-app .topbar-hero .brand img{
  width:80px;
  height:80px;

  flex:0 0 80px;

  object-fit:contain;

  filter:
    drop-shadow(0 5px 10px rgba(0,0,0,.4));
}


.player-app .topbar-hero .brand-copy{
  display:flex;
  flex-direction:column;

  justify-content:flex-start;

  min-width:0;

  line-height:1;
}


.player-app .topbar-hero .brand-copy strong{
  margin:0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:36px;
  line-height:1;

  font-weight:400;

  letter-spacing:.2px;

  color:#f8ebd9;

  text-shadow:
    0 2px 5px rgba(0,0,0,.35);

  white-space:nowrap;
}


.player-app .topbar-hero .brand-copy small{
  margin-top:10px;

  padding-left:2px;

  font-size:11px;
  line-height:1;

  font-weight:600;

  letter-spacing:5px;

  color:#d8aa45;

  text-transform:uppercase;

  white-space:nowrap;
}



/* =========================================================
   GOLD HEADER DIVIDER
   ========================================================= */

.player-app .hero-divider{
  position:relative;

  width:100%;
  height:18px;

  margin:0 0 8px;
}


.player-app .hero-divider::before{
  content:"";

  position:absolute;

  left:0;
  right:0;

  top:8px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(209,155,56,0) 0%,
      rgba(209,155,56,.25) 5%,
      rgba(209,155,56,.68) 25%,
      rgba(224,175,70,.95) 50%,
      rgba(209,155,56,.68) 75%,
      rgba(209,155,56,.25) 95%,
      rgba(209,155,56,0) 100%
    );
}


.player-app .hero-divider span{
  position:absolute;

  left:50%;
  top:8px;

  width:46px;
  height:8px;

  transform:
    translate(-50%,-50%)
    rotate(45deg);

  pointer-events:none;
}


.player-app .hero-divider span::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:7px;
  height:7px;

  border:1px solid #d7a842;

  transform:
    translate(-50%,-50%);
}



/* =========================================================
   NOW PLAYING
   ========================================================= */

.player-app .now-playing-head{
  display:grid;

  grid-template-columns:
    112px
    minmax(0,1fr);

  gap:18px;

  align-items:center;

  margin-bottom:18px;
}


.player-app #player-cover{
  width:112px;
  height:112px;

  object-fit:cover;

  border-radius:14px;

  border:
    1px solid var(--line);

  background:#210705;

  box-shadow:
    0 12px 30px #0005;
}


.player-app .now-playing-copy{
  min-width:0;
}


.player-app .track-meta{
  display:flex;

  gap:0;

  flex-wrap:wrap;

  margin-top:8px;

  font-size:13px;
}



/* =========================================================
   YOUTUBE / SPOTIFY SWITCH
   ========================================================= */

.player-app .platforms{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:0;

  margin:
    16px 0 14px;

  border:
    1px solid #7a4a22;

  border-radius:999px;

  overflow:hidden;

  background:#160403;

  box-shadow:
    inset 0 1px 0 #fff1b911;
}


.player-app .platforms .platform-button{
  min-height:48px;

  border:0;

  border-radius:999px;

  background:transparent;

  color:#c9b5a8;

  font-weight:600;

  gap:9px;

  box-shadow:none;

  transform:none;
}


.player-app .platforms .platform-button:hover{
  background:#2b0906;

  filter:none;
}


.player-app .platforms .platform-button[aria-pressed=true]{
  color:#fff;

  background:
    linear-gradient(
      180deg,
      #b81619 0%,
      #8b0d12 55%,
      #5f070b 100%
    );

  box-shadow:
    inset 0 0 0 1px #ff7c73aa,
    0 7px 18px #0006;
}


.player-app .platforms .spotify-tab[aria-pressed=true]{
  background:
    linear-gradient(
      180deg,
      #269f58 0%,
      #16753f 58%,
      #0f4d2c 100%
    );

  box-shadow:
    inset 0 0 0 1px #6fe29baa,
    0 7px 18px #0006;
}


.player-app .platform-icon{
  display:inline-flex;

  width:22px;
  height:22px;

  align-items:center;
  justify-content:center;

  flex:
    0 0 22px;
}


.player-app .platform-icon svg{
  width:22px;
  height:22px;

  display:block;
}


.player-app .youtube-icon svg path:first-child{
  fill:currentColor;
}


.player-app .youtube-icon .play-mark{
  fill:#8b0d12;
}


.player-app
.platform-button[aria-pressed=true]
.youtube-icon
.play-mark{
  fill:#fff;
}


.player-app .spotify-icon svg circle{
  fill:currentColor;
}


.player-app .spotify-icon .spotify-wave{
  fill:none;

  stroke:#160403;

  stroke-width:1.7;

  stroke-linecap:round;
}


.player-app
.platform-button[aria-pressed=true]
.spotify-icon
.spotify-wave{
  stroke:#fff;
}


.player-app .platform-button:disabled{
  opacity:.45;
}



/* =========================================================
   PLAYER
   ========================================================= */

.player-app .player iframe{
  box-shadow:
    0 12px 28px #0005;
}



/* =========================================================
   SUPPORT / SUBSCRIBE / FOLLOW
   ========================================================= */

.player-app .support-artist{
  margin-top:14px;

  padding:14px;

  border:
    1px solid #6e4023;

  border-radius:16px;

  background:#170504;

  box-shadow:
    inset 0 1px 0 #fff3cf0d;
}


.player-app .support-title{
  display:block;

  margin-bottom:10px;

  font-size:12px;

  font-weight:700;

  letter-spacing:1.4px;

  text-transform:uppercase;

  color:#e9c76c;
}


.player-app .support-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;
}


.player-app .support-button{
  display:flex;

  align-items:center;
  justify-content:center;

  min-height:44px;

  border-radius:999px;

  text-decoration:none;

  font-weight:700;

  border:
    1px solid transparent;
}


.player-app .youtube-support{
  background:
    linear-gradient(
      180deg,
      #c72121,
      #811015
    );

  color:#fff;

  border-color:#ef6d64;
}


.player-app .spotify-support{
  background:
    linear-gradient(
      180deg,
      #2ab765,
      #176f40
    );

  color:#fff;

  border-color:#67d994;
}


.player-app .support-artist small{
  display:block;

  margin-top:9px;

  color:#aa9385;

  font-size:11px;

  line-height:1.4;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

  .player-app{
    background:
      radial-gradient(
        circle at 55% 18%,
        #3b110a 0%,
        #210704 26%,
        #130403 70%
      );
  }


  .player-app .wrap{
    padding:
      0 16px;
  }



  /* HEADER */

  .player-app .topbar.topbar-hero{
    min-height:auto;

    padding:
      6px 0 2px;

    border-bottom:0;
  }


  .player-app .topbar-hero .brand{
    gap:12px;
  }


  .player-app .topbar-hero .brand img{
    width:78px;
    height:78px;

    flex-basis:78px;

    filter:
      drop-shadow(
        0 6px 14px #0008
      );
  }


  .player-app
  .topbar-hero
  .brand-copy
  strong{

    font-size:35px;

    line-height:.98;

    letter-spacing:0;
  }


  .player-app
  .topbar-hero
  .brand-copy
  small{

    margin-top:10px;

    font-size:10px;

    letter-spacing:5px;
  }


  .player-app .hero-divider{
    height:16px;

    margin:
      0 0 7px;
  }



  /* LAYOUT */

  .player-app .catalog-layout{

    grid-template-columns:
      1fr;

    grid-template-areas:
      "search"
      "listen"
      "filters"
      "status"
      "songs";

    gap:0;

    padding-top:8px;
  }



  /* SEARCH */

  .player-app .search-block{
    margin-bottom:16px;
  }


  .player-app .search-meta{
    margin-bottom:8px;
  }


  .player-app .search-meta label{
    font-size:14px;

    color:#f0dcc7;
  }


  .player-app #count{
    font-size:12px;

    color:#f0dcc7;
  }


  .player-app #search{
    min-height:60px;

    border-radius:18px;

    padding:
      15px 18px;

    font-size:16px;

    background:
      linear-gradient(
        180deg,
        #2b0d08,
        #210805
      );

    border:
      1px solid #a36b31;

    box-shadow:
      inset 0 1px 0 #fff2c912,
      0 8px 18px #0003;
  }



  /* NOW PLAYING CARD */

  .player-app .listen{

    margin-bottom:8px;

    padding:18px;

    border-radius:22px;

    background:
      radial-gradient(
        circle at 76% 10%,
        #7a2b0d66 0%,
        transparent 38%
      ),
      linear-gradient(
        155deg,
        #4d160d 0%,
        #300b07 58%,
        #1d0604 100%
      );

    border:
      1px solid #b27b37;

    box-shadow:
      0 18px 38px #0006,
      inset 0 1px 0 #ffdf9b1f;
  }


  .player-app .now-playing-head{

    grid-template-columns:
      104px
      minmax(0,1fr);

    gap:16px;

    margin-bottom:14px;
  }


  .player-app #player-cover{

    width:104px;
    height:104px;

    border-radius:16px;

    border-color:#8f5c2c;

    box-shadow:
      0 10px 22px #0007;
  }


  .player-app .listen .eyebrow{

    display:inline-flex;

    width:max-content;

    padding:
      4px 10px;

    border:
      1px solid #d6a64e;

    border-radius:999px;

    letter-spacing:1.8px;

    background:#4a170c;

    color:#ffd875;

    box-shadow:
      inset 0 1px 0 #fff3c322;
  }


  .player-app .listen h2{

    font-size:24px;

    line-height:1.05;

    margin:
      8px 0 0;

    letter-spacing:-.25px;
  }


  .player-app .track-meta{

    font-size:13px;

    margin-top:9px;

    color:#e8d2c0;
  }



  /* PLATFORM SWITCH */

  .player-app .platforms{

    margin:
      14px 0 12px;

    border-color:#8c5b2f;

    background:#120302;

    box-shadow:
      inset 0 1px 0 #fff1b911,
      0 7px 18px #0003;
  }


  .player-app
  .platforms
  .platform-button{

    min-height:52px;

    font-size:15px;

    padding:
      10px 14px;
  }


  .player-app
  .platforms
  .platform-button[aria-pressed=true]{

    background:
      linear-gradient(
        180deg,
        #c72121 0%,
        #9f1116 52%,
        #65090c 100%
      );

    box-shadow:
      inset 0 0 0 1px #ff8278cc,
      0 8px 20px #0006,
      0 0 20px #9e15153a;
  }


  .player-app
  .platforms
  .spotify-tab[aria-pressed=true]{

    background:
      linear-gradient(
        180deg,
        #2bb968 0%,
        #1a8649 56%,
        #105a32 100%
      );

    box-shadow:
      inset 0 0 0 1px #78eba6aa,
      0 8px 20px #0006,
      0 0 20px #16844733;
  }



  /* EMBED */

  .player-app .player{

    overflow:hidden;

    border-radius:16px;

    background:#090202;

    border:
      1px solid #4e2618;

    box-shadow:
      0 14px 28px #0007;
  }


  .player-app
  .player
  .youtube{

    min-height:0;

    aspect-ratio:16 / 9;

    border-radius:0;

    display:block;
  }


  .player-app
  .player
  .spotify{

    height:352px;

    border-radius:0;

    display:block;
  }



  /* SUPPORT */

  .player-app .support-artist{

    margin-top:14px;

    padding:13px;
  }


  .player-app .support-actions{
    gap:8px;
  }


  .player-app .support-button{

    min-height:46px;

    font-size:14px;
  }



  /* FILTERS */

  .player-app .filters{

    margin:
      2px 0 16px;

    gap:9px;

    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .player-app .filters button{

    min-height:48px;

    padding:
      9px 12px;

    font-size:13px;

    border-radius:999px;

    background:#250805;

    border:
      1px solid #7f4f27;

    color:#f5e3cf;
  }


  .player-app
  .filters
  button[data-category="OPM"]{

    grid-column:auto;
  }


  .player-app
  .filters
  button[aria-pressed=true]{

    background:
      linear-gradient(
        180deg,
        #f2cc70,
        #dba847
      );

    color:#2a1207;

    border-color:#f3cf76;

    box-shadow:
      0 8px 18px #0003,
      inset 0 1px 0 #fff7cf88;
  }



  /* SONG LIST */

  .player-app .song-row{

    padding:
      12px 12px;

    border:
      1px solid #5c2d1d;

    border-radius:14px;

    margin-bottom:9px;

    background:
      linear-gradient(
        180deg,
        #2a0a06,
        #210805
      );

    box-shadow:
      0 7px 18px #0002;
  }


  .player-app
  .song-row[aria-pressed=true]{

    background:
      linear-gradient(
        90deg,
        #47220f,
        #2a0b06
      );

    border-color:#b98736;

    border-left:
      4px solid var(--gold);

    box-shadow:
      0 9px 22px #0004;
  }


  .player-app .song-row img{

    width:62px;
    height:62px;

    border-radius:11px;

    border:
      1px solid #6e3a20;
  }


  .player-app
  .song-info
  strong{

    font-size:16px;

    line-height:1.25;
  }


  .player-app
  .song-info
  small{

    font-size:12px;

    color:#d6c0ad;
  }


  .player-app .play-circle{

    font-size:24px;

    padding-right:6px;
  }


  .player-app .grid{

    max-height:none;

    overflow:visible;
  }

}



/* =========================================================
   SMALL PHONE
   ========================================================= */

@media(max-width:420px){

  .player-app
  .topbar-hero
  .brand{

    gap:10px;
  }


  .player-app
  .topbar-hero
  .brand
  img{

    width:70px;
    height:70px;

    flex-basis:70px;
  }


  .player-app
  .topbar-hero
  .brand-copy
  strong{

    font-size:31px;
  }


  .player-app
  .topbar-hero
  .brand-copy
  small{

    margin-top:9px;

    font-size:9px;

    letter-spacing:4.6px;
  }


  .player-app .hero-divider{

    margin-bottom:5px;
  }


  .player-app .now-playing-head{

    grid-template-columns:
      88px
      minmax(0,1fr);

    gap:13px;
  }


  .player-app #player-cover{

    width:88px;
    height:88px;
  }


  .player-app .listen h2{

    font-size:21px;

    line-height:1.08;
  }


  .player-app
  .platforms
  .platform-button{

    font-size:14px;

    padding:
      9px 10px;
  }


  .player-app .platform-icon{

    width:20px;
    height:20px;

    flex-basis:20px;
  }


  .player-app
  .platform-icon
  svg{

    width:20px;
    height:20px;
  }


  .player-app .filters{

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .player-app
  .filters
  button:last-child{

    grid-column:
      1 / -1;
  }

}