:root{
  /* surfaces — cool near-black, not pure black */
  --bg:#0a0c10;--surface:#12151c;--surface2:#191d26;--surface3:#222735;
  --border:rgba(255,255,255,0.07);

  /* accent — ember/signal orange, deliberately not Netflix-red */
  --accent:#ff5b2e;--accent-dim:rgba(255,91,46,0.14);--accent-hover:#ff7a4f;
  --red:#ff5b2e;--accent-rgb:255,91,46;

  /* secondary semantic colors */
  --live:#3ddc84;--live-dim:rgba(61,220,132,0.14);
  --anime-1:#a855f7;--anime-2:#ec4899;
  --brand-discord:#5865F2;--brand-discord-hover:#4752c4;

  /* text */
  --text:#eef1f7;--muted:#95a0b8;

  /* radius scale */
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --radius:var(--r-sm); /* legacy alias, kept for any unmigrated refs */

  /* elevation scale — layered ambient + contact shadow for real depth */
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.24);
  --shadow-md:0 2px 4px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.4);
  --shadow-lg:0 4px 8px rgba(0,0,0,.4),0 28px 70px rgba(0,0,0,.55);
  --shadow-accent:0 8px 24px -4px rgba(var(--accent-rgb),.4);

  --ease:cubic-bezier(0.4,0,0.2,1);--nav-h:60px;
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  background:var(--bg);color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:15px;
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-left:var(--safe-left);padding-right:var(--safe-right);
}
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.018;pointer-events:none;z-index:9999
}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  background:rgba(10,12,16,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 32px -8px rgba(0,0,0,.5);
  display:flex;align-items:center;gap:20px;
  padding:0 clamp(16px,4vw,32px);z-index:1000;
  contain:layout style;
}
.nav-logo{
  font-family:'Archivo Black',sans-serif;font-size:19px;letter-spacing:-.2px;
  color:var(--accent);cursor:pointer;text-transform:uppercase;
  text-shadow:0 0 20px rgba(var(--accent-rgb),.4);
  user-select:none;white-space:nowrap;flex-shrink:0;
}
.nav-logo span{color:var(--text)}
.nav-links{display:flex;gap:18px;list-style:none;flex:1}
.nav-links li a{
  color:var(--muted);text-decoration:none;
  font-size:13px;font-weight:500;cursor:pointer;
  transition:color .18s;padding:4px 0;
}
.nav-links li a:hover,.nav-links li a.active{color:var(--text)}
.nav-status-badge{
  display:inline-block;font-size:9px;font-weight:700;letter-spacing:.3px;
  background:rgba(245,158,11,.14);color:#f59e0b;border:1px solid rgba(245,158,11,.3);
  padding:2px 7px;border-radius:var(--r-pill);vertical-align:middle;margin-left:3px;
}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* hamburger */
.hamburger{
  display:none;background:none;border:none;color:var(--text);
  font-size:22px;cursor:pointer;padding:6px;line-height:1;
  flex-shrink:0;
}

/* mobile drawer */
.mobile-menu{
  position:fixed;inset:0;background:rgba(10,12,16,.97);
  z-index:1100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{
  color:var(--text);text-decoration:none;
  font-family:'Archivo Black',sans-serif;font-size:26px;
  letter-spacing:-.3px;text-transform:uppercase;cursor:pointer;
  transition:color .15s;
}
.mobile-menu a:hover{color:var(--accent)}
.mobile-menu-close{
  position:absolute;top:18px;right:20px;
  background:none;border:none;color:var(--muted);
  font-size:24px;cursor:pointer;padding:8px;
}

/* ── SEARCH ── */
.search-wrap{position:relative;display:flex;align-items:center}
.search-input{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:7px 14px 7px 36px;
  color:var(--text);font-family:'DM Sans',sans-serif;font-size:13px;
  width:180px;transition:width .3s var(--ease),border-color .2s;outline:none;
}
.search-input:focus{width:260px;border-color:rgba(var(--accent-rgb),.4);background:var(--surface3)}
.search-icon{position:absolute;left:11px;color:var(--muted);font-size:14px;pointer-events:none}
.search-results{
  position:absolute;top:calc(100% + 8px);left:0;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;z-index:200;
  box-shadow:0 16px 48px rgba(0,0,0,.6);display:none;
  min-width:min(320px,90vw);max-height:60vh;overflow-y:auto;
}
.search-results.open{display:block}
.search-result-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;cursor:pointer;transition:background .12s;
}
.search-result-item:hover{background:var(--surface3)}
.search-result-item img{width:34px;height:50px;object-fit:cover;border-radius:3px;flex-shrink:0;background:var(--surface3)}
.search-result-title{font-size:13px;font-weight:500}
.search-result-meta{font-size:11px;color:var(--muted);margin-top:2px}
.btn-nav{
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text);padding:7px 14px;border-radius:var(--r-pill);
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  cursor:pointer;transition:background .18s,border-color .18s;white-space:nowrap;
}
.btn-nav:hover{background:var(--surface3);border-color:rgba(var(--accent-rgb),.4)}


/* ── DISCORD BUTTON (nav) ── */
.btn-discord{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand-discord);border:none;
  color:#fff;padding:8px 16px;border-radius:var(--r-pill);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .18s,transform .18s,box-shadow .18s;
  flex-shrink:0;
}
.btn-discord:hover{background:var(--brand-discord-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(88,101,242,.4)}
.btn-discord:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-discord svg{flex-shrink:0}

/* ── DISCORD FLOATING BUTTON (mobile only) ── */
.discord-fab{
  position:fixed;bottom:20px;right:16px;z-index:900;
  display:none;
  align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--brand-discord);color:#fff;
  box-shadow:0 4px 20px rgba(88,101,242,.55);
  text-decoration:none;border:none;cursor:pointer;
  transition:transform .18s,box-shadow .18s;
  animation:fabPop .4s var(--ease) both;
}
.discord-fab:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(88,101,242,.65)}
.discord-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes fabPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Show FAB on mobile/tablet, hide on desktop */
@media(max-width:900px){
  .btn-discord{display:none}
  .discord-fab{display:flex}
}
/* On TV screens hide FAB (it's unreachable), show nav btn */
@media(min-width:1280px) and (hover:none){
  .discord-fab{display:none}
}

