/* ============================================================= *
 *  Dracin — BOLD & PUNCHY short-drama player
 *  Poster-forward · oversized display type · electric palette
 * ============================================================= */

/* ---------------- Fonts (bundled locally, offline-safe) ------- */
@font-face{
  font-family:"Geist";
  src:url("/vendor/fonts/geist.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/vendor/fonts/bricolage.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}

/* ---------------- Tokens ------------------------------------- */
:root{
  /* nocturnal, blue-biased grounds — picked, not defaulted */
  --bg:#070b14; --bg2:#0a1120; --panel:#111a2b; --panel2:#17223a;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --txt:#eaf1fc; --dim:#9db0ce; --faint:#63748f;

  /* one hero accent, electric azure; gold reserved for rank/premium moments */
  --accent:#2e7dff; --accent2:#35d6f0; --accent3:#7c6cff;
  --accent-weak:rgba(46,125,255,.16);
  --violet:#7c6cff;
  --gold:#ffc73a; --good:#2fe0a4;

  --radius:18px; --radius-sm:12px;
  --shadow:0 24px 60px -18px rgba(0,0,0,.78);
  --shadow-accent:0 22px 46px -16px rgba(46,125,255,.55);
  --grad:linear-gradient(118deg,var(--accent),var(--accent2) 72%,var(--accent3));
  --grad-hot:linear-gradient(125deg,var(--violet),var(--accent) 52%,var(--accent2));
  --sb:264px;

  --font:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f3f6fc; --bg2:#e8eef8; --panel:#ffffff; --panel2:#eef3fb;
    --line:rgba(12,26,52,.10); --line2:rgba(12,26,52,.18);
    --txt:#0e1626; --dim:#4a5a72; --faint:#8494ac;
    --accent-weak:rgba(46,125,255,.12);
    --shadow:0 24px 60px -20px rgba(20,40,80,.24);
    --shadow-accent:0 22px 44px -18px rgba(46,125,255,.42);
  }
}
/* explicit toggle always wins over the OS preference, both directions */
:root[data-theme="dark"]{
  --bg:#070b14; --bg2:#0a1120; --panel:#111a2b; --panel2:#17223a;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --txt:#eaf1fc; --dim:#9db0ce; --faint:#63748f;
  --accent-weak:rgba(46,125,255,.16);
  --shadow:0 24px 60px -18px rgba(0,0,0,.78);
  --shadow-accent:0 22px 46px -16px rgba(46,125,255,.55);
}
:root[data-theme="light"]{
  --bg:#f3f6fc; --bg2:#e8eef8; --panel:#ffffff; --panel2:#eef3fb;
  --line:rgba(12,26,52,.10); --line2:rgba(12,26,52,.18);
  --txt:#0e1626; --dim:#4a5a72; --faint:#8494ac;
  --accent-weak:rgba(46,125,255,.12);
  --shadow:0 24px 60px -20px rgba(20,40,80,.24);
  --shadow-accent:0 22px 44px -18px rgba(46,125,255,.42);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(124,108,255,.10), transparent 60%),
    radial-gradient(900px 520px at -6% 4%, rgba(46,125,255,.10), transparent 55%),
    var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased; overflow:hidden;
  letter-spacing:-.005em;
}
::selection{background:var(--accent);color:#fff}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
img{display:block}

/* focus visibility for keyboard users */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---- accessibility utilities ---- */
/* visually hide but keep for screen readers (skip-link target, page <h1>) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* skip-link: off-screen until focused, then pinned top-left */
.skip-link{position:fixed;top:-60px;left:12px;z-index:2000;background:var(--accent);
  color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;
  transition:top .15s ease}
.skip-link:focus{top:12px}
/* cards are <a> now — keep them behaving like the old block */
a.card{display:block;color:inherit}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* Base layout is the phone: one column, sidebar off-canvas. The desktop shell
   is added back at MIN-WIDTH near the end of this file. Everything below that
   depends on viewport follows the same rule — phone first, desktop layered on
   — because four in five visitors never reach the second breakpoint. */
/* 100vh first, then 100dvh for browsers that have it. An unsupported unit makes
   the whole declaration invalid, not just that value — so without the fallback
   #app fell back to height:auto on older phones, the shell collapsed, and the
   page rendered half-built. Every dvh in this file needs its vh line above it. */
#app{display:grid;grid-template-columns:1fr;height:100vh;height:100dvh}

/* display-type helper applied to headings throughout */
.brand-text,.hero-title,.row-title,.detail-info h1,.eps-head h3,
.sheet-card h2,.empty h3,.tile-val,.pc-head,.auth-brand,.now-playing{
  font-family:var(--display);
}

/* ---------------- Sidebar ---------------- */
#sidebar{
  background:linear-gradient(190deg,var(--bg2),var(--bg));
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:22px 16px;gap:6px;min-height:0;
  /* Phone: a drawer parked off-screen. It becomes a real column on desktop. */
  position:fixed;left:0;top:0;bottom:0;width:var(--sb);z-index:60;
  transform:translateX(-100%);transition:.26s cubic-bezier(.2,.9,.3,1);box-shadow:var(--shadow);
}
#sidebar.open{transform:none}
#sidebar::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--accent-weak) 30%,transparent 70%)}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 20px}
.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--grad-hot);
  display:grid;place-items:center;color:#fff;font-size:16px;flex:none;
  box-shadow:0 10px 26px -6px var(--accent), inset 0 1px 0 rgba(255,255,255,.35)}
/* logo mark: transparent PNG sitting on the dark chrome, carrying its own glow.
   Falls back to the gradient tile only if the file is missing. */
.logo-mark{background:var(--grad);border-radius:9px;
  box-shadow:0 8px 20px -6px rgba(46,125,255,.7);filter:none}
.logo-mark::after{content:"";width:44%;height:44%;border-radius:50%;
  background:#fff;box-shadow:0 0 12px rgba(255,255,255,.6)}
.brand-text{font-weight:800;font-size:20px;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(100deg,var(--txt),var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* two-weight wordmark: first word bold, remainder light */
.wm-b{font-weight:800}
.wm-l{font-weight:400}
.nav{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.nav-item{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:12px;
  color:var(--dim);font-weight:600;font-size:14.5px;transition:.16s;text-align:left;position:relative}
.nav-item svg{width:19px;height:19px}
.nav-item:hover{background:var(--panel);color:var(--txt)}
.nav-item.active{background:var(--accent-weak);color:var(--txt)}
.nav-item.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:0 4px 4px 0;background:var(--grad)}
.nav-item.active svg{stroke:var(--accent)}
.side-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  padding:14px 13px 8px;font-weight:700}
.src-list{display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1;min-height:40px;
  margin:0 -4px;padding:0 4px}
.src-btn{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:10px;
  color:var(--dim);font-size:13.5px;font-weight:500;text-align:left;transition:.14s}
.src-btn:hover{background:var(--panel);color:var(--txt)}
.src-btn.active{color:var(--txt);background:var(--panel2)}
.src-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none;transition:.2s}
.src-btn.active .src-dot{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.src-btn:hover .src-dot{background:var(--accent2)}

/* Floating source pills — surfaced on the page, named, thumb-tappable */
.src-chips{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:max-content;
  justify-content:start;gap:9px;overflow-x:auto;padding:2px 2px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.src-chips::-webkit-scrollbar{display:none}
.src-chip{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:var(--panel);color:var(--dim);
  font-weight:700;font-size:13px;border:1px solid var(--line);white-space:nowrap;transition:.16s;
  box-shadow:0 8px 18px -12px rgba(0,0,0,.85)}
.src-chip:hover{color:var(--txt);border-color:var(--line2);transform:translateY(-2px)}
.src-chip.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-accent)}

/* Per-source search bar */
.src-search{display:flex;align-items:center;gap:10px;max-width:520px;margin:2px 0 18px;
  padding:11px 16px;border-radius:99px;background:var(--panel);border:1px solid var(--line);transition:.16s}
.src-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.src-search svg{width:18px;height:18px;color:var(--faint);flex:none}
.src-search input{flex:1;background:none;border:0;outline:0;color:var(--txt);font:inherit;font-size:14.5px;min-width:0}
.src-search input::placeholder{color:var(--faint)}
.src-search input::-webkit-search-cancel-button{display:none}
.src-search-x{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--dim);flex:none;
  background:var(--panel2);border:1px solid var(--line);font-size:12px;line-height:1}
.src-search-x:hover{color:var(--txt);border-color:var(--line2)}

/* Segmented tabs (Trends / Popular / New) */
.mtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:2px 0 14px;overflow-x:auto;scrollbar-width:none}
.mtabs::-webkit-scrollbar{display:none}
.mtab{flex:0 0 auto;padding:12px 18px;color:var(--dim);font-weight:700;font-size:14.5px;position:relative;white-space:nowrap}
.mtab.on{color:var(--txt)}
.mtab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px;background:var(--grad)}
.mtab:hover{color:var(--txt)}
/* Genre pills */
.mpills{display:flex;gap:8px;overflow-x:auto;padding:0 0 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mpills::-webkit-scrollbar{display:none}
.mpill{flex:0 0 auto;padding:8px 15px;border-radius:999px;background:var(--panel);color:var(--dim);
  font-weight:600;font-size:13px;border:1px solid var(--line);white-space:nowrap;transition:.15s}
.mpill:hover{color:var(--txt);border-color:var(--line2)}
.mpill.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 22px -12px rgba(46,125,255,.75)}
.side-foot{margin-top:8px;display:flex;flex-direction:column;gap:10px}
.ghost-btn{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:10px;
  color:var(--dim);font-size:13.5px;transition:.14s;border:1px solid transparent}
