/* =====================================================================
   WINAMP 2.95 — a recreation

   Every pixel here is drawn from scratch in CSS. None of Nullsoft's skin
   bitmaps are used, copied or traced. The 2024 source release did not
   put the classic base skin artwork into the public domain and "Winamp"
   is still a trademark, so this is a rebuild of the INTERFACE in the same
   idiom -- the same thing Webamp does -- rather than a repackaging of
   their assets. If a real .wsz skin is ever wanted, it needs to be one
   that is actually licensed for it.

   LAYOUT IS IN WINAMP'S OWN COORDINATES. The main window is exactly
   275x116 and every child is absolutely positioned at its real offset,
   straight off the classic layout:

     clutterbar    10, 22   8x43        volume       107, 57   68x13
     time digits   36, 26   63x13       balance      177, 57   38x13
     visualiser    24, 43   76x16       EQ / PL      219, 58   23x12
     song title   111, 27  154x6        position      16, 72  248x10
     kbps         111, 43               transport     16, 88
     kHz          156, 43               shuffle      164, 89
     mono/stereo  212, 41               repeat       210, 89

   The whole thing is then scaled with transform: scale(--wa-zoom), so
   the coordinates never have to be recomputed and Double Size is one
   number. transform-origin is top left so the stored left/top stay in
   desktop pixels.

   DOUBLE SIZE IS THE DEFAULT, and that is a deliberate departure. At 1x
   this window is 275px inside a 1280px panel that is itself drawn inside
   a photograph -- authentic, and too small to actually use. Double Size
   was a real Winamp feature (it is why the option existed), so taking it
   as the default costs nothing in period accuracy and makes the thing
   usable. Ctrl+D toggles.
   ===================================================================== */

.wa {
  --wa-zoom: 2;
  --lcd:      #17e017;      /* display green */
  --lcd-dim:  #0c8a0c;
  --face:     #2e2e2e;
  --face-hi:  #4a4a4a;
  --face-lo:  #101010;

  position: absolute;
  z-index: 41;
  transform: scale(var(--wa-zoom));
  transform-origin: 0 0;
  font: 9px/1 Tahoma, "MS Sans Serif", sans-serif;
  color: #c8c8c8;
  user-select: none;
  -webkit-user-select: none;
}
.wa[hidden] { display: none; }
.wa[data-zoom="1"] { --wa-zoom: 1; }

/* Nothing inside may be dragged as an image or selected as text. */
.wa img { -webkit-user-drag: none; }

