/* ==========================================================================
 * FlixStage 4.0 - the theater, written from scratch.
 *
 * Layout: one dimmed + blurred backdrop, one big centered 16:9 stage,
 * flat minimal chrome underneath. No dialog card, no nested panels - the
 * stage sits directly on the backdrop.
 *
 * Two hard rules learned from 3.6.x:
 *   1. The stage size is owned by JS (explicit px). CSS only provides a
 *      first-paint fallback, so the box can never collapse to a sliver.
 *   2. Nothing that wraps the stage uses backdrop-filter. Blurring happens
 *      on a static sibling layer, so provider video keeps a clean
 *      compositing path (WebGPU/DRM frames stay visible).
 * ========================================================================== */

.tk-back,.tk-back *,.tk-back *::before,.tk-back *::after{box-sizing:border-box}

.tk-back{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;z-index:99990;overflow:hidden;overscroll-behavior:contain;background:#040406;display:flex;align-items:stretch;justify-content:center;animation:tkFade .2s ease both}
@keyframes tkFade{from{opacity:0}to{opacity:1}}

/* --- ambient backdrop -------------------------------------------------
 * Two stacked layers fill the whole background:
 *   .tk-glow img  - the artwork (wide backdrop, else poster), heavily
 *                   blurred and scaled so it bleeds out from the screen.
 *   .tk-amb       - a 64x36 canvas the JS repaints from the playing
 *                   <video> frame, so the glow tracks the actual lighting
 *                   of the picture (YouTube ambient mode). Same-origin or
 *                   not, drawing is always allowed; only pixel READBACK is
 *                   blocked, and we never read. Cross-origin iframes can't
 *                   be sampled at all - the artwork layer carries those.
 * Never a parent of the stage: provider frames keep a clean path. --- */
.tk-glow{position:absolute;inset:-8%;z-index:0;pointer-events:none;overflow:hidden;background:#000}
.tk-glow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(64px) saturate(1.35) brightness(.56);transform:scale(1.28);opacity:.92}
.tk-amb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(46px) saturate(1.45) brightness(.62);transform:scale(1.22);opacity:0;transition:opacity .8s ease}
.tk-amb.on{opacity:.96}
/* Vignette: the glow stays visible right around the picture, the outer
 * edges and corners fall away to black - the cinematic frame. */
.tk-back::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(112% 86% at 50% 50%,rgba(0,0,0,.08) 0%,rgba(0,0,0,.40) 44%,rgba(0,0,0,.80) 74%,rgba(0,0,0,.97) 100%)}

/* --- shell --- */
.tk-wrap{position:relative;z-index:2;width:100%;max-width:1740px;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:clamp(6px,1.1vh,14px);padding:max(clamp(8px,1.8vh,20px),env(safe-area-inset-top,0px)) max(clamp(10px,2.6vw,34px),env(safe-area-inset-right,0px)) max(clamp(8px,1.8vh,20px),env(safe-area-inset-bottom,0px)) max(clamp(10px,2.6vw,34px),env(safe-area-inset-left,0px))}