.ghost-btn:hover{color:var(--txt);border-color:var(--line2);background:var(--panel)}
.ghost-btn svg{width:17px;height:17px}
.conn-pill{font-size:11.5px;color:var(--faint);padding:6px 13px;display:flex;align-items:center;gap:7px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.conn-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.conn-pill.ok::before{background:var(--good);box-shadow:0 0 9px var(--good)}
.conn-pill.bad::before{background:var(--accent);box-shadow:0 0 9px var(--accent)}

/* ---------------- Main ---------------- */
#main{min-width:0;min-height:0;overflow-y:auto;position:relative;scroll-behavior:smooth}
/* 7px of padding around a 44px control, not 13px. The controls cannot shrink —
   44px is the minimum a finger can hit reliably — but the padding around them
   can, and on a 812px screen sharing 24% of its height with chrome, 12px is
   worth having back. Slides away on scroll; see .tb-hidden. */
#topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:7px 14px;transition:transform .22s cubic-bezier(.2,.9,.3,1);
  /* Opaque fallback first. Without it an older browser drops the declaration
     entirely and the sticky header goes transparent, with the page scrolling
     underneath the title and the account button. */
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  border-bottom:1px solid var(--line)}
.crumb{font-family:var(--display);font-weight:800;font-size:17px;color:var(--dim);white-space:nowrap;flex:none;
  letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.crumb b{color:var(--txt)}
.crumb-back{font-family:var(--display);font-weight:800;font-size:17px;color:var(--dim);letter-spacing:-.02em;transition:.14s}
.crumb-back:hover{color:var(--accent)}
.crumb-sep{color:var(--faint);font-weight:400}
/* Phones get the Search tab in the bottom bar instead; a second search field in
   the header only stole width from the title and the account button. */
.top-search{display:none;margin-left:auto;align-items:center;gap:9px;background:var(--panel);
  border:1px solid var(--line);border-radius:13px;padding:9px 15px;width:min(340px,42vw);transition:.16s}
.top-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
.top-search svg{width:17px;height:17px;color:var(--faint)}
.top-search input{background:none;border:none;outline:none;color:var(--txt);width:100%;font-size:14px}
.icon-btn{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--dim)}
.icon-btn:hover{background:var(--panel);color:var(--txt)}
.only-mobile{display:grid}
/* ============ Mockup top nav (sidebar retired) ============ */
#sidebar{display:none!important}
#app{grid-template-columns:1fr!important}
#crumb{display:none!important}
/* Solid two-tier top bar: nav row + merged tabs row. No transparency. */
#topbar.nav{position:sticky;top:0;z-index:50;display:flex!important;flex-direction:column!important;
  align-items:stretch;gap:0;padding:0;
  background:var(--bg2);border-bottom:1px solid var(--line);box-shadow:0 8px 24px -18px rgba(0,0,0,.9)}
.tb-main{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:22px;padding:13px clamp(16px,3vw,34px)}
.tb-tabs{display:flex;gap:2px;align-items:center;justify-content:center;padding:0 clamp(16px,3vw,34px);
  border-top:1px solid var(--line)}
.tb-tabs[hidden]{display:none}
.tb-tabs .mtab{padding:13px 20px;font-size:14.5px}
#topbar .top-search{display:none!important}   /* search is the icon now; input stays in DOM for app.js */
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:21px;
  letter-spacing:.02em;text-transform:uppercase;cursor:pointer;flex:none}
.brand-dot{width:11px;height:11px;border-radius:50%;background:var(--grad);box-shadow:0 0 16px rgba(46,125,255,.85);flex:none}
.brand-word{background:linear-gradient(100deg,var(--txt),var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:none;gap:6px;margin:0 auto;align-items:center}
.nav-links .nav-item{padding:9px 15px;border-radius:99px;color:var(--dim);font-weight:600;font-size:14.5px;
  background:none;border:0;position:relative;transition:.16s}
.nav-links .nav-item::before{display:none}
.nav-links .nav-item:hover{color:var(--txt);background:var(--panel)}
.nav-links .nav-item.active{color:var(--txt)}
.nav-links .nav-item.active::after{content:"";display:block;height:2.5px;margin-top:4px;border-radius:2px;background:var(--grad)}
.nav-right{display:flex;align-items:center;gap:11px;margin-left:auto}
#topbar .icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--dim);
  border:1px solid var(--line);transition:.16s;background:none;flex:none}
#topbar .icon-btn:hover{color:var(--txt);border-color:var(--line2);background:var(--panel)}
/* solid top bar now, so the hero starts cleanly below it */
#view{padding-top:18px!important}
.hero{margin-top:0}
/* Authoritative hero-title: clamp to 3 lines with ellipsis, sane size (fixes the raw clip) */
.hero .hero-title{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;font-size:clamp(26px,3vw,42px)!important;line-height:1.05!important;padding-bottom:2px}
.hero .hero-syn{-webkit-line-clamp:2}
@media(min-width:761px){ .nav-links{display:flex} }
#view{padding:16px 14px 100px}

/* staggered entrance for view content */
@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.row,.hero,.tiles,.dash-grid,.members,.search-wrap{animation:reveal .5s both}
.row:nth-child(2){animation-delay:.05s}
.row:nth-child(3){animation-delay:.1s}
.row:nth-child(4){animation-delay:.15s}
.row:nth-child(5){animation-delay:.2s}
.row:nth-child(6){animation-delay:.25s}

/* ---------------- Hero ---------------- */
/* On a phone this used to run 420px of an 812px screen, so the first thing a
   visitor could actually watch sat 611px down — past the fold, on a site whose
   entire job is to start playing something. Capped here at roughly a third of
   the screen so a rail of real titles is always in view on landing. */
.hero{position:relative;height:min(56vh,440px);border-radius:22px;overflow:hidden;margin-bottom:24px;
  background:var(--panel);box-shadow:var(--shadow);border:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 28%;
  transform:scale(1.08);animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.16) translate(-1.5%,-2%)}}
/* The horizontal wash exists to clear a column of text on a wide screen. A
   phone has no such column, so it just greys the artwork — bottom-up only. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--bg) 1%,rgba(7,11,20,.5) 40%,transparent 74%),
    linear-gradient(90deg,rgba(7,11,20,.72) 6%,rgba(7,11,20,.28) 40%,transparent 60%)}
.hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,3.4vw,42px);gap:13px;max-width:min(760px,86%)}
.hero-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:var(--grad);color:#fff;
  padding:6px 14px;border-radius:100px;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;box-shadow:var(--shadow-accent)}
.hero-title{font-family:var(--display);font-size:clamp(30px,6vw,60px);font-weight:800;line-height:.94;letter-spacing:-.02em;
  text-transform:uppercase;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 8px 40px rgba(0,0,0,.55)}
.hero-meta{display:flex;gap:8px;color:var(--dim);font-size:12.5px;flex-wrap:wrap;align-items:center}
.hero-meta .pill{background:rgba(0,0,0,.4);border:1px solid var(--line2);padding:5px 11px;border-radius:100px;
  font-weight:600;backdrop-filter:blur(6px)}
/* Two lines of synopsis cost ~45px of a 270px hero and answer a question
   nobody asked yet — the poster and the title already sell it. Desktop, where
   the space is free, keeps it. */
.hero-desc{display:none;color:var(--dim);font-size:14.5px;line-height:1.55;max-width:540px;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;gap:10px;margin-top:2px}

/* ============ Mockup hero composition ============ */
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--bg) 3%,rgba(7,11,20,.68) 30%,transparent 62%),
    linear-gradient(0deg,var(--bg) 2%,transparent 44%)}
.hero-inner{z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:2px}
.eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--accent2);box-shadow:0 0 10px var(--accent2)}
.hero-meta .hsep{width:4px;height:4px;border-radius:50%;background:var(--faint);display:inline-block}
.hero-meta .chip-g{color:var(--dim)}
.hero-meta .hsrc{color:var(--accent2);font-weight:700}
.hero-syn{display:none;color:var(--dim);font-size:14px;line-height:1.5;max-width:52ch;margin:2px 0;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hero-cta{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:4px}
.hero-dots{position:absolute;right:clamp(14px,2.5vw,26px);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:9px}
.hero-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.24);transition:.2s}
.hero-dots span.on{background:var(--grad);height:24px;border-radius:99px}
@media(min-width:761px){ .hero{height:min(74vh,600px)} .hero-syn{display:-webkit-box} .top-search{flex:0 0 auto!important;width:280px} }

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 26px;border-radius:99px;
  font-weight:700;font-size:15px;transition:.16s;border:1px solid transparent;white-space:nowrap;letter-spacing:-.005em}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-accent)}
.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.07) saturate(1.1);box-shadow:0 26px 52px -14px rgba(46,125,255,.7)}
.btn.primary:active{transform:translateY(0)}
.btn.glass{background:color-mix(in srgb,var(--txt) 14%,transparent);color:var(--txt);
  border-color:var(--line2);backdrop-filter:blur(10px)}
.btn.glass:hover{background:color-mix(in srgb,var(--txt) 20%,transparent);transform:translateY(-2px)}
.btn.ghost{color:var(--dim)}
.btn.ghost:hover{color:var(--txt);background:var(--panel)}
.btn.small{padding:8px 15px;font-size:13px;border-radius:99px}
.btn.glass{border:1px solid var(--line2)!important}