/* ── HERO ── */
#hero{
  position:relative;
  height:clamp(420px,85vh,860px);
  margin-top:var(--nav-h);overflow:hidden;
  contain:layout;
}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center top;
  transition:opacity .7s var(--ease);filter:brightness(.4) saturate(1.1);
  will-change:opacity;
}
.hero-gradient{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(10,12,16,.97) 0%,rgba(10,12,16,.55) 55%,rgba(10,12,16,.1) 100%),
              linear-gradient(to top,var(--bg) 0%,transparent 40%);
}
.hero-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;padding:0 clamp(20px,5vw,60px) clamp(40px,6vh,70px);
  max-width:min(640px,75%);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:var(--r-pill);padding:3px 12px;
  font-size:10px;font-weight:600;color:var(--accent);
  letter-spacing:.7px;text-transform:uppercase;
  margin-bottom:12px;width:fit-content;
}
.hero-title{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(30px,4.6vw,62px);line-height:1.02;
  letter-spacing:-1px;margin-bottom:14px;
  text-shadow:0 1px 0 rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.55),0 0 60px rgba(var(--accent-rgb),.12);
  min-height:1.1em;
}
.hero-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.hero-rating{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--accent)}
.hero-year,.hero-genre{font-size:12px;color:var(--muted)}
.hero-sep{width:3px;height:3px;border-radius:50%;background:var(--muted)}
.hero-desc{
  font-size:13px;line-height:1.72;color:rgba(220,228,240,.75);
  margin-bottom:22px;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-play{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
  padding:12px 24px;border-radius:var(--r-sm);border:none;cursor:pointer;
  transition:transform .18s,box-shadow .18s;touch-action:manipulation;
}
.btn-play:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--accent-rgb),.4)}
.btn-info{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  color:var(--text);font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:500;padding:12px 20px;
  border-radius:var(--r-sm);cursor:pointer;backdrop-filter:blur(4px);
  transition:background .18s;touch-action:manipulation;
}
.btn-info:hover{background:rgba(255,255,255,.18)}
.hero-dots{position:absolute;bottom:22px;right:clamp(20px,5vw,60px);display:flex;gap:7px;z-index:3}
.hero-dot{
  width:20px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.22);cursor:pointer;
  transition:background .28s,width .28s;
}
.hero-dot.active{background:var(--accent);width:32px}

/* ── AD BANNERS ── */
.ad-banner-wrap{
  width:100%;display:flex;flex-direction:column;
  align-items:center;padding:8px 0;overflow:hidden;
  margin:20px 0;
}
.ad-label{
  font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:5px;
}
.ad-desktop{display:none;justify-content:center;align-items:center;width:100%;height:90px;overflow:hidden}
.ad-desktop iframe{width:728px!important;height:90px!important;border:none}
.ad-mobile{display:flex;justify-content:center;align-items:center;width:100%;height:50px;overflow:hidden}
.ad-mobile iframe{width:320px!important;height:50px!important;border:none}
@media(min-width:768px){
  .ad-desktop{display:flex}
  .ad-mobile{display:none}
}

/* Native banner */
.ad-native-wrap{
  width:100%;max-width:600px;margin:0 auto;
  padding:4px clamp(16px,4vw,32px) 0;
}
#container-b5f24442461b405be0df1fc5c3720276{
  max-width:100%;margin:0 auto;overflow:hidden;
}

/* ── SECTIONS ── */
main{padding-bottom:60px}
.section{padding:44px 0 0;content-visibility:auto;contain-intrinsic-size:0 400px}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,32px);margin-bottom:18px;
}
.section-title{
  font-family:'Archivo Black',sans-serif;font-size:19px;
  letter-spacing:-.3px;text-transform:uppercase;color:var(--text);
  display:flex;align-items:center;gap:10px;
}
.section-title::before{
  content:'';display:block;width:3px;height:18px;
  background:var(--accent);border-radius:2px;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.55);
}
.section-title::after{
  content:'';display:block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex-shrink:0;margin-left:-2px;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
.section-title-anime::before{
  background:linear-gradient(180deg,var(--anime-1),var(--anime-2));
  box-shadow:0 0 12px rgba(168,85,247,.5);
}
.section-title-anime::after{
  background:var(--anime-2);box-shadow:0 0 0 3px rgba(236,72,153,.15);
}
.section-link{
  font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:.4px;text-transform:uppercase;cursor:pointer;transition:color .18s;
}
.section-link:hover{color:var(--accent)}

/* ── CAROUSEL ── */
.carousel-wrap{position:relative}
.carousel-row{
  display:flex;gap:12px;
  padding:4px clamp(16px,4vw,32px) 16px;
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.carousel-row::-webkit-scrollbar{display:none}
.carousel-arrow{
  position:absolute;top:42%;transform:translateY(-50%);
  width:36px;height:36px;
  background:rgba(13,18,25,.9);border:1px solid var(--border);
  border-radius:50%;color:var(--text);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:5;backdrop-filter:blur(6px);
  transition:background .18s,transform .18s;user-select:none;
}
.carousel-arrow:hover{background:var(--surface3);transform:translateY(-50%) scale(1.08)}
.carousel-arrow.left{left:4px}
.carousel-arrow.right{right:4px}
@media(max-width:600px){.carousel-arrow{display:none}}

/* ── CARD ── */
.card{
  flex:0 0 clamp(130px,28vw,160px);cursor:pointer;
  position:relative;border-radius:var(--r-sm);overflow:hidden;
  transition:transform .28s var(--ease),filter .28s var(--ease);scroll-snap-align:start;
  will-change:transform;
}
.card:hover{transform:scale(1.05) translateY(-4px);z-index:2;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.card-img-wrap{
  position:relative;
  width:clamp(130px,28vw,160px);height:clamp(195px,42vw,240px);
  border-radius:var(--r-sm);overflow:hidden;background:var(--surface2);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .28s var(--ease);
}
.card:hover .card-img-wrap{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),var(--shadow-md)}
.card-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:filter .28s;display:block;
}
.card:hover .card-img-wrap img{filter:brightness(.58)}
.card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,12,16,.92) 0%,transparent 55%);
  opacity:0;transition:opacity .28s;
  display:flex;flex-direction:column;justify-content:flex-end;padding:8px;
}
.card:hover .card-overlay{opacity:1}
.card-play-btn{
  width:32px;height:32px;background:var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;margin:0 auto 6px;
  transform:scale(.8);transition:transform .18s;
  box-shadow:0 4px 16px rgba(var(--accent-rgb),.5);
}
.card:hover .card-play-btn{transform:scale(1)}
.card-rating-badge{
  position:absolute;top:7px;right:7px;
  background:rgba(10,12,16,.85);border:1px solid rgba(var(--accent-rgb),.32);
  border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700;color:var(--accent);
}
.card-type-badge{
  position:absolute;top:7px;left:7px;background:var(--accent);
  border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700;
  color:#fff;letter-spacing:.4px;text-transform:uppercase;
}
.card-type-badge-anime{
  background:linear-gradient(120deg,var(--anime-1),var(--anime-2));
  box-shadow:0 2px 8px rgba(168,85,247,.4);
}
.card-anime .card-img-wrap{box-shadow:inset 0 0 0 1px rgba(236,72,153,0)}
.card-anime:hover .card-img-wrap{box-shadow:inset 0 0 0 1px rgba(236,72,153,.5)}
.card-info{padding:8px 2px 3px}
.card-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.card-sub{font-size:10px;color:var(--muted);margin-top:2px}