/* ---------- shared bevels ---------- */
.wa .out {
  background: linear-gradient(180deg, #3a3a3a 0%, var(--face) 45%, #262626 100%);
  box-shadow: inset 1px 1px 0 var(--face-hi), inset -1px -1px 0 var(--face-lo);
}
.wa .in {
  background: #000;
  box-shadow: inset 1px 1px 0 var(--face-lo), inset -1px -1px 0 #3f3f3f;
}

/* ================= MAIN WINDOW : 275 x 116 ================= */
.wa-main { position: relative; width: 275px; height: 116px; }

.wa-title {
  position: absolute; left: 0; top: 0; width: 275px; height: 14px;
  background: linear-gradient(180deg, #4a4a5e 0%, #363648 40%, #232330 100%);
  box-shadow: inset 1px 1px 0 #5e5e74, inset -1px -1px 0 #14141c;
  cursor: move;
}
.wa-title .wordmark {
  position: absolute; left: 50%; top: 3px; transform: translateX(-50%);
  font: bold 7px/1 Tahoma, sans-serif;
  letter-spacing: 2.4px;
  color: #b9b9cc;
  text-shadow: 0 1px 0 #101018;
  pointer-events: none;
}
/* The three title-bar buttons, right-aligned as on the real thing. */
.wa-title .tb {
  position: absolute; top: 3px;
  width: 9px; height: 9px;
  background: linear-gradient(180deg, #6a6a80, #3a3a4c);
  box-shadow: inset 1px 1px 0 #8686a0, inset -1px -1px 0 #1c1c26;
  cursor: default;
}
.wa-title .tb:active { background: linear-gradient(180deg, #2f2f3e, #4a4a5e); }
.wa-title .tb::after {
  content: ''; position: absolute; left: 2px; top: 4px;
  width: 5px; height: 1px; background: #d0d0e0;
}
.wa-title .tb.min   { right: 31px; }
.wa-title .tb.shade { right: 20px; }
.wa-title .tb.shade::after { top: 2px; height: 3px; border-top: 1px solid #d0d0e0; background: none; }
.wa-title .tb.close { right: 3px; }
.wa-title .tb.close::after {
  left: 1px; top: 1px; width: 7px; height: 7px; background: none;
  /* an x, drawn with two gradients rather than a glyph so it stays
     pixel-crisp at 1x */
  background-image:
    linear-gradient(45deg, transparent 44%, #e8e8f4 44%, #e8e8f4 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #e8e8f4 44%, #e8e8f4 56%, transparent 56%);
}

.wa-body {
  position: absolute; left: 0; top: 14px; width: 275px; height: 102px;
  background: linear-gradient(180deg, #343434 0%, var(--face) 30%, #2a2a2a 100%);
  box-shadow: inset 1px 0 0 var(--face-hi), inset -1px -1px 0 var(--face-lo);
}

/* ---------- clutterbar (decorative, as it mostly was) ---------- */
.wa-clutter {
  position: absolute; left: 10px; top: 22px; width: 8px; height: 43px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1px 0;
}
.wa-clutter i {
  display: block; width: 6px; height: 6px; margin: 0 auto;
  font: 5px/6px Tahoma, sans-serif; font-style: normal;
  text-align: center; color: #6e6e6e;
}

/* ---------- time ---------- */
.wa-time {
  position: absolute; left: 36px; top: 26px;
  width: 63px; height: 13px;
  font: 13px/13px "Courier New", monospace;
  letter-spacing: 1px;
  color: var(--lcd);
  text-shadow: 0 0 4px rgba(23,224,23,.55);
  cursor: default;
  white-space: nowrap;
}
.wa-time.paused { animation: wa-blink 1s steps(1) infinite; }
@keyframes wa-blink { 50% { opacity: .25; } }

/* ---------- visualiser ---------- */
.wa-viz {
  position: absolute; left: 24px; top: 43px;
  width: 76px; height: 16px;
  background: #000;
  cursor: default;
  overflow: hidden;
}
.wa-viz canvas { display: block; width: 76px; height: 16px; }

/* ---------- song title + info ---------- */
.wa-marquee {
  position: absolute; left: 111px; top: 24px;
  width: 154px; height: 10px;
  overflow: hidden;
  color: var(--lcd);
  font: 9px/10px Tahoma, sans-serif;
  text-shadow: 0 0 3px rgba(23,224,23,.45);
  white-space: nowrap;
}
.wa-marquee span { display: inline-block; padding-right: 26px; }
.wa-marquee.roll span { animation: wa-roll var(--roll, 12s) linear infinite; }
@keyframes wa-roll { to { transform: translateX(-100%); } }

.wa-kbps, .wa-khz {
  position: absolute; top: 43px;
  font: 9px/9px "Courier New", monospace;
  color: var(--lcd);
}
.wa-kbps { left: 111px; }
.wa-khz  { left: 156px; }
.wa-unit {
  position: absolute; top: 43px;
  font: 8px/9px Tahoma, sans-serif; color: #7d7d7d;
}
.wa-unit.k { left: 132px; }
.wa-unit.h { left: 175px; }

.wa-chan {
  position: absolute; top: 41px;
  font: bold 7px/11px Tahoma, sans-serif;
  letter-spacing: .5px;
  color: #575757;
}
.wa-chan.mono   { left: 200px; }
.wa-chan.stereo { left: 231px; }
.wa-chan.on     { color: var(--lcd); text-shadow: 0 0 3px rgba(23,224,23,.5); }

/* ---------- sliders ----------
   Real <input type="range"> so they are draggable, keyboard-operable and
   reachable by assistive tech for free, then styled flat. Building these
   out of mousedown handlers would have thrown all of that away. */
.wa input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: absolute;
  background: transparent;
  margin: 0; padding: 0;
  cursor: default;
}
.wa input[type="range"]:focus-visible { outline: 1px dotted var(--lcd); outline-offset: 1px; }

.wa input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.wa input[type="range"]::-moz-range-track { height: 100%; background: transparent; }

.wa input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px;
  background: linear-gradient(180deg, #7a7a7a, #3c3c3c);
  box-shadow: inset 1px 1px 0 #a4a4a4, inset -1px -1px 0 #1a1a1a;
}
.wa input[type="range"]::-moz-range-thumb {
  border: 0; border-radius: 0;
  width: 11px; height: 11px;
  background: linear-gradient(180deg, #7a7a7a, #3c3c3c);
  box-shadow: inset 1px 1px 0 #a4a4a4, inset -1px -1px 0 #1a1a1a;
}

/* volume + balance sit in a shallow groove */
.wa-groove {
  position: absolute;
  background: linear-gradient(180deg, #1c1c1c, #2b2b2b);
  box-shadow: inset 1px 1px 0 var(--face-lo), inset -1px -1px 0 #454545;
}
.wa-groove.vol { left: 107px; top: 61px; width: 68px; height: 5px; }
.wa-groove.bal { left: 177px; top: 61px; width: 38px; height: 5px; }
.wa-vol { left: 107px; top: 57px; width: 68px; height: 13px; }
.wa-bal { left: 177px; top: 57px; width: 38px; height: 13px; }

/* the position bar has its own trough across the window */
.wa-groove.pos { left: 16px; top: 75px; width: 248px; height: 5px; }
.wa-pos { left: 16px; top: 72px; width: 248px; height: 11px; }
.wa-pos::-webkit-slider-thumb { width: 29px; height: 10px; }
.wa-pos::-moz-range-thumb     { width: 29px; height: 10px; }
.wa-pos:disabled { opacity: .5; }

/* ---------- EQ / PL ---------- */
.wa-tog {
  position: absolute; top: 58px;
  width: 23px; height: 12px;
  font: bold 7px/12px Tahoma, sans-serif;
  text-align: center; letter-spacing: .5px;
  color: #8f8f8f;
  background: linear-gradient(180deg, #3c3c3c, #262626);
  box-shadow: inset 1px 1px 0 #575757, inset -1px -1px 0 var(--face-lo);
  cursor: default;
}
.wa-tog.eq { left: 219px; }
.wa-tog.pl { left: 242px; }
.wa-tog.on { color: var(--lcd); text-shadow: 0 0 3px rgba(23,224,23,.5); }

/* ---------- transport ---------- */
.wa-transport { position: absolute; left: 16px; top: 88px; display: flex; }
.wa-transport button {
  width: 23px; height: 18px;
  margin: 0; padding: 0; border: 0;
  background: linear-gradient(180deg, #3e3e3e, #292929);
  box-shadow: inset 1px 1px 0 #585858, inset -1px -1px 0 var(--face-lo);
  cursor: default;
  position: relative;
}
.wa-transport button:active,
.wa-transport button.on {
  background: linear-gradient(180deg, #232323, #333);
  box-shadow: inset 1px 1px 0 var(--face-lo), inset -1px -1px 0 #585858;
}
.wa-transport button:focus-visible { outline: 1px dotted var(--lcd); outline-offset: -2px; }
.wa-transport .eject { width: 22px; height: 16px; margin-left: 5px; }

/* Glyphs drawn with clip-path so they stay sharp at any zoom. These are
   buttons, not images -- clip-path costs nothing here because the whole
   button is the hit target, not the glyph. */
.wa-transport b {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background: #cfcfcf;
}
.wa-transport .prev b, .wa-transport .next b { width: 11px; height: 8px; }
.wa-transport .prev b { clip-path: polygon(0 50%,50% 0,50% 100%, 50% 50%,100% 0,100% 100%); }
.wa-transport .next b { clip-path: polygon(0 0,50% 50%,0 100%, 50% 0,100% 50%,50% 100%); }
.wa-transport .play b { width: 8px; height: 9px; clip-path: polygon(0 0,100% 50%,0 100%); }
.wa-transport .pause b {
  width: 8px; height: 9px;
  clip-path: polygon(0 0,32% 0,32% 100%,0 100%, 68% 0,100% 0,100% 100%,68% 100%);
}
.wa-transport .stop b { width: 8px; height: 8px; }
.wa-transport .eject b {
  width: 9px; height: 8px;
  clip-path: polygon(50% 0,100% 55%,0 55%, 0 75%,100% 75%,100% 100%,0 100%);
}

/* ---------- shuffle / repeat ---------- */
.wa-sw {
  position: absolute; top: 89px; height: 15px;
  font: bold 7px/15px Tahoma, sans-serif;
  text-align: center; letter-spacing: .5px;
  color: #6e6e6e;
  background: linear-gradient(180deg, #3a3a3a, #272727);
  box-shadow: inset 1px 1px 0 #545454, inset -1px -1px 0 var(--face-lo);
  cursor: default;
}
.wa-sw.shuffle { left: 164px; width: 43px; }
.wa-sw.repeat  { left: 210px; width: 28px; }
.wa-sw.on {
  color: var(--lcd); text-shadow: 0 0 3px rgba(23,224,23,.5);
  background: linear-gradient(180deg, #242424, #303030);
  box-shadow: inset 1px 1px 0 var(--face-lo), inset -1px -1px 0 #545454;
}

/* the little Nullsoft-style badge slot, kept blank on purpose --
   it is where their logo went, and it is not ours to put back */
.wa-badge {
  position: absolute; left: 247px; top: 88px; width: 18px; height: 15px;
  background: linear-gradient(180deg, #2a2a2a, #1f1f1f);
  box-shadow: inset 1px 1px 0 #3d3d3d, inset -1px -1px 0 var(--face-lo);
}

/* ================= PLAYLIST EDITOR : 275 x N ================= */
/* Normal flow, NOT absolute. An absolutely positioned playlist does not
   contribute to .wa's height, so place() measured the main window alone
   and dropped the playlist 316px below the taskbar. Stacking it means
   one measurement covers both windows. */
.wa-plwin {
  position: relative;
  width: 275px;
  background: #1c1c1c;
  box-shadow: inset 1px 1px 0 var(--face-hi), inset -1px -1px 0 var(--face-lo);
}
.wa-plwin[hidden] { display: none; }

.wa-pl-title {
  position: relative; height: 14px;
  background: linear-gradient(180deg, #4a4a5e 0%, #363648 40%, #232330 100%);
  box-shadow: inset 1px 1px 0 #5e5e74, inset -1px -1px 0 #14141c;
  font: bold 7px/14px Tahoma, sans-serif;
  letter-spacing: 1.4px;
  text-align: center;
  color: #b9b9cc;
  cursor: move;
}

.wa-pl-list {
  height: 126px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #000;
  box-shadow: inset 1px 1px 0 var(--face-lo);
  font: 9px/13px "Courier New", monospace;
  color: var(--lcd-dim);
  padding: 2px 0;
}
.wa-pl-list .row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 0 5px;
  white-space: nowrap;
  cursor: default;
}
.wa-pl-list .row .t { overflow: hidden; text-overflow: ellipsis; }
.wa-pl-list .row .d { flex: 0 0 auto; }
.wa-pl-list .row:hover { background: #10240f; }
.wa-pl-list .row.cur   { color: #fff; }
.wa-pl-list .row.dead  { color: #4a4a4a; }

.wa-pl-foot {
  display: flex; align-items: center; justify-content: space-between;
  height: 20px; padding: 0 5px;
  background: linear-gradient(180deg, #343434, #262626);
  box-shadow: inset 1px 1px 0 var(--face-hi), inset -1px -1px 0 var(--face-lo);
  font: 7px/20px Tahoma, sans-serif;
  color: #8f8f8f;
}
.wa-pl-foot .total {
  font-family: "Courier New", monospace;
  font-size: 9px;
  color: var(--lcd);
}

/* The scrollbar inside the playlist, so it does not paint a modern
   rounded one over a 2006 window. */
.wa-pl-list::-webkit-scrollbar { width: 8px; }
.wa-pl-list::-webkit-scrollbar-track { background: #101010; }
.wa-pl-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4a4a4a, #2c2c2c);
  box-shadow: inset 1px 1px 0 #5f5f5f, inset -1px -1px 0 #111;
}
.wa-pl-list { scrollbar-width: thin; scrollbar-color: #3d3d3d #101010; }