/* ---------------- Rows ---------------- */
.row{margin-bottom:26px}
.row-head{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.row-title{font-family:var(--display);font-size:clamp(18px,2.3vw,24px);font-weight:800;letter-spacing:-.015em;
  display:flex;align-items:center;gap:11px}
.row-title::before{content:"";width:5px;height:1.02em;border-radius:3px;background:var(--grad);flex:none}
.row-head{align-items:center}
.row-tools{margin-left:auto;display:flex;gap:8px}
.railbtn{width:36px;height:36px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);display:grid;place-items:center;transition:.15s;flex:none}
.railbtn:hover{background:var(--accent);border-color:transparent}
.railbtn svg{width:16px;height:16px}
.row-tools .sort{padding:7px 13px;border-radius:99px;background:var(--panel);border:1px solid var(--line);
  color:var(--dim);font-weight:600;font-size:12.5px;cursor:pointer;transition:.15s;white-space:nowrap}
.row-tools .sort:hover{color:var(--txt);border-color:var(--line2)}
.row-tools .sort.on{border-color:var(--accent);color:var(--txt);background:var(--accent-weak)}
@media(hover:none){ .row-tools{display:none} }
.row-sub{font-size:12.5px;color:var(--faint);font-weight:600}
/* 19px of tappable height on a phone; WCAG asks for 44. */
.row-more{margin-left:auto;font-size:14px;color:var(--dim);
  min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
.row-more:hover{color:var(--accent)}
/* 44% keeps a sliver of the third card showing, which is what tells a thumb
   the row scrolls. A rail also sits beside the browser's edge-swipe gesture,
   so containing the overscroll stops a flick sideways from going Back. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,44%);gap:12px;
  overflow-x:auto;padding:6px 2px 8px;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;scroll-padding-inline:14px;
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none;height:0;width:0}
.rail.grid{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));
  gap:13px;overflow:visible}

/* ---------------- Card (poster-forward) ---------------- */
.card{scroll-snap-align:start;cursor:pointer;transition:transform .22s cubic-bezier(.2,.9,.3,1);position:relative}
.card:hover{transform:translateY(-7px)}
.poster{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--panel2);
  border:1px solid var(--line);box-shadow:0 14px 32px -18px rgba(0,0,0,.75);transition:.22s}
.card:hover .poster{border-color:var(--accent);box-shadow:0 26px 50px -18px rgba(46,125,255,.5)}
.poster img{width:100%;height:100%;object-fit:cover;transition:.5s cubic-bezier(.2,.9,.3,1)}
.card:hover .poster img{transform:scale(1.09)}
.poster::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 42%);opacity:.92}
.poster .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:.22s}
.card:hover .poster .play{opacity:1}
.poster .play span{width:58px;height:58px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-accent);transform:scale(.85);transition:.22s}
.card:hover .poster .play span{transform:scale(1)}
.poster .play svg{width:24px;height:24px;fill:#fff;stroke:none;margin-left:3px}
.badge-eps{position:absolute;left:8px;top:8px;background:rgba(7,11,20,.66);backdrop-filter:blur(6px);
  color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:8px;z-index:2;
  letter-spacing:.02em;border:1px solid var(--line2)}
/* giant outlined rank numeral — poster energy (stays inside the clipped poster) */
.badge-rank{position:absolute;left:7px;top:2px;z-index:3;
  font-family:var(--display);font-weight:800;font-size:44px;line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--gold);
  text-shadow:0 4px 16px rgba(0,0,0,.7);pointer-events:none;
  background:transparent;width:auto;height:auto;display:block;place-items:unset;border-radius:0;box-shadow:none}
