/* ===========================
   Jukebox Section (bottom-centered player)
   =========================== */

#jukebox { position: relative; z-index: 1000; }

/* Anchor TOP-RIGHT, just below your fixed nav bar */
.jukebox-container{
  position: fixed;
  top: calc(var(--nav-h, 112px) + 16px);
  right: 16px;

  /* Overall jukebox size (shrink to make room for headline) */
  width: clamp(320px, 26vw, 520px);
  aspect-ratio: 1 / 1;   /* jukebox.png is square */
  height: auto;
  z-index: 60;

  /* ================== KNOBS (safe defaults) ==================
     All % below are relative to the 1024×1024 skin.
     You can tweak these without breaking layout.                */

  /* PLAYER: bottom-center, fully inside the skin */
  --player-w: 48.74%;
  --player-h: 9.99%;
  --player-bottom: 1.6%;
  /* Split the difference: move right by half the player width (your current tiny left nudge) */
  --player-nudge-x: calc(var(--player-w) * -0.025);

  /* BUTTON ROW: near the top slot area, above player */
  --strip-top: calc(28.8% + (7.7% * var(--btn-scale)));
  --strip-w: 31.0%;
  --strip-nudge-x: -1.5%; /* row nudge: negative = left, positive = right */
  --btn-scale: 0.76;      /* button height scaling (0.70–0.90 is good) */

  /* Fine alignment (PX so it’s visible). Positive = move right */
  --btn1-nudge-px: 4px;
  --btn2-nudge-px: 3px;
  --btn3-nudge-px: 5px;
  --btn4-nudge-px: 3px;
  /* 5–7 implicitly 0px (locked) */
}

/* Jukebox background skin (click-through) */
.jukebox-skin{
  position: absolute;
  inset: 0;
  /* PATH is relative to /css/ → go UP one level */
  background: url("../img/jukebox/jukebox_cutout.png") no-repeat center top;
  background-size: contain;

  /* NEW: soft depth */
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
  z-index: 0;            /* keep under .jukebox-player (z-index:1) */
  pointer-events: none;
  /* optional perf hint */
  will-change: filter;
}


/* ========== Player strip (BOTTOM-CENTERED, INSIDE the frame) ========== */
.jukebox-player{
  position: absolute;

  /* Bottom-center anchoring that never spills outside the skin */
  bottom: var(--player-bottom);
  left: calc(50% + var(--player-nudge-x));
  transform: translateX(-50%);

  width: var(--player-w);
  height: var(--player-h);

  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  z-index: 1; /* sits below the button row */
}

.jp-btn{
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}
.jp-track{ flex:1; display:flex; flex-direction:column; min-width:0; }
.jp-title{
  font-size:.95rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jp-progress{ position:relative; height:4px; margin-top:6px; background:rgba(255,255,255,.25); border-radius:2px; }
.jp-bar{ position:absolute; inset:0 100% 0 0; background:#ffd84d; border-radius:2px; }
.jp-time{ font-size:.85rem; min-width:78px; text-align:right; }

/* ========== Tooltip (OPTION A: viewport-anchored) ========== */
.jukebox-tooltip{
  position: fixed;                 /* was absolute */
  left: 0;                         /* JS sets exact px */
  top: 0;                          /* JS sets exact px */
  transform: translate(-50%, -6px);
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .8rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 9999;                   /* ensure on top of everything */
}

/* ========== Centered button row ABOVE the player ========== */
.button-strip{
  position: absolute;

  /* Center horizontally, with optional nudge */
  top: var(--strip-top);
  left: calc(50% + var(--strip-nudge-x));
  transform: translateX(-50%);

  width: var(--strip-w);

  /* Button art is 79px tall on a 1024px skin → 7.7% of height
     Scale by --btn-scale to match your slot height precisely. */
  height: calc(7.7% * var(--btn-scale));

  display: flex;
  align-items: center;
  justify-content: space-between;   /* spread 7 buttons evenly */
  pointer-events: none;             /* strip is click-through */
  z-index: 3;                       /* row above player */
}

/* Buttons scale by the strip height; flex handles spacing */
.song-select{
  position: relative;               /* NOT absolute */
  background: none; border: none; padding: 0;
  pointer-events: auto;             /* clickable */
  cursor: pointer;
  height: 100%;                     /* match strip height */
  aspect-ratio: 43 / 79;            /* keep art ratio */
}

/* Buttons with no audio source look muted but remain interactive */
.song-select:not([data-src]), .song-select[data-src=""] {
  opacity: .55;
  cursor: pointer;   /* keep the hand so users can click and see the message */
}

.song-select img{
  display: block;
  height: 100%;
  width: auto;                      /* size by height */
}

/* ---- Per-button micro-nudges (visual alignment only, in PX) ---- */
.button-strip .song-select{ transform: translateX(0px); }
.button-strip .song-select:nth-child(1){ transform: translateX(var(--btn1-nudge-px)); }
.button-strip .song-select:nth-child(2){ transform: translateX(var(--btn2-nudge-px)); }
.button-strip .song-select:nth-child(3){ transform: translateX(var(--btn3-nudge-px)); }
.button-strip .song-select:nth-child(4){ transform: translateX(var(--btn4-nudge-px)); }
/* 5–7 unchanged (locked) */

/* ---------- Optional responsive scale-down ---------- */
@media (max-width: 992px){
  .jukebox-container{ transform-origin: top right; transform: scale(.88); }
}
@media (max-width: 768px){
  .jukebox-container{ transform-origin: top right; transform: scale(.74); }
}

/* ===== Mobile overrides for centered-top jukebox inside .jukebox-wrap ===== */
@media (max-width: 768px){
  /* Let the jukebox participate in the grid layout (no fixed positioning) */
  #jukebox.jukebox-wrap .jukebox-container{
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    margin: 0 auto;
    width: min(520px, 90vw);
    min-width: 320px;
    height: auto;
    transform: none;              /* cancel earlier scale transform */
    transform-origin: center top; /* harmless if not transformed */
  }
}