/* =====================================================================
   StreamFlix — Netflix-style theme layer
   Loaded after streamflix.css. All brand colours live in :root below.
   ===================================================================== */
:root{
  --brand:#e50914;
  --brand-2:#b20710;
  --brand-glow:rgba(229,9,20,.45);
  --bg:#141414;
  --bg-deep:#0b0b0b;
  --text:#fff;
  --muted:#b3b3b3;
  --line:rgba(255,255,255,.12);
  --font-body:"Manrope",Arial,Helvetica,sans-serif;
  --font-display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --nf-row-gap:6px;
}
html,body{background:var(--bg)}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased}
.sf-logo{font-family:var(--font-display);color:var(--brand);font-size:clamp(1.7rem,2.6vw,2.3rem);letter-spacing:.04em;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.sf-brand{gap:0}
.sf-nav{transition:background .35s ease}
.sf-nav.scrolled{background:rgba(10,10,10,.97)}
.sf-nav-links a{font-weight:600;transition:color .2s}
.sf-nav-links a.active{color:#fff;font-weight:800}
.sf-btn-primary,.sf-btn.sf-btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.sf-btn-primary:hover{background:var(--brand-2)}
.sf-kicker{color:var(--brand);letter-spacing:.18em;font-weight:800}
::selection{background:var(--brand);color:#fff}

/* ---------- Home: billboard ---------- */
.nf-home{padding-top:0}
.nf-billboard{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;padding:0 clamp(18px,4vw,60px) clamp(110px,14vh,170px);overflow:hidden;isolation:isolate}
.nf-billboard-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 75% 30%,rgba(229,9,20,.35),transparent 55%),linear-gradient(120deg,#1b0204,#0b0b0b 60%);transition:opacity .8s ease}
.nf-billboard-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(1.1);animation:nfKen 22s ease-in-out infinite alternate}
.nf-billboard-bg .nf-blur{filter:blur(40px) brightness(.55);transform:scale(1.2);animation:none}
.nf-billboard-bg .nf-poster-side{left:auto;right:6%;top:12%;width:auto;height:72%;aspect-ratio:2/3;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.7);animation:nfFloat 9s ease-in-out infinite alternate}
.nf-billboard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,11,11,.95) 0,rgba(11,11,11,.55) 45%,transparent 75%),linear-gradient(0deg,var(--bg) 0,transparent 38%)}
.nf-billboard-content{max-width:620px;animation:nfRise .8s ease both}
.nf-badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.8rem;letter-spacing:.2em;color:#fff}
.nf-badge b{display:inline-grid;place-items:center;width:22px;height:30px;background:var(--brand);font-family:var(--font-display);font-size:1.1rem;letter-spacing:0;border-radius:2px}
.nf-billboard h1{font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,7vw,6.2rem);line-height:.92;letter-spacing:.01em;margin:16px 0 14px;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.nf-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:#ddd;font-weight:600;font-size:.95rem;margin-bottom:14px}
.nf-meta .nf-match{color:#46d369;font-weight:800}
.nf-meta .nf-pill{border:1px solid rgba(255,255,255,.4);padding:1px 7px;border-radius:3px;font-size:.78rem}
.nf-billboard p.nf-plot{color:#e5e5e5;font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.55;max-width:560px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.nf-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.nf-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 28px;border-radius:5px;font-weight:800;font-size:1.05rem;transition:transform .15s ease,background .2s ease}
.nf-btn:hover{transform:scale(1.04)}
.nf-btn-play{background:#fff;color:#000}
.nf-btn-play:hover{background:rgba(255,255,255,.78)}
.nf-btn-info{background:rgba(109,109,110,.7);color:#fff}
.nf-btn-info:hover{background:rgba(109,109,110,.45)}
.nf-btn-red{background:var(--brand);color:#fff}
.nf-btn-red:hover{background:var(--brand-2)}
.nf-dots{position:absolute;right:clamp(18px,4vw,60px);bottom:clamp(120px,15vh,180px);display:flex;gap:6px}
.nf-dots button{width:22px;height:3px;background:rgba(255,255,255,.35);border-radius:2px;transition:background .3s,width .3s}
.nf-dots button.active{background:var(--brand);width:34px}

/* ---------- Home: rows ---------- */
.nf-rows{position:relative;z-index:2;margin-top:-90px;padding-bottom:40px}
.nf-row{padding:0 clamp(18px,4vw,60px);margin-bottom:clamp(28px,3.5vw,44px)}
.nf-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}
.nf-row-head h2{font-size:clamp(1.05rem,1.6vw,1.45rem);font-weight:800}
.nf-row-head a{color:var(--muted);font-size:.85rem;font-weight:700;opacity:.85}
.nf-row-head a:hover{color:#fff}
.nf-row-head a i{color:var(--brand);margin-left:4px}
.nf-slider{position:relative}
.nf-track{display:flex;gap:var(--nf-row-gap);overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding:14px 2px 18px;scrollbar-width:none}
.nf-track::-webkit-scrollbar{display:none}
.nf-arrow{position:absolute;top:14px;bottom:18px;width:46px;z-index:5;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:1.4rem;opacity:0;transition:opacity .2s}
.nf-slider:hover .nf-arrow{opacity:1}
.nf-arrow.prev{left:-46px;border-radius:0 6px 6px 0}
.nf-arrow.next{right:-46px;border-radius:6px 0 0 6px}
@media(max-width:900px){.nf-arrow{display:none}}

.nf-tile{position:relative;flex:0 0 clamp(130px,15vw,210px);aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:#222;scroll-snap-align:start;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.nf-tile img{width:100%;height:100%;object-fit:cover;display:block}
.nf-tile img.broken{display:none}
.nf-tile .nf-tile-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;font-weight:800;background:linear-gradient(160deg,#3a0a0d,#151515)}
.nf-tile img:not(.broken)+.nf-tile-fallback{display:none}
.nf-tile .nf-tile-info{position:absolute;inset:auto 0 0 0;padding:34px 10px 10px;background:linear-gradient(0deg,rgba(0,0,0,.95),transparent);opacity:0;transform:translateY(8px);transition:.25s}
.nf-tile .nf-tile-info strong{display:block;font-size:.86rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nf-tile .nf-tile-info span{font-size:.72rem;color:#46d369;font-weight:800}
.nf-tile .nf-tile-play{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:.8rem;opacity:0;transform:scale(.7);transition:.25s}
.nf-tile:hover{transform:scale(1.08);z-index:3;box-shadow:0 18px 40px rgba(0,0,0,.75),0 0 0 2px rgba(255,255,255,.08)}
.nf-tile:hover .nf-tile-info,.nf-tile:hover .nf-tile-play{opacity:1;transform:none}
.nf-tile.wide{flex-basis:clamp(220px,22vw,320px);aspect-ratio:16/9}
.nf-tile .nf-progress{position:absolute;left:8px;right:8px;bottom:6px;height:3px;background:rgba(255,255,255,.3)}
.nf-tile .nf-progress span{display:block;height:100%;background:var(--brand)}

/* Top 10 */
.nf-top10 .nf-rank{position:relative;flex:0 0 clamp(190px,21vw,290px);display:flex;align-items:flex-end;scroll-snap-align:start}
.nf-rank-num{font-family:var(--font-display);font-size:clamp(7rem,12vw,11rem);line-height:.78;color:var(--bg);-webkit-text-stroke:3px #595959;margin-right:-18px;letter-spacing:-.06em;user-select:none;transition:-webkit-text-stroke-color .3s}
.nf-rank:hover .nf-rank-num{-webkit-text-stroke-color:var(--brand)}
.nf-rank .nf-tile{flex-basis:58%}

/* Platforms */
.nf-platforms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.nf-platform{position:relative;height:92px;border-radius:10px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,#1f1f1f,#0e0e0e);transition:transform .25s,border-color .25s,box-shadow .25s}
.nf-platform:hover{transform:translateY(-4px);border-color:rgba(229,9,20,.6);box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 30px rgba(229,9,20,.18)}
.nf-platform .nf-p-name{font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.nf-platform small{position:absolute;bottom:8px;font-size:.68rem;color:var(--muted);font-weight:700}
.nf-p-netflix .nf-p-name{font-family:var(--font-display);color:var(--brand);font-size:2rem;font-weight:400;letter-spacing:.04em}
.nf-p-disney .nf-p-name{font-family:Georgia,serif;font-style:italic;font-size:1.5rem}
.nf-p-max .nf-p-name{letter-spacing:.06em;font-weight:800}
.nf-p-prime .nf-p-name{text-transform:lowercase;color:#1fa3ff}
.nf-p-apple .nf-p-name{font-weight:600}
.nf-p-paramount .nf-p-name{color:#3a8dff}
.nf-p-hulu .nf-p-name{color:#1ce783;text-transform:lowercase;font-size:1.6rem}
.nf-p-peacock .nf-p-name{text-transform:lowercase}

/* Channels */
.nf-channel{flex:0 0 clamp(150px,14vw,190px);aspect-ratio:16/10;border-radius:10px;background:linear-gradient(145deg,#262626,#111);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;position:relative;padding:18px;scroll-snap-align:start;transition:transform .25s,border-color .25s}
.nf-channel img{max-width:78%;max-height:62%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.nf-channel img.broken{display:none}
.nf-channel strong{position:absolute;bottom:8px;left:10px;right:10px;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.nf-channel .nf-live{position:absolute;top:8px;left:8px;background:var(--brand);font-size:.6rem;font-weight:800;padding:2px 6px;border-radius:3px;letter-spacing:.1em}
.nf-channel:hover{transform:scale(1.06);border-color:rgba(229,9,20,.6)}

/* Skeletons + empty */
.nf-skel{flex:0 0 clamp(130px,15vw,210px);aspect-ratio:2/3;border-radius:6px;background:linear-gradient(90deg,#1c1c1c 0,#2a2a2a 50%,#1c1c1c 100%);background-size:200% 100%;animation:nfShimmer 1.3s infinite}
.nf-empty{color:var(--muted);padding:16px 0;font-size:.9rem}

/* Promo band */
.nf-promo{margin:10px clamp(18px,4vw,60px) 40px;border-radius:16px;padding:clamp(26px,4vw,48px);display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;background:radial-gradient(ellipse at 90% 10%,rgba(229,9,20,.4),transparent 55%),linear-gradient(135deg,#1c0305,#0d0d0d);border:1px solid rgba(229,9,20,.25)}
.nf-promo h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,4vw,3.6rem);line-height:.95}
.nf-promo p{color:#cfcfcf;margin-top:10px;max-width:520px}
.nf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.nf-stats div{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}
.nf-stats b{display:block;font-family:var(--font-display);font-size:2.4rem;color:var(--brand);font-weight:400;line-height:1}
.nf-stats span{font-size:.75rem;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:800px){.nf-promo{grid-template-columns:1fr}.nf-billboard-bg .nf-poster-side{display:none}}

.nf-footer{padding:40px clamp(18px,4vw,60px);color:#808080;font-size:.82rem;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nf-footer nav{display:flex;gap:18px;flex-wrap:wrap}
.nf-footer a:hover{color:#fff}

@keyframes nfShimmer{to{background-position:-200% 0}}
@keyframes nfRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes nfKen{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@keyframes nfFloat{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-14px) rotate(1deg)}}

/* =====================================================================
   Player — Netflix style
   ===================================================================== */
body.nf-player{background:#000;overflow:hidden;font-family:var(--font-body)}
.nfp{position:fixed;inset:0;background:#000;color:#fff;user-select:none}
.nfp video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.nfp video::cue{opacity:0;color:transparent;background:transparent}
.nfp-top,.nfp-bottom{position:absolute;left:0;right:0;z-index:5;padding:18px clamp(16px,3vw,40px);transition:opacity .35s ease,transform .35s ease}
.nfp-top{top:0;display:flex;align-items:center;gap:16px;background:linear-gradient(180deg,rgba(0,0,0,.85),transparent)}
.nfp-bottom{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.5) 60%,transparent);padding-top:60px}
.nfp.idle .nfp-top,.nfp.idle .nfp-bottom{opacity:0;pointer-events:none}
.nfp.idle .nfp-top{transform:translateY(-10px)}
.nfp.idle .nfp-bottom{transform:translateY(10px)}
.nfp.idle{cursor:none}
.nfp-title{display:flex;flex-direction:column;min-width:0}
.nfp-title small{color:var(--brand);font-weight:800;letter-spacing:.18em;font-size:.7rem}
.nfp-title strong{font-size:clamp(1rem,1.6vw,1.35rem);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfp-title span{color:var(--muted);font-size:.85rem}
.nfp-btn{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-size:1.35rem;color:#fff;transition:transform .15s,background .2s}
.nfp-btn:hover{transform:scale(1.18)}
.nfp-btn.active{color:var(--brand)}
.nfp-btn.big{font-size:1.8rem}
.nfp-progress{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;margin-bottom:8px}
.nfp-progress-bar{position:relative;width:100%;height:4px;background:rgba(255,255,255,.25);border-radius:2px;transition:height .15s}
.nfp-progress:hover .nfp-progress-bar{height:7px}
.nfp-buffer,.nfp-played{position:absolute;inset:0 auto 0 0;border-radius:2px}
.nfp-buffer{background:rgba(255,255,255,.35)}
.nfp-played{background:var(--brand)}
.nfp-knob{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(229,9,20,.25);transform:scale(0);transition:transform .15s}
.nfp-progress:hover .nfp-knob{transform:scale(1)}
.nfp-hover-time{position:absolute;bottom:22px;transform:translateX(-50%);background:rgba(20,20,20,.95);padding:4px 8px;border-radius:4px;font-size:.78rem;font-weight:700;display:none}
.nfp-progress:hover .nfp-hover-time{display:block}
.nfp-time-left{font-variant-numeric:tabular-nums;font-weight:700;font-size:.9rem;margin-left:12px;white-space:nowrap}
.nfp-row{display:flex;align-items:center;gap:6px}
.nfp-row .nfp-spacer{flex:1;min-width:0;text-align:center;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e5e5e5}
.nfp-volume{display:flex;align-items:center}
.nfp-volume input{width:0;opacity:0;transition:width .25s,opacity .25s;accent-color:var(--brand)}
.nfp-volume:hover input,.nfp-volume input:focus{width:90px;opacity:1}
.nfp-live-badge{display:none;align-items:center;gap:6px;font-weight:800;font-size:.8rem;letter-spacing:.12em;margin-left:8px}
.nfp-live-badge::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand);animation:nfPulse 1.4s infinite}
.nfp.is-live .nfp-live-badge{display:inline-flex}
.nfp.is-live .nfp-progress,.nfp.is-live .nfp-skip,.nfp.is-live .nfp-time-left{display:none}

.nfp-center{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.nfp-flash{width:90px;height:90px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;font-size:2rem;opacity:0;transform:scale(.7)}
.nfp-flash.show{animation:nfFlash .6s ease}
.nfp-spinner{width:64px;height:64px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:var(--brand);animation:spin .9s linear infinite;display:none}
.nfp.loading .nfp-spinner{display:block}
.nfp-error{display:none;max-width:460px;text-align:center;padding:24px;background:rgba(20,20,20,.9);border-radius:10px;border:1px solid rgba(229,9,20,.35);pointer-events:auto}
.nfp-error i{color:var(--brand);font-size:2rem;margin-bottom:10px}
.nfp.errored .nfp-error{display:block}
.nfp.errored .nfp-spinner{display:none}

/* Subtitle renderer */
.nfp-subs{position:absolute;left:5%;right:5%;z-index:4;text-align:center;pointer-events:none;bottom:var(--sub-bottom,10%);transition:bottom .35s ease}
.nfp:not(.idle) .nfp-subs{bottom:calc(var(--sub-bottom,10%) + 70px)}
.nfp-subs span{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.08em .35em;line-height:1.45;font-weight:var(--sub-weight,700);font-size:var(--sub-size,2.6vw);color:var(--sub-color,#fff);background:var(--sub-bg,transparent);text-shadow:var(--sub-shadow,0 0 4px #000,0 2px 6px #000);font-family:var(--sub-font,var(--font-body));white-space:pre-line}
@media(max-width:700px){.nfp-subs span{font-size:calc(var(--sub-size,2.6vw) * 1.8)}}

/* Panels */
.nfp-panel{position:absolute;right:clamp(16px,3vw,40px);bottom:120px;z-index:8;width:min(560px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;background:rgba(24,24,24,.97);border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.7);padding:18px;animation:nfRise .2s ease}
.nfp-panel.hidden{display:none}
.nfp-panel h3{font-size:.78rem;letter-spacing:.16em;color:var(--muted);margin:4px 0 10px;font-weight:800;text-transform:uppercase}
.nfp-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.nfp-cols{grid-template-columns:1fr}}
.nfp-list{display:grid;gap:2px}
.nfp-list button{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 10px;border-radius:6px;color:#ccc;font-weight:600;font-size:.92rem}
.nfp-list button:hover{background:rgba(255,255,255,.08);color:#fff}
.nfp-list button i{width:16px;color:transparent}
.nfp-list button.active{color:#fff}
.nfp-list button.active i{color:var(--brand)}
.nfp-field{display:grid;gap:6px;margin-bottom:12px;font-size:.82rem;color:#bbb;font-weight:700}
.nfp-field select,.nfp-field input[type=search]{width:100%;background:#0f0f0f;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:8px 10px;color:#fff}
.nfp-field input[type=range]{accent-color:var(--brand)}
.nfp-swatches{display:flex;gap:8px}
.nfp-swatches button{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.nfp-swatches button.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(229,9,20,.35)}
.nfp-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.08);font-weight:700;font-size:.85rem;cursor:pointer}
.nfp-chip:hover{background:rgba(255,255,255,.16)}
.nfp-chip.red{background:var(--brand)}
.nfp-chip.red:hover{background:var(--brand-2)}
.nfp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.nfp-note{font-size:.78rem;color:var(--muted);margin-top:10px;line-height:1.5}
.nfp-search-results{display:grid;gap:4px;margin-top:8px;max-height:180px;overflow:auto}
.nfp-search-results button{text-align:left;padding:8px 10px;border-radius:6px;background:rgba(255,255,255,.04);font-size:.82rem;color:#ddd}
.nfp-search-results button:hover{background:rgba(229,9,20,.2)}
.nfp-toast{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:9;background:rgba(20,20,20,.95);border-left:3px solid var(--brand);padding:10px 16px;border-radius:6px;font-weight:700;font-size:.9rem;opacity:0;transition:opacity .3s;pointer-events:none}
.nfp-toast.show{opacity:1}
.nfp .hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@keyframes nfFlash{0%{opacity:0;transform:scale(.7)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@keyframes nfPulse{50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Overlay states driven by player.js (#videoOverlay.loading / .error / .hidden) */
#videoOverlay.hidden{display:grid!important}
#videoOverlay.loading .nfp-spinner{display:block}
#videoOverlay.error .nfp-error{display:block}
#videoOverlay.error .nfp-spinner{display:none}
.nfp-progress{flex:1}
.nfp-center>*{grid-area:1/1}
.nfp-error .nfp-chip{padding:10px 18px}

/* One-tap unmute when the browser starts playback muted */
.sf-unmute{position:absolute;left:24px;bottom:110px;z-index:30;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.4);border-radius:4px;background:rgba(0,0,0,.7);color:#fff;font:600 15px/1 inherit;cursor:pointer}
.sf-unmute:hover{background:#e50914;border-color:#e50914}

/* v23 */
.nf-billboard h1{font-size:clamp(2.6rem,6vw,5.4rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.nf-billboard h1.long{font-size:clamp(2.2rem,4.6vw,4.2rem)}
.nf-billboard h1.xlong{font-size:clamp(1.9rem,3.6vw,3.2rem);-webkit-line-clamp:2}
.nf-billboard{padding-top:110px}
.nf-marquee{position:relative;overflow:hidden;padding:18px 0;margin:6px calc(-1*clamp(18px,4vw,60px));-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);pointer-events:none}
.nf-marquee-track{display:flex;gap:70px;width:max-content;align-items:center;animation:nfMarquee 40s linear infinite}
.nf-brand{flex:0 0 auto;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.02em;white-space:nowrap;opacity:.9;display:flex;align-items:center;gap:6px}
@keyframes nfMarquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.nf-marquee-track{animation-duration:120s}}
.nf-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 30px;padding:56px clamp(18px,4vw,60px) 30px;margin-top:40px;border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,transparent,rgba(229,9,20,.06));color:#8a8a8a}
.nf-foot-brand .sf-logo{font-size:1.9rem}
.nf-foot-brand p{margin:8px 0 0;max-width:420px;line-height:1.6;font-size:.9rem}
.nf-foot-social{display:flex;gap:12px;align-items:center}
.nf-foot-social span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.12);color:#ccc;background:rgba(255,255,255,.03)}
.nf-foot-bottom{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);font-size:.8rem}
@media(max-width:600px){.nf-footer{grid-template-columns:1fr}}

/* Luciflix — brand showcase and cross-device presentation */
:root{--brand-surface:oklch(.19 0 0);--brand-white:oklch(.98 0 0);--brand-blue:oklch(.6 .18 250);--brand-violet:oklch(.48 .19 295);--brand-green:oklch(.82 .2 155);--focus-ring:oklch(.9 .16 95)}
.nf-brand-set{display:flex;align-items:center;gap:64px;padding-right:64px;flex-shrink:0}
.nf-marquee{padding:28px 0;background:var(--bg-deep);border-block:1px solid var(--line)}
.nf-marquee-track{gap:0;animation:nfMarquee 85s linear infinite}
.nf-brand{width:190px;height:96px;display:grid;place-items:center;opacity:1;letter-spacing:0}
.nf-brand img{display:block;width:170px;height:76px;object-fit:contain}
.nf-p-apple img{filter:invert(1)}
.nf-footer{display:flex;justify-content:center;align-items:center;padding:28px clamp(18px,4vw,60px);margin-top:0;background:var(--bg);border-top:1px solid var(--line)}
.nf-footer .sf-logo{font-size:24px}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
:where(a,button,input,select){scroll-margin-block:130px}
.sf-brand span.sf-logo{display:block;letter-spacing:0;font-size:32px}
.sf-nav-links{display:flex}
.sf-nav-links a{display:flex;align-items:center;min-height:44px}
.sf-nav-left,.sf-nav-right,.sf-nav-links{min-width:0}
.sf-global-search{min-height:44px;overflow:visible}
.sf-global-search input{min-width:0}
.sf-search-results{max-height:65vh;overflow-y:auto}
.nf-row-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.nf-row-head h2{min-width:0;font-size:22px;overflow-wrap:anywhere}
.nf-row-head a{white-space:nowrap;min-height:44px;display:flex;align-items:center}
.nf-slider:focus-within .nf-arrow,.nf-arrow:focus-visible{opacity:1}
.nf-tile:focus-visible .nf-tile-info,.nf-tile:focus-visible .nf-tile-play{opacity:1;transform:none}
.nf-tile{scroll-margin:130px 12px}
.nf-dots button{height:16px;background-clip:content-box;padding-block:6px}
.nf-billboard{min-height:680px;padding-top:130px}
.nf-billboard h1{font-size:76px;letter-spacing:0;line-height:1.05}
.nf-billboard h1.long{font-size:58px}.nf-billboard h1.xlong{font-size:44px}
.nf-billboard-content{min-width:0}
@media(max-width:1000px){.sf-nav-links{gap:16px}.sf-nav-left{gap:20px}.sf-global-search{width:220px}.sf-nav-inner{gap:12px}}
@media(max-width:760px){
 .sf-nav{background:var(--bg-deep)}
 .sf-nav-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
 .sf-nav-left{display:contents}.sf-brand{grid-column:1;grid-row:1}
 .sf-nav-right{grid-column:2;grid-row:1;min-width:0}
 .sf-nav-links{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;font-size:13px}
 .sf-nav-links a{justify-content:center}
 .sf-brand span.sf-logo{font-size:28px}
 .sf-global-search,.sf-global-search:focus-within{width:144px;overflow:visible;padding:8px}
 .sf-global-search input{width:100%;font-size:16px}
 .sf-search-results{position:fixed;top:108px;left:12px;right:12px;width:auto}
 .sf-app:not(.nf-home){padding-top:116px}
 .nf-billboard{min-height:640px;padding:150px 18px 110px}
 .nf-billboard h1{font-size:50px}.nf-billboard h1.long{font-size:42px}.nf-billboard h1.xlong{font-size:34px}
 .nf-row-head h2{font-size:18px}.nf-row-head{gap:8px}
 .nf-rows{margin-top:-60px}
 .nf-brand-set{gap:30px;padding-right:30px}.nf-brand{width:160px;height:80px}.nf-brand img{width:144px;height:64px}
 .nf-tile .nf-tile-info{opacity:1;transform:none}
 .nf-arrow{display:grid;width:30px;opacity:.8}.nf-arrow.prev{left:-16px}.nf-arrow.next{right:-16px}
 .nfp-bottom{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .nfp-btn{width:40px;height:44px;font-size:1.1rem}.nfp-row{gap:0}.nfp-row .nfp-spacer{display:none}
 .nfp-volume input{display:none}
}
@media(min-width:1800px){.sf-nav-links{font-size:20px}.nf-tile{flex-basis:240px}.nf-row-head h2{font-size:28px}.sf-global-search{width:320px}.nf-billboard{min-height:800px}}
@media(hover:none){.nf-tile:hover{transform:none}.nf-arrow{opacity:.8}.nfp-volume input{width:70px;opacity:1}}

@media(prefers-reduced-motion:reduce){.nf-marquee-track{animation:none}.nf-billboard-bg img{animation:none}}

/* v25: unframed, full-width cinematic homepage showcase */
.nf-home:not(.lib-page) .nf-billboard{min-height:560px;height: min(76vh,760px);padding:130px max(24px,4%) 56px;align-items:flex-end;width:100%}
.nf-home:not(.lib-page) .nf-billboard-bg{background:var(--bg-deep)}
.nf-home:not(.lib-page) .nf-billboard-bg img{object-position:center;filter:none;animation:none}
.nf-home:not(.lib-page) .nf-billboard-content{max-width:520px}
.nf-home:not(.lib-page) .nf-billboard h1{font-family:var(--font-body);font-size:36px;font-weight:800;line-height:1.15;letter-spacing:0;-webkit-line-clamp:2}
.nf-home:not(.lib-page) .nf-billboard h1.long{font-size:32px}
.nf-home:not(.lib-page) .nf-billboard h1.xlong{font-size:28px}
.nf-home:not(.lib-page) .nf-dots{bottom:44px}
.nf-home:not(.lib-page) .nf-rows{margin-top:32px}
.nf-platform-showcase .nf-marquee{margin:0;padding:16px 0}
.nf-brand-set{gap:32px;padding-right:32px}
.nf-brand{background:var(--brand-surface);border-radius:6px;width:180px;height:88px}
.nf-brand img{width:148px;height:64px}
.nfp.idle .sf-unmute{opacity:0;pointer-events:none}
@media(max-width:760px){
 .nf-home:not(.lib-page) .nf-billboard{min-height:540px;height:auto;padding:150px 20px 62px}
 .nf-home:not(.lib-page) .nf-billboard h1{font-size:30px}
 .nf-home:not(.lib-page) .nf-billboard h1.long{font-size:28px}
 .nf-home:not(.lib-page) .nf-billboard h1.xlong{font-size:24px}
 .nf-home:not(.lib-page) .nf-dots{bottom:20px}
 .nf-home:not(.lib-page) .nf-billboard-content{max-width:100%}
 .nf-home:not(.lib-page) .nf-billboard-bg img{object-position:65% center}
 .nf-home:not(.lib-page) .nf-plot{font-size:14px}
 .nf-brand{width:144px;height:76px}.nf-brand img{width:120px;height:56px}
}
@media(max-height:600px) and (min-width:761px){.nf-home:not(.lib-page) .nf-billboard{height:auto;min-height:470px;padding-top:110px}}

/* v26 — logo, smaller billboard dots, star ratings, 4K badge, devices showcase, mobile search */
.sf-brand{display:flex;align-items:center;flex-shrink:0}
.sf-logo-img{display:block;height:46px;width:auto;max-width:44vw;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.nf-dots{gap:5px}
.nf-dots button{width:12px;height:12px;padding-block:5px;border-radius:2px}
.nf-dots button.active{width:20px}
.nf-stars{color:#f5c518;letter-spacing:1px;font-weight:800}
.nf-uhd{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid currentColor;border-radius:4px;font-size:.6em;vertical-align:middle;color:#f5c518;letter-spacing:.06em}
.nf-devices{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:center;gap:clamp(24px,4vw,64px);margin:40px clamp(18px,4vw,60px) 50px;padding:clamp(24px,4vw,56px);border:0;background:transparent}
.nf-devices-kicker{display:inline-block;color:var(--brand);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}
.nf-devices h2{margin:10px 0 14px;font-family:var(--font-display);font-size:clamp(2rem,4vw,3.6rem);line-height:1;letter-spacing:.02em}
.nf-devices p{margin:0;color:#b3b3b3;line-height:1.6;max-width:460px}
.nf-devices-img{display:block;width:100%;height:auto;border-radius:12px}
@media(max-width:900px){.nf-devices{grid-template-columns:1fr;text-align:center}.nf-devices p{margin-inline:auto}.nf-devices-img{order:-1}}
@media(max-width:760px){
 .sf-logo-img{height:36px}
 .sf-global-search,.sf-global-search:focus-within{width:min(190px,48vw);min-height:40px;padding:0 14px;gap:8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .2s,background .2s}
 .sf-global-search:focus-within{border-color:var(--brand);background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(229,9,20,.25)}
 .sf-global-search i{color:#d0d0d0;font-size:14px}
 .sf-global-search input{width:100%;font-size:16px;color:#fff;padding:0;height:40px}
 .sf-global-search input::placeholder{color:#9a9a9a;font-size:14px}
 .sf-global-search input::-webkit-search-cancel-button{filter:invert(1)}
 .nf-devices{margin:28px 14px 36px;padding:22px 16px}
}
@media(max-width:380px){.sf-logo-img{height:30px}.sf-global-search,.sf-global-search:focus-within{width:46vw}}
@media(min-width:1800px){.sf-logo-img{height:56px}}

/* v27: transparent device hardware with static Luciflix home screen images. */
:root{--device-bezel:oklch(.12 0 0);--device-edge:oklch(.38 0 0);--device-metal:oklch(.6 0 0);--device-shadow:oklch(0 0 0 / .45)}
.nf-device-stage{position:relative;width:100%;aspect-ratio:1.58;container-type:inline-size;background:transparent}
.nf-device{position:absolute;background:var(--device-bezel);border:2px solid var(--device-edge);box-shadow:0 12px 24px var(--device-shadow);padding:7px;overflow:visible}
.nf-device-screen{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg-deep)}
.nf-device-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;pointer-events:none;user-select:none}
.nf-device-tv{top:0;left:0;width:78%;height:70%;border-radius:3px}
.nf-device-stand{position:absolute;left:36%;bottom:-22px;width:28%;height:20px;background:var(--device-bezel);border-bottom:4px solid var(--device-edge);clip-path:polygon(40% 0,60% 0,65% 80%,100% 80%,100% 100%,0 100%,0 80%,35% 80%)}
.nf-device-laptop{right:0;bottom:7%;width:57%;height:52%;border-radius:8px 8px 2px 2px;padding:6px}
.nf-device-base{position:absolute;left:-7%;bottom:-12px;width:114%;height:13px;border-radius:2px 2px 40% 40%;background:var(--device-metal);border-bottom:5px solid var(--device-edge)}
.nf-device-phone{left:6%;bottom:0;width:14%;height:45%;border-radius:12px;padding:4px;z-index:2}
.nf-device-preview .nf-devices,.nf-device-preview .nf-footer{display:none}
.nf-device-preview .nf-billboard{min-height:360px!important;height:360px!important;padding-top:100px!important}
.nf-device-preview .nf-billboard h1{font-size:28px!important}
.nf-device-preview .nf-plot{display:none}
.nf-device-preview .nf-rows{margin-top:16px!important}
.nf-device-preview .nf-brand{height:60px}
.nf-device-preview .nf-row{margin-bottom:20px}
.nf-device-preview .nf-tile{flex-basis:130px}
@media(max-width:900px){.nf-device-stage{grid-row:1}.nf-devices{padding-inline:0}}
@media(max-width:760px){.nf-device-preview .nf-billboard{padding-top:130px!important}.nf-device-preview .nf-billboard h1{font-size:24px!important}}

/* v30: real full screen on phones */
#videoWrap:fullscreen,#videoWrap:-webkit-full-screen{width:100vw!important;height:100dvh!important;max-width:none!important;aspect-ratio:auto!important;border-radius:0!important;background:#000}
#videoWrap:fullscreen video,#videoWrap:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}