.card-meta{padding:11px 2px 0}
.card-title{font-size:14px;font-weight:700;line-height:1.28;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-sub{font-size:12.5px;color:var(--faint);margin-top:3px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-src{color:var(--accent);font-weight:700}
/* No hover on a phone, so quick-save is always visible and always 44px. */
.btn-save{position:absolute;right:9px;top:9px;width:44px;height:44px;border-radius:13px;z-index:2;
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;
  opacity:1;transition:.2s;border:1px solid rgba(255,255,255,.12)}
.card:hover .btn-save{opacity:1;transform:none}
.btn-save svg{width:20px;height:20px}
.btn-save:hover{background:var(--accent)}
.btn-save.on{opacity:1;transform:none;color:var(--gold)}
.btn-save.on svg{fill:var(--gold)}
/* touch devices have no hover — always show the quick save + give tap feedback */
@media (hover: none){
  .btn-save{opacity:1;transform:none}
  .card:hover{transform:none}
  .card:active{transform:scale(.97)}
}

/* ============ Mockup card system (.pc/.pos) — overrides the old .card ============ */
.rail{display:flex;grid-auto-flow:unset;grid-auto-columns:unset;gap:14px;overflow-x:auto;
  padding:6px 2px 14px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scroll-padding-inline:14px;scrollbar-width:none}
.rail.grid{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:16px 13px;overflow:visible}
.pc{flex:0 0 auto;width:150px;scroll-snap-align:start;cursor:pointer;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.rail.grid .pc{width:auto}
.pc:hover{transform:translateY(-6px)}
.pos{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--panel2);
  border:1px solid var(--line);box-shadow:var(--shadow);transition:.22s}
.pos .art{width:100%;height:100%;object-fit:cover;transition:.5s cubic-bezier(.2,.8,.3,1)}
.pc:hover .pos .art{transform:scale(1.07)}
.pos::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,7,14,.8),transparent 46%)}
.pc:hover .pos{border-color:var(--accent);box-shadow:0 26px 50px -18px rgba(46,125,255,.5)}
.pos .ep{position:absolute;top:8px;left:8px;z-index:2;padding:4px 8px;border-radius:8px;
  background:rgba(7,11,20,.66);backdrop-filter:blur(6px);border:1px solid var(--line2);
  font-size:11px;font-weight:800;letter-spacing:.02em;color:#fff}
.pos .rate{position:absolute;top:8px;right:8px;z-index:2;padding:4px 7px;border-radius:8px;
  background:rgba(7,11,20,.66);backdrop-filter:blur(6px);border:1px solid var(--line2);
  font-size:11px;font-weight:800;color:var(--gold);display:flex;align-items:center;gap:3px}
.st .src{color:var(--accent2);font-weight:700}
.hero-meta .star{color:var(--gold);font-weight:800;display:inline-flex;align-items:center;gap:5px}
/* Browse-by-source grid (mockup) */
.srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.srccard{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:14px;text-decoration:none;
  background:var(--panel);border:1px solid var(--line);transition:.16s}
.srccard:hover{border-color:var(--accent);background:var(--accent-weak);transform:translateY(-3px)}
.srccard .ico{width:36px;height:36px;border-radius:10px;background:var(--grad-hero);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;color:#fff;font-size:15px;flex:none}
.srccard-t{min-width:0}
.srccard-t b{display:block;font-size:14px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srccard-t span{color:var(--faint);font-size:12px;font-weight:600}
.browse-row .row-tools{display:none}
.pos .sb{position:absolute;left:8px;bottom:8px;z-index:2;padding:4px 8px;border-radius:8px;
  background:var(--accent-weak);backdrop-filter:blur(6px);border:1px solid rgba(46,125,255,.4);
  font-size:10px;font-weight:800;color:var(--accent2);max-width:78%;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.pos .pl-badge{position:absolute;right:8px;bottom:8px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:var(--grad);display:grid;place-items:center;box-shadow:var(--shadow-accent);
  opacity:0;transform:scale(.7);transition:.2s}
.pos .pl-badge svg{width:16px;height:16px}
.pc:hover .pl-badge{opacity:1;transform:scale(1)}
.pos-rank{position:absolute;left:6px;top:-3px;z-index:3;font-family:var(--display);font-weight:800;
  font-size:46px;line-height:1;color:transparent;-webkit-text-stroke:2px var(--gold);
  text-shadow:0 4px 16px rgba(0,0,0,.7);pointer-events:none}
.tt{font-weight:700;font-size:14px;line-height:1.25;margin:10px 2px 3px;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.st{color:var(--faint);font-size:12px;font-weight:600;margin:0 2px}
@media(hover:none){ .pc:hover{transform:none} .pos .pl-badge{opacity:1;transform:scale(1)} .pc:active{transform:scale(.97)} }

/* ---------------- Search ---------------- */
.search-wrap{max-width:760px;margin:0 auto}
.big-search{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:18px 22px;box-shadow:var(--shadow)}
.big-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
.big-search svg{width:22px;height:22px;color:var(--faint)}
.big-search input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:18px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 26px;justify-content:center}
.chip{padding:9px 16px;border-radius:100px;background:var(--panel);border:1px solid var(--line);
  color:var(--dim);font-size:13px;font-weight:600;transition:.16s;text-transform:capitalize}
.chip:hover{color:#fff;border-color:transparent;background:var(--grad);transform:translateY(-2px);box-shadow:var(--shadow-accent)}

/* ---------------- Modal / Detail ---------------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.modal.hidden,.sheet.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(6,3,9,.78);backdrop-filter:blur(8px)}
.modal-card{position:relative;z-index:1;width:min(1060px,96vw);max-height:92vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:26px;box-shadow:var(--shadow);
  animation:pop .28s cubic-bezier(.2,.9,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.modal-close{position:absolute;right:18px;top:18px;z-index:5;width:42px;height:42px;border-radius:13px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;transition:.16s}
.modal-close:hover{background:var(--accent);transform:rotate(90deg)}

.detail-hero{position:relative;height:190px;overflow:hidden;border-radius:0}
.detail-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 22%;
  transform:scale(1.05);animation:kenburns 26s ease-in-out infinite alternate}
.detail-hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--panel),transparent 72%),linear-gradient(90deg,rgba(0,0,0,.55),transparent 60%)}
/* Flex column so the player can be pulled to the top on a phone — see
   #playerSlot below. The order is reset on desktop, where there is room for
   the artwork first. */
.detail-body{padding:0 16px 28px;margin-top:-56px;position:relative;z-index:2;
  display:flex;flex-direction:column}
/* Watching is the entire point of this page, and the video mounts into
   #playerSlot — which sat after the poster, the synopsis and the title block,
   about 880px down a 812px screen. Starting an episode left you reading a plot
   summary with the video somewhere below the fold. It goes first. */
#playerSlot{order:-1}
/* Stacked on a phone. This was a row, so a 120px poster and a 26px gap left the
   synopsis 142px wide and 368px tall — a column of text two words across. */
.detail-top{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.detail-poster{width:104px;aspect-ratio:2/3;border-radius:16px;overflow:hidden;flex:none;
  border:1px solid var(--line2);box-shadow:var(--shadow);background:var(--panel2)}
.detail-poster img{width:100%;height:100%;object-fit:cover}
.detail-info{flex:1;min-width:0;padding-bottom:8px}
.detail-info h1{font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-.03em;margin:0 0 12px;
  line-height:1;text-transform:uppercase;text-wrap:balance}
.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag{font-size:12px;color:var(--dim);background:var(--panel2);border:1px solid var(--line);
  padding:5px 12px;border-radius:100px;font-weight:600}
/* clickable tags (browse related) */
.tagchip{transition:background .15s,color .15s,border-color .15s}
.tag.tagchip:hover,.pill.tagchip:hover{background:var(--accent);color:#fff;border-color:transparent}

/* ---- search filter bar ---- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  margin:4px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.filter-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fchip{font-size:12.5px;font-weight:600;color:var(--dim);background:var(--panel2);
  border:1px solid var(--line);padding:7px 13px;border-radius:100px;transition:all .15s}
.fchip:hover{color:var(--txt);border-color:var(--line2)}
.fchip.on{background:var(--grad,var(--accent));color:#fff;border-color:transparent}
.fchip .fcount{opacity:.7;font-weight:700;margin-left:2px}
.filter-sort{margin-left:auto;font-size:12.5px;color:var(--faint);display:flex;align-items:center;gap:6px}
.filter-sort label{display:flex;align-items:center;gap:8px}
.filter-sort select{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
@media(max-width:760px){ .filter-sort{margin-left:0} }

/* ---- Continue Watching / resume progress ---- */
/* compact strip so it never dominates the page */
.cw-rail{grid-auto-columns:minmax(118px,118px)}
.cw-rail .card-title{font-size:12.5px}
.cw-rail .card-sub{font-size:10.5px}
@media(max-width:760px){ .cw-rail{grid-auto-columns:minmax(104px,104px)} }
.resume-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.55);z-index:2}
.resume-bar>span{display:block;height:100%;background:var(--grad,var(--accent));
  border-radius:0 3px 3px 0;box-shadow:0 0 10px var(--accent-weak)}
.resume-badge{background:var(--accent);color:#fff;font-weight:700}
.resume-card .poster{border-color:var(--line2)}

/* ---- Dashboard v2: audience insight ---- */
.section-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:26px 2px 12px}
.tiles-2{grid-template-columns:repeat(2,1fr);max-width:520px}
.pc-note{font-weight:600;font-size:11px;color:var(--faint);text-transform:none;letter-spacing:0}
.genre-wrap{display:flex;flex-wrap:wrap;gap:8px}
.genre-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--dim);background:var(--panel2);border:1px solid var(--line);padding:6px 12px;border-radius:100px}
.genre-pill b{color:var(--accent);font-weight:800}
.hour-bars{display:flex;align-items:flex-end;gap:3px;height:120px}
.hour-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.hour-col .bar{width:100%;min-height:2px;background:var(--grad,var(--accent));border-radius:3px 3px 0 0;opacity:.9}
.hour-col span{font-size:9px;color:var(--faint)}
.split{display:flex;flex-direction:column;gap:9px}
.split-row{display:flex;align-items:center;gap:10px;font-size:13px}
.split-name{width:96px;flex:none;color:var(--dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.split-bar{flex:1;height:8px;border-radius:6px;background:var(--panel2);overflow:hidden}
.split-bar>span{display:block;height:100%;background:var(--grad,var(--accent));border-radius:6px}
.split-val{width:38px;text-align:right;color:var(--faint);font-weight:700}

/* ---- referral links widget ---- */
.ref-new{display:flex;gap:10px;margin:4px 0 14px;flex-wrap:wrap}
.ref-name{flex:1;min-width:180px;font-family:inherit;font-size:13px;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.ref-name:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
.ref-list{display:flex;flex-direction:column;gap:8px}
.ref-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.ref-rname{font-weight:700;font-size:13px;color:var(--txt);min-width:90px}
.ref-code{font-family:ui-monospace,monospace;font-size:12px;color:var(--accent);
  background:var(--accent-weak);padding:3px 8px;border-radius:6px}
.ref-signups{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--dim)}
.ref-del{color:var(--faint)}

/* ---- player action rail polish (prev/next now live here too) ---- */
.pl-rail-sep{display:block;width:22px;height:1px;margin:3px auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.pl-rail-btn.hidden{display:none}
.pl-rail-btn{transition:transform .14s cubic-bezier(.2,.9,.3,1),opacity .14s}
.pl-rail-btn:active{transform:scale(.9)}
.pl-rail-btn:disabled,.pl-rail-btn.off{opacity:.34;pointer-events:none}
@media(pointer:coarse){ .pl-rail-btn{min-width:44px;min-height:44px} }

/* liked state on the rail + detail buttons */
.pl-rail-btn.on .pl-rail-ico svg,.btn#dLike.on svg{fill:var(--accent);stroke:var(--accent)}
.btn#dLike.on{color:var(--accent);border-color:var(--accent)}
.btn#dLike svg,.btn#dShare svg{width:17px;height:17px}

/* ---- player resilience overlays (low-end wifi) ---- */
.pl-reconnect{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.72);color:#fff;
  font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:100px;backdrop-filter:blur(6px)}
.pl-reconnect .spinner{width:14px;height:14px;border-width:2px}
.pl-retry-overlay{position:absolute;inset:0;z-index:7;display:grid;place-items:center;
  background:rgba(10,6,14,.82);backdrop-filter:blur(4px);text-align:center;color:#fff}
.pl-retry-overlay p{margin:0 0 14px;opacity:.85}
.pl-hint{font-size:12px;color:var(--faint);max-width:420px;margin:2px 0 0}
.pl-slow{margin-top:12px;font-size:12.5px;color:#fff;opacity:.8;max-width:260px;text-align:center;line-height:1.5}

/* ---- slow-start nudge: a card inside the player, never a blocker ----
   The player is portrait, so it is narrow (~370px) even on a wide desktop —
   the layout has to respond to the PLAYER's width, not the viewport's. Hence
   wrapping flex rather than a media query: the buttons drop to their own row
   whenever the text would otherwise be crushed. */
.pl-nudge{position:absolute;left:12px;right:12px;bottom:64px;z-index:8;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  padding:12px 14px;border-radius:14px;
  background:rgba(14,8,20,.88);backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,#fff 12%,transparent);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);color:#fff;
  opacity:0;transform:translateY(10px);transition:opacity .28s,transform .28s}
.pl-nudge.in{opacity:1;transform:none}
.pl-nudge .spinner{width:18px;height:18px;border-width:2px;flex:none}
.pl-nudge-txt{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.pl-nudge-txt b{font-size:13.5px;font-weight:700}
/* Two lines maximum: a tall card would cover the video it is apologising for. */
.pl-nudge-txt span{font-size:12px;opacity:.78;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.pl-nudge-act{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:8px}
/* the countdown that gates the buttons */
.pl-nudge-wait{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-size:13px;font-weight:800;color:#fff;
  background:color-mix(in srgb,#fff 12%,transparent);
  border:1px solid color-mix(in srgb,#fff 16%,transparent);font-variant-numeric:tabular-nums}
.pl-nudge .btn{white-space:nowrap}
/* Fullscreen: the wrap IS the fullscreen element, so the card rides along —
   just lift it clear of the taller control bar. */
.player-wrap:fullscreen .pl-nudge{bottom:88px;left:5%;right:5%}
@media(max-width:620px){ .pl-nudge{bottom:58px} }
@media(prefers-reduced-motion:reduce){
  .pl-nudge{transition:none;transform:none}
}

/* ---- site footer: quiet, right at the bottom ---- */
.site-foot{margin:56px 0 0;padding:26px 34px 34px;border-top:1px solid var(--line);
  color:var(--faint);font-size:12.5px;line-height:1.6}
.site-foot nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:10px}
.site-foot a{color:var(--dim);font-weight:600}
.site-foot a:hover{color:var(--accent)}
.site-foot p{max-width:640px;margin:0;opacity:.8}
/* Mockup footer: brand + links + social row, then the copyright line */
.site-foot{background:linear-gradient(180deg,transparent,rgba(46,125,255,.05))}
.foot-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.foot-in .brand{font-size:18px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:0}
.foot-social{margin-left:auto;display:flex;gap:10px}
.foot-social .icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--dim);border:1px solid var(--line);transition:.16s}
.foot-social .icon-btn:hover{color:var(--txt);border-color:var(--line2);background:var(--panel)}
@media(max-width:620px){ .foot-social{margin-left:0} }
@media(max-width:760px){ .site-foot{padding:22px 16px 96px;margin-top:36px} }

/* ---- readable long-form copy on the information pages ---- */
.info-page{max-width:720px;margin:0 auto;padding:8px 0 40px}
.info-page h1{font-size:30px;letter-spacing:-.02em;margin-bottom:14px}
.info-page h2{font-size:17px;margin:26px 0 8px;color:var(--txt)}
.info-page p{color:var(--dim);line-height:1.72;margin:0 0 12px}
.info-page a{color:var(--accent);font-weight:600}
.info-page ul{margin:8px 0 0 18px;color:var(--dim);line-height:1.9}

/* ---- respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card:hover{transform:none}
}
.detail-desc{color:var(--dim);font-size:14.5px;line-height:1.62;margin:14px 0 0;max-width:760px}
.detail-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

.eps-head{display:flex;align-items:center;gap:12px;margin:34px 0 16px}
.eps-head h3{font-size:20px;font-weight:800;margin:0;letter-spacing:-.02em}
.eps-count{font-size:12.5px;color:var(--faint);font-weight:600}
.eps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:10px}
.ep-btn{aspect-ratio:1;border-radius:13px;background:var(--panel2);border:1px solid var(--line);
  color:var(--dim);font-weight:700;font-size:14px;transition:.15s;display:grid;place-items:center;position:relative}
.ep-btn:hover{color:#fff;border-color:transparent;background:var(--grad);transform:translateY(-3px);box-shadow:var(--shadow-accent)}
.ep-btn.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-accent)}
/* Nothing is gated any more; the only inert tile is one the upstream won't
   serve. No padlock — a dimmed tile reads as "not available" without shouting. */
.ep-btn.locked{opacity:.34;cursor:not-allowed;filter:grayscale(1)}
.ep-btn.locked::after{content:""}
.ep-btn.locked:hover{transform:none;background:var(--panel2);color:inherit;border-color:var(--line);box-shadow:none}

/* ---------------- Player ---------------- */
.player-wrap{background:#000;border-radius:18px;overflow:hidden;position:relative;aspect-ratio:16/9;
  border:1px solid var(--line2);box-shadow:var(--shadow)}
.player-wrap.portrait{aspect-ratio:9/16;height:min(78vh,760px);width:auto;max-width:100%;margin-inline:auto}
.player-wrap video{width:100%;height:100%;object-fit:contain;background:#000;display:block;cursor:pointer}
.player-wrap:fullscreen{border-radius:0;border:none;aspect-ratio:auto;height:100%;width:100%;max-width:none;margin:0}
/* Upright fullscreen for devices with no element-fullscreen (iPhone Safari).
   Fills the viewport with CSS so the video stays portrait and our own controls
   stay on screen, instead of surrendering to the native landscape player. */
.player-wrap.pl-fake-fs{position:fixed;inset:0;z-index:200;
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  margin:0;border:none;border-radius:0;aspect-ratio:auto;box-shadow:none}
body.pl-fs-lock{overflow:hidden;touch-action:none}
.player-wrap.pl-fake-fs video{width:100%;height:100%;object-fit:contain}
/* Keep the chrome out of the notch and off the home indicator. */
.player-wrap.pl-fake-fs .pl-controls{padding-bottom:calc(12px + env(safe-area-inset-bottom));
  padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.player-wrap.pl-fake-fs .pl-rail{right:max(10px,env(safe-area-inset-right));
  bottom:auto;top:50%;transform:translateY(-50%)}
.player-wrap.pl-fake-fs .pl-nudge{bottom:calc(84px + env(safe-area-inset-bottom))}
.player-wrap:not(.show-ctl){cursor:none}

/* buffering + center play */
.pl-buffer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:.2s;z-index:3}
.pl-buffer.show{opacity:1}
.pl-bigplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:4;
  width:76px;height:76px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;
  box-shadow:var(--shadow-accent);opacity:0;pointer-events:none;transition:.22s cubic-bezier(.2,.9,.3,1)}
.player-wrap.paused .pl-bigplay{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.pl-bigplay:hover{filter:brightness(1.08);transform:translate(-50%,-50%) scale(1.06)}
.pl-bigplay svg{width:32px;height:32px;margin-left:4px}
/* gesture feedback pill (double-tap seek / swipe episode) */
.pl-gesture{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.82);z-index:5;
  background:rgba(0,0,0,.64);color:#fff;font-family:var(--display);font-weight:800;font-size:16px;
  letter-spacing:.02em;padding:10px 18px;border-radius:100px;opacity:0;pointer-events:none;transition:.18s}
.pl-gesture.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* control bar */
.pl-scrim{position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;z-index:2;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);opacity:0;transition:.25s}
.player-wrap.show-ctl .pl-scrim{opacity:1}
.pl-controls{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:8px 12px 12px;
  display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(8px);transition:.22s;pointer-events:none}
.player-wrap.show-ctl .pl-controls{opacity:1;transform:none;pointer-events:auto}

.pl-seek{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.pl-track{position:relative;width:100%;height:5px;border-radius:100px;background:rgba(255,255,255,.24);
  overflow:hidden;transition:height .12s}
.pl-seek:hover .pl-track{height:7px}
.pl-buffered{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.32)}
.pl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad)}
.pl-knob{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(0);transition:transform .12s;box-shadow:0 2px 8px rgba(0,0,0,.55)}
.pl-seek:hover .pl-knob,.pl-seek:focus-visible .pl-knob{transform:translate(-50%,-50%) scale(1)}

.pl-row{display:flex;align-items:center;gap:5px}
.pl-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;transition:.14s;flex:none}
.pl-btn:hover{background:rgba(255,255,255,.16)}
.pl-btn svg{width:20px;height:20px}
.pl-btn.pl-text{width:auto;min-width:40px;padding:0 10px;font-weight:800;font-size:13px;font-family:var(--display);letter-spacing:-.01em}
.pl-time{font-size:12.5px;color:#ece5f2;font-variant-numeric:tabular-nums;font-weight:600;margin-left:3px;white-space:nowrap}
.pl-spacer{flex:1}
.pl-vol{display:flex;align-items:center}
.pl-volrange{width:0;opacity:0;height:4px;accent-color:var(--accent);cursor:pointer;transition:.2s;margin:0}
.pl-vol:hover .pl-volrange,.pl-volrange:focus-visible{width:72px;opacity:1;margin:0 6px 0 2px}

.pl-menu{position:absolute;right:12px;bottom:58px;z-index:9;background:rgba(20,12,26,.96);
  backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:12px;padding:6px;min-width:136px;
  box-shadow:var(--shadow);animation:pop .16s ease}
.pl-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;color:#fff;
  font-size:13px;font-weight:600;transition:.12s}
.pl-menu button:hover{background:rgba(255,255,255,.14)}
.pl-menu button.on{color:var(--accent)}
.pl-menu button.on::after{content:"●";float:right;font-size:8px;line-height:1.9}
.pl-menu-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);padding:4px 12px 8px;font-weight:800}
.pl-menu-rail{right:74px;bottom:auto;top:50%;transform:translateY(-50%)}
[dir="rtl"] .pl-menu{right:auto;left:12px;text-align:right}
[dir="rtl"] .pl-menu button{text-align:right}
[dir="rtl"] .pl-menu-rail{left:74px;right:auto}

/* right action rail (Eps / Quality / Speed / CC) */
.pl-rail{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:11px;align-items:center;opacity:0;transition:.22s;pointer-events:none}
.player-wrap.show-ctl .pl-rail{opacity:1;pointer-events:auto}
.pl-rail-btn{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff}
.pl-rail-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);transition:.15s}
.pl-rail-btn:hover .pl-rail-ico{background:var(--grad);border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-accent)}
.pl-rail-ico svg{width:18px;height:18px}
.pl-rail-lbl{font-size:10px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.7)}

