/* live.css — the in-page live player (requires theme.css).
   One player card: a 16:9 stage with a status/control bar underneath. Three
   layers stack on the stage: the <video>, the audio-only panel (a record
   turntable plus bouncing bars) and the status overlay (loading / offline /
   click to start / error). The card switches between them with data-state /
   data-mode. */

.lv-card {
  max-width: var(--w-page);
  margin: 0 auto;
  border-radius: var(--r-xl);
  background: var(--card);
  border: var(--bw) solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  position: relative; z-index: 1;
}

/* ── Stage ── */
.lv-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b0d14;
  overflow: hidden;
}
.lv-stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: #000;
  display: block;
}
/* Audio only: the picture gives way to the avatar panel; the <video> stays for sound but takes no space. */
.lv-card[data-mode="audio"] .lv-stage video { visibility: hidden; pointer-events: none; }

.lv-audio-panel {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(var(--blue-rgb), .28), transparent 70%),
    linear-gradient(180deg, #121527, #0b0d14);
  color: #eef1ff;
}
.lv-card[data-mode="audio"] .lv-audio-panel { display: flex; }
.lv-audio-disc {
  width: 132px; height: 132px; border-radius: 50%;
  padding: 5px;
  background: conic-gradient(from 0deg, rgba(var(--blue-rgb), .9), rgba(var(--bow-rgb), .9), rgba(var(--blue-rgb), .9));
  box-shadow: 0 12px 40px rgba(var(--blue-rgb), .35);
}
.lv-audio-disc img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid #0b0d14;
}
.lv-card[data-state="playing"][data-mode="audio"] .lv-audio-disc {
  animation: lv-spin 14s linear infinite;
}
.lv-card[data-state="playing"][data-mode="audio"] .lv-audio-disc img { animation: lv-spin 14s linear infinite reverse; }
@keyframes lv-spin { to { transform: rotate(360deg); } }

/* The ripple canvas fills the panel, with the record and the title on top. */
.lv-audio-ripple { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lv-audio-disc, .lv-audio-title { position: relative; }
/* Driven by sound (live.js sets data-viz="1"): the record's halo brightens with loudness. */
.lv-card[data-viz="1"][data-mode="audio"] .lv-audio-disc {
  box-shadow: 0 12px calc(40px + 36px * var(--lv-level, 0))
              rgba(var(--blue-rgb), calc(.35 + .45 * var(--lv-level, 0)));
}
.lv-audio-title { font-size: 14px; letter-spacing: .3px; opacity: .85; max-width: 80%; text-align: center; }

/* ── Overlays ── */
.lv-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 18, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #eef1ff;
  text-align: center;
  padding: 24px;
}
.lv-overlay > div { display: none; flex-direction: column; align-items: center; gap: 10px; }
.lv-card[data-state="stale"]   .lv-ov-stale,
.lv-card[data-state="loading"] .lv-ov-loading,
.lv-card[data-state="offline"] .lv-ov-offline,
.lv-card[data-state="ready"]   .lv-ov-ready,
.lv-card[data-state="error"]   .lv-ov-error { display: flex; }
.lv-card[data-state="playing"] .lv-overlay { display: none; }

.lv-ov-big { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.lv-ov-sub { font-size: 13px; opacity: .8; line-height: 1.6; }
.lv-ov-sub a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); text-decoration: none; }

.lv-play {
  width: 72px; height: 72px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--accent-gradient, linear-gradient(135deg, var(--blue), var(--blue2)));
  color: var(--on-accent, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(var(--blue-rgb), .45);
  transition: transform var(--dur-base);
  touch-action: manipulation;
}
.lv-play svg { margin-left: 4px; }/* Scoped to real cursors: on a touch screen :hover latches onto the last
   thing tapped and stays there until you tap something else, so a card you
   opened and closed sat there still lifted and glowing. Only the rules that
   move or light something up are guarded — a colour-only :hover latching is
   invisible, and wrapping those too would be 100+ rules of noise. */
@media (hover: hover) {

  .lv-play:hover { transform: scale(1.06); }
}
.lv-play:active { transform: scale(.96); }


