:root{--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);--dur:.2s;--dur-bar:.32s;--bg:#0b0b0d;--surface:#111114;--surface-2:#18181c;--paper:#f2f1ed;--ink-2:#b9b6b0;--ink-3:#77747a;--hairline:rgba(255,255,255,.12);--hairline-strong:rgba(255,255,255,.28);--glass:rgba(13,13,15,.74);--brand:#E50914;--brand-rgb:229,9,20;--track:rgba(255,255,255,.22);--font-display:'Space Grotesk',sans-serif;--font-body:'Manrope',sans-serif;--font-mono:'DM Mono',ui-monospace,monospace;}
*{box-sizing:border-box;}
html{background:#000;color-scheme:dark;}
body{margin:0;background:#000;font-family:var(--font-body);overflow:hidden;-webkit-font-smoothing:antialiased;}
.player{position:relative;width:100vw;height:100vh;height:100dvh;background:#000;overflow:hidden;cursor:none;color:var(--paper);}
.player.controls-visible{cursor:default;}
video{width:100%;height:100%;display:block;object-fit:contain;background:#000;}
/* ── Fullscreen title block ──────────────────────────────────────────────── */
.top-bar{position:absolute;top:0;left:0;right:0;padding:30px 36px 90px;background:linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.46) 38%,rgba(0,0,0,.14) 74%,transparent 100%);opacity:0;transform:translateY(-8px);transition:opacity var(--dur-bar) var(--ease),transform var(--dur-bar) var(--ease);pointer-events:none;}
.player.is-fs.controls-visible .top-bar,.player.is-fs.paused .top-bar{opacity:1;transform:translateY(0);}
.player:not(.is-fs) .top-bar{display:none;}
.top-actions{position:absolute;top:18px;right:20px;display:flex;gap:6px;z-index:5;opacity:0;transform:translateY(-8px);transition:opacity var(--dur-bar) var(--ease),transform var(--dur-bar) var(--ease);}
.player.controls-visible .top-actions,.player.paused .top-actions{opacity:1;transform:translateY(0);}
.top-actions .ctrl-btn{background:var(--glass);border:1px solid var(--hairline);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.top-actions .ctrl-btn:hover{background:rgba(255,255,255,.16);border-color:var(--hairline-strong);}
.title-eyebrow{display:flex;align-items:center;gap:10px;font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brand);}
.title-eyebrow:after{content:'';width:28px;height:1px;background:linear-gradient(90deg,var(--brand),transparent);}
.title-main{margin-top:10px;font:500 clamp(24px,3vw,40px)/.95 var(--font-display);letter-spacing:-.04em;color:var(--paper);text-wrap:balance;}
.title-sub{margin-top:9px;font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
/* ── Centre cluster ─────────────────────────────────────────────────────── */
.center-toggle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:none;z-index:2;-webkit-tap-highlight-color:transparent;}
.player.controls-visible .center-toggle,.player.paused .center-toggle{cursor:pointer;}
/* Netflix-style transport (2026-09-25, owner's call): bare white icons, no discs; a soft
   shadow keeps them readable on bright frames. */
.big-play{position:relative;width:96px;height:96px;color:var(--paper);display:grid;place-items:center;opacity:0;transform:scale(.7);transition:opacity var(--dur-bar) var(--ease),transform .42s var(--spring);}
.player.loading .big-play,.player.loading .play-btn{opacity:0!important;pointer-events:none;}
.player.paused .big-play{opacity:1;transform:scale(1);}
/* Scoped under .paused so it outranks the .player.paused .big-play reset above. */
.player.paused .big-play:hover{transform:scale(1.1);}
.player.paused .center-toggle:active .big-play{transform:scale(.94);transition-duration:.08s;}
.big-play svg{grid-area:1/1;width:76px;height:76px;fill:currentColor;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));transition:transform .26s var(--spring),opacity .16s var(--ease);}
.big-play .icon-play{margin-left:4px;}
.player:not(.paused) .big-play .icon-play,.player.paused .big-play .icon-pause{opacity:0;transform:scale(.4) rotate(-60deg);}
.center-skip{position:absolute;top:50%;z-index:3;display:none;align-items:center;justify-content:center;width:64px;height:64px;padding:0;border:0;background:none;color:var(--paper);transform:translateY(-50%);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--ease);}
.center-skip.back{left:max(10px,calc(50% - 150px));}
.center-skip.fwd{right:max(10px,calc(50% - 150px));}
.center-skip svg{width:48px;height:48px;fill:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));}
.center-skip:active{transform:translateY(-50%) scale(.9);}
.player.loading .center-skip,.player.is-prerolling .center-skip,.preroll:not(.hide) ~ .center-skip{display:none!important;}
/* Touch: the centre cluster is the primary transport, so it shows whenever the
   bar does. Hover states have no meaning here. */
@media (hover:none){
  .player.controls-visible .center-skip,.player.paused .center-skip{display:flex;}
  .player.controls-visible .big-play{opacity:1;transform:scale(1);}
  .big-play{width:84px;height:84px;}
  .big-play svg{width:68px;height:68px;}
  .player.paused .big-play:hover{transform:scale(1);}
}
.flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;color:var(--paper);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:3;}
.player.loading .flash{display:none!important;}
.flash svg{width:60px;height:60px;fill:currentColor;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));}
.flash.show{animation:flashPop .55s var(--ease) forwards;}
@keyframes flashPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}22%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
/* ── Control bar ────────────────────────────────────────────────────────── */
.player.hold-controls .bottom-bar,.player.hold-controls .top-bar{opacity:1!important;transform:none!important;}
.bottom-bar{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 14px;background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.64) 30%,rgba(0,0,0,.3) 62%,transparent 100%);opacity:0;transform:translateY(10px);transition:opacity var(--dur-bar) var(--ease),transform var(--dur-bar) var(--ease);z-index:20;}
.player.controls-visible .bottom-bar,.player.paused .bottom-bar{opacity:1;transform:translateY(0);}
.progress-row{padding:8px 0 8px;}
.progress-track{position:relative;height:3px;border-radius:999px;background:var(--track);cursor:pointer;touch-action:none;transition:height .16s var(--ease);}
/* Invisible padding so the pointer target is ~26px tall without moving anything. */
.progress-track:before{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px;}
.progress-track:hover,.progress-track.scrubbing{height:5px;}
.progress-buffered{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.28);border-radius:inherit;width:0%;}
.progress-hover:after{content:"";position:absolute;right:0;top:50%;width:14px;height:14px;border-radius:50%;background:var(--paper);transform:translate(50%,-50%);opacity:0;}
.progress-track:hover .progress-hover:after{opacity:1;}
.progress-track.scrubbing .progress-hover:after{opacity:0;}
.progress-track:hover:not(.scrubbing) .progress-handle{visibility:hidden;}
.progress-hover{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.42);border-radius:inherit;width:0;pointer-events:none;}
.progress-fill{position:absolute;top:0;left:0;height:100%;background:var(--brand);border-radius:inherit;width:0%;}
.progress-handle{position:absolute;top:50%;left:0%;width:14px;height:14px;background:var(--paper);border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .28s var(--spring);box-shadow:0 2px 10px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.2);}
.progress-track:hover .progress-handle,.progress-track.scrubbing .progress-handle{transform:translate(-50%,-50%) scale(1);}
.progress-track.scrubbing .progress-handle{transform:translate(-50%,-50%) scale(1.25);}
.progress-tip{position:absolute;bottom:18px;left:0;transform:translate(-50%,4px);padding:6px 9px;border-radius:7px;background:var(--surface);border:1px solid var(--hairline);color:var(--paper);font:500 11px/1 var(--font-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;transition:opacity .16s var(--ease),transform .2s var(--ease);white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.5);}
.progress-track:hover .progress-tip,.progress-track.scrubbing .progress-tip{opacity:1;transform:translate(-50%,0);}
.controls-row{display:flex;align-items:center;gap:6px;}
.controls-left,.controls-right{display:flex;align-items:center;gap:2px;}
.controls-right{margin-left:auto;}
.ctrl-btn{position:relative;width:40px;height:40px;flex-shrink:0;padding:0;background:none;border:none;border-radius:50%;cursor:pointer;color:var(--paper);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform .2s var(--spring);}
.ctrl-btn:hover{background:rgba(255,255,255,.12);}
.ctrl-btn:active{transform:scale(.86);transition-duration:.06s;}
.ctrl-btn:focus-visible,.lb-btn:focus-visible,.lb-back:focus-visible,.lb-episodes:focus-visible,.lb-opt:focus-visible,.lb-sub-back:focus-visible,.lb-foot button:focus-visible,.lbe-card:focus-visible,.lbe-season:focus-visible,.lbe-auto:focus-visible,.lbe-close:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.ctrl-btn svg{width:22px;height:22px;fill:currentColor;pointer-events:none;transition:transform .2s var(--spring);}
.ctrl-btn:not(.play-btn):hover svg{transform:scale(1.1);}
.ctrl-btn .cut{fill:var(--bg);}
.ctrl-btn[hidden]{display:none;}
/* The button whose panel is open inverts to paper: unmistakable, and it stays
   that way until the panel closes. */
