html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#000; }

.page { display:flex; width:100vw; height:100vh; height:100dvh; }

video { flex:1 1 auto; min-width:0; min-height:0; object-fit:contain; background:#000; }

.sidebar { flex:0 0 160px; overflow-y:auto; overflow-x:hidden; background:#111; }

.chapter { position:relative; display:block; cursor:pointer; flex:0 0 auto; }
.chapter img { display:block; width:100%; height:auto; }
.chapter .ts {
  position:absolute; left:6px; bottom:6px;
  color:#fff; font:700 15px/1 system-ui, sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 4px #000;
}

google-cast-launcher { position:fixed; top:12px; left:12px; z-index:10;
                       width:32px; height:32px;
                       --disconnected-color:#fff; --connected-color:#4db8ff; }

/* Phones (either orientation): trade the side sidebar for a slim horizontal
   chapter strip below the video, so the video stays the dominant element. */
@media (max-width:700px), (max-height:500px) {
  .page { flex-direction:column; }
  .sidebar {
    flex:0 0 84px; width:100%; height:auto;
    display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden;
  }
  .chapter { height:100%; }
  .chapter img { width:auto; height:100%; }
  .chapter .ts { font-size:12px; }
}