/* Soju 0.7b – compact Winamp-style, 400px width, no overflow */
:root{
  --shell:#2a2e4a; --shell-hi:#3a4063; --shell-lo:#1f2238;
  --panel:#232743; --inner:#171a2d;
  --glass:#e6edf3; --glass-edge:#b8c7d4;
  --neon:#b9ff8a; --accent:#ffcf6d; --green:#5be08e;
  --font:"Pixelify Sans", system-ui, sans-serif;
  --pill-radius: 8px;   /* try 8px for even squarer ends */
  --pill-pad: 4px;       /* whatever your current padding is */
  --led-radius: 4px;   /* tight, squarish corners for the LED window */
  --scope-led-radius: 4px;   /* inner window corners for the canvas “LED” */
}

* { box-sizing: border-box; }
html,body{ background:#0b0f14; color:#e7ebff; font-family:var(--font); image-rendering:pixelated }
.hidden{ 
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Toggle button */
.soju-audio-btn{
  position:fixed; 
  right:20px; 
  bottom:20px; 
  width:60px; 
  height:60px;
  display:grid; place-items:center; color:var(--neon); background:var(--shell);
  border-radius:10px; border:0; cursor:pointer;
  box-shadow:0 0 0 2px var(--shell-hi) inset, 0 0 0 5px var(--shell-lo) inset, 0 8px 18px rgba(0,0,0,.45)
}
.soju-audio-btn svg{ width:24px; height:24px }

/* === Pixel/90s neon vibe for the audio button === */
/* === Active/on state uses turquoise (same as hover) === */
:root {
  --soju-neon-cyan: #00fff0;              /* your hover neon */
  --soju-neon-active: var(--soju-neon-cyan);
}

/* Active: steady cyan glow + subtle pulse (no white) */
.soju-audio-btn.active {
  box-shadow:
    0 0 0 2px var(--soju-neon-active),
    0 0 18px var(--soju-neon-active),
    0 0 6px rgba(0, 0, 0, 0.6) inset;
  animation:
    soju-neon-flicker-on 1.9s steps(12, end) infinite,
    soju-on-pulse 3s ease-in-out infinite;
}

/* Icon glow matches active cyan */
.soju-audio-btn.active i {
  text-shadow: 0 0 7px var(--soju-neon-active);
}

/* Replace the white "flash" with a short cyan ramp */
.soju-audio-btn.just-activated {
  animation: soju-on-ramp 0.22s steps(3, end);
}

/* Pressed while active: slightly stronger cyan, no color change */
.soju-audio-btn.active:active {
  box-shadow:
    0 0 0 2px var(--soju-neon-active),
    0 0 20px var(--soju-neon-active),
    0 0 5px rgba(0, 0, 0, 0.7) inset;
}

/* --- Animations (cyan-based) --- */

/* CRT-ish micro-flicker while "on" */
@keyframes soju-neon-flicker-on {
  0%   { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 12px var(--soju-neon-active), 0 0 3px rgba(0,0,0,0.5) inset; }
  6%   { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 18px var(--soju-neon-active), 0 0 3px rgba(0,0,0,0.5) inset; }
  11%  { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 11px var(--soju-neon-active), 0 0 3px rgba(0,0,0,0.5) inset; }
  22%  { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 19px var(--soju-neon-active), 0 0 4px rgba(0,0,0,0.6) inset; }
  37%  { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 14px var(--soju-neon-active), 0 0 3px rgba(0,0,0,0.5) inset; }
  51%  { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 20px var(--soju-neon-active), 0 0 4px rgba(0,0,0,0.6) inset; }
  68%  { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 13px var(--soju-neon-active), 0 0 3px rgba(0,0,0,0.5) inset; }
  83%  { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 19px var(--soju-neon-active), 0 0 4px rgba(0,0,0,0.6) inset; }
  100% { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 16px var(--soju-neon-active), 0 0 3px rgba(0,0,0,0.5) inset; }
}

/* Gentle brightness “hum” while on */
@keyframes soju-on-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); } /* subtle, not washed out */
}