.ctrl-btn:has(+ .panel.show){background:var(--paper);color:#111;}
.ctrl-btn:has(+ .panel.show) .cut{fill:var(--paper);}
/* Hover tooltips: name plus shortcut, mono, delayed so a passing cursor never
   flickers them. Pointer devices only. */
.ctrl-btn[data-tip]:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);padding:7px 9px;border-radius:7px;background:var(--surface);border:1px solid var(--hairline);color:var(--paper);font:500 10.5px/1 var(--font-mono);letter-spacing:.06em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s var(--ease),transform .18s var(--ease);box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:30;}
.controls-right > div:last-child .ctrl-btn[data-tip]:after,.top-actions .ctrl-btn[data-tip]:after{left:auto;right:0;transform:translate(0,4px);}
.top-actions .ctrl-btn[data-tip]:after{bottom:auto;top:calc(100% + 10px);transform:translate(0,-4px);}
@media (hover:hover){
  .ctrl-btn[data-tip]:hover:after{opacity:1;transform:translate(-50%,0);transition-delay:.5s;}
  .controls-right > div:last-child .ctrl-btn[data-tip]:hover:after,.top-actions .ctrl-btn[data-tip]:hover:after{transform:translate(0,0);}
  .ctrl-btn:has(+ .panel.show)[data-tip]:after{display:none;}
}
.play-btn{width:44px;height:44px;display:grid;place-items:center;}
.play-btn svg{grid-area:1/1;width:26px;height:26px;transition:transform .26s var(--spring),opacity .16s var(--ease);}
.play-btn .icon-play{margin-left:3px;}
.player:not(.paused) .play-btn .icon-play,.player.paused .play-btn .icon-pause{opacity:0;transform:scale(.4) rotate(-60deg);}
.skip-btn svg{width:23px;height:23px;}
.time-label{margin:0 8px 0 6px;padding:0;border:0;background:none;cursor:pointer;min-height:36px;font:500 12px/1 var(--font-mono);letter-spacing:.02em;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;}
.time-label:focus-visible{outline:2px solid var(--paper);outline-offset:3px;}
.time-label b{color:var(--paper);font-weight:500;}
/* "· Ends at 10:33 PM" after the duration: the clock time the title finishes if played on from here. */
.time-end{display:flex;align-items:center;gap:8px;margin-left:-2px;font:500 12px/1 var(--font-mono);letter-spacing:.02em;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;}
.time-end:before{content:'';width:3px;height:3px;border-radius:50%;background:currentColor;}
.time-end b{color:var(--ink-2);font-weight:500;}
.time-end:empty{display:none;}
@media (max-width:560px){.time-end{display:none!important;}}
@media (max-width:320px){.time-end-prefix{display:none;}}
.volume-group{display:flex;align-items:center;}
.volume-track{width:0;height:3px;margin-right:0;border-radius:999px;background:var(--track);position:relative;cursor:pointer;transition:width .28s var(--ease),margin-right .28s var(--ease);}
.volume-track:before{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px;}
.volume-group:hover .volume-track,.volume-group:focus-within .volume-track{width:78px;margin-right:10px;}
.volume-fill{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--paper);border-radius:inherit;}
/* The handle must fade with the track — a 0-width slider still has a right
   edge, so an always-on dot floats next to the mute icon. */
.volume-fill:after{content:'';position:absolute;right:0;top:50%;width:11px;height:11px;border-radius:50%;background:var(--paper);transform:translate(50%,-50%) scale(0);box-shadow:0 2px 6px rgba(0,0,0,.5);transition:transform .24s var(--spring);}
.volume-group:hover .volume-fill:after,.volume-group:focus-within .volume-fill:after{transform:translate(50%,-50%) scale(1);}
.ep-label{flex:1;min-width:0;padding:0 14px;font:600 12.5px/1.2 var(--font-body);color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* ── Panels ─────────────────────────────────────────────────────────────── */
.panel{position:absolute;bottom:56px;right:0;min-width:236px;max-height:min(70vh,540px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;background:var(--glass);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--hairline);border-radius:14px;padding:8px;box-shadow:0 30px 80px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.06);z-index:25;opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;pointer-events:none;transition:opacity .16s var(--ease),transform .3s var(--spring);}
.panel.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.panel::-webkit-scrollbar{width:6px;}
.panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px;}
.panel-header{padding:10px 12px 6px;font:500 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.panel-divider{height:1px;background:var(--hairline);margin:6px 6px;}
.panel-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:38px;background:none;border:none;color:var(--ink-2);font:600 13px/1.2 var(--font-body);text-align:left;padding:9px 12px;border-radius:9px;cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease),transform .14s var(--ease);}
.panel-item:hover{background:rgba(255,255,255,.08);color:var(--paper);}
.panel-item:active{transform:scale(.985);}
.panel-item.active{color:var(--paper);}
.panel-item .check{width:16px;height:16px;fill:var(--brand);opacity:0;transform:scale(.5);flex-shrink:0;transition:opacity .16s var(--ease),transform .28s var(--spring);}
.panel-item.active .check{opacity:1;transform:scale(1);}
.panel-item .tag{margin-left:8px;padding:3px 6px;border:1px solid var(--hairline-strong);border-radius:4px;color:var(--ink-2);font:500 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;vertical-align:1px;}
.subs-panel{min-width:336px;padding:6px 10px 10px;}
.subs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 6px 10px;margin-bottom:6px;border-bottom:1px solid var(--hairline);}
.subs-title{color:var(--paper);font:500 15px/1 var(--font-display);letter-spacing:-.02em;}
.subs-link{background:none;border:0;color:var(--ink-3);font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:4px 0;transition:color .14s var(--ease);}
.subs-link:hover{color:var(--paper);}
.subs-back{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-right:2px;border:0;border-radius:50%;background:none;color:var(--paper);cursor:pointer;transition:background .14s var(--ease),transform .2s var(--spring);}
.subs-back:hover{background:rgba(255,255,255,.1);}
.subs-back:active{transform:scale(.86);}
.subs-back svg{width:20px;height:20px;fill:currentColor;}
.subs-back[hidden]{display:none;}
.subs-head .subs-back+.subs-title{flex:1;}
.row-icon{width:18px;height:18px;fill:currentColor;opacity:.7;flex:none;transition:transform .2s var(--ease),opacity .14s;}
.panel-item:hover .row-icon{opacity:1;transform:translateX(2px);}
.subs-search{display:flex;align-items:center;gap:8px;margin:8px 2px 6px;padding:0 12px;height:38px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid var(--hairline);transition:border-color .14s var(--ease);}
.subs-search:focus-within{border-color:var(--hairline-strong);}
.subs-search svg{width:16px;height:16px;fill:var(--ink-3);flex:none;}
.subs-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);font:600 13px var(--font-body);}
.subs-search input::placeholder{color:var(--ink-3);}
.subs-search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.flag{display:inline-block;width:26px;font-size:18px;line-height:1;margin-right:8px;text-align:center;flex:none;}
.panel-item .row-label{display:flex;align-items:center;min-width:0;}
.panel-item.hidden{display:none;}
.subs-label{display:block;padding:12px 6px 6px;color:var(--ink-3);font:500 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;}
.subs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.subs-row span:last-child{color:var(--paper);font:500 11px/1 var(--font-mono);letter-spacing:.04em;text-transform:none;}
.subs-range{-webkit-appearance:none;appearance:none;display:block;width:calc(100% - 12px);height:24px;margin:0 6px 4px;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;--a:0px;--b:0px;}.subs-range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--track) var(--a),var(--paper) var(--a),var(--paper) var(--b),var(--track) var(--b));}.subs-range::-moz-range-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--track) var(--a),var(--paper) var(--a),var(--paper) var(--b),var(--track) var(--b));}.subs-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--paper);box-shadow:0 1px 6px rgba(0,0,0,.55);transition:transform .2s var(--spring),box-shadow .16s var(--ease);}.subs-range::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--paper);box-shadow:0 1px 6px rgba(0,0,0,.55);transition:transform .2s var(--spring),box-shadow .16s var(--ease);}.subs-range:hover::-webkit-slider-thumb,.subs-range:active::-webkit-slider-thumb{transform:scale(1.15);}.subs-range:hover::-moz-range-thumb,.subs-range:active::-moz-range-thumb{transform:scale(1.15);}.subs-range:focus{outline:none;}.subs-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(255,255,255,.22),0 1px 6px rgba(0,0,0,.55);}.subs-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(255,255,255,.22),0 1px 6px rgba(0,0,0,.55);}.subs-range.bipolar{background:linear-gradient(var(--hairline-strong),var(--hairline-strong)) center/2px 12px no-repeat;}.subs-reset{background:none;border:0;padding:0;color:var(--ink-2);font:500 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .14s var(--ease);}.subs-reset:hover{color:var(--paper);}.subs-reset[hidden]{display:none;}
.delay-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:2px 4px 8px;}
.delay-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border:1px solid var(--hairline);border-radius:9px;background:rgba(255,255,255,.04);color:var(--ink-2);font:600 11.5px var(--font-body);cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease),transform .14s var(--ease);}
.delay-btn:hover{background:rgba(255,255,255,.1);color:var(--paper);}
.delay-btn:active{transform:scale(.97);}
.delay-arrow{font-size:16px;line-height:1;color:var(--paper);}
.delay-num{display:flex;align-items:center;justify-content:center;gap:4px;border-radius:9px;border:1px solid var(--hairline);background:rgba(255,255,255,.04);color:var(--paper);font:500 14px var(--font-mono);}
.delay-num input{width:3ch;max-width:8ch;background:none;border:0;outline:0;color:var(--paper);font:500 14px var(--font-mono);text-align:center;-moz-appearance:textfield;}
.delay-num input::-webkit-inner-spin-button,.delay-num input::-webkit-outer-spin-button{-webkit-appearance:none;}
.delay-num span{color:var(--ink-2);font-size:12px;}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin:2px 4px 6px;padding:3px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--hairline);}
.seg button{padding:9px 4px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:600 12.5px var(--font-body);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease);}
.seg button.active{background:var(--paper);color:#111;}
.switch{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer;flex:none;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch-track{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid var(--hairline);transition:background .2s var(--ease),border-color .2s var(--ease);}
.switch-track:before{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--paper);transition:transform .26s var(--spring);}
.switch input:checked+.switch-track{background:var(--brand);border-color:var(--brand);}
.switch input:checked+.switch-track:before{transform:translateX(18px);}
.switch input:focus-visible+.switch-track{outline:2px solid var(--brand);outline-offset:2px;}
.swatches{display:flex;align-items:center;gap:8px;}
.swatch{position:relative;width:28px;height:28px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;background-clip:content-box;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);transition:transform .2s var(--spring),border-color .14s var(--ease);}
.swatch:hover{transform:scale(1.1);}
.swatch.active{border-color:var(--paper);}
.swatch.active:after{content:'';position:absolute;left:9px;top:5px;width:5px;height:10px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg);}
.swatch-custom{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);box-shadow:none;}
.swatch-custom svg{width:15px;height:15px;fill:var(--paper);}
.swatch-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
.swatch-custom.active{background:var(--brand);}
.swatch-custom.active:after{display:none;}
.subtitle-view[hidden]{display:none;}
.settings-view[hidden]{display:none;}
/* Views slide in from the right so the panel reads as one object with depth,
   not three menus swapping. */
