/* ─────────────────────────────────────────────────────────
   Cineby-inspired fullscreen player
   ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
:root{
  --bg:#000;
  --fg:#fff;
  --fg-soft:rgba(255,255,255,0.86);
  --fg-mid:rgba(255,255,255,0.6);
  --fg-dim:rgba(255,255,255,0.36);
  --accent:#dc2626;
  --accent-hi:#f87171;
  --surface:rgba(16,16,18,0.92);
  --island:rgba(20,20,24,0.62);
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.16);
  --controls-opacity:1;
}
html,body{margin:0;height:100%;background:#000;color:#fff;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}

.player-root{
  position:fixed;inset:0;background:#000;overflow:hidden;cursor:none;outline:none;
}
.player-root.show-controls,
.player-root.paused{cursor:default}
/* When idle (no show-controls, not paused, no panel open) hide cursor on EVERYTHING
   inside the player. Without this descendants like .icon-btn (cursor:pointer) and
   the <video> element (default arrow) keep showing their own cursor. */
.player-root:not(.show-controls):not(.paused):not(.drawer-open):not(.settings-open),
.player-root:not(.show-controls):not(.paused):not(.drawer-open):not(.settings-open) *{cursor:none!important}

.video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block;
}
.video-wrap-shim{position:absolute;inset:0;pointer-events:none}  /* keeps #video-wrap ID happy for legacy JS */

/* ── Top: back arrow + logo ─────────────────────────── */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  /* clear the notch / side insets in PWA + landscape */
  padding:18px 22px;
  padding-top:calc(18px + env(safe-area-inset-top, 0px));
  padding-left:calc(22px + env(safe-area-inset-left, 0px));
  padding-right:calc(22px + env(safe-area-inset-right, 0px));
  background:linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 100%);
  transition:opacity .25s ease,transform .25s ease;
}
.back{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:999px;
  color:var(--fg);background:transparent;border:0;cursor:pointer;
  transition:background .15s ease;
}
.back:hover{background:rgba(255,255,255,0.08)}
.back svg{width:22px;height:22px}
.logo{
  font-weight:700;font-size:14px;letter-spacing:0.08em;color:var(--fg-mid);
  text-transform:uppercase;
}

/* ── Watch party (injected by player.js) ─────────── */
.watch-dropdown{position:relative;display:inline-block;margin-left:auto}
.watch-toggle{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  color:var(--fg);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.watch-toggle:hover{background:rgba(255,255,255,0.12);border-color:var(--border-strong)}
.watch-toggle::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(220,38,38,0.6)}
.watch-panel{
  position:absolute;right:0;top:calc(100% + 8px);
  background:rgba(20,20,24,0.92);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--border);border-radius:14px;
  padding:14px;min-width:280px;
  box-shadow:0 24px 50px rgba(0,0,0,0.7);
  display:none;z-index:100;
}
.watch-panel.open{display:block}
.watch-panel > div{display:flex !important;align-items:center;gap:8px;margin-bottom:10px}
.watch-panel input{
  flex:1;min-width:0;
  height:32px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  color:var(--fg);font-family:inherit;font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;outline:none;
}
.watch-panel input::placeholder{color:var(--fg-mid);letter-spacing:0.08em}
.watch-panel input:focus{border-color:var(--border-strong)}
.watch-panel button{
  height:32px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid var(--border);
  color:var(--fg);font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:0.02em;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.watch-panel button:hover{background:rgba(255,255,255,0.14);border-color:var(--border-strong)}
.watch-panel #create-party{background:var(--accent);border-color:var(--accent);color:#fff}
.watch-panel #create-party:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.watch-panel .status{font-size:11.5px;color:var(--fg-mid);margin-top:2px;letter-spacing:0.01em}
#crumb,#episode-title{display:none}  /* shown only via pause overlay */

/* Hide cursor + chrome when idle (unless paused, drawer or settings open) */
.player-root:not(.show-controls):not(.paused):not(.drawer-open):not(.settings-open) .topbar,
.player-root:not(.show-controls):not(.paused):not(.drawer-open):not(.settings-open) .controls{
  opacity:0;pointer-events:none;
}

/* ── Pause overlay (logo / title + meta + ep title + desc) ── */
.pause-overlay{
  position:absolute;inset:0;z-index:14;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.20) 30%,rgba(0,0,0,0.30) 60%,rgba(0,0,0,0.85) 100%);
}
.player-root.paused .pause-overlay{opacity:1}

