/* media-player.css — the in-page file player (media-player.js; used in the
   fan-art viewer for video / audio). The same look as the live player
   (live.css): a dark stage with the controls in a smoked-glass dock
   (ui.css .surface-smoke) floating over its bottom edge, so the card is one
   dark object in either theme. The scrubber is a thin line until hovered and
   then thicker with a bubble and a solid knob; audio-only is the record
   turntable with ripples. The mp- class prefix does not collide with lv-, so
   both can live on one page.

   Size: the host bounds the card with --mp-max-w / --mp-max-h; video width
   follows the clip's ratio (--mp-ar, written by media-player.js). */

.mp-card {
  width: min(var(--mp-max-w, min(90vw, 960px)), calc(var(--mp-max-h, 72vh) * var(--mp-ar, 1.7778)));
  border-radius: var(--r-lg);
  background: #0b0d14;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  overflow: hidden;
  position: relative; z-index: 1;
  text-align: left;
  color: #eef2fa;
  /* 控制条高度 58px（进度条 16 + 按钮 32 + 内边距 10）加下边距 8px；音频画面与
     大播放键按它上移，居中在控制条以上的区域。控制条尺寸变化时同步修改。 */
  --mp-dock-h: 66px;
}
.mp-card[data-kind="audio"] {
  width: min(var(--mp-max-w, 90vw), 560px, calc(var(--mp-max-h, 72vh) * 1.6));
}

/* ── 舞台 ── */
.mp-stage { position: relative; aspect-ratio: 16 / 9; background: #0b0d14; overflow: hidden; }
.mp-card[data-kind="audio"] .mp-stage { aspect-ratio: 16 / 10; }
.mp-stage video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; display: block; }
.mp-card[data-kind="video"] .mp-stage video { cursor: pointer; }
.mp-card[data-kind="audio"] .mp-stage video { visibility: hidden; pointer-events: none; }