/* subtitle overlay — custom-rendered for full size + position control */
.pl-subs{position:absolute;left:0;right:0;bottom:16%;z-index:3;text-align:center;pointer-events:none;
  padding:0 6%;display:none;color:#fff;font-weight:600;line-height:1.32;
  text-shadow:0 2px 5px rgba(0,0,0,.92),0 0 8px rgba(0,0,0,.7)}
.pl-subs.size-s{font-size:clamp(12px,1.9vw,17px)}
.pl-subs.size-m{font-size:clamp(15px,2.5vw,23px)}
.pl-subs.size-l{font-size:clamp(18px,3.2vw,30px)}
.pl-subs.size-xl{font-size:clamp(22px,4vw,38px)}
.pl-subs.pos-lower{bottom:9%}
.pl-subs.pos-default{bottom:16%}
.pl-subs.pos-higher{bottom:27%}
.pl-subs.pos-top{bottom:auto;top:8%}

/* CC settings panel */
.pl-cc{min-width:210px;max-height:min(78%,430px);overflow-y:auto}
.pl-cc-langs{display:flex;flex-direction:column;max-height:154px;overflow-y:auto}
.pl-cc-seg{display:flex;gap:5px;padding:2px 6px 8px}
.pl-cc-seg button{flex:1;padding:8px 0;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;
  font-size:12px;font-weight:800;text-align:center;transition:.12s}