/* A faint play glyph in the middle while paused */
.lv-card[data-state="playing"][data-playing="0"][data-mode="video"] .lv-stage::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(8, 10, 18, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpolygon points='8 4 20 12 8 20 8 4'/%3E%3C/svg%3E") center / 26px no-repeat;
  pointer-events: none;
}

/* ── Timeshift scrubber ── */
.lv-seek {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 0;
  --lv-bar-h: 3px;
  position: relative; z-index: 3;      /* the bubble has to sit above the picture */
}
.lv-seek[hidden] { display: none; }
.lv-seek-track {
  position: relative; flex: 1; height: 16px; cursor: pointer;
  touch-action: none; outline: none;
}
/* On hover / drag the track thickens and the knob appears (as YouTube does; otherwise only a thin line).
   The :hover half is split out behind (hover: hover): on touch it latched after
   a tap and the bar just stayed fat. Keeping :focus-visible and .dragging
   outside matters — gating the group as a whole would drop the keyboard focus
   ring and the during-drag thickening on touch, where the drag is the point. */
.lv-seek-track:focus-visible, .lv-seek-track.dragging { --lv-bar-h: 5px; }
@media (hover: hover) { .lv-seek-track:hover { --lv-bar-h: 5px; } }
.lv-seek-track::before, .lv-seek-fill {
  position: absolute; top: calc(8px - var(--lv-bar-h) / 2); height: var(--lv-bar-h);
  border-radius: 3px; transition: top .12s, height .12s;
}
/* The baseline is the whole scrubbable buffer (earliest buffered on the left, live edge on the right); the fill runs to the playhead. */
.lv-seek-track::before { content: ""; left: 0; right: 0; background: rgba(var(--blue-rgb), .28); }
.lv-seek-fill { left: 0; width: 100%; background: var(--blue2); transition: top .12s, height .12s, width .25s linear; }
.lv-seek-knob {
  position: absolute; top: 2px; left: 100%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--blue2);      /* solid */
  box-shadow: 0 1px 4px rgba(var(--blue-rgb), .35);
  transform: scale(0); transition: transform var(--dur-fast), left .25s linear;
}
/* follows the finger while dragging, with no transition. */
.lv-seek-track.dragging .lv-seek-fill, .lv-seek-track.dragging .lv-seek-knob { transition: transform var(--dur-fast); }
.lv-seek-track:hover .lv-seek-knob, .lv-seek-track:focus-visible .lv-seek-knob,
.lv-seek-track.dragging .lv-seek-knob { transform: scale(1); }
@media (pointer: coarse) { .lv-seek-knob { transform: scale(1); } }
/* Hover bubble: elapsed time it would land on above, how far behind live below. */
.lv-seek-tip {
  position: absolute; bottom: 20px; left: 0; transform: translateX(-50%);
  padding: 3px 8px; border-radius: var(--r-xs); white-space: nowrap; pointer-events: none;
  font-size: 11px; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--surface-strong); border: var(--bw) solid var(--border);
  box-shadow: 0 2px 8px rgba(15, 26, 46, .12);
  opacity: 0; transition: opacity var(--dur-fast);
}
.lv-seek-tip.show { opacity: 1; }
.lv-seek-tip small { display: block; color: var(--text3); font-size: 10px; }
.lv-seek-time {
  flex-shrink: 0; min-width: 42px; text-align: right;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text3);
}
.lv-seek-elapsed { text-align: left; min-width: 0; }
.lv-seek-elapsed:empty { display: none; }
.lv-card[data-live="1"] .lv-seek-time:not(.lv-seek-elapsed) { color: var(--live-fg); font-weight: 700; }
/* Behind live: the status dot greys out and 回到直播 appears */
.lv-card[data-live="0"][data-state="playing"] .lv-dot { background: var(--text3); animation: none; box-shadow: none; }
#lvLive { flex-shrink: 0; --btn-outline-fg: var(--live-fg); --btn-outline-border: rgba(var(--live-rgb), .45); --btn-outline-bg: rgba(var(--live-rgb), .08); --btn-outline-fg-hover: var(--live-fg); --btn-outline-bg-hover: rgba(var(--live-rgb), .16); --btn-outline-border-hover: rgba(var(--live-rgb), .6); }
.lv-card:fullscreen .lv-seek { background: rgba(8, 10, 18, .85); padding-bottom: 2px; }

