/* Container center */
.music-container{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  right:auto;
  bottom:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  z-index:10;
  padding:16px;
  width:auto;
  max-width:96vw;
  box-sizing:border-box;
}

/* Frosted Glass Card */
.music-widget{
  position:relative;
  width: min(720px, 92vw);
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  padding:60px 72px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px) saturate(125%);
  box-shadow: 0 10px 30px rgba(3,6,20,0.6), 0 2px 10px rgba(0,0,0,0.45);
  transition:transform .28s cubic-bezier(.2,.9,.3,1),box-shadow .28s;
} 
.music-widget:hover{transform:translateY(-8px);box-shadow:0 18px 60px rgba(3,6,20,0.7)}

/* Album art / disc */
.disc{
  margin-left:0;
  width:140px;
  height:140px;
  border-radius:12px;
  object-fit:cover;
  border:6px solid rgba(255,255,255,0.04);
  box-shadow: 0 3px 40px rgba(6,9,20,0.6), 
              0 0 36px 8px rgba(var(--accent-a),0.05), 
              0 0 43px 8px rgba(var(--accent-b),0.03), 
              0 0 18px 5px rgba(var(--accent-c),0.04);
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  transition:transform .2s ease, box-shadow .12s linear;
}
.disc.spin{animation:spin 2.9s linear infinite}
.disc:hover{transform:translateY(-6px) rotate(-3deg)}

/* Music Info */
.music-info{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 1 auto;
  padding-left:0;
  align-items:center;
  text-align:center;
}  

/* Title with masked marquee */
.marquee-title{margin:0;font-size:18px;font-weight:700;color:var(--text);letter-spacing:.2px}
.marquee-mask{width:240px;max-width:100%;display:inline-block;overflow:hidden;vertical-align:bottom;position:relative}
.marquee-text{display:inline-block;white-space:nowrap;padding-right:12px;transform:translateX(0)}
.marquee-text.marquee{
  animation-name: marquee-alt;
  animation-duration: var(--marquee-duration,8s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

@keyframes marquee-alt{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--marquee-distance,0px)))}}
.marquee-mask:hover .marquee-text{animation-play-state:paused;cursor:default} 
.music-info p{margin:0;font-size:13px;color:var(--muted)}

/* Player inner row */
.player-row{display:flex;align-items:center;gap:40px;width:max-content;margin:0 auto}

/* Controls */
.controls{
  width: 240px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.progress{
  height:10px;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.03);
}

.progress-filled{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(var(--accent-a),0.95), rgba(var(--accent-b),0.95));
  border-radius:999px;
  transition:width .12s linear;
  position:relative;
}

.progress-filled::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  transform:translate(50%,-50%);
  width:14px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(255,255,255,0.72));
  box-shadow:0 6px 18px rgba(0,0,0,0.5),0 0 20px rgba(var(--accent-a),0.12);
}

.ctrl-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  width:100%;
}

.time{
  font-size:13px;
  color:var(--muted);
  min-width:40px;
  flex-shrink:0;
}

.ctrl-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
}

#prev svg {transform: translateX(-1.5px);}
#next svg {transform: translateX(1.5px);}

#play-inline .pause-icon {display: none;}
#play-inline.is-playing .play-icon {display: none;}
#play-inline.is-playing .pause-icon {display: block;}

.small-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20%;
  transition: background 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 12px 3px rgba(0, 0, 0, 0.28);
}

.small-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 22px 6px rgba(0, 0, 0, 0.38);
}

.small-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
}

.small-btn:focus{outline:2px solid rgba(var(--accent-b),0.25);outline-offset:3px}

.small-btn svg {
  width: 24px;
  height: 24px;
  color: #fff;
}

.small-btn:hover svg {color: #1db954;}

#play-inline{
  width:60px;
  height:60px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(var(--accent-a),0.14), rgba(var(--accent-b),0.10));
  box-shadow:0 10px 30px rgba(12,18,36,0.6), 0 0 26px rgba(var(--accent-a),0.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.04);
  font-size:20px;
}

#play-inline.playing{box-shadow:0 12px 40px rgba(12,18,36,0.7), 0 0 36px rgba(var(--accent-b),0.14)}

/* Volume controls */
.volume-row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin-top:6px;
  width:100%;
  height:40px;
}

.volume-btn{
  min-width:40px;
  min-height:40px;
  font-size:16px;
  padding:6px;
  flex-shrink:0;
}

.volume-slider-container{
  height:40px;
  width:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  opacity:0;
  transition:width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  pointer-events:none;
  flex-shrink:0;
}

