/* =========
   Theme (soft, professional Lisleby vibe)
   ========= */
:root {
  --bg:          #f8faf9;
  --surface:     #ffffff;
  --text:        #121212;
  --muted:       #5f6b65;
  --border:      rgba(0,0,0,.08);

  --accent:      #17a24b;    /* softened club green */
  --brand-yellow:#ffd400;

  --radius:      14px;
  --shadow-lg:   0 10px 30px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0 0 48px;
}

body::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--brand-yellow) 100%);
}

h2 {
  text-align: center;
  margin: 18px 0 8px;
  font-weight: 800;
}

/* Width constraints */
#playlist,
#cover-banner,
#global-controls {
  max-width: 720px;
  width: min(92vw, 720px);
  margin: 16px auto;
}

/* =========
   FIXED SQUARE BANNER (no layout shift)
   ========= */
#cover-banner {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 1; /* always square */
  background: radial-gradient(circle at top left, var(--accent), var(--brand-yellow), #000);
}

/* Children fill the square */
#cover-banner img,
#cover-banner #video-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Cover art fills (cropped) */
#cover-banner img {
  object-fit: cover;
  transition: opacity .25s ease;
}

/* Video layer: gradient surround + centered video that letterboxes */
#cover-banner #video-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, var(--accent), var(--brand-yellow), #000);
}
#cover-banner #video-layer video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* keep video ratio */
  background: #000;
}

/* Toggle by JS */
#cover-banner.video-active #video-layer { opacity: 1; pointer-events: auto; }
#cover-banner.video-active img { opacity: 0; }

/* Subtle “wipe” transition overlay */
#cover-banner::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.35));
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#cover-banner.transitioning::after { opacity: 1; }

/* =========
   AUDIO OVERLAY (progress bar)
   ========= */
#audio-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: none;
  gap: 10px; align-items: center;
  padding: 12px 14px; color: #fff; font-size: 14px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}
#cover-banner:not(.video-active) #audio-overlay { display: flex; }

#audio-overlay .time {
  width: 52px; text-align: center; opacity: .95; font-variant-numeric: tabular-nums;
}

#audio-bar {
  position: relative; flex: 1 1 auto; height: 12px;
  border-radius: 7px; background: rgba(255,255,255,.28);
  overflow: hidden; cursor: pointer;
}
#audio-loaded, #audio-played {
  position: absolute; top: 0; left: 0; height: 100%;
}
#audio-loaded { background: rgba(255,255,255,.38); width: 0%; }
#audio-played { background: var(--accent); width: 0%; }

#audio-thumb {
  position: absolute; top: 50%;
  width: 16px; height: 16px; transform: translate(-50%, -50%);
  left: 0%; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.24); pointer-events: none;
}

/* =========
   GLOBAL CONTROLS (symbols only)
   ========= */
#global-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px; /* more spacing so symbols breathe */
}

#global-controls button {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 28px;              /* large symbols */
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  transition: transform .1s ease, background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* Hover animation */
#global-controls button:hover {
  transform: translateY(-2px) scale(1.08);
  background: #fcfefd;
  border-color: rgba(0,0,0,.1);
}

/* Play vs Pause states */
#btn-toggle.is-play {
  background: #e9f8ee;
  border-color: #c0e8cf;
  color: #0d7f35;
}
#btn-toggle.is-pause {
  background: #fff7d6;
  border-color: #f0e29a;
  color: #7a6300;
}

/* Prev / Next styles */
#btn-next:not(:disabled),
#btn-prev:not(:disabled) {
  background: #f3f6f5;
  border-color: #dfe7e3;
  color: #2b3a33;
}
#btn-prev:disabled,
#btn-next:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* =========
   PLAYLIST (with thumbnails + active/next highlights)
   ========= */
#playlist { display: grid; gap: 10px; }

#playlist .item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#playlist .item:hover {
  transform: translateY(-1px);
  background: #fcfefd;
  border-color: rgba(0,0,0,.1);
}

#playlist .item::before {
  content: ''; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius: 12px 0 0 12px; background: transparent; transition: background .15s ease;
}
#playlist .item.is-active { border-color: #17a24b; box-shadow: 0 8px 24px rgba(23,162,75,.12); }
#playlist .item.is-active::before { background: #17a24b; }
#playlist .item.is-next::before   { background: #ffd400; }

#playlist .thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background:#eee; }
#playlist .thumb img { width:100%; height:100%; object-fit: cover; display:block; }

#playlist .meta { overflow: hidden; }
#playlist .title {
  font-weight: 700; font-size: 15.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#playlist .sub {
  font-size: 13.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#playlist .len { font-size: 12px; color: var(--muted); }

/* =========
   PLAYERS
   ========= */
.aplayer { display: none; }        /* hidden UI; overlay replaces it */
.dplayer { font-size: 16px; }      /* slightly larger controls */

/* Small screens adjustments */
@media (max-width: 480px) {
  #global-controls { gap: 14px; }
  #global-controls button { padding: 12px 16px; font-size: 24px; }
}