*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#000;
  color:#f4f4f4;
  font-family:Arial,Helvetica,sans-serif;
  padding-bottom:0;
}

.app-shell{
  max-width:760px;
  margin:auto;
  background:#000;
  min-height:100vh;
  padding-bottom:110px;
}


/* TOP BAR */

.topbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}

.menu-btn{
  width:46px;
  height:46px;
  background:none;
  border:0;
  padding:8px;
  cursor:pointer;
}

.menu-btn span{
  display:block;
  height:4px;
  background:#e5b42f;
  margin:6px 0;
  border-radius:2px;
}

.top-install{
  background:#d8a52b;
  color:#080808;
  border:0;
  border-radius:7px;
  font-weight:800;
  padding:10px 15px;
  cursor:pointer;
}


/* STATIONS */

.stations{
  padding:0 20px;
}

.station-card{
  display:grid;
  grid-template-columns:minmax(150px,43%) 1fr;
  gap:24px;
  padding:22px 8px 24px;
  border-bottom:3px solid #d7ad18;
  align-items:start;
}

.station-logo{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#080808;
}

.station-content h1{
  font-size:27px;
  margin:12px 0 16px;
  line-height:1.05;
}

.genres{
  font-size:19px;
  line-height:1.35;
  margin:0 0 12px;
  color:#e7e7e7;
}


/* NOW PLAYING */

.now-playing{
  border-top:1px solid #222;
  padding-top:10px;
  margin-bottom:12px;
}

.now-playing span{
  display:block;
  font-size:10px;
  letter-spacing:1.3px;
  color:#999;
  margin-bottom:4px;
}

.now-playing strong{
  display:block;
  font-size:13px;
  line-height:1.3;
}


/* LISTEN LIVE BUTTONS */

.listen{
  width:100%;
  height:60px;
  border:0;
  border-radius:5px;
  color:#080808;
  font-size:21px;
  cursor:pointer;
  box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.25);
}

.listen.dj{
  background:
    linear-gradient(
      #f5c64d,
      #d99b20
    );
}

.listen.strobe{
  background:
    linear-gradient(
      #16a6ff,
      #0073db
    );
  color:#fff;
}

.listen.pulse{
  background:
    linear-gradient(
      #13e766,
      #00a941
    );
  color:#fff;
}


/* STATION LINKS */

.station-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.station-links a{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  color:#eee;
  border:2px solid;
  border-radius:4px;
  font-size:17px;
}

.dj-border{
  border-color:#e5bd1e !important;
}

.strobe-border{
  border-color:#008df0 !important;
}

.pulse-border{
  border-color:#00c74d !important;
}

.facebook-icon{
  font-family:Arial;
  font-size:30px;
  font-weight:900;
  color:#fff;
  line-height:1;
}


/* SECTIONS */

.page-section{
  padding:38px 28px;
  border-bottom:1px solid #222;
}

.page-section h2{
  text-align:center;
  margin:0 0 25px;
  font-size:27px;
}


/* SCHEDULE */

.schedule-item{
  padding:17px 5px;
  border-bottom:1px solid #2b2b2b;
}

.schedule-item strong,
.schedule-item span,
.schedule-item em{
  display:block;
}

.schedule-item span{
  margin-top:5px;
  color:#ddd;
}

.schedule-item em{
  margin-top:5px;
  color:#d6ad2d;
  font-style:normal;
  font-size:13px;
}


/* DONATE */

.donate-button{
  display:block;
  max-width:300px;
  margin:24px auto 0;
  text-align:center;
  text-decoration:none;
  background:#ffc439;
  color:#111;
  font-weight:800;
  padding:14px;
  border-radius:7px;
}


/* BOTTOM NAV */

.bottom-nav{
  position:fixed;
  z-index:9999;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(760px,100%);
  height:82px;
  min-height:82px;
  background:#050505;
  border-top:1px solid #444;

  display:grid;
  grid-template-columns:
    repeat(5,1fr);

  align-items:stretch;

  padding:
    0
    0
    env(safe-area-inset-bottom)
    0;
}

.bottom-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  color:#f2f2f2;
  text-decoration:none;

  font-size:11px;
  font-weight:700;
  line-height:1.15;

  padding:8px 4px 10px;

  min-width:0;
  background:#050505;
}

.bottom-nav a.active{
  color:#e6b632;
  border-bottom:
    4px solid #e6b632;
}


/* SIDE DRAWER */

.drawer{
  position:fixed;
  z-index:10001;

  top:0;
  left:-330px;

  width:min(330px,86vw);
  height:100vh;

  background:#050505;

  transition:.25s;

  border-right:
    1px solid #2b2b2b;

  padding-top:55px;
}

