/* Fullscreen video stays full size while its controls fade above it. */
#playlist-reveal{display:none}
#playlist-dialog.expanded{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#000;overflow:hidden;display:block}
#playlist-dialog.expanded #playlist-player{position:absolute;inset:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;margin:0;border:0;border-radius:0;background:#000}
#playlist-dialog.expanded .playlist-top{position:absolute;top:0;right:0;z-index:3;display:flex;justify-content:flex-end;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px 8px}
#playlist-dialog.expanded .playlist-top h2{display:none}
#playlist-dialog.expanded .playlist-controls{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:8px;background:linear-gradient(transparent,#0009)}
#playlist-dialog.expanded .playlist-top button,#playlist-dialog.expanded .playlist-controls button,#playlist-dialog.expanded #playlist-list button{background:#000b;border-color:#fff8;color:#fff;min-height:44px}
#playlist-dialog.expanded #playlist-position{position:absolute;bottom:0;left:0;right:0;z-index:3;display:block;color:#fff;margin:0;padding:4px 8px max(8px,env(safe-area-inset-bottom));background:#0009}
#playlist-dialog.expanded #playlist-list:not([hidden]){position:absolute;left:8px;right:8px;bottom:calc(110px + env(safe-area-inset-bottom));z-index:4;display:block;max-height:45dvh;overflow:auto;margin:0;padding:8px;background:#000e;border-radius:12px}
#playlist-dialog.expanded #playlist-list[hidden]{display:none}
#playlist-dialog.expanded #playlist-list button[aria-current="true"]{background:#fff;color:#153e55}
#playlist-dialog.expanded .playlist-top,#playlist-dialog.expanded .playlist-controls,#playlist-dialog.expanded #playlist-position{transition:opacity .25s}
#playlist-dialog.expanded.controls-hidden .playlist-top,#playlist-dialog.expanded.controls-hidden .playlist-controls,#playlist-dialog.expanded.controls-hidden #playlist-position{opacity:0;visibility:hidden;pointer-events:none}
#playlist-dialog.expanded.controls-hidden #playlist-reveal{display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
@media(max-height:500px){#playlist-dialog.expanded .playlist-controls button{padding:6px 10px}#playlist-dialog.expanded #playlist-position{font-size:12px}}
@media(prefers-reduced-motion:reduce){#playlist-dialog.expanded .playlist-top,#playlist-dialog.expanded .playlist-controls,#playlist-dialog.expanded #playlist-position{transition:none}}

/* iPhone fallback: rotate the entire player, including tappable controls. */
@media(orientation:portrait){
#playlist-dialog.expanded{inset:auto;left:50%;top:50%;width:100dvh;max-width:100dvh;height:100vw;max-height:100vw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
#playlist-dialog.expanded .playlist-top{padding:8px}
#playlist-dialog.expanded .playlist-controls{bottom:30px}
#playlist-dialog.expanded #playlist-position{padding-bottom:8px}
#playlist-dialog.expanded #playlist-list:not([hidden]){bottom:110px;max-height:45vw}
}

/* Borderless playlist video, including native fullscreen dialog rendering. */
#playlist-dialog{border:0;padding:0;overflow:hidden}
#playlist-dialog::backdrop{background:#000}
#playlist-dialog .playlist-top{padding:12px 18px}
#playlist-dialog #playlist-player{display:block;border:0;border-radius:0;margin:0;background:#000}
#playlist-dialog:fullscreen,#playlist-dialog:-webkit-full-screen{background:#000;border:0;border-radius:0;padding:0;box-shadow:none}
#playlist-dialog.expanded{box-shadow:none}
#playlist-dialog.expanded #playlist-player{margin:0;border:0;border-radius:0}