.pl-cc-seg button:hover{background:rgba(255,255,255,.16)}
.pl-cc-seg button.on{background:var(--grad);color:#fff}

/* episodes slide-in panel */
.pl-eps{position:absolute;top:0;right:0;bottom:0;z-index:8;width:min(320px,82%);
  background:rgba(16,9,22,.97);backdrop-filter:blur(16px);border-left:1px solid var(--line2);
  display:flex;flex-direction:column;animation:slideL .24s cubic-bezier(.2,.9,.3,1)}
@keyframes slideL{from{transform:translateX(100%)}to{transform:none}}
.pl-eps-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.pl-eps-h b{font-family:var(--display);font-size:18px;font-weight:800}
.pl-eps-h span{font-size:12px;color:var(--faint);font-weight:600}
.pl-eps-x{margin-left:auto;width:34px;height:34px;border-radius:10px;color:var(--dim);display:grid;place-items:center;font-size:15px}
.pl-eps-x:hover{background:var(--panel2);color:var(--txt)}
.pl-eps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:9px;padding:16px 18px;overflow-y:auto}
[dir="rtl"] .pl-rail{right:auto;left:12px}
[dir="rtl"] .pl-eps{right:auto;left:0;border-left:none;border-right:1px solid var(--line2);animation:slideR .24s cubic-bezier(.2,.9,.3,1)}
@keyframes slideR{from{transform:translateX(-100%)}to{transform:none}}
@media(max-width:760px){
  .pl-rail{gap:10px;right:8px}
  .pl-rail-ico{width:36px;height:36px}
  .pl-rail-ico svg{width:17px;height:17px}
  /* The rail was centred on the right, which put its lowest icon straight over
     the fullscreen button in the control bar — taps hit the icon instead. Sit
     the rail above the controls and let it end well clear of them. */
  .pl-rail{top:auto;bottom:96px;transform:none;max-height:calc(100% - 170px);
    overflow:visible;justify-content:flex-end}
  /* And keep the control row's own buttons apart enough to hit individually. */
  .pl-controls .pl-row{gap:2px}
  .pl-btn{min-width:44px;min-height:44px}
}
.player-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);gap:12px;z-index:2}
.player-err{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:32px;color:var(--dim)}
.player-err h3{font-family:var(--display);letter-spacing:-.02em}
.player-bar{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.q-select{display:flex;gap:7px;align-items:center}
.q-btn{padding:7px 13px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);
  color:var(--dim);font-size:12.5px;font-weight:700;transition:.14s}
.q-btn:hover{color:var(--txt)}
.q-btn.active{background:var(--accent-weak);color:var(--accent);border-color:var(--accent)}
.now-playing{font-weight:800;font-size:16px;letter-spacing:-.01em}
.now-playing span{color:var(--faint);font-weight:400;font-family:var(--font)}
.ep-nav{margin-left:auto;display:flex;gap:8px}

/* ---------------- Settings / sheets ---------------- */
.sheet{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px}
.sheet-backdrop{position:absolute;inset:0;background:rgba(6,3,9,.68);backdrop-filter:blur(6px)}
.sheet-card{position:relative;z-index:1;width:min(480px,94vw);background:var(--panel);
  border:1px solid var(--line2);border-radius:22px;padding:30px;box-shadow:var(--shadow);
  animation:pop .24s ease}
.sheet-card h2{margin:0 0 8px;font-size:26px;letter-spacing:-.03em;font-weight:800}
.muted{color:var(--dim);font-size:13.5px;line-height:1.55;margin:0 0 20px}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-size:12px;color:var(--dim);margin-bottom:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.field input,.field select{width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;color:var(--txt);font-size:14.5px;outline:none;transition:.15s}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
.sheet-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:10px}
.key-status{margin-top:14px;font-size:13px;color:var(--dim);min-height:18px}
.key-status.ok{color:var(--good)}
.key-status.err{color:var(--accent)}
.theme-row{display:flex;gap:10px;margin-top:6px}
.theme-opt{flex:1;padding:11px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  color:var(--dim);font-size:13px;font-weight:700;text-align:center;transition:.14s}
.theme-opt:hover{color:var(--txt)}
.theme-opt.active{border-color:var(--accent);color:var(--txt);background:var(--accent-weak)}

/* ---------------- States ---------------- */
.skeleton{background:linear-gradient(100deg,var(--panel2) 30%,var(--panel) 50%,var(--panel2) 70%);
  background-size:200% 100%;animation:sh 1.3s infinite;border-radius:16px}
@keyframes sh{to{background-position:-200% 0}}
.sk-card{aspect-ratio:2/3;border-radius:16px}
.empty{text-align:center;padding:74px 20px;color:var(--faint)}
.empty svg{width:46px;height:46px;margin-bottom:16px;stroke:var(--faint)}
.empty h3{color:var(--txt);font-weight:800;margin:0 0 6px;font-size:20px;letter-spacing:-.02em}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--line2);
  border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-dots::after{content:"";animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ---------------- Toast ---------------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel);border:1px solid var(--line2);color:var(--txt);padding:14px 22px;
  border-radius:14px;font-size:14px;font-weight:600;box-shadow:var(--shadow);z-index:200;
  opacity:0;pointer-events:none;transition:.28s cubic-bezier(.2,.9,.3,1)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- Bottom nav ---------------- */
/* The phone's primary navigation, so it is the base. Desktop hides it and uses
   the sidebar instead. */
.bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(22px);
  border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 0;color:var(--faint);font-size:10.5px;font-weight:700;transition:.14s}
.bottom-nav button svg{width:23px;height:23px}
.bottom-nav button.active{color:var(--accent)}
.bottom-nav button.active svg{stroke:var(--accent)}

/* ---------------- Phone base ---------------- */
@media(max-width:760px){
  /* Scrolling down hands the header's height back to the content; scrolling up
     returns it before you need it. Only on phones — a desktop has the room. */
  #topbar.tb-hidden{transform:translateY(-100%)}
  #crumb{font-size:15px}
  /* WCAG 2.5.5: give touch controls a comfortable ≥44px target on phones */
  .icon-btn,.nav-item,#bottomNav button,.chip,.auth-tab,.src-btn,
  .ep-btn,.crumb-back,.modal-close{min-height:44px}
  .icon-btn,.modal-close{min-width:44px}
  .ep-btn{min-width:44px}
  .card:hover{transform:none}
  .badge-rank{font-size:38px}
  .modal{padding:0}
  .modal-card{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0}
  .detail-info h1{font-size:24px}
  /* The player is above the artwork here, so it should not also be the tallest
     thing on screen — leave room for the episode grid to peek underneath. */
  .player-wrap.portrait{height:min(62vh,560px)}
  .pl-volrange{display:none}
  .pl-btn.pl-text{min-width:34px;padding:0 8px}
  .lang-menu{min-width:min(300px,90vw)}
  .chip-menu,.lang-menu{right:12px}
  [dir="rtl"] .chip-menu,[dir="rtl"] .lang-menu{right:auto;left:12px}
  .eps-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}
  .tiles{grid-template-columns:1fr 1fr;gap:11px}
  .tile{padding:15px}
  .tile-val{font-size:26px}
}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;opacity:0;pointer-events:none;transition:.2s}
.scrim.show{opacity:1;pointer-events:auto}

/* ---------------- Auth ---------------- */
.hidden{display:none !important}
.auth-slot{display:flex;align-items:center;gap:10px;flex:none}
.signin-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 19px;border-radius:12px;
  background:var(--grad);color:#fff;font-weight:700;font-size:13.5px;box-shadow:var(--shadow-accent);transition:.16s}
