/* Flixy v1.4.0: mobile-first cinematic layouts and brighter artwork. */
#hero .hero-backdrop-fill{filter:brightness(1.16) saturate(1.08) contrast(1.02)}
#hero .hero-soft-fade{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.015) 45%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.34) 100%)!important}
#hero .hero-side-fade{background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.025) 38%,rgba(0,0,0,0) 72%,rgba(0,0,0,.025))!important}
.hero-shell .hero-img{filter:brightness(1.1) saturate(1.06)}
.hero-shell .hero-fade{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.015) 40%,rgba(0,0,0,.16) 68%,rgba(0,0,0,.5) 100%),linear-gradient(90deg,rgba(0,0,0,.12),transparent 52%)!important}

@media(max-width:767px){
  body.immersive-header #hero{min-height:78svh!important;height:auto!important;padding:0 1rem 1.2rem!important;align-items:flex-end!important;background:#07080b!important}
  body.immersive-header #hero .hero-backdrop-fill{top:0!important;left:0!important;width:100%!important;height:61svh!important;background-size:cover!important;background-position:center 12%!important;filter:brightness(1.2) saturate(1.1)!important}
  body.immersive-header #hero .hero-soft-fade{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 48%,rgba(7,8,11,.36) 68%,#07080b 91%)!important}
  body.immersive-header #hero .hero-side-fade{display:none!important}
  body.immersive-header #heroContent{display:block!important;width:100%!important;max-width:none!important;padding:52svh 0 2.4rem!important;align-self:stretch!important}
  body.immersive-header #heroContent>div{width:100%!important;max-width:none!important;margin:0!important;padding:0 .15rem!important}
  body.immersive-header #heroContent h1{max-width:100%!important;font-size:clamp(2rem,10vw,3rem)!important;line-height:.98!important;letter-spacing:-.045em!important;text-wrap:balance}
  body.immersive-header #heroContent p{max-width:100%!important;font-size:.78rem!important;line-height:1.55!important;color:rgba(255,255,255,.82)!important;-webkit-line-clamp:4!important;line-clamp:4!important}
  body.immersive-header #heroContent .chip{background:rgba(14,15,20,.68)!important;border-color:rgba(255,255,255,.16)!important;backdrop-filter:blur(12px)}
  body.immersive-header #heroContent a,body.immersive-header #heroContent button{min-height:42px!important}
  body.immersive-header #heroDots{bottom:.95rem!important;gap:.35rem!important}
  body.immersive-header main{padding-left:1rem!important;padding-right:1rem!important;padding-top:1.5rem!important}
  body.immersive-header #rows{gap:2rem!important}

  .hero-shell{height:auto!important;min-height:82svh!important;overflow:visible!important;background:#07080b!important;display:flex!important;align-items:flex-end!important}
  .hero-shell .hero-img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:58svh!important;object-fit:cover!important;object-position:center 12%!important;filter:brightness(1.18) saturate(1.08)!important}
  .hero-shell .hero-fade{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.015) 44%,rgba(7,8,11,.42) 67%,#07080b 91%)!important}
  #heroContent.relative.z-10{min-height:82svh!important;padding:49svh 1rem 1.2rem!important;align-items:flex-end!important}
  #heroContent.relative.z-10>div{width:100%!important;max-width:none!important}
  #heroContent.relative.z-10 h1{font-size:clamp(2.15rem,11vw,3.3rem)!important;line-height:.96!important;letter-spacing:-.055em!important;text-wrap:balance}
  #heroContent.relative.z-10 p{max-width:100%!important;font-size:.82rem!important;line-height:1.55!important;color:rgba(255,255,255,.82)!important;-webkit-line-clamp:5!important;line-clamp:5!important}
  #heroContent.relative.z-10>div>div:last-child{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;gap:.55rem!important;width:100%!important}
  #heroContent.relative.z-10 #playLink{grid-column:1/3!important;justify-content:center!important;min-height:48px!important;font-size:.82rem!important}
  #heroContent.relative.z-10 #watchedBtn,#heroContent.relative.z-10 #watchlistBtn{justify-content:center!important;min-height:44px!important;padding:.7rem .55rem!important}
  #heroContent.relative.z-10 #favoriteBtn{width:44px!important;height:44px!important}
  #heroContent.relative.z-10 #notifyBtn,#heroContent.relative.z-10 #dislikeBtn{min-height:42px!important;justify-content:center!important}
  #infoBtn{right:1rem!important;bottom:1rem!important;width:42px!important;height:42px!important}
  #metadataCard{position:fixed!important;left:.75rem!important;right:.75rem!important;bottom:calc(.75rem + env(safe-area-inset-bottom))!important;top:auto!important;width:auto!important;max-height:66svh!important;border-radius:18px!important;z-index:10050!important}

  main.relative.min-h-screen>.relative.z-10{display:flex!important;flex-direction:column!important}
  #episodesSection{order:1!important}
  #similarSection{order:2!important}
  #recommendationsSection{order:3!important}
  main.relative.min-h-screen section:has(#cast){order:4!important}
  #reviewsSection{order:5!important}
  #smartToolsSection{order:6!important}
  main.relative.min-h-screen section{padding-left:1rem!important;padding-right:1rem!important;padding-top:1rem!important;padding-bottom:1rem!important}
  .watch-section-shell,.watch-lower-section{border-radius:16px!important;padding:.9rem!important;background:rgba(255,255,255,.035)!important;box-shadow:none!important;backdrop-filter:none!important}
  .watch-flat-section h2,.watch-lower-section h2{font-size:1.05rem!important;margin-bottom:.75rem!important}
  .watch-match-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row!important;grid-template-rows:none!important;grid-auto-columns:auto!important;gap:.65rem!important;overflow:visible!important;padding:0!important;scroll-snap-type:none!important}
  .watch-match-grid .watch-poster-card,.watch-match-grid .match-card{width:auto!important;min-width:0!important}
  .watch-match-grid .aspect-\[2\/3\]{border-radius:9px!important;margin-bottom:.38rem!important}
  .watch-match-grid .text-xs{font-size:.66rem!important}
  .watch-match-grid .text-\[10px\]{font-size:.56rem!important}
  .match-badge{top:.35rem!important;right:.35rem!important;font-size:.5rem!important;padding:.15rem .32rem!important}
  .cast-row{gap:.7rem!important;padding:.3rem 0 .6rem!important}.cast-card{width:72px!important}.cast-img{width:72px!important;height:72px!important}
  .cast-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.7rem!important}.cast-grid .cast-avatar{width:68px!important;height:68px!important}
  .review-card{padding:.9rem!important;border-radius:14px!important;box-shadow:none!important}
  #episodes{display:grid!important;gap:.65rem!important}.episode-link{border-radius:12px!important;box-shadow:none!important;backdrop-filter:none!important}
  #seasonTabs{gap:.45rem!important}.genre-chip{font-size:.58rem!important;padding:.25rem .45rem!important}
  .anime-watch-main{padding:1rem!important}.anime-watch-hero{min-height:auto!important;padding-top:1rem!important}.anime-watch-title{font-size:clamp(2.4rem,13vw,4rem)!important}.anime-watch-overview{font-size:.78rem!important}.anime-episode-strip{grid-auto-columns:74%!important}.anime-card-strip{grid-auto-columns:32%!important}
}