/* Short startup ramp (cyan → slightly brighter cyan), no white */
@keyframes soju-on-ramp {
  0%   { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 8px  var(--soju-neon-active), 0 0 3px rgba(0,0,0,0.5) inset; }
  100% { box-shadow: 0 0 0 2px var(--soju-neon-active), 0 0 18px var(--soju-neon-active), 0 0 6px rgba(0,0,0,0.6) inset; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .soju-audio-btn.active,
  .soju-audio-btn.just-activated {
    animation: none;
  }
}

/* Hover: keep shell bevel, add cyan outline + glow */
.soju-audio-btn:hover {
  /* keep your original insets + drop shadow */
  box-shadow:
    0 0 0 2px var(--shell-hi) inset,
    0 0 0 5px var(--shell-lo) inset,
    0 8px 18px rgba(0,0,0,.45),
    /* neon outline + glow */
    0 0 0 2px var(--soju-neon-cyan),
    0 0 12px var(--soju-neon-cyan);
  transition: box-shadow .12s steps(2, end);
}

/* Give the SVG icon a neon edge on hover (text-shadow doesn't affect SVGs) */
.soju-audio-btn:hover svg {
  filter: drop-shadow(0 0 6px var(--soju-neon-cyan));
  transition: filter .12s steps(2, end);
}

/* Active: keep base shell bevel + stronger steady cyan glow */
.soju-audio-btn.active {
  box-shadow:
    0 0 0 2px var(--shell-hi) inset,
    0 0 0 5px var(--shell-lo) inset,
    0 8px 18px rgba(0,0,0,.45),
    0 0 0 2px var(--soju-neon-active),
    0 0 18px var(--soju-neon-active);
  animation:
    soju-neon-flicker-on 1.9s steps(12, end) infinite,
    soju-on-pulse 3s ease-in-out infinite;
}

/* Active icon glow (SVG) */
.soju-audio-btn.active svg {
  filter: drop-shadow(0 0 7px var(--soju-neon-active));
}

/* Pressed while active: slight depth bump */
.soju-audio-btn.active:active {
  box-shadow:
    0 0 0 2px var(--shell-hi) inset,
    0 0 0 5px var(--shell-lo) inset,
    0 8px 18px rgba(0,0,0,.45),
    0 0 0 2px var(--soju-neon-active),
    0 0 20px var(--soju-neon-active),
    0 0 5px rgba(0,0,0,0.7) inset;
}

/* Show the same cyan neon when playing (even if the panel is closed) */
.soju-audio-btn.playing {
  box-shadow:
    0 0 0 2px var(--soju-neon-active),
    0 0 18px var(--soju-neon-active),
    0 0 6px rgba(0, 0, 0, 0.6) inset;
  animation:
    soju-neon-flicker-on 1.9s steps(12, end) infinite,
    soju-on-pulse 3s ease-in-out infinite;
}

/* Icon glow for SVG while playing */
.soju-audio-btn.playing svg {
  filter: drop-shadow(0 0 7px var(--soju-neon-active));
}

/* If the panel is open AND music is playing, make it a hair brighter */
.soju-audio-btn.active.playing {
  box-shadow:
    0 0 0 2px var(--soju-neon-active),
    0 0 22px var(--soju-neon-active),
    0 0 6px rgba(0, 0, 0, 0.6) inset;
}

/* Window */
.soju-audio, .soju-audio * {
  font-family: var(--font) !important;
}

.soju-audio.hidden { display: block !important; }  /* keep transitions working */

.soju-audio{
  position:fixed; right:20px; bottom:90px;
  width:400px; max-width:calc(100vw - 24px);
  overflow:hidden;            /* hard clamp */
  background:linear-gradient(#30345a,#242849 60%,#202444);
  border-radius:10px; padding:8px 10px 10px;
  box-shadow:0 0 0 2px #414773 inset, 0 0 0 5px #1b1e33 inset, 0 14px 30px rgba(0,0,0,.5);
  transform-origin: bottom right;
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition: opacity 0.10s cubic-bezier(0.55, 0.085, 0.68, 0.53),
              transform 0.10s cubic-bezier(0.55, 0.085, 0.68, 0.53),
              visibility 0s linear 0s;
}

.soju-audio:not(.hidden) {
  animation: slideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.soju-audio.hidden{
  opacity: 0 !important;
  transform: translateY(20px) scale(0.95) !important;
  transition: opacity 0.10s cubic-bezier(0.55, 0.085, 0.68, 0.53),
              transform 0.10s cubic-bezier(0.55, 0.085, 0.68, 0.53),
              visibility 0s linear 0.10s;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Make the toggle and the panel sit above everything footer-ish */
.soju-audio-btn { z-index: 10010; }
.soju-audio    { z-index: 10011; }

/* Header */
.soju-head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1px 6px;
  margin-bottom: 8px;
  border-radius: 7px;
  background: linear-gradient(#222642, #1c1f37);
  box-shadow: 0 0 0 2px #0e1227 inset, 0 0 0 4px #3a3f66 inset;
  height: 40px; /* Set fixed height for more compact header */

  --bar-w: 70px;   /* bar length */
  --bar-gap: 14px; /* space between bars and title */
  --x-pad: 10px;   /* X button offset from edge */
  --x-gap: 26px;   /* distance between right bar and X */
  --left-bar-start: 16px; /* left bar position from left edge */
}

.soju-head-bars {
  position: absolute;
  left: var(--left-bar-start);
  width: var(--bar-w);
  height: 6px;
  background:
    linear-gradient(#f8e9c4, #fff1ce) 0 0/100% 2px no-repeat,
    linear-gradient(#f8e9c4, #fff1ce) 0 4px/100% 2px no-repeat;
  border-radius: 1px;
  opacity: 0.85;
  pointer-events: none;
}

/* Right-side header bars (mirror of .soju-head-bars), sits left of the X */
.soju-head::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(var(--x-pad) + var(--x-gap)); /* moves left from the X */
  width: var(--bar-w);
  height: 6px;
  background:
    linear-gradient(#f8e9c4, #fff1ce) 0 0/100% 2px no-repeat,
    linear-gradient(#f8e9c4, #fff1ce) 0 4px/100% 2px no-repeat;
  border-radius: 1px;
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 420px){
  .soju-head{ --bar-w: 72px; --bar-gap: 10px; }
}

.soju-title {
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  color: #fff;
  z-index: 1;
  /* Shift title left to center it between the bars */
  /* The X button area (x-pad + x-gap) = 36px creates asymmetry */
  /* So we shift left by half that amount (18px) to center between bars */
  margin-left: -18px;
}

.x {
  position: absolute;
  right: var(--x-pad);
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}

/* Body grid */
.soju-top{
  display:grid; grid-template-columns:170px 1fr; gap:10px;
  min-width:0; /* allow shrink */
}

/* Scope */
.soju-scope{
  position:relative; height:94px; padding:6px;
  background:var(--panel); border-radius:8px;
  box-shadow:0 0 0 2px #424864 inset, 0 0 0 5px #1b1e33 inset;
}

.scope-grid{
  position:absolute; inset:4px;
  border-radius: var(--scope-led-radius);

  /* LED glass: darker base + scanlines + soft green core glow */
  background:
    /* horizontal scanlines */
    repeating-linear-gradient(
      to bottom,
      #0a0d1d 0px,
      #0a0d1d 2px,
      #0b1024 2px,
      #0b1024 4px
    ),
    /* faint inner glow so the LEDs feel “backlit” */
    radial-gradient(
      ellipse at 50% 50%,
      rgba(125,255,83,0.08) 0%,
      rgba(0,0,0,0.85) 70%
    );

  /* crisp inner rim (sunken look) */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.65);
}

/* Dot matrix (LED pixels) — painted under the canvas */
.scope-grid::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  /* brighter, tighter dots so they read through the canvas drawing */
  opacity:.15;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle,
      rgba(120,255,100,0.22) 0.7px,
      rgba(0,0,0,0) 1px);
  background-size: 3px 3px;      /* 2.5–4px to taste */
  background-position: 0 0;
}

/* soft edge vignette so the panel feels inset */
.scope-grid::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,0) 40%,
              rgba(0,0,0,0.12) 100%);
}

#soju-scope-canvas {
  position: absolute;
  left: 10px;
  right: 110px;         /* reserve space for timer */
  bottom: 10px;

  height: 64px;         /* height for the EQ area */
  display: block;
  background: transparent;
  z-index: 1;           /* sits behind timer */
  pointer-events: none; /* avoid blocking clicks */
}