@keyframes viewIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:none;}}
.settings-view:not([hidden]),.subtitle-view:not([hidden]){animation:viewIn .24s var(--ease);}
/* Settings home: a list of rows, value on the right, like a remote's menu. */
.tiles{display:grid;gap:2px;padding:2px 0;}
.tile{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:8px 12px;border:0;border-radius:9px;background:none;color:var(--paper);text-align:left;cursor:pointer;transition:background .14s var(--ease),transform .14s var(--ease);}
.tile:hover{background:rgba(255,255,255,.08);}
.tile:active{transform:scale(.985);}
.tile-k{display:flex;align-items:center;gap:12px;color:var(--paper);font:600 13px/1.2 var(--font-body);}
.tile-k svg{width:18px;height:18px;fill:currentColor;opacity:.75;flex:none;}
/* The value clips long labels with an ellipsis, so the chevron is anchored to
   the ROW, not drawn inside the clipped span (its rotated corner was cut). */
.tile-v{display:block;max-width:52%;padding-right:17px;color:var(--ink-3);font:500 11px/1 var(--font-mono);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .14s var(--ease);}
.tile:hover .tile-v{color:var(--paper);}
.tile-v:after{content:'';position:absolute;right:15px;top:50%;width:6px;height:6px;margin-top:-4px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.7;transition:transform .2s var(--ease);}
.tile:hover .tile-v:after{transform:rotate(45deg) translate(1px,-1px);}
.menu-icon{width:18px;height:18px;margin-right:12px;fill:currentColor;opacity:.75;flex:none;}
.menu-row{cursor:default;}
.menu-row:hover{background:none;}
.menu-row .row-label{color:var(--paper);}
/* ── Buffering ──────────────────────────────────────────────────────────── */
.loader{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:1;pointer-events:none;}
.loader.show{display:flex;}
/* A bordered card on a dimmed frame reads as a dialog — as if something
   broke. Scrim only the middle, so the picture stays legible at the edges
   and the viewer can see they are still on their film. */
.loader:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,.22) 24%,transparent 48%);}
.loader-inner{position:relative;display:grid;justify-items:center;gap:14px;}
.loader-ring{width:clamp(30px,7vmin,46px);height:clamp(30px,7vmin,46px);border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--paper);animation:spin .8s linear infinite;}
/* Held back ~1.8s: a quick re-buffer should be a ring and nothing else.
   Restarts on its own because .loader goes display:none between stalls. */
.loader-status{opacity:0;color:var(--ink-2);font:500 10.5px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:0 16px;animation:loaderText .35s 1.8s forwards;}
@keyframes loaderText{to{opacity:1;}}
/* Pinned to the top edge, readable even if the ring is missed mid-glance. */
.loader-bar{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;background:rgba(255,255,255,.05);}
.loader-bar:after{content:'';position:absolute;top:0;left:0;height:100%;width:36%;background:linear-gradient(90deg,transparent,var(--brand),transparent);transform:translateX(-110%);animation:loaderSweep 1.25s ease-in-out infinite;}
@keyframes loaderSweep{to{transform:translateX(320%);}}
@keyframes spin{to{transform:rotate(360deg);}}
/* ── Captions, skip intro, next up ──────────────────────────────────────── */
.caption-overlay{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);max-width:80%;padding:6px 12px;background:rgba(0,0,0,.65);color:#fff;font:500 17px/1.4 var(--font-body);text-align:center;text-shadow:none;border-radius:4px;opacity:0;transition:bottom var(--dur-bar) var(--ease),opacity var(--dur) var(--ease);z-index:2;pointer-events:none;white-space:pre-line;unicode-bidi:plaintext;}
/* plaintext: each cue line takes its direction from its first letter. The page is LTR, so without it
   an Arabic line's closing "!" or "?" lands on the right, i.e. at the start of the sentence (2026-10-23). */