.signin-btn:hover{filter:brightness(1.07);transform:translateY(-2px)}
.user-chip{display:flex;align-items:center;gap:10px;padding:5px 7px 5px 5px;border-radius:100px;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:.15s}
.user-chip:hover{border-color:var(--accent)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:14px;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.user-chip .uname{font-size:13.5px;font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .urole{font-size:9.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.chip-menu{position:absolute;top:64px;right:32px;z-index:40;background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;box-shadow:var(--shadow);padding:8px;min-width:200px;animation:pop .18s ease}
.chip-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border-radius:11px;
  color:var(--dim);font-size:13.5px;text-align:left;font-weight:600}
.chip-menu button:hover{background:var(--panel2);color:var(--txt)}
.chip-menu .who{padding:9px 13px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.chip-menu .who b{display:block;font-size:14.5px;color:var(--txt);font-family:var(--display);letter-spacing:-.01em}
.chip-menu .who span{font-size:11.5px;color:var(--faint)}
.pending-tag{font-size:10px;font-weight:800;color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,transparent);
  padding:2px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}

.auth-card{width:min(420px,94vw)}
.auth-brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;margin-bottom:20px;
  letter-spacing:-.02em}
.auth-brand .brand-mark{width:32px;height:32px;font-size:14px}
.auth-tabs{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:4px;margin-bottom:16px}
.auth-tab{flex:1;padding:11px;border-radius:10px;color:var(--dim);font-size:13.5px;font-weight:700;transition:.15s}
.auth-tab.active{background:var(--panel);color:var(--txt);box-shadow:0 2px 10px -2px rgba(0,0,0,.35)}

/* ---------------- Members panel ---------------- */
.members{display:flex;flex-direction:column;gap:11px;max-width:780px}
.member{display:flex;align-items:center;gap:15px;padding:15px 17px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;transition:.16s}
.member:hover{border-color:var(--line2)}
.member .avatar{width:44px;height:44px}
.member .m-info{flex:1;min-width:0}
.member .m-name{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.member .m-sub{font-size:12px;color:var(--faint);margin-top:2px}
.member .m-actions{display:flex;gap:8px;flex-wrap:wrap}
.badge-owner{font-size:10px;font-weight:800;color:#fff;background:var(--grad);
  padding:3px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}
.badge-approved{font-size:11px;color:var(--good);font-weight:700}
.badge-pending{font-size:11px;color:var(--gold);font-weight:700}
.members-empty{color:var(--faint);padding:32px 0}
.opt{font-weight:500;color:var(--faint);text-transform:none;letter-spacing:0;font-style:normal;font-size:11px}
.muted-inline{color:var(--faint)}
#expCsv{margin-left:auto;text-decoration:none}
[dir="rtl"] #expCsv{margin-left:0;margin-right:auto}

/* language picker */
.lang-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:12px;min-height:40px;
  background:var(--panel);border:1px solid var(--line);color:var(--dim);font-weight:700;font-size:12.5px;transition:.15s}
.lang-btn:hover{color:var(--txt);border-color:var(--accent)}
.lang-btn svg{width:17px;height:17px}
.lang-menu{position:absolute;top:64px;right:32px;z-index:40;background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;box-shadow:var(--shadow);padding:12px;min-width:290px;animation:pop .18s ease}
.lang-menu .who{padding:2px 6px 10px}
.lang-menu .who b{font-family:var(--display);font-size:15px;letter-spacing:-.01em}
.lang-menu .who span{display:block;font-size:11px;color:var(--faint);margin-top:2px}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
.lang-grid button{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-radius:11px;
  color:var(--dim);font-size:13.5px;text-align:start;transition:.13s;font-weight:600}
.lang-grid button:hover{background:var(--panel2);color:var(--txt)}
.lang-grid button.on{background:var(--accent-weak);color:var(--accent)}

/* RTL (Arabic etc.) */
[dir="rtl"] #sidebar{border-right:none;border-left:1px solid var(--line)}
[dir="rtl"] #sidebar::after{right:auto;left:0}
[dir="rtl"] .nav-item.active::before{left:auto;right:-16px;border-radius:4px 0 0 4px}
[dir="rtl"] .top-search{margin-left:0;margin-right:auto}
[dir="rtl"] .row-more{margin-left:0;margin-right:auto}
[dir="rtl"] .ep-nav{margin-left:0;margin-right:auto}
[dir="rtl"] .badge-rank{left:auto;right:7px}
[dir="rtl"] .badge-eps{left:auto;right:9px}
[dir="rtl"] .badge-free{left:auto;right:9px}
[dir="rtl"] .btn-save{right:auto;left:9px}
[dir="rtl"] .hero-bg::after{background:linear-gradient(270deg,var(--bg) 3%,rgba(7,11,20,.35) 42%,transparent 62%),linear-gradient(0deg,var(--bg) 1%,transparent 52%)}
[dir="rtl"] .chip-menu,[dir="rtl"] .lang-menu{right:auto;left:32px}
[dir="rtl"] .modal-close{right:auto;left:18px}
[dir="rtl"] .ep-btn.locked::after{right:auto;left:5px}

/* ---------------- Dashboard ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:15px;margin-bottom:22px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 20px 17px;position:relative;overflow:hidden;transition:.16s}
.tile:hover{transform:translateY(-3px);border-color:var(--line2)}
.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);opacity:.9}
.tile.accent{border-color:var(--accent);background:linear-gradient(150deg,var(--accent-weak),var(--panel))}
.tile-ico{width:38px;height:38px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;margin-bottom:13px}
.tile-ico svg{width:19px;height:19px;stroke:var(--accent)}
.tile-val{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tile-label{font-size:13px;color:var(--dim);font-weight:700;margin-top:5px}
.tile-sub{font-size:11.5px;color:var(--faint);margin-top:3px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.panel-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px}
.pc-head{font-size:15px;font-weight:800;margin-bottom:18px;letter-spacing:-.01em}
.bars{display:flex;align-items:flex-end;gap:9px;height:154px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:36px;min-height:4px;border-radius:8px 8px 2px 2px;background:var(--grad);transition:.5s cubic-bezier(.2,.9,.3,1)}
.bar:hover{filter:brightness(1.15)}
.bar-col span{font-size:10.5px;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums}
.lb,.feed{display:flex;flex-direction:column;gap:2px}
.lb-row,.feed-row{display:flex;align-items:center;gap:11px;padding:10px 7px;border-radius:11px;font-size:13.5px}
.lb-row:hover,.feed-row:hover{background:var(--panel2)}
.lb-rank{width:24px;height:24px;border-radius:8px;background:var(--panel2);display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--faint);flex:none;font-family:var(--display)}
.lb-row:nth-child(1) .lb-rank{background:var(--grad);color:#fff}
.lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lb-sub{font-size:11px;color:var(--faint)}
.lb-badge{font-size:12.5px;font-weight:800;color:var(--accent);flex:none;font-variant-numeric:tabular-nums}
.avatar.sm{width:28px;height:28px;font-size:11px}
.feed-txt{flex:1;min-width:0;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-txt b{color:var(--txt);font-weight:700}
.feed-time{font-size:11px;color:var(--faint);flex:none;font-variant-numeric:tabular-nums}
@media(max-width:760px){ .dash-grid{grid-template-columns:1fr} }

/* "free" ribbon on cards */
.badge-free{position:absolute;left:9px;top:9px;background:var(--good);color:#04150c;font-size:10px;
  font-weight:800;padding:3px 9px;border-radius:100px;z-index:2;letter-spacing:.04em}
.free-note{font-size:12px;color:var(--faint);margin-left:10px;font-weight:600}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .hero-bg,.detail-hero .bg{animation:none;transform:scale(1.05)}
  .card:hover{transform:none}
}

/* ---------------- Invite card (owner dashboard) ---------------- */
.invite-card{margin-bottom:14px}
.invite-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.invite-code{font-family:"Geist Mono",ui-monospace,monospace;font-size:18px;font-weight:700;
  letter-spacing:.06em;background:var(--panel2);border:1px solid var(--line2);color:var(--accent);
  padding:8px 16px;border-radius:10px}
.invite-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--dim);
  margin-inline-start:auto;cursor:pointer;user-select:none}
.invite-toggle input{width:16px;height:16px;accent-color:var(--accent)}
.invite-hint{margin:12px 0 0;font-size:12.5px}
.invite-card.invite-off .invite-code{color:var(--faint);opacity:.6;text-decoration:line-through}
.field .opt{color:var(--faint);font-style:normal;font-weight:400;font-size:11px}

/* =========================================================================
   MOBILE FIRST
   Four in five visitors are on a phone, so the phone case is the one that
   gets the attention here. This block sits last on purpose: it is the final
   word in the cascade, and everything in it is either touch-only or
   narrow-screen-only, so the desktop layout is untouched.
   ========================================================================= */

/* --- Touch behaviour ---------------------------------------------------- */
/* The default translucent blue flash on tap is a browser artifact, not a
   design decision. Replaced with a press state that matches the site. */
html{-webkit-tap-highlight-color:transparent}
@media(pointer:coarse){
  /* manipulation drops the legacy 300ms "is this a double-tap?" wait and
     stops accidental zoom when someone taps a poster twice quickly. */
  a,button,.card,.ep-btn,.chip,.nav-item,.src-btn,[role="button"]{touch-action:manipulation}
  /* Hover doesn't exist here; give the finger real feedback instead. */
  .card:active{transform:scale(.972)}
  .btn:active,.ep-btn:active,.chip:active,.pl-rail-btn:active{transform:scale(.94)}
  .card:hover{transform:none}
}

/* --- iOS zoom-on-focus -------------------------------------------------- */
/* Safari zooms the whole page when a focused field is under 16px, which threw
   the layout every time someone tapped search, log in or sign up. 16px is the
   minimum that keeps the page still — not a style choice. */
@media(max-width:900px){
  input,select,textarea,
  .field input,.field select,
  #topSearchInput,#searchInput{font-size:16px}
}

/* --- Phone layout ------------------------------------------------------- */
/* Card sizing, rails, hero, nav and padding now live in the base rules above,
   where the phone is the default rather than a subtraction. What remains here
   is genuinely narrow-screen-only. */
@media(max-width:760px){
  /* Comfortable targets. WCAG asks for 44px; several controls sat at 19-40. */
  .lang-btn,.signin-btn,.who-btn,.btn{min-height:44px}
  .cw-rail .card-sub{font-size:12px}

  /* Landscape notches: keep content out from under the cutout. */
  #view,#topbar,.site-foot{padding-left:max(14px,env(safe-area-inset-left));
                           padding-right:max(14px,env(safe-area-inset-right))}

  /* Modal takes the full screen rather than floating in a tiny inset — the
     player is the whole point of the page on a phone. */
  .modal-card{border-radius:0;max-height:100vh;max-height:100dvh;height:100vh;height:100dvh}
  .modal-close{top:max(10px,env(safe-area-inset-top))}

  /* Footer links are small text in a row; give them room to be hit. */
  .site-foot nav{gap:8px 20px}
  .site-foot nav a{min-height:44px;display:inline-flex;align-items:center;font-size:13.5px}
}

