/* Compact Wildlands Music Player */
:root{
  --wl-music-bg: rgba(5, 8, 13, 0.48);
  --wl-music-bg-strong: rgba(8, 12, 18, 0.74);
  --wl-music-border: rgba(255,255,255,.14);
  --wl-music-text: #f8fafc;
  --wl-music-muted: rgba(248,250,252,.62);
  --wl-music-accent: #e5e7eb;
  --wl-music-accent-soft: rgba(229,231,235,.18);
}

.wl-music-player,
.wl-music-player *{box-sizing:border-box;}

.wl-music-player{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  width:318px;
  max-width:calc(100vw - 24px);
  color:var(--wl-music-text);
  font-family:Inter,system-ui,sans-serif;
  pointer-events:none;
}

.wl-music-player button,
.wl-music-player input{font:inherit;}

.wl-music-card{
  position:absolute;
  right:0;
  bottom:62px;
  width:318px;
  max-width:calc(100vw - 24px);
  padding:14px;
  border-radius:20px;
  border:1px solid var(--wl-music-border);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008)), rgba(8, 12, 18, 0.56);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:0 14px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.96);
  transform-origin:100% 100%;
  transition:opacity .24s ease, transform .24s ease, visibility .24s ease;
  pointer-events:none;
  overflow:hidden;
}

.wl-music-player.open .wl-music-card{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.wl-music-card::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:-70px;
  right:-56px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(229,231,235,.18), transparent 68%);
  filter:blur(10px);
  pointer-events:none;
}

.wl-music-top{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 26px;
  gap:11px;
  align-items:center;
}

.wl-music-cover{
  width:48px;
  height:48px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}

.wl-music-cover img{width:100%;height:100%;object-fit:cover;display:block;}

.wl-eq{width:22px;height:18px;display:flex;align-items:flex-end;justify-content:center;gap:3px;}
.wl-eq span{
  width:3px;
  border-radius:999px;
  background:var(--wl-music-accent);
  box-shadow:0 0 10px rgba(229,231,235,.34);
  animation:wlEq 1s ease-in-out infinite;
  animation-play-state:paused;
}
.wl-eq span:nth-child(1){height:8px;animation-delay:-.16s;}
.wl-eq span:nth-child(2){height:16px;animation-delay:-.36s;}
.wl-eq span:nth-child(3){height:11px;animation-delay:-.52s;}
.wl-eq span:nth-child(4){height:18px;animation-delay:-.68s;}
.wl-music-player.is-playing .wl-eq span{animation-play-state:running;}
@keyframes wlEq{0%,100%{transform:scaleY(.44);opacity:.6}50%{transform:scaleY(1);opacity:1}}

.wl-music-info{min-width:0;}
.wl-music-title{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:800;
  letter-spacing:.1px;
}
.wl-music-artist{
  margin-top:4px;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:11px;
  font-weight:700;
  color:var(--wl-music-muted);
}

.wl-music-collapse,
.wl-music-list-head button,
.wl-music-btn{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.68);
  cursor:pointer;
}
.wl-music-collapse{width:26px;height:26px;border-radius:50%;}
.wl-music-collapse:hover,
.wl-music-list-head button:hover,
.wl-music-btn:hover{color:#fff;}

.wl-music-progress{margin-top:12px;}
.wl-music-range,
.wl-volume-range{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  outline:none;
  cursor:pointer;
}
.wl-music-range{
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--wl-music-accent) var(--wl-progress,0%), rgba(255,255,255,.08) var(--wl-progress,0%));
}
.wl-music-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 3px color-mix(in srgb, var(--wl-music-accent) 35%, transparent);}
.wl-music-range::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;border:0;}

.wl-music-times{
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:rgba(255,255,255,.46);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.wl-music-controls{
  margin-top:10px;
  display:grid;
  grid-template-columns:28px 42px 28px 1fr;
  align-items:center;
  gap:8px;
}
.wl-music-btn{display:grid;place-items:center;font-size:13px;}
.wl-music-play{
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)), rgba(255,255,255,.06);
  border:1px solid rgba(229,231,235,.34);
  color:#f8fafc;
  font-size:15px;
  box-shadow:0 4px 14px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.wl-music-play:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10)), rgba(255,255,255,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1);
}

.wl-music-volume{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  color:rgba(255,255,255,.7);
}
.wl-volume-range{
  width:74px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--wl-music-accent) var(--wl-volume,65%), rgba(255,255,255,.18) var(--wl-volume,65%));
}
.wl-volume-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--wl-music-accent);border:0;}
.wl-volume-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--wl-music-accent);border:0;}

.wl-music-list-head{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:rgba(255,255,255,.56);
  font-size:11px;
  font-weight:800;
}
.wl-music-list{
  margin-top:7px;
  display:grid;
  gap:4px;
  max-height:126px;
  overflow:auto;
  padding-right:4px;
}
.wl-music-list::-webkit-scrollbar{width:4px;}
.wl-music-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px;}