.pause-info{
  position:absolute;left:44px;bottom:120px;z-index:15;
  max-width:46%;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease;
  pointer-events:none;
}
.player-root.paused .pause-info{opacity:1;transform:translateY(0)}
.pause-info .show-logo{
  display:block;width:240px;max-width:60vw;height:auto;margin-bottom:14px;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,0.7));
}
.pause-info .show-title{
  display:none;
  font-family:'Instrument Serif','Times New Roman',Georgia,serif;font-weight:400;
  font-size:54px;line-height:1;letter-spacing:-0.005em;color:var(--fg);
  margin:0 0 14px;
}
.pause-info .meta{
  font-size:13px;font-weight:500;letter-spacing:0.01em;color:var(--fg-mid);margin-bottom:18px;
}
.pause-info .ep-title{
  font-size:16px;font-weight:700;color:var(--fg);letter-spacing:-0.005em;margin:0 0 6px;
}
.pause-info .desc{
  font-size:13.5px;line-height:1.55;color:var(--fg-soft);max-width:480px;margin:0;
}

/* ── Bottom controls ──────────────────────────────── */
.controls{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  /* lift above the home indicator + clear side insets so the fullscreen/other
     buttons aren't pushed off-screen in PWA + landscape */
  padding:14px 22px 18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  padding-left:calc(22px + env(safe-area-inset-left, 0px));
  padding-right:calc(22px + env(safe-area-inset-right, 0px));
  display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(0deg,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0) 100%);
  transition:opacity .25s ease,transform .25s ease;opacity:var(--controls-opacity);
}

.progress-row{display:flex;align-items:center;gap:14px;padding:0 4px 4px}
.progress{position:relative;flex:1;height:18px;display:flex;align-items:center;cursor:pointer}
.progress .rail{
  position:relative;width:100%;height:2px;border-radius:2px;
  background:rgba(255,255,255,0.18);transition:height .15s ease;
}
.progress:hover .rail{height:4px}
.progress .buffer{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,0.28);width:0%}
.progress .play{position:absolute;left:0;top:0;bottom:0;background:var(--fg);width:0%;border-radius:2px}
.progress .thumb{
  position:absolute;left:0%;top:50%;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;background:var(--fg);
  box-shadow:0 0 0 3px rgba(0,0,0,0.5);
}
.seek{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  width:100%;height:14px;background:transparent;-webkit-appearance:none;appearance:none;
  border:0;outline:0;cursor:pointer;margin:0;opacity:0;
}

#seg-markers{position:absolute;inset:0;pointer-events:none}
.seg-mark{position:absolute;top:0;bottom:0;border-radius:2px;opacity:.85}
.seg-intro  { background:rgba(220,38,38,0.55) }
.seg-recap  { background:rgba(255,165,70,0.55) }
.seg-credits{ background:rgba(180,100,255,0.55) }
.seg-preview{ background:rgba(80,210,120,0.55) }

.time{
  font-size:12px;font-weight:500;color:var(--fg-soft);font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;min-width:108px;text-align:right;white-space:nowrap;
}

.controls-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.controls-left,.controls-right{display:flex;align-items:center;gap:4px}

/* Volume slider — expands on hover/focus, Netflix-style */
.volume-slider{
  -webkit-appearance:none;appearance:none;height:4px;border-radius:999px;
  width:0;opacity:0;margin:0;cursor:pointer;outline:none;
  background:linear-gradient(to right,var(--accent-hi,#f87171) 100%,rgba(255,255,255,0.25) 100%);
  transition:width .18s ease,opacity .18s ease,margin .18s ease;
}
.controls-left:hover .volume-slider,.volume-slider:hover,.volume-slider:focus-visible{
  width:84px;opacity:1;margin:0 8px 0 2px;
}
.volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:#fff;border:0;box-shadow:0 0 6px rgba(0,0,0,0.5);
}
.volume-slider::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:#fff;border:0;
}

.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;background:transparent;border:0;border-radius:999px;
  cursor:pointer;color:var(--fg);
  transition:background .15s ease,transform .12s ease;
}
.icon-btn:hover{background:rgba(255,255,255,0.10)}
.icon-btn:active{transform:scale(0.94)}
.icon-btn svg{width:22px;height:22px;fill:currentColor}

.btn-with-label{
  display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:0 16px;background:transparent;border:0;border-radius:999px;cursor:pointer;color:var(--fg);
  font-family:inherit;font-size:13px;font-weight:500;letter-spacing:0.02em;
  transition:background .15s ease;
}
.btn-with-label:hover{background:rgba(255,255,255,0.10)}
.btn-with-label svg{width:20px;height:20px}

/* Hide elements not used in cineby layout */
#source-select,#audio-select,#quality-select,#subtitle-select,.legacy-selects,.legacy-seasons{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;left:-9999px;top:-9999px}
#selector-modal{display:none!important}  /* superseded by the cineby drawer */

