/* 961 Music Web Player — Winamp Skins Part 4: Renderer Styles
 *
 * Scoped entirely under #winampSkinRoot / [data-theme="winamp"] so it never
 * touches the existing Modern/Classic/Compact/Large theme CSS. A classic
 * .wsz skin is a fixed-orientation bitmap — it must not be RTL-mirrored —
 * so the skin window itself is force-LTR regardless of the app's current
 * language/direction, while everything else on the page (popovers, dialogs,
 * tooltips) keeps following the app's normal language/RTL system untouched.
 */

#winampSkinRoot {
  display: none;
}
[data-theme="winamp"] #winampSkinRoot {
  display: block;
}

/* Hide the normal Now Playing visual controls while a real skin is active —
   they stay in the DOM (nothing is removed), so nothing about the existing
   playback engine or its markup is disturbed; only what's shown changes. */
[data-theme="winamp"] .np-art-wrap,
[data-theme="winamp"] .np-meta,
[data-theme="winamp"] .np-seek,
[data-theme="winamp"] .np-controls,
[data-theme="winamp"] .np-volume,
[data-theme="winamp"] #spectrum {
  display: none !important;
}

.wsk-scale-wrap {
  direction: ltr;
  margin: 12px auto;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.wsk-stack {
  width: 275px;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wsk-window {
  direction: ltr;
  position: relative;
  background-color: #000;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transform-origin: top center;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-select: none;
}

.wsk-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 275px;
  height: 14px;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.wsk-title-text {
  width: 100%;
  padding-left: 4px;
  font-size: 9px;
  line-height: 14px;
  color: #00ff41;
  font-family: "Courier New", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

.wsk-controls {
  position: absolute;
  left: 16px;
  top: 88px;
  display: flex;
  gap: 0;
}

.wsk-btn {
  padding: 0;
  border: 0;
  cursor: pointer;
  background-repeat: no-repeat;
  background-color: transparent;
  image-rendering: pixelated;
}
/* BLOCKER-01 fix: visible fallback when the skin has no cbuttons.bmp — core
   transport controls must never be invisible, only re-skinned. */
.wsk-btn--no-sprite {
  background-color: #003b0f;
  color: #00ff41;
  border: 1px solid #00ff41;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wsk-btn:active,
.wsk-btn.is-active {
  filter: brightness(0.8);
}
.wsk-btn:focus-visible {
  outline: 2px solid #00ff41;
  outline-offset: 1px;
}

.wsk-shufrep {
  position: absolute;
  left: 164px;
  top: 88px;
  display: flex;
  gap: 3px;
}
.wsk-shuffle,
.wsk-repeat {
  padding: 0;
  border: 0;
  cursor: pointer;
  background-repeat: no-repeat;
  background-color: transparent;
  image-rendering: pixelated;
}
.wsk-shuffle:focus-visible,
.wsk-repeat:focus-visible {
  outline: 2px solid #00ff41;
  outline-offset: 1px;
}

.wsk-seek {
  position: absolute;
  left: 16px;
  top: 72px;
  width: 248px;
  height: 10px;
  background-repeat: no-repeat;
}
.wsk-seek-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.wsk-seek-input::-webkit-slider-runnable-track { background: transparent; height: 10px; }
.wsk-seek-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 10px;
  background: #00ff41;
  border: 1px solid #003b0f;
  margin-top: 0;
}
.wsk-seek-input::-moz-range-track { background: transparent; height: 10px; }
.wsk-seek-input::-moz-range-thumb {
  width: 4px;
  height: 10px;
  background: #00ff41;
  border: 1px solid #003b0f;
  border-radius: 0;
}
.wsk-seek-input:disabled { cursor: default; opacity: 0.5; }

.wsk-volume {
  position: absolute;
  left: 107px;
  top: 57px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.wsk-volume-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.wsk-volume-input::-webkit-slider-runnable-track { background: transparent; height: 14px; }
.wsk-volume-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 14px;
  background: #00ff41;
  border: 1px solid #003b0f;
}
.wsk-volume-input::-moz-range-track { background: transparent; height: 14px; }
.wsk-volume-input::-moz-range-thumb {
  width: 4px;
  height: 14px;
  background: #00ff41;
  border: 1px solid #003b0f;
  border-radius: 0;
}

/* Post-V1 W2-02: real stereo balance control. The classic bitmap remains the
   visible UI; the native range input is an accessible interaction layer. */
.wsk-balance {
  position: absolute;
  left: 177px;
  top: 57px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.wsk-balance--fallback {
  background: linear-gradient(90deg, #17451b 0%, #39ff14 50%, #17451b 100%);
  border: 1px solid #315431;
  box-sizing: border-box;
}
.wsk-balance-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: .001;
  cursor: ew-resize;
}
.wsk-balance:focus-within {
  outline: 2px solid #00ff41;
  outline-offset: 1px;
}
.wsk-balance.is-disabled {
  opacity: .48;
}
.wsk-balance-input:disabled {
  cursor: not-allowed;
}

.wsk-time {
  position: absolute;
  left: 36px;
  top: 26px;
  display: flex;
  align-items: center;
  gap: 1px;
}
.wsk-digit { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; }
.wsk-digit-sep { color: #00ff41; font-family: "Courier New", monospace; font-size: 11px; line-height: 13px; }
.wsk-time-fallback { color: #00ff41; font-family: "Courier New", monospace; font-size: 12px; }

.wsk-monoster {
  position: absolute;
  right: 40px;
  top: 41px;
  width: 56px;
  height: 12px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Supporting styles for the "Winamp Skins" section injected into the
   existing #themePopover (assets/css/style.css owns .theme-popover /
   .theme-option — reused as-is; only this small section wrapper is new). */
.theme-popover__section {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 4px;
}
.theme-popover__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2, #999);
  padding: 4px 12px 2px;
}

/* ---- Touch targets: keep the classic buttons comfortably tappable even
   when the whole window is scaled down on very narrow phones (min ~320px
   supported), without stretching individual sprites independently — only
   the whole window is scaled coherently, in JS, via transform: scale(). ---- */
@media (hover: none) and (pointer: coarse) {
  .wsk-btn,
  .wsk-shuffle,
  .wsk-repeat {
    min-width: 22px;
    min-height: 18px;
  }
}



/* ------------------------------------------------------------------
   Post-V1 Advanced Skin Experience: Playlist Editor + Equalizer
   Both windows are alternate renderers over MusicPlayer's existing
   queue/EQ state. They own no playback or DSP state.
   ------------------------------------------------------------------ */
.wsk-pledit-window,
.wsk-eq-window {
  direction: ltr;
  width: 275px;
  box-sizing: border-box;
  position: relative;
  background-color: #0b120b;
  color: #39ff14;
  border: 1px solid #315431;
  image-rendering: pixelated;
  font-family: "Courier New", monospace;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

.wsk-pledit-window {
  height: 174px;
  display: flex;
  flex-direction: column;
}

.wsk-eq-window {
  min-height: 168px;
}

.wsk-aux-title {
  min-height: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.78);
  border-bottom: 1px solid #315431;
  color: #d7ffd0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}

.wsk-aux-count {
  margin-left: auto;
  color: #39ff14;
}

.wsk-pledit-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: rgba(0, 0, 0, .76);
  scrollbar-color: #315431 #060906;
}

.wsk-pledit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  min-height: 24px;
  border-bottom: 1px solid rgba(57, 255, 20, .12);
}

.wsk-pledit-row.is-active {
  background: rgba(57, 255, 20, .15);
  color: #fff;
}

.wsk-pledit-play {
  min-width: 0;
  border: 0;
  padding: 0 4px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wsk-pledit-num,
.wsk-pledit-dur {
  color: #8fcf80;
  font-size: 9px;
}

.wsk-pledit-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.wsk-pledit-dur {
  text-align: right;
}

.wsk-pledit-remove {
  border: 0;
  background: transparent;
  color: #8fcf80;
  font: 15px/1 monospace;
  cursor: pointer;
}

.wsk-pledit-play:focus-visible,
.wsk-pledit-remove:focus-visible,
.wsk-aux-btn:focus-visible,
.wsk-eq-preset:focus-visible,
.wsk-eq-band input:focus-visible {
  outline: 2px solid #39ff14;
  outline-offset: -2px;
}

.wsk-pledit-empty {
  padding: 22px 8px;
  text-align: center;
  color: #8fcf80;
  font-size: 10px;
}

.wsk-pledit-actions,
.wsk-eq-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  background: rgba(0, 0, 0, .78);
  border-top: 1px solid #315431;
}

.wsk-aux-btn {
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid #315431;
  background: #101710;
  color: #b7eeb0;
  font: 700 9px/1 "Courier New", monospace;
  cursor: pointer;
}

.wsk-aux-btn.is-active,
.wsk-aux-btn[aria-pressed="true"] {
  color: #fff;
  border-color: #39ff14;
  box-shadow: inset 0 0 0 1px rgba(57,255,20,.35);
}

.wsk-eq-toolbar {
  border-top: 0;
  border-bottom: 1px solid #315431;
}

.wsk-eq-preset {
  min-width: 0;
  flex: 1 1 auto;
  height: 22px;
  border: 1px solid #315431;
  background: #070b07;
  color: #b7eeb0;
  font: 9px "Courier New", monospace;
}

.wsk-eq-body {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  align-items: end;
  gap: 1px;
  height: 94px;
  padding: 6px 4px 2px;
  background: rgba(0, 0, 0, .76);
}

.wsk-eq-band {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #8fcf80;
  font-size: 7px;
}

.wsk-eq-band input {
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
  width: 18px;
  height: 70px;
  margin: 0;
  accent-color: #39ff14;
  cursor: pointer;
}

.wsk-eq-band-label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}

.wsk-eq-note {
  padding: 4px 6px;
  border-top: 1px solid #315431;
  background: #241b05;
  color: #ffd36a;
  font-size: 8px;
}

.wsk-eq-note[hidden] {
  display: none;
}

.wsk-eq-band input:disabled,
.wsk-eq-preset:disabled,
.wsk-aux-btn:disabled {
  opacity: .48;
  cursor: not-allowed;
}

@media (hover: none) and (pointer: coarse) {
  /* Post-V1 R1: all newly-added interactive targets meet the 44px touch floor.
     The 11 EQ sliders cannot fit side-by-side inside a classic 275px window at
     that width, so the EQ body scrolls horizontally instead of shrinking hit
     targets below the accessibility requirement. */
  .wsk-pledit-row {
    min-height: 44px;
  }
  .wsk-pledit-play {
    min-height: 44px;
  }
  .wsk-pledit-remove,
  .wsk-aux-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .wsk-eq-preset {
    min-height: 44px;
  }
  .wsk-balance-input {
    left: -3px;
    top: -15px;
    width: 44px;
    height: 44px;
  }
  .wsk-eq-body {
    grid-template-columns: repeat(11, 44px);
    overflow-x: auto;
    overflow-y: hidden;
    align-items: end;
  }
  .wsk-eq-band {
    min-width: 44px;
  }
  .wsk-eq-band input {
    width: 44px;
    min-width: 44px;
    min-height: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wsk-stack,
  .wsk-pledit-window,
  .wsk-eq-window {
    transition: none !important;
  }
}