.player { position: relative; border-radius: var(--r-panel); overflow: hidden; background: #000; }
.player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

.player__big {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; background: rgba(12, 27, 61, 0.28); color: #fff; cursor: pointer;
}
.player__big svg { width: 4.5rem; height: 4.5rem; padding: 0.35rem; border-radius: 50%; background: var(--gold); color: var(--ink-strong); }
.player__big:hover { background: rgba(12, 27, 61, 0.14); }
.player.is-playing .player__big { display: none; }

.player__bar {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0; transition: opacity 180ms ease;
}
.player:hover .player__bar,
.player:focus-within .player__bar,
.player:not(.is-playing) .player__bar { opacity: 1; }

.player__btn {
  flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
}
.player__btn:hover { background: rgba(255, 255, 255, 0.16); }
.player__btn svg { width: 1.25rem; height: 1.25rem; }

.player__seek {
  flex: 1; height: 1.25rem; padding: 0; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) var(--played, 0%), rgba(255, 255, 255, 0.35) var(--played, 0%));
}
.player__seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.player__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--gold); }
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px;
  border-radius: 50%; background: #fff;
}
.player__seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.player__seek:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.player__time { flex: none; font-family: var(--font-ui); font-size: var(--t-micro); color: #fff; font-variant-numeric: tabular-nums; }

@media (max-width: 30rem) { .player__time { display: none; } }
@media (prefers-reduced-motion: reduce) { .player__bar { transition: none; } }