#soju-scope-canvas{
  position:absolute;
  left:10px; right:110px; bottom:10px;
  height:64px;
  background:transparent;
  z-index:1;               /* keeps it above the new LED background */
  pointer-events:none;
}

/* Timer – restored from earlier version */
.timer {
  position: absolute;
  right: 15px;
  top: 5px;
  font-size: 30px;
  color: var(--neon);
    text-shadow:
    0 0 6px rgba(125,255,83,0.85),
    0 0 10px rgba(125,255,83,0.50);  /* secondary soft halo */
  z-index: 2; /* above EQ canvas */
}

/* Right column */
.soju-right{ display:grid; gap:8px; min-width:0; }
.track-pill{
  background:linear-gradient(#1c2038,#14182c);
  box-shadow:0 0 0 2px #0e1227 inset, 0 0 0 5px #3a3f66 inset;
  min-width:0;
  border-radius: var(--pill-radius);
  padding: var(--pill-pad);
}
.track-pill::before,
.track-pill::after{ border-radius: inherit; } /* if you use them */

/* Sunken LED display window */
.led-marquee{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  padding-left: 4px;                 /* keep your existing text inset */
  border-radius: var(--led-radius); /* squarer corners */

  /* darker “glass” + scanlines + slight center glow */
  background:
    /* scanlines (2px/2px) */
    repeating-linear-gradient(
      to bottom,
      #0a0d1d 0px,
      #0a0d1d 2px,
      #0b1024 2px,
      #0b1024 4px
    ),
    /* very subtle green core glow */
    radial-gradient(
      ellipse at 50% 50%,
      rgba(125,255,83,0.08) 0%,
      rgba(0,0,0,0.85) 70%
    );
  background-blend-mode: overlay;

  /* sunken, plastic window look */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.55),  /* crisp inner edge */
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.65);
}

