/* =========================================================
   INLINE PLAY-PAGE RADIO VOLUME
========================================================= */

.play-page-radio-cluster {
  display: flex;
  align-items: center;

  margin-left: auto;
  flex: 0 0 auto;

  border: 1px solid rgba(83, 239, 255, .66);
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(5, 24, 48, .97),
      rgba(38, 11, 61, .96)
    );

  box-shadow:
    0 0 19px rgba(70, 234, 255, .34),
    0 0 35px rgba(188, 70, 255, .2),
    inset 0 1px 0 rgba(255, 255, 255, .09);

  overflow: hidden;
}

.play-page-radio-cluster
.play-page-radio-toggle {
  margin: 0 !important;

  border: 0 !important;
  border-radius: 999px 0 0 999px !important;

  box-shadow: none !important;
  background: transparent !important;
}

.sjs-radio-volume {
  --volume-percent: 72%;
}

.sjs-radio-volume--play {
  display: grid;
  grid-template-columns:
    22px
    105px
    38px;
  align-items: center;
  gap: 7px;

  min-height: 56px;
  padding: 7px 12px 7px 9px;

  border-left:
    1px solid
    rgba(101, 232, 255, .3);

  background:
    linear-gradient(
      90deg,
      rgba(4, 17, 43, .35),
      rgba(38, 9, 58, .62)
    );

  box-sizing: border-box;
}

.sjs-inline-volume-icon {
  display: grid;
  place-items: center;

  font-size: .84rem;
  line-height: 1;
}

.sjs-radio-volume-slider {
  width: 100%;
  height: 20px;
  margin: 0;

  appearance: none;
  -webkit-appearance: none;

  background: transparent;
  cursor: pointer;
}

.sjs-radio-volume-slider::-webkit-slider-runnable-track {
  height: 6px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #42eaff 0,
      #b968ff var(--volume-percent),
      rgba(255,255,255,.17)
        var(--volume-percent),
      rgba(255,255,255,.17) 100%
    );

  box-shadow:
    0 0 8px rgba(65, 231, 255, .38);
}

.sjs-radio-volume-slider::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -5.5px;

  appearance: none;
  -webkit-appearance: none;

  border: 2px solid #fff;
  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #5ef0ff,
      #d66aff
    );

  box-shadow:
    0 0 11px rgba(73, 235, 255, .72);
}

.sjs-radio-volume-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.17);
}

.sjs-radio-volume-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #42eaff,
      #b968ff
    );
}

.sjs-radio-volume-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;

  border: 2px solid #fff;
  border-radius: 50%;

  background: #75ecff;
}

.sjs-radio-volume-value {
  color: #fff;

  font-size: .69rem;
  font-weight: 900;
  text-align: right;

  font-variant-numeric:
    tabular-nums;
}

/* =========================================================
   RADIO TAB VOLUME
========================================================= */

.sjs-radio-volume--radio {
  display: grid;
  grid-template-columns:
    40px
    minmax(130px, 1fr)
    46px;
  align-items: center;
  gap: 12px;

  width: min(520px, calc(100% - 30px));
  margin: 22px auto;
  padding: 11px 16px;

  border:
    1px solid
    rgba(75, 232, 255, .52);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(5, 18, 44, .96),
      rgba(31, 8, 55, .95)
    );

  box-shadow:
    0 0 18px rgba(53, 225, 255, .22),
    0 0 34px rgba(194, 63, 255, .15);

  box-sizing: border-box;
}

.sjs-radio-volume-track {
  display: grid;
  gap: 5px;
}