.caption-overlay.show{opacity:1;}
.player.controls-visible .caption-overlay,.player.paused .caption-overlay{bottom:110px;}
.intro-skip{position:absolute;right:20px;bottom:96px;z-index:5;display:none;border:0;border-radius:6px;padding:11px 16px;background:var(--paper);color:#111;font:700 12px/1 var(--font-body);letter-spacing:-.01em;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform .2s var(--spring),background .14s var(--ease);animation:riseIn .4s var(--ease) both;}
.intro-skip.show{display:block;}
.intro-skip:hover{background:#fff;transform:translateY(-1px);}
.intro-skip:active{transform:scale(.96);}
@keyframes riseIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.next-up-card{position:absolute;right:28px;bottom:96px;z-index:6;display:none;align-items:center;gap:14px;max-width:min(440px,calc(100% - 56px));padding:12px 12px 12px 16px;border:1px solid var(--hairline);border-radius:12px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);color:var(--paper);animation:riseIn .4s var(--ease) both;}
.next-up-card.show{display:flex;}
.next-up-still{flex:0 0 112px;width:112px;aspect-ratio:16/9;border-radius:6px;object-fit:cover;background:#17171b;}
.next-up-still[hidden]{display:none;}
.next-up-copy{display:grid;gap:4px;min-width:0;}
.next-up-copy span,.next-up-copy small{color:var(--ink-3);font:500 9.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;}
.next-up-copy span{color:var(--brand);}
.next-up-copy strong{overflow:hidden;font:500 16px/1.15 var(--font-display);letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.next-up-copy small b{color:var(--paper);font-weight:500;}
.next-up-card button{border:0;border-radius:6px;padding:10px 14px;background:var(--paper);color:#111;font:700 12px/1 var(--font-body);cursor:pointer;white-space:nowrap;transition:transform .2s var(--spring),background .14s var(--ease);}
.next-up-card button:hover{background:#fff;transform:translateY(-1px);}
.next-up-card button:active{transform:scale(.96);}
.next-up-card .next-up-cancel{padding:10px 8px;background:transparent;color:var(--ink-3);font-weight:600;}
.next-up-card .next-up-cancel:hover{background:transparent;color:var(--paper);transform:none;}
/* ── Pause card ─────────────────────────────────────────────────────────── */
.pause-veil{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.08) 100%);transition:opacity .7s var(--ease);}
.pause-card{position:absolute;left:36px;right:36px;bottom:124px;z-index:5;max-width:min(640px,74%);pointer-events:none;}
.pause-card-in>*{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .7s var(--ease);}
.player.show-pause-card .pause-veil{opacity:1;}
.player.show-pause-card .bottom-bar,.player.show-pause-card .intro-skip{opacity:0!important;transform:translateY(10px)!important;pointer-events:none!important;}
/* An open menu covers the bottom-right corner; Skip intro and Up Next used to peek out beside it. */
.player:has(.panel.show) .intro-skip,.player:has(.panel.show) .next-up-card{opacity:0!important;pointer-events:none!important;}
.player.show-pause-card .top-bar,.player.show-pause-card .top-actions{opacity:0!important;transform:translateY(-8px)!important;pointer-events:none!important;}
.player.show-pause-card .big-play{opacity:0!important;transform:scale(.7)!important;}
.player.show-pause-card .center-skip{opacity:0!important;pointer-events:none!important;}
.player.show-pause-card .center-toggle{cursor:none;}
.player.show-pause-card .pause-card-in>*{opacity:1;transform:none;}
.player.show-pause-card .pause-card-in>:nth-child(2){transition-delay:.08s;}
.player.show-pause-card .pause-card-in>:nth-child(3){transition-delay:.16s;}
.player.show-pause-card .pause-card-in>:nth-child(4){transition-delay:.24s;}
.pause-kicker{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:var(--ink-2);font:500 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;}
.pause-kicker span{color:var(--brand);}
.pause-kicker span:after{content:'';display:inline-block;width:22px;height:1px;margin-left:12px;vertical-align:middle;background:var(--hairline-strong);}
.pause-title{margin:0;font:500 clamp(26px,4.2vw,54px)/.98 var(--font-display);letter-spacing:-.04em;color:var(--paper);text-wrap:balance;}
.pause-logo{display:block;width:auto;height:auto;max-width:min(440px,100%);max-height:clamp(56px,9vw,120px);filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));}
.pause-logo+.pause-title-text{display:none;}
.pause-meta{display:flex;flex-wrap:wrap;gap:8px 0;margin:16px 0 0;color:var(--ink-2);font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;}
.pause-meta span+span:before{content:'·';margin:0 10px;color:var(--ink-3);}
.pause-meta b{color:var(--paper);font-weight:500;}
.pause-overview{margin:16px 0 0;max-width:54ch;color:var(--ink-2);font:500 14px/1.65 var(--font-body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:560px){.pause-card{left:16px;right:16px;bottom:96px;max-width:none;}.pause-kicker{margin-bottom:8px;}.pause-title{font-size:24px;}.pause-logo{max-width:70%;max-height:64px;}.pause-meta{margin-top:10px;font-size:9.5px;}.pause-overview{margin-top:10px;font-size:12.5px;line-height:1.5;-webkit-line-clamp:2;}}
/* Sized by HEIGHT too (2026-10-09): a phone's inline 16:9 player is 155-240 px tall (184 on 7movies at 375 px
   wide), and the card, 96 px up and ~133 px tall, ran 45 px off the top. Short: logo, one meta line, no overview. */
@media (max-height:440px){.pause-card{bottom:52px;}.pause-kicker{margin-bottom:8px;}.pause-logo{max-height:52px;}.pause-meta{margin-top:10px;}.pause-overview{margin-top:10px;font-size:13px;line-height:1.5;-webkit-line-clamp:2;}}
@media (max-height:300px){.pause-veil{background:linear-gradient(0deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.12) 100%);}.pause-card{left:14px;right:14px;bottom:14px;max-width:none;}.pause-kicker{margin-bottom:6px;font-size:9px;}.pause-title{font-size:20px;}.pause-logo{max-width:60%;max-height:40px;}.pause-meta{margin-top:7px;font-size:9px;flex-wrap:nowrap;white-space:nowrap;}.pause-meta span:nth-child(n+4){display:none;}.pause-overview{display:none;}}
/* ── Labelled layout (?layout=labeled, 2026-10-08) ──────────────────────────
   Words instead of icons: title + episode name top-left, Quality / Audio & Subtitles /
   Next Episode top-right, a centred Episodes drawer toggle below. Same skin, new structure. */
.lb{position:absolute;top:0;left:0;right:0;z-index:6;display:none;align-items:center;gap:16px;padding:16px 20px 44px;background:linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.42) 55%,transparent 100%);opacity:0;transform:translateY(-8px);transition:opacity var(--dur-bar) var(--ease),transform var(--dur-bar) var(--ease);pointer-events:none;}
.player.layout-labeled .lb{display:flex;}
.player.layout-labeled.controls-visible .lb,.player.layout-labeled.paused .lb,.player.layout-labeled.hold-controls .lb{opacity:1;transform:none;pointer-events:auto;}
.player.layout-labeled.locked .lb,.player.layout-labeled.show-pause-card .lb{opacity:0!important;pointer-events:none!important;}
/* While the preroll card is up only the exit=1 Back arrow of the bar shows, above the card (z 50): a page that
   hands the player its back control (7movies, 2026-10-15) must not leave the viewer without one while loading. */