/* ── GENRE ── */
.genre-section{padding:32px 0 0}
.genre-row{
  display:flex;gap:8px;
  padding:4px clamp(16px,4vw,32px) 14px;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.genre-row::-webkit-scrollbar{display:none}
.genre-pill{
  flex:0 0 auto;padding:7px 16px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface2);
  color:var(--muted);font-size:12px;font-weight:500;
  cursor:pointer;transition:all .18s;white-space:nowrap;
  touch-action:manipulation;
}
.genre-pill:hover{border-color:rgba(var(--accent-rgb),.38);color:var(--accent)}
.genre-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ── CONTINUE WATCHING ── */
.continue-card{
  flex:0 0 clamp(180px,50vw,240px);cursor:pointer;border-radius:var(--radius);
  overflow:hidden;background:var(--surface2);border:1px solid var(--border);
  transition:transform .28s var(--ease),border-color .18s;position:relative;
  scroll-snap-align:start;
}
.continue-card:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.32)}
.continue-thumb{width:100%;height:clamp(100px,28vw,135px);overflow:hidden;position:relative;background:var(--surface3)}
.continue-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.continue-progress{height:3px;background:var(--surface3)}
.continue-progress-bar{height:100%;background:var(--accent);transition:width .35s}
.continue-info{padding:9px 11px 11px}
.continue-title{font-size:12px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.continue-sub{font-size:10px;color:var(--muted)}
.continue-play{
  position:absolute;top:38px;left:50%;transform:translateX(-50%) scale(.8);
  width:38px;height:38px;background:rgba(var(--accent-rgb),.9);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;opacity:0;transition:opacity .22s,transform .22s;
}
.continue-card:hover .continue-play{opacity:1;transform:translateX(-50%) scale(1)}

/* ── MODAL ── */
#modal-overlay{
  position:fixed;inset:0;background:rgba(10,12,16,.88);z-index:2000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(16px,6vh,60px) clamp(12px,4vw,20px) 16px;
  overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-overflow-scrolling:touch;
}
#modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);width:100%;max-width:880px;
  overflow:visible;transform:translateY(20px);
  transition:transform .32s var(--ease);
  box-shadow:var(--shadow-lg);position:relative;
}
#modal-overlay.open .modal{transform:translateY(0)}
.modal-hero{
  position:relative;
  height:clamp(260px,42vw,400px);
  background:var(--surface2);overflow:hidden;
}
.modal-backdrop{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.22) saturate(1.1)}
.modal-backdrop-grad{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(13,18,25,1) 0%,rgba(13,18,25,.92) 35%,rgba(13,18,25,.55) 65%,rgba(13,18,25,.1) 100%),
              linear-gradient(to top,var(--surface) 0%,rgba(13,18,25,.6) 55%,transparent 100%);
}
.modal-hero-content{
  position:relative;z-index:2;display:flex;gap:22px;
  padding:clamp(14px,3vw,32px) clamp(14px,4vw,36px);
  height:100%;align-items:flex-end;
}
.modal-poster{
  flex:0 0 clamp(90px,15vw,160px);
  height:clamp(135px,22vw,240px);
  border-radius:var(--r-sm);overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.65);
  border:1px solid var(--border);background:var(--surface3);
}
.modal-poster img{width:100%;height:100%;object-fit:cover}
.modal-info{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;color:#fff}
.modal-title{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(21px,3.8vw,36px);
  line-height:1.05;letter-spacing:-.6px;margin-bottom:9px;
  color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6),0 10px 24px rgba(0,0,0,.7);
}
.modal-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.modal-meta-badge{padding:2px 9px;border-radius:4px;font-size:11px;font-weight:600;background:var(--surface3);color:var(--muted)}
.modal-meta-badge.red{background:var(--accent-dim);color:var(--accent)}
.modal-meta-badge.anime{
  background:linear-gradient(120deg,rgba(168,85,247,.18),rgba(236,72,153,.18));
  border:1px solid rgba(236,72,153,.4);color:var(--anime-2);
}
.modal-overview{
  font-size:12px;line-height:1.72;color:rgba(220,228,240,.72);
  margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap}
.modal-close{
  position:absolute;top:12px;right:12px;z-index:10;
  width:34px;height:34px;background:rgba(13,18,25,.85);
  border:1px solid var(--border);border-radius:50%;
  color:var(--text);font-size:15px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background .18s;
  backdrop-filter:blur(4px);touch-action:manipulation;
}
.modal-close:hover{background:var(--surface3)}
.modal-body{padding:clamp(14px,3vw,28px) clamp(14px,4vw,36px)}

