/* Presentation only: playback, grants, progress and episode transitions stay in app.js. */
html:has(#player-modal[open]),body:has(#player-modal[open]){overflow:hidden;overscroll-behavior:none}
#player-modal.cinema{width:100vw;height:100dvh;max-width:none;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#000;color:#fff;box-shadow:none;overflow:hidden;scrollbar-width:none;backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#player-modal::backdrop{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none}
#player-modal::before{display:none}
#player-modal .cinema-topbar,#player-modal .episode-sidebar,#player-modal .screen-description{display:none}
#player-modal .cinema-layout{display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;overflow:hidden}
#player-modal .screen-column{width:100%;height:100%;min-height:0;overflow:hidden}
#player-modal #cinema-stage.cinema-hud{position:relative;isolation:isolate;width:100%;height:100%;min-height:0;max-height:none;overflow:hidden;border:0;border-radius:0;background:#000;box-shadow:none;outline:none}
#player-modal .cinema-hud video{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#000;border-radius:0}
#player-modal .cinema-hud::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(#000c,transparent 26%,transparent 64%,#000e);opacity:1;transition:opacity .2s}
#player-modal .cinema-hud:not(.hud-visible)::after{opacity:0}
#player-modal .hud-top{position:absolute;z-index:9;top:max(24px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));display:flex;align-items:center;gap:24px;transition:opacity .2s,visibility .2s}
#player-modal .hud-caption{display:flex;flex-direction:column;flex:1;min-width:0;gap:5px;text-align:left;color:#d3d3d3;font-size:13px;font-weight:500;line-height:1.4;text-shadow:0 1px 4px #000}
#player-modal .hud-series-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;color:#fff;font-size:19px;font-weight:650;line-height:1.35}
#player-modal .hud-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:10px 12px;border:0;border-radius:3px;background:transparent;color:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer}
#player-modal .hud-button:hover{background:#ffffff1a;transform:none}
#player-modal .hud-button:disabled{opacity:.45;cursor:default}
#player-modal .cinema-hud .player-controls{position:absolute;z-index:5;left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .2s,visibility .2s}
#player-modal .cinema-hud .timeline{display:flex;align-items:center;min-height:34px;padding:12px 0;cursor:pointer}
#player-modal .timeline input{height:4px;width:100%;min-width:0;padding:0;border:0;border-radius:0;cursor:pointer;background:linear-gradient(to right,#ff6257 0%,#ff6257 var(--progress,0%),#ffffff55 var(--progress,0%),#ffffff55 100%);accent-color:#ff6257}
#player-modal .timeline input::-webkit-slider-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#ff6257;box-shadow:none}
#player-modal .timeline input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#ff6257;box-shadow:none}
#player-modal .control-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:16px}
#player-modal .control-group{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;min-width:0}
#player-modal .icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;gap:7px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:3px;background:transparent;color:#fff;box-shadow:none;font-size:14px;cursor:pointer}
#player-modal .icon-button svg{width:25px;height:25px;flex-shrink:0}
#player-modal .icon-button:hover:not(:disabled){background:#ffffff1a;transform:none;box-shadow:none}
#player-modal #toggle-play{min-width:44px;background:transparent;color:#fff}
#player-modal #toggle-play::after,#player-modal #fullscreen::after{content:none}
#player-modal #rewind::after,#player-modal #forward::after{content:'10';position:absolute;bottom:4px;right:3px;font-size:10px;line-height:1;padding:1px;background:#000b;color:#fff}
#player-modal .time-display{font-size:14px;font-weight:500;color:#fff;margin:0 6px;white-space:nowrap;font-variant-numeric:tabular-nums}
#player-modal .volume-slider{display:block;width:74px;min-height:26px;height:26px;padding:0;background:transparent;accent-color:#fff;cursor:pointer}
#player-modal .control-group select{display:block;min-width:75px;max-width:105px;height:44px;min-height:44px;padding:8px;border:0;border-radius:3px;background:#111;color:#fff;font-size:14px;font-weight:500;cursor:pointer}
#player-modal .next-button{min-height:44px;width:auto;margin:0;padding:10px 12px;border:0;border-radius:3px;background:transparent;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:none}
#player-modal .next-button:hover:not(:disabled){background:#ffffff1a;transform:none}
#player-modal .center-play{z-index:4;top:50%;display:grid;place-items:center;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:#0008;color:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#player-modal .center-play svg{width:42px;height:42px;margin-left:5px}
#player-modal .center-play:hover{background:#000b;scale:1.04}
#player-modal .cinema-hud:not(.hud-visible) .player-controls,#player-modal .cinema-hud:not(.hud-visible) .hud-top{opacity:0;visibility:hidden;pointer-events:none}
#player-modal .cinema-hud:not(.hud-eligible) .player-controls{display:none}
#player-modal .cinema-hud:not(.hud-eligible) .hud-top{display:flex;opacity:1;visibility:visible;pointer-events:auto}
#player-modal .cinema-hud.hud-picker-active .player-controls,#player-modal .cinema-hud.hud-picker-active .hud-top,#player-modal .cinema-hud.hud-picker-active .center-play{visibility:hidden;pointer-events:none}
#player-modal .hud-episode-panel{position:absolute;z-index:12;inset:84px 32px 28px auto;width:min(430px,calc(100% - 64px));max-height:calc(100% - 112px);display:flex;flex-direction:column;min-height:0;padding:20px;border:1px solid #333;border-radius:4px;background:#171717;box-shadow:0 12px 40px #0009;backdrop-filter:none;-webkit-backdrop-filter:none}
#player-modal .hud-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}
#player-modal .hud-picker-heading h3{font-size:21px;font-weight:650;line-height:1.3;margin:0;letter-spacing:0}
#player-modal .hud-picker-heading .hud-button{width:44px;padding:0;font-size:23px}
#player-modal .hud-episode-list{display:grid;grid-template-columns:1fr;align-content:start;gap:0;overflow-y:auto;overflow-x:hidden;min-height:0;padding:4px;scrollbar-width:none;overscroll-behavior:contain;scroll-padding:8px}
#player-modal .hud-episode{display:flex;align-items:center;gap:15px;min-height:76px;padding:13px 12px;border:0;border-bottom:1px solid #ffffff1c;border-radius:0;background:transparent;color:#fff;text-align:left;cursor:pointer}
#player-modal .hud-episode:hover{background:#ffffff12}
#player-modal .hud-episode.active{background:#ffffff15;box-shadow:inset 3px 0 #ff6257}
#player-modal .hud-episode .episode-number{display:grid;place-items:center;flex-shrink:0;width:32px;height:40px;border-radius:0;background:transparent;color:#d2d2d2;font-size:16px;font-weight:500}
#player-modal .hud-episode .episode-info{display:flex;flex-direction:column;gap:5px}
#player-modal .hud-episode .episode-info strong{font-size:15px;font-weight:600}
#player-modal .hud-episode .episode-info span{font-size:13px;line-height:1.4;color:#bdbdbd}
#player-modal .hud-episode>svg,#player-modal .hud-episode .episode-indicator{display:none}
#player-modal #player-message{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:14px;width:100%;height:100%;min-height:0;max-height:100%;padding:100px 26px 28px;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;background:#101010;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:center}
#player-modal .player-message h2{font-size:clamp(26px,3vw,38px);font-weight:700;line-height:1.15;letter-spacing:-.7px;margin:8px 0;max-width:650px}
#player-modal .player-message p{font-size:15px;line-height:1.6;color:#d0d0d0;max-width:530px;margin:0 0 5px}
#player-modal .player-message .message-symbol{display:none}
#player-modal .player-message .hook-poster{width:100px;height:150px;object-fit:cover;border-radius:3px;box-shadow:none;margin:0}
#player-modal .player-message .primary{min-height:46px;padding:12px 23px;border:0;border-radius:3px;background:#fff;color:#111;box-shadow:none;font-size:15px;font-weight:650}
#player-modal .player-message .quiet{min-height:44px;padding:11px 20px;border:1px solid #666;border-radius:3px;background:transparent;color:#fff;font-size:14px}
#player-modal #player-loader.cinema-loading{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:20px;padding:100px 24px 28px;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;background:#080808;backdrop-filter:none;-webkit-backdrop-filter:none}
#player-modal .cinema-loading::before{display:none}
#player-modal .loading-poster{position:relative;flex-shrink:0;width:110px;height:165px;border:0;border-radius:3px;background:var(--cinema-art) center/contain no-repeat,#191919;box-shadow:none;overflow:hidden}
#player-modal .loading-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent,#ffffff24,transparent);transform:translateX(-100%);animation:cinemaLoading 2s linear infinite}
#player-modal .loading-copy{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
#player-modal .loading-copy strong{font-size:21px;font-weight:650;line-height:1.3}
#player-modal .loading-copy span{font-size:14px;line-height:1.5;color:#bbb}
#player-modal .loading-cancel{margin:0}
#player-modal .loading-cancel .quiet{min-height:44px;border:1px solid #666;border-radius:3px;background:transparent;padding:11px 20px;color:#fff;font-size:14px}
#player-modal :is(button,input,select):focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:none}
#player-modal :is(button,input,select):disabled{opacity:.4;cursor:default}
#player-modal::-webkit-scrollbar,#player-modal .hud-episode-list::-webkit-scrollbar,#player-modal .player-message::-webkit-scrollbar,#player-modal .cinema-loading::-webkit-scrollbar{display:none}
#player-modal #cinema-stage:fullscreen{width:100vw;height:100dvh;min-height:0;max-height:none;margin:0;border:0;border-radius:0;background:#000}
@keyframes cinemaLoading{to{transform:translateX(100%)}}
@media(max-width:950px){#player-modal .volume-slider{display:none}#player-modal .control-group{gap:7px}}
@media(max-width:620px){
 #player-modal .hud-top{top:max(14px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));gap:8px;align-items:flex-start}
 #player-modal .hud-button{padding:10px 7px;font-size:12px}
 #player-modal .hud-caption{font-size:11px;gap:4px;padding-top:3px}
 #player-modal .hud-series-title{font-size:13px;line-height:1.4}
 #player-modal .cinema-hud .player-controls{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
 #player-modal .control-row{flex-wrap:wrap;gap:6px}
 #player-modal .control-group:first-child,#player-modal .control-group:last-child{display:flex;width:100%;gap:7px}
 #player-modal .time-display{font-size:12px;margin-left:auto;margin-right:0}
 #player-modal .next-button{margin-left:auto;padding:10px 7px;font-size:12px}
 #player-modal .control-group select{width:65px;min-width:65px;padding:8px;font-size:12px}
 #player-modal .timeline{min-height:30px}
 #player-modal .hud-episode-panel{inset:10px;width:auto;max-height:calc(100% - 20px);padding:16px;border-radius:3px}
 #player-modal .hud-picker-heading h3{font-size:20px}
 #player-modal #player-message{padding:94px 20px 24px}
 #player-modal .player-message .hook-poster{width:90px;height:135px}
 #player-modal .player-message h2{font-size:27px}
 #player-modal .center-play{width:64px;height:64px}
 #player-modal .center-play svg{width:34px;height:34px}
}
@media(max-width:360px){#player-modal .next-button{font-size:0;gap:0}#player-modal .next-button::after{content:'Next →';font-size:12px}}
@media(max-height:520px) and (orientation:landscape){
 #player-modal .hud-top{top:max(10px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));gap:16px}
 #player-modal .hud-series-title{font-size:14px;-webkit-line-clamp:1}
 #player-modal .hud-caption{font-size:11px;gap:2px}
 #player-modal .cinema-hud .player-controls{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
 #player-modal .control-row{flex-wrap:nowrap;gap:8px}
 #player-modal .control-group:first-child,#player-modal .control-group:last-child{width:auto;gap:5px}
 #player-modal .time-display{font-size:11px;margin-inline:3px}
 #player-modal .next-button{font-size:12px;padding:10px}
 #player-modal .timeline{min-height:24px;padding-block:7px}
 #player-modal .hud-episode-panel{inset:10px 14px;width:auto;max-height:calc(100% - 20px)}
 #player-modal .hud-episode-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
 #player-modal #player-message{padding:70px 24px 16px;gap:9px}
 #player-modal .player-message .hook-poster{display:none}
 #player-modal .player-message h2{font-size:25px;margin:0}
 #player-modal .player-message p{margin:3px 0;font-size:14px}
 #player-modal #player-loader.cinema-loading{padding:70px 20px 20px;flex-direction:row;flex-wrap:wrap;gap:20px}
 #player-modal .loading-poster{width:74px;height:111px}
}
@media(max-height:520px) and (orientation:landscape) and (max-width:680px){#player-modal .next-button{font-size:0;gap:0}#player-modal .next-button::after{content:'Next →';font-size:12px}}
@media(prefers-reduced-motion:reduce){#player-modal *,#player-modal *::before,#player-modal *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#player-modal .timeline input::-webkit-slider-runnable-track{height:4px;border-radius:0;background:linear-gradient(to right,#ff6257 var(--progress,0%),#ffffff55 var(--progress,0%))}
#player-modal .timeline input::-webkit-slider-thumb{margin-top:-5px}
#player-modal .timeline input::-moz-range-track{height:4px;border-radius:0;background:#ffffff55}
#player-modal .timeline input::-moz-range-progress{height:4px;border-radius:0;background:#ff6257}
/* A small media-loading ring, never a replacement screen over the story. */
#player-modal #player-loader.cinema-loading{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:0;overflow:hidden;background:transparent;pointer-events:none;opacity:0;transition:opacity .12s ease;backdrop-filter:none;-webkit-backdrop-filter:none}
#player-modal #player-loader.cinema-loading.loading-visible{opacity:1}
#player-modal .cinema-loading-ring{display:block;flex:0 0 44px;width:44px;height:44px;box-sizing:border-box;border:3px solid #ffffff35;border-top-color:#fff;border-right-color:#ff6257;border-radius:50%;background:transparent;box-shadow:0 0 0 10px #0004;animation:cinemaRingTurn .9s linear infinite}
#player-modal .cinema-loading-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;font-size:14px;color:#fff}
#player-modal .hud-buffering .center-play{display:none}
#player-modal .hud-buffering .hud-top,#player-modal .hud-buffering .player-controls{opacity:1;visibility:visible;pointer-events:auto}
#player-modal .hud-buffering.hud-picker-active .hud-top,#player-modal .hud-buffering.hud-picker-active .player-controls{visibility:hidden;pointer-events:none}
@keyframes cinemaRingTurn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#player-modal .cinema-loading-ring{animation:none;transform:rotate(-35deg)}#player-modal .cinema-loading-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;background:#000b;padding:5px 9px;border-radius:2px}}
/* Center transport, bottom-left settings and a distinct top episode action. */
#player-modal .hud-top-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
#player-modal .hud-top .next-button{margin:0;font-size:13px}
#player-modal .hud-transport{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:30px;width:auto;transition:opacity .2s,visibility .2s}
#player-modal .hud-transport .icon-button{width:56px;height:56px;min-width:56px;min-height:56px;background:#0005;border-radius:50%}
#player-modal .hud-transport .icon-button svg{width:30px;height:30px}
#player-modal .hud-transport #toggle-play{width:76px;height:76px;min-width:76px;background:#0007}
#player-modal .hud-transport #toggle-play svg{width:37px;height:37px}
#player-modal .hud-transport #rewind::after,#player-modal .hud-transport #forward::after{font-size:11px;right:6px;bottom:6px}
#player-modal .cinema-hud.hud-eligible .center-play{display:none}
#player-modal .cinema-hud:not(.hud-eligible) .hud-transport{display:none}
#player-modal .cinema-hud:not(.hud-visible) .hud-transport{opacity:0;visibility:hidden;pointer-events:none}
#player-modal .hud-buffering .hud-transport{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,calc(-50% + 82px))}
#player-modal .cinema-hud.hud-picker-active .hud-transport{visibility:hidden;pointer-events:none}
#player-modal .player-controls .control-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:15px}
#player-modal .player-controls .control-group{display:flex;width:auto;gap:9px;justify-content:flex-start}
#player-modal .player-controls .time-display{margin:0;flex-shrink:0}
@media(max-width:620px){#player-modal .hud-top{flex-wrap:wrap;gap:4px 8px}#player-modal .hud-caption{flex-basis:calc(100% - 68px)}#player-modal .hud-top-actions{margin-left:auto;gap:8px}#player-modal .hud-top .next-button{font-size:12px;padding:10px 7px}#player-modal .hud-top .next-button::after{content:none}#player-modal .hud-transport{gap:23px}#player-modal .hud-transport .icon-button{width:50px;min-width:50px;height:50px;min-height:50px}#player-modal .hud-transport #toggle-play{width:66px;min-width:66px;height:66px}#player-modal .player-controls .control-group{width:auto;gap:5px}#player-modal .player-controls .time-display{font-size:11px}#player-modal .cinema-hud .player-controls{bottom:max(12px,env(safe-area-inset-bottom))}}
@media(max-height:520px) and (orientation:landscape){#player-modal .hud-top{flex-wrap:nowrap}#player-modal .hud-caption{flex-basis:auto}#player-modal .hud-top-actions{gap:9px}#player-modal .hud-transport .icon-button{width:48px;min-width:48px;height:48px;min-height:48px}#player-modal .hud-transport #toggle-play{width:62px;min-width:62px;height:62px}#player-modal .hud-buffering .hud-transport{transform:translate(-50%,calc(-50% + 60px))}}

/* Episode selection keeps the playback HUD visible and reserves its top/bottom rows. */
#player-modal .cinema-hud.hud-picker-active .player-controls,#player-modal .cinema-hud.hud-picker-active .hud-top,#player-modal .cinema-hud.hud-picker-active .center-play,#player-modal .cinema-hud.hud-picker-active .hud-transport{visibility:visible;pointer-events:auto}
@media(max-width:700px){#player-modal .hud-episode-panel{inset:80px 14px 130px;max-height:calc(100% - 210px)}}

#player-modal .cinema-hud.hud-selection-hidden .hud-top,#player-modal .cinema-hud.hud-selection-hidden .player-controls,#player-modal .cinema-hud.hud-selection-hidden .hud-transport{opacity:0;visibility:hidden;pointer-events:none}
