/* Nubian TV — 080 concept blueprint. Presentation only; black canvas and existing shell. */
.np-tv { --tv-edge:#493116; --tv-gold:#e6bb60; --tv-red:#db3536; --tv-muted:#9f9b91; }
.np-tv .np-s-topbar { gap:10px; }
.np-tv .np-s-topnav { gap:1px; }
.np-tv .np-s-topnav>:is(a,button) { min-width:43px; padding-inline:3px; font-size:10px; }
.np-tv .np-s-topnav>[data-np-route="courses"] { min-width:70px; }
.np-tv .np-s-topnav>[data-np-route="videos"] { min-width:64px; }
.np-tv .np-s-search { flex-basis:164px; }
.np-tv .np-s-card { border-color:var(--tv-edge); border-radius:5px; background:linear-gradient(130deg,#0c0b09,#050505 78%); box-shadow:inset 0 0 0 2px #986d2310; }
.np-tv h2 { font:400 12px/1.4 Arial,Helvetica,sans-serif; }
.np-tv-layout { display:grid; grid-template-columns:226px minmax(0,1fr) 276px 294px; grid-template-rows:minmax(265px,auto) auto auto auto; gap:12px; margin-top:12px; align-items:start; }
.np-tv-layout>* { min-width:0; }
.np-tv-navigation { grid-column:1; grid-row:1 / 4; align-self:stretch; display:flex; flex-direction:column; }
.np-tv-featured { grid-column:2; grid-row:1; align-self:stretch; }
.np-tv-live { grid-column:3; grid-row:1; align-self:stretch; }
.np-tv-continuing { grid-column:2 / 4; grid-row:2; }
.np-tv-originals { grid-column:2; grid-row:3; }
.np-tv-channels { grid-column:3; grid-row:3 / 5; }
.np-tv-genres { grid-column:1 / 3; grid-row:4; }
.np-tv-right { grid-column:4; grid-row:1 / 5; display:grid; gap:12px; }
.np-tv-library { grid-column:2 / 4; grid-row:1 / 5; min-height:660px; }
.np-tv-layout.is-library { grid-template-rows:auto; }
.np-tv-layout.is-library .np-tv-navigation { grid-row:1; }
.np-tv-layout.is-library .np-tv-right { grid-row:1; }
.np-tv-layout.is-library .np-tv-library { grid-row:1; }
.np-tv-heading { display:flex; align-items:center; justify-content:space-between; min-height:35px; gap:8px; padding:9px 12px; }
.np-tv-heading>h2 { min-width:0; }
.np-tv .np-tv-heading>button { color:var(--tv-red); font-size:10px; white-space:nowrap; }
.np-tv .np-tv-heading>button:hover { color:#ff9a87; }
.np-tv .np-tv-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #79521b; padding:7px 13px; min-height:34px; border-radius:3px; color:#ecc46d; background:linear-gradient(#35220b,#100c05); box-shadow:inset 0 1px 4px #c6982a1a; font-size:12px; line-height:1.35; }
.np-tv .np-tv-button:hover { border-color:#e9b552; background:linear-gradient(#4a300e,#1a1307); }
.np-tv .np-tv-button.is-outline { background:#070705; border-color:#543a19; }
.np-tv .np-tv-button[aria-pressed="true"] { background:#3a280b; border-color:#d1a44e; }
.np-tv-button .np-s-icon { width:14px; height:14px; }
.np-tv progress { appearance:none; width:100%; height:4px; border:0; background:#1b1a15; border-radius:2px; overflow:hidden; display:block; accent-color:#dfac4a; }
.np-tv progress::-webkit-progress-bar { background:#1b1a15; }
.np-tv progress::-webkit-progress-value { background:linear-gradient(90deg,#eab34e,#85541c); }
.np-tv progress::-moz-progress-bar { background:linear-gradient(90deg,#eab34e,#85541c); }
.np-tv-navigation>h2 { display:flex; gap:13px; align-items:center; min-height:43px; padding:10px 17px; border-bottom:1px solid #513619; background:radial-gradient(ellipse at 20% 50%,#7d170a4a,transparent 60%),linear-gradient(110deg,#240706,#090302); font-size:14px; }
.np-tv-navigation>h2 .np-s-icon { width:25px; height:25px; color:#f6c461; filter:drop-shadow(0 0 6px #b9350a); }
.np-tv-nav-items { padding:4px 5px; }
.np-tv .np-tv-nav-items>button { display:flex; align-items:center; gap:12px; width:100%; min-height:37px; padding:8px 12px; color:#dccbaa; text-align:left; font-size:13px; border:1px solid transparent; border-radius:3px; }
.np-tv-nav-items>button>.np-s-icon { width:20px; height:20px; color:#d8aa4d; }
.np-tv .np-tv-nav-items>button.is-selected { background:linear-gradient(90deg,#392409,#171005); border-color:#614315; color:#f1cd6d; }
.np-tv .np-tv-nav-items>button:hover { background:#20170b; }
.np-tv-live-badge { color:#fff!important; background:#a70d17!important; border:1px solid #cf2c30!important; padding:1px 4px!important; border-radius:2px!important; font:400 10px/1.4 Arial,sans-serif; box-shadow:0 0 8px #e20d1920; }
.np-tv-nav-items .np-tv-live-badge { margin-left:auto; }
.np-tv-upgrade { margin:auto 9px 12px; padding:15px 13px 13px; border:1px solid #4b2a4c; border-radius:5px; background:radial-gradient(ellipse at 50% 110%,#4837212b,transparent 70%),#0d080d; }
.np-tv-upgrade h3 { display:flex; justify-content:space-between; gap:8px; align-items:center; font:400 12px/1.4 Arial,sans-serif; color:#ead1a1; }
.np-tv-upgrade .np-s-icon { width:22px; height:22px; color:var(--tv-gold); }
.np-tv-upgrade p { font-size:11px; line-height:1.8; margin:8px 0 11px; color:#c0bdb7; }
.np-tv-upgrade .np-tv-button { width:100%; }
/* Featured stage: imagery is decorative; title, badges, controls and carousel are real. */
.np-tv-featured { position:relative; min-height:265px; overflow:hidden; }
.np-tv-hero-art { position:absolute; inset:0 0 0 auto; width:66%; height:100%; object-fit:cover; object-position:53% 37%; mask-image:linear-gradient(90deg,transparent,#000 18%); }
.np-tv-featured:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#060605, #070604dd 25%,#09060212 67%),linear-gradient(0deg,#000d,transparent 25%); }
.np-tv-hero-copy { position:relative; z-index:1; padding:20px 38px 47px; }
.np-tv-featured-label { position:relative; display:inline-block; margin:-7px 0 19px -24px; padding:2px 7px; font-size:10px; border:1px solid #670e0c; border-left:2px solid #da1e13; box-shadow:-3px 0 8px #ed23153d; background:#220705; }
.np-tv-hero-copy h1 { color:#ecd3a0; text-transform:uppercase; font:400 31px/1.18 Georgia,'Times New Roman',serif; letter-spacing:.8px; max-width:85%; text-shadow:0 2px 6px #000; }
.np-tv-hero-copy>p { max-width:260px; color:#c8c5ba; font-size:13px; line-height:1.6; margin-top:8px; text-shadow:0 2px 4px #000; }
.np-tv-hero-copy>.np-tv-hero-meta { margin-top:12px; font-size:12px; color:#a4a39b; }
.np-tv-hero-actions { display:flex; gap:12px; margin-top:16px; }
.np-tv-dots { display:flex; justify-content:center; gap:7px; position:absolute; bottom:13px; left:38%; z-index:2; }
.np-tv-dots>button { width:13px; height:4px; border-radius:4px; background:#7a7369; position:relative; }
.np-tv-dots>button:before { content:""; position:absolute; inset:-8px -3px; }
.np-tv-dots>button[aria-pressed="true"] { background:#f1eee1; width:18px; }
.np-tv-hero-arrows { display:flex; gap:7px; position:absolute; bottom:15px; right:14px; z-index:2; }
.np-tv .np-tv-hero-arrows>button { width:26px; height:26px; display:grid; place-content:center; border:1px solid #6b491d; border-radius:3px; background:#080706bd; color:var(--tv-gold); font:25px/1 Georgia,serif; }
.np-tv-live .np-tv-heading { border-bottom:1px solid #322313; }
.np-tv-live-list { display:grid; }
.np-tv .np-tv-live-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:7px 10px; min-height:75px; border-bottom:1px solid #2e2010; }
.np-tv-live-row:last-child { border-bottom:0; }
.np-tv-live-art { position:relative; width:94px; height:68px; flex:0 0 94px; border:1px solid #674319; border-radius:3px; overflow:hidden; }
.np-tv-live-art img { width:100%; height:100%; object-fit:cover; }
.np-tv-live-art>.np-tv-live-badge { position:absolute; left:4px; top:4px; }
.np-tv-live-row>span:last-child { min-width:0; }
.np-tv-live-row strong { font-size:13px; font-weight:400; display:block; line-height:1.4; }
.np-tv-live-row small { font-size:10px; display:block; color:var(--tv-muted); margin-top:3px; }
.np-tv-live-row em { font-size:10px; display:block; color:#a4a095; margin-top:8px; font-style:normal; }
.np-tv-live-row em i { display:inline-block; background:#d22536; width:6px; height:6px; border-radius:50%; margin-right:4px; }
.np-tv-live-row:hover { background:#21170c; }
/* Library cards */
.np-tv-continue-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; padding:4px 11px 11px; }
.np-tv-card { min-width:0; border:1px solid #4b3418; border-radius:3px; background:#080807; overflow:hidden; }
.np-tv-card-cover { display:block; position:relative; width:100%; aspect-ratio:1.48; overflow:hidden; }
.np-tv-card-cover>img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.np-tv-card-cover:hover>img { transform:scale(1.035); }
.np-tv-card-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:36px; height:36px; border:2px solid #f4e8d0; border-radius:50%; display:grid; place-items:center; background:#080706b3; color:#fff; opacity:0; transition:opacity .15s; }
.np-tv-card-cover:hover .np-tv-card-play,.np-tv-card-cover:focus-visible .np-tv-card-play,[data-nptv-card="greatness"] .np-tv-card-play { opacity:1; }
.np-tv-card-play .np-s-icon { width:18px; height:18px; }
.np-tv-new-label { position:absolute; top:4px; left:4px; font-size:8px; padding:2px 4px; background:#730d07cf; border:1px solid #aa2312; color:#fff0e0; }
.np-tv-card-copy { padding:7px 7px 6px; }
.np-tv-card h3 { font:400 12px/1.35 Arial,sans-serif; min-height:17px; }
.np-tv-card h3 button { width:100%; text-align:left; }
.np-tv-card h3 button:hover { color:var(--tv-gold); }
.np-tv-card-copy>p { color:#9e9a8f; font-size:10px; line-height:1.4; margin-top:4px; min-height:14px; }
.np-tv-card progress { margin-top:12px; }
.np-tv-card-copy>small { display:block; text-align:right; margin-top:5px; font-size:9px; color:#9d998c; }
.np-tv-poster-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding:0 10px 10px; }
.np-tv-card.is-poster { position:relative; min-height:165px; }
.is-poster .np-tv-card-cover { aspect-ratio:.74; }
.is-poster .np-tv-card-cover:after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#070605 90%); pointer-events:none; }
.is-poster .np-tv-card-copy { position:relative; margin-top:-35px; padding:0 4px 5px; pointer-events:none; }
.is-poster h3 { font:400 14px/1.03 Georgia,serif; text-transform:uppercase; color:#ead3a0; text-align:center; text-shadow:0 1px 5px #000; min-height:30px; overflow-wrap:anywhere; }
.is-poster h3>button { text-align:center; pointer-events:auto; }
.is-poster .np-tv-card-copy>p { font-size:9px; text-align:center; color:#b39e6b; margin-top:4px; }
.np-tv-original-mark { position:absolute; left:7px; top:1px; color:#bc261d; font:700 19px/1.4 Georgia,serif; text-shadow:1px 1px 1px #000; }
.np-tv-channel-list { padding:2px 10px 16px; }
.np-tv-channel-row { display:flex; align-items:center; gap:5px; min-height:44px; }
.np-tv-channel-link { display:flex; align-items:center; min-width:0; flex:1; gap:8px; text-align:left; }
.np-tv-channel-link>span:last-child { min-width:0; }
.np-tv-channel-mark { display:grid; place-items:center; flex:0 0 38px; width:38px; height:35px; color:#d6a644; font:400 15px/1 Georgia,serif; border:1px solid #5b3816; border-radius:3px; background:radial-gradient(ellipse,#47290622,#070705); }
.np-tv-channel-mark.is-blue { color:#71a2e6; background:radial-gradient(ellipse,#304a79,#05080c 85%); text-shadow:0 0 6px #94c5ff; }
.np-tv-channel-mark.is-violet { color:#d247ca; }
.np-tv-channel-mark.is-cyan { color:#45b5b9; }
.np-tv-channel-link strong { display:block; font:400 10px/1.4 Arial,sans-serif; }
.np-tv-channel-link small { display:block; font-size:8px; margin-top:2px; color:#8f8b80; }
.np-tv-follow { font-size:9px!important; padding:3px 6px!important; border:1px solid #654619!important; border-radius:3px!important; color:#dabb80!important; }
.np-tv-follow[aria-pressed="true"] { background:#332209!important; }
.np-tv-genre-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; padding:0 8px 9px; }
.np-tv .np-tv-genre-grid>button { border:1px solid #533819; border-radius:3px; background:linear-gradient(140deg,#171005,#070705); min-height:65px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#dab460; font-size:10px; }
.np-tv-genre-grid .np-s-icon { width:27px; height:27px; stroke-width:1.1; }
.np-tv .np-tv-genre-grid>button:hover { border-color:#dba743; background:#302108; }
/* Right rail */
.np-tv-guide-tabs { display:flex; justify-content:space-around; border-bottom:1px solid #4a2819; padding-inline:10px; gap:8px; }
.np-tv-guide-tabs>button { flex:1; padding:6px 0 8px; font-size:11px; color:#b4b0a8; border-bottom:2px solid transparent; }
.np-tv-guide-tabs>button[aria-selected="true"] { color:#e13c3b; border-color:#b01d27; }
.np-tv-guide ul { padding:9px 12px 6px; min-height:186px; }
.np-tv-guide li { display:flex; gap:11px; align-items:start; padding:7px 0; min-height:28px; }
.np-tv-guide li>span { font-size:11px; color:#bca777; width:38px; flex:0 0 38px; }
.np-tv-guide li>button { min-width:0; flex:1; border-left:1px solid #3a2613; padding-left:11px; text-align:left; }
.np-tv-guide strong { font-size:11px; font-weight:400; display:block; }
.np-tv-guide small { display:block; color:#8f8a80; font-size:10px; margin-top:3px; }
.np-tv .np-tv-wide { display:flex; margin:4px 12px 12px; width:calc(100% - 24px); min-height:28px; font-size:10px; }
.np-tv-now { padding-bottom:7px; }
.np-tv-now .np-tv-heading { min-height:28px; padding-block:6px; }
.np-tv-now-cover { position:relative; display:block; width:calc(100% - 24px); margin:0 12px; aspect-ratio:2.03; border:1px solid #67401b!important; border-radius:3px!important; overflow:hidden; }
.np-tv-now-cover>img { display:block; width:100%; height:100%; object-fit:cover; }
.np-tv-now-cover:after { content:""; pointer-events:none; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#000b); }
.np-tv-now-play { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); border:2px solid #eae0c9; width:37px; height:37px; display:grid; place-items:center; border-radius:50%; background:#100d07; }
.np-tv-now-play .np-s-icon { width:20px; }
.np-tv-now-time { position:absolute; z-index:1; right:6px; bottom:6px; font-size:9px; }
.np-tv-now>progress { width:calc(100% - 28px); margin:1px 14px 0; height:3px; }
.np-tv-now>progress::-webkit-progress-value { background:#ba2233; }
.np-tv-now-copy { padding:11px 12px 3px; }
.np-tv-now-copy>h3 { font:400 12px/1.4 Arial,sans-serif; }
.np-tv-now-copy>p { font-size:10px; color:#9d998b; margin-top:4px; }
.np-tv-now-copy>div { display:flex; gap:6px; margin-top:7px; }
.np-tv-now-copy>div>button { display:inline-flex; align-items:center; gap:4px; border:1px solid #614318; border-radius:3px; padding:4px 6px; font-size:10px; color:#d9c095; }
.np-tv-now-copy .np-s-icon { width:14px; height:14px; }
.np-tv-now-copy [aria-pressed="true"] { background:#48300d; }
.np-tv-trending ol { padding:0 10px 13px; }
.np-tv-trending li { display:flex; align-items:center; gap:7px; min-height:44px; }
.np-tv-trend-number { color:#e3b13d; font-size:14px; }
.np-tv-trending li>button { display:flex; gap:7px; flex:1; min-width:0; text-align:left; align-items:center; }
.np-tv-trending img { width:44px; height:36px; object-fit:cover; border:1px solid #513815; border-radius:3px; flex:0 0 44px; }
.np-tv-trending strong { font-weight:400; font-size:10px; display:block; }
.np-tv-trending small { font-size:9px; display:block; color:#989488; margin-top:2px; }
.np-tv-trending li>small { align-self:end; margin-bottom:8px; font-size:9px; white-space:nowrap; }
.np-tv-rewards { margin-top:12px; }
.np-tv-rewards .np-s-library-level small { font-size:9px; color:#aaa18b; }
.np-tv-rewards .np-s-library-level progress { margin-top:3px; }
.np-tv-rewards .np-s-library-level>img { width:75px; height:64px; }
.np-tv-rewards .np-s-library-bonus>img { width:69px; height:66px; }
/* Results replace the centre area; the global navigation and context remain. */
.np-tv-library-controls { display:flex; flex-wrap:wrap; gap:8px; margin:8px 13px; }
.np-tv-library-controls>label:first-child { display:flex; gap:8px; align-items:center; flex:1 1 220px; border:1px solid #68471d; border-radius:3px; padding-left:10px; }
.np-tv-library-controls input,.np-tv-library-controls select { background:#0a0906; color:#e8deca; font:12px/1.4 Arial,sans-serif; min-height:36px; border:1px solid #63431b; border-radius:3px; padding:7px; max-width:100%; }
.np-tv-library-controls input { border:0; min-width:0; width:100%; }
.np-tv-library-controls .np-s-icon { color:var(--tv-gold); width:17px; }
.np-tv-library-count { margin:12px 14px; font-size:12px; color:#c1b7a0; }
.np-tv-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; padding:0 13px 16px; }
.np-tv-library .np-tv-card h3 { font-size:14px; }
.np-tv-library .np-tv-card-copy>p { font-size:11px; }
.np-tv-empty { padding:55px 25px; text-align:center; }
.np-tv-empty h3 { font:24px/1.3 Georgia,serif; color:var(--tv-gold); }
.np-tv-empty p { color:#b9b2a4; margin:12px 0 20px; }
/* Expanded card / player demonstration. No video element or stream is mounted. */
.np-tv .np-tv-player { width:min(850px,calc(100vw - 28px)); max-height:calc(100dvh - 40px); overflow:auto; border:1px solid #a77d36; border-radius:9px; padding:0; background:#080806; color:#ece5d8; box-shadow:0 20px 90px #000e; }
.np-tv-player::backdrop { background:#000d; backdrop-filter:blur(5px); }
.np-tv .np-tv-player.is-theater { width:min(1140px,calc(100vw - 24px)); }
.np-tv .np-tv-dialog-close { position:absolute; top:10px; right:10px; z-index:5; width:34px; height:34px; display:grid; place-items:center; color:#ffe4b1; background:#070605df; border:1px solid #8f6826; border-radius:50%; }
.np-tv-player-stage { position:relative; aspect-ratio:2.35; background:#000; overflow:hidden; }
.np-tv-player-stage>img { width:100%; height:100%; object-fit:cover; opacity:.8; }
.np-tv-player-stage:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 60%,#000a); pointer-events:none; }
.np-tv-player-label { position:absolute; top:15px; left:16px; max-width:calc(100% - 70px); padding:5px 8px; background:#160803d6; border:1px solid #705223; font-size:10px; letter-spacing:.5px; }
.np-tv-player-toggle { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:65px; height:65px; border:2px solid #e8c480!important; border-radius:50%!important; display:grid; place-items:center; background:#0b0804ca!important; color:#f4dfb3!important; }
.np-tv-player-toggle .np-s-icon { width:28px; height:28px; }
.np-tv-caption-preview { position:absolute; z-index:1; bottom:15px; left:50%; transform:translateX(-50%); width:max-content; max-width:85%; text-align:center; padding:6px 10px; font-size:12px; background:#000c; }
.np-tv-player-controls { padding:8px 16px 10px; background:#100b06; border-bottom:1px solid #543719; }
.np-tv-timeline>input { width:100%; accent-color:#d4a244; }
.np-tv-player-controls>div { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:3px; }
.np-tv-player-controls button { padding:5px 7px; border:1px solid #614720; border-radius:3px; color:#e9c781; font-size:12px; }
.np-tv-player-controls [data-nptv-time] { margin-right:auto; font-size:11px; color:#afa596; }
.np-tv-player-controls button[aria-pressed="true"] { background:#493012; }
.np-tv-player-copy { padding:21px 24px 24px; }
.np-tv-player-copy>small { color:#bea674; font-size:11px; }
.np-tv-player-copy>h2 { font:30px/1.2 Georgia,serif; color:#ecd29a; margin:8px 0 12px; }
.np-tv-player-copy>p { line-height:1.7; font-size:14px; }
.np-tv-player-actions { display:flex; flex-wrap:wrap; gap:9px; margin:18px 0; }
.np-tv-player-extra { border-top:1px solid #3b2b15; padding-top:15px; }
.np-tv-player-extra h3 { font:17px/1.4 Georgia,serif; color:#e5c183; margin-bottom:10px; }
.np-tv-player-extra button { display:flex; width:100%; justify-content:space-between; gap:12px; padding:9px 0; text-align:left; color:#d7c8ad; border-bottom:1px solid #302511; font-size:13px; }
.np-tv-player-extra p { line-height:1.6; font-size:13px; }
.np-tv-player-copy>.np-tv-player-status { margin-top:16px; padding:10px 12px; border:1px solid #6a4c21; border-radius:3px; color:#d3c199; background:#1b1205; font-size:12px; }
@media(max-width:1440px) { .np-tv-layout { grid-template-columns:205px minmax(0,1fr) 252px 274px; gap:10px; } .np-tv .np-s-topbar { gap:7px; padding-inline:13px; } .np-tv .np-s-search { flex-basis:140px; } .np-tv .np-s-topnav>[data-np-route="courses"] { min-width:64px; } .np-tv .np-s-logo { width:146px; flex-basis:146px; } .np-tv-hero-copy { padding-left:24px; padding-right:15px; } .np-tv-featured-label { margin-left:-10px; } .np-tv-hero-copy h1 { font-size:28px; } .np-tv-hero-copy>p { max-width:210px; font-size:12px; } .np-tv-live-art { width:77px; flex-basis:77px; height:62px; } .np-tv-live-row strong { font-size:12px; } .np-tv .np-tv-nav-items>button { font-size:12px; gap:9px; } .np-tv-card h3 { min-height:31px; font-size:11px; } .is-poster h3 { font:13px/1.05 Georgia,serif; min-height:29px; } .np-tv-poster-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .np-tv-card.is-poster { min-height:165px; } .is-poster .np-tv-card-cover { aspect-ratio:.85; } .np-tv-genre-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .np-tv-genre-grid>button { min-height:59px!important; } .np-tv-upgrade { margin-bottom:13px; } .np-tv-channel-link strong { font-size:10px; } .np-tv-channel-link small { font-size:8px; } .np-tv-trending li>small { font-size:8px; } }
@media(max-width:1190px) { .np-tv-layout { grid-template-columns:184px minmax(0,1fr) 266px; grid-template-rows:auto; } .np-tv-navigation { grid-column:1; grid-row:1 / 8; } .np-tv-featured { grid-column:2; grid-row:1; } .np-tv-live { grid-column:2; grid-row:2; } .np-tv-continuing { grid-column:2; grid-row:3; } .np-tv-originals { grid-column:2; grid-row:4; } .np-tv-channels { grid-column:2; grid-row:5; } .np-tv-genres { grid-column:2; grid-row:6; } .np-tv-right { grid-column:3; grid-row:1 / 8; } .np-tv-library { grid-column:2; grid-row:1 / 8; } .np-tv .np-tv-nav-items>button { padding-inline:10px; gap:8px; } .np-tv-hero-copy h1 { font-size:27px; max-width:100%; } .np-tv-hero-art { width:70%; opacity:.8; } .np-tv-hero-copy>p { max-width:215px; } .np-tv-hero-copy { padding:20px 18px 50px; } .np-tv-featured-label { margin-left:0; } .np-tv-continue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .np-tv-card h3 { font-size:12px; } .np-tv-card-copy>p { font-size:11px; } .np-tv-card-copy>small { font-size:10px; } .np-tv-live-art { width:95px; flex-basis:95px; } .np-tv-live-row strong { font-size:13px; } .np-tv-live-row small,.np-tv-live-row em { font-size:11px; } .np-tv-poster-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .np-tv-channel-list { display:grid; grid-template-columns:1fr; } .np-tv-channel-link strong { font-size:12px; } .np-tv-channel-link small { font-size:10px; } .np-tv .np-tv-follow { font-size:11px!important; } .np-tv-channel-row { min-height:52px; } .np-tv-genre-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .np-tv-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .np-tv-library-controls>label { flex:1 1 110px; min-width:0; } .np-tv-library-controls select { width:100%; } .np-tv-layout.is-library .np-tv-library { grid-column:2; } }
@media(max-width:1000px) { .np-tv-layout { grid-template-columns:184px minmax(0,1fr); gap:12px; } .np-tv-right { grid-column:2; grid-row:7; grid-template-columns:repeat(2,minmax(0,1fr)); } .np-tv-layout.is-library .np-tv-right { grid-column:2; grid-row:2; } .np-tv-layout.is-library .np-tv-navigation { grid-row:1 / 3; } .np-tv-guide ul { min-height:0; } .np-tv .np-tv-featured { min-height:274px; } .np-tv-hero-copy h1 { font-size:31px; } .np-tv-hero-copy>p { font-size:13px; max-width:240px; } .np-tv-poster-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .np-tv .np-tv-card h3 { font-size:14px; min-height:19px; } .np-tv .is-poster h3 { font-size:18px; min-height:37px; } .np-tv-card-copy>small { font-size:11px; } .np-tv-card-copy { padding:10px; } .np-tv-live-list { grid-template-columns:1fr; } .np-tv-live-row { padding:9px 12px!important; } .np-tv-channel-link strong { font-size:13px; } .np-tv .np-tv-genre-grid>button { font-size:12px; min-height:74px!important; } }
@media(max-width:800px) { .np-tv-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; } .np-tv-layout>:not(.np-tv-navigation),.np-tv-layout.is-library>:not(.np-tv-navigation) { grid-column:1; grid-row:auto; } .np-tv-navigation,.np-tv-layout.is-library .np-tv-navigation { display:none; grid-column:1; grid-row:auto; } .np-tv.is-navigation-open .np-tv-navigation { display:block; } .np-tv-nav-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:8px; } .np-tv .np-tv-nav-items>button { min-height:42px; } .np-tv-upgrade { display:none; } .np-tv-right { grid-template-columns:repeat(3,minmax(0,1fr)); } .np-tv-featured { min-height:282px!important; } .np-tv-hero-copy { padding:24px 28px 50px; } .np-tv-hero-copy h1 { font-size:35px; } .np-tv-hero-copy>p { max-width:280px; font-size:14px; } .np-tv-hero-art { width:57%; opacity:1; } .np-tv-featured:after { background:linear-gradient(90deg,#060605,#070604bf 25%,transparent 78%),linear-gradient(0deg,#0009,transparent 25%); } .np-tv-live-list { grid-template-columns:repeat(3,minmax(0,1fr)); } .np-tv .np-tv-live-row { flex-direction:column; align-items:stretch; gap:8px; border-right:1px solid #322413; padding:10px!important; } .np-tv-live-art { width:100%; height:100px; flex-basis:auto; } .np-tv-live-row strong { font-size:13px; } .np-tv-live-row em { margin-top:5px; } .np-tv-continue-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .np-tv-poster-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; } .np-tv .is-poster h3 { font-size:15px; min-height:32px; } .np-tv-channel-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 15px; } .np-tv-genre-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .np-tv-right { grid-template-columns:repeat(2,minmax(0,1fr)); } .np-tv-heading { min-height:40px; } .np-tv-heading>h2 { font-size:12px; } .np-tv .np-tv-heading>button { font-size:11px; } .np-tv-guide strong { font-size:12px; } .np-tv-guide small { font-size:11px; } .np-tv-now-copy>h3 { font-size:13px; } .np-tv-trending strong { font-size:12px; } .np-tv-trending small,.np-tv-trending li>small { font-size:10px; } .np-tv-trending li { min-height:49px; } .np-tv-trending img { width:46px; height:39px; flex-basis:46px; } .np-tv-library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .np-tv-library { min-height:480px; } }
@media(max-width:600px) { .np-tv .np-s-topbar { gap:8px; } .np-tv-nav-items { grid-template-columns:repeat(2,minmax(0,1fr)); } .np-tv-featured { min-height:294px!important; } .np-tv-hero-art { width:70%; opacity:.82; } .np-tv-hero-copy { padding:20px 18px 50px; } .np-tv-hero-copy h1 { font-size:30px; max-width:90%; } .np-tv-hero-copy>p { max-width:235px; font-size:13px; } .np-tv-hero-actions { gap:8px; } .np-tv-button { min-height:37px!important; } .np-tv-live-list { grid-template-columns:1fr; } .np-tv .np-tv-live-row { flex-direction:row; align-items:center; gap:13px; padding:11px 13px!important; } .np-tv-live-art { width:109px; height:73px; flex:0 0 109px; } .np-tv-live-row strong { font-size:14px; } .np-tv-live-row small,.np-tv-live-row em { font-size:11px; } .np-tv-continue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .np-tv .np-tv-card h3 { font-size:13px; min-height:35px; } .np-tv-card-cover { aspect-ratio:1.35; } .np-tv-card-copy { padding:9px 8px; } .np-tv-card-copy>p { font-size:11px; } .np-tv-card-copy>small { font-size:10px; } .np-tv-poster-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .np-tv .is-poster h3 { font-size:15px; min-height:34px; } .is-poster .np-tv-card-copy { padding:0 3px 6px; } .is-poster .np-tv-card-copy>p { font-size:10px; } .np-tv-card.is-poster { min-height:160px; } .is-poster .np-tv-card-cover { aspect-ratio:.7; } .np-tv-channel-list { grid-template-columns:1fr; padding:0 12px 10px; } .np-tv-channel-row { min-height:53px; } .np-tv-channel-mark { width:43px; height:39px; flex-basis:43px; font-size:16px; } .np-tv-channel-link strong { font-size:13px; } .np-tv-channel-link small { font-size:10px; } .np-tv-genre-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .np-tv .np-tv-genre-grid>button { min-height:74px!important; font-size:11px; } .np-tv-right { grid-template-columns:1fr; } .np-tv-guide ul { padding-block:12px; } .np-tv-guide li { padding-block:8px; } .np-tv-guide li>span,.np-tv-guide strong { font-size:12px; } .np-tv-guide small { font-size:11px; } .np-tv-guide-tabs>button { font-size:12px; min-height:35px; } .np-tv .np-tv-wide { font-size:12px; } .np-tv-now-cover { aspect-ratio:2.1; } .np-tv-now-copy>h3 { font-size:15px; } .np-tv-now-copy>p { font-size:12px; } .np-tv-now-copy>div>button { padding:7px 10px; font-size:12px; } .np-tv-now-copy { padding-bottom:10px; } .np-tv-now-time { font-size:11px; } .np-tv-trending li { min-height:56px; } .np-tv-trending img { width:55px; height:44px; flex-basis:55px; } .np-tv-trending strong { font-size:13px; } .np-tv-trending li>small,.np-tv-trending small { font-size:10px; } .np-tv-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-inline:10px; } .np-tv-library-controls>label:first-child { flex-basis:100%; } .np-tv-library .np-tv-card h3 { font-size:13px; } .np-tv-player-stage { aspect-ratio:1.65; } .np-tv-player-copy { padding:17px; } .np-tv-player-copy>h2 { font-size:25px; } .np-tv-player-label { font-size:8px; left:10px; } .np-tv-player-controls { padding-inline:10px; } .np-tv-player-controls>div { gap:6px; } .np-tv-player-controls button { font-size:11px; padding-inline:6px; } .np-tv-player-copy>p { font-size:13px; } .np-tv-player-toggle { width:54px; height:54px; } .np-tv-player-actions .np-tv-button { flex:1 1 auto; } .np-tv-rewards .np-s-daily-reward>.np-tv-button { min-width:108px; } }
@media(max-width:359px) { .np-tv-hero-copy h1 { font-size:27px; } .np-tv-nav-items { padding:6px; } .np-tv .np-tv-nav-items>button { font-size:11px; padding:7px; gap:6px; } .np-tv-live-art { width:90px; flex-basis:90px; } .np-tv .np-tv-card h3 { font-size:12px; } .np-tv .is-poster h3 { font-size:13px; } .np-tv-card.is-poster { min-height:143px; } .np-tv-continue-grid { gap:7px; padding-inline:8px; } .np-tv-hero-copy>p { max-width:205px; } .np-tv-trending strong { font-size:12px; } .np-tv-library-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .np-tv-card-cover>img,.np-tv-card-play { transition:none; } }