/* Shared song-player styles for player.js: waveform row, play/pause/restart icons and the
   synced-lyrics prompter. Loaded by /mp3-tracks, the home page (after mp3-tracks/styles.css)
   and is-back/gameplay's jukebox. */

/* Waveform preview always takes its own full-width line under the label/status row. */
.mp3-wave-wrap { position: relative; display: flex; align-items: center; gap: 0.5rem; flex: 1 1 100%; flex-wrap: wrap; }

/* Tucked above the play/reset/wave row via absolute positioning (out of flex flow) rather than
   as a flex child, so it never pushes that row onto a second line — sits with a small gap above
   its own right edge, not flush against it. Faded by default; lights up while the instrumental
   is the active track. */
.mp3-wave-instrumental-btn {
  position: absolute;
  top: -1.7rem;
  right: 0;
  padding: 0.1rem 0.5rem;
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: #00ffcc;
  background: transparent;
  border: 1px solid rgba(0,255,204,0.4);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mp3-wave-instrumental-btn:hover { opacity: 0.7; }
.mp3-wave-instrumental-btn.active {
  opacity: 1;
  background: rgba(0,255,204,0.15);
  box-shadow: 0 0 8px rgba(0,255,204,0.5);
}
.mp3-wave-instrumental-btn:disabled { cursor: default; }

/* Extra headroom above the row so the tucked-in toggle doesn't overlap the tag chips above it. */
.mp3-card-wave.has-instrumental { margin-top: 1.85rem; }
.mp3-wave-playbtn {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #00ffcc;
  color: #00ffcc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mp3-wave-playbtn:hover { background: rgba(0,255,204,0.15); }

/* Hidden until the playhead moves off the very start (toggled via .visible in JS) — there's
   nothing to restart before then. */
.mp3-wave-resetbtn {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #00ffcc;
  color: #00ffcc;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mp3-wave-resetbtn.visible { display: flex; }
.mp3-wave-resetbtn:hover { background: rgba(0,255,204,0.15); }
.mp3-reset-icon { display: block; width: 8px; height: 8px; background: currentColor; border-radius: 1.5px; }

/* Drawn as CSS shapes rather than the ▶/⏸ Unicode glyphs — a real box/triangle centers
   exactly by its own geometry, unlike a text glyph whose vertical position varies by font. */
.mp3-play-icon {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px; /* optical centering — a right-pointing triangle's mass sits left of its own bounding box */
}
.mp3-pause-icon { display: flex; gap: 2.5px; }
.mp3-pause-icon span { display: block; width: 2.5px; height: 9px; background: currentColor; }
/* A plain sibling of .mp3-wave (not a child of it) that WaveSurfer.create() never touches,
   so the overlay below survives WaveSurfer taking over .mp3-wave's own contents. This is now
   the flex:1 item in .mp3-wave-wrap's row instead of .mp3-wave itself. */
.mp3-wave-track { position: relative; flex: 1; min-width: 0; }
.mp3-wave { width: 100%; cursor: pointer; }
/* "00:00 / 03:45" overlaid on the waveform's own top-left corner — pointer-events:none so
   clicks pass straight through to the waveform underneath for seeking. */
.mp3-wave-time {
  position: absolute;
  top: 5px;
  left: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: #ccc;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
/* Before playback starts it shows just the song's length — centered vertically on the wave
   there; once playing it moves up to the top-left corner above. */
.mp3-wave-time.is-at-start { top: 50%; transform: translateY(-50%); }

/* The always-visible player on a card in the main list (as opposed to inside the admin
   editor's upload rows), sitting between the tag chips and the download buttons. */
/* Scoped to the track card (rather than changing .pc-card-meta globally, which is shared
   with the tag-management list) so title→tags matches the tags→waveform gap above. */
.mp3-card-main .pc-card-meta { margin-top: 0.5rem; }
.mp3-card-wave { margin: 0.5rem 0 0.75rem; }

/* Placed after the base .mp3-wave-instrumental-btn/.mp3-card-wave.has-instrumental rules
   above (not up with the page's other mobile overrides) so it actually wins the cascade —
   an earlier attempt at this same override sat before those base rules in the file and,
   despite matching on mobile, lost to them since equal-specificity rules resolve by source
   order. On desktop this button is pulled out of flow (position: absolute) and tucked above
   the wave row via a negative top offset — margin-top on .has-instrumental just shifts that
   offset along with it, so the gap above it is never actually visible/adjustable as real
   spacing. On mobile, put it back in normal flow as its own full-width row above the
   play/wave controls instead, so a real margin actually shows between it and the tags. */
@media (max-width: 767px) {
  .mp3-wave-instrumental-btn {
    position: static;
    flex: 0 0 100%;
    text-align: center;
    margin: 0 0 0.5rem;
  }
  .mp3-card-wave.has-instrumental { margin-top: 0.75rem; }
}

/* ── Synced lyrics (karaoke-style, ported from the Godot game) ─────────────────────────
   Rendered as a sibling of .mp3-card-body (see cardLyricsHtml), not nested in the content
   column beside the thumbnail, so it's centered across the full card width — on mobile
   especially, centering it only within the narrower content column would visibly skew it off
   from the card's true center. .mp3-lyrics takes up no space at all until playback actually
   starts (.active), then expands to hold LYRICS_ROWS stacked rows — mirroring the game's
   fixed set of KARAOKE_LINES_AT_ONCE row positions that phrases round-robin across, so the
   previous line or two keep fading out below/above while a new one comes in. Each row's own
   .mp3-lyrics-pregap is the web equivalent of PreLineGradient: a soft glow that approaches
   from the left toward (but stopping short of) that row's text, then fades — never sitting
   on top of the lyrics themselves, since a row only ever shows one or the other. */
.mp3-lyrics {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}
.mp3-lyrics.active {
  max-height: 13rem;
  opacity: 1;
  margin-top: 1.1rem;
}
.mp3-lyrics-row {
  position: relative;
  min-height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Colored like PreLineGradient's own Gradient_countdown resource (a light steel blue, not
   the site's teal accent) — transparent tail on the left, solid near the leading (right) edge.
   Width must match LYRICS_GRADIENT_BAR_WIDTH_PX in app.js, which positions this box so the
   leading edge — not the CSS "left" — is the point that actually approaches the text. */
.mp3-lyrics-pregap {
  position: absolute;
  top: 50%;
  left: 0;
  width: 56px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(82, 140, 199, 0.95) 85%, rgba(82, 140, 199, 0.95));
  box-shadow: 0 0 8px rgba(82, 140, 199, 0.7);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  will-change: transform, opacity;
}
.mp3-lyrics-text {
  font-family: 'Playfair Display', 'Anton', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}
@media (min-width: 768px) {
  .mp3-lyrics-text { font-size: 1.6rem; }
  .mp3-lyrics-row { min-height: 2.5rem; }
  .mp3-lyrics.active { max-height: 15rem; }
}
/* A dark backdrop behind the (white) text, like a subtitle plate, so it stays readable over
   the waveform/card background regardless of what's behind it. */
.mp3-lyrics-text.visible {
  opacity: 1;
  transform: translateY(0);
  background: rgba(0, 0, 0, 0.55);
  padding: 0.15rem 0.6rem;
  border-radius: 6px;
}
/* Letters light up instantly, exactly when their time arrives. No color/text-shadow transition:
   an ease makes each letter visibly lag the singing, and animating text-shadow on several
   letters at once is costly on phones. */
.mp3-lyrics-letter { color: #666; }
/* Fill matches Godot's LYRICS_COLOR_WHITE / background-vocal green (kept white for
   readability); the glow is the pre-line gradient's light blue, so the "energy" approaching
   the line looks like the one lighting it. The leading (most recently lit) letter glows
   brighter, like a moving karaoke highlight. */
.mp3-lyrics-letter.is-sung { color: #fff; text-shadow: 0 0 5px #7fb4e8; }
.mp3-lyrics-letter.is-leading { text-shadow: 0 0 10px #7fb4e8, 0 0 3px #7fb4e8; }
.mp3-lyrics-text.is-bg .mp3-lyrics-letter.is-sung { color: #a7efab; text-shadow: 0 0 5px #a7efab; }
.mp3-lyrics-text.is-bg .mp3-lyrics-letter.is-leading { text-shadow: 0 0 10px #a7efab, 0 0 3px #a7efab; }