/* ============================================================================
   Jingle Player — site-wide retro-rack audio player (one panel above footer).
   VU needles + LED ladders + spectrum EQ + center volume fader.
   Adapted from FunRadioPlayer.com's meter/rack aesthetic, self-contained.
   ========================================================================== */

.jp-panel{
  --jp-rack-1:#1a1d22;
  --jp-rack-2:#0e1014;
  --jp-bezel:#05060a;
  --jp-line:rgba(255,255,255,.06);
  --jp-amber:#ffce6b;
  --jp-green:#33dd66;
  --jp-text:#cdd3dc;
  --jp-text-dim:#7c8694;
  background:
    radial-gradient(120% 140% at 50% -20%, #23272e 0%, var(--jp-rack-1) 42%, var(--jp-rack-2) 100%);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(0,0,0,.6);
  padding:1.6rem 0 1.9rem;
  color:var(--jp-text);
  position:relative;
  overflow:hidden;
}
.jp-panel::before{ /* radio-cabinet louver slats + faint brushed sheen */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.030) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 1px 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  -webkit-mask:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
          mask:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

.jp-wrap{ max-width:1080px; margin:0 auto; padding:0 1rem; position:relative; }

.jp-head{ text-align:center; margin-bottom:1.1rem; }
.jp-eyebrow{
  display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--jp-amber); font-weight:700; margin-bottom:.25rem;
}
.jp-title{ margin:.1rem 0 .25rem; font-size:clamp(1.25rem,3.4vw,1.7rem); color:#fff; }
.jp-body{ margin:0 auto; max-width:640px; color:var(--jp-text-dim); font-size:.92rem; line-height:1.5; }

/* ---- The rack ---------------------------------------------------------- */
.jp-rack{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:stretch;
  gap:.6rem;
  /* horizontal louver slats fill the blank rack face */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.42) 1px 2px, transparent 2px 7px),
    linear-gradient(180deg,#16191f,#0a0c10);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 0 22px rgba(0,0,0,.6),
    0 14px 34px rgba(0,0,0,.55);
  padding:.95rem .95rem 1.05rem;
  max-width:880px; margin:0 auto;
}
/* bolted-panel rivets in the top corners */
.jp-rack::before, .jp-rack::after{
  content:""; position:absolute; top:9px; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #565b64, #191b1f 70%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.8);
  pointer-events:none;
}
.jp-rack::before{ left:9px; } .jp-rack::after{ right:9px; }