.volume-slider-container.show{
  width:140px;
  opacity:1;
  pointer-events:all;
}

.volume-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  outline:none;
  border:1px solid rgba(255,255,255,0.04);
  cursor:pointer;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
}

.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.78));
  box-shadow:0 4px 12px rgba(0,0,0,0.35),0 0 12px rgba(125,95,255,0.08);
  cursor:grab;
  transition:transform .15s ease,box-shadow .15s ease;
  position:relative;
  z-index:2;
}

.volume-slider::-webkit-slider-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 6px 16px rgba(0,0,0,0.45),0 0 18px rgba(125,95,255,0.12);
}

.volume-slider::-webkit-slider-thumb:active{
  cursor:grabbing;
  transform:scale(1.1);
}

.volume-slider::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.78));
  box-shadow:0 4px 12px rgba(0,0,0,0.35),0 0 12px rgba(125,95,255,0.08);
  cursor:grab;
  border:none;
  transition:transform .15s ease,box-shadow .15s ease;
}

.volume-slider::-moz-range-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 6px 16px rgba(0,0,0,0.45),0 0 18px rgba(125,95,255,0.12);
}

.volume-slider::-moz-range-thumb:active{
  cursor:grabbing;
  transform:scale(1.1);
}

.volume-slider:focus{
  outline:2px solid rgba(125,95,255,0.3);
  outline-offset:3px;
}

.volume-slider::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
}

/* Favorite button inside widget */
.fav-btn{
  position:absolute;
  top:14px;
  left:14px;
  width:40px;
  height:40px;
  border-radius:50%;
  pointer-events: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px) saturate(120%);
  cursor:pointer;
  z-index:20;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 18px rgba(var(--accent-a),0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.fav-btn:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 26px rgba(var(--accent-b),0.25);
}

.fav-btn.active svg {
  color: #ff3b7a;
  transform: scale(1.15);
}

.playlist-artist-header.active {
  background-color: rgba(255, 0, 179, 0.097);
  font-weight: bold;
}

/* Spin animation */
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* ========================================= */
/* RESPONSIVE BREAKPOINTS - ALL DEVICES     */
/* ========================================= */

/* Small phones (iPhone SE, 320px-374px) */
@media (max-width: 374px){
  .music-widget{
    width:95vw;
    padding:14px 10px;
    gap:8px;
    flex-direction:column;
    align-items:center;
  }

  .player-row{
    flex-direction:column;
    gap:12px;
    width:100%;
  }

  .disc{
    width:70px;
    height:70px;
  }

  .music-info{
    width:100%;
    max-width:100%;
    text-align:left;
    align-items:flex-start;
    margin:0;
    padding:0;
  }

  .controls{
    width:100%;
    gap:8px;
  }

  .progress{
    width:100% !important;
    height:6px;
  }

  .progress-filled::after{
    width:10px;
    height:10px;
  }

  .ctrl-row{
    flex-direction:row;
    justify-content:space-between;
    width:100%;
    gap:8px;
  }

  .ctrl-actions{
    gap:10px;
    flex:1;
    justify-content:center;
  }

  .small-btn, #play-inline{
    width:38px;
    height:38px;
  }

  #prev, #next{
    width:36px;
    height:36px;
  }

  .marquee-mask{
    max-width:100%;
  }

  .marquee-text{
    font-size:13px;
  }

  .volume-slider-container.show{
    width:80px;
  }

  .fav-btn{
    width:32px;
    height:32px;
    top:10px;
    left:10px;
  }
}

/* iPhone 12/13/14 Pro, standard phones (375px-428px) */
@media (min-width: 375px) and (max-width: 428px){
  .music-widget{
    width:92vw;
    padding:16px 12px;
    gap:10px;
    flex-direction:column;
    align-items:center;
  }

  .player-row{
    flex-direction:column;
    gap:14px;
    width:100%;
  }

  .disc{
    width:80px;
    height:80px;
  }

  .music-info{
    width:100%;
    max-width:280px;
    text-align:left;
    align-items:flex-start;
    margin:0;
    padding:0;
  }

  .controls{
    width:100%;
    gap:8px;
  }

  .progress{
    width:100% !important;
    height:7px;
  }

  .progress-filled::after{
    width:11px;
    height:11px;
  }

  .ctrl-row{
    flex-direction:row;
    justify-content:space-between !important;
    width:100%;
    gap:10px;
  }

  .ctrl-actions{
    gap:12px;
    flex:1 !important;
    justify-content:center !important;
  }

  .small-btn, #play-inline{
    width:42px;
    height:42px;
  }

  #prev, #next{
    width:38px;
    height:38px;
  }

  .marquee-mask{
    max-width:100%;
  }

  .marquee-text{
    font-size:14px;
  }

  .volume-slider-container.show{
    width:90px;
  }
}

