/* Shared video viewing surface. Native controls and source aspect ratios stay intact. */
.player-stage{position:relative;background:#090909;isolation:isolate}
.player-surface{position:relative;width:100%;background:#090909}
.player-actions{display:flex;align-items:center;gap:16px;margin-top:16px}
.landscape-player{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid #727570;border-radius:30px;background:#292b28;color:#f3f3ef;font-size:14px;line-height:1.4}
.landscape-player:hover{background:#393c37;border-color:#b2b6ac}
.player-immersive-controls{display:none}
.player-dialog.is-portrait .player-stage{background:#090909}
.player-dialog.is-portrait .player-surface{display:flex;justify-content:center}

/* A phone uses the entire viewport width, without the old inset dialog borders. */
@media(max-width:760px),(max-width:1000px) and (pointer:coarse){
 .player-dialog,.player-dialog.is-portrait{width:100%;max-width:100%;max-height:100svh;max-height:100dvh;padding:0;border:0;border-radius:0;overscroll-behavior:contain}
 .player-top{margin:0;padding:16px 16px 14px;padding-top:max(16px,env(safe-area-inset-top));align-items:flex-start;gap:12px}
 .player-top>div{min-width:0}
 .player-top .eyebrow{font-size:10px;letter-spacing:.7px;margin-bottom:6px}
 .player-top h2{font-size:18px;line-height:1.5;overflow-wrap:anywhere}
 .close-player{flex:none;min-width:44px;min-height:44px;padding:4px 0 4px 8px;gap:7px}
 .close-player span{font-size:25px}
 .player-dialog video,.player-dialog.is-portrait video{display:block;width:100%;height:auto;min-height:0;max-height:calc(100svh - 126px);max-height:calc(100dvh - 126px);margin:0;object-fit:contain}
 .player-actions{justify-content:flex-end;margin:0;padding:12px 16px 0}
 .landscape-player{font-size:13px;padding:9px 16px}
 .player-dialog #player-status,.player-dialog .player-note{margin:14px 16px 0}
 .player-dialog>.text-link{margin:8px 16px 0;padding-bottom:max(16px,env(safe-area-inset-bottom));font-size:12px}
}

/* Fullscreen is requested on the stage; only its child rotates as browsers fix
   the fullscreen element itself to the viewport. No duplicate video is loaded. */
.player-dialog.player-immersive{inset:0;width:100%;max-width:none;height:100svh;height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#090909}
.player-dialog.player-immersive>:not(.player-stage){display:none}
.player-stage.is-immersive{position:fixed;inset:0;width:100%;height:100%;z-index:5;overflow:hidden;background:#090909}
.player-stage.is-immersive .player-surface{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;transform:none}
.player-stage.is-immersive.is-rotated .player-surface{inset:auto;left:50%;top:50%;width:var(--player-view-height,100dvh);height:var(--player-view-width,100vw);transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
.player-dialog .player-stage.is-immersive video{display:block;width:100%;height:100%;max-width:none;max-height:none;min-height:0;margin:0;aspect-ratio:auto!important;object-fit:contain;background:#090909}
.player-stage.is-immersive .player-immersive-controls{display:flex;position:absolute;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:2;gap:8px}
.player-immersive-controls button{min-height:42px;padding:9px 14px;border:1px solid #ffffff65;border-radius:24px;background:#111c;color:#fff;font-size:13px;line-height:1.4;white-space:nowrap;backdrop-filter:blur(8px)}
.player-immersive-controls button:focus-visible{outline-color:#fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.player-stage,.player-surface{transition:none}}