/* =========================
   iOS immersive landscape
   ========================= */
html.landscape-immersive,
html.landscape-immersive body{
  height:100%;
  overflow:hidden;
}

html.landscape-immersive #playerWrap{
  position:fixed !important;
  inset:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  z-index:9999;
  background:black;
}

html.landscape-immersive video#player{
  position:fixed !important;
  inset:0;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  z-index:9999;
  background:black;
  object-fit:contain;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* Hide page chrome while immersive */
html.landscape-immersive .meta-col{ display:none !important; }
html.landscape-immersive .sidebar{ display:none !important; }

/* Keep overlays minimal in immersive (bottom bar stays!) */
html.landscape-immersive .ctrl-cluster{ display:none !important; }
html.landscape-immersive .res-menu{ display:none !important; }

/* Bottom controls stay visible/positioned */
html.landscape-immersive #csControls{
  position:fixed;
  left:env(safe-area-inset-left, 0);
  right:env(safe-area-inset-right, 0);
  bottom:calc(env(safe-area-inset-bottom, 0) + 8px);
  z-index:10000;
}

/* Never let fullscreen disappear in immersive */
html.landscape-immersive #btnFull{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* =========================
   iPad: never “sticky fixed player”
   ========================= */
html.is-ipad body:not(.theatre) .player-wrap{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  margin: 0 !important;
}

html.is-ipad body:not(.theatre) .player-row{
  padding-top: 0 !important;
}

html.is-ipad .player-wrap.is-stuck{
  position: relative !important;
}

/* iPad: don’t lock layout via immersive flags */
html.is-ipad.landscape-immersive,
html.is-ipad.landscape-immersive body{
  height: auto !important;
  overflow: visible !important;
}

/* iPad sidebar: scrolls with page */
html.is-ipad aside.sidebar{
  position: static !important;
  top: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  padding-right: 0 !important;
}

/* =========================
   iPad: allow top cluster and menus
   ========================= */
@media (hover:none) and (pointer:coarse){
  html.is-ipad .ctrl-cluster{ display:flex !important; }

  /* Let [hidden] actually work */
  html.is-ipad .res-menu{ display:block !important; }
  html.is-ipad .res-menu[hidden]{ display:none !important; }
}

/* =========================
   iOS (non-iPad): ALWAYS hide Theatre
   (independent of max-width)
   ========================= */
html.is-ios:not(.is-ipad) #btnTheatre{
  display:none !important;
}

/* =========================
   PHONE MODE (all phones, incl Android)
   - Hide theatre button
   ========================= */
@media (hover:none) and (pointer:coarse) and (max-width: 900px){
  html:not(.is-ipad) #btnTheatre{ display:none !important; }
}

/* =========================
   iOS (non-iPad): simplify controls
   ========================= */
html.is-ios:not(.is-ipad) #resBtn,
html.is-ios:not(.is-ipad) #resMenu,
html.is-ios:not(.is-ipad) #btnSpeed,
html.is-ios:not(.is-ipad) #speedMenu,
html.is-ios:not(.is-ipad) .cs-vol,
html.is-ios:not(.is-ipad) #volSlider,
html.is-ios:not(.is-ipad) #btnMute{
  display:none !important;
}

html.is-ios:not(.is-ipad) .cs-controls .cs-row{ gap:10px; }

/* Always show fullscreen on iPhone */
html.is-ios:not(.is-ipad) #btnFull{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}