.sjs-radio-volume-track > span {
  color: rgba(166, 244, 255, .9);

  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sjs-radio-volume-mute {
  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;
  padding: 0;

  border:
    1px solid
    rgba(94, 237, 255, .58);

  border-radius: 50%;

  color: #fff;
  background: rgba(29, 158, 208, .24);

  cursor: pointer;
}

.sjs-radio-volume-mute.is-muted {
  border-color: rgba(255, 99, 174, .72);
  background: rgba(194, 43, 116, .3);
}

/* Prevent the former large center control. */

body[data-screen="play"]
.board-hud >
.sjs-radio-volume--play {
  display: none !important;
}

body:not(.native-app)[data-screen="play"]
.board-hud {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

body:not(.native-app)[data-screen="play"]
.board-hud-copy {
  min-width: 0 !important;
}

@media (max-width: 900px) {
  .sjs-radio-volume--play {
    grid-template-columns:
      20px
      78px
      34px;

    min-height: 50px;
    padding:
      6px
      9px;
  }
}

@media (max-width: 620px) {
  .play-page-radio-cluster {
    max-width: 220px;
  }

  .play-page-radio-cluster
  .play-radio-copy {
    display: none !important;
  }

  .play-page-radio-cluster
  .play-page-radio-toggle {
    min-width: 54px !important;
    width: 54px !important;
    padding: 5px !important;
  }

  .sjs-radio-volume--play {
    grid-template-columns:
      18px
      minmax(58px, 1fr)
      32px;

    width: 158px;
  }
}

@media (max-width: 430px) {
  .play-page-radio-cluster {
    max-width: 190px;
  }

  .sjs-radio-volume--play {
    grid-template-columns:
      minmax(55px, 1fr)
      30px;

    width: 132px;
  }

  .sjs-inline-volume-icon {
    display: none;
  }

  .sjs-radio-volume-value {
    font-size: .62rem;
  }
}

/* =========================================================
   SJS SUPREME COMPACT RADIO CONTROL — DESKTOP
========================================================= */

@media screen and (min-width: 769px) {

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 46px !important;
    margin-left: auto !important;
    margin-right: 0 !important;

    border:
      1px solid
      rgba(102, 235, 255, .72) !important;

    border-radius: 999px !important;

    background:
      linear-gradient(
        135deg,
        rgba(4, 19, 44, .98),
        rgba(24, 8, 47, .98)
      ) !important;

    box-shadow:
      0 0 0 1px rgba(182, 75, 255, .13),
      0 0 14px rgba(54, 226, 255, .31),
      0 0 26px rgba(181, 67, 255, .17),
      inset 0 1px 0 rgba(255, 255, 255, .08) !important;

    overflow: hidden !important;
    isolation: isolate !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster:hover {
    border-color:
      rgba(154, 247, 255, .95) !important;

    box-shadow:
      0 0 0 1px rgba(188, 87, 255, .18),
      0 0 19px rgba(54, 226, 255, .44),
      0 0 33px rgba(181, 67, 255, .22),
      inset 0 1px 0 rgba(255, 255, 255, .11) !important;
  }

  /*
   * Compact Play / Pause section.
   */
  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-page-radio-toggle {
    display: inline-grid !important;
    grid-template-columns: 36px auto !important;
    align-items: center !important;
    gap: 8px !important;

    width: auto !important;
    min-width: 145px !important;
    max-width: none !important;

    min-height: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 4px 12px 4px 5px !important;

    border: 0 !important;
    border-radius: 999px 0 0 999px !important;

    background:
      linear-gradient(
        90deg,
        rgba(24, 197, 230, .13),
        rgba(20, 10, 43, .08)
      ) !important;

    box-shadow: none !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-radio-icon {
    width: 34px !important;
    height: 34px !important;

    font-size: .86rem !important;

    box-shadow:
      0 0 10px rgba(78, 232, 255, .65),
      0 0 18px rgba(195, 79, 255, .3),
      inset 0 1px 1px rgba(255, 255, 255, .65) !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-radio-rings,
  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-radio-rings::before,
  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-radio-rings::after {
    left: 22px !important;

    width: 34px !important;
    height: 34px !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-radio-copy {
    gap: 0 !important;
    line-height: 1.05 !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-radio-copy small {
    font-size: .49rem !important;
    letter-spacing: .14em !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-radio-copy strong {
    font-size: .68rem !important;
    letter-spacing: .01em !important;
  }

  /*
   * Compact integrated volume section.
   */
  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume--play {
    display: grid !important;
    grid-template-columns:
      16px
      82px
      31px !important;

    align-items: center !important;
    gap: 6px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 5px 10px 5px 8px !important;

    border: 0 !important;
    border-left:
      1px solid
      rgba(91, 223, 255, .28) !important;

    border-radius: 0 999px 999px 0 !important;

    background:
      linear-gradient(
        90deg,
        rgba(12, 20, 48, .3),
        rgba(71, 13, 87, .34)
      ) !important;

    box-shadow:
      inset 1px 0 0
      rgba(255, 255, 255, .025) !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-inline-volume-icon {
    font-size: .68rem !important;
    opacity: .82 !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume-slider {
    width: 82px !important;
    height: 16px !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume-slider::-webkit-slider-runnable-track {
    height: 4px !important;

    box-shadow:
      0 0 6px
      rgba(65, 231, 255, .34) !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume-slider::-webkit-slider-thumb {
    width: 13px !important;
    height: 13px !important;
    margin-top: -4.5px !important;

    border-width: 1.5px !important;

    box-shadow:
      0 0 8px
      rgba(73, 235, 255, .72) !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume-slider::-moz-range-track,
  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume-slider::-moz-range-progress {
    height: 4px !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume-slider::-moz-range-thumb {
    width: 11px !important;
    height: 11px !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume-value {
    min-width: 29px !important;

    font-size: .58rem !important;
    letter-spacing: 0 !important;
  }

  /*
   * Compact Radio-tab volume control.
   */
  body:not(.native-app)
  .sjs-radio-volume--radio {
    grid-template-columns:
      32px
      minmax(120px, 1fr)
      38px !important;

    gap: 9px !important;

    width:
      min(430px, calc(100% - 30px)) !important;

    min-height: 46px !important;
    margin: 16px auto !important;
    padding: 7px 12px !important;

    border-radius: 999px !important;
  }

  body:not(.native-app)
  .sjs-radio-volume--radio
  .sjs-radio-volume-mute {
    width: 30px !important;
    height: 30px !important;

    font-size: .78rem !important;
  }

  body:not(.native-app)
  .sjs-radio-volume--radio
  .sjs-radio-volume-track {
    gap: 3px !important;
  }

  body:not(.native-app)
  .sjs-radio-volume--radio
  .sjs-radio-volume-track > span {
    font-size: .49rem !important;
    letter-spacing: .13em !important;
  }

  body:not(.native-app)
  .sjs-radio-volume--radio
  .sjs-radio-volume-value {
    font-size: .62rem !important;
  }
}

/* =========================================================
   MOBILE — PLAY/PAUSE ONLY, NO VOLUME SLIDERS
========================================================= */

@media screen and (max-width: 768px) {

  /*
   * Hide the integrated Play-screen volume area.
   * The radio Play/Pause button remains visible and active.
   */
  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .sjs-radio-volume--play,
  body:not(.native-app)[data-screen="play"]
  [data-sjs-volume="play"] {
    display: none !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster {
    width: auto !important;
    max-width: none !important;

    margin-left: auto !important;

    border-radius: 999px !important;
    overflow: visible !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-page-radio-toggle {
    border-radius: 999px !important;
  }

  /*
   * Hide the entire secondary Radio-tab volume control on mobile.
   */
  body:not(.native-app)
  .sjs-radio-volume--radio,
  body:not(.native-app)
  [data-sjs-volume="radio"] {
    display: none !important;
  }
}

@media screen and (max-width: 430px) {

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-page-radio-toggle {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;

    grid-template-columns: 40px !important;
    padding: 4px !important;
  }

  body:not(.native-app)[data-screen="play"]
  .play-page-radio-cluster
  .play-radio-copy {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
    clip-path: inset(50%) !important;
  }
}