/* More visible pixel grid for LED look */
.led-marquee::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* brighter, sharper dots */
  opacity: 0.15; /* more visible overall */
  mix-blend-mode: screen; /* brightens the dots instead of overlaying darkly */

  /* pixel grid pattern */
  background:
    radial-gradient(circle,
      rgba(120, 255, 100, 0.25) 0.7px,   /* larger, brighter dots */
      rgba(0,0,0,0) 1px
    );
  background-size: 3px 3px;   /* smaller value = denser dots */
  background-position: 0 0;

  /* optional shimmer for realism */
  animation: pixelShift 0.2s linear infinite;
  background-blend-mode: lighten;
}

@keyframes pixelShift {
  0%   { background-position: 0 0; }
  100% { background-position: 0.2px 0.2px; } /* slow subpixel drift */
}

/* faint vignette so the text feels “inside” the glass */
.led-marquee::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,0) 40%,
              rgba(0,0,0,0.12) 100%);
  pointer-events:none;
}

.led {
  position: absolute;
  top: 50%;
  padding-left: 4px;
  transform: translateY(-50%);
  white-space: nowrap;
  color: var(--neon);
    text-shadow:
    0 0 6px rgba(125,255,83,0.85),
    0 0 10px rgba(125,255,83,0.50);  /* secondary soft halo */
  font-size: 13px;
  letter-spacing: 1px;
  will-change: transform;
  animation: marquee var(--marquee-duration, 12s) linear infinite;
}

.led.clone {
  left: var(--marquee-distance, 100%);
}