@media(max-width:390px){
  .watch-match-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.5rem!important}
  #heroContent.relative.z-10>div>div:last-child{grid-template-columns:1fr 1fr!important}
  #heroContent.relative.z-10 #favoriteBtn{width:100%!important}
}

/* Mobile title pages are rebuilt as a vertical cinema sheet rather than a squeezed desktop page. */
.watch-mobile-overview,.watch-mobile-nav{display:none}

@media(max-width:767px){
  body{background:#090a0e!important}
  body.immersive-header #hero .hero-backdrop-fill{filter:brightness(1.27) saturate(1.12) contrast(.98)!important}
  body.immersive-header #hero .hero-soft-fade{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 48%,rgba(9,10,14,.22) 67%,#090a0e 92%)!important}
  body.immersive-header #heroContent h1,#heroContent.relative.z-10 h1{text-shadow:0 3px 14px rgba(0,0,0,.44)!important;filter:none!important}
  body.immersive-header #heroContent p,#heroContent.relative.z-10 p{text-shadow:0 2px 8px rgba(0,0,0,.44)!important}
  .hero-shell .hero-img{filter:brightness(1.25) saturate(1.1) contrast(.98)!important}
  .hero-shell .hero-fade{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(9,10,14,.28) 68%,#090a0e 92%)!important}
  main.relative.min-h-screen{background:#090a0e!important}

  .watch-mobile-overview{display:block!important;order:1!important;padding:.9rem 1rem .35rem!important}
  .watch-mobile-overview-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:.9rem;align-items:center;padding:.75rem;background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.1);border-radius:15px}
  .watch-mobile-poster{width:76px;aspect-ratio:2/3;object-fit:cover;border-radius:9px;box-shadow:0 12px 28px rgba(0,0,0,.24)}
  .watch-mobile-overview-copy{min-width:0}
  .watch-mobile-eyebrow{display:block;font-size:.55rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.46);margin-bottom:.28rem}
  .watch-mobile-overview-copy h2{font-size:1rem;line-height:1.12;font-weight:850;letter-spacing:-.025em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .watch-mobile-facts{display:flex;flex-wrap:wrap;gap:.3rem .6rem;margin-top:.48rem;color:rgba(255,255,255,.72);font-size:.64rem;font-weight:650}
  .watch-mobile-facts span{display:inline-flex;align-items:center;gap:.2rem}
  .watch-mobile-facts svg{width:.7rem;height:.7rem;color:#facc15;fill:currentColor}
  .watch-mobile-genres{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.48rem}
  .watch-mobile-genres span{padding:.22rem .42rem;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:.54rem;font-weight:750;color:rgba(255,255,255,.76)}

  .watch-mobile-nav{display:block!important;order:2!important;position:sticky;top:0;z-index:45;padding:.45rem 0 .55rem;background:linear-gradient(180deg,rgba(9,10,14,.97),rgba(9,10,14,.9) 78%,transparent);backdrop-filter:blur(18px)}
  .watch-mobile-nav-track{display:flex;gap:.45rem;overflow-x:auto;padding:0 1rem .25rem;scrollbar-width:none;scroll-snap-type:x proximity}
  .watch-mobile-nav-track::-webkit-scrollbar{display:none}
  .watch-mobile-nav button{flex:0 0 auto;display:inline-flex;align-items:center;gap:.34rem;min-height:34px;padding:.48rem .68rem;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.79);font-size:.61rem;font-weight:800;scroll-snap-align:start}
  .watch-mobile-nav button:active{transform:scale(.97);background:rgba(255,255,255,.13)}
  .watch-mobile-nav button[hidden]{display:none!important}
  .watch-mobile-nav svg{width:.78rem;height:.78rem}

  main.relative.min-h-screen>.relative.z-10{display:flex!important;flex-direction:column!important}
  #episodesSection{order:3!important}
  #similarSection{order:4!important}
  #recommendationsSection{order:5!important}
  #castSection{order:6!important}
  #reviewsSection{order:7!important}
  #smartToolsSection{order:8!important}
  #episodesSection,#similarSection,#recommendationsSection,#castSection,#reviewsSection,#smartToolsSection{scroll-margin-top:58px}

  /* Recommendation shelves use a compact storefront grid with enough results visible immediately. */
  #similarSection,#recommendationsSection{padding-top:.7rem!important;padding-bottom:1.15rem!important}
  #similarSection .watch-flat-section,#recommendationsSection .watch-flat-section{padding:0!important}
  #similarSection h2,#recommendationsSection h2{font-size:1.08rem!important;letter-spacing:-.025em;margin-bottom:.7rem!important}
  #similarSection .watch-match-grid,#recommendationsSection .watch-match-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  /* Hero action hierarchy: play first, two primary library controls, then compact utilities. */
  #heroContent.relative.z-10>div>div:last-child{align-items:stretch!important}
  #heroContent.relative.z-10 #notifyBtn,#heroContent.relative.z-10 #dislikeBtn,#heroContent.relative.z-10 #trailerBtn2{font-size:.64rem!important;padding:.65rem .55rem!important}
  #heroContent.relative.z-10 #notifyBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Final mobile title-page pass: reset desktop shelf mechanics and compact the information flow. */
@media(max-width:767px){
  main.relative.min-h-screen>.relative.z-10>section{padding-left:1rem!important;padding-right:1rem!important}
  #episodesSection{padding-top:.45rem!important;padding-bottom:1rem!important}
  #episodesSection .watch-section-shell{padding:.8rem!important;border-radius:14px!important;background:#101117!important;border-color:rgba(255,255,255,.08)!important;box-shadow:none!important;backdrop-filter:none!important}
  #seasonTabs{gap:.42rem!important;margin:0 -.1rem .15rem!important;padding:.05rem .1rem .2rem!important;scroll-snap-type:x proximity}
  #seasonTabs button,#seasonDropdownBtn{flex:0 0 auto!important;min-height:36px!important;padding:.55rem .72rem!important;border-radius:999px!important;font-size:.64rem!important;scroll-snap-align:start}
  #episodes{display:grid!important;gap:.55rem!important}
  #episodes .episode-link{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;gap:.72rem!important;align-items:center!important;min-height:78px!important;padding:.55rem .55rem .68rem!important;border-radius:12px!important;background:#17191f!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important;backdrop-filter:none!important}
  #episodes .episode-link::before{display:none!important}
  #episodes .episode-link>div:first-of-type{width:112px!important;min-width:112px!important;border-radius:8px!important}
  #episodes .episode-link>div:nth-of-type(2){padding:0!important;min-width:0!important}
  #episodes .episode-link .text-sm{font-size:.68rem!important;line-height:1.25!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  #episodes .episode-link .text-xs{font-size:.56rem!important;line-height:1.35!important}
  #episodes .episode-link p,#episodes .episode-link div.text-xs.text-white\/60{margin-top:.28rem!important;-webkit-line-clamp:2!important}
  #episodes .episode-complete-badge{top:.38rem!important;right:.38rem!important;width:1.18rem!important;height:1.18rem!important}
  #episodes .episode-progress-track{height:2px!important}

  #castSection{padding-top:.65rem!important;padding-bottom:1rem!important}
  #castSection .watch-lower-section{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
  #castSection h2,#reviewsSection h2{font-size:1.08rem!important;margin-bottom:.65rem!important}
  #cast.cast-row{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:76px!important;gap:.65rem!important;overflow-x:auto!important;padding:.1rem .05rem .55rem!important;scroll-snap-type:x proximity}
  #cast.cast-row>a{width:76px!important;scroll-snap-align:start}
  #cast.cast-row img,#cast.cast-row>a>div:first-child{width:68px!important;height:68px!important}
  #cast.cast-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.75rem .5rem!important;padding:.2rem 0 .5rem!important}
  #cast.cast-grid>a{min-width:0!important}

  #reviewsSection{padding-top:.65rem!important;padding-bottom:1rem!important}
  #reviews{grid-template-columns:1fr!important;gap:.6rem!important}
  #reviews .review-card{padding:.8rem!important;border-radius:12px!important;background:#14161c!important;box-shadow:none!important;backdrop-filter:none!important}

  #smartToolsSection{padding-top:.2rem!important;padding-bottom:.7rem!important}
  #smartToolsSection .watch-smart-tools{border:1px solid rgba(255,255,255,.08)!important;border-radius:12px!important;background:#12141a!important;padding:.75rem!important}

  #similarSection .watch-match-grid,#recommendationsSection .watch-match-grid{
    display:grid!important;
    grid-auto-flow:row!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-columns:auto!important;
    gap:.75rem .55rem!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  #similarSection .watch-poster-card,#recommendationsSection .watch-poster-card{width:auto!important;min-width:0!important;transform:none!important}
  #similarSection .watch-poster-card>div:first-child,#recommendationsSection .watch-poster-card>div:first-child{border-radius:9px!important;margin-bottom:.38rem!important}
  #similarSection .watch-poster-card .text-sm,#recommendationsSection .watch-poster-card .text-sm{font-size:.63rem!important;line-height:1.22!important}
  #similarSection .watch-poster-card .text-xs,#recommendationsSection .watch-poster-card .text-xs{font-size:.54rem!important}
  #similarSection .match-badge,#recommendationsSection .match-badge{top:.34rem!important;right:.34rem!important;font-size:.48rem!important;padding:.14rem .32rem!important}
}

@media(max-width:380px){
  #episodes .episode-link{grid-template-columns:100px minmax(0,1fr)!important}
  #episodes .episode-link>div:first-of-type{width:100px!important;min-width:100px!important}
  #similarSection .watch-match-grid,#recommendationsSection .watch-match-grid{gap:.65rem .45rem!important}
}


/* Flixy v170 mobile hero and navigation cleanup */
@media (max-width: 767px) {
  /* Remove the fixed customization veil that could look like a dark sheet while scrolling. */
  html[data-page-bg] body::after,
  body::after { display: none !important; opacity: 0 !important; }
  body { background: #090a0e !important; }

  /* The mobile header is intentionally only two clean white glyphs. */
  .app-header .mobile-menu-button,
  .app-header #mobileSearchBtn,
  html[data-glass="none"] .app-header .mobile-menu-button,
  html[data-glass="none"] .app-header #mobileSearchBtn {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    border: 0 !important;
    border-radius: .35rem !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #fff !important;
  }
  .app-header .mobile-menu-button:hover,
  .app-header #mobileSearchBtn:hover,
  .app-header .mobile-menu-button:active,
  .app-header #mobileSearchBtn:active { background: rgba(255,255,255,.08) !important; }
  .app-header .mobile-menu-button svg,
  .app-header #mobileSearchBtn svg { width: 1.18rem !important; height: 1.18rem !important; stroke-width: 2.35 !important; }
  .flixy-header-wrap { top: max(.5rem, env(safe-area-inset-top)) !important; padding-inline: .65rem !important; }

  /* Home, Movies, and Series heroes show substantially more of the artwork. */
  body.immersive-header #hero {
    min-height: 72svh !important;
    height: auto !important;
    padding: 0 1rem 1.25rem !important;
    background: #090a0e !important;
  }
  body.immersive-header #hero .hero-backdrop-fill {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 46svh !important;
    background-size: 112% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    filter: brightness(1.08) saturate(1.04) contrast(.98) !important;
  }
  body.immersive-header #hero .hero-soft-fade {
    background: linear-gradient(180deg, transparent 0%, transparent 61%, rgba(9,10,14,.12) 72%, #090a0e 98%) !important;
  }
  body.immersive-header #hero .hero-side-fade { display: none !important; }
  body.immersive-header #heroContent {
    padding: 37svh 0 2.2rem !important;
    min-height: 70svh !important;
  }
  body.immersive-header #heroContent > div { max-width: 100% !important; }

  /* Title-page heroes use contain instead of an aggressive full-height crop. */
  .hero-shell {
    min-height: 76svh !important;
    height: auto !important;
    background: #090a0e !important;
  }
  .hero-shell .hero-img {
    top: 0 !important;
    width: 100% !important;
    height: 45svh !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #090a0e !important;
    filter: brightness(1.08) saturate(1.04) contrast(.98) !important;
  }
  .hero-shell .hero-fade {
    background: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(9,10,14,.14) 72%, #090a0e 98%) !important;
  }
  #heroContent.relative.z-10 {
    min-height: 76svh !important;
    padding: 38svh 1rem 1.25rem !important;
  }
}