.drawer.open{
  left:0;
}

.drawer-head{
  position:absolute;
  top:14px;
  left:18px;
}

.drawer-head button{
  background:none;
  border:0;
  color:#f0b62c;
  font-size:42px;
}

.drawer a{
  height:62px;

  display:flex;
  align-items:center;

  padding:0 26px;

  color:#eee;
  text-decoration:none;

  border-bottom:
    1px solid #222;

  font-size:17px;
}

.drawer a.selected{
  color:#e8b62d;

  background:
    linear-gradient(
      90deg,
      #503200,
      #181000
    );
}


/* MENU BACKGROUND */

.scrim{
  position:fixed;
  z-index:10000;
  inset:0;

  background:
    rgba(0,0,0,.65);

  display:none;
}

.scrim.show{
  display:block;
}


/* SHARED PLAYER */

.player-bar{
  position:fixed;

  z-index:9998;

  left:50%;
  transform:translateX(-50%);

  bottom:82px;

  width:min(760px,100%);

  background:#111;

  border-top:
    1px solid #333;

  padding:9px 18px;

  display:flex;
  align-items:center;
  gap:12px;
}

.player-bar[hidden]{
  display:none;
}


/* ACTIVE STATION LOGO */

.player-logo{
  width:52px;
  height:52px;

  flex:0 0 52px;

  object-fit:cover;

  border-radius:10px;

  background:#000;

  border:
    1px solid #333;
}


/* PLAYER INFORMATION */

.player-info{
  min-width:0;

  display:flex;
  flex-direction:column;

  flex:1;
}

.player-bar strong{
  font-size:13px;
}

.player-bar span{
  font-size:11px;

  color:#bbb;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


/* ONE PLAY / PAUSE CONTROL */

.player-bar button{
  border:0;

  background:#d6a82e;

  color:#000;

  border-radius:50%;

  width:44px;
  height:44px;

  flex:0 0 44px;

  font-size:18px;
  font-weight:bold;

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

  cursor:pointer;
}


/* HIDDEN METADATA FRAMES */

.metadata-iframes{
  position:absolute;

  width:1px;
  height:1px;

  overflow:hidden;

  clip-path:inset(50%);
}

.metadata-iframes iframe{
  width:1px;
  height:1px;
  border:0;
}


/* INSTALL WINDOW */

.install-modal{
  position:fixed;
  inset:0;

  z-index:11000;

  background:
    rgba(0,0,0,.8);

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

  padding:20px;
}

.install-modal[hidden]{
  display:none;
}

.install-modal-card{
  position:relative;

  width:min(420px,95vw);

  background:#111;

  border:
    1px solid #444;

  border-radius:12px;

  padding:24px;
}

.install-modal-card h2{
  margin-top:0;
}

.install-modal-card li{
  margin:9px 0;
}

.install-modal-close{
  position:absolute;

  right:10px;
  top:7px;

  background:none;
  border:0;

  color:#fff;

  font-size:30px;
}


/* MOBILE */

@media(max-width:600px){

  .app-shell{
    padding-bottom:104px;
  }

  .topbar{
    height:62px;
    padding:0 14px;
  }

  .stations{
    padding:0 12px;
  }

  .station-card{
    grid-template-columns:
      42% 1fr;

    gap:14px;

    padding:
      18px 2px;
  }

  .station-content h1{
    font-size:20px;
    margin:8px 0 10px;
  }

  .genres{
    font-size:15px;
  }

  .listen{
    height:50px;
    font-size:17px;
  }

  .station-links{
    gap:8px;
  }

  .station-links a{
    height:43px;
    font-size:13px;
    gap:7px;
  }

  .facebook-icon{
    font-size:25px;
  }

  .top-install{
    font-size:12px;
    padding:9px 11px;
  }

  .bottom-nav{
    height:76px;
    min-height:76px;
  }

  .bottom-nav a{
    font-size:10px;
    padding:7px 2px 9px;
  }

  .player-bar{
    bottom:76px;
  }

  .player-logo{
    width:44px;
    height:44px;
    flex-basis:44px;
    border-radius:8px;
  }

}


/* SMALL PHONES */

@media(max-width:390px){

  .station-card{
    grid-template-columns:
      38% 1fr;
  }

  .station-content h1{
    font-size:18px;
  }

  .genres{
    font-size:14px;
  }

  .station-links
  a span:last-child{
    font-size:12px;
  }

  .player-logo{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

}