/* Gelli Belle Music Box — V71 | refined glass controls and rounded stage */
:root {
  --v71-frost: rgba(255,255,255,.073);
  --v71-frost-hover: rgba(255,255,255,.14);
  --v71-stroke: rgba(255,247,241,.20);
  --v71-gold: #f8d8ab;
  --v71-curve: cubic-bezier(.2,.75,.22,1);
}
/* A softer, layered glass shell. Edge glows are deliberately subtle. */
.immersive-stage, .playlist {
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 24px 78px rgba(3,5,19,.55),
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 34px color-mix(in srgb,var(--accent-two) 8%,transparent);
}
.immersive-stage {
  background:
    radial-gradient(ellipse at 50% 2%,rgba(255,255,255,.08),transparent 49%),
    linear-gradient(150deg,rgba(48,41,80,.84),rgba(18,20,48,.91) 59%,rgba(21,21,48,.92));
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}
.playlist {
  background: linear-gradient(152deg,rgba(41,38,68,.83),rgba(17,21,46,.9) 73%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.playlist-header {border-bottom:1px solid rgba(255,255,255,.1)}
/* A portrait frame with a quiet glossy highlight, not a heavy gold border. */
.art-panel {
  border-radius: 32px;
  box-shadow:
    0 23px 68px rgba(4,6,19,.66),
    0 0 0 1px rgba(255,255,255,.22),
    0 0 0 6px rgba(255,255,255,.047),
    0 0 42px color-mix(in srgb,var(--accent) 16%,transparent);
}
.art-panel::after {
  content:"";pointer-events:none;position:absolute;z-index:3;inset:0;
  border-radius:inherit;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.19),inset 0 -1px 1px rgba(255,255,255,.07);
}
/* The large controls feel like a set of floating translucent glass gems. */
.controls {gap:clamp(11px,2.05vw,24px);margin:24px 0 21px}
.icon-control {
  width:47px;height:47px;
  border-radius:17px;
  border:1px solid var(--v71-stroke);
  color:rgba(247,240,253,.85);
  background:linear-gradient(142deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 56%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 19px rgba(4,5,20,.22),0 0 14px rgba(220,191,255,.045);
  backdrop-filter:blur(15px) saturate(1.4);
  -webkit-backdrop-filter:blur(15px) saturate(1.4);
  transition:transform .23s var(--v71-curve),border-color .23s,background .23s,box-shadow .23s,color .23s;
}
.icon-control svg{width:21px;height:21px}
.icon-control.major-control{width:56px;height:56px;border-radius:19px;color:#fcf6ff}
.icon-control.major-control svg{width:25px;height:25px}
.icon-control:hover{
  color:#fff6e7;
  transform:translateY(-2px);
  border-color:rgba(255,226,183,.42);
  background:linear-gradient(145deg,rgba(255,255,255,.21),rgba(255,255,255,.075));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 10px 25px rgba(0,0,0,.3),0 0 21px rgba(245,199,150,.18);
}
.icon-control:active,.play-control:active{transform:scale(.965)}
.icon-control[aria-pressed="true"],.icon-control.active {
  color:#ffe0b2;
  border-color:rgba(255,217,161,.46);
  background:linear-gradient(145deg,rgba(247,196,134,.19),rgba(255,255,255,.045));
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 0 19px rgba(252,193,124,.15);
}
.play-control {
  width:81px;height:81px;
  border-radius:25px;
  border:1px solid rgba(255,235,204,.54);
  color:#fff4dd;
  background:linear-gradient(145deg,rgba(255,246,229,.32),rgba(255,213,164,.13) 51%,rgba(255,232,192,.10));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.48),inset 0 -1px 1px rgba(255,255,255,.08),0 10px 30px rgba(4,5,21,.34),0 0 22px rgba(255,197,122,.24);
  backdrop-filter:blur(17px) saturate(1.7);
  -webkit-backdrop-filter:blur(17px) saturate(1.7);
  transition:transform .24s var(--v71-curve),background .24s,border-color .24s,box-shadow .24s;
}
.play-control:hover{
  transform:translateY(-2px) scale(1.025);
  border-color:rgba(255,242,218,.82);
  background:linear-gradient(145deg,rgba(255,255,246,.39),rgba(255,205,145,.19));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 12px 34px rgba(4,5,21,.4),0 0 30px rgba(255,198,133,.35);
}
/* Progress/volume controls: soft glass tracks and a warm illuminated thumb. */
input[type=range]{height:6px;background:linear-gradient(to right,rgba(255,223,174,.96) 0%,rgba(255,223,174,.96) var(--range-fill,0%),rgba(255,255,255,.18) var(--range-fill,0%),rgba(255,255,255,.18) 100%);box-shadow:0 1px 2px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.08)}
input[type=range]::-webkit-slider-thumb{width:15px;height:15px;background:#fff0d8;border:2px solid rgba(255,255,255,.64);box-shadow:0 0 0 4px rgba(255,217,166,.12),0 0 13px rgba(255,220,171,.52)}
input[type=range]::-moz-range-thumb{width:15px;height:15px;background:#fff0d8;border:2px solid rgba(255,255,255,.64);box-shadow:0 0 0 4px rgba(255,217,166,.12),0 0 13px rgba(255,220,171,.52)}
/* Secondary buttons, labels, and navigation follow the same material language. */
.cinema-button,.music-nav a:last-child,.album-pill {
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.046));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 19px rgba(3,6,20,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;
}
.cinema-button{padding:11px 16px;color:#ffe5c4;letter-spacing:.02em}
.cinema-button:hover,.music-nav a:last-child:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.075));
  border-color:rgba(255,231,195,.46);
  box-shadow:0 0 22px rgba(250,205,150,.15),inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(-1px)
}
.volume-control .icon-control.small{width:34px;height:34px;border-radius:12px;flex-shrink:0}
.volume-control{width:138px}
.volume-control input[type=range]{max-width:84px}
.on-air{padding:8px 12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.052)}
/* Playlist selection feels tactile but stays visually restrained. */
.track-button{border-radius:20px;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.track-button:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.09)}
.track-button.is-active{
  border-color:rgba(255,220,179,.31);
  background:linear-gradient(100deg,rgba(255,226,186,.145),rgba(184,161,248,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.085),0 0 16px rgba(237,183,131,.055)
}
.track-thumb{border-radius:15px;border:1px solid rgba(255,255,255,.18)}
.queue-footer{background:rgba(255,255,255,.034);border-top:1px solid rgba(255,255,255,.105)}
.queue-footer button{padding:8px 11px;border:1px solid rgba(255,231,193,.2);border-radius:999px;background:rgba(255,255,255,.05);transition:background .2s,border-color .2s}
.queue-footer button:hover{background:rgba(255,255,255,.13);border-color:rgba(255,231,193,.37);text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffe1ac;outline-offset:4px}
@media(max-width:580px){
 .immersive-stage,.playlist{border-radius:28px}
 .art-panel{border-radius:26px}
 .controls{gap:clamp(7px,2.2vw,15px);margin:18px 0 15px}
 .icon-control{width:40px;height:40px;border-radius:14px}
 .icon-control.major-control{width:48px;height:48px;border-radius:16px}
 .icon-control.major-control svg{width:23px;height:23px}
 .play-control{width:65px;height:65px;border-radius:22px}
 .volume-control{width:112px;gap:6px}
 .volume-control input[type=range]{max-width:71px}
 .cinema-button{padding:10px 11px;font-size:11px}
}
@media(max-width:370px){
 .icon-control{width:36px;height:36px}
 .icon-control.major-control{width:44px;height:44px}
 .play-control{width:60px;height:60px;border-radius:20px}
 .controls{gap:7px}
 .cinema-button{padding:8px 9px}
}
@media(prefers-reduced-motion:reduce){.icon-control,.play-control,.cinema-button,.track-button,.music-nav a:last-child{transition:none!important}}
/* Respect the repeat-one badge's hidden attribute in all button states. */
.icon-control b[hidden]{display:none!important}