@media (max-width: 390px) {
  body.immersive-header #hero .hero-backdrop-fill { background-size: 118% auto !important; }
  .hero-shell .hero-img { height: 42svh !important; }
  #heroContent.relative.z-10 { padding-top: 35svh !important; }
}


/* Flixy v170 mobile title page: full artwork, compact controls, no duplicate overview card. */
@media (max-width: 767px) {
  .watch-mobile-overview { display: none !important; }

  .hero-shell {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: min(56.25vw, 33svh) !important;
    overflow: visible !important;
  }
  .hero-shell .hero-img {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: min(56.25vw, 33svh) !important;
    object-fit: contain !important;
    object-position: center top !important;
    background: #090a0e !important;
    filter: brightness(1.08) saturate(1.03) contrast(.98) !important;
  }
  .hero-shell .hero-fade {
    inset: 0 0 auto 0 !important;
    height: min(56.25vw, 33svh) !important;
    background: linear-gradient(180deg, transparent 0%, transparent 68%, rgba(9,10,14,.38) 86%, #090a0e 100%) !important;
  }
  #heroContent.relative.z-10 {
    display: block !important;
    min-height: 0 !important;
    padding: .55rem 1rem 1rem !important;
    align-items: initial !important;
  }
  #heroContent.relative.z-10 > div {
    width: 100% !important;
    max-width: none !important;
    gap: .45rem !important;
  }
  #heroContent.relative.z-10 h1 {
    font-size: clamp(1.85rem, 8.8vw, 2.55rem) !important;
    line-height: .98 !important;
  }
  #heroContent.relative.z-10 p {
    font-size: .76rem !important;
    line-height: 1.48 !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }
  #heroContent.relative.z-10 > div > div:nth-of-type(2) {
    width: 100% !important;
    min-width: 0 !important;
    column-gap: .42rem !important;
    row-gap: .28rem !important;
  }
  #heroContent.relative.z-10 > div > div:nth-of-type(2) > span { min-width: 0 !important; }
  #heroContent.relative.z-10 .roi-score-pill {
    min-width: 54px !important;
    padding: .2rem .42rem .23rem !important;
    gap: .22rem !important;
    flex: 0 0 auto !important;
  }
  #heroContent.relative.z-10 .roi-score-pill small { font-size: 7px !important; }
  #heroContent.relative.z-10 .roi-score-pill b { font-size: 10px !important; }
  #heroContent.relative.z-10 .roi-tooltip {
    position: fixed !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
  }
  #heroContent.relative.z-10 > div > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: .42rem !important;
    padding-top: .2rem !important;
  }
  #heroContent.relative.z-10 #playLink {
    grid-column: 1 / -1 !important;
    min-height: 40px !important;
    padding: .58rem .8rem !important;
    font-size: .76rem !important;
  }
  #heroContent.relative.z-10 #watchedBtn {
    grid-column: 1 / 3 !important;
  }
  #heroContent.relative.z-10 #watchlistBtn {
    grid-column: 3 / 5 !important;
  }
  #heroContent.relative.z-10 #watchedBtn,
  #heroContent.relative.z-10 #watchlistBtn,
  #heroContent.relative.z-10 #notifyBtn,
  #heroContent.relative.z-10 #dislikeBtn,
  #heroContent.relative.z-10 #trailerBtn2 {
    min-height: 36px !important;
    padding: .5rem .42rem !important;
    font-size: .62rem !important;
  }
  #heroContent.relative.z-10 #favoriteBtn {
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  #heroContent.relative.z-10 #notifyBtn { grid-column: span 2 !important; }
  #heroContent.relative.z-10 #trailerBtn2 { grid-column: span 2 !important; }
  #infoBtn {
    width: 34px !important;
    height: 34px !important;
    right: .75rem !important;
    bottom: .75rem !important;
  }
  #watchBackBtn {
    top: max(.42rem, env(safe-area-inset-top)) !important;
    left: .35rem !important;
    padding: .5rem !important;
  }
  #watchBackBtn svg { width: 1.25rem !important; height: 1.25rem !important; }
  .watch-mobile-nav { order: 1 !important; }
  #episodesSection { order: 2 !important; }
  #similarSection { order: 3 !important; }
  #recommendationsSection { order: 4 !important; }
  #castSection { order: 5 !important; }
  #reviewsSection { order: 6 !important; }
  #smartToolsSection { order: 7 !important; }
}