/* Movie mode: hide episodes button entirely */
.player-root.is-movie #episodes-toggle,
.player-root.is-movie #next-episode{display:none}

/* ── Player UI scale ──────────────────────────────── */
.player-root.ui-scale-s  .icon-btn{width:36px;height:36px}
.player-root.ui-scale-s  .icon-btn svg{width:18px;height:18px}
.player-root.ui-scale-s  .btn-with-label{height:36px;padding:0 12px;font-size:11.5px}
.player-root.ui-scale-s  .btn-with-label svg{width:17px;height:17px}
.player-root.ui-scale-s  .time{font-size:11px;min-width:96px}
.player-root.ui-scale-s  .controls{padding:10px 18px 14px;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}

.player-root.ui-scale-l  .icon-btn{width:48px;height:48px}
.player-root.ui-scale-l  .icon-btn svg{width:26px;height:26px}
.player-root.ui-scale-l  .btn-with-label{height:48px;padding:0 20px;font-size:14px;gap:10px}
.player-root.ui-scale-l  .btn-with-label svg{width:22px;height:22px}
.player-root.ui-scale-l  .time{font-size:14px;min-width:124px}
.player-root.ui-scale-l  .controls{padding:18px 26px 22px;padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px))}
.player-root.ui-scale-l  .progress .rail{height:3px}
.player-root.ui-scale-l  .progress:hover .rail{height:5px}

.player-root.ui-scale-xl .icon-btn{width:56px;height:56px}
.player-root.ui-scale-xl .icon-btn svg{width:30px;height:30px}
.player-root.ui-scale-xl .btn-with-label{height:56px;padding:0 24px;font-size:15px;gap:12px}
.player-root.ui-scale-xl .btn-with-label svg{width:26px;height:26px}
.player-root.ui-scale-xl .time{font-size:16px;min-width:140px}
.player-root.ui-scale-xl .controls{padding:22px 30px 26px;padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px))}
.player-root.ui-scale-xl .progress .rail{height:4px}
.player-root.ui-scale-xl .progress:hover .rail{height:6px}
.player-root.ui-scale-xl .progress .thumb{width:16px;height:16px}

/* Pause overlay scales with UI size too */
.player-root.ui-scale-s  .pause-info{bottom:108px}
.player-root.ui-scale-s  .pause-info .show-logo{width:200px}
.player-root.ui-scale-s  .pause-info .show-title{font-size:42px}
.player-root.ui-scale-s  .pause-info .meta{font-size:11.5px;margin-bottom:14px}
.player-root.ui-scale-s  .pause-info .ep-title{font-size:14.5px}
.player-root.ui-scale-s  .pause-info .desc{font-size:12.5px}

.player-root.ui-scale-l  .pause-info{bottom:140px}
.player-root.ui-scale-l  .pause-info .show-logo{width:300px;max-width:70vw;margin-bottom:18px}
.player-root.ui-scale-l  .pause-info .show-title{font-size:64px}
.player-root.ui-scale-l  .pause-info .meta{font-size:15px;margin-bottom:22px;letter-spacing:0.015em}
.player-root.ui-scale-l  .pause-info .ep-title{font-size:20px;margin-bottom:8px}
.player-root.ui-scale-l  .pause-info .desc{font-size:15px;line-height:1.6;max-width:560px}

.player-root.ui-scale-xl .pause-info{bottom:160px;left:60px}
.player-root.ui-scale-xl .pause-info .show-logo{width:360px;max-width:78vw;margin-bottom:22px}
.player-root.ui-scale-xl .pause-info .show-title{font-size:76px}
.player-root.ui-scale-xl .pause-info .meta{font-size:17px;margin-bottom:26px;letter-spacing:0.02em}
.player-root.ui-scale-xl .pause-info .ep-title{font-size:24px;margin-bottom:10px}
.player-root.ui-scale-xl .pause-info .desc{font-size:17px;line-height:1.65;max-width:640px}

/* Desktop-only buttons hidden on touch devices (keyboard shortcuts only — fullscreen stays) */
@media (hover: none) and (pointer: coarse){
  .desktop-only,
  #shortcuts-btn{display:none!important}
  /* Tighten the controls row on touch (keep the safe-area insets) */
  .controls{padding:8px 10px 12px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left:calc(10px + env(safe-area-inset-left, 0px));
    padding-right:calc(10px + env(safe-area-inset-right, 0px))}
  .controls-left,.controls-right{gap:2px}
  .icon-btn{width:36px;height:36px}
  .icon-btn svg{width:19px;height:19px}
  .btn-with-label{height:36px;padding:0 10px;font-size:11.5px;gap:6px}
  .btn-with-label svg{width:16px;height:16px}
  .btn-with-label span{display:none}  /* keep just the icon on mobile */
  .time{min-width:74px;font-size:10.5px;letter-spacing:0;text-align:right}
  .progress-row{gap:8px;padding:0 2px 4px}
}