/* smooth continuous scroll */
@keyframes marquee {
  from {
    transform: translate(-0%, -50%);
  }
  to {
    transform: translate(calc(-1 * var(--marquee-distance, 100%)), -50%);
  }
}

/* Meta row */
.meta-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0 }
.badge{ background:#0e1227; color:var(--neon); padding:2px 5px; border-radius:6px;
  box-shadow:0 0 0 2px #3a3f66 inset, 0 2px 0 #0e1227 inset; font-size:9px; min-width:22px; text-align:center;   color: var(--neon);
    text-shadow:
    0 0 6px rgba(125,255,83,0.55),
    0 0 10px rgba(125,255,83,0.30);  /* secondary soft halo */ }
.unit{ opacity:.9; font-size:10px; margin-right:4px }
.mono{ opacity:.3; font-size:10px; margin-left:2px; text-shadow:
    0 0 6px rgba(125,255,83,0.15),
    0 0 10px rgba(125,255,83,0.05);  /* secondary soft halo */}
.stereo{ font-size:10px; color:var(--neon); text-shadow:
    0 0 6px rgba(125,255,83,0.55),
    0 0 10px rgba(125,255,83,0.30);  /* secondary soft halo */ }
.stereo.active::before{ content:"•"; margin-right:6px; color:var(--neon) }

/* Sliders */
.sliders{ display:grid; gap:8px }
.slider{
  position:relative; height:14px; border-radius:8px;
  background:linear-gradient(#14182c,#0e1227);
  box-shadow:0 0 0 2px #0e1227 inset, 0 0 0 6px #3a3f66 inset;
}
.slider .track{
  position:absolute; left:4px; right:4px; top:50%; height:6px; transform:translateY(-50%);
  border-radius:6px; box-shadow:inset 0 2px 0 rgba(0,0,0,.20)
}
.track.yellow{ background:linear-gradient(#ffbd38,#db9f30) }
.track.green{  background:linear-gradient(#50c878,#2ea85d) }
.slider .thumb{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:20px; height:12px; border-radius:4px; cursor:pointer;
  background:linear-gradient(#f8f0d7,#e7d3a7); box-shadow:0 0.5px 0 #a78f58, 0 0 0 2px rgba(0,0,0,.2)
}

/* Divider */
.divider{ height:20px; margin:8px 0; border-radius:4px;
  background:linear-gradient(#12162b,#0d1022);
  box-shadow: inset 0 0 0 2px #0a0e20, inset 0 0 0 5px #343a61;
  position: relative;       /* so the thumb is positioned against the divider */
  overflow: hidden;         /* safety: clip any accidental overhang */
}

/* Divider as seek bar */
.divider { position: relative; cursor: pointer; }
.divider .thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 12px; border-radius: 4px;
  background: linear-gradient(#f8f0d7,#e7d3a7);
  box-shadow: 0 0.5px 0 #a78f58, 0 0 0 2px rgba(0,0,0,.2);
}

/* Winamp-style, pixel-art seek thumb */
#pos-slider.divider .thumb {
  width: 44px;
  height: 18px;
  border-radius: 4px;
  z-index: 2;
  cursor: pointer;

  /* center anchoring */
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;

  /* Banded “gold” fill for pixel feel (hard stops) */
  background:
    linear-gradient(to bottom,
      #f7eebf 0%,   #f7eebf 12%,
      #f1de9a 12%,  #f1de9a 38%,
      #d9b861 38%,  #d9b861 50%,
      #b99047 50%,  #b99047 64%,
      #caa255 64%,  #caa255 86%,
      #f4e3a4 86%,  #f4e3a4 100%
    );

  /* crisp outline + stepped inner edges (no blurs) */
  border: 1px solid #a9853d;
  box-shadow:
    0 1px 0 #0e0e0e,            /* hard drop shadow */
    inset 0 1px 0 #ffffffcc,    /* top highlight */
    inset 0 -1px 0 #00000066,   /* bottom dark */
    inset 1px 0 0 #00000044,    /* left inner edge */
    inset -1px 0 0 #ffffff22;   /* right inner edge */
}

/* thinner + closer pixel ribs */
#pos-slider.divider .thumb::before,
#pos-slider.divider .thumb::after {
  content: "";
  position: absolute;
  left: 6px; 
  right: 6px;
  height: 2px;                 /* was 4px → thinner */
  border-radius: 2px;          /* subtle rounded ends */
  background:
    linear-gradient(to bottom, /* harder banding for pixel feel */
      #fff7d9 0%,  #fff7d9 60%,
      #e2cf9a 60%, #e2cf9a 100%
    );
  opacity: .95;
}

/* perfectly centered, tighter spacing */
#pos-slider.divider .thumb::before { top: calc(50% - 3px); }  /* upper rib */
#pos-slider.divider .thumb::after  { top: calc(50% + 1px); }  /* lower rib */

/* subtle interaction states */
#pos-slider.divider .thumb:hover {
  filter: brightness(1.06);
}
#pos-slider.divider .thumb:active {
  transform: translate(-50%, -48%); /* tiny “press” */
}

/* keyboard focus support (if you ever make the thumb focusable) */
#pos-slider.divider .thumb:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.18),
    0 0 0 4px #f7eebf66; /* soft gold glow */
}

/* Deep, sunken slot for the seek bar */
#pos-slider.divider {
  background: #10152b;   /* darker inner fill */
  /* keep your existing frame, add stepped inner bevel for depth */
  box-shadow:
    inset 0 0 0 2px #0a0e20,   /* existing inner frame */
    inset 0 0 0 5px #343a61,   /* existing frame */
    inset 0 2px 0 #0b0f23,     /* top dark line */
    inset 0 1px 0 #202746,     /* top light line */
    inset 0 -2px 0 #0b0f23,    /* bottom dark line */
    inset 0 -1px 0 #202746;    /* bottom light line */
}

/* optional faint rails for extra depth (can remove if you prefer clean) */
#pos-slider.divider::before,
#pos-slider.divider::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  height: 4px;
  opacity: .45;
  pointer-events: none;
}
#pos-slider.divider::before { top: 4px;  background: #0a0e20; }
#pos-slider.divider::after  { bottom: 4px; background: #1b2244; }