.player.layout-labeled.is-prerolling .lb{opacity:1!important;transform:none;pointer-events:none!important;background:none;z-index:51;}
.player.layout-labeled.is-prerolling .lb>:not(.lb-back){opacity:0;pointer-events:none;}
.player.layout-labeled.is-prerolling .lb-back{pointer-events:auto;}
.lb-back{flex-shrink:0;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--paper);cursor:pointer;display:grid;place-items:center;transition:background .14s var(--ease);}
.lb-back:hover{background:rgba(255,255,255,.1);}
.lb-back svg{width:24px;height:24px;fill:currentColor;}
.lb-title{min-width:0;display:grid;gap:4px;}
.lb-name{font:500 18px/1.3 var(--font-display);letter-spacing:-.02em;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Under the title: "S1 · E3" in the mono label voice, then the episode's own name in reading type. This was
   .lb-sub until 2026-10-23, a name the menus' slide-in sub-view took on 10-15 with a bare display:none, which
   hid the line on every embed for eight days. */
.lb-meta{display:flex;align-items:baseline;gap:10px;min-width:0;white-space:nowrap;}
.lb-meta b{flex-shrink:0;color:var(--ink-2);font:500 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;}
.lb-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--paper);opacity:.84;font:500 13px/1.2 var(--font-body);}
.lb-actions{margin-left:auto;display:flex;gap:2px;flex-shrink:0;}
.lb-btn{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--paper);font:600 13px/1 var(--font-body);cursor:pointer;transition:background .14s var(--ease);-webkit-tap-highlight-color:transparent;}
.lb-btn:hover{background:rgba(255,255,255,.1);}
.lb-btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0;}
.lb-val{color:var(--ink-2);font:500 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;}
.lb-val:empty{display:none;}
.lb-back[hidden],.lb-btn[hidden]{display:none!important;}
.player.hide-title .lb-title{display:none;}
/* vidrift:title-control: the page prints the title beside the player, which it cannot do in fullscreen. */
.player.title-by-parent:not(.is-fs) .lb-title{display:none;}
.lb-btn.active{background:rgba(255,255,255,.1);}
.lb-server{display:none;}
@media (max-width:560px){.player.layout-labeled .lb-server{display:flex;}.player.layout-labeled .lb-server[hidden]{display:none;}}
.lb-menu{position:absolute;top:58px;left:16px;z-index:26;display:none;width:376px;max-width:calc(100% - 24px);max-height:min(70vh,520px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;padding:8px;background:var(--glass);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top left;transition:opacity .16s var(--ease),transform .3s var(--spring),height .28s var(--ease);pointer-events:none;}
.player.layout-labeled .lb-menu{display:block;}
.lb-menu.show{opacity:1;transform:none;pointer-events:auto;}
.lb-main{padding:2px;}
.lb-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.lb-col{min-width:0;max-height:min(52vh,360px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;padding-bottom:2px;}
.lb-col h4{margin:0;padding:10px 12px 8px;font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.lb-opt+h4{margin-top:8px;}
.lb-opt{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--ink-2);font:500 13.5px/1.4 var(--font-body);text-align:left;cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease);-webkit-tap-highlight-color:transparent;}
.lb-opt>span:first-child{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.lb-opt:hover{background:rgba(255,255,255,.07);color:var(--paper);}
.lb-opt.active{color:var(--paper);}
.lb-check{flex-shrink:0;width:16px;height:16px;fill:currentColor;opacity:0;transform:scale(.8);transition:opacity .14s var(--ease),transform .25s var(--spring);}
.lb-opt.active .lb-check{opacity:1;transform:none;}
.lb-opt .tag{padding:3px 6px;border:1px solid var(--hairline-strong);border-radius:4px;color:var(--ink-3);font:500 9px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;}
.lb-empty{padding:10px 12px;color:var(--ink-3);font:500 12.5px/1.5 var(--font-body);}
.lb-more{margin-top:8px;padding-top:8px;border-top:1px solid var(--hairline);}
.lb-drill{color:var(--paper);}
.lb-drill em{flex-shrink:0;font:500 12.5px/1.4 var(--font-body);font-style:normal;color:var(--ink-3);}
.lb-drill svg{flex-shrink:0;width:18px;height:18px;margin-right:-4px;fill:var(--ink-3);}
.lb-sub{display:none;}
.lb-sub-head{display:flex;align-items:center;gap:6px;padding:2px 2px 8px;margin-bottom:6px;border-bottom:1px solid var(--hairline);}
.lb-sub-back{flex-shrink:0;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--paper);cursor:pointer;display:grid;place-items:center;transition:background .14s var(--ease);}
.lb-sub-back:hover{background:rgba(255,255,255,.1);}
.lb-sub-back svg{width:20px;height:20px;fill:currentColor;}
.lb-sub-title{color:var(--paper);font:500 15px/1.3 var(--font-display);letter-spacing:-.02em;text-transform:none;}
.lb-sub-body{padding:0 2px 2px;}
.lb-sub .subs-head{display:none;}
.lb-sub.mode-sync .subtitle-view>:nth-child(n+5){display:none;}
.lb-sub.mode-appearance .subtitle-view>:nth-child(-n+5){display:none;}
.lb-menu.in-sub .lb-main{position:absolute;top:8px;left:8px;right:8px;pointer-events:none;animation:lbMainOut .22s var(--ease) forwards;}
.lb-menu.in-sub .lb-sub{display:block;animation:lbSubIn .28s var(--ease);}
.lb-menu.back .lb-main{animation:lbMainIn .24s var(--ease);}
@keyframes lbSubIn{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}}
@keyframes lbMainOut{to{opacity:0;transform:translateX(-28px);}}
@keyframes lbMainIn{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.lb-menu{transition:opacity .16s var(--ease);}.lb-menu.in-sub .lb-main,.lb-menu.in-sub .lb-sub,.lb-menu.back .lb-main{animation:none;}}
.lb-episodes-view{position:absolute;inset:0;z-index:40;display:none;flex-direction:column;background:var(--bg);color:var(--paper);overflow:hidden;cursor:default;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s linear .24s;}
.player.layout-labeled .lb-episodes-view{display:flex;}
.player.layout-labeled .lb-episodes-view.show{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .5s var(--spring);}
@keyframes lbeRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.lb-episodes-view.show .lbe-head{animation:lbeRise .4s var(--ease) both;}
.lb-episodes-view.show .lbe-body{animation:lbeRise .5s var(--ease) .08s both;}
@media (prefers-reduced-motion:reduce){.lb-episodes-view,.lb-episodes-view.show .lbe-head,.lb-episodes-view.show .lbe-body{transition:none;animation:none;}}
.lbe-head{display:flex;align-items:flex-end;gap:16px;padding:28px 40px 20px;}
.lbe-ttl{min-width:0;margin-right:auto;}
.lbe-show{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:var(--ink-2);font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lbe-show:before{content:'';flex-shrink:0;width:22px;height:1px;background:var(--hairline-strong);}
.lbe-head h2{margin:0;font:500 36px/1 var(--font-display);letter-spacing:-.04em;}
.lbe-auto{display:flex;align-items:center;gap:10px;height:40px;padding:0;border:0;background:none;color:var(--ink-2);font:500 12.5px/1 var(--font-body);cursor:pointer;transition:color .14s var(--ease);}
.lbe-auto:hover,.lbe-auto.on{color:var(--paper);}
.lbe-auto .sw{position:relative;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.18);transition:background .2s var(--ease);}
.lbe-auto .sw:after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--paper);transition:transform .25s var(--spring);}
.lbe-auto.on .sw{background:var(--brand);}
.lbe-auto.on .sw:after{transform:translateX(14px);}
.lbe-close{margin-left:8px;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--paper);cursor:pointer;display:grid;place-items:center;}
.lbe-close:hover{background:rgba(255,255,255,.1);}
.lbe-close svg{width:22px;height:22px;fill:currentColor;}
.lbe-body{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;padding:0 40px;}
.lbe-seasons{overflow:auto;display:grid;gap:2px;align-content:start;padding:6px 0 28px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;}
.lbe-season{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border:0;background:none;color:var(--ink-3);font:500 17px/1.2 var(--font-display);letter-spacing:-.02em;text-align:left;cursor:pointer;transition:color .14s var(--ease);}
.lbe-season small{color:var(--ink-3);font:500 10px/1 var(--font-mono);letter-spacing:.1em;font-variant-numeric:tabular-nums;}
.lbe-season:hover{color:var(--ink-2);}
.lbe-season.active{color:var(--paper);}
.lbe-season.active small{color:var(--ink-2);}
.lbe-list{overflow:auto;display:block;padding:0 12px 28px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;mask-image:linear-gradient(to bottom,#000 calc(100% - 32px),transparent);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 32px),transparent);}
.lbe-card{display:grid;grid-template-columns:32px 148px minmax(0,1fr);gap:0 18px;align-items:center;width:100%;padding:14px 0;border:0;border-top:1px solid var(--hairline);background:none;color:var(--paper);text-align:left;cursor:pointer;}
.lbe-card:first-child{border-top:0;padding-top:6px;}
.lbe-idx{color:var(--ink-3);font:500 12px/1 var(--font-mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.lbe-card.active .lbe-idx{color:var(--brand);}
.lbe-thumb{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#17171b;}
.lbe-thumb img{display:block;width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .18s var(--ease);}
.lbe-card:hover .lbe-thumb img,.lbe-card.active .lbe-thumb img{opacity:1;}
.lbe-num{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font:500 16px/1 var(--font-mono);}
.lbe-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18);}
.lbe-prog b{display:block;height:100%;background:var(--brand);}
.lbe-copy{display:grid;gap:6px;min-width:0;}
.lbe-row{display:flex;align-items:baseline;gap:10px;min-width:0;}
.lbe-row strong{color:var(--ink-2);font:500 16px/1.4 var(--font-body);letter-spacing:-.01em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:color .14s var(--ease);}
.lbe-card:hover .lbe-row strong,.lbe-card.active .lbe-row strong{color:var(--paper);}
.lbe-row small{flex-shrink:0;color:var(--ink-3);font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;}
.lbe-row small.lbe-now{color:var(--brand);}
.lbe-copy p{margin:0;color:var(--ink-3);font:500 13px/1.5 var(--font-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lbe-card.active .lbe-copy p{color:var(--ink-2);}
@media (max-width:900px){.lbe-head{align-items:center;padding:18px 20px 12px;}.lbe-head h2{font-size:26px;}.lbe-body{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:8px;padding:0 20px;}.lbe-seasons{grid-auto-flow:column;grid-auto-columns:max-content;gap:18px;overflow-x:auto;padding:0 0 10px;}.lbe-season{padding:6px 0;font-size:15px;}.lbe-list{padding:0 0 16px;}.lbe-card{grid-template-columns:22px 104px minmax(0,1fr);gap:0 12px;padding:10px 0;}.lbe-copy p{display:none;}}
/* Labeled layout tools: Lock / PiP / Cast ride beside fullscreen in the bottom bar (cloned from the icon buttons). */
.lb-tool{display:none;}
.player.layout-labeled .lb-tool{display:flex;}
.player.layout-labeled .lb-tool[hidden]{display:none;}
.lb-tool .icon-locked,.lb-tool .lock-label{display:none!important;}
.player.hide-lock #lb_lockBtn,.player.hide-pip #lb_pipBtn,.player.hide-cast #lb_castBtn{display:none!important;}
/* vidrift:cast asks for the click a device picker needs: the bar stays up and the Cast button inverts to paper,
   the way the button of an open panel does, with its tip pinned open. Wins over hide=cast for those 8 seconds. */
.player.cast-ask .bottom-bar{opacity:1!important;transform:none!important;}
.player.cast-ask #lb_castBtn{display:flex!important;background:var(--paper);color:#111;}
.player.cast-ask #lb_castBtn:after{content:'Click to cast';opacity:1;left:auto;right:0;transform:none;transition-delay:0s;}
@media (hover:none){.player.cast-ask #lb_castBtn:after{content:'Tap to cast';}}
/* Locked: the Unlock pill lives in .top-actions, which the labeled layout otherwise hides. */
.player.layout-labeled.locked .top-actions{display:flex!important;}
.lb-center,.lb-fs,.lb-episodes{display:none;}
.player.layout-labeled .lb-center{flex:1;display:flex;justify-content:center;min-width:0;}
@media (min-width:700px){.player.layout-labeled .controls-row{position:relative;}.player.layout-labeled .lb-episodes{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}}
/* 561-760px: drop the Auto · Server readout so the title keeps its room. */
@media (max-width:760px){.player.layout-labeled .lb-val{display:none;}}
.player.layout-labeled .lb-episodes{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--paper);font:600 13px/1 var(--font-body);cursor:pointer;transition:background .14s var(--ease);}
.player.layout-labeled .lb-episodes[hidden]{display:none;}
.lb-episodes:hover{background:rgba(255,255,255,.1);}
.lb-episodes svg{width:16px;height:16px;fill:currentColor;transition:transform .22s var(--ease);}
.lb-episodes.open svg{transform:rotate(180deg);}
.player.layout-labeled .lb-fs{display:flex;}
.player.layout-labeled .top-bar,.player.layout-labeled .top-actions,.player.layout-labeled .controls-right,.player.layout-labeled .ep-label{display:none!important;}
.lb-foot{display:none;flex-direction:column;gap:2px;padding:8px 0 0;margin-top:8px;border-top:1px solid var(--hairline);}
.player.layout-labeled .lb-foot{display:flex;}
.lb-foot button{display:flex;align-items:center;width:100%;min-height:38px;padding:9px 12px;border:0;border-radius:9px;background:none;color:var(--ink-2);font:600 13px/1.2 var(--font-body);text-align:left;cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease);}
.lb-foot button:hover{background:rgba(255,255,255,.08);color:var(--paper);}
.lb-foot button[hidden]{display:none;}
@media (min-width:561px){
  .player.layout-labeled .panel{top:62px;bottom:auto;right:20px;transform:translateY(-8px) scale(.96);transform-origin:top right;}
  .player.layout-labeled .panel.show{transform:translateY(0) scale(1);}
  .player.layout-labeled .episodes-panel{top:auto;bottom:74px;left:50%;right:auto;transform:translate(-50%,8px) scale(.96);transform-origin:bottom center;}
  .player.layout-labeled .episodes-panel.show{transform:translate(-50%,0) scale(1);}
}
@media (max-width:560px){.lb{padding:10px 10px 36px;gap:8px;}.lb-name{font-size:15px;}.lb-meta span{font-size:12px;}.lb-text{display:none;}.lb-btn{padding:0 8px;}.lb-val{display:none!important;}
  /* The worded Episodes button is ~70px wider than the icon it replaces: drop the total duration (the icon layout only drops it under 430px) and the PiP clone (#pipBtn is already hidden on phones) so the bar fits a 431-560px phone without the clock running into Episodes. */
  .player.layout-labeled .time-dur,.player.layout-labeled .time-end,#lb_pipBtn{display:none!important;}}
/* ── Episode picker ─────────────────────────────────────────────────────── */
.episodes-panel{top:66px;bottom:auto;right:20px;transform:translateY(-8px) scale(.96);transform-origin:top right;min-width:300px;width:min(470px,calc(100vw - 24px));max-height:min(72vh,620px);padding:6px 8px 8px;}
.ep-seasons{display:flex;flex-wrap:wrap;gap:4px;padding:6px 4px 10px;margin-bottom:4px;border-bottom:1px solid var(--hairline);}
.ep-season{padding:7px 10px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink-3);font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;cursor:pointer;transition:color .14s var(--ease),background .14s var(--ease),border-color .14s var(--ease);}
.ep-season:hover{color:var(--paper);background:rgba(255,255,255,.07);}
.ep-season.active{color:var(--paper);border-color:var(--hairline-strong);}
.ep-item{justify-content:flex-start;align-items:center;gap:14px;padding:8px;}
.ep-item.active{align-items:flex-start;}
.ep-thumb,.ep-thumb-num{flex:0 0 124px;width:124px;aspect-ratio:16/9;border-radius:6px;background:#17171b;display:block;object-fit:cover;}
.ep-thumb-num{display:grid;place-items:center;background:linear-gradient(135deg,#1e1e23,#101013);color:var(--ink-3);font:500 15px/1 var(--font-mono);}
.ep-item.active .ep-thumb,.ep-item.active .ep-thumb-num{outline:2px solid var(--brand);outline-offset:-2px;}
.ep-copy{display:grid;gap:4px;min-width:0;padding-top:2px;}
.ep-copy strong{font:600 13px/1.25 var(--font-body);color:var(--paper);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ep-copy small{color:var(--ink-3);font:500 9.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;}
.ep-item.active .ep-copy small{color:var(--brand);}
.ep-copy p{display:none;margin:4px 0 0;color:var(--ink-2);font:500 11.5px/1.45 var(--font-body);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ep-item.active .ep-copy p{display:-webkit-box;}
@media (max-width:560px){.episodes-panel{width:calc(100vw - 16px);max-height:70vh;}.ep-thumb,.ep-thumb-num{flex-basis:96px;width:96px;}.ep-copy p{display:none;}}
@media (max-width:560px){.next-up-card{right:10px;bottom:76px;max-width:calc(100% - 20px);gap:8px;padding:10px;}.next-up-still{flex-basis:72px;width:72px;}.next-up-copy strong{font-size:13px;}.next-up-copy small{display:none;}.next-up-card button{padding:9px 10px;font-size:11px;}}
/* ── Fatal ──────────────────────────────────────────────────────────────── */
.fatal{position:absolute;inset:0;z-index:60;display:none;cursor:default;align-items:center;justify-content:center;padding:24px;background:var(--bg);color:var(--paper);text-align:center;}
.fatal.show{display:flex;}
.fatal:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.fatal-card{position:relative;max-width:min(420px,100%);display:grid;justify-items:center;gap:8px;animation:prerollIn .5s var(--ease) both;}
.fatal-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:10px;border-radius:50%;border:1px solid var(--hairline-strong);background:rgba(255,255,255,.04);}
.fatal-icon svg{width:22px;height:22px;fill:var(--ink-2);}
.fatal-card h2{margin:0;font:500 28px/1 var(--font-display);letter-spacing:-.035em;text-wrap:balance;}
.fatal-card p{margin:0;color:var(--ink-3);font:500 13px/1.6 var(--font-body);}
.fatal-actions{display:flex;gap:8px;margin-top:18px;}
.fatal-btn{height:44px;padding:0 20px;border:1px solid transparent;border-radius:6px;background:var(--paper);color:#111;font:700 13px/1 var(--font-body);letter-spacing:-.01em;cursor:pointer;transition:transform .2s var(--spring),background .14s var(--ease),border-color .14s var(--ease);}
.fatal-btn:hover{transform:translateY(-1px);background:#fff;}
.fatal-btn:active{transform:scale(.97);}
.fatal-btn.ghost{background:rgba(255,255,255,.08);border-color:var(--hairline);color:var(--paper);}
.fatal-btn.ghost:hover{background:rgba(255,255,255,.14);border-color:var(--hairline-strong);}
.fatal-note{margin-top:16px;color:var(--ink-3);opacity:.7;font:500 9.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;}
.fatal-discord{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:11px 16px;border-radius:6px;border:1px solid rgba(88,101,242,.42);background:rgba(88,101,242,.12);color:#c3caff;font:700 12px/1 var(--font-body);text-decoration:none;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .2s var(--spring);}
.fatal-discord:hover{background:rgba(88,101,242,.24);border-color:rgba(88,101,242,.72);transform:translateY(-1px);}
.fatal-discord svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto;}
.fatal-exit{position:absolute;top:18px;right:20px;zoom:var(--ui,1);background:var(--glass);border:1px solid var(--hairline);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.fatal-exit:hover{background:rgba(255,255,255,.16);border-color:var(--hairline-strong);}
/* ── Preroll ────────────────────────────────────────────────────────────── */
/* Monochrome, one accent, motion only on compositor-cheap properties
   (opacity/transform). No blur filters, no conic sweep: those were the colour
   noise and the source of jank on low-end Android. */
.preroll{position:absolute;inset:0;z-index:50;background:var(--bg);color:var(--paper);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .6s var(--ease),transform .6s var(--ease);}
.preroll:not(.hide){cursor:default;}
.preroll.hide{opacity:0;transform:scale(1.02);pointer-events:none;visibility:hidden;transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s linear .6s;}
.preroll:not(.hide) ~ .bottom-bar,
.player.is-prerolling .bottom-bar{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(16px)!important;}
.preroll:not(.hide) ~ .top-bar,
.preroll:not(.hide) ~ .top-actions,
.player.is-prerolling .top-bar,
.player.is-prerolling .top-actions{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-16px)!important;}
.preroll:not(.hide) ~ .center-toggle,
.preroll:not(.hide) ~ .intro-skip,
.preroll:not(.hide) ~ .next-up-card,
.player.is-prerolling .center-toggle,
.player.is-prerolling .intro-skip,
.player.is-prerolling .next-up-card{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.preroll-bg{position:absolute;inset:0;overflow:hidden;background:var(--bg);}
/* One slow pool of light, breathing at roughly resting respiration rate.
   Subliminal, but a completely static frame is what makes a wait feel dead. */
.preroll-bg:before{content:'';position:absolute;left:50%;top:46%;width:130vmax;height:130vmax;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.05),transparent 70%),radial-gradient(closest-side,rgba(var(--brand-rgb),.08),transparent 52%);animation:prerollBreathe 9s ease-in-out infinite;}
/* Film grain at a whisper, static: the same texture the site wears. */
.preroll-bg:after{content:'';position:absolute;inset:0;opacity:.055;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
@keyframes prerollBreathe{0%,100%{opacity:.5;}50%{opacity:1;}}
/* Cinematic card (2026-09-27): the title's own backdrop, dimmed under a
   gradient, with the title bottom-left the way a streaming title card sits.
   The art is requested by showPrerollCard, never earlier, so the warm path
   (dark, then first frame) does not pay for it. */
.preroll{align-items:flex-end;justify-content:flex-start;}
.preroll-poster{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .9s var(--ease);}
.preroll-poster.in{opacity:1;}
.preroll-poster:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.38) 0%,rgba(11,11,13,.22) 34%,rgba(11,11,13,.88) 72%,var(--bg) 100%);}
.preroll-card{position:relative;z-index:2;width:100%;padding:0 24px 20px;animation:prerollCard .68s var(--ease) both;}
@keyframes prerollCard{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.preroll-mark{display:none;margin-bottom:10px;}
.preroll-mark:has(.preroll-logo){display:flex;}
.preroll-logo{max-height:28px;max-width:140px;object-fit:contain;opacity:.92;}
.preroll-brand{margin-bottom:8px;color:var(--ink-2);font:500 9.5px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;}
.preroll-title{font:500 clamp(24px,3.4vw,38px)/1 var(--font-display);letter-spacing:-.04em;color:var(--paper);text-wrap:balance;}
/* Hairline: fills on real stages only (setStage -> --p), with the sweep on top
   so a long stage still reads as alive. */
.preroll-progress{position:relative;height:2px;margin:14px 0 10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;}
.preroll-progress:after{content:'';position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);transform:translateX(-110%);animation:prerollSweep 2.3s ease-in-out infinite;}
.preroll.connected .preroll-progress:after{animation:none;opacity:0;}
@keyframes prerollSweep{0%{transform:translateX(-110%);}70%,100%{transform:translateX(300%);}}
.preroll-fill{height:100%;width:var(--p,4%);border-radius:inherit;background:var(--paper);transition:width .5s var(--ease);}
.preroll.connected .preroll-fill{width:100%;}
.preroll-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;}
.preroll-status-wrap{position:relative;flex:1;min-width:0;height:24px;overflow:hidden;}
.preroll-status{position:absolute;inset:0;display:flex;align-items:center;color:var(--ink-2);font:500 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;}
.preroll-status.enter{animation:prerollStatusIn .34s .20s var(--ease) both;}
.preroll-status.leave{animation:prerollStatusOut .18s cubic-bezier(.55,0,.9,.6) forwards;}
@keyframes prerollStatusIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
@keyframes prerollStatusOut{to{opacity:0;transform:translateY(-7px);}}
.preroll-server{display:none;}
.preroll-footline{display:none!important;}
/* Servers as chips on the right of the status row; still the one thing a
   waiting viewer can act on. */
.preroll-switcher{display:flex;align-items:center;gap:6px;flex:none;max-width:62%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.preroll:not(.show-card) .preroll-card{opacity:0;animation:none;}
.preroll:not(.show-servers) .preroll-switcher{display:none;}
.preroll-switcher::-webkit-scrollbar{display:none;}
.preroll-rail-label{display:none;}
.preroll-node{flex:none;padding:6px 9px;border:1px solid var(--hairline);border-radius:6px;background:rgba(255,255,255,.03);color:var(--ink-3);font:500 9.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur) var(--ease);}
.preroll-node:hover{border-color:var(--hairline-strong);color:var(--paper);}
.preroll-node:active{transform:scale(.97);}
.preroll-node:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.preroll-node .sub{display:none;}
.preroll-node.probing{border-color:var(--paper);color:var(--paper);animation:prerollNode 2s ease-in-out infinite;}
@keyframes prerollNode{0%,100%{opacity:.55;}50%{opacity:1;}}
.preroll-node.failed{opacity:.35;text-decoration:line-through;}
.preroll-node.ready{border-color:var(--paper);color:var(--paper);}
/* ?hide=progress,volume,… : cosmetic only, keyboard shortcuts keep working. */
.player.hide-progress .progress-row,.player.hide-volume .volume-group,.player.hide-fullscreen #fullscreenBtn,.player.hide-fullscreen #lbFs,.player.hide-server #serverBtn,.player.hide-server #lbServer,.player.hide-next #nextEpBtn,.player.hide-next #lbNext,.player.hide-episodes #episodesBtn,.player.hide-episodes #lbEpisodes,.player.hide-episodes #lbEpisodesView,.player.hide-server .preroll-switcher,.player.hide-title .top-bar,.player.hide-title .ep-label,.player.hide-skip .skip-btn,.player.hide-skip .center-skip,.player.hide-settings #settingsBtn,.player.hide-settings #lbQuality,.player.hide-subtitles #subtitlesBtn,.player.hide-subtitles #lbSubs,.player.hide-time .time-end,.player.hide-time .time-label,.player.hide-pip #pipBtn,.player.hide-cast #castBtn,.player.hide-lock #lockBtn{display:none!important;}
/* ?uiScale=0.5..2.5: TVs and tiny boxes. zoom keeps every hit target and font in
   step; the bars stay edge to edge because zoom divides the containing block. */
.bottom-bar,.top-bar,.top-actions,.center-toggle,.center-skip,.intro-skip,.next-up-card,.lb,.lb-menu,.lb-episodes-view,.panel,.pause-card{zoom:var(--ui,1);}
/* ?caps=0: the small mono labels (eyebrows, menu headers, the labeled bar's sub line) in sentence case. */
.player.no-caps,.player.no-caps *{text-transform:none!important;}
/* Scaled bars in a small box: the width media queries see the viewport, not
   the zoomed bar, so the same drops are applied by class from the script. */
.player.ui-tight .ep-label,.player.ui-tight .volume-track,.player.ui-tight .skip-btn,.player.ui-tight .time-dur,.player.ui-tight .time-end{display:none!important;}
/* ?controlBg=solid: a flat dark strip behind the controls for bright video. */
.player.control-solid .bottom-bar{background:rgba(0,0,0,.82);padding-top:14px;}
.player.control-solid .top-bar{background:rgba(0,0,0,.82);padding-bottom:18px;}
/* ?showTitle=1: the top-left title bar in windowed mode too, not only fullscreen. */
.player.show-title .top-bar{display:block;}
.player.show-title.controls-visible .top-bar,.player.show-title.paused .top-bar{opacity:1;transform:translateY(0);}
/* ?watermark=1 (the brandLogo) or an https URL: a corner bug that shows only
   while the controls are down, so it never fights the top bar or the card. */
.watermark{position:absolute;top:16px;right:18px;z-index:6;height:30px;max-width:150px;object-fit:contain;opacity:.6;pointer-events:none;filter:drop-shadow(0 1px 6px rgba(0,0,0,.6));transition:opacity .3s var(--ease);}
.player.controls-visible .watermark,.player.paused .watermark,.player.is-prerolling .watermark{opacity:0;}
/* ── Lock (2026-10-02) ──────────────────────────────────────────────────────
   Locked: the controls never wake and the video surface ignores the pointer.
   One shield does it. z-index 4 puts it over the centre toggle and the ±10
   buttons but UNDER Skip intro, Up next and the top cluster, so prompts still
   answer and the lock button is the one control left. A click on the shield
   only peeks that button, now an Unlock pill, for 3 s. Must stay below the
   hold-controls rule above in source order: both are !important. */
.lock-shield{position:absolute;inset:0;z-index:4;display:none;cursor:none;-webkit-tap-highlight-color:transparent;}
.player.locked .lock-shield{display:block;}
.player.locked.lock-peek .lock-shield{cursor:default;}
.player.locked .bottom-bar,.player.locked .top-bar{opacity:0!important;pointer-events:none;}
.player.locked .center-skip{display:none!important;}
.player.locked .top-actions{opacity:0;transform:translateY(-8px);pointer-events:none;}
.player.locked.lock-peek .top-actions{opacity:1;transform:translateY(0);pointer-events:auto;}
.player.locked .top-actions .ctrl-btn:not(#lockBtn){visibility:hidden;}
#lockBtn .lock-label,#lockBtn .icon-locked{display:none;}
.player.locked #lockBtn{width:auto;gap:7px;padding:0 15px 0 11px;border-radius:999px;background:var(--paper);border-color:var(--paper);color:#111;font:700 12.5px/1 var(--font-body);letter-spacing:-.01em;box-shadow:0 10px 30px rgba(0,0,0,.45);}
.player.locked #lockBtn:hover{background:#fff;}
.player.locked #lockBtn .lock-label{display:inline;}
.player.locked #lockBtn .icon-locked{display:block;}
.player.locked #lockBtn .icon-open,.player.locked #lockBtn:after{display:none;}
/* Video size: a glyph per mode so Fit / Fill / Stretch read at a glance. */
.seg.fit button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;}
.seg.fit svg{width:26px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.seg.fit svg .f{fill:currentColor;stroke:none;}
@media (max-width:560px){.watermark{top:10px;right:10px;height:22px;max-width:110px;}}
/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width:560px){
  .title-main{font-size:24px;}
  .top-actions,.fatal-exit{top:10px;right:8px;}
  .bottom-bar{padding:28px 8px max(10px,env(safe-area-inset-bottom));}
  .progress-row{padding:8px 4px 4px;}
  .controls-row{gap:0;}
  .controls-left,.controls-right{gap:0;min-width:0;}
  .controls-left{flex:1;}
  .controls-right{flex-shrink:0;margin-left:0;}
  /* 38px is the smallest comfortable thumb target; nine of them plus a clock
     is already 392px, so anything narrower has to drop controls, not shrink
     them further — see the 430px block below. */
  .ctrl-btn{width:38px;height:38px;}
  .ctrl-btn svg{width:22px;height:22px;}
  .play-btn{width:42px;height:42px;}
  .play-btn svg{width:24px;height:24px;}
  .time-label{margin:0 4px;font-size:11.5px;}
  .progress-tip{display:none;}
  .volume-track,.ep-label{display:none;}
  .panel{position:fixed;left:0;right:0;bottom:0;width:100%;min-width:0;max-height:72dvh;overflow:auto;padding:16px 14px max(18px,env(safe-area-inset-bottom));border:1px solid var(--hairline);border-bottom:0;border-radius:22px 22px 0 0;background:rgba(14,14,16,.97);box-shadow:0 -18px 50px rgba(0,0,0,.58);transform:translateY(110%);transform-origin:bottom center;transition:opacity .16s var(--ease),transform .34s var(--ease);}
  .panel.show{transform:translateY(0);}
  .panel:before{content:'';display:block;width:38px;height:4px;margin:0 auto 12px;border-radius:999px;background:rgba(255,255,255,.28);}
  .episodes-panel{top:auto;bottom:0;width:100%;max-height:72dvh;transform:translateY(110%);transform-origin:bottom center;}
  .episodes-panel.show{transform:translateY(0);}
  .panel-header{font-size:10.5px;padding:10px 10px 8px;}
  .panel-item,.tile{min-height:46px;padding:11px 12px;font-size:14px;}
  /* A 16:9 phone box is ~210px tall: the pill sits just above the bar so it
     clears the centre cluster instead of covering the forward button. */
  .intro-skip{right:10px;bottom:62px;padding:9px 12px;font-size:11.5px;}
}
/* Shorter than that (184 px on a 375 px phone) the pill still landed on the forward button: the top-left
   corner is empty there. And Up Next covers the centre cluster, so the cluster steps aside (2026-10-09). */
@media (max-height:230px){.intro-skip{top:10px;left:10px;right:auto;bottom:auto;}}
@media (max-height:300px){.player:has(.next-up-card.show) .center-skip,.player:has(.next-up-card.show) .big-play{opacity:0!important;pointer-events:none!important;}}
/* Under ~430px the full control set overflows the bar and the right-hand
   buttons walk off screen. Skip ±10s and the total duration are the two
   things a phone can lose without losing a capability — dragging the
   scrubber still seeks, and the elapsed time still reads. */
@media (max-width:430px){
  .skip-btn,.time-dur,.time-end{display:none;}
}
/* PiP is a desktop affordance — phones have an OS-level equivalent, and a
   tenth control is exactly what the 430px rule above exists to prevent. */
@media (max-width:560px){
  #pipBtn{display:none;}
}
/* The preroll card in a 16:9 embed box: height is the binding constraint, so
   it sheds in order of what is worth least to someone waiting. */
@media (max-width:560px){
  .preroll-card{padding:0 14px 12px;}
  .preroll-title{font-size:22px;}
  /* Status on its own line, chips on the next: the row is too narrow for both. */
  .preroll-row{flex-wrap:wrap;gap:8px;}
  .preroll-status-wrap{flex:1 0 100%;}
  .preroll-switcher{max-width:100%;}
  .preroll-node{padding:8px 10px;}
}
@media (max-height:340px){
  .preroll-mark{display:none;}
  .preroll-title{font-size:20px;}
  .preroll-progress{margin:8px 0 6px;}
}
@media (max-height:260px){
  .preroll-brand{display:none;}
  .preroll-title{font-size:17px;}
  .preroll-status-wrap{height:18px;}
}
@media (max-height:190px){
  .preroll-switcher{display:none;}
  .preroll-title{font-size:15px;}
  .preroll-card{padding-bottom:8px;}
}
@media (prefers-reduced-motion:reduce){
  /* The rAF-driven fill keeps updating — a still progress number is the one
     signal a reduced-motion user still needs. Only decorative motion goes. */
  .preroll,.preroll *,.preroll *:before,.preroll *:after{animation:none!important;transition:none!important;}
  .ctrl-btn,.ctrl-btn svg,.big-play,.panel,.panel-item,.progress-handle,.volume-fill:after{transition-duration:.01s!important;}
  .settings-view:not([hidden]),.subtitle-view:not([hidden]),.intro-skip,.next-up-card{animation:none!important;}
}