/* ---- VU meter + LED ladder unit (one per channel) ---------------------- */
.jp-vu{ display:flex; align-items:flex-end; gap:.35rem; }
.jp-led{
  width:14px; height:134px;
  background:var(--jp-bezel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:4px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.85), inset 0 1px 2px rgba(0,0,0,.9);
  display:block;
}
.jp-bezel{
  display:block;
  /* embossed (raised) metal frame around the glass */
  background:linear-gradient(180deg,#363a42 0%,#23262c 45%,#13151a 100%);
  padding:6px; border-radius:9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.65),
    0 3px 8px rgba(0,0,0,.7);
  border:1px solid rgba(0,0,0,.5);
}
.jp-glass{
  background:radial-gradient(120% 120% at 50% 0%, #1c1606 0%, #120d04 70%, #0a0702 100%);
  border-radius:5px;
  box-shadow:inset 0 0 16px rgba(0,0,0,.9), inset 0 2px 4px rgba(0,0,0,.8);
  display:block;
  width:264px; max-width:100%;
  border:1px solid rgba(0,0,0,.85);
}
.jp-meter{ display:block; width:100%; height:auto; aspect-ratio:121 / 63; border-radius:4px; }

/* ---- Center column: volume fader + transport --------------------------- */
.jp-center{
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.55rem .4rem; min-width:90px;
  /* reversed-emboss (debossed) recessed well for the volume + transport */
  background:linear-gradient(180deg,#1b1e24,#0b0d11);
  border-radius:10px;
  border:1px solid rgba(0,0,0,.55);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.75),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 1px 0 rgba(255,255,255,.06);
}
.jp-vol{ display:flex; flex-direction:column; align-items:center; gap:.3rem; flex:1; }
.jp-vol-track{
  position:relative; height:96px; width:34px;
  display:flex; align-items:center; justify-content:center;
}
.jp-vol-track::before{ /* debossed slot well */
  content:""; position:absolute; top:2px; bottom:2px; width:8px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,#04050a,#0e1116);
  border-radius:5px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.95), inset 0 1px 3px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,.07);
}
.jp-vol-fill{
  position:absolute; bottom:4px; width:6px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,#ffe39a,var(--jp-amber));
  border-radius:4px; box-shadow:0 0 8px rgba(255,206,107,.6);
  pointer-events:none;
}
/* vertical range input overlaid on the track */
.jp-fader{
  -webkit-appearance:none; appearance:none;
  width:96px; height:34px;
  transform:rotate(-90deg);
  background:transparent; cursor:pointer; margin:0;
}
.jp-fader:focus{ outline:none; }
.jp-fader::-webkit-slider-runnable-track{ background:transparent; height:34px; }
.jp-fader::-moz-range-track{ background:transparent; height:34px; }
.jp-fader::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:26px; border-radius:3px;
  background:linear-gradient(180deg,#f2f4f7,#9aa3ad);
  border:1px solid #5b626b; box-shadow:0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 #fff;
}
.jp-fader::-moz-range-thumb{
  width:14px; height:26px; border-radius:3px;
  background:linear-gradient(180deg,#f2f4f7,#9aa3ad);
  border:1px solid #5b626b; box-shadow:0 2px 4px rgba(0,0,0,.6);
}
.jp-vol-label{ font-size:.62rem; letter-spacing:.14em; color:var(--jp-text-dim); font-weight:700; }

/* transport buttons (play/pause + stop) */
.jp-transport{ display:flex; gap:.4rem; }
.jp-tbtn{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120% 120% at 50% 0%, #2c3038 0%, #1a1d22 60%, #101216 100%);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .08s ease, box-shadow .12s ease;
}
.jp-tbtn:hover{ box-shadow:0 3px 12px rgba(255,206,107,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.jp-tbtn:active{ transform:translateY(1px); }
.jp-tbtn svg{ width:18px; height:18px; fill:currentColor; }
.jp-tbtn--play.is-playing .jp-ic-play{ display:none; }
.jp-tbtn--play .jp-ic-pause{ display:none; }
.jp-tbtn--play.is-playing .jp-ic-pause{ display:block; }

/* ---- EQ canvas + control strip ----------------------------------------- */
.jp-lower{ max-width:880px; margin:.8rem auto 0; }
.jp-eq-wrap{
  /* debossed screen well */
  background:linear-gradient(180deg,#0a0d11,#04060a);
  border:1px solid rgba(0,0,0,.6);
  border-radius:10px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.92), inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05);
  padding:7px;
}
.jp-eq{ display:block; width:100%; height:90px; border-radius:6px; }

.jp-ctrl{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem;
  margin-top:.7rem;
}
.jp-rbtn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; letter-spacing:.08em; font-weight:700; text-transform:uppercase;
  color:var(--jp-text); background:linear-gradient(180deg,#23272e,#15181d);
  border:1px solid rgba(255,255,255,.1); border-radius:6px;
  padding:.42rem .7rem; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.4);
  transition:border-color .12s ease, color .12s ease;
}
.jp-rbtn:hover{ border-color:rgba(255,206,107,.5); }
.jp-rbtn-led{
  width:9px; height:9px; border-radius:50%;
  background:#3a3f47; box-shadow:inset 0 0 3px rgba(0,0,0,.8);
  transition:background .12s ease, box-shadow .12s ease;
}
.jp-rbtn.is-active{ color:#fff; border-color:rgba(255,206,107,.55); }
.jp-rbtn.is-active .jp-rbtn-led{
  background:var(--jp-green); box-shadow:0 0 8px var(--jp-green), inset 0 0 2px #aaffbb;
}
.jp-rbtn--mute.is-active .jp-rbtn-led{
  background:#ff4d3d; box-shadow:0 0 8px #ff4d3d, inset 0 0 2px #ffbbaa;
}

.jp-hint{ text-align:center; color:var(--jp-text-dim); font-size:.82rem; margin:.9rem 0 0; }

/* ---- Mobile: meters MUST stay side-by-side (do not stack) -------------- */
@media (max-width:560px){
  .jp-wrap{ padding:0; }                               /* full-bleed: no left/right padding */
  .jp-rack{ grid-template-columns:1fr auto 1fr; gap:.25rem; padding:.5rem .15rem .6rem;
    max-width:none; border-left:none; border-right:none; border-radius:0; }
  .jp-vu{ min-width:0; }
  .jp-vu--r{ justify-content:flex-end; }
  .jp-bezel{ padding:3px; flex:1 1 auto; min-width:0; }
  .jp-glass{ width:auto; min-width:0; }                /* meters grow to fill the row */
  .jp-led{ width:9px; height:84px; }
  .jp-center{ min-width:60px; gap:.35rem; }
  .jp-vol-track{ height:78px; }
  .jp-fader{ width:78px; }
  .jp-tbtn{ width:34px; height:34px; }
  .jp-tbtn svg{ width:14px; height:14px; }
  .jp-eq{ height:60px; }
  .jp-rbtn{ font-size:.6rem; padding:.36rem .5rem; }
}
@media (max-width:380px){
  .jp-led{ width:7px; height:74px; }
}