.mp-audio-panel {
  position: absolute; inset: 0; padding-bottom: var(--mp-dock-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: #eef1ff;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(var(--blue-rgb), .35), transparent 70%),
    linear-gradient(180deg, #121a2c, #0b0d14);
}
.mp-ripple { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mp-disc {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 calc(2px + var(--mp-level, 0) * 6px) rgba(var(--blue-rgb), calc(.35 + var(--mp-level, 0) * .4)), 0 10px 30px rgba(0,0,0,.4);
  overflow: hidden; transform: scale(calc(1 + var(--mp-level, 0) * .06));
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.mp-disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-card[data-viz="1"] .mp-disc img { animation: mp-spin 12s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
.mp-audio-title { position: relative; font-size: 15px; font-weight: 700; letter-spacing: .3px; max-width: 80%; text-align: center; }
.mp-audio-sub { position: relative; font-size: 12px; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .mp-card[data-viz="1"] .mp-disc img { animation: none; } }

/* ── 遮罩：载入 / 大播放键 / 出错 ── */
.mp-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; color: #eef1ff;
}
.mp-overlay > * { display: none; }
.mp-card[data-state="loading"] .mp-ov-loading { display: block; font-size: 13px; opacity: .8; }
.mp-card[data-state="ready"] .mp-play { display: inline-flex; }
.mp-card[data-state="error"] .mp-ov-error { display: block; text-align: center; padding: 0 24px; }
.mp-ov-big { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.mp-ov-sub { font-size: 13px; opacity: .8; line-height: 1.6; margin-top: 4px; }
.mp-play {
  pointer-events: auto; cursor: pointer;
  width: 64px; height: 64px; border-radius: 50%; border: 0;
  align-items: center; justify-content: center;
  /* 白底圆键上的三角固定取深蓝：--blue2 在深色主题下是浅蓝，落在白底上看不见 */
  background: rgba(255,255,255,.92); color: #2b6f9e;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base);
}/* 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) {

  .mp-play:hover { transform: scale(1.06); background: #fff; }
}
.mp-play:active { transform: var(--ui-press, scale(.94)); }
.mp-play svg { margin-left: 3px; }
/* 音频的大播放键压在唱片中心 */
.mp-card[data-kind="audio"] .mp-overlay { bottom: var(--mp-dock-h); }
.mp-card[data-kind="audio"] .mp-play { width: 56px; height: 56px; }

/* ── 控制条 ──
   烟色玻璃浮在画面底部，四周各留 8px；圆钮取 ui.css .btn-icon，按 .surface-smoke
   的深色令牌着色，平时透明，悬停时才显出底色。 */
.mp-dock {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3;
  --surface-smoke-pad: 4px 8px 6px;
  --surface-smoke-r: calc(var(--r-lg) - 8px);
  --btn-icon-bg: transparent;
  transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease;
}
/* .btn-icon.is-sm（ui.css）把 --btn-h 定为 28px，这里按控制条的 32px 覆盖 */
.mp-dock .btn-icon.is-sm { --btn-h: 32px; }
/* 视频播放中指针静止时淡出（media-player.js wake()），键盘焦点在条内时保持显示 */
.mp-card[data-kind="video"][data-playing="1"][data-idle="1"] .mp-dock:not(:has(:focus-visible)) {
  opacity: 0; transform: translateY(6px); pointer-events: none;
}
.mp-card[data-kind="video"][data-playing="1"][data-idle="1"] .mp-stage { cursor: none; }

.mp-seek { padding: 0 6px; --mp-bar-h: 3px; position: relative; }
.mp-track { position: relative; height: 16px; cursor: pointer; touch-action: none; outline: none; }
/* Split like .lv-seek-track in live.css — see the note there. */
.mp-track:focus-visible, .mp-track.dragging { --mp-bar-h: 5px; }
@media (hover: hover) { .mp-track:hover { --mp-bar-h: 5px; } }
.mp-track::before, .mp-buffered, .mp-fill {
  position: absolute; left: 0; top: calc(8px - var(--mp-bar-h) / 2); height: var(--mp-bar-h);
  border-radius: 3px; transition: top .12s, height .12s;
}
.mp-track::before { content: ""; right: 0; background: rgba(255, 255, 255, .2); }
.mp-buffered { width: 0; background: rgba(255, 255, 255, .32); transition: top .12s, height .12s, width .3s linear; }
.mp-fill { width: 0; background: var(--on-dark-accent); transition: top .12s, height .12s, width .25s linear; }
.mp-knob {
  position: absolute; top: 2px; left: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  transform: scale(0); transition: transform var(--dur-fast), left .25s linear;
}
.mp-track.dragging .mp-fill, .mp-track.dragging .mp-knob { transition: transform var(--dur-fast); }
.mp-track:hover .mp-knob, .mp-track:focus-visible .mp-knob, .mp-track.dragging .mp-knob { transform: scale(1); }
@media (pointer: coarse) { .mp-knob { transform: scale(1); } }
.mp-tip {
  position: absolute; bottom: 22px; left: 0; transform: translateX(-50%);
  padding: 4px 8px; border-radius: var(--r-xs); white-space: nowrap; pointer-events: none;
  font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(10, 14, 24, .9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  opacity: 0; transition: opacity var(--dur-fast);
}
.mp-tip.show { opacity: 1; }
.mp-track:focus-visible { box-shadow: 0 0 0 2px rgba(168, 210, 244, .5); border-radius: 4px; }

.mp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-left { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.mp-controls { display: flex; align-items: center; gap: 4px; }
.mp-time {
  flex-shrink: 0; margin-left: 8px;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--on-dark-fg2);
}
.mp-elapsed { color: var(--on-dark-fg); }
.mp-title-wrap { min-width: 0; display: flex; flex-direction: column; margin-left: 12px; }
.mp-title { font-size: 13px; color: var(--on-dark-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-sub { font-size: 11px; color: var(--on-dark-fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-title:empty { display: none; }
.mp-dock .btn-icon[hidden] { display: none; }
.mp-dock .btn-icon span, .mp-dock .btn-icon svg { display: block; }
.mp-i-pause, .mp-i-muted { display: none !important; }
.mp-card[data-playing="1"] .mp-i-play { display: none !important; }
.mp-card[data-playing="1"] .mp-i-pause { display: block !important; }
.mp-card[data-muted="1"] .mp-i-vol { display: none !important; }
.mp-card[data-muted="1"] .mp-i-muted { display: block !important; }

.mp-vol { display: flex; align-items: center; gap: 2px; }
/* input 高 16px 作为命中区（与 .mp-track 相同），3px 的条由轨道伪元素绘制。
   --mp-vol 为 0 到 1 的音量比例；滑块中心的行程是 6px 到 (宽度 - 6px)，
   填充末端取同一位置，不按整条宽度换算。 */
.mp-volume {
  --mp-vol-x: calc(6px + (100% - 12px) * var(--mp-vol, 1));
  -webkit-appearance: none; appearance: none;
  width: 76px; height: 16px; border-radius: 4px;
  background: transparent;
  outline: none; cursor: pointer; margin: 0 4px; padding: 0;
}
.mp-volume::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--on-dark-fg) 0 var(--mp-vol-x), rgba(255, 255, 255, .22) var(--mp-vol-x) 100%);
}
.mp-volume::-moz-range-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--on-dark-fg) 0 var(--mp-vol-x), rgba(255, 255, 255, .22) var(--mp-vol-x) 100%);
}
.mp-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; margin-top: -4.5px;
  background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  opacity: 0; transform: scale(0); transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.mp-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; opacity: 0; transition: opacity var(--dur-fast); }
.mp-vol:hover .mp-volume::-webkit-slider-thumb, .mp-volume:focus-visible::-webkit-slider-thumb, .mp-volume:active::-webkit-slider-thumb { opacity: 1; transform: scale(1); }
.mp-vol:hover .mp-volume::-moz-range-thumb, .mp-volume:focus-visible::-moz-range-thumb, .mp-volume:active::-moz-range-thumb { opacity: 1; }
@media (pointer: coarse) { .mp-volume::-webkit-slider-thumb { opacity: 1; transform: scale(1); } .mp-volume::-moz-range-thumb { opacity: 1; } }
.mp-volume:focus-visible { box-shadow: 0 0 0 2px rgba(168, 210, 244, .5); }
.mp-card[data-muted="1"] .mp-volume { opacity: .45; }

/* Buffering: the scrubber fill breathes */
.mp-card[data-buffering="1"] .mp-fill { animation: mp-breathe 1s ease-in-out infinite; }
@keyframes mp-breathe { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .mp-card[data-buffering="1"] .mp-fill { animation: none; } }

/* Fullscreen: the stage fills the screen; the dock keeps floating over its bottom edge */
.mp-card:fullscreen, .mp-card.is-fs { width: 100% !important; height: 100%; border-radius: 0; background: #000; display: flex; flex-direction: column; }
.mp-card:fullscreen .mp-stage, .mp-card.is-fs .mp-stage { flex: 1; aspect-ratio: auto !important; }
.mp-card:fullscreen .mp-dock, .mp-card.is-fs .mp-dock { left: 50%; right: auto; bottom: 16px; width: min(960px, calc(100% - 32px)); transform: translateX(-50%); }
.mp-card:is(:fullscreen, .is-fs)[data-kind="video"][data-playing="1"][data-idle="1"] .mp-dock:not(:has(:focus-visible)) { transform: translate(-50%, 6px); }

@media (max-width: 600px) {
  .mp-card[data-kind="audio"] { width: min(var(--mp-max-w, 90vw), calc(var(--mp-max-h, 72vh) * 1.3333)); }
  .mp-card[data-kind="audio"] .mp-stage { aspect-ratio: 4 / 3; }
  .mp-volume { display: none; }      /* Phones have hardware volume keys, so only mute stays */
  .mp-disc { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) { .mp-dock { transition: none; } }