/* ---------------- Ad-block notice ---------------- */
/* Sits above the bottom nav, never over the player, and never over content it
   would stop you reaching. It is a sentence and two buttons — if it ever grows
   into something that has to be dismissed before watching, it has become the
   thing it was written to avoid. */
.ab-note{position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:70;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:13px 15px;border-radius:16px;background:var(--panel);
  border:1px solid var(--line2);box-shadow:var(--shadow);
  opacity:0;transform:translateY(12px);transition:.26s cubic-bezier(.2,.9,.3,1)}
.ab-note.show{opacity:1;transform:none}
.ab-note-txt{flex:1 1 210px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.ab-note-txt b{color:var(--txt)}
.ab-note-act{display:flex;gap:8px;margin-left:auto}
.ab-note-act .btn{min-height:44px}
@media(prefers-reduced-motion:reduce){
  .ab-note{transition:none;transform:none}
}

/* ---------------- Ad strip (bottom overlay) ---------------- */
/* The overlay format, confined. It sits ABOVE the bottom nav rather than over
   it — the nav is how a phone gets around this site, and covering it to show an
   advert trades the product for the revenue. `has-ad-strip` lifts the page's
   bottom padding by the same amount so the last row of content stays reachable
   instead of hiding underneath. Below the player and every sheet in z-order, so
   it can never sit on top of what someone came to watch. */
/* It starts parked below the screen rather than display:none, and that is not a
   stylistic choice. An overlay ad positions itself against its frame's viewport;
   inside a display:none frame that viewport is zero, so it renders nothing, so
   it never reports a height, so it is never revealed — it could not possibly
   appear. Parked off-screen the frame is fully laid out and the advert renders
   normally; only its position is a lie, and only until it reports. */
.ad-social{position:fixed;left:0;right:0;z-index:45;bottom:-260px;
  pointer-events:none;transition:bottom .3s cubic-bezier(.2,.9,.3,1);
  background:var(--panel);border-top:1px solid var(--line2);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.8)}
.ad-social.show{bottom:calc(69px + env(safe-area-inset-bottom));pointer-events:auto}
/* Centred, because a fixed-size banner is narrower than the strip on anything
   but the narrowest phone. Width and height are set inline from the unit's own
   declared size, so this is only the fallback for the overlay path. */
.ad-social iframe{display:block;width:100%;height:100px;border:0;
  background:transparent;margin:0 auto}
.ad-social-x{position:absolute;right:6px;top:-32px;width:30px;height:30px;
  border-radius:50%;background:var(--panel);border:1px solid var(--line2);
  color:var(--dim);font-size:17px;line-height:1;display:grid;place-items:center}
.ad-social-x:hover{color:var(--txt);border-color:var(--accent)}
/* Reserve what the strip actually takes, not a guess. The strip is 50, 60 or
   90px tall depending on which unit fits, and a flat 210px left ~90px of dead
   space below the last row on a phone. The variable is set from the real height
   when the strip reveals; the fallback covers the moment before that. */
body.has-ad-strip #view{padding-bottom:calc(94px + var(--ad-strip-h,52px))}
/* Never over the video: the player takes the whole screen on a phone. Parked
   rather than removed, for the same reason as above — a frame with no viewport
   stops rendering, and the advert would not come back when the player closed. */
body.modal-open .ad-social{bottom:-260px;pointer-events:none}
@media(min-width:761px){
  .ad-social.show{bottom:0}
  /* No bottom nav here, so only the strip itself needs clearing. */
  body.has-ad-strip #view{padding-bottom:calc(28px + var(--ad-strip-h,92px))}
}
@media(prefers-reduced-motion:reduce){ .ad-social,#topbar{transition:none} }

/* ---------------- Ad slot ---------------- */
/* A reserved box with a fixed height, so the frame arriving late cannot push
   the page around — layout shift on a phone is what makes an ad feel like an
   ambush rather than a banner. Labelled, because a native unit that reads as
   editorial is a trick, and people who feel tricked do not come back. */
/* Collapsed until its frame reports content. A zone that does not fill — the
   network refusing, an ad blocker, or simply no inventory — otherwise leaves an
   empty panel with the word "Advertisement" on it, which is worse than showing
   nothing: it looks broken and it costs a reader the space anyway.
   Height 0 with overflow hidden rather than display:none, because the frame
   inside still needs to lay out in order to have a height worth reporting. */
.ad-slot{display:block;margin:0;padding:0;position:relative;
  height:0;overflow:hidden;border-radius:16px;border:0 solid var(--line);
  background:transparent;transition:height .2s ease}
.ad-slot.show{margin:6px 0 26px;height:auto;min-height:132px;
  border-width:1px;background:var(--panel)}
.ad-slot-tag{position:absolute;left:10px;top:8px;z-index:1;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);pointer-events:none}
.ad-slot iframe{display:block;width:100%;height:132px;border:0;
  background:transparent;color-scheme:normal}

/* The fixed-size variant. This one knows its dimensions before it loads, so it
   takes them from the unit rather than from a message the frame sends back —
   no measuring, no reveal at the wrong height, no reflow once it fills.
   Centred, because a 300px unit in a 700px column pinned left reads as broken
   layout rather than as an advert. */
.ad-slot.fixed.show{min-height:0;height:auto;width:100%;
  display:flex;justify-content:center;padding:10px 0;margin:14px 0 22px}
.ad-slot.fixed iframe{width:var(--ad-w);height:var(--ad-h);max-width:100%;
  border-radius:10px;overflow:hidden}

/* =========================================================================
   DESKTOP, LAYERED ON TOP
   Everything above this point describes the phone. These two blocks are the
   only place the wide layout is described, so a change to the phone can no
   longer be silently undone by an override further down the file — which is
   how the hero ended up 420px tall on a 812px screen despite a rule that said
   otherwise.
   ========================================================================= */
@media(min-width:761px){
  /* Wide enough for poster and text side by side, and for the artwork to lead
     rather than the video. */
  .detail-hero{height:300px;border-radius:26px 26px 0 0}
  .detail-body{padding:0 28px 32px;margin-top:-88px}
  .detail-top{flex-direction:row;gap:26px;align-items:flex-end}
  .detail-poster{width:150px}
  #playerSlot{order:0}
  #view{padding:22px 18px 74px}
  #topbar{padding:13px 18px;gap:12px}
  .top-search{display:flex;width:auto;flex:1}
  .bottom-nav{display:none}
  .row{margin-bottom:34px}
  .row-head{gap:13px;margin-bottom:14px}
  .row-title{font-size:21px}
  .rail{grid-auto-columns:minmax(156px,1fr);gap:16px}
  .rail.grid{grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:16px}
  .ad-slot.show{min-height:110px}
  .ad-slot iframe{height:110px}
  .hero{height:min(52vh,400px);border-radius:22px;margin-bottom:30px}
  .hero-inner{padding:30px;max-width:680px;gap:13px}
  .hero-title{font-size:clamp(28px,3.4vw,44px);line-height:1.04;-webkit-line-clamp:5;padding-bottom:4px;hyphens:none;overflow-wrap:normal}
  .hero-desc{display:-webkit-box}
  .hero-bg::after{background:linear-gradient(90deg,var(--bg) 3%,rgba(7,11,20,.35) 42%,transparent 62%),
                             linear-gradient(0deg,var(--bg) 1%,transparent 52%)}
  .badge-eps{font-size:10.5px;padding:3px 9px}
  .card-sub{font-size:11.5px}
  /* Pointer devices get the quiet card back: save reveals on hover. */
  .btn-save{width:36px;height:36px;border-radius:11px;opacity:0;transform:translateY(-4px)}
  .btn-save svg{width:16px;height:16px}
  .card:hover .btn-save{opacity:1;transform:none}
}

@media(min-width:901px){
  .detail-hero{height:340px}
  .detail-body{padding:0 36px 36px;margin-top:-100px}
  .detail-poster{width:160px}
  #app{grid-template-columns:var(--sb) 1fr}
  #sidebar{position:relative;left:auto;top:auto;bottom:auto;width:auto;z-index:auto;
    transform:none;box-shadow:none}
  /* The hamburger has to survive as long as the sidebar is a drawer. Hiding it
     at 761px — where the bottom nav also goes — left tablets between 761 and
     900px with no way to reach navigation at all. */
  .only-mobile{display:none}
  #view{padding:28px 32px 90px}
  #topbar{padding:15px 32px;gap:16px}
  .top-search{width:min(340px,42vw);flex:none;margin-left:auto}
  .hero{height:min(56vh,470px);margin-bottom:38px;border-radius:26px}
  .hero-inner{padding:44px;gap:15px}
  .hero-title{font-size:clamp(34px,6.2vw,68px);letter-spacing:-.035em}
  .hero-actions{gap:12px;margin-top:8px}
  .row{margin-bottom:40px}
  .row-title{font-size:23px}
  .rail{grid-auto-columns:minmax(172px,1fr);gap:18px}
  .rail.grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:18px}
}

/* --- Very small phones (SE and friends) --------------------------------- */
@media(max-width:400px){
  #view{padding-left:12px;padding-right:12px}
  .rail.grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .hero-title{font-size:clamp(24px,8.5vw,36px)}
  .pl-nudge{left:8px;right:8px}
}

/* --- Short viewports: don't let chrome eat the video --------------------- */
@media(max-height:520px) and (orientation:landscape){
  .bottom-nav{display:none}
  #view{padding-bottom:20px}
}