/* ==========================================================================
   ACIDPLAYER — retro Winamp-style skinned music player
   Skin image is set via --player-skin below; swap that one line to re-skin.
   ========================================================================== */

:root{
  --player-skin: url('../assets/thumbs/piece-08.jpg');
  --pl-w: 300px;
}

#acidplayer{
  position: fixed;
  left: 20px;
  top: 88px;
  width: var(--pl-w);
  z-index: 500;
  font-family: var(--f-mono);
  user-select: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

.pl-titlebar{
  display: flex; align-items: center; justify-content: space-between;
  height: 26px;
  padding: 0 8px;
  background: linear-gradient(90deg, #0a0912, #171128 50%, #0a0912);
  border: 1px solid var(--cyan);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: grab;
  box-shadow: inset 0 0 10px var(--cyan-soft);
}
.pl-titlebar:active{ cursor: grabbing; }
.pl-titlebar .pl-title{
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-soft);
  white-space: nowrap;
  overflow: hidden;
}
.pl-titlebar .pl-winbtns{ display: flex; gap: 4px; }
.pl-winbtns button{
  width: 15px; height: 15px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: .6rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}
.pl-winbtns button:hover{ color: var(--cyan); border-color: var(--cyan); }

.pl-body{
  border: 1px solid var(--cyan);
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-image:
    linear-gradient(rgba(6,5,12,.72), rgba(6,5,12,.86)),
    var(--player-skin);
  background-size: cover;
  background-position: center;
  padding: 10px;
  box-shadow: 0 0 0 1px rgba(0,240,255,.06), inset 0 0 30px rgba(0,0,0,.5);
}

#acidplayer.minimized .pl-body{ display: none; }

/* ---- LCD display ---- */
.pl-lcd{
  background: rgba(4,10,8,.82);
  border: 1px solid #0d3b34;
  border-radius: 3px;
  padding: 7px 9px 6px;
  margin-bottom: 9px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.7);
}
.pl-marquee{
  height: 16px;
  overflow: hidden;
  position: relative;
  margin-bottom: 4px;
}
.pl-marquee span{
  position: absolute;
  white-space: nowrap;
  color: var(--cyan);
  font-size: .72rem;
  letter-spacing: .04em;
  text-shadow: 0 0 6px rgba(0,240,255,.7);
  animation: marquee 12s linear infinite;
  animation-play-state: paused;
}
#acidplayer.playing .pl-marquee span{ animation-play-state: running; }
@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}
.pl-lcd-row{
  display: flex; align-items: center; justify-content: space-between;
  font-size: .62rem; color: #3fae9e;
}
.pl-time{ color: var(--cyan); text-shadow: 0 0 5px rgba(0,240,255,.6); letter-spacing: .05em; }
.pl-viz{ display: block; height: 22px; width: 100%; margin-top: 5px; }

/* ---- seek bar ---- */
.pl-seek{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 8px 0 10px;
  background: var(--line);
  border-radius: 2px;
  outline: none;
}
.pl-seek::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  cursor: pointer;
  margin-top: -3px;
}
.pl-seek::-webkit-slider-runnable-track{
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan) var(--pct,0%), var(--line) var(--pct,0%));
}
.pl-seek::-moz-range-thumb{
  width: 10px; height: 10px; border: none; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan); cursor: pointer;
}
.pl-seek::-moz-range-progress{ background: var(--cyan); height: 4px; border-radius: 2px; }

/* ---- transport buttons ---- */
.pl-transport{
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 9px;
}
.pl-btn{
  flex: 1;
  height: 28px;
  background: linear-gradient(180deg, #1a1730, #0d0b17);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.pl-btn:hover{ color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan-soft); }
.pl-btn:active{ transform: translateY(1px); }
.pl-btn.play-toggle.is-playing{ color: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 10px var(--magenta-soft); }
.pl-btn.toggle-on{ color: var(--amber); border-color: var(--amber); }

/* ---- volume ---- */
.pl-volrow{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 9px;
}
.pl-volrow svg{ width: 13px; height: 13px; stroke: var(--text-faint); flex-shrink: 0; }
.pl-vol{
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
}
.pl-vol::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 6px var(--magenta);
  cursor: pointer;
}
.pl-vol::-moz-range-thumb{
  width: 9px; height: 9px; border: none; border-radius: 50%;
  background: var(--magenta); box-shadow: 0 0 6px var(--magenta); cursor: pointer;
}

/* ---- playlist panel ---- */
.pl-playlist{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  border-top: 1px solid transparent;
}
.pl-playlist.open{
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 6px;
}
.pl-track{
  display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 6px;
  font-size: .68rem;
  color: var(--text-dim);
  border-radius: 2px;
  cursor: pointer;
}
.pl-track:hover{ background: rgba(0,240,255,.06); color: var(--text); }
.pl-track.active{ color: var(--cyan); background: rgba(0,240,255,.1); }
.pl-track .pl-track-idx{ color: var(--text-faint); width: 18px; flex-shrink: 0; }
.pl-track .pl-track-name{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-track .pl-track-len{ color: var(--text-faint); flex-shrink: 0; }
.pl-track .pl-track-plays{ color: var(--magenta); flex-shrink: 0; font-size: .64rem; }

.pl-empty{
  font-size: .68rem;
  color: var(--text-faint);
  padding: 10px 4px;
  line-height: 1.5;
}

/* ---- comments panel ---- */
.pl-comments{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  border-top: 1px solid transparent;
}
.pl-comments.open{
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 8px;
}
.pl-comments-list{ margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.pl-comments-empty, .pl-comments-loading{
  font-size: .68rem; color: var(--text-faint); padding: 4px;
}
.pl-comment{ border-left: 2px solid var(--line); padding-left: 8px; }
.pl-comment-head{ display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.pl-comment-author{ font-size: .7rem; font-weight: 600; color: var(--cyan); }
.pl-comment-time{ font-size: .6rem; color: var(--text-faint); flex-shrink: 0; }
.pl-comment-body{ margin: 0; font-size: .72rem; color: var(--text-dim); line-height: 1.4; word-break: break-word; }

.pl-comment-form{ display: grid; gap: 6px; }
.pl-comment-form input, .pl-comment-form textarea{
  width: 100%;
  background: rgba(4,10,8,.6);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 6px 9px;
  border-radius: 3px;
  font-family: var(--f-body);
  font-size: .72rem;
  resize: vertical;
}
.pl-comment-form input:focus, .pl-comment-form textarea:focus{ border-color: var(--cyan); }
.pl-comment-form button{
  justify-self: start;
  padding: 6px 16px;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  background: var(--cyan-soft);
  border-radius: 3px;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
}
.pl-comment-status{ font-size: .64rem; color: var(--text-faint); min-height: 1em; margin: 4px 0 0; }
.pl-comment-status.ok{ color: var(--cyan); }
.pl-comment-status.err{ color: var(--magenta); }
.pl-empty code{ color: var(--cyan); }

@media (max-width: 560px){
  #acidplayer{ left: 12px; right: 12px; width: auto; top: 78px; }
}