/* ── PLAYER ── */
.player-wrap{
  width:100%;aspect-ratio:16/9;background:#000;
  border-radius:var(--r-sm);overflow:hidden;margin-bottom:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.55);border:1px solid var(--border);
  position:relative;
}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}
.player-placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  color:var(--muted);font-size:12px;cursor:pointer;
  transition:background .18s;background:var(--surface2);
}
.player-placeholder:hover{background:var(--surface3)}
.player-placeholder .big-play{
  width:58px;height:58px;border:2px solid var(--muted);
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:22px;transition:border-color .18s,color .18s;
}
.player-placeholder:hover .big-play{border-color:var(--accent);color:var(--accent)}

/* ── SERVER SWITCHER ── */
/* ── SERVER DROPDOWN ── */
.server-bar{
  display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;
  padding:12px 0 14px;position:relative;
}
.server-label{
  font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;flex-shrink:0;
  align-self:center;
}
/* Each picker (8-server / ad-free) is its own self-contained card */
.server-picker-group{
  display:flex;flex-direction:column;gap:9px;position:relative;
  padding:11px 13px;border-radius:var(--r-md);
  border:1px solid var(--border);
  background:rgba(255,255,255,.015);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
/* Glowing outline appears only around whichever picker is currently in use */
.server-picker-group.in-use{
  border-color:rgba(34,197,94,.5);
  background:rgba(34,197,94,.05);
  box-shadow:0 0 0 1px rgba(34,197,94,.18),0 0 22px -4px rgba(34,197,94,.35);
}
.server-picker-caption{
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  font-size:12px;font-weight:700;color:var(--text);letter-spacing:.2px;
}
.server-picker-caption-icon{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--r-sm);flex-shrink:0;
  background:rgba(var(--accent-rgb),.12);font-size:12px;line-height:1;
}
.server-picker-caption-green .server-picker-caption-icon{
  background:rgba(34,197,94,.14);
}
.server-picker-caption-text{white-space:nowrap}
.server-picker-caption-count{color:var(--muted);font-weight:600}
.server-picker-caption-sub{
  font-size:9.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.3px;
  margin-left:auto;text-align:right;white-space:nowrap;
}
.server-picker-caption-green{color:var(--live);}
.server-picker-caption-sub-green{color:var(--live);}
/* The trigger button */
.server-trigger{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;border-radius:var(--r-md);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  color:var(--text);
  font-size:12.5px;font-weight:700;letter-spacing:.2px;
  cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,transform .15s;
  font-family:'DM Sans',sans-serif;white-space:nowrap;
  touch-action:manipulation;user-select:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03);
}
.server-trigger:hover{
  background:linear-gradient(180deg,var(--surface3),var(--surface2));
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 4px 16px rgba(var(--accent-rgb),.12),inset 0 1px 0 rgba(255,255,255,.04);
}
.server-trigger:active{transform:scale(.97);}
.server-trigger.open{
  border-color:rgba(var(--accent-rgb),.55);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.server-trigger svg{transition:transform .25s;flex-shrink:0;}
.server-trigger.open svg{transform:rotate(180deg);}
.server-trigger-adfree:hover{
  border-color:rgba(34,197,94,.5);
  box-shadow:0 4px 16px rgba(34,197,94,.14),inset 0 1px 0 rgba(255,255,255,.04);
}
.server-trigger-adfree.open{
  border-color:rgba(34,197,94,.6);
  box-shadow:0 0 0 3px rgba(34,197,94,.14);
}
/* "In use" server dot — gray when idle, glowing green only on the picker
   whose server is actually currently playing */
.server-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--muted);opacity:.5;
  box-shadow:none;
  transition:background .2s,box-shadow .2s,opacity .2s;
  will-change:transform,opacity;
}
.server-dot.active{
  background:var(--live);opacity:1;
  box-shadow:0 0 0 2px rgba(34,197,94,.2),0 0 8px 2px rgba(34,197,94,.5);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.65;transform:scale(1.25)}
}
/* Dropdown popup */
.server-popup{
  position:absolute;top:calc(100% + 8px);left:0;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);padding:9px;
  display:flex;flex-direction:column;gap:3px;
  min-width:208px;z-index:9999;
  box-shadow:0 18px 48px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;pointer-events:none;transform:translateY(-8px) scale(.97);
  transform-origin:top left;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
  max-height:320px;overflow-y:auto;
}
.server-popup::-webkit-scrollbar{width:5px}
.server-popup::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:4px}
.server-popup.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.server-option{
  display:flex;align-items:center;gap:8px 11px;flex-wrap:wrap;
  padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid transparent;
  width:100%;
  background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s;
  font-family:'DM Sans',sans-serif;
  touch-action:manipulation;text-align:left;width:100%;
}
.server-option:hover{background:var(--surface3);color:var(--text);}
.server-option:active{transform:scale(.98);}
.server-option.active{
  background:linear-gradient(90deg,rgba(34,197,94,.16),rgba(34,197,94,.04));
  border-color:rgba(34,197,94,.45);color:var(--text);
}
.server-option-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--muted);
  transition:background .2s,box-shadow .2s;
}
.server-option.active .server-option-dot{
  background:var(--live);
  box-shadow:0 0 0 2px rgba(34,197,94,.2),0 0 6px 2px rgba(34,197,94,.5);
  animation:pulse-dot 2s ease-in-out infinite;
}

/* Server badges — Recommended, 4K, Basic, Ad-Free */
.server-badge{
  margin-left:auto;padding:2px clamp(5px,1.6vw,7px);border-radius:4px;
  font-size:clamp(8px,2.6vw,9px);font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;flex-shrink:0;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
  line-height:1.5;
}
.server-badge-recommended{
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.45);
  color:var(--live);
}
.server-option.active .server-badge-recommended{
  background:rgba(34,197,94,.25);
  border-color:var(--live);
}
.server-badge-4k{
  background:rgba(99,102,241,.15);
  border:1px solid rgba(99,102,241,.45);
  color:#818cf8;
  letter-spacing:.6px;
}
.server-badge-basic{
  background:rgba(56,152,255,.14);
  border:1px solid rgba(56,152,255,.45);
  color:#5eb1ff;
}
.server-badge-adfree{
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.45);
  color:var(--live);
}
.server-option.active .server-badge-adfree{
  background:rgba(34,197,94,.25);
  border-color:var(--live);
}

