/* MOVIEWARD Mobile First — all existing features preserved */
html{scroll-behavior:smooth;scroll-padding-top:90px}
*,*:before,*:after{box-sizing:border-box}
body{overflow-x:hidden!important}
img,video{max-width:100%}
#app,main,.section,.poster-grid{min-width:0}
.nav{z-index:110!important}
.pf-mobile-menu-toggle{display:none!important}
.pf-mobile-menu-scrim{display:none}
@media(max-width:900px){
 .nav{height:72px!important;min-height:72px!important;padding:0 18px!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important}
 .nav .brand{display:inline-flex!important;align-items:center!important;flex:0 1 auto!important;min-width:0!important;max-width:min(48vw,210px)!important;font-size:clamp(18px,3.8vw,25px)!important;overflow:hidden!important;white-space:nowrap!important}
 .nav .brand img{height:37px!important;width:auto!important;max-width:100%!important;object-fit:contain!important}
 .nav-right{display:flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto!important}
 .nav-right .iconbtn{width:40px!important;height:40px!important;min-width:40px!important;border-radius:11px!important}
 .nav-right .watchlist-btn{min-width:40px!important;height:40px!important;padding:0 11px!important;border-radius:11px!important}
 .nav-right .watchlist-btn span{display:none!important}
 .nav-right .avatar,.pf-live{display:none!important}
 .pf-mobile-menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;background:#244549!important;border:1px solid #3AAFA977!important;color:#DEF2F1!important;border-radius:11px;cursor:pointer;transition:background .2s}
 .pf-mobile-menu-toggle svg{width:21px;height:21px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
 .pf-mobile-menu-toggle:hover,.pf-mobile-menu-toggle[aria-expanded=true]{background:#2B7A78!important}
 .navlinks{position:fixed!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;top:calc(72px + 10px)!important;left:14px!important;right:14px!important;width:auto!important;max-height:min(75dvh,560px)!important;overflow-y:auto!important;padding:12px!important;background:linear-gradient(160deg,#213D42,#17252A)!important;border:1px solid #3AAFA978!important;border-radius:18px!important;box-shadow:0 30px 80px #061719DE!important;z-index:120!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:translateY(-12px)!important;transition:opacity .18s,transform .18s,visibility .18s!important}
 .navlinks.pf-mobile-open{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:translateY(0)!important}
 .navlinks a{display:block!important;text-align:left!important;width:100%!important;font-size:14px!important;line-height:1.5!important;padding:14px 16px!important;border-radius:11px!important}
 .pf-mobile-menu-scrim{display:block;position:fixed;inset:72px 0 0;background:#071416A8;backdrop-filter:blur(3px);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
 .pf-mobile-menu-scrim.pf-mobile-open{opacity:1;pointer-events:auto}
 .pf-mobile-menu-open{overflow:hidden!important}
 #searchBar.searchbar{top:83px!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;min-width:0!important;padding:9px 12px!important;z-index:130!important}
 #searchBar input{font-size:16px!important;min-width:0!important;width:100%!important}
 #clearSearch{flex:0 0 auto!important;min-width:42px;min-height:42px}
 .pf-search-scrim{inset:72px 0 0!important;z-index:105!important}
 .hero{min-height:auto!important}
 .hero-content{width:100%!important;max-width:100%!important;padding:clamp(55px,9vw,90px) 6% 45px!important}
 .hero-content h1{font-size:clamp(42px,9vw,75px)!important}
 .hero-content p{max-width:620px!important;font-size:14px!important;line-height:1.7!important}
 .hero-side,.hero-bottom{display:none!important}
 .section,.section.first,.section.library{padding:48px 5%!important}
 .section-top{display:flex!important;align-items:flex-start!important;gap:14px!important;flex-wrap:wrap!important}
 .section-top h2{font-size:clamp(30px,6vw,47px)!important;line-height:1.1!important}
 .poster-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important}
 .movie-card{min-width:0!important;width:100%!important}
 .movie-card img{width:100%!important;object-fit:cover!important}
 .red-showcase{min-height:auto!important;margin:18px 4% 28px!important;padding:32px 5%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;gap:15px!important}
 .red-showcase-copy{min-width:0!important;max-width:100%!important}
 .red-showcase h2{font-size:clamp(37px,5.6vw,65px)!important}
 .red-poster-stack{min-width:0!important;max-width:100%!important;transform:scale(.82);transform-origin:center!important}
 .editorial{padding:35px 5%!important;gap:20px!important}
 .bottom-cta{padding:55px 5%!important}
 .pf-footer-wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:38px 5% 22px!important;gap:30px 22px!important}
 .pf-footer-about{grid-column:1/-1!important}
 .pf-footer-bottom{grid-column:1/-1!important;flex-wrap:wrap!important}
 .player-overlay{width:100vw!important;max-width:100%!important;overflow-x:hidden!important}
 .player-top{padding:16px!important;gap:10px!important}
 .player-box{width:100%!important;max-width:100%!important}
 #video{width:100%!important;max-height:65dvh!important}
 .player-meta{padding:15px!important;flex-wrap:wrap!important}
 .player-meta>div{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
}
@media(max-width:620px){
 .nav{padding:0 12px!important}
 .nav .brand{max-width:44vw!important}
 .nav .brand img{max-height:34px!important}
 .nav-right{gap:6px!important}
 .nav-right .watchlist-btn{padding:0 9px!important}
 .hero-content{padding:48px 5% 38px!important}
 .hero-content h1{font-size:clamp(38px,11vw,60px)!important}
 .hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
 .hero-actions>*{max-width:100%;white-space:normal}
 .red-showcase{margin:12px 3% 28px!important;padding:27px 6% 22px!important;grid-template-columns:minmax(0,1fr)!important;overflow:hidden!important}
 .red-showcase h2{font-size:clamp(42px,11vw,63px)!important}
 .red-showcase-copy{position:relative;z-index:2}
 .red-showcase-copy p{font-size:13px!important}
 .red-poster-stack{height:225px!important;max-height:225px!important;min-height:0!important;transform:scale(.75)!important;transform-origin:center center!important;margin:-5px auto -35px!important;width:min(100%,380px)!important}
 .red-stack-card{max-height:270px!important}
 .pf-showcase-pills{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
 .pf-showcase-pills a{font-size:11px!important;padding:8px 10px!important}
 .section,.section.first,.section.library{padding:35px 4%!important}
 .section-top{margin-bottom:20px!important}
 .section-top h2{font-size:clamp(30px,8vw,42px)!important}
 .section-aside{font-size:12px!important}
 .poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
 .movie-card{border-radius:12px!important;overflow:hidden!important}
 .movie-card .card-info,.movie-card .card-body{padding:10px!important}
 .movie-card .card-title{font-size:14px!important;overflow-wrap:anywhere}
 .movie-card .card-meta{font-size:11px!important;line-height:1.5!important}
 .movie-card .card-play,.movie-card .watch-now,.movie-card .poster-action{max-width:calc(100% - 14px)!important;font-size:11px!important;min-height:38px!important;padding:8px 10px!important;white-space:nowrap!important}
 .genre-list{display:flex!important;flex-wrap:wrap!important;gap:9px!important}
 .genre{font-size:12px!important;padding:10px 14px!important}
 .editorial{padding:30px 5%!important;display:block!important}
 .editorial-number,.editorial-symbol{display:none!important}
 .editorial h2{font-size:clamp(33px,9vw,52px)!important}
 .bottom-cta h2{font-size:clamp(35px,9vw,52px)!important}
 .pf-footer-wrap{padding:32px 5% 22px!important;gap:25px 14px!important}
 .pf-footer-col{gap:12px!important}
 .pf-footer-col a,.pf-footer-col button{font-size:12px!important;line-height:1.5!important}
 .pf-footer-social a{font-size:11px!important;padding:9px 11px!important}
 .pf-footer-bottom{font-size:11px!important;flex-direction:column!important;align-items:flex-start!important}
 .player-top{flex-wrap:wrap!important}
 .player-meta{display:block!important}
}
@media(max-width:360px){
 .nav .brand{max-width:40vw!important}
 .nav-right .iconbtn,.nav-right .watchlist-btn,.pf-mobile-menu-toggle{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important}
 .poster-grid{gap:9px!important}
 .movie-card .card-title{font-size:12px!important}
 .pf-footer-wrap{grid-template-columns:minmax(0,1fr)!important}
 .pf-footer-about{grid-column:1!important}
 .pf-footer-bottom{grid-column:1!important}
}
@media(hover:none){.movie-card .card-play,.movie-card .watch-now,.movie-card .poster-action{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.navlinks,.pf-mobile-menu-scrim{transition:none!important}}