/* iPhone 14 Pro Max, large phones (429px-640px) */
@media (min-width: 429px) and (max-width: 640px){
  .music-widget{
    width:90vw;
    padding:18px 14px;
    gap:12px;
    flex-direction:column;
    align-items:center;
  }

  .player-row{
    flex-direction:column;
    gap:16px;
    width:100%;
  }

  .disc{
    width:90px;
    height:90px;
  }

  .music-info{
    width:100%;
    max-width:320px;
    text-align:left;
    align-items:flex-start;
  }

  .controls{
    width:100%;
    gap:10px;
  }

  .progress{
    width:100% !important;
    height:8px;
  }

  .progress-filled::after{
    width:12px;
    height:12px;
  }

  .ctrl-row{
    flex-direction:row;
    justify-content:space-between !important;
    width:100%;
    gap:12px;
  }

  .ctrl-actions{
    gap:14px;
    flex:1 !important;
    justify-content:center !important;
  }

  .small-btn, #play-inline{
    width:46px;
    height:46px;
  }

  #prev, #next{
    width:42px;
    height:42px;
  }

  .volume-slider-container.show{
    width:100px;
  }
}

/* iPad Mini portrait (641px-820px) */
@media (min-width: 641px) and (max-width: 820px){
  .music-widget{
    padding:40px 56px;
    width:min(680px,92vw);
  }

  .player-row{
    flex-direction:row;
    align-items:center;
    gap:20px;
  }

  .disc{
    width:120px;
    height:120px;
  }

  .music-info{
    align-items:flex-start;
    text-align:left;
    max-width:380px;
  }

  .controls{
    width:100%;
    gap:10px;
  }

  .progress{
    width:100% !important;
    height:9px;
  }

  .progress-filled::after{
    width:13px;
    height:13px;
  }

  .ctrl-row{
    flex-direction:row;
    justify-content:space-between !important;
    gap:14px;
  }

  .ctrl-actions{
    gap:14px;
    flex:1 !important;
    justify-content:center !important;
  }

  .small-btn, #play-inline{
    width:48px;
    height:48px;
  }

  #prev, #next{
    width:44px;
    height:44px;
  }
}

/* iPad Air, iPad Mini landscape (821px-1024px) */
@media (min-width: 821px) and (max-width: 1024px){
  .music-widget{
    padding:50px 64px;
  }

  .player-row{
    flex-direction:row;
    gap:28px;
  }

  .disc{
    width:130px;
    height:130px;
  }

  .music-info{
    align-items:flex-start;
    text-align:left;
    max-width:420px;
  }

  .controls{
    width:100%;
    gap:11px;
  }

  .progress{
    width:100% !important;
    height:10px;
  }

  .progress-filled::after{
    width:14px;
    height:14px;
  }

  .ctrl-row{
    flex-direction:row;
    justify-content:space-between !important;
    gap:16px;
  }

  .ctrl-actions{
    flex:1 !important;
    justify-content:center !important;
  }

  .small-btn, #play-inline{
    width:52px;
    height:52px;
  }

  #prev, #next{
    width:46px;
    height:46px;
  }
}

/* iPad Pro portrait (1025px-1366px) */
@media (min-width: 1025px) and (max-width: 1366px){
  .music-info{
    align-items:flex-start;
    text-align:left;
    padding-left:6px;
  }

  .controls{
    width:280px;
  }

  .progress{
    width:100% !important;
  }

  .ctrl-row{
    justify-content:space-between !important;
  }

  .ctrl-actions{
    justify-content:flex-end !important;
  }
}

/* Laptops and desktops (1367px+) */
@media (min-width: 1367px){
  .music-info{
    align-items:flex-start;
    text-align:left;
    padding-left:6px;
  }

  .controls{
    width:300px;
  }

  .progress{
    width:100% !important;
  }

  .ctrl-row{
    justify-content:space-between !important;
  }

  .ctrl-actions{
    justify-content:flex-end !important;
  }
}

/* Accessibility tweaks */
@media (prefers-reduced-motion:reduce){
  .disc{animation:none}
  .music-widget,.disc{transition:none}
}

/* Decorative line */
.music-widget::before{
  content:'';
  position:absolute;
  pointer-events:none;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.02),transparent);
  border-radius:999px;
}

.music-container,*{z-index:10}