/* ── Bottom bar ── */
.lv-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.lv-status { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text2); }
.lv-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--text3);
}
.lv-card[data-state="ready"] .lv-dot,
.lv-card[data-state="playing"] .lv-dot {
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(var(--live-rgb), .22);
  animation: lv-beat 2s ease-in-out infinite;
}
/* 与 replays.css replays-live-beat、nav.css nav-live-beat 同一节奏 */
@keyframes lv-beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .7; } }

.lv-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.lv-controls { display: flex; align-items: center; gap: 8px; }

/* Play/pause and mute each carry two icons, one shown per state */
.lv-i-pause, .lv-i-muted { display: none !important; }
.lv-card[data-playing="1"] .lv-i-play  { display: none !important; }
.lv-card[data-playing="1"] .lv-i-pause { display: block !important; }
.lv-card[data-muted="1"] .lv-i-vol   { display: none !important; }
.lv-card[data-muted="1"] .lv-i-muted { display: block !important; }

/* Volume: button + thin slider */
.lv-vol { display: flex; align-items: center; gap: 2px; }
#lvVolume {
  -webkit-appearance: none; appearance: none;
  width: 84px; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--blue2) 0 var(--lv-vol, 100%), var(--border) var(--lv-vol, 100%) 100%);
  outline: none; cursor: pointer; margin: 0 6px;
}
/* The knob works like the scrubber: solid, hidden by default, appearing on hover / drag / keyboard focus (always shown on touch). */
#lvVolume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue2); border: 0;
  box-shadow: 0 1px 4px rgba(var(--blue-rgb), .35);
  opacity: 0; transform: scale(0); transition: opacity var(--dur-fast), transform var(--dur-fast);
}
#lvVolume::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue2); border: 0;
  opacity: 0; transition: opacity var(--dur-fast);
}
.lv-vol:hover #lvVolume::-webkit-slider-thumb, #lvVolume:focus-visible::-webkit-slider-thumb,
#lvVolume:active::-webkit-slider-thumb { opacity: 1; transform: scale(1); }
.lv-vol:hover #lvVolume::-moz-range-thumb, #lvVolume:focus-visible::-moz-range-thumb,
#lvVolume:active::-moz-range-thumb { opacity: 1; }
@media (pointer: coarse) {
  #lvVolume::-webkit-slider-thumb { opacity: 1; transform: scale(1); }
  #lvVolume::-moz-range-thumb { opacity: 1; }
}
#lvVolume:focus-visible { box-shadow: 0 0 0 3px rgba(var(--blue-rgb), .2); }
.lv-card[data-muted="1"] #lvVolume { opacity: .45; }

/* Buffering: the status dot switches to breathing */
.lv-card[data-buffering="1"] .lv-dot { animation: lv-breathe 1s ease-in-out infinite; box-shadow: none; }
@keyframes lv-breathe { 50% { opacity: .3; } }

/* Fullscreen: the stage fills the screen with the controls pinned to the bottom */
.lv-card:fullscreen { border-radius: 0; background: #000; display: flex; flex-direction: column; }
.lv-card:fullscreen .lv-stage { flex: 1; aspect-ratio: auto; }
.lv-card:fullscreen .lv-bar { background: rgba(8, 10, 18, .85); color: #eef1ff; }
.lv-card:fullscreen .lv-status { color: #eef1ff; }
.lv-card:fullscreen .btn-icon { --btn-bare-fg: #eef1ff; --btn-bare-fg-hover: #fff; }

#lvQn { width: auto; --field-r: var(--r-pill); --field-fs: 13px; --field-pad: 5px 30px 5px 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 600px) {
  .lv-card { border-radius: var(--r-lg); }
  .lv-bar { padding: 8px 10px; }
  /* Phones have hardware volume keys, so the slider folds away and only mute stays */
  #lvVolume { display: none; }
  .lv-audio-disc { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-audio-disc, .lv-audio-disc img, .lv-dot { animation: none !important; }
}