/* ── Dynamic-island drawer (transparent — top pill only has bg) ─ */
.drawer{
  position:absolute;top:18px;right:18px;bottom:108px;z-index:50;
  width:320px;max-width:calc(100vw - 36px);
  display:flex;flex-direction:column;gap:14px;
  transform:translateX(calc(100% + 30px));opacity:0;
  transition:transform .35s cubic-bezier(.22,.85,.32,1),opacity .25s ease;
  pointer-events:none;
}
.drawer.open{transform:translateX(0);opacity:1;pointer-events:auto}

.drawer-top{
  display:flex;align-items:center;gap:6px;
  background:rgba(20,20,24,0.62);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--border);
  border-radius:999px;padding:4px;flex-shrink:0;
}
.search-pill{
  flex:1;min-width:0;
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 12px;
  background:rgba(255,255,255,0.04);border:0;border-radius:999px;
  color:var(--fg-mid);
  transition:background .15s,color .15s;
}
.search-pill:focus-within{background:rgba(255,255,255,0.10);color:var(--fg)}
.search-pill svg{width:12px;height:12px;flex-shrink:0;opacity:0.7}
.search-pill input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  color:var(--fg);font-size:11.5px;font-family:inherit;padding:0;height:100%;
}
.search-pill input::placeholder{color:var(--fg-mid)}

.season-pill-wrap{position:relative;flex-shrink:0}
.season-pill{
  display:inline-flex;align-items:center;gap:3px;
  height:28px;padding:0 11px;background:transparent;border:0;border-radius:999px;
  color:var(--fg);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background .15s;
}
.season-pill:hover{background:rgba(255,255,255,0.08)}
.season-pill svg{width:11px;height:11px;opacity:0.7;transition:transform .15s}
.season-pill-wrap.open .season-pill svg{transform:rotate(180deg)}
.season-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:130px;
  background:rgba(20,20,24,0.94);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--border);border-radius:10px;padding:4px;
  box-shadow:0 18px 40px rgba(0,0,0,0.6);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .15s,transform .15s;
  max-height:300px;overflow-y:auto;
}
.season-pill-wrap.open .season-dropdown{opacity:1;transform:translateY(0);pointer-events:auto}
.season-dropdown .item{
  display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:7px;cursor:pointer;
  color:var(--fg-soft);font-size:12px;font-weight:500;transition:background .12s,color .12s;
}
.season-dropdown .item:hover{background:rgba(255,255,255,0.06);color:var(--fg)}
.season-dropdown .item.active{color:var(--fg);font-weight:600}
.season-dropdown .item.active::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:auto}

