/* ============================================================= *
   Tulix Stream — cinematic dark storefront
   Signature: layered hero billboard + hover-preview cards.
 * ============================================================= */
:root{
  --bg:#0b0d12; --bg-elev:#151922; --bg-elev2:#1c2230;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --text:#f3f5f8; --muted:#97a0b0; --muted-2:#6f7889;
  --accent:#ff5a36; --accent-2:#ffb23e; --accent-ink:#1a0d08;
  --free:#37e0a6; --danger:#ff5470; --ok:#37e0a6;
  --radius:14px; --radius-sm:10px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.7);
  --maxw:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.is-player{background:#000}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;margin:0;line-height:1.1;letter-spacing:-.01em}
.muted{color:var(--muted)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---- focus + motion floor ---- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  font-weight:600;font-size:14px;padding:.7em 1.2em;border-radius:999px;
  border:1px solid transparent;cursor:pointer;transition:transform .15s var(--ease),background .15s,border-color .15s;
  background:var(--bg-elev2);color:var(--text);white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--accent{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--accent-ink);border:none}
.btn--accent:hover{box-shadow:0 8px 24px -6px rgba(255,90,54,.5)}
.btn--ghost{background:transparent;border-color:var(--line-strong)}
.btn--ghost:hover{background:rgba(255,255,255,.06)}
.btn--light{background:var(--text);color:#0b0d12;border:none}
.btn--block{width:100%}
.btn--lg{padding:.85em 1.6em;font-size:15px}
.btn--sm{padding:.45em .8em;font-size:13px}
.btn--danger{background:transparent;border-color:rgba(255,84,112,.4);color:#ffb0bd}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:60;transition:background .25s}
.topbar::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,11,.95),rgba(7,8,11,0));pointer-events:none;z-index:-1}
.topbar.scrolled{background:rgba(8,9,13,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar__inner{max-width:var(--maxw);margin:0 auto;padding:14px clamp(16px,4vw,40px);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-weight:700;font-size:20px;letter-spacing:-.02em}
.brand__mark{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 18px rgba(255,90,54,.45);position:relative}
.brand__mark::after{content:"";position:absolute;left:7px;top:5px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #1a0d08}
.brand__name{background:linear-gradient(90deg,#fff,#c9cfda);-webkit-background-clip:text;background-clip:text;color:transparent}
.mainnav{display:flex;gap:20px;font-weight:500;color:var(--muted);min-width:0}
.mainnav a:hover{color:var(--text)}
.mainnav a{white-space:nowrap}
/* Hamburger — hidden on desktop, the mobile door to the full menu. */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:40px;height:40px;padding:9px;background:none;border:1px solid transparent;border-radius:10px;cursor:pointer;flex:0 0 auto}
.navtoggle span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .22s,opacity .22s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.navtoggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.search{margin-left:auto;position:relative;width:min(320px,32vw)}
.search input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);padding:.6em 1em;border-radius:999px;font-size:14px}
.search input:focus{background:rgba(255,255,255,.1);border-color:var(--line-strong);outline:none}
.search__results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;max-height:60vh;overflow-y:auto;z-index:80}
.search__results a{display:flex;gap:10px;align-items:center;padding:8px 10px}
.search__results a:hover{background:rgba(255,255,255,.06)}
.search__results img{width:36px;height:54px;object-fit:cover;border-radius:4px;background:var(--bg-elev2)}
.usermenu{position:relative;display:flex;align-items:center;gap:10px}
.usermenu__btn{background:none;border:none;cursor:pointer;padding:0}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink)}
.usermenu__panel{position:absolute;right:0;top:calc(100% + 10px);width:220px;background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;gap:2px;z-index:80}
.usermenu__panel.open{display:flex}
.usermenu__head{padding:8px 10px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis}
.usermenu__panel a,.usermenu__panel button{text-align:left;background:none;border:none;color:var(--text);font:inherit;padding:9px 10px;border-radius:8px;cursor:pointer;width:100%}
.usermenu__panel a:hover,.usermenu__panel button:hover{background:rgba(255,255,255,.07)}

