:root{
  --bg:#0c0c0e;
  --bg-elev:#161619;
  --surface:#1a1a1f;
  --surface-2:#20202a;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --text:#f4f4f5;
  --muted:#a0a0ab;
  --faint:#6b6b74;
  --radius:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --accent:#ff4d6d;
  --accent-2:#ff8a4c;
  --accent-grad:linear-gradient(135deg,#ff4d6d,#ff8a4c);
  --accent-soft:rgba(255,77,109,.16);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  /* space the player reserves for the top bar + control bar so the whole
     video frame (incl. burned-in subtitles at the bottom) is always visible */
  --chrome-top:calc(60px + var(--safe-t));
  --chrome-bottom:calc(104px + var(--safe-b));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;overflow-x:hidden;overscroll-behavior-y:none}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg);color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:.01em;min-height:100dvh;
}
/* ambient cinematic glow behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(255,77,109,.14),transparent 60%),
    radial-gradient(820px 520px at 8% 2%,rgba(120,90,255,.12),transparent 58%),
    var(--bg)}
::selection{background:#34343e}
button,input,select{font:inherit;color:inherit}
h1,h2{margin:0}

/* ---------------- Top bar ---------------- */
.top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:clamp(12px,2.5vw,28px);
  padding:calc(13px + var(--safe-t)) calc(clamp(16px,4vw,48px) + var(--safe-r)) 13px calc(clamp(16px,4vw,48px) + var(--safe-l));
  background:linear-gradient(180deg,var(--bg) 72%,rgba(12,12,14,.6));
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;
}
.word{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);flex:0 0 auto}
.logo-mark{width:28px;height:28px;border-radius:9px;background:var(--accent-grad);display:grid;place-items:center;box-shadow:0 4px 14px rgba(255,77,109,.4);flex:0 0 auto}
.logo-mark svg{width:13px;height:13px;fill:#fff;margin-left:1px}
.word-text{font-size:19px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(90deg,#fff,#ffd9c7);-webkit-background-clip:text;background-clip:text;color:transparent}
.catbar{flex:1 1 auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.catbar::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;border:1px solid transparent;background:transparent;color:var(--muted);padding:7px 13px;border-radius:999px;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:color .15s,background .15s,border-color .15s}
.cat:hover{color:var(--text);background:rgba(255,255,255,.05)}
.cat.active{color:#fff;background:var(--accent-grad);font-weight:600;border-color:transparent;box-shadow:0 4px 14px rgba(255,77,109,.32)}
.top-right{flex:0 0 auto;display:flex;align-items:center;gap:14px}
.search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line-2);padding:6px 2px;width:150px;transition:width .25s var(--ease),border-color .2s;position:relative}
/* live search dropdown (poster + title) */
.search-drop{position:absolute;top:calc(100% + 8px);right:0;width:min(370px,86vw);max-height:62vh;overflow:auto;background:rgba(16,16,20,.98);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:60}
.sd-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:var(--text);padding:7px 8px;border-radius:9px;cursor:pointer;text-align:left}
.sd-item:hover{background:var(--surface)}
.sd-poster{width:38px;height:54px;flex:0 0 auto;border-radius:6px;background:var(--surface-2) center/cover no-repeat}
.sd-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.sd-title{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-sub{font-size:11.5px;color:var(--faint)}
.sd-empty{padding:16px;text-align:center;color:var(--faint);font-size:13px}
.search:focus-within{border-color:var(--text);width:230px}
.search-ico{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;flex:0 0 auto}
#search{border:0;background:transparent;outline:0;width:100%;font-size:14px}
#search::placeholder{color:var(--faint)}
#search::-webkit-search-cancel-button{filter:invert(.6)}
.auto{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;cursor:pointer;user-select:none;white-space:nowrap}
.auto input{appearance:none;width:34px;height:19px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);position:relative;cursor:pointer;transition:background .2s}
.auto input::after{content:"";position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:.2s var(--ease)}
.auto input:checked{background:#33333d}
.auto input:checked::after{left:16px;background:var(--text)}

/* ---------------- Stage ---------------- */
.stage{padding:10px clamp(16px,4vw,48px) 80px}

/* hero */
.hero{position:relative;border-radius:18px;overflow:hidden;margin:6px 0 8px;min-height:clamp(240px,34vw,340px);display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;background:#111 center 28%/cover no-repeat;transform:scale(1.04)}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(12,12,14,.96),rgba(12,12,14,.55) 46%,rgba(12,12,14,.1) 80%),
  linear-gradient(0deg,var(--bg),transparent 62%)}
.hero-inner{position:relative;z-index:2;display:flex;gap:22px;padding:clamp(18px,3vw,30px);align-items:flex-end;width:100%}
.hero-poster{width:clamp(96px,10vw,128px);aspect-ratio:2/3;border-radius:10px;background:#000 center/cover no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.55);flex:0 0 auto}
.hero-text{max-width:600px;min-width:0}
.hero-kicker{font-size:11px;text-transform:uppercase;letter-spacing:2.5px;font-weight:700;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title{font-size:clamp(23px,3.4vw,40px);font-weight:700;line-height:1.05;margin:7px 0 10px;letter-spacing:-.02em}
.hero-intro{color:var(--muted);font-size:14px;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.hero-meta{color:var(--faint);font-size:13px}
.btn-play{background:var(--accent-grad);color:#fff;font-weight:700;border:0;padding:12px 24px;border-radius:11px;display:inline-flex;gap:9px;align-items:center;cursor:pointer;font-size:14.5px;box-shadow:0 8px 22px rgba(255,77,109,.36);transition:filter .15s,transform .15s,box-shadow .15s}
.btn-play svg{width:15px;height:15px;fill:#fff}
.btn-play:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 12px 28px rgba(255,77,109,.46)}

/* rows / rails */
.row{margin:24px 0}
.row-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 11px;gap:12px}
.row-head h2{font-size:17px;font-weight:700;letter-spacing:-.015em;display:inline-flex;align-items:center;gap:9px}
.row-head h2::before{content:"";width:4px;height:17px;border-radius:3px;background:var(--accent-grad);flex:0 0 auto}
.see-all{background:0;border:0;color:var(--faint);font-size:13px;cursor:pointer;white-space:nowrap;transition:color .15s}
.see-all:hover{color:var(--text)}
.rail-wrap{position:relative}
.rail{display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:2px 1px 6px;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{display:none}
.rail{min-height:244px}
.rail .card{flex:0 0 auto;width:clamp(128px,15vw,168px);scroll-snap-align:start}
.rail-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding-left:6px;pointer-events:none}
.rail-arrow{position:absolute;top:0;bottom:10px;width:52px;border:0;cursor:pointer;z-index:3;color:var(--text);font-size:28px;line-height:1;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.rail-arrow.left{left:-6px;justify-content:flex-start;background:linear-gradient(90deg,var(--bg) 30%,transparent)}
.rail-arrow.right{right:-6px;justify-content:flex-end;background:linear-gradient(270deg,var(--bg) 30%,transparent)}
.rail-arrow.left{padding-left:6px}.rail-arrow.right{padding-right:6px}
.rail-wrap:hover .rail-arrow{opacity:.95}
.rail-arrow.hidden{opacity:0!important;pointer-events:none}

/* cards */
.card{cursor:pointer;display:flex;flex-direction:column;gap:9px;border:0;background:transparent;padding:0;text-align:left}
.poster{position:relative;aspect-ratio:2/3;border-radius:var(--radius);overflow:hidden;background:var(--surface) center/cover no-repeat;box-shadow:0 1px 2px rgba(0,0,0,.4);border:1px solid var(--line);transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s}
.card:hover .poster,.card:focus-visible .poster{transform:translateY(-6px) scale(1.012);box-shadow:0 20px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,77,109,.25);border-color:rgba(255,77,109,.4)}
.card:focus-visible{outline:none}
.card:focus-visible .poster{outline:2px solid var(--text);outline-offset:2px}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent 45%);opacity:0;transition:opacity .26s}
.card:hover .poster::after{opacity:1}
.poster .badge{position:absolute;left:8px;top:8px;font-size:10px;letter-spacing:.06em;font-weight:700;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:3px 7px;border-radius:7px;color:#fff;border:1px solid rgba(255,255,255,.14)}
.poster .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);width:50px;height:50px;border-radius:50%;background:var(--accent-grad);border:0;display:grid;place-items:center;opacity:0;box-shadow:0 8px 22px rgba(255,77,109,.5);transition:.24s var(--ease)}
.poster .play svg{width:16px;height:16px;fill:#fff;margin-left:2px}
.card:hover .poster .play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.poster-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;color:var(--faint);font-size:12px;background:linear-gradient(145deg,#1a1a1f,#232329)}
.meta{display:flex;flex-direction:column;gap:2px;padding:0 1px}
.title{font-size:13.5px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sub{font-size:12px;color:var(--faint)}

/* download markers on cards */
.poster .dl-badge{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:2}
.poster .dl-badge svg{width:13px;height:13px;fill:none;stroke:#63d389;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.poster .dl-prog{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);font-size:11px;color:#fff}
.poster .dl-prog .bar{height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:4px}
.poster .dl-prog .bar span{display:block;height:100%;background:#63d389;border-radius:3px;transition:width .4s}

/* results header + download-all + player download */
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.btn-sm{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--text);padding:8px 14px;border-radius:9px;cursor:pointer;font-size:13px}
.btn-sm svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-sm:hover{background:rgba(255,255,255,.12)}
.btn-sm:disabled{opacity:.6;cursor:default}
.dl-chip{font-size:12px;color:var(--muted);white-space:nowrap}
#dlBtn.done{border-color:rgba(99,211,137,.5)}
#dlBtn.done svg{stroke:#63d389}
.card .dl-remove{position:absolute;left:8px;top:8px;z-index:3;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);border:0;color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.card:hover .dl-remove{opacity:1}
.card .dl-remove svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}

/* results grid */
.section{font-size:15px;font-weight:600;letter-spacing:.01em;margin:16px 2px 18px}
.grid{display:grid;gap:clamp(12px,1.5vw,20px);grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.empty{color:var(--faint);text-align:center;margin-top:60px}
.sentinel{height:1px}
.loaderRow{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:13px;padding:30px}

/* spinner */
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--text);animation:sp .7s linear infinite;display:inline-block}
.spin.big{width:30px;height:30px;border-width:2.5px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------- Player ---------------- */
.player{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:60;background:#000;overflow:hidden}
.player-bg{position:absolute;inset:0;background:#000 center/cover no-repeat;filter:blur(44px) brightness(.3) saturate(1.2);transform:scale(1.18);opacity:.9}
.player-top{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:14px;padding:calc(14px + var(--safe-t)) calc(clamp(14px,4vw,30px) + var(--safe-r)) 14px calc(clamp(14px,4vw,30px) + var(--safe-l));background:linear-gradient(180deg,rgba(0,0,0,.65),transparent)}
.player-meta{flex:1 1 auto;min-width:0}
.pt-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-sub{font-size:12px;color:var(--muted);margin-top:1px}
.player-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s;flex:0 0 auto}
.icon-btn:hover{background:rgba(255,255,255,.1);border-color:var(--line-2)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mini-select{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px;cursor:pointer}
.player-body{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:var(--chrome-top) calc(10px + var(--safe-r)) var(--chrome-bottom) calc(10px + var(--safe-l))}
/* size the element to the video's own aspect ratio (portrait → tall phone frame), capped to the viewport — no stretch, no crop.
   NB: cap against the viewport with calc(), NOT max-height:100% — inside a grid/flex centering container the
   percentage resolves against an auto-sized track (the video's own height) and is silently ignored, letting the
   frame render at full natural size and overflow under the controls. */
.video{
  max-width:calc(100vw - 20px - var(--safe-l) - var(--safe-r));
  max-height:calc(100vh - var(--chrome-top) - var(--chrome-bottom));
  max-height:calc(100dvh - var(--chrome-top) - var(--chrome-bottom));
  width:auto;height:auto;object-fit:contain;background:#000;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)
}

/* in fullscreen, let the video use the WHOLE screen (no reserved chrome space) so it's as large as possible;
   controls auto-hide and overlay it like a normal player */
.player:fullscreen .player-body,
.player:-webkit-full-screen .player-body{padding:0}
.player:fullscreen .video,
.player:-webkit-full-screen .video{max-width:100vw;max-height:100vh;max-height:100dvh;border-radius:0}

/* show/hide top bar + controls together */
.player-top,.controls{transition:opacity .22s var(--ease),transform .22s var(--ease)}
.player:not(.show-ui) .player-top{opacity:0;transform:translateY(-8px);pointer-events:none}
.player:not(.show-ui) .controls{opacity:0;transform:translateY(10px);pointer-events:none}
.player:not(.show-ui){cursor:none}
.player.busy .controls{display:none}

/* control bar */
.controls{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:26px calc(clamp(12px,3vw,26px) + var(--safe-r)) calc(14px + var(--safe-b)) calc(clamp(12px,3vw,26px) + var(--safe-l));
  background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 60%,transparent);display:flex;flex-direction:column;gap:6px}
.seek{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;cursor:pointer;background:rgba(255,255,255,.22);outline:none}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--text);cursor:pointer;box-shadow:0 0 0 4px rgba(255,255,255,.12);transition:transform .1s}
.seek::-webkit-slider-thumb:hover{transform:scale(1.2)}
.seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--text);cursor:pointer}
.ctrl-row{display:flex;align-items:center;gap:6px}
.cbtn{width:40px;height:40px;border:0;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;border-radius:50%;transition:background .15s}
.cbtn:hover{background:rgba(255,255,255,.14)}
.cbtn svg{width:21px;height:21px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cbtn .i-play,.cbtn .i-pause{fill:var(--text);stroke:none}
#playBtn svg{width:24px;height:24px}
.time{font-size:12.5px;color:var(--text);margin:0 8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vol{display:flex;align-items:center;gap:2px}
.vol-slider{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:4px;border-radius:4px;background:rgba(255,255,255,.3);transition:width .2s var(--ease),opacity .2s;cursor:pointer}
.vol:hover .vol-slider{width:72px;opacity:1}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--text);cursor:pointer}
.spacer{flex:1 1 auto}
.ep-label{font-size:12px;color:var(--muted);margin-right:6px;white-space:nowrap}
/* episode selector — desktop keeps the chapters button; mobile uses this dropdown at the bottom instead */
.ep-select{background:rgba(255,255,255,.08);border:1px solid var(--line-2);color:var(--text);border-radius:8px;padding:7px 9px;font-size:13px;cursor:pointer;max-width:120px;margin:0 4px}
.ep-select:focus{outline:none;border-color:var(--text)}
.ep-select option{background:#15151b;color:var(--text)}
@media (min-width:761px){.ep-select{display:none}}
/* caption + audio track controls */
.trk{position:relative;display:flex;align-items:center}
.trk-menu{position:absolute;bottom:50px;right:0;min-width:150px;max-height:260px;overflow:auto;background:rgba(16,16,20,.96);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:11px;padding:6px;box-shadow:0 14px 44px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px;z-index:8}
.track-opt{text-align:left;background:0;border:0;color:var(--text);padding:8px 12px 8px 26px;border-radius:7px;cursor:pointer;font-size:13px;white-space:nowrap;position:relative}
.track-opt:hover{background:var(--surface)}
.track-opt.active{background:var(--surface-2)}
.track-opt.active::before{content:"\2713";position:absolute;left:9px;color:#63d389;font-size:12px}
#ccBtn.on{background:rgba(255,255,255,.16)}
#ccBtn.on svg{stroke:#fff}
/* while preparing or on error, hide the raw <video> (and its empty control bar) — show the card over the blurred backdrop */
.player.busy .video{visibility:hidden}
.player-loading,.player-error{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:24px}
.pl-card{display:flex;align-items:center;gap:20px;max-width:min(440px,88vw);padding:18px 22px;border-radius:16px;
  background:rgba(18,18,22,.68);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.pl-poster{width:74px;aspect-ratio:2/3;flex:0 0 auto;border-radius:10px;background:#111 center/cover no-repeat;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.pl-meta{min-width:0;display:flex;flex-direction:column;gap:7px;text-align:left}
.pl-text{font-size:15.5px;font-weight:600;line-height:1.25}
.pl-sub{font-size:12.5px;color:var(--muted);line-height:1.45}
.pl-bar{height:3px;border-radius:3px;background:var(--line-2);overflow:hidden;margin-top:3px;position:relative}
.pl-bar span{position:absolute;top:0;left:0;height:100%;width:38%;background:var(--text);border-radius:3px;animation:slide 1.15s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.btn{align-self:flex-start;margin-top:4px;border:1px solid var(--line-2);background:rgba(255,255,255,.06);color:var(--text);padding:8px 18px;border-radius:9px;cursor:pointer;font-size:13.5px}
.btn:hover{background:rgba(255,255,255,.12)}
.chapters{position:fixed;z-index:20;top:0;right:0;bottom:0;width:min(360px,90vw);background:var(--bg-elev);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(0,0,0,.5);animation:chIn .22s var(--ease)}
@keyframes chIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@media (max-width:620px){
  .chapters{top:auto;left:0;right:0;bottom:0;width:auto;max-height:70vh;border-left:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -24px 60px rgba(0,0,0,.5);animation:chUp .24s var(--ease)}
  @keyframes chUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
}
.ch-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;font-size:14px;font-weight:600;border-bottom:1px solid var(--line)}
#chList{list-style:none;margin:0;padding:8px;overflow:auto}
.ch-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;cursor:pointer;font-size:13.5px}
.ch-item:hover{background:var(--surface)}
.ch-item.active{background:var(--surface-2)}
.ch-num{width:30px;color:var(--faint);font-size:12px;flex:0 0 auto}
.ch-item.active .ch-num{color:var(--text)}

/* ---------------- Responsive ---------------- */
.player{height:100dvh}  /* fill the real visible viewport on mobile (dynamic toolbars) */

/* tablets and below */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .rail .card{width:clamp(130px,20vw,170px)}
}

/* phones */
@media (max-width:760px){
  /* phone control bar is taller (bigger tap targets) — reserve a bit more */
  :root{--chrome-top:calc(58px + var(--safe-t));--chrome-bottom:calc(120px + var(--safe-b))}
  /* mobile header: logo + full-width search on row 1, all categories wrapped on row 2 (no horizontal scroll) */
  .top{flex-wrap:wrap;gap:10px 12px;padding:calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) 10px calc(16px + var(--safe-l))}
  .word{font-size:18px;order:1}
  .top-right{order:2;flex:1 1 auto;min-width:0;gap:0}
  .search{width:auto;flex:1 1 auto;min-width:0;padding:9px 4px;border-color:var(--line-2)}
  .search:focus-within{width:auto;border-color:var(--text)}
  #search{font-size:16px}
  .catbar{order:3;flex-basis:100%;overflow-x:visible;flex-wrap:wrap;mask-image:none;gap:7px}
  .cat{font-size:13px;padding:8px 13px}
  .hero-poster{display:none}
  .hero{min-height:210px;border-radius:14px}
  .hero-title{font-size:clamp(21px,6.5vw,30px)}
  .stage{padding:8px 14px 64px}
  .section{margin:12px 2px 12px;font-size:14px}
  /* player: touch-friendly, drop secondary controls */
  .player-top{padding:calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) 12px calc(14px + var(--safe-l))}
  .pt-title{font-size:14px}
  .pt-sub{font-size:11px}
  .icon-btn{width:40px;height:40px}
  .cbtn{width:46px;height:46px}
  .cbtn svg{width:22px;height:22px}
  #playBtn svg{width:26px;height:26px}
  .ep-label,.vol{display:none}
  #partsBtn{display:none}   /* mobile uses the bottom episode dropdown instead of the chapters button */
  .controls{padding:34px calc(12px + var(--safe-r)) calc(16px + var(--safe-b)) calc(12px + var(--safe-l));gap:8px}
  .stage{padding-left:calc(14px + var(--safe-l));padding-right:calc(14px + var(--safe-r))}
  .seek{height:5px}
  .seek::-webkit-slider-thumb{width:16px;height:16px}
  .chapters{width:min(330px,92vw)}
  .pl-card{flex-direction:column;text-align:center;gap:14px;padding:18px}
  .pl-meta{text-align:center}
  .btn{align-self:center}
}

/* small phones: ~2–3 poster columns */
@media (max-width:520px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(callc,1fr));grid-template-columns:repeat(auto-fill,minmax(clamp(104px,42vw,150px),1fr))}
  .hero-intro{-webkit-line-clamp:2}
}

/* TV / very large screens: scale up for 10-foot viewing */
@media (min-width:1700px){
  .top{padding:18px clamp(40px,4vw,96px)}
  .word{font-size:24px}
  #search{font-size:17px}
  .cat{font-size:16px;padding:9px 16px}
  .stage{padding:16px clamp(40px,4vw,96px) 110px}
  .section{font-size:18px}
  .row-head h2{font-size:21px}
  .rail .card{width:clamp(200px,13vw,260px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  .hero{min-height:clamp(360px,30vw,520px)}
  .hero-title{font-size:clamp(40px,3.4vw,60px)}
  .hero-intro{font-size:17px}
  .cbtn{width:50px;height:50px}
  .cbtn svg{width:25px;height:25px}
  #playBtn svg{width:30px;height:30px}
  .time{font-size:15px}
  .pt-title{font-size:19px}
  .icon-btn{width:46px;height:46px}
  .icon-btn svg{width:22px;height:22px}
}

/* touch / remote: no hover affordances — swipe rails, keep controls tappable */
@media (hover:none){
  .rail-arrow{display:none}
  .vol:hover .vol-slider{width:0;opacity:0}
  .poster .play{opacity:.9;transform:translate(-50%,-50%) scale(1)}
}