/* Ad-Free server maintenance state */
.server-maintenance-notice{
  display:flex;align-items:flex-start;gap:9px;
  padding:12px 13px;border-radius:var(--r-sm);
  background:rgba(148,163,184,.08);
  border:1px solid var(--border);
  text-align:left;
}
.server-maintenance-icon{font-size:16px;line-height:1.3;flex-shrink:0}
.server-maintenance-text{font-size:12px;line-height:1.5;color:var(--muted);font-weight:500}
.server-trigger-adfree.maintenance{
  opacity:.55;cursor:not-allowed;
}
.server-trigger-adfree.maintenance:hover{
  background:inherit;
}

/* ── EPISODE PICKER ── */
.episode-section{margin-top:6px}
.episode-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.season-tab{
  padding:6px 14px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);font-size:11px;font-weight:600;
  cursor:pointer;transition:all .18s;letter-spacing:.2px;touch-action:manipulation;
}
.season-tab:hover{border-color:rgba(var(--accent-rgb),.32);color:var(--text)}
.season-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.episode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:6px}
.ep-btn{
  padding:7px 4px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface2);color:var(--text);font-size:12px;font-weight:500;
  cursor:pointer;text-align:center;transition:all .18s;touch-action:manipulation;
}
.ep-btn:hover{border-color:var(--accent);color:var(--accent)}
.ep-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ── CAST ── */
.cast-section{margin-top:24px}
.cast-label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;margin-bottom:10px}
.cast-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.cast-row::-webkit-scrollbar{display:none}
.cast-item{flex:0 0 72px;text-align:center}
.cast-avatar{
  width:56px;height:56px;border-radius:50%;margin:0 auto 5px;
  overflow:hidden;background:var(--surface3);
  border:2px solid var(--border);display:flex;align-items:center;
  justify-content:center;color:var(--muted);font-size:17px;
}
.cast-avatar img{width:100%;height:100%;object-fit:cover}
.cast-name{font-size:10px;color:var(--text);line-height:1.3}
.cast-character{font-size:9px;color:var(--muted)}

/* ── PAGE GRIDS ── */
.trending-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(130px,22vw,155px),1fr));
  gap:12px;padding:0 clamp(16px,4vw,32px);
}
.page-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 clamp(16px,4vw,32px);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.page-tabs::-webkit-scrollbar{display:none}
.page-tab{
  padding:10px 16px;font-size:12px;font-weight:600;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .18s,border-color .18s;white-space:nowrap;touch-action:manipulation;
}
.page-tab:hover{color:var(--text)}
.page-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.page-tabs-anime .page-tab.active{color:var(--anime-2);border-bottom-color:var(--anime-2)}

/* ── WATCHLIST ── */
.wl-title{
  font-family:'Archivo Black',sans-serif;font-size:23px;letter-spacing:-.4px;
  text-transform:uppercase;
  margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.wl-title::before{content:'';display:block;width:4px;height:26px;background:var(--accent);border-radius:2px}
.wl-empty{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px;grid-column:1/-1}
.wl-empty .wl-icon{font-size:42px;margin-bottom:12px}

/* ── TOAST ── */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--surface2);border:1px solid var(--border);
  padding:11px 20px;border-radius:var(--r-sm);font-size:13px;
  opacity:0;pointer-events:none;transition:all .28s;z-index:9998;
  white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.45);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── SKELETON ── */
.skeleton{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);
  background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:var(--radius);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── SPINNER ── */
.spinner-wrap{display:flex;align-items:center;justify-content:center;padding:32px;width:100%}
.spinner{
  width:28px;height:28px;border:3px solid var(--surface3);
  border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── FOOTER ── */
footer{
  border-top:1px solid var(--border);
  padding:clamp(24px,4vw,40px) clamp(16px,4vw,32px);
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:24px;
}
.footer-logo{font-family:'Archivo Black',sans-serif;font-size:17px;letter-spacing:-.2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.footer-desc{font-size:12px;color:var(--muted);line-height:1.65;max-width:240px}
.footer-links h3{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:10px}
.footer-links ul{list-style:none}
.footer-links ul li{margin-bottom:7px}
.footer-links ul li a{font-size:12px;color:rgba(220,228,240,.75);text-decoration:none;transition:color .18s;cursor:pointer}
.footer-links ul li a:hover{color:var(--accent)}
.footer-bottom{
  border-top:1px solid var(--border);
  padding:16px clamp(16px,4vw,32px);
  font-size:11px;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;
}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .38s var(--ease) both}

/* ── LOAD MORE ── */
.load-more-wrap{text-align:center;padding:28px}
.btn-load-more{
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text);padding:11px 32px;border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;transition:background .18s,border-color .18s;touch-action:manipulation;
}
.btn-load-more:hover{background:var(--surface3);border-color:rgba(var(--accent-rgb),.32)}
.btn-load-more:disabled{opacity:.45;cursor:not-allowed}

/* ── ERROR STATE ── */
.error-msg{color:var(--muted);font-size:12px;padding:16px 0;grid-column:1/-1}

.wc-spinner{width:20px;height:20px;border:2px solid var(--surface3);border-top-color:var(--live);border-radius:50%;animation:spin .7s linear infinite}

/* Tablet */
@media(max-width:900px){
  .nav-links{display:none}
  .hamburger{display:block}
  .btn-nav{display:none}
  .hero-content{max-width:85%}
}

/* ══════════════════════════════════════
   TABLET PLAYER / MODAL  601px–900px
   (sits between the mobile redesign and
   the desktop layout so the source cards
   and player don't look thrown-together)
══════════════════════════════════════ */
@media(min-width:601px) and (max-width:900px){
  .modal{max-width:92vw}
  .modal-hero{height:clamp(220px,32vw,300px)}
  .modal-hero-content{padding:20px 24px;gap:18px}
  .modal-poster{flex:0 0 110px;height:165px}
  .modal-title{font-size:clamp(24px,3.6vw,32px)}
  .modal-overview{-webkit-line-clamp:3;font-size:13px}
  .modal-body{padding:20px 24px 28px}

  /* Make both source cards share the row evenly instead of
     auto-sizing to their own content (that mismatch is what
     made this look unbalanced/slapped-together) */
  .server-bar{gap:14px}
  .server-picker-group{
    flex:1 1 0;min-width:0;
  }
  .server-trigger{width:100%;justify-content:space-between}
  .server-popup{width:100%;min-width:0}
  .server-picker-caption{flex-wrap:wrap;gap:5px 8px}
  .server-picker-caption-sub{margin-left:auto}

  .player-wrap{margin-bottom:18px}
}