/* All slider thumbs are center-anchored (like your divider thumb) */
.slider .thumb,
.divider .thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%); /* center by the left axis */
  /* keep your existing size/skin/shadows as-is */
}

/* Make divider/seek bar fill the player width */
.soju-audio > .divider { display: block; width: 100%; }

/* ▼ Winamp-style transport – uses .player-btn, no wrapper grid needed */
.transport{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px;
  background: linear-gradient(#272b46,#1e223a);
  border-radius: 0 0 10px 10px;
  box-shadow:
    inset 0 0 0 2px #0e1227,
    inset 0 0 0 5px #3a3f66,
    0 6px 16px rgba(0,0,0,.35);
}

/* Buttons: dark, beveled, pixel texture (cohesive with upper shell) */
.player-btn{
  position: relative;
  height: 30px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #e6edf3; /* icon color via currentColor */
  background: linear-gradient(#30355a,#232845); /* same family as scope frame */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),   /* top highlight */
    inset 0 -1px 0 rgba(0,0,0,.45),        /* bottom shadow */
    0 1px 0 rgba(0,0,0,.4);                /* drop */
  transition: transform .07s ease, box-shadow .12s ease, color .12s ease;
  overflow: hidden;
}

/* glossy strip */
.player-btn::before{
  content:"";
  position:absolute; left:6px; right:6px; top:4px; height:6px;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  pointer-events:none;
}

/* subtle pixel grid texture */
.player-btn::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 5px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 5px);
  background-size:2px 2px;
  border-radius:inherit;
  pointer-events:none;
}

/* hover = faint LED green to match marquee */
.player-btn:hover{
  color: var(--neon);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 0 8px rgba(185,255,138,.20);
}

/* pressed feel */
.player-btn:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,.55),
    0 1px 0 rgba(0,0,0,.35);
}

/* icons inherit color and align perfectly */
.player-btn svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}