.autonext{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  color:var(--fg);font-size:11.5px;font-weight:500;cursor:pointer;
  background:transparent;border:0;font-family:inherit;padding:0 6px;
}
.autonext .switch{
  position:relative;display:inline-flex;align-items:center;
  width:34px;height:18px;border-radius:999px;background:rgba(255,255,255,0.16);
  padding:0 6px;font-size:8.5px;font-weight:700;letter-spacing:0.06em;color:rgba(255,255,255,0.7);
  transition:background .15s;
}
.autonext .switch::before{content:'OFF';margin-left:auto;line-height:1}
.autonext .switch::after{
  content:'';position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:var(--fg);
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.autonext.on .switch{background:var(--accent)}
.autonext.on .switch::before{content:'ON';margin-left:0;margin-right:auto;color:#fff}
.autonext.on .switch::after{transform:translateX(16px)}
.drawer-close{
  flex-shrink:0;background:transparent;border:0;color:var(--fg-mid);cursor:pointer;
  width:26px;height:26px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.drawer-close:hover{background:rgba(255,255,255,0.10);color:var(--fg)}
.drawer-close svg{width:13px;height:13px}

.season-banner{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 14px 4px;text-align:center;flex-shrink:0;
}
.season-banner .title{
  font-size:21px;font-weight:700;color:var(--fg);letter-spacing:-0.01em;
}
.season-banner .desc{margin:0;font-size:12px;line-height:1.45;color:var(--fg-soft);max-width:280px}

/* Anime mode hides season pill + banner; movie mode hides whole drawer */
.player-root.is-anime .season-pill-wrap,
.player-root.is-anime .season-banner{display:none}
.player-root.is-anime .drawer-top{justify-content:space-between}
.player-root.is-movie .drawer{display:none}

/* Coverflow episodes stack */
.episodes-stack{
  position:relative;flex:1;overflow:hidden;
  padding:6px 8px 14px;min-height:360px;
}
.ep-card{
  position:absolute;left:8px;right:8px;top:6px;
  text-decoration:none;color:inherit;cursor:pointer;
  border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:#0a0c10;aspect-ratio:16/9;
  transform-origin:50% 0%;isolation:isolate;
  will-change:transform,opacity;
  transition:transform .45s cubic-bezier(.22,.85,.32,1),opacity .35s ease;
}
.ep-card img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;
}
.ep-card::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.45) 40%,rgba(0,0,0,0.06) 80%,rgba(0,0,0,0) 100%);
}
.ep-card::before{
  content:'';position:absolute;inset:0;z-index:2;background:rgba(0,0,0,0.40);
  transition:background .35s ease;
}
.ep-card.active::before{background:rgba(0,0,0,0)}
.ep-card .body{position:absolute;left:16px;right:16px;bottom:14px;z-index:3}
.ep-card .watching{
  position:absolute;top:14px;left:14px;z-index:4;
  padding:4px 10px;border-radius:6px;background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:0.14em;
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s ease,transform .3s ease;
}
.ep-card.playing .watching{opacity:1;transform:translateY(0)}
.ep-card .title-row{
  display:flex;align-items:baseline;gap:6px;
  font-size:14px;font-weight:700;color:var(--fg);letter-spacing:-0.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ep-card.active .title-row{font-size:15px}
.ep-card .title-row .num{margin-right:2px;flex-shrink:0}
.ep-card .left-tag{
  margin-top:3px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.55);
  font-variant-numeric:tabular-nums;
}
.ep-card.active .left-tag{color:var(--accent-hi);font-weight:600;font-size:12px}
.ep-card .desc{
  margin:8px 0 0;font-size:12px;line-height:1.4;color:rgba(255,255,255,0.88);
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-height:0;opacity:0;
  transition:max-height .3s ease,opacity .3s ease,margin-top .3s ease;
}
.ep-card.active .desc{display:-webkit-box;max-height:36px;opacity:1}

/* ── Settings panel (tabs + 4 panes) ───────────────── */
.settings-tabs-row{
  position:absolute;top:18px;right:22px;z-index:51;
  display:inline-flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.settings-panel-wrap.open .settings-tabs-row{opacity:1;transform:translateY(0);pointer-events:auto}
.settings-tabs{
  display:inline-flex;align-items:center;background:rgba(20,20,24,0.62);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:999px;padding:4px;gap:2px;
}
.settings-tabs .tab{
  background:transparent;border:0;font-family:inherit;cursor:pointer;
  padding:6px 14px;border-radius:999px;
  color:var(--fg-mid);font-size:12.5px;font-weight:500;letter-spacing:0.005em;
  transition:background .15s,color .15s;
}
.settings-tabs .tab:hover{color:var(--fg)}
.settings-tabs .tab.active{background:rgba(0,0,0,0.65);color:var(--fg);font-weight:600}
.settings-close{
  background:rgba(20,20,24,0.62);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);width:32px;height:32px;border-radius:999px;
  color:var(--fg-mid);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.settings-close:hover{background:rgba(40,40,46,0.85);color:var(--fg)}
.settings-close svg{width:14px;height:14px}

.settings-panel{
  position:absolute;top:62px;right:22px;bottom:108px;z-index:50;
  width:320px;max-width:calc(100vw - 44px);
  background:var(--island);
  backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid var(--border);border-radius:18px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.75),0 0 0 1px rgba(255,255,255,0.04) inset;
  transform:translateX(calc(100% + 30px));opacity:0;
  transition:transform .35s cubic-bezier(.22,.85,.32,1),opacity .25s ease;
  display:flex;flex-direction:column;overflow:hidden;
}
.settings-panel-wrap.open .settings-panel{transform:translateX(0);opacity:1}
.settings-body{
  flex:1;overflow-y:auto;padding:14px 12px 16px;
  display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;
}
.settings-body::-webkit-scrollbar{width:5px}
.settings-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:3px}
.settings-pane{display:none;flex-direction:column;gap:8px}
.settings-pane.active{display:flex}

.opt-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,0.04);border:1px solid var(--border);
  color:var(--fg);font-size:13px;font-weight:500;letter-spacing:0.005em;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.opt-card:hover{background:rgba(255,255,255,0.07);border-color:var(--border-strong)}