/* Mobile ≤600px */
@media(max-width:600px){
  :root{--nav-h:56px}
  .search-input{width:130px}
  .search-input:focus{width:175px}
  #hero{height:clamp(380px,75vh,520px)}
  .hero-content{max-width:100%;padding:0 16px 36px}
  .hero-title{font-size:clamp(28px,9vw,42px)}
  .hero-desc{-webkit-line-clamp:2;font-size:12px}
  .btn-play,.btn-info{padding:10px 18px;font-size:13px}
  .modal-hero{height:auto;min-height:200px}
  .modal-hero-content{flex-direction:row;padding:14px 14px 18px;align-items:flex-end;gap:14px}
  .modal-poster{flex:0 0 90px;height:135px}
  .modal-title{font-size:clamp(20px,6vw,26px);color:#fff}
  .modal-body{padding:12px}
  .modal-overview{-webkit-line-clamp:2}
  footer{gap:20px}
  #toast{width:calc(100vw - 32px);text-align:center;white-space:normal}

  /* ══════════════════════════════════════
     MOBILE PLAYER / MODAL REDESIGN
  ══════════════════════════════════════ */
  #modal-overlay{
    padding:0;align-items:stretch;
  }
  .modal{
    max-width:100%;width:100%;min-height:100%;
    border-radius:0;border:none;
  }
  .modal-close{
    top:max(10px,env(safe-area-inset-top));right:10px;
    width:36px;height:36px;font-size:14px;
    background:rgba(10,12,16,.7);
  }
  .modal-hero{min-height:0;height:auto;}
  .modal-hero-content{
    flex-direction:column;align-items:flex-start;
    gap:10px;padding:52px 16px 16px;
  }
  .modal-poster{display:none}
  .modal-info{width:100%}
  .modal-title{
    font-size:clamp(22px,7vw,28px);margin-bottom:6px;
  }
  .modal-meta{margin-bottom:8px}
  .modal-overview{-webkit-line-clamp:3;font-size:12.5px}
  .modal-actions{width:100%;gap:8px}
  .modal-actions .btn-play,.modal-actions .btn-info{
    flex:1;justify-content:center;text-align:center;
    padding:12px 14px;font-size:13.5px;border-radius:var(--r-sm);
  }
  .modal-body{padding:14px 14px 24px;}

  /* Source bar -> stacked, full-width cards */
  .server-bar{
    flex-direction:column;align-items:stretch;gap:10px;
    padding:0 0 14px;
  }
  .server-label{display:none}
  .server-picker-group{width:100%;gap:9px;padding:12px;}
  .server-picker-caption{flex-wrap:wrap;gap:6px 8px;}
  .server-picker-caption-text{font-size:12.5px}
  .server-picker-caption-sub{
    margin-left:0;width:100%;text-align:left;
    order:3;padding-left:30px;font-size:9px;
  }
  .server-trigger{
    width:100%;justify-content:space-between;
    padding:13px 16px;border-radius:var(--r-md);font-size:13.5px;
  }
  .server-trigger svg{margin-left:0 !important}
  /* Popup becomes a full-width sheet anchored under the trigger, not a floating box */
  .server-popup{
    position:static;width:100%;min-width:0;
    margin-top:6px;max-height:none;
    border-radius:var(--r-md);
    display:none;
    opacity:1;pointer-events:auto;transform:none;
    box-shadow:0 6px 18px rgba(0,0,0,.4);
  }
  .server-popup.open{display:flex;}
  .server-option{padding:13px 14px;font-size:13px;border-radius:var(--r-sm);}

  /* Video player: full-bleed edge-to-edge, no rounded corners, sits right under header */
  .player-wrap{
    margin-left:-14px;margin-right:-14px;
    width:calc(100% + 28px);
    border-radius:0;border-left:none;border-right:none;
    margin-bottom:14px;
    box-shadow:none;
  }
  .player-placeholder{gap:12px;font-size:12.5px}
  .player-placeholder .big-play{
    width:64px;height:64px;border-width:2.5px;
    background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.65);
    color:var(--accent);font-size:24px;
  }
}

/* Very small screens */
@media(max-width:360px){
  .nav-logo{font-size:21px}
  .search-input{width:110px}
  .search-input:focus{width:150px}
  .hero-badge{display:none}
}

/* ══════════════════════════════════════
   TV / LARGE SCREEN  ≥1400px
══════════════════════════════════════ */
@media(min-width:1400px){
  :root{--nav-h:72px}
  body{font-size:17px}
  nav{padding:0 56px;gap:32px}
  .nav-logo{font-size:30px}
  .nav-links li a{font-size:16px}
  .search-input{width:260px}
  .search-input:focus{width:360px}
  .btn-nav{font-size:14px;padding:9px 20px}
  #hero{height:clamp(560px,80vh,960px)}
  .hero-content{padding:0 80px 90px;max-width:720px}
  .hero-title{font-size:clamp(38px,4.2vw,58px)}
  .hero-desc{font-size:16px;-webkit-line-clamp:4}
  .btn-play,.btn-info{padding:16px 32px;font-size:16px;border-radius:var(--r-sm)}
  .section{padding:56px 0 0}
  .section-header{padding:0 56px;margin-bottom:22px}
  .section-title{font-size:28px}
  .carousel-row{gap:18px;padding:6px 56px 24px}
  .card{flex:0 0 200px}
  .card-img-wrap{width:200px;height:300px}
  .card-title{font-size:15px}
  .card-sub{font-size:12px}
  .genre-row{padding:6px 56px 18px;gap:12px}
  .genre-pill{padding:10px 22px;font-size:14px}
  .trending-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;padding:0 56px}
  .page-tab{padding:14px 22px;font-size:15px}
  .modal{max-width:1100px}
  .modal-hero{height:clamp(320px,36vw,520px)}
  .modal-title{font-size:52px}
  .modal-poster{flex:0 0 200px;height:300px}
  .modal-overview{font-size:15px;-webkit-line-clamp:4}
  .btn-play.modal-actions .btn-play,.modal-actions .btn-info{padding:14px 28px;font-size:15px}
  footer{padding:56px}
  .footer-bottom{padding:22px 56px}
}

