/* 通用视频播放器：点击播放（卡片）与滚动焦点播放（详情）。 */
.media-player {
  display: block;
  min-width: 0;
  background: #141126;
}
.media-frame {
  position: relative;
  aspect-ratio: var(--media-ratio, 16 / 10);
  background: #0d0a1c;
  overflow: hidden;
}
.media-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0d0a1c;
}
.media-bigplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #ffffff3d;
  background: #0b0716c7;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 30px #00000066;
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.media-bigplay svg { width: 20px; height: 20px; margin-left: 3px; }
.media-bigplay:hover { background: #1a1230d9; transform: translate(-50%, -50%) scale(1.05); }
.media-player.is-playing .media-bigplay { opacity: 0; pointer-events: none; }

.media-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  background: #17122a;
  border-top: 1px solid #ffffff10;
}
.media-bar button { font: inherit; cursor: pointer; }
.media-toggle {
  flex: none;
  border: 0;
  background: none;
  color: #ded7f3;
  font-size: 11px;
  padding: 4px 2px;
  min-width: 30px;
  text-align: center;
}
.media-toggle:hover { color: #fff; }
.media-seek {
  flex: 1;
  min-width: 36px;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, #bca4ff 0%, #bca4ff var(--played, 0%), #ffffff2b var(--played, 0%), #ffffff2b 100%);
  cursor: pointer;
}
.media-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #efe8ff;
  box-shadow: 0 0 0 2px #bca4ff55;
}
.media-seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #efe8ff;
}
.media-time {
  flex: none;
  font-size: 10px;
  color: #b9b2cd;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.media-sound, .media-full {
  flex: none;
  border: 1px solid #ffffff26;
  background: #0d0918;
  color: #e8e2f8;
  font-size: 10px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.media-sound:hover, .media-full:hover { border-color: #bca4ff66; color: #fff; }
.media-sound[aria-pressed="true"] { border-color: #bca4ff80; color: #fff; }

.media-player.is-empty .media-frame video,
.media-player.is-empty .media-bigplay,
.media-player.is-empty .media-bar { display: none; }
.media-player.is-empty .media-frame { margin-bottom: 40px; }
.media-pending {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
  background: radial-gradient(ellipse at 60% 30%, #9565f421, transparent 70%), #141126;
}
.media-pending svg { width: 36px; height: 36px; color: var(--cold); }
.media-player.is-empty .media-pending { display: flex; }

.media-player:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #000;
}
.media-player:fullscreen .media-frame {
  flex: 1;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
}
.media-player:fullscreen video { height: 100%; object-fit: contain; }
.media-player:fullscreen .media-bar { background: #0b0716; }

@media (max-width: 650px) {
  .media-bar { gap: 6px; padding: 0 8px; height: 38px; }
  .media-time { display: none; }
  .media-sound, .media-full { padding: 5px 7px; }
  .media-player.is-empty .media-frame { margin-bottom: 38px; }
}