/* ---- flash ---- */
.flashwrap{position:fixed;top:74px;left:0;right:0;z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.flash{pointer-events:auto;background:var(--bg-elev2);border:1px solid var(--line-strong);padding:.7em 1.2em;border-radius:10px;box-shadow:var(--shadow);max-width:520px;animation:flashin .3s var(--ease)}
.flash--success{border-color:rgba(55,224,166,.4)}
.flash--error{border-color:rgba(255,84,112,.45)}
@keyframes flashin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---- hero billboard (signature) ---- */
.hero{position:relative;min-height:min(82vh,720px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
/* The hero backdrop is deliberately blurred: it reads as ambient art for ANY
   source frame (incl. text-slide/educational videos where every frame carries
   burned-in text), while the title and buttons stay sharp on top. */
.hero__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:blur(14px) brightness(.55) saturate(1.15);transform:scale(1.12);animation:heroDrift 24s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.12) translate3d(0,0,0)}to{transform:scale(1.18) translate3d(-2%,-1%,0)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(8,9,13,.94) 0%,rgba(8,9,13,.55) 38%,rgba(8,9,13,0) 70%),
  linear-gradient(0deg,var(--bg) 2%,rgba(11,13,18,.2) 30%,transparent 60%)}
.hero__body{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px) clamp(40px,7vw,90px);width:100%}
.hero__eyebrow{display:inline-flex;gap:10px;align-items:center;color:var(--accent-2);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.hero h1{font-size:clamp(28px,5vw,60px);font-weight:700;max-width:min(16ch,100%);
  text-shadow:0 4px 30px rgba(0,0,0,.5);
  /* A title with no spaces must break rather than escape the viewport, and
     never grow past three lines. */
  overflow-wrap:anywhere;word-break:break-word;line-height:1.06;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){ .hero h1{-webkit-line-clamp:4} }
.hero__meta{display:flex;gap:14px;align-items:center;color:var(--muted);margin:16px 0;font-weight:500;flex-wrap:wrap}
.hero__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--muted-2)}
.hero__desc{max-width:54ch;color:#d6dbe4;margin-bottom:26px;font-size:16px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---- rows ---- */
.rowsec{margin:38px 0}
.rowsec__head{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px);display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.rowsec__head h2{font-size:20px;font-weight:600}
.rowsec__head a{color:var(--muted);font-size:13px;font-weight:600}
.rowsec__head a:hover{color:var(--accent-2)}
.row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  max-width:var(--maxw);margin:0 auto;
  padding:6px clamp(16px,4vw,40px) 18px;scrollbar-width:thin;scrollbar-color:var(--bg-elev2) transparent}
.row::-webkit-scrollbar{height:8px}
.row::-webkit-scrollbar-thumb{background:var(--bg-elev2);border-radius:8px}

/* ---- card with hover preview (signature) ---- */
.card{position:relative;flex:0 0 auto;width:230px;scroll-snap-align:start;border-radius:var(--radius);background:var(--bg-elev);overflow:hidden;cursor:pointer;transition:transform .28s var(--ease),box-shadow .28s;border:1px solid var(--line)}
.card__thumb{position:relative;aspect-ratio:16/10;background:var(--bg-elev2)}
.card__thumb img{width:100%;height:100%;object-fit:cover}
.card__preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.card__badge{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.card__badge--free{background:rgba(55,224,166,.18);color:var(--free);border:1px solid rgba(55,224,166,.4)}
.card__badge--lock{background:rgba(0,0,0,.55);color:#fff}
.card__progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2)}
.card__progress i{display:block;height:100%;background:var(--accent)}
.card__meta{padding:10px 12px}
.card__title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__sub{color:var(--muted);font-size:12px;margin-top:2px;display:flex;gap:8px}
@media (hover:hover){
  .card:hover{transform:translateY(-6px) scale(1.04);box-shadow:var(--shadow);z-index:5;border-color:var(--line-strong)}
  .card:hover .card__preview{opacity:1}
}