/* ── 4K / very wide TV ≥1920px ── */
@media(min-width:1920px){
  :root{--nav-h:84px}
  body{font-size:19px}
  nav{padding:0 80px}
  .nav-logo{font-size:34px}
  .carousel-row{gap:22px;padding:8px 80px 28px}
  .card{flex:0 0 230px}
  .card-img-wrap{width:230px;height:345px}
  .section-header{padding:0 80px}
  .genre-row{padding:8px 80px 20px}
  .trending-grid{padding:0 80px;gap:22px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  .modal{max-width:1400px}
  .modal-title{font-size:64px}
  footer,.footer-bottom{padding-left:80px;padding-right:80px}
}

/* ── D-PAD / KEYBOARD FOCUS STYLES ──
   Visible on any device when navigating without a mouse.
   outline-offset keeps the ring outside the element border.
──────────────────────────────────────── */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius);
}
/* Cards get a bigger, more dramatic focus ring */
.card:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:4px;
  transform:scale(1.07) translateY(-5px);
  z-index:2;
}
/* Show the overlay + play button on focus too (TV remote) */
.card:focus-visible .card-overlay{opacity:1}
.card:focus-visible .card-play-btn{transform:scale(1)}
.card:focus-visible .card-img-wrap img{filter:brightness(.58)}
/* Genre pills */
.genre-pill:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
  color:var(--accent);border-color:rgba(var(--accent-rgb),.5);
}
/* Nav links */
.nav-links li a:focus-visible{
  outline:3px solid var(--accent);outline-offset:4px;
  border-radius:4px;color:var(--text);
}
/* Buttons */
.btn-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-info:focus-visible,.btn-nav:focus-visible,.btn-load-more:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
}
/* Season/episode tabs */
.season-tab:focus-visible,.ep-btn:focus-visible,.page-tab:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
}
/* Search */
.search-input:focus-visible{outline:none} /* already has border highlight */
/* Modal close */
.modal-close:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Hero dots */
.hero-dot:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
/* Continue cards */
.continue-card:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
  transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.5);
}
.continue-card:focus-visible .continue-play{opacity:1;transform:translateX(-50%) scale(1)}

/* ══════════════════════════════════════
   TV / LARGE SCREEN (≥1280px, no fine pointer)
   Targets smart TVs, Fire Stick, Apple TV etc.
══════════════════════════════════════ */
@media(min-width:1280px) and (hover:none),(min-width:1280px) and (pointer:coarse){
  /* Scale up base font */
  body{font-size:18px}

  /* Nav — taller, bigger text */
  :root{--nav-h:80px}
  .nav-logo{font-size:32px}
  .nav-links li a{font-size:17px;padding:8px 4px}
  .btn-nav{font-size:16px;padding:10px 22px}

  /* Hide search on TV (no keyboard) */
  .search-wrap{display:none}

  /* Hero — bigger text, more padding */
  .hero-title{font-size:clamp(38px,4.2vw,58px)}
  .hero-desc{font-size:16px;-webkit-line-clamp:4}
  .hero-badge{font-size:13px;padding:5px 18px}
  .btn-play,.btn-info{font-size:18px;padding:16px 36px;border-radius:var(--r-sm)}

  /* Cards — larger for 10-foot view */
  .card{flex:0 0 220px}
  .card-img-wrap{width:220px;height:330px}
  .card-title{font-size:15px}
  .card-sub{font-size:12px}
  .card-rating-badge{font-size:13px;padding:3px 8px}
  .carousel-row{gap:20px;padding:8px 48px 24px}
  .carousel-arrow{width:52px;height:52px;font-size:24px;opacity:1!important}

  /* Section headers */
  .section-title{font-size:30px}
  .section{padding:56px 0 0}

  /* Genre pills */
  .genre-pill{font-size:16px;padding:10px 24px}

  /* Page tabs */
  .page-tab{font-size:17px;padding:14px 28px}

  /* Modal */
  .modal-title{font-size:52px}
  .modal-overview{font-size:15px;-webkit-line-clamp:4}
  .modal-meta-badge{font-size:14px;padding:4px 14px}
  .modal-poster{flex:0 0 200px;height:300px}

  /* Load more */
  .btn-load-more{font-size:17px;padding:16px 48px}
}

/* ── Focus ring for D-pad / remote navigation ── */
.card:focus,
.card:focus-visible,
.continue-card:focus,
.continue-card:focus-visible,
.genre-pill:focus,
.genre-pill:focus-visible,
.btn-play:focus,
.btn-play:focus-visible,
.btn-info:focus,
.btn-info:focus-visible,
.page-tab:focus,
.page-tab:focus-visible,
.nav-links li a:focus,
.nav-links li a:focus-visible,
.btn-nav:focus,
.btn-nav:focus-visible,
.btn-load-more:focus,
.btn-load-more:focus-visible,
.season-tab:focus,
.season-tab:focus-visible,
.ep-btn:focus,
.ep-btn:focus-visible,
.modal-close:focus,
.modal-close:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(var(--accent-rgb),.25);
}

/* On TV, show card overlay and scale when focused (not just hovered) */
.card:focus .card-overlay,
.card:focus-visible .card-overlay{opacity:1}
.card:focus .card-play-btn,
.card:focus-visible .card-play-btn{transform:scale(1)}
.card:focus .card-img-wrap img,
.card:focus-visible .card-img-wrap img{filter:brightness(.58)}
.card:focus,
.card:focus-visible{transform:scale(1.05) translateY(-4px);z-index:2}

