.html5-video-container {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  outline: none;
}
.html5-video { display: block; width: 100%; height: 100%; object-fit: contain; }
.five-controls {
  position: absolute;
  inset: auto 0 0;
  padding: 42px 18px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.92));
  opacity: 1;
  transition: opacity .22s ease;
}
.html5-video-container.controls-hidden .five-controls { opacity: 0; pointer-events: none; }
.five-seek { width: 100%; accent-color: #e7b65c; cursor: pointer; }
.five-row { display: flex; align-items: center; gap: 8px; min-height: 46px; }
.five-spacer { flex: 1; }
.five-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 999px;
  min-width: 42px;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 21px;
  cursor: pointer;
}
.five-button:hover, .five-button:focus-visible { background: rgba(231,182,92,.22); outline: 2px solid #e7b65c; }
.five-play { background: #e7b65c; color: #111; font-size: 25px; }
.five-time { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.five-volume { width: 92px; accent-color: #e7b65c; }
.five-center-play {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 82px; height: 82px; border-radius: 50%; border: 0;
  background: rgba(231,182,92,.92); color: #111; font-size: 40px; cursor: pointer;
  transition: opacity .18s, transform .18s;
}
.html5-video-container.is-playing .five-center-play { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.85); }
@media (max-width: 680px) {
  .five-controls { padding: 35px 8px 6px; }
  .five-row { gap: 2px; }
  .five-button { min-width: 38px; padding: 6px; font-size: 18px; }
  .five-volume { display: none; }
  .five-time { font-size: 11px; }
}