.detail-trailer { margin-bottom: 20px; padding: 12px; border: 1px solid #344155; border-radius: 14px; background: #111827; }
.detail-trailer-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.detail-trailer button { min-height: 44px; padding: 8px 12px; background: #253149; color: white; border-radius: 8px; border: 0; }
#detailTrailerStatus { color: #b7c3d5; font-size: 14px; margin: 10px 0; }
#detailTrailerMedia iframe, #detailTrailerMedia video { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: black; }
#detailTrailerMedia a { display: block; padding: 12px 0; color: #9dd8ff; }
/* One player layout for browser and Capacitor. The iPhone orientation is changed
   by the native plugin; CSS never rotates the video surface. */
.player-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #000;
  overscroll-behavior: none;
  user-select: none;
}

.cinema-player-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  --subtitle-safe-area: clamp(52px, 8vh, 74px);
  --player-safe-top: max(0px, env(safe-area-inset-top));
  --player-safe-right: max(0px, env(safe-area-inset-right));
  --player-safe-bottom: max(0px, env(safe-area-inset-bottom));
  --player-safe-left: max(0px, env(safe-area-inset-left));
}

.player-modal-overlay.cinema-fullscreen,
.cinema-player-wrapper.cinema-fullscreen {
  background: #000;
}

.video-element {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000;
  object-fit: contain;
  object-position: center center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cinema-player-wrapper.aspect-cover .video-element {
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* ENSMovie is a replaced element: absolute left/right plus width:auto falls
   back to the iframe's HTML default of 300x150 instead of stretching. Give it
   explicit dimensions so the provider receives the real usable viewport on
   desktop, phones, tablets and TV. Keeping one geometry for both fit modes also
   prevents its settings menu from reflowing or jumping when host chrome hides. */
.cinema-player-wrapper.embed-active #playerEmbed {
  top: var(--player-safe-top) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--player-safe-left) !important;
  width: calc(100% - var(--player-safe-left) - var(--player-safe-right)) !important;
  height: calc(100% - var(--player-safe-top) - var(--player-safe-bottom)) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  transform: none !important;
}

.cinema-player-wrapper.aspect-contain .video-element {
  object-fit: contain;
}

.movie-copyright-watermark {
  position: absolute;
  z-index: 55;
  top: max(clamp(52px, 6vh, 72px), calc(env(safe-area-inset-top) + 48px));
  right: max(clamp(70px, 7vw, 140px), calc(env(safe-area-inset-right) + 42px));
  color: rgba(255, 255, 255, .72);
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Marker Felt", cursive;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .82);
  white-space: nowrap;
  opacity: .74;
  pointer-events: none;
  user-select: none;
  transform: translateZ(1px);
}

/* The player is already a full-screen black surface. Stop expensive catalogue
   painting behind it so playback gets the compositor budget on low-end phones. */
body.player-open #mainContent,
body.player-open #navbar,
body.player-open #bottomTabBar {
  content-visibility: hidden;
  pointer-events: none;
}

@media (orientation: portrait) {
  .cinema-player-wrapper:not(.cinema-fullscreen) .movie-copyright-watermark {
    top: max(70px, calc(env(safe-area-inset-top) + 62px));
    right: max(18px, calc(env(safe-area-inset-right) + 12px));
    font-size: clamp(15px, 4.2vw, 22px);
  }
}

.platform-android .video-element {
  touch-action: manipulation;
  transform: translateZ(0);
}
.platform-android .cinema-player-wrapper,
.platform-android .player-controls,
.platform-android .player-top-bar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Portrait playback is a real video stage, not a full-height box that leaves
   the picture stranded in the middle of a black screen. */
@media (orientation: portrait) {
  .cinema-player-wrapper:not(.cinema-fullscreen):not(.embed-active) .video-element {
    position: absolute;
    top: max(62px, calc(env(safe-area-inset-top) + 54px));
    right: 0;
    left: 0;
    width: 100%;
    height: min(56.25vw, calc(100dvh - 224px));
    margin: 0;
    object-position: center top;
  }

  .player-modal-overlay .cinema-player-wrapper.aspect-contain:not(.cinema-fullscreen):not(.inactive):not(.embed-active) .video-element {
    height: min(56.25vw, calc(100dvh - 224px));
    margin-bottom: 0;
  }
}

/* While controls are visible, create a small real safe strip below the video.
   This protects native captions without wasting the former 12vh black band. */
.cinema-player-wrapper.aspect-contain:not(.inactive):not(.embed-active) .video-element {
  height: calc(100% - var(--subtitle-safe-area));
  margin-bottom: var(--subtitle-safe-area);
}