/* Flixy v171 — mobile PWA cinema system. This final block intentionally
   overrides earlier experiments so mobile framing stays stable and predictable. */
@media (max-width: 767px) {
  :root { --flixy-poster-scale: 1 !important; }
  html { scroll-behavior: auto !important; background:#08090c !important; }
  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    background:#08090c !important;
    overscroll-behavior-y: none;
  }
  body::before,
  body::after,
  html[data-page-bg] body::before,
  html[data-page-bg] body::after {
    display:none !important;
    content:none !important;
    opacity:0 !important;
  }

  /* No camera-like lurches, hover zooms, or entrance scaling on touch screens. */
  main,
  .glass-panel,
  .glass-strong,
  .settings-section,
  .episode-card,
  .watch-poster-card,
  .library-card,
  .card-hover,
  .media-card,
  .movie-tile,
  .fyp-card,
  .catalog-feed-card,
  .cast-card-wrap,
  .cast-card-wrap.cast-fly-in,
  .cast-card-wrap.cast-settled,
  .cast-avatar {
    animation:none !important;
    transform:none !important;
    transition-property:opacity,background-color,border-color,color,box-shadow !important;
  }
  .card-hover:hover,
  .card-hover:active,
  .media-card:hover,
  .movie-tile:hover,
  .fyp-card:hover,
  .catalog-feed-card:hover,
  .catalog-feed-card:hover img,
  .watch-poster-card:hover,
  .watch-poster-card:active {
    transform:none !important;
  }
  .content-grid .media-card img,
  .movie-tile img,
  .watch-poster-card img,
  .catalog-feed-card img { transform:none !important; }
  button:active,
  a:active,
  .genre-chip:active,
  .episode-watch-toggle:active,
  .watch-mobile-nav button:active { transform:none !important; }
  input,
  textarea,
  select { font-size:16px !important; }
  button,
  a,
  [role="button"] { touch-action:manipulation; }

  /* Compact, icon-only app controls with no dark circular shells. */
  .app-header,
  .app-header.is-scrolled {
    transform:none !important;
    background:linear-gradient(180deg,rgba(0,0,0,.5),transparent) !important;
    border-color:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .flixy-header-wrap {
    top:max(.35rem,env(safe-area-inset-top)) !important;
    padding-inline:.55rem !important;
  }
  .app-header .mobile-menu-button,
  .app-header #mobileSearchBtn {
    width:1.8rem !important;
    height:1.8rem !important;
    min-width:1.8rem !important;
    padding:.25rem !important;
    border:0 !important;
    border-radius:.25rem !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .app-header .mobile-menu-button svg,
  .app-header #mobileSearchBtn svg {
    width:1.05rem !important;
    height:1.05rem !important;
    stroke-width:2.4 !important;
  }

  /* Home / Movies / Series: show the actual 16:9 art instead of cropping into it. */
  body.immersive-header #hero {
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    padding:min(56.25vw,32svh) 1rem 1.1rem !important;
    background:#08090c !important;
    overflow:visible !important;
  }
  body.immersive-header #hero .hero-backdrop-fill {
    position:absolute !important;
    inset:0 0 auto 0 !important;
    width:100% !important;
    height:min(56.25vw,32svh) !important;
    background-size:contain !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    filter:brightness(1.04) saturate(1.02) contrast(.99) !important;
    transform:none !important;
    transition:opacity .35s ease !important;
  }
  body.immersive-header #hero .hero-soft-fade {
    height:min(56.25vw,32svh) !important;
    background:linear-gradient(180deg,transparent 0%,transparent 64%,rgba(8,9,12,.28) 82%,#08090c 100%) !important;
  }
  body.immersive-header #hero .hero-side-fade { display:none !important; }
  body.immersive-header #heroContent {
    display:block !important;
    min-height:0 !important;
    padding:.5rem 0 1.35rem !important;
  }
  body.immersive-header #heroContent>div {
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    gap:.45rem !important;
  }
  body.immersive-header #heroContent h1 {
    max-width:100% !important;
    font-size:clamp(1.72rem,8.4vw,2.42rem) !important;
    line-height:.98 !important;
    letter-spacing:-.045em !important;
  }
  body.immersive-header #heroContent p {
    max-width:42rem !important;
    font-size:.75rem !important;
    line-height:1.48 !important;
    -webkit-line-clamp:3 !important;
    line-clamp:3 !important;
  }
  body.immersive-header #heroContent .chip {
    background:transparent !important;
    border-color:rgba(255,255,255,.14) !important;
    backdrop-filter:none !important;
  }
  body.immersive-header #heroContent a,
  body.immersive-header #heroContent button {
    min-height:38px !important;
    padding:.5rem .72rem !important;
  }
  body.immersive-header #heroDots {
    bottom:.45rem !important;
    gap:.28rem !important;
  }
  body.immersive-header #heroDots .hero-dot {
    height:3px !important;
    width:14px !important;
  }
  body.immersive-header #heroDots .hero-dot.w-8 { width:22px !important; }

  /* Detail pages become one stable vertical cinema sheet. */
  .hero-shell {
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    padding-top:min(56.25vw,32svh) !important;
    overflow:visible !important;
    background:#08090c !important;
  }
  .hero-shell .hero-img {
    position:absolute !important;
    inset:0 0 auto 0 !important;
    width:100% !important;
    height:min(56.25vw,32svh) !important;
    object-fit:contain !important;
    object-position:center top !important;
    background:#08090c !important;
    filter:brightness(1.04) saturate(1.02) contrast(.99) !important;
    transform:none !important;
    animation:none !important;
  }
  .hero-shell .hero-fade {
    inset:0 0 auto 0 !important;
    width:100% !important;
    height:min(56.25vw,32svh) !important;
    background:linear-gradient(180deg,transparent 0%,transparent 64%,rgba(8,9,12,.32) 84%,#08090c 100%) !important;
  }
  #heroContent.relative.z-10 {
    display:block !important;
    min-height:0 !important;
    padding:.45rem 1rem .9rem !important;
  }
  #heroContent.relative.z-10 h1 {
    font-size:clamp(1.78rem,8.6vw,2.48rem) !important;
    line-height:.98 !important;
    letter-spacing:-.045em !important;
  }
  #heroContent.relative.z-10 p {
    font-size:.75rem !important;
    line-height:1.48 !important;
    -webkit-line-clamp:3 !important;
    line-clamp:3 !important;
  }
  #heroContent.relative.z-10>div>div:last-child {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:.4rem !important;
    width:100% !important;
  }
  #heroContent.relative.z-10 #playLink {
    grid-column:1/-1 !important;
    min-height:40px !important;
  }
  #heroContent.relative.z-10 #watchedBtn { grid-column:1/3 !important; }
  #heroContent.relative.z-10 #watchlistBtn { grid-column:3/5 !important; }
  #heroContent.relative.z-10 #watchedBtn,
  #heroContent.relative.z-10 #watchlistBtn,
  #heroContent.relative.z-10 #notifyBtn,
  #heroContent.relative.z-10 #dislikeBtn,
  #heroContent.relative.z-10 #trailerBtn2,
  #heroContent.relative.z-10 #favoriteBtn {
    min-height:35px !important;
    height:35px !important;
    padding:.45rem .38rem !important;
    font-size:.6rem !important;
    border-radius:.55rem !important;
  }
  #heroContent.relative.z-10 #favoriteBtn { width:auto !important; }
  #infoBtn {
    width:32px !important;
    height:32px !important;
    right:.6rem !important;
    bottom:.6rem !important;
    background:rgba(8,9,12,.58) !important;
  }
  #metadataCard {
    left:.65rem !important;
    right:.65rem !important;
    bottom:calc(.65rem + env(safe-area-inset-bottom)) !important;
    max-height:72svh !important;
    border-radius:12px !important;
  }

  /* Flat, consistent content sections. */
  main.relative.min-h-screen>.relative.z-10>section {
    padding:.75rem 1rem !important;
  }
  .watch-section-shell,
  .watch-lower-section,
  .watch-smart-tools {
    border-radius:10px !important;
    background:#111319 !important;
    border:1px solid rgba(255,255,255,.07) !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }
  .watch-mobile-nav {
    position:sticky !important;
    top:0 !important;
    z-index:45 !important;
    padding:.4rem 0 !important;
    background:rgba(8,9,12,.94) !important;
    backdrop-filter:blur(10px) !important;
  }
  .watch-mobile-nav button {
    min-height:32px !important;
    padding:.42rem .62rem !important;
    border-radius:.45rem !important;
    background:#151820 !important;
    font-size:.6rem !important;
  }
  #similarSection .watch-match-grid,
  #recommendationsSection .watch-match-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:.7rem .5rem !important;
  }
  #similarSection .watch-poster-card>div:first-child,
  #recommendationsSection .watch-poster-card>div:first-child {
    border-radius:7px !important;
  }
  #episodes .episode-link {
    grid-template-columns:104px minmax(0,1fr) !important;
    background:#14171e !important;
    border-radius:9px !important;
  }
  #episodes .episode-link>div:first-of-type {
    width:104px !important;
    min-width:104px !important;
    border-radius:6px !important;
  }

  /* Keep bottom navigation from covering the final row. */
  main,
  main.relative.min-h-screen {
    padding-bottom:calc(5.25rem + env(safe-area-inset-bottom)) !important;
  }

  /* Anime/detail variants also stop artificially enlarging the background. */
  .anime-watch-bg {
    transform:none !important;
    background-size:contain !important;
    background-position:center top !important;
    opacity:.62 !important;
  }
  .anime-info-panel.open { animation:none !important; }
}