.opt-card.active{
  background:rgba(220,38,38,0.18);border-color:rgba(220,38,38,0.45);
  color:var(--accent-hi);font-weight:600;
}
.opt-card .lead{display:inline-flex;align-items:center;gap:10px;min-width:0}
.opt-card .lead-text{display:flex;flex-direction:column;min-width:0}
.opt-card .lead-text strong{font-size:13px;font-weight:600}
.opt-card .lead-text small{font-size:11px;color:var(--fg-dim);margin-top:2px;font-weight:400}
.opt-card.active .lead-text small{color:rgba(248,113,113,0.7)}

.badge{
  flex-shrink:0;padding:3px 9px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:0.06em;
  background:rgba(220,38,38,0.22);color:var(--accent-hi);
  border:1px solid rgba(220,38,38,0.35);
}
.badge-soft{
  flex-shrink:0;padding:3px 9px;border-radius:6px;
  font-size:10px;font-weight:600;letter-spacing:0.04em;
  background:rgba(255,255,255,0.06);color:var(--fg-mid);
  border:1px solid var(--border);
}
.check-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--accent-hi)}

/* ── Modals (shortcuts, selector vestigial) ───────── */
.selector-modal{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.82);backdrop-filter:blur(12px);
  animation:fade-in .25s ease;
}
.selector-modal.hidden{display:none}
.shortcuts-card,.selector-card{
  width:min(460px,92vw);max-height:82vh;overflow-y:auto;
  background:rgba(16,16,18,0.96);
  border:1px solid var(--border);
  border-radius:14px;padding:0;
  box-shadow:0 24px 60px rgba(0,0,0,0.8);
  animation:rise .3s cubic-bezier(.2,.85,.2,1);
}
.selector-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;border-bottom:1px solid var(--border);
}
.selector-header h3{
  margin:0;font-size:18px;font-weight:600;color:var(--fg);letter-spacing:-0.005em;
}
.selector-header button{
  background:transparent;border:0;color:var(--fg-mid);font-size:17px;cursor:pointer;
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  transition:background .15s,color .15s;
}
.selector-header button:hover{background:rgba(255,255,255,0.06);color:var(--fg)}
.shortcuts-list{display:flex;flex-direction:column;gap:0;padding:8px 14px 18px}
.shortcut-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border-radius:8px;transition:background .15s;
}
.shortcut-row:hover{background:rgba(255,255,255,0.04)}
.shortcut-row > :first-child{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.shortcut-row kbd{
  background:rgba(255,255,255,0.08);border:1px solid var(--border-strong);
  border-radius:6px;padding:3px 8px;
  font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;
  color:var(--fg);line-height:1;min-width:22px;text-align:center;
}
.shortcut-row span{color:var(--fg-soft);font-size:13px;font-weight:500}

/* ── Scanning overlay ─────────────────────────────── */
.scanning-overlay{
  position:absolute;inset:0;z-index:55;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.86);backdrop-filter:blur(8px);gap:18px;
}
.scanning-overlay.hidden{display:none}
.scanning-spinner{
  width:42px;height:42px;
  border:2.5px solid rgba(255,255,255,0.10);border-top-color:var(--fg);
  border-radius:50%;animation:scan-spin .9s linear infinite;
}
.scanning-msg{font-size:13.5px;color:var(--fg);text-align:center;font-weight:500;letter-spacing:0.005em}
@keyframes scan-spin{to{transform:rotate(360deg)}}