.wl-music-track{
  width:100%;
  display:grid;
  grid-template-columns:18px minmax(0,1fr) max-content;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.72);
  text-align:left;
  cursor:pointer;
}
.wl-music-track:hover{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.055);color:#fff;}
.wl-music-track.active{
  color:#fff;
  border-color:rgba(229,231,235,.42);
  background:linear-gradient(90deg, rgba(229,231,235,.12), rgba(255,255,255,.03));
}
.wl-music-track-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:800;}
.wl-music-track-artist{max-width:104px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;color:rgba(255,255,255,.46);font-weight:700;}

.wl-music-dock{
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;
}

.wl-music-pill,
.wl-music-fab{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(229,231,235,.58);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)), rgba(8, 12, 18, 0.32);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wl-music-pill:hover,
.wl-music-fab:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.85);
}

.wl-music-pill{
  height:38px;
  padding:0 14px;
  border-radius:999px;
  gap:9px;
  min-width:146px;
  max-width:174px;
  justify-content:flex-start;
}

.wl-music-pill .wl-pill-icon{
  width:18px;height:18px;display:grid;place-items:center;
  color:#f8fafc;
}
.wl-music-pill-text{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.wl-music-pill-text strong{font-size:11px;font-weight:800;color:#fff;}
.wl-music-pill-text span{font-size:10px;font-weight:700;color:rgba(255,255,255,.56);margin-top:2px;}

.wl-music-fab{
  width:38px;
  height:38px;
  border-radius:50%;
  overflow:hidden;
}
.wl-music-fab::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:1px solid rgba(229,231,235,.28);
  opacity:.9;
}
.wl-music-fab::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px solid rgba(229,231,235,.34);
  opacity:.5;
}
.wl-music-player.is-playing .wl-music-fab{
  animation:wlPulse 2.1s ease-in-out infinite;
}
@keyframes wlPulse{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.28), 0 0 0 0 color-mix(in srgb, var(--wl-music-accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.06)}
  50%{box-shadow:0 8px 24px rgba(0,0,0,.28), 0 0 0 8px color-mix(in srgb, var(--wl-music-accent) 0%, transparent), inset 0 1px 0 rgba(255,255,255,.06)}
}

.wl-music-error{
  margin-top:8px;
  display:none;
  color:#fecdd3;
  font-size:11px;
  line-height:1.4;
}
.wl-music-player.has-error .wl-music-error{display:block;}

@media(max-width:640px){
  .wl-music-player{right:12px;bottom:12px;width:calc(100vw - 24px);}  
  .wl-music-card{width:min(318px, calc(100vw - 24px));bottom:60px;}
  .wl-music-pill{min-width:140px;max-width:168px;padding:0 12px;}
}

@media(max-width:420px){
  .wl-music-player{right:10px;bottom:10px;}
  .wl-music-card{width:min(306px, calc(100vw - 20px));}
  .wl-music-pill{min-width:132px;max-width:160px;}
}


/* Minimal dock override */
.wl-music-dock{gap:12px;align-items:center;}

.wl-music-menu{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#f8fafc;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .18s ease, opacity .18s ease, color .18s ease;
  opacity:.94;
}
.wl-music-menu:hover{
  transform:translateY(-1px);
  opacity:1;
  color:#ffffff;
}
.wl-menu-icon{
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
  text-shadow:0 0 10px rgba(255,255,255,.14);
}

/* disable old pill presentation */
.wl-music-pill,
.wl-pill-icon,
.wl-music-pill-text{
  display:none !important;
}

.wl-music-fab{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(229,231,235,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)), rgba(8,12,18,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.wl-music-fab::before{inset:5px;border:1px solid rgba(229,231,235,.20);}
.wl-music-fab::after{inset:-1px;border:1px solid rgba(229,231,235,.22);}

@media(max-width:640px){
  .wl-music-menu{width:26px;height:26px;}
  .wl-menu-icon{font-size:21px;}
}


/* Pulse animation for the small music icon */
.wl-music-player.is-playing .wl-music-menu{
  animation: wlMenuPulse 1.9s ease-in-out infinite;
}
.wl-music-player.is-playing .wl-menu-icon{
  animation: wlIconBreath 1.2s ease-in-out infinite;
}
@keyframes wlMenuPulse{
  0%,100%{transform:scale(1);opacity:.92;filter:drop-shadow(0 0 0 rgba(255,255,255,0));}
  50%{transform:scale(1.14);opacity:1;filter:drop-shadow(0 0 8px rgba(255,255,255,.28));}
}
@keyframes wlIconBreath{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}

.wl-music-play i{filter:none;opacity:.96;}