/* --- playing screen ---
   Its card now reuses episode-nav's own .episode-card/.artwork-wrap classes
   (carousel.css) directly, so the two are identical in size and position — no
   separate wrapper classes here. Metadata itself is shared globally via
   #carousel-meta (carousel.css), not part of either card. */
.artwork-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.artwork {
  /* width + aspect-ratio only (no height:100%) — .artwork-wrap's own height is
     itself derived from its aspect-ratio (not a definite value early enough in
     layout for a flex-item child), so a percentage height here could resolve
     against an indefinite parent and produce a slightly non-square box */
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 16px 40px var(--shadow-1);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
/* permanent top-level sibling of .carousel-container/.controls (index.html) —
   always reserves --scrub-h regardless of screen, only shown (.hidden toggled
   by setScreen()) on the playing screen. Being a normal flex row rather than
   absolutely anchored means its presence/absence never affects where the
   carousel above it centers its card. */
.scrub-panel {
  flex: none;
  height: var(--scrub-h);
  width: min(80vw, 340px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity .2s ease;
}
.scrub-panel.hidden {
  opacity: 0;
  pointer-events: none;
}
.progress-bar {
  /* visual bar stays a thin 4px line, but the touch target is much taller
     (via padding, box-sizing) so it's easy to grab for a drag-scrub —
     same "bigger hit-area than visible affordance" convention as #controls */
  height: 4px;
  box-sizing: content-box;
  padding: 14px 0;
  background: var(--track-fill);
  background-clip: content-box;
  border-radius: 999px;
  touch-action: none;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .2s linear;
}
.time-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--dim);
  margin-top: 6px;
}

.seek-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(0,0,0,.4);
  font-size: min(15vw, 64px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease;
}
.seek-flash.show {
  opacity: 1;
  transition: opacity .08s ease;
}

#audio-player { display: none; }