/* ── Skip intro / next ep cards ──────────────────── */
.skip-btn{
  position:absolute;bottom:108px;right:24px;z-index:48;
  padding:11px 22px;
  background:rgba(255,255,255,0.95);color:#000;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:0.02em;
  border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.skip-btn:hover{background:#fff;transform:translateY(-1px)}
.skip-btn.hidden{display:none}

.next-ep-overlay{position:absolute;bottom:96px;right:24px;z-index:55;pointer-events:none}
.next-ep-overlay.hidden{display:none}
.next-ep-card{
  pointer-events:all;background:rgba(20,20,24,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:14px;padding:14px 16px;width:288px;
  box-shadow:0 24px 50px rgba(0,0,0,0.7);
}
.next-ep-header{font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-mid);margin-bottom:6px}
.next-ep-show{font-size:14px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next-ep-title{font-size:12.5px;color:var(--fg-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}
.next-ep-bar-wrap{height:3px;background:rgba(255,255,255,0.14);border-radius:999px;margin:12px 0 10px;overflow:hidden}
.next-ep-bar{height:100%;width:100%;background:var(--accent);border-radius:999px;transition:width 1s linear}
.next-ep-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.next-ep-countdown-label{font-size:11.5px;color:var(--fg-mid);white-space:nowrap}
.next-ep-actions{display:flex;gap:6px}
.next-ep-btn{
  padding:6px 14px;border-radius:999px;border:0;background:var(--fg);color:#000;
  font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .15s;
}
.next-ep-btn:hover{background:#fff}
.next-ep-btn.cancel{background:transparent;color:var(--fg-mid);border:1px solid var(--border-strong)}
.next-ep-btn.cancel:hover{background:rgba(255,255,255,0.06);color:var(--fg)}

.movie-rec-overlay{
  position:absolute;inset:0;z-index:60;
  background:linear-gradient(0deg,rgba(0,0,0,0.96) 0%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0.4) 100%);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 60px 80px;
  animation:fade-in .35s ease;
}
.movie-rec-overlay.hidden{display:none}
.movie-rec-card{
  width:100%;max-width:1280px;
  background:transparent;border:0;padding:0;
  animation:rise .5s cubic-bezier(.2,.85,.2,1);
}
.movie-rec-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;
  font-family:var(--font-display);font-size:32px;font-weight:400;color:var(--fg);letter-spacing:-0.005em;
}
.movie-rec-header .title-eyebrow{
  display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent-hi);margin-bottom:6px;
}
.movie-rec-close{
  background:rgba(255,255,255,0.08);border:1px solid var(--border);color:var(--fg-mid);
  font-size:14px;cursor:pointer;line-height:1;
  width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}
.movie-rec-close:hover{color:var(--fg);background:rgba(255,255,255,0.16);border-color:var(--border-strong)}
.movie-rec-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.movie-rec-item{
  cursor:pointer;border-radius:12px;overflow:hidden;background:rgba(20,20,24,0.6);
  border:1px solid var(--border);position:relative;
  transition:transform .25s ease,border-color .2s ease;
  display:block;text-decoration:none;color:inherit;
}
.movie-rec-item:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.20)}
.movie-rec-item .rec-bg{position:relative;aspect-ratio:16/9;background:#0a0c10;overflow:hidden}
.movie-rec-item .rec-bg img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.movie-rec-item:hover .rec-bg img{transform:scale(1.04)}
.movie-rec-item .rec-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 50%);
}
.movie-rec-item .rec-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);
  width:54px;height:54px;border-radius:999px;
  background:rgba(220,38,38,0.9);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease,transform .25s ease;
}
.movie-rec-item:hover .rec-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.movie-rec-item .rec-play svg{width:22px;height:22px;fill:#fff}
.movie-rec-meta{position:absolute;left:14px;right:14px;bottom:12px;z-index:2}
.movie-rec-meta .rec-title{
  font-size:16px;font-weight:700;color:var(--fg);letter-spacing:-0.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 2px 8px rgba(0,0,0,0.7);
}
.movie-rec-meta .rec-sub{
  margin-top:4px;font-size:11.5px;color:rgba(255,255,255,0.78);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:6px;
}
.movie-rec-meta .rec-sub .star{color:#fbbf24}
.movie-rec-meta .rec-sub .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.5)}
.movie-rec-loading{grid-column:1/-1;text-align:center;padding:40px;color:var(--fg-mid);font-size:13px}
.rec-no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#161620;color:var(--fg-dim);font-size:34px;font-family:var(--font-display)}

@media (max-width:880px){
  .movie-rec-overlay{padding:0 20px 30px}
  .movie-rec-list{grid-template-columns:1fr;gap:10px}
  .movie-rec-header{font-size:22px;margin-bottom:14px}
  .movie-rec-item .rec-bg{aspect-ratio:21/9}
}

/* ── Source toast + notif stack ──────────────────── */
.source-toast{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(80px);
  background:rgba(20,20,24,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--fg);padding:11px 22px;border-radius:999px;
  font-size:13px;font-weight:500;z-index:10001;
  border:1px solid var(--border);
  transition:transform .3s ease,opacity .3s ease;opacity:0;
  pointer-events:none;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,0.5);
}
.source-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.source-toast .toast-src{color:var(--accent-hi);font-weight:600}

.notif-stack{
  position:absolute;top:20px;right:74px;
  display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none;
}
.notif-item{
  padding:10px 14px;border-radius:10px;font-size:12.5px;font-weight:500;
  background:rgba(20,20,24,0.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);color:var(--fg);
  opacity:0;transform:translateX(20px);
  transition:opacity .28s ease,transform .28s ease;
  max-width:300px;line-height:1.4;pointer-events:none;
}
.notif-item.notif-show{opacity:1;transform:translateX(0)}