/* Only controls respect safe-area insets; the picture reaches every edge. */
.player-modal-overlay.cinema-fullscreen {
  inset: auto;
  top: var(--player-viewport-top, 0);
  left: var(--player-viewport-left, 0);
  width: var(--player-viewport-width, 100%);
  height: var(--player-viewport-height, 100%);
  padding: 0;
  border-radius: 0;
}
.cinema-player-wrapper.cinema-fullscreen {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
}
.player-center-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 36;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
.player-center-toggle svg { width: 32px; height: 32px; pointer-events: none; }
.cinema-player-wrapper.inactive .player-center-toggle { opacity: 0; }
.cinema-player-wrapper .player-center-toggle:focus-visible { opacity: 1; outline: 2px solid #facc15; }
@media (orientation: portrait) {
  .cinema-player-wrapper:not(.cinema-fullscreen) .player-center-toggle {
    top: calc(max(62px, calc(env(safe-area-inset-top) + 54px)) + min(28.125vw, calc((100dvh - 224px) / 2)));
  }
}

video::cue {
  color: #fff !important;
  background: rgba(0, 0, 0, .78) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(15px, 2.2vw, 27px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-shadow: 0 2px 4px #000 !important;
}

.player-buffering {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: rgba(0, 0, 0, .54);
  pointer-events: none;
}

.player-alert {
  position: absolute;
  z-index: 60;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  max-width: min(88vw, 620px);
  transform: translateX(-50%);
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: #fff;
  background: rgba(17, 24, 39, .94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.player-top-bar {
  position: absolute;
  z-index: 30;
  top: 0;
  right: 0;
  left: 0;
  min-height: 62px;
  box-sizing: border-box;
  display: grid;
  /* Let the action group keep its real width. Fractional outer columns made
     wide landscape controls spill left over the centred movie title. */
  grid-template-columns: auto minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  padding: max(9px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 9px max(14px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(0, 0, 0, .88), transparent);
  transition: opacity .22s ease;
}

.btn-back,
.btn-close-player,
.ctrl-btn,
.ctrl-btn-text,
.btn-player-server {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}
.btn-back svg { width: 20px; height: 20px; }
.btn-back:hover, .btn-back:focus-visible { background: rgba(255, 255, 255, .15); }

.player-title-info {
  min-width: 0;
  color: #fff;
  text-align: center;
}
.player-title-info h3 {
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-title-info span { color: #f5c451; font-size: 12px; font-weight: 700; }

.player-top-actions {
  justify-self: end;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.btn-player-fill.active {
  border-color: rgba(250, 204, 21, .72) !important;
  color: #111827 !important;
  background: #facc15 !important;
}

.badge-real-res,
.player-noads-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .25px;
  white-space: nowrap;
}
.badge-real-res.res-4k { color: #fbbf24; border-color: rgba(251, 191, 36, .72); background: rgba(217, 119, 6, .26); }
.badge-real-res.res-2k { color: #67e8f9; border-color: rgba(103, 232, 249, .68); background: rgba(8, 145, 178, .25); }
.badge-real-res.res-fhd { color: #6ee7b7; border-color: rgba(110, 231, 183, .68); background: rgba(5, 150, 105, .25); }
.badge-real-res.res-hd { color: #bfdbfe; border-color: rgba(147, 197, 253, .62); background: rgba(37, 99, 235, .24); }
.badge-real-res.res-auto { color: #c4b5fd; border-color: rgba(196, 181, 253, .62); background: rgba(109, 40, 217, .28); }
.player-noads-pill { color: #86efac; border-color: rgba(74, 222, 128, .45); background: rgba(22, 163, 74, .18); }

.btn-close-player {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: 20px;
  line-height: 1;
}
.btn-close-player:hover, .btn-close-player:focus-visible { background: rgba(255, 255, 255, .23); }

.player-controls {
  position: absolute;
  z-index: 35;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0 max(22px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .54) 64%, transparent 100%);
  transition: opacity .22s ease;
}
.cinema-player-wrapper.inactive .player-top-bar,
.cinema-player-wrapper.inactive .player-controls { opacity: 0; pointer-events: none; }
.cinema-player-wrapper.inactive .player-top-bar {
  visibility: hidden;
}
.player-top-bar.player-chrome-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.cinema-player-wrapper.inactive.embed-active #playerTopBar > * {
  pointer-events: none !important;
}

/* Embedded players live in a cross-origin iframe, so their pointer events do
   not bubble to the wrapper. While our chrome is hidden, cover the player with
   a transparent first-tap layer. That tap wakes our controls; the layer then
   disappears so subsequent taps reach the embedded player normally. */
.cinema-player-wrapper.inactive.embed-active::after {
  content: "";
  position: absolute;
  z-index: 45;
  top: 0;
  right: 0;
  bottom: max(142px, calc(env(safe-area-inset-bottom) + 118px));
  left: 0;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ENSMovie owns the real ad markers and renders its native “Bỏ qua quảng
   cáo” action at the lower-right of the iframe. Keep that whole transport
   strip outside our wake-up layer so the first tap reaches ENSMovie on web,
   Capacitor phones/tablets and desktop shells. */
.player-ad-skip-status {
  display: inline-flex;
  min-height: 36px;
  padding: 6px 10px;
  align-items: center;
  border: 1px solid rgba(74, 222, 128, .42);
  border-radius: 9px;
  color: #bbf7d0;
  background: rgba(22, 101, 52, .24);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* Keep the provider stage mathematically centred on every portrait viewport,
   including iOS dynamic toolbars. Width is derived from the real safe area,
   not 100vw, so notches/fold hinges cannot push the frame into a corner. */
@media (orientation: portrait) {
  .cinema-player-wrapper.embed-active #playerEmbed {
    width: calc(100% - var(--player-safe-left) - var(--player-safe-right)) !important;
    max-height: calc(100dvh - var(--player-safe-top) - var(--player-safe-bottom)) !important;
    aspect-ratio: 16 / 9;
  }
}

.progress-bar-container {
  position: relative;
  height: 8px;
  margin: 0 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
}
.progress-buffer,
.progress-current {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.progress-buffer { width: 0; background: rgba(255, 255, 255, .4); }
.progress-current { width: 0; background: #e50914; }
.progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .65);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease;
  pointer-events: none;
}
.progress-bar-container:hover .progress-thumb { transform: translate(-50%, -50%) scale(1); }
.progress-hover-time {
  position: absolute;
  bottom: 16px;
  left: 0;
  display: none;
  padding: 3px 6px;
  border-radius: 4px;
  color: #fff;
  background: rgba(0, 0, 0, .86);
  font-size: 11px;
  font-weight: 700;
  transform: translateX(-50%);
  pointer-events: none;
}
.progress-bar-container:hover .progress-hover-time { display: block; }

.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.6vw, 38px);
}
.controls-left, .controls-right {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.controls-left {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(10, 12, 18, .48);
  backdrop-filter: blur(10px);
}
.controls-right {
  justify-content: flex-end;
  margin-left: auto;
}
.ctrl-btn {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
}
.ctrl-btn svg { width: 22px; height: 22px; }
.ctrl-btn:hover, .ctrl-btn:focus-visible, .ctrl-btn.active { background: rgba(255, 255, 255, .18); }
.ctrl-btn-text,
.btn-player-server {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.ctrl-btn-text:hover, .btn-player-server:hover { background: rgba(255, 255, 255, .23); }
.ctrl-btn-text.active { color: #111827; background: #facc15; }
.ctrl-btn-text.quality-auto:disabled {
  color: #ddd6fe;
  border-color: rgba(196, 181, 253, .5);
  background: rgba(109, 40, 217, .26);
  cursor: default;
  opacity: 1;
}
.aspect-mode-control { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(0,0,0,.3); }
.aspect-mode-control .ctrl-btn-text { border: 0; background: transparent; }
.aspect-mode-control .ctrl-btn-text.active { color: #111827; background: #facc15; }
.volume-container { display: flex; align-items: center; gap: 2px; }
.volume-slider { width: 72px; accent-color: #e50914; }
.time-display {
  display: inline-flex;
  min-height: 28px;
  margin: 0 0 8px;
  padding: 4px 9px;
  align-items: center;
  border-radius: 999px;
  color: #f3f4f6;
  background: rgba(0, 0, 0, .5);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dropdown-control { position: relative; }
.ctrl-dropdown {
  position: absolute;
  z-index: 100;
  right: 0;
  bottom: calc(100% + 9px);
  display: flex;
  min-width: 146px;
  max-height: min(260px, 54vh);
  padding: 6px;
  overflow-y: auto;
  flex-direction: column;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  background: rgba(17, 24, 39, .97);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.player-server-menu { top: calc(100% + 9px); bottom: auto; }
.ctrl-dropdown button {
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  color: #e5e7eb;
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}
.ctrl-dropdown button:hover, .ctrl-dropdown button.active { color: #fff; background: #d71920; }
.ctrl-dropdown button:disabled,
.ctrl-dropdown .quality-note { color: #9ca3af; cursor: default; }
.ctrl-dropdown button:disabled:hover,
.ctrl-dropdown .quality-note:hover { color: #9ca3af; background: transparent; }

@media (max-width: 760px) {
  .player-top-bar { grid-template-columns: 44px 1fr auto; min-height: 54px; padding-top: max(8px, env(safe-area-inset-top)); }
  .btn-back { width: 40px; min-width: 40px; padding: 8px; font-size: 0; }
  .btn-back svg { width: 22px; height: 22px; }
  .player-title-info h3 { font-size: 14px; }
  .player-title-info span, .player-noads-pill { display: none; }
  .badge-real-res { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
  .btn-player-server { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
  .player-controls {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .controls-row { gap: 10px; }
  .controls-left, .controls-right { gap: 6px; }
  .ctrl-btn { width: 42px; height: 42px; flex: 0 0 42px; }
  .volume-slider { display: none; }
  .ctrl-btn-text, .btn-player-server { min-height: 38px; font-size: 11px; }
  .aspect-mode-control .ctrl-btn-text { padding-inline: 10px; }
}

@media (max-width: 560px) and (orientation: portrait) {
  .player-top-actions .player-ad-skip-status,
  .player-top-actions #btnNextEpTop,
  .player-top-actions .player-noads-pill { display: none; }
  .controls-row { flex-direction: column; align-items: stretch; row-gap: 9px; }
  .controls-left { width: 100%; justify-content: space-around; padding: 5px 8px; }
  .controls-right {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    margin-left: 0;
    padding: 2px 0 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .controls-right::-webkit-scrollbar { display: none; }
  .controls-right > * { flex: 0 0 auto; }
  .controls-right .ctrl-btn-text { padding-inline: 11px; }
  .cinema-player-wrapper { --subtitle-safe-area: 126px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .cinema-player-wrapper { --subtitle-safe-area: 52px; }
  .player-top-bar { min-height: 46px; padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 5px; }
  .player-title-info,
  .player-noads-pill,
  .player-top-actions .player-ad-skip-status,
  .player-top-actions #btnNextEpTop { display: none; }
  .player-top-bar { grid-template-columns: 48px 1fr auto; }
  .btn-back { font-size: 0; min-height: 34px; }
  .player-controls {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .progress-bar-container { margin-bottom: 5px; }
  .controls-row { gap: 14px; }
  .controls-left { gap: 5px; padding: 3px 6px; }
  .controls-right { gap: 6px; }
  .ctrl-btn { width: 38px; height: 38px; flex-basis: 38px; }
  .ctrl-btn svg { width: 20px; height: 20px; }
  .ctrl-btn-text { min-height: 36px; padding: 5px 10px; }
  .aspect-mode-control .ctrl-btn-text { padding-inline: 9px; }
  .volume-slider { display: none; }
  #btnQuality { display: none; }
}

/* Phones report very different CSS viewport heights across Safari, installed
   PWAs and native WebViews. Cover the taller landscape viewports too, while
   preserving every important action instead of letting controls overlap. */
@media (orientation: landscape) and (max-height: 760px) and (max-width: 1600px) {
  .player-top-bar {
    grid-template-columns: 42px minmax(0, 1fr) max-content;
    gap: 6px;
    min-height: 48px;
    padding: max(5px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 5px max(10px, env(safe-area-inset-left));
  }
  .btn-back {
    width: 38px;
    min-width: 38px;
    min-height: 36px;
    padding: 7px;
    font-size: 0;
  }
  .player-title-info h3 { font-size: 13px; }
  .player-title-info span,
  .badge-real-res,
  .player-noads-pill,
  .player-top-actions .player-ad-skip-status { display: none !important; }
  .player-top-actions { gap: 5px; }
  .btn-player-server {
    max-width: 152px;
    min-height: 36px;
    padding: 5px 9px;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
  }
  .player-top-actions .btn-player-report {
    min-height: 36px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  .player-top-actions .btn-player-fill { display: inline-flex !important; }
  .btn-close-player {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
}

@media (orientation: landscape) and (max-width: 640px) {
  #btnSpeed { display: none; }
}

/* --- EnsMovie Embed Player Integration --- */
#playerEmbed {
  position: absolute;
  top: var(--player-safe-top);
  right: auto;
  bottom: auto;
  left: var(--player-safe-left);
  width: calc(100% - var(--player-safe-left) - var(--player-safe-right));
  height: calc(100% - var(--player-safe-top) - var(--player-safe-bottom));
  border: none;
  background: #000;
  z-index: 20;
}

.cinema-player-wrapper.embed-active #videoPlayer,
.cinema-player-wrapper.embed-active #btnCenterPlayPause,
.cinema-player-wrapper.embed-active #playerControls,
.cinema-player-wrapper.embed-active #playerBuffering {
  display: none !important;
  pointer-events: none !important;
}

.cinema-player-wrapper.embed-active #playerTopBar {
  z-index: 50;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 75%, transparent 100%);
  pointer-events: none;
}

.cinema-player-wrapper.embed-active #playerTopBar > * {
  pointer-events: auto;
}

.cinema-player-wrapper.embed-active .player-top-bar {
  transition: opacity 0.25s ease;
}