/* --- header --- */
.tk-top{flex:none;display:flex;align-items:center;gap:12px;min-width:0}
.tk-poster{width:40px;height:58px;flex:none;object-fit:cover;border-radius:6px;background:#14141a}
.tk-meta{flex:1;min-width:0}
.tk-title{color:#fff;font-weight:800;font-size:clamp(.95rem,1.35vw,1.15rem);letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-sub{margin-top:3px;color:#a1a1aa;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-epmark{color:#e50914;font-weight:800}
.tk-x{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(18,18,22,.72);color:#fff;font-size:1rem;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
.tk-x:hover{background:#e50914;border-color:#e50914}

/* --- stage (JS sets explicit px width/height on this node) --- */
.tk-fit{position:relative;flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tk-stage{position:relative;width:100%;max-width:100%;max-height:100%;aspect-ratio:16/9;background:#000;border-radius:clamp(8px,1vw,16px);overflow:hidden;box-shadow:0 26px 80px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.07);animation:tkUp .26s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes tkUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.tk-frame,.tk-video{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#000}
.tk-video{object-fit:contain}

/* Plyr skin sits exactly on the stage box. */
.tk-stage .plyr{position:absolute;inset:0;width:100%;height:100%;background:#000}
.tk-stage .plyr .plyr__video-wrapper{position:absolute;inset:0;width:100%;height:100%}
.tk-stage .plyr video{width:100%;height:100%}
.tk-stage .plyr__controls{padding:10px 14px 14px}

/* loading / error / veil */
.tk-spin{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:#000;color:#a1a1aa;font-size:.85rem;text-align:center;padding:20px}
.tk-ring{width:46px;height:46px;border-radius:50%;border:3px solid rgba(229,9,20,.22);border-top-color:#e50914;animation:tkSpin .9s linear infinite}
@keyframes tkSpin{to{transform:rotate(360deg)}}
.tk-loadmsg{max-width:80%}
.tk-err{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:#000;color:#d4d4d8;text-align:center;padding:22px;font-size:.9rem}
.tk-err i{font-size:2rem;color:#e50914}
.tk-retry{background:#e50914;color:#fff;border:0;border-radius:8px;padding:10px 24px;font-weight:800;font-size:.85rem;cursor:pointer}
.tk-retry:hover{background:#ff1f2e}
.tk-veil{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:#000;pointer-events:none}

/* --- episode stepper (TV only) --- */
.tk-eps{flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tk-eps[hidden]{display:none}
.tk-step{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tk-slab{color:#fff;font-weight:800;font-size:.82rem;background:rgba(229,9,20,.16);border:1px solid rgba(229,9,20,.42);padding:6px 12px;border-radius:8px}
.tk-stbtn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:.75rem;font-weight:700;padding:6px 13px;border-radius:8px;cursor:pointer}
.tk-stbtn:hover{border-color:#e50914}
.tk-cont{color:#f5c518;font-size:.78rem;font-weight:700;cursor:pointer}
.tk-epchip{display:inline-flex;align-items:center;gap:6px;background:rgba(229,9,20,.16);border:1px solid rgba(229,9,20,.42);border-radius:8px;padding:6px 12px;cursor:pointer;font-family:inherit;min-width:0;max-width:100%;min-height:34px}
.tk-epchip:hover{border-color:#e50914}
.tk-epchip .tk-slab{background:transparent;border:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tk-epchip i{color:#ffb3b8;font-size:.7rem}

/* --- chrome under the stage --- */
.tk-under{flex:none;display:flex;flex-direction:column;gap:clamp(6px,1vh,12px);min-width:0}

.tk-tabs{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:1px}
.tk-tabs::-webkit-scrollbar{display:none}
.tk-tab{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#d4d4d8;font-size:.78rem;font-weight:700;padding:7px 15px;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s;scroll-snap-align:start}
.tk-tab:hover{border-color:#e50914;color:#fff}
.tk-tab.on{background:#e50914;border-color:#e50914;color:#fff}
.tk-rep{margin-left:auto;color:#8b8b94}
.tk-rail{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:3px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.tk-rail::-webkit-scrollbar{height:6px}
.tk-rail::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:99px}
.tk-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}
.tk-chip{flex:none;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#e4e4e7;font-size:.78rem;font-weight:700;padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s;scroll-snap-align:start}
.tk-chip:hover{border-color:#e50914}
.tk-chip.on{background:rgba(229,9,20,.2);border-color:#e50914;color:#fff}
.tk-dot{width:8px;height:8px;border-radius:50%;background:#52525b;flex:none}
.tk-chip.on .tk-dot{background:#4ade80}
.tk-b{font-size:.6rem;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.03em;flex:none}
.tk-hi{background:#e50914;color:#fff}
.tk-q{background:#f5c518;color:#000}
.tk-m{background:#7c3aed;color:#fff}
.tk-c{background:#16a34a;color:#fff}
.tk-f{background:#0284c7;color:#fff}
.tk-p{background:#b45309;color:#fff}
.tk-n{background:#059669;color:#fff}

.tk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tk-hint{color:#71717a;font-size:.72rem}
.tk-sp{flex:1 1 auto}
.tk-ctl{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:38px;height:34px;padding:0 11px;font-size:.78rem;font-weight:700;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:9px;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}
.tk-ctl:hover{border-color:#e50914}
.tk-ctl.on{background:rgba(229,9,20,.2);border-color:#e50914;color:#fff}
.tk-ctl[hidden],.tk-mini[hidden],.tk-audio[hidden],.tk-cc[hidden]{display:none}
@keyframes tkPulse{0%{box-shadow:0 0 0 0 rgba(229,9,20,.55)}70%{box-shadow:0 0 0 22px rgba(229,9,20,0)}100%{box-shadow:0 0 0 0 rgba(229,9,20,0)}}
.tk-next.tk-attn{border-color:#e50914;animation:tkPulse 1.2s infinite}
.tk-nextep{background:rgba(229,9,20,.16);border-color:rgba(229,9,20,.55)}
.tk-cc{font-size:.72rem;font-weight:800;letter-spacing:.04em}
.tk-mini,.tk-audio{background:#14141a;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:9px;font-size:.72rem;font-weight:700;padding:7px 9px;max-width:200px;min-height:34px;cursor:pointer;text-overflow:ellipsis}
.tk-mini:hover,.tk-audio:hover{border-color:#e50914}
.tk-mini option,.tk-audio option{background:#14141a;color:#fff}

.tk-toast{position:absolute;left:50%;bottom:clamp(76px,14vh,132px);transform:translateX(-50%);z-index:6;background:rgba(0,0,0,.88);border:1px solid rgba(229,9,20,.5);color:#fff;font-size:.8rem;font-weight:600;padding:9px 18px;border-radius:999px;white-space:nowrap;max-width:88%;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.tk-toast[hidden]{display:none}

/* --- episode drawer --- */
.tk-drawer{position:absolute;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.tk-drawer[hidden]{display:none}
.tk-dw-scrim{position:absolute;inset:0;background:rgba(4,4,6,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tk-dw-panel{position:relative;width:min(680px,100%);max-height:min(70vh,720px);display:flex;flex-direction:column;background:#101018;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.tk-dw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);flex:none}
.tk-dw-title{color:#fff;font-weight:800;font-size:.95rem}
.tk-dw-x{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(18,18,22,.72);color:#fff;font-size:.95rem;cursor:pointer;flex:none}
.tk-dw-x:hover{background:#e50914;border-color:#e50914}
.tk-dw-pills{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);scrollbar-width:none;flex:none}
.tk-dw-pills::-webkit-scrollbar{display:none}
.tk-dw-pill{flex:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#d4d4d8;border-radius:999px;padding:7px 15px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.tk-dw-pill small{color:#71717a;margin-left:5px;font-weight:600}
.tk-dw-pill:hover{border-color:#e50914;color:#fff}
.tk-dw-pill.is-active{background:rgba(229,9,20,.16);border-color:#e50914;color:#fff}
.tk-dw-pill.pulse{animation:tkPulse 1s}
.tk-dw-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:12px 16px 16px;align-content:start;min-height:60px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.tk-dw-grid.tk-dw-loading::before{content:'';justify-self:center;align-self:center;width:30px;height:30px;border-radius:50%;border:3px solid rgba(229,9,20,.22);border-top-color:#e50914;animation:tkSpin .9s linear infinite}
.tk-dw-ep{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:46px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;cursor:pointer;text-align:left;font-family:inherit;min-width:0;overflow:hidden}
.tk-dw-ep:hover{border-color:#e50914}
.tk-dw-ep img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin-bottom:4px}
.tk-dw-epn{color:#fff;font-weight:800;font-size:.85rem}
.tk-dw-ept{color:#a1a1aa;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-dw-ep.on{background:rgba(229,9,20,.2);border-color:#e50914}
.tk-dw-ep.cont{border-color:#f5c518}
.tk-dw-ep.cont .tk-dw-epn{color:#f5c518}
.tk-dw-ep.is-watched{opacity:.55}
.tk-dw-ep.is-watched .tk-dw-ept::after{content:' ✓';color:#4ade80}
.tk-dw-none{grid-column:1/-1;color:#71717a;font-size:.8rem;padding:8px 2px}
@media (max-width:768px) and (orientation:portrait){
  .tk-drawer{align-items:flex-end;padding:0}
  .tk-dw-panel{width:100%;max-height:78dvh;border-radius:16px 16px 0 0;border-bottom:0;animation:tkSheetUp .22s ease both;padding-bottom:env(safe-area-inset-bottom,0px)}
  .tk-dw-panel::before{content:'';display:block;width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.28);margin:8px auto 0;flex:none}
  .tk-dw-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
}
@keyframes tkSheetUp{from{transform:translateY(16%);opacity:.6}to{transform:none;opacity:1}}
@media (max-height:520px) and (orientation:landscape){
  .tk-drawer{align-items:center;padding:8px}
  .tk-dw-panel{max-height:86dvh;width:min(560px,94vw);border-radius:14px}
  .tk-dw-panel::before{display:none}
}

/* --- auto-next countdown --- */
.tk-an{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:clamp(14px,3vw,28px);background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.88) 100%)}
.tk-an-info{color:#fff;font-weight:800;font-size:clamp(.85rem,1.6vw,1rem);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.tk-an-track{height:4px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.tk-an-bar{height:100%;width:0;background:#e50914;border-radius:99px;transition:width 5s linear}
.tk-an-btns{display:flex;gap:10px;flex-wrap:wrap}
.tk-an-skip,.tk-an-cancel{min-height:44px;padding:10px 20px;border-radius:9px;font-size:.82rem;font-weight:800;cursor:pointer;font-family:inherit}
.tk-an-skip{background:#e50914;color:#fff;border:0}
.tk-an-skip:hover{background:#ff1f2e}
.tk-an-cancel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff}
.tk-an-cancel:hover{border-color:#e50914}

/* --- cinema mode (T): chrome rows drop out, stage takes the space --- */
.tk-back.tk-cinema .tk-eps,.tk-back.tk-cinema .tk-tabs,.tk-back.tk-cinema .tk-rail{display:none}
.tk-back.tk-cinema .tk-glow img,.tk-back.tk-cinema .tk-amb{opacity:.5}

/* --- expand fallback when native fullscreen is unavailable (iPhone /
 * inside iframes). Chrome rows drop out so the stage gets every pixel;
 * the top bar stays (close button) and the source switcher moves into
 * the bar via .tk-mini. --- */
.tk-wrap.tk-full{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;z-index:99999;max-width:none;padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.tk-wrap.tk-full .tk-hint,.tk-wrap.tk-full .tk-eps,.tk-wrap.tk-full .tk-tabs,.tk-wrap.tk-full .tk-rail{display:none}

/* --- VAST preroll --- */
.tk-vast{position:absolute;inset:0;z-index:4;background:#000}
.tk-vast .tk-video{position:absolute;inset:0}
.tk-adtag{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.72);color:#f5c518;font-size:.68rem;font-weight:800;padding:4px 10px;border-radius:5px;z-index:2}
.tk-adcount{position:absolute;bottom:12px;left:10px;background:rgba(0,0,0,.72);color:#fff;font-size:.72rem;padding:5px 11px;border-radius:5px;z-index:2}
.tk-skip{position:absolute;bottom:12px;right:10px;background:#e50914;color:#fff;border:0;font-size:.75rem;font-weight:800;padding:9px 17px;border-radius:6px;cursor:pointer;z-index:2}
.tk-skip[hidden]{display:none}

/* --- focus + taps --- */
.tk-back *{-webkit-tap-highlight-color:transparent}
.tk-back{-webkit-user-select:none;user-select:none}
.tk-x,.tk-tab,.tk-chip,.tk-ctl,.tk-stbtn,.tk-retry,.tk-skip,.tk-cont,.tk-mini,.tk-audio,.tk-tabs,.tk-rail,.tk-eps,.tk-bar,.tk-top,.tk-epchip,.tk-elist,.tk-nextep,.tk-dw-ep,.tk-dw-pill,.tk-dw-x,.tk-an-skip,.tk-an-cancel{touch-action:manipulation}
.tk-x:focus,.tk-tab:focus,.tk-chip:focus,.tk-ctl:focus,.tk-stbtn:focus,.tk-retry:focus,.tk-skip:focus,.tk-mini:focus,.tk-audio:focus,.tk-cont:focus,.tk-epchip:focus,.tk-dw-ep:focus,.tk-dw-pill:focus,.tk-dw-x:focus,.tk-an-skip:focus,.tk-an-cancel:focus{outline:none}
.tk-x:focus-visible,.tk-tab:focus-visible,.tk-chip:focus-visible,.tk-ctl:focus-visible,.tk-stbtn:focus-visible,.tk-retry:focus-visible,.tk-skip:focus-visible,.tk-mini:focus-visible,.tk-audio:focus-visible,.tk-cont:focus-visible,.tk-epchip:focus-visible,.tk-dw-ep:focus-visible,.tk-dw-pill:focus-visible,.tk-dw-x:focus-visible,.tk-an-skip:focus-visible,.tk-an-cancel:focus-visible{outline:none;box-shadow:0 0 0 2px #040406,0 0 0 4px #e50914}

/* --- phones / small tablets (portrait and normal tablets) --- */
@media(max-width:640px){
  .tk-wrap{gap:6px;padding:max(8px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
  .tk-glow img{filter:blur(40px) saturate(1.3) brightness(.56)}
  .tk-amb{filter:blur(32px) saturate(1.35) brightness(.62)}
  .tk-poster,.tk-hint,.tk-cine{display:none}
  .tk-title{font-size:.95rem}
  .tk-sub{font-size:.72rem}
  .tk-x{width:44px;height:44px}
  .tk-stage{border-radius:8px}
  .tk-tabs{gap:6px}
  .tk-tab{padding:8px 14px;min-height:44px}
  .tk-chip{min-height:44px;padding:9px 13px}
  .tk-ctl{min-width:44px;min-height:44px;height:auto;padding:0 13px}
  .tk-stbtn,.tk-retry{min-height:44px}
  .tk-sprev,.tk-snext{display:none}
  .tk-eps{flex-wrap:nowrap;gap:6px}
  .tk-step{flex-wrap:nowrap;gap:6px;flex:1;min-width:0}
  .tk-epchip{flex:1 1 auto;min-width:0;min-height:44px}
  .tk-eps .tk-cont{display:none}
  .tk-cont{min-height:44px;display:inline-flex;align-items:center}
  .tk-bar{gap:8px}
  .tk-mini,.tk-audio{flex:1 1 40%;min-height:44px;max-width:none}
  .tk-toast{bottom:clamp(64px,12vh,110px);white-space:normal;text-align:center;border-radius:12px;line-height:1.4;max-width:94%}
  .tk-skip{min-height:44px;padding:11px 22px}
  .tk-err{font-size:.85rem;padding:16px}
}

/* --- real touch devices: 44px targets. Skipped when the viewport is
 * short (landscape phone) - there, vertical space beats target size. --- */
@media (pointer:coarse) and (min-height:521px){
  .tk-x{width:44px;height:44px}
  .tk-dw-x{width:44px;height:44px}
  .tk-tab,.tk-chip,.tk-ctl,.tk-stbtn,.tk-retry,.tk-skip,.tk-cont,.tk-mini,.tk-audio,.tk-epchip,.tk-dw-ep,.tk-dw-pill,.tk-dw-x,.tk-an-skip,.tk-an-cancel{min-height:44px}
}

/* --- no hardware cursor: keyboard hints are dead weight --- */
@media (hover:none){.tk-hint{display:none}}

/* --- portrait phones & small tablets: reorganized for one-thumb use.
 * The tab row becomes a segmented control (every tab visible, equal
 * share, no swiping, no clipped "Report") and the server list becomes a
 * wrapping grid (2 columns on phones, 3-4 on large phones / small
 * tablets) so ALL sources are on screen at once - pick any tab or any
 * server with a single tap. Landscape phones keep the compact scroll
 * rows below: there, vertical space is the scarce resource. --- */
@media (max-width:768px) and (orientation:portrait){
  .tk-tabs{overflow-x:visible;gap:6px;scroll-snap-type:none}
  .tk-tab{flex:1 1 0;min-width:0;max-width:230px;justify-content:center;text-align:center;padding:0 8px;min-height:46px;border-radius:10px;font-size:.78rem;white-space:nowrap;overflow:hidden}
  .tk-rep{flex:0 0 auto;margin-left:auto;padding:0 12px}
  .tk-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr));gap:8px;overflow:visible;padding:0;scroll-snap-type:none;scrollbar-width:none}
  .tk-rail::-webkit-scrollbar{display:none}
  .tk-chip{width:100%;min-height:46px;padding:8px 11px;justify-content:flex-start;flex-wrap:wrap;row-gap:5px;column-gap:7px;white-space:normal;align-content:center}
  /* Two-line chip (portrait phones/tablets ONLY): name owns row 1 next to
   * the dot; tags flow to row 2 and wrap freely. Ellipsis is the last
   * resort, not the first. Desktop + landscape rules below are untouched. */
  .tk-chip > span:not(.tk-dot):not(.tk-b){flex:1 1 calc(100% - 22px);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tk-next{background:rgba(229,9,20,.22);border-color:rgba(229,9,20,.55)}
}

/* --- narrow phones (<=420px): drop the redundant "(10)" counts (the
 * grid already shows every source) and shrink Report to its flag icon,
 * so the three primary tabs keep full, readable widths. --- */
@media (max-width:420px) and (orientation:portrait){
  .tk-cnt{display:none}
  .tk-rtx{display:none}
  .tk-elist-t{display:none}
  .tk-rep{min-width:44px;justify-content:center;padding:0 10px}
  /* Narrow phones: compact badges so 2-3 tags sit on the chip's line 2. */
  .tk-chip .tk-b{padding:1px 5px;font-size:.58rem}
}

/* --- landscape phones: every px goes to the stage, chrome compacted.
 * Keyed on height, not width - a 932px-wide phone still has a ~430px
 * tall viewport, and the old width-based rule missed it entirely. --- */
@media (max-height:520px) and (orientation:landscape){
  .tk-wrap{gap:4px;padding:max(6px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
  .tk-poster,.tk-hint{display:none}
  .tk-top{gap:8px}
  .tk-title{font-size:.9rem}
  .tk-sub{display:none}
  .tk-x{width:36px;height:36px}
  .tk-stage{border-radius:6px}
  .tk-eps{gap:6px}
  .tk-slab{padding:4px 10px;font-size:.76rem}
  .tk-stbtn{padding:5px 11px;min-height:34px}
  .tk-cont{min-height:34px}
  .tk-tabs{gap:6px}
  .tk-tab{padding:5px 12px;min-height:32px;font-size:.74rem}
  .tk-chip{padding:6px 11px;min-height:34px;font-size:.74rem}
  .tk-ctl{height:34px;min-height:34px;min-width:36px;padding:0 11px}
  .tk-mini,.tk-audio{min-height:34px;max-width:150px}
  .tk-bar{gap:6px}
  .tk-under{gap:5px}
  .tk-err{font-size:.82rem;padding:14px}
}

/* --- tiny landscape (iPhone SE class, <=420px tall): the chip rail is
 * dropped and source switching moves to .tk-mini in the bar (JS mirrors
 * this exact query). Close button and episode stepper stay. --- */
@media (max-height:420px) and (orientation:landscape){
  .tk-rail{display:none}
  .tk-wrap{gap:3px}
  .tk-under{gap:5px}
}

@media (prefers-reduced-motion:reduce){
  .tk-back,.tk-stage,.tk-ring,.tk-next.tk-attn,.tk-dw-pill.pulse,.tk-dw-grid.tk-dw-loading::before{animation:none !important}
  .tk-dw-panel,.tk-an-bar{animation:none !important;transition:none !important}
}
/* Cropped netnaija frame: the watch page is a full site, not an embed.
 * The iframe renders at virtual width; JS scales + offsets it so only the
 * player region shows through this clipped viewport. Tunables live in
 * 123Flix Panel -> Import (flix_nn_crop option). */
.tk-nncrop{position:relative;overflow:hidden;background:#000;align-self:center;flex:none;margin:auto}
.tk-nncrop .tk-frame{position:absolute;max-width:none}