/* ── Animations ─────────────────────────────────── */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:640px){
  .topbar{padding:14px 14px;
    padding-top:calc(14px + env(safe-area-inset-top, 0px));
    padding-left:calc(14px + env(safe-area-inset-left, 0px));
    padding-right:calc(14px + env(safe-area-inset-right, 0px))}
  .controls{padding:10px 14px 14px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    padding-left:calc(14px + env(safe-area-inset-left, 0px));
    padding-right:calc(14px + env(safe-area-inset-right, 0px))}
  .icon-btn{width:38px;height:38px}
  .icon-btn svg{width:20px;height:20px}
  .btn-with-label{height:38px;padding:0 12px;font-size:12px}
  .btn-with-label svg{width:18px;height:18px}
  .time{font-size:11px;min-width:90px}
  .pause-info{left:22px;bottom:128px;max-width:calc(100% - 44px)}
  .pause-info .show-logo{width:180px}
  .pause-info .show-title{font-size:38px}
  .pause-info .desc{font-size:12.5px}

  /* Drawer + settings: full-width sheet on portrait mobile */
  .drawer{top:64px;left:10px;right:10px;bottom:96px;width:auto;max-width:none}
  .settings-panel{top:64px;left:10px;right:10px;bottom:96px;width:auto;max-width:none}
  .settings-tabs-row{top:14px;left:10px;right:10px;justify-content:space-between}
  .settings-tabs{flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}
  .settings-tabs::-webkit-scrollbar{display:none}
  .settings-tabs .tab{padding:5px 12px;font-size:11.5px;white-space:nowrap;flex-shrink:0}

  /* Hide topbar elements while a panel/drawer is open on mobile so the tabs row has room.
     !important to defeat inline opacity that legacy player.js sets on mousemove. */
  .player-root.settings-open .topbar,
  .player-root.drawer-open .topbar{opacity:0!important;pointer-events:none}

  .skip-btn{bottom:88px;right:12px;font-size:12.5px;padding:9px 18px}
  .next-ep-overlay{bottom:74px;right:10px}
  .next-ep-card{width:240px;padding:12px 14px}
  .movie-rec-list{grid-template-columns:repeat(2,1fr);gap:10px}
}

/* My List toggle (added with watchlist feature) */
#mylist-btn.active{color:var(--accent,#dc2626)}
#mylist-btn.active svg{fill:currentColor}

/* Download popover (tiered downloads) */
.dl-pop{
  position:absolute;right:14px;bottom:84px;z-index:60;width:240px;
  background:rgba(14,16,20,.97);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);font-size:13px;color:#eee;
  display:flex;flex-direction:column;gap:9px;
}
.dl-pop .dl-head{font-weight:600;font-size:13px;color:#fff}
.dl-pop .dl-note{color:#aaa;font-size:12px}
.dl-pop .dl-field{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#bbb;font-size:12px}
.dl-pop .dl-q{font:inherit;font-size:12px;padding:5px 8px;border-radius:7px;background:#0c0e12;color:#fff;border:1px solid rgba(255,255,255,.14);flex:1}
.dl-pop .dl-q:disabled{opacity:.6}
.dl-pop .dl-go,.dl-pop .dl-sub{
  font:inherit;font-size:13px;font-weight:600;padding:9px;border:0;border-radius:8px;cursor:pointer;
}
.dl-pop .dl-go{background:var(--accent,#dc2626);color:#fff}
.dl-pop .dl-sub{background:rgba(255,255,255,.1);color:#fff}
.dl-pop .dl-upsell{font-size:11.5px;color:#f0b}
.dl-pop .dl-upsell b{color:#fff}
.dl-pop .dl-msg{font-size:12px;color:#7dd87d;min-height:0}
.dl-pop .dl-msg:empty{display:none}

/* Save-offline button in the download popover */
.dl-pop .dl-offline{
  font:inherit;font-size:13px;font-weight:600;padding:9px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(125,216,125,.16);color:#7dd87d;
}
.dl-pop .dl-offline.busy{background:rgba(220,38,38,.18);color:#f87171}
.dl-pop .dl-msg a{color:#7dd87d}

/* Download settings pane — matches the subtitle/quality panes */
#pane-download .set-note{font-size:13px;color:var(--fg-mid);padding:2px 2px 8px}
#pane-download .set-note b{color:#fff}
#pane-download .set-sub{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-dim);padding:12px 2px 6px}
#pane-download .set-upsell{font-size:12px;line-height:1.55;color:var(--fg-mid);padding:12px;margin-top:10px;border-radius:11px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.22)}
#pane-download .set-upsell b{color:#fff}
#pane-download .set-status{font-size:12.5px;color:var(--accent-hi);padding:10px 2px 2px}
#pane-download .set-status:empty{display:none}
#pane-download .set-status a{color:var(--accent-hi);text-decoration:underline}
#pane-download .opt-card.busy{border-color:var(--accent);color:var(--accent-hi)}