.continue-card:focus,
.continue-card:focus-visible{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.32)}
@keyframes ff-fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes ff-slideUp { from { opacity: 0; transform: translateY(24px) scale(0.96) } to { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes ff-pulse   { 0%, 100% { opacity:1;transform:scale(1) } 60% { opacity:.4;transform:scale(1.35) } }
@keyframes ff-spin    { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

#ff-dt-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(4, 6, 12, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  justify-content: center;
  align-items: center;
  animation: ff-fadeIn 0.2s ease;
}
#ff-dt-overlay.ff-show { display: flex; }

#ff-dt-modal {
  position: relative;
  width: min(400px, 92vw);
  background: #0d1020;
  border: 1px solid rgba(229,9,20,0.25);
  border-radius: 20px;
  padding: 40px 36px 36px;
  text-align: center;
  color: #f0f2f8;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 32px 64px -16px rgba(0,0,0,0.85),
    0 0 80px -20px rgba(229,9,20,0.2);
  overflow: hidden;
  animation: ff-slideUp 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* top red accent line */
#ff-dt-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-hover) 50%, var(--accent) 70%, transparent);
}

#ff-dt-glow {
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 300px; height: 200px;
  background: radial-gradient(ellipse, rgba(229,9,20,0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* spinning ring behind the icon */
#ff-dt-icon-wrap {
  position: relative;
  width: 76px; height: 76px;
  margin: 0 auto 22px;
}
#ff-dt-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: rgba(229,9,20,0.3);
  animation: ff-spin 2.4s linear infinite;
}
#ff-dt-icon {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, rgba(229,9,20,0.22), rgba(229,9,20,0.06));
  color: var(--accent-hover);
  animation: ff-pulse 2.4s ease-in-out infinite;
}

#ff-dt-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(229,9,20,0.12);
  border: 1px solid rgba(229,9,20,0.3);
  color: var(--accent-hover);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#ff-dt-modal h2 {
  margin: 0 0 12px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

#ff-dt-modal p {
  color: #7a8099;
  line-height: 1.65;
  font-size: 0.9rem;
  margin: 0 0 28px;
  padding: 0 4px;
}

#ff-dt-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff;
  border: none;
  padding: 13px 32px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 24px -4px rgba(229,9,20,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#ff-dt-close:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -4px rgba(229,9,20,0.65), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
#ff-dt-close:active {
  transform: scale(0.97) translateY(0);
  filter: brightness(0.95);
}

#ff-dt-hint {
  margin-top: 16px;
  font-size: 0.75rem;
  color: rgba(120,130,160,0.6);
}

/* ═══════════════════════════════════════
   LIVE TV
   ═══════════════════════════════════════ */
.ltv-hero{
  background:linear-gradient(135deg,#0a0d1a 0%,#0f1524 50%,#0a0f1e 100%);
  padding:calc(var(--nav-h) + 36px) clamp(16px,5vw,60px) 36px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ltv-hero-inner{max-width:900px;}
.ltv-hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);
  border-radius:var(--r-pill);padding:4px 13px;
  font-size:11px;font-weight:700;color:var(--live);
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:12px;
}
.ltv-hero-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:8px;letter-spacing:-.02em;}
.ltv-hero-sub{color:rgba(255,255,255,.55);font-size:.95rem;margin-bottom:20px;}
.ltv-search-wrap{max-width:420px;}
.ltv-search{
  width:100%;padding:10px 16px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);color:#fff;font-size:.95rem;outline:none;
  transition:border-color .2s;
}
.ltv-search:focus{border-color:rgba(var(--accent-rgb),.5);}
.ltv-search::placeholder{color:rgba(255,255,255,.3);}

.ltv-body{padding:24px clamp(16px,4vw,48px) 60px;}

/* Category pills */
.ltv-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.ltv-cat{
  padding:6px 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);
  font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.ltv-cat:hover{border-color:rgba(var(--accent-rgb),.4);color:#fff;}
.ltv-cat.active{background:rgba(var(--accent-rgb),.15);border-color:rgba(var(--accent-rgb),.6);color:var(--accent);}

/* Channel grid */
.ltv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}
.ltv-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);overflow:hidden;cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.ltv-card:hover{
  transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.4);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.ltv-card-img{
  position:relative;aspect-ratio:16/9;
  background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ltv-card-img img{width:80%;height:80%;object-fit:contain;padding:8px;}
.ltv-live-dot{
  position:absolute;top:7px;right:7px;
  display:flex;align-items:center;gap:4px;
  background:rgba(0,0,0,.7);border-radius:4px;
  padding:2px 6px;font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--accent);
}
.ltv-live-dot span{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse-dot 1.5s ease-in-out infinite;flex-shrink:0;
}
.ltv-card-info{padding:10px 10px 12px;}
.ltv-card-name{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ltv-card-cat{font-size:.7rem;color:rgba(255,255,255,.4);margin-top:3px;}
.ltv-loading{padding:60px 0;text-align:center;color:rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;gap:10px;}

.ltv-loadmore-wrap{display:flex;justify-content:center;margin-top:28px;}
.ltv-loadmore-btn{
  padding:11px 26px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#fff;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif;
}
.ltv-loadmore-btn:hover{background:rgba(var(--accent-rgb),.15);border-color:rgba(var(--accent-rgb),.5);}

/* Full-page player overlay */
.ltv-player-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.92);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.ltv-player-box{
  width:100%;max-width:1100px;
  background:#0d1117;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 32px 80px rgba(0,0,0,.8);
}
.ltv-player-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:600;font-size:.95rem;
}
.ltv-close{
  background:rgba(255,255,255,.08);border:none;color:#fff;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.ltv-close:hover{background:rgba(var(--accent-rgb),.3);}
.ltv-player-wrap{position:relative;padding-bottom:56.25%;height:0;}
.ltv-player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.ltv-ad-wrap{padding:10px 0 4px;background:#0d1117;display:flex;flex-direction:column;align-items:center;border-top:1px solid rgba(255,255,255,.06);}

@media(max-width:600px){
  .ltv-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
}
.ltv-ext{font-size:.7rem;color:rgba(255,255,255,.3);margin-left:2px;}