/* Controls shared by the browser decoder and the compatibility decoder. */
.vod-shell { overflow: hidden; color: #fff; font-family: inherit; }
.vod-stage, .vod-engine-host { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vod-stage .vod-native-video, .vod-engine-host video, .vod-engine-host canvas { width: 100%; height: 100%; object-fit: contain; }
.vod-interface { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.vod-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; background: rgba(0,0,0,.35); font-size: clamp(15px,2vw,19px); }
.vod-message[hidden], .vod-retry[hidden] { display: none; }
.vod-retry { pointer-events: auto; border: 0; background: var(--accent, #05a9dc); color: #fff; padding: 13px 25px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
.vod-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 46px max(22px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); background: linear-gradient(transparent,rgba(0,0,0,.9)); pointer-events: auto; transition: opacity .18s ease; }
.vod-controls-hidden .vod-controls { opacity: 0; pointer-events: none; }
.vod-controls-hidden .vod-title, .vod-controls-hidden > .lp-back { opacity: 0; pointer-events: none; }
.vod-shell > .lp-back { top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); }
.vod-shell .vod-title { z-index: 4; }
.vod-buttons { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.vod-buttons button { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 13px; font-weight: 650; padding: 0 10px; cursor: pointer; }
.vod-buttons button:hover, .vod-buttons button:focus-visible { background: rgba(255,255,255,.25); }
.vod-buttons button:focus-visible, .vod-seek:focus-visible, .vod-retry:focus-visible { outline: 2px solid var(--accent,#05a9dc); outline-offset: 3px; }
.vod-buttons button:disabled { opacity: .45; cursor: default; }
.vod-buttons svg { width: 23px; height: 23px; fill: currentColor; }
.vod-time { font-variant-numeric: tabular-nums; font-size: 13px; margin-left: 5px; white-space: nowrap; }
.vod-volume-group { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vod-volume { width: 85px; height: 30px; accent-color: var(--accent,#05a9dc); cursor: pointer; }
.vod-fullscreen { margin-left: 0; }
.vod-seek { display: block; width: 100%; height: 28px; margin: 0; padding: 0; accent-color: var(--accent,#05a9dc); cursor: pointer; touch-action: pan-y; }
.vod-seek:disabled { opacity: .45; cursor: default; }
.vod-expanded { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; z-index: 9999 !important; }
.vod-shell:fullscreen { width: 100%; height: 100%; background: #000; }
@media (max-width: 600px) {
  .vod-controls { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .vod-buttons { gap: 5px; }
  .vod-buttons button { min-width: 40px; padding: 0 7px; }
  .vod-time { font-size: 11px; margin-left: 2px; }
  .vod-volume { display: none; }
  .vod-volume-group { gap: 0; }
  .vod-shell .vod-title { left: 70px; right: 15px; font-size: 14px; top: max(27px, env(safe-area-inset-top)); }
}
@media (max-width: 370px) { .vod-buttons button { min-width: 32px; padding: 0 5px; font-size: 11px; } .vod-buttons { gap: 3px; } .vod-time { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .vod-controls { transition: none; } }