@media (max-width: 380px) {
  body.immersive-header #hero,
  .hero-shell { padding-top:56.25vw !important; }
  body.immersive-header #hero .hero-backdrop-fill,
  body.immersive-header #hero .hero-soft-fade,
  .hero-shell .hero-img,
  .hero-shell .hero-fade { height:56.25vw !important; }
  #episodes .episode-link { grid-template-columns:94px minmax(0,1fr) !important; }
  #episodes .episode-link>div:first-of-type { width:94px !important; min-width:94px !important; }
}


/* Flixy v172: uncropped title artwork, seamless hero, reliable Details sheet. */
.metadata-close{
  display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border:1px solid rgba(255,255,255,.1);border-radius:.55rem;background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;
}
.metadata-close:hover{background:rgba(255,255,255,.12)}

@media (max-width: 767px) {
  /* Render the entire 16:9 TMDB backdrop as an image, never as a cropped cover. */
  .hero-shell {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    padding-top:0 !important;
    overflow:visible !important;
    border:0 !important;
    box-shadow:none !important;
    background:#08090c !important;
  }
  .hero-shell .hero-img {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:16 / 9 !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#08090c !important;
    transform:none !important;
    animation:none !important;
    filter:brightness(1.04) saturate(1.02) contrast(.99) !important;
  }
  .hero-shell .hero-fade {
    position:absolute !important;
    inset:0 0 auto 0 !important;
    width:100% !important;
    height:calc(56.25vw + 2.5rem) !important;
    max-height:none !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,transparent 0%,transparent 69%,rgba(8,9,12,.18) 82%,#08090c 100%) !important;
  }
  #heroContent.relative.z-10 {
    display:block !important;
    min-height:0 !important;
    margin-top:-1px !important;
    padding:.3rem 1rem .9rem !important;
    background:#08090c !important;
    border:0 !important;
  }
  main.relative.min-h-screen {
    margin-top:-1px !important;
    border-top:0 !important;
    box-shadow:none !important;
    background:#08090c !important;
  }

  /* All hero actions participate in layout; no floating button can cover Trailer. */
  #heroContent.relative.z-10>div>div:last-child {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.45rem !important;
    align-items:stretch !important;
  }
  #heroContent.relative.z-10 #playLink { grid-column:1 / -1 !important; }
  #heroContent.relative.z-10 #watchedBtn,
  #heroContent.relative.z-10 #watchlistBtn,
  #heroContent.relative.z-10 #favoriteBtn,
  #heroContent.relative.z-10 #notifyBtn,
  #heroContent.relative.z-10 #dislikeBtn,
  #heroContent.relative.z-10 #trailerBtn2,
  #heroContent.relative.z-10 #infoBtn {
    position:static !important;
    inset:auto !important;
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
    min-height:38px !important;
    padding:.5rem .55rem !important;
    border-radius:.55rem !important;
    transform:none !important;
    z-index:auto !important;
    font-size:.64rem !important;
  }
  #heroContent.relative.z-10 #notifyBtn { grid-column:1 / -1 !important; }
  #heroContent.relative.z-10 #trailerBtn2:not(.hidden) + #infoBtn { grid-column:auto !important; }
  #heroContent.relative.z-10 #trailerBtn2.hidden + #infoBtn { grid-column:1 / -1 !important; }

  /* Details is a real modal sheet, above the page and independent of hero geometry. */
  #metadataCard {
    position:fixed !important;
    left:.65rem !important;
    right:.65rem !important;
    top:auto !important;
    bottom:calc(.65rem + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-height:min(72svh,36rem) !important;
    overflow:auto !important;
    border-radius:14px !important;
    z-index:10050 !important;
    pointer-events:auto !important;
    transform:none !important;
  }
  #metadataCard.metadata-open { animation:flixyMetadataIn .16s ease-out both !important; }
  @keyframes flixyMetadataIn { from { opacity:0; translate:0 .5rem; } to { opacity:1; translate:0 0; } }
}

@media (max-width: 380px) {
  .hero-shell { padding-top:0 !important; }
  .hero-shell .hero-img { height:auto !important; aspect-ratio:16 / 9 !important; }
  .hero-shell .hero-fade { height:calc(56.25vw + 2.5rem) !important; }
}