/* ---- grid (browse/search/watchlist) ---- */
.pagehead{max-width:var(--maxw);margin:0 auto;padding:32px clamp(16px,4vw,40px) 6px}
.pagehead h1{font-size:clamp(26px,4vw,40px)}
.grid{max-width:var(--maxw);margin:0 auto;padding:18px clamp(16px,4vw,40px) 60px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grid .card{width:auto}
.empty{max-width:var(--maxw);margin:0 auto;padding:60px clamp(16px,4vw,40px);text-align:center;color:var(--muted)}
.empty h2{margin-bottom:8px;color:var(--text)}

/* ---- detail page ---- */
.detail__hero{position:relative;min-height:min(70vh,620px);display:flex;align-items:flex-end;overflow:hidden}
.detail__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.detail__hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg),rgba(11,13,18,.3) 50%,rgba(11,13,18,.6)),linear-gradient(90deg,rgba(11,13,18,.85),transparent 60%)}
.detail__body{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px) 40px;width:100%}
.detail__body h1{font-size:clamp(30px,5vw,56px);max-width:18ch}
.detail__meta{display:flex;gap:12px;align-items:center;color:var(--muted);margin:14px 0;flex-wrap:wrap;font-weight:500}
.tag{font-size:12px;padding:2px 8px;border:1px solid var(--line-strong);border-radius:999px;color:var(--muted)}
.detail__desc{max-width:62ch;color:#d6dbe4;margin:10px 0 24px}
.detail__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.detail__info{max-width:var(--maxw);margin:0 auto;padding:24px clamp(16px,4vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;border-top:1px solid var(--line)}
.detail__info dt{color:var(--muted-2);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.detail__info dd{margin:4px 0 0}
.locknote{display:inline-flex;gap:8px;align-items:center;color:var(--accent-2);font-weight:600}

/* ---- player ---- */
.player{position:fixed;inset:0;background:#000;display:flex;flex-direction:column}
.player__top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:16px;padding:18px 22px;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);transition:opacity .3s}
.player__top a.back{display:inline-flex;align-items:center;gap:8px;font-weight:600;flex:0 0 auto;white-space:nowrap;background:rgba(0,0,0,.55);padding:8px 16px;border-radius:999px;backdrop-filter:blur(6px);line-height:1}
.player__top a.back svg{display:block;flex:0 0 auto}
.player__title{font-weight:600;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player.idle .player__top{opacity:0}
.player video{width:100%;height:100%;background:#000}
.player__blocked{margin:auto;text-align:center;max-width:440px;padding:40px}
.player__blocked h2{margin-bottom:10px}

/* ---- forms / auth ---- */
.authwrap{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:40px 16px;position:relative;overflow:hidden}
.authwrap::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(1200px 600px at 70% -10%,rgba(255,90,54,.18),transparent 60%),radial-gradient(900px 500px at 10% 110%,rgba(55,224,166,.1),transparent 60%)}
.authcard{width:min(420px,100%);background:var(--bg-elev);border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow)}
.authcard h1{font-size:26px;margin-bottom:6px}
.authcard .sub{color:var(--muted);margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);padding:.75em .9em;border-radius:10px;font:inherit}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;background:rgba(255,255,255,.08)}
.field--row{display:flex;gap:12px}
.field--row>*{flex:1}
.formnote{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}
.formnote a{color:var(--accent-2);font-weight:600}
.checkline{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.checkline input{width:auto}

/* ---- plans ---- */
.plans{max-width:980px;margin:0 auto;padding:30px clamp(16px,4vw,40px) 60px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.plan{background:var(--bg-elev);border:1px solid var(--line);border-radius:18px;padding:26px;position:relative;display:flex;flex-direction:column}
.plan--featured{border-color:rgba(255,90,54,.5);box-shadow:0 0 0 1px rgba(255,90,54,.25)}
.plan__badge{position:absolute;top:-11px;left:26px;background:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--accent-ink);font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.plan h3{font-size:20px}
.plan__price{font-family:"Space Grotesk";font-size:40px;font-weight:700;margin:8px 0}
.plan__price small{font-size:15px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:14px 0 22px;display:flex;flex-direction:column;gap:8px;color:#cfd5df}
.plan li{display:flex;gap:10px}.plan li::before{content:"✓";color:var(--free)}
.plan .btn{margin-top:auto}

/* ---- account ---- */
.acct{max-width:var(--maxw);margin:0 auto;padding:34px clamp(16px,4vw,40px) 60px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.panel{background:var(--bg-elev);border:1px solid var(--line);border-radius:16px;padding:22px}
.panel h2{font-size:16px;margin-bottom:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border:none}
.pill{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.pill--active{background:rgba(55,224,166,.16);color:var(--free)}
.pill--pending{background:rgba(255,178,62,.16);color:var(--accent-2)}
.pill--none{background:rgba(255,255,255,.08);color:var(--muted)}

/* ---- tables ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.data th,table.data td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em;background:var(--bg-elev)}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:rgba(255,255,255,.025)}
code.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(255,255,255,.06);padding:2px 7px;border-radius:6px;font-size:13px}

/* ---- footer ---- */
.sitefoot{border-top:1px solid var(--line);margin-top:40px}
.sitefoot__inner{max-width:var(--maxw);margin:0 auto;padding:26px clamp(16px,4vw,40px);display:flex;gap:18px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:14px}
.sitefoot nav{display:flex;gap:18px;margin-right:auto}
.sitefoot a:hover{color:var(--text)}

/* ---- responsive ---- */
/* Mid widths: keep every nav item + search usable instead of clipping. */
@media (max-width:1020px){
  .topbar__inner{gap:14px}
  .mainnav{gap:13px;font-size:14px}
  .search{flex:1 1 140px;min-width:110px}
}
@media (max-width:760px){
  /* The old rule here was `.mainnav{display:none}` with NO replacement — on
     phones in portrait the whole menu (Browse/Free/Series/Live/Scroll/My
     list) simply vanished. Now the hamburger owns it: the same nav element
     becomes a slide-down panel, so there is exactly one menu to maintain. */
  .navtoggle{display:flex}
  .mainnav{position:fixed;top:64px;left:0;right:0;z-index:70;flex-direction:column;gap:0;background:rgba(10,12,17,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:6px 0 10px;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .2s,opacity .2s,visibility .2s;max-height:calc(100dvh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  body.nav-open .mainnav{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .mainnav a{padding:13px clamp(16px,5vw,28px);font-size:16px;color:var(--text);border-bottom:1px solid rgba(255,255,255,.04)}
  .mainnav a:last-child{border-bottom:none}
  body.nav-open{overflow:hidden}
  .search{width:auto;flex:1;min-width:0}
  .hero__cta .btn{flex:1}
  .card{width:180px}
}

/* ============================================================= *
   Connected-TV / 10-foot experience (body.tv) + universal focus
 * ============================================================= */
/* Make keyboard/remote focus on a card behave like hover (scale + preview). */
.card:focus,.card:focus-within{transform:translateY(-6px) scale(1.04);box-shadow:var(--shadow);z-index:5;border-color:var(--accent);outline:none}
.card:focus .card__preview,.card:focus-within .card__preview{opacity:1}
.card:focus{outline:3px solid var(--accent);outline-offset:3px}
.btn:focus-visible,.mainnav a:focus-visible,.usermenu__panel a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* TV mode: bigger type, stronger focus, overscan-safe padding, no hover-only reliance. */
body.tv{font-size:18px}
body.tv .topbar__inner{padding-top:26px}
body.tv .container,body.tv .rowsec__head,body.tv .row,body.tv .pagehead,body.tv .grid,body.tv .hero__body,body.tv .detail__body{padding-left:max(40px,4vw);padding-right:max(40px,4vw)}
body.tv .card{width:268px}
body.tv .card:focus{outline-width:4px;outline-offset:4px}
body.tv .btn{padding:.85em 1.5em;font-size:17px}
body.tv .btn:focus{outline:4px solid var(--accent);outline-offset:4px;transform:translateY(-1px)}
body.tv .search{display:none} /* search is reachable via the Browse page; avoids on-screen keyboard friction */
body.tv .mainnav a:focus{outline:3px solid var(--accent);outline-offset:4px;color:#fff}
body.tv a:focus,body.tv button:focus,body.tv select:focus,body.tv input:focus{outline:3px solid var(--accent);outline-offset:3px}
body.tv .row{scroll-padding:0 60px}

/* Search filters (Batch 4) */
.filters{margin:0 0 22px}
.filters__row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters__q{flex:1 1 260px;min-width:200px}
.filters .filters__row > select,
.filters .filters__row > input{background:#0e131b;border:1px solid #1e2836;color:#e7edf5;border-radius:10px;padding:10px 12px;font-size:14px}
.filters .filters__row > select{cursor:pointer}
.filters .filters__row > .btn{padding:10px 18px}
@media (max-width:640px){.filters__row{gap:8px}.filters__q{flex:1 1 100%}}

/* Sections below the detail hero share the hero's container so the page has a
   single left edge. Without this the cast strip and the related row started at
   the viewport edge while the text above them was inset — the whole lower half
   appeared to jump left. */
.detail__lower{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.detail__lower .rowsec{margin:30px 0}
.detail__lower .rowsec__head{padding:0}
.detail__lower .row{max-width:none;margin:0;padding-left:0;padding-right:0}

/* cast strip on detail pages */
.castrow{margin:26px 0 8px}
.castrow h3{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#8b93a7);margin-bottom:12px}
.castrow__scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.castcard{flex:0 0 110px;margin:0;text-align:center}
.castcard img,.castcard__ph{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 8px;background:#1d2330;border:1px solid var(--border,#252b38)}
.castcard__ph{display:grid;place-items:center;font-size:30px;font-weight:700;color:var(--muted,#8b93a7)}
.castcard figcaption{font-size:12px;line-height:1.35}
.castcard figcaption strong{display:block;font-weight:600}
.castcard figcaption .muted{display:block;color:var(--muted,#8b93a7)}

.castcard[data-bio]{cursor:pointer}
.castcard[data-bio]:hover img,.castcard[data-bio]:focus img{outline:2px solid var(--accent,#f97316);outline-offset:2px}
.castbio{margin-top:14px;background:#141925;border:1px solid var(--border,#252b38);border-radius:10px;padding:14px 16px;max-width:720px}
.castbio__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.castbio__close{background:none;border:0;color:var(--muted,#8b93a7);font-size:20px;cursor:pointer;line-height:1}
.castbio p{white-space:pre-line;font-size:14px;color:#cdd3df;margin:0}

/* ---- Live channels (ssh101+) ------------------------------------------ */
.livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff3b30;
  margin-right:6px;vertical-align:middle;box-shadow:0 0 0 0 rgba(255,59,48,.7);
  animation:livepulse 1.8s infinite}
@keyframes livepulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,48,.65)}
  70%{box-shadow:0 0 0 7px rgba(255,59,48,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}
.nav--live{display:inline-flex;align-items:center}
.card__badge--live{background:#ff3b30;color:#fff;font-weight:700;letter-spacing:.04em;
  display:inline-flex;align-items:center}
.card__badge--live .livedot{background:#fff;box-shadow:none;animation:none;width:6px;height:6px}
.card__badge--off{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75);font-weight:600}
.card--offair .card__thumb img{filter:grayscale(.75) brightness(.7)}
.player__live{display:inline-flex;align-items:center;margin-left:12px;padding:2px 8px;
  border-radius:4px;background:#ff3b30;color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em}
.player__live .livedot{background:#fff;box-shadow:none;animation:none;width:6px;height:6px}
.detail__live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:5px;
  background:#ff3b30;color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}
.detail__live--off{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}

/* ============================================================= *
   Page shells, poster grids, series, scroll, static pages, modal
   ------------------------------------------------------------
   These class names were in use across the storefront but had NO
   definitions anywhere, so Series, My library, series detail, the
   scroll feed and static pages rendered as bare unstyled text.
 * ============================================================= */

/* --- generic page shell (browse, library, live, series, static) --- */
.page{max-width:var(--maxw);margin:0 auto;padding:28px clamp(16px,4vw,40px) 70px}
.page__title{font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.page__lede{color:var(--muted);margin:0 0 22px;max-width:70ch}

/* --- poster grid (series list, my library) --- */
.poster-grid{display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,15vw,190px),1fr))}
.poster{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--bg-elev);border:1px solid var(--line);color:inherit;text-decoration:none;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
.poster:hover,.poster:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.poster:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.poster img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--bg-elev2)}
.poster__ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/3;
  background:linear-gradient(150deg,var(--bg-elev2),var(--bg-elev));
  font-size:44px;font-weight:700;color:var(--muted-2)}
.poster__meta{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
/* Long unbroken titles must wrap, not force the grid wider. */
.poster__title{font-weight:600;font-size:14px;line-height:1.35;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.poster__badge{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--muted)}

/* --- series detail --- */
.detail{max-width:var(--maxw);margin:0 auto;padding:28px clamp(16px,4vw,40px) 70px}
.detail__title{font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-.02em;margin:0 0 8px;overflow-wrap:anywhere}
.detail__lede{color:var(--muted);max-width:70ch;margin:0 0 24px}
.eplist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.eprow{display:flex;gap:14px;align-items:center;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg-elev);text-decoration:none;color:inherit;
  transition:border-color .2s,background .2s}
.eprow:hover{border-color:var(--line-strong);background:var(--bg-elev2)}
.eprow img{width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:0 0 auto;background:var(--bg-elev2)}
.eprow__body{min-width:0;display:flex;flex-direction:column;gap:3px}
.eprow__title{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.eprow__meta{font-size:12px;color:var(--muted)}
.season__head{margin:26px 0 4px;font-size:17px;font-weight:700}

/* --- scroll feed ---------------------------------------------------------
   Deliberately NOT styled here. views/scroll.php ships its own <style> block
   (scroll-snap, absolutely-positioned video, tap overlay), and global rules
   for the same class names fought it — a page that styles itself owns its
   class names. The selftest's style-coverage check exempts such pages for the
   same reason. */

/* --- static pages (terms, privacy, about) --- */
.prose{max-width:74ch;color:var(--text);line-height:1.75}
.prose h2{font-size:20px;margin:28px 0 8px}
.prose h3{font-size:16px;margin:22px 0 6px}
.prose p,.prose li{color:var(--muted)}
.prose ul,.prose ol{padding-left:20px;margin:10px 0}
.prose a{color:var(--accent-2)}

/* --- trailer modal --- */
.trailer-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.trailer-modal[hidden]{display:none}
.trailer-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px)}
.trailer-modal__box{position:relative;width:min(960px,100%);border-radius:var(--radius);overflow:hidden;
  background:#000;border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.trailer-modal__frame{width:100%;aspect-ratio:16/9;border:0;display:block}
.trailer-modal__close{position:absolute;top:8px;right:8px;z-index:2;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(0,0,0,.6);color:#fff;font-size:18px;cursor:pointer}
.trailer-modal__close:hover{background:rgba(0,0,0,.85)}

@media (max-width:640px){
  .eprow img{width:96px}
  .poster-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* Storefront leftovers: an inline note, and the 404/static body wrapper. */
.note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}
.cms-body{max-width:74ch;margin:0 auto;line-height:1.75;color:var(--muted)}
.cms-body h1,.cms-body h2{color:var(--text)}

/* --- series playback: episode label, Next, and the up-next card --- */
.player__eplabel{display:inline-block;margin-right:8px;padding:2px 7px;border-radius:6px;
  background:rgba(255,255,255,.1);font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:middle}
.player__next{margin-left:auto;flex:0 0 auto;white-space:nowrap}
.upnext{position:absolute;right:18px;bottom:96px;z-index:30;max-width:min(360px,calc(100vw - 36px))}
.upnext[hidden]{display:none}
.upnext__box{background:rgba(12,14,20,.94);backdrop-filter:blur(10px);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.upnext__eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);font-weight:700}
.upnext__title{font-weight:700;font-size:16px;margin-top:4px;line-height:1.25;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.upnext__meta{font-size:12px;color:var(--muted);margin-top:3px}
.upnext__actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
@media (max-width:640px){ .upnext{left:14px;right:14px;bottom:84px;max-width:none} }
/* On a TV the up-next card must be focusable and obvious from ten feet. */
body.tv .upnext{bottom:120px;right:40px}
body.tv .upnext__title{font-size:20px}

/* --- tap-to-play (shown only when the browser refuses autoplay) --- */
.tapplay{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.35),rgba(0,0,0,.65))}
.tapplay__disc{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:0 14px 40px -10px rgba(0,0,0,.8);transition:transform .2s var(--ease)}
.tapplay:hover .tapplay__disc{transform:scale(1.06)}
.tapplay__hint{font-weight:600;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.tapplay:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}

/* --- quality / bitrate selector --- */
.qctl{position:absolute;right:14px;bottom:74px;z-index:24}
.qctl__btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line-strong);background:rgba(0,0,0,.62);backdrop-filter:blur(6px);
  color:#fff;font:600 13px inherit;cursor:pointer;white-space:nowrap}
.qctl__btn:hover{background:rgba(0,0,0,.8)}
.qctl__btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.qctl__menu{position:absolute;right:0;bottom:calc(100% + 8px);min-width:190px;padding:6px;
  border-radius:12px;border:1px solid var(--line-strong);background:rgba(12,14,20,.96);
  backdrop-filter:blur(10px);box-shadow:var(--shadow);max-height:52vh;overflow-y:auto}
.qctl__menu[hidden]{display:none}
.qctl__item{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;
  padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--text);
  font:500 14px inherit;text-align:left;cursor:pointer}
.qctl__item:hover{background:rgba(255,255,255,.07)}
.qctl__item.is-active{background:rgba(255,90,54,.16);color:#fff;font-weight:700}
.qctl__sub{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap}
@media (max-width:640px){ .qctl{right:10px;bottom:66px} }
body.tv .qctl{right:40px;bottom:110px}
body.tv .qctl__btn{font-size:16px;padding:10px 18px}
/* A face is only obviously clickable if we say so. */
.castcard__bio{display:inline-block;margin-top:3px;font-size:11px;font-weight:600;color:var(--accent-2)}
.castcard[data-bio]{cursor:pointer}
.castcard[data-bio]:hover .castcard__bio{text-decoration:underline}
.castcard[data-bio]:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px}