/* ============================================================
   music-player.css: leafy.exe audio module
   the floating music player, restyled to match the rest of the site:
   blue-grey chrome, purple accent, a glowing VT323 LCD up top.
   window position + open/close animation still live in styles.css
   (.music-window), and mobile.css turns it into a sheet on phones.
   load this right after styles.css.
   ============================================================ */

.music-window{
  --mp-lcd-bg:linear-gradient(180deg,#e4e8fb 0%,#d3d9f4 100%);
  --mp-lcd-edge:#7f88c9;
  --mp-lcd-ink:#3a4290;
  --mp-lcd-dim:rgba(58,66,144,.28);
  --mp-lcd-glow:rgba(108,116,207,.45);
  --mp-btn-bg:linear-gradient(180deg,#f7fafb,#d5dde1);
  --mp-btn-bg-down:linear-gradient(180deg,#d5dde1,#eef3f5);
  --mp-btn-edge:#8798a1;
  --mp-btn-ink:#4b5d67;
  --mp-well:#e3e8eb;
  --mp-well-edge:#8f9aa2;
  --mp-soft:#7c8790;
}

[data-theme="dark"] .music-window{
  --mp-lcd-bg:linear-gradient(180deg,#141729 0%,#0d0f1c 100%);
  --mp-lcd-edge:#3a3f74;
  --mp-lcd-ink:#b9bdf5;
  --mp-lcd-dim:rgba(185,189,245,.22);
  --mp-lcd-glow:rgba(139,147,230,.65);
  --mp-btn-bg:linear-gradient(180deg,#31383d,#20262b);
  --mp-btn-bg-down:linear-gradient(180deg,#1b2024,#2a3136);
  --mp-btn-edge:#454c52;
  --mp-btn-ink:#c3ced3;
  --mp-well:#14171a;
  --mp-well-edge:#454c52;
  --mp-soft:#7c878e;
}

/* same layer as the launcher buttons (.bottom-controls, z 9999). the player's
   markup comes after them in index.html, so when the two overlap on a short
   screen the player is the one on top. live room + popouts stay above (10000+) */
.music-window{ z-index:9999; }

/* ---------- titlebar: drag handle on desktop ---------- */
.mp-titlebar{
  cursor:grab;
  touch-action:none;
  user-select:none;
}

.music-window.dragging .mp-titlebar{ cursor:grabbing; }
.mp-titlebar .mw-tbtn{ cursor:pointer; }

@media(max-width:860px){
  .mp-titlebar{ cursor:default; touch-action:auto; }
}

/* ---------- body ---------- */
.mp-body{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:10px 10px 9px;
}

.mp-top{
  display:flex;
  gap:9px;
}

.mp-cover{
  position:relative;
  flex:0 0 86px;
  width:86px;
  height:86px;
  border:1px solid var(--mp-well-edge);
  border-radius:3px;
  background:linear-gradient(135deg,#eef1f3,#c4cad0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 2px 6px rgba(40,50,60,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

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

.mp-cover img[hidden]{ display:none; }

/* little vinyl disc behind "no cover" so the empty state still looks finished */
.mp-cover-fallback{
  position:relative;
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-pixel);
  font-size:11px;
  line-height:.95;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#eef1f8;
  background:
    radial-gradient(circle,#a7aef0 0 17%,#3a3f4a 18% 21%,transparent 22%),
    repeating-radial-gradient(circle,#2d323a 0 2px,#3a4048 2px 3px);
  box-shadow:0 2px 6px rgba(20,26,32,.35);
}

.mp-cover-fallback[hidden]{ display:none; }

.music-window.is-playing .mp-cover-fallback{ animation:mpSpin 4s linear infinite; }

@keyframes mpSpin{ to{ transform:rotate(360deg); } }

[data-theme="dark"] .mp-cover{ background:linear-gradient(135deg,#31383d,#181c1f); }

/* ---------- the LCD ---------- */
.mp-lcd{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:5px 8px 6px;
  border:1px solid var(--mp-lcd-edge);
  border-radius:4px;
  background:var(--mp-lcd-bg);
  box-shadow:
    inset 0 2px 5px rgba(20,24,60,.28),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 1px 0 rgba(255,255,255,.7);
  font-family:var(--font-pixel);
  color:var(--mp-lcd-ink);
  text-shadow:0 0 5px var(--mp-lcd-glow);
  overflow:hidden;
}

/* scanlines + a soft glass sheen over the screen */
.mp-lcd::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(160deg,rgba(255,255,255,.22) 0 30%,transparent 31%),
    repeating-linear-gradient(0deg,rgba(20,24,60,.06) 0 1px,transparent 1px 3px);
}

[data-theme="dark"] .mp-lcd::after{
  background:
    linear-gradient(160deg,rgba(255,255,255,.05) 0 30%,transparent 31%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);
}

[data-theme="dark"] .mp-lcd{ box-shadow:inset 0 2px 8px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04); }

.mp-lcd-row{
  display:flex;
  align-items:center;
  gap:7px;
  line-height:1;
}

.mp-lcd-state{
  flex:0 0 auto;
  width:14px;
  font-size:12px;
  letter-spacing:-1px;
}

.music-window.is-playing .mp-lcd-state{ animation:mpBlink 1.4s steps(1) infinite; }

@keyframes mpBlink{ 50%{ opacity:.45; } }

.mp-lcd-track{
  font-size:15px;
  letter-spacing:1px;
}

.mp-lcd-time{
  margin-left:auto;
  font-size:22px;
  letter-spacing:1px;
  white-space:nowrap;
}

.mp-lcd-slash{
  margin:0 2px;
  color:var(--mp-lcd-dim);
  text-shadow:none;
}

#mwTimeTotal{
  font-size:15px;
  color:var(--mp-lcd-dim);
  text-shadow:none;
}

/* scrolling title */
.mp-marquee{
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  font-size:19px;
  line-height:1.1;
  margin:2px 0 1px;
}

.mp-marquee-track{
  display:inline-flex;
  white-space:nowrap;
}

.mp-marquee-text{
  display:inline-block;
  padding-right:2px;
}

.mp-marquee-track.is-scrolling{
  animation:mpMarquee var(--mp-marquee-dur,10s) linear infinite;
}

.mp-marquee-track.is-scrolling .mp-marquee-text::after{
  content:"\2726";
  margin:0 18px;
  font-size:.7em;
  vertical-align:.15em;
  color:var(--mp-lcd-dim);
  text-shadow:none;
}

.mp-marquee:has(.is-scrolling){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 14px),transparent);
}

.mp-marquee:hover .mp-marquee-track.is-scrolling{ animation-play-state:paused; }

@keyframes mpMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* bottom row: equalizer + mode flags */
.mp-lcd-foot{ gap:6px; }

.mp-eq{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:12px;
  margin-right:auto;
}

.mp-eq span{
  width:4px;
  height:12px;
  background:currentColor;
  box-shadow:0 0 4px var(--mp-lcd-glow);
  transform:scaleY(.15);
  transform-origin:bottom;
  transition:transform .07s linear;
}

.music-window.eq-off .mp-eq span{
  opacity:.25;
  box-shadow:none;
}

.mp-flag{
  font-size:13px;
  letter-spacing:1px;
  color:var(--mp-lcd-dim);
  text-shadow:none;
}

.mp-flag.on{
  color:var(--mp-lcd-ink);
  text-shadow:0 0 5px var(--mp-lcd-glow);
}

/* ---------- progress / seek ---------- */
.mp-progress{
  position:relative;
  height:10px;
  border:1px solid var(--mp-well-edge);
  border-radius:999px;
  background:var(--mp-well);
  box-shadow:inset 0 1px 3px rgba(40,50,60,.3);
  overflow:hidden;
}

.mp-progress-fill{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:0%;
  border-radius:999px;
  background:var(--mp-purple, linear-gradient(180deg,#a7aef0,#7b83dd));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}

.mp-seek{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.mp-progress:hover,
.mp-progress:focus-within{ border-color:var(--accent); }

.mp-progress:focus-within{ box-shadow:inset 0 1px 3px rgba(40,50,60,.3), 0 0 0 2px var(--accent-soft); }

/* ---------- transport + volume ---------- */
.mp-controls{
  display:flex;
  align-items:center;
  gap:10px;
}

.mp-transport{
  display:flex;
  align-items:center;
  gap:4px;
}

.mp-btn{
  width:32px;
  height:26px;
  padding:0;
  border:1px solid var(--mp-btn-edge);
  border-radius:4px;
  background:var(--mp-btn-bg);
  color:var(--mp-btn-ink);
  font-size:10px;
  letter-spacing:-2px;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 0 rgba(20,30,40,.12);
  transition:color .12s ease, border-color .12s ease;
}

#mwStopBtn{ letter-spacing:0; }

.mp-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.mp-btn:active{
  background:var(--mp-btn-bg-down);
  box-shadow:inset 0 2px 4px rgba(20,30,40,.35);
  transform:translateY(1px);
}

/* the big purple play key */
.mp-btn-play{
  width:44px;
  height:30px;
  font-size:13px;
  letter-spacing:-1px;
  border-color:var(--mp-purple-border, #5b62b8);
  background:var(--mp-purple, linear-gradient(180deg,#a7aef0,#7b83dd));
  color:#fff;
  text-shadow:0 1px 0 rgba(40,44,110,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 var(--mp-purple-border, #5b62b8);
}

.mp-btn-play:hover{
  color:#fff;
  border-color:var(--mp-purple-border-hover, #3f458f);
  background:var(--mp-purple-hover, linear-gradient(180deg,#b4baf3,#858de2));
}

.mp-btn-play:active{
  background:var(--mp-purple, linear-gradient(180deg,#a7aef0,#7b83dd));
  box-shadow:inset 0 2px 4px rgba(20,24,60,.45);
  transform:translateY(2px);
}

.mp-btn-play.is-playing{ letter-spacing:0; font-size:11px; }

.mp-volume{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
}

.mp-vol-btn{
  flex:0 0 auto;
  width:22px;
  height:22px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--mp-btn-edge);
  background:radial-gradient(circle at 35% 30%, #fdfefe, #cfd7dc 60%, #aab3ba);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), 0 1px 2px rgba(30,38,46,.25);
  color:#4a5860;
  font-size:10px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mp-vol-btn:hover{ border-color:var(--accent); }

[data-theme="dark"] .mp-vol-btn{
  border-color:#6c74cf;
  background:radial-gradient(circle at 35% 30%, #4a5157, #262b2f 60%, #181c1f);
  color:#c3ced3;
}

/* dotted iTunes-style volume: dim dots for the whole row, lit purple dots
   up to the current level (--mp-vol is set from script.js) */
.mp-volume-track{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  height:16px;
}

.mp-volume-track::before,
.mp-volume-track::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  pointer-events:none;
  background-repeat:repeat-x;
  background-size:7px 100%;
  background-position:1px center;
}

.mp-volume-track::before{
  right:0;
  background-image:radial-gradient(circle, var(--mp-lcd-dim) 1.2px, transparent 1.7px);
}

.mp-volume-track::after{
  width:var(--mp-vol, 22%);
  background-image:radial-gradient(circle, var(--accent) 1.3px, transparent 1.8px);
}

.mp-volume-slider{
  -webkit-appearance:none;
  appearance:none;
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:16px;
  margin:0;
  background:transparent;
  cursor:pointer;
}

.mp-volume-slider::-webkit-slider-runnable-track{
  height:16px;
  background:transparent;
}

.mp-volume-slider::-moz-range-track{
  height:16px;
  background:transparent;
  border:none;
}

.mp-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  margin-top:2px;
  border-radius:50%;
  border:1px solid #5b62b8;
  background:radial-gradient(circle at 35% 30%, #c7cbf5, var(--accent) 55%, #5b62b8);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 1px 2px rgba(30,38,46,.3);
}

.mp-volume-slider::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid #5b62b8;
  background:radial-gradient(circle at 35% 30%, #c7cbf5, var(--accent) 55%, #5b62b8);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), 0 1px 2px rgba(30,38,46,.3);
}

.mp-volume-slider:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; border-radius:4px; }

/* ---------- mode toggles ---------- */
.mp-modes{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
}

.mp-toggle{
  min-width:0;
  padding:4px 2px;
  border:1px solid var(--mp-btn-edge);
  border-radius:3px;
  background:var(--mp-btn-bg);
  color:var(--mp-btn-ink);
  font-family:Verdana,Arial,sans-serif;
  font-size:8px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.mp-toggle:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* lit = pressed in + purple, like a latched hardware key */
.mp-toggle.active{
  background:linear-gradient(180deg,#8b93e6,#6c74cf);
  border-color:#4d539f;
  color:#fff;
  box-shadow:inset 0 1px 3px rgba(20,24,60,.45);
}

[data-theme="dark"] .mp-toggle.active{
  background:linear-gradient(180deg,#5a61b8,#40458f);
  border-color:#8b93e6;
}

.mp-btn:focus-visible,
.mp-toggle:focus-visible,
.mp-vol-btn:focus-visible,
.mp-pl-item:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

/* ---------- playlist drawer ---------- */
.mp-playlist{
  max-height:0;
  overflow:hidden;
  border-top:1px solid transparent;
  transition:max-height .22s ease, border-color .22s ease;
}

.mp-playlist.open{
  max-height:200px;
  border-top-color:#9aa0a6;
}

[data-theme="dark"] .mp-playlist.open{ border-top-color:#3a4147; }

.mp-playlist-empty{
  padding:14px 10px;
  font-size:10px;
  color:var(--mp-soft);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.mp-playlist-empty[hidden]{ display:none; }

.mp-playlist-list{
  list-style:none;
  margin:0;
  padding:4px;
  max-height:196px;
  overflow-y:auto;
}

.mp-pl-item{
  display:flex;
  align-items:baseline;
  gap:8px;
  width:100%;
  padding:5px 7px;
  border:0;
  border-radius:3px;
  background:none;
  font-family:Verdana,Arial,sans-serif;
  font-size:10.5px;
  color:#44525a;
  text-align:left;
  cursor:pointer;
}

.mp-pl-item:hover{ background:rgba(108,116,207,.14); }

.mp-pl-num{
  flex:0 0 auto;
  font-family:var(--font-pixel);
  font-size:14px;
  color:var(--mp-soft);
}

.mp-pl-title{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mp-pl-artist{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  color:var(--mp-soft);
}

.mp-playlist-list li.active .mp-pl-item{
  background:linear-gradient(180deg,#8b93e6,#6c74cf);
  color:#fff;
  font-weight:bold;
}

.mp-playlist-list li.active .mp-pl-num,
.mp-playlist-list li.active .mp-pl-artist{ color:rgba(255,255,255,.8); font-weight:normal; }

[data-theme="dark"] .mp-pl-item{ color:#c3ced3; }
[data-theme="dark"] .mp-pl-item:hover{ background:rgba(108,116,207,.22); }

.mp-footer{
  text-align:center;
  font-family:var(--font-pixel);
  font-size:12px;
  letter-spacing:1px;
  color:var(--mp-soft);
  padding:0 0 7px;
}

[data-theme="dark"] .mp-footer{ color:#5c646a; }

/* ---------- phones (mobile.css already makes it a sheet) ---------- */
@media(max-width:860px){
  .mp-cover{ flex-basis:76px; width:76px; height:76px; }
  .mp-btn{ width:38px; height:32px; font-size:11px; }
  .mp-btn-play{ width:50px; height:34px; }
  .mp-toggle{ padding:8px 2px; font-size:9px; }
  .mp-pl-item{ padding:9px 8px; font-size:12px; }
}

@media(prefers-reduced-motion: reduce){
  .mp-marquee-track.is-scrolling,
  .music-window.is-playing .mp-cover-fallback,
  .music-window.is-playing .mp-lcd-state{ animation:none; }

  /* no scrolling: show the one copy with an ellipsis instead */
  .mp-marquee-track.is-scrolling{ display:block; overflow:hidden; text-overflow:ellipsis; }
  .mp-marquee-track.is-scrolling .mp-marquee-text[aria-hidden]{ display:none; }
  .mp-marquee-track.is-scrolling .mp-marquee-text::after{ content:none; }
  .mp-eq span{ transition:none; }
}

/* ---------- "new" sticker on the music launcher button ---------- */
.music-toggle{ position:relative; }

.music-new-tag{
  position:absolute;
  top:-9px;
  right:-12px;
  padding:1px 6px 2px;
  border:1px solid var(--mp-purple-border, #5b62b8);
  border-radius:999px;
  background:var(--mp-purple, linear-gradient(180deg,#a7aef0,#7b83dd));
  color:#fff;
  font-family:var(--font-pixel);
  font-size:13px;
  line-height:1;
  letter-spacing:1px;
  text-transform:lowercase;
  text-shadow:0 1px 0 rgba(40,44,110,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px var(--accent-soft);
  transform:rotate(8deg);
  pointer-events:none;
  animation:mpNewPulse 2.4s ease-in-out infinite;
}

@keyframes mpNewPulse{
  0%,100%{ transform:rotate(8deg) scale(1); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px var(--accent-soft); }
  50%{ transform:rotate(8deg) scale(1.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 10px var(--accent-glow); }
}

/* phone launcher strip scrolls sideways and would clip a sticker that pokes out */
@media(max-width:860px){
  .music-new-tag{ position:static; transform:none; margin-left:2px; animation:none; }
}

@media(prefers-reduced-motion: reduce){
  .music-new-tag{ animation:none; }
}