/* Winamp 2.x with a silver / navy skin. Sized like the real thing: 275px wide. */

@font-face { font-family: Silkscreen; src: url(fonts/silkscreen-400.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: Silkscreen; src: url(fonts/silkscreen-700.woff2) format("woff2"); font-weight: 700; }

.winamp {
  --navy: #1b2550;
  --edge: #1f2850;
  --lcd: #e9eeff;
  --lcd-dim: #5c6c9e;
  /* a layer over the desktop that only the windows themselves catch clicks on */
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  font: 9px Arial, Helvetica, sans-serif;
  color: var(--navy);
}
.winamp button { padding: 0; font: inherit; color: inherit; cursor: default; }
.winamp button:focus { outline: none; }

.wa-win {
  position: absolute; left: 0; top: 0;
  width: 275px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: linear-gradient(#eef1f7, #d3d8e3 40%, #b9c0ce);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #8b93ab, 2px 3px 8px rgba(0, 0, 0, .35);
  pointer-events: auto;
  touch-action: none;
}

/* ---------- title bars ---------- */
.wa-title {
  display: flex; align-items: center; gap: 3px;
  height: 14px; margin: 2px 2px 0; padding: 0 3px 0 4px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(#a3adca, #7381aa 48%, #5d6a95 52%, #7380a9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 #fff;
}
.wa-title span {
  padding: 0 5px;
  font: bold 10px/1 Arial, Helvetica, sans-serif; letter-spacing: 1.5px;
  color: #e3e7f1;
  text-shadow: 1px 0 #2a3566, -1px 0 #2a3566, 0 1px #2a3566, 0 -1px #2a3566;
}
.wa-groove {
  flex: 1; height: 5px; border-radius: 3px;
  background: linear-gradient(#36416d, #4c5884);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6), inset 0 1px 1px rgba(0, 0, 0, .45);
}
.wa-tb {
  position: relative; flex: none;
  width: 9px; height: 9px;
  border: 1px solid #27305c; border-radius: 2px;
  background: linear-gradient(#f1f3f8, #a9b1c6);
}
.wa-tb:active { background: linear-gradient(#a9b1c6, #e3e7f0); }
.wa-tb::before, .wa-tb::after { content: ""; position: absolute; background: var(--navy); }
.wa-menu::before { left: 2px; top: 2px; width: 3px; height: 3px; }
.wa-min::before { left: 1px; bottom: 1px; width: 5px; height: 1px; }
.wa-shade::before { left: 1px; top: 2px; width: 3px; height: 1px; border: 1px solid var(--navy); background: none; }
.wa-x::before, .wa-x::after { left: 3px; top: 0; width: 1px; height: 7px; transform: rotate(45deg); }
.wa-x::after { transform: rotate(-45deg); }

/* ---------- main window ---------- */
.wa-display {
  position: relative;
  height: 52px; margin: 4px 5px 0;
  border: 1px solid #0f1738; border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2px),
    linear-gradient(#2e4080, #223268 55%, #1c2a5a);
  box-shadow: inset 0 0 0 1px #3d5193, inset 0 3px 6px rgba(0, 0, 0, .45);
  overflow: hidden;
  color: var(--lcd);
  font-family: Silkscreen, "Courier New", monospace;
}
.wa-clutter { position: absolute; left: 4px; top: 5px; display: grid; gap: 4px; }
.wa-clutter i { display: block; width: 3px; height: 1px; background: #9fb0e0; }
.wa-state { position: absolute; left: 13px; top: 8px; width: 6px; height: 6px; background: var(--lcd); }
.wa-main.playing .wa-state { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.wa-main.paused .wa-state { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.wa-time {
  position: absolute; left: 25px; top: 2px;
  font-size: 16px; font-weight: 700; letter-spacing: 1px;
  cursor: default;
}
.wa-main.paused .wa-time { animation: wa-blink 1s steps(1) infinite; }
@keyframes wa-blink { 50% { opacity: 0; } }
.wa-vis { position: absolute; left: 24px; top: 25px; width: 76px; height: 16px; }
.wa-marquee {
  position: absolute; left: 108px; right: 6px; top: 6px; height: 9px;
  overflow: hidden; white-space: nowrap; font-size: 8px; line-height: 9px;
}
.wa-marquee span { display: inline-block; }
.wa-marquee.scroll span { animation: wa-scroll linear infinite; }
@keyframes wa-scroll { to { transform: translateX(-50%); } }
.wa-info {
  position: absolute; left: 108px; right: 6px; top: 20px;
  display: flex; align-items: baseline; gap: 3px;
  font-size: 8px; color: #9fb0e0;
}
.wa-info b { min-width: 13px; text-align: right; font-weight: 400; color: var(--lcd); }
.wa-info em { font-style: normal; color: var(--lcd-dim); }
.wa-info .wa-mono { margin-left: auto; }
.wa-info em.on { color: var(--lcd); }

.wa-strip {
  position: absolute; left: 92px; right: 0; bottom: 0; height: 15px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 0 14px;
  border-top: 1px solid #0f1738; border-left: 1px solid #0f1738; border-top-left-radius: 12px;
  background: linear-gradient(#f2f4f9, #c3c9d8);
  box-shadow: inset 1px 1px 0 #fff;
}

/* horizontal sliders: volume / balance / seek */
.wa-hslider { position: relative; height: 4px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 #fff; }
.wa-vol { width: 58px; background: linear-gradient(90deg, #2a55d6, #7ea3ff calc(var(--v, .75) * 100%), #c3c9da 0); }
.wa-bal { width: 30px; background: #c3c9da; }
.wa-knob {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 7px; margin-top: -3.5px;
  border: 1px solid #36416c; border-radius: 4px;
  background: linear-gradient(#ffffff, #d6dbe6 45%, #9da6bd);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.wa-hslider .wa-knob { left: calc(var(--v, 0) * (100% - 14px)); }
.wa-pill {
  height: 10px; padding: 0 3px;
  border: 1px solid #2f428c; border-radius: 6px;
  background: linear-gradient(#ffffff, #cfd5e5);
  font: bold 7px/8px Arial, Helvetica, sans-serif !important;
  color: #7b86a8 !important;
}
.wa-pill.on { color: #2c49b6 !important; box-shadow: 0 0 0 1px #8fa8f4; }
.wa-strip .wa-pill { width: 18px; }

.wa-seek { height: 5px; margin: 5px 10px 0; background: linear-gradient(#56628c, #8d96b4); }
.wa-seek .wa-knob { width: 22px; left: calc(var(--v, 0) * (100% - 22px)); }
.wa-main:not(.playing) .wa-seek .wa-knob { display: none; }

.wa-controls { display: flex; align-items: center; gap: 3px; height: 30px; margin-top: 2px; padding-left: 9px; }
.wa-btn {
  display: grid; place-items: center; flex: none;
  width: 19px; height: 19px;
  border: 1px solid #343f6b; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ffffff, #dfe3ec 45%, #a3abc0);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 2px rgba(0, 0, 0, .15);
}
.wa-btn:active, .wa-btn.on { background: radial-gradient(circle at 50% 60%, #ffffff, #c9cfdd 55%, #8d96ae); }
.wa-btn svg { width: 9px; height: 9px; fill: var(--navy); }
.wa-eject { margin-left: 8px; }
.wa-extra {
  display: flex; align-items: center; gap: 3px;
  height: 28px; margin-left: auto; padding: 0 3px 0 11px;
  border-top: 1px solid #6c7698; border-left: 1px solid #6c7698; border-radius: 14px 0 5px 0;
  background: linear-gradient(#cdd2df, #a8b0c3);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7);
}
.wa-extra .wa-btn svg { width: 11px; height: 11px; }
.wa-led { width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: #7f8aa6; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); }
.wa-led.on { background: #8fe0ff; box-shadow: 0 0 3px #6fd0ff; }
.wa-logo { width: 17px; height: 17px; margin: 0 6px 0 3px; }
.wa-grip {
  position: absolute; right: 2px; bottom: 2px; width: 8px; height: 8px;
  background: repeating-linear-gradient(135deg, transparent 0 2px, #6c7698 2px 3px, #fff 3px 4px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ---------- equalizer ---------- */
.wa-eqtop { position: relative; display: flex; align-items: flex-end; height: 16px; padding-left: 14px; }
.wa-eqtop::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 1px; background: #5d6788;
}
.wa-tab {
  position: relative; z-index: 1;
  height: 12px; padding: 1px 14px 0;
  border: 1px solid #5d6788; border-bottom-color: #f3f5f9;
  border-radius: 6px 8px 0 0;
  background: linear-gradient(#f8f9fc, #f3f5f9);
  font: 8px/10px Silkscreen, monospace; letter-spacing: .5px;
}
.wa-eqtop .wa-tbs { position: absolute; right: 4px; top: 3px; display: flex; gap: 3px; }
.wa-eqtop .wa-tb { border: 0; background: none; }

.wa-eqbody {
  margin: 0 4px 4px; padding: 4px 6px 3px;
  border: 1px solid #5d6788; border-top: 0; border-radius: 0 0 4px 4px;
  background: linear-gradient(#f3f5f9, #d2d7e3);
}
.wa-eqrow { display: flex; align-items: center; gap: 3px; height: 14px; }
.wa-eqrow .wa-pill { height: 11px; padding: 0 5px; font-size: 7px !important; }
.wa-eqrow .wa-pill.on { background: linear-gradient(#5d7ce0, #2c4bb5); color: #fff !important; }
.wa-presets { margin-left: auto; }
.wa-graph {
  width: 112px; height: 14px; margin-left: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(60, 70, 110, .22) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(0deg, rgba(60, 70, 110, .18) 0 1px, transparent 1px 3.5px);
}
.wa-graph polyline { fill: none; stroke: #3657c9; stroke-width: 1; }

.wa-bands { display: flex; align-items: stretch; height: 64px; margin-top: 5px; }
.wa-vslider { position: relative; width: 12px; flex: none; margin-right: 6px; }
.wa-vslider::before {
  content: ""; position: absolute; left: 4.5px; top: 0; bottom: 0; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #262d52, #5e678f);
  box-shadow: 1px 0 0 #fff;
}
.wa-vslider .wa-knob { left: 0; top: calc((1 - var(--v, .5)) * (100% - 12px)); width: 12px; height: 12px; margin: 0; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fff, #d9dde7 50%, #9aa3ba); }
.wa-scale {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  width: 42px; margin-right: 6px; padding-right: 4px; white-space: nowrap;
  border-right: 1px dotted #59628a;
  font: 8px/8px Silkscreen, monospace;
}
.wa-labels { display: flex; height: 10px; margin-top: 2px; font: bold 7px/10px Arial, Helvetica, sans-serif; text-transform: uppercase; }
.wa-labels span { flex: none; width: 18px; text-align: center; }
.wa-labels span:first-child { width: 63px; text-align: left; }

/* ---------- playlist ---------- */
.wa-listwrap { display: flex; gap: 2px; height: 93px; margin: 4px 5px 0; }
.wa-list {
  position: relative;
  flex: 1; margin: 0; padding: 2px 0; list-style: none;
  touch-action: pan-y;
  overflow-y: auto; scrollbar-width: none;
  border: 1px solid #0f1738; border-radius: 3px;
  background: #25366f;
  font: 10px/13px Arial, Helvetica, sans-serif;
  color: #fff;
  user-select: none;
}
.wa-list::-webkit-scrollbar { display: none; }
.wa-list li { display: flex; gap: 6px; padding: 0 4px; white-space: nowrap; }
.wa-list li span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.wa-list li.cur { color: #a3c0ff; }
.wa-list li.sel { background: #101c4c; }
.wa-scroll {
  position: relative; width: 9px;
  border: 1px solid #39446e; border-radius: 3px;
  background: linear-gradient(90deg, #8a93b0, #c9cfdd);
}
.wa-thumb {
  position: absolute; left: -1px; right: -1px; top: 0; height: 18px;
  border: 1px solid #39446e; border-radius: 3px;
  background: repeating-linear-gradient(#ffffff 0 1px, #b6bdd1 1px 3px);
}
.wa-apple {
  display: block; margin: 3px 7px 0; text-align: right;
  font: 9px/11px Arial, Helvetica, sans-serif; color: var(--navy); text-decoration: none;
}
.wa-apple:hover { text-decoration: underline; }
.wa-plbottom { position: relative; display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 6px 0 10px; }
.wa-plbottom .wa-btn { width: 21px; height: 21px; }
.wa-plbottom .wa-btn svg { width: 10px; height: 10px; }
.wa-mini {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  width: 104px; height: 28px; margin-left: 4px; padding: 0 6px;
  border: 1px solid #0f1738; border-radius: 6px;
  background: linear-gradient(#2e4080, #1c2a5a);
  box-shadow: inset 0 0 0 1px #3d5193;
  color: var(--lcd);
  font: 8px/8px Silkscreen, monospace;
}
.wa-minictl { display: flex; align-items: center; gap: 4px; }
.wa-minictl button { width: 7px; height: 7px; border: 0; background: none; }
.wa-minictl svg { display: block; width: 7px; height: 7px; fill: #cfd8ff; }
.wa-minictl span { margin-left: auto; }
.wa-folder { margin-left: 3px; }