/* NOVA shell bundle unified-v3-webperf-mp4-20260831. Exact source order; generated, do not reorder. */
/* ===== source: brand-tokens.css ===== */
:root {
--sgn-background: #000000;
--sgn-background-alt: #07080D;
--sgn-white: #F7F8FC;
--sgn-ink: #101525;
--sgn-cyan: #14D7FF;
--sgn-blue: #566DFF;
--sgn-violet: #9B4DFF;
--sgn-magenta: #F04AD8;
--sgn-gradient: linear-gradient(100deg, var(--sgn-magenta) 0%, var(--sgn-violet) 50%, var(--sgn-cyan) 100%);
/* Final-freeze shared surfaces: dedicated hubs must consume these instead of
inventing local black boxes, borders or one-off neon colors. */
--sgn-surface-0: rgba(7, 8, 13, .78);
--sgn-surface-1: rgba(10, 12, 19, .84);
--sgn-surface-2: rgba(12, 14, 22, .92);
--sgn-glass: linear-gradient(145deg, rgba(13, 15, 23, .86), rgba(5, 6, 10, .92));
--sgn-glass-strong: linear-gradient(145deg, rgba(16, 18, 27, .95), rgba(6, 7, 11, .97));
--sgn-dark-gradient: linear-gradient(180deg, #05060A 0%, #000000 66%, #020205 100%);
--sgn-card-gradient: linear-gradient(150deg, rgba(13, 15, 23, .94), rgba(5, 6, 10, .98));
--sgn-neon-button-gradient: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 50%, #14D7FF 100%);
--sgn-border-soft: rgba(255,255,255,.09);
--sgn-border-accent: rgba(155,77,255,.42);
--sgn-border-cyan: rgba(20,215,255,.30);
--sgn-text-soft: rgba(247,248,252,.68);
--sgn-text-muted: rgba(247,248,252,.46);
--sgn-shadow-panel: 0 18px 44px rgba(0,0,0,.38);
--sgn-shadow-card: 0 12px 30px rgba(0,0,0,.34);
--sgn-shadow-neon: 0 0 0 1px rgba(155,77,255,.16), 0 14px 34px rgba(86,109,255,.16), 0 0 28px rgba(20,215,255,.08);
--sgn-radius-card: 14px;
--sgn-radius-panel: 18px;
--sgn-blur: 20px;
}
/* ===== source: app.css ===== */
/* inline import from app.css: match-center.css */
/* Oscar TV — Match Center */
.mc-root{min-height:100vh;background:#050506;color:#fff;padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px));font-family:inherit;overflow-x:hidden}.mc-root button{font-family:inherit}.mc-list-hero{min-height:470px;padding:calc(var(--safe-top,0px) + 18px) var(--page-pad,16px) 30px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:radial-gradient(circle at 50% 18%,rgba(18,105,69,.36),transparent 34%),linear-gradient(180deg,#073427 0,#08281f 31%,#060d0b 68%,#050506 100%)}.mc-list-actions{width:100%;margin-bottom:auto;display:flex;align-items:center;gap:14px;direction:ltr}.mc-round-icon,.mc-round-play{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff}.mc-round-play{background:#70c052;box-shadow:0 0 0 8px rgba(112,192,82,.12)}.mc-trophy{width:142px;height:116px;display:grid;place-items:center;color:#ffca39;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}.mc-list-hero h1{margin:8px 0 32px;font-size:2rem;font-weight:900}.mc-day-tabs{display:flex;gap:12px;direction:ltr}.mc-day-tabs button{min-width:96px;padding:13px 20px;border-radius:30px;background:#202524;color:#9b9f9e;font-size:1rem;font-weight:700}.mc-day-tabs button.active{background:#515857;color:#fff}.mc-list-hero p{margin:15px 0 0;color:#858b89;font-size:.8rem}.mc-leagues{display:flex;gap:20px;padding:18px var(--page-pad,16px) 28px;overflow-x:auto;scrollbar-width:none}.mc-leagues::-webkit-scrollbar{display:none}.mc-leagues button{flex:0 0 104px;display:grid;justify-items:center;gap:8px;background:transparent;color:#8b8e8d;text-align:center}.mc-leagues button span{width:66px;height:66px;display:grid;place-items:center;color:#f3f3f3}.mc-leagues button strong{font-size:.75rem;line-height:1.45;font-weight:500}.mc-list-section{padding:0 var(--page-pad,16px) 30px}.mc-section-title{display:flex;justify-content:flex-end}.mc-section-title h2{margin:0 0 14px;font-size:1.35rem;font-weight:900}.mc-section-title h2 i{display:inline-block;width:5px;height:30px;margin-inline-start:10px;vertical-align:middle;background:#9B4DFF;border-radius:4px}.mc-match-card{position:relative;width:100%;min-height:188px;margin-bottom:13px;padding:22px 18px;display:grid;grid-template-columns:1fr 122px 1fr;align-items:center;gap:8px;border-radius:21px;background:linear-gradient(135deg,#1e1e20,#151516);overflow:hidden;color:#fff}.mc-match-card::before,.mc-match-card::after{content:"";position:absolute;width:46%;height:100%;inset-block:0;opacity:.06;background-size:contain;background-position:center;background-repeat:no-repeat}.mc-match-card::before{left:0;background-image:url('../images/flags/qatar.svg')}.mc-match-card::after{right:0;background-image:url('../images/flags/canada.svg')}.mc-match-team,.mc-match-score{position:relative;z-index:2;display:grid;justify-items:center;gap:10px;text-align:center}.mc-match-team img{width:72px;height:46px;object-fit:cover}.mc-match-team strong{font-size:.92rem;font-weight:900}.mc-match-score b{font-size:1.7rem;direction:ltr}.mc-match-score span{padding:7px 16px;border-radius:18px;background:#292b2c;color:#7c8081;font-size:.72rem}.mc-match-score small{max-width:128px;display:flex;align-items:center;justify-content:center;gap:5px;color:#888b8c;font-size:.65rem}.mc-live-card{min-height:142px}.mc-live-card::before,.mc-live-card::after{display:none}.mc-source-logo{width:72px;height:72px;border-radius:16px;display:grid;place-items:center;background:#252527}.mc-source-logo img{width:82%;height:82%;object-fit:contain}.mc-live-play{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#9B4DFF}.mc-detail-hero{min-height:555px;padding:calc(var(--safe-top,0px) + 18px) var(--page-pad,16px) 30px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 50% 15%,rgba(20,110,72,.38),transparent 38%),linear-gradient(180deg,#073729 0,#082b21 38%,#07100d 72%,#050506 100%)}.mc-detail-actions{width:100%;display:flex;align-items:center;justify-content:space-between;direction:ltr}.mc-detail-actions span,.mc-detail-actions button{width:45px;height:45px;display:grid;place-items:center;color:#fff}.mc-competition{margin-top:13px;display:grid;justify-items:center;gap:8px;color:#aaafad}.mc-competition strong{font-size:1.2rem;font-weight:500}.mc-competition span{font-size:.78rem}.mc-scoreboard{width:100%;margin-top:34px;display:grid;grid-template-columns:1fr 125px 1fr;align-items:center;gap:8px}.mc-scoreboard>div{display:grid;justify-items:center;gap:15px}.mc-scoreboard img{width:108px;height:67px;object-fit:cover}.mc-scoreboard strong{font-size:1.15rem;font-weight:900}.mc-scoreboard section{display:grid;justify-items:center;gap:15px}.mc-scoreboard section b{font-size:2.65rem;direction:ltr;color:#b8bebc}.mc-scoreboard section em{padding:8px 20px;border-radius:17px;background:#21302b;color:#6f7a76;font-style:normal;font-weight:800}.mc-match-meta{margin-top:24px;display:grid;justify-items:center;gap:10px;color:#9ea4a2;font-size:.8rem}.mc-tabs{position:sticky;top:0;z-index:30;height:78px;display:flex;gap:8px;align-items:end;padding:0 0 11px;background:rgba(5,5,6,.96);backdrop-filter:blur(18px);overflow-x:auto;scrollbar-width:none}.mc-tabs::-webkit-scrollbar{display:none}.mc-tabs button{position:relative;flex:0 0 112px;padding:17px 5px 12px;background:transparent;color:#9b9b9e;font-size:.95rem;font-weight:900}.mc-tabs button.active{color:#fff}.mc-tabs button.active::after{content:"";position:absolute;left:28%;right:28%;bottom:0;height:5px;border-radius:5px;background:#9B4DFF}.mc-tab-content{padding:18px var(--page-pad,16px) 34px}.mc-videos-tab,.mc-related-videos{display:grid;gap:14px}.mc-video-card{min-height:190px;display:grid;grid-template-columns:minmax(220px,36%) 1fr;direction:ltr;border-radius:20px;background:#1b1b1d;overflow:hidden;cursor:pointer}.mc-video-thumb{position:relative;min-height:190px;overflow:hidden;direction:rtl}.mc-video-thumb img{width:100%;height:100%;object-fit:cover}.mc-video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.36) 100%)}.mc-video-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:3px solid rgba(255,255,255,.74);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.24);color:#fff}.mc-video-thumb em,.mc-video-thumb b{position:absolute;z-index:2;bottom:9px;padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.75);color:#fff;font-style:normal;font-size:.68rem}.mc-video-thumb em{left:8px}.mc-video-thumb b{right:8px}.mc-video-copy{min-width:0;padding:18px 18px 14px;display:flex;flex-direction:column;align-items:flex-end;direction:rtl}.mc-video-copy strong{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1rem;line-height:1.55;font-weight:900;text-align:right}.mc-video-copy span{margin-top:10px;color:#9b9b9e;font-size:.74rem}.mc-video-copy small{margin-top:auto;display:flex;align-items:center;gap:7px;color:#77777b;font-size:.65rem}.mc-video-copy small i,.mc-video-meta i{width:5px;height:5px;border-radius:50%;background:#9B4DFF}.mc-details-card{padding:8px 18px;border-radius:22px;background:#1b1b1d}.mc-info-row{min-height:94px;display:grid;grid-template-columns:44% 1fr;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.06)}.mc-info-row:last-child{border-bottom:0}.mc-info-row span{display:flex;align-items:center;justify-content:flex-start;gap:12px;color:#a7a7aa;font-size:.92rem}.mc-info-row strong{font-size:.9rem;line-height:1.6;text-align:left;direction:auto}.mc-events{position:relative;min-height:1200px;padding:4px 0 30px}.mc-event-line{position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);background:#303033}.mc-event-row{position:relative;min-height:118px;display:grid;grid-template-columns:1fr 72px 1fr;align-items:center}.mc-event-row time{grid-column:2;justify-self:center;z-index:3;padding:8px 12px;border-radius:18px;background:#4a4a4d;color:#fff;font-size:.78rem;font-weight:900;direction:ltr}.mc-event-node{position:absolute;z-index:4;left:calc(50% + 44px);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#111214;border:5px solid #1c1d20;font-size:1.55rem;font-weight:900}.mc-event-row.away .mc-event-node{left:auto;right:calc(50% + 44px)}.mc-event-row>div{grid-column:3;padding-inline-start:95px}.mc-event-row.away>div{grid-column:1;padding-inline:0 95px;text-align:left}.mc-event-row strong,.mc-event-row small{display:block}.mc-event-row strong{font-size:.95rem;font-weight:900}.mc-event-row small{margin-top:5px;color:#a42c34;font-size:.72rem}.mc-event-row.sub strong{color:#166e2d}.mc-event-row.yellow .mc-event-node,.mc-event-row.red .mc-event-node{border:0;border-radius:6px;width:28px;height:48px;transform:rotate(-12deg)}.mc-event-row.yellow .mc-event-node{background:#ffd51b}.mc-event-row.red .mc-event-node{background:#ee1b2b}.mc-event-row.yellow .mc-event-node::before,.mc-event-row.red .mc-event-node::before{content:""}.mc-event-row>button{position:absolute;z-index:5;left:calc(50% + 26px);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#9B4DFF;color:#fff}.mc-team-switch{height:82px;margin-bottom:18px;display:grid;grid-template-columns:1fr 1fr;border-radius:36px;background:#1c1c1e;overflow:hidden}.mc-team-switch button{position:relative;color:#a3a3a6;font-size:.95rem;font-weight:900}.mc-team-switch button.active{color:#fff}.mc-team-switch button.active::after{content:"";position:absolute;left:38%;right:38%;bottom:10px;height:5px;border-radius:5px;background:#9B4DFF}.mc-pitch{position:relative;width:100%;aspect-ratio:.92;border:4px solid #83bf7d;border-radius:24px;background:repeating-linear-gradient(0deg,#2f8737 0,#2f8737 13%,#2c7e34 13%,#2c7e34 26%);overflow:hidden}.mc-pitch::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:rgba(255,255,255,.34)}.mc-pitch::after{content:"";position:absolute;left:50%;top:50%;width:112px;height:112px;border:3px solid rgba(255,255,255,.34);border-radius:50%;transform:translate(-50%,-50%)}.mc-pitch-lines i,.mc-pitch-lines b{position:absolute;left:25%;right:25%;height:17%;border:3px solid rgba(255,255,255,.35)}.mc-pitch-lines i{top:-2px;border-top:0}.mc-pitch-lines b{bottom:-2px;border-bottom:0}.mc-player{position:absolute;z-index:3;width:84px;transform:translate(-50%,-50%);display:grid;justify-items:center;text-align:center}.mc-player>span,.mc-bench-rail span{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#363638;border:3px solid var(--player-accent);box-shadow:0 5px 12px rgba(0,0,0,.25)}.mc-player>span i,.mc-bench-rail span i{position:absolute;left:-8px;bottom:-5px;min-width:25px;height:25px;padding:0 4px;border-radius:15px;display:grid;place-items:center;background:var(--player-accent);color:#fff;border:2px solid #fff;font-style:normal;font-size:.65rem;font-weight:900}.mc-player strong{max-width:88px;margin-top:4px;color:#fff;font-size:.68rem;line-height:1.2;text-shadow:0 1px 3px #000}.mc-bench-title{margin:25px 0 15px;font-size:1.15rem;text-align:right}.mc-bench-rail{display:flex;gap:22px;overflow-x:auto;padding:4px 0 18px;scrollbar-width:none}.mc-bench-rail>div{flex:0 0 80px;display:grid;justify-items:center;gap:5px;text-align:center}.mc-bench-rail strong{font-size:.72rem}.mc-bench-rail small{color:#77777b;font-size:.65rem}.mc-stats{display:grid;gap:30px;padding:5px 0 20px}.mc-stat-row h3{margin:0 0 18px;display:flex;align-items:center;justify-content:center;gap:10px;color:#b2b2b5;font-size:1rem;font-weight:900}.mc-stat-icon{display:inline-grid;place-items:center;color:#a94d60}.mc-stat-values{display:grid;grid-template-columns:74px 1fr 74px;align-items:center;gap:12px;direction:ltr}.mc-stat-values>strong{font-size:1.1rem;text-align:center}.mc-stat-values>div{height:9px;border-radius:8px;background:#232325;overflow:hidden;direction:rtl}.mc-stat-values i{display:block;height:100%;border-radius:8px;background:#9B4DFF}.mc-poll h2{margin:0;font-size:1.45rem}.mc-poll>p{margin:6px 0 20px;color:#77777b}.mc-poll-options{display:grid;grid-template-columns:1fr .7fr 1fr;gap:12px}.mc-poll-options button{min-height:145px;padding:14px;display:grid;place-items:center;gap:10px;border:2px solid #3b3b3e;border-radius:19px;background:#202022;color:#fff}.mc-poll-options button.active{border-color:#9B4DFF;box-shadow:0 0 0 3px rgba(155,77,255,.12)}.mc-poll-options img{width:78px;height:50px;object-fit:cover}.mc-poll-options strong{font-size:.95rem}.mc-poll-bar{height:58px;margin-top:24px;display:flex;direction:ltr;border-radius:13px;overflow:hidden}.mc-poll-bar span{display:grid;place-items:center;background:#ed3c3f;font-weight:900}.mc-poll-bar span:nth-child(2){background:#c51d24}.mc-poll-bar span:nth-child(3){background:#9e0008}.mc-poll>small{display:block;margin-top:12px;color:#77777b;text-align:left}.mc-comments-head{margin-top:28px;padding-top:25px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #313133}.mc-comments-head h2{font-size:1.25rem}.mc-comments-head button{color:#aaa}.mc-comment-composer,.mc-reply-composer{display:grid;grid-template-columns:1fr auto;gap:9px;margin:14px 0}.mc-comment-composer input,.mc-reply-composer input{min-width:0;padding:13px 15px;border:1px solid #38383b;border-radius:15px;background:#171719;color:#fff;font:inherit}.mc-comment-composer button,.mc-reply-composer button{padding:0 16px;border-radius:13px;background:#9B4DFF;color:#fff;font-weight:900}.mc-comments{display:grid;gap:16px}.mc-comment{padding:18px;display:grid;grid-template-columns:58px 1fr;gap:14px;border:1px solid #38383a;border-radius:22px;background:#28282a}.mc-comment.reply{margin-top:14px;padding:12px;background:#202022;border-radius:16px}.mc-avatar{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#4085ec;color:#fff}.mc-avatar.brown{background:#8b5c4d}.mc-avatar.gray{background:#555}.mc-avatar.red{background:#9B4DFF}.mc-comment-body header{display:flex;align-items:center;gap:8px}.mc-comment-body header strong{font-size:.9rem}.mc-comment-body header i{width:5px;height:5px;border-radius:50%;background:#9B4DFF}.mc-comment-body header small{color:#8a8a8d;font-size:.68rem}.mc-comment-body p{margin:12px 0;color:#c0c0c3;font-size:.9rem;line-height:1.85}.mc-comment-actions{display:flex;align-items:center;gap:12px}.mc-comment-actions button,.mc-comment-actions span{padding:8px 13px;border-radius:20px;background:#3b3b3d;color:#9d9da0;font-size:.68rem}.mc-comment-actions span{color:#f0444c}.mc-more-comments{margin:25px auto 0;padding:13px 24px;display:block;border-radius:25px;background:#1d1d1f;color:#e13c43}.mc-video-details{min-height:100vh;padding-bottom:30px}.mc-video-topbar{min-height:88px;padding:calc(var(--safe-top,0px) + 8px) var(--page-pad,16px) 12px;display:grid;grid-template-columns:1fr 44px;align-items:center;gap:12px;background:#18181a}.mc-video-topbar h1{margin:0;font-size:1.25rem;line-height:1.5}.mc-video-topbar button{width:44px;height:44px;display:grid;place-items:center;color:#fff}.mc-video-hero{position:relative;width:calc(100% - 2*var(--page-pad,16px));aspect-ratio:16/9;margin:24px var(--page-pad,16px) 0;border-radius:20px;overflow:hidden}.mc-video-hero img{width:100%;height:100%;object-fit:cover}.mc-video-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.16)}.mc-video-hero span{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;border:4px solid rgba(255,255,255,.75);background:rgba(0,0,0,.35);color:#fff}.mc-video-hero em,.mc-video-hero b{position:absolute;z-index:3;bottom:14px;padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.72);font-style:normal;color:#fff}.mc-video-hero em{left:14px}.mc-video-hero b{right:14px}.mc-video-details>h2,.mc-related-title{margin:24px var(--page-pad,16px) 0;font-size:1.35rem}.mc-video-meta{margin:9px var(--page-pad,16px) 18px;display:flex;align-items:center;gap:8px;color:#77777b}.mc-video-match-card{margin:0 var(--page-pad,16px);padding:25px 18px;display:grid;grid-template-columns:1fr 115px 1fr;align-items:center;border-radius:20px;background:#1b1b1d}.mc-video-match-card>div{display:grid;justify-items:center;gap:10px}.mc-video-match-card img{width:68px;height:44px;object-fit:cover}.mc-video-match-card section{display:grid;justify-items:center;gap:6px}.mc-video-match-card section b{font-size:1.6rem;direction:ltr}.mc-video-match-card section span,.mc-video-match-card section small{color:#8c8c90;font-size:.72rem}.mc-comments-link{width:calc(100% - 2*var(--page-pad,16px));min-height:92px;margin:25px var(--page-pad,16px) 0;padding:0 20px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;border-radius:20px;background:#1b1b1d;color:#fff}.mc-comments-link span{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:900}.mc-comments-link em{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#282253;font-style:normal}.mc-related-videos{padding:18px var(--page-pad,16px)}
@media(max-width:600px){.mc-list-hero{min-height:430px}.mc-match-card{grid-template-columns:1fr 96px 1fr;min-height:170px;padding:18px 10px}.mc-scoreboard{grid-template-columns:1fr 100px 1fr}.mc-scoreboard img{width:88px;height:55px}.mc-scoreboard section b{font-size:2.1rem}.mc-video-card{grid-template-columns:42% 1fr;min-height:150px}.mc-video-thumb{min-height:150px}.mc-video-copy{padding:13px}.mc-video-copy strong{font-size:.86rem}.mc-info-row{grid-template-columns:48% 1fr}.mc-event-row>div{padding-inline-start:78px}.mc-event-row.away>div{padding-inline:0 78px}.mc-pitch{aspect-ratio:.82}.mc-player{width:68px}.mc-player>span{width:48px;height:48px}.mc-player strong{font-size:.61rem}.mc-stat-values{grid-template-columns:58px 1fr 58px}.mc-poll-options{gap:8px}.mc-poll-options button{min-height:125px}.mc-comment{grid-template-columns:48px 1fr;padding:14px}.mc-avatar{width:46px;height:46px}.mc-video-match-card{grid-template-columns:1fr 90px 1fr}.mc-video-match-card img{width:56px;height:36px}}
@media(min-width:700px){.mc-root{max-width:980px;margin:0 auto}.mc-videos-tab,.mc-related-videos{grid-template-columns:repeat(2,minmax(0,1fr))}.mc-video-card{grid-template-columns:42% 1fr}.mc-details-card{max-width:780px;margin:0 auto}.mc-stats,.mc-audience,.mc-lineup-tab,.mc-events{max-width:820px;margin:0 auto}}
.mc-player>span>img,.mc-bench-rail span>img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mc-comment-actions .reply-toggle{display:inline-flex;align-items:center;gap:6px;color:#f0444c}
/* Match event glyphs use vector/CSS shapes instead of emoji text. */
.mc-sub-glyph{position:relative;width:28px;height:28px;display:inline-block}
.mc-sub-glyph i,.mc-sub-glyph b{position:absolute;width:13px;height:5px;border-radius:4px;transform:rotate(-38deg)}
.mc-sub-glyph i{background:#28c35a;left:2px;top:7px;box-shadow:7px -3px 0 -2px #28c35a}
.mc-sub-glyph b{background:#f12a39;right:2px;bottom:7px;box-shadow:-7px 3px 0 -2px #f12a39}
.mc-card-glyph{display:inline-block;width:16px;height:25px;border-radius:3px;transform:rotate(-12deg);box-shadow:0 3px 10px rgba(0,0,0,.3)}
.mc-card-glyph.yellow{background:#ffc915}.mc-card-glyph.red{background:#f10b1c}
.mc-dot-glyph{width:9px;height:9px;border-radius:50%;background:#ef0717;display:inline-block}
.mc-competition strong{display:inline-flex;align-items:center;gap:7px;justify-content:center}
.mc-match-meta span{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.mc-detail-actions .mc-notify.active{color:#ffc400;background:rgba(255,196,0,.13);box-shadow:0 0 18px rgba(255,196,0,.14)}
/* Pixel-calibrated phone layout for the 1080x2280 Oscar TV references.
Values are expressed in CSS device-independent pixels (≈ 2.7–3 physical px on the reference Samsung device). */
@media (max-width: 600px) {
.mc-root { padding-bottom: calc(48px + var(--safe-bottom,0px)); }
.mc-list-hero { min-height: 262px; padding: calc(var(--safe-top,0px) + 8px) 15px 14px; }
.mc-list-actions { gap: 6px; }
.mc-round-icon,.mc-round-play { width: 36px; height: 36px; }
.mc-round-play { box-shadow: 0 0 0 5px rgba(112,192,82,.12); }
.mc-trophy { width: 84px; height: 68px; }
.mc-list-hero h1 { margin: 3px 0 18px; font-size: 1.18rem; }
.mc-day-tabs { gap: 7px; }
.mc-day-tabs button { min-width: 72px; padding: 9px 13px; border-radius: 22px; font-size: .78rem; }
.mc-list-hero p { margin-top: 8px; font-size: .62rem; }
.mc-leagues { gap: 11px; padding: 10px 15px 17px; }
.mc-leagues button { flex-basis: 72px; gap: 4px; opacity: .72; transition: opacity .16s ease, transform .16s ease; }
.mc-leagues button.active { opacity: 1; transform: translateY(-1px); color: #fff; }
.mc-leagues button span { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.025); }
.mc-leagues button.active span { color: #9B4DFF; background: rgba(155,77,255,.08); box-shadow: 0 0 0 1px rgba(155,77,255,.18); }
.mc-leagues button strong { font-size: .58rem; line-height: 1.35; }
.mc-list-section { padding: 0 8px 20px; }
.mc-section-title h2 { margin-bottom: 8px; font-size: .98rem; }
.mc-section-title h2 i { width: 3px; height: 21px; margin-inline-start: 7px; }
.mc-match-card { min-height: 93px; margin-bottom: 7px; padding: 10px 8px; grid-template-columns: 1fr 73px 1fr; gap: 4px; border-radius: 11px; }
.mc-match-team,.mc-match-score { gap: 5px; }
.mc-match-team img { width: 47px; height: 30px; }
.mc-match-team strong { font-size: .68rem; }
.mc-match-score b { font-size: 1.12rem; }
.mc-match-score span { padding: 4px 9px; font-size: .52rem; }
.mc-match-score small { max-width: 82px; gap: 3px; font-size: .48rem; }
.mc-live-card { min-height: 76px; }
.mc-source-logo { width: 43px; height: 43px; border-radius: 9px; }
.mc-live-play { width: 34px; height: 34px; }
.mc-detail-hero { min-height: 246px; padding: calc(var(--safe-top,0px) + 6px) 15px 12px; }
.mc-detail-actions span,.mc-detail-actions button { width: 36px; height: 36px; }
.mc-competition { margin-top: 0; gap: 3px; }
.mc-competition strong { font-size: .91rem; }
.mc-competition span { font-size: .62rem; }
.mc-scoreboard { margin-top: 13px; grid-template-columns: 1fr 78px 1fr; gap: 3px; }
.mc-scoreboard>div { gap: 7px; }
.mc-scoreboard img { width: 54px; height: 34px; }
.mc-scoreboard strong { font-size: .82rem; }
.mc-scoreboard section { gap: 7px; }
.mc-scoreboard section b { font-size: 1.75rem; }
.mc-scoreboard section em { padding: 5px 12px; border-radius: 12px; font-size: .66rem; }
.mc-match-meta { margin-top: 10px; gap: 4px; font-size: .61rem; }
.mc-tabs { height: 50px; gap: 0; padding-bottom: 6px; }
.mc-tabs button { flex-basis: 75px; padding: 10px 3px 8px; font-size: .72rem; }
.mc-tabs button.active::after { left: 29%; right: 29%; height: 3px; }
.mc-tab-content { padding: 9px 12px 20px; }
.mc-videos-tab,.mc-related-videos { gap: 8px; }
.mc-video-card { min-height: 103px; grid-template-columns: 36% 1fr; border-radius: 11px; }
.mc-video-thumb { min-height: 103px; }
.mc-video-play { width: 38px; height: 38px; border-width: 2px; }
.mc-video-thumb em,.mc-video-thumb b { bottom: 5px; padding: 3px 5px; border-radius: 5px; font-size: .49rem; }
.mc-video-thumb em { left: 5px; }.mc-video-thumb b { right: 5px; }
.mc-video-copy { padding: 9px 10px 7px; }
.mc-video-copy strong { font-size: .7rem; line-height: 1.45; }
.mc-video-copy span { margin-top: 5px; font-size: .55rem; }
.mc-video-copy small { gap: 4px; font-size: .48rem; }
.mc-video-copy small i,.mc-video-meta i { width: 3px; height: 3px; }
.mc-details-card { padding: 3px 12px; border-radius: 12px; }
.mc-info-row { min-height: 56px; grid-template-columns: 45% 1fr; gap: 8px; }
.mc-info-row span { gap: 7px; font-size: .7rem; }
.mc-info-row strong { font-size: .68rem; line-height: 1.45; }
.mc-events { min-height: 1480px; padding-bottom: 14px; }
.mc-event-line { width: 2px; }
.mc-event-row { min-height: 72px; grid-template-columns: 1fr 44px 1fr; }
.mc-event-row time { padding: 5px 8px; border-radius: 12px; font-size: .59rem; }
.mc-event-node { left: calc(50% + 27px); width: 37px; height: 37px; border-width: 3px; font-size: 1rem; }
.mc-event-row.away .mc-event-node { right: calc(50% + 27px); }
.mc-event-row>div { padding-inline-start: 58px; }
.mc-event-row.away>div { padding-inline: 0 58px; }
.mc-event-row strong { font-size: .68rem; }
.mc-event-row small { margin-top: 3px; font-size: .55rem; }
.mc-event-row.yellow .mc-event-node,.mc-event-row.red .mc-event-node { width: 19px; height: 34px; border-radius: 4px; }
.mc-event-row>button { left: calc(50% + 16px); width: 20px; height: 20px; }
.mc-team-switch { height: 41px; margin-bottom: 8px; border-radius: 21px; }
.mc-team-switch button { font-size: .72rem; }
.mc-team-switch button.active::after { bottom: 4px; height: 3px; }
.mc-pitch { aspect-ratio: .95; border-width: 2px; border-radius: 12px; }
.mc-pitch::before { height: 2px; }
.mc-pitch::after { width: 58px; height: 58px; border-width: 2px; }
.mc-pitch-lines i,.mc-pitch-lines b { border-width: 2px; }
.mc-player { width: 55px; }
.mc-player>span,.mc-bench-rail span { width: 38px; height: 38px; border-width: 2px; }
.mc-player>span i,.mc-bench-rail span i { left: -5px; bottom: -4px; min-width: 19px; height: 19px; border-width: 1px; font-size: .48rem; }
.mc-player strong { max-width: 57px; margin-top: 3px; font-size: .51rem; }
.mc-bench-title { margin: 13px 0 8px; font-size: .84rem; }
.mc-bench-rail { gap: 12px; padding-bottom: 9px; }
.mc-bench-rail>div { flex-basis: 56px; gap: 3px; }
.mc-bench-rail strong { font-size: .56rem; }.mc-bench-rail small { font-size: .48rem; }
.mc-stats { gap: 27px; padding: 4px 0 16px; }
.mc-stat-row h3 { margin-bottom: 10px; gap: 6px; font-size: .78rem; }
.mc-stat-values { grid-template-columns: 44px 1fr 44px; gap: 7px; }
.mc-stat-values>strong { font-size: .78rem; }
.mc-stat-values>div { height: 5px; }
.mc-poll h2 { font-size: 1rem; }.mc-poll>p { margin: 3px 0 10px; font-size: .66rem; }
.mc-poll-options { gap: 6px; }
.mc-poll-options button { min-height: 82px; padding: 8px; gap: 5px; border-radius: 10px; border-width: 1px; }
.mc-poll-options img { width: 48px; height: 30px; }.mc-poll-options strong { font-size: .7rem; }
.mc-poll-bar { height: 28px; margin-top: 12px; border-radius: 6px; font-size: .64rem; }
.mc-poll>small { margin-top: 6px; font-size: .56rem; }
.mc-comments-head { margin-top: 14px; padding-top: 13px; }.mc-comments-head h2 { font-size: .9rem; }
.mc-comment-composer,.mc-reply-composer { gap: 5px; margin: 8px 0; }
.mc-comment-composer input,.mc-reply-composer input { padding: 8px 10px; border-radius: 9px; font-size: .65rem; }
.mc-comment-composer button,.mc-reply-composer button { padding: 0 10px; border-radius: 8px; font-size: .62rem; }
.mc-comments { gap: 8px; }
.mc-comment { padding: 10px; grid-template-columns: 38px 1fr; gap: 8px; border-radius: 12px; }
.mc-comment.reply { margin-top: 8px; padding: 8px; border-radius: 9px; }
.mc-avatar { width: 37px; height: 37px; }
.mc-comment-body header { gap: 4px; }.mc-comment-body header strong { font-size: .68rem; }.mc-comment-body header small { font-size: .52rem; }
.mc-comment-body p { margin: 7px 0; font-size: .69rem; line-height: 1.75; }
.mc-comment-actions { gap: 6px; }.mc-comment-actions button,.mc-comment-actions span { padding: 5px 8px; border-radius: 11px; font-size: .53rem; }
.mc-more-comments { margin-top: 14px; padding: 8px 15px; font-size: .65rem; }
.mc-video-topbar { min-height: 52px; padding: calc(var(--safe-top,0px) + 4px) 12px 6px; grid-template-columns: 1fr 34px; }
.mc-video-topbar h1 { font-size: .86rem; }.mc-video-topbar button { width: 34px; height: 34px; }
.mc-video-hero { width: calc(100% - 24px); margin: 12px 12px 0; border-radius: 10px; }
.mc-video-hero span { width: 52px; height: 52px; border-width: 2px; }
.mc-video-hero em,.mc-video-hero b { bottom: 7px; padding: 4px 6px; border-radius: 6px; font-size: .58rem; }
.mc-video-details>h2,.mc-related-title { margin: 13px 12px 0; font-size: .94rem; }
.mc-video-meta { margin: 5px 12px 10px; gap: 5px; font-size: .6rem; }
.mc-video-match-card { margin: 0 12px; padding: 13px 9px; grid-template-columns: 1fr 70px 1fr; border-radius: 11px; }
.mc-video-match-card>div { gap: 5px; }.mc-video-match-card img { width: 43px; height: 28px; }
.mc-video-match-card section { gap: 3px; }.mc-video-match-card section b { font-size: 1.05rem; }.mc-video-match-card section span,.mc-video-match-card section small { font-size: .53rem; }
.mc-comments-link { width: calc(100% - 24px); min-height: 55px; margin: 13px 12px 0; padding: 0 11px; grid-template-columns: 1fr auto auto; gap: 7px; border-radius: 11px; }
.mc-comments-link span { gap: 6px; font-size: .83rem; }.mc-comments-link em { width: 26px; height: 26px; font-size: .6rem; }
.mc-related-videos { padding: 10px 12px; }
}
.mc-trophy img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:18px;mix-blend-mode:screen}.mc-leagues button span img{width:100%;height:100%;object-fit:contain;border-radius:50%;mix-blend-mode:screen}
/* Explicit team placement so RTL engines produce the same right/left order as the references. */
.mc-scoreboard>div:first-child{grid-column:3;grid-row:1}.mc-scoreboard>section{grid-column:2;grid-row:1}.mc-scoreboard>div:last-child{grid-column:1;grid-row:1}
.mc-match-card>.mc-match-team:first-child{grid-column:3;grid-row:1}.mc-match-card>.mc-match-score{grid-column:2;grid-row:1}.mc-match-card>.mc-match-team:last-child{grid-column:1;grid-row:1}
.mc-video-match-card{direction:ltr}.mc-video-match-card>div:first-child{grid-column:1;grid-row:1}.mc-video-match-card>section{grid-column:2;grid-row:1}.mc-video-match-card>div:last-child{grid-column:3;grid-row:1}.mc-video-match-card>div,.mc-video-match-card>section{direction:rtl}
.mc-poll-options{direction:ltr}.mc-poll-options>button{direction:rtl}
.mc-scoreboard,.mc-match-card{direction:ltr}.mc-scoreboard>div,.mc-scoreboard>section,.mc-match-card>.mc-match-team,.mc-match-card>.mc-match-score{direction:rtl}
/* Precision fixes for the supplied audience, league and video screenshots. */
.mc-day-tabs button.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.mc-leagues button.active{color:#fff}
.mc-leagues button.active span{filter:drop-shadow(0 5px 10px rgba(155,77,255,.24))}
.mc-leagues button.active strong{color:#fff}
.mc-comments-title{padding:0;background:transparent;color:#fff;text-align:right}
.mc-comments-title h2{margin:0}
.mc-poll-bar span:nth-child(1){background:#9e0008}.mc-poll-bar span:nth-child(2){background:#c51d24}.mc-poll-bar span:nth-child(3){background:#ed3c3f}
.mc-avatar .oscar-icon{width:100%;height:100%}
@media(max-width:600px){
.mc-trophy{width:88px;height:72px}
.mc-list-hero h1{font-size:1.08rem}
.mc-list-actions .oscar-icon{width:22px;height:22px}
.mc-detail-actions .oscar-icon{width:24px;height:24px}
.mc-comments-title h2{font-size:.9rem}
.mc-avatar{padding:0;overflow:hidden}
}
/* Honest provider states: keep the current layout while never substituting fabricated sports data. */
.mc-data-state{min-height:132px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px dashed rgba(255,255,255,.11);border-radius:15px;background:rgba(255,255,255,.025);color:#a7a7ab;text-align:center;font-size:.76rem;line-height:1.7}
.mc-data-state>.oscar-icon{color:#77777c}.mc-data-state.error{border-color:rgba(155,77,255,.28);background:rgba(155,77,255,.045)}.mc-data-state.error>.oscar-icon{color:var(--oscar-red,#9B4DFF)}
.mc-data-state button{min-height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;border-radius:10px;background:var(--oscar-red,#9B4DFF);color:#fff;font-size:.68rem;font-weight:800}
@media(max-width:600px){.mc-data-state{min-height:112px;padding:18px 14px;border-radius:12px;font-size:.68rem}.mc-data-state button{min-height:34px;font-size:.63rem}}
/* Competition overview: keeps the Oscar TV dark/red identity while exposing real season data. */
.mc-section-title{align-items:center;justify-content:space-between;gap:12px}.mc-open-competition{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:18px;background:#202022;color:#f0444c;font-size:.7rem;font-weight:800}.mc-competition-page{min-height:100vh;background:#050506;color:#fff;padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px))}.mc-league-hero{position:relative;min-height:245px;padding:calc(var(--safe-top,0px) + 26px) 18px 24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:radial-gradient(circle at 50% 3%,rgba(12,105,70,.38),transparent 43%),linear-gradient(180deg,#073427 0,#061b15 54%,#050506 100%)}.mc-league-hero>img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 8px 17px rgba(0,0,0,.45))}.mc-league-hero h1{margin:13px 0 4px;font-size:1.45rem;font-weight:900}.mc-league-hero p{margin:0;color:#979d9b;font-size:.78rem}.mc-league-back{position:absolute;top:calc(var(--safe-top,0px) + 18px);right:14px;width:45px;height:45px;display:grid;place-items:center;color:#fff}.mc-league-tabs{position:sticky;top:0;z-index:34;height:67px;display:flex;align-items:end;gap:0;padding-bottom:9px;background:rgba(5,5,6,.97);backdrop-filter:blur(16px);overflow-x:auto;scrollbar-width:none}.mc-league-tabs::-webkit-scrollbar{display:none}.mc-league-tabs button{position:relative;flex:1 0 96px;padding:15px 5px 10px;color:#9b9b9d;background:transparent;font-size:.82rem;font-weight:900}.mc-league-tabs button.active{color:#fff}.mc-league-tabs button.active::after{content:"";position:absolute;left:31%;right:31%;bottom:0;height:4px;border-radius:4px;background:#9B4DFF}.mc-league-content{padding:14px var(--page-pad,16px) 34px}.mc-competition-toggle{display:flex;justify-content:center;gap:9px;margin:2px 0 16px}.mc-competition-toggle button{padding:10px 19px;border-radius:22px;background:#252527;color:#9d9da0;font-size:.75rem;font-weight:800}.mc-competition-toggle button.active{background:#4b4b4e;color:#fff}.mc-season-date{margin:18px 4px 9px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#9a9a9d}.mc-season-date strong{font-size:.76rem}.mc-season-date span{font-size:.72rem;font-weight:800}.mc-season-card{min-height:145px;margin-bottom:9px;border-radius:15px}.mc-season-card .mc-match-team img{width:55px;height:55px;object-fit:contain}.mc-season-card .mc-match-score small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-standing-head,.mc-standing-row{display:grid;grid-template-columns:31px minmax(120px,1fr) repeat(4,30px) 39px 34px;align-items:center;gap:5px;direction:rtl}.mc-standing-head{padding:10px 9px;color:#77777b;font-size:.62rem}.mc-standing-row{min-height:62px;margin-bottom:7px;padding:7px 9px;border-radius:13px;background:#19191b;color:#a9a9ac;font-size:.68rem}.mc-standing-row>div{min-width:0;display:flex;align-items:center;gap:8px;color:#fff}.mc-standing-row img{width:35px;height:35px;border-radius:50%;object-fit:contain;background:#fff}.mc-standing-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}.mc-standing-row b{color:#fff;font-size:.76rem}.mc-leaders-page{display:grid;gap:8px}.mc-leader-card{min-height:82px;padding:11px 14px;display:grid;grid-template-columns:28px 54px 1fr 44px;align-items:center;gap:10px;border-radius:14px;background:#19191b;direction:rtl}.mc-leader-rank{color:#b8b8bb;font-size:.72rem}.mc-leader-card>img{width:50px;height:50px;border-radius:50%;object-fit:cover;background:#fff}.mc-leader-card>div{min-width:0}.mc-leader-card strong,.mc-leader-card small{display:block}.mc-leader-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}.mc-leader-card small{margin-top:5px;color:#8b8b8f;font-size:.62rem}.mc-leader-card small em{font-style:normal}.mc-leader-card>b{color:#9B4DFF;font-size:1.1rem;direction:ltr}.mc-competition-channels{display:grid;gap:9px}.mc-competition-channels>button{min-height:76px;padding:10px 14px;display:grid;grid-template-columns:58px 1fr 36px;align-items:center;gap:11px;border-radius:14px;background:#1a1a1c;color:#fff;text-align:right;direction:ltr}.mc-competition-channels img{width:54px;height:54px;border-radius:12px;object-fit:contain;background:#242426}.mc-competition-channels>button>div{direction:rtl}.mc-competition-channels strong,.mc-competition-channels small{display:block}.mc-competition-channels strong{font-size:.8rem}.mc-competition-channels small{margin-top:5px;color:#858589;font-size:.6rem}
@media (max-width:600px){.mc-open-competition{padding:6px 9px;font-size:.58rem}.mc-league-hero{min-height:172px;padding-bottom:15px}.mc-league-hero>img{width:52px;height:52px}.mc-league-hero h1{margin-top:8px;font-size:1rem}.mc-league-hero p{font-size:.58rem}.mc-league-back{top:calc(var(--safe-top,0px) + 8px);right:7px;width:35px;height:35px}.mc-league-tabs{height:51px;padding-bottom:6px}.mc-league-tabs button{flex-basis:78px;padding:10px 3px 8px;font-size:.66rem}.mc-league-tabs button.active::after{height:3px}.mc-league-content{padding:8px 10px 22px}.mc-competition-toggle{gap:6px;margin-bottom:10px}.mc-competition-toggle button{padding:7px 12px;font-size:.59rem}.mc-season-date{margin:12px 2px 6px}.mc-season-date strong,.mc-season-date span{font-size:.57rem}.mc-season-card{min-height:104px;padding:12px 8px;border-radius:11px}.mc-season-card .mc-match-team img{width:39px;height:39px}.mc-standing-head,.mc-standing-row{grid-template-columns:22px minmax(90px,1fr) repeat(4,22px) 29px 25px;gap:3px}.mc-standing-head{font-size:.49rem;padding:7px 6px}.mc-standing-row{min-height:46px;margin-bottom:5px;padding:5px 6px;border-radius:9px;font-size:.53rem}.mc-standing-row img{width:27px;height:27px}.mc-standing-row strong{font-size:.56rem}.mc-standing-row b{font-size:.59rem}.mc-leader-card{min-height:60px;padding:7px 9px;grid-template-columns:20px 41px 1fr 31px;gap:7px;border-radius:10px}.mc-leader-card>img{width:39px;height:39px}.mc-leader-card strong{font-size:.65rem}.mc-leader-card small{margin-top:3px;font-size:.49rem}.mc-leader-card>b{font-size:.86rem}.mc-competition-channels{gap:6px}.mc-competition-channels>button{min-height:57px;padding:7px 9px;grid-template-columns:43px 1fr 28px;gap:8px;border-radius:10px}.mc-competition-channels img{width:41px;height:41px;border-radius:8px}.mc-competition-channels strong{font-size:.64rem}.mc-competition-channels small{font-size:.49rem}}
/* Knockout bracket — horizontally scrollable like the supplied Champions League reference. */
.mc-bracket-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 1px 18px;scrollbar-width:thin;scrollbar-color:#363639 transparent}.mc-bracket-grid{min-width:max(100%,calc(var(--round-count,4) * 190px));display:grid;grid-template-columns:repeat(var(--round-count,4),minmax(170px,1fr));gap:20px;direction:ltr;align-items:stretch}.mc-bracket-round{position:relative;min-width:0;display:flex;flex-direction:column;direction:rtl}.mc-bracket-round>h3{min-height:30px;margin:0 0 10px;display:grid;place-items:center;color:#aaaab0;font-size:.72rem;font-weight:900}.mc-bracket-round-list{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:15px;padding:7px 0}.mc-bracket-round:not(:last-child) .mc-bracket-match::after{content:"";position:absolute;top:50%;right:-21px;width:21px;height:1px;background:#3d3d40}.mc-bracket-match{position:relative;min-height:105px;padding:8px 9px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:#1a1a1c;color:#fff;direction:rtl;text-align:right;box-shadow:0 8px 18px rgba(0,0,0,.18)}.mc-bracket-match.live{border-color:#9B4DFF;box-shadow:0 0 0 1px rgba(155,77,255,.22),0 8px 18px rgba(0,0,0,.22)}.mc-bracket-match.finished{background:linear-gradient(145deg,#1d1d1f,#161618)}.mc-bracket-match>small{display:block;margin-bottom:5px;color:#747478;font-size:.49rem;text-align:center}.mc-bracket-match>div{min-width:0;display:grid;grid-template-columns:25px 1fr 18px;align-items:center;gap:6px;min-height:32px}.mc-bracket-match img{width:24px;height:24px;border-radius:50%;object-fit:contain;background:rgba(255,255,255,.94)}.mc-bracket-match strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.61rem}.mc-bracket-match b{font-size:.68rem;color:#ffdd27;direction:ltr;text-align:center}.mc-bracket-match em{display:block;margin-top:4px;color:#737378;font-size:.49rem;font-style:normal;text-align:center}.mc-bracket-round:last-child .mc-bracket-match{border-color:#d5b600;box-shadow:0 0 0 1px rgba(255,218,0,.18),0 8px 18px rgba(0,0,0,.22)}
@media(max-width:600px){.mc-bracket-grid{min-width:calc(var(--round-count,4) * 145px);grid-template-columns:repeat(var(--round-count,4),135px);gap:15px}.mc-bracket-round>h3{min-height:23px;margin-bottom:6px;font-size:.56rem}.mc-bracket-round-list{gap:10px;padding:4px 0}.mc-bracket-match{min-height:82px;padding:6px 7px;border-radius:9px}.mc-bracket-round:not(:last-child) .mc-bracket-match::after{right:-16px;width:16px}.mc-bracket-match>small{font-size:.39rem}.mc-bracket-match>div{grid-template-columns:20px 1fr 15px;gap:4px;min-height:25px}.mc-bracket-match img{width:19px;height:19px}.mc-bracket-match strong{font-size:.49rem}.mc-bracket-match b{font-size:.55rem}.mc-bracket-match em{font-size:.39rem}}
/* Functional top actions without changing the current match-center layout. */
.mc-round-icon {
padding: 0;
border: 0;
background: transparent;
touch-action: manipulation;
}
.mc-round-icon.active {
color: #70c052;
background: rgba(112,192,82,.10);
}
.mc-root button {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* inline import from app.css: episode-experience.css */
/* Oscar TV — episodes, stream choices and real downloads */
.episode-panel{padding-bottom:20px}.episode-sort-button{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid #4a4a4e;border-radius:22px;background:#202022;color:#fff;font-size:.75rem;font-weight:800}.episode-tools{margin-bottom:16px;display:grid;gap:11px}.episode-tools>span{color:#77777b;font-size:.76rem}.episode-tools label{height:58px;padding:0 16px;display:flex;align-items:center;gap:10px;border:1px solid #454549;border-radius:17px;background:#171719;color:#fff}.episode-tools input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:.82rem}.episode-tools input::placeholder{color:#77777b}.episode-cards{display:grid;gap:14px}.episode-visual-card{min-height:180px;padding:14px;display:grid;grid-template-columns:72px 1fr minmax(210px,42%);align-items:center;gap:16px;border-radius:20px;background:linear-gradient(135deg,rgba(31,31,33,.98),rgba(20,20,22,.96));overflow:hidden;cursor:pointer}.episode-quality-stack{display:grid;gap:8px}.episode-quality-stack span{padding:7px 5px;border:1px solid rgba(255,195,50,.4);border-radius:7px;color:#b8a55d;text-align:center;font-size:.68rem}.episode-card-copy{display:grid;gap:12px;text-align:right}.episode-card-copy strong{color:#9B4DFF;font-size:1rem;font-weight:900}.episode-card-copy small{color:#9a9a9d;font-size:.72rem}.episode-thumb{position:relative;height:145px;border-radius:16px;overflow:hidden}.episode-thumb img{width:100%;height:100%;object-fit:cover}.episode-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}.episode-thumb>span{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.3);color:#fff}.episode-thumb em{position:absolute;z-index:2;left:8px;bottom:8px;padding:5px 7px;border-radius:7px;background:rgba(0,0,0,.78);color:#fff;font-style:normal;font-size:.65rem}.stream-choice-list,.download-choice-list{display:grid;gap:12px}.stream-choice-card{width:100%;min-height:116px;padding:16px 18px;display:grid;grid-template-columns:52px 1fr 72px;align-items:center;gap:14px;border-radius:17px;background:#9B4DFF;color:#fff;text-align:right}.stream-choice-card .server-play{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14)}.stream-choice-card div{min-width:0}.stream-choice-card strong,.stream-choice-card small{display:block}.stream-choice-card strong{font-size:1.04rem;font-weight:900}.stream-choice-card small{margin-top:6px;color:rgba(255,255,255,.68);font-size:.72rem}.stream-choice-card em{min-height:48px;padding:0 9px;border-radius:10px;display:grid;place-items:center;background:#ffd044;color:#131315;font-style:normal;font-size:.86rem;font-weight:900;direction:ltr}.quality-source-note{margin:-2px 0 13px;color:#77777b;font-size:.7rem;line-height:1.6}.download-link-card{border:2px solid #b90b17;border-radius:17px;background:rgba(13,13,14,.88);overflow:hidden}.download-link-main{width:100%;min-height:112px;padding:15px 18px;display:grid;grid-template-columns:50px 1fr 74px;align-items:center;gap:14px;color:#fff;text-align:right}.download-link-main:disabled{opacity:.78}.download-link-icon{width:46px;height:46px;display:grid;place-items:center;color:#fff}.download-link-copy{min-width:0}.download-link-copy strong,.download-link-copy small{display:block}.download-link-copy strong{font-size:1rem;font-weight:900}.download-link-copy small{margin-top:6px;color:#9e9ea2;font-size:.68rem;line-height:1.45}.download-link-main em{min-height:48px;padding:0 10px;display:grid;place-items:center;border-radius:10px;background:#ffd044;color:#151517;font-style:normal;font-weight:900;direction:ltr}.download-progress-area{padding:0 16px 14px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px;color:#a5a5a8;font-size:.68rem}.download-progress-track{grid-column:1/-1;height:6px;border-radius:5px;background:#303034;overflow:hidden}.download-progress-track i{display:block;height:100%;min-width:3%;border-radius:5px;background:#9B4DFF;transition:width .2s ease}.download-progress-area button{padding:6px 11px;border-radius:12px;background:#2b2b2e;color:#fff;font-size:.65rem}.download-error{color:#ff777f}.download-link-card.completed{border-color:#278748}.download-link-card.completed .download-progress-track i{background:#36a85b}.episode-details-page{min-height:100vh;padding-bottom:35px;background:#050506}.episode-detail-hero{position:relative;min-height:670px;background-size:cover;background-position:center 20%;overflow:hidden}.episode-detail-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.46) 38%,rgba(5,5,6,.94) 82%,#050506)}.episode-detail-top{position:relative;z-index:3;padding:calc(var(--safe-top) + 18px) var(--page-pad) 0;display:flex;align-items:center;justify-content:flex-start;gap:12px}.episode-detail-top h1{margin:0 auto;font-size:1.9rem;font-weight:500}.episode-hero-play{position:absolute;z-index:3;left:50%;top:38%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.28);color:#fff}.episode-hero-meta{position:absolute;z-index:3;left:var(--page-pad);right:var(--page-pad);bottom:25px;display:flex;align-items:center;justify-content:space-between;color:#aaa;font-size:.84rem;direction:ltr}.episode-series-link{width:calc(100% - 2*var(--page-pad));min-height:112px;margin:0 var(--page-pad) 28px;padding:12px 16px;display:grid;grid-template-columns:34px 1fr 72px;align-items:center;gap:14px;background:#222224;color:#fff;text-align:right}.episode-series-link div{min-width:0}.episode-series-link strong,.episode-series-link small{display:block}.episode-series-link strong{font-size:1.05rem;font-weight:900}.episode-series-link small{margin-top:6px;color:#919195}.episode-series-link img{width:64px;height:82px;border-radius:8px;object-fit:cover}.other-episodes-rail{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.other-episodes-rail button{flex:0 0 170px;color:#fff;text-align:right}.other-episodes-rail button>div{position:relative;height:105px;border-radius:13px;overflow:hidden}.other-episodes-rail img{width:100%;height:100%;object-fit:cover}.other-episodes-rail span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.42)}.other-episodes-rail strong{display:block;margin-top:7px;font-size:.78rem}
@media(max-width:600px){.episode-visual-card{grid-template-columns:58px 1fr 42%;gap:10px;min-height:150px;padding:10px}.episode-thumb{height:126px}.episode-quality-stack span{font-size:.58rem;padding:6px 2px}.episode-card-copy strong{font-size:.85rem}.stream-choice-card,.download-link-main{grid-template-columns:46px 1fr 65px;min-height:104px;padding:13px}.stream-choice-card strong,.download-link-copy strong{font-size:.9rem}.stream-choice-card em,.download-link-main em{font-size:.75rem}.episode-detail-hero{min-height:610px}.episode-detail-top h1{font-size:1.55rem}.episode-series-link{grid-template-columns:30px 1fr 62px}.episode-series-link img{width:56px;height:72px}}
@media(min-width:700px){.episode-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.episode-visual-card{grid-template-columns:60px 1fr 43%}.stream-choice-list,.download-choice-list{grid-template-columns:repeat(2,minmax(0,1fr))}.episode-details-page>.details-section,.episode-series-link{max-width:900px;margin-inline:auto}.episode-series-link{width:calc(100% - 52px)}}
.people-rail span{overflow:hidden}.people-rail span img{width:100%;height:100%;object-fit:cover;border-radius:50%}.people-rail small{display:block;margin-top:4px;color:#77777b;font-size:.61rem;line-height:1.3}.people-rail .crew-role{margin:7px auto 0;padding:5px 9px;border-radius:7px;background:#9B4DFF;color:#fff;width:max-content;font-weight:800}
.details-topbar .notify-toggle.active{color:#ffbf00;background:rgba(255,191,0,.13);box-shadow:0 0 18px rgba(255,191,0,.16)}
/* Reusable comments for films and series. */
.content-comments{margin-top:22px;padding:0 var(--page-pad,16px) 34px}
.comments-section-heading{display:flex;align-items:center;justify-content:space-between}.comments-section-heading h2 span{color:#777;font-size:.72em}.comments-section-heading>button{width:42px;height:42px;display:grid;place-items:center;color:#aaa}
.content-comment-composer{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;margin:17px 0}.content-comment-composer>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#28282b;color:#aaa}.content-comment-composer input,.content-reply-composer input{min-width:0;padding:13px 15px;border:1px solid #36363a;border-radius:15px;background:#161618;color:#fff;font:inherit}.content-comment-composer button,.content-reply-composer button{height:44px;padding:0 17px;border-radius:13px;background:#9B4DFF;color:#fff;font-weight:900}.content-comment-composer button:disabled{opacity:.45}
.content-comments-list{display:grid;gap:14px}.content-comment{padding:17px;display:grid;grid-template-columns:50px 1fr;gap:13px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:#232325}.content-comment.nested{margin-top:12px;padding:12px;background:#1b1b1d;border-radius:15px}.content-comment-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#4388ee}.content-comment-avatar.red{background:#9B4DFF}.content-comment-avatar.brown{background:#8b5c4d}.content-comment header{display:flex;align-items:center;gap:7px}.content-comment header i{width:5px;height:5px;border-radius:50%;background:#9B4DFF}.content-comment header small{color:#777;font-size:.68rem}.content-comment p{margin:10px 0;color:#c6c6c8;line-height:1.8}.content-comment-actions{display:flex;gap:8px;flex-wrap:wrap}.content-comment-actions button{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:18px;background:#37373a;color:#9c9ca0;font-size:.68rem}.content-comment-actions .accent{color:#ed3844}.content-reply-composer{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:11px}.content-comments-more{display:flex;align-items:center;gap:7px;margin:22px auto 0;padding:12px 21px;border-radius:24px;background:#1c1c1e;color:#e53b44}.content-comments-empty{min-height:180px;display:grid;place-items:center;align-content:center;gap:7px;color:#777}.content-comments-empty strong{color:#bbb}.content-comments-empty small{font-size:.75rem}
.details-status-badges,.details-engagement{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.details-status-badges span,.details-engagement button{padding:7px 12px;border:1px solid rgba(255,255,255,.19);border-radius:18px;background:rgba(15,15,16,.5);color:#ddd;font-size:.72rem}.details-status-badges .airing{background:#51b857;border-color:#51b857;color:#fff}.details-status-badges .translated{background:#12b5d0;border-color:#12b5d0;color:#fff}.details-engagement button{display:inline-flex;align-items:center;gap:6px;border-color:rgba(155,77,255,.42);color:#f34a55}
/* Pixel-calibrated Oscar TV phone layout */
@media (max-width: 600px) {
.episode-panel { padding-bottom: 10px; }
.episode-sort-button { gap: 4px; padding: 6px 9px; border-radius: 15px; font-size: .62rem; }
.episode-tools { margin-bottom: 8px; gap: 6px; }
.episode-tools>span { font-size: .61rem; }
.episode-tools label { height: 40px; padding: 0 10px; gap: 6px; border-radius: 11px; }
.episode-tools input { font-size: .68rem; }
.episode-cards { gap: 7px; }
.episode-visual-card { min-height: 100px; padding: 7px; grid-template-columns: 42px 1fr 43%; gap: 7px; border-radius: 10px; }
.episode-quality-stack { gap: 4px; }
.episode-quality-stack span { padding: 4px 2px; border-radius: 4px; font-size: .51rem; }
.episode-card-copy { gap: 7px; }
.episode-card-copy strong { font-size: .72rem; }
.episode-card-copy small { font-size: .57rem; }
.episode-thumb { height: 84px; border-radius: 8px; }
.episode-thumb>span { width: 34px; height: 34px; }
.episode-thumb em { left: 5px; bottom: 5px; padding: 3px 4px; border-radius: 4px; font-size: .49rem; }
.stream-choice-list,.download-choice-list { gap: 7px; }
.stream-choice-card { min-height: 62px; padding: 8px 10px; grid-template-columns: 32px 1fr 48px; gap: 8px; border-radius: 9px; }
.stream-choice-card .server-play { width: 31px; height: 31px; }
.stream-choice-card strong { font-size: .75rem; }
.stream-choice-card small { margin-top: 3px; font-size: .55rem; }
.stream-choice-card em { min-height: 31px; padding: 0 6px; border-radius: 6px; font-size: .64rem; }
.quality-source-note { margin-bottom: 7px; font-size: .54rem; }
.download-link-card { border-width: 1px; border-radius: 9px; }
.download-link-main { min-height: 64px; padding: 8px 10px; grid-template-columns: 31px 1fr 49px; gap: 8px; }
.download-link-icon { width: 31px; height: 31px; }
.download-link-copy strong { font-size: .74rem; }
.download-link-copy small { margin-top: 3px; font-size: .54rem; }
.download-link-main em { min-height: 31px; padding: 0 6px; border-radius: 6px; font-size: .64rem; }
.download-progress-area { padding: 0 9px 8px; gap: 5px; font-size: .52rem; }
.download-progress-track { height: 4px; }
.download-progress-area button { padding: 4px 7px; border-radius: 7px; font-size: .5rem; }
.episode-details-page { padding-bottom: 18px; }
.episode-detail-hero { min-height: 285px; background-position: center 18%; }
.episode-detail-shade { background: linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.42) 35%,rgba(5,5,6,.9) 78%,#050506); }
.episode-detail-top { padding: calc(var(--safe-top) + 8px) 14px 0; gap: 7px; }
.episode-detail-top h1 { font-size: 1.12rem; }
.episode-hero-play { top: 35%; width: 51px; height: 51px; }
.episode-hero-meta { left: 15px; right: 15px; bottom: 12px; font-size: .62rem; }
.episode-series-link { width: calc(100% - 30px); min-height: 62px; margin: 0 15px 16px; padding: 7px 9px; grid-template-columns: 23px 1fr 42px; gap: 8px; }
.episode-series-link strong { font-size: .78rem; }
.episode-series-link small { margin-top: 3px; font-size: .58rem; }
.episode-series-link img { width: 39px; height: 50px; border-radius: 5px; }
.other-episodes-rail { gap: 8px; padding-bottom: 5px; }
.other-episodes-rail button { flex-basis: 104px; }
.other-episodes-rail button>div { height: 65px; border-radius: 7px; }
.other-episodes-rail span { width: 29px; height: 29px; }
.other-episodes-rail strong { margin-top: 4px; font-size: .58rem; }
.content-comments { margin-top: 12px; padding: 0 15px 18px; }
.comments-section-heading>button { width: 32px; height: 32px; }
.content-comment-composer { grid-template-columns: 32px 1fr auto; gap: 5px; margin: 9px 0; }
.content-comment-composer>span { width: 32px; height: 32px; }
.content-comment-composer input,.content-reply-composer input { padding: 8px 10px; border-radius: 9px; font-size: .62rem; }
.content-comment-composer button,.content-reply-composer button { height: 34px; padding: 0 10px; border-radius: 8px; font-size: .6rem; }
.content-comments-list { gap: 8px; }
.content-comment { padding: 10px; grid-template-columns: 37px 1fr; gap: 8px; border-radius: 12px; }
.content-comment.nested { margin-top: 7px; padding: 8px; border-radius: 9px; }
.content-comment-avatar { width: 36px; height: 36px; }
.content-comment header { gap: 4px; }.content-comment header small { font-size: .51rem; }
.content-comment p { margin: 7px 0; font-size: .68rem; line-height: 1.7; }
.content-comment-actions { gap: 5px; }.content-comment-actions button { gap: 3px; padding: 5px 7px; border-radius: 10px; font-size: .51rem; }
.content-reply-composer { gap: 5px; margin-top: 7px; }
.content-comments-more { gap: 4px; margin-top: 12px; padding: 8px 13px; border-radius: 14px; font-size: .6rem; }
.details-status-badges,.details-engagement { gap: 5px; margin-top: 6px; }
.details-status-badges span,.details-engagement button { padding: 5px 8px; border-radius: 11px; font-size: .56rem; }
.people-rail small { margin-top: 2px; font-size: .49rem; }
.people-rail .crew-role { margin-top: 4px; padding: 4px 6px; border-radius: 4px; font-size: .5rem; }
}
/* Force the exact left-to-right card geometry seen in the reference while keeping Arabic copy RTL. */
.episode-visual-card{direction:ltr}
.episode-quality-stack,.episode-card-copy,.episode-thumb{direction:rtl}
@media(max-width:600px){
.quality-source-note{display:none}
.episode-detail-hero{min-height:320px}
.episode-detail-top{direction:rtl;justify-content:space-between}
.episode-detail-top h1{margin:0}
}
/* v2.43 commercial seasons navigation: clear, fast and touch friendly. */
.season-switcher{
display:flex;
gap:9px;
overflow-x:auto;
padding:4px 2px 14px;
margin:-4px 0 8px;
scrollbar-width:none;
overscroll-behavior-inline:contain;
touch-action:pan-x pan-y;
}
.season-switcher::-webkit-scrollbar{display:none}
.season-switcher button{
flex:0 0 auto;
min-width:112px;
min-height:52px;
padding:8px 14px;
border:1px solid rgba(255,255,255,.12);
border-radius:17px;
background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
color:#fff;
text-align:right;
box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.season-switcher button strong,.season-switcher button small{display:block;white-space:nowrap}
.season-switcher button strong{font-size:.82rem;font-weight:900;letter-spacing:-.1px}
.season-switcher button small{margin-top:5px;color:#aeb2c8;font-size:.66rem}
.season-switcher button.active{
border-color:rgba(151,0,198,.72);
background:linear-gradient(135deg,#9700c6,#6d27ff 62%,#00d4ff);
box-shadow:0 16px 44px rgba(151,0,198,.28);
}
.season-switcher button.active small{color:rgba(255,255,255,.82)}
.episode-panel .nova-empty-state-pro{margin-top:10px;min-height:260px}
@media(max-width:600px){
.season-switcher{gap:7px;padding-bottom:10px}
.season-switcher button{min-width:96px;min-height:46px;padding:7px 11px;border-radius:14px}
.season-switcher button strong{font-size:.72rem}
.season-switcher button small{font-size:.58rem}
}
:root {
--oscar-bg: #000000;
--oscar-bg-soft: #050505;
--oscar-surface: #0d0d0d;
--oscar-surface-2: #141414;
--oscar-surface-3: #1a1a1a;
--oscar-glass: rgba(25, 25, 27, .88);
--oscar-text: #fff;
--oscar-text-2: #b6b6ba;
--oscar-muted: #747478;
--oscar-border: rgba(255,255,255,.075);
--oscar-red: #9B4DFF;
--oscar-red-2: #14D7FF;
--oscar-yellow: #14D7FF;
--oscar-cyan: #14D7FF;
--oscar-orange: #F04AD8;
--oscar-purple: #5d46ff;
--accent: var(--oscar-red);
--nova-native-safe-left: 0px;
--nova-native-safe-top: 0px;
--nova-native-safe-right: 0px;
--nova-native-safe-bottom: 0px;
--safe-left: max(var(--nova-native-safe-left), env(safe-area-inset-left, 0px));
--safe-top: max(var(--nova-native-safe-top), env(safe-area-inset-top, 0px));
--safe-right: max(var(--nova-native-safe-right), env(safe-area-inset-right, 0px));
--safe-bottom: max(var(--nova-native-safe-bottom), env(safe-area-inset-bottom, 0px));
--page-pad: clamp(14px, 3.2vw, 28px);
--bottom-nav-h: 78px;
color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #app, .app-root { min-height: 100%; margin: 0; }
html { background: #000; }
body {
margin: 0;
overflow-x: hidden;
background: var(--oscar-bg);
color: var(--oscar-text);
font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
direction: rtl;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { display: block; max-width: 100%; }
svg { display: block; }
#blazor-error-ui { display: none !important; }
.oscar-app {
min-height: 100vh;
background: #000000;
padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);
--accent: var(--oscar-purple);
}
.oscar-app.anime-theme { --accent: var(--oscar-purple); background: #000000; }
.oscar-app.matches-theme { --accent: var(--oscar-purple); background: #000000; }
.oscar-main { min-height: 100vh; }
/* Splash */
.oscar-splash {
position: fixed; inset: 0; z-index: 9999;
display: grid; place-content: center; justify-items: center; gap: 14px;
overflow: hidden; background: #050506; color: #fff;
}
.splash-glow { position: absolute; width: 310px; height: 310px; border-radius: 50%; background: radial-gradient(circle, rgba(242,7,22,.22), transparent 68%); filter: blur(10px); }
.oscar-splash img { position: relative; width: 126px; height: 126px; object-fit: contain; border-radius: 26px; filter: drop-shadow(0 16px 34px rgba(0,0,0,.7)); }
.oscar-splash strong { position: relative; margin-top: 2px; font-size: 1.42rem; font-weight: 900; letter-spacing: 1.3px; direction: ltr; }
.oscar-splash strong span { color: var(--oscar-red); }
.oscar-splash small { color: #838388; font-size: .78rem; }
.oscar-loader { position: relative; width: 150px; height: 3px; overflow: hidden; border-radius: 8px; background: #242426; }
.oscar-loader span { display: block; width: 44%; height: 100%; background: linear-gradient(90deg, transparent, var(--oscar-red), transparent); animation: oscar-loading 1.05s ease-in-out infinite; }
@keyframes oscar-loading { from { transform: translateX(170%); } to { transform: translateX(-240%); } }
/* Shared icons and controls */
.oscar-icon { flex: 0 0 auto; }
.icon-button { width: 43px; height: 43px; padding: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: transparent; transition: background .18s ease, transform .12s ease; }
.icon-button:active { background: rgba(255,255,255,.09); transform: scale(.93); }
.icon-button.notification { position: relative; }
.icon-button.notification i { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid #080809; border-radius: 50%; background: var(--accent); }
.primary-action { min-height: 46px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 900; box-shadow: 0 10px 28px rgba(242,7,22,.22); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 24%, transparent); }
.outline-action { min-height: 45px; padding: 0 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: #171719; font-weight: 800; }
.circle-action { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(18,18,20,.82); }
.circle-action.saved { color: #fff; border-color: var(--accent); background: var(--accent); }
/* Toolbar */
.oscar-toolbar {
position: fixed; z-index: 100; top: 0; left: 0; right: 0;
height: calc(74px + var(--safe-top)); padding: var(--safe-top) max(var(--page-pad), var(--safe-right)) 0 max(var(--page-pad), var(--safe-left));
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(180deg, rgba(5,5,6,.99), rgba(5,5,6,.95));
border-bottom: 1px solid rgba(255,255,255,.025);
}
.oscar-toolbar.home-toolbar { background: linear-gradient(180deg, rgba(5,5,6,.99), rgba(5,5,6,.78), transparent); border: 0; }
.toolbar-title { display: flex; align-items: center; min-width: 0; }
.toolbar-title h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1.55rem, 6.1vw, 2.45rem); line-height: 1; font-weight: 900; }
.toolbar-actions { display: flex; align-items: center; gap: 3px; }
.catalog-header-spacer { height: calc(74px + var(--safe-top)); }
/* Search */
.search-sheet {
position: fixed; z-index: 180; top: 0; left: 0; right: 0;
height: calc(76px + var(--safe-top)); padding: var(--safe-top) max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
display: flex; align-items: center; gap: 8px;
background: rgba(8,8,9,.985); box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
.search-field { flex: 1; height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border: 1px solid #303033; border-radius: 15px; background: #18181a; color: #9a9a9f; }
.search-field:focus-within { border-color: var(--accent); }
.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; text-align: right; font-size: .94rem; }
.search-field .icon-button { width: 30px; height: 30px; color: #8b8b90; }
/* Drawer */
.menu-backdrop { position: fixed; z-index: 190; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); }
.side-menu { position: fixed; z-index: 200; top: 0; right: 0; bottom: 0; width: min(82vw, 330px); padding: calc(var(--safe-top) + 18px) 14px calc(var(--safe-bottom) + 18px); overflow-y: auto; background: linear-gradient(180deg,#151517,#09090a); border-left: 1px solid var(--oscar-border); box-shadow: -24px 0 50px rgba(0,0,0,.55); animation: drawer-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(102%); } }
.side-menu-brand { margin-bottom: 18px; padding: 0 5px 16px; display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 11px; border-bottom: 1px solid var(--oscar-border); }
.side-menu-brand img { width: 52px; height: 52px; border-radius: 13px; object-fit: cover; }
.side-menu-brand strong, .side-menu-brand small { display: block; }
.side-menu-brand strong { font-size: 1.05rem; }
.side-menu-brand small { margin-top: 2px; color: var(--oscar-muted); font-size: .72rem; }
.side-menu > button, .side-menu > a { width: 100%; min-height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 15px; border-radius: 12px; background: transparent; color: #d9d9dc; text-align: right; font-weight: 700; }
.side-menu > button:active, .side-menu > a:active { background: #242426; color: var(--accent); }
.side-menu-separator { height: 1px; margin: 10px 8px; background: var(--oscar-border); }
/* Bottom nav */
.oscar-bottom-nav {
position: fixed; z-index: 120; right: 0; bottom: 0; left: 0;
height: calc(var(--bottom-nav-h) + var(--safe-bottom));
padding: 7px 3px var(--safe-bottom);
display: flex; align-items: stretch; direction: rtl; overflow-x: auto; overflow-y: hidden;
background: rgba(5,5,6,.97); border-top: 1px solid rgba(255,255,255,.055);
box-shadow: 0 -10px 28px rgba(0,0,0,.44); scrollbar-width: none;
}
.oscar-bottom-nav::-webkit-scrollbar { display: none; }
.oscar-bottom-nav button, .oscar-bottom-nav a { position: relative; flex: 1 0 74px; min-width: 74px; padding: 3px 3px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: transparent; color: #77777b; }
.nav-icon { height: 31px; display: grid; place-items: center; transition: transform .15s ease; }
.oscar-bottom-nav b { font-size: .68rem; line-height: 1; font-weight: 600; white-space: nowrap; }
.oscar-bottom-nav button.active, .oscar-bottom-nav a.active { color: var(--accent); }
.oscar-bottom-nav button.active .nav-icon, .oscar-bottom-nav a.active .nav-icon { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 3px 8px rgba(242,7,22,.38)); filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--accent) 50%, transparent)); }
.oscar-bottom-nav button.active b, .oscar-bottom-nav a.active b { font-weight: 800; }
/* Home */
.home-intro { height: calc(74px + var(--safe-top)); padding: var(--safe-top) var(--page-pad) 0; }
.home-brand { height: 74px; display: flex; align-items: center; gap: 10px; visibility: hidden; }
.home-brand img { width: 40px; height: 40px; border-radius: 9px; }
.home-brand strong, .home-brand span { display: block; }
.home-brand span { color: var(--oscar-muted); font-size: .7rem; }
.home-spotlight { position: relative; min-height: clamp(350px, 103vw, 520px); margin-top: calc(-1 * (74px + var(--safe-top))); overflow: hidden; background-size: cover; background-position: center 18%; box-shadow: inset 0 -1px rgba(255,255,255,.03); cursor: pointer; }
.safe-background-image { position: absolute !important; inset: 0; z-index: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; object-fit: cover; object-position: center 18%; filter: none; }
.details-hero > .safe-background-image { object-position: center 15%; }
.spotlight-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.22) 0, rgba(0,0,0,.12) 38%, rgba(5,5,6,.96) 92%, #050506 100%), linear-gradient(90deg, rgba(0,0,0,.18), transparent 65%); }
.spotlight-content { position: absolute; z-index: 2; right: var(--page-pad); left: 22%; bottom: 42px; }
.spotlight-label { display: inline-flex; margin-bottom: 8px; padding: 5px 10px; border-radius: 5px; background: rgba(242,7,22,.92); font-size: .7rem; font-weight: 800; }
.spotlight-content h1 { margin: 0 0 9px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: clamp(1.65rem, 7vw, 3.2rem); line-height: 1.1; font-weight: 900; text-shadow: 0 4px 16px #000; }
.spotlight-meta { margin-bottom: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #d2d2d4; font-size: .76rem; }
.spotlight-meta span { display: inline-flex; align-items: center; gap: 4px; }
.spotlight-meta span + span::before { content: "•"; margin-left: 4px; color: #777; }
.spotlight-meta span:first-child { color: var(--oscar-yellow); direction: ltr; }
.spotlight-content .primary-action { min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: .82rem; }
.hero-dots { position: absolute; z-index: 3; left: var(--page-pad); bottom: 50px; display: flex; gap: 5px; direction: ltr; }
.hero-dots i { width: 5px; height: 5px; border-radius: 8px; background: rgba(255,255,255,.38); }
.hero-dots i.active { width: 22px; background: var(--accent); }
.oscar-section { padding: 4px var(--page-pad) 24px; }
.section-heading { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: clamp(1.25rem, 5.2vw, 2rem); line-height: 1.15; font-weight: 900; }
.section-heading h2 > i { width: 5px; height: 34px; flex: 0 0 5px; border-radius: 1px; background: var(--accent); }
.section-heading button { padding: 10px 0 10px 12px; display: inline-flex; align-items: center; gap: 5px; background: transparent; color: var(--accent); font-size: .84rem; white-space: nowrap; }
.poster-rail { display: flex; gap: 12px; overflow-x: auto; padding: 5px 0 8px; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; scrollbar-width: none; }
.poster-rail::-webkit-scrollbar { display: none; }
.wrestling-promo { position: relative; width: calc(100% - 2 * var(--page-pad)); min-height: 150px; margin: 3px var(--page-pad) 27px; padding: 18px 19px; display: grid; grid-template-columns: 35% 1fr; align-items: center; overflow: hidden; border-radius: 20px; text-align: right; background: radial-gradient(circle at 23% 45%, rgba(109,79,255,.5), transparent 30%), linear-gradient(105deg,#0a0b20,#111053 52%,#21105b); box-shadow: 0 18px 34px rgba(0,0,0,.35); }
.wrestling-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.28)); pointer-events: none; }
.wrestling-art { position: relative; z-index: 1; color: #ddd4ff; display: grid; place-items: center; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.wrestling-copy { position: relative; z-index: 1; }
.wrestling-copy strong, .wrestling-copy span { display: block; }
.wrestling-copy strong { font-size: clamp(1.3rem, 5.3vw, 2.1rem); font-weight: 900; }
.wrestling-copy span { margin: 7px 0 14px; color: #c8c8ce; font-size: .78rem; line-height: 1.45; }
.wrestling-copy em { display: inline-flex; min-height: 42px; padding: 0 20px; align-items: center; border-radius: 10px; background: #654cff; font-style: normal; font-weight: 900; }
/* Poster cards */
.oscar-card { flex: 0 0 clamp(142px, 31vw, 212px); min-width: 0; padding: 0; background: transparent; text-align: right; scroll-snap-align: start; cursor: pointer; }
.poster-wrap { position: relative; display: block; width: 100%; aspect-ratio: .59; overflow: hidden; border-radius: 15px; background: #171719; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.poster-wrap > img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease, opacity .2s ease; }
.oscar-card:active .poster-wrap > img { transform: scale(1.035); }
.poster-gradient { position: absolute; inset: 42% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.2) 35%, rgba(0,0,0,.95)); pointer-events: none; }
.poster-title { position: absolute; z-index: 3; right: 10px; bottom: 11px; left: 9px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .9rem; line-height: 1.35; font-weight: 900; text-shadow: 0 2px 5px #000; }
.card-title { display: block; margin: 9px 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: .83rem; font-weight: 800; text-align: center; }
.card-meta { display: block; margin: 4px 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #74747a; font-size: .7rem; text-align: center; }
.translation-badge, .quality-badge, .score-badge, .episode-badge { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 3px; font-style: normal; line-height: 1; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.translation-badge { top: 10px; right: 0; padding: 8px 9px; border-radius: 7px 0 0 7px; background: var(--oscar-cyan); font-size: .69rem; }
.quality-badge { top: 10px; left: 0; padding: 7px 8px; border-radius: 0 7px 7px 0; background: #db2032; font-size: .62rem; }
.score-badge { top: 10px; left: 8px; padding: 6px 7px; border-radius: 7px; background: rgba(25,25,27,.78); color: var(--oscar-yellow); font-size: .63rem; direction: ltr; backdrop-filter: blur(5px); }
.oscar-card.movie .score-badge { top: 40px; }
.episode-badge { top: 10px; left: 8px; padding: 6px 8px; border-radius: 7px; background: rgba(20,20,22,.76); font-size: .63rem; direction: ltr; backdrop-filter: blur(5px); }
.favorite-button { position: absolute; z-index: 5; right: 8px; bottom: 8px; width: 31px; height: 31px; display: none; place-items: center; border-radius: 50%; background: rgba(5,5,6,.7); color: #fff; backdrop-filter: blur(4px); }
.favorite-button.saved { display: grid; color: #fff; background: var(--accent); }
.oscar-card:hover .favorite-button, .oscar-card:focus-within .favorite-button { display: grid; }
/* Catalog */
.catalog-page { min-height: 100vh; padding: 0 var(--page-pad) 34px; }
.category-tabs { height: 86px; margin-inline: calc(-1 * var(--page-pad)); padding: 8px var(--page-pad); display: flex; align-items: center; gap: 5px; overflow-x: auto; border-top: 1px solid #19191b; border-bottom: 1px solid #19191b; background: #171719; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button { flex: 0 0 auto; min-width: 92px; height: 54px; padding: 0 18px; border-radius: 15px; background: transparent; color: #8f8f94; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.category-tabs button.active { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 9px 22px rgba(242,7,22,.18); box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 20%, transparent); }
.filter-panel { padding: 14px 0 17px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filter-panel::-webkit-scrollbar { display: none; }
.filter-chip { position: relative; flex: 0 0 auto; height: 48px; min-width: 116px; padding: 0 15px; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; border-radius: 12px; background: #1b1b1d; color: #f1f1f2; font-size: .88rem; white-space: nowrap; }
.filter-chip.wide { min-width: 154px; }
.filter-chip > i { width: 7px; height: 7px; border-radius: 50%; background: #737378; }
.filter-chip select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.oscar-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 10px; }
.oscar-grid .oscar-card { width: 100%; }
.oscar-grid .poster-wrap { border-radius: 16px; }
.load-row { padding: 28px 0 10px; display: grid; place-items: center; }
/* Channel catalog */
.channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px 18px; padding-top: 10px; }
.channel-card { min-width: 0; background: transparent; text-align: center; cursor: pointer; }
.channel-logo { width: 100%; aspect-ratio: 1; padding: 13%; display: grid; place-items: center; overflow: hidden; border-radius: 19px; background: #232325; border: 1px solid rgba(255,255,255,.025); box-shadow: 0 9px 22px rgba(0,0,0,.16); }
.channel-logo img { width: 100%; height: 100%; object-fit: contain; }
.channel-card > strong { display: block; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 500; }
.channel-card > small { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6f6f74; font-size: .7rem; }
.channel-card.compact { flex: 0 0 128px; }
.channel-card.compact .channel-logo { border-radius: 16px; }
.channel-card.compact > strong { font-size: .78rem; }
.channel-card.compact > small { font-size: .66rem; }
.poster-rail.channel-rail { gap: 17px; }
/* Skeleton and empty */
.skeleton-grid { min-height: 60vh; }
.skeleton-card span, .skeleton-card i, .skeleton-card b, .skeleton-match { display: block; background: linear-gradient(90deg,#151517,#202023,#151517); background-size: 220% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-card span { width: 100%; aspect-ratio: .59; border-radius: 15px; }
.skeleton-card i { width: 84%; height: 11px; margin: 10px auto 0; border-radius: 8px; }
.skeleton-card b { width: 56%; height: 9px; margin: 7px auto 0; border-radius: 8px; }
.skeleton-card.channel span { aspect-ratio: 1; border-radius: 19px; }
@keyframes shimmer { to { background-position: -220% 0; } }
.oscar-empty { min-height: 56vh; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--oscar-muted); text-align: center; }
.oscar-empty > span { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: #171719; color: #525257; }
.oscar-empty strong { margin-top: 6px; color: #eee; font-size: 1.05rem; }
.oscar-empty p { margin: 0; max-width: 300px; font-size: .8rem; line-height: 1.6; }
/* Wrestling/anime catalog accents */
.anime-theme .category-tabs button.active, .anime-theme .primary-action { background: var(--oscar-purple); }
.anime-theme .translation-badge { background: var(--oscar-cyan); }
.anime-theme .poster-wrap { box-shadow: 0 8px 22px rgba(28,20,90,.18); }
/* Match center */
.matches-page { min-height: 100vh; padding-bottom: 30px; }
.matches-hero { min-height: 530px; padding: calc(var(--safe-top) + 18px) var(--page-pad) 22px; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 50% 18%, rgba(40,148,93,.25), transparent 24%), linear-gradient(180deg,#0d3d2d 0,#0b271e 48%,#050506 100%); }
.match-top-actions { align-self: stretch; display: flex; align-items: center; justify-content: flex-start; gap: 8px; direction: ltr; }
.match-play { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #75c95b; color: #fff; box-shadow: 0 0 0 10px rgba(117,201,91,.1); }
.trophy-illustration { width: 132px; height: 132px; margin-top: 27px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#55e6a8,#6df0b2); color: #f4ae21; box-shadow: inset 0 -10px 22px rgba(0,0,0,.14), 0 18px 35px rgba(0,0,0,.24); }
.matches-hero h1 { margin: 19px 0 0; font-size: 2rem; font-weight: 900; }
.day-tabs { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.day-tabs button { min-width: 93px; height: 52px; padding: 0 16px; border-radius: 28px; background: rgba(255,255,255,.095); color: #aaaeb0; font-size: 1rem; }
.day-tabs button.active { background: #5d6361; color: #fff; font-weight: 900; }
.matches-hero p { margin: 14px 0 0; color: #81868a; font-size: .82rem; }
.league-strip { margin-top: -8px; padding: 0 var(--page-pad) 24px; display: flex; gap: 23px; overflow-x: auto; scrollbar-width: none; }
.league-strip::-webkit-scrollbar { display: none; }
.league-strip button { flex: 0 0 90px; padding: 0; background: transparent; color: #ddd; text-align: center; }
.league-strip span { width: 72px; height: 72px; margin: 0 auto 7px; display: grid; place-items: center; border-radius: 50%; background: #111513; color: #fff; }
.league-strip b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #919599; font-size: .72rem; line-height: 1.4; font-weight: 500; }
.match-section { padding: 0 var(--page-pad) 24px; }
.match-heading button { color: #9c9ca0; }
.match-list { display: grid; gap: 10px; }
.match-card { position: relative; min-height: 150px; padding: 18px 18px 14px; display: grid; grid-template-columns: 1fr 104px 1fr; align-items: center; gap: 10px; overflow: hidden; border-radius: 18px; background: #1a1a1c; border: 1px solid rgba(255,255,255,.025); cursor: pointer; }
.match-card::after { content: ""; position: absolute; right: 50%; bottom: 13px; left: 4%; height: 1px; background: linear-gradient(90deg,transparent,#2e2e31); opacity: .7; }
.team { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.team strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 900; }
.flag-placeholder, .channel-mini, .play-round { width: 57px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: linear-gradient(135deg,#f2f2f2,#c9c9ca); color: #202023; font-size: 1.15rem; font-weight: 900; }
.channel-mini { height: 57px; padding: 6px; border-radius: 12px; background: #29292c; }
.channel-mini img { width: 100%; height: 100%; object-fit: contain; }
.play-round { height: 57px; border-radius: 50%; background: var(--oscar-red); color: #fff; }
.match-score { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.match-score b { font-size: 1.45rem; line-height: 1; direction: ltr; }
.match-score span { padding: 5px 13px; border-radius: 15px; background: #2a2a2d; color: #86868b; font-size: .72rem; }
.match-score small { max-width: 150px; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8b8b90; font-size: .66rem; }
.match-watermark { position: absolute; left: -8px; bottom: -13px; color: rgba(255,255,255,.018); transform: rotate(-9deg); }
.live-source-card .match-score b { color: var(--oscar-red); font-size: .95rem; }
.skeleton-match { min-height: 150px; border-radius: 18px; }
.live-sources { padding-bottom: 10px; }
/* Category/account/settings/schedule */
.category-group { margin-bottom: 28px; }
.category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.category-grid button { min-height: 88px; padding: 13px; display: grid; grid-template-columns: 43px 1fr; align-items: center; column-gap: 10px; border-radius: 14px; background: #18181a; text-align: right; }
.category-grid button > span { grid-row: 1 / span 2; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; background: #252528; color: var(--accent); }
.category-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.category-grid small { color: var(--oscar-muted); font-size: .66rem; }
.schedule-date { margin: 15px 0 18px; padding: 15px; display: flex; align-items: center; gap: 12px; border-radius: 15px; background: linear-gradient(120deg,#252527,#171719); color: var(--accent); }
.schedule-date strong, .schedule-date span { display: block; }
.schedule-date strong { color: #fff; }
.schedule-date span { margin-top: 3px; color: #929297; font-size: .76rem; direction: ltr; text-align: right; }
.schedule-row { width: 100%; min-height: 78px; margin-bottom: 9px; padding: 9px 11px; display: grid; grid-template-columns: 55px 52px 1fr auto; align-items: center; gap: 10px; border-radius: 14px; background: #171719; text-align: right; }
.schedule-row time { color: var(--oscar-yellow); font-size: .76rem; font-weight: 900; direction: ltr; }
.schedule-row img { width: 52px; height: 58px; border-radius: 9px; object-fit: contain; background: #242426; }
.schedule-row strong, .schedule-row span { display: block; }
.schedule-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.schedule-row span { margin-top: 4px; color: var(--oscar-muted); font-size: .66rem; }
.schedule-row em { padding: 5px 8px; border-radius: 12px; background: rgba(242,7,22,.14); color: var(--oscar-red); font-style: normal; font-size: .66rem; }
.account-card { margin: 20px 0; padding: 18px; display: grid; grid-template-columns: 64px 1fr 45px; align-items: center; gap: 13px; border-radius: 18px; background: linear-gradient(130deg,#2b1518,#18181a 58%); border: 1px solid rgba(242,7,22,.18); }
.account-card img { width: 64px; height: 64px; border-radius: 16px; }
.account-card h1, .account-card p { margin: 0; }
.account-card h1 { font-size: 1.25rem; }
.account-card p { margin-top: 5px; color: #8f8f94; font-size: .76rem; }
.account-card > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: #27272a; color: var(--accent); }
.settings-list { overflow: hidden; border-radius: 17px; background: #171719; border: 1px solid var(--oscar-border); }
.settings-list > div, .settings-list > label, .settings-list > button { min-height: 68px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--oscar-border); background: transparent; text-align: right; }
.settings-list > :last-child { border-bottom: 0; }
.settings-list span { color: #a0a0a5; font-size: .78rem; }
.settings-list strong { max-width: 65%; overflow: hidden; text-overflow: ellipsis; color: #f5f5f6; font-size: .78rem; text-align: left; }
.settings-list.toggles span { flex: 1; }
.settings-list.toggles b, .settings-list.toggles small { display: block; }
.settings-list.toggles b { color: #eee; font-size: .86rem; }
.settings-list.toggles small { margin-top: 4px; color: #77777c; font-size: .69rem; }
.settings-list input[type="checkbox"] { width: 46px; height: 25px; accent-color: var(--accent); }
.settings-list.toggles button { width: 100%; color: var(--accent); }
.settings-note { margin-top: 16px; padding: 14px; display: flex; align-items: flex-start; gap: 9px; border-radius: 14px; background: rgba(255,255,255,.035); color: #86868b; font-size: .72rem; line-height: 1.6; }
/* Details common */
.details-topbar { position: absolute; z-index: 30; top: 0; left: 0; right: 0; height: calc(76px + var(--safe-top)); padding: var(--safe-top) var(--page-pad) 0; display: grid; grid-template-columns: 110px 1fr 48px; align-items: center; background: linear-gradient(180deg,rgba(4,4,5,.94),rgba(4,4,5,.45),transparent); }
.details-topbar > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 1.12rem; font-weight: 500; }
.details-actions-left { display: flex; align-items: center; direction: ltr; }
.details-actions-left .icon-button { color: #fff; }
/* Channel details */
.channel-details { min-height: 100vh; padding-bottom: 38px; background: radial-gradient(circle at 52% 12%,rgba(73,36,104,.18),transparent 25%),#070708; }
.channel-details .details-topbar { position: fixed; background: rgba(7,7,8,.94); }
.channel-details-hero { position: relative; min-height: 500px; padding: calc(var(--safe-top) + 116px) var(--page-pad) 35px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; }
.channel-details-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .08; filter: blur(4px) saturate(.7); transform: scale(1.08); }
.channel-details-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(6,6,7,.25),#070708 90%); }
.channel-details-hero > *:not(.channel-details-bg) { position: relative; z-index: 2; }
.channel-details-hero > img:not(.channel-details-bg) { width: 145px; height: 112px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.65)); }
.channel-details-hero h1 { margin: 25px 0 17px; font-size: 1.75rem; font-weight: 900; direction: ltr; }
.details-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.details-chips span { min-height: 36px; padding: 0 13px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #4a4a4e; border-radius: 20px; background: #252527; color: #b7b7bb; font-size: .75rem; }
.frequency-card { margin: -10px var(--page-pad) 0; padding: 18px 22px; border: 1px dashed #68686c; border-radius: 20px; background: linear-gradient(135deg,rgba(47,47,49,.92),rgba(31,31,33,.92)); }
.frequency-card h2 { margin: 0 0 12px; font-size: 1.25rem; }
.frequency-card p { margin: 9px 0; display: flex; align-items: center; gap: 9px; color: #b1b1b5; font-size: .82rem; }
.frequency-card p svg { color: #d0d0d2; }
.server-notice { margin: 22px var(--page-pad) 8px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #aaaab0; font-size: .78rem; text-align: center; }
.details-section { padding: 8px var(--page-pad) 18px; }
.stream-server-card { width: 100%; min-height: 98px; padding: 13px 16px; display: grid; grid-template-columns: 49px 1fr auto; align-items: center; gap: 12px; border-radius: 17px; background: var(--oscar-red); color: #fff; text-align: right; box-shadow: 0 16px 28px rgba(242,7,22,.16); }
.server-play { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); }
.stream-server-card strong, .stream-server-card small { display: block; }
.stream-server-card strong { font-size: 1.05rem; font-weight: 900; }
.stream-server-card small { margin-top: 5px; color: rgba(255,255,255,.7); font-size: .73rem; }
.stream-server-card em { min-width: 52px; min-height: 42px; padding: 0 10px; display: grid; place-items: center; border-radius: 10px; background: var(--oscar-yellow); color: #171719; font-style: normal; font-weight: 900; }
.related-section { padding-bottom: 28px; }
/* Movie/series details */
.media-details { min-height: 100vh; background: #070708; }
.details-hero { position: relative; min-height: clamp(630px, 160vw, 820px); padding-bottom: 28px; display: flex; align-items: flex-end; overflow: hidden; background-size: cover; background-position: center 15%; }
.details-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.28) 35%,rgba(7,7,8,.88) 68%,#070708 100%), linear-gradient(90deg,rgba(0,0,0,.2),transparent); backdrop-filter: blur(1px); }
.details-hero-content { position: relative; z-index: 3; width: 100%; padding: calc(var(--safe-top) + 115px) var(--page-pad) 0; display: grid; grid-template-columns: minmax(118px,33%) 1fr; align-items: end; gap: 16px; }
.details-poster { width: 100%; aspect-ratio: .66; object-fit: cover; border-radius: 17px; box-shadow: 0 15px 32px rgba(0,0,0,.55); }
.details-copy { min-width: 0; padding-bottom: 2px; }
.details-type { display: inline-flex; padding: 5px 9px; border-radius: 7px; background: var(--accent); font-size: .68rem; font-weight: 800; }
.details-copy h1 { margin: 10px 0 9px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: clamp(1.45rem,6vw,2.6rem); line-height: 1.15; font-weight: 900; }
.details-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #b3b3b7; font-size: .7rem; }
.details-meta span { padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.07); }
.details-meta .rating { display: inline-flex; align-items: center; gap: 3px; color: var(--oscar-yellow); direction: ltr; }
.details-copy p { margin: 12px 0 14px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; color: #b4b4b8; font-size: .75rem; line-height: 1.65; }
.details-cta { display: flex; align-items: center; gap: 9px; }
.details-cta .primary-action { flex: 1; padding-inline: 11px; }
.details-content { padding-bottom: 25px; }
.genre-chips { padding: 3px var(--page-pad) 18px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.genre-chips span { flex: 0 0 auto; padding: 7px 12px; border-radius: 16px; background: #1c1c1e; color: #aaaab0; font-size: .7rem; }
.cast-rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 7px; scrollbar-width: none; }
.cast-rail div { flex: 0 0 74px; text-align: center; }
.cast-rail span { width: 65px; height: 65px; margin: 0 auto 7px; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 50%; background: linear-gradient(145deg,#313135,#161618); color: #fff; font-size: 1.25rem; font-weight: 900; }
.cast-rail span img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cast-rail strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .68rem; line-height: 1.3; }
.director-row { margin: 0 var(--page-pad) 20px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-radius: 13px; background: #171719; }
.director-row span { color: #85858a; font-size: .75rem; }
.director-row strong { max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .77rem; }
.episode-loading { min-height: 100px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 14px; background: #151517; color: #85858a; font-size: .78rem; }
.inline-loader { width: 20px; height: 20px; border: 2px solid #39393c; border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.episode-list { display: grid; gap: 8px; }
.episode-item { width: 100%; min-height: 76px; padding: 9px 12px; display: grid; grid-template-columns: 46px 1fr 42px; align-items: center; gap: 10px; border-radius: 14px; background: #171719; text-align: right; }
.episode-item > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; background: #29292c; color: var(--accent); font-weight: 900; }
.episode-item strong, .episode-item small { display: block; }
.episode-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.episode-item small { margin-top: 5px; color: #77777c; font-size: .65rem; }
.episode-item em { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; }
/* Responsive */
@media (max-width: 360px) {
:root { --page-pad: 11px; }
.oscar-bottom-nav button, .oscar-bottom-nav a { flex-basis: 68px; min-width: 68px; }
.oscar-grid { gap: 14px 7px; }
.poster-wrap { border-radius: 12px; }
.translation-badge { padding: 7px 7px; font-size: .62rem; }
.category-tabs button { min-width: 82px; padding-inline: 14px; }
.match-card { padding-inline: 10px; grid-template-columns: 1fr 80px 1fr; }
.details-copy p { -webkit-line-clamp: 3; }
}
@media (min-width: 600px) {
:root { --page-pad: 26px; --bottom-nav-h: 82px; }
.oscar-app { max-width: 1180px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.02); }
.oscar-toolbar, .oscar-bottom-nav, .search-sheet { max-width: 1180px; margin-inline: auto; }
.side-menu { right: max(0px, calc((100vw - 1180px)/2)); }
.home-spotlight { min-height: 590px; border-radius: 0 0 26px 26px; }
.spotlight-content { left: 42%; }
.oscar-card { flex-basis: 185px; }
.oscar-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 15px; }
.channel-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.matches-hero { min-height: 500px; }
.match-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.details-hero-content { grid-template-columns: 220px 1fr; gap: 28px; }
}
@media (min-width: 960px) {
.oscar-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.channel-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
.category-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.home-spotlight { min-height: 650px; }
.spotlight-content { left: 52%; }
.details-hero { min-height: 720px; }
.details-hero-content { max-width: 920px; margin-inline: auto; }
.details-content { max-width: 1020px; margin-inline: auto; }
}
@media (orientation: landscape) and (max-height: 600px) {
.home-spotlight { min-height: 420px; }
.matches-hero { min-height: 420px; }
.details-hero { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.filter-chip.disabled { opacity: .52; }
.filter-chip.disabled select { cursor: not-allowed; }
/* Anime landing */
.anime-page { min-height: 100vh; padding-bottom: 24px; background: radial-gradient(circle at 50% 2%, rgba(51,43,151,.26), transparent 25%), #050506; }
.anime-identity { min-height: 430px; padding: calc(var(--safe-top) + 18px) var(--page-pad) 30px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: radial-gradient(circle at 50% 42%, rgba(75,62,215,.20), transparent 26%), linear-gradient(180deg,#101532 0,#080a17 56%,#050506 100%); }
.anime-top-actions { width: 100%; margin-bottom: auto; display: flex; align-items: center; justify-content: flex-start; gap: 8px; direction: ltr; }
.anime-mascot { width: 146px; height: 146px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#19153e,#30257b); color: #b8adff; border: 1px solid rgba(142,126,255,.26); box-shadow: 0 24px 44px rgba(0,0,0,.36), inset 0 0 35px rgba(109,79,255,.16); }
.anime-identity h1 { margin: 18px 0 0; font-size: 2rem; font-weight: 900; }
.anime-identity p { max-width: 330px; margin: 8px 0 0; color: #8c8c99; font-size: .78rem; text-align: center; }
.anime-studios { padding: 4px var(--page-pad) 12px; }
.studio-strip { display: flex; gap: 16px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.studio-strip::-webkit-scrollbar { display: none; }
.studio-strip button { flex: 0 0 88px; padding: 0; background: transparent; color: #8f8f99; text-align: center; }
.studio-strip button span { width: 68px; height: 68px; margin: 0 auto 7px; display: grid; place-items: center; border-radius: 18px; background: #15151a; border: 1px solid rgba(255,255,255,.05); color: #8980e9; transition: .16s ease; }
.studio-strip button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 500; }
.studio-strip button.active span { background: var(--oscar-purple); color: #fff; box-shadow: 0 10px 24px rgba(93,70,255,.25); }
.studio-strip button.active strong { color: #fff; }
.anime-catalog-block { padding: 0 var(--page-pad) 25px; }
.anime-catalog-block .category-tabs { margin-inline: calc(-1 * var(--page-pad)); }
.anime-page .translation-badge { background: var(--oscar-cyan); }
.anime-page .quality-badge { background: var(--oscar-purple); }
.anime-page .section-heading button { color: var(--oscar-purple); }
@media (min-width: 600px) {
.anime-identity { min-height: 500px; }
.anime-mascot { width: 172px; height: 172px; }
}
.download-unavailable{min-height:82px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;padding:14px 16px;border:1px dashed rgba(255,255,255,.14);border-radius:16px;background:linear-gradient(135deg,rgba(29,29,31,.9),rgba(14,14,15,.88));color:var(--oscar-text);opacity:.82}.download-unavailable>span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--oscar-muted)}.download-unavailable div{display:grid;gap:4px;min-width:0}.download-unavailable strong{font-size:14px}.download-unavailable small{font-size:11px;line-height:1.55;color:var(--oscar-muted)}.download-unavailable em{font-style:normal;font-weight:800;font-size:11px;color:#171717;background:var(--oscar-yellow);padding:7px 10px;border-radius:9px}
.age-badge{position:absolute;z-index:4;top:47px;right:0;padding:7px 9px;border-radius:7px 0 0 7px;background:#ff6f0f;color:#fff;font-style:normal;font-size:.64rem;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.3)}.anime-theme .age-badge,.anime-page .age-badge{background:#ff8a13}.oscar-card.movie .age-badge{top:47px}
/* Final phone precision pass — calibrated against the supplied Oscar TV screenshots. */
@media (max-width: 600px) {
:root { --page-pad: 15px; --bottom-nav-h: 54px; }
.oscar-app { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 4px); }
.icon-button { width: 34px; height: 34px; }
.primary-action { min-height: 34px; padding-inline: 13px; border-radius: 7px; font-size: .68rem; }
.outline-action { min-height: 34px; padding-inline: 14px; border-radius: 8px; font-size: .68rem; }
.circle-action { width: 35px; height: 35px; }
.oscar-toolbar { height: calc(52px + var(--safe-top)); padding-inline: 14px; }
.toolbar-title h1 { font-size: 1.35rem; }
.catalog-header-spacer,.home-intro { height: calc(52px + var(--safe-top)); }
.search-sheet { height: calc(54px + var(--safe-top)); padding-inline: 8px; }
.search-field { height: 38px; padding-inline: 10px; border-radius: 10px; }
.search-field input { font-size: .72rem; }
.oscar-bottom-nav { padding: 4px 2px var(--safe-bottom); box-shadow: 0 -5px 15px rgba(0,0,0,.42); }
.oscar-bottom-nav button, .oscar-bottom-nav a { flex-basis: 58px; min-width: 58px; gap: 2px; }
.nav-icon { height: 22px; }
.oscar-bottom-nav b { font-size: .52rem; }
.home-spotlight { min-height: 310px; margin-top: calc(-1 * (52px + var(--safe-top))); }
.spotlight-content { right: 15px; left: 19%; bottom: 22px; }
.spotlight-content h1 { font-size: 1.32rem; }
.spotlight-content p { margin: 6px 0 9px; font-size: .65rem; line-height: 1.55; }
.home-section { padding-inline: 15px; }
.section-heading { min-height: 41px; gap: 7px; }
.section-heading h2 { gap: 6px; font-size: 1rem; }
.section-heading h2 > i { width: 3px; height: 23px; flex-basis: 3px; }
.section-heading button { padding: 6px 0 6px 8px; font-size: .65rem; }
.poster-rail { gap: 9px; }
.oscar-card { flex-basis: 112px; }
.poster-wrap { border-radius: 10px; }
.poster-title { right: 7px; bottom: 7px; left: 6px; font-size: .69rem; line-height: 1.32; }
.card-title { margin-top: 5px; font-size: .66rem; }
.card-meta { margin-top: 2px; font-size: .55rem; }
.translation-badge { top: 7px; padding: 5px 6px; border-radius: 5px 0 0 5px; font-size: .55rem; }
.quality-badge { top: 7px; padding: 5px 6px; border-radius: 0 5px 5px 0; font-size: .5rem; }
.score-badge,.episode-badge { top: 7px; left: 5px; padding: 4px 5px; border-radius: 5px; font-size: .5rem; }
.oscar-card.movie .score-badge { top: 29px; }
.age-badge,.oscar-card.movie .age-badge { top: 31px; padding: 5px 6px; border-radius: 5px 0 0 5px; font-size: .51rem; }
.catalog-page { padding-inline: 15px; padding-bottom: 18px; }
.category-tabs { height: 47px; padding: 4px 15px; gap: 3px; }
.category-tabs button { min-width: 66px; height: 38px; padding-inline: 11px; border-radius: 10px; font-size: .72rem; }
.filter-panel { padding: 7px 0 9px; gap: 5px; }
.filter-chip { height: 35px; min-width: 83px; padding-inline: 10px; gap: 5px; border-radius: 8px; font-size: .65rem; }
.filter-chip.wide { min-width: 112px; }
.filter-chip > i { width: 5px; height: 5px; }
.oscar-grid { gap: 9px 7px; }
.oscar-grid .poster-wrap { border-radius: 10px; }
.channel-grid { gap: 16px 11px; padding-top: 5px; }
.channel-logo { border-radius: 11px; }
.channel-card > strong { margin-top: 6px; font-size: .67rem; }
.channel-card > small { margin-top: 3px; font-size: .54rem; }
.channel-card.compact { flex-basis: 91px; }
.details-topbar { height: calc(52px + var(--safe-top)); padding-inline: 13px; grid-template-columns: 92px 1fr 36px; }
.details-topbar > strong { font-size: .82rem; }
.channel-details { padding-bottom: 20px; }
.channel-details-hero { min-height: 310px; padding: calc(var(--safe-top) + 71px) 15px 18px; }
.channel-details-hero > img:not(.channel-details-bg) { width: 91px; height: 70px; }
.channel-details-hero h1 { margin: 13px 0 9px; font-size: 1.18rem; }
.details-chips { gap: 5px; }
.details-chips span { min-height: 25px; padding-inline: 8px; gap: 4px; border-radius: 12px; font-size: .58rem; }
.frequency-card { margin: -5px 15px 0; padding: 11px 14px; border-radius: 12px; }
.frequency-card h2 { margin-bottom: 7px; font-size: .9rem; }
.frequency-card p { margin: 5px 0; gap: 5px; font-size: .65rem; }
.server-notice { margin: 12px 15px 4px; gap: 4px; font-size: .6rem; }
.details-section { padding: 5px 15px 10px; }
.stream-server-card { min-height: 62px; padding: 8px 10px; grid-template-columns: 32px 1fr auto; gap: 8px; border-radius: 9px; }
.server-play { width: 31px; height: 31px; }
.stream-server-card strong { font-size: .75rem; }
.stream-server-card small { margin-top: 3px; font-size: .55rem; }
.stream-server-card em { min-width: 39px; min-height: 29px; padding-inline: 6px; border-radius: 6px; font-size: .62rem; }
.details-hero { min-height: 410px; padding-bottom: 14px; }
.details-hero-content { padding: calc(var(--safe-top) + 70px) 15px 0; grid-template-columns: minmax(91px,31%) 1fr; gap: 10px; }
.details-poster { border-radius: 10px; }
.details-type { padding: 4px 6px; border-radius: 5px; font-size: .52rem; }
.details-copy h1 { margin: 6px 0 5px; font-size: 1.12rem; }
.details-meta { gap: 4px; font-size: .55rem; }
.details-meta span { padding: 3px 5px; border-radius: 4px; }
.details-copy p { margin: 7px 0 8px; font-size: .61rem; line-height: 1.55; -webkit-line-clamp: 3; }
.details-cta { gap: 6px; }
.details-content { padding-bottom: 14px; }
.genre-chips { padding: 2px 15px 10px; gap: 4px; }
.genre-chips span { padding: 5px 8px; border-radius: 10px; font-size: .54rem; }
.cast-rail { gap: 8px; padding-bottom: 4px; }
.cast-rail div { flex-basis: 55px; }
.cast-rail span { width: 47px; height: 47px; margin-bottom: 4px; border-width: 1px; font-size: .9rem; }
.cast-rail strong { font-size: .52rem; }
.director-row { margin: 0 15px 10px; padding: 8px 10px; border-radius: 8px; }
.director-row span,.director-row strong { font-size: .59rem; }
.episode-loading { min-height: 65px; border-radius: 8px; font-size: .62rem; }
.inline-loader { width: 15px; height: 15px; }
.anime-identity { min-height: 285px; padding: calc(var(--safe-top) + 9px) 15px 17px; }
.anime-mascot { width: 91px; height: 91px; }
.anime-identity h1 { margin-top: 10px; font-size: 1.2rem; }
.anime-identity p { margin-top: 4px; font-size: .6rem; }
.anime-studios { padding-inline: 15px; }
.studio-strip { gap: 9px; padding-bottom: 7px; }
.studio-strip button { flex-basis: 62px; }
.studio-strip button span { width: 48px; height: 48px; margin-bottom: 4px; border-radius: 10px; }
.studio-strip button strong { font-size: .52rem; }
.anime-catalog-block { padding: 0 15px 14px; }
}
.details-title-spacer{display:block}.details-engagement .detail-views{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid rgba(255,255,255,.19);border-radius:18px;background:rgba(15,15,16,.5);color:#ddd;font-size:.72rem;direction:ltr}
@media(max-width:600px){.details-topbar.titleless{grid-template-columns:92px 1fr 36px}.details-engagement .detail-views{gap:4px;padding:5px 8px;border-radius:11px;font-size:.56rem}.details-copy>p{display:none}}
.anime-mascot img{width:100%;height:100%;object-fit:cover;border-radius:50%;mix-blend-mode:screen}
/* Final icon calibration: override SVG attributes at phone size for the Oscar reference proportions. */
@media (max-width:600px){
.oscar-bottom-nav .oscar-icon{width:20px;height:20px}
.oscar-toolbar .oscar-icon,.details-topbar .oscar-icon{width:22px;height:22px}
.section-heading .oscar-icon{width:16px;height:16px}
.icon-button .oscar-icon{width:22px;height:22px}
}
/* Real sports data provider settings - follows the existing Oscar TV settings visual system. */
.sports-provider-setting{margin-top:14px;padding:15px;border:1px solid var(--oscar-border);border-radius:16px;background:linear-gradient(145deg,rgba(22,22,24,.98),rgba(10,10,11,.98));box-shadow:0 12px 30px rgba(0,0,0,.18)}
.sports-provider-heading{display:flex;align-items:center;gap:10px}.sports-provider-heading>span{width:39px;height:39px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:rgba(242,7,22,.12);color:var(--accent)}
.sports-provider-heading b,.sports-provider-heading small{display:block}.sports-provider-heading b{color:#f5f5f6;font-size:.84rem}.sports-provider-heading small{margin-top:3px;color:#77777c;font-size:.65rem;line-height:1.45}
.sports-provider-grid{margin-top:13px;display:grid;gap:9px}.sports-provider-grid label{display:grid;gap:6px}.sports-provider-grid label>span{color:#a7a7ab;font-size:.66rem;font-weight:700;line-height:1.45}.sports-provider-grid input{width:100%;min-width:0;height:43px;padding:0 13px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#09090a;color:#fff;font:600 .78rem/1 Tajawal,Cairo,sans-serif;outline:none;direction:ltr;text-align:left}.sports-provider-grid input:focus{border-color:rgba(242,7,22,.7);box-shadow:0 0 0 3px rgba(242,7,22,.09)}.sports-provider-actions{margin-top:11px;display:flex;justify-content:flex-start}.sports-provider-actions button{height:43px;padding:0 18px;border-radius:11px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;white-space:nowrap}
.sports-provider-controls{margin-top:13px;display:grid;grid-template-columns:1fr auto;gap:8px;direction:ltr}.sports-provider-controls input{min-width:0;height:43px;padding:0 13px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#09090a;color:#fff;font:600 .78rem/1 Tajawal,Cairo,sans-serif;outline:none}.sports-provider-controls input:focus{border-color:rgba(242,7,22,.7);box-shadow:0 0 0 3px rgba(242,7,22,.09)}
.sports-provider-controls button{height:43px;padding:0 15px;border-radius:11px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;white-space:nowrap}.sports-provider-setting p{margin:10px 1px 0;color:#77777c;font-size:.64rem;line-height:1.65}
@media(max-width:600px){.sports-provider-setting{padding:13px;border-radius:14px}.sports-provider-heading b{font-size:.78rem}.sports-provider-heading small{font-size:.6rem}.sports-provider-grid input,.sports-provider-actions button,.sports-provider-controls input,.sports-provider-controls button{height:40px}.sports-provider-actions button,.sports-provider-controls button{padding:0 11px;font-size:.66rem}}
/* Additional professional home sections, pills and stats for richer homepage categorization. */
.home-shortcuts-section{padding:0 18px 14px}
.compact-heading{margin-bottom:12px}
.home-shortcuts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.home-shortcut-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:92px;padding:12px 10px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(20,21,26,.94),rgba(11,12,16,.94));box-shadow:0 10px 20px rgba(0,0,0,.16);color:#fff}
.home-shortcut-tile span{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:rgba(242,7,22,.12);color:var(--accent)}
.home-shortcut-tile strong{font-size:.72rem;line-height:1.2}
.home-category-pills{display:flex;gap:8px;overflow:auto;padding-top:12px;padding-bottom:2px;scrollbar-width:none}.home-category-pills::-webkit-scrollbar{display:none}
.home-category-pills button{flex:0 0 auto;height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#ececef;font-size:.68rem;font-weight:700;white-space:nowrap}
.home-mini-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:0 18px 16px}
.home-mini-stats article{min-height:78px;border-radius:16px;padding:12px 10px;background:linear-gradient(180deg,rgba(18,19,24,.94),rgba(8,9,13,.96));border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.home-mini-stats strong{font-size:1rem;font-weight:900;color:#fff;direction:ltr}
.home-mini-stats span{margin-top:4px;font-size:.63rem;color:#a7a8af;line-height:1.4}
@media (max-width:600px){
.home-shortcuts-section{padding:0 15px 12px}
.home-shortcuts-grid{gap:8px}
.home-shortcut-tile{min-height:84px;padding:10px 8px;border-radius:16px}
.home-shortcut-tile span{width:40px;height:40px;border-radius:12px}
.home-shortcut-tile strong{font-size:.65rem}
.home-category-pills button{height:34px;padding:0 11px;font-size:.62rem}
.home-mini-stats{padding:0 15px 15px;grid-template-columns:repeat(2,minmax(0,1fr))}
.home-mini-stats article{min-height:72px;border-radius:14px;padding:10px 8px}
.home-mini-stats strong{font-size:.92rem}
.home-mini-stats span{font-size:.58rem}
}
/* Desktop/Windows full-viewport pass.
The application must use the complete MAUI WebView client area rather than
emulating a narrow mobile frame in the middle of a desktop window. */
html, body, #app, .app-root, .oscar-app, .oscar-main {
width: 100%;
max-width: none;
}
@media (min-width: 600px) {
:root {
--page-pad: clamp(22px, 2.25vw, 46px);
}
.oscar-app {
width: 100%;
max-width: none;
margin: 0;
box-shadow: none;
}
.oscar-toolbar,
.oscar-bottom-nav,
.search-sheet {
width: 100%;
max-width: none;
margin-inline: 0;
}
.side-menu {
right: 0;
}
.home-spotlight {
width: 100%;
min-height: clamp(560px, 70vh, 820px);
border-radius: 0 0 28px 28px;
}
.home-section,
.catalog-page,
.matches-page,
.anime-page,
.channel-details,
.details-page {
width: 100%;
max-width: none;
}
.details-hero-content,
.details-content {
width: 100%;
max-width: min(1480px, calc(100vw - (2 * var(--page-pad))));
}
}
@media (min-width: 1280px) {
.oscar-grid {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.channel-grid {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.category-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.poster-rail {
gap: 18px;
}
}
@media (min-width: 1700px) {
.oscar-grid {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.channel-grid {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
}
/* Chromium/WebView can skip layout and paint work for distant home sections. */
@supports (content-visibility: auto) {
.target-episode-section,
.target-promo-shell,
.target-program-section,
.oscar-section {
content-visibility: auto;
contain-intrinsic-size: auto 520px;
}
}
/* Scrollbars are visual-only. Keep document scrolling fully enabled on Android WebView and Windows WebView2. */
html,
body,
#app,
.app-root {
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
touch-action: pan-y !important;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.oscar-app,
.oscar-main,
.native-view {
height: auto !important;
min-height: 100vh;
overflow-x: hidden !important;
overflow-y: visible !important;
touch-action: pan-y;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
.app-root::-webkit-scrollbar,
.oscar-app::-webkit-scrollbar,
.oscar-main::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
/* Space Gate Nova+ refactor baseline: true-black application canvas. */
html,
body,
#app,
.app-root,
.oscar-app,
.oscar-main {
background-color: #000000;
}
.oscar-bottom-nav a,
.side-menu a {
text-decoration: none;
color: inherit;
pointer-events: auto;
}
/* NOVA+ 2.51 — browser-first WebP artwork.
No JS probe queue, native re-download, Base64 conversion or duplicate image cache. */
img.nova-fast-image {
display: block;
image-rendering: auto;
color: transparent;
background: linear-gradient(145deg, #171a22, #08090d);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* ===== source: nova-launch.css ===== */
/* Shahid-reference layout measured from MBC Shahid 7.117.0, recolored for Nova. */
:root {
--nova-bg: #000000;
--nova-bg-deep: #050505;
--nova-surface: #0d0d0d;
--nova-surface-2: #141414;
--nova-text: #f8f9fb;
--nova-muted: #aeb7c7;
--nova-line: rgba(255,255,255,.08);
--nova-purple: #9B4DFF;
--nova-blue: #14D7FF;
--nova-cyan: #F04AD8;
--oscar-bg: var(--nova-bg);
--oscar-bg-soft: var(--nova-bg-deep);
--oscar-surface: var(--nova-surface);
--oscar-surface-2: var(--nova-surface-2);
--oscar-surface-3: #1a1a1a;
--oscar-text: var(--nova-text);
--oscar-text-2: #cdd3dd;
--oscar-muted: #8e98a8;
--oscar-border: rgba(255,255,255,.08);
--oscar-red: var(--nova-purple);
--oscar-red-2: #14D7FF;
--oscar-purple: var(--nova-purple);
--oscar-cyan: var(--nova-cyan);
--accent: var(--nova-purple);
--page-pad: clamp(18px, 2.1vw, 36px);
}
html,
body,
#app,
.app-root {
background: #000000 !important;
}
body {
color: var(--nova-text) !important;
font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif !important;
}
.oscar-app,
.oscar-app.anime-theme,
.oscar-app.matches-theme {
--accent: var(--nova-purple) !important;
background: #000000 !important;
}
/* Splash */
.oscar-splash {
gap: 6px !important;
background: #000000 !important;
}
.splash-glow { display: none !important; }
.oscar-splash img {
width: min(56vw, 260px) !important;
height: min(56vw, 260px) !important;
border-radius: 0 !important;
object-fit: contain !important;
filter: none !important;
}
.oscar-splash strong { margin-top: -25px !important; font-size: 1.08rem !important; letter-spacing: 1.8px !important; }
.oscar-splash strong span { color: var(--nova-cyan) !important; }
.oscar-loader { width: 110px !important; height: 3px !important; background: #303a49 !important; }
.oscar-loader span { background: linear-gradient(90deg, transparent, var(--nova-purple), var(--nova-cyan), transparent) !important; }
/* Transparent top navigation over the hero. */
.oscar-toolbar,
.oscar-toolbar.home-toolbar,
.oscar-toolbar:not(.home-toolbar) {
z-index: 145 !important;
height: calc(68px + var(--safe-top)) !important;
padding: var(--safe-top) var(--page-pad) 0 !important;
background: linear-gradient(180deg, rgba(7,10,15,.9), rgba(7,10,15,.4), transparent) !important;
border: 0 !important;
box-shadow: none !important;
}
.oscar-toolbar .toolbar-title {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.nova-header-logo {
width: 48px;
height: 48px;
padding: 0;
flex: 0 0 48px;
border-radius: 9px;
overflow: hidden;
background: transparent;
}
.nova-header-logo img { width: 100%; height: 100%; object-fit: cover; }
.nova-top-tabs {
min-width: 0;
display: flex;
align-items: center;
gap: clamp(15px, 3vw, 38px);
overflow-x: auto;
scrollbar-width: none;
}
.nova-top-tabs::-webkit-scrollbar { display: none; }
.nova-top-tabs button {
flex: 0 0 auto;
padding: 8px 0;
color: #fff;
background: transparent;
font-size: clamp(.82rem, 1.8vw, 1.12rem);
font-weight: 800;
white-space: nowrap;
}
.nova-top-tabs button.active { color: var(--nova-cyan); }
.home-search-button { flex: 0 0 auto; }
.oscar-toolbar:not(.home-toolbar) {
background: linear-gradient(180deg, rgba(10,14,20,.96), rgba(10,14,20,.35), transparent) !important;
}
.oscar-toolbar:not(.home-toolbar) .toolbar-title {
position: static !important;
transform: none !important;
max-width: none !important;
}
.oscar-toolbar:not(.home-toolbar) .toolbar-title h1 {
width: auto !important;
color: #fff;
text-align: right !important;
font-size: clamp(1.3rem, 4vw, 2rem) !important;
}
.catalog-header-spacer { display: none !important; }
/* Drawer */
.side-menu {
width: min(88vw, 360px) !important;
background: var(--nova-bg-deep) !important;
border-left: 1px solid var(--nova-line) !important;
box-shadow: -30px 0 60px rgba(0,0,0,.55) !important;
}
.side-menu-brand { grid-template-columns: 72px 1fr 40px !important; border-color: var(--nova-line) !important; }
.side-menu-brand img { width: 72px !important; height: 72px !important; border-radius: 8px !important; object-fit: cover !important; }
.side-menu > button { min-height: 54px !important; border-radius: 5px !important; }
.side-menu > button:active { color: #fff !important; background: var(--nova-surface) !important; }
/* Reference campaign row occupies the same role as Shahid's first landscape rail. */
.nova-campaigns { padding: 18px var(--page-pad) 26px !important; background: #000000 !important; }
.nova-campaign-heading {
min-height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nova-campaign-heading h2 { margin: 0; color: #fff; font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 900; }
.nova-campaign-heading button { width: 42px; height: 42px; display: grid; place-items: center; color: #98a6bb; background: transparent; }
.nova-campaign-rail {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.nova-campaign-rail::-webkit-scrollbar { display: none; }
.nova-campaign-card {
flex: 0 0 clamp(280px, 43vw, 560px) !important;
aspect-ratio: 16 / 9;
padding: 0;
overflow: hidden;
border: 0 !important;
border-radius: 8px !important;
background: var(--nova-surface);
box-shadow: none !important;
scroll-snap-align: start;
}
.nova-campaign-card::after { display: none !important; }
.nova-campaign-card img { width: 100%; height: 100%; object-fit: cover; }
/* Home rails. */
.target-home-reference .target-worldcup,
.target-home-reference .target-programs,
.target-home-reference .target-episode-section,
.target-home-reference .oscar-section,
.target-home-reference .target-promo-shell {
padding-right: var(--page-pad) !important;
padding-left: var(--page-pad) !important;
background: #000000 !important;
}
.target-home-reference .section-heading,
.section-heading { min-height: 60px !important; }
.target-home-reference .section-heading h2,
.section-heading h2 {
color: #fff !important;
font-size: clamp(1.18rem, 2.5vw, 1.72rem) !important;
font-weight: 900 !important;
}
.target-home-reference .section-heading h2 > i,
.section-heading h2 > i { display: none !important; }
.target-home-reference .section-heading button,
.section-heading button { color: #9aa8bc !important; }
.target-home-reference .poster-rail { gap: 11px !important; }
.target-home-reference .poster-rail .oscar-card { flex-basis: clamp(145px, 25vw, 260px) !important; }
.target-program-card,
.target-episode-card,
.poster-wrap { border-radius: 7px !important; background: var(--nova-surface) !important; box-shadow: none !important; }
.target-worldcup-promo { border: 0 !important; border-radius: 8px !important; background: var(--nova-surface) !important; box-shadow: none !important; }
.target-worldcup-copy em,
.target-promo-copy em,
.primary-action {
border-radius: 999px !important;
background: linear-gradient(105deg,var(--nova-purple),var(--nova-blue)) !important;
box-shadow: none !important;
}
/* Catalog hero measured from the TV Shows / Movies screens. */
.catalog-page { padding: 0 0 34px !important; background: #000000 !important; }
.catalog-showcase {
position: relative;
height: clamp(590px, 78vh, 860px);
overflow: hidden;
background: var(--nova-bg-deep);
cursor: pointer;
}
.catalog-showcase-image { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 18% !important; }
.catalog-showcase-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(9,12,17,.1),rgba(9,12,17,.03) 40%,rgba(21,26,35,.55) 72%,var(--nova-bg) 98%); }
.catalog-showcase-copy {
position: absolute;
z-index: 2;
right: var(--page-pad);
bottom: 36px;
left: var(--page-pad);
max-width: 900px;
margin: auto;
color: #fff;
text-align: center;
}
.catalog-showcase-copy h2 { margin: 0 0 12px; font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.05; font-weight: 900; text-shadow: 0 3px 20px #000; }
.catalog-showcase-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; color: #d8dde6; font-size: .92rem; }
.catalog-showcase-meta span + span::before { content: "•"; margin-left: 7px; color: var(--nova-cyan); }
.catalog-showcase-copy p { max-width: 720px; margin: 13px auto 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #d2d7e0; font-weight: 700; }
.catalog-showcase-actions { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.catalog-watch,
.catalog-save { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; color: #fff; font-weight: 900; }
.catalog-watch { background: linear-gradient(105deg,var(--nova-purple),var(--nova-blue)); }
.catalog-save { border: 3px solid transparent; background: linear-gradient(var(--nova-bg-deep),var(--nova-bg-deep)) padding-box,linear-gradient(105deg,var(--nova-purple),var(--nova-cyan),var(--nova-blue)) border-box; }
.catalog-save.saved { background: linear-gradient(105deg,var(--nova-purple),var(--nova-blue)); }
.category-tabs {
height: 68px !important;
margin: 0 !important;
padding: 8px var(--page-pad) !important;
gap: 8px !important;
border: 0 !important;
background: #000000 !important;
}
.category-tabs button {
min-width: 0 !important;
height: 42px !important;
padding: 0 17px !important;
border: 1px solid var(--nova-line) !important;
border-radius: 999px !important;
color: #c5ccd7 !important;
background: var(--nova-surface) !important;
font-size: .84rem !important;
}
.category-tabs button.active { color: #fff !important; border-color: transparent !important; background: linear-gradient(105deg,var(--nova-purple),var(--nova-blue)) !important; box-shadow: none !important; }
.filter-panel { padding: 4px var(--page-pad) 16px !important; }
.filter-chip { height: 42px !important; min-width: 104px !important; border: 1px solid var(--nova-line) !important; border-radius: 999px !important; color: #d5dbe4 !important; background: var(--nova-surface) !important; }
.oscar-grid { padding: 0 var(--page-pad); grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 12px 10px !important; }
.oscar-grid .poster-wrap { border-radius: 7px !important; }
.poster-title { right: 9px !important; bottom: 10px !important; font-size: .82rem !important; }
.card-title { text-align: right !important; }
.translation-badge,
.quality-badge,
.score-badge,
.episode-badge { border-radius: 4px !important; }
.translation-badge { background: var(--nova-purple) !important; }
.quality-badge { background: var(--nova-blue) !important; }
.channel-grid { padding: 12px var(--page-pad) 0; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 18px 10px !important; }
.channel-logo { border-radius: 7px !important; background: var(--nova-surface) !important; }
/* Search / Explore reference. */
.search-sheet {
height: calc(78px + var(--safe-top)) !important;
padding: var(--safe-top) var(--page-pad) 0 !important;
gap: 9px !important;
background: var(--nova-surface) !important;
box-shadow: none !important;
}
.search-field { height: 52px !important; border: 0 !important; border-radius: 999px !important; color: #97a5bb !important; background: var(--nova-bg-deep) !important; }
.search-field:focus-within { box-shadow: 0 0 0 2px var(--nova-purple); }
/* Details: full-bleed portrait header and centered copy. */
.media-details,
.channel-details,
.episode-details-page { background: #000000 !important; }
.details-hero { min-height: clamp(620px, 86vh, 900px) !important; padding-bottom: 30px !important; }
.details-hero > .safe-background-image { object-position: center 18% !important; }
.details-hero-shade { background: linear-gradient(180deg,rgba(9,12,17,.1),rgba(9,12,17,.03) 36%,rgba(21,26,35,.58) 70%,var(--nova-bg) 98%) !important; backdrop-filter: none !important; }
.details-hero-content {
width: 100% !important;
max-width: 900px !important;
margin: 0 auto !important;
padding: calc(var(--safe-top) + 100px) var(--page-pad) 12px !important;
display: block !important;
text-align: center !important;
}
.details-poster { display: none !important; }
.details-copy { text-align: center !important; }
.details-copy h1 { margin: 8px 0 10px !important; font-size: clamp(2rem,6vw,4.4rem) !important; line-height: 1.05 !important; }
.details-meta,
.details-status-badges,
.details-engagement,
.details-cta { justify-content: center !important; }
.details-copy p { max-width: 720px; margin: 14px auto !important; color: #d3d8e1 !important; }
.details-cta .primary-action { min-width: min(56vw,360px); }
.details-content { max-width: 1280px !important; margin: 0 auto; }
.details-section { padding-right: var(--page-pad) !important; padding-left: var(--page-pad) !important; }
.genre-chips { justify-content: center; }
.stream-choice-card,
.settings-list,
.library-sync-card,
.frequency-card,
.match-card,
.schedule-row { border-color: var(--nova-line) !important; background: var(--nova-surface) !important; }
/* Account and settings. */
.account-card {
margin: calc(78px + var(--safe-top)) var(--page-pad) 20px !important;
min-height: 130px;
grid-template-columns: 92px 1fr 44px !important;
border: 0 !important;
border-radius: 8px !important;
background: var(--nova-surface) !important;
}
.account-card img { width: 92px !important; height: 92px !important; border-radius: 8px !important; object-fit: cover !important; }
.account-page .settings-list,
.settings-page > .settings-list,
.settings-page > .library-sync-card { margin-right: var(--page-pad); margin-left: var(--page-pad); }
.settings-list { border-radius: 8px !important; }
.settings-list > div,
.settings-list > label,
.settings-list > button { min-height: 68px !important; border-color: var(--nova-line) !important; background: var(--nova-surface) !important; }
.settings-list input[type="checkbox"] { accent-color: var(--nova-purple) !important; }
@media (max-width: 600px) {
:root { --page-pad: 18px; }
.oscar-toolbar,
.oscar-toolbar.home-toolbar,
.oscar-toolbar:not(.home-toolbar) { height: calc(62px + var(--safe-top)) !important; padding-inline: 12px !important; }
.nova-header-logo { width: 40px; height: 40px; flex-basis: 40px; border-radius: 7px; }
.nova-top-tabs { gap: 20px; }
.nova-top-tabs button { font-size: .74rem; }
.home-search-button { display: none !important; }
.nova-campaigns { padding-top: 8px !important; }
.nova-campaign-heading { min-height: 52px; }
.nova-campaign-heading h2 { font-size: 1.08rem; }
.nova-campaign-rail { margin-inline: calc(-1 * var(--page-pad)); padding-inline: var(--page-pad); gap: 10px; }
.nova-campaign-card { flex-basis: 74vw !important; border-radius: 6px !important; }
.target-home-reference .section-heading,
.section-heading { min-height: 52px !important; }
.target-home-reference .section-heading h2,
.section-heading h2 { font-size: 1.08rem !important; }
.target-home-reference .poster-rail .oscar-card { flex-basis: 42vw !important; }
.catalog-showcase { height: clamp(580px, 79vh, 740px); }
.catalog-showcase-image { object-position: center top !important; }
.catalog-showcase-copy { bottom: 30px; }
.catalog-showcase-copy h2 { font-size: clamp(1.7rem,8vw,2.5rem); }
.catalog-showcase-copy p { font-size: .76rem; }
.catalog-showcase-actions { margin-top: 15px; gap: 10px; }
.catalog-watch,
.catalog-save { min-height: 49px; font-size: .8rem; }
.category-tabs { height: 62px !important; }
.category-tabs button { height: 40px !important; padding-inline: 14px !important; font-size: .72rem !important; }
.filter-panel { gap: 7px !important; }
.filter-chip { min-width: 93px !important; height: 39px !important; font-size: .7rem !important; }
.oscar-grid { gap: 10px 8px !important; }
.poster-title { font-size: .68rem !important; }
.details-hero { min-height: clamp(590px, 81vh, 760px) !important; }
.details-copy h1 { font-size: clamp(1.7rem,8vw,2.6rem) !important; }
.account-card { margin-top: calc(70px + var(--safe-top)) !important; min-height: 110px; grid-template-columns: 76px 1fr 38px !important; }
.account-card img { width: 76px !important; height: 76px !important; }
}
@media (min-width: 1280px) {
.oscar-grid { grid-template-columns: repeat(7,minmax(0,1fr)) !important; }
.channel-grid { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
.target-home-reference .poster-rail .oscar-card { flex-basis: 210px !important; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
}
/* ===== source: nova-identity-unified.css ===== */
/* Space Gate Nova+ — Unified visual identity layer
Load this file last. It maps old namespaces (oscar/sg/mc/episode) to one Nova design system. */
:root {
color-scheme: dark;
--nova-bg: #000000;
--nova-bg-deep: #050505;
--nova-bg-glow: #000000;
--nova-surface: #0d0d0d;
--nova-surface-2: #141414;
--nova-surface-3: #1a1a1a;
--nova-card: rgba(13,13,13,.94);
--nova-card-strong: rgba(18,18,18,.98);
--nova-text: #f8f9fb;
--nova-text-2: #cdd3dd;
--nova-muted: #aeb7c7;
--nova-muted-2: #8e98a8;
--nova-line: #2b3442;
--nova-line-soft: rgba(255,255,255,.08);
--nova-purple: #9B4DFF;
--nova-blue: #14D7FF;
--nova-cyan: #F04AD8;
--nova-green: #14D7FF;
--nova-orange: #F04AD8;
--nova-danger: #F04AD8;
--nova-brand-gradient: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
--nova-surface-gradient: linear-gradient(145deg, rgba(18,18,18,.98), rgba(0,0,0,.98));
--nova-page-pad: clamp(18px, 2.1vw, 36px);
--nova-radius-sm: 12px;
--nova-radius-md: 18px;
--nova-radius-lg: 24px;
--nova-radius-xl: 30px;
--nova-shadow: 0 18px 46px rgba(0,0,0,.34);
--nova-shadow-soft: 0 12px 30px rgba(0,0,0,.22);
/* Legacy namespace mapping. */
--oscar-bg: var(--nova-bg);
--oscar-bg-soft: var(--nova-bg-deep);
--oscar-surface: var(--nova-surface);
--oscar-surface-2: var(--nova-surface-2);
--oscar-surface-3: var(--nova-surface-3);
--oscar-glass: rgba(29,36,48,.86);
--oscar-text: var(--nova-text);
--oscar-text-2: var(--nova-text-2);
--oscar-muted: var(--nova-muted-2);
--oscar-border: var(--nova-line-soft);
--oscar-red: var(--nova-purple);
--oscar-red-2: #14D7FF;
--oscar-purple: var(--nova-purple);
--oscar-cyan: var(--nova-cyan);
--accent: var(--nova-purple);
--sg-bg: var(--nova-bg);
--sg-bg-deep: var(--nova-bg-deep);
--sg-surface: var(--nova-surface);
--sg-surface-2: var(--nova-surface-2);
--sg-text: var(--nova-text);
--sg-muted: var(--nova-muted);
--sg-line: var(--nova-line-soft);
--sg-purple: var(--nova-purple);
--sg-blue: var(--nova-blue);
--sg-cyan: var(--nova-cyan);
--page-pad: var(--nova-page-pad);
}
html,
body,
#app,
.app-root {
min-height: 100%;
background: #000000 !important;
color: var(--nova-text) !important;
}
body {
font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif !important;
direction: rtl;
}
button,
input,
select,
textarea { font-family: inherit !important; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--nova-cyan) !important;
outline-offset: 2px;
}
/* Global shell */
.oscar-app,
.oscar-app.anime-theme,
.oscar-app.matches-theme,
.sg-app-root,
.mc-root,
.episode-details-page {
--accent: var(--nova-purple) !important;
background:
radial-gradient(circle at 72% 0%, rgba(141,44,255,.18), transparent 34%),
radial-gradient(circle at 8% 20%, rgba(26,169,255,.12), transparent 28%),
linear-gradient(180deg, var(--nova-bg-glow) 0%, var(--nova-bg) 42%, var(--nova-bg-deep) 100%) !important;
color: var(--nova-text) !important;
}
.oscar-main,
.sg-main-content,
.native-view { background: transparent !important; color: var(--nova-text) !important; }
/* Top bars */
.oscar-toolbar,
.oscar-toolbar.home-toolbar,
.oscar-toolbar.series-section-toolbar,
.oscar-toolbar.account-toolbar,
.sg-top-app-bar,
.search-sheet,
.mc-tabs {
background: linear-gradient(180deg, rgba(16,21,29,.96), rgba(16,21,29,.72), rgba(16,21,29,0)) !important;
border-color: var(--nova-line-soft) !important;
box-shadow: none !important;
backdrop-filter: blur(18px) !important;
}
.toolbar-title h1,
.series-section-bar h1,
.sg-bar-title,
.mc-section-title h2 { color: var(--nova-text) !important; }
.nova-header-logo,
.side-menu-brand img,
.sg-brand-logo,
.oscar-splash img { filter: drop-shadow(0 14px 34px rgba(141,44,255,.22)) !important; }
/* Navigation */
.oscar-bottom-nav,
.original-bottom-nav,
.nova-shell-nav,
.sg-bottom-nav {
background: rgba(16,21,29,.965) !important;
border-top: 1px solid var(--nova-line-soft) !important;
box-shadow: 0 -18px 44px rgba(0,0,0,.36) !important;
backdrop-filter: blur(22px) !important;
}
.oscar-bottom-nav button,
.nova-shell-nav button,
.sg-bottom-nav button { color: var(--nova-muted-2) !important; }
.oscar-bottom-nav button.active,
.nova-shell-nav button.active,
.sg-bottom-nav button.active { color: var(--nova-text) !important; }
.oscar-bottom-nav button.active .nav-icon,
.nova-shell-nav button.active > span,
.sg-bottom-nav button.active span {
background: var(--nova-brand-gradient) !important;
color: #fff !important;
box-shadow: 0 8px 24px rgba(141,44,255,.36) !important;
}
/* Drawers, overlays and menus */
.side-menu,
.sg-side-drawer,
.sg-search-overlay {
background: linear-gradient(180deg, rgba(29,36,48,.99), rgba(16,21,29,.99)) !important;
border-color: var(--nova-line-soft) !important;
box-shadow: -28px 0 58px rgba(0,0,0,.5) !important;
}
.side-menu-brand,
.sg-drawer-header { border-color: var(--nova-line-soft) !important; }
.side-menu button,
.sg-drawer-menu button { color: var(--nova-text-2) !important; }
.side-menu button:active,
.sg-drawer-menu button:active { background: rgba(141,44,255,.14) !important; color: #fff !important; }
/* Inputs */
.search-field,
.sg-search-input-wrapper,
.nova-search-box,
.episode-tools label,
.content-comment-composer input,
.content-reply-composer input {
background: rgba(16,21,29,.88) !important;
border: 1px solid var(--nova-line-soft) !important;
border-radius: var(--nova-radius-md) !important;
color: var(--nova-text) !important;
}
.search-field:focus-within,
.sg-search-input-wrapper:focus-within,
.nova-search-box:focus-within,
.episode-tools label:focus-within {
border-color: rgba(23,217,208,.62) !important;
box-shadow: 0 0 0 3px rgba(23,217,208,.08) !important;
}
/* Cards and surfaces */
.primary-action,
.home-subscribe-cta,
.category-tabs button.active,
.favorite-button.saved,
.circle-action.saved,
.content-comment-composer button,
.content-reply-composer button,
.mc-live-play,
.mc-tabs button.active::after,
.mc-section-title h2 i,
.mc-video-copy small i,
.mc-video-meta i,
.mc-team-switch button.active::after,
.mc-event-row > button,
.people-rail .crew-role,
.details-type,
.episode-item em,
.sports-provider-controls button,
.sports-provider-actions button {
background: var(--nova-brand-gradient) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 12px 30px rgba(141,44,255,.25) !important;
}
.outline-action,
.circle-action,
.icon-button,
.category-tabs button,
.category-grid button,
.home-shortcut-tile,
.account-card,
.details-actions button,
.episode-item,
.stream-choice-card,
.download-link-card,
.download-link-main,
.episode-visual-card,
.episode-series-link,
.content-comment,
.content-comment.nested,
.mc-match-card,
.mc-video-card,
.mc-details-card,
.mc-team-switch,
.sg-account-card,
.sg-offer-card,
.sg-commercial-ad,
.nova-card,
.nova-gateway,
.nova-account-stats > div,
.nova-storage-grid > div,
.nova-settings-section {
background: var(--nova-surface-gradient) !important;
border-color: var(--nova-line-soft) !important;
color: var(--nova-text) !important;
box-shadow: var(--nova-shadow-soft) !important;
}
.poster,
.media-card-poster,
.episode-thumb,
.mc-video-thumb,
.nova-poster-wrap,
.nova-card-poster,
.sg-ad-media {
background: rgba(16,21,29,.72) !important;
border-color: var(--nova-line-soft) !important;
}
/* Text hierarchy */
small,
.toolbar-title small,
.side-menu-brand small,
.section-heading span,
.section-heading small,
.mc-match-score small,
.mc-video-copy span,
.mc-video-copy small,
.mc-info-row span,
.episode-card-copy small,
.download-link-copy small,
.stream-choice-card small,
.content-comment header small,
.content-comments-empty,
.nova-result-summary,
.nova-empty-state p,
.sg-account-card dt,
.sg-account-card small,
.sg-ad-copy small {
color: var(--nova-muted) !important;
}
.section-heading h2 > i,
.nova-eyebrow::before,
.hero-dots i.active,
.oscar-loader span,
.nova-loader-track i,
.download-progress-track i {
background: var(--nova-brand-gradient) !important;
}
/* Match Center: remove isolated green/red skin and make it Nova. */
.mc-list-hero,
.mc-detail-hero {
background:
radial-gradient(circle at 50% 15%, rgba(141,44,255,.26), transparent 38%),
linear-gradient(180deg, #202936 0%, #151a23 44%, #10151d 100%) !important;
}
.mc-round-play { background: var(--nova-brand-gradient) !important; box-shadow: 0 0 0 8px rgba(141,44,255,.13) !important; }
.mc-trophy { color: var(--nova-cyan) !important; }
.mc-day-tabs button,
.mc-match-score span,
.mc-scoreboard section em,
.mc-event-row time,
.content-comment-actions button,
.content-comments-more {
background: rgba(37,46,60,.86) !important;
color: var(--nova-text-2) !important;
}
.mc-day-tabs button.active,
.mc-team-switch button.active { color: #fff !important; background: rgba(141,44,255,.22) !important; }
.mc-event-line { background: rgba(255,255,255,.12) !important; }
.mc-event-node { background: var(--nova-bg-deep) !important; border-color: var(--nova-surface-2) !important; }
/* Details/episodes/comments */
.episode-detail-shade,
.details-backdrop::after {
background: linear-gradient(180deg, rgba(16,21,29,.08), rgba(16,21,29,.46) 42%, var(--nova-bg-deep) 100%) !important;
}
.details-status-badges span,
.details-engagement button,
.quality-source-note,
.episode-quality-stack span,
.download-progress-area {
background: rgba(16,21,29,.58) !important;
border-color: var(--nova-line-soft) !important;
color: var(--nova-text-2) !important;
}
.details-engagement button,
.content-comment-actions .accent,
.content-comments-more { color: var(--nova-cyan) !important; }
.content-comment-avatar,
.content-comment-avatar.red { background: var(--nova-brand-gradient) !important; }
.content-comment header i { background: var(--nova-cyan) !important; }
/* Account, notifications and ads with the same system. */
.sg-account-portal,
.sg-account-hero,
.notification-panel,
.sg-commercial-ad {
color: var(--nova-text) !important;
}
.sg-account-message.success,
.sg-permissions .on { color: #7ff1c3 !important; }
.sg-account-message.error,
.sg-permissions .off { color: #ff9aac !important; }
.sg-public-button,
.sg-ad-cta,
.notification-action,
.nova-settings-actions button {
background: var(--nova-brand-gradient) !important;
color: #fff !important;
border-color: transparent !important;
}
/* Splash/loading */
.oscar-splash,
.commercial-loading-screen,
.nova-app-loader,
.nova-home-loading,
.nova-centered-loading {
background:
radial-gradient(circle at 50% 18%, rgba(141,44,255,.25), transparent 34%),
linear-gradient(180deg, var(--nova-bg-glow), var(--nova-bg-deep)) !important;
color: var(--nova-text) !important;
}
.oscar-splash strong span,
.nova-loader-brand,
.nova-eyebrow,
.nova-section-heading > button,
.sg-top-tabs button.active { color: var(--nova-cyan) !important; }
@media (max-width: 700px) {
:root { --nova-page-pad: 15px; }
.oscar-toolbar,
.oscar-toolbar.home-toolbar,
.oscar-toolbar.series-section-toolbar,
.oscar-toolbar.account-toolbar {
background: linear-gradient(180deg, rgba(16,21,29,.94), rgba(16,21,29,.58), transparent) !important;
}
}
/* ===== source: nova-mobile-recovery.css ===== */
/* Space Gate Nova+ v2.38 emergency polish: one purple identity, lighter UI and faster taps. */
:root {
--nova-purple: #9b5cff;
--nova-purple-2: #6f35ff;
--nova-purple-soft: rgba(155, 92, 255, .18);
--nova-bg: #05040a;
--nova-panel: rgba(14, 11, 24, .82);
--nova-panel-2: rgba(23, 17, 39, .72);
--nova-line: rgba(166, 126, 255, .24);
--nova-text: #f7f3ff;
--nova-muted: #bdb3d5;
--sg-reference-control-height: 38px;
--sg-reference-control-padding: 13px;
--sg-reference-body-size: .78rem;
}
html, body, #app, .oscar-app {
background: radial-gradient(circle at 50% -10%, rgba(155, 92, 255, .22), transparent 42%), linear-gradient(180deg, #05040a, #070510 48%, #05040a) !important;
color: var(--nova-text) !important;
overscroll-behavior: none;
-webkit-tap-highlight-color: transparent;
}
button, a, [role="button"], .target-card, .series-card, .catalog-card, .shahid-card, .episode-row, .schedule-row {
touch-action: manipulation !important;
}
.oscar-toolbar,
.search-sheet,
.details-topbar {
min-height: calc(48px + var(--safe-top)) !important;
padding: calc(var(--safe-top) + 6px) 12px 7px !important;
background: linear-gradient(180deg, rgba(5,4,10,.92), rgba(5,4,10,.54), transparent) !important;
border: 0 !important;
backdrop-filter: blur(14px) !important;
}
.nova-header-logo,
.icon-button,
.series-back-button,
.mc-round-icon,
.details-topbar .icon-button,
.anime-top-actions .icon-button {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: 999px !important;
border: 1px solid rgba(155, 92, 255, .28) !important;
background: rgba(17, 12, 30, .72) !important;
color: #f7f3ff !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
}
.nova-header-logo img,
.side-menu-brand img {
object-fit: cover !important;
}
.nova-header-logo img {
width: 100% !important;
height: 100% !important;
border-radius: 999px !important;
}
.nova-top-tabs {
min-height: 35px !important;
padding: 3px !important;
gap: 2px !important;
border-radius: 999px !important;
border: 1px solid rgba(155, 92, 255, .25) !important;
background: rgba(13, 10, 22, .70) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
}
.nova-top-tabs button {
min-height: 29px !important;
padding: 0 10px !important;
border-radius: 999px !important;
font-size: .72rem !important;
color: #cfc5e6 !important;
}
.nova-top-tabs button.active {
color: #fff !important;
background: linear-gradient(135deg, rgba(155,92,255,.95), rgba(111,53,255,.72)) !important;
box-shadow: 0 8px 20px rgba(111,53,255,.28) !important;
}
.home-subscribe-cta {
bottom: calc(64px + var(--safe-bottom)) !important;
width: auto !important;
min-width: 112px !important;
max-width: 148px !important;
min-height: 38px !important;
height: 38px !important;
padding: 0 14px !important;
border-radius: 999px !important;
font-size: .76rem !important;
font-weight: 850 !important;
color: #fff !important;
background: linear-gradient(135deg, rgba(155,92,255,.94), rgba(111,53,255,.72)) !important;
border: 1px solid rgba(195,169,255,.30) !important;
box-shadow: 0 10px 22px rgba(111,53,255,.30) !important;
}
.side-menu {
width: min(74vw, 282px) !important;
padding: calc(var(--safe-top) + 12px) 10px calc(var(--safe-bottom) + 12px) !important;
background: linear-gradient(180deg, rgba(16,12,27,.98), rgba(6,5,12,.98)) !important;
border-left: 1px solid var(--nova-line) !important;
box-shadow: -18px 0 46px rgba(0,0,0,.45) !important;
}
.side-menu-brand {
grid-template-columns: 44px 1fr 34px !important;
gap: 9px !important;
padding: 0 4px 12px !important;
margin-bottom: 10px !important;
}
.side-menu-brand img {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
}
.side-menu-brand strong { font-size: .88rem !important; }
.side-menu-brand small { font-size: .62rem !important; color: var(--nova-muted) !important; }
.side-menu > button,
.sg-drawer-menu > button {
min-height: 40px !important;
height: 40px !important;
padding: 0 11px !important;
gap: 10px !important;
border-radius: 12px !important;
font-size: .78rem !important;
color: #ded6f2 !important;
}
.side-menu > button:active,
.side-menu > button:hover,
.sg-drawer-menu > button.active {
color: #fff !important;
background: rgba(155,92,255,.16) !important;
}
.oscar-bottom-nav,
.original-bottom-nav {
height: calc(58px + var(--safe-bottom)) !important;
padding: 4px 0 var(--safe-bottom) !important;
background: rgba(8,6,15,.92) !important;
border-top: 1px solid rgba(155,92,255,.18) !important;
backdrop-filter: blur(16px) !important;
box-shadow: 0 -12px 32px rgba(0,0,0,.34) !important;
}
.oscar-bottom-nav button,
.original-bottom-nav button {
min-width: 0 !important;
gap: 2px !important;
font-size: .58rem !important;
color: #a99ec2 !important;
}
.oscar-bottom-nav button.active,
.original-bottom-nav button.active {
color: #fff !important;
}
.oscar-bottom-nav .oscar-icon,
.original-bottom-nav .oscar-icon {
width: 20px !important;
height: 20px !important;
}
/* Disable the extra floating global notification UI. Content-specific notify buttons remain. */
.sg-notification-bell,
.sg-notification-headsup {
display: none !important;
}
.safe-background-image,
.target-hero-bg,
.series-landing-hero-image,
.catalog-showcase-image,
.channel-details-bg {
opacity: .72 !important;
filter: saturate(1.03) contrast(1.03) !important;
}
.target-card,
.series-card,
.shahid-card,
.catalog-card,
.nova-media-card,
.episode-card,
.details-action-card,
.account-panel,
.settings-card,
.mc-card,
.data-panel {
border-color: rgba(155,92,255,.20) !important;
background: linear-gradient(180deg, rgba(20,15,33,.82), rgba(8,7,14,.86)) !important;
box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
}
.target-watch-button,
.series-watch-button,
.catalog-watch,
.episode-play,
.server-play,
.primary-action,
.account-login-button,
.primary-sync-button {
color: #fff !important;
background: linear-gradient(135deg, #9b5cff, #6f35ff) !important;
border-color: rgba(197,171,255,.28) !important;
box-shadow: 0 10px 24px rgba(111,53,255,.30) !important;
}
.target-save-button,
.series-save-button,
.catalog-save,
.favorite-button,
.notify-toggle,
.secondary-sync-button {
color: #f5efff !important;
background: rgba(155,92,255,.12) !important;
border-color: rgba(155,92,255,.28) !important;
}
.details-hero,
.channel-details,
.episode-details,
.series-landing-hero,
.catalog-showcase {
background: radial-gradient(circle at 50% 18%, rgba(155,92,255,.20), transparent 46%), linear-gradient(180deg, #080511, #05040a) !important;
}
.details-poster,
.series-card-image,
.target-hero-poster,
.poster,
.episode-thumb,
.channel-logo,
.channel-mini {
background: linear-gradient(145deg, #171022, #08060e) !important;
border-color: rgba(155,92,255,.22) !important;
}
img.nova-fast-image,
.safe-background-image img,
.series-card-image img,
.poster img,
.episode-thumb img {
image-rendering: auto;
transform: translateZ(0);
}
@media (max-width: 520px) {
.oscar-main {
padding-bottom: calc(70px + var(--safe-bottom)) !important;
}
.oscar-toolbar h1,
.series-section-bar h1,
.details-topbar strong {
font-size: .98rem !important;
}
.nova-top-tabs button {
padding: 0 8px !important;
font-size: .68rem !important;
}
.home-subscribe-cta {
bottom: calc(60px + var(--safe-bottom)) !important;
}
}
/* ===== source: nova-commercial-launch.css ===== */
/* Space Gate Nova - Commercial launch polish v2.41.0
Final layer: scrolling, responsiveness, purple identity and launch-ready account/settings UI. */
:root {
--oscar-purple: #9B4DFF;
--oscar-purple-2: #14D7FF;
--oscar-cyan: #14D7FF;
--accent: #9B4DFF;
--nova-bg: #070510;
--nova-surface: rgba(17, 14, 28, .92);
--nova-border: rgba(199, 152, 255, .16);
--bottom-nav-h: 66px;
}
html,
body,
#app,
.app-root {
width: 100% !important;
min-height: 100dvh !important;
height: auto !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: auto !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
background: var(--nova-bg) !important;
}
body.sg-player-open { overflow: hidden !important; }
.oscar-app,
.oscar-main,
.native-view,
.target-home-reference,
.shahid-home-reference,
.catalog-page,
.settings-page,
.commercial-settings-page,
.commercial-account {
height: auto !important;
min-height: 100dvh !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: visible !important;
overscroll-behavior-y: auto !important;
touch-action: pan-y !important;
}
.oscar-app {
padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 18px) !important;
background:
radial-gradient(circle at 14% 0%, rgba(155, 77, 255, .18), transparent 32%),
radial-gradient(circle at 92% 10%, rgba(20, 215, 255, .08), transparent 30%),
linear-gradient(180deg, #090610 0%, #06050b 52%, #090610 100%) !important;
--accent: var(--oscar-purple) !important;
}
.shahid-home-reference {
overflow: visible !important;
padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 28px) !important;
background: #090610 !important;
}
/* Remove the old top text tabs requested for launch. */
.nova-top-tabs { display: none !important; }
.oscar-toolbar {
height: calc(62px + var(--safe-top)) !important;
padding: var(--safe-top) 12px 0 !important;
background: linear-gradient(180deg, rgba(6,5,12,.96), rgba(6,5,12,.56), transparent) !important;
border-bottom: 0 !important;
backdrop-filter: none !important;
}
.oscar-toolbar:not(.home-toolbar) {
background: rgba(7,5,14,.94) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
}
.catalog-header-spacer { height: calc(62px + var(--safe-top)) !important; }
.compact-brand-button,
.nova-header-logo {
width: 38px !important;
height: 38px !important;
padding: 0 !important;
border-radius: 13px !important;
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 8px 24px rgba(0,0,0,.26) !important;
}
.compact-brand-button img,
.nova-header-logo img { width: 100% !important; height: 100% !important; border-radius: inherit !important; object-fit: cover !important; }
.toolbar-actions .icon-button,
.oscar-toolbar .icon-button {
width: 38px !important;
height: 38px !important;
}
.home-subscribe-cta {
right: auto !important;
left: 14px !important;
bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
min-height: 38px !important;
padding: 0 14px !important;
border-radius: 999px !important;
font-size: .78rem !important;
background: linear-gradient(135deg, #9B4DFF, #14D7FF) !important;
box-shadow: 0 10px 26px rgba(155,77,255,.26) !important;
}
.oscar-bottom-nav {
height: calc(var(--bottom-nav-h) + var(--safe-bottom)) !important;
padding: 4px 2px var(--safe-bottom) !important;
background: rgba(6,5,12,.985) !important;
border-top-color: rgba(199,152,255,.10) !important;
}
.oscar-bottom-nav button, .oscar-bottom-nav a { flex-basis: 60px !important; min-width: 60px !important; gap: 2px !important; }
.oscar-bottom-nav .oscar-icon { width: 23px !important; height: 23px !important; }
.oscar-bottom-nav b { font-size: .56rem !important; }
.oscar-bottom-nav button.active, .oscar-bottom-nav a.active { color: #caa7ff !important; }
.oscar-bottom-nav button.active .nav-icon, .oscar-bottom-nav a.active .nav-icon { filter: drop-shadow(0 4px 10px rgba(155,77,255,.45)) !important; }
/* Smooth but light interactions: no heavy blur or scroll-jank. */
* { -webkit-tap-highlight-color: transparent !important; }
button,
a,
[role="button"],
.oscar-card,
.shahid-short-card,
.shahid-person-card,
.shahid-ranked-card,
.shahid-poster-card,
.shahid-landscape-card,
.series-standard-card,
.series-feature-card,
.catalog-showcase,
.match-card {
touch-action: manipulation !important;
user-select: none !important;
cursor: pointer;
}
button:active,
[role="button"]:active,
.oscar-card:active,
.shahid-short-card:active,
.shahid-poster-card:active,
.shahid-landscape-card:active,
.series-standard-card:active,
.series-feature-card:active,
.catalog-showcase:active,
.match-card:active {
transform: scale(.985);
transition: transform .08s ease-out !important;
}
.target-home-hero-rail,
.target-match-rail,
.target-program-rail,
.target-episode-rail,
.poster-rail,
.shahid-rail,
.category-tabs,
.filter-panel {
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-inline: contain !important;
touch-action: pan-x pan-y !important;
}
.safe-image,
.safe-background-image {
background-color: #000000 !important;
}
/* Purple commercial palette overrides. */
.target-watch-button,
.catalog-watch,
.series-watch-button,
.primary-action,
.primary-sync-button,
.commercial-settings-button.primary {
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) !important;
box-shadow: 0 12px 30px rgba(155,77,255,.24) !important;
}
.target-save-button {
border: 3px solid transparent !important;
background:
linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)) padding-box,
linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
}
.outline-action,
.commercial-settings-button {
border-color: rgba(155,77,255,.28) !important;
}
.shahid-home-reference .target-hero-status::before,
.shahid-brand-mark i:nth-child(1),
.shahid-brand-mark i:nth-child(2),
.shahid-brand-mark i:nth-child(3) {
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) !important;
}
.shahid-home-reference .target-hero-dots button.active,
.shahid-home-reference .target-watch-button {
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) !important;
}
.shahid-home-reference .target-save-button {
border: 3px solid transparent !important;
background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)) padding-box, linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
}
/* Launch-ready settings screen. */
.commercial-settings-page {
padding: 0 14px 132px !important;
color: #fbf9ff;
background:
radial-gradient(circle at 10% 0, rgba(155,77,255,.20), transparent 32%),
radial-gradient(circle at 90% 8%, rgba(20,215,255,.08), transparent 30%);
}
.commercial-settings-hero {
min-height: 154px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px;
border-radius: 26px;
border: 1px solid var(--nova-border);
background: linear-gradient(135deg, rgba(26,14,42,.96), rgba(8,7,15,.96));
box-shadow: 0 20px 48px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.06);
}
.commercial-settings-hero span { color: #c7b8df; letter-spacing: 1.5px; font-size: .72rem; }
.commercial-settings-hero h2 { margin: 6px 0 7px; font-size: clamp(1.45rem, 4vw, 2.25rem); line-height: 1.05; font-weight: 950; }
.commercial-settings-hero p { margin: 0; color: #b8b2c8; line-height: 1.7; }
.commercial-settings-hero > .oscar-icon { color: #caa7ff; }
.commercial-settings-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 14px; }
.commercial-setting-card {
min-width: 0;
padding: 18px;
border-radius: 24px;
border: 1px solid var(--nova-border);
background: linear-gradient(155deg, rgba(18,16,29,.90), rgba(8,8,16,.95));
box-shadow: 0 18px 42px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045);
}
.commercial-setting-card.wide { grid-row: span 2; }
.commercial-setting-card header { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.commercial-setting-card header > .oscar-icon { color: #caa7ff; }
.commercial-setting-card header b,
.commercial-setting-card header small { display: block; }
.commercial-setting-card header b { color: #fff; font-size: 1.05rem; font-weight: 950; }
.commercial-setting-card header small { margin-top: 3px; color: #9e96b3; font-size: .74rem; }
.commercial-setting-card label {
min-height: 62px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-top: 1px solid rgba(255,255,255,.055);
}
.commercial-setting-card label:first-of-type { border-top: 0; }
.commercial-setting-card label b,
.commercial-setting-card label small { display: block; }
.commercial-setting-card label b { color: #f8f4ff; font-size: .92rem; }
.commercial-setting-card label small { margin-top: 4px; color: #9890a9; line-height: 1.55; font-size: .72rem; }
.commercial-setting-card input[type="checkbox"] { width: 48px; height: 27px; accent-color: #9B4DFF; }
.commercial-setting-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 4px 0 12px; }
.commercial-setting-stats div { padding: 12px; border-radius: 15px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); }
.commercial-setting-stats span,
.commercial-setting-stats strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commercial-setting-stats span { color: #8f889d; font-size: .70rem; }
.commercial-setting-stats strong { margin-top: 5px; font-size: .83rem; }
.commercial-settings-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.commercial-settings-button {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 14px;
border-radius: 14px;
border: 1px solid rgba(199,152,255,.18);
background: rgba(255,255,255,.06);
color: #fff;
font-weight: 900;
}
.commercial-settings-button.subtle { color: #cbbfe0; background: rgba(255,255,255,.035); }
.commercial-settings-button:disabled { opacity: .58; }
.commercial-mini-status,
.commercial-settings-note { margin: 11px 0; padding: 11px 12px; border-radius: 14px; background: rgba(155,77,255,.10); color: #d8cef0; }
.commercial-mini-status { display: flex; align-items: center; gap: 10px; }
.commercial-mini-status strong,
.commercial-mini-status small { display: block; }
.commercial-mini-status small { margin-top: 2px; color: #a89db8; }
@media (max-width: 820px) {
.commercial-settings-grid { grid-template-columns: 1fr; }
.commercial-setting-card.wide { grid-row: auto; }
}
@media (max-width: 560px) {
.oscar-toolbar { height: calc(56px + var(--safe-top)) !important; }
.catalog-header-spacer { height: calc(56px + var(--safe-top)) !important; }
.commercial-settings-page { padding-inline: 10px !important; }
.commercial-settings-hero { min-height: 130px; padding: 18px; border-radius: 22px; }
.commercial-settings-hero > .oscar-icon { display: none; }
.commercial-setting-card { padding: 15px; border-radius: 21px; }
.commercial-setting-card label { min-height: 58px; }
.commercial-setting-stats { grid-template-columns: 1fr; }
.commercial-settings-button { flex: 1 1 100%; }
}
/* v2.42.0: commercial empty states, reliable vertical scrolling, and lighter rendering. */
html,
body {
position: static !important;
scroll-behavior: auto !important;
scrollbar-gutter: stable both-edges;
}
#app {
display: block !important;
min-height: 100dvh !important;
overflow: visible !important;
}
.oscar-main.native-view {
position: relative !important;
display: block !important;
width: 100% !important;
min-height: calc(100dvh - var(--bottom-nav-h) - var(--safe-bottom)) !important;
padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 48px) !important;
overflow: visible !important;
will-change: auto !important;
}
.catalog-page,
.channels-catalog,
.commercial-settings-page,
.commercial-account,
.favorites-page,
.schedule-page {
padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 72px) !important;
}
.channel-grid,
.oscar-grid {
contain: layout paint style;
}
.channel-grid > *,
.oscar-grid > *,
.poster-rail > *,
.shahid-rail > * {
content-visibility: auto;
contain-intrinsic-size: 260px 180px;
}
.catalog-inline-loader {
min-height: 44vh !important;
display: grid !important;
place-items: center !important;
gap: 12px !important;
color: #d9cff0 !important;
background:
radial-gradient(circle at 50% 35%, rgba(155,77,255,.16), transparent 34%),
linear-gradient(180deg, rgba(18,12,31,.60), rgba(7,5,13,.20)) !important;
}
.oscar-empty.nova-empty-state-pro,
.oscar-empty {
min-height: clamp(360px, 58vh, 620px) !important;
margin: 18px 12px calc(var(--bottom-nav-h) + var(--safe-bottom) + 28px) !important;
padding: clamp(26px, 6vw, 48px) 18px !important;
display: grid !important;
place-items: center !important;
align-content: center !important;
gap: 14px !important;
text-align: center !important;
border: 1px solid rgba(199,152,255,.16) !important;
border-radius: 30px !important;
background:
radial-gradient(circle at 18% 0%, rgba(155,77,255,.24), transparent 32%),
radial-gradient(circle at 82% 16%, rgba(20,215,255,.10), transparent 30%),
linear-gradient(145deg, rgba(20,13,34,.95), rgba(7,6,14,.96)) !important;
box-shadow: 0 22px 60px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.06) !important;
color: #fbf8ff !important;
}
.nova-empty-visual {
width: 132px;
height: 132px;
position: relative;
display: grid;
place-items: center;
margin-bottom: 4px;
isolation: isolate;
}
.nova-empty-visual .screen {
width: 84px;
height: 84px;
display: grid;
place-items: center;
border-radius: 27px;
color: #ffffff;
background: linear-gradient(135deg, rgba(155,77,255,.94), rgba(240,74,216,.90));
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 18px 46px rgba(155,77,255,.35), inset 0 1px rgba(255,255,255,.18);
z-index: 2;
}
.nova-empty-visual .orbital {
position: absolute;
inset: 11px;
border-radius: 999px;
border: 1px solid rgba(202,167,255,.22);
transform: rotate(-18deg);
}
.nova-empty-visual .orbital.two {
inset: 22px;
border-color: rgba(20,215,255,.18);
transform: rotate(28deg);
}
.nova-empty-visual .spark {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #caa7ff;
box-shadow: 0 0 18px rgba(202,167,255,.70);
}
.nova-empty-visual .spark.a { top: 18px; right: 22px; }
.nova-empty-visual .spark.b { bottom: 26px; left: 16px; background: #14D7FF; }
.nova-empty-visual .spark.c { top: 44px; left: 8px; width: 5px; height: 5px; }
.oscar-empty strong {
max-width: 680px;
color: #ffffff !important;
font-size: clamp(1.18rem, 4.5vw, 1.72rem) !important;
font-weight: 950 !important;
line-height: 1.25 !important;
}
.oscar-empty p {
max-width: 620px;
margin: 0 !important;
color: #bdb4cf !important;
font-size: .96rem !important;
line-height: 1.8 !important;
}
.nova-empty-action {
min-height: 46px;
margin-top: 6px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-radius: 999px;
color: #fff;
font-weight: 950;
background: linear-gradient(135deg, #9B4DFF, #14D7FF);
box-shadow: 0 14px 34px rgba(155,77,255,.30);
}
.nova-empty-state-pro[data-state="connection"] .screen {
background: linear-gradient(135deg, rgba(240,74,216,.94), rgba(20,215,255,.88));
}
@media (max-width: 560px) {
.oscar-empty.nova-empty-state-pro,
.oscar-empty {
min-height: 52vh !important;
margin-inline: 9px !important;
border-radius: 24px !important;
}
.nova-empty-visual { width: 110px; height: 110px; }
.nova-empty-visual .screen { width: 72px; height: 72px; border-radius: 23px; }
}
/* v2.44 commercial taxonomy map: visible Nova2-compatible sections on every main catalog landing. */
.nova2-primary-section-map{
margin:18px 16px 22px;
padding:16px;
border:1px solid rgba(174,84,255,.28);
border-radius:28px;
background:
radial-gradient(circle at 92% 0%, rgba(155,77,255,.32), transparent 34%),
linear-gradient(145deg, rgba(24,11,34,.94), rgba(8,8,12,.96));
box-shadow:0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.nova2-map-heading{margin:0 0 14px!important;}
.nova2-map-heading h2{font-size:18px!important;color:#fff!important;}
.nova2-map-heading button{
border:1px solid rgba(210,156,255,.35);
background:rgba(155,77,255,.18);
color:#ead7ff;
border-radius:999px;
padding:7px 12px;
}
.nova2-primary-section-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.nova2-primary-section-card{
position:relative;
overflow:hidden;
min-height:112px;
padding:13px 13px 12px;
border:1px solid rgba(170,90,255,.24);
border-radius:22px;
background:
radial-gradient(circle at 18% 12%, rgba(196,108,255,.20), transparent 26%),
linear-gradient(145deg, rgba(36,19,53,.92), rgba(12,12,18,.94));
color:#fff;
text-align:right;
box-shadow:0 10px 30px rgba(0,0,0,.28);
touch-action:manipulation;
}
.nova2-primary-section-card::after{
content:"";
position:absolute;
inset:auto -26px -34px auto;
width:92px;
height:92px;
border-radius:50%;
background:rgba(155,77,255,.22);
filter:blur(2px);
}
.nova2-primary-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:15px;
background:linear-gradient(135deg, #F04AD8, #9B4DFF);
box-shadow:0 8px 18px rgba(155,77,255,.34);
margin-bottom:10px;
}
.nova2-primary-section-card strong{display:block;font-size:15px;line-height:1.25;margin-bottom:4px;}
.nova2-primary-section-card small{display:block;color:rgba(245,235,255,.74);font-size:11px;line-height:1.35;min-height:30px;}
.nova2-primary-section-card em{
display:inline-flex;
margin-top:8px;
font-style:normal;
color:#fff;
font-size:10px;
padding:4px 8px;
border-radius:999px;
background:rgba(255,255,255,.10);
}
@media (min-width:720px){.nova2-primary-section-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.nova2-primary-section-card{min-height:122px;}}
.season-switcher{display:flex;gap:10px;overflow-x:auto;padding:4px 0 13px;scrollbar-width:none;touch-action:pan-x pan-y;}
.season-switcher button{
flex:0 0 auto;
min-width:118px;
border:1px solid rgba(170,90,255,.24);
border-radius:18px;
padding:11px 12px;
color:#fff;
background:rgba(255,255,255,.06);
text-align:right;
}
.season-switcher button.active{
background:linear-gradient(135deg, rgba(155,77,255,.96), rgba(20,215,255,.94));
box-shadow:0 12px 24px rgba(155,77,255,.28);
}
.season-switcher button strong{display:block;font-size:13px;}
.season-switcher button small{display:block;color:rgba(255,255,255,.72);font-size:11px;margin-top:3px;}
/* FIX: My List hero button stays transparent; only the frame carries the screenshot purple/blue color. */
.shahid-home-reference .target-save-button,
.shahid-home-reference .target-save-button.saved,
.shahid-home-reference .target-save-button:hover,
.shahid-home-reference .target-save-button:focus,
.shahid-home-reference .target-save-button:active,
.target-save-button,
.target-save-button.saved,
.target-save-button:hover,
.target-save-button:focus,
.target-save-button:active,
.hero-list-button,
.hero-list-button:hover,
.hero-list-button:focus,
.hero-list-button:active {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
color: #ffffff !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(155,77,255,.18) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.shahid-home-reference .target-save-button::before,
.shahid-home-reference .target-save-button.saved::before,
.shahid-home-reference .target-save-button:hover::before,
.shahid-home-reference .target-save-button:focus::before,
.shahid-home-reference .target-save-button:active::before,
.target-save-button::before,
.target-save-button.saved::before,
.target-save-button:hover::before,
.target-save-button:focus::before,
.target-save-button:active::before,
.hero-list-button::before,
.hero-list-button:hover::before,
.hero-list-button:focus::before,
.hero-list-button:active::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
padding: 3px;
pointer-events: none;
background: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.shahid-home-reference .target-save-button > *,
.shahid-home-reference .target-save-button span,
.shahid-home-reference .target-save-button .oscar-icon,
.shahid-home-reference .target-save-button svg,
.target-save-button > *,
.target-save-button span,
.target-save-button .oscar-icon,
.target-save-button svg,
.hero-list-button > *,
.hero-list-button span,
.hero-list-button .oscar-icon,
.hero-list-button svg {
position: relative;
z-index: 1;
background: transparent !important;
background-image: none !important;
}
@supports not (-webkit-mask-composite: xor) {
.shahid-home-reference .target-save-button::before,
.shahid-home-reference .target-save-button.saved::before,
.shahid-home-reference .target-save-button:hover::before,
.shahid-home-reference .target-save-button:focus::before,
.shahid-home-reference .target-save-button:active::before,
.target-save-button::before,
.target-save-button.saved::before,
.target-save-button:hover::before,
.target-save-button:focus::before,
.target-save-button:active::before,
.hero-list-button::before,
.hero-list-button:hover::before,
.hero-list-button:focus::before,
.hero-list-button:active::before {
padding: 0;
border: 3px solid #8E44FF;
background: transparent;
-webkit-mask: none;
mask: none;
}
}
/* ===== source: nova-catalog.css ===== */
/* Space Gate Nova+ modular catalog and navigation experience */
:root {
--nova-bg: #050812;
--nova-surface: rgba(14, 20, 45, .94);
--nova-surface-soft: rgba(22, 31, 67, .78);
--nova-border: rgba(151, 161, 255, .14);
--nova-text: #f8f9ff;
--nova-muted: #9da6c9;
--nova-accent: #566DFF;
--nova-accent-2: #14D7FF;
--nova-header-h: 72px;
--nova-nav-h: 76px;
--nova-page-pad: clamp(14px, 3vw, 34px);
}
.app-root { min-height: 100dvh; }
.nova-app-shell { min-height: 100dvh; background: radial-gradient(circle at 75% 0, rgba(88, 69, 219, .18), transparent 31%), linear-gradient(180deg, #050812, #060918 56%, #040611); color: var(--nova-text); }
.nova-shell-header { position: fixed; z-index: 500; top: 0; right: 0; left: 0; height: calc(var(--nova-header-h) + var(--safe-top)); padding: var(--safe-top) max(var(--nova-page-pad),var(--safe-right,0px)) 0 max(var(--nova-page-pad),var(--safe-left,0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.055); background: linear-gradient(180deg, rgba(5,8,22,.98), rgba(5,8,22,.91)); backdrop-filter: blur(18px); box-shadow: 0 12px 35px rgba(0,0,0,.24); }
.nova-shell-leading { min-width: 0; display: flex; align-items: center; gap: 11px; }
.nova-shell-leading > img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(80,75,255,.32)); }
.nova-shell-leading > div { min-width: 0; }
.nova-shell-leading strong, .nova-shell-leading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nova-shell-leading strong { font-size: clamp(1rem, 3.5vw, 1.3rem); font-weight: 900; }
.nova-shell-leading small { margin-top: 2px; color: var(--nova-muted); font-size: .7rem; }
.nova-shell-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border: 1px solid var(--nova-border); border-radius: 14px; background: rgba(255,255,255,.045); color: #fff; }
.nova-shell-icon:active { transform: scale(.94); background: rgba(123,104,255,.18); }
.nova-shell-brand { display: flex; align-items: baseline; gap: 5px; background: transparent; direction: ltr; letter-spacing: .08em; }
.nova-shell-brand span { color: #fff; font-size: .75rem; font-weight: 850; }
.nova-shell-brand b { color: #8b79ff; font-size: .92rem; }
.nova-shell-content { min-height: 100dvh; padding-top: calc(var(--nova-header-h) + var(--safe-top)); padding-bottom: calc(var(--nova-nav-h) + var(--safe-bottom) + 18px); }
.nova-shell-content.details { padding-bottom: calc(18px + var(--safe-bottom)); }
.nova-global-sync { position: fixed; z-index: 510; top: calc(var(--nova-header-h) + var(--safe-top) - 3px); right: 0; left: 0; height: 3px; background: rgba(255,255,255,.06); }
.nova-global-sync > span { display: block; height: 100%; background: linear-gradient(90deg, #14D7FF, #566DFF, #F04AD8); box-shadow: 0 0 14px rgba(123,104,255,.8); transition: width .28s ease; }
.nova-global-sync > div { position: absolute; top: 8px; left: var(--nova-page-pad); padding: 5px 9px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--nova-border); border-radius: 999px; background: rgba(7,10,28,.88); backdrop-filter: blur(10px); }
.nova-global-sync b { color: #a99dff; font-size: .67rem; }
.nova-global-sync small { color: #aeb5d4; font-size: .64rem; }
.nova-shell-nav { position: fixed; z-index: 490; right: 0; bottom: 0; left: 0; height: calc(var(--nova-nav-h) + var(--safe-bottom)); padding: 6px max(4px, var(--safe-right,0px)) var(--safe-bottom) max(4px, var(--safe-left,0px)); display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; direction: rtl; border-top: 1px solid rgba(255,255,255,.07); background: rgba(5,8,22,.965); backdrop-filter: blur(20px); box-shadow: 0 -16px 42px rgba(0,0,0,.38); scrollbar-width: none; }
.nova-shell-nav::-webkit-scrollbar { display: none; }
.nova-shell-nav button { position: relative; min-width: 73px; flex: 1 0 73px; padding: 4px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; color: #717a9c; }
.nova-shell-nav button > span { width: 42px; height: 34px; display: grid; place-items: center; border-radius: 13px; transition: .18s ease; }
.nova-shell-nav button b { font-size: .65rem; font-weight: 700; white-space: nowrap; }
.nova-shell-nav button.active { color: #fff; }
.nova-shell-nav button.active > span { color: #fff; background: linear-gradient(135deg, #6252ec, #8c66ff); box-shadow: 0 7px 20px rgba(96,78,238,.38); transform: translateY(-2px); }
.nova-shell-nav button.active b { color: #c9c3ff; }
.nova-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #9c8fff; font-size: .7rem; font-weight: 900; letter-spacing: .04em; }
.nova-eyebrow::before { content: ""; width: 23px; height: 2px; border-radius: 4px; background: linear-gradient(90deg, #14D7FF, #9B4DFF); }
.nova-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.nova-section-heading > div > span { display: block; margin-bottom: 3px; color: var(--nova-muted); font-size: .72rem; font-weight: 700; }
.nova-section-heading h2 { margin: 0; font-size: clamp(1.25rem, 4.7vw, 2rem); font-weight: 950; }
.nova-section-heading > button { min-height: 39px; padding: 0 4px; display: inline-flex; align-items: center; gap: 4px; background: transparent; color: #9c8fff; font-size: .76rem; font-weight: 800; white-space: nowrap; }
/* Home */
.nova-home { min-height: 100dvh; }
.nova-home-loading { min-height: calc(100dvh - var(--nova-header-h)); display: grid; place-content: center; justify-items: center; gap: 15px; }
.nova-home-loading img { width: 100px; filter: drop-shadow(0 18px 32px rgba(81,70,255,.4)); }
.nova-home-loading > div { width: 160px; height: 4px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.08); }
.nova-home-loading > div span { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, transparent, #816dff, transparent); animation: nova-loading 1.1s ease-in-out infinite; }
.nova-home-loading p { margin: 0; color: var(--nova-muted); font-size: .78rem; }
@keyframes nova-loading { from { transform: translateX(180%); } to { transform: translateX(-260%); } }
.nova-home-hero { position: relative; min-height: clamp(430px, 70dvh, 720px); overflow: hidden; cursor: pointer; background: #070a18; }
.nova-home-hero-image { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center 18%; }
.nova-home-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,7,20,.12), rgba(4,7,20,.2) 28%, rgba(4,7,20,.72) 69%, #050812 100%), linear-gradient(90deg, rgba(5,8,22,.84), transparent 70%); }
.nova-home-hero-content { position: absolute; z-index: 2; right: var(--nova-page-pad); bottom: clamp(38px, 8vw, 86px); width: min(720px, calc(100% - 2 * var(--nova-page-pad))); }
.nova-home-hero h1 { margin: 9px 0 10px; max-width: 780px; font-size: clamp(2rem, 7vw, 4.8rem); line-height: 1.05; font-weight: 950; text-shadow: 0 10px 30px rgba(0,0,0,.58); }
.nova-home-hero-content > p { max-width: 680px; margin: 0 0 13px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #c4cae2; font-size: clamp(.82rem, 2.1vw, 1.05rem); line-height: 1.7; }
.nova-home-hero-meta { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.nova-home-hero-meta span { padding: 6px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(5,8,22,.48); backdrop-filter: blur(9px); color: #e7e9f5; font-size: .7rem; font-weight: 750; }
.nova-home-intro { padding: clamp(24px, 5vw, 52px) var(--nova-page-pad) 22px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); align-items: center; gap: 24px; }
.nova-home-intro h2 { margin: 7px 0 9px; font-size: clamp(1.65rem, 5vw, 3.2rem); line-height: 1.15; font-weight: 950; }
.nova-home-intro p { max-width: 760px; margin: 0; color: var(--nova-muted); line-height: 1.75; }
.nova-home-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nova-home-summary div { min-height: 82px; padding: 14px; display: grid; align-content: center; border: 1px solid var(--nova-border); border-radius: 18px; background: linear-gradient(145deg, rgba(22,31,67,.78), rgba(10,15,36,.88)); }
.nova-home-summary strong, .nova-home-summary span { display: block; }
.nova-home-summary strong { color: #fff; font-size: clamp(1.35rem, 4vw, 2rem); font-weight: 950; direction: ltr; text-align: right; }
.nova-home-summary span { color: var(--nova-muted); font-size: .7rem; }
.nova-gateway-grid { padding: 8px var(--nova-page-pad) 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nova-gateway { position: relative; min-height: 112px; padding: 17px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 12px; overflow: hidden; border: 1px solid var(--nova-border); border-radius: 22px; color: #fff; text-align: right; background: linear-gradient(145deg, rgba(22,31,67,.93), rgba(8,13,32,.94)); box-shadow: 0 15px 34px rgba(0,0,0,.2); }
.nova-gateway::before { content: ""; position: absolute; width: 140px; height: 140px; top: -75px; left: -45px; border-radius: 50%; background: var(--gateway-glow, rgba(123,104,255,.22)); filter: blur(5px); }
.nova-gateway.violet { --gateway-glow: rgba(135,93,255,.45); }
.nova-gateway.blue { --gateway-glow: rgba(50,108,255,.42); }
.nova-gateway.cyan { --gateway-glow: rgba(20,194,234,.4); }
.nova-gateway.green { --gateway-glow: rgba(38,190,104,.38); }
.nova-gateway.pink { --gateway-glow: rgba(225,70,189,.4); }
.nova-gateway.orange { --gateway-glow: rgba(245,126,37,.42); }
.nova-gateway-icon { position: relative; width: 53px; height: 53px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(255,255,255,.07); }
.nova-gateway > div { position: relative; min-width: 0; }
.nova-gateway strong, .nova-gateway small { display: block; }
.nova-gateway strong { font-size: 1rem; font-weight: 900; }
.nova-gateway small { margin-top: 4px; color: var(--nova-muted); font-size: .67rem; line-height: 1.45; }
.nova-gateway em { position: relative; color: #c9c3ff; font-size: .78rem; font-style: normal; font-weight: 900; direction: ltr; }
.nova-home-sync-card { margin: 2px var(--nova-page-pad) 30px; padding: 16px 18px; border: 1px solid rgba(120,105,255,.26); border-radius: 22px; background: linear-gradient(120deg, rgba(31,31,80,.76), rgba(11,16,39,.96)); box-shadow: 0 20px 45px rgba(0,0,0,.2); }
.nova-home-sync-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
.nova-home-sync-heading strong, .nova-home-sync-heading small { display: block; }
.nova-home-sync-heading strong { font-size: .9rem; }
.nova-home-sync-heading small { margin-top: 3px; color: var(--nova-muted); font-size: .67rem; line-height: 1.45; }
.nova-home-sync-heading b { color: #b7adff; font-size: 1rem; direction: ltr; }
.nova-sync-orbit { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(123,104,255,.34); border-radius: 50%; }
.nova-sync-orbit::before, .nova-sync-orbit i { content: ""; position: absolute; border-radius: 50%; }
.nova-sync-orbit::before { width: 28px; height: 28px; border: 2px solid rgba(255,255,255,.1); border-top-color: #8573ff; animation: nova-spin 1.1s linear infinite; }
.nova-sync-orbit i { width: 7px; height: 7px; background: #47b4ff; box-shadow: 0 0 12px #47b4ff; }
@keyframes nova-spin { to { transform: rotate(360deg); } }
.nova-home-sync-track { height: 5px; margin: 14px 0 10px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.07); }
.nova-home-sync-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14D7FF, #566DFF, #F04AD8); transition: width .25s ease; }
.nova-home-sync-foot { display: flex; justify-content: space-between; gap: 12px; color: #aeb5d4; font-size: .65rem; }
.nova-home-rail-section, .nova-home-categories { padding: 12px var(--nova-page-pad) 25px; }
.nova-poster-rail { margin-top: 14px; display: flex; gap: 13px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 8px; }
.nova-poster-rail::-webkit-scrollbar { display: none; }
.nova-poster-rail .nova-media-card { flex: 0 0 clamp(142px, 19vw, 205px); scroll-snap-align: start; }
.nova-rail-placeholder { margin-top: 14px; padding: 24px; border: 1px dashed var(--nova-border); border-radius: 18px; color: var(--nova-muted); text-align: center; }
.nova-category-mosaic { margin-top: 15px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.nova-category-mosaic button { min-height: 110px; padding: 16px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; gap: 4px 12px; border: 1px solid var(--nova-border); border-radius: 19px; background: linear-gradient(145deg, rgba(20,29,62,.84), rgba(9,14,34,.92)); color: #fff; text-align: right; }
.nova-category-mosaic span { font-weight: 900; }
.nova-category-mosaic small { color: var(--nova-muted); font-size: .67rem; }
.nova-category-mosaic svg { grid-column: 2; grid-row: 1 / span 2; color: #8d7cff; }
/* Catalog */
.nova-catalog-page { padding: 28px var(--nova-page-pad) 32px; }
.nova-catalog-hero { min-height: 190px; padding: clamp(22px, 5vw, 42px); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 22px; overflow: hidden; border: 1px solid var(--nova-border); border-radius: 28px; background: radial-gradient(circle at 10% 15%, rgba(54,156,255,.21), transparent 29%), radial-gradient(circle at 82% 20%, rgba(130,87,255,.28), transparent 34%), linear-gradient(135deg, rgba(19,27,61,.96), rgba(8,13,34,.98)); box-shadow: 0 20px 48px rgba(0,0,0,.24); }
.nova-catalog-hero h1 { margin: 8px 0 9px; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.06; font-weight: 950; }
.nova-catalog-hero p { max-width: 720px; margin: 0; color: #aeb6d6; line-height: 1.75; }
.nova-catalog-stats { display: grid; grid-template-columns: repeat(3, minmax(82px,1fr)); gap: 9px; }
.nova-catalog-stats div { min-width: 90px; padding: 14px; display: grid; justify-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: rgba(5,8,22,.42); }
.nova-catalog-stats strong { font-size: 1.25rem; font-weight: 950; direction: ltr; }
.nova-catalog-stats span { margin-top: 3px; color: var(--nova-muted); font-size: .63rem; }
.nova-catalog-controls { margin: 18px 0 12px; display: grid; grid-template-columns: minmax(240px,1fr) auto; gap: 12px; }
.nova-search-box { min-height: 52px; padding: 0 15px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--nova-border); border-radius: 16px; background: rgba(13,19,43,.86); color: #8e98bb; }
.nova-search-box:focus-within { border-color: rgba(123,104,255,.72); box-shadow: 0 0 0 3px rgba(123,104,255,.1); }
.nova-search-box input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; text-align: right; }
.nova-search-box button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.06); }
.nova-select-row { display: flex; gap: 9px; }
.nova-select-row label { min-width: 145px; height: 52px; padding: 5px 12px; display: grid; align-content: center; border: 1px solid var(--nova-border); border-radius: 16px; background: rgba(13,19,43,.86); }
.nova-select-row span { color: #7f89ab; font-size: .57rem; }
.nova-select-row select { min-width: 0; border: 0; outline: 0; background: transparent; font-size: .76rem; font-weight: 800; }
.nova-category-strip { margin: 0 calc(-1 * var(--nova-page-pad)); padding: 7px var(--nova-page-pad) 13px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.nova-category-strip::-webkit-scrollbar { display: none; }
.nova-category-chip { min-width: max-content; min-height: 47px; padding: 7px 13px; display: grid; align-content: center; border: 1px solid var(--nova-border); border-radius: 14px; background: rgba(14,20,45,.82); color: #c8cce0; text-align: right; }
.nova-category-chip span, .nova-category-chip small { display: block; }
.nova-category-chip span { font-size: .76rem; font-weight: 800; }
.nova-category-chip small { margin-top: 1px; color: #747e9f; font-size: .57rem; direction: ltr; text-align: right; }
.nova-category-chip.active { border-color: rgba(129,109,255,.75); background: linear-gradient(135deg, #5e50d9, #8065ef); color: #fff; box-shadow: 0 8px 22px rgba(86,69,218,.3); }
.nova-category-chip.active small { color: #e1ddff; }
.nova-result-summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--nova-muted); font-size: .72rem; }
.nova-result-summary strong { color: #fff; }
.nova-inline-sync { display: inline-flex; align-items: center; gap: 6px; color: #a99fff; }
.nova-inline-sync i { width: 7px; height: 7px; border-radius: 50%; background: #8977ff; box-shadow: 0 0 10px #8977ff; animation: nova-pulse 1s ease infinite; }
@keyframes nova-pulse { 50% { opacity: .35; transform: scale(.75); } }
.nova-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: clamp(12px, 2vw, 20px); }
.nova-media-card { min-width: 0; padding: 0; display: block; background: transparent; color: #fff; text-align: right; }
.nova-media-art { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: #10152d; box-shadow: 0 13px 26px rgba(0,0,0,.25); }
.nova-media-image { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .25s ease, filter .25s ease; }
.nova-media-card:hover .nova-media-image { transform: scale(1.035); filter: brightness(.74); }
.nova-media-type, .nova-media-quality { position: absolute; top: 9px; min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 8px; backdrop-filter: blur(9px); font-size: .58rem; font-weight: 900; }
.nova-media-type { right: 9px; background: rgba(8,12,30,.76); }
.nova-media-quality { left: 9px; background: rgba(103,84,239,.88); }
.nova-media-play { position: absolute; right: 50%; bottom: 14px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; background: rgba(95,76,229,.88); box-shadow: 0 10px 24px rgba(0,0,0,.32); opacity: 0; transform: translate(50%, 10px); transition: .2s ease; }
.nova-media-card:hover .nova-media-play, .nova-media-card:focus-visible .nova-media-play { opacity: 1; transform: translate(50%, 0); }
.nova-media-card > strong { margin-top: 9px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .85rem; line-height: 1.42; font-weight: 850; }
.nova-media-card > small { margin-top: 3px; display: block; overflow: hidden; color: #7781a3; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.nova-load-more { padding: 28px 0 8px; display: grid; place-items: center; }
.nova-load-more button { min-width: 190px; }
.nova-button-spinner { width: 17px; height: 17px; display: inline-block; border: 2px solid rgba(255,255,255,.18); border-top-color: #fff; border-radius: 50%; animation: nova-spin .8s linear infinite; }
.nova-empty-state { min-height: 320px; padding: 34px; display: grid; place-content: center; justify-items: center; text-align: center; color: #9ca5c7; }
.nova-empty-state svg { color: #8877ff; }
.nova-empty-state h1, .nova-empty-state h2, .nova-empty-state h3 { margin: 13px 0 7px; color: #fff; }
.nova-empty-state p { max-width: 520px; margin: 0 0 17px; line-height: 1.65; }
.nova-empty-state.compact { min-height: 150px; border: 1px dashed var(--nova-border); border-radius: 18px; }
.nova-skeleton-grid .nova-card-skeleton { min-width: 0; }
.nova-card-skeleton i { display: block; aspect-ratio: 2/3; border-radius: 18px; background: linear-gradient(100deg, #10162f 25%, #1a2346 45%, #10162f 65%); background-size: 230% 100%; animation: nova-shimmer 1.25s infinite; }
.nova-card-skeleton b, .nova-card-skeleton small { display: block; height: 11px; margin-top: 10px; border-radius: 8px; background: #151d3b; }
.nova-card-skeleton small { width: 65%; height: 8px; margin-top: 7px; }
@keyframes nova-shimmer { to { background-position-x: -230%; } }
/* Details */
.nova-details-page { min-height: calc(100dvh - var(--nova-header-h)); }
.nova-details-hero { position: relative; min-height: clamp(520px, 78dvh, 780px); overflow: hidden; }
.nova-details-backdrop { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center 18%; }
.nova-details-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,18,.2), rgba(4,6,18,.46) 42%, #050812 100%), linear-gradient(90deg, rgba(5,8,22,.95), rgba(5,8,22,.45) 55%, rgba(5,8,22,.1)); }
.nova-details-content { position: absolute; z-index: 2; right: var(--nova-page-pad); bottom: clamp(30px, 7vw, 72px); left: var(--nova-page-pad); display: grid; grid-template-columns: clamp(135px, 20vw, 235px) minmax(0, 1fr); align-items: end; gap: clamp(18px, 3.5vw, 38px); }
.nova-details-poster { width: 100% !important; aspect-ratio: 2/3; object-fit: cover; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; box-shadow: 0 24px 50px rgba(0,0,0,.48); }
.nova-details-copy h1 { margin: 9px 0 10px; font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1.07; font-weight: 950; }
.nova-details-copy > p { max-width: 780px; margin: 13px 0 18px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; color: #b9c0da; line-height: 1.75; }
.nova-details-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.nova-details-meta span { padding: 6px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(7,10,28,.54); color: #e6e8f4; font-size: .68rem; }
.nova-details-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nova-details-actions button { min-width: 140px; }
.nova-commercial-error { margin-top: 14px; padding: 10px 13px; border: 1px solid rgba(255,108,127,.28); border-radius: 13px; background: rgba(96,25,45,.24); color: #ffc5cf; font-size: .72rem; }
.nova-episodes-section, .nova-related-section { padding: 28px var(--nova-page-pad); }
.nova-episodes-section { background: linear-gradient(180deg, #050812, #070a18); }
.nova-section-heading > strong { color: #a69bff; font-size: .72rem; }
.nova-season-strip { margin: 17px 0 15px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.nova-season-strip::-webkit-scrollbar { display: none; }
.nova-season-chip { min-width: max-content; min-height: 42px; padding: 0 15px; border: 1px solid var(--nova-border); border-radius: 13px; background: rgba(15,21,48,.8); color: #aeb6d3; font-size: .73rem; font-weight: 800; }
.nova-season-chip.active { border-color: #7a68ef; background: #6857dd; color: #fff; }
.nova-episode-list { display: grid; gap: 10px; }
.nova-episode-card { position: relative; min-height: 112px; padding: 10px; display: grid; grid-template-columns: clamp(125px, 24vw, 230px) minmax(0,1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--nova-border); border-radius: 18px; background: linear-gradient(120deg, rgba(18,25,56,.88), rgba(9,14,34,.94)); color: #fff; text-align: right; }
.nova-episode-image { width: 100% !important; aspect-ratio: 16/9; object-fit: cover; border-radius: 13px; }
.nova-episode-number { position: absolute; top: 16px; right: 16px; min-width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: rgba(5,8,22,.8); font-size: .67rem; font-weight: 900; }
.nova-episode-card > div { min-width: 0; }
.nova-episode-card strong, .nova-episode-card small { display: block; }
.nova-episode-card strong { font-size: .9rem; }
.nova-episode-card small { margin-top: 4px; color: #8993b5; font-size: .63rem; }
.nova-episode-card p { margin: 7px 0 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #aeb5ce; font-size: .68rem; line-height: 1.5; }
.nova-episode-play { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #6251dc, #8a69ff); }
.nova-episode-loading { min-height: 130px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--nova-muted); }
.nova-related-grid { margin-top: 16px; }
.nova-details-skeleton { min-height: calc(100dvh - var(--nova-header-h)); padding: 30px var(--nova-page-pad); display: grid; grid-template-columns: minmax(0,1fr) 32%; gap: 24px; align-items: end; background: linear-gradient(100deg, #080c20, #111735, #080c20); background-size: 220% 100%; animation: nova-shimmer 1.4s infinite; }
.nova-details-skeleton-art { min-height: 64dvh; border-radius: 25px; background: rgba(255,255,255,.04); }
.nova-details-skeleton-copy i { display: block; height: 24px; margin: 13px 0; border-radius: 10px; background: rgba(255,255,255,.055); }
.nova-details-skeleton-copy i:first-child { height: 56px; }
.nova-details-empty { min-height: calc(100dvh - var(--nova-header-h)); }
@media (max-width: 900px) {
.nova-gateway-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.nova-category-mosaic { grid-template-columns: repeat(3, minmax(0,1fr)); }
.nova-catalog-hero { grid-template-columns: 1fr; }
.nova-catalog-stats { justify-self: stretch; }
.nova-home-intro { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
:root { --nova-header-h: 66px; --nova-nav-h: 72px; }
.nova-shell-header { gap: 8px; }
.nova-shell-brand span { display: none; }
.nova-shell-brand b { font-size: .82rem; }
.nova-shell-leading small { max-width: 180px; }
.nova-home-hero { min-height: 510px; }
.nova-home-hero-shade { background: linear-gradient(180deg, rgba(4,6,18,.14), rgba(4,6,18,.27) 34%, rgba(4,6,18,.82) 70%, #050812 100%); }
.nova-home-hero-content { bottom: 32px; }
.nova-home-hero h1 { font-size: clamp(2rem, 10vw, 3.2rem); }
.nova-home-hero-content > p { -webkit-line-clamp: 2; }
.nova-home-intro { padding-top: 24px; }
.nova-home-summary { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.nova-home-summary div { min-height: 67px; padding: 9px 6px; text-align: center; }
.nova-home-summary strong { font-size: 1.05rem; text-align: center; }
.nova-home-summary span { font-size: .57rem; }
.nova-gateway-grid { gap: 9px; }
.nova-gateway { min-height: 128px; padding: 14px; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto auto; }
.nova-gateway > em { grid-column: 1; grid-row: 2; }
.nova-gateway > svg { grid-column: 2; grid-row: 2; justify-self: end; }
.nova-gateway-icon { width: 45px; height: 45px; border-radius: 14px; }
.nova-gateway small { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.nova-category-mosaic { grid-template-columns: repeat(2, minmax(0,1fr)); }
.nova-category-mosaic button { min-height: 96px; }
.nova-home-sync-foot { display: grid; }
.nova-catalog-page { padding-top: 17px; }
.nova-catalog-hero { min-height: auto; padding: 20px; border-radius: 22px; }
.nova-catalog-hero h1 { font-size: 2rem; }
.nova-catalog-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.nova-catalog-stats div { min-width: 0; padding: 10px 5px; }
.nova-catalog-stats strong { font-size: .98rem; }
.nova-catalog-controls { grid-template-columns: 1fr; }
.nova-select-row { display: grid; grid-template-columns: 1fr 1fr; }
.nova-select-row label { min-width: 0; }
.nova-card-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 8px; }
.nova-media-art { border-radius: 13px; }
.nova-media-card > strong { font-size: .72rem; }
.nova-media-card > small { font-size: .56rem; }
.nova-media-play { display: none; }
.nova-media-type { top: 6px; right: 6px; }
.nova-media-quality { top: 6px; left: 6px; }
.nova-details-hero { min-height: 650px; }
.nova-details-shade { background: linear-gradient(180deg, rgba(4,6,18,.15), rgba(4,6,18,.42) 38%, #050812 78%); }
.nova-details-content { bottom: 24px; grid-template-columns: 92px minmax(0,1fr); align-items: end; gap: 15px; }
.nova-details-poster { border-radius: 15px; }
.nova-details-copy h1 { font-size: clamp(1.65rem, 8vw, 2.5rem); }
.nova-details-copy > p { grid-column: 1 / -1; -webkit-line-clamp: 3; font-size: .73rem; }
.nova-details-actions { grid-column: 1 / -1; }
.nova-details-actions button { flex: 1; min-width: 120px; padding-inline: 12px; }
.nova-episode-card { min-height: 96px; grid-template-columns: 105px minmax(0,1fr) 36px; gap: 10px; }
.nova-episode-card p { display: none; }
.nova-episode-play { width: 36px; height: 36px; }
}
@media (max-width: 390px) {
.nova-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.nova-gateway-grid { grid-template-columns: 1fr; }
.nova-gateway { min-height: 94px; grid-template-columns: auto minmax(0,1fr) auto auto; grid-template-rows: 1fr; }
.nova-gateway > em, .nova-gateway > svg { grid-column: auto; grid-row: auto; }
.nova-category-mosaic { grid-template-columns: 1fr 1fr; }
.nova-shell-leading small { max-width: 130px; }
.nova-details-content { grid-template-columns: 74px minmax(0,1fr); gap: 11px; }
}
.nova-sync-retry { margin-top: 12px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(151,137,255,.35); border-radius: 11px; background: rgba(123,104,255,.13); color: #d7d2ff; font-size: .7rem; font-weight: 850; }
/* Auxiliary modular pages */
.nova-more-page,.nova-account-page,.nova-settings-page,.nova-favorites-page,.nova-matches-page{max-width:1500px;margin:0 auto;padding:24px clamp(16px,3vw,42px) 120px}
.nova-page-hero.compact{padding:28px 0 22px}.nova-page-hero.compact h1{margin:6px 0 8px;font-size:clamp(28px,4vw,46px)}.nova-page-hero.compact p{margin:0;max-width:720px;color:var(--nova-text-muted);line-height:1.8}
.nova-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.nova-more-link{min-height:108px;border:1px solid rgba(142,158,255,.14);background:linear-gradient(145deg,rgba(19,25,51,.96),rgba(11,16,35,.92));border-radius:24px;color:inherit;padding:18px;display:grid;grid-template-columns:52px 1fr auto;align-items:center;text-align:right;gap:14px;box-shadow:0 15px 36px rgba(0,0,0,.2)}
.nova-more-link>span{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(79,102,255,.28),rgba(142,68,255,.15));color:#9cadff}.nova-more-link div{display:grid;gap:5px}.nova-more-link strong{font-size:18px}.nova-more-link small{color:var(--nova-text-muted);font-size:13px}.nova-more-link:hover{transform:translateY(-2px);border-color:rgba(130,113,255,.42)}
.nova-account-card{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:20px;padding:26px;border:1px solid rgba(142,158,255,.16);border-radius:28px;background:radial-gradient(circle at 10% 0%,rgba(81,80,255,.25),transparent 38%),linear-gradient(145deg,#151d3c,#0a1024);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.nova-account-card img{width:88px;height:88px;object-fit:contain}.nova-account-card h1{margin:5px 0;font-size:clamp(25px,4vw,40px)}.nova-account-card p{margin:0;color:var(--nova-text-muted)}.nova-account-status{display:flex;align-items:center;gap:8px;border-radius:999px;padding:9px 13px;background:rgba(39,209,145,.1);color:#7af2bd}.nova-account-status i{width:8px;height:8px;border-radius:50%;background:#4de0a4;box-shadow:0 0 14px #4de0a4}
.nova-account-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:18px}.nova-account-stats>div,.nova-storage-grid>div{padding:18px;border:1px solid rgba(142,158,255,.12);border-radius:20px;background:rgba(16,22,45,.86);display:grid;gap:7px}.nova-account-stats span,.nova-storage-grid span{color:var(--nova-text-muted);font-size:13px}.nova-account-stats strong,.nova-storage-grid strong{font-size:17px}
.nova-security-note{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:18px;border-radius:20px;background:rgba(89,77,255,.1);border:1px solid rgba(120,108,255,.18)}.nova-security-note p{margin:5px 0 0;color:var(--nova-text-muted);line-height:1.7}
.nova-settings-page{display:grid;gap:18px}.nova-settings-section{border:1px solid rgba(142,158,255,.13);background:rgba(12,18,39,.9);border-radius:26px;padding:20px}.nova-section-title{display:flex;align-items:center;gap:12px;margin-bottom:15px}.nova-section-title div{display:grid;gap:3px}.nova-section-title small{color:var(--nova-text-muted)}
.nova-setting-toggle{position:relative;display:grid;grid-template-columns:1fr 54px;align-items:center;gap:16px;padding:16px 4px;border-top:1px solid rgba(255,255,255,.055);cursor:pointer}.nova-setting-toggle div{display:grid;gap:4px}.nova-setting-toggle small{color:var(--nova-text-muted);line-height:1.5}.nova-setting-toggle input{position:absolute;opacity:0;pointer-events:none}.nova-setting-toggle>span{width:52px;height:29px;border-radius:999px;background:#27304e;position:relative;transition:.2s}.nova-setting-toggle>span:after{content:"";position:absolute;width:23px;height:23px;top:3px;right:3px;border-radius:50%;background:#a9b2cd;transition:.2s}.nova-setting-toggle input:checked+span{background:linear-gradient(90deg,#4269ff,#8f54ff)}.nova-setting-toggle input:checked+span:after{right:26px;background:#fff}
.nova-storage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.nova-settings-sync{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:16px;padding:16px;border-radius:18px;background:rgba(76,91,211,.1)}.nova-settings-sync>div{display:grid;gap:4px}.nova-settings-sync small{color:var(--nova-text-muted)}.nova-settings-sync>span{grid-column:1/-1;height:7px;border-radius:999px;background:#202947;overflow:hidden}.nova-settings-sync>span i{display:block;height:100%;background:linear-gradient(90deg,#3c78ff,#9a4fff);border-radius:inherit}.nova-settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.nova-settings-message{color:#aab8ff;margin:14px 0 0}
.nova-favorite-card{position:relative}.nova-favorite-card>.nova-media-card{width:100%}.nova-favorite-card>button{position:absolute;top:10px;left:10px;z-index:2;border:0;border-radius:999px;background:rgba(9,13,27,.9);color:#ff6f9e;padding:8px 11px;display:flex;align-items:center;gap:5px}.nova-favorite-card>button span{font-size:11px}
.nova-centered-loading{min-height:42vh;display:grid;place-items:center;align-content:center;gap:12px;color:var(--nova-text-muted)}.nova-inline-error{padding:13px 16px;border-radius:15px;background:rgba(255,77,106,.1);border:1px solid rgba(255,77,106,.18);color:#ff9eb1}.outline-action.saved{border-color:rgba(255,86,139,.42);color:#ff86ad;background:rgba(255,65,123,.09)}
@media(max-width:680px){.nova-more-page,.nova-account-page,.nova-settings-page,.nova-favorites-page,.nova-matches-page{padding:14px 12px 105px}.nova-more-grid{grid-template-columns:1fr}.nova-more-link{min-height:92px;border-radius:20px}.nova-account-card{grid-template-columns:62px 1fr;padding:18px}.nova-account-card img{width:62px;height:62px}.nova-account-status{grid-column:1/-1;justify-self:start}.nova-account-stats{grid-template-columns:1fr 1fr}.nova-settings-section{padding:15px;border-radius:21px}.nova-shell-nav button b{font-size:10px}}
.nova-media-genre {
position: absolute;
right: 9px;
bottom: 9px;
max-width: calc(100% - 18px);
min-height: 23px;
padding: 0 8px;
display: inline-flex;
align-items: center;
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px;
color: #fff;
background: rgba(8,12,30,.76);
backdrop-filter: blur(9px);
font-size: .56rem;
font-weight: 850;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (max-width: 760px) {
.nova-media-genre { right: 6px; bottom: 6px; max-width: calc(100% - 12px); }
}
/* ===== source: nova-v118-original-components-exact.css ===== */
/* Space Gate NOVA+ Web v118 — exact legacy component presentation from original Build 91. */
/* Mechanical browser transform: Blazor's ::deep combinator becomes a normal descendant combinator. */
/* ORIGINAL SOURCE: Components/Layout/MainLayout.razor.css */
.main-layout-shell {
min-height: 100vh;
background: #000000;
color: #ffffff;
overflow-x: hidden;
isolation: isolate;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
.sg-route-frame {
position: relative;
min-height: 100vh;
background: #000000;
transform: none !important;
will-change: opacity;
backface-visibility: visible;
-webkit-backface-visibility: visible;
contain: none !important;
}
.sg-route-surface {
min-height: 100vh;
background: #000000;
}
.sg-route-enter-initial,
.sg-route-enter-home {
animation: sgRouteInitialIn 300ms cubic-bezier(.2, .85, .22, 1) both;
}
.sg-route-switch-tab {
animation: sgRouteTabIn 260ms cubic-bezier(.18, .84, .28, 1) both;
}
.sg-route-enter-detail {
animation: sgRouteDetailIn 300ms cubic-bezier(.16, .86, .25, 1) both;
}
.sg-route-return-from-detail {
animation: sgRouteReturnIn 250ms cubic-bezier(.2, .8, .2, 1) both;
}
.sg-route-enter-forward {
animation: sgRouteForwardIn 260ms cubic-bezier(.18, .82, .22, 1) both;
}
.sg-route-enter-back {
animation: sgRouteBackIn 240ms cubic-bezier(.2, .76, .28, 1) both;
}
.sg-route-enter-soft {
animation: sgRouteSoftIn 220ms cubic-bezier(.2, .76, .28, 1) both;
}
@keyframes sgRouteInitialIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@keyframes sgRouteTabIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@keyframes sgRouteDetailIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@keyframes sgRouteReturnIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@keyframes sgRouteForwardIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@keyframes sgRouteBackIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@keyframes sgRouteSoftIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
.sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card) {
animation: sgContentItemIn 220ms cubic-bezier(.18, .78, .24, 1) both;
will-change: opacity;
backface-visibility: visible;
}
.sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card):nth-child(2) { animation-delay: 16ms; }
.sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card):nth-child(3) { animation-delay: 30ms; }
.sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card):nth-child(4) { animation-delay: 44ms; }
.sg-route-frame :is(.media-card, .poster-card, .catalog-card, .rail-card, .home-rail-card, .channel-card, .match-card, .oscar-card):nth-child(n+5) { animation-delay: 56ms; }
.sg-route-frame :is(.details-hero, .details-poster, .hero-section, .home-hero, .catalog-hero, .target-home-hero-shell) {
animation: sgHeroIn 340ms cubic-bezier(.15, .82, .22, 1) both;
}
}
@keyframes sgContentItemIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@keyframes sgHeroIn {
from { opacity: .001; transform: none; }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.sg-route-frame,
.sg-route-frame * {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* Final scroll-safe layer: route containers must never become the scroll root or a transformed containing block. */
.main-layout-shell,
.sg-route-frame,
.sg-route-surface {
height: auto !important;
min-height: 100dvh !important;
overflow-x: hidden !important;
overflow-y: visible !important;
transform: none !important;
contain: none !important;
pointer-events: auto !important;
}
/* SG FINAL: layout-level bottom navigation lives outside the route scroll surface. */
.sg-layout-bottom-nav {
position: fixed !important;
z-index: 2147483000 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
height: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
pointer-events: none !important;
transform: none !important;
contain: none !important;
isolation: isolate !important;
}
.sg-layout-bottom-nav > nav.oscar-bottom-nav.original-bottom-nav {
position: fixed !important;
z-index: 2147483000 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
pointer-events: auto !important;
transform: none !important;
translate: none !important;
contain: layout paint style !important;
}
/* Hide old per-page copies. They remain in code for safety, but cannot scroll with content anymore. */
.sg-route-frame nav.oscar-bottom-nav.original-bottom-nav,
.sg-route-surface nav.oscar-bottom-nav.original-bottom-nav {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Viewport-fixed headers must not inherit an animated containing block. */
.sg-route-frame,
.sg-route-enter-initial,
.sg-route-enter-home,
.sg-route-switch-tab,
.sg-route-enter-detail,
.sg-route-return-from-detail,
.sg-route-enter-forward,
.sg-route-enter-back,
.sg-route-enter-soft {
animation: none !important;
transform: none !important;
translate: none !important;
filter: none !important;
perspective: none !important;
contain: none !important;
}
.main-layout-shell,
.sg-route-surface {
transform: none !important;
translate: none !important;
filter: none !important;
perspective: none !important;
contain: none !important;
}
/* Keep the full bottom menu visible on Windows and Android. */
.sg-layout-bottom-nav {
display: block !important;
visibility: visible !important;
}
/* Nova Aperture route motion: opacity-only reveal keeps every fixed header and bottom bar stable. */
.sg-route-frame.sg-route-enter-initial,
.sg-route-frame.sg-route-enter-home,
.sg-route-frame.sg-route-switch-tab,
.sg-route-frame.sg-route-enter-detail,
.sg-route-frame.sg-route-return-from-detail,
.sg-route-frame.sg-route-enter-forward,
.sg-route-frame.sg-route-enter-back,
.sg-route-frame.sg-route-enter-soft {
animation: sgNovaRouteReveal 160ms cubic-bezier(.18, .82, .22, 1) both !important;
transform: none !important;
filter: none !important;
}
.sg-route-frame.sg-route-enter-detail {
animation-name: sgNovaDetailReveal !important;
}
.sg-route-frame.sg-route-return-from-detail {
animation-name: sgNovaReturnReveal !important;
}
@keyframes sgNovaRouteReveal {
from { opacity: .88; }
to { opacity: 1; }
}
@keyframes sgNovaDetailReveal {
0% { opacity: .82; }
45% { opacity: .94; }
100% { opacity: 1; }
}
@keyframes sgNovaReturnReveal {
from { opacity: .9; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.sg-route-frame.sg-route-enter-initial,
.sg-route-frame.sg-route-enter-home,
.sg-route-frame.sg-route-switch-tab,
.sg-route-frame.sg-route-enter-detail,
.sg-route-frame.sg-route-return-from-detail,
.sg-route-frame.sg-route-enter-forward,
.sg-route-frame.sg-route-enter-back,
.sg-route-frame.sg-route-enter-soft {
animation: none !important;
}
}
/* Player focus mode: the app navigation must never overlay video on Windows or mobile. */
html.sg-player-open .sg-layout-bottom-nav,
body.sg-player-open .sg-layout-bottom-nav {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(120%) !important;
}
/* ORIGINAL SOURCE: Components/Pages/Account.razor.css */
:host{display:block;min-height:100dvh;background:#000!important}.account-page-app{min-height:100dvh;background:#000!important;color:#fff;font-family:Tajawal,Arial,sans-serif;padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px))}.account-pro-header{position:fixed;z-index:160;top:0;right:0;left:0;height:calc(72px + var(--safe-top,0px));padding:var(--safe-top,0px) max(clamp(16px,3vw,36px),var(--safe-right,0px)) 0 max(clamp(16px,3vw,36px),var(--safe-left,0px));display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:#000!important;border-bottom:1px solid rgba(255,255,255,.08)}.account-pro-header h1{margin:0;text-align:center;color:#fff;font-size:1.55rem;font-weight:950}.account-pro-header button{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:#000;color:#fff}.account-page-shell{min-height:100dvh;padding:calc(92px + var(--safe-top,0px)) clamp(14px,3vw,44px) calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 34px);overflow-x:hidden;background:#000!important;background-image:none!important}@media(max-width:640px){.account-pro-header{height:calc(64px + var(--safe-top,0px));grid-template-columns:44px 1fr 44px}.account-pro-header h1{font-size:1.3rem}.account-pro-header button{width:44px;height:44px}.account-page-shell{padding-top:calc(78px + var(--safe-top,0px));padding-inline:12px}}
.account-pro-header button{transition:transform .12s ease,background-color .12s ease}.account-pro-header button:active{transform:scale(.96);background:rgba(255,255,255,.05)}.account-pro-header button:focus-visible{outline:2px solid rgba(109,125,255,.9);outline-offset:2px}
/* ORIGINAL SOURCE: Components/Pages/AnimeCatalogPage.razor.css */
:host {
display: block;
background: #000000;
}
.catalog-app,
.anime-catalog-app {
min-height: 100vh;
background-color: #000000;
color: var(--oscar-text);
font-family:inherit;
}
.catalog-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
background: #000000;
padding: calc(10px + var(--safe-top, 0px)) 12px 4px;
border-bottom: 1px solid var(--oscar-border);
}
.header-top {
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.header-top .icon-button {
width: 36px;
height: 36px;
padding: 0;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: var(--oscar-text);
}
.page-title {
margin: 0;
color: var(--oscar-text);
font-size: 1.3rem;
line-height: 1;
font-weight: 800;
white-space: nowrap;
}
.spacer {
width: 36px;
height: 36px;
}
.scrollable-tabs {
display: flex;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollable-tabs::-webkit-scrollbar {
display: none;
}
.categories-tabs {
gap: 8px;
padding: 0 0 10px;
}
.tab-btn {
flex: 0 0 auto;
height: 34px;
padding: 0 14px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--oscar-muted);
font-size: 0.95rem;
font-weight: 600;
white-space: nowrap;
transition: 0.2s ease;
}
.tab-btn.active {
background: linear-gradient(to left, #000000, #000000);
color: var(--oscar-text);
font-weight: 700;
}
.filters-tabs {
gap: 8px;
padding: 0 0 8px;
}
.filter-pill {
position: relative;
flex: 0 0 auto;
height: 30px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
border: 0;
border-radius: 15px;
background-color: #000000;
color: var(--oscar-text);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.filter-pill select {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.filter-pill .dot-icon {
color: var(--oscar-muted);
font-size: 1rem;
line-height: 1;
}
.filter-pill.active {
color: var(--oscar-text);
}
.filter-pill.active .active-dot {
width: 5px;
height: 5px;
display: inline-block;
border-radius: 50%;
background-color: #000000;
}
.catalog-main {
padding: calc(132px + var(--safe-top, 0px)) 12px calc(88px + var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px));
background: #000000;
min-height: 100vh;
}
.media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.media-card {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 8px;
background-color: #000000;
box-shadow: 0 4px 10px rgba(0,0,0,.4);
cursor: pointer;
}
.media-card .anime-poster-image {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
transform: scale(1.002);
pointer-events: none;
}
.media-card::after {
content: "";
position: absolute;
inset: 42% 0 0;
background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 48%, transparent 100%);
pointer-events: none;
}
.card-badges {
position: absolute;
z-index: 3;
top: 6px;
left: 6px;
right: 6px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.badge {
min-height: 20px;
padding: 2px 5px;
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 4px;
color: var(--oscar-text);
background: rgba(0,0,0,.75);
font-size: .7rem;
font-weight: 700;
line-height: 1;
backdrop-filter: blur(4px);
}
.age-badge {
background: #000000;
}
.quality-badge {
background: rgba(0,0,0,.75);
}
.card-title-overlay {
position: absolute;
z-index: 4;
right: 0;
left: 0;
bottom: 0;
padding: 30px 8px 8px;
text-align: center;
pointer-events: none;
}
.card-title-overlay h3 {
margin: 0;
overflow: hidden;
color: var(--oscar-text);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 700;
text-shadow: 0 2px 5px rgba(0,0,0,.9);
white-space: nowrap;
text-overflow: ellipsis;
}
.catalog-loading,
.catalog-empty {
min-height: 48vh;
display: grid;
place-items: center;
align-content: center;
gap: 12px;
color: var(--oscar-text);
text-align: center;
}
.home-loader-ring {
width: 42px;
height: 42px;
border: 3px solid var(--oscar-border);
border-top-color: var(--accent);
border-radius: 50%;
animation: catalog-spin .85s linear infinite;
}
.primary-action {
min-height: 40px;
padding: 0 16px;
border: 0;
border-radius: 999px;
color: var(--oscar-text);
background: linear-gradient(to left, #000000, #000000);
font-weight: 900;
transition: opacity 0.2s;
}
.primary-action:active {
opacity: 0.8;
}
@keyframes catalog-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 420px) {
.catalog-header {
padding-inline: 10px;
}
.catalog-main {
padding-inline: 10px;
}
.media-grid {
gap: 8px;
}
}
@media (min-width: 760px) {
.media-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.catalog-main {
max-width: 1180px;
margin-inline: auto;
}
}
/* ORIGINAL SOURCE: Components/Pages/AnimePage.razor.css */
:host {
display: block;
background: #000000 !important;
}
.anime-landing-app {
min-height: 100vh;
background: #000000 !important;
color: var(--oscar-text);
font-family:inherit;
}
.anime-landing-toolbar {
position: fixed;
z-index: 150;
top: 0;
right: 0;
left: 0;
height: calc(65px + var(--safe-top, 0px));
padding: var(--safe-top, 0px) max(20px,var(--safe-right,0px)) 0 max(20px,var(--safe-left,0px));
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
border-bottom: 1px solid transparent;
transition: background-color 0.4s ease, border-bottom 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
pointer-events: auto;
}
.anime-landing-toolbar.scrolled {
background-color: rgba(0,0,0,0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--oscar-border);
box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.anime-landing-toolbar h1 {
margin: 0;
color: var(--oscar-text);
font-size: 1.45rem;
line-height: 1;
font-weight: 900;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.anime-toolbar-button {
width: 38px;
height: 38px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
color: var(--oscar-text);
background: transparent;
flex-shrink: 0;
transition: all 0.2s ease;
}
.anime-toolbar-button:active {
background: rgba(0,0,0,0.15);
transform: scale(0.92);
}
.anime-landing-main {
padding-top: 0;
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 20px);
min-height: 100vh;
overflow-x: hidden;
background: #000000 !important;
}
.anime-home-reference {
background: #000000 !important;
}
.anime-home-reference .target-home-hero-shell {
margin-top: 0;
background: #000000 !important;
}
.anime-landing-loading,
.anime-landing-empty {
min-height: 100vh;
padding: calc(90px + var(--safe-top, 0px)) 22px 120px;
display: grid;
place-items: center;
align-content: center;
gap: 14px;
color: var(--oscar-text);
text-align: center;
background: #000000 !important;
}
.home-loader-ring {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid var(--oscar-border);
border-top-color: var(--accent);
animation: anime-spin 0.8s linear infinite;
}
.anime-landing-loading strong,
.anime-landing-empty h1 {
margin: 0;
font-size: 1.1rem;
font-weight: 800;
}
.anime-landing-loading small,
.anime-landing-empty p {
color: var(--oscar-muted);
font-size: 0.85rem;
line-height: 1.6;
}
.primary-action {
min-height: 40px;
padding: 0 20px;
border: 0;
border-radius: 999px;
color: var(--oscar-text);
background: linear-gradient(to left, #000000, #000000);
font-size: 0.9rem;
font-weight: 800;
transition: opacity 0.2s;
}
.primary-action:active {
opacity: 0.8;
}
@keyframes anime-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 420px) {
.anime-landing-toolbar {
height: calc(58px + var(--safe-top, 0px));
padding-inline: 16px;
}
.anime-toolbar-button {
width: 34px;
height: 34px;
}
.anime-landing-toolbar h1 {
font-size: 1.25rem;
}
}
/* ORIGINAL SOURCE: Components/Pages/Details.razor.css */
:host {
display: block;
background: transparent;
}
.torrent-preparation-overlay {
position: fixed;
inset: 0;
z-index: 2147483000;
display: grid;
place-items: center;
padding: 24px;
direction: rtl;
}
.torrent-preparation-backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 38%, rgba(122, 57, 255, .20), transparent 38%),
rgba(2, 1, 7, .96);
backdrop-filter: blur(18px);
}
.torrent-preparation-card {
position: relative;
width: min(520px, 100%);
min-height: 330px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 46px 38px 34px;
border: 1px solid rgba(155, 77, 255, .38);
border-radius: 26px;
color: #fff;
background: linear-gradient(150deg, rgba(20, 15, 34, .98), rgba(5, 4, 12, .98));
box-shadow: 0 34px 100px rgba(0, 0, 0, .72), 0 0 44px rgba(115, 62, 255, .13);
}
.torrent-preparation-spinner {
width: 78px;
height: 78px;
margin-bottom: 24px;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, .10);
border-top-color: #9b4dff;
border-right-color: #14d7ff;
animation: torrent-preparation-spin .9s linear infinite;
box-shadow: 0 0 28px rgba(155, 77, 255, .28);
}
.torrent-preparation-badge {
margin-bottom: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(155, 77, 255, .14);
color: #cab2ff;
font-size: .72rem;
font-weight: 900;
letter-spacing: .08em;
}
.torrent-preparation-card h2 {
margin: 0;
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 900;
}
.torrent-preparation-card p {
min-height: 28px;
margin: 15px 0 7px;
color: #d7d2e3;
font-size: 1rem;
line-height: 1.8;
}
.torrent-preparation-card small {
color: #888298;
line-height: 1.7;
}
.torrent-preparation-cancel {
min-width: 170px;
margin-top: 26px;
padding: 12px 22px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 12px;
background: rgba(255, 255, 255, .06);
color: #fff;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.torrent-preparation-cancel.primary {
border-color: transparent;
background: linear-gradient(135deg, #8c4dff, #4d9cff);
}
.torrent-preparation-error-icon {
width: 70px;
height: 70px;
display: grid;
place-items: center;
margin-bottom: 22px;
border: 2px solid rgba(255, 86, 111, .62);
border-radius: 50%;
color: #ff6a80;
background: rgba(255, 54, 88, .10);
font-size: 2rem;
font-weight: 900;
}
@keyframes torrent-preparation-spin {
to { transform: rotate(360deg); }
}
/* =========================================
1. الهوية اللونية (Solid Premium Theme)
========================================= */
:root, .nova-app, .details-app {
--nova-bg-master: #030206; /* أسود سينمائي عميق */
--nova-surface-dark: #0a0812;
--nova-surface-card: #110d1a;
--nova-surface-hover: #181326;
--nova-border-subtle: rgba(255, 255, 255, 0.05);
--nova-brand-primary: #9B4DFF;
--nova-brand-secondary: #14D7FF;
--nova-text-pure: #ffffff;
--nova-text-dim: #a3a1ab;
--nova-text-muted: #6a6775;
--font-family: 'Inter', 'Tajawal', system-ui, sans-serif;
/* مسافات ديناميكية تتكيف مع حجم الشاشة */
--page-pad: clamp(20px, 5vw, 60px);
--transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* الإعدادات الشاملة لمنع التكدس */
.details-app, .details-page-shell {
min-height: 100dvh;
background: var(--nova-bg-master) !important;
color: var(--nova-text-pure);
font-family: var(--font-family);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
/* إجبار التطبيق على احترام اتجاه اليمين لليسار بشكل صحيح */
direction: rtl;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: var(--nova-bg-master);
}
::-webkit-scrollbar-thumb {
background: #2a2240;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--nova-brand-primary);
}
/* =========================================
2. الحاوية المركزية (الحل الجذري للويندوز)
========================================= */
/* هذه الفئة هي السر، ستمنع المحتوى من الهروب لليمين وتتوسطه في الشاشة */
.nova-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
}
/* =========================================
3. الرأس (Hero Section) - خلفية سينمائية غامرة
========================================= */
.nova-hero-solid {
position: relative;
width: 100%;
/* ارتفاع ديناميكي يملأ معظم الشاشة */
min-height: clamp(550px, 75vh, 850px);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 50px;
overflow: hidden;
}
.nova-bg-layer {
position: absolute !important;
inset: 0;
z-index: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center top;
/* تخفيف سطوع الخلفية لبروز النصوص */
filter: brightness(0.7) contrast(1.1);
}
/* تدرج لوني يبتلع أسفل ويمين الصورة لدمجها مع لون الخلفية */
.nova-vignette-solid {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, var(--nova-bg-master) 0%, rgba(3,2,6,0.8) 35%, transparent 80%), linear-gradient(to right, rgba(3,2,6,0.95) 0%, rgba(3,2,6,0.5) 40%, transparent 100%);
}
.nova-details-topbar {
position: absolute;
top: calc(var(--safe-top, 0px) + 30px);
left: var(--page-pad);
right: var(--page-pad);
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
}
.nova-icon-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(10, 8, 18, 0.6);
border: 1px solid var(--nova-border-subtle);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
backdrop-filter: blur(8px);
transition: var(--transition-fast);
}
.nova-icon-btn:hover, .nova-icon-btn.active {
background: var(--nova-brand-primary);
border-color: var(--nova-brand-primary);
transform: scale(1.05);
}
.nova-topbar-actions {
display: flex;
gap: 12px;
}
/* =========================================
4. توزيع المحتوى (البوستر بجانب النصوص)
========================================= */
.nova-hero-content {
display: flex;
gap: 40px;
align-items: flex-end;
padding: 0 var(--page-pad);
}
.nova-poster-main {
width: clamp(200px, 18vw, 280px);
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 25px 60px rgba(0,0,0,0.9);
flex-shrink: 0;
}
.nova-info-stack {
flex: 1;
min-width: 0;
padding-bottom: 10px;
}
.nova-badge-type, .nova-badge-live {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
font-size: 0.7rem;
font-weight: 800;
color: var(--nova-text-dim);
margin-bottom: 16px;
backdrop-filter: blur(4px);
}
.nova-badge-live {
color: #ff3b30;
border-color: rgba(255,59,48,0.3);
background: rgba(255,59,48,0.1);
}
.pulse-dot {
width: 6px;
height: 6px;
background: #ff3b30;
border-radius: 50%;
margin-left: 8px;
box-shadow: 0 0 10px #ff3b30;
}
.nova-title-main {
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 950;
line-height: 1.1;
margin: 0 0 20px;
color: var(--nova-text-pure);
text-shadow: 0 4px 20px rgba(0,0,0,0.8);
letter-spacing: -0.02em;
}
.nova-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
font-size: 0.8rem;
font-weight: 700;
color: var(--nova-text-dim);
margin-bottom: 16px;
}
.rating-highlight {
color: #f5c518;
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
}
.quality-tag {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 4px;
color: #fff;
}
.nova-tags-row {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.nova-tags-row span {
font-size: 0.7rem;
font-weight: 800;
padding: 4px 10px;
border-radius: 4px;
background: var(--nova-surface-card);
border: 1px solid var(--nova-border-subtle);
}
.tag-airing {
color: var(--nova-brand-secondary) !important;
border-color: rgba(20,215,255,0.3) !important;
}
.tag-translated {
color: var(--nova-brand-primary) !important;
border-color: rgba(155,77,255,0.3) !important;
}
.nova-plot-main {
font-size: 0.9rem;
line-height: 1.8;
color: var(--nova-text-dim);
margin: 0 0 30px;
max-width: 850px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nova-stats-row {
display: flex;
gap: 24px;
font-size: 0.75rem;
color: var(--nova-text-muted);
margin-bottom: 30px;
}
.stat-item, .stat-btn {
display: flex;
align-items: center;
gap: 6px;
}
.stat-btn {
background: transparent;
border: none;
color: inherit;
font-size: inherit;
cursor: pointer;
padding: 0;
transition: color 0.2s;
}
.stat-btn:hover {
color: var(--nova-text-pure);
}
.nova-action-row {
display: flex;
gap: 16px;
}
.nova-btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
height: 52px;
padding: 0 40px;
border: none;
border-radius: 6px;
background: linear-gradient(90deg, var(--nova-brand-primary), var(--nova-brand-secondary));
color: #fff;
font-size: 0.9rem;
font-weight: 900;
cursor: pointer;
box-shadow: 0 8px 25px rgba(155, 77, 255, 0.25);
transition: var(--transition-fast);
}
.nova-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(155, 77, 255, 0.4);
filter: brightness(1.1);
}
/* =========================================
5. محتوى الصفحة السفلي (Sections & Rails)
========================================= */
.nova-content-flow {
padding: 40px var(--page-pad) 120px;
display: flex;
flex-direction: column;
gap: 48px;
}
.nova-section-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.nova-section-head h2 {
font-size: 1.1rem;
font-weight: 900;
margin: 0;
color: var(--nova-text-pure);
}
.nova-section-head h2::before {
content: "";
display: inline-block;
width: 4px;
height: 18px;
background: var(--nova-brand-primary);
margin-left: 8px;
border-radius: 2px;
}
/* سكة الممثلين */
.nova-people-rail {
display: flex;
gap: 20px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 10px;
}
.nova-people-rail::-webkit-scrollbar {
display: none;
}
.person-card {
flex: 0 0 auto;
width: 100px;
text-align: center;
}
.person-avatar {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 12px;
background: var(--nova-surface-card);
border: 1px solid var(--nova-border-subtle);
overflow: hidden;
}
.person-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.person-card strong {
display: block;
font-size: 0.75rem;
font-weight: 800;
color: var(--nova-text-pure);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.person-card small {
display: block;
font-size: 0.65rem;
color: var(--nova-text-muted);
margin-top: 4px;
}
.nova-story-box {
background: var(--nova-surface-dark);
border: 1px solid var(--nova-border-subtle);
padding: 30px;
border-radius: 8px;
}
.nova-story-box p {
font-size: 0.85rem;
line-height: 1.8;
color: var(--nova-text-dim);
margin: 0;
max-width: 1000px;
}
/* =========================================
5.1 أعمال قد تثير اهتمامك - Nova Related Cards
========================================= */
.nova-empty-state {
min-height: 120px;
display: grid;
place-items: center;
padding: 24px;
background: linear-gradient(145deg, rgba(17,13,26,0.96), rgba(7,5,12,0.98));
border: 1px solid rgba(151, 0, 198, 0.22);
border-radius: 18px;
color: var(--nova-text-dim);
font-size: 0.84rem;
font-weight: 800;
}
.nova-related-section {
position: relative;
isolation: isolate;
}
.nova-related-section::before {
content: "";
position: absolute;
inset: -18px -18px auto;
height: 170px;
border-radius: 30px;
background: radial-gradient(circle at 88% 10%, rgba(151, 0, 198, 0.18), transparent 46%),
radial-gradient(circle at 12% 28%, rgba(50, 150, 255, 0.12), transparent 42%);
pointer-events: none;
z-index: -1;
}
.nova-related-head {
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
}
.section-title-stack {
display: flex;
flex-direction: column;
gap: 5px;
}
.section-kicker {
width: fit-content;
font-size: 0.62rem;
font-weight: 950;
letter-spacing: 0.09em;
text-transform: uppercase;
color: transparent;
background: linear-gradient(90deg, #b24cff, #3296ff);
-webkit-background-clip: text;
background-clip: text;
}
.related-total {
flex: 0 0 auto;
font-style: normal;
color: #d9ceff;
background: linear-gradient(135deg, rgba(151, 0, 198, 0.22), rgba(50, 150, 255, 0.16));
border: 1px solid rgba(151, 0, 198, 0.34);
border-radius: 999px;
padding: 8px 13px;
font-size: 0.68rem;
font-weight: 950;
box-shadow: 0 10px 24px rgba(151, 0, 198, 0.12);
}
.nova-related-rail {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding: 4px 2px 14px;
}
.nova-related-rail::-webkit-scrollbar {
display: none;
}
.nova-related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
gap: 18px;
align-items: start;
}
.related-media-card {
min-width: 0;
cursor: pointer;
color: var(--nova-text-pure);
outline: none;
scroll-snap-align: start;
}
.related-poster-shell {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 24px;
background: linear-gradient(145deg, #110d1a, #050309);
border: 1px solid rgba(151, 0, 198, 0.32);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.58),
0 0 0 1px rgba(255, 255, 255, 0.025) inset;
transform: translateZ(0);
transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}
.related-poster-shell img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.01);
transition: transform 0.38s ease, filter 0.38s ease;
}
.related-poster-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(3, 2, 6, 0.94) 0%, rgba(3, 2, 6, 0.36) 42%, transparent 72%),
radial-gradient(circle at 18% 14%, rgba(178, 76, 255, 0.30), transparent 38%),
linear-gradient(135deg, rgba(151, 0, 198, 0.14), rgba(50, 150, 255, 0.10));
pointer-events: none;
}
.related-media-card:hover .related-poster-shell,
.related-media-card:focus-visible .related-poster-shell {
transform: translateY(-6px);
border-color: rgba(50, 150, 255, 0.72);
box-shadow: 0 24px 58px rgba(0, 0, 0, 0.70),
0 0 28px rgba(151, 0, 198, 0.28),
0 0 32px rgba(50, 150, 255, 0.18);
filter: brightness(1.04);
}
.related-media-card:hover .related-poster-shell img,
.related-media-card:focus-visible .related-poster-shell img {
transform: scale(1.075);
}
.related-type-chip,
.related-score,
.related-favorite {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
}
.related-type-chip {
top: 10px;
right: 10px;
min-height: 26px;
padding: 0 10px;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #9700c6, #3296ff);
font-size: 0.62rem;
font-weight: 950;
box-shadow: 0 10px 24px rgba(151, 0, 198, 0.28);
}
.related-score {
left: 10px;
bottom: 10px;
gap: 4px;
min-height: 25px;
padding: 0 9px;
border-radius: 999px;
color: #fff3a5;
background: rgba(3, 2, 6, 0.72);
border: 1px solid rgba(255, 231, 97, 0.20);
font-size: 0.63rem;
font-weight: 950;
}
.related-favorite {
top: 10px;
left: 10px;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(3, 2, 6, 0.70);
color: #fff;
cursor: pointer;
transition: var(--transition-fast);
}
.related-favorite:hover,
.related-favorite.active {
color: #fff;
background: linear-gradient(135deg, #9700c6, #3296ff);
border-color: rgba(255, 255, 255, 0.20);
box-shadow: 0 10px 24px rgba(151, 0, 198, 0.28);
}
.related-card-info {
padding: 12px 4px 0;
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.related-card-info strong {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.55em;
color: #fff;
font-size: 0.83rem;
font-weight: 950;
line-height: 1.28;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.related-card-info small {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--nova-text-muted);
font-size: 0.68rem;
font-weight: 800;
}
.related-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 22px;
}
.related-card-tags span {
min-height: 22px;
display: inline-flex;
align-items: center;
padding: 0 8px;
border-radius: 999px;
color: #cfc7ea;
background: rgba(17, 13, 26, 0.95);
border: 1px solid rgba(151, 0, 198, 0.18);
font-size: 0.58rem;
font-weight: 950;
}
/* =========================================
6. قسم الحلقات (Episodes Panel) - إصلاح العرض
========================================= */
.episode-panel .nova-section-head {
justify-content: space-between;
}
.nova-sort-btn {
background: var(--nova-surface-card);
border: 1px solid var(--nova-border-subtle);
color: var(--nova-text-dim);
border-radius: 6px;
padding: 8px 16px;
font-size: 0.7rem;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition-fast);
}
.nova-sort-btn:hover {
color: #fff;
border-color: rgba(255,255,255,0.2);
}
.nova-season-tabs {
display: flex;
gap: 12px;
overflow-x: auto;
scrollbar-width: none;
margin-bottom: 24px;
}
.nova-season-tabs::-webkit-scrollbar {
display: none;
}
.season-tab {
flex: 0 0 auto;
background: var(--nova-surface-dark);
border: 1px solid var(--nova-border-subtle);
padding: 12px 24px;
border-radius: 8px;
color: var(--nova-text-dim);
text-align: right;
cursor: pointer;
transition: var(--transition-fast);
}
.season-tab strong {
display: block;
font-size: 0.8rem;
font-weight: 800;
}
.season-tab small {
display: block;
font-size: 0.65rem;
margin-top: 4px;
opacity: 0.7;
}
.season-tab:hover {
background: var(--nova-surface-hover);
}
.season-tab.active {
background: var(--nova-brand-primary);
border-color: var(--nova-brand-primary);
color: var(--nova-text-pure);
}
.nova-search-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
font-size: 0.75rem;
color: var(--nova-text-muted);
}
.search-solid-input {
display: flex;
align-items: center;
gap: 10px;
background: var(--nova-surface-dark);
border: 1px solid var(--nova-border-subtle);
padding: 0 16px;
height: 42px;
border-radius: 6px;
width: 300px;
}
.search-solid-input input {
background: transparent;
border: none;
color: #fff;
font-size: 0.75rem;
outline: none;
width: 100%;
}
/* شبكة الحلقات الاحترافية */
.nova-episode-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.nova-episode-card {
background: var(--nova-surface-card);
border: 1px solid var(--nova-border-subtle);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: var(--transition-fast);
}
.nova-episode-card:hover {
transform: translateY(-4px);
border-color: var(--nova-brand-primary);
box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}
.ep-thumb {
position: relative;
aspect-ratio: 16 / 9;
background: #000;
}
.ep-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ep-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
display: grid;
place-items: center;
opacity: 0;
transition: var(--transition-fast);
}
.play-ring {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--nova-brand-primary);
display: grid;
place-items: center;
color: #fff;
}
.nova-episode-card:hover .ep-overlay {
opacity: 1;
}
.ep-details {
padding: 16px;
}
.ep-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.ep-header strong {
font-size: 0.85rem;
font-weight: 850;
color: var(--nova-text-pure);
}
.ep-badges span {
font-size: 0.6rem;
font-weight: 900;
background: var(--nova-surface-dark);
border: 1px solid var(--nova-border-subtle);
padding: 2px 8px;
border-radius: 4px;
}
.ep-details small {
font-size: 0.7rem;
color: var(--nova-text-muted);
}
/* =========================================
7. سيرفرات التشغيل (Solid & Sharp)
========================================= */
.nova-server-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.nova-server-card {
display: flex;
align-items: center;
gap: 16px;
text-align: right;
background: var(--nova-surface-card);
border: 1px solid var(--nova-border-subtle);
padding: 16px 20px;
border-radius: 8px;
color: var(--nova-text-pure);
cursor: pointer;
transition: var(--transition-fast);
}
.nova-server-card:hover {
background: var(--nova-surface-hover);
border-color: var(--nova-brand-primary);
transform: translateX(-4px);
}
.server-icon {
width: 44px;
height: 44px;
border-radius: 6px;
background: var(--nova-surface-dark);
display: grid;
place-items: center;
color: var(--nova-brand-secondary);
border: 1px solid var(--nova-border-subtle);
}
.nova-server-card:hover .server-icon {
background: var(--nova-brand-primary);
color: #fff;
border-color: var(--nova-brand-primary);
}
.server-details {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.server-details strong {
font-size: 0.85rem;
font-weight: 850;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.server-details small {
font-size: 0.7rem;
color: var(--nova-text-dim);
}
.server-badge {
font-style: normal;
font-size: 0.65rem;
font-weight: 900;
background: var(--nova-surface-dark);
border: 1px solid var(--nova-border-subtle);
padding: 4px 10px;
border-radius: 4px;
}
/* =========================================
8. استجابة الأندرويد (تكدس عمودي احترافي)
========================================= */
@media (max-width: 760px) {
.nova-hero-solid {
min-height: 70vh;
padding-bottom: 20px;
}
/* تغيير التوزيع في الموبايل من أفقي إلى عمودي */
.nova-hero-content {
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.nova-vignette-solid {
background: linear-gradient(to top, var(--nova-bg-master) 0%, rgba(3,2,6,0.6) 45%, transparent 100%);
}
.nova-poster-main {
width: 140px;
margin-top: calc(var(--safe-top, 0px) + 70px);
}
.nova-info-stack {
align-items: center;
}
.nova-title-main {
font-size: 1.8rem;
}
.nova-meta-row, .nova-tags-row, .nova-stats-row {
justify-content: center;
}
.nova-plot-main {
font-size: 0.8rem;
-webkit-line-clamp: 4;
text-align: center;
}
.nova-action-row {
justify-content: center;
width: 100%;
}
.nova-btn-primary {
width: 100%;
justify-content: center;
}
.nova-content-flow {
padding-top: 24px;
gap: 32px;
}
.nova-related-section::before {
inset-inline: -8px;
height: 140px;
opacity: 0.8;
}
.nova-related-head {
align-items: flex-start;
gap: 12px;
}
.related-total {
padding: 7px 11px;
font-size: 0.62rem;
}
.nova-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 12px;
}
.related-poster-shell {
border-radius: 20px;
}
.related-card-info {
padding-top: 10px;
}
.related-card-info strong {
font-size: 0.76rem;
}
.related-card-info small {
font-size: 0.62rem;
}
.related-card-tags span:nth-child(n+3) {
display: none;
}
/* تحويل الحلقات إلى نمط القائمة (List) لتسهيل التصفح بالهاتف */
.nova-episode-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.nova-episode-card {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 6px;
}
.ep-thumb {
width: 130px;
border-radius: 4px;
flex-shrink: 0;
}
.ep-details {
padding: 0;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.ep-header {
flex-direction: column;
margin-bottom: 4px;
gap: 6px;
}
.ep-header strong {
font-size: 0.75rem;
}
.nova-search-bar {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.search-solid-input {
width: 100%;
}
}
/* Skeleton تفصيلي بدون شاشة التحميل القديمة */
.details-skeleton-page {
min-height: 100dvh;
position: relative;
overflow: hidden;
background: #030206;
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px));
}
.details-skeleton-backdrop {
position: absolute;
inset: 0;
min-height: 64vh;
opacity: .92;
}
.details-skeleton-backdrop::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 72% 28%, rgba(155,77,255,.28), transparent 32%),
radial-gradient(circle at 22% 58%, rgba(20,215,255,.18), transparent 30%),
linear-gradient(to top, #030206 0%, rgba(3,2,6,.72) 44%, rgba(3,2,6,.15) 100%);
}
.details-skeleton-content {
position: relative;
z-index: 2;
min-height: 78vh;
display: grid;
grid-template-columns: minmax(170px, 250px) minmax(0, 1fr);
gap: clamp(18px, 4vw, 34px);
align-items: end;
max-width: 1180px;
margin: 0 auto;
padding: clamp(120px, 24vh, 230px) var(--page-pad) 56px;
}
.details-skeleton-poster {
width: 100%;
aspect-ratio: 2/3;
border-radius: 24px;
box-shadow: 0 32px 80px rgba(0,0,0,.58);
}
.details-skeleton-copy {
display: grid;
gap: 14px;
max-width: 620px;
}
.details-skeleton-pill,
.details-skeleton-title,
.details-skeleton-line,
.details-skeleton-actions b {
display: block;
border-radius: 999px;
}
.details-skeleton-pill { width: 120px; height: 13px; }
.details-skeleton-title { width: min(520px, 78vw); height: 44px; }
.details-skeleton-line { width: min(460px, 70vw); height: 13px; }
.details-skeleton-line.short { width: min(320px, 54vw); }
.details-skeleton-actions { display: flex; gap: 12px; margin-top: 10px; }
.details-skeleton-actions b { width: 132px; height: 46px; }
.details-shimmer {
position: relative;
overflow: hidden;
background: linear-gradient(100deg, #090814 0%, #15132b 33%, #221a46 48%, #11142d 62%, #090814 100%);
background-size: 240% 100%;
animation: details-shimmer 1.16s linear infinite;
}
@keyframes details-shimmer { to { background-position-x: -240%; } }
@media (max-width: 760px) {
.details-skeleton-content {
grid-template-columns: 1fr;
align-items: end;
padding-top: 42vh;
}
.details-skeleton-poster {
display: none;
}
}
/* Cinematic mobile details — reference layout */
.cinematic-details-page {
position: relative;
min-height: 100dvh;
overflow-x: hidden;
background: #01030a;
color: #fff;
padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 24px);
}
.cinematic-details-page .nova-details-topbar {
position: fixed !important;
z-index: 980 !important;
top: calc(var(--safe-top, 0px) + 10px) !important;
right: 14px !important;
left: 14px !important;
width: auto !important;
pointer-events: none;
}
.cinematic-details-page .nova-details-topbar .nova-icon-btn {
pointer-events: auto;
border: 0;
background: rgba(1, 4, 12, .34);
box-shadow: 0 5px 18px rgba(0, 0, 0, .32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cinematic-details-hero {
position: absolute;
z-index: 0;
top: 0;
right: 0;
left: 0;
height: clamp(540px, 56dvh, 790px);
overflow: hidden;
background: #050713;
}
.cinematic-details-backdrop {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: saturate(1.08) contrast(1.05);
}
.cinematic-details-shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(1, 3, 10, .04) 0%, rgba(1, 3, 10, .04) 50%, rgba(1, 3, 10, .72) 78%, #01030a 100%),
linear-gradient(90deg, rgba(1, 3, 10, .14), transparent 24%, transparent 76%, rgba(1, 3, 10, .14));
}
.cinematic-details-content {
position: relative;
z-index: 2;
width: min(100%, 920px);
margin: 0 auto;
padding: clamp(470px, 51dvh, 700px) clamp(18px, 5vw, 42px) 0;
box-sizing: border-box;
text-align: center;
}
.cinematic-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(255, 255, 255, .78);
font-size: .92rem;
}
.cinematic-eyebrow span {
width: 13px;
height: 13px;
border-radius: 2px;
background: linear-gradient(145deg, #7744ff, #1b9eff);
transform: rotate(45deg);
box-shadow: 0 0 16px rgba(68, 105, 255, .5);
}
.cinematic-eyebrow b { font-weight: 500; }
.cinematic-title {
margin: 11px 0 16px;
color: #f4e9e5;
font-size: clamp(3rem, 10vw, 6.4rem);
line-height: .96;
font-weight: 900;
letter-spacing: -.055em;
text-shadow: 0 9px 32px rgba(0, 0, 0, .84);
}
.cinematic-meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
color: rgba(255, 255, 255, .63);
font-size: .9rem;
}
.cinematic-meta > * {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 13px;
border-inline-start: 1px solid rgba(255, 255, 255, .20);
}
.cinematic-meta > *:first-child { border-inline-start: 0; }
.cinematic-quality { color: #9e39ff; font-size: 1.02rem; font-weight: 900; font-style: italic; }
.cinematic-age { border: 1px solid rgba(255, 255, 255, .34) !important; border-radius: 6px; margin-inline: 7px; padding-inline: 8px !important; min-height: 26px !important; color: rgba(255, 255, 255, .8); }
.cinematic-ranking {
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 9px;
}
.cinematic-ranking span {
min-height: 42px;
padding: 0 15px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid rgba(130, 146, 183, .28);
border-radius: 8px;
background: rgba(3, 7, 17, .52);
color: rgba(255, 255, 255, .72);
font-size: .82rem;
}
.cinematic-ranking span:first-child { direction: ltr; }
.cinematic-ranking span:first-child .oscar-icon { color: #9b36ff; }
.cinematic-story {
margin-top: 27px;
text-align: right;
}
.cinematic-story h2 {
margin: 0 0 10px;
font-size: 1.24rem;
font-weight: 900;
}
.cinematic-story p {
margin: 0;
overflow: hidden;
color: rgba(255, 255, 255, .68);
font-size: clamp(.9rem, 2.8vw, 1.06rem);
line-height: 1.85;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.cinematic-story p.expanded { display: block; overflow: visible; }
.cinematic-story button {
margin-top: 4px;
padding: 4px 0;
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
background: transparent;
color: #b83bff;
font-size: .95rem;
font-weight: 800;
}
.cinematic-actions {
margin-top: 28px;
display: grid;
grid-template-columns: 110px 110px minmax(260px, 1fr);
align-items: center;
gap: 14px;
direction: ltr;
}
.cinematic-secondary-action {
min-height: 78px;
display: grid;
place-items: center;
align-content: center;
gap: 7px;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .88);
}
.cinematic-secondary-action span { font-size: .78rem; }
.cinematic-watch-button {
height: 64px;
padding: 0 34px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
border: 0;
border-radius: 32px;
color: #fff;
background: linear-gradient(100deg, #b521ff 0%, #7440ff 47%, #159eff 100%);
box-shadow: 0 12px 32px rgba(82, 63, 255, .36), 0 0 18px rgba(46, 145, 255, .18);
font-size: 1.2rem;
font-weight: 850;
direction: rtl;
}
.cinematic-tabs {
margin-top: 26px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cinematic-tabs button {
position: relative;
min-height: 58px;
padding: 0 8px;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .57);
font-size: .96rem;
font-weight: 700;
}
.cinematic-tabs button.active { color: #fff; font-weight: 900; }
.cinematic-tabs button.active::after {
content: "";
position: absolute;
right: 22%;
bottom: -1px;
left: 22%;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #c02cff, #1da0ff);
}
.cinematic-tab-content {
padding: 24px 0 30px;
text-align: right;
}
.cinematic-tab-content .nova-content-section { margin: 0; }
.cinematic-tab-content .nova-section-head { margin-bottom: 14px; }
.cinematic-tab-content .nova-section-head h2 { font-size: 1rem; }
.cinematic-genre-pills { margin-bottom: 24px; }
.cinematic-cast-section { margin-top: 24px !important; }
.cinematic-tab-content .episode-panel > .nova-section-head {
display: none;
}
.cinematic-tab-content .nova-season-tabs {
margin-bottom: 14px;
}
.cinematic-tab-content .nova-search-bar {
margin-bottom: 14px;
}
.cinematic-tab-content .nova-episode-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.cinematic-tab-content .nova-episode-card {
min-height: 150px;
display: grid;
grid-template-columns: 128px minmax(0, 1fr) 44px;
grid-template-areas: "thumb details actions";
align-items: stretch;
direction: ltr;
border: 1px solid rgba(128, 149, 185, .25);
border-radius: 17px;
background: linear-gradient(90deg, rgba(5, 10, 19, .98), rgba(3, 7, 15, .96));
box-shadow: none;
}
.cinematic-tab-content .nova-episode-card:hover { transform: none; }
.cinematic-tab-content .ep-thumb { grid-area: thumb; aspect-ratio: auto; min-height: 150px; margin: 12px; border-radius: 10px; overflow: hidden; }
.cinematic-tab-content .ep-overlay { opacity: 1; background: rgba(0, 0, 0, .22); }
.cinematic-tab-content .play-ring { width: 48px; height: 48px; background: rgba(0, 0, 0, .56); border: 1px solid rgba(255,255,255,.5); }
.cinematic-tab-content .ep-details { grid-area: details; min-width: 0; padding: 20px 10px; direction: rtl; text-align: right; }
.cinematic-tab-content .ep-header { margin: 0; }
.cinematic-tab-content .ep-header > div:first-child { min-width: 0; display: grid; gap: 5px; }
.cinematic-tab-content .ep-header small { color: rgba(255,255,255,.52); font-size: .72rem; }
.cinematic-tab-content .ep-header strong { overflow: hidden; color: #fff; font-size: 1.06rem; text-overflow: ellipsis; white-space: nowrap; }
.cinematic-tab-content .ep-details p { margin: 12px 0 0; overflow: hidden; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cinematic-tab-content .ep-badges { display: none; }
.cinematic-tab-content .ep-card-actions { grid-area: actions; padding: 20px 7px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 19px; color: rgba(255,255,255,.7); }
@media (max-width: 680px) {
.cinematic-details-hero { height: clamp(510px, 54dvh, 690px); }
.cinematic-details-content { padding: clamp(455px, 49dvh, 610px) 16px 0; }
.cinematic-title { font-size: clamp(2.65rem, 12.6vw, 4.7rem); }
.cinematic-meta { font-size: .76rem; }
.cinematic-meta > * { padding-inline: 9px; }
.cinematic-ranking span { min-height: 38px; padding-inline: 11px; font-size: .72rem; }
.cinematic-story { margin-top: 22px; }
.cinematic-actions { grid-template-columns: 74px 74px minmax(0, 1fr); gap: 8px; }
.cinematic-secondary-action { min-height: 68px; }
.cinematic-secondary-action span { font-size: .7rem; }
.cinematic-watch-button { height: 58px; padding-inline: 20px; font-size: 1.04rem; }
.cinematic-tabs { margin-top: 18px; }
.cinematic-tabs button { min-height: 52px; font-size: .84rem; }
.cinematic-tab-content { padding-top: 18px; }
.cinematic-tab-content .nova-search-bar { display: grid; gap: 10px; }
.cinematic-tab-content .search-solid-input { width: 100%; }
.cinematic-tab-content .nova-episode-card { min-height: 134px; grid-template-columns: 104px minmax(0, 1fr) 38px; }
.cinematic-tab-content .ep-thumb { min-height: 110px; margin: 11px; }
.cinematic-tab-content .ep-details { padding: 16px 6px; }
.cinematic-tab-content .ep-header strong { font-size: .94rem; }
.cinematic-tab-content .ep-details p { margin-top: 8px; font-size: .7rem; }
.cinematic-tab-content .ep-card-actions { padding-inline: 4px; }
}
@media (min-width: 900px) {
.cinematic-details-backdrop { object-position: center 22%; }
.cinematic-details-content { padding-inline: 54px; }
}
/* =========================================================
Reference details layout — desktop + Android (2026-07)
Keeps the existing details header/topbar untouched.
========================================================= */
.cinematic-details-page {
--details-panel: rgba(2, 5, 11, .90);
--details-panel-soft: rgba(7, 10, 17, .88);
--details-line: rgba(151, 165, 190, .28);
--details-muted: rgba(255, 255, 255, .62);
--details-gradient: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
position: relative;
min-height: 100dvh;
padding-bottom: calc(82px + var(--safe-bottom, 0px));
overflow: hidden;
background: #000;
}
.cinematic-details-hero {
position: relative;
z-index: 0;
width: 100%;
height: clamp(330px, 38vw, 450px);
overflow: hidden;
background: #02040a;
}
.cinematic-details-backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
filter: saturate(1.03) contrast(1.04);
}
.cinematic-details-shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .08) 52%, rgba(0, 0, 0, .88) 100%),
linear-gradient(90deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .88) 25%, rgba(0, 0, 0, .42) 52%, rgba(0, 0, 0, .08) 78%, rgba(0, 0, 0, .18) 100%);
}
.cinematic-hero-copy {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: clamp(34px, 4vw, 64px);
width: min(46vw, 510px);
padding-top: clamp(48px, 6vh, 78px);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
direction: rtl;
text-align: right;
}
.cinematic-eyebrow {
justify-content: flex-start;
gap: 9px;
color: rgba(255, 255, 255, .92);
font-size: clamp(.76rem, 1.05vw, .94rem);
}
.cinematic-eyebrow span {
width: 9px;
height: 9px;
border-radius: 1px;
}
.cinematic-title {
margin: 10px 0 13px;
max-width: 100%;
color: #fff;
font-size: clamp(2.7rem, 5.2vw, 5rem);
line-height: .98;
font-weight: 950;
letter-spacing: -.045em;
text-align: right;
text-shadow: 0 8px 28px rgba(0, 0, 0, .9);
}
.cinematic-meta {
justify-content: flex-start;
gap: 8px;
font-size: .78rem;
}
.cinematic-meta > * {
min-height: 29px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 5px;
color: rgba(255, 255, 255, .86);
background: rgba(0, 0, 0, .23);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.cinematic-meta > *:first-child {
border-inline-start: 1px solid rgba(255, 255, 255, .35);
}
.cinematic-age {
margin: 0;
min-height: 29px !important;
padding-inline: 12px !important;
border: 1px solid rgba(255, 255, 255, .35) !important;
}
.cinematic-ranking {
margin-top: 10px;
justify-content: flex-start;
gap: 8px;
}
.cinematic-ranking span {
min-height: 31px;
padding: 0 12px;
border-radius: 5px;
background: rgba(0, 0, 0, .28);
font-size: .75rem;
}
.cinematic-ranking span:first-child {
color: #fff;
}
.cinematic-ranking span:last-child {
border-color: transparent;
background:
linear-gradient(#05070d, #05070d) padding-box,
linear-gradient(100deg, #c000ff, #139cff) border-box;
border: 1px solid transparent;
color: #d950ff;
}
.cinematic-actions {
width: 100%;
margin-top: 22px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
direction: ltr;
}
.cinematic-watch-button {
width: clamp(205px, 21vw, 245px);
height: 55px;
flex: 0 0 auto;
border-radius: 12px;
background: var(--details-gradient);
box-shadow: 0 12px 30px rgba(85, 48, 255, .32);
font-size: 1rem;
}
.cinematic-secondary-action {
width: 58px;
min-height: 70px;
padding: 0;
gap: 5px;
direction: rtl;
}
.cinematic-secondary-action > .oscar-icon {
width: 48px;
height: 48px;
padding: 11px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .50);
border-radius: 50%;
background: rgba(0, 0, 0, .25);
}
.cinematic-secondary-action span {
font-size: .68rem;
color: rgba(255, 255, 255, .82);
}
.cinematic-secondary-action.active > .oscar-icon {
border-color: rgba(155,77,255,.72);
color: #fff;
background: linear-gradient(135deg, rgba(240,74,216,.28), rgba(155,77,255,.30) 52%, rgba(20,215,255,.22));
box-shadow: 0 0 0 1px rgba(155,77,255,.12), 0 8px 22px rgba(83,43,170,.18);
}
.cinematic-secondary-action.active span {
color: rgba(255,255,255,.96);
font-weight: 800;
}
.cinematic-details-content {
position: relative;
z-index: 3;
width: min(100% - 64px, 1080px);
margin: 0 auto;
padding: 0 0 34px;
text-align: right;
box-sizing: border-box;
}
.cinematic-tabs {
margin: 0;
min-height: 52px;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cinematic-tabs button {
min-height: 52px;
font-size: .93rem;
}
.cinematic-tabs button.active::after {
right: 30%;
left: 30%;
height: 3px;
}
.cinematic-desktop-content {
display: block;
padding-top: 10px;
}
.cinematic-mobile-content {
display: none;
}
.reference-desktop-grid {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: 16px;
align-items: start;
direction: ltr;
}
.reference-primary-column,
.reference-side-column,
.reference-wide-details-grid {
min-width: 0;
direction: rtl;
}
.reference-side-column {
display: grid;
gap: 12px;
}
.reference-wide-details-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
gap: 16px;
align-items: start;
}
.reference-panel {
min-width: 0;
padding: 13px 14px;
border: 1px solid var(--details-line);
border-radius: 12px;
background: linear-gradient(180deg, rgba(3, 6, 12, .96), rgba(0, 2, 7, .98));
box-shadow: 0 15px 45px rgba(0, 0, 0, .18);
}
.reference-panel-heading {
min-height: 25px;
margin-bottom: 9px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 11px;
}
.reference-panel-heading h2 {
margin: 0;
color: #fff;
font-size: .98rem;
font-weight: 900;
}
.reference-panel-heading span {
color: #149cff;
font-size: .72rem;
font-weight: 800;
}
.reference-season-tabs {
margin: -1px 0 9px;
padding-bottom: 4px;
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.reference-season-tabs::-webkit-scrollbar {
display: none;
}
.reference-season-tabs button {
min-height: 28px;
padding: 0 10px;
flex: 0 0 auto;
border: 1px solid rgba(133, 151, 181, .28);
border-radius: 6px;
background: rgba(9, 13, 22, .78);
color: rgba(255, 255, 255, .66);
font-size: .68rem;
}
.reference-season-tabs button.active {
border-color: transparent;
background:
linear-gradient(#070a11, #070a11) padding-box,
linear-gradient(100deg, #c000ff, #139cff) border-box;
color: #fff;
}
.reference-episode-list {
display: grid;
gap: 8px;
}
.reference-episode-card {
min-height: 65px;
display: grid;
grid-template-columns: 108px minmax(0, 1fr) 58px 36px;
align-items: stretch;
gap: 0;
overflow: hidden;
border: 1px solid rgba(137, 153, 180, .20);
border-radius: 9px;
background: rgba(1, 4, 9, .92);
direction: ltr;
cursor: pointer;
}
.reference-episode-card:hover {
border-color: rgba(91, 119, 188, .62);
background: rgba(5, 8, 16, .98);
}
.reference-episode-thumb {
position: relative;
min-height: 65px;
overflow: hidden;
}
.reference-episode-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reference-episode-thumb::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .12);
}
.reference-play-ring {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 39px;
height: 39px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .85);
border-radius: 50%;
background: rgba(0, 0, 0, .58);
color: #fff;
transform: translate(-50%, -50%);
}
.reference-episode-copy {
min-width: 0;
padding: 10px 12px;
align-self: center;
direction: rtl;
text-align: right;
}
.reference-episode-copy strong {
display: block;
overflow: hidden;
color: #fff;
font-size: .82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.reference-episode-copy p {
margin: 4px 0 0;
overflow: hidden;
color: rgba(255, 255, 255, .55);
font-size: .62rem;
line-height: 1.55;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.reference-episode-duration {
align-self: center;
display: grid;
gap: 2px;
direction: rtl;
text-align: center;
color: rgba(255, 255, 255, .75);
font-size: .6rem;
}
.reference-episode-duration small {
color: rgba(255, 255, 255, .58);
font-size: .58rem;
}
.reference-download-icon {
display: grid;
place-items: center;
border-left: 1px solid rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .78);
}
.reference-show-all {
margin-top: 10px;
padding: 2px 0;
display: inline-flex;
align-items: center;
gap: 5px;
border: 0;
background: transparent;
color: #bd36ff;
font-size: .74rem;
font-weight: 850;
}
.reference-related-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
}
.reference-related-card {
min-width: 0;
display: grid;
grid-template-rows: auto auto auto;
gap: 4px;
border: 0;
background: transparent;
color: #fff;
cursor: pointer;
}
.reference-related-card img {
width: 100%;
aspect-ratio: 2 / 2.7;
object-fit: cover;
border: 1px solid rgba(126, 145, 178, .24);
border-radius: 8px;
background: #090d16;
}
.reference-related-card strong {
overflow: hidden;
color: #fff;
font-size: .68rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.reference-related-card small {
display: flex;
align-items: center;
gap: 3px;
color: #f3b700;
font-size: .58rem;
direction: ltr;
justify-self: end;
}
.reference-info-grid {
margin: 0;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.reference-info-grid > div {
min-width: 0;
padding: 4px 8px 9px;
border-inline-start: 1px solid rgba(255, 255, 255, .07);
text-align: center;
}
.reference-info-grid > div:first-child {
border-inline-start: 0;
}
.reference-info-grid dt {
color: rgba(255, 255, 255, .57);
font-size: .61rem;
}
.reference-info-grid dd {
margin: 3px 0 0;
overflow: hidden;
color: #fff;
font-size: .66rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.reference-details-story {
margin: 9px 0 0;
color: rgba(255, 255, 255, .67);
font-size: .68rem;
line-height: 1.7;
}
.reference-cast-section {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.reference-cast-section h3 {
margin: 0 0 11px;
font-size: .92rem;
}
.reference-details-sources,
.reference-watch-panel .nova-content-section {
margin-top: 18px;
}
.reference-watch-panel {
padding: 15px;
}
.reference-watch-panel > .nova-content-section,
.reference-details-sources > .nova-content-section {
margin-inline: 0;
}
@media (max-width: 820px) {
.cinematic-details-page {
padding-bottom: calc(78px + var(--safe-bottom, 0px));
}
.cinematic-details-hero {
height: auto;
min-height: 450px;
overflow: visible;
}
.cinematic-details-backdrop {
height: 270px;
object-position: center top;
}
.cinematic-details-shade {
height: 355px;
background:
linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .06) 43%, rgba(0, 0, 0, .93) 78%, #000 100%),
linear-gradient(90deg, rgba(0, 0, 0, .16), transparent 45%, rgba(0, 0, 0, .12));
}
.cinematic-hero-copy {
position: relative;
top: auto;
bottom: auto;
left: auto;
width: 100%;
min-height: 450px;
padding: 230px 15px 18px;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.cinematic-eyebrow,
.cinematic-meta,
.cinematic-ranking {
justify-content: center;
}
.cinematic-title {
margin: 8px 0 12px;
font-size: clamp(2rem, 10vw, 3.25rem);
text-align: center;
}
.cinematic-meta {
gap: 6px;
}
.cinematic-meta > *,
.cinematic-age {
min-height: 28px !important;
padding-inline: 10px !important;
font-size: .7rem;
}
.cinematic-ranking {
margin-top: 9px;
}
.cinematic-ranking span {
min-height: 30px;
padding-inline: 10px;
font-size: .68rem;
}
.cinematic-actions {
margin-top: 15px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
direction: ltr;
}
.cinematic-watch-button {
width: 100%;
height: 48px;
grid-column: 1 / -1;
grid-row: 1;
border-radius: 7px;
font-size: .94rem;
}
.cinematic-secondary-action {
width: 100%;
min-height: 43px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid rgba(255, 255, 255, .26);
border-radius: 7px;
background: rgba(0, 0, 0, .26);
}
.cinematic-secondary-action > .oscar-icon {
width: 22px;
height: 22px;
padding: 0;
border: 0;
background: transparent;
}
.cinematic-secondary-action span {
font-size: .73rem;
}
.cinematic-details-content {
width: 100%;
padding: 0 14px 24px;
}
.cinematic-tabs {
position: relative;
z-index: 5;
}
.cinematic-tabs button {
min-height: 48px;
font-size: .78rem;
}
.cinematic-desktop-content {
display: none;
}
.cinematic-mobile-content {
display: block;
padding-top: 10px;
}
.reference-panel {
padding: 10px 0 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.reference-panel-heading {
padding-inline: 2px;
}
.reference-episode-card {
min-height: 66px;
grid-template-columns: 96px minmax(0, 1fr) 49px 31px;
border-radius: 8px;
}
.reference-episode-thumb {
min-height: 66px;
}
.reference-play-ring {
width: 38px;
height: 38px;
}
.reference-episode-copy {
padding: 8px 9px;
}
.reference-episode-copy strong {
font-size: .76rem;
}
.reference-episode-copy p {
font-size: .58rem;
-webkit-line-clamp: 2;
}
.reference-episode-duration {
font-size: .56rem;
}
.reference-episode-duration small {
font-size: .54rem;
}
.reference-related-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 9px;
}
.reference-related-card strong {
font-size: .72rem;
}
.reference-info-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 9px;
overflow: hidden;
}
.reference-info-grid > div {
padding: 10px 8px;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.reference-info-grid > div:nth-last-child(-n+2) {
border-bottom: 0;
}
.reference-details-story {
margin-top: 13px;
font-size: .76rem;
line-height: 1.75;
}
}
@media (max-width: 390px) {
.cinematic-details-backdrop {
height: 235px;
}
.cinematic-details-shade {
height: 315px;
}
.cinematic-hero-copy {
min-height: 425px;
padding-top: 202px;
}
.cinematic-title {
font-size: 2rem;
}
.cinematic-meta > *,
.cinematic-age {
min-height: 26px !important;
padding-inline: 8px !important;
font-size: .64rem;
}
.cinematic-ranking span {
padding-inline: 8px;
font-size: .62rem;
}
.reference-episode-card {
grid-template-columns: 88px minmax(0, 1fr) 30px;
}
.reference-episode-duration {
display: none;
}
.reference-episode-copy p {
-webkit-line-clamp: 1;
}
}
/* =========================================================
Full-screen details distribution + taller Android hero
========================================================= */
@media (min-width: 821px) {
.cinematic-details-page {
overflow-x: hidden;
}
.cinematic-details-hero {
height: clamp(440px, 43vw, 640px);
min-height: 440px;
}
.cinematic-details-backdrop {
object-position: center 24%;
}
.cinematic-details-shade {
background:
linear-gradient(180deg, rgba(0, 0, 0, .03) 0%, rgba(0, 0, 0, .06) 58%, rgba(0, 0, 0, .86) 100%),
linear-gradient(90deg, rgba(0, 0, 0, .99) 0%, rgba(0, 0, 0, .92) 20%, rgba(0, 0, 0, .58) 43%, rgba(0, 0, 0, .10) 72%, rgba(0, 0, 0, .13) 100%);
}
.cinematic-hero-copy {
left: clamp(42px, 5vw, 96px);
width: min(39vw, 620px);
padding-top: clamp(62px, 7vh, 102px);
}
.cinematic-title {
font-size: clamp(3.2rem, 5.5vw, 5.8rem);
}
.cinematic-details-content {
width: calc(100% - clamp(42px, 6vw, 104px));
max-width: 1720px;
margin-inline: auto;
padding-bottom: 48px;
}
.cinematic-tabs {
min-height: 58px;
}
.cinematic-tabs button {
min-height: 58px;
font-size: 1rem;
}
.cinematic-desktop-content {
padding-top: clamp(14px, 1.7vw, 26px);
}
.reference-desktop-grid {
grid-template-columns: minmax(560px, 1.22fr) minmax(430px, .78fr);
gap: clamp(18px, 2vw, 32px);
}
.reference-wide-details-grid {
grid-template-columns: minmax(620px, 1.28fr) minmax(420px, .72fr);
gap: clamp(18px, 2vw, 32px);
}
.reference-side-column {
gap: clamp(15px, 1.5vw, 24px);
}
.reference-panel {
padding: clamp(17px, 1.6vw, 26px);
border-radius: 15px;
}
.reference-panel-heading {
min-height: 31px;
margin-bottom: 13px;
}
.reference-panel-heading h2 {
font-size: clamp(1rem, 1.25vw, 1.2rem);
}
.reference-episode-list {
gap: 10px;
}
.reference-episode-card {
min-height: 82px;
grid-template-columns: clamp(120px, 10vw, 160px) minmax(0, 1fr) 70px 44px;
border-radius: 11px;
}
.reference-episode-thumb {
min-height: 82px;
}
.reference-episode-copy {
padding: 13px 16px;
}
.reference-episode-copy strong {
font-size: .93rem;
}
.reference-episode-copy p {
font-size: .7rem;
}
.reference-related-strip {
gap: 12px;
}
.reference-related-card strong {
font-size: .76rem;
}
.reference-info-grid dt {
font-size: .68rem;
}
.reference-info-grid dd {
font-size: .76rem;
}
.reference-details-story {
font-size: .78rem;
line-height: 1.82;
}
}
@media (min-width: 1500px) {
.reference-desktop-grid {
grid-template-columns: minmax(720px, 1.32fr) minmax(500px, .68fr);
}
.reference-related-strip {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.cinematic-details-hero {
min-height: clamp(700px, 88dvh, 860px);
}
.cinematic-details-backdrop {
height: clamp(500px, 64dvh, 620px);
object-position: center top;
}
.cinematic-details-shade {
height: clamp(620px, 78dvh, 760px);
background:
linear-gradient(180deg, rgba(0, 0, 0, .01) 0%, rgba(0, 0, 0, .04) 52%, rgba(0, 0, 0, .86) 76%, #000 100%),
linear-gradient(90deg, rgba(0, 0, 0, .10), transparent 50%, rgba(0, 0, 0, .08));
}
.cinematic-hero-copy {
min-height: clamp(700px, 88dvh, 860px);
padding: clamp(455px, 59dvh, 565px) 15px 20px;
}
}
@media (max-width: 390px) {
.cinematic-details-hero {
min-height: 680px;
}
.cinematic-details-backdrop {
height: 470px;
}
.cinematic-details-shade {
height: 590px;
}
.cinematic-hero-copy {
min-height: 680px;
padding-top: 425px;
}
}
/* =========================================================
Android hero correction — compact cinematic overlap
Final override: eliminates the empty gap under the artwork.
========================================================= */
@media (max-width: 820px) {
.cinematic-details-page {
background: #000000 !important;
}
.cinematic-details-hero {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
background: #000000 !important;
}
.cinematic-details-backdrop {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: clamp(450px, 66dvh, 660px) !important;
min-height: 450px !important;
object-fit: cover !important;
object-position: center 18% !important;
background: #000000 !important;
}
.cinematic-details-shade {
position: absolute !important;
z-index: 1 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
bottom: auto !important;
width: 100% !important;
height: clamp(450px, 66dvh, 660px) !important;
background:
linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.04) 44%, rgba(0,0,0,.38) 69%, rgba(0,0,0,.92) 91%, #000 100%),
linear-gradient(90deg, rgba(0,0,0,.14), transparent 46%, rgba(0,0,0,.12)) !important;
pointer-events: none;
}
.cinematic-hero-copy {
position: relative !important;
z-index: 2 !important;
inset: auto !important;
width: 100% !important;
min-height: 0 !important;
margin: clamp(-190px, -21dvh, -138px) 0 0 !important;
padding: clamp(150px, 18dvh, 188px) 16px 20px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 37%, #000 74%) !important;
box-sizing: border-box !important;
}
.cinematic-eyebrow {
margin: 0 0 6px !important;
font-size: .72rem !important;
}
.cinematic-title {
width: min(100%, 680px) !important;
margin: 5px auto 12px !important;
font-size: clamp(1.85rem, 8.4vw, 2.85rem) !important;
line-height: 1.05 !important;
letter-spacing: -.025em !important;
overflow-wrap: anywhere !important;
text-wrap: balance;
}
.cinematic-meta {
gap: 6px !important;
}
.cinematic-meta > *,
.cinematic-age {
min-height: 27px !important;
padding-inline: 9px !important;
font-size: .67rem !important;
}
.cinematic-ranking {
margin-top: 8px !important;
}
.cinematic-ranking span {
min-height: 31px !important;
padding-inline: 10px !important;
font-size: .66rem !important;
background: #000000 !important;
}
.cinematic-actions {
width: 100% !important;
margin-top: 15px !important;
}
.cinematic-details-content {
position: relative !important;
z-index: 3 !important;
margin-top: 0 !important;
padding-top: 0 !important;
background: #000000 !important;
}
}
@media (max-width: 390px) {
.cinematic-details-backdrop,
.cinematic-details-shade {
height: clamp(430px, 64dvh, 570px) !important;
min-height: 430px !important;
}
.cinematic-hero-copy {
margin-top: -155px !important;
padding-top: 128px !important;
}
.cinematic-title {
font-size: clamp(1.68rem, 8.1vw, 2.25rem) !important;
}
}
/* Nova Aperture replaces the old large detail skeleton without changing the details header or content layout. */
.details-motion-loading {
min-height: 100dvh;
padding-top: calc(72px + var(--safe-top, env(safe-area-inset-top, 0px)));
box-sizing: border-box;
background: transparent !important;
overflow: hidden;
}
.details-motion-loading .nova-motion-loader {
min-height: 100dvh;
}
/* ==========================================================
Channel details — dedicated Windows / Android experience
========================================================== */
.nova-channel-details {
min-height: 100dvh;
padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 24px);
background: #000;
color: #fff;
}
.channel-detail-hero {
position: relative;
min-height: clamp(560px, 72dvh, 820px);
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.08);
background: #000;
}
.channel-detail-backdrop,
.channel-detail-backdrop img {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
}
.channel-detail-backdrop img,
img.channel-detail-backdrop {
object-fit: cover !important;
object-position: center 28% !important;
filter: saturate(.92) contrast(1.05) brightness(.72);
}
.channel-detail-shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.52) 48%, #000 100%),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12) 48%, #000 100%);
}
.channel-detail-hero-inner {
position: relative;
z-index: 4;
width: min(100% - clamp(32px, 8vw, 120px), 1560px);
min-height: inherit;
margin: 0 auto;
padding: clamp(112px, 14vh, 150px) 0 clamp(48px, 7vh, 78px);
display: grid;
grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.15fr);
align-items: end;
gap: clamp(38px, 6vw, 92px);
direction: ltr;
}
.channel-detail-identity,
.channel-detail-copy {
direction: rtl;
}
.channel-detail-identity {
display: grid;
place-items: end start;
}
.channel-detail-logo-shell {
position: relative;
width: min(34vw, 370px);
aspect-ratio: 1.3 / 1;
padding: clamp(18px, 2.4vw, 30px);
display: grid;
place-items: center;
border: 1px solid transparent;
border-radius: 26px;
background:
linear-gradient(#000,#000) padding-box,
linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 48px rgba(103,71,255,.14);
}
.channel-detail-logo,
.channel-detail-logo img {
width: 100% !important;
height: 100% !important;
}
.channel-detail-logo img,
img.channel-detail-logo {
object-fit: contain !important;
}
.channel-detail-live-mark {
position: absolute;
right: 16px;
bottom: 14px;
height: 31px;
padding: 0 12px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 8px;
background: #000;
color: #fff;
font-size: .68rem;
font-weight: 950;
letter-spacing: .08em;
}
.channel-detail-live-mark i,
.channel-status-heading span i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #F04AD8;
box-shadow: 0 0 0 4px rgba(240,74,216,.14), 0 0 16px rgba(240,74,216,.7);
animation: channel-live-pulse 1.7s ease-in-out infinite;
}
.channel-detail-copy {
align-self: end;
max-width: 720px;
}
.channel-detail-eyebrow {
display: inline-flex;
margin-bottom: 14px;
color: #14D7FF;
font-size: .75rem;
font-weight: 950;
letter-spacing: .12em;
}
.channel-detail-copy h1 {
margin: 0;
max-width: 100%;
color: #fff;
font-size: clamp(2.5rem, 5.4vw, 5.2rem);
line-height: .98;
font-weight: 1000;
letter-spacing: -.045em;
text-wrap: balance;
}
.channel-detail-meta {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.channel-detail-meta span {
min-height: 31px;
padding: 0 12px;
display: inline-flex;
align-items: center;
border: 1px solid rgba(255,255,255,.18);
border-radius: 8px;
background: #000;
color: rgba(255,255,255,.78);
font-size: .72rem;
font-weight: 800;
}
.channel-detail-copy p {
max-width: 680px;
margin: 18px 0 0;
color: rgba(255,255,255,.68);
font-size: clamp(.84rem,1.25vw,1rem);
line-height: 1.8;
}
.channel-detail-actions {
margin-top: 26px;
display: flex;
gap: 12px;
}
.channel-detail-actions button {
min-height: 52px;
padding: 0 25px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 10px;
color: #fff;
font: inherit;
font-weight: 950;
}
.channel-detail-play {
min-width: 220px;
border: 0;
background: linear-gradient(100deg,#c728ff,#7650ff,#16a8ff);
box-shadow: 0 15px 38px rgba(99,74,255,.25);
}
.channel-detail-save {
border: 1px solid rgba(255,255,255,.2);
background: #000;
}
.channel-detail-save.active {
border-color: transparent;
background: linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
}
.channel-detail-body {
width: min(100% - clamp(28px, 7vw, 104px), 1560px);
margin: 0 auto;
padding: 32px 0 10px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
gap: 18px;
}
.channel-detail-status-card,
.channel-detail-source-card,
.channel-detail-related {
min-width: 0;
border: 1px solid rgba(255,255,255,.13);
border-radius: 18px;
background: #000;
}
.channel-detail-status-card {
padding: 22px;
}
.channel-status-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding-bottom: 17px;
border-bottom: 1px solid rgba(255,255,255,.09);
}
.channel-status-heading span {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 950;
}
.channel-status-heading small {
color: rgba(255,255,255,.5);
}
.channel-detail-facts {
padding-top: 20px;
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 14px;
}
.channel-detail-facts > div {
min-width: 0;
display: grid;
justify-items: center;
gap: 6px;
padding: 12px 8px;
border-inline-start: 1px solid rgba(255,255,255,.08);
text-align: center;
}
.channel-detail-facts > div:last-child { border-inline-start: 0; }
.channel-detail-facts .oscar-icon { color: #9B4DFF; }
.channel-detail-facts strong { font-size: .72rem; }
.channel-detail-facts span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.58); font-size: .68rem; }
.channel-detail-source-card {
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 18px;
}
.channel-detail-source-card > div {
display: flex;
align-items: center;
gap: 12px;
}
.channel-source-icon {
width: 46px;
height: 46px;
flex: 0 0 auto;
display: grid;
place-items: center;
border: 1px solid transparent;
border-radius: 12px;
background: linear-gradient(#000,#000) padding-box,linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
color: #14D7FF;
}
.channel-detail-source-card strong,
.channel-detail-source-card small { display: block; }
.channel-detail-source-card strong { font-size: .88rem; }
.channel-detail-source-card small { margin-top: 5px; color: rgba(255,255,255,.5); font-size: .7rem; }
.channel-detail-source-card > button {
min-height: 45px;
border: 1px solid rgba(255,255,255,.17);
border-radius: 10px;
background: #000;
color: #fff;
font: inherit;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.channel-detail-related {
grid-column: 1 / -1;
padding: 20px;
}
.channel-detail-related .nova-related-section { margin: 0; }
@keyframes channel-live-pulse {
0%,100% { opacity: .6; transform: scale(.86); }
50% { opacity: 1; transform: scale(1.08); }
}
@media (max-width: 780px) {
.nova-channel-details {
padding-bottom: calc(var(--bottom-nav-h, 72px) + var(--safe-bottom, 0px) + 12px);
}
.channel-detail-hero {
min-height: auto;
overflow: visible;
border-bottom: 0;
}
.channel-detail-backdrop,
.channel-detail-backdrop img {
height: clamp(330px, 53dvh, 540px) !important;
}
.channel-detail-backdrop img,
img.channel-detail-backdrop {
object-position: center 25% !important;
filter: saturate(.95) contrast(1.04) brightness(.78);
}
.channel-detail-shade {
height: clamp(330px, 53dvh, 540px);
bottom: auto;
background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16) 58%,#000 100%);
}
.channel-detail-hero-inner {
width: 100%;
min-height: 0;
padding: clamp(270px, 45dvh, 440px) 14px 18px;
display: block;
}
.channel-detail-identity {
display: none;
}
.channel-detail-copy {
max-width: none;
text-align: center;
}
.channel-detail-eyebrow {
margin-bottom: 10px;
font-size: .66rem;
}
.channel-detail-copy h1 {
font-size: clamp(2rem, 9vw, 3.2rem);
line-height: 1.03;
}
.channel-detail-meta {
justify-content: center;
margin-top: 14px;
}
.channel-detail-meta span {
min-height: 29px;
padding-inline: 10px;
font-size: .65rem;
}
.channel-detail-copy p {
margin: 14px auto 0;
max-width: 560px;
font-size: .78rem;
line-height: 1.7;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.channel-detail-actions {
margin-top: 18px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.channel-detail-actions button {
min-width: 0;
min-height: 48px;
padding-inline: 10px;
font-size: .78rem;
}
.channel-detail-play { grid-column: 1 / -1; }
.channel-detail-body {
width: calc(100% - 24px);
padding-top: 10px;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.channel-detail-status-card,
.channel-detail-source-card,
.channel-detail-related {
border-radius: 14px;
}
.channel-detail-status-card { padding: 15px; }
.channel-status-heading { align-items: flex-start; padding-bottom: 13px; }
.channel-status-heading small { max-width: 46%; text-align: left; font-size: .62rem; }
.channel-detail-facts {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 0;
padding-top: 12px;
}
.channel-detail-facts > div {
min-height: 86px;
border-inline-start: 0;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.channel-detail-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.channel-detail-facts > div:nth-child(odd) { border-inline-end: 1px solid rgba(255,255,255,.08); }
.channel-detail-source-card { padding: 15px; }
.channel-detail-related { padding: 14px; }
.nova-channel-details .nova-details-topbar {
top: calc(var(--safe-top, 0px) + 12px);
left: 12px;
right: 12px;
}
}
/* =========================================================
FINAL MOBILE DETAILS REPAIR
Keeps the artwork, floating actions and copy in one coherent hero without
the opaque toolbar slab or the empty vertical gap introduced by older rules.
========================================================= */
@media (max-width: 820px) {
.cinematic-details-page .nova-details-topbar {
position: absolute !important;
top: calc(var(--safe-top, 0px) + 10px) !important;
right: 12px !important;
left: 12px !important;
width: auto !important;
min-height: 44px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.cinematic-details-page .nova-details-topbar .nova-icon-btn {
width: 42px !important;
height: 42px !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 50% !important;
color: #fff !important;
background: rgba(0,0,0,.28) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
.cinematic-details-page .nova-topbar-actions { gap: 8px !important; }
.cinematic-details-hero {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
background: #000 !important;
}
.cinematic-details-backdrop {
position: relative !important;
width: 100% !important;
height: clamp(480px, 68dvh, 700px) !important;
min-height: 480px !important;
display: block !important;
object-fit: cover !important;
object-position: center 18% !important;
filter: saturate(1.02) contrast(1.04) brightness(.9) !important;
background: #000 !important;
}
.cinematic-details-shade {
position: absolute !important;
z-index: 1 !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: clamp(480px, 68dvh, 700px) !important;
pointer-events: none !important;
background:
linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.02) 36%, rgba(0,0,0,.20) 57%, rgba(0,0,0,.66) 76%, rgba(0,0,0,.94) 91%, #000 100%),
linear-gradient(90deg, rgba(0,0,0,.16), transparent 34%, transparent 66%, rgba(0,0,0,.14)) !important;
}
.cinematic-hero-copy {
position: relative !important;
z-index: 2 !important;
inset: auto !important;
width: 100% !important;
min-height: 0 !important;
margin: clamp(-176px, -19dvh, -132px) 0 0 !important;
padding: clamp(128px, 15dvh, 160px) 16px 22px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
box-sizing: border-box !important;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 32%, #000 76%) !important;
}
.cinematic-title {
width: min(100%, 640px) !important;
margin: 5px auto 11px !important;
font-size: clamp(1.82rem, 8.2vw, 2.8rem) !important;
line-height: 1.06 !important;
overflow-wrap: anywhere !important;
text-wrap: balance;
}
.cinematic-actions {
width: min(100%, 640px) !important;
margin-top: 16px !important;
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 9px !important;
direction: rtl !important;
}
.cinematic-watch-button {
grid-column: 1 / -1 !important;
width: 100% !important;
min-height: 52px !important;
height: 52px !important;
border-radius: 15px !important;
font-size: .93rem !important;
}
.cinematic-secondary-action {
min-height: 48px !important;
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 13px !important;
background: #000 !important;
}
.cinematic-details-content {
position: relative !important;
z-index: 3 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 14px calc(var(--bottom-nav-h,72px) + 22px) !important;
background: #000 !important;
box-sizing: border-box !important;
}
.cinematic-tabs { margin-top: 4px !important; }
}
@media (max-width: 390px) {
.cinematic-details-backdrop,
.cinematic-details-shade {
height: clamp(440px, 65dvh, 590px) !important;
min-height: 440px !important;
}
.cinematic-hero-copy {
margin-top: -148px !important;
padding-top: 116px !important;
}
}
/* =========================================================
ANDROID DETAILS HERO — FINAL STRUCTURAL FIX
- Styles the SafeImage output through a native wrapper, so CSS isolation
cannot collapse the artwork.
- Keeps the floating details actions fixed inside the Android safe area.
- Preserves the desktop layout and all existing interaction logic.
========================================================= */
.cinematic-details-backdrop-shell {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: #000;
}
.cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
.cinematic-details-backdrop-shell img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center 22%;
background: #000;
filter: saturate(1.03) contrast(1.04) brightness(.9);
}
@media (max-width: 820px) {
.cinematic-details-page {
position: relative !important;
overflow-x: hidden !important;
background: #000 !important;
}
.cinematic-details-page .nova-details-topbar {
position: fixed !important;
z-index: 1400 !important;
top: calc(var(--safe-top, 0px) + 8px) !important;
right: 12px !important;
left: 12px !important;
width: auto !important;
min-height: 46px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
pointer-events: none !important;
}
.cinematic-details-page .nova-details-topbar .nova-icon-btn {
width: 42px !important;
height: 42px !important;
flex: 0 0 42px !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 50% !important;
background: rgba(0,0,0,.38) !important;
color: #fff !important;
box-shadow: 0 8px 24px rgba(0,0,0,.34) !important;
backdrop-filter: blur(12px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
pointer-events: auto !important;
}
.cinematic-details-page .nova-topbar-actions {
display: flex !important;
align-items: center !important;
gap: 8px !important;
pointer-events: auto !important;
}
.cinematic-details-page .details-title-spacer {
flex: 1 1 auto !important;
min-width: 0 !important;
}
.cinematic-details-hero {
position: relative !important;
z-index: 0 !important;
width: 100% !important;
height: clamp(680px, 92dvh, 900px) !important;
min-height: 680px !important;
overflow: hidden !important;
background: #000 !important;
}
.cinematic-details-backdrop-shell {
position: absolute !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: clamp(540px, 72dvh, 760px) !important;
min-height: 540px !important;
overflow: hidden !important;
background: #000 !important;
}
.cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
.cinematic-details-backdrop-shell img {
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: center 18% !important;
filter: saturate(1.04) contrast(1.05) brightness(.9) !important;
}
.cinematic-details-shade {
position: absolute !important;
z-index: 1 !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
background:
linear-gradient(180deg,
rgba(0,0,0,.03) 0%,
rgba(0,0,0,.04) 35%,
rgba(0,0,0,.18) 52%,
rgba(0,0,0,.68) 72%,
rgba(0,0,0,.96) 88%,
#000 100%),
linear-gradient(90deg,
rgba(0,0,0,.16) 0%,
transparent 28%,
transparent 72%,
rgba(0,0,0,.14) 100%) !important;
}
.cinematic-hero-copy {
position: absolute !important;
z-index: 2 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
top: auto !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 170px 16px 24px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
box-sizing: border-box !important;
text-align: center !important;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.52) 28%, #000 78%) !important;
}
.cinematic-title {
width: min(100%, 640px) !important;
margin: 6px auto 11px !important;
font-size: clamp(1.9rem, 8.4vw, 2.9rem) !important;
line-height: 1.06 !important;
text-align: center !important;
overflow-wrap: anywhere !important;
}
.cinematic-eyebrow,
.cinematic-meta,
.cinematic-ranking {
justify-content: center !important;
}
.cinematic-actions {
width: min(100%, 640px) !important;
margin-top: 16px !important;
}
.cinematic-details-content {
position: relative !important;
z-index: 3 !important;
width: 100% !important;
margin: 0 !important;
padding-top: 0 !important;
background: #000 !important;
}
}
@media (max-width: 390px) {
.cinematic-details-hero {
height: clamp(640px, 90dvh, 820px) !important;
min-height: 640px !important;
}
.cinematic-details-backdrop-shell {
height: clamp(500px, 70dvh, 690px) !important;
min-height: 500px !important;
}
.cinematic-hero-copy {
padding-top: 150px !important;
}
}
/* =========================================================
COMMERCIAL DETAILS HEADER — FINAL FIXED LAYER
Applies to movies, series, episodes and live channels.
========================================================= */
.details-app .nova-details-topbar {
position: fixed !important;
z-index: 2200 !important;
top: calc(var(--safe-top, 0px) + 8px) !important;
right: clamp(12px, 2.2vw, 30px) !important;
left: clamp(12px, 2.2vw, 30px) !important;
width: auto !important;
min-height: 48px !important;
padding: 3px 6px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
pointer-events: none !important;
background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.34)) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
backdrop-filter: blur(14px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
}
.details-app .nova-details-topbar > strong {
min-width: 0 !important;
flex: 1 1 auto !important;
overflow: hidden !important;
color: #fff !important;
font-size: clamp(.82rem, 1.5vw, 1rem) !important;
font-weight: 900 !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.details-app .nova-details-topbar .details-title-spacer { flex: 1 1 auto !important; }
.details-app .nova-details-topbar .nova-icon-btn,
.details-app .nova-details-topbar .nova-topbar-actions { pointer-events: auto !important; }
.details-app .nova-details-topbar .nova-icon-btn {
width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(0,0,0,.52) !important;
}
@media (max-width: 640px) {
.details-app .nova-details-topbar {
top: calc(var(--safe-top, 0px) + 6px) !important;
right: 10px !important;
left: 10px !important;
min-height: 46px !important;
padding: 2px 5px !important;
}
.details-app .nova-details-topbar .nova-icon-btn { width: 39px !important; height: 39px !important; flex-basis: 39px !important; }
}
/* Current public-catalog rich metadata: real Nova2/TMDB promotional videos. */
.reference-promo-section {
margin-top: 1.35rem;
}
.reference-promo-section h3 {
margin: 0 0 .75rem;
}
.reference-promo-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 30vw);
gap: .85rem;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
padding-bottom: .35rem;
}
.reference-promo-card {
appearance: none;
border: 0;
background: transparent;
color: inherit;
text-align: start;
padding: 0;
cursor: pointer;
min-width: 0;
}
.reference-promo-card:disabled {
cursor: default;
opacity: .7;
}
.reference-promo-art {
position: relative;
display: block;
overflow: hidden;
border-radius: 14px;
aspect-ratio: 16 / 9;
background: rgba(255, 255, 255, .06);
}
.reference-promo-art img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reference-promo-play {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
width: 46px;
height: 46px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(0, 0, 0, .72);
backdrop-filter: blur(8px);
}
.reference-promo-card strong,
.reference-promo-card small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reference-promo-card strong {
margin-top: .55rem;
font-size: .94rem;
}
.reference-promo-card small {
margin-top: .2rem;
opacity: .7;
}
@media (max-width: 720px) {
.reference-promo-rail {
grid-auto-columns: minmax(210px, 76vw);
}
}
/* NOVA+ 2.53 — inline commercial episode gallery. */
.episode-gallery-shell,
.episode-gallery-panel,
.episode-gallery-card,
.episode-gallery-collapsed,
.episode-gallery-expanded-layout,
.episode-source-card,
.episode-source-login,
.episode-source-error,
.episode-source-empty,
.episode-gallery-loading,
.episode-gallery-empty {
background: #000000;
}
.episode-gallery-panel {
width: 100%;
min-width: 0;
}
.episode-gallery-header {
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.episode-gallery-heading {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
}
.episode-gallery-heading h2 {
margin: 0;
font-size: 1.18rem;
line-height: 1.35;
font-weight: 850;
color: rgba(255,255,255,.96);
}
.episode-gallery-heading span {
font-size: .78rem;
color: rgba(255,255,255,.56);
white-space: nowrap;
}
.episode-gallery-tools {
display: flex;
align-items: center;
gap: 8px;
}
.episode-gallery-sort {
width: auto;
min-width: 92px;
grid-auto-flow: column;
gap: 7px;
padding: 0 11px;
}
.episode-gallery-sort span {
font-size: .72rem;
font-weight: 780;
}
.episode-season-filter-strip {
position: relative;
display: flex;
align-items: stretch;
gap: 8px;
width: 100%;
margin: 0 0 16px;
padding: 4px 0 8px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scrollbar-width: none;
}
.episode-season-filter-strip::-webkit-scrollbar {
display: none;
}
.episode-season-filter {
appearance: none;
flex: 0 0 auto;
text-align: right;
}
.episode-season-filter:hover,
.episode-season-filter:focus-visible {
outline: 0;
}
.episode-gallery-season,
.episode-gallery-tool {
height: 39px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 9px;
color: rgba(255,255,255,.9);
background: #000000;
}
.episode-gallery-season {
position: relative;
display: flex;
align-items: center;
gap: 8px;
min-width: 166px;
padding: 0 11px;
}
.episode-gallery-season select {
appearance: none;
flex: 1;
min-width: 0;
height: 37px;
border: 0;
outline: 0;
background: #000000;
color: rgba(255,255,255,.9);
font: inherit;
font-size: .79rem;
cursor: pointer;
}
.episode-gallery-season > .oscar-icon:last-child {
pointer-events: none;
color: rgba(255,255,255,.55);
}
.episode-gallery-tool {
appearance: none;
width: 41px;
min-width: 41px;
display: grid;
place-items: center;
padding: 0;
cursor: pointer;
}
.episode-gallery-tool:hover,
.episode-gallery-tool.active,
.episode-gallery-tool:focus-visible,
.episode-gallery-season:focus-within {
border-color: #14D7FF;
color: #14D7FF;
outline: 0;
}
.episode-gallery-search {
height: 42px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 12px;
margin: 0 0 14px;
border: 1px solid rgba(255,255,255,.17);
border-radius: 9px;
background: #000000;
color: rgba(255,255,255,.55);
}
.episode-gallery-search:focus-within {
border-color: #9B4DFF;
}
.episode-gallery-search input {
flex: 1;
min-width: 0;
border: 0;
outline: 0;
color: rgba(255,255,255,.94);
background: #000000;
font: inherit;
font-size: .84rem;
}
.episode-gallery-search button {
width: 34px;
height: 34px;
border: 0;
border-radius: 8px;
display: grid;
place-items: center;
color: rgba(255,255,255,.65);
background: #000000;
cursor: pointer;
}
.episode-gallery-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.episode-gallery-entry {
min-width: 0;
opacity: 0;
transform: translateY(12px) scale(.992);
animation: episode-season-enter .38s cubic-bezier(.2,.8,.2,1) forwards;
}
.episode-gallery-entry.expanded {
grid-column: 1 / -1;
}
.episode-gallery-entry:nth-child(2) { animation-delay: 35ms; }
.episode-gallery-entry:nth-child(3) { animation-delay: 70ms; }
.episode-gallery-entry:nth-child(4) { animation-delay: 105ms; }
.episode-gallery-entry:nth-child(n+5) { animation-delay: 125ms; }
.episode-gallery-card {
position: relative;
width: 100%;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(255,255,255,.13);
border-radius: 11px;
transition: border-color .18s ease, box-shadow .18s ease;
}
.episode-gallery-card::before {
content: "";
position: absolute;
z-index: 4;
top: 0;
right: 12%;
left: 12%;
height: 1px;
opacity: 0;
pointer-events: none;
background: linear-gradient(90deg,transparent,#F04AD8,#14D7FF,transparent);
transition: opacity .2s ease, right .2s ease, left .2s ease;
}
.episode-gallery-card:hover::before,
.episode-gallery-card.expanded::before {
right: 3%;
left: 3%;
opacity: .78;
}
.episode-gallery-card:hover {
border-color: rgba(255,255,255,.25);
}
.episode-gallery-card.expanded {
grid-column: 1 / -1;
border-color: transparent;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(105deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
box-shadow: 0 18px 46px rgba(0,0,0,.42);
}
.episode-gallery-collapsed {
appearance: none;
width: 100%;
min-height: 126px;
display: grid;
grid-template-columns: minmax(190px, 36%) minmax(0,1fr) auto;
align-items: stretch;
gap: 14px;
padding: 0;
border: 0;
color: inherit;
text-align: right;
cursor: pointer;
}
.episode-gallery-collapsed-art {
position: relative;
overflow: hidden;
min-height: 126px;
background: #000000;
}
.episode-gallery-collapsed-art img,
.episode-gallery-expanded-art img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .25s ease;
}
.episode-gallery-card:hover .episode-gallery-collapsed-art img {
transform: scale(1.025);
}
.episode-gallery-collapsed-art::after,
.episode-gallery-expanded-art::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.12) 52%,rgba(0,0,0,.82));
}
.episode-gallery-collapsed-art > small,
.episode-gallery-number {
position: absolute;
z-index: 2;
top: 9px;
right: 9px;
padding: 4px 8px;
border-radius: 6px;
background: #000000;
color: rgba(255,255,255,.92);
font-size: .69rem;
font-weight: 750;
}
.episode-gallery-collapsed-copy {
align-self: center;
min-width: 0;
}
.episode-gallery-collapsed-copy strong,
.episode-gallery-collapsed-copy small {
display: block;
}
.episode-gallery-collapsed-copy strong {
margin-bottom: 8px;
color: rgba(255,255,255,.96);
font-size: 1rem;
line-height: 1.45;
}
.episode-gallery-collapsed-copy small {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: rgba(255,255,255,.54);
font-size: .76rem;
line-height: 1.7;
}
.episode-gallery-collapsed-meta {
min-width: 96px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 11px;
padding: 0 15px;
color: rgba(255,255,255,.52);
}
.episode-gallery-collapsed-meta small {
white-space: nowrap;
font-size: .72rem;
}
.episode-gallery-more {
appearance: none;
min-width: 190px;
height: 41px;
margin: 16px auto 0;
padding: 0 17px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid rgba(255,255,255,.17);
border-radius: 9px;
background: #000000;
color: rgba(255,255,255,.84);
cursor: pointer;
}
.episode-gallery-more:hover,
.episode-gallery-more:focus-visible {
border-color: #9B4DFF;
outline: 0;
}
.episode-gallery-expanded-layout {
min-width: 0;
padding: 16px;
display: grid;
grid-template-columns: minmax(300px,.8fr) minmax(235px,.58fr) minmax(500px,1.55fr);
grid-template-areas: "sources copy art";
gap: 22px;
align-items: center;
direction: ltr;
}
.episode-gallery-expanded-art,
.episode-gallery-expanded-copy,
.episode-source-area {
direction: rtl;
}
.episode-gallery-expanded-art {
grid-area: art;
appearance: none;
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 8.6;
min-height: 230px;
padding: 0;
border: 0;
border-radius: 10px;
color: #ffffff;
background: #000000;
cursor: pointer;
}
.episode-gallery-play {
position: absolute;
z-index: 3;
inset: 50% auto auto 50%;
transform: translate(-50%,-50%);
width: 54px;
height: 54px;
display: grid;
place-items: center;
border: 2px solid transparent;
border-radius: 999px;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(120deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.episode-gallery-progress {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
width: 33%;
height: 3px;
background: linear-gradient(90deg,#F04AD8,#9B4DFF,#14D7FF);
}
.episode-gallery-expanded-copy {
grid-area: copy;
position: relative;
min-width: 0;
}
.episode-gallery-collapse {
position: absolute;
top: -8px;
left: 0;
width: 39px;
height: 39px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.18);
border-radius: 9px;
color: rgba(255,255,255,.68);
background: #000000;
cursor: pointer;
}
.episode-gallery-collapse .oscar-icon {
transform: rotate(180deg);
}
.episode-gallery-expanded-copy > small {
color: #F04AD8;
font-size: .79rem;
font-weight: 780;
}
.episode-gallery-expanded-copy h3 {
margin: 10px 0 8px;
color: rgba(255,255,255,.98);
font-size: clamp(1.3rem,2vw,2rem);
line-height: 1.32;
}
.episode-gallery-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 13px;
color: rgba(255,255,255,.62);
font-size: .77rem;
}
.episode-gallery-expanded-copy p {
margin: 15px 0 0;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
color: rgba(255,255,255,.62);
font-size: .82rem;
line-height: 1.85;
}
.episode-source-area {
grid-area: sources;
min-width: 0;
}
.episode-source-heading {
margin-bottom: 11px;
}
.episode-source-heading h3 {
margin: 0;
color: rgba(255,255,255,.95);
font-size: .91rem;
}
.episode-source-heading small {
display: block;
margin-top: 3px;
color: rgba(255,255,255,.48);
font-size: .68rem;
}
.episode-source-grid {
display: grid;
gap: 8px;
}
.episode-source-card {
appearance: none;
width: 100%;
min-height: 62px;
padding: 7px 10px;
display: grid;
grid-template-columns: minmax(48px,auto) minmax(0,1fr) 44px;
align-items: center;
gap: 10px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 9px;
color: rgba(255,255,255,.9);
text-align: right;
cursor: pointer;
}
.episode-source-card.primary {
border-color: transparent;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
}
.episode-source-card:hover,
.episode-source-card:focus-visible {
border-color: #14D7FF;
outline: 0;
}
.episode-source-card:disabled {
cursor: wait;
opacity: .58;
}
.episode-source-card.loading {
opacity: 1;
}
.episode-source-quality {
color: #F04AD8;
font-size: .88rem;
font-weight: 850;
direction: ltr;
text-align: center;
}
.episode-source-card:nth-child(2n) .episode-source-quality {
color: #14D7FF;
}
.episode-source-copy {
min-width: 0;
}
.episode-source-copy strong,
.episode-source-copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.episode-source-copy strong {
color: rgba(255,255,255,.94);
font-size: .82rem;
}
.episode-source-copy small {
margin-top: 3px;
color: rgba(255,255,255,.46);
font-size: .65rem;
}
.episode-source-play {
width: 39px;
height: 39px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.42);
border-radius: 999px;
color: rgba(255,255,255,.94);
background: #000000;
}
.episode-source-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,.24);
border-top-color: #14D7FF;
border-radius: 999px;
animation: episode-source-spin .7s linear infinite;
}
.episode-source-login,
.episode-source-error,
.episode-source-empty {
min-height: 58px;
width: 100%;
border: 1px solid rgba(255,255,255,.17);
border-radius: 9px;
color: rgba(255,255,255,.76);
}
.episode-source-login {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
cursor: pointer;
}
.episode-source-error,
.episode-source-empty {
padding: 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: .72rem;
line-height: 1.6;
}
.episode-source-error button {
flex: 0 0 auto;
min-height: 36px;
padding: 0 11px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 8px;
background: #000000;
color: #14D7FF;
cursor: pointer;
}
.episode-source-skeletons {
display: grid;
gap: 8px;
}
.episode-source-skeletons span {
height: 62px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 9px;
background: linear-gradient(100deg,#000000 18%,rgba(255,255,255,.08) 42%,#000000 66%);
background-size: 240% 100%;
animation: episode-source-shimmer 1.2s ease-in-out infinite;
}
.episode-gallery-loading,
.episode-gallery-empty {
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 10px;
color: rgba(255,255,255,.56);
}
@keyframes episode-source-spin { to { transform: rotate(360deg); } }
@keyframes episode-source-shimmer { to { background-position: -180% 0; } }
@keyframes episode-season-enter {
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1240px) {
.episode-gallery-list {
grid-template-columns: 1fr;
}
.episode-gallery-expanded-layout {
grid-template-columns: minmax(250px,.72fr) minmax(220px,.56fr) minmax(430px,1.35fr);
gap: 16px;
}
}
@media (max-width: 900px) {
.episode-gallery-header {
min-height: auto;
align-items: flex-start;
flex-direction: column;
padding-bottom: 12px;
}
.episode-gallery-tools {
width: 100%;
}
.episode-gallery-season {
flex: 1;
}
.episode-gallery-tool {
width: 48px;
min-width: 48px;
height: 48px;
}
.episode-gallery-sort {
width: auto;
min-width: 104px;
}
.episode-season-filter-strip {
margin-bottom: 12px;
padding-bottom: 7px;
}
.episode-gallery-season,
.episode-gallery-season select {
height: 48px;
}
.episode-gallery-list {
gap: 10px;
}
.episode-gallery-collapsed {
min-height: 96px;
grid-template-columns: 128px minmax(0,1fr) 36px;
gap: 10px;
}
.episode-gallery-collapsed-art {
min-height: 96px;
}
.episode-gallery-collapsed-copy strong {
margin-bottom: 4px;
font-size: .88rem;
}
.episode-gallery-collapsed-copy small {
-webkit-line-clamp: 1;
font-size: .68rem;
}
.episode-gallery-collapsed-meta {
min-width: 36px;
padding: 0 8px;
}
.episode-gallery-collapsed-meta small {
display: none;
}
.episode-gallery-expanded-layout {
padding: 10px;
grid-template-columns: minmax(0,1fr);
grid-template-areas: "art" "copy" "sources";
gap: 16px;
}
.episode-gallery-expanded-art {
min-height: 0;
aspect-ratio: 16 / 9;
}
.episode-gallery-expanded-copy h3 {
padding-left: 42px;
font-size: 1.2rem;
}
.episode-gallery-expanded-copy p {
-webkit-line-clamp: 3;
font-size: .76rem;
}
.episode-source-card {
min-height: 58px;
grid-template-columns: 52px minmax(0,1fr) 48px;
padding: 5px 7px;
}
.episode-source-play {
width: 34px;
height: 34px;
justify-self: center;
}
.episode-gallery-more {
min-height: 48px;
}
}
@media (max-width: 520px) {
.episode-gallery-heading {
width: 100%;
justify-content: space-between;
}
.episode-gallery-collapsed {
grid-template-columns: 112px minmax(0,1fr) 32px;
gap: 8px;
}
.episode-gallery-collapsed-meta {
min-width: 32px;
padding: 0 5px;
}
.episode-gallery-collapsed-art > small {
top: 6px;
right: 6px;
padding: 3px 6px;
font-size: .62rem;
}
}
@media (prefers-reduced-motion: reduce) {
.episode-gallery-card,
.episode-gallery-entry,
.episode-gallery-collapsed-art img,
.episode-source-spinner,
.episode-source-skeletons span {
transition: none;
animation-duration: .01ms;
animation-iteration-count: 1;
}
}
/* NOVA+ 2.55 — standalone episode experience and compact rich details. */
.episode-season-filter-strip {
align-items: center;
gap: 7px;
padding: 0 0 8px;
}
.episode-season-filter.nova-catalog-select-card {
flex: 0 0 auto;
height: var(--nova-catalog-control-h, 42px);
min-height: var(--nova-catalog-control-h, 42px);
min-width: 118px;
max-width: 178px;
margin: 0;
padding: 0 10px;
grid-template-columns: 18px auto minmax(38px, auto) 14px;
gap: 6px;
border-radius: 8px !important;
}
.episode-season-filter.nova-catalog-select-card::after {
display: none;
}
.reference-info-panel {
padding: 13px;
}
.reference-info-grid {
grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}
.reference-info-grid > div {
padding: 3px 7px 8px;
}
.reference-info-grid dd {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.reference-details-story {
max-width: 1050px;
margin-top: 8px;
font-size: .65rem;
line-height: 1.65;
}
.reference-cast-section {
margin-top: 14px;
padding-top: 11px;
}
.reference-cast-section h3 {
margin-bottom: 9px;
font-size: .82rem;
}
.reference-info-panel .nova-people-rail {
gap: 12px;
padding-bottom: 6px;
}
.reference-info-panel .person-card {
width: 78px;
}
.reference-info-panel .person-avatar {
width: 68px;
height: 68px;
margin-bottom: 7px;
}
.reference-info-panel .person-card strong {
font-size: .68rem;
}
.reference-info-panel .person-card small {
margin-top: 2px;
font-size: .57rem;
}
.reference-promo-player {
overflow: hidden;
margin: 0 0 14px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 13px;
background: #000000;
box-shadow: 0 18px 42px rgba(0,0,0,.38);
animation: promo-player-enter .24s ease-out both;
}
.reference-promo-player > header {
min-height: 52px;
padding: 8px 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid rgba(255,255,255,.09);
}
.reference-promo-player > header > div {
min-width: 0;
}
.reference-promo-player > header span,
.reference-promo-player > header strong {
display: block;
}
.reference-promo-player > header span {
color: #14D7FF;
font-size: .57rem;
font-weight: 800;
letter-spacing: .06em;
}
.reference-promo-player > header strong {
margin-top: 2px;
overflow: hidden;
color: #fff;
font-size: .76rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.reference-promo-player > header button {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.14);
border-radius: 8px;
background: #000000;
color: #fff;
}
.reference-promo-frame {
position: relative;
aspect-ratio: 16 / 9;
background: #000000;
}
.reference-promo-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
background: #000000;
}
.reference-promo-card.active .reference-promo-art {
outline: 2px solid #9B4DFF;
outline-offset: 2px;
box-shadow: 0 0 24px rgba(20,215,255,.15);
}
@keyframes promo-player-enter {
from { opacity: 0; transform: translateY(8px) scale(.992); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.standalone-episode-page {
min-height: 100%;
padding-bottom: 36px;
background: #000000;
color: #fff;
animation: standalone-page-enter .26s ease-out both;
}
.standalone-episode-hero {
position: relative;
isolation: isolate;
height: clamp(410px, 48vh, 530px);
min-height: 410px;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.09);
background: #000000;
}
.standalone-episode-backdrop {
position: absolute;
z-index: 0;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
transform: scale(1.012);
animation: standalone-art-enter .7s cubic-bezier(.2,.72,.25,1) both;
}
.standalone-episode-shade {
position: absolute;
z-index: 1;
inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.20) 35%, rgba(0,0,0,.78) 72%, #000000 100%),
linear-gradient(0deg, #000000 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.30) 100%);
pointer-events: none;
}
.standalone-episode-shade::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: min(48vw, 720px);
height: 2px;
background: linear-gradient(90deg, #F04AD8, #9B4DFF 52%, #14D7FF);
box-shadow: 0 0 20px rgba(155,77,255,.28);
}
.standalone-episode-hero-content {
position: absolute;
z-index: 3;
inset: 0 0 0 auto;
width: min(650px, 47vw);
min-height: 0;
padding: clamp(74px, 8vh, 98px) clamp(30px, 4.5vw, 72px) 38px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.standalone-hero-art-play {
position: absolute;
z-index: 3;
top: 52%;
left: 29%;
width: 62px;
height: 62px;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.48);
border-radius: 50%;
background: rgba(0,0,0,.54);
color: #fff;
box-shadow: 0 12px 36px rgba(0,0,0,.42), 0 0 0 7px rgba(0,0,0,.15);
backdrop-filter: blur(8px);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.standalone-hero-art-play:hover,
.standalone-hero-art-play:focus-visible {
transform: translate(-50%, -50%) scale(1.07);
border-color: #14D7FF;
outline: 0;
box-shadow: 0 12px 38px rgba(0,0,0,.48), 0 0 0 7px rgba(155,77,255,.18), 0 0 22px rgba(20,215,255,.22);
}
.standalone-episode-kicker,
.standalone-episode-meta,
.standalone-episode-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.standalone-episode-kicker {
gap: 9px;
color: rgba(255,255,255,.72);
font-size: .69rem;
font-weight: 800;
}
.standalone-episode-kicker i {
width: 4px;
height: 4px;
border-radius: 50%;
background: #14D7FF;
box-shadow: 0 0 9px #14D7FF;
}
.standalone-episode-series-name {
max-width: 100%;
margin-top: 12px;
overflow: hidden;
color: rgba(255,255,255,.78);
font-size: .78rem;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
.standalone-episode-hero-content h1 {
max-width: 100%;
margin: 5px 0 0;
font-size: clamp(2.05rem, 3.15vw, 3.25rem);
line-height: 1.1;
text-wrap: balance;
}
.standalone-episode-hero-content > p {
max-width: 590px;
margin: 11px 0 0;
display: -webkit-box;
overflow: hidden;
color: rgba(255,255,255,.70);
font-size: .86rem;
line-height: 1.78;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.standalone-episode-meta {
gap: 12px;
margin-top: 14px;
}
.standalone-episode-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
color: rgba(255,255,255,.67);
font-size: .71rem;
}
.standalone-episode-actions {
gap: 9px;
margin-top: 20px;
}
.standalone-episode-play,
.standalone-series-return {
min-height: 48px;
padding: 0 17px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 11px;
color: #fff;
}
.standalone-episode-play {
min-width: 164px;
border: 0;
background: #fff;
color: #000;
}
.standalone-episode-play > span {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: #000;
color: #fff;
}
.standalone-episode-play strong {
font-size: .79rem;
}
.standalone-series-return {
max-width: 300px;
border: 1px solid rgba(255,255,255,.20);
background: rgba(0,0,0,.64);
backdrop-filter: blur(12px);
}
.standalone-series-return span {
overflow: hidden;
font-size: .71rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.standalone-episode-content {
width: min(1500px, calc(100% - clamp(32px, 5vw, 84px)));
margin: 0 auto;
padding-top: 24px;
display: grid;
gap: 24px;
}
.standalone-episode-narrative {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: 14px;
}
.standalone-story-card,
.standalone-source-panel {
border: 1px solid rgba(255,255,255,.11);
border-radius: 13px;
background: #000000;
}
.standalone-story-card {
min-width: 0;
padding: 21px 22px;
position: relative;
overflow: hidden;
}
.standalone-story-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 110px;
height: 1px;
background: linear-gradient(90deg, #F04AD8, #14D7FF);
}
.standalone-section-kicker {
color: #14D7FF;
font-size: .58rem;
font-weight: 850;
letter-spacing: .07em;
}
.standalone-story-card h2 {
margin: 6px 0 0;
font-size: 1.08rem;
}
.standalone-story-card p {
margin: 9px 0 0;
display: -webkit-box;
overflow: hidden;
color: rgba(255,255,255,.66);
font-size: .79rem;
line-height: 1.78;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.standalone-story-card.episode-story p {
-webkit-line-clamp: 4;
}
.standalone-story-facts {
margin-top: 13px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.standalone-story-facts span {
min-height: 26px;
padding: 0 9px;
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 7px;
color: rgba(255,255,255,.72);
font-size: .64rem;
}
.standalone-story-card > button {
margin-top: 12px;
padding: 0;
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
background: transparent;
color: #14D7FF;
font-size: .69rem;
}
.standalone-source-panel {
padding: 22px;
}
.standalone-source-panel > header,
.standalone-related-episodes > header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.standalone-source-panel > header h2,
.standalone-related-episodes > header h2 {
margin: 5px 0 0;
color: #fff;
font-size: 1.16rem;
}
.standalone-source-panel > header p {
margin: 5px 0 0;
color: rgba(255,255,255,.48);
font-size: .7rem;
}
.standalone-source-count {
min-height: 34px;
padding: 0 12px;
display: inline-flex;
align-items: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
color: rgba(255,255,255,.66);
font-size: .67rem;
white-space: nowrap;
}
.standalone-source-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 11px;
}
.standalone-source-card.episode-source-card {
min-height: 74px;
padding: 8px;
display: grid;
grid-template-columns: 66px minmax(0,1fr) 46px;
align-items: center;
gap: 9px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 11px;
background: #000000;
color: #fff;
text-align: right;
}
.standalone-source-card.episode-source-card.primary {
border-color: transparent;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box;
}
.standalone-source-card.episode-source-card:hover,
.standalone-source-card.episode-source-card:focus-visible {
transform: translateY(-2px);
border-color: #9B4DFF;
outline: 0;
}
.standalone-source-quality {
height: 48px;
display: grid;
place-items: center;
border-left: 1px solid rgba(255,255,255,.10);
color: #14D7FF;
font-size: .83rem;
font-weight: 900;
direction: ltr;
}
.standalone-source-copy {
min-width: 0;
}
.standalone-source-copy strong,
.standalone-source-copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.standalone-source-copy strong {
font-size: .8rem;
}
.standalone-source-copy small {
margin-top: 4px;
color: rgba(255,255,255,.46);
font-size: .62rem;
}
.standalone-source-play {
width: 38px;
height: 38px;
display: grid;
place-items: center;
justify-self: center;
border: 1px solid rgba(255,255,255,.24);
border-radius: 50%;
}
.standalone-source-login,
.standalone-source-skeletons,
.standalone-source-error,
.standalone-source-empty {
margin-top: 16px;
}
.standalone-related-episodes {
min-width: 0;
}
.standalone-related-rail {
margin-top: 13px;
padding-bottom: 7px;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(230px, 20vw);
gap: 12px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
}
.standalone-related-card {
min-width: 0;
padding: 0;
border: 0;
background: #000000;
color: #fff;
text-align: right;
}
.standalone-related-art {
position: relative;
overflow: hidden;
display: block;
aspect-ratio: 16 / 9;
border: 1px solid rgba(255,255,255,.11);
border-radius: 11px;
background: #000000;
}
.standalone-related-art img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .24s ease;
}
.standalone-related-art i {
position: absolute;
inset: 50% auto auto 50%;
width: 34px;
height: 34px;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.28);
border-radius: 50%;
background: rgba(0,0,0,.70);
opacity: 0;
transition: opacity .2s ease;
}
.standalone-related-art > small {
position: absolute;
top: 7px;
right: 7px;
padding: 4px 7px;
border-radius: 6px;
background: rgba(0,0,0,.78);
font-size: .58rem;
}
.standalone-related-card:hover .standalone-related-art i,
.standalone-related-card:focus-visible .standalone-related-art i {
opacity: 1;
}
.standalone-related-card:hover .standalone-related-art img {
transform: scale(1.035);
}
.standalone-related-card > strong,
.standalone-related-card > small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.standalone-related-card > strong {
margin-top: 8px;
font-size: .78rem;
}
.standalone-related-card > small {
margin-top: 3px;
color: rgba(255,255,255,.43);
font-size: .62rem;
}
@keyframes standalone-art-enter {
from { opacity: .35; transform: scale(1.045); }
to { opacity: 1; transform: scale(1.012); }
}
@keyframes standalone-page-enter {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 821px) {
.cinematic-details-hero {
height: clamp(390px, 47dvh, 555px);
}
.cinematic-title {
font-size: clamp(2.15rem, 5.1vw, 4.7rem);
}
}
@media (max-width: 1040px) {
.standalone-source-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.standalone-episode-narrative {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.episode-season-filter.nova-catalog-select-card {
height: 34px !important;
min-height: 34px !important;
min-width: 84px !important;
max-width: 126px !important;
padding-inline: 7px !important;
grid-template-columns: 15px minmax(38px, auto) 13px !important;
gap: 4px !important;
border-radius: 7px !important;
}
.episode-season-filter.nova-catalog-select-card > span {
display: none;
}
.episode-season-filter.nova-catalog-select-card > strong {
font-size: .68rem;
}
.cinematic-details-hero {
height: clamp(390px, 49dvh, 475px);
min-height: 390px;
}
.cinematic-title {
font-size: clamp(1.75rem, 9vw, 3.25rem);
}
.reference-info-panel .person-card {
width: 68px;
}
.reference-info-panel .person-avatar {
width: 58px;
height: 58px;
}
.standalone-episode-hero {
height: auto;
min-height: 0;
display: grid;
grid-template: auto auto / minmax(0, 1fr);
overflow: hidden;
}
.standalone-episode-backdrop {
position: relative;
z-index: 0;
grid-area: 1 / 1;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 8.8;
object-position: center 28%;
}
.standalone-episode-shade {
position: relative;
z-index: 1;
grid-area: 1 / 1;
inset: auto;
background:
linear-gradient(0deg, #000000 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.28) 100%),
linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}
.standalone-episode-shade::after {
width: 58%;
}
.standalone-hero-art-play {
position: relative;
z-index: 2;
grid-area: 1 / 1;
place-self: center;
top: auto;
left: auto;
width: 56px;
height: 56px;
transform: none;
}
.standalone-hero-art-play:hover,
.standalone-hero-art-play:focus-visible {
transform: scale(1.06);
}
.standalone-episode-hero-content {
position: relative;
z-index: 3;
grid-area: 2 / 1;
inset: auto;
width: 100%;
min-height: 0;
margin-top: -32px;
padding: 48px 18px 22px;
justify-content: flex-end;
background: linear-gradient(0deg, #000 0%, #000 78%, rgba(0,0,0,0) 100%);
}
.standalone-episode-hero-content h1 {
font-size: clamp(1.65rem, 7.2vw, 2.35rem);
}
.standalone-episode-hero-content > p {
max-width: 100%;
font-size: .77rem;
line-height: 1.72;
-webkit-line-clamp: 3;
}
.standalone-episode-content {
width: calc(100% - 24px);
padding-top: 16px;
gap: 18px;
}
.standalone-story-card {
padding: 17px;
}
.standalone-story-card p {
font-size: .75rem;
-webkit-line-clamp: 5;
}
.standalone-source-panel {
padding: 16px;
}
.standalone-source-panel > header p {
display: none;
}
.standalone-related-rail {
grid-auto-columns: minmax(205px, 64vw);
}
}
@media (max-width: 560px) {
.standalone-episode-hero {
min-height: 0;
}
.standalone-episode-backdrop {
aspect-ratio: 4 / 3;
}
.standalone-episode-series-name {
margin-top: 9px;
font-size: .72rem;
}
.standalone-episode-hero-content {
margin-top: -27px;
padding: 43px 14px 18px;
}
.standalone-episode-kicker {
font-size: .64rem;
}
.standalone-episode-actions {
width: 100%;
}
.standalone-episode-play,
.standalone-series-return {
flex: 1 1 138px;
min-height: 46px;
max-width: none;
padding-inline: 11px;
}
.standalone-series-return span {
font-size: .66rem;
}
.standalone-source-grid {
grid-template-columns: 1fr;
}
.standalone-source-panel > header {
align-items: center;
}
.standalone-source-panel > header h2 {
font-size: .98rem;
}
.standalone-story-card {
padding: 15px;
}
.standalone-source-card.episode-source-card {
min-height: 68px;
grid-template-columns: 58px minmax(0,1fr) 42px;
}
.standalone-source-quality {
height: 44px;
font-size: .78rem;
}
.standalone-related-rail {
grid-auto-columns: minmax(190px, 70vw);
}
.reference-promo-rail {
grid-auto-columns: minmax(190px, 74vw);
}
}
@media (prefers-reduced-motion: reduce) {
.standalone-episode-page,
.standalone-episode-backdrop,
.reference-promo-player,
.standalone-related-art img {
animation: none;
transition: none;
}
}
/* =========================================================
EPISODE DETAILS — RESPONSIVE PROFESSIONAL LAYOUT V2
This final block intentionally overrides the legacy standalone episode
rules above. SafeImage renders a child ![]()
, therefore image styling must
cross the scoped-component boundary with .
========================================================= */
.standalone-episode-page {
min-height: 100dvh;
padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 34px);
background:
radial-gradient(circle at 18% 8%, rgba(155,77,255,.075), transparent 25rem),
radial-gradient(circle at 83% 22%, rgba(20,215,255,.045), transparent 22rem),
#030304;
color: #fff;
}
.standalone-episode-hero {
position: relative;
height: auto !important;
min-height: 0 !important;
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 78px) clamp(18px, 3vw, 46px) 26px;
overflow: visible !important;
border: 0 !important;
background: transparent !important;
}
.standalone-episode-hero-frame {
width: min(1460px, 100%);
min-height: 430px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(340px, .78fr);
grid-template-areas: "media info";
direction: ltr;
overflow: hidden;
border: 1px solid rgba(255,255,255,.095);
border-radius: 22px;
background: #08080b;
box-shadow: 0 26px 80px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.035) inset;
}
.standalone-episode-media {
position: relative;
grid-area: media;
min-width: 0;
min-height: 430px;
overflow: hidden;
isolation: isolate;
background: #07070a;
}
.standalone-episode-media::before {
content: "";
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.02) 56%, rgba(8,8,11,.92) 100%),
linear-gradient(0deg, rgba(0,0,0,.52) 0%, transparent 42%, rgba(0,0,0,.18) 100%);
}
.standalone-episode-media .standalone-episode-backdrop-image,
.standalone-episode-media .standalone-episode-art-image {
position: absolute;
display: block;
inset: 0;
width: 100%;
height: 100%;
user-select: none;
-webkit-user-drag: none;
}
.standalone-episode-media .standalone-episode-backdrop-image {
z-index: 0;
object-fit: cover;
object-position: center 28%;
transform: scale(1.09);
filter: blur(20px) saturate(.82) brightness(.58);
opacity: .76;
}
.standalone-episode-media .standalone-episode-art-image {
z-index: 1;
object-fit: contain;
object-position: center;
filter: saturate(.96) contrast(1.02) brightness(.94);
animation: standalone-art-enter .55s cubic-bezier(.2,.72,.25,1) both;
}
.standalone-episode-shade {
position: absolute !important;
z-index: 3 !important;
inset: 0 !important;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0,0,0,.02), transparent 48%, rgba(7,7,10,.72) 100%),
linear-gradient(0deg, rgba(0,0,0,.45), transparent 42%) !important;
}
.standalone-episode-shade::after {
right: auto !important;
left: 0 !important;
bottom: 0 !important;
width: 46% !important;
height: 2px !important;
background: linear-gradient(90deg, #14D7FF, #9B4DFF 55%, #F04AD8) !important;
opacity: .86;
}
.standalone-hero-art-play {
position: absolute !important;
z-index: 5 !important;
top: 50% !important;
left: 50% !important;
width: 64px !important;
height: 64px !important;
transform: translate(-50%, -50%) !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255,255,255,.5) !important;
border-radius: 50% !important;
background: rgba(3,3,5,.62) !important;
color: #fff !important;
box-shadow: 0 14px 44px rgba(0,0,0,.46), 0 0 0 8px rgba(0,0,0,.16) !important;
backdrop-filter: blur(12px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
}
.standalone-hero-art-play:hover,
.standalone-hero-art-play:focus-visible {
transform: translate(-50%, -50%) scale(1.07) !important;
border-color: #14D7FF !important;
outline: 0 !important;
box-shadow: 0 16px 46px rgba(0,0,0,.52), 0 0 0 8px rgba(155,77,255,.15), 0 0 28px rgba(20,215,255,.24) !important;
}
.standalone-episode-hero-content {
position: relative !important;
grid-area: info;
z-index: 4 !important;
inset: auto !important;
width: auto !important;
min-width: 0;
min-height: 430px !important;
padding: clamp(28px, 3vw, 44px) clamp(24px, 2.8vw, 40px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
direction: rtl;
text-align: right;
background:
linear-gradient(135deg, rgba(17,17,22,.97), rgba(8,8,11,.985)),
#08080b !important;
border-left: 1px solid rgba(255,255,255,.055);
}
.standalone-episode-hero-content::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 148px;
height: 2px;
background: linear-gradient(90deg, #F04AD8, #9B4DFF, #14D7FF);
opacity: .92;
}
.standalone-episode-kicker {
gap: 8px !important;
color: rgba(255,255,255,.64) !important;
font-size: .68rem !important;
font-weight: 850 !important;
}
.standalone-episode-series-name {
margin-top: 13px !important;
color: rgba(255,255,255,.72) !important;
font-size: .77rem !important;
font-weight: 750 !important;
}
.standalone-episode-hero-content h1 {
max-width: 100% !important;
margin: 6px 0 0 !important;
color: #fff;
font-size: clamp(2rem, 2.9vw, 3.05rem) !important;
line-height: 1.08 !important;
letter-spacing: -.025em;
text-wrap: balance;
}
.standalone-episode-hero-content > p {
max-width: 100% !important;
margin: 13px 0 0 !important;
color: rgba(255,255,255,.64) !important;
font-size: .82rem !important;
line-height: 1.82 !important;
-webkit-line-clamp: 4 !important;
}
.standalone-episode-meta {
gap: 7px 11px !important;
margin-top: 16px !important;
}
.standalone-episode-meta span {
min-height: 27px;
padding: 0 8px;
border: 1px solid rgba(255,255,255,.085);
border-radius: 7px;
background: rgba(255,255,255,.025);
color: rgba(255,255,255,.67) !important;
font-size: .67rem !important;
}
.standalone-episode-actions {
width: 100%;
margin-top: 22px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 9px !important;
}
.standalone-episode-play,
.standalone-series-return {
width: 100%;
max-width: none !important;
min-width: 0 !important;
min-height: 48px !important;
padding: 0 13px !important;
border-radius: 10px !important;
}
.standalone-episode-play {
background: #fff !important;
color: #050506 !important;
box-shadow: 0 8px 24px rgba(255,255,255,.07);
}
.standalone-series-return {
border-color: rgba(255,255,255,.13) !important;
background: rgba(255,255,255,.035) !important;
backdrop-filter: none !important;
}
.standalone-episode-play:hover,
.standalone-episode-play:focus-visible {
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(255,255,255,.11);
outline: 0;
}
.standalone-series-return:hover,
.standalone-series-return:focus-visible {
border-color: rgba(20,215,255,.42) !important;
background: rgba(20,215,255,.055) !important;
outline: 0;
}
.standalone-episode-content {
width: min(1460px, calc(100% - clamp(36px, 6vw, 92px))) !important;
margin: 0 auto !important;
padding-top: 0 !important;
display: grid !important;
gap: 20px !important;
}
.standalone-episode-narrative {
gap: 14px !important;
}
.standalone-story-card,
.standalone-source-panel {
border-color: rgba(255,255,255,.085) !important;
border-radius: 16px !important;
background: linear-gradient(145deg, rgba(15,15,19,.96), rgba(7,7,9,.98)) !important;
box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.standalone-story-card {
padding: 22px 24px !important;
}
.standalone-story-card::before {
width: 126px !important;
height: 2px !important;
}
.standalone-story-card h2,
.standalone-source-panel > header h2,
.standalone-related-episodes > header h2 {
letter-spacing: -.012em;
}
.standalone-story-card p {
color: rgba(255,255,255,.61) !important;
}
.standalone-source-panel {
padding: 22px 24px !important;
}
.standalone-source-card.episode-source-card {
min-height: 72px !important;
border-color: rgba(255,255,255,.09) !important;
background: rgba(255,255,255,.024) !important;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.standalone-source-card.episode-source-card.primary {
border-color: transparent !important;
background:
linear-gradient(#0b0b0e,#0b0b0e) padding-box,
linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
}
.standalone-related-art {
border-radius: 14px !important;
background: #09090c !important;
}
@media (max-width: 1120px) {
.standalone-episode-hero-frame {
grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr);
min-height: 400px;
}
.standalone-episode-media,
.standalone-episode-hero-content {
min-height: 400px !important;
}
.standalone-episode-hero-content {
padding: 28px 25px !important;
}
.standalone-episode-hero-content h1 {
font-size: clamp(1.8rem, 3vw, 2.45rem) !important;
}
.standalone-episode-actions {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.standalone-episode-hero {
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 66px) 14px 18px !important;
}
.standalone-episode-hero-frame {
min-height: 0;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"media"
"info";
border-radius: 18px;
}
.standalone-episode-media {
min-height: 0 !important;
aspect-ratio: 16 / 9;
}
.standalone-episode-media::before {
background:
linear-gradient(0deg, rgba(8,8,11,.70) 0%, transparent 38%),
linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.08));
}
.standalone-episode-media .standalone-episode-backdrop-image {
object-position: center 24%;
filter: blur(18px) saturate(.84) brightness(.56);
}
.standalone-episode-media .standalone-episode-art-image {
object-fit: contain;
object-position: center;
}
.standalone-episode-shade {
position: absolute !important;
grid-area: auto !important;
background: linear-gradient(0deg, rgba(8,8,11,.76), transparent 42%) !important;
}
.standalone-episode-shade::after {
width: 54% !important;
}
.standalone-hero-art-play {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 58px !important;
height: 58px !important;
transform: translate(-50%, -50%) !important;
}
.standalone-hero-art-play:hover,
.standalone-hero-art-play:focus-visible {
transform: translate(-50%, -50%) scale(1.06) !important;
}
.standalone-episode-hero-content {
min-height: 0 !important;
margin: 0 !important;
padding: 24px 22px 23px !important;
justify-content: flex-start !important;
background: linear-gradient(180deg, #0d0d11, #08080b) !important;
border-left: 0;
border-top: 1px solid rgba(255,255,255,.055);
}
.standalone-episode-hero-content h1 {
font-size: clamp(1.65rem, 6.8vw, 2.25rem) !important;
}
.standalone-episode-hero-content > p {
font-size: .78rem !important;
line-height: 1.76 !important;
-webkit-line-clamp: 3 !important;
}
.standalone-episode-actions {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.standalone-episode-content {
width: calc(100% - 28px) !important;
gap: 16px !important;
}
.standalone-story-card,
.standalone-source-panel {
border-radius: 14px !important;
}
.standalone-story-card,
.standalone-source-panel {
padding: 18px !important;
}
}
@media (max-width: 560px) {
.standalone-episode-hero {
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 56px) 0 12px !important;
}
.standalone-episode-hero-frame {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.standalone-episode-media {
aspect-ratio: 16 / 10.5;
}
.standalone-episode-media .standalone-episode-art-image {
object-fit: contain;
}
.standalone-hero-art-play {
width: 54px !important;
height: 54px !important;
}
.standalone-episode-hero-content {
padding: 21px 14px 20px !important;
}
.standalone-episode-series-name {
margin-top: 10px !important;
font-size: .71rem !important;
}
.standalone-episode-hero-content h1 {
font-size: clamp(1.55rem, 8vw, 1.95rem) !important;
}
.standalone-episode-hero-content > p {
margin-top: 10px !important;
font-size: .75rem !important;
}
.standalone-episode-meta {
margin-top: 13px !important;
}
.standalone-episode-meta span {
min-height: 25px;
font-size: .62rem !important;
}
.standalone-episode-actions {
grid-template-columns: 1fr;
margin-top: 17px !important;
}
.standalone-episode-play,
.standalone-series-return {
min-height: 46px !important;
}
.standalone-episode-content {
width: calc(100% - 20px) !important;
gap: 14px !important;
}
.standalone-story-card,
.standalone-source-panel {
padding: 16px !important;
border-radius: 13px !important;
}
.standalone-source-panel > header {
align-items: flex-start !important;
gap: 10px !important;
}
.standalone-source-count {
min-height: 30px;
padding-inline: 9px;
font-size: .61rem;
}
.standalone-source-grid {
margin-top: 14px !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
}
.standalone-related-rail {
grid-auto-columns: minmax(190px, 78vw) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.standalone-episode-media .standalone-episode-art-image,
.standalone-hero-art-play,
.standalone-source-card.episode-source-card {
animation: none !important;
transition: none !important;
}
}
/* =========================================================
RELEASE AUDIT STAGE 1 — DETAILS TEXT / ACTION FEEDBACK
Keeps the approved visual identity while fixing bidi text, action feedback
and hidden error states.
========================================================= */
.nova-directional-text {
text-align: start !important;
unicode-bidi: plaintext;
overflow-wrap: anywhere;
}
.nova-directional-text[dir="ltr"],
.details-standard-title h1[dir="ltr"],
.cinematic-title[dir="ltr"] {
direction: ltr !important;
text-align: left !important;
}
.nova-directional-text[dir="rtl"],
.details-standard-title h1[dir="rtl"],
.cinematic-title[dir="rtl"] {
direction: rtl !important;
text-align: right !important;
}
.details-action-alert {
position: fixed;
z-index: 2250;
top: calc(var(--nova-app-header-h, 58px) + var(--safe-top, env(safe-area-inset-top, 0px)) + 8px);
right: clamp(12px, 3vw, 28px);
left: clamp(12px, 3vw, 28px);
width: min(560px, calc(100% - 24px));
min-height: 42px;
margin-inline: auto;
padding: 8px 8px 8px 11px;
display: grid;
grid-template-columns: 20px minmax(0, 1fr) 34px;
align-items: center;
gap: 8px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
color: rgba(255,255,255,.92);
background: rgba(12,10,17,.94);
box-shadow: 0 12px 34px rgba(0,0,0,.34);
backdrop-filter: blur(16px) saturate(1.12);
-webkit-backdrop-filter: blur(16px) saturate(1.12);
font-size: .76rem;
line-height: 1.55;
}
.details-action-alert > .oscar-icon {
color: #C25DFF;
}
.details-action-alert > button {
width: 34px;
height: 34px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
color: rgba(255,255,255,.78);
background: transparent;
}
.cinematic-watch-button:disabled,
.cinematic-secondary-action:disabled,
.nova-server-card:disabled,
.standalone-episode-play:disabled,
.standalone-hero-art-play:disabled,
.details-header-action:disabled {
cursor: default;
opacity: .62;
}
@media (max-width: 600px) {
.details-action-alert {
top: calc(54px + var(--safe-top, env(safe-area-inset-top, 0px)) + 6px);
font-size: .72rem;
}
}
@media (prefers-reduced-motion: reduce) {
.details-action-alert,
.details-action-alert * {
animation: none !important;
transition: none !important;
}
}
/* =========================================================
STAGE 2 RUNTIME DETAILS — COMMERCIAL HERO / PROMO / STORY
Keeps NOVA identity while reducing vertical dominance, moving promotional
playback into the approved hero artwork slot and removing bottom-nav reserve
from immersive details routes.
========================================================= */
.cinematic-title-stack {
width: min(100%, 680px);
display: grid;
justify-items: center;
gap: 4px;
}
.cinematic-title-stack .cinematic-title {
margin-bottom: 0 !important;
}
.cinematic-title-en {
max-width: 100%;
color: rgba(255,255,255,.68);
font-size: clamp(.78rem, 2.1vw, 1rem);
font-weight: 650;
line-height: 1.35;
letter-spacing: .01em;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
unicode-bidi: plaintext;
}
.cinematic-hero-promo {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
background: #000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 220ms ease, visibility 220ms ease;
}
.cinematic-hero-promo iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 0;
transform: translate(-50%, -50%);
pointer-events: none;
background: #000;
}
.cinematic-details-hero.nova-promo-active .cinematic-hero-promo {
opacity: 1;
visibility: visible;
}
.cinematic-details-hero.nova-promo-active .cinematic-details-backdrop-shell > .cinematic-details-backdrop-image,
.cinematic-details-hero.nova-promo-active .cinematic-details-backdrop-shell > img {
opacity: 0;
}
.cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
.cinematic-details-backdrop-shell img {
transition: opacity 220ms ease;
}
.cinematic-hero-promo-controls {
position: absolute;
z-index: 6;
display: flex;
gap: 7px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 180ms ease, visibility 180ms ease;
}
.cinematic-details-hero.nova-promo-active .cinematic-hero-promo-controls {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.cinematic-hero-promo-controls button {
width: 40px;
height: 40px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.20);
border-radius: 50%;
color: #fff;
background: rgba(5,5,8,.52);
box-shadow: 0 8px 22px rgba(0,0,0,.24);
backdrop-filter: blur(12px) saturate(1.12);
-webkit-backdrop-filter: blur(12px) saturate(1.12);
}
.cinematic-hero-promo-controls button:active {
transform: scale(.96);
}
.promo-state-pause,
.promo-state-audible { display: none; }
.cinematic-details-hero.nova-promo-playing .promo-state-play { display: none; }
.cinematic-details-hero.nova-promo-playing .promo-state-pause { display: inline-grid; }
.cinematic-details-hero:not(.nova-promo-muted) .promo-state-muted { display: none; }
.cinematic-details-hero:not(.nova-promo-muted) .promo-state-audible { display: inline-grid; }
.reference-details-overview-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(156px, 190px);
gap: 14px;
align-items: stretch;
}
.reference-production-card {
min-width: 0;
padding: 12px;
display: flex;
flex-direction: column;
gap: 9px;
border: 1px solid rgba(255,255,255,.09);
border-radius: 13px;
background: rgba(255,255,255,.025);
}
.reference-production-label {
color: rgba(255,255,255,.48);
font-size: .66rem;
font-weight: 700;
}
.reference-production-logos {
display: grid;
gap: 8px;
}
.reference-production-company {
min-width: 0;
display: grid;
gap: 6px;
}
.reference-production-logo {
height: 54px;
padding: 7px 10px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 9px;
background: rgba(255,255,255,.96);
}
.reference-production-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.reference-production-company strong {
min-width: 0;
color: rgba(255,255,255,.76);
font-size: .66rem;
font-weight: 650;
line-height: 1.35;
text-align: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
unicode-bidi: plaintext;
}
.reference-story-block {
margin-top: 16px;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,.07);
}
.reference-story-block h3 {
margin: 0 0 8px;
color: #fff;
font-size: .92rem;
font-weight: 780;
}
.reference-story-block .reference-details-story {
margin: 0;
color: rgba(255,255,255,.72);
font-size: .78rem;
line-height: 1.85;
text-align: right !important;
overflow-wrap: anywhere;
}
/* Details routes are immersive; MainLayout removes its bottom navigation. */
.details-app .details-page-shell,
.details-app .cinematic-details-content,
.details-app .nova-channel-details,
.details-app .standalone-episode-page {
padding-bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 24px) !important;
}
@media (min-width: 821px) {
.cinematic-hero-promo-controls {
left: clamp(18px, 3vw, 42px);
bottom: 20px;
}
}
@media (max-width: 820px) {
.cinematic-details-hero {
height: clamp(600px, 72dvh, 760px) !important;
min-height: 600px !important;
}
.cinematic-details-backdrop-shell {
height: clamp(430px, 55dvh, 560px) !important;
min-height: 430px !important;
}
.cinematic-hero-promo iframe {
width: 177.78%;
height: 100%;
min-width: 100%;
min-height: 100%;
}
.cinematic-hero-copy {
padding: 132px 16px 18px !important;
}
.cinematic-title-stack {
gap: 3px;
}
.cinematic-title {
margin: 4px auto 0 !important;
font-size: clamp(1.62rem, 7.6vw, 2.45rem) !important;
line-height: 1.04 !important;
}
.cinematic-title-en {
max-width: min(92vw, 620px);
font-size: .72rem;
}
.cinematic-meta {
margin-top: 9px !important;
}
.cinematic-ranking {
margin-top: 8px !important;
}
.cinematic-actions {
margin-top: 12px !important;
gap: 8px !important;
}
.cinematic-watch-button {
min-height: 48px !important;
height: 48px !important;
border-radius: 13px !important;
font-size: .88rem !important;
}
.cinematic-secondary-action {
min-height: 44px !important;
height: 44px !important;
border-radius: 12px !important;
gap: 6px !important;
}
.cinematic-secondary-action span {
font-size: .7rem !important;
}
.cinematic-hero-promo-controls {
top: calc(clamp(430px, 55dvh, 560px) - 54px);
left: 14px;
}
.cinematic-hero-promo-controls button {
width: 38px;
height: 38px;
}
.reference-details-overview-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.reference-production-card {
padding: 10px;
}
.reference-production-logos {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.reference-production-logos::-webkit-scrollbar { display: none; }
.reference-production-company {
flex: 0 0 132px;
}
.reference-production-logo {
height: 48px;
}
}
@media (max-width: 390px) {
.cinematic-details-hero {
height: clamp(560px, 70dvh, 690px) !important;
min-height: 560px !important;
}
.cinematic-details-backdrop-shell {
height: clamp(400px, 52dvh, 510px) !important;
min-height: 400px !important;
}
.cinematic-hero-copy {
padding: 112px 14px 16px !important;
}
.cinematic-hero-promo-controls {
top: calc(clamp(400px, 52dvh, 510px) - 51px);
left: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.cinematic-hero-promo,
.cinematic-hero-promo-controls,
.cinematic-details-backdrop-shell img,
.cinematic-hero-promo-controls button {
transition: none !important;
}
}
/* =========================================================
Stage 8 — Details commercial interaction polish
Identity locked to Nova+: #F04AD8 → #9B4DFF → #14D7FF
========================================================= */
.cinematic-details-page {
--nova-pink: #F04AD8;
--nova-purple: #9B4DFF;
--nova-cyan: #14D7FF;
padding-bottom: calc(24px + var(--safe-bottom, 0px));
}
.cinematic-actions {
column-gap: 12px;
row-gap: 12px;
}
.cinematic-secondary-action {
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,.20);
background: rgba(4,4,8,.52);
transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
-webkit-tap-highlight-color: transparent;
}
.cinematic-secondary-action::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), transparent 58%);
transform: scale(.7);
transition: opacity .18s ease, transform .18s ease;
}
.cinematic-secondary-action:active {
transform: scale(.975);
}
.cinematic-secondary-action:active::after {
opacity: 1;
transform: scale(1);
}
.secondary-action-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.035);
transition: transform .18s cubic-bezier(.2,.8,.2,1), color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cinematic-secondary-action.active {
border-color: transparent;
color: #fff;
background:
linear-gradient(#07070b,#07070b) padding-box,
linear-gradient(105deg,var(--nova-pink),var(--nova-purple) 52%,var(--nova-cyan)) border-box;
box-shadow: 0 8px 26px rgba(0,0,0,.34), 0 0 20px rgba(155,77,255,.12);
}
.cinematic-secondary-action.active .secondary-action-icon {
color: #fff;
background: linear-gradient(135deg,rgba(240,74,216,.28),rgba(155,77,255,.34) 52%,rgba(20,215,255,.24));
box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(155,77,255,.18);
transform: scale(1.06);
}
.cinematic-secondary-action.favorite-action.active .secondary-action-icon {
color: #F45BDB;
}
.cinematic-secondary-action.list-action.active .secondary-action-icon {
color: #fff;
}
.cinematic-secondary-action.just-selected .secondary-action-icon {
animation: novaActionConfirm .34s cubic-bezier(.22,.9,.3,1.2);
}
@keyframes novaActionConfirm {
0% { transform: scale(.82); }
58% { transform: scale(1.17); }
100% { transform: scale(1.06); }
}
.reference-story-block.story-first {
margin: 0 0 18px;
padding: 0 2px 18px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.reference-story-block.story-first .reference-panel-heading {
margin-bottom: 7px;
}
.reference-story-block.story-first .reference-details-story {
margin: 0;
color: rgba(255,255,255,.75);
font-size: clamp(.78rem,1.5vw,.92rem);
line-height: 1.88;
}
.reference-panel-heading.details-heading {
margin-top: 2px;
}
.reference-production-card {
min-width: 220px;
padding: 12px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 13px;
background: linear-gradient(145deg,rgba(12,8,18,.84),rgba(2,5,11,.90));
}
.reference-production-label {
display: block;
margin-bottom: 9px;
color: #C55CFF;
font-size: .66rem;
font-weight: 900;
}
.reference-production-logos {
display: grid;
gap: 8px;
}
.reference-production-company {
min-width: 0;
display: grid;
grid-template-columns: 48px minmax(0,1fr);
gap: 10px;
align-items: center;
}
.reference-production-logo {
width: 48px;
height: 48px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid transparent;
border-radius: 12px;
background:
linear-gradient(#07080d,#07080d) padding-box,
linear-gradient(135deg,rgba(240,74,216,.72),rgba(155,77,255,.62),rgba(20,215,255,.66)) border-box;
}
.reference-production-logo img {
width: 82%;
height: 82%;
object-fit: contain;
}
.production-logo-fallback {
color: #fff;
font-size: 1rem;
font-weight: 950;
}
.reference-production-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.reference-production-copy strong {
overflow: hidden;
color: #fff;
font-size: .78rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.reference-production-copy small {
color: rgba(255,255,255,.45);
font-size: .6rem;
}
.watch-options-section {
min-height: 220px;
}
.watch-loading-shell {
display: grid;
gap: 14px;
}
.watch-quality-skeletons {
display: flex;
gap: 8px;
overflow: hidden;
}
.watch-quality-skeletons i {
width: 82px;
height: 34px;
flex: 0 0 auto;
border-radius: 10px;
background: linear-gradient(100deg,rgba(255,255,255,.05) 22%,rgba(155,77,255,.18) 44%,rgba(20,215,255,.11) 52%,rgba(255,255,255,.05) 72%);
background-size: 240% 100%;
animation: novaWatchShimmer 1.05s linear infinite;
}
.watch-server-skeletons {
display: grid;
gap: 10px;
}
.watch-server-skeletons > div {
min-height: 66px;
display: grid;
grid-template-columns: 44px minmax(0,1fr) 28px;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 13px;
background: rgba(255,255,255,.025);
}
.watch-server-skeletons span {
width: 44px;
height: 44px;
border-radius: 11px;
background: rgba(255,255,255,.07);
}
.watch-server-skeletons b {
width: 62%;
height: 11px;
border-radius: 999px;
background: linear-gradient(90deg,rgba(255,255,255,.06),rgba(155,77,255,.15),rgba(255,255,255,.06));
background-size: 220% 100%;
animation: novaWatchShimmer 1.05s linear infinite;
}
.watch-server-skeletons em,
.watch-loading-note > i {
width: 22px;
height: 22px;
border: 2px solid rgba(255,255,255,.14);
border-top-color: var(--nova-purple);
border-right-color: var(--nova-cyan);
border-radius: 50%;
animation: novaWatchSpin .75s linear infinite;
}
.watch-loading-note {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
color: rgba(255,255,255,.52);
font-size: .72rem;
}
.watch-quality-row {
margin: 12px 0 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.watch-quality-row span {
min-height: 32px;
padding: 0 12px;
display: inline-flex;
align-items: center;
border: 1px solid rgba(155,77,255,.30);
border-radius: 10px;
color: rgba(255,255,255,.86);
background: rgba(155,77,255,.07);
font-size: .7rem;
font-weight: 800;
}
.watch-empty-state {
min-height: 300px;
padding: 28px 18px 20px;
display: grid;
justify-items: center;
align-content: center;
text-align: center;
}
.watch-empty-illustration {
position: relative;
width: 128px;
height: 112px;
margin-bottom: 14px;
}
.watch-empty-cloud {
position: absolute;
top: 4px;
left: 20px;
width: 88px;
height: 58px;
border: 2px solid rgba(155,77,255,.62);
border-radius: 36px;
background: rgba(155,77,255,.035);
box-shadow: 0 0 28px rgba(155,77,255,.08);
}
.watch-empty-cloud::after {
content: "×";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #C44DFF;
font-size: 2rem;
font-weight: 300;
}
.watch-empty-server {
position: absolute;
right: 27px;
bottom: 0;
width: 74px;
display: grid;
gap: 4px;
}
.watch-empty-server i {
height: 18px;
border: 1px solid rgba(20,215,255,.24);
border-radius: 6px;
background: linear-gradient(90deg,rgba(155,77,255,.10),rgba(20,215,255,.04));
}
.watch-empty-state h3 {
margin: 0;
color: #fff;
font-size: clamp(1.05rem,3vw,1.35rem);
font-weight: 950;
}
.watch-empty-state p {
max-width: 460px;
margin: 10px 0 0;
color: rgba(255,255,255,.55);
font-size: .78rem;
line-height: 1.75;
}
.watch-retry-button {
min-height: 44px;
margin-top: 17px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid transparent;
border-radius: 12px;
color: #fff;
background: linear-gradient(#030307,#030307) padding-box, linear-gradient(100deg,var(--nova-pink),var(--nova-purple),var(--nova-cyan)) border-box;
}
@keyframes novaWatchShimmer { to { background-position-x: -220%; } }
@keyframes novaWatchSpin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
.cinematic-actions {
gap: 10px;
}
.cinematic-secondary-action {
min-height: 50px;
padding: 0 12px;
border-radius: 12px;
}
.secondary-action-icon {
width: 30px;
height: 30px;
background: transparent;
}
.reference-story-block.story-first {
margin-bottom: 16px;
padding-bottom: 16px;
}
.reference-production-card {
margin-top: 14px;
min-width: 0;
}
.reference-production-company {
grid-template-columns: 52px minmax(0,1fr);
}
.reference-production-logo {
width: 52px;
height: 52px;
}
}
@media (prefers-reduced-motion: reduce) {
.cinematic-secondary-action,
.cinematic-secondary-action::after,
.secondary-action-icon,
.watch-quality-skeletons i,
.watch-server-skeletons b,
.watch-server-skeletons em,
.watch-loading-note > i { animation: none !important; transition: none !important; }
}
/* =========================================================
STAGE 9 — STANDALONE EPISODE COMMERCIAL RESTRUCTURE
Story → Details → Watch, exact action spacing, premium states.
========================================================= */
.standalone-episode-page {
--episode9-purple:#C25DFF;
--episode9-blue:#6D7DFF;
--episode9-cyan:#4BE9FF;
--episode9-grad:linear-gradient(105deg,#C25DFF,#6D7DFF 52%,#4BE9FF);
background:#000 !important;
}
.standalone-episode-hero-frame {
border-color:rgba(109,125,255,.16) !important;
background:#08090e !important;
}
.standalone-episode-hero-content {
background:linear-gradient(145deg,#0c0d14,#07080c) !important;
}
.standalone-episode-hero-content::before,
.standalone-story-card::before {
background:var(--episode9-grad) !important;
}
.standalone-episode-actions {
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) !important;
gap:10px !important;
}
.standalone-episode-play {
color:#fff !important;
background:var(--episode9-grad) !important;
box-shadow:0 13px 30px rgba(92,70,235,.20) !important;
}
.standalone-episode-state-action {
min-width:0;
min-height:48px;
padding:0 12px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid rgba(109,125,255,.22);
border-radius:10px;
color:#EDEFFF;
background:#0A0B11;
font:850 .70rem Tajawal,Arial,sans-serif;
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.standalone-episode-state-action:active { transform:scale(.975); }
.standalone-episode-state-action.favorite.active {
border-color:rgba(194,93,255,.54);
color:#fff;
background:linear-gradient(120deg,rgba(194,93,255,.22),rgba(74,34,92,.18));
box-shadow:0 0 0 1px rgba(194,93,255,.08) inset,0 10px 26px rgba(194,93,255,.10);
}
.standalone-episode-state-action.mylist.active {
border-color:rgba(75,233,255,.48);
color:#fff;
background:linear-gradient(120deg,rgba(109,125,255,.22),rgba(75,233,255,.09));
box-shadow:0 0 0 1px rgba(75,233,255,.06) inset,0 10px 26px rgba(75,233,255,.07);
}
.standalone-episode-state-action.favorite.active svg { color:#E574FF; }
.standalone-episode-state-action.mylist.active svg { color:#82EEFF; }
.standalone-episode-tabs {
min-height:54px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:end;
gap:4px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.standalone-episode-tabs button {
position:relative;
min-height:50px;
border:0;
color:rgba(255,255,255,.50);
background:transparent;
font:900 .78rem Tajawal,Arial,sans-serif;
}
.standalone-episode-tabs button.active { color:#fff; }
.standalone-episode-tabs button.active::after {
content:"";
position:absolute;
right:18%;
bottom:-1px;
left:18%;
height:3px;
border-radius:999px;
background:var(--episode9-grad);
}
.standalone-section-heading-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.standalone-section-heading-row svg { color:#A980FF; }
.standalone-episode-narrative { display:block !important; }
.standalone-story-card.episode-story { width:100%; }
.standalone-story-card.episode-story h2 { margin-top:8px !important; }
.standalone-episode-info-panel {
padding:20px 22px;
border:1px solid rgba(109,125,255,.13);
border-radius:15px;
background:linear-gradient(145deg,#0c0e16,#07080c);
}
.standalone-episode-info-panel header h2 {
margin:3px 0 0;
color:#fff;
font-size:1rem;
font-weight:950;
}
.standalone-episode-info-grid {
margin-top:15px;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border:1px solid rgba(255,255,255,.065);
border-radius:12px;
overflow:hidden;
}
.standalone-episode-info-grid > div {
min-height:70px;
padding:12px 14px;
display:grid;
gap:4px;
align-content:center;
border-left:1px solid rgba(255,255,255,.055);
border-bottom:1px solid rgba(255,255,255,.055);
}
.standalone-episode-info-grid > div:nth-child(3n) { border-left:0; }
.standalone-episode-info-grid > div:nth-last-child(-n+3) { border-bottom:0; }
.standalone-episode-info-grid span { color:rgba(255,255,255,.43); font-size:.60rem; }
.standalone-episode-info-grid strong { color:#F5F6FF; font-size:.78rem; font-weight:850; }
.standalone-episode-info-grid strong.available { color:#8CE6BA; }
.standalone-series-return.compact {
width:auto !important;
min-height:38px !important;
margin-top:14px;
padding-inline:13px !important;
display:inline-flex;
align-items:center;
gap:8px;
color:#C8CCE0 !important;
border:1px solid rgba(109,125,255,.15) !important;
border-radius:9px !important;
background:#0A0B11 !important;
}
.standalone-source-panel {
border-color:rgba(109,125,255,.13) !important;
background:linear-gradient(145deg,#0c0e16,#07080c) !important;
}
.standalone-source-panel > header p { color:rgba(255,255,255,.48) !important; }
.standalone-source-count {
border-color:rgba(109,125,255,.16) !important;
background:#0A0B11 !important;
}
.standalone-watch-loading {
margin-top:15px;
display:grid;
gap:13px;
}
.standalone-quality-skeletons {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.standalone-quality-skeletons span {
height:40px;
border:1px solid rgba(109,125,255,.09);
border-radius:10px;
background:linear-gradient(100deg,#0b0d14 10%,#151827 46%,#0b0d14 80%);
background-size:220% 100%;
animation:standalone-watch-shimmer 1.15s linear infinite;
}
.standalone-server-skeletons { display:grid; gap:8px; }
.standalone-server-skeletons span {
height:68px;
border:1px solid rgba(109,125,255,.09);
border-radius:11px;
background:linear-gradient(100deg,#0b0d14 10%,#151827 46%,#0b0d14 80%);
background-size:220% 100%;
animation:standalone-watch-shimmer 1.15s linear infinite;
}
.standalone-watch-loading > small {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
color:rgba(255,255,255,.48);
font-size:.65rem;
}
@keyframes standalone-watch-shimmer { to { background-position-x:-220%; } }
.standalone-watch-empty {
margin-top:15px;
min-height:190px;
padding:22px;
display:grid;
justify-items:center;
align-content:center;
gap:8px;
border:1px solid rgba(109,125,255,.12);
border-radius:13px;
text-align:center;
background:radial-gradient(circle at 50% 20%,rgba(109,125,255,.07),transparent 46%),#090a10;
}
.standalone-watch-empty-icon {
width:58px;
height:58px;
display:grid;
place-items:center;
border:1px solid rgba(109,125,255,.22);
border-radius:16px;
color:#A980FF;
background:#0C0E17;
}
.standalone-watch-empty strong { color:#fff; font-size:.9rem; }
.standalone-watch-empty p { max-width:500px; margin:0; color:rgba(255,255,255,.48); font-size:.67rem; line-height:1.7; }
.standalone-watch-empty button {
min-height:38px;
margin-top:4px;
padding:0 14px;
display:inline-flex;
align-items:center;
gap:7px;
border:1px solid transparent;
border-radius:9px;
color:#fff;
background:linear-gradient(#090a10,#090a10) padding-box,var(--episode9-grad) border-box;
font:850 .66rem Tajawal,Arial,sans-serif;
}
.standalone-related-episodes.compact-navigation {
padding:18px 20px;
border:1px solid rgba(109,125,255,.13);
border-radius:15px;
background:#090A10;
}
.standalone-related-episodes.compact-navigation > header {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}
.standalone-related-episodes.compact-navigation > header svg { color:#A980FF; }
.standalone-episode-jump-rail {
display:flex;
gap:8px;
overflow-x:auto;
direction:rtl;
scrollbar-width:none;
}
.standalone-episode-jump-rail::-webkit-scrollbar { display:none; }
.standalone-episode-jump-rail button {
flex:0 0 auto;
min-width:112px;
min-height:48px;
padding:7px 11px;
display:grid;
justify-items:center;
align-content:center;
gap:3px;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
color:#EDEFFF;
background:#0D0F16;
font-family:inherit;
}
.standalone-episode-jump-rail button:active {
border-color:rgba(75,233,255,.40);
transform:scale(.98);
}
.standalone-episode-jump-rail button span { font-size:.68rem; font-weight:850; }
.standalone-episode-jump-rail button small { color:rgba(255,255,255,.40); font-size:.54rem; }
@media(max-width:1120px){
.standalone-episode-actions { grid-template-columns:1.2fr 1fr !important; }
.standalone-episode-play { grid-column:1 / -1; }
}
@media(max-width:820px){
.standalone-episode-tabs { margin-top:2px; }
.standalone-episode-actions { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.standalone-episode-play { grid-column:1 / -1; }
.standalone-episode-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.standalone-episode-info-grid > div:nth-child(3n) { border-left:1px solid rgba(255,255,255,.055); }
.standalone-episode-info-grid > div:nth-child(2n) { border-left:0; }
.standalone-episode-info-grid > div:nth-last-child(-n+3) { border-bottom:1px solid rgba(255,255,255,.055); }
.standalone-episode-info-grid > div:nth-last-child(-n+2) { border-bottom:0; }
}
@media(max-width:560px){
.standalone-episode-actions { gap:8px !important; }
.standalone-episode-state-action { min-height:45px; font-size:.64rem; }
.standalone-episode-tabs { min-height:50px; }
.standalone-episode-tabs button { min-height:46px; font-size:.70rem; }
.standalone-episode-info-panel,
.standalone-related-episodes.compact-navigation { padding:15px; border-radius:13px; }
.standalone-episode-info-grid > div { min-height:64px; padding:10px; }
.standalone-quality-skeletons { grid-template-columns:repeat(2,minmax(0,1fr)); }
.standalone-watch-empty { min-height:170px; padding:18px 14px; }
.standalone-episode-jump-rail button { min-width:104px; }
}
@media(prefers-reduced-motion:reduce){
.standalone-quality-skeletons span,
.standalone-server-skeletons span,
.standalone-episode-state-action,
.standalone-episode-jump-rail button { animation:none!important; transition:none!important; }
}
/* Stage 9 active favorite state marker. */
.favorite-icon-state { position:relative; }
.favorite-state-check {
position:absolute;
right:-5px;
bottom:-5px;
width:16px;
height:16px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.26);
border-radius:50%;
color:#fff;
background:#08090e;
}
.cinematic-secondary-action.favorite-action.active .favorite-state-check {
color:#fff;
border-color:rgba(75,233,255,.38);
background:linear-gradient(135deg,#C25DFF,#6D7DFF 55%,#4BE9FF);
}
.compact-series-story { margin-top:12px; }
/* =========================================================
Nova+ details surfaces — pure black policy
Requested visual rule: all non-media detail surfaces use #000000 only.
Hero/poster imagery and Nova accent controls remain untouched.
========================================================= */
:root,
.nova-app,
.details-app,
.cinematic-details-page {
--nova-bg-master: #000000 !important;
--nova-surface-dark: #000000 !important;
--nova-surface-card: #000000 !important;
--nova-surface-hover: #000000 !important;
--details-panel: #000000 !important;
--details-panel-soft: #000000 !important;
}
.details-app,
.details-page-shell,
.cinematic-details-page,
.cinematic-details-content,
.cinematic-desktop-content,
.cinematic-mobile-content,
.reference-wide-details-grid,
.reference-desktop-grid,
.reference-primary-column,
.reference-side-column,
.reference-panel,
.reference-watch-panel,
.reference-info-panel,
.reference-related-panel,
.reference-production-card,
.reference-production-logo,
.nova-content-section,
.episode-panel,
.watch-options-section,
.standalone-episode-page,
.standalone-episode-hero-frame,
.standalone-episode-media,
.standalone-episode-hero-content,
.standalone-episode-body,
.standalone-episode-narrative,
.standalone-story-card,
.standalone-related-episodes,
.standalone-navigation-card,
.nova-channel-details,
.channel-detail-content,
.channel-detail-panel {
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
}
.reference-season-tabs button,
.reference-season-tabs button.active,
.reference-episode-card,
.reference-episode-card:hover,
.watch-server-skeletons > div,
.server-option,
.server-card,
.server-row,
.quality-chip,
.quality-chip.active,
.standalone-episode-meta span,
.cinematic-secondary-action,
.cinematic-secondary-action.active,
.secondary-action-icon,
.reference-production-company,
.reference-promo-card {
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
}
/* Keep media itself visible; only its empty/fallback canvas is pure black. */
.related-poster-shell,
.reference-related-card img,
.reference-episode-thumb,
.standalone-episode-media img,
.cinematic-details-backdrop-shell {
background-color: #000000 !important;
}
/* Anime semantic details: keep the existing details architecture, only allow
multi-value taxonomy and character labels to breathe inside the native grid. */
.reference-info-grid > .reference-anime-genres {
grid-column: span 2;
}
.reference-info-grid > .reference-anime-genres dd {
overflow: visible;
white-space: normal;
line-height: 1.55;
text-overflow: clip;
}
.reference-anime-characters .anime-character-card small {
white-space: normal;
line-height: 1.35;
}
@media (max-width: 680px) {
.reference-info-grid > .reference-anime-genres {
grid-column: 1 / -1;
}
}
/* Anime semantic hero facts: same NOVA+ details palette and surface language. */
.anime-hero-facts {
width: min(780px, 100%);
margin: 14px 0 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.anime-hero-facts > div {
min-width: 0;
padding: 9px 11px;
display: grid;
gap: 4px;
border: 1px solid var(--oscar-border);
border-radius: 9px;
background: var(--oscar-bg);
backdrop-filter: blur(10px);
}
.anime-hero-facts dt,
.anime-hero-facts dd {
margin: 0;
}
.anime-hero-facts dt {
color: var(--oscar-muted);
font-size: .62rem;
font-weight: 750;
}
.anime-hero-facts dd {
overflow: hidden;
color: var(--oscar-text);
font-size: .76rem;
font-weight: 850;
line-height: 1.45;
text-overflow: ellipsis;
}
.anime-hero-facts-wide {
grid-column: 1 / -1;
}
.anime-hero-facts-wide dd {
white-space: normal;
}
@media (max-width: 820px) {
.anime-hero-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.anime-hero-facts > div {
padding: 7px 9px;
border-radius: 8px;
}
.anime-hero-facts dt {
font-size: .56rem;
}
.anime-hero-facts dd {
font-size: .68rem;
}
}
/* Final freeze — direction must win over legacy RTL presentation rules. */
.details-app .reference-story-block .reference-details-story.nova-directional-text[dir="ltr"],
.details-app .details-standard-title h1[dir="ltr"],
.details-app .cinematic-title[dir="ltr"] {
direction:ltr !important;
text-align:left !important;
unicode-bidi:plaintext;
}
.details-app .reference-story-block .reference-details-story.nova-directional-text[dir="rtl"],
.details-app .details-standard-title h1[dir="rtl"],
.details-app .cinematic-title[dir="rtl"] {
direction:rtl !important;
text-align:right !important;
unicode-bidi:plaintext;
}
/* ORIGINAL SOURCE: Components/Pages/Discover.razor.css */
:host{display:block;min-height:100dvh;background:#000!important}
.discover-page{min-height:100dvh;background:#000!important;color:#fff;padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 26px);font-family:Tajawal,Arial,sans-serif;overflow-x:hidden}
.discover-shell{width:100%;min-height:100dvh;background:#000!important}
.discover-loading,.discover-error{min-height:calc(100dvh - var(--bottom-nav-h,76px));display:grid;place-items:center;align-content:center;gap:14px;text-align:center;background:#000;color:#fff}.discover-loading span{width:34px;height:34px;border:2px solid rgba(255,255,255,.15);border-top-color:#1da8ff;border-radius:50%;animation:discover-spin .8s linear infinite}.discover-error p{max-width:520px;color:rgba(255,255,255,.62)}.discover-error button{height:42px;padding:0 20px;border:1px solid transparent;border-radius:10px;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c629ff,#754cff,#16a7ff) border-box;color:#fff;font:inherit;font-weight:900}@keyframes discover-spin{to{transform:rotate(360deg)}}
.discover-desktop{min-height:calc(100dvh - var(--bottom-nav-h,76px));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);direction:ltr;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}
.discover-desktop-catalog,.discover-desktop-preview{direction:rtl;min-width:0;background:#000}
.discover-desktop-catalog{padding:clamp(22px,2.4vw,38px) clamp(18px,2.5vw,40px) 42px;border-right:1px solid rgba(255,255,255,.1);overflow:hidden}
.discover-desktop-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.discover-desktop-header h1{margin:0;font-size:clamp(1.65rem,2.5vw,2.6rem);font-weight:950}.discover-desktop-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.discover-desktop-tabs button,.discover-result-tabs button{height:38px;padding:0 18px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#000;color:rgba(255,255,255,.72);font:inherit;font-weight:800;cursor:pointer}.discover-desktop-tabs button.active,.discover-result-tabs button.active{border-color:transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#704eff 52%,#17a9ff) border-box;color:#fff}
.discover-desktop-filters{display:grid;grid-template-columns:1.5fr repeat(4,minmax(105px,1fr));gap:10px;margin-bottom:20px}.discover-desktop-filters label{min-width:0;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#000;display:flex;align-items:center;padding:0 10px}.discover-desktop-filters select{width:100%;height:100%;border:0;outline:0;background:#000;color:#fff;font:inherit;font-size:.78rem;cursor:pointer}.discover-sort-control{gap:8px}.discover-sort-control .oscar-icon{color:#8f56ff;flex:0 0 auto}
.discover-desktop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px}.discover-desktop-card{min-width:0;cursor:pointer;outline:0}.discover-desktop-art{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#000}.discover-desktop-art img{width:100%;height:100%;object-fit:cover}.discover-desktop-card.selected .discover-desktop-art{border-color:transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#704eff 52%,#17a9ff) border-box;box-shadow:0 0 0 2px rgba(112,78,255,.13)}.discover-desktop-card>strong{display:block;margin-top:8px;overflow:hidden;color:#fff;font-size:.86rem;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.discover-desktop-card>small{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;color:rgba(255,255,255,.52);font-size:.68rem}.discover-desktop-card>small span{display:inline-flex;align-items:center;gap:4px}.discover-desktop-card>small span:first-child{color:#a55aff}.discover-badge{position:absolute;top:8px;right:8px;z-index:3;min-height:24px;padding:0 8px;display:inline-flex;align-items:center;border-radius:6px;background:linear-gradient(100deg,#a328ff,#236fff);color:#fff;font-size:.64rem;font-weight:950}.discover-badge.inline{position:static}.discover-favorite-button{position:absolute;top:8px;left:8px;z-index:4;width:31px;height:31px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:#000;color:#fff;cursor:pointer}.discover-favorite-button.active{color:#b351ff;border-color:#b351ff}
.discover-desktop-preview{position:sticky;top:0;align-self:start;height:calc(100dvh - var(--bottom-nav-h,76px));overflow-y:auto;scrollbar-width:thin;scrollbar-color:#4e2b78 #000}.discover-preview-hero{position:relative;min-height:clamp(560px,67vh,780px);overflow:hidden;background:#000}.discover-preview-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.discover-preview-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 12%,rgba(0,0,0,.2) 40%,#000 79%,#000 100%),linear-gradient(90deg,rgba(0,0,0,.08),transparent)}.discover-preview-copy{position:absolute;right:clamp(28px,4vw,64px);bottom:24px;left:clamp(28px,4vw,64px);z-index:2}.discover-preview-copy h2{margin:0 0 14px;font-size:clamp(2.1rem,4.2vw,4.6rem);line-height:1;font-weight:950}.discover-preview-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:rgba(255,255,255,.7);font-size:.82rem}.discover-preview-meta span:not(.discover-badge){padding-inline-end:10px;border-inline-end:1px solid rgba(255,255,255,.18)}.discover-preview-meta b{display:inline-flex;align-items:center;gap:5px;color:#c05cff}.discover-preview-actions{display:grid;grid-template-columns:minmax(170px,1fr) minmax(140px,.78fr);gap:10px;margin-top:20px}.discover-preview-actions button{height:48px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:#000;color:#fff;font:inherit;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer}.discover-preview-actions .primary{border:0;background:linear-gradient(100deg,#b51cff,#6352ff 52%,#10a9ff)}.discover-preview-copy p{margin:18px 0 10px;color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.85;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.discover-preview-copy dl{margin:0;display:grid;gap:5px}.discover-preview-copy dl div{display:flex;gap:8px;font-size:.78rem}.discover-preview-copy dt{color:#fff;font-weight:900}.discover-preview-copy dd{margin:0;color:rgba(255,255,255,.62);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.discover-preview-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:20px clamp(28px,4vw,64px);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);background:#000}.discover-preview-facts>div{min-width:0;padding:8px 14px;display:grid;place-items:center;gap:5px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.1)}.discover-preview-facts>div:first-child{border-inline-start:0}.discover-preview-facts .oscar-icon{color:#8d54ff}.discover-preview-facts strong{font-size:.73rem}.discover-preview-facts span{max-width:100%;overflow:hidden;color:rgba(255,255,255,.55);font-size:.68rem;white-space:nowrap;text-overflow:ellipsis}.discover-similar{padding:22px clamp(28px,4vw,64px) 40px}.discover-similar h3{margin:0 0 14px;font-size:1.05rem}.discover-similar>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.discover-similar button{min-width:0;padding:0;border:0;background:#000;color:#fff;text-align:right;font:inherit;cursor:pointer}.discover-similar button img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid rgba(255,255,255,.12);border-radius:8px}.discover-similar button strong{display:block;margin-top:7px;overflow:hidden;font-size:.72rem;white-space:nowrap;text-overflow:ellipsis}.discover-similar button small{display:flex;align-items:center;gap:4px;margin-top:3px;color:#a55aff;font-size:.62rem}
.discover-mobile{display:none}
.discover-mobile-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.discover-mobile-header h1{margin:0;font-size:2rem;font-weight:950}.discover-mobile-header p{margin:5px 0 0;color:rgba(255,255,255,.55);font-size:.85rem}.discover-mobile-header img{width:54px;height:54px;object-fit:contain}.discover-search-box{position:relative;min-height:66px;margin-top:24px;padding:2px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;border:2px solid transparent;border-radius:999px;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c629ff,#734eff 50%,#1da8ff) border-box}.discover-search-box input{width:100%;height:58px;padding:0 8px;border:0;outline:0;background:#000;color:#fff;text-align:right;font:inherit;font-size:1rem}.discover-search-box input::placeholder{color:rgba(255,255,255,.42)}.discover-search-submit{width:54px;height:54px;margin:3px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#25a5ff,#7150ff 52%,#a32eff)}.discover-search-icon,.discover-clear-search{width:48px;height:48px;display:grid;place-items:center;color:#fff}.discover-clear-search{border:0;border-radius:50%;background:#000}.discover-search-spinner{width:22px;height:22px;margin-inline:12px;border:2px solid rgba(255,255,255,.15);border-top-color:#8f4dff;border-radius:50%;animation:discover-spin .75s linear infinite}
.discover-mobile-section{margin-top:30px}.discover-section-heading{min-height:34px;margin-bottom:13px;display:flex;align-items:center;justify-content:space-between;gap:12px}.discover-section-heading h2{margin:0;display:flex;align-items:center;gap:8px;font-size:1.05rem}.discover-section-heading h2 .oscar-icon{color:#9854ff}.discover-section-heading button{border:0;background:#000;color:#a85cff;font:inherit;font-size:.75rem}.discover-chip-row{display:flex;align-items:center;gap:9px;overflow-x:auto;padding:2px 1px 6px;scrollbar-width:none}.discover-chip-row::-webkit-scrollbar{display:none}.discover-recent-chip{flex:0 0 auto;height:42px;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:#000;overflow:hidden}.discover-chip-value,.discover-chip-remove{height:40px;border:0;background:#000;color:rgba(255,255,255,.7);font:inherit}.discover-chip-value{padding:0 15px 0 8px}.discover-chip-remove{width:36px}.discover-topic-chip{height:42px;padding:0 17px;flex:0 0 auto;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#000;color:rgba(255,255,255,.72);font:inherit}.discover-topic-chip.active{border-color:transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#704eff 52%,#17a9ff) border-box;color:#5eafff}.discover-smart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.discover-smart-card{min-height:150px;padding:16px 8px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#000;color:#fff;display:grid;place-items:center;align-content:center;gap:6px;font:inherit}.discover-smart-card span{color:#a55cff}.discover-smart-card strong{font-size:.82rem}.discover-smart-card small{color:rgba(255,255,255,.5);font-size:.64rem;text-align:center}.discover-result-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow-x:auto}.discover-result-tabs button{min-width:80px;height:38px;padding:0 10px;font-size:.72rem}.discover-results-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 9px;margin-top:14px}.discover-result-card{min-width:0}.discover-result-art{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#000}.discover-result-art img{width:100%;height:100%;object-fit:cover}.discover-result-card>strong{display:block;margin-top:7px;overflow:hidden;color:#fff;font-size:.76rem;white-space:nowrap;text-overflow:ellipsis}.discover-result-card>small{display:block;margin-top:3px;overflow:hidden;color:rgba(255,255,255,.5);font-size:.62rem;white-space:nowrap;text-overflow:ellipsis}.discover-rating,.discover-live-badge{position:absolute;right:7px;bottom:7px;z-index:3;min-height:23px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border-radius:5px;background:#000;color:#b15cff;font-size:.62rem;font-weight:900}.discover-live-badge{color:#fff;border:1px solid #9f45ff}.discover-empty-results{min-height:220px;display:grid;place-items:center;align-content:center;gap:8px;color:rgba(255,255,255,.5);text-align:center}.discover-empty-results strong{color:#fff}.discover-empty-results span{font-size:.76rem}
@media(max-width:1190px) and (min-width:861px){.discover-desktop{grid-template-columns:minmax(0,1fr) minmax(430px,.85fr)}.discover-desktop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.discover-desktop-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.discover-sort-control{grid-column:span 2}.discover-preview-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.discover-preview-facts>div:nth-child(3){border-inline-start:0}.discover-preview-actions{grid-template-columns:1fr}.discover-preview-copy h2{font-size:2.5rem}}
@media(max-width:860px){.discover-desktop{display:none}.discover-mobile{display:block;width:min(100% - 28px,760px);margin:0 auto;padding:calc(var(--safe-top,0px) + 24px) 0 34px}.discover-page{padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 22px)}}
@media(max-width:480px){.discover-mobile{width:min(100% - 20px,760px);padding-top:calc(var(--safe-top,0px) + 16px)}.discover-mobile-header h1{font-size:1.65rem}.discover-mobile-header p{font-size:.73rem}.discover-mobile-header img{width:46px;height:46px}.discover-search-box{min-height:58px;margin-top:18px}.discover-search-box input{height:50px;font-size:.88rem}.discover-search-submit{width:48px;height:48px}.discover-search-icon,.discover-clear-search{width:42px;height:42px}.discover-mobile-section{margin-top:24px}.discover-smart-card{min-height:132px;padding:12px 6px}.discover-smart-card strong{font-size:.72rem}.discover-smart-card small{font-size:.56rem}.discover-results-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 7px}.discover-result-tabs{margin-inline:-2px}}
.discover-desktop-search{height:46px;margin-bottom:12px;padding:0 13px;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:#000;color:#fff}.discover-desktop-search input{width:100%;height:42px;border:0;outline:0;background:#000;color:#fff;text-align:right;font:inherit}.discover-desktop-search input::placeholder{color:rgba(255,255,255,.42)}.discover-desktop-search button{width:32px;height:32px;border:0;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}.discover-desktop-search .discover-search-spinner{width:19px;height:19px;margin:0;border-width:2px}
/* ORIGINAL SOURCE: Components/Pages/Favorites.razor.css */
:host{display:block;min-height:100dvh;background:#000!important}.favorites-page-app{min-height:100dvh;background:#000!important;color:#fff;font-family:Tajawal,Arial,sans-serif;padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px))}.favorites-pro-header{position:fixed;z-index:160;top:0;right:0;left:0;height:calc(72px + var(--safe-top,0px));padding:var(--safe-top,0px) max(clamp(16px,3vw,38px),var(--safe-right,0px)) 0 max(clamp(16px,3vw,38px),var(--safe-left,0px));display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}.favorites-pro-header img{width:46px;height:46px;object-fit:contain}.favorites-pro-header h1{margin:0;text-align:right;font-size:1.6rem;font-weight:950}.favorites-pro-header>div{display:flex;gap:6px}.favorites-pro-header button{width:40px;height:40px;border:0;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}.favorites-page-shell{min-height:100dvh;padding:calc(92px + var(--safe-top,0px)) clamp(14px,3vw,44px) calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 34px);background:#000!important;overflow-x:hidden}.favorites-page-content{width:min(100%,1400px);margin:0 auto;display:grid;gap:20px}.favorites-filters{display:flex;align-items:center;gap:9px;overflow-x:auto;scrollbar-width:none}.favorites-filters::-webkit-scrollbar{display:none}.favorites-filters button{height:40px;padding:0 20px;flex:0 0 auto;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:#000;color:rgba(255,255,255,.7);font:inherit;font-weight:800}.favorites-filters button.active{border-color:transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box;color:#fff}.favorites-featured{position:relative;min-height:300px;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:#000}.favorites-featured-art,.favorites-featured-art img{position:absolute;inset:0;width:100%;height:100%}.favorites-featured-art img{object-fit:cover}.favorites-featured-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.1),#000 78%),linear-gradient(180deg,transparent,#000 115%)}.favorites-featured-copy{position:absolute;right:clamp(22px,5vw,76px);top:50%;z-index:2;width:min(46%,520px);transform:translateY(-50%)}.favorites-featured-copy>span{display:inline-block;padding:5px 10px;border:1px solid #9a4fff;border-radius:999px;color:#ae58ff;font-size:.72rem}.favorites-featured-copy h2{margin:12px 0 6px;font-size:clamp(1.9rem,4vw,4rem);line-height:1;font-weight:950}.favorites-featured-copy p{margin:0;color:rgba(255,255,255,.58)}.favorites-featured-copy button{height:48px;margin-top:18px;padding:0 28px;border:0;border-radius:9px;background:linear-gradient(100deg,#b51cff,#6352ff,#10a9ff);color:#fff;font:inherit;font-weight:900;display:flex;align-items:center;gap:8px}.favorites-featured-remove{position:absolute;top:18px;left:18px;z-index:3;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:#000;color:#a650ff}.favorites-toolbar{display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.55);font-size:.76rem}.favorites-toolbar strong{color:#fff}.favorites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 14px}.favorites-card{min-width:0;cursor:pointer}.favorites-card-art{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#000}.favorites-card-art img{width:100%;height:100%;object-fit:cover}.favorites-card-art button{position:absolute;top:8px;left:8px;width:31px;height:31px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#000;color:#a34fff;display:grid;place-items:center}.favorites-card-art>span{position:absolute;right:8px;top:8px;padding:4px 7px;border-radius:5px;background:#000;color:#fff;border:1px solid #7f4cff;font-size:.58rem}.favorites-card>strong{display:block;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.84rem}.favorites-card>small{display:block;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgba(255,255,255,.48);font-size:.65rem}.favorites-empty{min-height:450px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center;color:#fff}.favorites-empty>.oscar-icon{color:#9b52ff}.favorites-empty h2{margin:0}.favorites-empty p{margin:0;max-width:520px;color:rgba(255,255,255,.58)}.favorites-empty button{height:42px;padding:0 18px;border:1px solid transparent;border-radius:9px;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box;color:#fff;font:inherit;font-weight:900}.favorites-skeletons div{aspect-ratio:2/3;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#000;overflow:hidden}.favorites-skeletons i{display:block;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:favorites-shimmer 1.2s infinite}@keyframes favorites-shimmer{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@media(max-width:700px){.favorites-pro-header{height:calc(64px + var(--safe-top,0px));grid-template-columns:42px 1fr auto;padding-inline:12px}.favorites-pro-header img{width:38px;height:38px}.favorites-pro-header h1{font-size:1.35rem}.favorites-page-shell{padding-top:calc(78px + var(--safe-top,0px));padding-inline:11px}.favorites-featured{min-height:305px}.favorites-featured-shade{background:linear-gradient(180deg,rgba(0,0,0,.05),#000 82%)}.favorites-featured-copy{right:18px;bottom:18px;top:auto;left:18px;width:auto;transform:none}.favorites-featured-copy h2{font-size:1.8rem}.favorites-featured-copy p{font-size:.72rem}.favorites-featured-copy button{width:100%;justify-content:center}.favorites-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 8px}.favorites-toolbar span{display:none}}
@media(max-width:410px){.favorites-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.favorites-featured{min-height:330px}}
.favorites-load-more{justify-self:center;min-width:180px;height:44px;padding:0 24px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#090909;color:#fff;font:inherit;font-weight:900;cursor:pointer}.favorites-load-more:disabled{opacity:.55;cursor:default}
/* ORIGINAL SOURCE: Components/Pages/Home.razor.css */
:host {
display: block;
background: #000000;
}
.home-app {
position: relative;
isolation: isolate;
min-height: 100vh;
background: #000000 !important;
background-image: none !important;
padding-bottom: 0;
}
.home-main {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
overflow-x: hidden;
background: #000000 !important;
}
.target-home,
.target-home-reference,
.shahid-home-reference {
width: 100%;
max-width: 100%;
min-height: 0;
margin: 0;
padding: 0 0 calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 8px);
overflow: hidden;
background: #000000 !important;
background-image: none !important;
box-sizing: border-box;
}
/* صفحات التحميل والفراغ */
.home-loading-page,
.home-empty-page {
min-height: 72vh;
padding: calc(88px + var(--safe-top, 0px)) 22px 120px;
display: grid;
place-items: center;
align-content: center;
gap: 16px;
color: #ffffff;
text-align: center;
background: #000000 !important;
}
/* مؤشر التحميل بهوية Nova+ */
.home-loader-ring {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: #9B4DFF;
animation: home-loader-spin 0.85s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.home-loading-page strong,
.home-empty-page h1 {
margin: 0;
font-size: clamp(1.2rem, 3.5vw, 1.8rem);
font-weight: 950;
letter-spacing: -0.02em;
}
.home-loading-page small,
.home-empty-page p {
margin: 0;
color: rgba(255, 255, 255, 0.75);
font-size: 0.88rem;
line-height: 1.7;
font-weight: 600;
}
/* الأزرار الأساسية */
.primary-action {
min-height: 46px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
color: #ffffff;
font-weight: 900;
font-size: 0.95rem;
box-shadow: 0 12px 28px rgba(155, 77, 255, 0.28);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.primary-action:active {
transform: scale(0.96);
box-shadow: 0 6px 16px rgba(155, 77, 255, 0.2);
}
/* زر الاشتراك العائم */
.home-subscribe-cta {
position: fixed;
z-index: 149;
right: 50%;
bottom: calc(76px + var(--safe-bottom, 0px));
width: clamp(140px, 35vw, 220px);
min-height: 48px;
padding: 0 20px;
transform: translateX(50%);
border: 0;
border-radius: 999px;
color: #ffffff;
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
box-shadow: 0 12px 30px rgba(155, 77, 255, 0.35);
font-size: clamp(0.8rem, 1.85vw, 0.95rem);
font-weight: 950;
pointer-events: auto;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-subscribe-cta:active {
transform: translateX(50%) scale(0.96);
box-shadow: 0 8px 20px rgba(155, 77, 255, 0.25);
}
@keyframes home-loader-spin {
to {
transform: rotate(360deg);
}
}
/* الميديا كويري للهواتف الذكية */
@media (max-width: 600px) {
.home-app {
padding-bottom: 0;
}
.target-home,
.target-home-reference,
.shahid-home-reference {
padding-bottom: calc(var(--bottom-nav-h, 72px) + var(--safe-bottom, 0px) + 6px);
}
.home-subscribe-cta {
bottom: calc(71px + var(--safe-bottom, 0px));
width: 170px;
min-height: 44px;
font-size: 0.8rem;
}
.home-loader-ring {
width: 44px;
height: 44px;
border-width: 2.5px;
}
}
/* Facebook/X-style skeleton loading: no old centered loading message. */
.home-skeleton-page {
width: 100%;
min-height: 100vh;
padding: 0 0 112px;
background: #000000;
overflow: hidden;
}
.nova-shimmer {
position: relative;
overflow: hidden;
background: linear-gradient(110deg, rgba(255,255,255,0.055) 8%, rgba(151,0,198,0.16) 18%, rgba(86,109,255,0.12) 26%, rgba(255,255,255,0.055) 38%);
background-size: 220% 100%;
animation: nova-shimmer-sweep 1.12s linear infinite;
}
.home-hero-skeleton {
height: min(78vh, 760px);
min-height: 520px;
width: 100%;
border-radius: 0 0 34px 34px;
background-color: #070709;
box-shadow: inset 0 -180px 150px rgba(0,0,0,0.92);
}
.home-hero-skeleton::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 70% 26%, rgba(151,0,198,0.20), transparent 28%),
linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.95));
}
.home-hero-skeleton-copy {
position: absolute;
z-index: 2;
left: 24px;
right: 24px;
bottom: 84px;
display: grid;
justify-items: center;
gap: 14px;
}
.home-hero-skeleton-copy span,
.home-hero-skeleton-copy strong,
.home-hero-skeleton-copy small,
.home-hero-skeleton-copy b,
.home-skeleton-heading,
.home-skeleton-card {
display: block;
border-radius: 999px;
background-color: rgba(255,255,255,0.08);
}
.home-hero-skeleton-copy span { width: 82px; height: 14px; }
.home-hero-skeleton-copy strong { width: min(68vw, 360px); height: 48px; border-radius: 18px; }
.home-hero-skeleton-copy small { width: min(56vw, 280px); height: 16px; }
.home-hero-skeleton-copy div { display: flex; gap: 16px; margin-top: 8px; }
.home-hero-skeleton-copy b { width: min(38vw, 180px); height: 54px; }
.home-rail-skeleton-batch {
display: grid;
gap: 28px;
padding-top: 26px;
}
.home-rail-skeleton {
padding-inline: clamp(14px, 4vw, 34px);
}
.home-skeleton-heading {
width: min(58vw, 330px);
height: 28px;
margin: 0 0 16px auto;
border-radius: 12px;
}
.home-skeleton-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: clamp(122px, 30vw, 178px);
gap: 12px;
overflow: hidden;
direction: rtl;
}
.home-skeleton-card {
height: clamp(178px, 43vw, 258px);
border-radius: 18px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.home-lazy-sentinel {
min-height: 320px;
padding-bottom: 30px;
}
@keyframes nova-shimmer-sweep {
0% { background-position: 120% 0; }
100% { background-position: -120% 0; }
}
@media (max-width: 600px) {
.home-hero-skeleton {
height: 74vh;
min-height: 500px;
border-radius: 0 0 26px 26px;
}
.home-hero-skeleton-copy {
bottom: 70px;
gap: 12px;
}
.home-hero-skeleton-copy strong {
height: 42px;
border-radius: 16px;
}
.home-hero-skeleton-copy b {
height: 48px;
}
.home-rail-skeleton-batch {
gap: 24px;
padding-top: 22px;
}
.home-skeleton-row {
grid-auto-columns: 31vw;
gap: 10px;
}
.home-skeleton-card {
height: 46vw;
min-height: 150px;
border-radius: 14px;
}
}
/* Lightweight observer sentinel. The full branded loader is rendered only while a batch is actually loading. */
.home-lazy-sentinel {
position: relative;
min-height: 96px;
display: grid;
place-items: center;
padding: 8px 0 22px;
overflow: hidden;
}
.home-lazy-pulse {
width: 34px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, #31ddff, #6d72ff, #c45dff, transparent);
opacity: .28;
filter: drop-shadow(0 0 7px rgba(75, 130, 255, .5));
animation: home-lazy-pulse 2.8s ease-in-out infinite;
}
@keyframes home-lazy-pulse {
0%, 100% { opacity: .16; transform: scaleX(.58); }
50% { opacity: .48; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.home-lazy-pulse { animation: none; }
}
.home-motion-loading {
min-height: calc(100dvh - var(--bottom-nav-h, 76px));
padding-top: calc(76px + var(--safe-top, env(safe-area-inset-top, 0px)));
box-sizing: border-box;
background: transparent !important;
}
.home-motion-loading .nova-motion-loader {
min-height: calc(100dvh - var(--bottom-nav-h, 76px));
}
/* Pre-stage3 runtime spacing guard: observer geometry must never become visible dead space. */
.home-lazy-sentinel {
min-height: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
}
.target-home,
.target-home-reference,
.shahid-home-reference {
min-height: 0 !important;
}
/* ORIGINAL SOURCE: Components/Pages/HomeSections/HomeHeroSlider.razor.css */
:host {
display: block;
background: #000000;
}
/* Hero slider shell */
.target-home-hero-shell {
position: relative;
isolation: isolate;
width: 100%;
margin: 0 0 22px;
overflow: hidden;
background: #000000;
}
.target-home-hero-shell::after {
display: none;
content: none;
}
.target-home-hero-rail {
display: flex;
direction: rtl;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
cursor: grab;
}
.target-home-hero-rail:active {
cursor: grabbing;
}
.target-home-hero-rail::-webkit-scrollbar {
display: none;
}
/* Slide size: professional, prominent, not tiny */
.target-hero-slide {
position: relative;
z-index: 0;
flex: 0 0 100%;
width: 100%;
height: clamp(540px, 76dvh, 780px);
min-height: 540px;
overflow: hidden;
scroll-snap-align: center;
scroll-snap-stop: always;
cursor: pointer;
background: #000000;
}
/* Cinematic lower fade: keeps the artwork visible while grounding the copy and
actions over a deep, transparent black gradient. The overlay is deliberately
behind all hero controls, so button styling and interaction remain unchanged. */
.target-hero-slide::after {
content: "";
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 82% 34% at 50% 89%,
rgba(0,0,0,.34) 0%,
rgba(0,0,0,.13) 44%,
rgba(0,0,0,0) 74%),
linear-gradient(180deg,
rgba(0,0,0,0) 30%,
rgba(0,0,0,.025) 42%,
rgba(0,0,0,.12) 54%,
rgba(0,0,0,.34) 66%,
rgba(0,0,0,.64) 78%,
rgba(0,0,0,.88) 90%,
#000000 100%);
}
/* Hero image: natural brightness, no global dimming */
.target-hero-slide .safe-background-image {
position: absolute !important;
inset: 0;
z-index: 0;
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
object-position: center top;
filter: saturate(1) contrast(1.02) brightness(1);
transform: scale(1.002);
pointer-events: none;
}
/* Soft cinematic shade only for readability */
.target-hero-shade {
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg,
rgba(0,0,0,.18) 0%,
rgba(0,0,0,.06) 18%,
rgba(0,0,0,0) 32%,
rgba(0,0,0,.12) 48%,
rgba(0,0,0,.48) 68%,
rgba(0,0,0,.82) 84%,
#000000 100%),
linear-gradient(90deg,
rgba(0,0,0,.18) 0%,
rgba(0,0,0,0) 28%,
rgba(0,0,0,0) 72%,
rgba(0,0,0,.14) 100%);
}
/* Hero content position */
.target-hero-copy {
position: absolute;
z-index: 3;
right: clamp(16px, 4vw, 42px);
left: clamp(16px, 4vw, 42px);
bottom: clamp(72px, 10dvh, 104px);
display: block;
direction: rtl;
text-align: center;
pointer-events: none;
}
.target-hero-poster {
display: none;
}
.target-hero-text {
width: min(100%, 560px);
margin: 0 auto;
text-align: center;
}
.target-hero-text h1 {
max-width: 560px;
margin: 0 auto 7px;
color: #ffffff;
font-size: clamp(1.45rem, 4.4vw, 3.15rem);
line-height: .98;
font-weight: 950;
letter-spacing: -.035em;
text-shadow: 0 3px 18px rgba(0,0,0,.78);
}
.target-hero-text p {
margin: 0 auto 6px;
color: rgba(255,255,255,.88);
font-size: clamp(.68rem, 1.55vw, .92rem);
line-height: 1.35;
font-weight: 800;
text-shadow: 0 2px 10px rgba(0,0,0,.72);
}
/* Meta */
.target-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px 9px;
color: rgba(255,255,255,.82);
font-size: clamp(.62rem, 1.3vw, .78rem);
line-height: 1.35;
font-weight: 750;
text-shadow: 0 2px 9px rgba(0,0,0,.78);
}
.target-hero-meta > span:not(.target-hero-status) + span:not(.target-hero-status)::before {
content: "";
width: 3px;
height: 12px;
margin-left: 7px;
display: inline-block;
border-radius: 99px;
background: #14D7FF;
vertical-align: -2px;
}
.target-hero-status {
min-height: 18px;
padding: 0;
display: inline-flex;
align-items: center;
gap: 4px;
color: #ffffff;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-weight: 900;
}
.target-hero-status::before {
content: "";
width: 9px;
height: 9px;
margin-left: 5px;
display: inline-block;
border-radius: 3px;
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 58%, #14D7FF 100%);
transform: rotate(45deg);
box-shadow: 0 0 14px rgba(155,77,255,.36);
}
/* Buttons: compact, centered, professional */
.target-hero-actions {
width: min(100%, 370px);
margin: 14px auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
direction: rtl;
pointer-events: auto;
}
.target-watch-button,
.target-save-button {
height: 40px;
min-height: 40px;
padding: 0 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: 999px;
font-size: clamp(.68rem, 1.25vw, .82rem);
line-height: 1;
font-weight: 950;
cursor: pointer;
user-select: none;
transition: transform .14s ease, opacity .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.target-watch-button:active,
.target-save-button:active {
transform: scale(.965);
}
/* Primary action */
.target-watch-button {
color: #ffffff;
border: 0;
background: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
box-shadow: 0 10px 22px rgba(155,77,255,.28), 0 0 18px rgba(20,215,255,.12);
}
/* My List: same purple/blue hero outline in every section using HomeHeroSlider */
.target-save-button,
.target-save-button.saved,
.target-save-button:hover,
.target-save-button:focus,
.target-save-button:active {
color: #ffffff !important;
border: 3px solid transparent !important;
background:
linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)) padding-box,
linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
background-color: transparent !important;
box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 18px rgba(155,77,255,.20) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.target-save-button.saved {
background:
linear-gradient(rgba(155,77,255,.18), rgba(20,215,255,.12)) padding-box,
linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
color: #ffffff !important;
}
.target-watch-button svg,
.target-save-button svg,
.target-watch-button .oscar-icon,
.target-save-button .oscar-icon {
width: 14px !important;
height: 14px !important;
flex: 0 0 auto;
}
.target-save-button span,
.target-save-button .oscar-icon,
.target-save-button svg {
background: transparent !important;
background-image: none !important;
}
/* Dots */
.target-hero-dots {
position: absolute;
z-index: 5;
right: 50%;
bottom: 32px;
transform: translateX(50%);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
direction: rtl;
pointer-events: auto;
}
.target-hero-dots button {
width: 10px;
height: 3px;
padding: 0;
border: 0;
border-radius: 99px;
background: rgba(176,186,202,.52);
opacity: .72;
transform: scaleX(.92);
transform-origin: center;
transition:
width .34s cubic-bezier(.22,1,.36,1),
transform .34s cubic-bezier(.22,1,.36,1),
opacity .26s ease,
background .26s ease,
box-shadow .26s ease;
will-change: width, transform, opacity;
}
.target-hero-dots button.active {
width: 21px;
opacity: 1;
transform: scaleX(1);
background: linear-gradient(90deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
box-shadow: 0 0 12px rgba(155,77,255,.30);
}
.target-hero-dots button:focus-visible {
outline: 1px solid rgba(20,215,255,.86);
outline-offset: 4px;
}
/* Desktop arrows */
.scroll-arrow {
position: absolute;
z-index: 26;
top: 50%;
width: 42px;
height: 42px;
display: none;
place-items: center;
padding: 0;
border: 1px solid rgba(255,255,255,.16);
border-radius: 50%;
background: rgba(0,0,0,.10);
color: #fff;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: translateY(-50%);
transition: border-color .16s ease, color .16s ease, transform .16s ease, background .16s ease;
pointer-events: auto;
}
.scroll-arrow::before {
display: none;
content: none;
}
.scroll-arrow-right {
right: 14px;
}
.scroll-arrow-left {
left: 14px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
.scroll-arrow {
display: grid;
}
.scroll-arrow:hover {
color: #14D7FF;
border-color: rgba(20,215,255,.42);
background: rgba(0,0,0,.18);
transform: translateY(-50%) scale(1.06);
}
}
/* Android / small screens */
@media (max-width: 600px) {
.target-home-hero-shell {
margin-bottom: 18px;
}
.target-hero-slide {
height: clamp(500px, 74dvh, 660px);
min-height: 500px;
}
.target-hero-slide::after {
background:
radial-gradient(ellipse 96% 32% at 50% 90%,
rgba(0,0,0,.36) 0%,
rgba(0,0,0,.12) 46%,
rgba(0,0,0,0) 76%),
linear-gradient(180deg,
rgba(0,0,0,0) 26%,
rgba(0,0,0,.03) 38%,
rgba(0,0,0,.14) 50%,
rgba(0,0,0,.40) 63%,
rgba(0,0,0,.70) 76%,
rgba(0,0,0,.93) 90%,
#000000 100%);
}
.target-hero-shade {
background:
linear-gradient(180deg,
rgba(0,0,0,.16) 0%,
rgba(0,0,0,.04) 18%,
rgba(0,0,0,0) 30%,
rgba(0,0,0,.14) 45%,
rgba(0,0,0,.48) 64%,
rgba(0,0,0,.80) 79%,
#000000 100%);
}
.target-hero-copy {
right: 16px;
left: 16px;
bottom: 70px;
}
.target-hero-text {
width: min(100%, 330px);
}
.target-hero-text h1 {
max-width: 94%;
margin-bottom: 5px;
font-size: clamp(1.18rem, 5.8vw, 1.82rem);
line-height: 1;
letter-spacing: -.03em;
}
.target-hero-text p {
margin-bottom: 4px;
font-size: .62rem;
}
.target-hero-meta {
gap: 3px 6px;
font-size: .57rem;
}
.target-hero-meta > span:not(.target-hero-status) + span:not(.target-hero-status)::before {
width: 2px;
height: 9px;
margin-left: 4px;
vertical-align: -1px;
}
.target-hero-status {
min-height: 14px;
gap: 3px;
}
.target-hero-status::before {
width: 7px;
height: 7px;
margin-left: 3px;
border-radius: 2px;
}
.target-hero-actions {
width: min(100%, 286px);
margin-top: 10px;
gap: 8px;
}
.target-watch-button,
.target-save-button {
height: 35px;
min-height: 35px;
padding: 0 10px;
gap: 5px;
font-size: .62rem;
}
.target-watch-button svg,
.target-save-button svg,
.target-watch-button .oscar-icon,
.target-save-button .oscar-icon {
width: 12px !important;
height: 12px !important;
}
.target-hero-dots {
bottom: 30px;
gap: 3px;
}
.target-hero-dots button {
width: 5px;
height: 2px;
}
.target-hero-dots button.active {
width: 11px;
}
}
/* Very small Android screens */
@media (max-width: 380px) {
.target-hero-slide {
height: clamp(470px, 72dvh, 620px);
min-height: 470px;
}
.target-hero-copy {
right: 14px;
left: 14px;
bottom: 66px;
}
.target-hero-text h1 {
font-size: clamp(1.08rem, 5.6vw, 1.58rem);
}
.target-hero-text p {
font-size: .58rem;
}
.target-hero-meta {
font-size: .53rem;
}
.target-hero-actions {
width: min(100%, 262px);
gap: 7px;
}
.target-watch-button,
.target-save-button {
height: 33px;
min-height: 33px;
padding-inline: 8px;
font-size: .58rem;
}
.target-hero-dots {
bottom: 28px;
}
}
/* Large desktop refinement */
@media (min-width: 1000px) {
.target-hero-dots {
gap: 5px;
}
.target-hero-dots button {
width: 10px;
height: 3px;
}
.target-hero-dots button.active {
width: 21px;
}
.target-hero-copy {
bottom: clamp(86px, 11dvh, 118px);
}
.target-hero-actions {
width: min(100%, 390px);
}
.target-watch-button,
.target-save-button {
height: 42px;
min-height: 42px;
}
}
/* FIX: My List hero button must stay transparent; only the frame uses the Nova purple/blue brand color. */
.target-save-button,
.target-save-button.saved,
.target-save-button:hover,
.target-save-button:focus,
.target-save-button:active {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
color: #ffffff !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(155,77,255,.18) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.target-save-button::before,
.target-save-button.saved::before,
.target-save-button:hover::before,
.target-save-button:focus::before,
.target-save-button:active::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
padding: 3px;
pointer-events: none;
background: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.target-save-button > *,
.target-save-button span,
.target-save-button .oscar-icon,
.target-save-button svg {
position: relative;
z-index: 1;
background: transparent !important;
background-image: none !important;
}
@supports not (-webkit-mask-composite: xor) {
.target-save-button::before,
.target-save-button.saved::before,
.target-save-button:hover::before,
.target-save-button:focus::before,
.target-save-button:active::before {
padding: 0;
border: 3px solid #8E44FF;
background: transparent;
-webkit-mask: none;
mask: none;
}
}
/* ORIGINAL SOURCE: Components/Pages/HomeSections/HomeRailSection.razor.css */
:host {
display: block;
background: #000000;
}
.shahid-home-section {
width: 100%;
max-width: 100%;
margin: 0;
padding: 18px 0 24px;
overflow: hidden;
box-sizing: border-box;
background: #000000;
}
.shahid-home-section + .shahid-home-section {
padding-top: 24px;
}
.shahid-section-heading {
min-height: 58px;
padding: 0 max(18px, var(--safe-right, 0px)) 0 max(18px, var(--safe-left, 0px));
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
direction: rtl;
}
.shahid-section-heading h2 {
position: relative;
min-width: 0;
margin: 0;
padding-right: 13px;
display: flex;
align-items: center;
gap: 8px;
color: #fff;
/* */
font-size: clamp(0.95rem, 2vw, 1.15rem);
line-height: 1.2;
font-weight: 950;
letter-spacing: -.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* */
.shahid-section-heading h2::before {
content: "";
position: absolute;
right: 0;
width: 5px;
align-self: stretch;
min-height: 28px;
border-radius: 999px;
background: linear-gradient(180deg, #14D7FF 0%, #9B4DFF 56%, #F04AD8 100%);
}
.shahid-section-heading > button {
flex: 0 0 42px;
width: 42px;
height: 42px;
padding: 0;
display: grid;
place-items: center;
color: #9B4DFF;
background: transparent;
border: 0;
cursor: pointer;
transition: transform 0.2s ease;
}
.shahid-section-heading > button:active {
transform: scale(0.9);
}
.shahid-brand-mark {
position: relative;
flex: 0 0 27px;
width: 27px;
height: 27px;
display: inline-block;
}
.shahid-brand-mark i {
position: absolute;
top: 2px;
width: 7px;
height: 7px;
border-radius: 50%;
}
.shahid-brand-mark i:nth-child(1) {
right: 1px;
background: #F04AD8;
}
.shahid-brand-mark i:nth-child(2) {
right: 10px;
background: #9B4DFF;
}
.shahid-brand-mark i:nth-child(3) {
right: 19px;
background: #14D7FF;
}
.shahid-brand-mark b {
position: absolute;
right: 11px;
bottom: 0;
width: 6px;
height: 15px;
border: 2px solid #dce4ee;
border-radius: 2px;
box-sizing: border-box;
}
.horizontal-scroll-shell,
.desktop-rail-controls {
position: relative;
isolation: isolate;
}
.desktop-rail-controls > .scroll-arrow {
top: 48%;
}
.desktop-rail-controls > .scroll-arrow-right {
right: max(12px, var(--safe-right, 0px));
}
.desktop-rail-controls > .scroll-arrow-left {
left: max(12px, var(--safe-left, 0px));
}
.shahid-rail {
width: 100%;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scroll-snap-type: x proximity;
scroll-padding-inline: 0;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.shahid-rail::-webkit-scrollbar {
display: none;
}
.shahid-rail > * {
scroll-snap-align: start;
}
.scroll-arrow {
position: absolute;
z-index: 26;
top: 50%;
width: 47px;
height: 47px;
display: none;
place-items: center;
padding: 0;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
background: transparent;
color: #fff;
box-shadow: none;
backdrop-filter: none;
transform: translateY(-50%);
transition: border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
pointer-events: auto;
}
.scroll-arrow::before {
content: "";
position: absolute;
inset: -7px;
border-radius: 999px;
background: radial-gradient(circle at center, rgba(155,108,255,.18) 0%, rgba(53,168,255,.10) 38%, rgba(53,168,255,0) 72%);
opacity: .75;
pointer-events: none;
filter: blur(6px);
}
.scroll-arrow > * {
position: relative;
z-index: 1;
}
.scroll-arrow-right {
right: 8px;
}
.scroll-arrow-left {
left: 8px;
}
.shahid-card-shade {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 43%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.96) 100%);
}
.shahid-short-card,
.shahid-poster-card,
.shahid-ranked-card,
.shahid-landscape-card,
.shahid-live-card,
.shahid-mood-card,
.shahid-person-card {
background: #0d0d0d;
cursor: pointer;
}
.shahid-short-card {
position: relative;
flex: 0 0 clamp(180px, 29vw, 300px);
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: 6px;
color: #fff;
}
.shahid-short-card .shahid-card-image,
.shahid-person-card .shahid-card-image,
.shahid-ranked-poster .shahid-card-image,
.shahid-live-poster .shahid-card-image,
.shahid-poster-image .shahid-card-image,
.shahid-landscape-image .shahid-card-image {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
pointer-events: none;
}
.shahid-short-copy {
position: absolute;
z-index: 2;
right: 10px;
bottom: 10px;
left: 10px;
text-align: right;
}
.shahid-short-copy strong {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #fff;
font-size: clamp(.75rem, 1.8vw, 1rem);
line-height: 1.35;
font-weight: 800;
text-shadow: 0 2px 8px #000;
}
.shahid-short-copy small {
margin-top: 5px;
display: flex;
align-items: center;
gap: 6px;
color: #fff;
font-size: clamp(.68rem, 1.55vw, .88rem);
direction: ltr;
justify-content: flex-end;
}
.shahid-people-rail {
gap: 7px;
}
.shahid-person-card {
position: relative;
flex: 0 0 clamp(150px, 22vw, 230px);
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 6px;
color: #fff;
}
.shahid-person-card > span {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(3,9,15,.04), rgba(3,9,15,.55)), linear-gradient(90deg, rgba(0,196,180,.18), rgba(9,20,28,.1));
}
.shahid-person-card strong {
position: absolute;
z-index: 2;
right: 8px;
bottom: 11px;
left: 8px;
color: #fff;
text-align: center;
font-size: clamp(.72rem, 1.6vw, .95rem);
font-weight: 950;
text-shadow: 0 2px 8px #000;
}
.shahid-ranked-rail {
gap: 8px;
}
.shahid-ranked-card {
flex: 0 0 clamp(300px, 46vw, 470px);
min-width: 0;
color: #fff;
}
.shahid-ranked-poster {
position: relative;
display: block;
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 5px;
background: #0d0d0d;
}
.shahid-rank-ribbon {
position: absolute;
z-index: 3;
top: 0;
left: 8px;
min-width: 48px;
padding: 8px 7px 13px;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
clip-path: polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
line-height: 1;
}
.shahid-rank-ribbon small {
font-size: .65rem;
font-weight: 900;
}
.shahid-rank-ribbon b {
margin-top: 3px;
font-size: 1.8rem;
font-weight: 950;
}
.shahid-ranked-card > strong {
margin-top: 8px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #fff;
font-size: .82rem;
font-weight: 850;
}
.shahid-ranked-card > small,
.shahid-live-card > small,
.shahid-poster-card > small {
margin-top: 5px;
display: block;
color: rgba(255,255,255,.82);
font-size: clamp(.62rem, 1.45vw, .78rem);
font-weight: 750;
}
.shahid-live-card,
.shahid-poster-card {
flex: 0 0 clamp(150px, 22vw, 230px);
min-width: 0;
color: #fff;
}
.shahid-live-poster,
.shahid-poster-image {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
display: block;
overflow: hidden;
border-radius: 5px;
background: #0d0d0d;
}
.shahid-live-poster em {
position: absolute;
z-index: 3;
top: 0;
left: 0;
padding: 5px 7px;
color: #fff;
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
border-radius: 0 0 5px 0;
font-size: .66rem;
font-style: normal;
font-weight: 950;
}
.shahid-live-card > strong {
margin-top: 7px;
display: block;
overflow: hidden;
color: #fff;
font-size: .76rem;
font-weight: 850;
white-space: nowrap;
text-overflow: ellipsis;
}
.shahid-poster-image > strong {
position: absolute;
z-index: 2;
right: 8px;
bottom: 8px;
left: 8px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #fff;
font-size: clamp(.7rem, 1.55vw, .9rem);
line-height: 1.25;
font-weight: 900;
text-shadow: 0 2px 8px #000;
}
.shahid-mood-rail {
gap: 12px;
padding-block: 3px 8px;
}
.shahid-mood-card {
position: relative;
flex: 0 0 clamp(164px, 20vw, 218px);
aspect-ratio: 1.08 / 1;
padding: 18px 14px 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.085);
border-radius: 20px;
display: grid;
place-items: center;
align-content: center;
gap: 13px;
color: rgba(255,255,255,.94);
text-align: center;
background:
radial-gradient(circle at 50% 0%, rgba(155,77,255,.07), transparent 42%),
linear-gradient(155deg, rgba(18,20,27,.96), rgba(7,8,12,.98));
box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.shahid-mood-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,.028), transparent 42%);
}
.shahid-mood-card::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
bottom: -18px;
height: 34px;
border-radius: 50%;
background: rgba(155,77,255,.10);
filter: blur(22px);
opacity: .55;
pointer-events: none;
}
.shahid-mood-icon {
position: relative;
z-index: 2;
width: clamp(48px, 6vw, 66px);
height: clamp(48px, 6vw, 66px);
display: grid;
place-items: center;
filter: drop-shadow(0 8px 18px rgba(123,74,255,.16));
}
.shahid-mood-icon .nova-mood-icon {
width: 100%;
height: 100%;
display: block;
}
.shahid-mood-card strong {
position: relative;
z-index: 2;
max-width: 92%;
color: rgba(255,255,255,.92);
font-size: clamp(.74rem, 1.45vw, .9rem);
line-height: 1.35;
font-weight: 880;
letter-spacing: -.01em;
}
.shahid-mood-card:hover,
.shahid-mood-card:focus-visible {
transform: translateY(-2px);
border-color: rgba(255,255,255,.14);
background:
radial-gradient(circle at 50% 0%, rgba(155,77,255,.09), transparent 44%),
linear-gradient(155deg, rgba(20,22,30,.98), rgba(8,9,13,.99));
box-shadow: 0 22px 46px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045);
}
.shahid-mood-card:active { transform: scale(.985); }
.shahid-landscape-card {
flex: 0 0 clamp(290px, 45vw, 560px);
overflow: hidden;
border-radius: 6px;
color: #fff;
}
.shahid-landscape-image {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0d0d0d;
}
.shahid-landscape-duration {
position: absolute;
right: 10px;
bottom: 8px;
padding: 4px 7px;
display: inline-flex;
align-items: center;
gap: 5px;
color: #fff;
background: rgba(15,20,28,.74);
border: 1px solid rgba(155,77,255,.7);
border-radius: 999px;
direction: ltr;
font-size: .68rem;
font-weight: 850;
}
.shahid-landscape-copy {
min-height: 58px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.shahid-landscape-copy strong {
min-width: 0;
overflow: hidden;
color: #fff;
font-size: clamp(.74rem, 1.6vw, .95rem);
font-weight: 850;
white-space: nowrap;
text-overflow: ellipsis;
}
.shahid-landscape-copy b {
color: #fff;
font-size: 1.55rem;
line-height: 1;
}
@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
.scroll-arrow {
display: grid;
}
.shahid-rail {
scroll-behavior: smooth;
}
}
/* */
@media (max-width: 600px) {
.shahid-home-section {
padding-top: 16px;
padding-bottom: 20px;
}
.shahid-home-section + .shahid-home-section {
padding-top: 19px;
}
.shahid-section-heading {
min-height: 46px;
padding-inline: 18px;
}
.shahid-section-heading h2 {
gap: 6px;
/* */
font-size: clamp(0.85rem, 3.5vw, 0.95rem);
}
.shahid-section-heading > button {
flex-basis: 38px;
width: 38px;
height: 38px;
}
.shahid-brand-mark {
flex-basis: 24px;
width: 24px;
height: 24px;
}
.shahid-brand-mark i {
width: 6px;
height: 6px;
}
.shahid-brand-mark i:nth-child(1) {
right: 0;
}
.shahid-brand-mark i:nth-child(2) {
right: 8px;
}
.shahid-brand-mark i:nth-child(3) {
right: 16px;
}
.shahid-brand-mark b {
right: 9px;
width: 6px;
height: 14px;
}
.shahid-short-card {
flex-basis: 40.2vw;
}
.shahid-person-card,
.shahid-live-card,
.shahid-poster-card,
.shahid-mood-card {
flex-basis: 29.2vw;
}
.shahid-ranked-card {
flex-basis: 60.3vw;
}
.shahid-landscape-card {
flex-basis: 57.2vw;
}
.shahid-short-copy {
right: 8px;
bottom: 8px;
left: 8px;
}
.shahid-short-copy strong {
font-size: .71rem;
}
.shahid-short-copy small {
font-size: .65rem;
}
.shahid-rank-ribbon {
left: 5px;
min-width: 39px;
padding: 6px 5px 11px;
}
.shahid-rank-ribbon small {
font-size: .52rem;
}
.shahid-rank-ribbon b {
font-size: 1.45rem;
}
.shahid-ranked-card > strong {
font-size: .7rem;
}
.shahid-ranked-card > small,
.shahid-live-card > small,
.shahid-poster-card > small {
font-size: .57rem;
}
.shahid-live-card > strong {
font-size: .65rem;
}
.shahid-poster-image > strong {
font-size: .66rem;
}
.shahid-person-card strong {
font-size: .65rem;
}
.shahid-mood-card {
padding: 8px;
gap: 6px;
}
.shahid-mood-card span {
font-size: 2.65rem;
}
.shahid-mood-card strong {
font-size: .62rem;
}
.shahid-landscape-copy {
min-height: 47px;
padding: 8px 10px;
}
.shahid-landscape-copy strong {
font-size: .68rem;
}
.shahid-landscape-duration {
right: 7px;
bottom: 6px;
font-size: .58rem;
}
}
@media (min-width: 1000px) {
.shahid-short-card {
flex-basis: 250px;
}
.shahid-person-card,
.shahid-live-card,
.shahid-poster-card,
.shahid-mood-card {
flex-basis: 210px;
}
.shahid-ranked-card {
flex-basis: 390px;
}
.shahid-landscape-card {
flex-basis: 520px;
}
}
/* SpaceGate Nova: remove three-dot section mark */
.shahid-brand-mark,
.shahid-brand-mark i,
.shahid-brand-mark b {
display: none !important;
content: none !important;
}
/* Newly appended lazy-loaded sections enter softly instead of appearing abruptly. */
.shahid-home-section {
animation: nova-home-section-arrive .62s cubic-bezier(.2, .78, .25, 1) both;
}
@keyframes nova-home-section-arrive {
from {
opacity: 0;
transform: translateY(18px);
filter: saturate(.78);
}
to {
opacity: 1;
transform: translateY(0);
filter: saturate(1);
}
}
@media (prefers-reduced-motion: reduce) {
.shahid-home-section { animation: none; }
}
.shahid-taxonomy-badges {
position: absolute;
z-index: 4;
top: 8px;
right: 8px;
left: 8px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
direction: rtl;
pointer-events: none;
}
.shahid-taxonomy-badges em {
max-width: 48%;
padding: 4px 7px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
color: #fff;
background: rgba(4,7,13,.74);
box-shadow: 0 3px 12px rgba(0,0,0,.28);
backdrop-filter: blur(8px);
font-size: clamp(.56rem, 1.15vw, .68rem);
font-style: normal;
font-weight: 900;
line-height: 1;
white-space: nowrap;
text-overflow: ellipsis;
}
.shahid-taxonomy-badges em.region {
background: linear-gradient(135deg, rgba(155,77,255,.88), rgba(20,215,255,.78));
}
/* NOVA+ 2.58 — progressive horizontal rail paging. Existing keyed cards remain
mounted; only appended page cards animate in, avoiding rail-wide repaint/jank. */
.nova-rail-card {
animation: nova-rail-card-arrive .34s cubic-bezier(.2,.78,.25,1) both;
contain: layout paint style;
}
.nova-rail-page-sentinel {
flex: 0 0 58px;
min-width: 58px;
min-height: 96px;
align-self: stretch;
display: grid;
place-items: center;
gap: 5px;
scroll-snap-align: none !important;
pointer-events: none;
}
.nova-rail-page-sentinel.loading {
grid-auto-flow: column;
align-content: center;
justify-content: center;
padding-inline: 10px;
}
.nova-rail-page-sentinel.loading i {
width: 7px;
height: 7px;
border-radius: 999px;
color: #4BE9FF;
background: #4BE9FF;
box-shadow: 0 0 12px rgba(75,233,255,.72);
animation: nova-rail-dot 1s ease-in-out infinite;
}
.nova-rail-page-sentinel.loading i:nth-child(2) {
color: #6D7DFF;
background: #6D7DFF;
box-shadow: 0 0 12px rgba(109,125,255,.72);
animation-delay: .12s;
}
.nova-rail-page-sentinel.loading i:nth-child(3) {
color: #C25DFF;
background: #C25DFF;
box-shadow: 0 0 12px rgba(194,93,255,.72);
animation-delay: .24s;
}
@keyframes nova-rail-card-arrive {
from { opacity: 0; transform: translateX(-12px) scale(.985); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes nova-rail-dot {
0%, 70%, 100% { opacity: .36; transform: translateY(0) scale(.8); }
35% { opacity: 1; transform: translateY(-3px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.nova-rail-card,
.nova-rail-page-sentinel.loading i { animation: none !important; }
}
/* Stage 8 — commercial rail hierarchy without leaving Nova+ identity. */
.shahid-section-heading > .shahid-view-all {
width: auto;
height: 38px;
min-width: 44px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 0;
border-radius: 0;
color: rgba(255,255,255,.56);
background: transparent;
font: inherit;
cursor: pointer;
transition: color .16s ease, transform .16s ease;
}
.shahid-section-heading > .shahid-view-all span {
font-size: .68rem;
font-weight: 800;
}
.shahid-section-heading > .shahid-view-all .oscar-icon {
color: #9B4DFF;
}
.shahid-section-heading > .shahid-view-all:active {
color: #fff;
transform: translateX(-2px);
}
/* three deliberate visual densities: featured / standard / compact */
.nova-card-scale-featured.shahid-poster-section .shahid-poster-card {
flex-basis: clamp(168px, 25vw, 250px);
}
.nova-card-scale-featured.shahid-poster-section .shahid-poster-image {
border-radius: 10px;
}
.nova-card-scale-standard.shahid-poster-section .shahid-poster-card {
flex-basis: clamp(150px, 22vw, 230px);
}
.nova-card-scale-compact.shahid-poster-section .shahid-poster-card {
flex-basis: clamp(132px, 19vw, 196px);
}
.nova-card-scale-compact.shahid-poster-section .shahid-poster-image {
border-radius: 8px;
}
.nova-card-scale-featured.shahid-landscape-section .shahid-landscape-card {
flex-basis: clamp(320px, 49vw, 510px);
}
.nova-card-scale-standard.shahid-landscape-section .shahid-landscape-card {
flex-basis: clamp(280px, 42vw, 430px);
}
.nova-card-scale-compact.shahid-landscape-section .shahid-landscape-card {
flex-basis: clamp(238px, 36vw, 360px);
}
.nova-card-scale-featured .shahid-card-image,
.nova-card-scale-standard .shahid-card-image,
.nova-card-scale-compact .shahid-card-image {
transition: transform .22s ease, filter .22s ease;
}
.nova-rail-card:active .shahid-card-image {
transform: scale(1.018);
filter: brightness(.94);
}
@media(max-width:680px){
.shahid-section-heading > .shahid-view-all { height:36px; gap:4px; }
.shahid-section-heading > .shahid-view-all span { font-size:.64rem; }
.nova-card-scale-featured.shahid-poster-section .shahid-poster-card { flex-basis:44vw; }
.nova-card-scale-standard.shahid-poster-section .shahid-poster-card { flex-basis:39vw; }
.nova-card-scale-compact.shahid-poster-section .shahid-poster-card { flex-basis:34vw; }
.nova-card-scale-featured.shahid-landscape-section .shahid-landscape-card { flex-basis:78vw; }
.nova-card-scale-standard.shahid-landscape-section .shahid-landscape-card { flex-basis:70vw; }
.nova-card-scale-compact.shahid-landscape-section .shahid-landscape-card { flex-basis:62vw; }
}
@media(prefers-reduced-motion:reduce){
.shahid-section-heading > .shahid-view-all,
.nova-card-scale-featured .shahid-card-image,
.nova-card-scale-standard .shahid-card-image,
.nova-card-scale-compact .shahid-card-image { transition:none !important; }
}
/* ORIGINAL SOURCE: Components/Pages/HomeSections/HomeSectionBatchLoader.razor.css */
:host {
display: block;
width: 100%;
background: transparent !important;
}
.nova-batch-loader {
position: relative;
isolation: isolate;
width: 100%;
padding: 22px clamp(14px, 4vw, 34px) 34px;
overflow: hidden;
color: #fff;
background: transparent !important;
animation: nova-loader-enter .52s cubic-bezier(.2, .8, .25, 1) both;
}
.nova-batch-loader::before {
content: "";
position: absolute;
z-index: -1;
top: -120px;
right: 50%;
width: min(76vw, 620px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(35, 218, 255, .075), rgba(91, 90, 255, .04) 38%, transparent 70%);
filter: blur(22px);
transform: translateX(50%);
animation: nova-loader-ambient 8.4s ease-in-out infinite;
pointer-events: none;
}
.nova-batch-loader__status {
position: relative;
min-height: 78px;
display: grid;
grid-template-columns: 62px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
direction: rtl;
}
.nova-batch-loader__orbit {
width: 62px;
height: 62px;
justify-self: end;
filter: drop-shadow(0 9px 22px rgba(74, 103, 255, .18));
}
.nova-batch-loader__orbit svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
.nova-orbit-aura {
transform-origin: 36px 36px;
animation: nova-orbit-aura 5.8s ease-in-out infinite;
}
.nova-orbit-outer {
transform-origin: 36px 36px;
animation: nova-orbit-clockwise 7.6s linear infinite;
}
.nova-orbit-inner {
transform-origin: 36px 36px;
animation: nova-orbit-counter 12.8s linear infinite;
}
.nova-orbit-comet {
transform-origin: center;
animation: nova-comet-breathe 2.7s ease-in-out infinite;
}
.nova-orbit-glint {
transform-origin: center;
animation: nova-glint 2.9s ease-in-out infinite;
}
.nova-orbit-pulse {
transform-origin: 36px 36px;
animation: nova-ring-pulse 5.6s ease-out infinite;
}
.nova-orbit-pulse--two {
animation-delay: -2.8s;
}
.nova-loader-monogram {
transform-origin: 36px 36px;
animation: nova-monogram-breathe 6.8s ease-in-out infinite;
}
.nova-batch-loader__copy {
min-width: 0;
display: grid;
gap: 5px;
text-align: right;
}
.nova-batch-loader__copy strong {
overflow: hidden;
color: #f8faff;
font-size: clamp(.84rem, 1.8vw, 1rem);
line-height: 1.35;
font-weight: 900;
white-space: nowrap;
text-overflow: ellipsis;
letter-spacing: -.015em;
}
.nova-batch-loader__copy span {
overflow: hidden;
color: rgba(207, 218, 246, .62);
font-size: clamp(.67rem, 1.5vw, .79rem);
line-height: 1.45;
font-weight: 650;
white-space: nowrap;
text-overflow: ellipsis;
}
.nova-batch-loader__signal {
min-width: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
direction: ltr;
}
.nova-batch-loader__signal i {
width: 5px;
height: 5px;
border-radius: 50%;
background: #4be9ff;
box-shadow: 0 0 12px currentColor;
animation: nova-signal 1.8s ease-in-out infinite;
}
.nova-batch-loader__signal i:nth-child(2) {
color: #6d7dff;
background: #6d7dff;
animation-delay: -.6s;
}
.nova-batch-loader__signal i:nth-child(3) {
color: #c25dff;
background: #c25dff;
animation-delay: -1.2s;
}
.nova-batch-loader__rails {
margin-top: 14px;
display: grid;
gap: 24px;
}
.nova-loader-rail {
min-width: 0;
}
.nova-loader-heading {
height: 22px;
margin-bottom: 13px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
direction: rtl;
}
.nova-loader-heading span,
.nova-loader-heading b,
.nova-loader-cards i {
position: relative;
display: block;
overflow: hidden;
background: linear-gradient(118deg, rgba(255,255,255,.055) 8%, rgba(66,102,255,.105) 24%, rgba(168,75,255,.12) 36%, rgba(255,255,255,.055) 52%);
background-size: 240% 100%;
animation: nova-card-shimmer 2.9s linear infinite;
}
.nova-loader-heading span {
width: clamp(128px, 30vw, 245px);
height: 18px;
border-radius: 7px;
}
.nova-loader-heading b {
width: 31px;
height: 10px;
border-radius: 999px;
opacity: .64;
}
.nova-loader-cards {
display: grid;
grid-auto-flow: column;
grid-auto-columns: clamp(124px, 27vw, 176px);
gap: clamp(9px, 1.7vw, 13px);
overflow: hidden;
direction: rtl;
}
.nova-loader-cards i {
aspect-ratio: 2 / 3;
border-radius: 14px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.045),
0 12px 30px rgba(0,0,0,.18);
animation-delay: calc(var(--loader-card-index) * -.19s);
}
.nova-loader-cards i::after {
content: "";
position: absolute;
right: 10px;
bottom: 11px;
width: 62%;
height: 7px;
border-radius: 999px;
background: rgba(255,255,255,.075);
box-shadow: 0 -14px 0 rgba(255,255,255,.045);
}
.nova-loader-rail.is-landscape .nova-loader-cards {
grid-auto-columns: clamp(190px, 44vw, 315px);
}
.nova-loader-rail.is-landscape .nova-loader-cards i {
aspect-ratio: 16 / 9;
border-radius: 15px;
}
.nova-batch-loader__progress {
position: relative;
width: min(48vw, 280px);
height: 2px;
margin: 26px auto 0;
overflow: hidden;
border-radius: 999px;
background: rgba(255,255,255,.065);
}
.nova-batch-loader__progress span {
position: absolute;
top: 0;
right: 0;
width: 42%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, transparent, #3ee5ff 28%, #6976ff 62%, #c95dff 88%, transparent);
filter: drop-shadow(0 0 7px rgba(87, 147, 255, .72));
animation: nova-progress 3.4s cubic-bezier(.42, 0, .58, 1) infinite;
}
.nova-batch-loader.is-compact {
padding-top: 14px;
padding-bottom: 22px;
}
.nova-batch-loader.is-compact .nova-batch-loader__status {
min-height: 62px;
}
.nova-batch-loader.is-compact .nova-batch-loader__orbit {
width: 52px;
height: 52px;
}
.nova-batch-loader.is-compact .nova-batch-loader__rails {
margin-top: 9px;
}
.nova-batch-loader.is-compact .nova-batch-loader__progress {
margin-top: 18px;
}
@keyframes nova-loader-enter {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes nova-loader-ambient {
0%, 100% { opacity: .55; transform: translateX(50%) scale(.92); }
50% { opacity: 1; transform: translateX(50%) scale(1.08); }
}
@keyframes nova-orbit-clockwise {
to { transform: rotate(360deg); }
}
@keyframes nova-orbit-counter {
to { transform: rotate(-360deg); }
}
@keyframes nova-orbit-aura {
0%, 100% { opacity: .13; transform: scale(.93); }
50% { opacity: .28; transform: scale(1.09); }
}
@keyframes nova-ring-pulse {
0% { opacity: .28; transform: scale(.84); }
70% { opacity: 0; transform: scale(1.18); }
100% { opacity: 0; transform: scale(1.18); }
}
@keyframes nova-comet-breathe {
0%, 100% { opacity: .76; transform: scale(.82); }
50% { opacity: 1; transform: scale(1.18); }
}
@keyframes nova-glint {
0%, 100% { opacity: .55; transform: scale(.74) rotate(0deg); }
50% { opacity: 1; transform: scale(1.22) rotate(45deg); }
}
@keyframes nova-monogram-breathe {
0%, 100% { opacity: .94; transform: scale(.99); }
50% { opacity: 1; transform: scale(1.015); }
}
@keyframes nova-signal {
0%, 100% { opacity: .2; transform: translateY(0) scale(.75); }
50% { opacity: 1; transform: translateY(-2px) scale(1.08); }
}
@keyframes nova-card-shimmer {
0% { background-position: 135% 0; }
100% { background-position: -135% 0; }
}
@keyframes nova-progress {
0% { transform: translateX(140%); opacity: .18; }
50% { opacity: 1; }
100% { transform: translateX(-340%); opacity: .18; }
}
@media (max-width: 600px) {
.nova-batch-loader {
padding-inline: 14px;
padding-bottom: 28px;
}
.nova-batch-loader__status {
grid-template-columns: 54px minmax(0, 1fr) 24px;
gap: 10px;
}
.nova-batch-loader__orbit {
width: 54px;
height: 54px;
}
.nova-batch-loader__copy span {
max-width: 62vw;
}
.nova-loader-cards {
grid-auto-columns: 29vw;
gap: 9px;
}
.nova-loader-rail.is-landscape .nova-loader-cards {
grid-auto-columns: 47vw;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-batch-loader,
.nova-batch-loader::before,
.nova-orbit-aura,
.nova-orbit-outer,
.nova-orbit-inner,
.nova-orbit-comet,
.nova-orbit-glint,
.nova-orbit-pulse,
.nova-loader-monogram,
.nova-batch-loader__signal i,
.nova-loader-heading span,
.nova-loader-heading b,
.nova-loader-cards i,
.nova-batch-loader__progress span {
animation: none !important;
}
.nova-batch-loader__progress span {
right: 29%;
}
}
/* ORIGINAL SOURCE: Components/Pages/LiveCatalog.razor.css */
/* تم نقل تصميم القنوات إلى LiveTv.razor بأسلوب قسري حتى يظهر على Windows والهاتف. */
/* ORIGINAL SOURCE: Components/Pages/LiveTv.razor.css */
:host {
display: block;
min-height: 100dvh;
background: #000;
}
.nova-live-page {
--live-header-h: calc(168px + var(--safe-top, 0px));
--live-inline-pad: clamp(22px, 3.2vw, 60px);
--live-bottom-space: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 30px);
min-height: 100dvh;
color: #f7f8fc;
background:
radial-gradient(circle at 78% -18%, rgba(77, 34, 178, .11), transparent 31%),
linear-gradient(180deg, #02040a 0%, #000 52%, #010207 100%);
font-family: Tajawal, "Segoe UI", Arial, sans-serif;
}
.nova-live-page :is(button, input, select) {
font: inherit;
}
.nova-live-fixed-header {
position: fixed !important;
z-index: 920 !important;
inset: 0 0 auto !important;
width: 100%;
height: var(--live-header-h);
padding: var(--safe-top, 0px) max(var(--live-inline-pad),var(--safe-right,0px)) 0 max(var(--live-inline-pad),var(--safe-left,0px));
display: grid;
grid-template-rows: 76px 92px;
align-items: stretch;
box-sizing: border-box;
background: rgba(2, 4, 9, .985);
border-bottom: 1px solid rgba(143, 154, 184, .17);
box-shadow: 0 16px 40px rgba(0, 0, 0, .46);
backdrop-filter: blur(20px) saturate(1.12);
-webkit-backdrop-filter: blur(20px) saturate(1.12);
}
.nova-live-topbar {
min-width: 0;
width: 100%;
height: 76px;
display: grid;
grid-template-columns: 42px 188px minmax(260px, 560px) minmax(0, 1fr);
grid-template-areas: "menu brand search actions";
align-items: center;
gap: 14px;
direction: ltr;
}
.nova-live-menu {
grid-area: menu;
}
.nova-live-brand {
grid-area: brand;
}
.nova-live-search {
grid-area: search;
}
.nova-live-actions {
grid-area: actions;
min-width: 0;
justify-self: end;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
direction: ltr;
}
.nova-live-mobile-search-toggle {
display: none;
}
.nova-live-icon,
.nova-live-brand,
.nova-live-filter-button,
.nova-live-account {
border: 0;
color: #f8f9fc;
cursor: pointer;
}
.nova-live-icon {
position: relative;
width: 39px;
height: 39px;
flex: 0 0 39px;
display: grid;
place-items: center;
padding: 0;
border-radius: 10px;
background: transparent;
transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nova-live-icon:hover {
color: #fff;
background: rgba(255, 255, 255, .065);
transform: translateY(-1px);
}
.nova-live-icon.notification i {
position: absolute;
top: 5px;
right: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #b72fff;
box-shadow: 0 0 0 3px rgba(183, 47, 255, .15);
}
.nova-live-brand {
width: 188px;
height: 58px;
padding: 0;
display: grid;
place-items: center start;
background: transparent;
}
.nova-live-brand img {
width: 178px;
height: 53px;
display: block;
object-fit: contain;
object-position: left center;
}
.nova-live-search {
min-width: 0;
width: 100%;
height: 43px;
padding: 0 13px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(139, 151, 180, .22);
border-radius: 10px;
background: rgba(9, 12, 20, .9);
color: rgba(255, 255, 255, .56);
box-sizing: border-box;
direction: ltr;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.nova-live-search:focus-within {
border-color: rgba(82, 151, 255, .72);
background: rgba(11, 15, 25, .98);
box-shadow: 0 0 0 3px rgba(93, 78, 255, .11);
}
.nova-live-search input {
min-width: 0;
flex: 1;
height: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: #fff;
direction: rtl;
text-align: right;
font-size: .87rem;
}
.nova-live-search input::placeholder {
color: rgba(255, 255, 255, .37);
}
.nova-live-search kbd {
flex: 0 0 auto;
padding: 4px 7px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 5px;
background: rgba(255, 255, 255, .045);
color: rgba(255, 255, 255, .52);
font-family: "Segoe UI", Arial, sans-serif;
font-size: .66rem;
white-space: nowrap;
}
.nova-live-filter-button {
height: 41px;
flex: 0 0 auto;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(139, 151, 180, .20);
border-radius: 9px;
background: rgba(8, 11, 18, .9);
color: rgba(255, 255, 255, .76);
direction: rtl;
font-size: .82rem;
font-weight: 700;
white-space: nowrap;
transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.nova-live-filter-button.active,
.nova-live-filter-button:hover {
color: #fff;
border-color: rgba(83, 151, 255, .68);
background: rgba(44, 38, 107, .22);
}
.nova-live-account {
height: 44px;
flex: 0 0 auto;
padding: 0 5px 0 9px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 11px;
background: transparent;
direction: ltr;
font-size: .87rem;
transition: background .16s ease;
}
.nova-live-account:hover {
background: rgba(255, 255, 255, .055);
}
.nova-live-account-avatar {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .36);
border-radius: 50%;
background: rgba(255, 255, 255, .08);
}
.nova-live-guide-header {
min-width: 0;
height: 92px;
padding: 8px 0 10px;
display: grid;
grid-template-rows: 30px 44px;
gap: 0;
border-top: 1px solid rgba(255, 255, 255, .035);
box-sizing: border-box;
}
.nova-live-guide-heading {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
direction: rtl;
}
.nova-live-guide-title {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
direction: rtl;
}
.nova-live-guide-title h1 {
margin: 0;
color: #fafafd;
font-size: 1.18rem;
line-height: 1.2;
font-weight: 800;
}
.nova-live-total {
flex: 0 0 auto;
color: rgba(255, 255, 255, .53);
font-size: .75rem;
white-space: nowrap;
}
.nova-live-total b {
color: #a63aff;
}
.nova-live-signal {
position: relative;
width: 21px;
height: 21px;
display: grid;
place-items: center;
color: #ff142d;
}
.nova-live-signal::before,
.nova-live-signal::after {
content: "";
position: absolute;
border: 1.7px solid currentColor;
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 50%;
}
.nova-live-signal::before { width: 12px; height: 12px; }
.nova-live-signal::after { width: 19px; height: 19px; }
.nova-live-signal i {
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 9px currentColor;
}
.nova-live-controls {
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
direction: rtl;
}
.nova-live-category-row {
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 9px;
overflow-x: auto;
direction: rtl;
scrollbar-width: none;
overscroll-behavior-inline: contain;
}
.nova-live-category-row::-webkit-scrollbar {
display: none;
}
.nova-live-category {
height: 35px;
flex: 0 0 auto;
min-width: 70px;
padding: 0 16px;
border: 1px solid rgba(132, 145, 176, .19);
border-radius: 8px;
background: rgba(4, 7, 13, .92);
color: rgba(255, 255, 255, .69);
font-size: .78rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.nova-live-category:hover {
color: #fff;
border-color: rgba(119, 70, 239, .48);
}
.nova-live-category.active {
color: #fff;
border-color: transparent;
background:
linear-gradient(rgba(5, 8, 16, .99), rgba(5, 8, 16, .99)) padding-box,
linear-gradient(100deg, #f04ad8 0%, #9b4dff 48%, #14d7ff 100%) border-box;
box-shadow: 0 0 0 1px rgba(155, 77, 255, .08), 0 6px 18px rgba(45, 111, 219, .10);
}
.nova-live-view-tools {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
direction: rtl;
}
.nova-live-sort {
position: relative;
height: 38px;
min-width: 150px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid rgba(132, 145, 176, .20);
border-radius: 8px;
background: rgba(4, 7, 13, .92);
color: rgba(255, 255, 255, .70);
font-size: .74rem;
box-sizing: border-box;
}
.nova-live-sort select {
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
cursor: pointer;
}
.nova-live-view-toggle {
height: 38px;
display: flex;
overflow: hidden;
border: 1px solid rgba(132, 145, 176, .20);
border-radius: 8px;
background: rgba(4, 7, 13, .92);
direction: ltr;
}
.nova-live-view-toggle button {
width: 39px;
height: 100%;
padding: 0;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: rgba(255, 255, 255, .58);
cursor: pointer;
}
.nova-live-view-toggle button + button {
border-left: 1px solid rgba(132, 145, 176, .16);
}
.nova-live-view-toggle button.active {
color: #fff;
background: linear-gradient(135deg, #6f19cf, #4f32d9);
}
.nova-live-filter-panel {
position: fixed;
z-index: 960;
top: calc(var(--live-header-h) - 2px);
right: var(--live-inline-pad);
width: min(350px, calc(100vw - 28px));
padding: 14px;
display: grid;
gap: 11px;
border: 1px solid rgba(132, 155, 197, .27);
border-radius: 14px;
background: rgba(4, 7, 14, .995);
box-shadow: 0 22px 52px rgba(0, 0, 0, .68);
box-sizing: border-box;
}
.nova-live-filter-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}
.nova-live-filter-panel button,
.nova-live-filter-panel > label {
min-height: 40px;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 9px;
background: rgba(255, 255, 255, .045);
color: rgba(255, 255, 255, .76);
}
.nova-live-filter-panel button {
cursor: pointer;
}
.nova-live-filter-panel button.active {
color: #fff;
border-color: rgba(91, 150, 255, .68);
background: rgba(54, 55, 137, .28);
}
.nova-live-filter-panel > label {
position: relative;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nova-live-filter-panel select {
position: absolute;
inset: 0;
width: 100%;
opacity: 0;
cursor: pointer;
}
.nova-live-filter-panel .nova-live-reset {
color: #fff;
border: 0;
background: linear-gradient(100deg, #9f28ec, #6746e8 58%, #198dce);
}
.nova-live-content {
width: 100%;
max-width: none;
min-height: 100dvh;
margin: 0;
padding: calc(var(--live-header-h) + 18px) var(--live-inline-pad) var(--live-bottom-space);
box-sizing: border-box;
}
.nova-live-list,
.channel-skeleton-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(10px, 1.15vw, 18px) clamp(14px, 1.45vw, 24px);
}
.nova-live-list.view-list {
grid-template-columns: minmax(0, 1fr);
}
.nova-live-row {
--program-progress: 56%;
min-width: 0;
min-height: clamp(94px, 6.25vw, 116px);
display: grid;
grid-template-columns: clamp(108px, 8vw, 148px) minmax(0, 1fr) clamp(56px, 4.4vw, 72px);
grid-template-areas: "logo copy meta";
align-items: stretch;
direction: ltr;
overflow: hidden;
border: 1px solid rgba(125, 139, 171, .22);
border-radius: 9px;
background: rgba(1, 3, 7, .94);
box-shadow: inset 0 1px rgba(255, 255, 255, .018);
cursor: pointer;
transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.nova-live-row:hover {
border-color: rgba(112, 74, 233, .48);
background: rgba(5, 7, 14, .98);
transform: translateY(-1px);
}
.nova-live-row-logo {
grid-area: logo;
padding: clamp(8px, .75vw, 12px) clamp(10px, .9vw, 15px);
display: grid;
place-items: center;
background: radial-gradient(circle at center, rgba(57, 32, 128, .13), transparent 72%);
}
.nova-live-row-image,
.nova-live-row-logo .nova-live-row-image {
width: clamp(82px, 6.2vw, 112px);
height: clamp(68px, 5.1vw, 92px);
display: block;
object-fit: contain;
filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .38));
}
.nova-live-row-copy {
grid-area: copy;
min-width: 0;
padding: clamp(10px, .9vw, 15px) clamp(10px, 1vw, 16px) clamp(8px, .75vw, 12px);
display: flex;
flex-direction: column;
justify-content: center;
direction: rtl;
text-align: right;
}
.nova-live-title-line {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.nova-live-title-line h2 {
min-width: 0;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #f8f8fa;
font-size: clamp(.86rem, .85vw, 1.05rem);
line-height: 1.2;
font-weight: 760;
}
.nova-live-badge {
flex: 0 0 auto;
padding: 3px 5px 2px;
border-radius: 3px;
background: linear-gradient(100deg, #9225ef, #5b32db);
color: #fff;
font-family: Arial, sans-serif;
font-size: .52rem;
line-height: 1.05;
font-weight: 900;
}
.nova-live-row-copy small {
min-width: 0;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(255, 255, 255, .56);
font-size: clamp(.66rem, .64vw, .78rem);
line-height: 1.2;
}
.nova-live-row-copy time {
margin-top: 2px;
color: rgba(255, 255, 255, .47);
font-family: "Segoe UI", Arial, sans-serif;
font-size: clamp(.63rem, .60vw, .74rem);
line-height: 1.1;
direction: ltr;
text-align: right;
}
.nova-live-progress {
width: 100%;
height: 3px;
margin-top: 7px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, .13);
direction: ltr;
}
.nova-live-progress i {
width: var(--program-progress);
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg, #c22cf5 0%, #723de1 46%, #08a5ed 100%);
}
.nova-live-row-meta {
grid-area: meta;
padding: clamp(9px, .82vw, 13px) clamp(8px, .72vw, 11px) clamp(8px, .72vw, 11px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
direction: rtl;
}
.nova-live-row-meta strong {
color: #f5f5f7;
font-family: "Segoe UI", Arial, sans-serif;
font-size: clamp(.72rem, .70vw, .86rem);
line-height: 1;
font-weight: 600;
}
.nova-live-favorite {
color: rgba(255, 255, 255, .64);
font-family: Arial, sans-serif;
font-size: 1.55rem;
line-height: 1;
}
.nova-live-infinite-sentinel {
min-height: 72px;
padding: 20px 0 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(255, 255, 255, .46);
font-size: .75rem;
}
.nova-live-loading-spinner {
width: 19px;
height: 19px;
border: 2px solid rgba(255, 255, 255, .15);
border-top-color: #9f36f5;
border-right-color: #1aa9ec;
border-radius: 50%;
animation: live-spin .72s linear infinite;
}
@keyframes live-spin {
to { transform: rotate(360deg); }
}
.channel-page-state {
min-height: 58dvh;
display: grid;
place-items: center;
align-content: center;
gap: 12px;
text-align: center;
color: rgba(255, 255, 255, .66);
}
.channel-page-state h1 {
margin: 0;
color: #fff;
}
.channel-page-state p {
margin: 0;
}
.channel-primary-action {
min-height: 43px;
padding: 0 22px;
border: 0;
border-radius: 10px;
color: #fff;
background: linear-gradient(100deg, #9f28ec, #6746e8 58%, #198dce);
}
.channel-skeleton-row {
min-height: 96px;
border-radius: 9px;
background: linear-gradient(90deg, #05080f, #101522, #05080f);
background-size: 220% 100%;
animation: live-shimmer 1.15s linear infinite;
}
@keyframes live-shimmer {
to { background-position: -220% 0; }
}
@media (max-width: 1180px) and (min-width: 901px) {
.nova-live-page {
--live-inline-pad: 24px;
}
.nova-live-topbar {
grid-template-columns: 40px 158px minmax(220px, 430px) minmax(0, 1fr);
gap: 10px;
}
.nova-live-brand {
width: 158px;
}
.nova-live-brand img {
width: 150px;
}
.nova-live-account-name,
.nova-live-account > svg:last-child {
display: none;
}
.nova-live-account {
padding-inline: 2px;
}
.nova-live-category {
min-width: 62px;
padding-inline: 12px;
}
}
@media (min-width: 1600px) {
.nova-live-page {
--live-inline-pad: clamp(42px, 3.6vw, 78px);
}
.nova-live-list,
.channel-skeleton-list {
gap: 16px 26px;
}
}
@media (max-width: 980px) and (min-width: 901px) {
.nova-live-list,
.channel-skeleton-list {
gap: 10px;
}
.nova-live-row {
grid-template-columns: 96px minmax(0, 1fr) 52px;
}
.nova-live-row-image,
.nova-live-row-logo .nova-live-row-image {
width: 74px;
height: 62px;
}
}
@media (max-width: 900px) {
.nova-live-page {
--live-header-h: calc(152px + var(--safe-top, 0px));
--live-inline-pad: 11px;
--live-bottom-space: calc(var(--bottom-nav-h, 70px) + var(--safe-bottom, 0px) + 20px);
}
.nova-live-page.mobile-search-open {
--live-header-h: calc(198px + var(--safe-top, 0px));
}
.nova-live-fixed-header {
padding: var(--safe-top, 0px) 11px 0;
grid-template-rows: 58px 94px;
transition: height .18s ease, grid-template-rows .18s ease;
}
.nova-live-page.mobile-search-open .nova-live-fixed-header {
grid-template-rows: 104px 94px;
}
.nova-live-topbar {
height: 58px;
grid-template-columns: 36px minmax(98px, 1fr) auto;
grid-template-rows: 56px;
grid-template-areas: "menu brand actions";
gap: 2px 8px;
transition: height .18s ease, grid-template-rows .18s ease;
}
.nova-live-page.mobile-search-open .nova-live-topbar {
height: 104px;
grid-template-rows: 56px 40px;
grid-template-areas:
"menu brand actions"
"search search search";
gap: 6px 8px;
}
.nova-live-menu {
width: 34px;
height: 34px;
align-self: center;
}
.nova-live-brand {
width: 126px;
height: 46px;
justify-self: start;
}
.nova-live-brand img {
width: 122px;
height: 41px;
}
.nova-live-actions {
gap: 2px;
}
.nova-live-mobile-search-toggle {
display: grid;
}
.nova-live-mobile-search-toggle.active {
color: #fff;
background: rgba(106, 68, 226, .18);
box-shadow: inset 0 0 0 1px rgba(75, 168, 255, .42);
}
.nova-live-icon,
.nova-live-filter-button,
.nova-live-account,
.nova-live-account-avatar {
width: 34px;
height: 34px;
min-width: 34px;
flex-basis: 34px;
padding: 0;
border-radius: 8px;
}
.nova-live-filter-button {
border-color: transparent;
background: transparent;
}
.nova-live-filter-button > span,
.nova-live-filter-button > svg:last-child,
.nova-live-account-name,
.nova-live-account > svg:last-child {
display: none;
}
.nova-live-account-avatar {
border-radius: 50%;
}
.nova-live-search {
width: 100%;
height: 40px;
padding-inline: 11px;
border-radius: 8px;
display: none;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
}
.nova-live-search.mobile-open {
display: flex;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
animation: nova-live-mobile-search-in .18s ease-out both;
}
.nova-live-search input {
font-size: .78rem;
}
.nova-live-search kbd {
display: none;
}
.nova-live-guide-header {
height: 94px;
padding: 6px 0 8px;
grid-template-rows: 30px 44px;
gap: 6px;
}
.nova-live-guide-title h1 {
font-size: 1rem;
}
.nova-live-total {
font-size: .65rem;
}
.nova-live-signal {
width: 18px;
height: 18px;
}
.nova-live-controls {
display: block;
}
.nova-live-category-row {
width: 100%;
height: 38px;
gap: 7px;
}
.nova-live-category {
height: 31px;
min-width: 57px;
padding: 0 13px;
border-radius: 7px;
font-size: .69rem;
}
.nova-live-view-tools {
display: none;
}
.nova-live-filter-panel {
top: calc(var(--live-header-h) - 3px);
right: 11px;
width: calc(100vw - 22px);
max-height: calc(100dvh - var(--live-header-h) - 12px);
overflow-y: auto;
}
.nova-live-content {
padding: calc(var(--live-header-h) + 11px) var(--live-inline-pad) var(--live-bottom-space);
}
.nova-live-list,
.nova-live-list.view-list,
.channel-skeleton-list {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.nova-live-row {
min-height: 86px;
grid-template-columns: 88px minmax(0, 1fr) 51px;
border-radius: 8px;
}
.nova-live-row-logo {
padding: 7px 8px;
}
.nova-live-row-image,
.nova-live-row-logo .nova-live-row-image {
width: 69px;
height: 61px;
}
.nova-live-row-copy {
padding: 9px 8px 7px;
}
.nova-live-title-line {
gap: 6px;
}
.nova-live-title-line h2 {
font-size: .83rem;
}
.nova-live-badge {
padding: 2px 4px;
font-size: .46rem;
}
.nova-live-row-copy small {
margin-top: 3px;
font-size: .61rem;
}
.nova-live-row-copy time {
font-size: .58rem;
}
.nova-live-progress {
height: 3px;
margin-top: 6px;
}
.nova-live-row-meta {
padding: 9px 7px 7px;
}
.nova-live-row-meta strong {
font-size: .68rem;
}
.nova-live-favorite {
font-size: 1.32rem;
}
.channel-skeleton-row {
min-height: 86px;
}
.nova-live-infinite-sentinel {
min-height: 62px;
padding-top: 14px;
font-size: .67rem;
}
}
@media (max-width: 390px) {
.nova-live-page {
--live-inline-pad: 9px;
}
.nova-live-fixed-header {
padding-inline: 9px;
}
.nova-live-topbar {
grid-template-columns: 34px minmax(88px, 1fr) auto;
column-gap: 5px;
}
.nova-live-brand {
width: 111px;
}
.nova-live-brand img {
width: 108px;
}
.nova-live-settings {
display: none;
}
.nova-live-filter-panel {
right: 9px;
width: calc(100vw - 18px);
}
.nova-live-total {
display: none;
}
.nova-live-row {
min-height: 80px;
grid-template-columns: 75px minmax(0, 1fr) 45px;
}
.nova-live-row-image,
.nova-live-row-logo .nova-live-row-image {
width: 58px;
height: 54px;
}
.nova-live-title-line h2 {
font-size: .77rem;
}
.nova-live-row-copy small {
font-size: .57rem;
}
.nova-live-row-copy time {
font-size: .54rem;
}
}
@keyframes nova-live-mobile-search-in {
from {
opacity: 0;
transform: translateY(-5px) scale(.99);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.nova-live-row,
.nova-live-icon,
.nova-live-loading-spinner {
animation: none !important;
transition: none !important;
}
}
.channel-motion-loading {
min-height: calc(100dvh - var(--bottom-nav-h, 76px) - var(--nova-live-fixed-header-height, 150px));
padding-top: 10px;
box-sizing: border-box;
background: transparent !important;
}
/* Official Nova mark is the universal launcher for the side drawer. */
.nova-live-menu .nova-live-menu-logo {
width: 31px;
height: 31px;
display: block;
object-fit: contain;
border-radius: 50%;
filter: drop-shadow(0 3px 10px rgba(0,0,0,.72));
transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.nova-live-menu:active .nova-live-menu-logo {
transform: scale(.9) rotate(-5deg);
}
@media (max-width: 760px) {
.nova-live-menu .nova-live-menu-logo {
width: 29px;
height: 29px;
}
}
/* ORIGINAL SOURCE: Components/Pages/LiveTvPage.razor.css */
/* تم نقل تصميم القنوات إلى LiveTv.razor بأسلوب قسري حتى يظهر على Windows والهاتف. */
/* ORIGINAL SOURCE: Components/Pages/Matches.razor.css */
:host { display:block; min-height:100dvh; background:#000000; }
.matches-page-app { min-height:100dvh; background:#000000; color:#fff; padding-bottom:calc(76px + var(--safe-bottom, 0px)); }
.matches-page-shell { min-height:100dvh; background:radial-gradient(circle at 50% 0%, rgba(151,0,198,.12), transparent 30%), #000000; overflow-x:hidden; }
.matches-loading,.matches-error { min-height:100dvh; display:grid; place-items:center; align-content:center; gap:12px; padding:24px; text-align:center; color:#fff; }
.matches-loading span { width:44px; height:44px; border-radius:50%; border:3px solid rgba(255,255,255,.14); border-top-color:#9b6cff; animation:matches-spin .9s linear infinite; }
.matches-loading strong,.matches-error h1 { margin:0; font-size:1.35rem; font-weight:950; }
.matches-loading small,.matches-error p { color:rgba(255,255,255,.68); }
.matches-error .primary-action { min-height:46px; padding:0 18px; border:0; border-radius:14px; background:linear-gradient(135deg,#9700c6,#1da0ff); color:#fff; font-weight:950; }
@keyframes matches-spin { to { transform:rotate(360deg); } }
@media(max-width:640px){ .matches-page-app { padding-bottom:calc(62px + var(--safe-bottom, 0px)); } }
/* ORIGINAL SOURCE: Components/Pages/MediaCatalog.razor.css */
:host { display: contents; }
/* ORIGINAL SOURCE: Components/Pages/MovieCollectionDetailsPage.razor.css */
.collection-details-page { min-height: 100vh; color: #fff; background: #000; font-family: Tajawal, Arial, sans-serif; }
.collection-details-toolbar {
position: fixed; z-index: 220; top: 0; right: 0; left: 0;
height: calc(62px + var(--safe-top, 0px)); padding: var(--safe-top, 0px) clamp(12px, 3vw, 32px) 0;
display: grid; grid-template-columns: 42px 1fr 42px; gap: 12px; align-items: center;
background: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.24), transparent);
}
.collection-details-toolbar strong { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
.collection-details-toolbar button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #fff; background: rgba(10,10,10,.68); }
.collection-details-main { min-height: 100vh; background: #000; }
.collection-details-hero { position: relative; min-height: clamp(520px, 72vh, 820px); overflow: hidden; background: #060606; }
.collection-details-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collection-details-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.05) 52%, rgba(0,0,0,.38)), linear-gradient(to top, #000 0%, rgba(0,0,0,.82) 28%, rgba(0,0,0,.14) 70%); }
.collection-details-hero-copy { position: absolute; right: clamp(18px, 5vw, 72px); bottom: clamp(34px, 8vh, 88px); width: min(720px, 84vw); display: grid; gap: 11px; }
.collection-details-hero-copy > span { width: max-content; padding: 5px 10px; border: 1px solid rgba(75,233,255,.34); border-radius: 999px; color: #4BE9FF; background: rgba(0,0,0,.55); font-size: .68rem; font-weight: 950; }
.collection-details-hero-copy h1 { max-width: 760px; margin: 0; font-size: clamp(2rem, 6vw, 4.8rem); font-weight: 950; line-height: .98; letter-spacing: -.055em; text-shadow: 0 18px 45px rgba(0,0,0,.7); }
.collection-details-meta { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.75); font-size: .82rem; }
.collection-details-meta i { width: 4px; height: 4px; border-radius: 50%; background: #C25DFF; }
.collection-details-hero-copy p { max-width: 650px; margin: 0; color: rgba(255,255,255,.68); line-height: 1.7; font-size: .9rem; }
.collection-details-actions { display: flex; gap: 9px; margin-top: 7px; }
.collection-details-actions button { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; font-weight: 950; }
.collection-primary { border: 0; color: #000; background: #fff; }
.collection-secondary { border: 1px solid rgba(255,255,255,.15); color: #fff; background: rgba(255,255,255,.06); }
.collection-parts { display: grid; gap: 18px; padding: 26px clamp(12px, 4vw, 58px) 70px; }
.collection-parts > header { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.collection-parts > header div { display: grid; gap: 3px; }
.collection-parts > header small { color: #C25DFF; font-size: .65rem; font-weight: 950; letter-spacing: .13em; }
.collection-parts > header h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 950; }
.collection-parts > header > span { color: rgba(255,255,255,.45); font-size: .72rem; }
.collection-parts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.collection-part { min-width: 0; display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 14px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); }
.collection-part-art { position: relative; aspect-ratio: 2 / 3; overflow: hidden; padding: 0; border: 0; border-radius: 13px; background: #0b0b0b; }
.collection-part-image { width: 100%; height: 100%; object-fit: cover; }
.collection-part-number { position: absolute; right: 7px; bottom: 7px; min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: #fff; background: rgba(0,0,0,.72); font-size: .72rem; font-weight: 950; }
.collection-part-copy { min-width: 0; display: grid; align-content: center; gap: 5px; }
.collection-part-copy > small { color: #4BE9FF; font-size: .66rem; font-weight: 900; }
.collection-part-copy h3 { display: -webkit-box; overflow: hidden; margin: 0; color: #fff; font-size: 1rem; line-height: 1.4; font-weight: 950; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.collection-part-copy p { margin: 0; color: rgba(255,255,255,.48); font-size: .72rem; }
.collection-part-copy > div { display: flex; gap: 7px; margin-top: 6px; }
.collection-part-copy button { min-height: 34px; padding: 0 11px; border-radius: 999px; font-size: .72rem; font-weight: 900; }
.collection-part-play { display: inline-flex; align-items: center; gap: 5px; border: 0; color: #000; background: #fff; }
.collection-part-details { border: 1px solid rgba(255,255,255,.12); color: #fff; background: transparent; }
.collection-details-loading, .collection-details-state { min-height: 100vh; padding: 80px 18px; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; background: #000; }
.collection-details-state h1 { margin: 0; font-size: 1.3rem; }
.collection-details-state p { max-width: 470px; margin: 0; color: rgba(255,255,255,.56); line-height: 1.7; }
.collection-details-state button { min-height: 42px; padding: 0 18px; border: 1px solid rgba(194,93,255,.35); border-radius: 999px; color: #fff; background: rgba(194,93,255,.1); font-weight: 900; }
@media (max-width: 900px) { .collection-parts-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
.collection-details-toolbar { height: calc(56px + var(--safe-top, 0px)); padding-inline: 9px; grid-template-columns: 38px 1fr 38px; }
.collection-details-toolbar button { width: 35px; height: 35px; }
.collection-details-hero { min-height: 610px; }
.collection-details-hero-copy { right: 14px; left: 14px; bottom: 28px; width: auto; }
.collection-details-hero-copy h1 { font-size: clamp(2rem, 11vw, 3.4rem); }
.collection-details-hero-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.collection-details-actions { flex-wrap: wrap; }
.collection-parts { padding: 20px 10px 42px; }
.collection-parts > header > span { display: none; }
.collection-part { grid-template-columns: 104px minmax(0,1fr); gap: 11px; padding: 8px; border-radius: 15px; }
.collection-part-copy h3 { font-size: .92rem; }
}
/* Nova+ details pure-black surface policy. */
.collection-details-page,
.collection-details-main,
.collection-details-hero,
.collection-parts,
.collection-part,
.collection-part-art,
.collection-details-loading,
.collection-details-state {
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
}
.collection-details-toolbar button,
.collection-secondary,
.collection-part-number,
.collection-details-state button {
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
}
/* ORIGINAL SOURCE: Components/Pages/MovieCollectionsPage.razor.css */
.collections-browser {
min-height: 100vh;
color: #fff;
background: #000;
font-family: Tajawal, Arial, sans-serif;
}
.collections-browser-toolbar {
position: fixed;
z-index: 200;
top: 0;
right: 0;
left: 0;
height: calc(66px + var(--safe-top, 0px));
padding: var(--safe-top, 0px) clamp(14px, 3vw, 34px) 0;
display: grid;
grid-template-columns: 44px 1fr 44px;
align-items: center;
gap: 12px;
background: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.72), rgba(0,0,0,.05));
}
.collections-browser-toolbar > div { text-align: center; }
.collections-browser-toolbar small { display: block; color: #4BE9FF; font-size: .6rem; font-weight: 950; letter-spacing: .12em; }
.collections-browser-toolbar h1 { margin: 2px 0 0; font-size: 1.08rem; font-weight: 950; }
.collections-round-button {
width: 40px;
height: 40px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
color: #fff;
background: rgba(12,12,12,.72);
}
.collections-browser-main {
min-height: 100vh;
padding: calc(88px + var(--safe-top, 0px)) clamp(12px, 3.5vw, 54px) calc(var(--bottom-nav-h, 76px) + 42px);
background:
radial-gradient(circle at 86% 8%, rgba(194,93,255,.12), transparent 24%),
radial-gradient(circle at 12% 22%, rgba(75,233,255,.08), transparent 22%),
#000;
}
.collections-browser-intro {
max-width: 760px;
display: grid;
gap: 9px;
padding: clamp(24px, 5vw, 52px) 0 24px;
}
.collections-browser-intro > span { color: #C25DFF; font-size: .7rem; font-weight: 950; letter-spacing: .13em; }
.collections-browser-intro h2 { margin: 0; font-size: clamp(1.7rem, 5vw, 3.25rem); font-weight: 950; letter-spacing: -.045em; }
.collections-browser-intro p { max-width: 650px; margin: 0; color: rgba(255,255,255,.57); line-height: 1.75; font-size: .9rem; }
.collections-browser-search {
margin-top: 15px;
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(150px, 210px) auto;
gap: 9px;
}
.collections-browser-search label {
min-height: 46px;
display: flex;
align-items: center;
gap: 9px;
padding: 0 14px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 14px;
background: rgba(255,255,255,.045);
}
.collections-browser-search input {
width: 100%;
border: 0;
outline: 0;
color: #fff;
background: transparent;
font: inherit;
}
.collections-browser-search select,
.collections-browser-search button {
min-height: 46px;
border-radius: 14px;
font: inherit;
font-size: .82rem;
font-weight: 900;
}
.collections-browser-search select { padding: 0 12px; border: 1px solid rgba(255,255,255,.11); color: #fff; background: #0b0b0b; }
.collections-browser-search button { padding: 0 18px; border: 0; color: #000; background: #fff; }
.collections-results-head { padding: 12px 0 15px; }
.collections-results-head div { display: grid; gap: 3px; }
.collections-results-head small { color: rgba(255,255,255,.46); font-size: .72rem; }
.collections-results-head strong { font-size: 1rem; }
.collections-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 1.8vw, 20px);
}
.collections-load-more { display: flex; justify-content: center; padding: 30px 0 12px; }
.collections-load-more button,
.collections-state button {
min-height: 44px;
padding: 0 22px;
border: 1px solid rgba(194,93,255,.34);
border-radius: 999px;
color: #fff;
background: rgba(194,93,255,.10);
font-weight: 900;
}
.collections-state,
.collections-loading {
min-height: 42vh;
display: grid;
place-items: center;
align-content: center;
gap: 12px;
text-align: center;
}
.collections-state h2 { margin: 0; font-size: 1.2rem; }
.collections-state p { max-width: 480px; margin: 0; color: rgba(255,255,255,.58); line-height: 1.7; }
@media (max-width: 980px) {
.collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.collections-browser-toolbar { height: calc(58px + var(--safe-top, 0px)); grid-template-columns: 38px 1fr 38px; padding-inline: 11px; }
.collections-round-button { width: 36px; height: 36px; }
.collections-browser-main { padding-top: calc(72px + var(--safe-top, 0px)); padding-inline: 10px; }
.collections-browser-intro { padding-top: 22px; }
.collections-browser-intro p { font-size: .82rem; }
.collections-browser-search { grid-template-columns: 1fr auto; }
.collections-browser-search label { grid-column: 1 / -1; }
.collections-grid { grid-template-columns: 1fr; }
}
/* ORIGINAL SOURCE: Components/Pages/MoviesCatalogPage.razor.css */
:host {
display: block;
background: #000000;
}
.catalog-app,
.movies-catalog-app {
min-height: 100vh;
background-color: #000000;
color: #fff;
font-family: Tajawal, Arial, sans-serif;
}
/* الرأس الثابت */
.catalog-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
background: #000000;
padding: calc(10px + var(--safe-top, 0px)) 12px 4px;
border-bottom: 1px solid rgba(255,255,255,.03);
}
/* القسم العلوي: العنوان وزر البحث */
.header-top {
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.header-top .icon-button {
width: 36px;
height: 36px;
padding: 0;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: #fff;
}
.page-title {
margin: 0;
color: #fff;
font-size: 1.3rem;
line-height: 1;
font-weight: 800;
white-space: nowrap;
}
.spacer {
width: 36px;
height: 36px;
}
/* القوائم الأفقية القابلة للتمرير */
.scrollable-tabs {
display: flex;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollable-tabs::-webkit-scrollbar {
display: none;
}
/* تبويبات التصنيفات */
.categories-tabs {
gap: 8px;
padding: 0 0 10px;
}
.tab-btn {
flex: 0 0 auto;
height: 34px;
padding: 0 14px;
border: 0;
border-radius: 6px;
background: transparent;
color: #999;
font-size: 0.95rem;
font-weight: 600;
white-space: nowrap;
transition: 0.2s ease;
}
.tab-btn.active {
background: linear-gradient(to left, #14D7FF, #9B4DFF);
color: #fff;
font-weight: 700;
}
/* فلاتر المحتوى */
.filters-tabs {
gap: 8px;
padding: 0 0 8px;
}
.filter-pill {
flex: 0 0 auto;
height: 30px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
border: 0;
border-radius: 15px;
background-color: #1a1a1a;
color: #ccc;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.filter-pill .dot-icon {
color: #555;
font-size: 1rem;
line-height: 1;
}
.filter-pill.active {
color: #fff;
}
.filter-pill.active .active-dot {
width: 5px;
height: 5px;
display: inline-block;
border-radius: 50%;
background-color: #14D7FF;
}
/* منطقة المحتوى وشبكة العرض */
.catalog-main {
padding: calc(132px + var(--safe-top, 0px)) 12px calc(88px + var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px));
background: #000000;
min-height: 100vh;
}
.media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.media-card {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 8px;
background-color: #1a1a1a;
box-shadow: 0 4px 10px rgba(0,0,0,.4);
cursor: pointer;
}
.media-card .movie-poster-image {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
transform: scale(1.002);
pointer-events: none;
}
.media-card::after {
content: "";
position: absolute;
inset: 42% 0 0;
background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 48%, transparent 100%);
pointer-events: none;
}
.card-badges {
position: absolute;
z-index: 3;
top: 6px;
left: 6px;
right: 6px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.badge {
min-height: 20px;
padding: 2px 5px;
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 4px;
color: #fff;
background: rgba(0,0,0,.75);
font-size: .7rem;
font-weight: 700;
line-height: 1;
backdrop-filter: blur(4px);
}
.age-badge {
background: #9B4DFF;
}
.quality-badge {
background: rgba(0,0,0,.75);
}
.card-title-overlay {
position: absolute;
z-index: 4;
right: 0;
left: 0;
bottom: 0;
padding: 30px 8px 8px;
text-align: center;
pointer-events: none;
}
.card-title-overlay h3 {
margin: 0;
overflow: hidden;
color: #fff;
font-size: 0.85rem;
line-height: 1.2;
font-weight: 700;
text-shadow: 0 2px 5px rgba(0,0,0,.9);
white-space: nowrap;
text-overflow: ellipsis;
}
/* حالات التحميل والأخطاء */
.catalog-loading,
.catalog-empty {
min-height: 48vh;
display: grid;
place-items: center;
align-content: center;
gap: 12px;
color: #fff;
text-align: center;
}
.home-loader-ring {
width: 42px;
height: 42px;
border: 3px solid rgba(255,255,255,.14);
border-top-color: #9B4DFF;
border-radius: 50%;
animation: catalog-spin .85s linear infinite;
}
.catalog-inline-loading {
padding: 22px 0;
display: grid;
place-items: center;
}
.primary-action {
min-height: 40px;
padding: 0 16px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(to left, #14D7FF, #9B4DFF);
font-weight: 900;
transition: opacity 0.2s;
}
.primary-action:active {
opacity: 0.8;
}
@keyframes catalog-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 420px) {
.catalog-header {
padding-inline: 10px;
}
.catalog-main {
padding-inline: 10px;
}
.media-grid {
gap: 8px;
}
}
@media (min-width: 760px) {
.media-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.catalog-main {
max-width: 1180px;
margin-inline: auto;
}
}
/* ORIGINAL SOURCE: Components/Pages/MoviesPage.razor.css */
:host {
display: block;
background: #000000 !important;
}
.movies-landing-app {
min-height: 100vh;
background: #000000 !important;
color: #fff;
font-family: Tajawal, Arial, sans-serif;
}
/* 1. الشريط العلوي في حالته الافتراضية */
.movies-landing-toolbar {
position: fixed;
z-index: 150;
top: 0;
right: 0;
left: 0;
height: calc(65px + var(--safe-top, 0px));
padding: var(--safe-top, 0px) max(20px,var(--safe-right,0px)) 0 max(20px,var(--safe-left,0px));
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
border-bottom: 1px solid transparent;
transition: background-color 0.4s ease, border-bottom 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
pointer-events: auto;
}
/* 2. الشريط العلوي عند التمرير */
.movies-landing-toolbar.scrolled {
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.movies-landing-toolbar h1 {
margin: 0;
color: #fff;
font-size: 1.45rem;
line-height: 1;
font-weight: 900;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
/* زر البحث */
.movies-toolbar-button {
width: 38px;
height: 38px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
color: #fff;
background: transparent;
flex-shrink: 0;
transition: all 0.2s ease;
}
.movies-toolbar-button:active {
background: rgba(255, 255, 255, 0.15);
transform: scale(0.92);
}
/* منطقة المحتوى */
.movies-landing-main {
padding-top: 0;
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 20px);
min-height: 100vh;
overflow-x: hidden;
background: #000000 !important;
}
.movies-home-reference {
background: #000000 !important;
}
.movies-home-reference .target-home-hero-shell {
margin-top: 0;
background: #000000 !important;
}
/* حالات التحميل والخطأ */
.movies-landing-loading,
.movies-landing-empty {
min-height: 100vh;
padding: calc(90px + var(--safe-top, 0px)) 22px 120px;
display: grid;
place-items: center;
align-content: center;
gap: 14px;
color: #fff;
text-align: center;
background: #000000 !important;
}
.home-loader-ring {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: #9B4DFF;
animation: movies-spin 0.8s linear infinite;
}
.movies-landing-loading strong,
.movies-landing-empty h1 {
margin: 0;
font-size: 1.1rem;
font-weight: 800;
}
.movies-landing-loading small,
.movies-landing-empty p {
color: rgba(255,255,255,0.6);
font-size: 0.85rem;
line-height: 1.6;
}
.primary-action {
min-height: 40px;
padding: 0 20px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(to left, #14D7FF, #9B4DFF);
font-size: 0.9rem;
font-weight: 800;
transition: opacity 0.2s;
}
.primary-action:active {
opacity: 0.8;
}
@keyframes movies-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 420px) {
.movies-landing-toolbar {
height: calc(58px + var(--safe-top, 0px));
padding-inline: 16px;
}
.movies-toolbar-button {
width: 34px;
height: 34px;
}
.movies-landing-toolbar h1 {
font-size: 1.25rem;
}
}
/* ORIGINAL SOURCE: Components/Pages/Notifications.razor.css */
:host{display:block;min-height:100dvh;background:#000!important}.notifications-page-app{min-height:100dvh;background:#000!important;color:#fff;font-family:Tajawal,Arial,sans-serif;padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px))}.notifications-pro-header{position:fixed;z-index:160;top:0;right:0;left:0;height:calc(72px + var(--safe-top,0px));padding:var(--safe-top,0px) max(clamp(16px,3vw,38px),var(--safe-right,0px)) 0 max(clamp(16px,3vw,38px),var(--safe-left,0px));display:grid;grid-template-columns:42px 1fr 42px;align-items:center;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}.notifications-pro-header h1{margin:0;text-align:center;font-size:1.55rem;font-weight:950}.notifications-pro-header button{width:42px;height:42px;border:0;border-radius:50%;display:grid;place-items:center;background:#000;color:#fff}.notifications-page-shell{min-height:100dvh;padding:calc(92px + var(--safe-top,0px)) clamp(14px,3vw,44px) calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 34px);background:#000!important;overflow-x:hidden}.notifications-page-content{width:min(100%,1100px);margin:0 auto;display:grid;gap:18px}.notifications-delivery-state{min-height:66px;padding:11px 14px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;border:1px solid rgba(79,216,152,.32);border-radius:14px;background:rgba(31,127,82,.1)}.notifications-delivery-state>span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(79,216,152,.14);color:#4fd898}.notifications-delivery-state strong,.notifications-delivery-state small{display:block}.notifications-delivery-state small{margin-top:3px;color:rgba(255,255,255,.55);font-size:.72rem}.notifications-delivery-state.registration-error{border-color:rgba(255,100,100,.35);background:rgba(145,30,30,.12)}.notifications-delivery-state.registration-error>span{background:rgba(255,100,100,.12);color:#ff7373}.notifications-actions-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.notifications-actions-row span{color:rgba(255,255,255,.55);font-size:.78rem}.mark-read{border:0;background:#000;color:#a454ff;font:inherit;font-weight:850;display:flex;align-items:center;gap:7px}.notifications-filters{display:flex;align-items:center;gap:9px;overflow-x:auto;scrollbar-width:none}.notifications-filters::-webkit-scrollbar{display:none}.notifications-filters button{height:42px;padding:0 18px;flex:0 0 auto;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:#000;color:rgba(255,255,255,.72);font:inherit;font-weight:800;display:flex;align-items:center;gap:7px}.notifications-filters button.active{border-color:transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box;color:#fff}.notifications-list{display:grid;gap:12px}.notification-card{width:100%;min-height:126px;padding:14px;display:grid;grid-template-columns:120px minmax(0,1fr) 58px;align-items:center;gap:18px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#000;color:#fff;text-align:right;font:inherit}.notification-card.unread{border-color:transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,rgba(198,44,255,.75),rgba(112,80,255,.55),rgba(22,168,255,.72)) border-box}.notification-media{width:116px;height:82px;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#000;color:#9153ff;display:grid;place-items:center}.notification-media img{width:100%;height:100%;object-fit:cover}.notification-copy{min-width:0;display:grid;gap:6px}.notification-title-row{display:flex;align-items:center;gap:9px}.notification-title-row strong{overflow:hidden;font-size:1rem;white-space:nowrap;text-overflow:ellipsis}.notification-title-row i{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:linear-gradient(100deg,#c62cff,#16a8ff)}.notification-body{overflow:hidden;color:rgba(255,255,255,.66);font-size:.82rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.notification-copy small{color:rgba(255,255,255,.45);font-size:.7rem}.notification-action-icon{width:52px;height:52px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#000;color:#8d53ff;display:grid;place-items:center}.notifications-empty{min-height:430px;display:grid;place-items:center;align-content:center;gap:12px;text-align:center}.notifications-empty>.oscar-icon{color:#9453ff}.notifications-empty h2{margin:0}.notifications-empty p{margin:0;color:rgba(255,255,255,.58)}.notifications-empty button{height:42px;padding:0 18px;border:1px solid transparent;border-radius:9px;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box;color:#fff;font:inherit;font-weight:900}.notifications-preferences{min-height:92px;padding:15px 18px;display:grid;grid-template-columns:58px minmax(0,1fr) 24px;align-items:center;gap:15px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#000;cursor:pointer}.notifications-preferences>span{width:54px;height:54px;border:1px solid rgba(255,255,255,.13);border-radius:50%;display:grid;place-items:center;color:#9453ff}.notifications-preferences strong,.notifications-preferences small{display:block}.notifications-preferences small{margin-top:4px;color:rgba(255,255,255,.5);font-size:.72rem}.notifications-preferences>.oscar-icon{color:rgba(255,255,255,.48)}
@media(max-width:640px){.notifications-pro-header{height:calc(64px + var(--safe-top,0px));padding-inline:12px}.notifications-pro-header h1{font-size:1.3rem}.notifications-page-shell{padding-top:calc(78px + var(--safe-top,0px));padding-inline:11px}.notification-card{min-height:112px;padding:11px;grid-template-columns:92px minmax(0,1fr) 46px;gap:11px}.notification-media{width:90px;height:70px}.notification-action-icon{width:42px;height:42px}.notification-title-row strong{font-size:.9rem}.notification-body{font-size:.72rem}.notifications-actions-row span{display:none}}
@media(max-width:410px){.notification-card{grid-template-columns:74px minmax(0,1fr);}.notification-media{width:72px;height:64px}.notification-action-icon{display:none}.notifications-filters button{height:38px;padding:0 14px;font-size:.72rem}}
/* ORIGINAL SOURCE: Components/Pages/RailCatalogPage.razor.css */
:host { display: block; background: #000; }
.rail-catalog-app {
min-height: 100vh;
background: #000;
color: #fff;
font-family: Tajawal, Arial, sans-serif;
}
.rail-catalog-header {
position: fixed;
z-index: 190;
top: 0;
right: 0;
left: 0;
min-height: calc(68px + var(--safe-top, 0px));
padding: var(--safe-top, 0px) 16px 8px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: 12px;
background: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.82), rgba(0,0,0,.28), transparent);
backdrop-filter: blur(16px);
}
.rail-catalog-back {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
color: #fff;
background: rgba(8,8,12,.72);
}
.rail-catalog-heading { min-width: 0; text-align: center; }
.rail-catalog-heading > span {
display: block;
color: rgba(164,115,255,.92);
font-size: .58rem;
font-weight: 950;
letter-spacing: .12em;
}
.rail-catalog-heading h1 {
margin: 3px 0 0;
overflow: hidden;
color: #fff;
font-size: clamp(1rem, 3vw, 1.34rem);
font-weight: 950;
white-space: nowrap;
text-overflow: ellipsis;
}
.rail-catalog-heading small {
margin-top: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255,255,255,.6);
font-size: .62rem;
}
.rail-catalog-heading small i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #14d7ff;
box-shadow: 0 0 10px rgba(20,215,255,.64);
}
.rail-catalog-header-spacer { width: 42px; }
.rail-catalog-main {
min-height: 100vh;
padding: calc(88px + var(--safe-top, 0px)) 14px calc(48px + var(--safe-bottom, 0px));
box-sizing: border-box;
background:
radial-gradient(circle at 72% 0%, rgba(155,77,255,.08), transparent 24%),
#000;
}
.rail-catalog-content { max-width: 1500px; margin: 0 auto; }
.rail-catalog-summary {
min-height: 36px;
display: flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,.55);
font-size: .74rem;
}
.rail-catalog-summary strong { color: #fff; font-size: .82rem; }
.rail-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 14px 10px;
align-items: start;
}
.rail-catalog-sentinel { min-height: 2px; margin-top: 24px; }
.rail-catalog-end {
margin: 28px auto 0;
width: fit-content;
padding: 8px 14px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 999px;
color: rgba(255,255,255,.48);
background: rgba(255,255,255,.025);
font-size: .7rem;
}
.rail-catalog-empty {
min-height: calc(100dvh - 150px);
display: grid;
place-items: center;
align-content: center;
gap: 12px;
text-align: center;
}
.rail-catalog-empty h2 { margin: 0; font-size: 1.04rem; font-weight: 950; }
.rail-catalog-empty p { max-width: 420px; margin: 0; color: rgba(255,255,255,.58); line-height: 1.7; }
.rail-catalog-empty .primary-action {
min-height: 42px;
padding: 0 20px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg,#8b45ff,#14d7ff);
font-weight: 900;
}
@media (min-width: 720px) {
.rail-catalog-main { padding-inline: 22px; }
.rail-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 14px; }
}
@media (min-width: 1180px) {
.rail-catalog-main { padding-inline: 34px; }
.rail-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px 16px; }
}
/* ORIGINAL SOURCE: Components/Pages/SeriesCatalogPage.razor.css */
:host {
display: block;
background: #000000;
/* متغيرات النظام والهوية البصرية */
--nova-bg: #000000;
--nova-purple: #9B4DFF;
--nova-blue: #14D7FF;
--nova-purple-rgb: 155, 77, 255;
--nova-blue-rgb: 20, 215, 255;
--font-family: 'Inter', 'Tajawal', system-ui, -apple-system, sans-serif;
--safe-top: max(var(--nova-native-safe-top, 0px), env(safe-area-inset-top, 0px));
--safe-bottom: max(var(--nova-native-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
--page-pad: clamp(12px, 3vw, 24px);
--transition-snappy: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* =========================================
تخصيص شريط التمرير العام لنظام ويندوز
========================================= */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(var(--nova-purple-rgb), 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--nova-purple);
}
/* =========================================
الحاوية الرئيسية للتطبيق
========================================= */
.catalog-app,
.series-catalog-app {
min-height: 100dvh;
color: #fff;
background: radial-gradient(circle at 10% 0%, rgba(var(--nova-purple-rgb), .12), transparent 40%), radial-gradient(circle at 90% 10%, rgba(var(--nova-blue-rgb), .08), transparent 40%), var(--nova-bg);
font-family: var(--font-family);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
}
/* =========================================
الرأس الثابت (Glassmorphism Header)
========================================= */
.catalog-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
padding: calc(10px + var(--safe-top)) var(--page-pad) 8px;
background: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 60%, transparent 100%);
border-bottom: 1px solid rgba(255,255,255,.04);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.header-top {
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.header-top .icon-button {
width: 40px;
height: 40px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.08);
border-radius: 50%;
background: rgba(255,255,255,.03);
color: #fff;
cursor: pointer;
transition: var(--transition-snappy);
}
@media (hover: hover) and (pointer: fine) {
.header-top .icon-button:hover {
background: rgba(255,255,255,.1);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
}
.page-title {
margin: 0;
color: #fff;
font-size: 0.9rem; /* تصغير الخط بشكل كبير للفخامة */
line-height: 1;
font-weight: 900;
letter-spacing: 0.5px;
white-space: nowrap;
}
/* =========================================
القوائم الأفقية القابلة للتمرير (التبويبات)
========================================= */
.scrollable-tabs {
display: flex;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch; /* سحب سلس جداً في أندرويد */
overscroll-behavior-x: contain;
}
.scrollable-tabs::-webkit-scrollbar {
display: none;
}
.categories-tabs, .filters-tabs {
gap: 8px;
padding: 4px 0 8px;
}
/* تبويبات التصنيفات الرئيسية */
.tab-btn {
flex: 0 0 auto;
height: 32px;
padding: 0 14px;
border: 1px solid rgba(255,255,255,.05);
border-radius: 10px;
background: rgba(255,255,255,.03);
color: rgba(255,255,255,.6);
font-size: 0.65rem; /* تصغير الخط */
font-weight: 800;
white-space: nowrap;
cursor: pointer;
transition: var(--transition-snappy);
}
@media (hover: hover) and (pointer: fine) {
.tab-btn:hover:not(.active) {
background: rgba(255,255,255,.1);
color: #fff;
}
}
.tab-btn.active {
background: linear-gradient(135deg, var(--nova-purple), var(--nova-blue));
border-color: transparent;
color: #fff;
box-shadow: 0 6px 15px rgba(var(--nova-purple-rgb), 0.3);
}
/* فلاتر المحتوى الإضافية */
.filter-pill {
flex: 0 0 auto;
height: 30px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 999px;
background: rgba(20, 22, 30, .7);
color: rgba(255,255,255,.7);
font-size: 0.6rem; /* تصغير الخط */
font-weight: 800;
white-space: nowrap;
cursor: pointer;
transition: var(--transition-snappy);
}
.filter-pill .dot-icon {
color: rgba(255,255,255,.3);
font-size: 0.8rem;
line-height: 1;
}
.filter-pill.active {
color: #fff;
background: rgba(255,255,255,.08);
border-color: rgba(var(--nova-blue-rgb), 0.5);
}
.filter-pill.active .active-dot {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background-color: var(--nova-blue);
box-shadow: 0 0 8px var(--nova-blue);
}
/* =========================================
منطقة المحتوى وشبكة العرض
========================================= */
.catalog-main {
padding: calc(140px + var(--safe-top)) var(--page-pad) calc(40px + var(--bottom-nav-h, 76px) + var(--safe-bottom));
min-height: 100dvh;
}
.media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 أعمدة للموبايل كافتراضي */
gap: 12px;
}
/* بطاقة المحتوى (البوستر) */
.media-card {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 14px;
background-color: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.05);
box-shadow: 0 8px 20px rgba(0,0,0,.6);
cursor: pointer;
transition: var(--transition-snappy);
}
.media-card .series-poster-image,
.media-card img {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
transition: transform 0.4s ease;
pointer-events: none;
}
.media-card::after {
content: "";
position: absolute;
inset: 40% 0 0;
background: linear-gradient(to top, rgba(0,0,0,.98) 0%, rgba(0,0,0,.6) 50%, transparent 100%);
pointer-events: none;
transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.media-card:hover {
transform: translateY(-4px);
border-color: rgba(var(--nova-purple-rgb), 0.4);
box-shadow: 0 15px 30px rgba(0,0,0,.8), 0 0 20px rgba(var(--nova-purple-rgb), 0.2);
}
.media-card:hover .series-poster-image,
.media-card:hover img {
transform: scale(1.05);
}
}
/* الشارات (التقييم، الجودة، العمر) */
.card-badges {
position: absolute;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.badge {
min-height: 20px;
padding: 2px 6px;
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 6px;
color: #fff;
background: rgba(0,0,0,.65);
border: 1px solid rgba(255,255,255,.1);
font-size: 0.55rem; /* تصغير الخط جداً */
font-weight: 800;
line-height: 1;
backdrop-filter: blur(8px);
}
.age-badge {
background: rgba(var(--nova-purple-rgb), 0.85);
border-color: rgba(var(--nova-purple-rgb), 1);
}
/* عنوان المحتوى على البوستر */
.card-title-overlay {
position: absolute;
z-index: 4;
right: 0;
left: 0;
bottom: 0;
padding: 20px 10px 10px;
text-align: center;
pointer-events: none;
}
.card-title-overlay h3 {
margin: 0;
overflow: hidden;
color: #fff;
font-size: 0.65rem; /* تصغير الخط بشكل كبير */
line-height: 1.3;
font-weight: 800;
text-shadow: 0 2px 8px rgba(0,0,0,1);
white-space: nowrap;
text-overflow: ellipsis;
}
/* =========================================
حالات التحميل، الخطأ، والأزرار
========================================= */
.catalog-loading,
.catalog-empty {
min-height: 50vh;
display: grid;
place-items: center;
align-content: center;
gap: 14px;
color: #fff;
text-align: center;
}
.home-loader-ring {
width: 46px;
height: 46px;
border: 2px solid rgba(255,255,255,.08);
border-top-color: var(--nova-purple);
border-radius: 50%;
animation: catalog-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.catalog-inline-loading {
padding: 24px 0;
display: grid;
place-items: center;
}
.primary-action {
min-height: 42px;
padding: 0 20px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, var(--nova-purple), var(--nova-blue));
font-size: 0.7rem; /* تصغير الخط */
font-weight: 900;
cursor: pointer;
box-shadow: 0 8px 20px rgba(var(--nova-purple-rgb), 0.25);
transition: var(--transition-snappy);
}
@media (hover: hover) and (pointer: fine) {
.primary-action:hover {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: 0 12px 25px rgba(var(--nova-purple-rgb), 0.4);
}
}
.primary-action:active {
transform: scale(0.95);
}
@keyframes catalog-spin {
to {
transform: rotate(360deg);
}
}
/* =========================================
الاستجابة للشاشات (تجاوب احترافي)
========================================= */
/* هواتف أندرويد الصغيرة جداً */
@media (max-width: 380px) {
.media-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.card-title-overlay h3 {
font-size: 0.6rem;
}
.badge {
padding: 2px 4px;
font-size: 0.5rem;
}
}
/* التابلت وشاشات الديسكتوب الصغيرة */
@media (min-width: 760px) {
.catalog-header {
background: linear-gradient(180deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.8) 70%, transparent 100%);
}
.catalog-main {
max-width: 1200px;
margin-inline: auto;
}
.media-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 أعمدة للتابلت */
gap: 16px;
}
.page-title {
font-size: 1.1rem;
}
.tab-btn {
font-size: 0.7rem;
height: 34px;
}
.filter-pill {
font-size: 0.65rem;
height: 32px;
}
.card-title-overlay h3 {
font-size: 0.75rem;
}
}
/* شاشات الويندوز العريضة */
@media (min-width: 1180px) {
.media-grid {
grid-template-columns: repeat(7, minmax(0, 1fr)); /* 7 أعمدة للشاشات الكبيرة */
gap: 18px;
}
.header-top {
margin-bottom: 16px;
}
.scrollable-tabs {
justify-content: center; /* توسيط التبويبات في الشاشات العريضة */
}
}
/* ORIGINAL SOURCE: Components/Pages/SeriesPage.razor.css */
:host {
display: block;
background: #000000 !important; /* فرض الأسود بقوة */
}
.series-landing-app {
min-height: 100vh;
background: #000000 !important; /* فرض الأسود بقوة */
color: #fff;
font-family: Tajawal, Arial, sans-serif;
}
/* 1. الشريط العلوي في حالته الافتراضية (شفاف ليظهر بوستر المسلسل) */
.series-landing-toolbar {
position: fixed;
z-index: 150;
top: 0;
right: 0;
left: 0;
height: calc(65px + var(--safe-top, 0px));
padding: var(--safe-top, 0px) max(20px,var(--safe-right,0px)) 0 max(20px,var(--safe-left,0px));
display: flex;
align-items: center;
justify-content: space-between;
/* تدرج أسود خفيف جداً في الأعلى فقط لضمان وضوح النص */
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
border-bottom: 1px solid transparent;
transition: background-color 0.4s ease, border-bottom 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
pointer-events: auto;
}
/* 2. الشريط العلوي عند التمرير (شفافية احترافية مبنية على الأسود النقي) */
.series-landing-toolbar.scrolled {
background-color: rgba(0, 0, 0, 0.85); /* أسود بشفافية 85% */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.series-landing-toolbar h1 {
margin: 0;
color: #fff;
font-size: 1.45rem;
line-height: 1;
font-weight: 900;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
/* زر البحث */
.series-toolbar-button {
width: 38px;
height: 38px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
color: #fff;
background: transparent;
flex-shrink: 0;
transition: all 0.2s ease;
}
.series-toolbar-button:active {
background: rgba(255, 255, 255, 0.15);
transform: scale(0.92);
}
/* منطقة المحتوى: استخدام !important لمسح أي تدرج من كلاسات oscar-main وغيرها */
.series-landing-main {
padding-top: 0;
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 20px);
min-height: 100vh;
overflow-x: hidden;
background: #000000 !important; /* إجبار الخلفية على الأسود النقي */
}
/* استخدام !important لمسح أي تدرج من target-home أو shahid-home-reference */
.series-home-reference {
background: #000000 !important;
}
.series-home-reference .target-home-hero-shell {
margin-top: 0;
background: #000000 !important;
}
/* حالات التحميل والخطأ */
.series-landing-loading,
.series-landing-empty {
min-height: 100vh;
padding: calc(90px + var(--safe-top, 0px)) 22px 120px;
display: grid;
place-items: center;
align-content: center;
gap: 14px;
color: #fff;
text-align: center;
background: #000000 !important;
}
.home-loader-ring {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: #9B4DFF;
animation: series-spin 0.8s linear infinite;
}
.series-landing-loading strong,
.series-landing-empty h1 {
margin: 0;
font-size: 1.1rem;
font-weight: 800;
}
.series-landing-loading small,
.series-landing-empty p {
color: rgba(255,255,255,0.6);
font-size: 0.85rem;
line-height: 1.6;
}
.primary-action {
min-height: 40px;
padding: 0 20px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(to left, #14D7FF, #9B4DFF);
font-size: 0.9rem;
font-weight: 800;
transition: opacity 0.2s;
}
.primary-action:active {
opacity: 0.8;
}
@keyframes series-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 420px) {
.series-landing-toolbar {
height: calc(58px + var(--safe-top, 0px));
padding-inline: 16px;
}
.series-toolbar-button {
width: 34px;
height: 34px;
}
.series-landing-toolbar h1 {
font-size: 1.25rem;
}
}
/* ORIGINAL SOURCE: Components/Pages/Settings.razor.css */
:host {
display: block;
min-height: 100dvh;
background: #000000;
}
.settings-page-app {
min-height: 100dvh;
padding-bottom: calc(78px + var(--safe-bottom, 0px));
color: #ffffff;
background: #000000;
}
.settings-page-shell {
min-height: 100dvh;
padding: calc(96px + var(--safe-top, 0px)) clamp(14px, 3vw, 44px) 124px;
overflow-x: hidden;
background: #000000 !important;
}
.settings-layout {
width: min(100%, 1540px);
margin-inline: auto;
display: grid;
gap: 18px;
}
.settings-intro {
min-height: 172px;
padding: clamp(22px, 3vw, 38px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
overflow: hidden;
border: 1px solid transparent;
border-radius: 24px;
background:
linear-gradient(#000000, #000000) padding-box,
linear-gradient(120deg, rgba(240,74,216,.62), rgba(155,77,255,.68), rgba(20,215,255,.58)) border-box;
box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
.settings-intro-copy {
min-width: 0;
}
.settings-kicker {
display: block;
margin-bottom: 6px;
color: rgba(255,255,255,.62);
font-size: .7rem;
font-weight: 900;
letter-spacing: .14em;
}
.settings-intro h1 {
margin: 0;
font-size: clamp(2rem, 4.2vw, 4.2rem);
line-height: 1;
font-weight: 950;
}
.settings-intro p {
margin: 13px 0 0;
color: rgba(255,255,255,.64);
font-size: clamp(.86rem, 1.3vw, 1.05rem);
line-height: 1.7;
}
.settings-brand-mark {
width: clamp(84px, 10vw, 138px);
aspect-ratio: 1;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 28px;
background: #000000;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 0 38px rgba(155,77,255,.18);
}
.settings-brand-mark img {
width: 74%;
height: 74%;
object-fit: contain;
}
.settings-message {
min-height: 48px;
padding: 11px 15px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid transparent;
border-radius: 14px;
background: #000000;
font-size: .82rem;
font-weight: 850;
}
.settings-message.success {
color: #ffffff;
background: linear-gradient(#000,#000) padding-box, linear-gradient(90deg,#9b4dff,#14d7ff) border-box;
}
.settings-message.error {
color: #ff7d92;
border-color: rgba(255,80,110,.6);
}
.settings-status-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.settings-status-card,
.settings-section {
background: #000000;
border: 1px solid rgba(255,255,255,.13);
box-shadow: 0 15px 38px rgba(0,0,0,.42);
}
.settings-status-card {
min-width: 0;
min-height: 108px;
padding: 17px;
display: flex;
align-items: center;
gap: 14px;
border-radius: 18px;
}
.settings-status-icon,
.settings-row-icon,
.settings-section-heading > span,
.settings-storage-visual > span {
flex: 0 0 auto;
display: grid;
place-items: center;
color: #ffffff;
background: #000000;
border: 1px solid transparent;
background-image: linear-gradient(#000,#000), linear-gradient(135deg,#f04ad8,#9b4dff,#14d7ff);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.settings-status-icon {
width: 50px;
height: 50px;
border-radius: 15px;
}
.settings-status-card div {
min-width: 0;
display: grid;
gap: 3px;
}
.settings-status-card small,
.settings-status-card em {
overflow: hidden;
color: rgba(255,255,255,.53);
font-size: .69rem;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-status-card strong {
overflow: hidden;
font-size: 1rem;
font-weight: 950;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-main-grid {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
gap: 16px;
align-items: start;
}
.settings-operations-column {
display: grid;
gap: 16px;
}
.settings-section {
overflow: hidden;
border-radius: 20px;
}
.settings-section-heading {
min-height: 88px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 13px;
border-bottom: 1px solid rgba(255,255,255,.09);
}
.settings-section-heading.compact {
min-height: 82px;
}
.settings-section-heading > span {
width: 46px;
height: 46px;
border-radius: 14px;
}
.settings-section-heading > div {
min-width: 0;
flex: 1;
}
.settings-section-heading h2 {
margin: 0;
color: #ffffff;
font-size: 1.05rem;
font-weight: 950;
}
.settings-section-heading p {
margin: 5px 0 0;
overflow: hidden;
color: rgba(255,255,255,.55);
font-size: .72rem;
line-height: 1.5;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-list {
display: grid;
}
.settings-row {
min-height: 82px;
padding: 14px 18px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 13px;
border-bottom: 1px solid rgba(255,255,255,.075);
}
.settings-row:last-child {
border-bottom: 0;
}
.settings-row-icon {
width: 42px;
height: 42px;
border-radius: 13px;
}
.settings-row-copy {
min-width: 0;
}
.settings-row-copy strong {
display: block;
color: #ffffff;
font-size: .9rem;
font-weight: 900;
}
.settings-row-copy small {
display: block;
margin-top: 4px;
overflow: hidden;
color: rgba(255,255,255,.52);
font-size: .69rem;
line-height: 1.5;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-toggle {
position: relative;
width: 52px;
height: 29px;
padding: 0;
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
background: #000000;
cursor: pointer;
}
.settings-toggle i {
position: absolute;
top: 4px;
right: 4px;
width: 19px;
height: 19px;
border-radius: 50%;
background: rgba(255,255,255,.62);
transition: transform .22s ease, background .22s ease;
}
.settings-toggle.active {
border-color: transparent;
background: linear-gradient(#000,#000) padding-box, linear-gradient(90deg,#f04ad8,#9b4dff,#14d7ff) border-box;
}
.settings-toggle.active i {
background: linear-gradient(135deg,#f04ad8,#9b4dff,#14d7ff);
transform: translateX(-23px);
}
.settings-select {
min-width: 118px;
height: 40px;
padding-inline: 11px;
display: flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 11px;
background: #000000;
}
.settings-select select {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
color: #ffffff;
background: #000000;
font: inherit;
font-size: .75rem;
font-weight: 800;
}
.settings-percent {
flex: 0 0 auto;
min-width: 54px;
padding: 8px 10px;
border: 1px solid transparent;
border-radius: 999px;
background: linear-gradient(#000,#000) padding-box, linear-gradient(90deg,#f04ad8,#9b4dff,#14d7ff) border-box;
color: #ffffff;
font-size: .73rem;
text-align: center;
}
.settings-progress {
height: 8px;
margin: 18px 18px 0;
overflow: hidden;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
background: #000000;
}
.settings-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg,#f04ad8,#9b4dff,#14d7ff);
transition: width .25s ease;
}
.settings-metrics {
padding: 14px 18px 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.settings-metrics span {
min-width: 0;
padding: 11px;
display: grid;
gap: 4px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
background: #000000;
}
.settings-metrics small,
.settings-metrics b {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-metrics small {
color: rgba(255,255,255,.5);
font-size: .61rem;
}
.settings-metrics b {
font-size: .72rem;
}
.settings-sync-error {
margin: 12px 18px 0;
color: #ff738a;
font-size: .72rem;
}
.settings-actions {
padding: 16px 18px 18px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.settings-actions button {
min-height: 43px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 11px;
background: #000000;
color: #ffffff;
font-size: .72rem;
font-weight: 900;
cursor: pointer;
}
.settings-actions button.primary {
border-color: transparent;
background: linear-gradient(100deg,#b521ff,#7440ff 48%,#159eff);
}
.settings-actions button.danger {
color: #ff7188;
border-color: rgba(255,80,110,.4);
}
.settings-actions button:disabled {
opacity: .45;
cursor: default;
}
.settings-storage-visual {
margin: 18px 18px 0;
padding: 15px;
display: flex;
align-items: center;
gap: 13px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 14px;
background: #000000;
}
.settings-storage-visual > span {
width: 54px;
height: 54px;
border-radius: 16px;
}
.settings-storage-visual div {
min-width: 0;
display: grid;
gap: 4px;
}
.settings-storage-visual strong {
font-size: 1.25rem;
font-weight: 950;
}
.settings-storage-visual small {
color: rgba(255,255,255,.5);
font-size: .68rem;
}
@media (max-width: 980px) {
.settings-main-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.settings-page-app {
padding-bottom: calc(70px + var(--safe-bottom, 0px));
}
.settings-page-shell {
padding: calc(78px + var(--safe-top, 0px)) 10px 108px;
}
.settings-layout {
gap: 12px;
}
.settings-intro {
min-height: 126px;
padding: 18px;
border-radius: 18px;
}
.settings-intro h1 {
font-size: 2rem;
}
.settings-intro p {
max-width: 230px;
font-size: .75rem;
}
.settings-brand-mark {
width: 76px;
border-radius: 20px;
}
.settings-status-grid {
grid-template-columns: 1fr;
gap: 9px;
}
.settings-status-card {
min-height: 82px;
padding: 13px;
border-radius: 15px;
}
.settings-status-icon {
width: 44px;
height: 44px;
border-radius: 13px;
}
.settings-section {
border-radius: 17px;
}
.settings-section-heading {
min-height: 76px;
padding: 14px;
}
.settings-section-heading > span {
width: 42px;
height: 42px;
border-radius: 13px;
}
.settings-section-heading h2 {
font-size: .94rem;
}
.settings-section-heading p {
font-size: .65rem;
}
.settings-row {
min-height: 76px;
padding: 12px;
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 10px;
}
.settings-row-icon {
width: 38px;
height: 38px;
border-radius: 12px;
}
.settings-row-copy strong {
font-size: .8rem;
}
.settings-row-copy small {
max-width: 52vw;
font-size: .61rem;
}
.settings-select {
min-width: 96px;
height: 37px;
padding-inline: 8px;
}
.settings-select select {
font-size: .68rem;
}
.settings-metrics {
grid-template-columns: 1fr;
}
.settings-actions button {
flex: 1 1 calc(50% - 5px);
}
.settings-actions button.primary {
flex-basis: 100%;
}
}
@media (max-width: 390px) {
.settings-intro p {
display: none;
}
.settings-brand-mark {
width: 68px;
}
.settings-row-copy small {
max-width: 46vw;
}
.settings-toggle {
width: 48px;
}
.settings-toggle.active i {
transform: translateX(-19px);
}
}
/* ORIGINAL SOURCE: Components/Pages/WrestlingCatalogPage.razor.css */
:host {
display: block;
background: #000000;
}
.catalog-app,
.wrestling-catalog-app {
min-height: 100vh;
background-color: #000000;
color: var(--oscar-text);
font-family:inherit;
}
.catalog-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
background: #000000;
padding: calc(10px + var(--safe-top, 0px)) 12px 4px;
border-bottom: 1px solid var(--oscar-border);
}
.header-top {
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.header-top .icon-button {
width: 36px;
height: 36px;
padding: 0;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: var(--oscar-text);
}
.page-title {
margin: 0;
color: var(--oscar-text);
font-size: 1.3rem;
line-height: 1;
font-weight: 800;
white-space: nowrap;
}
.spacer {
width: 36px;
height: 36px;
}
.scrollable-tabs {
display: flex;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollable-tabs::-webkit-scrollbar {
display: none;
}
.categories-tabs {
gap: 8px;
padding: 0 0 10px;
}
.tab-btn {
flex: 0 0 auto;
height: 34px;
padding: 0 14px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--oscar-muted);
font-size: 0.95rem;
font-weight: 600;
white-space: nowrap;
transition: 0.2s ease;
}
.tab-btn.active {
background: linear-gradient(to left, #000000, #000000);
color: var(--oscar-text);
font-weight: 700;
}
.filters-tabs {
gap: 8px;
padding: 0 0 8px;
}
.filter-pill {
flex: 0 0 auto;
height: 30px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
border: 0;
border-radius: 15px;
background-color: #000000;
color: var(--oscar-text);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.filter-pill .dot-icon {
color: var(--oscar-muted);
font-size: 1rem;
line-height: 1;
}
.filter-pill.active {
color: var(--oscar-text);
}
.filter-pill.active .active-dot {
width: 5px;
height: 5px;
display: inline-block;
border-radius: 50%;
background-color: #000000;
}
.catalog-main {
padding: calc(132px + var(--safe-top, 0px)) 12px calc(88px + var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px));
background: #000000;
min-height: 100vh;
}
.media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.media-card {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 8px;
background-color: #000000;
box-shadow: 0 4px 10px rgba(0,0,0,.4);
cursor: pointer;
}
.media-card .wrestling-poster-image {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
transform: scale(1.002);
pointer-events: none;
}
.media-card::after {
content: "";
position: absolute;
inset: 42% 0 0;
background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 48%, transparent 100%);
pointer-events: none;
}
.card-badges {
position: absolute;
z-index: 3;
top: 6px;
left: 6px;
right: 6px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.badge {
min-height: 20px;
padding: 2px 5px;
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 4px;
color: var(--oscar-text);
background: rgba(0,0,0,.75);
font-size: .7rem;
font-weight: 700;
line-height: 1;
backdrop-filter: blur(4px);
}
.age-badge {
background: #000000;
}
.quality-badge {
background: rgba(0,0,0,.75);
}
.card-title-overlay {
position: absolute;
z-index: 4;
right: 0;
left: 0;
bottom: 0;
padding: 30px 8px 8px;
text-align: center;
pointer-events: none;
}
.card-title-overlay h3 {
margin: 0;
overflow: hidden;
color: var(--oscar-text);
font-size: 0.85rem;
line-height: 1.2;
font-weight: 700;
text-shadow: 0 2px 5px rgba(0,0,0,.9);
white-space: nowrap;
text-overflow: ellipsis;
}
.catalog-loading,
.catalog-empty {
min-height: 48vh;
display: grid;
place-items: center;
align-content: center;
gap: 12px;
color: var(--oscar-text);
text-align: center;
}
.home-loader-ring {
width: 42px;
height: 42px;
border: 3px solid var(--oscar-border);
border-top-color: var(--accent);
border-radius: 50%;
animation: catalog-spin .85s linear infinite;
}
.catalog-inline-loading {
padding: 22px 0;
display: grid;
place-items: center;
}
.primary-action {
min-height: 40px;
padding: 0 16px;
border: 0;
border-radius: 999px;
color: var(--oscar-text);
background: linear-gradient(to left, #000000, #000000);
font-weight: 900;
transition: opacity 0.2s;
}
.primary-action:active {
opacity: 0.8;
}
@keyframes catalog-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 420px) {
.catalog-header {
padding-inline: 10px;
}
.catalog-main {
padding-inline: 10px;
}
.media-grid {
gap: 8px;
}
}
@media (min-width: 760px) {
.media-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.catalog-main {
max-width: 1180px;
margin-inline: auto;
}
}
/* ORIGINAL SOURCE: Components/Pages/WrestlingPage.razor.css */
:host {
display: block;
background: #000000 !important;
}
.wrestling-landing-app {
min-height: 100vh;
background: #000000 !important;
color: var(--oscar-text);
font-family:inherit;
}
.wrestling-landing-toolbar {
position: fixed;
z-index: 150;
top: 0;
right: 0;
left: 0;
height: calc(65px + var(--safe-top, 0px));
padding: var(--safe-top, 0px) max(20px,var(--safe-right,0px)) 0 max(20px,var(--safe-left,0px));
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
border-bottom: 1px solid transparent;
transition: background-color 0.4s ease, border-bottom 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
pointer-events: auto;
}
.wrestling-landing-toolbar.scrolled {
background-color: rgba(0,0,0,0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--oscar-border);
box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.wrestling-landing-toolbar h1 {
margin: 0;
color: var(--oscar-text);
font-size: 1.45rem;
line-height: 1;
font-weight: 900;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
.wrestling-toolbar-button {
width: 38px;
height: 38px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
color: var(--oscar-text);
background: transparent;
flex-shrink: 0;
transition: all 0.2s ease;
}
.wrestling-toolbar-button:active {
background: rgba(0,0,0,0.15);
transform: scale(0.92);
}
.wrestling-landing-main {
padding-top: 0;
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 20px);
min-height: 100vh;
overflow-x: hidden;
background: #000000 !important;
}
.wrestling-home-reference {
background: #000000 !important;
}
.wrestling-home-reference .target-home-hero-shell {
margin-top: 0;
background: #000000 !important;
}
.wrestling-landing-loading,
.wrestling-landing-empty {
min-height: 100vh;
padding: calc(90px + var(--safe-top, 0px)) 22px 120px;
display: grid;
place-items: center;
align-content: center;
gap: 14px;
color: var(--oscar-text);
text-align: center;
background: #000000 !important;
}
.home-loader-ring {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid var(--oscar-border);
border-top-color: var(--accent);
animation: wrestling-spin 0.8s linear infinite;
}
.wrestling-landing-loading strong,
.wrestling-landing-empty h1 {
margin: 0;
font-size: 1.1rem;
font-weight: 800;
}
.wrestling-landing-loading small,
.wrestling-landing-empty p {
color: var(--oscar-muted);
font-size: 0.85rem;
line-height: 1.6;
}
.primary-action {
min-height: 40px;
padding: 0 20px;
border: 0;
border-radius: 999px;
color: var(--oscar-text);
background: linear-gradient(to left, #000000, #000000);
font-size: 0.9rem;
font-weight: 800;
transition: opacity 0.2s;
}
.primary-action:active {
opacity: 0.8;
}
@keyframes wrestling-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 420px) {
.wrestling-landing-toolbar {
height: calc(58px + var(--safe-top, 0px));
padding-inline: 16px;
}
.wrestling-toolbar-button {
width: 34px;
height: 34px;
}
.wrestling-landing-toolbar h1 {
font-size: 1.25rem;
}
}
/* ORIGINAL SOURCE: Components/Shared/AppHeader.razor.css */
header.oscar-toolbar {
background: rgba(0, 0, 0, .78);
border-bottom: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
header.oscar-toolbar.home-toolbar {
background: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.46) 62%, transparent 100%);
}
header.oscar-toolbar.professional-home-toolbar {
min-height: calc(70px + var(--safe-top, 0px));
padding-top: var(--safe-top, 0px);
padding-inline: clamp(14px, 3.5vw, 22px);
border: 0;
box-shadow: none;
overflow: visible;
pointer-events: none;
}
.professional-home-toolbar .home-toolbar-shell {
width: 100%;
min-height: 70px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
direction: ltr;
pointer-events: none;
}
.professional-home-toolbar .home-toolbar-actions {
display: inline-flex;
align-items: center;
gap: clamp(10px, 2.2vw, 16px);
pointer-events: auto;
}
.professional-home-toolbar .home-toolbar-leading {
justify-self: start;
}
.professional-home-toolbar .home-toolbar-trailing {
justify-self: end;
}
.professional-home-toolbar .home-toolbar-center {
min-width: 0;
min-height: 1px;
pointer-events: none;
}
.professional-home-toolbar .home-toolbar-glow {
display: none;
}
/* أيقونات الرأس فقط: بدون خلفية، بدون إطار، بدون حاويات */
.professional-home-toolbar .icon-button.home-header-action,
.professional-home-toolbar .icon-button.home-menu-button {
position: relative;
width: 38px;
height: 38px;
padding: 0;
display: grid;
place-items: center;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
color: #ffffff;
box-shadow: none !important;
outline: none;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.professional-home-toolbar .icon-button.home-header-action::before,
.professional-home-toolbar .icon-button.home-header-action::after,
.professional-home-toolbar .icon-button.home-menu-button::before,
.professional-home-toolbar .icon-button.home-menu-button::after {
display: none !important;
content: none !important;
}
.professional-home-toolbar .icon-button.home-header-action:active,
.professional-home-toolbar .icon-button.home-menu-button:active {
background: transparent !important;
transform: scale(.92);
}
.professional-home-toolbar .icon-button.home-header-action svg,
.professional-home-toolbar .icon-button.home-menu-button svg,
.professional-home-toolbar .icon-button.home-header-action .oscar-icon,
.professional-home-toolbar .icon-button.home-menu-button .oscar-icon {
color: #ffffff;
filter: drop-shadow(0 2px 9px rgba(0,0,0,.76));
}
.professional-home-toolbar .icon-button.notification i {
position: absolute;
top: 4px;
right: 2px;
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%);
box-shadow: 0 0 0 3px rgba(155,77,255,.16);
}
@media (max-width: 600px) {
header.oscar-toolbar.professional-home-toolbar {
min-height: calc(58px + var(--safe-top, 0px));
padding-inline: 18px;
}
.professional-home-toolbar .home-toolbar-shell {
min-height: 58px;
gap: 8px;
}
.professional-home-toolbar .home-toolbar-actions {
gap: 16px;
}
.professional-home-toolbar .icon-button.home-header-action,
.professional-home-toolbar .icon-button.home-menu-button {
width: 34px;
height: 34px;
}
}
/* Full Space Gate NOVA+ wordmark: production sizing tuned for a compact app header.
The original 1600:620 logo ratio is preserved so it never appears stretched. */
.professional-home-toolbar .icon-button.home-menu-button {
width: clamp(126px, 10.5vw, 148px) !important;
height: 52px !important;
padding: 3px 0 !important;
overflow: visible;
display: flex !important;
align-items: center;
justify-content: flex-end;
}
.professional-home-toolbar .home-menu-button .nova-menu-logo {
width: 100%;
height: auto;
aspect-ratio: 1600 / 620;
display: block;
object-fit: contain;
object-position: center right;
border-radius: 0;
opacity: .98;
filter: drop-shadow(0 3px 10px rgba(0,0,0,.55));
transform-origin: right center;
transition: transform .18s cubic-bezier(.22,1,.36,1), opacity .18s ease, filter .18s ease;
}
.professional-home-toolbar .home-menu-button:active .nova-menu-logo {
transform: scale(.965);
opacity: .92;
filter: drop-shadow(0 2px 7px rgba(0,0,0,.68));
}
@media (max-width: 820px) {
.professional-home-toolbar .icon-button.home-menu-button {
width: 118px !important;
height: 48px !important;
padding-block: 3px !important;
}
}
@media (max-width: 600px) {
.professional-home-toolbar .icon-button.home-menu-button {
width: 108px !important;
height: 44px !important;
padding-block: 2px !important;
}
}
@media (max-width: 380px) {
.professional-home-toolbar .icon-button.home-menu-button {
width: 98px !important;
height: 40px !important;
}
}
/* ORIGINAL SOURCE: Components/Shared/BottomNavigation.razor.css */
nav.oscar-bottom-nav.original-bottom-nav {
--nav-active-grad-a: #9B4DFF;
--nav-active-grad-b: #7B5CFF;
--nav-active-grad-c: #14D7FF;
--nav-inactive-soft: #8A8A92;
--nav-active-gradient: linear-gradient(105deg, var(--nav-active-grad-a) 0%, var(--nav-active-grad-b) 48%, var(--nav-active-grad-c) 100%);
position: fixed;
z-index: 170;
right: 0;
bottom: 0;
left: 0;
height: calc(var(--bottom-nav-h) + var(--safe-bottom));
padding: 7px max(3px, var(--safe-right, 0px)) var(--safe-bottom) max(3px, var(--safe-left, 0px));
display: flex;
align-items: stretch;
direction: rtl;
overflow-x: auto;
overflow-y: hidden;
background: rgba(5,5,6,.97) !important;
border-top: 1px solid rgba(255,255,255,.025) !important;
box-shadow: 0 -10px 24px rgba(0,0,0,.5) !important;
scrollbar-width: none;
backdrop-filter: blur(22px) saturate(1.35);
-webkit-backdrop-filter: blur(22px) saturate(1.35);
pointer-events: auto !important;
}
nav.oscar-bottom-nav.original-bottom-nav::-webkit-scrollbar { display: none; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) {
position: relative;
z-index: 1;
flex: 1 0 74px;
min-width: 74px;
padding: 3px 3px 1px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border: 0;
background: transparent !important;
background-image: none !important;
color: var(--nav-inactive-soft) !important;
box-shadow: none !important;
outline: none;
transform: none !important;
transition: background .18s ease, color .18s ease;
pointer-events: auto !important;
text-decoration: none !important;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
}
nav.oscar-bottom-nav.original-bottom-nav .nav-icon {
position: relative !important;
width: 28px !important;
height: 28px !important;
margin: 0 auto !important;
display: grid !important;
place-items: center !important;
color: currentColor;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
isolation: isolate !important;
overflow: visible !important;
transition: transform .15s ease;
}
nav.oscar-bottom-nav.original-bottom-nav .nav-icon-solid,
nav.oscar-bottom-nav.original-bottom-nav .nav-icon-gradient-layer {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
display: grid !important;
place-items: center !important;
pointer-events: none !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav .nav-icon-solid {
opacity: 1 !important;
color: var(--nav-inactive-soft) !important;
}
nav.oscar-bottom-nav.original-bottom-nav .nav-icon-gradient-layer {
opacity: 0 !important;
filter: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav .oscar-icon {
color: inherit;
width: 26px;
height: 26px;
}
nav.oscar-bottom-nav.original-bottom-nav b {
display: block;
color: currentColor;
font-size: .68rem;
line-height: 1;
font-weight: 600;
white-space: nowrap;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:hover,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:focus,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:focus-visible {
background: transparent !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
transform: none !important;
filter: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-solid { opacity: 0 !important; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer { opacity: 1 !important; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-start {
color: var(--nav-active-grad-a) !important;
clip-path: polygon(0 0, 43% 0, 34% 100%, 0 100%) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-mid {
color: var(--nav-active-grad-b) !important;
clip-path: polygon(30% 0, 74% 0, 62% 100%, 23% 100%) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-end {
color: var(--nav-active-grad-c) !important;
clip-path: polygon(58% 0, 100% 0, 100% 100%, 50% 100%) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer svg,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer .oscar-icon {
color: inherit !important;
opacity: 1 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active svg * { vector-effect: non-scaling-stroke; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active b,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-label-text {
background: var(--nav-active-gradient) !important;
background-image: var(--nav-active-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: var(--nav-active-grad-a) !important;
text-shadow: none !important;
filter: none !important;
font-weight: 800 !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-icon-gradient-layer { opacity: 0 !important; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-icon-solid { opacity: 1 !important; }
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) b,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-label-text {
-webkit-text-fill-color: currentColor !important;
background: transparent !important;
background-image: none !important;
filter: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a)::before,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a)::after,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) .nav-icon::before,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) .nav-icon::after {
display: none !important;
content: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
@media (min-width: 600px) {
nav.oscar-bottom-nav.original-bottom-nav {
max-width: none;
margin-inline: 0;
}
}
@media (max-width: 600px) {
nav.oscar-bottom-nav.original-bottom-nav {
padding: 4px 2px var(--safe-bottom);
box-shadow: 0 -5px 15px rgba(0,0,0,.42) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) {
flex-basis: 58px;
min-width: 58px;
gap: 2px;
}
nav.oscar-bottom-nav.original-bottom-nav .nav-icon {
height: 22px !important;
width: 22px !important;
}
nav.oscar-bottom-nav.original-bottom-nav .oscar-icon {
width: 20px;
height: 20px;
}
nav.oscar-bottom-nav.original-bottom-nav b { font-size: .52rem; }
}
/* Final lock: keep bottom menu outside page scroll visually. */
nav.oscar-bottom-nav.original-bottom-nav {
position: fixed !important;
z-index: 2147483000 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
top: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
transform: translate3d(0,0,0) !important;
will-change: transform !important;
}
/* SG FINAL FIX: the nav is portaled to , so it cannot scroll with page content. */
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked,
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked {
position: fixed !important;
z-index: 2147483000 !important;
inset: auto 0 0 0 !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
translate: none !important;
transform: none !important;
will-change: auto !important;
contain: layout paint style !important;
pointer-events: auto !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
}
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal a,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked a {
transform: none !important;
}
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal a:active,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked a:active {
opacity: .72 !important;
transform: none !important;
}
/* The same complete menu remains visible on Windows and Android. */
nav.oscar-bottom-nav.original-bottom-nav,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked {
display: flex !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* ORIGINAL SOURCE: Components/Shared/CatalogLandingPage.razor.css */
:host {
display: block;
background: #000;
}
.catalog-landing-app {
min-height: 100vh;
background: #000 !important;
color: #fff;
font-family: Tajawal, Arial, sans-serif;
}
.catalog-landing-toolbar {
position: fixed;
z-index: 180;
top: 0;
right: 0;
left: 0;
height: calc(66px + var(--safe-top, 0px));
padding: var(--safe-top, 0px) max(18px, var(--safe-right, 0px)) 0 max(18px, var(--safe-left, 0px));
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.24), rgba(0,0,0,0));
border-bottom: 1px solid rgba(255,255,255,.03);
box-shadow: 0 18px 42px rgba(0,0,0,.28);
pointer-events: auto;
}
.catalog-landing-toolbar span {
display: block;
margin-bottom: 4px;
color: rgba(164, 115, 255, .96);
font-size: .64rem;
font-weight: 900;
letter-spacing: .12em;
}
.catalog-landing-toolbar h1 {
margin: 0;
color: #fff;
font-size: clamp(1.18rem, 3vw, 1.55rem);
line-height: 1;
font-weight: 950;
letter-spacing: -.03em;
text-shadow: 0 12px 26px rgba(0,0,0,.85);
}
.catalog-landing-toolbar-button {
width: 44px;
height: 44px;
min-width: 44px;
margin-inline: -2px;
display: grid;
place-items: center;
border: 1px solid rgba(143, 89, 255, .26);
border-radius: 999px;
color: #fff;
background: rgba(8, 7, 14, .58);
box-shadow: 0 0 0 1px rgba(20,215,255,.05), 0 12px 26px rgba(0,0,0,.46);
}
.catalog-landing-main {
min-height: 100vh;
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px) + 20px);
background: #000 !important;
overflow-x: hidden;
}
.catalog-landing-reference,
.catalog-landing-reference .target-home-hero-shell {
background: #000 !important;
}
.catalog-landing-empty {
min-height: 100vh;
padding: calc(94px + var(--safe-top, 0px)) 22px 120px;
display: grid;
place-items: center;
align-content: center;
gap: 14px;
text-align: center;
background:
radial-gradient(circle at 50% 34%, rgba(155,77,255,.13), transparent 36%),
radial-gradient(circle at 38% 70%, rgba(20,215,255,.10), transparent 32%),
#000;
}
.catalog-landing-empty h1 {
margin: 0;
font-size: 1.08rem;
font-weight: 900;
}
.catalog-landing-empty p {
max-width: 420px;
margin: 0;
color: rgba(255,255,255,.62);
line-height: 1.75;
font-size: .88rem;
}
.primary-action {
min-height: 42px;
padding: 0 22px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #8b45ff, #14D7FF);
box-shadow: 0 16px 34px rgba(80, 68, 255, .28);
font-size: .9rem;
font-weight: 900;
}
.catalog-landing-skeleton {
min-height: 100vh;
padding-bottom: 120px;
background: #000;
}
.catalog-shimmer {
position: relative;
overflow: hidden;
background: linear-gradient(100deg, #080913 0%, #13162b 32%, #1a1f40 45%, #11142a 58%, #080913 100%);
background-size: 240% 100%;
animation: catalog-shimmer 1.18s linear infinite;
}
.catalog-landing-hero-skeleton {
min-height: clamp(430px, 66vh, 760px);
border-radius: 0 0 26px 26px;
}
.catalog-landing-hero-skeleton::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 72% 28%, rgba(155,77,255,.22), transparent 34%),
radial-gradient(circle at 24% 62%, rgba(20,215,255,.16), transparent 30%),
linear-gradient(to top, #000 0%, rgba(0,0,0,.54) 45%, rgba(0,0,0,.12) 100%);
}
.catalog-landing-hero-copy {
position: absolute;
right: clamp(18px, 5vw, 64px);
bottom: clamp(46px, 10vh, 110px);
width: min(430px, 76vw);
display: grid;
gap: 13px;
}
.catalog-landing-hero-copy span,
.catalog-landing-hero-copy strong,
.catalog-landing-hero-copy small,
.catalog-landing-hero-copy b {
display: block;
border-radius: 999px;
background: rgba(255,255,255,.11);
}
.catalog-landing-hero-copy span { width: 110px; height: 12px; }
.catalog-landing-hero-copy strong { width: 82%; height: 34px; }
.catalog-landing-hero-copy small { width: 64%; height: 12px; }
.catalog-landing-hero-copy div { display: flex; gap: 10px; margin-top: 8px; }
.catalog-landing-hero-copy b { width: 118px; height: 42px; }
.catalog-landing-rail-skeleton-batch {
display: grid;
gap: 26px;
padding: 22px 16px 0;
}
.catalog-landing-rail-skeleton {
display: grid;
gap: 13px;
}
.catalog-landing-skeleton-heading {
width: min(250px, 56vw);
height: 18px;
border-radius: 999px;
}
.catalog-landing-skeleton-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(120px, 15vw);
gap: 12px;
overflow: hidden;
}
.catalog-landing-skeleton-card {
aspect-ratio: 2 / 3;
border-radius: 18px;
}
.catalog-landing-lazy-sentinel {
min-height: 1px;
}
@keyframes catalog-shimmer {
to { background-position-x: -240%; }
}
@media (max-width: 520px) {
.catalog-landing-toolbar {
height: calc(58px + var(--safe-top, 0px));
padding-inline: 16px;
}
.catalog-landing-toolbar-button {
width: 44px;
height: 44px;
min-width: 44px;
margin-inline: -4px;
}
.catalog-landing-skeleton-row {
grid-auto-columns: 128px;
}
}
.catalog-landing-motion-loading {
min-height: calc(100dvh - var(--bottom-nav-h, 76px));
padding-top: calc(72px + var(--safe-top, env(safe-area-inset-top, 0px)));
box-sizing: border-box;
background: transparent !important;
}
.catalog-landing-motion-loading .nova-motion-loader {
min-height: calc(100dvh - var(--bottom-nav-h, 76px));
}
/* Build 80: persistent movie-collections entry. The rail remains data-aware, but
users can always see where the feature lives even while its cache is rebuilding. */
.movie-collections-entry{width:100%;padding:0 clamp(10px,2.5vw,34px);margin:clamp(12px,2vw,22px) 0 4px;background:#000}
.movie-collections-entry-button{width:100%;min-height:78px;padding:12px clamp(14px,2vw,22px);display:grid;grid-template-columns:52px minmax(0,1fr) 40px;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:#000;color:#fff;text-align:right;font:inherit;cursor:pointer;box-shadow:0 16px 46px rgba(0,0,0,.28);position:relative;overflow:hidden}
.movie-collections-entry-button::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(194,93,255,.10),rgba(109,125,255,.035) 45%,rgba(75,233,255,.08));opacity:.9}
.movie-collections-entry-button>*{position:relative;z-index:1}
.movie-collections-entry-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(194,93,255,.36);border-radius:14px;background:#000;color:#c25dff}
.movie-collections-entry-copy{min-width:0;display:grid;gap:2px}
.movie-collections-entry-copy small{color:#6d7dff;font-size:.64rem;font-weight:950;letter-spacing:.08em}
.movie-collections-entry-copy strong{font-size:clamp(1rem,1.5vw,1.18rem);font-weight:950}
.movie-collections-entry-copy em{font-style:normal;color:rgba(255,255,255,.58);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.movie-collections-entry-arrow{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(75,233,255,.22);border-radius:50%;background:#000;color:#4be9ff}
.movie-collections-entry-button:focus-visible{outline:2px solid #4be9ff;outline-offset:3px}
@media(max-width:620px){.movie-collections-entry{padding:0 9px;margin-top:10px}.movie-collections-entry-button{min-height:70px;grid-template-columns:46px minmax(0,1fr) 34px;gap:10px;padding:10px 12px;border-radius:14px}.movie-collections-entry-icon{width:44px;height:44px;border-radius:12px}.movie-collections-entry-copy em{font-size:.66rem}.movie-collections-entry-arrow{width:32px;height:32px}}
/* Stage 8 — movie producers/studios rail; replaces collections promo card. */
.movie-producers-section {
position: relative;
z-index: 3;
padding: 22px clamp(14px, 3.5vw, 50px) 10px;
background: #000;
}
.movie-producers-head {
margin-bottom: 13px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
}
.movie-producers-head div { min-width:0; display:grid; gap:4px; }
.movie-producers-head small {
color: #A980FF;
font-size: .64rem;
font-weight: 950;
letter-spacing: .12em;
}
.movie-producers-head h2 {
margin: 0;
color: #fff;
font-size: clamp(1rem,2vw,1.34rem);
font-weight: 950;
letter-spacing: -.025em;
}
.movie-producers-head p {
margin: 0;
color: rgba(255,255,255,.46);
font-size: .72rem;
}
.movie-producers-rail {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 0 8px;
direction: rtl;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.movie-producers-rail::-webkit-scrollbar { display:none; }
.movie-producer-card {
flex: 0 0 clamp(118px, 16vw, 160px);
min-height: 132px;
padding: 12px 10px 10px;
display: grid;
grid-template-rows: 72px auto auto;
align-items: center;
justify-items: center;
gap: 5px;
scroll-snap-align: start;
border: 1px solid rgba(255,255,255,.09);
border-radius: 15px;
background: linear-gradient(150deg,rgba(15,9,22,.74),rgba(3,5,9,.96));
color:#fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.movie-producer-logo {
width: 72px;
height: 72px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 14px;
background: rgba(255,255,255,.025);
}
.movie-producer-logo img { width: 82%; height:82%; object-fit:contain; }
.movie-producer-logo span { color:#fff; font-size:1.35rem; font-weight:950; }
.movie-producer-card strong {
max-width:100%;
overflow:hidden;
color:#fff;
font-size:.72rem;
font-weight:850;
text-overflow:ellipsis;
white-space:nowrap;
}
.movie-producer-card small { color:rgba(255,255,255,.40); font-size:.58rem; }
@media(max-width:620px){
.movie-producers-section { padding:18px 12px 8px; }
.movie-producers-head p { display:none; }
.movie-producer-card { flex-basis:112px; min-height:122px; grid-template-rows:64px auto auto; border-radius:13px; }
.movie-producer-logo { width:64px; height:64px; }
}
/* Anime native composition: studios and weekly schedule keep their functional
markup, but consume the global NOVA+ material system and remain full-bleed. */
.anime-native-studios,
.anime-native-schedule {
width: 100%;
max-width: none;
margin: 0;
padding: 18px 0 24px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(circle at 88% 8%, rgba(155,77,255,.08), transparent 28%),
radial-gradient(circle at 12% 92%, rgba(20,215,255,.055), transparent 30%),
transparent;
color: var(--oscar-text);
}
.anime-native-special-heading {
min-height: 58px;
padding: 0 max(14px, var(--safe-right, 0px)) 0 max(14px, var(--safe-left, 0px));
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.anime-native-special-heading h2 { margin:0; color:var(--sgn-white); font-size:clamp(.96rem,2vw,1.16rem); line-height:1.2; font-weight:950; }
.anime-native-special-heading button { min-height:38px; padding:0 4px; border:0; background:transparent; color:var(--sgn-cyan); font:inherit; font-size:.68rem; font-weight:900; cursor:pointer; }
.anime-native-studio-strip,
.anime-native-schedule-days {
width:100%;
padding-inline:0;
display:flex;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
scroll-padding-inline:0;
overscroll-behavior-inline:contain;
}
.anime-native-studio-strip::-webkit-scrollbar, .anime-native-schedule-days::-webkit-scrollbar { display:none; }
.anime-native-studio {
flex:0 0 clamp(126px,14vw,170px);
min-width:0;
padding:10px;
display:grid;
grid-template-rows:42px auto;
align-items:center;
gap:8px;
border:1px solid var(--sgn-border-soft);
border-radius:var(--sgn-radius-card);
background:var(--sgn-card-gradient);
color:var(--sgn-white);
box-shadow:var(--sgn-shadow-card);
backdrop-filter:blur(var(--sgn-blur)) saturate(1.18);
-webkit-backdrop-filter:blur(var(--sgn-blur)) saturate(1.18);
font:inherit;
cursor:pointer;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.anime-native-studio:hover, .anime-native-studio:focus-visible { transform:translateY(-2px); border-color:var(--sgn-border-accent); box-shadow:var(--sgn-shadow-neon); outline:none; }
.anime-native-studio-logo { width:100%; height:42px; display:grid; place-items:center; overflow:hidden; }
.anime-native-studio-logo img, .anime-native-studio-logo .nova-fast-image { width:100%!important; height:100%!important; object-fit:contain; filter:drop-shadow(0 7px 14px rgba(0,0,0,.42)); }
.anime-native-studio small { overflow:hidden; color:var(--sgn-text-soft); font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.anime-native-schedule-days { gap:6px; padding-bottom:14px; }
.anime-native-schedule-day.nova-catalog-select-card {
flex:0 0 auto; height:var(--nova-catalog-control-h,42px); min-height:var(--nova-catalog-control-h,42px); min-width:118px; max-width:178px; margin:0; padding:0 10px;
grid-template-columns:18px auto minmax(38px,auto) 14px; gap:6px; border:1px solid var(--sgn-border-soft)!important; border-radius:10px!important;
background:var(--sgn-glass)!important; box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.anime-native-schedule-day.nova-catalog-select-card::after { display:none; }
.anime-native-schedule-day.nova-catalog-select-card.active { transform:translateY(-1px); border-color:var(--sgn-border-accent)!important; color:var(--sgn-white)!important; box-shadow:var(--sgn-shadow-neon); }
.anime-native-schedule-grid { width:100%; padding-inline:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.anime-native-schedule-card {
min-width:0; padding:0; overflow:hidden; display:grid; grid-template-rows:auto auto; border:1px solid var(--sgn-border-soft); border-radius:var(--sgn-radius-card);
background:var(--sgn-card-gradient); color:var(--sgn-white); text-align:right; font:inherit; cursor:pointer; box-shadow:var(--sgn-shadow-card);
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.anime-native-schedule-card:hover, .anime-native-schedule-card:focus-visible { transform:translateY(-2px); border-color:var(--sgn-border-cyan); box-shadow:var(--sgn-shadow-neon); outline:none; }
.anime-native-schedule-art { position:relative; width:100%; aspect-ratio:2/3; display:block; overflow:hidden; background:var(--sgn-surface-2); }
.anime-native-schedule-art img, .anime-native-schedule-art .nova-fast-image { width:100%!important; height:100%!important; object-fit:cover; }
.anime-native-schedule-art::after { content:""; position:absolute; inset:auto 0 0; height:36%; pointer-events:none; background:linear-gradient(0deg,rgba(3,4,9,.74),transparent); }
.anime-native-schedule-art time { position:absolute; z-index:2; top:8px; inset-inline-end:8px; padding:4px 7px; border:1px solid var(--sgn-border-accent); border-radius:8px; background:rgba(7,9,18,.82); color:var(--sgn-white); box-shadow:var(--sgn-shadow-neon); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:.64rem; font-weight:900; direction:ltr; }
.anime-native-schedule-copy { min-width:0; padding:9px 10px 11px; display:grid; gap:4px; }
.anime-native-schedule-copy strong, .anime-native-schedule-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anime-native-schedule-copy strong { color:var(--sgn-white); font-size:.72rem; font-weight:850; }
.anime-native-schedule-copy small { color:var(--sgn-text-soft); font-size:.58rem; }
.anime-native-schedule-empty { min-height:92px; margin:0; display:flex; align-items:center; justify-content:center; gap:8px; border-block:1px dashed var(--sgn-border-soft); color:var(--sgn-text-soft); background:linear-gradient(90deg,transparent,rgba(155,77,255,.05),transparent); }
@media(max-width:820px){
.anime-native-schedule-day.nova-catalog-select-card { height:34px!important; min-height:34px!important; min-width:84px!important; max-width:126px!important; padding-inline:7px!important; grid-template-columns:15px minmax(38px,auto) 13px!important; gap:4px!important; border-radius:8px!important; }
.anime-native-schedule-day.nova-catalog-select-card>span { display:none; }
.anime-native-schedule-day.nova-catalog-select-card>strong { font-size:.68rem; }
}
@media(max-width:680px){
.anime-native-schedule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.anime-native-studio { flex-basis:112px; }
}
@media(prefers-reduced-motion:reduce){ .anime-native-studio,.anime-native-schedule-card{transition:none!important} }
/* ORIGINAL SOURCE: Components/Shared/ChannelCard.razor.css */
article.channel-card {
position: relative;
min-height: 132px;
overflow: hidden;
display: grid;
align-content: end;
gap: 9px;
padding: 12px 8px 10px;
color: #fff;
border: 1px solid rgba(255,255,255,.075);
border-radius: 16px;
background:
radial-gradient(circle at 50% 12%, rgba(20,215,255,.13), transparent 46%),
linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.025));
box-shadow: 0 10px 26px rgba(0,0,0,.30);
cursor: pointer;
isolation: isolate;
transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
article.channel-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 34%, rgba(0,0,0,.20));
pointer-events: none;
z-index: -1;
}
article.channel-card:active {
transform: scale(.965);
border-color: rgba(20,215,255,.26);
}
.channel-card-badges {
position: absolute;
z-index: 3;
top: 7px;
right: 7px;
left: 7px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
pointer-events: none;
}
.live-badge,
.quality-badge {
height: 20px;
padding: 0 6px;
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
color: #fff;
background: rgba(0,0,0,.52);
border: 1px solid rgba(255,255,255,.08);
font-size: .58rem;
line-height: 1;
font-weight: 950;
backdrop-filter: blur(8px);
}
.live-badge i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #14D7FF;
box-shadow: 0 0 0 3px rgba(20,215,255,.14), 0 0 12px rgba(20,215,255,.85);
}
.quality-badge {
color: #dff7ff;
}
.channel-logo-wrapper {
width: 58px;
height: 58px;
margin: 22px auto 0;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 18px;
background:
linear-gradient(#111217, #111217) padding-box,
linear-gradient(135deg, rgba(155,77,255,.75), rgba(20,215,255,.75)) border-box;
border: 1px solid transparent;
box-shadow: 0 12px 24px rgba(0,0,0,.28);
}
.channel-logo-wrapper img,
.channel-logo-wrapper .safe-image,
.channel-logo-wrapper .safe-image-node {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
.channel-info {
min-width: 0;
display: grid;
gap: 4px;
text-align: center;
}
.channel-title {
min-width: 0;
overflow: hidden;
color: #fff;
font-size: .78rem;
line-height: 1.25;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.channel-category {
min-width: 0;
overflow: hidden;
color: rgba(255,255,255,.48);
font-size: .66rem;
line-height: 1.2;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (hover:hover) and (pointer:fine) {
article.channel-card:hover {
transform: translateY(-4px);
border-color: rgba(20,215,255,.28);
background:
radial-gradient(circle at 50% 12%, rgba(20,215,255,.20), transparent 48%),
linear-gradient(145deg, rgba(255,255,255,.090), rgba(255,255,255,.035));
box-shadow: 0 18px 38px rgba(0,0,0,.38);
}
}
@media (min-width: 760px) {
article.channel-card {
min-height: 172px;
padding: 15px 12px 13px;
border-radius: 22px;
}
.channel-logo-wrapper {
width: 78px;
height: 78px;
margin-top: 30px;
border-radius: 23px;
}
.channel-title {
font-size: .94rem;
}
.channel-category {
font-size: .74rem;
}
.live-badge,
.quality-badge {
height: 23px;
padding-inline: 8px;
font-size: .64rem;
}
}
@media (max-width: 420px) {
article.channel-card {
min-height: 124px;
padding-inline: 7px;
border-radius: 14px;
}
.channel-logo-wrapper {
width: 52px;
height: 52px;
margin-top: 21px;
border-radius: 16px;
}
.channel-title {
font-size: .72rem;
}
.channel-category {
font-size: .61rem;
}
}
/* ORIGINAL SOURCE: Components/Shared/FilterBar.razor.css */
section.live-channel-tabs,
section.category-tabs,
section.filter-panel {
position: relative;
top: auto;
left: auto;
right: auto;
width: 100%;
max-width: 100%;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
direction: rtl;
overflow-x: auto;
overflow-y: hidden;
background: transparent;
border: 0;
scrollbar-width: none;
}
section.live-channel-tabs::-webkit-scrollbar,
section.category-tabs::-webkit-scrollbar,
section.filter-panel::-webkit-scrollbar {
display: none;
}
section.live-channel-tabs {
height: 58px;
min-height: 58px;
padding: 5px 0;
}
section.category-tabs,
section.filter-panel {
height: 48px;
min-height: 48px;
padding: 3px 0 5px;
}
/* ORIGINAL SOURCE: Components/Shared/MediaCard.razor.css */
article.nova-item-card {
background: transparent;
color: #fff;
}
.poster-wrapper {
background: #000;
}
/* ORIGINAL SOURCE: Components/Shared/MovieCollectionCard.razor.css */
.movie-collection-card {
width: 100%;
min-width: 0;
padding: 0;
border: 0;
color: #fff;
background: transparent;
text-align: right;
cursor: pointer;
}
.movie-collection-card-art {
position: relative;
min-height: 202px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.10);
border-radius: 22px;
background: #080808;
box-shadow: 0 20px 55px rgba(0,0,0,.38);
isolation: isolate;
}
.movie-collection-card-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.015);
transition: transform .34s ease, filter .34s ease;
}
.movie-collection-card-shade {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.02) 45%, rgba(0,0,0,.20)),
linear-gradient(to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.68) 38%, rgba(0,0,0,.06) 76%);
}
.movie-collection-card-copy {
position: absolute;
z-index: 4;
right: 18px;
bottom: 16px;
left: 76px;
display: grid;
gap: 5px;
}
.movie-collection-card-kicker {
width: max-content;
padding: 4px 8px;
border: 1px solid rgba(75,233,255,.30);
border-radius: 999px;
color: #4BE9FF;
background: rgba(0,0,0,.54);
font-size: .64rem;
font-weight: 900;
}
.movie-collection-card-copy strong {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: #fff;
font-size: 1.02rem;
font-weight: 950;
line-height: 1.35;
letter-spacing: -.02em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.movie-collection-card-copy small {
color: rgba(255,255,255,.68);
font-size: .75rem;
font-weight: 700;
}
.movie-collection-card-open {
position: absolute;
z-index: 5;
bottom: 15px;
left: 16px;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.16);
border-radius: 50%;
color: #000;
background: #fff;
box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.movie-collection-preview {
position: absolute;
z-index: 3;
top: 14px;
right: 14px;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
.movie-collection-preview-poster {
width: 42px;
height: 62px;
margin-right: -10px;
object-fit: cover;
border: 2px solid rgba(0,0,0,.82);
border-radius: 8px;
background: #111;
box-shadow: 0 8px 18px rgba(0,0,0,.45);
}
.movie-collection-preview-poster:first-child { margin-right: 0; }
@media (hover: hover) and (pointer: fine) {
.movie-collection-card:hover .movie-collection-card-image {
transform: scale(1.055);
filter: saturate(1.08) contrast(1.03);
}
.movie-collection-card:hover .movie-collection-card-art {
border-color: rgba(194,93,255,.42);
box-shadow: 0 24px 64px rgba(0,0,0,.48), 0 0 0 1px rgba(75,233,255,.08);
}
}
@media (max-width: 520px) {
.movie-collection-card-art { min-height: 176px; border-radius: 18px; }
.movie-collection-card-copy { right: 14px; bottom: 13px; left: 64px; }
.movie-collection-card-copy strong { font-size: .94rem; }
.movie-collection-card-open { width: 38px; height: 38px; left: 13px; bottom: 13px; }
.movie-collection-preview { top: 11px; right: 11px; }
.movie-collection-preview-poster { width: 36px; height: 54px; }
}
/* ORIGINAL SOURCE: Components/Shared/MovieCollectionsRail.razor.css */
.movie-collections-rail {
position: relative;
z-index: 2;
display: grid;
gap: 16px;
padding: 28px clamp(14px, 3.5vw, 50px) 10px;
background: #000;
}
.movie-collections-rail-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
}
.movie-collections-rail-head div { display: grid; gap: 4px; }
.movie-collections-rail-head small {
color: #4BE9FF;
font-size: .66rem;
font-weight: 950;
letter-spacing: .12em;
}
.movie-collections-rail-head h2 {
margin: 0;
color: #fff;
font-size: clamp(1.18rem, 2vw, 1.55rem);
font-weight: 950;
letter-spacing: -.035em;
}
.movie-collections-rail-head p {
margin: 0;
color: rgba(255,255,255,.55);
font-size: .78rem;
}
.movie-collections-rail-head button {
min-width: max-content;
padding: 8px 13px;
border: 1px solid rgba(194,93,255,.28);
border-radius: 999px;
color: #fff;
background: rgba(255,255,255,.04);
font-size: .76rem;
font-weight: 900;
}
.movie-collections-rail-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(300px, 31vw);
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 2px 12px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.movie-collections-rail-row::-webkit-scrollbar { display: none; }
.movie-collections-rail-cell { min-width: 0; scroll-snap-align: start; }
@media (max-width: 760px) {
.movie-collections-rail { padding: 22px 10px 8px; }
.movie-collections-rail-head { align-items: center; }
.movie-collections-rail-head p { display: none; }
.movie-collections-rail-row { grid-auto-columns: minmax(270px, 78vw); gap: 11px; }
}
/* ORIGINAL SOURCE: Components/Shared/NativeCatalogHeader.razor.css */
.nova-native-catalog-header {
position:fixed;
z-index:180;
top:0;
right:0;
left:0;
height:calc(var(--nova-app-header-h,58px) + var(--safe-top, env(safe-area-inset-top,0px)));
min-height:calc(var(--nova-app-header-h,58px) + var(--safe-top, env(safe-area-inset-top,0px)));
padding:var(--safe-top, env(safe-area-inset-top,0px)) max(clamp(14px,3vw,24px),var(--safe-right,0px)) 0 max(clamp(14px,3vw,24px),var(--safe-left,0px));
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
background:transparent;
border-bottom:1px solid transparent;
box-shadow:none;
color:#fff;
font-family:Tajawal,Arial,sans-serif;
pointer-events:auto;
transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,backdrop-filter .24s ease;
}
.nova-native-header-leading {min-width:0;display:flex;align-items:center;gap:10px}
.nova-native-title-copy {min-width:0}
.nova-native-title-copy h1 {margin:0;color:#fff;font-size:clamp(1.18rem,3vw,1.55rem);line-height:1;font-weight:950;letter-spacing:-.03em;text-shadow:0 12px 26px rgba(0,0,0,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nova-native-title-copy small {display:block;max-width:min(64vw,520px);margin-top:4px;overflow:hidden;color:rgba(255,255,255,.58);font-size:.68rem;font-weight:700;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.nova-native-catalog-header .catalog-landing-toolbar-actions{display:inline-flex;align-items:center;gap:7px;direction:ltr}
.nova-native-catalog-header .catalog-landing-toolbar-button{position:relative;width:44px;height:44px;min-width:44px;padding:0;margin-inline:-4px;display:grid;place-items:center;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;outline:none}
.nova-native-catalog-header .catalog-landing-toolbar-button:active{transform:scale(.92)}
.nova-native-catalog-header .catalog-landing-toolbar-button.notification i{position:absolute;top:4px;right:2px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#F04AD8,#9B4DFF 54%,#14D7FF);box-shadow:0 0 0 3px rgba(155,77,255,.14)}
.nova-native-back{flex:0 0 auto}
@media(max-width:600px){.nova-native-title-copy small{display:none}.nova-native-header-leading{gap:5px}.nova-native-catalog-header{padding-right:max(14px,var(--safe-right,0px));padding-left:max(14px,var(--safe-left,0px))}}
/* ORIGINAL SOURCE: Components/Shared/NovaInitialGateLoader.razor.css */
:host {
display: contents;
}
.nova-initial-gate {
position: fixed;
z-index: 2147483600;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
background: #000000;
color: #ffffff;
isolation: isolate;
}
.nova-initial-gate__topline {
position: absolute;
z-index: 4;
top: var(--safe-top, 0px);
right: 0;
left: 0;
height: 3px;
overflow: hidden;
background: rgba(255,255,255,.035);
}
.nova-initial-gate__topline span {
position: absolute;
inset-block: 0;
right: -34%;
width: 34%;
border-radius: 999px;
background: linear-gradient(90deg, transparent 0%, #F04AD8 16%, #9B4DFF 50%, #14D7FF 84%, transparent 100%);
filter: drop-shadow(0 0 9px rgba(90, 132, 255, .85));
animation: novaInitialGateWave 1.62s cubic-bezier(.42, 0, .22, 1) infinite;
}
.nova-initial-gate__center {
width: min(88vw, 430px);
display: grid;
justify-items: center;
gap: 13px;
transform: translateY(-3vh);
}
.nova-initial-gate__motion {
width: min(150px, 34vw);
}
.nova-initial-gate__motion .nova-motion-loader {
min-height: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.nova-initial-gate__motion .nova-motion-loader::before {
opacity: .48 !important;
}
.nova-initial-gate__dots {
height: 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
direction: ltr;
}
.nova-initial-gate__dots i {
width: 9px;
height: 9px;
border-radius: 50%;
background: #14D7FF;
box-shadow: 0 0 13px rgba(20, 215, 255, .68);
animation: novaInitialGateDot 1.28s cubic-bezier(.45, 0, .25, 1) infinite;
}
.nova-initial-gate__dots i:nth-child(2) {
background: #9B4DFF;
box-shadow: 0 0 13px rgba(155, 77, 255, .72);
animation-delay: -.43s;
}
.nova-initial-gate__dots i:nth-child(3) {
background: #F04AD8;
box-shadow: 0 0 13px rgba(240, 74, 216, .68);
animation-delay: -.86s;
}
.nova-initial-gate__copy {
display: grid;
justify-items: center;
gap: 5px;
text-align: center;
}
.nova-initial-gate__copy strong {
font-size: clamp(.9rem, 2.2vw, 1.08rem);
line-height: 1.4;
font-weight: 950;
}
.nova-initial-gate__copy span {
color: rgba(255,255,255,.56);
font-size: clamp(.68rem, 1.55vw, .8rem);
line-height: 1.55;
font-weight: 650;
}
@keyframes novaInitialGateWave {
0% { right: -36%; transform: scaleX(.72); opacity: .2; }
20% { opacity: 1; }
52% { transform: scaleX(1.22); }
82% { opacity: 1; }
100% { right: 102%; transform: scaleX(.76); opacity: .15; }
}
@keyframes novaInitialGateDot {
0%, 100% { opacity: .28; transform: translateY(0) scale(.72); }
48% { opacity: 1; transform: translateY(-5px) scale(1.08); }
}
@media (max-width: 620px) {
.nova-initial-gate__center { transform: translateY(-5vh); }
.nova-initial-gate__topline { height: 2px; }
.nova-initial-gate__dots i { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.nova-initial-gate__topline span,
.nova-initial-gate__dots i { animation: none !important; }
}
/* ORIGINAL SOURCE: Components/Shared/NovaMotionLoader.razor.css */
:host {
display: block;
width: 100%;
}
.nova-motion-loader {
--nova-motion-size: clamp(82px, 10vw, 118px);
--nova-motion-gap: 17px;
position: relative;
isolation: isolate;
width: 100%;
min-height: 260px;
padding: 34px 20px;
display: grid;
place-items: center;
align-content: center;
gap: var(--nova-motion-gap);
overflow: hidden;
color: #fff;
background: #000;
box-sizing: border-box;
}
.nova-motion-loader::before {
content: "";
position: absolute;
z-index: -1;
width: min(62vw, 520px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(72, 106, 255, .12), rgba(138, 67, 255, .055) 34%, transparent 70%);
filter: blur(30px);
opacity: .72;
animation: novaMotionAmbient 6.8s ease-in-out infinite;
pointer-events: none;
}
.nova-motion-loader__stage {
position: relative;
width: var(--nova-motion-size);
height: var(--nova-motion-size);
display: grid;
place-items: center;
}
.nova-motion-loader__mark {
position: relative;
z-index: 3;
width: 100%;
height: 100%;
display: block;
overflow: visible;
filter: drop-shadow(0 18px 36px rgba(53, 104, 255, .18));
}
.nova-motion-loader__horizon {
position: absolute;
z-index: 1;
top: 50%;
right: 50%;
width: clamp(140px, 27vw, 330px);
height: 1px;
transform: translate(50%, -50%) scaleX(.08);
transform-origin: center;
border-radius: 999px;
background: linear-gradient(90deg, transparent, #26DFFF 25%, #6877FF 52%, #D34DDF 77%, transparent);
box-shadow: 0 0 14px rgba(78, 130, 255, .58);
opacity: 0;
animation: novaMotionHorizon 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
.nova-motion-loader__flare {
position: absolute;
z-index: 2;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 14px 4px rgba(65, 200, 255, .45);
opacity: .5;
}
.flare-a {
top: 14%;
left: 6%;
animation: novaMotionFlare 3.4s ease-in-out infinite;
}
.flare-b {
right: 1%;
bottom: 18%;
width: 3px;
height: 3px;
animation: novaMotionFlare 3.4s ease-in-out -1.7s infinite;
}
.nova-motion-aura {
transform-origin: 60px 60px;
animation: novaMotionAura 5.8s ease-in-out infinite;
}
.nova-motion-orbit,
.nova-motion-scan,
.nova-motion-aperture,
.nova-motion-monogram,
.nova-motion-glint,
.nova-motion-pulse {
transform-origin: 60px 60px;
}
.nova-motion-orbit--outer {
animation: novaMotionClockwise 8.8s linear infinite;
}
.nova-motion-orbit--inner {
animation: novaMotionCounter 13.6s linear infinite;
}
.nova-motion-comet {
transform-origin: center;
animation: novaMotionComet 2.7s ease-in-out infinite;
}
.nova-motion-scan {
animation: novaMotionScan 3.9s cubic-bezier(.52, .04, .36, 1) infinite;
}
.nova-motion-aperture {
animation: novaMotionAperture 3.1s cubic-bezier(.42, 0, .2, 1) infinite;
}
.nova-motion-blade {
transform-origin: 60px 60px;
}
.blade-a,
.blade-c { animation: novaMotionBladeA 3.1s cubic-bezier(.42, 0, .2, 1) infinite; }
.blade-b,
.blade-d { animation: novaMotionBladeB 3.1s cubic-bezier(.42, 0, .2, 1) infinite; }
.nova-motion-pulse {
animation: novaMotionPulse 4.6s ease-out infinite;
}
.pulse-two { animation-delay: -2.3s; }
.nova-motion-monogram {
animation: novaMotionMonogram 4.8s ease-in-out infinite;
}
.nova-motion-glint {
animation: novaMotionGlint 2.9s ease-in-out infinite;
}
.nova-motion-loader__copy {
min-width: 0;
display: grid;
gap: 6px;
text-align: center;
}
.nova-motion-loader__copy strong {
color: #fff;
font-size: clamp(.9rem, 2vw, 1.06rem);
line-height: 1.35;
font-weight: 950;
letter-spacing: -.015em;
}
.nova-motion-loader__copy span {
color: rgba(255, 255, 255, .57);
font-size: clamp(.68rem, 1.5vw, .8rem);
line-height: 1.55;
font-weight: 650;
}
.nova-motion-loader.is-page {
min-height: calc(100dvh - var(--bottom-nav-h, 76px) - var(--safe-bottom, 0px));
}
.nova-motion-loader.is-compact {
--nova-motion-size: 58px;
--nova-motion-gap: 10px;
min-height: 92px;
padding: 12px 14px;
grid-auto-flow: column;
grid-template-columns: auto minmax(0, 1fr);
justify-content: center;
}
.nova-motion-loader.is-compact::before {
width: 190px;
opacity: .46;
}
.nova-motion-loader.is-compact .nova-motion-loader__copy {
text-align: right;
}
.nova-motion-loader.is-details {
min-height: calc(100dvh - var(--bottom-nav-h, 76px) - var(--safe-bottom, 0px));
padding-top: max(40px, var(--safe-top, 0px));
padding-bottom: calc(32px + var(--bottom-nav-h, 76px));
}
.nova-motion-loader.is-details::after {
content: "";
position: absolute;
right: 50%;
bottom: 14%;
width: min(78vw, 680px);
height: 1px;
transform: translateX(50%);
background: linear-gradient(90deg, transparent, rgba(40, 223, 255, .22), rgba(139, 82, 255, .28), transparent);
opacity: .55;
}
.nova-motion-loader.is-transition {
--nova-motion-size: 66px;
position: fixed;
z-index: 2147482500;
inset: 0;
min-height: 100dvh;
padding: 0;
background: rgba(0, 0, 0, .82);
pointer-events: none;
animation: novaMotionTransitionLayer .48s cubic-bezier(.2, .8, .22, 1) both;
}
.nova-motion-loader.is-transition::before {
width: min(52vw, 440px);
opacity: .5;
filter: blur(36px);
}
.nova-motion-loader.is-transition .nova-motion-loader__stage {
transform: translateY(-2vh);
animation: novaMotionTransitionStage .48s cubic-bezier(.18, .82, .22, 1) both;
}
.nova-motion-loader.is-transition .nova-motion-loader__horizon {
width: min(44vw, 320px);
animation-duration: 1.25s;
}
.nova-motion-loader.is-transition .nova-motion-loader__copy {
display: none;
}
@keyframes novaMotionClockwise { to { transform: rotate(360deg); } }
@keyframes novaMotionCounter { to { transform: rotate(-360deg); } }
@keyframes novaMotionScan { 0% { transform: rotate(-38deg); opacity: .12; } 28%, 72% { opacity: .8; } 100% { transform: rotate(322deg); opacity: .12; } }
@keyframes novaMotionAura { 0%, 100% { opacity: .1; transform: scale(.92); } 50% { opacity: .25; transform: scale(1.08); } }
@keyframes novaMotionPulse { 0% { opacity: .22; transform: scale(.82); } 72%, 100% { opacity: 0; transform: scale(1.22); } }
@keyframes novaMotionComet { 0%, 100% { opacity: .66; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes novaMotionAperture { 0%, 100% { opacity: .44; transform: rotate(-4deg) scale(.94); } 48% { opacity: .92; transform: rotate(4deg) scale(1.02); } }
@keyframes novaMotionBladeA { 0%, 100% { transform: rotate(-8deg) scale(.96); opacity: .08; } 50% { transform: rotate(8deg) scale(1.04); opacity: .2; } }
@keyframes novaMotionBladeB { 0%, 100% { transform: rotate(8deg) scale(.96); opacity: .08; } 50% { transform: rotate(-8deg) scale(1.04); opacity: .2; } }
@keyframes novaMotionMonogram { 0%, 100% { opacity: .92; transform: scale(.985); } 50% { opacity: 1; transform: scale(1.018); } }
@keyframes novaMotionGlint { 0%, 100% { opacity: .35; transform: scale(.65) rotate(0deg); } 50% { opacity: 1; transform: scale(1.16) rotate(45deg); } }
@keyframes novaMotionFlare { 0%, 100% { opacity: .18; transform: scale(.6); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes novaMotionHorizon { 0% { opacity: 0; transform: translate(50%, -50%) scaleX(.06); } 32% { opacity: .82; } 55% { opacity: .5; transform: translate(50%, -50%) scaleX(1); } 100% { opacity: 0; transform: translate(50%, -50%) scaleX(.12); } }
@keyframes novaMotionAmbient { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: .82; transform: scale(1.08); } }
@keyframes novaMotionTransitionLayer { 0% { opacity: 0; } 24% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes novaMotionTransitionStage { 0% { opacity: 0; transform: translateY(8px) scale(.82); } 40% { opacity: 1; transform: translateY(-2vh) scale(1); } 100% { opacity: 0; transform: translateY(-2vh) scale(1.04); } }
@media (max-width: 620px) {
.nova-motion-loader {
--nova-motion-size: 88px;
min-height: 220px;
}
.nova-motion-loader.is-details {
--nova-motion-size: 96px;
min-height: calc(100dvh - var(--bottom-nav-h, 70px) - var(--safe-bottom, 0px));
}
.nova-motion-loader.is-transition {
--nova-motion-size: 58px;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-motion-loader,
.nova-motion-loader::before,
.nova-motion-loader__stage,
.nova-motion-loader__horizon,
.nova-motion-loader__flare,
.nova-motion-aura,
.nova-motion-orbit,
.nova-motion-comet,
.nova-motion-scan,
.nova-motion-aperture,
.nova-motion-blade,
.nova-motion-pulse,
.nova-motion-monogram,
.nova-motion-glint {
animation: none !important;
}
.nova-motion-loader.is-transition {
opacity: 0;
}
}
/* ORIGINAL SOURCE: Components/Shared/NovaNotFoundView.razor.css */
:host {
display: block;
width: 100%;
background: transparent;
}
.nova-not-found {
width: min(100%, 760px);
min-height: min(72dvh, 640px);
margin: 0 auto;
padding: clamp(42px, 8dvh, 88px) clamp(18px, 4vw, 42px) 92px;
display: grid;
place-items: center;
align-content: center;
gap: 24px;
color: #fff;
text-align: center;
background: transparent;
}
.nova-not-found-art {
position: relative;
width: clamp(150px, 26vw, 224px);
aspect-ratio: 1;
display: grid;
place-items: center;
isolation: isolate;
}
.nova-not-found-art::before {
content: "";
position: absolute;
inset: 20%;
border-radius: 50%;
background: radial-gradient(circle, rgba(155,77,255,.22), rgba(20,215,255,.06) 48%, transparent 72%);
filter: blur(10px);
animation: nova-not-found-breathe 2.8s ease-in-out infinite;
}
.nova-not-found-orbit {
position: absolute;
inset: 10%;
border-radius: 50%;
padding: 1px;
background: conic-gradient(from 20deg, transparent 0 18%, #F04AD8 26%, #9B4DFF 44%, #14D7FF 61%, transparent 72% 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: .86;
animation: nova-not-found-spin 8s linear infinite;
}
.nova-not-found-orbit.orbit-b {
inset: 24%;
opacity: .55;
animation-direction: reverse;
animation-duration: 5.6s;
}
.nova-not-found-core {
position: relative;
z-index: 3;
width: 62px;
height: 62px;
display: grid;
place-items: center;
border-radius: 22px;
color: #fff;
border: 1px solid transparent;
background:
linear-gradient(#000,#000) padding-box,
linear-gradient(135deg,#F04AD8,#9B4DFF 52%,#14D7FF) border-box;
box-shadow: 0 0 32px rgba(155,77,255,.22);
transform: rotate(-7deg);
}
.nova-not-found-core svg {
transform: rotate(7deg);
}
.nova-not-found-cut {
position: absolute;
z-index: 4;
width: 56%;
height: 2px;
border-radius: 99px;
background: linear-gradient(90deg, transparent, #F04AD8, #9B4DFF, #14D7FF, transparent);
box-shadow: 0 0 18px rgba(155,77,255,.44);
transform: rotate(-28deg);
}
.nova-not-found-spark {
position: absolute;
z-index: 5;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 12px currentColor;
animation: nova-not-found-float 2.6s ease-in-out infinite;
}
.spark-a { top: 17%; right: 19%; color: #14D7FF; background: #14D7FF; }
.spark-b { bottom: 17%; left: 20%; color: #F04AD8; background: #F04AD8; animation-delay: -.8s; }
.spark-c { top: 48%; left: 4%; color: #9B4DFF; background: #9B4DFF; animation-delay: -1.5s; }
.nova-not-found-copy {
max-width: 560px;
}
.nova-not-found-code {
display: inline-block;
margin-bottom: 10px;
color: #9B4DFF;
font-size: .72rem;
font-weight: 900;
letter-spacing: .16em;
}
.nova-not-found h1 {
margin: 0;
font-size: clamp(1.65rem, 5vw, 3rem);
line-height: 1.1;
font-weight: 950;
}
.nova-not-found p {
margin: 13px auto 0;
color: rgba(255,255,255,.66);
font-size: clamp(.82rem, 2vw, 1rem);
line-height: 1.8;
}
.nova-not-found-actions {
width: min(100%, 430px);
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 10px;
}
.nova-not-found-actions button,
.nova-not-found-actions a {
min-height: 46px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: #fff;
font-weight: 900;
text-decoration: none;
cursor: pointer;
}
.nova-not-found-actions .primary {
border: 0;
background: linear-gradient(100deg,#F04AD8,#9B4DFF 50%,#14D7FF);
box-shadow: 0 12px 30px rgba(155,77,255,.24);
}
.nova-not-found-actions .secondary {
border: 1px solid rgba(255,255,255,.16);
background: #000;
}
@keyframes nova-not-found-spin { to { transform: rotate(360deg); } }
@keyframes nova-not-found-breathe { 50% { transform: scale(1.16); opacity: .68; } }
@keyframes nova-not-found-float { 50% { transform: translateY(-8px) scale(1.18); opacity: .66; } }
@media (max-width: 520px) {
.nova-not-found {
min-height: calc(100dvh - 132px);
padding-top: 28px;
padding-bottom: 110px;
gap: 19px;
}
.nova-not-found-art { width: 158px; }
.nova-not-found-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.nova-not-found-art::before,
.nova-not-found-orbit,
.nova-not-found-spark { animation: none !important; }
}
/* ORIGINAL SOURCE: Components/Shared/NovaProgressiveLoader.razor.css */
:host { display:block; width:100%; background:transparent !important; }
.nova-progressive-loader {
position:relative; isolation:isolate; width:100%; padding:18px clamp(14px,4vw,34px) 28px;
overflow:hidden; color:#fff; background:transparent !important; box-sizing:border-box;
animation:novaProgressiveEnter .42s cubic-bezier(.2,.8,.25,1) both;
}
.nova-progressive-loader::before { display:none !important; content:none !important; }
.nova-progressive-loader__status { min-height:72px; display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:13px; direction:rtl; }
.nova-progressive-loader__orbit { width:58px; height:58px; justify-self:end; filter:drop-shadow(0 9px 22px rgba(74,103,255,.18)); }
.nova-progressive-loader__orbit svg { width:100%; height:100%; display:block; overflow:visible; }
.nova-progressive-aura,.nova-progressive-orbit,.nova-progressive-pulse,.nova-progressive-monogram,.nova-progressive-glint { transform-origin:36px 36px; }
.orbit-outer { animation:novaProgressiveClockwise 7.6s linear infinite; }
.orbit-inner { animation:novaProgressiveCounter 12.8s linear infinite; }
.nova-progressive-aura { animation:novaProgressiveAura 5.8s ease-in-out infinite; }
.nova-progressive-pulse { animation:novaProgressivePulse 5.6s ease-out infinite; }
.pulse-two { animation-delay:-2.8s; }
.nova-progressive-comet { animation:novaProgressiveComet 2.7s ease-in-out infinite; }
.nova-progressive-glint { animation:novaProgressiveGlint 2.9s ease-in-out infinite; }
.nova-progressive-monogram { animation:novaProgressiveMonogram 6.8s ease-in-out infinite; }
.nova-progressive-loader__copy { min-width:0; display:grid; gap:4px; text-align:right; }
.nova-progressive-loader__copy strong { color:#fff; font-size:clamp(.82rem,1.8vw,.98rem); line-height:1.35; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nova-progressive-loader__copy span { color:rgba(255,255,255,.56); font-size:clamp(.66rem,1.45vw,.78rem); line-height:1.45; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nova-progressive-loader__signal { min-width:28px; display:flex; align-items:center; gap:5px; direction:ltr; }
.nova-progressive-loader__signal i { width:5px; height:5px; border-radius:50%; background:#4be9ff; box-shadow:0 0 12px currentColor; animation:novaProgressiveSignal 1.8s ease-in-out infinite; }
.nova-progressive-loader__signal i:nth-child(2){color:#6d7dff;background:#6d7dff;animation-delay:-.6s}.nova-progressive-loader__signal i:nth-child(3){color:#c25dff;background:#c25dff;animation-delay:-1.2s}
.nova-progressive-loader__rails { margin-top:10px; display:grid; gap:20px; }
.nova-progressive-heading { height:20px; margin-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:14px; direction:rtl; }
.nova-progressive-heading span,.nova-progressive-heading b,.nova-progressive-cards i { position:relative; display:block; overflow:hidden; background:linear-gradient(118deg,rgba(255,255,255,.035) 8%,rgba(66,102,255,.09) 24%,rgba(168,75,255,.10) 36%,rgba(255,255,255,.035) 52%); background-size:240% 100%; animation:novaProgressiveShimmer 2.9s linear infinite; }
.nova-progressive-heading span { width:clamp(128px,30vw,245px); height:16px; border-radius:7px; }.nova-progressive-heading b{width:31px;height:8px;border-radius:999px;opacity:.55}
.nova-progressive-cards { display:grid; grid-auto-flow:column; grid-auto-columns:clamp(116px,20vw,170px); gap:clamp(9px,1.7vw,13px); overflow:hidden; direction:rtl; }
.nova-progressive-cards i { aspect-ratio:2/3; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); animation-delay:calc(var(--nova-progressive-index) * -.19s); }
.nova-progressive-cards i::after { content:""; position:absolute; right:10px; bottom:11px; width:62%; height:7px; border-radius:999px; background:rgba(255,255,255,.055); box-shadow:0 -14px 0 rgba(255,255,255,.035); }
.nova-progressive-rail.is-landscape .nova-progressive-cards { grid-auto-columns:clamp(190px,36vw,315px); }.nova-progressive-rail.is-landscape .nova-progressive-cards i{aspect-ratio:16/9}
.nova-progressive-loader__progress { position:relative; width:min(46vw,270px); height:2px; margin:22px auto 0; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.045); }
.nova-progressive-loader__progress span { position:absolute; inset-block:0; right:0; width:42%; border-radius:inherit; background:linear-gradient(90deg,transparent,#3ee5ff 28%,#6976ff 62%,#c95dff 88%,transparent); filter:drop-shadow(0 0 7px rgba(87,147,255,.72)); animation:novaProgressiveBar 3.4s cubic-bezier(.42,0,.58,1) infinite; }
.nova-progressive-loader.is-compact { padding-block:10px 16px; }.nova-progressive-loader.is-compact .nova-progressive-loader__status{min-height:56px}.nova-progressive-loader.is-compact .nova-progressive-loader__orbit{width:48px;height:48px}.nova-progressive-loader.is-compact .nova-progressive-loader__rails{margin-top:6px}.nova-progressive-loader.is-compact .nova-progressive-loader__progress{margin-top:14px}
.nova-progressive-loader.is-inline {
min-height: 86px;
padding: 10px 0 12px;
display: grid;
place-items: center;
background: transparent !important;
}
.nova-progressive-loader.is-inline .nova-progressive-loader__status {
min-height: 58px;
grid-template-columns: 58px;
justify-content: center;
gap: 0;
}
.nova-progressive-loader.is-inline .nova-progressive-loader__orbit { justify-self: center; }
.nova-progressive-loader.is-inline .nova-progressive-loader__copy,
.nova-progressive-loader.is-inline .nova-progressive-loader__signal,
.nova-progressive-loader.is-inline .nova-progressive-loader__rails,
.nova-progressive-loader.is-inline .nova-progressive-loader__progress { display: none !important; }
@keyframes novaProgressiveEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes novaProgressiveAmbient{0%,100%{opacity:.5;transform:translateX(50%) scale(.92)}50%{opacity:.9;transform:translateX(50%) scale(1.08)}}@keyframes novaProgressiveClockwise{to{transform:rotate(360deg)}}@keyframes novaProgressiveCounter{to{transform:rotate(-360deg)}}@keyframes novaProgressiveAura{0%,100%{opacity:.13;transform:scale(.93)}50%{opacity:.28;transform:scale(1.09)}}@keyframes novaProgressivePulse{0%{opacity:.28;transform:scale(.84)}70%,100%{opacity:0;transform:scale(1.18)}}@keyframes novaProgressiveComet{0%,100%{opacity:.76;transform:scale(.82)}50%{opacity:1;transform:scale(1.18)}}@keyframes novaProgressiveGlint{0%,100%{opacity:.55;transform:scale(.74) rotate(0)}50%{opacity:1;transform:scale(1.22) rotate(45deg)}}@keyframes novaProgressiveMonogram{0%,100%{opacity:.94;transform:scale(.99)}50%{opacity:1;transform:scale(1.015)}}@keyframes novaProgressiveSignal{0%,100%{opacity:.2;transform:scale(.75)}50%{opacity:1;transform:translateY(-2px) scale(1.08)}}@keyframes novaProgressiveShimmer{0%{background-position:135% 0}100%{background-position:-135% 0}}@keyframes novaProgressiveBar{0%{transform:translateX(140%);opacity:.18}50%{opacity:1}100%{transform:translateX(-340%);opacity:.18}}
@media(max-width:600px){.nova-progressive-loader{padding-inline:12px;padding-bottom:22px}.nova-progressive-loader__status{grid-template-columns:50px minmax(0,1fr) 22px;gap:9px}.nova-progressive-loader__orbit{width:50px;height:50px}.nova-progressive-cards{grid-auto-columns:clamp(104px,30vw,136px)}.nova-progressive-loader__copy span{white-space:normal}.nova-progressive-loader__progress{width:58vw}}
@media(prefers-reduced-motion:reduce){.nova-progressive-loader,.nova-progressive-loader::before,.nova-progressive-loader *{animation:none!important}}
/* ORIGINAL SOURCE: Components/Shared/NovaRefreshControl.razor.css */
:host { display: contents; }
.nova-refresh-control {
position: relative;
z-index: 2147481200;
pointer-events: none;
}
/* Windows: icon-only action aligned with the rest of the header tools. */
.nova-refresh-desktop {
position: fixed;
z-index: 2147482600;
top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 15px);
left: clamp(168px, 11vw, 190px);
width: 38px;
height: 38px;
padding: 0;
display: grid;
place-items: center;
border: 0 !important;
border-radius: 0 !important;
color: #fff;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: none;
pointer-events: auto;
cursor: pointer;
transition: transform .16s ease, color .16s ease, opacity .16s ease;
}
.nova-refresh-desktop:hover {
color: #8fdfff;
transform: translateY(-1px);
}
.nova-refresh-desktop:active { transform: scale(.91); }
.nova-refresh-desktop:disabled { cursor: wait; opacity: .82; }
.nova-refresh-desktop-icon { width: 100%; height: 100%; display: grid; place-items: center; }
.nova-refresh-desktop-icon svg,
.nova-refresh-desktop-icon .oscar-icon {
color: currentColor;
filter: drop-shadow(0 2px 9px rgba(0,0,0,.78));
}
.is-refreshing .nova-refresh-desktop-icon { animation: novaRefreshSpin .78s linear infinite; }
/* Android pull-to-refresh: the indicator itself only, with no disk/background. */
.nova-refresh-mobile {
--nova-pull-progress: 0;
position: fixed;
z-index: 2147482600;
top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 5px);
left: 50%;
width: 48px;
height: 48px;
display: none;
place-items: center;
border: 0 !important;
border-radius: 50%;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
opacity: calc(var(--nova-pull-progress) * 1);
transform: translate(-50%, calc(-58px + var(--nova-pull-progress) * 72px)) scale(calc(.72 + var(--nova-pull-progress) * .28));
transition: opacity 140ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.nova-refresh-ring {
width: 28px;
height: 28px;
display: block;
border-radius: 50%;
background: conic-gradient(from 0deg, #e04bdf, #8156ff, #28dfff, #e04bdf);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
filter: drop-shadow(0 0 8px rgba(96, 119, 255, .75));
}
.is-refreshing .nova-refresh-ring { animation: novaRefreshSpin .78s linear infinite; }
.is-refreshing .nova-refresh-mobile { opacity: 1 !important; transform: translate(-50%, 12px) scale(1) !important; }
@keyframes novaRefreshSpin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
.nova-refresh-desktop { display: none; }
.nova-refresh-mobile { display: grid; }
}
html.sg-platform-android .nova-refresh-desktop { display: none !important; }
html.sg-platform-android .nova-refresh-mobile { display: grid !important; }
html.sg-platform-desktop .nova-refresh-mobile { display: none !important; }
@media (prefers-reduced-motion: reduce) {
.nova-refresh-ring,
.nova-refresh-desktop-icon { animation: none !important; }
}
/* ORIGINAL SOURCE: Components/Shared/OfflineStateView.razor.css */
:host {
display: block;
width: 100%;
background: #000;
}
.nova-offline-state {
position: relative;
min-height: calc(100dvh - var(--bottom-nav-h, 76px));
padding: calc(64px + var(--safe-top, 0px)) clamp(18px, 5vw, 42px) calc(94px + var(--safe-bottom, 0px));
display: grid;
place-items: center;
overflow: hidden;
isolation: isolate;
color: #fff;
background: #000;
}
.nova-offline-ambient {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 72% 34%, rgba(155,77,255,.10), transparent 28%),
radial-gradient(circle at 30% 78%, rgba(20,215,255,.06), transparent 24%);
}
.nova-offline-ambient i { display:none; }
.nova-offline-content {
width: min(100%, 560px);
display: grid;
justify-items: center;
text-align: center;
}
.nova-offline-visual {
width: min(76vw, 390px);
margin-bottom: 34px;
}
.offline-device-card {
position: relative;
width: 100%;
aspect-ratio: 1.72;
display: grid;
place-items: center;
border: 1px solid transparent;
border-radius: 26px;
background:
linear-gradient(145deg, rgba(9,9,14,.96), rgba(3,4,8,.98)) padding-box,
linear-gradient(120deg, rgba(240,74,216,.82), rgba(155,77,255,.72) 52%, rgba(20,215,255,.78)) border-box;
box-shadow: 0 20px 70px rgba(0,0,0,.55), 0 0 34px rgba(155,77,255,.08);
}
.offline-device-card::after {
content:"";
position:absolute;
right:10%; left:10%; bottom:-14px;
height:24px;
border-radius:50%;
background:linear-gradient(90deg, rgba(240,74,216,.11), rgba(155,77,255,.20), rgba(20,215,255,.10));
filter:blur(15px);
}
.offline-device-dots {
position:absolute;
top:17px;
left:20px;
display:flex;
gap:6px;
}
.offline-device-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); }
.offline-device-dots i:nth-child(1){background:#F04AD8}.offline-device-dots i:nth-child(2){background:#9B4DFF}.offline-device-dots i:nth-child(3){background:#14D7FF}
.offline-cloud-mark {
position:relative;
width:82px;
height:58px;
}
.offline-cloud-shape {
position:absolute;
inset:11px 7px 6px;
border:3px solid rgba(255,255,255,.72);
border-top-color:#9B4DFF;
border-right-color:#14D7FF;
border-radius:32px 32px 24px 24px;
}
.offline-cloud-shape::before {
content:"";
position:absolute;
width:31px;
height:31px;
left:13px;
top:-20px;
border:3px solid #9B4DFF;
border-bottom:0;
border-radius:50% 50% 0 0;
background:#07070c;
}
.offline-cloud-slash {
position:absolute;
z-index:2;
width:72px;
height:3px;
top:27px;
left:5px;
border-radius:999px;
background:linear-gradient(90deg,#F04AD8,#9B4DFF,#14D7FF);
transform:rotate(-43deg);
box-shadow:0 0 12px rgba(155,77,255,.24);
}
.nova-offline-logo-shell {
position:absolute;
left:50%;
bottom:-25px;
width:52px;
height:52px;
transform:translateX(-50%);
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.16);
border-radius:50%;
background:#050509;
box-shadow:0 10px 28px rgba(0,0,0,.6), 0 0 20px rgba(155,77,255,.16);
}
.nova-offline-logo-shell img { width:40px; height:40px; object-fit:contain; border-radius:50%; }
.nova-offline-kicker {
display:inline-block;
margin-bottom:9px;
color:#A980FF;
font-size:.68rem;
font-weight:900;
letter-spacing:.18em;
}
.nova-offline-copy h1 {
margin:0;
color:#fff;
font-size:clamp(1.7rem,6.5vw,2.7rem);
line-height:1.12;
font-weight:950;
text-wrap:balance;
}
.nova-offline-copy p {
max-width:440px;
margin:12px auto 0;
color:rgba(255,255,255,.56);
font-size:clamp(.82rem,2.2vw,.98rem);
line-height:1.75;
}
.nova-offline-retry {
width:min(100%,340px);
min-height:52px;
margin-top:22px;
padding:0 22px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
border:1px solid transparent;
border-radius:16px;
color:#fff;
background:linear-gradient(#030305,#030305) padding-box, linear-gradient(100deg,#F04AD8,#9B4DFF 52%,#14D7FF) border-box;
font:inherit;
cursor:pointer;
transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease;
}
.nova-offline-retry:active { transform:scale(.98); }
.nova-offline-retry:disabled { opacity:.68; cursor:wait; }
.nova-offline-retry strong { font-size:.94rem; font-weight:900; }
.retry-icon { width:18px; height:18px; border:2px solid rgba(255,255,255,.23); border-top-color:#fff; border-right-color:#14D7FF; border-radius:50%; }
.nova-offline-retry.is-loading .retry-icon { animation:offlineSpin .8s linear infinite; }
.nova-offline-hint { margin-top:12px; color:rgba(255,255,255,.34); font-size:.68rem; }
@keyframes offlineSpin { to { transform:rotate(360deg); } }
@media (max-width:600px){
.nova-offline-state { padding:calc(48px + var(--safe-top,0px)) 18px calc(88px + var(--safe-bottom,0px)); }
.nova-offline-visual { width:min(78vw,330px); margin-bottom:30px; }
.offline-device-card { border-radius:22px; }
.nova-offline-copy p { max-width:330px; }
}
@media (prefers-reduced-motion:reduce){
.nova-offline-state *, .nova-offline-state *::before, .nova-offline-state *::after { animation:none !important; transition:none !important; }
}
/* ORIGINAL SOURCE: Components/Shared/RewardedAdDiagnostics.razor.css */
.rewarded-test-card {
overflow: hidden;
border: 1px solid rgba(255,255,255,.13);
border-radius: 20px;
background: #000;
box-shadow: 0 15px 38px rgba(0,0,0,.42);
}
.rewarded-test-heading {
min-height: 82px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 13px;
border-bottom: 1px solid rgba(255,255,255,.09);
}
.rewarded-test-icon {
width: 46px;
height: 46px;
flex: 0 0 auto;
display: grid;
place-items: center;
border: 1px solid transparent;
border-radius: 14px;
color: #fff;
background: linear-gradient(#000,#000) padding-box, linear-gradient(135deg,#f04ad8,#9b4dff,#14d7ff) border-box;
}
.rewarded-test-heading > div { min-width: 0; flex: 1; }
.rewarded-test-title-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rewarded-test-title-line h2 { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 950; }
.rewarded-test-heading p { margin: 5px 0 0; color: rgba(255,255,255,.55); font-size: .72rem; line-height: 1.5; }
.rewarded-test-badge { padding: 4px 7px; border: 1px solid rgba(20,215,255,.38); border-radius: 999px; color: #71eaff; background: rgba(20,215,255,.08); font-size: .58rem; font-weight: 950; letter-spacing: .06em; }
.rewarded-test-meta {
padding: 12px 18px;
display: flex;
flex-wrap: wrap;
gap: 7px;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.rewarded-test-meta span {
padding: 6px 8px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 9px;
color: rgba(255,255,255,.53);
background: rgba(255,255,255,.025);
font-size: .65rem;
}
.rewarded-test-meta strong { color: #fff; font-weight: 900; }
.rewarded-test-status {
margin: 14px 18px 0;
padding: 12px 13px;
display: flex;
align-items: flex-start;
gap: 10px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 13px;
background: rgba(255,255,255,.025);
}
.rewarded-test-dot { width: 9px; height: 9px; margin-top: 5px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.35); }
.rewarded-test-status div { min-width: 0; display: grid; gap: 3px; }
.rewarded-test-status strong { color: #fff; font-size: .78rem; font-weight: 900; }
.rewarded-test-status small { color: rgba(255,255,255,.55); font-size: .68rem; line-height: 1.55; }
.rewarded-test-status.success .rewarded-test-dot { background: #14d7ff; box-shadow: 0 0 12px rgba(20,215,255,.65); }
.rewarded-test-status.working .rewarded-test-dot { background: #9b4dff; box-shadow: 0 0 12px rgba(155,77,255,.6); animation: rewarded-pulse 1.15s ease-in-out infinite; }
.rewarded-test-status.error { border-color: rgba(255,91,116,.35); }
.rewarded-test-status.error .rewarded-test-dot { background: #ff5b74; }
.rewarded-test-actions {
padding: 14px 18px 18px;
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr)) 44px;
gap: 8px;
}
.rewarded-test-actions button {
min-height: 44px;
padding: 9px 11px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 11px;
color: #fff;
background: #000;
font: inherit;
font-size: .72rem;
font-weight: 900;
cursor: pointer;
}
.rewarded-test-actions button.primary {
border-color: transparent;
background: linear-gradient(100deg,#f04ad8 0%,#9b4dff 54%,#14d7ff 100%);
}
.rewarded-test-actions button.icon-only { width: 44px; padding: 0; display: grid; place-items: center; }
.rewarded-test-actions button:disabled { opacity: .42; cursor: default; }
@keyframes rewarded-pulse { 0%,100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 720px) {
.rewarded-test-actions { grid-template-columns: 1fr 1fr; }
.rewarded-test-actions button.primary { grid-column: 1 / -1; }
.rewarded-test-actions button.icon-only { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.rewarded-test-status.working .rewarded-test-dot { animation: none; }
}
.rewarded-test-help { color: rgba(255,255,255,.78) !important; font-weight: 700; direction: rtl; }
/* ORIGINAL SOURCE: Components/Shared/SearchSheet.razor.css */
section.search-sheet {
background: rgba(0, 0, 0, .76);
border: 1px solid rgba(255, 255, 255, .10);
backdrop-filter: blur(28px) saturate(1.35);
-webkit-backdrop-filter: blur(28px) saturate(1.35);
}
/* ORIGINAL SOURCE: Components/Shared/ServerDrivenCatalogPage.razor.css */
:host { display:block; background:#000; }
.server-driven-catalog-app {
min-height:100vh;
background:#000;
color:#fff;
font-family:Tajawal,Arial,sans-serif;
}
.server-driven-catalog-main {
min-height:100vh;
padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 18px);
background:#000;
overflow-x:hidden;
}
.server-driven-mode-list .server-driven-catalog-main {
padding-top:calc(var(--nova-app-header-h,58px) + var(--safe-top, env(safe-area-inset-top,0px)));
}
.server-driven-mode-hub .server-driven-catalog-main {
padding-top:0;
}
.server-driven-error {
min-height:70vh;
padding:100px 22px 130px;
display:grid;
place-items:center;
align-content:center;
gap:13px;
text-align:center;
background:radial-gradient(circle at 50% 35%,rgba(155,77,255,.12),transparent 35%),#000;
}
.server-driven-error h2 { margin:0; font-size:1.08rem; font-weight:900; }
.server-driven-error p { max-width:440px; margin:0; color:rgba(255,255,255,.6); line-height:1.7; font-size:.86rem; }
.primary-action {
min-height:42px; padding:0 22px; border:0; border-radius:999px; color:#fff;
background:linear-gradient(135deg,#C25DFF,#6D7DFF 55%,#4BE9FF); font-weight:900;
}
/* ORIGINAL SOURCE: Components/Shared/SideMenu.razor.css */
aside.side-menu {
background: rgba(0, 0, 0, .78);
border: 1px solid rgba(255, 255, 255, .10);
box-shadow: 0 26px 80px rgba(0, 0, 0, .58);
backdrop-filter: blur(28px) saturate(1.35);
-webkit-backdrop-filter: blur(28px) saturate(1.35);
}
.side-menu-brand strong {
color: #fff;
}
.side-menu > a {
width: 100%;
min-height: 52px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 15px;
border-radius: 12px;
background: transparent;
color: #d9d9dc;
text-align: right;
font-weight: 700;
text-decoration: none;
pointer-events: auto;
}
.side-menu > a:active {
background: #242426;
color: var(--accent);
}
/* ===== source: maui-components-supplement-v100.css ===== */
/* Additional MAUI component CSS missing from the legacy web bundle.
Selectors are scoped to the component root to emulate Blazor CSS isolation in a normal DOM. */
/* SOURCE: Components/Pages/HomeSections/HomeEditorialSpotlight.razor.css | WEB SCOPE: .nova-editorial-spotlight */
.nova-editorial-spotlight { display:block; }
.nova-editorial-spotlight {
width:100%;
margin:18px 0 34px;
padding:0;
background:#000;
}
.nova-editorial-spotlight .nova-editorial-card {
position:relative;
width:100%;
min-height:clamp(330px,62vw,620px);
overflow:hidden;
color:#fff;
background:#080a0e;
cursor:pointer;
isolation:isolate;
}
.nova-editorial-spotlight .nova-editorial-card .nova-editorial-art {
position:absolute!important;
z-index:0;
inset:0;
width:100%!important;
height:100%!important;
object-fit:cover;
object-position:center 24%;
filter:saturate(.98) contrast(1.045);
transform:scale(1.006);
transition:transform .7s cubic-bezier(.22,1,.36,1), filter .3s ease;
}
.nova-editorial-spotlight .nova-editorial-shade {
position:absolute;
z-index:1;
inset:0;
pointer-events:none;
background:
radial-gradient(ellipse 70% 42% at 50% 83%,rgba(0,0,0,.20),transparent 68%),
linear-gradient(180deg,rgba(0,0,0,.04) 22%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.82) 82%,#000 100%);
}
.nova-editorial-spotlight .nova-editorial-copy {
position:absolute;
z-index:2;
right:max(18px,var(--safe-right,0px));
left:max(18px,var(--safe-left,0px));
bottom:28px;
width:min(620px,calc(100% - 36px));
margin-inline:auto;
text-align:center;
}
.nova-editorial-spotlight .nova-editorial-kicker {
display:inline-flex;
align-items:center;
gap:8px;
color:rgba(255,255,255,.72);
font-size:.67rem;
font-weight:850;
}
.nova-editorial-spotlight .nova-editorial-kicker i {
width:7px;
height:7px;
border-radius:2px;
background:linear-gradient(135deg,#F04AD8,#9B4DFF 54%,#14D7FF);
transform:rotate(45deg);
box-shadow:0 0 14px rgba(155,77,255,.30);
}
.nova-editorial-spotlight .nova-editorial-copy h2 {
margin:8px 0 0;
color:#fff;
font-size:clamp(1.55rem,6.4vw,3.1rem);
line-height:1.02;
font-weight:950;
letter-spacing:-.04em;
text-wrap:balance;
text-shadow:0 6px 26px rgba(0,0,0,.72);
}
.nova-editorial-spotlight .nova-editorial-copy p {
max-width:540px;
margin:9px auto 0;
color:rgba(255,255,255,.66);
font-size:clamp(.72rem,2.1vw,.9rem);
line-height:1.62;
font-weight:600;
display:-webkit-box;
overflow:hidden;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.nova-editorial-spotlight .nova-editorial-cta {
min-width:152px;
min-height:43px;
margin-top:16px;
padding:0 21px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:0;
border-radius:999px;
color:#fff;
background:linear-gradient(100deg,#F04AD8 0%,#9B4DFF 50%,#14D7FF 100%);
box-shadow:0 13px 32px rgba(155,77,255,.24);
font-size:.78rem;
font-weight:950;
cursor:pointer;
transition:transform .15s ease,box-shadow .15s ease;
}
.nova-editorial-spotlight .nova-editorial-cta:active { transform:scale(.968); box-shadow:0 8px 22px rgba(155,77,255,.18); }
.nova-editorial-spotlight .nova-editorial-card:focus-visible { outline:2px solid rgba(20,215,255,.86); outline-offset:-4px; }
@media (hover:hover) and (pointer:fine) {
.nova-editorial-spotlight .nova-editorial-card:hover .nova-editorial-art { transform:scale(1.026); filter:saturate(1.02) contrast(1.055); }
}
@media(max-width:560px) {
.nova-editorial-spotlight { margin:14px 0 28px; }
.nova-editorial-spotlight .nova-editorial-card { min-height:clamp(390px,112vw,540px); }
.nova-editorial-spotlight .nova-editorial-copy { bottom:24px; }
.nova-editorial-spotlight .nova-editorial-copy p { -webkit-line-clamp:2; }
}
@media(prefers-reduced-motion:reduce) {
.nova-editorial-spotlight .nova-editorial-card .nova-editorial-art,
.nova-editorial-spotlight .nova-editorial-cta { transition:none; }
}
/* SOURCE: Components/Pages/HomeSections/HomeMovieCollectionsShowcase.razor.css | WEB SCOPE: .nova-movie-collections-showcase */
.nova-movie-collections-showcase {
display: block;
}
.nova-movie-collections-showcase {
width: 100%;
margin: 0 0 26px;
padding: 0 max(16px, var(--safe-right, 0px)) 0 max(16px, var(--safe-left, 0px));
box-sizing: border-box;
}
.nova-movie-collections-showcase .nova-movie-collections-hero {
position: relative;
min-height: 420px;
border-radius: 30px;
overflow: hidden;
background: #05070c;
box-shadow: 0 26px 72px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
}
.nova-movie-collections-showcase .nova-movie-collections-art,
.nova-movie-collections-showcase .nova-movie-collections-art img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.nova-movie-collections-showcase .nova-movie-collections-art img {
object-fit: cover;
object-position: center top;
filter: saturate(1.03) contrast(1.04);
transform: scale(1.02);
}
.nova-movie-collections-showcase .nova-movie-collections-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.22) 24%, rgba(0,0,0,.54) 60%, rgba(0,0,0,.92) 100%),
linear-gradient(90deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.18) 100%);
pointer-events: none;
}
.nova-movie-collections-showcase .nova-movie-collections-overlay {
position: relative;
z-index: 1;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
padding: 32px 24px 22px;
}
.nova-movie-collections-showcase .nova-movie-collections-overlay .eyebrow {
display: inline-flex;
align-self: flex-start;
padding: 8px 12px;
border-radius: 999px;
background: rgba(6,12,22,.58);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.90);
font-size: .72rem;
font-weight: 850;
letter-spacing: .08em;
backdrop-filter: blur(14px);
}
.nova-movie-collections-showcase .nova-movie-collections-overlay h2 {
margin: 0;
color: #fff;
font-size: clamp(1.55rem, 5.1vw, 2.55rem);
line-height: 1.06;
font-weight: 980;
letter-spacing: -.04em;
text-shadow: 0 10px 24px rgba(0,0,0,.32);
}
.nova-movie-collections-showcase .nova-movie-collections-overlay p {
max-width: min(680px, 100%);
margin: 0;
color: rgba(255,255,255,.74);
font-size: clamp(.82rem, 2.7vw, .96rem);
line-height: 1.75;
font-weight: 620;
}
.nova-movie-collections-showcase .nova-movie-collections-switcher {
margin-top: 6px;
align-self: flex-start;
display: inline-flex;
gap: 8px;
padding: 8px;
border-radius: 999px;
background: rgba(8,11,18,.76);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(18px);
box-shadow: 0 18px 36px rgba(0,0,0,.24);
}
.nova-movie-collections-showcase .nova-movie-collections-switcher a {
min-height: 46px;
padding: 0 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
color: rgba(255,255,255,.68);
text-decoration: none;
font-size: .9rem;
font-weight: 850;
transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}
.nova-movie-collections-showcase .nova-movie-collections-switcher a.is-active {
color: #fff;
background: linear-gradient(135deg, rgba(240,74,216,.16), rgba(20,215,255,.14));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.16);
}
.nova-movie-collections-showcase .nova-movie-collections-switcher a:active { transform: scale(.98); }
.nova-movie-collections-showcase .nova-movie-collections-head {
margin: 20px 2px 12px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
}
.nova-movie-collections-showcase .nova-movie-collections-head span {
display: block;
margin-bottom: 4px;
color: rgba(255,255,255,.46);
font-size: .68rem;
font-weight: 850;
letter-spacing: .08em;
}
.nova-movie-collections-showcase .nova-movie-collections-head h3 {
margin: 0;
color: #fff;
font-size: clamp(1.08rem, 3.6vw, 1.6rem);
line-height: 1.08;
font-weight: 940;
letter-spacing: -.03em;
}
.nova-movie-collections-showcase .nova-movie-collections-more {
color: rgba(255,255,255,.76);
text-decoration: none;
font-size: .84rem;
font-weight: 820;
}
.nova-movie-collections-showcase .nova-movie-collections-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.nova-movie-collections-showcase .nova-movie-collection-card {
text-decoration: none;
color: #fff;
min-width: 0;
display: grid;
gap: 10px;
}
.nova-movie-collections-showcase .nova-movie-collection-poster {
position: relative;
aspect-ratio: 2 / 3;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(180deg, #0b1018, #080a0f);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
}
.nova-movie-collections-showcase .nova-movie-collection-poster::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.20) 62%, rgba(0,0,0,.85) 100%);
pointer-events: none;
}
.nova-movie-collections-showcase .nova-movie-collection-poster img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nova-movie-collections-showcase .nova-movie-collection-poster .nova-movie-collection-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nova-movie-collections-showcase .nova-movie-collection-badge {
position: absolute;
top: 12px;
right: 12px;
z-index: 1;
display: inline-flex;
align-items: center;
padding: 7px 10px;
border-radius: 999px;
background: rgba(8,11,18,.72);
color: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(14px);
font-size: .66rem;
font-weight: 860;
}
.nova-movie-collections-showcase .nova-movie-collection-copy {
display: grid;
gap: 4px;
padding-inline: 2px;
}
.nova-movie-collections-showcase .nova-movie-collection-copy strong {
font-size: .98rem;
line-height: 1.22;
font-weight: 920;
letter-spacing: -.02em;
}
.nova-movie-collections-showcase .nova-movie-collection-copy small {
color: rgba(255,255,255,.66);
font-size: .74rem;
line-height: 1.45;
font-weight: 650;
}
.nova-movie-collections-showcase .nova-movie-collection-copy span {
color: rgba(255,255,255,.44);
font-size: .71rem;
font-weight: 700;
}
.nova-movie-collections-showcase .nova-movie-collection-card:hover .nova-movie-collection-poster,
.nova-movie-collections-showcase .nova-movie-collection-card:focus-visible .nova-movie-collection-poster {
transform: translateY(-2px);
transition: transform .16s ease, box-shadow .16s ease;
box-shadow: 0 24px 56px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (max-width: 1100px) {
.nova-movie-collections-showcase .nova-movie-collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.nova-movie-collections-showcase { margin-bottom: 18px; }
.nova-movie-collections-showcase .nova-movie-collections-hero,
.nova-movie-collections-showcase .nova-movie-collections-overlay { min-height: 380px; }
.nova-movie-collections-showcase .nova-movie-collections-overlay { padding: 24px 16px 18px; }
.nova-movie-collections-showcase .nova-movie-collections-head { margin-top: 16px; }
.nova-movie-collections-showcase .nova-movie-collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 520px) {
.nova-movie-collections-showcase .nova-movie-collections-hero,
.nova-movie-collections-showcase .nova-movie-collections-overlay { min-height: 340px; }
.nova-movie-collections-showcase .nova-movie-collections-switcher { width: 100%; justify-content: space-between; }
.nova-movie-collections-showcase .nova-movie-collections-switcher a { flex: 1 1 0; min-width: 0; padding-inline: 12px; font-size: .82rem; }
.nova-movie-collections-showcase .nova-movie-collections-overlay p { font-size: .78rem; line-height: 1.68; }
.nova-movie-collections-showcase .nova-movie-collection-copy strong { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
.nova-movie-collections-showcase .nova-movie-collections-switcher a,
.nova-movie-collections-showcase .nova-movie-collection-card:hover .nova-movie-collection-poster,
.nova-movie-collections-showcase .nova-movie-collection-card:focus-visible .nova-movie-collection-poster { transition: none; }
}
/* SOURCE: Components/Pages/HomeSections/HomeWorldSwitcher.razor.css | WEB SCOPE: .nova-world-gateway */
.nova-world-gateway {
display: block;
}
.nova-world-gateway {
position: relative;
width: 100%;
margin: 10px 0 18px;
padding: 10px max(16px, var(--safe-right, 0px)) 0 max(16px, var(--safe-left, 0px));
box-sizing: border-box;
}
.nova-world-gateway .nova-world-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
.nova-world-gateway .nova-world-heading > div { min-width: 0; }
.nova-world-gateway .nova-world-heading span {
display: block;
margin-bottom: 5px;
color: rgba(255,255,255,.48);
font-size: .68rem;
line-height: 1.2;
font-weight: 850;
letter-spacing: .08em;
}
.nova-world-gateway .nova-world-heading h2 {
margin: 0;
color: #fff;
font-size: clamp(1.18rem, 4.5vw, 1.65rem);
line-height: 1.06;
font-weight: 950;
letter-spacing: -.035em;
}
.nova-world-gateway .nova-world-heading p {
max-width: 340px;
margin: 0;
color: rgba(255,255,255,.58);
font-size: .73rem;
line-height: 1.55;
font-weight: 650;
}
.nova-world-gateway .nova-world-primary,
.nova-world-gateway .nova-world-secondary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.nova-world-gateway .nova-world-secondary {
margin-top: 12px;
}
.nova-world-gateway .nova-world-button,
.nova-world-gateway .nova-world-mini-card {
position: relative;
min-height: 178px;
padding: 16px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
color: #fff;
text-align: right;
border: 1px solid rgba(255,255,255,.10);
border-radius: 26px;
background-color: #090b10;
background-size: cover;
background-position: center;
box-shadow: 0 20px 52px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.035);
overflow: hidden;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nova-world-gateway .nova-world-mini-card {
min-height: 148px;
border-radius: 22px;
}
.nova-world-gateway .nova-world-button::before,
.nova-world-gateway .nova-world-mini-card::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.18) 36%, rgba(0,0,0,.76) 100%),
linear-gradient(90deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.04) 48%, rgba(0,0,0,.18) 100%);
}
.nova-world-gateway .nova-world-button > *,
.nova-world-gateway .nova-world-mini-card > * { position: relative; z-index: 1; }
.nova-world-gateway .nova-world-button:hover,
.nova-world-gateway .nova-world-mini-card:hover,
.nova-world-gateway .nova-world-button:focus-visible,
.nova-world-gateway .nova-world-mini-card:focus-visible {
transform: translateY(-2px);
box-shadow: 0 26px 60px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.05);
}
.nova-world-gateway .nova-world-button:active,
.nova-world-gateway .nova-world-mini-card:active { transform: scale(.985); }
.nova-world-gateway .nova-world-series { background-image: url('/images/home/worlds/nova-world-series.png'); }
.nova-world-gateway .nova-world-movies { background-image: url('/images/home/worlds/nova-world-movies.png'); }
.nova-world-gateway .nova-world-anime { background-image: url('/images/home/worlds/nova-world-anime.png'); }
.nova-world-gateway .nova-world-wrestling { background-image: url('/images/home/worlds/nova-world-wrestling.png'); }
.nova-world-gateway .nova-world-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 15px;
color: #fff;
background: rgba(7,11,18,.52);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
backdrop-filter: blur(16px);
flex: 0 0 auto;
}
.nova-world-gateway .nova-world-copy {
min-width: 0;
display: grid;
gap: 4px;
margin-inline-end: auto;
}
.nova-world-gateway .nova-world-copy strong,
.nova-world-gateway .nova-world-mini-card strong { font-size: 1rem; font-weight: 950; letter-spacing: -.02em; }
.nova-world-gateway .nova-world-copy small,
.nova-world-gateway .nova-world-mini-card small { color: rgba(255,255,255,.68); font-size: .68rem; font-weight: 650; line-height: 1.45; }
.nova-world-gateway .nova-world-mini-card > span {
min-width: 0;
display: grid;
gap: 4px;
margin-inline-end: auto;
}
.nova-world-gateway .nova-world-button > :last-child {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(7,11,18,.42);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
backdrop-filter: blur(10px);
}
@media (max-width: 560px) {
.nova-world-gateway { margin-bottom: 12px; }
.nova-world-gateway .nova-world-heading { align-items: start; margin-bottom: 14px; }
.nova-world-gateway .nova-world-heading p { display: none; }
.nova-world-gateway .nova-world-primary,
.nova-world-gateway .nova-world-secondary { gap: 10px; }
.nova-world-gateway .nova-world-button { min-height: 152px; padding: 14px; border-radius: 22px; }
.nova-world-gateway .nova-world-mini-card { min-height: 126px; padding: 12px; border-radius: 18px; }
.nova-world-gateway .nova-world-icon { width: 40px; height: 40px; border-radius: 14px; }
.nova-world-gateway .nova-world-copy strong,
.nova-world-gateway .nova-world-mini-card strong { font-size: .88rem; }
.nova-world-gateway .nova-world-copy small,
.nova-world-gateway .nova-world-mini-card small { font-size: .61rem; }
}
@media (prefers-reduced-motion: reduce) {
.nova-world-gateway .nova-world-button,
.nova-world-gateway .nova-world-mini-card { transition: none; }
}
/* SOURCE: Components/Shared/AnimeCatalogExperience.razor.css | WEB SCOPE: .sg-anime-catalog */
.sg-anime-catalog {
--anime-purple: var(--accent);
--anime-purple-2: var(--accent);
width: 100%;
max-width: none;
min-height: 100dvh;
margin: 0;
padding: calc(var(--safe-top, 0px) + 10px) clamp(12px, 2.4vw, 34px) calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 28px);
overflow-x: clip;
color: var(--oscar-text);
background: #000000;
}
.sg-anime-catalog-intro {
margin: 22px 0 18px;
display: flex;
align-items: end;
justify-content: flex-start;
gap: 18px;
}
.sg-anime-catalog-intro > div:first-child { min-width: 0; }
.sg-anime-catalog .eyebrow { display:block; margin-bottom:7px; color:var(--accent); font-size:.63rem; font-weight:900; letter-spacing:.15em; }
.sg-anime-catalog-intro h1 { margin:0; font-size:clamp(1.65rem,3vw,2.35rem); line-height:1.12; font-weight:950; }
.sg-anime-catalog-intro p { max-width:720px; margin:8px 0 0; color:var(--oscar-muted); font-size:.82rem; line-height:1.65; }
.sg-anime-catalog-studios { margin: 2px 0 16px; }
.sg-anime-catalog .section-heading { min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sg-anime-catalog .section-heading h2 { margin:0; font-size:1.02rem; font-weight:900; }
.sg-anime-catalog .section-heading button { border:0; background:transparent; color:var(--accent); font:inherit; font-size:.7rem; cursor:pointer; }
.sg-anime-catalog .studio-strip { margin-top:8px; display:flex; gap:9px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; scroll-snap-type:x proximity; }
.sg-anime-catalog .studio-strip::-webkit-scrollbar { display:none; }
.sg-anime-catalog .studio-tile { flex:0 0 116px; min-width:0; padding:8px 8px 7px; display:grid; gap:6px; justify-items:center; border:1px solid var(--oscar-border); border-radius:10px; background:#000000; color:var(--oscar-muted); font:inherit; cursor:pointer; scroll-snap-align:start; }
.sg-anime-catalog .studio-tile.active { border-color:var(--accent); background:#000000; color:var(--oscar-text); }
.sg-anime-catalog .studio-logo { width:100%; height:40px; display:grid; place-items:center; overflow:hidden; }
.sg-anime-catalog .studio-logo img, .sg-anime-catalog .studio-logo .nova-fast-image { width:100% !important; height:100% !important; object-fit:contain !important; }
.sg-anime-catalog .studio-logo b { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#000000; color:var(--oscar-text); }
.sg-anime-catalog .studio-tile small { width:100%; overflow:hidden; text-align:center; white-space:nowrap; text-overflow:ellipsis; font-size:.61rem; }
.sg-anime-catalog-tools {
position: sticky;
top: 0;
z-index: 20;
margin: 0 -4px 18px;
padding: 9px 4px 10px;
display:grid;
gap:8px;
background: linear-gradient(180deg, rgba(0,0,0,.98) 78%, rgba(0,0,0,.90) 100%);
}
.sg-anime-catalog .search-box { min-height:44px; padding:0 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; border:1px solid var(--oscar-border); border-radius:11px; background:#000000; color:var(--oscar-muted); }
.sg-anime-catalog .search-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,0,0,.09); }
.sg-anime-catalog .search-box input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--oscar-text); font:inherit; font-size:.82rem; direction:rtl; }
.sg-anime-catalog .search-box input::placeholder { color:var(--oscar-muted); }
.sg-anime-catalog .clear-search { width:26px; height:26px; border:0; border-radius:50%; background:#000000; color:var(--oscar-muted); font:inherit; font-size:1rem; cursor:pointer; }
.sg-anime-catalog .filter-strip { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-inline:contain; }
.sg-anime-catalog .filter-strip::-webkit-scrollbar { display:none; }
.sg-anime-catalog .filter-pill { flex:0 0 auto; min-width:118px; height:39px; padding:0 9px; display:flex; align-items:center; gap:7px; border:1px solid var(--oscar-border); border-radius:20px; background:#000000; color:var(--oscar-muted); }
.sg-anime-catalog .filter-pill.primary { border-color:var(--accent); background:#000000; }
.sg-anime-catalog .filter-pill span { flex:0 0 auto; font-size:.59rem; font-weight:800; }
.sg-anime-catalog .filter-pill select { max-width:120px; min-width:0; border:0; outline:0; background:transparent; color:var(--oscar-text); font:inherit; font-size:.69rem; font-weight:700; cursor:pointer; }
.sg-anime-catalog .filter-pill option { background:#000000; color:var(--oscar-text); }
.sg-anime-catalog .reset-filters { flex:0 0 auto; height:39px; padding:0 14px; border:1px solid var(--accent); border-radius:20px; background:transparent; color:var(--accent); font:inherit; font-size:.67rem; font-weight:850; cursor:pointer; }
.sg-anime-catalog .catalog-progress { position:absolute; right:4px; bottom:2px; left:4px; height:2px; overflow:hidden; border-radius:2px; background:rgba(0,0,0,.04); }
.sg-anime-catalog .catalog-progress i { display:block; width:34%; height:100%; border-radius:inherit; background:#000000; animation:anime-progress 900ms ease-in-out infinite alternate; }
@keyframes anime-progress { from { transform:translateX(0); } to { transform:translateX(-190%); } }
.sg-anime-catalog-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:18px 12px; align-items:start; }
.sg-anime-catalog .skeleton-grid { min-height:620px; }
.sg-anime-catalog .catalog-skeleton { display:grid; gap:7px; }
.sg-anime-catalog .catalog-skeleton i { aspect-ratio:2/3; border-radius:10px; background:linear-gradient(100deg,#000000 20%,#000000 36%,#000000 52%); background-size:220% 100%; animation:anime-shimmer 1.25s linear infinite; }
.sg-anime-catalog .catalog-skeleton span, .sg-anime-catalog .catalog-skeleton small { height:9px; border-radius:5px; background:#000000; }
.sg-anime-catalog .catalog-skeleton small { width:62%; height:7px; }
@keyframes anime-shimmer { to { background-position:-220% 0; } }
.sg-anime-catalog-empty { min-height:46vh; display:grid; place-items:center; align-content:center; gap:8px; text-align:center; color:var(--oscar-muted); }
.sg-anime-catalog-empty h2 { margin:5px 0 0; color:var(--oscar-text); font-size:1rem; }
.sg-anime-catalog-empty p { max-width:430px; margin:0; font-size:.72rem; line-height:1.6; }
.sg-anime-catalog-empty button, .sg-anime-catalog-warning button { margin-top:4px; padding:8px 15px; border:1px solid var(--accent); border-radius:9px; background:#000000; color:var(--accent); font:inherit; font-size:.7rem; font-weight:800; }
.sg-anime-catalog-warning { margin:-6px 0 12px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--accent); border-radius:9px; background:rgba(0,0,0,.13); color:var(--accent); font-size:.65rem; }
.sg-anime-catalog-warning button { margin:0; padding:5px 10px; }
.sg-anime-catalog-tail { min-height:56px; display:grid; place-items:center; }
.sg-anime-catalog .tail-loading, .sg-anime-catalog .tail-complete { display:flex; align-items:center; gap:8px; color:var(--oscar-muted); font-size:.65rem; }
.sg-anime-catalog .tail-loading i { width:15px; height:15px; border:2px solid var(--oscar-border); border-top-color:var(--accent); border-radius:50%; animation:anime-spin .7s linear infinite; }
@keyframes anime-spin { to { transform:rotate(360deg); } }
.sg-anime-catalog .infinite-sentinel { width:100%; height:2px; display:block; }
@media (max-width: 1180px) { .sg-anime-catalog-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width: 940px) { .sg-anime-catalog-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width: 720px) {
.sg-anime-catalog { padding-inline:12px; }
.sg-anime-catalog-intro { margin:15px 0 12px; align-items:center; }
.sg-anime-catalog-intro p { font-size:.7rem; }
.sg-anime-catalog-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px 9px; }
.sg-anime-catalog .studio-tile { flex-basis:102px; }
}
@media (max-width: 560px) {
.sg-anime-catalog { padding-top:calc(var(--safe-top,0px) + 6px); padding-bottom:calc(var(--bottom-nav-h,54px) + var(--safe-bottom,0px) + 16px); }
.sg-anime-catalog-intro { margin-top:12px; }
.sg-anime-catalog .eyebrow { font-size:.52rem; }
.sg-anime-catalog-intro h1 { font-size:1.42rem; }
.sg-anime-catalog-intro p { max-width:270px; margin-top:5px; font-size:.61rem; line-height:1.5; }
.sg-anime-catalog-studios { margin-bottom:11px; }
.sg-anime-catalog .section-heading h2 { font-size:.87rem; }
.sg-anime-catalog .studio-strip { gap:7px; }
.sg-anime-catalog .studio-tile { flex-basis:89px; padding:6px; border-radius:8px; }
.sg-anime-catalog .studio-logo { height:33px; }
.sg-anime-catalog-tools { margin-bottom:14px; padding-top:7px; }
.sg-anime-catalog .search-box { min-height:40px; }
.sg-anime-catalog .filter-pill { min-width:105px; height:36px; }
.sg-anime-catalog .filter-pill select { max-width:100px; font-size:.62rem; }
.sg-anime-catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 8px; }
}
@media (max-width: 360px) {
.sg-anime-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 10px; }
}
@media (prefers-reduced-motion: reduce) {
.sg-anime-catalog .catalog-progress i, .sg-anime-catalog .catalog-skeleton i, .sg-anime-catalog .tail-loading i { animation:none !important; }
}
/* Final freeze — premium shared identity + true edge-to-edge catalog canvas. */
.sg-anime-catalog {
width: 100vw !important;
max-width: none !important;
margin-inline: calc(50% - 50vw) !important;
padding-inline: 0 !important;
background: var(--sgn-dark-gradient, linear-gradient(180deg,#03040a,#000 58%,#020207)) !important;
}
.sg-anime-catalog-intro,
.sg-anime-catalog-studios > .section-heading,
.sg-anime-catalog-tools,
.sg-anime-catalog-warning,
.sg-anime-catalog-tail {
padding-right: max(clamp(12px,2.4vw,34px), var(--safe-right,0px)) !important;
padding-left: max(clamp(12px,2.4vw,34px), var(--safe-left,0px)) !important;
}
.sg-anime-catalog-studios {
width: 100%;
margin-inline: 0 !important;
}
.sg-anime-catalog .studio-strip {
width: 100%;
margin-inline: 0 !important;
padding-inline: 0 !important;
}
.sg-anime-catalog .studio-tile {
border-color: var(--sgn-border-soft,rgba(255,255,255,.1)) !important;
border-radius: var(--sgn-radius-card,14px) !important;
background: var(--sgn-card-gradient,linear-gradient(145deg,rgba(21,22,34,.92),rgba(6,7,13,.96))) !important;
box-shadow: var(--sgn-shadow-card,0 14px 34px rgba(0,0,0,.3));
backdrop-filter: blur(var(--sgn-blur,18px)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--sgn-blur,18px)) saturate(1.08);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sg-anime-catalog .studio-tile:is(:hover,:focus-visible,.active) {
border-color: var(--sgn-border-accent,rgba(155,77,255,.7)) !important;
box-shadow: var(--sgn-shadow-neon,0 0 26px rgba(155,77,255,.2)), var(--sgn-shadow-card,0 14px 34px rgba(0,0,0,.3));
transform: translateY(-2px);
outline: none;
}
.sg-anime-catalog-tools {
background: var(--sgn-glass-strong,rgba(7,8,16,.84)) !important;
border-block: 1px solid var(--sgn-border-soft,rgba(255,255,255,.1));
backdrop-filter: blur(var(--sgn-blur,18px)) saturate(1.12);
-webkit-backdrop-filter: blur(var(--sgn-blur,18px)) saturate(1.12);
}
.sg-anime-catalog .sg-anime-commercial-grid,
.sg-anime-catalog-grid {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
}
.sg-anime-catalog-warning {
margin-inline: 0 !important;
border-radius: 0 !important;
border-color: var(--sgn-border-accent,rgba(155,77,255,.55)) !important;
background: var(--sgn-glass,rgba(11,12,22,.68)) !important;
}
@media (max-width:720px) {
.sg-anime-catalog { padding-inline:0 !important; }
.sg-anime-catalog-intro,
.sg-anime-catalog-studios > .section-heading,
.sg-anime-catalog-tools,
.sg-anime-catalog-warning,
.sg-anime-catalog-tail {
padding-right:max(12px,var(--safe-right,0px)) !important;
padding-left:max(12px,var(--safe-left,0px)) !important;
}
}
/* SOURCE: Components/Shared/AnimeHomeExperience.razor.css | WEB SCOPE: .sg-anime-pro-home */
.sg-anime-pro-home {
min-height: 100vh;
padding: max(var(--safe-top), 8px) clamp(12px, 2.1vw, 28px) calc(var(--bottom-nav-h) + var(--safe-bottom) + 24px);
overflow-x: hidden;
background: #000000;
color: var(--oscar-text);
}
.sg-anime-pro-home > * {
width: 100%;
max-width: none;
margin-inline: 0;
}
.sg-anime-pro-home .sg-anime-pro-gateway {
position: relative;
margin-top: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
align-items: center;
direction: ltr;
}
.sg-anime-pro-home .sg-anime-pro-gateway > button {
position: relative;
min-height: 76px;
padding: 10px 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
border: 1px solid var(--oscar-border);
background: #000000;
color: var(--oscar-text);
font: inherit;
cursor: pointer;
direction: rtl;
-webkit-tap-highlight-color: transparent;
}
.sg-anime-pro-home .sg-anime-pro-gateway > button.series {
border-radius: 15px 4px 4px 15px;
border-color: var(--accent);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 22px rgba(0,0,0,.08);
background: linear-gradient(90deg, rgba(0,0,0,.18), #000000 64%);
}
.sg-anime-pro-home .sg-anime-pro-gateway > button.movies { border-radius: 4px 15px 15px 4px; }
.sg-anime-pro-home .sg-anime-pro-gateway .gate-icon { color: var(--accent); }
.sg-anime-pro-home .sg-anime-pro-gateway button span:last-child { display: grid; gap: 3px; text-align: right; }
.sg-anime-pro-home .sg-anime-pro-gateway b { font-size: .98rem; font-weight: 900; }
.sg-anime-pro-home .sg-anime-pro-gateway small { color: var(--oscar-muted); font-size: .67rem; }
.sg-anime-pro-home .sg-anime-pro-gateway .diamond {
position: relative;
z-index: 3;
width: 32px;
height: 32px;
justify-self: center;
display: grid;
place-items: center;
transform: rotate(45deg);
border: 1px solid var(--accent);
background: #000000;
box-shadow: 0 0 18px rgba(0,0,0,.65);
}
.sg-anime-pro-home .sg-anime-pro-gateway .diamond span {
width: 12px;
height: 12px;
border: 1px solid var(--oscar-border);
background: #000000;
}
.sg-anime-pro-home .sg-anime-pro-gateway button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sg-anime-pro-home .sg-anime-pro-gateway button:active { opacity: .84; }
.sg-anime-pro-home-body {
margin-top: 12px;
display: grid;
gap: 14px;
}
.sg-anime-pro-home .sg-anime-pro-hero {
position: relative;
min-height: 240px;
aspect-ratio: 5 / 1;
overflow: hidden;
border: 1px solid var(--accent);
border-radius: 13px;
background: #000000;
}
.sg-anime-pro-home .sg-anime-pro-hero > img,
.sg-anime-pro-home .sg-anime-pro-hero > .nova-fast-image {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center 28%;
}
.sg-anime-pro-home .hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.79) 31%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.08) 100%),
linear-gradient(0deg, rgba(0,0,0,.58), transparent 44%);
}
.sg-anime-pro-home .hero-copy {
position: absolute;
z-index: 2;
left: clamp(18px, 3vw, 42px);
top: 50%;
width: min(43%, 510px);
transform: translateY(-50%);
display: grid;
justify-items: start;
gap: 8px;
text-align: right;
}
.sg-anime-pro-home .hero-copy .eyebrow {
color: var(--accent);
font-size: .72rem;
font-weight: 850;
}
.sg-anime-pro-home .hero-copy h1 {
max-width: 100%;
margin: 0;
color: var(--oscar-text);
font-size: clamp(1.7rem, 3vw, 3.1rem);
line-height: 1.04;
font-weight: 950;
text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.sg-anime-pro-home .hero-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--oscar-text); font-size: .69rem; }
.sg-anime-pro-home .hero-meta span { padding: 3px 7px; border: 1px solid var(--oscar-border); border-radius: 6px; background: rgba(0,0,0,.32); }
.sg-anime-pro-home .hero-copy p { max-width: 470px; margin: 0; color: var(--oscar-text); font-size: .76rem; line-height: 1.62; }
.sg-anime-pro-home .hero-actions { display: flex; gap: 8px; margin-top: 4px; }
.sg-anime-pro-home .hero-actions button {
min-height: 38px;
padding: 7px 14px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 8px;
font: inherit;
font-size: .72rem;
font-weight: 850;
cursor: pointer;
}
.sg-anime-pro-home .hero-actions .primary { border: 1px solid var(--accent); background: #000000; color: var(--oscar-text); }
.sg-anime-pro-home .hero-actions .secondary { border: 1px solid var(--oscar-border); background: rgba(0,0,0,.74); color: var(--oscar-text); }
.sg-anime-pro-home .hero-actions .secondary.active { border-color: var(--accent); color: var(--accent); }
.sg-anime-pro-home .hero-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sg-anime-pro-home .hero-dots {
position: absolute;
z-index: 4;
left: 50%;
bottom: 9px;
transform: translateX(-50%);
display: flex;
gap: 6px;
}
.sg-anime-pro-home .hero-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(0,0,0,.44); }
.sg-anime-pro-home .hero-dots button.active { width: 20px; background: #000000; }
.sg-anime-pro-home .sg-anime-pro-offline {
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid var(--accent);
border-radius: 9px;
background: #000000;
color: var(--accent);
font-size: .68rem;
}
.sg-anime-pro-home .sg-anime-pro-section { min-width: 0; }
.sg-anime-pro-home .sg-anime-pro-section > header {
min-height: 31px;
margin-bottom: 7px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 12px;
}
.sg-anime-pro-home .sg-anime-pro-section h2 { margin: 0; color: var(--oscar-text); font-size: clamp(1rem, 1.45vw, 1.26rem); line-height: 1.2; font-weight: 900; }
.sg-anime-pro-home .sg-anime-pro-section > header > button { padding: 3px 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: .68rem; cursor: pointer; }
.sg-anime-pro-home .desktop-title { display: inline; }
.sg-anime-pro-home .mobile-title { display: none; }
.sg-anime-pro-home .studio-rail,
.sg-anime-pro-home .poster-rail,
.sg-anime-pro-home .episode-rail {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scrollbar-width: none;
scroll-snap-type: inline proximity;
}
.sg-anime-pro-home .studio-rail::-webkit-scrollbar,
.sg-anime-pro-home .poster-rail::-webkit-scrollbar,
.sg-anime-pro-home .episode-rail::-webkit-scrollbar { display: none; }
.sg-anime-pro-home .studio-rail > button {
flex: 0 0 clamp(126px, 13vw, 176px);
min-width: 0;
min-height: 70px;
padding: 7px 10px 6px;
display: grid;
grid-template-rows: 36px auto;
place-items: center;
gap: 4px;
border: 1px solid var(--oscar-border);
border-radius: 9px;
background: #000000;
color: var(--oscar-text);
font: inherit;
cursor: pointer;
scroll-snap-align: start;
}
.sg-anime-pro-home .studio-logo { width: 100%; height: 36px; display: grid; place-items: center; overflow: hidden; }
.sg-anime-pro-home .studio-logo img,
.sg-anime-pro-home .studio-logo .nova-fast-image { width: 100% !important; height: 100% !important; object-fit: contain; }
.sg-anime-pro-home .studio-logo b { font-size: 1rem; color: var(--accent); }
.sg-anime-pro-home .studio-rail small { width: 100%; overflow: hidden; color: var(--oscar-muted); font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.sg-anime-pro-home .episode-rail > * { flex: 0 0 clamp(188px, 20vw, 242px); scroll-snap-align: start; }
.sg-anime-pro-home .poster-rail > * { flex: 0 0 clamp(126px, 11.8vw, 166px); scroll-snap-align: start; }
.sg-anime-pro-home .sg-anime-pro-midgrid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); gap: 14px; align-items: start; }
.sg-anime-pro-home .sg-anime-pro-ratings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sg-anime-pro-home .schedule-days {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 3px;
padding: 3px;
border: 1px solid var(--oscar-border);
border-radius: 9px;
background: #000000;
}
.sg-anime-pro-home .schedule-days button { min-width: 0; min-height: 28px; padding: 4px 2px; border: 0; border-radius: 7px; background: transparent; color: var(--oscar-muted); font: inherit; font-size: .58rem; cursor: pointer; }
.sg-anime-pro-home .schedule-days button.active { background: #000000; color: var(--oscar-text); font-weight: 850; }
.sg-anime-pro-home .schedule-list {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.sg-anime-pro-home .schedule-item {
position: relative;
min-width: 0;
min-height: 0;
padding: 0;
display: grid;
grid-template-rows: auto auto;
align-content: start;
overflow: hidden;
border: 1px solid var(--oscar-border);
border-radius: 10px;
background: #000000;
color: var(--oscar-text);
text-align: right;
font: inherit;
cursor: pointer;
}
.sg-anime-pro-home .schedule-item > img,
.sg-anime-pro-home .schedule-item > .nova-fast-image {
width: 100% !important;
height: auto !important;
aspect-ratio: 2 / 3;
border-radius: 0;
object-fit: cover;
}
.sg-anime-pro-home .schedule-item > span {
min-width: 0;
min-height: 58px;
padding: 8px 9px 10px;
display: grid;
align-content: center;
gap: 3px;
}
.sg-anime-pro-home .schedule-item b { overflow: hidden; font-size: .68rem; white-space: nowrap; text-overflow: ellipsis; }
.sg-anime-pro-home .schedule-item small { overflow: hidden; color: var(--oscar-muted); font-size: .55rem; white-space: nowrap; text-overflow: ellipsis; }
.sg-anime-pro-home .schedule-item time {
position: absolute;
top: 7px;
inset-inline-end: 7px;
z-index: 2;
padding: 4px 7px;
border: 1px solid var(--oscar-border);
border-radius: 7px;
background: #000000;
color: var(--oscar-text);
font-size: .62rem;
font-weight: 850;
direction: ltr;
}
.sg-anime-pro-home .schedule-item time.estimated { color: var(--accent); font-size: .56rem; }
.sg-anime-pro-home .schedule-empty { min-height: 91px; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--oscar-border); border-radius: 9px; color: var(--oscar-muted); font-size: .64rem; }
.sg-anime-pro-home .schedule-loading { min-height: 91px; margin-top: 6px; display: grid; gap: 5px; }
.sg-anime-pro-home .schedule-loading i { min-height: 25px; border-radius: 7px; background: linear-gradient(90deg,#000000,#000000,#000000); background-size: 220% 100%; animation: animeProShimmer 1.3s linear infinite; }
.sg-anime-pro-home .continue-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sg-anime-pro-home .continue-grid > button { position: relative; min-width: 0; aspect-ratio: 3.35 / 1; padding: 0; overflow: hidden; border: 1px solid var(--oscar-border); border-radius: 9px; background: #000000; color: var(--oscar-text); font: inherit; cursor: pointer; }
.sg-anime-pro-home .continue-grid > button > img,
.sg-anime-pro-home .continue-grid > button > .nova-fast-image { width: 100% !important; height: 100% !important; object-fit: cover; }
.sg-anime-pro-home .continue-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.24)); }
.sg-anime-pro-home .continue-copy { position: absolute; z-index: 2; inset: auto 10px 9px 10px; display: grid; gap: 2px; text-align: right; }
.sg-anime-pro-home .continue-copy b, .sg-anime-pro-home .continue-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sg-anime-pro-home .continue-copy b { font-size: .66rem; }
.sg-anime-pro-home .continue-copy small { color: var(--oscar-muted); font-size: .52rem; }
.sg-anime-pro-home .continue-progress { position: absolute; z-index: 3; right: 7px; left: 7px; bottom: 3px; height: 3px; border-radius: 99px; background: rgba(0,0,0,.16); overflow: hidden; }
.sg-anime-pro-home .continue-progress i { display: block; height: 100%; border-radius: inherit; background: #000000; }
.sg-anime-pro-home-skeleton { margin-top: 12px; display: grid; gap: 12px; }
.sg-anime-pro-home-skeleton i { display: block; border-radius: 10px; background: linear-gradient(90deg,#000000 0%,#000000 50%,#000000 100%); background-size: 220% 100%; animation: animeProShimmer 1.3s linear infinite; }
.sg-anime-pro-home-skeleton .hero { min-height: 230px; aspect-ratio: 5 / 1; }
.sg-anime-pro-home-skeleton .line { width: 180px; height: 22px; }
.sg-anime-pro-home-skeleton .cards { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.sg-anime-pro-home-skeleton .cards i { aspect-ratio: 2 / 3; }
.sg-anime-pro-home .sg-anime-pro-error { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--oscar-muted); text-align: center; }
.sg-anime-pro-home .sg-anime-pro-error strong { color: var(--oscar-text); font-size: 1rem; }
.sg-anime-pro-home .sg-anime-pro-error small { max-width: 480px; }
.sg-anime-pro-home .sg-anime-pro-error button { margin-top: 5px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: 8px; background: #000000; color: var(--oscar-text); font: inherit; }
@keyframes animeProShimmer { to { background-position: -220% 0; } }
@media (max-width: 860px) {
.sg-anime-pro-home { padding-inline: 11px; padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 18px); }
.sg-anime-pro-home .sg-anime-pro-gateway { margin-top: 7px; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); }
.sg-anime-pro-home .sg-anime-pro-gateway > button { min-height: 61px; padding: 7px 8px; gap: 7px; }
.sg-anime-pro-home .sg-anime-pro-gateway > button.series { border-radius: 11px 3px 3px 11px; }
.sg-anime-pro-home .sg-anime-pro-gateway > button.movies { border-radius: 3px 11px 11px 3px; }
.sg-anime-pro-home .sg-anime-pro-gateway .gate-icon { display: none; }
.sg-anime-pro-home .sg-anime-pro-gateway b { font-size: .75rem; }
.sg-anime-pro-home .sg-anime-pro-gateway small { max-width: 130px; font-size: .50rem; line-height: 1.25; }
.sg-anime-pro-home .sg-anime-pro-gateway .diamond { width: 24px; height: 24px; }
.sg-anime-pro-home .sg-anime-pro-gateway .diamond span { width: 9px; height: 9px; }
.sg-anime-pro-home-body { display: flex; flex-direction: column; gap: 12px; }
.sg-anime-pro-home .sg-anime-pro-hero { order: 1; min-height: 176px; aspect-ratio: 2.38 / 1; border-radius: 10px; }
.sg-anime-pro-home .sg-anime-pro-offline { order: 2; }
.sg-anime-pro-home .continue { display: none; }
.sg-anime-pro-home .studios { order: 3; }
.sg-anime-pro-home .sg-anime-pro-midgrid { display: contents; }
.sg-anime-pro-home .episodes { order: 4; }
.sg-anime-pro-home .latest { order: 5; }
.sg-anime-pro-home .sg-anime-pro-ratings-grid { display: contents; }
.sg-anime-pro-home .top-series { order: 6; }
.sg-anime-pro-home .schedule { order: 7; }
.sg-anime-pro-home .top-movies { order: 8; }
.sg-anime-pro-home .hero-shade { background: linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.57) 48%,rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.52),transparent 50%); }
.sg-anime-pro-home .hero-copy { left: 13px; top: 50%; width: 57%; gap: 5px; }
.sg-anime-pro-home .hero-copy .eyebrow { font-size: .53rem; }
.sg-anime-pro-home .hero-copy h1 { font-size: clamp(1.12rem, 6vw, 1.55rem); line-height: 1.06; }
.sg-anime-pro-home .hero-copy p { display: -webkit-box; overflow: hidden; font-size: .55rem; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sg-anime-pro-home .hero-meta { gap: 4px; font-size: .49rem; }
.sg-anime-pro-home .hero-meta span { padding: 2px 5px; }
.sg-anime-pro-home .hero-actions button { min-height: 30px; padding: 5px 8px; border-radius: 6px; font-size: .54rem; }
.sg-anime-pro-home .hero-actions .secondary span { display: none; }
.sg-anime-pro-home .hero-dots { bottom: 6px; gap: 4px; }
.sg-anime-pro-home .hero-dots button { width: 5px; height: 5px; }
.sg-anime-pro-home .hero-dots button.active { width: 14px; }
.sg-anime-pro-home .sg-anime-pro-section > header { min-height: 26px; margin-bottom: 5px; }
.sg-anime-pro-home .sg-anime-pro-section h2 { font-size: .96rem; }
.sg-anime-pro-home .sg-anime-pro-section > header > button { font-size: .59rem; }
.sg-anime-pro-home .desktop-title { display: none; }
.sg-anime-pro-home .mobile-title { display: inline; }
.sg-anime-pro-home .studio-rail { gap: 6px; }
.sg-anime-pro-home .studio-rail > button { flex-basis: calc((100vw - 57px) / 5.5); min-height: 58px; padding: 5px 4px 4px; grid-template-rows: 31px auto; border-radius: 7px; }
.sg-anime-pro-home .studio-logo { height: 31px; }
.sg-anime-pro-home .studio-rail small { font-size: .47rem; text-align: center; }
.sg-anime-pro-home .episode-rail { gap: 7px; }
.sg-anime-pro-home .episode-rail > * { flex-basis: calc((100vw - 39px) / 2.25); }
.sg-anime-pro-home .poster-rail { gap: 7px; }
.sg-anime-pro-home .poster-rail > * { flex-basis: calc((100vw - 43px) / 3.25); }
.sg-anime-pro-home .top-series .poster-rail > *, .sg-anime-pro-home .top-movies .poster-rail > * { flex-basis: calc((100vw - 46px) / 3.55); }
.sg-anime-pro-home .schedule-days { gap: 2px; padding: 2px; }
.sg-anime-pro-home .schedule-days button { min-height: 25px; font-size: .47rem; }
.sg-anime-pro-home .schedule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.sg-anime-pro-home .schedule-item > span { min-height: 52px; padding: 7px 8px 9px; }
.sg-anime-pro-home .schedule-item b { font-size: .60rem; }
.sg-anime-pro-home .schedule-item small { font-size: .49rem; }
.sg-anime-pro-home .schedule-item time { top: 6px; inset-inline-end: 6px; padding: 3px 6px; font-size: .54rem; }
.sg-anime-pro-home .schedule-empty, .sg-anime-pro-home .schedule-loading { min-height: 60px; }
.sg-anime-pro-home-skeleton .hero { min-height: 176px; aspect-ratio: 2.38 / 1; }
.sg-anime-pro-home-skeleton .cards { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
}
@media (max-width: 390px) {
.sg-anime-pro-home .hero-copy { width: 62%; }
.sg-anime-pro-home .hero-copy p { display: none; }
.sg-anime-pro-home .studio-rail > button { flex-basis: calc((100vw - 48px) / 4.7); }
.sg-anime-pro-home .poster-rail > * { flex-basis: calc((100vw - 36px) / 3.05); }
}
@media (prefers-reduced-motion: reduce) {
.sg-anime-pro-home *, .sg-anime-pro-home *::before, .sg-anime-pro-home *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Final freeze — legacy/alternate anime hub follows the same full-canvas premium contract. */
.sg-anime-pro-home {
width:100vw !important;
max-width:none !important;
margin-inline:calc(50% - 50vw) !important;
padding-right:0 !important;
padding-left:0 !important;
background:var(--sgn-dark-gradient,linear-gradient(180deg,#03040a,#000 58%,#020207)) !important;
}
.sg-anime-pro-home .sg-anime-pro-gateway,
.sg-anime-pro-home .sg-anime-pro-offline,
.sg-anime-pro-home .sg-anime-pro-section > header {
margin-right:max(12px,var(--safe-right,0px));
margin-left:max(12px,var(--safe-left,0px));
}
.sg-anime-pro-home .studio-rail,
.sg-anime-pro-home .episode-rail,
.sg-anime-pro-home .poster-rail,
.sg-anime-pro-home .schedule-list,
.sg-anime-pro-home .continue-grid {
padding-inline:0 !important;
margin-inline:0 !important;
}
.sg-anime-pro-home .studio-rail > button,
.sg-anime-pro-home .schedule-item,
.sg-anime-pro-home .schedule-days {
border-color:var(--sgn-border-soft,rgba(255,255,255,.1)) !important;
background:var(--sgn-card-gradient,linear-gradient(145deg,rgba(21,22,34,.92),rgba(6,7,13,.96))) !important;
box-shadow:var(--sgn-shadow-card,0 14px 34px rgba(0,0,0,.3));
backdrop-filter:blur(var(--sgn-blur,18px)) saturate(1.08);
-webkit-backdrop-filter:blur(var(--sgn-blur,18px)) saturate(1.08);
}
.sg-anime-pro-home .studio-rail > button:is(:hover,:focus-visible),.sg-anime-pro-home .schedule-item:is(:hover,:focus-visible),.sg-anime-pro-home .schedule-days button.active {
border-color:var(--sgn-border-accent,rgba(155,77,255,.7)) !important;
box-shadow:var(--sgn-shadow-neon,0 0 26px rgba(155,77,255,.2)),var(--sgn-shadow-card,0 14px 34px rgba(0,0,0,.3));
outline:none;
}
.sg-anime-pro-home .schedule-days button.active {
background:var(--sgn-neon-button-gradient,linear-gradient(135deg,rgba(155,77,255,.28),rgba(20,215,255,.14))) !important;
}
/* SOURCE: Components/Shared/AnimeMediaGrid.razor.css | WEB SCOPE: .sg-anime-commercial-grid */
.sg-anime-commercial-grid {
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:18px 12px;
align-items:start;
}
@media (max-width:1180px) { .sg-anime-commercial-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:940px) { .sg-anime-commercial-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:720px) { .sg-anime-commercial-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px 9px; } }
@media (max-width:560px) { .sg-anime-commercial-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 8px; } }
@media (max-width:360px) { .sg-anime-commercial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 10px; } }
/* SOURCE: Components/Shared/AnimeNativeMediaCard.razor.css | WEB SCOPE: .sg-anime-pro-card */
.sg-anime-pro-card {
width: 100%;
min-width: 0;
padding: 0;
display: grid;
gap: 6px;
border: 0;
background: transparent;
color: var(--oscar-text);
text-align: right;
font: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
content-visibility: auto;
contain-intrinsic-size: 180px 280px;
}
.sg-anime-pro-card .art {
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--oscar-border);
background: #000000;
box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.sg-anime-pro-card.poster .art { aspect-ratio: 2 / 3; border-radius: 10px; }
.sg-anime-pro-card.episode .art { aspect-ratio: 16 / 9; border-radius: 10px; }
.sg-anime-pro-card .art img,
.sg-anime-pro-card .art .nova-fast-image {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
}
.sg-anime-pro-card .shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.03) 42%, rgba(0,0,0,.78) 100%);
pointer-events: none;
}
.sg-anime-pro-card .badges {
position: absolute;
top: 6px;
right: 6px;
left: 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
direction: ltr;
pointer-events: none;
}
.sg-anime-pro-card .badges > span,
.sg-anime-pro-card .badge-stack > span,
.sg-anime-pro-card .new {
min-height: 19px;
padding: 3px 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: .58rem;
line-height: 1;
font-weight: 850;
white-space: nowrap;
}
.sg-anime-pro-card .score { color: var(--accent); background: rgba(0,0,0,.84); }
.sg-anime-pro-card .format { color: var(--accent); background: rgba(0,0,0,.86); }
.sg-anime-pro-card .badge-stack {
display: inline-flex;
align-items: center;
gap: 4px;
direction: rtl;
}
.sg-anime-pro-card .age {
color: var(--oscar-text);
background: rgba(0,0,0,.86);
border: 1px solid var(--oscar-border);
}
.sg-anime-pro-card .rank {
position: absolute;
right: 7px;
bottom: 4px;
z-index: 3;
color: var(--oscar-text);
font-size: 1.45rem;
line-height: 1;
font-weight: 950;
text-shadow: 0 3px 12px #000000;
}
.sg-anime-pro-card .play {
position: absolute;
inset: 50% auto auto 50%;
z-index: 3;
width: 36px;
height: 36px;
display: grid;
place-items: center;
transform: translate(-50%, -50%);
border: 1px solid var(--oscar-border);
border-radius: 50%;
background: rgba(0,0,0,.52);
color: var(--oscar-text);
}
.sg-anime-pro-card .new {
position: absolute;
top: 7px;
left: 7px;
z-index: 4;
color: var(--oscar-text);
background: #000000;
}
.sg-anime-pro-card .copy {
min-width: 0;
display: grid;
gap: 2px;
padding-inline: 1px;
}
.sg-anime-pro-card .copy b {
overflow: hidden;
color: var(--oscar-text);
font-size: .76rem;
line-height: 1.34;
font-weight: 800;
white-space: nowrap;
text-overflow: ellipsis;
}
.sg-anime-pro-card .copy small {
overflow: hidden;
color: var(--oscar-muted);
font-size: .61rem;
line-height: 1.25;
white-space: nowrap;
text-overflow: ellipsis;
}
.sg-anime-pro-card:active .art { transform: scale(.985); }
.sg-anime-pro-card:focus-visible { outline: none; }
.sg-anime-pro-card:focus-visible .art { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover:hover) and (pointer:fine) {
.sg-anime-pro-card .art { transition: border-color 150ms ease, transform 150ms ease; }
.sg-anime-pro-card:hover .art { border-color: var(--accent); transform: translateY(-2px); }
}
@media (max-width: 560px) {
.sg-anime-pro-card { gap: 4px; }
.sg-anime-pro-card.poster .art,
.sg-anime-pro-card.episode .art { border-radius: 8px; }
.sg-anime-pro-card .copy b { font-size: .68rem; }
.sg-anime-pro-card .copy small { font-size: .54rem; }
.sg-anime-pro-card .badges > span, .sg-anime-pro-card .badge-stack > span, .sg-anime-pro-card .new { min-height: 17px; padding: 3px 5px; font-size: .52rem; }
.sg-anime-pro-card .play { width: 31px; height: 31px; }
.sg-anime-pro-card .rank { font-size: 1.18rem; }
}
/* SOURCE: Components/Shared/AnimeScheduleExperience.razor.css | WEB SCOPE: .sg-anime-schedule */
.sg-anime-schedule {
width:100vw;
max-width:none;
min-height:100dvh;
margin-inline:calc(50% - 50vw);
padding:calc(var(--nova-app-header-h,58px) + var(--safe-top,0px) + 10px) 0 calc(var(--bottom-nav-h,78px) + var(--safe-bottom,0px) + 30px);
overflow-x:clip;
background:radial-gradient(circle at 86% 8%,rgba(155,77,255,.08),transparent 25rem),radial-gradient(circle at 8% 65%,rgba(20,215,255,.05),transparent 28rem),#000;
color:var(--sgn-white,var(--oscar-text));
}
.sg-anime-schedule .schedule-intro { margin:24px 0 20px; padding:0 max(14px,var(--safe-right,0px)) 0 max(14px,var(--safe-left,0px)); display:flex; align-items:end; justify-content:space-between; gap:20px; }
.sg-anime-schedule .schedule-intro span { color:var(--sgn-cyan); font-size:.62rem; font-weight:900; letter-spacing:.14em; }
.sg-anime-schedule .schedule-intro h1 { margin:6px 0 0; font-size:clamp(1.65rem,3vw,2.35rem); font-weight:950; }
.sg-anime-schedule .schedule-intro p { max-width:670px; margin:8px 0 0; color:var(--sgn-text-soft); font-size:.78rem; line-height:1.65; }
.sg-anime-schedule .back-home { flex:0 0 auto; min-height:40px; padding:0 13px; border:1px solid var(--sgn-border-accent); border-radius:10px; background:var(--sgn-glass); color:var(--sgn-cyan); box-shadow:var(--sgn-shadow-neon); font:inherit; font-size:.68rem; font-weight:850; }
.sg-anime-schedule .schedule-days { width:100%; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:18px; }
.sg-anime-schedule .schedule-days button { position:relative; min-width:0; min-height:66px; padding:8px 5px; display:grid; place-items:center; align-content:center; gap:2px; border:1px solid var(--sgn-border-soft); border-radius:12px; background:var(--sgn-glass); color:var(--sgn-text-soft); box-shadow:var(--sgn-shadow-card); font:inherit; cursor:pointer; }
.sg-anime-schedule .schedule-days button b { font-size:.92rem; }.sg-anime-schedule .schedule-days button small { font-size:.58rem; }
.sg-anime-schedule .schedule-days button em { position:absolute; top:5px; left:6px; min-width:17px; height:17px; display:grid; place-items:center; border-radius:9px; background:rgba(7,9,18,.86); color:var(--sgn-cyan); font-size:.5rem; font-style:normal; }
.sg-anime-schedule .schedule-days button.active { border-color:var(--sgn-border-accent); background:var(--sgn-glass-strong); color:var(--sgn-white); box-shadow:var(--sgn-shadow-neon); }
.sg-anime-schedule .schedule-panel { margin:0; padding:16px 0 0; border-block:1px solid var(--sgn-border-soft); border-radius:0; background:linear-gradient(180deg,rgba(155,77,255,.035),transparent 24%); }
.sg-anime-schedule .schedule-panel-head { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:0 max(14px,var(--safe-right,0px)) 12px max(14px,var(--safe-left,0px)); }
.sg-anime-schedule .schedule-panel-head small { color:var(--sgn-text-muted); font-size:.6rem; }.sg-anime-schedule .schedule-panel-head h2 { margin:2px 0 0; font-size:1.2rem; }.sg-anime-schedule .schedule-panel-head>span { color:var(--sgn-text-soft); font-size:.65rem; }
.sg-anime-schedule .schedule-list { width:100%; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; align-items:start; }
.sg-anime-schedule .schedule-item { position:relative; width:100%; min-width:0; min-height:0; padding:0; display:flex; flex-direction:column; align-items:stretch; overflow:hidden; border:1px solid var(--sgn-border-soft); border-radius:var(--sgn-radius-card); background:var(--sgn-card-gradient); color:var(--sgn-white); box-shadow:var(--sgn-shadow-card); text-align:right; font:inherit; cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.sg-anime-schedule .schedule-item:hover,.sg-anime-schedule .schedule-item:focus-visible { transform:translateY(-2px); border-color:var(--sgn-border-accent); box-shadow:var(--sgn-shadow-neon); outline:none; }
.sg-anime-schedule .schedule-item.estimated { border-color:rgba(240,74,216,.22); }
.sg-anime-schedule .schedule-art { width:100%; height:auto; aspect-ratio:2/3; overflow:hidden; background:var(--sgn-surface-2); }
.sg-anime-schedule .schedule-art img,.sg-anime-schedule .schedule-art .nova-fast-image { width:100%!important; height:100%!important; object-fit:cover!important; }
.sg-anime-schedule .schedule-copy { min-width:0; padding:9px 10px 7px; display:grid; gap:5px; }.sg-anime-schedule .schedule-copy b { overflow:hidden; font-size:.76rem; white-space:nowrap; text-overflow:ellipsis; }.sg-anime-schedule .schedule-copy small { overflow:hidden; color:var(--sgn-text-muted); font-size:.60rem; white-space:nowrap; text-overflow:ellipsis; }
.sg-anime-schedule .schedule-copy em { width:max-content; max-width:100%; padding:3px 6px; overflow:hidden; border:1px solid var(--sgn-border-soft); border-radius:6px; background:rgba(7,9,18,.72); color:var(--sgn-cyan); font-size:.51rem; font-style:normal; white-space:nowrap; text-overflow:ellipsis; }
.sg-anime-schedule .schedule-time { margin-top:auto; padding:7px 10px 9px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--sgn-border-soft); direction:ltr; }.sg-anime-schedule .schedule-time b { color:var(--sgn-white); font-size:.72rem; }.sg-anime-schedule .schedule-time small { color:var(--sgn-text-muted); font-size:.54rem; }
.sg-anime-schedule .day-empty,.sg-anime-schedule .schedule-empty { min-height:230px; display:grid; place-items:center; align-content:center; gap:8px; color:var(--sgn-text-soft); text-align:center; }.sg-anime-schedule .day-empty { min-height:150px; grid-auto-flow:column; }.sg-anime-schedule .schedule-empty h2 { margin:4px 0 0; color:var(--sgn-white); font-size:1rem; }.sg-anime-schedule .schedule-empty p { max-width:480px; margin:0; color:var(--sgn-text-muted); font-size:.7rem; line-height:1.6; }.sg-anime-schedule .schedule-empty button { min-height:40px; margin-top:4px; padding:0 15px; border:1px solid var(--sgn-border-accent); border-radius:10px; background:var(--sgn-glass); color:var(--sgn-cyan); box-shadow:var(--sgn-shadow-neon); font:inherit; }
.sg-anime-schedule .schedule-skeleton { display:grid; gap:7px; }.sg-anime-schedule .schedule-skeleton i { height:94px; border-radius:var(--sgn-radius-card); background:linear-gradient(100deg,rgba(17,20,35,.62) 20%,rgba(44,48,75,.72) 37%,rgba(17,20,35,.62) 54%); background-size:220% 100%; animation:schedule-shimmer 1.2s linear infinite; }
.sg-anime-schedule .schedule-offline { margin-top:10px; padding:8px max(12px,var(--safe-right,0px)) 8px max(12px,var(--safe-left,0px)); border-block:1px solid var(--sgn-border-soft); background:linear-gradient(90deg,transparent,rgba(155,77,255,.07),transparent); color:var(--sgn-text-soft); font-size:.62rem; }
.sg-anime-schedule .schedule-trust-note { margin:12px max(12px,var(--safe-right,0px)) 0 max(12px,var(--safe-left,0px)); color:var(--sgn-text-muted); font-size:.58rem; }
@keyframes schedule-shimmer { to { background-position:-220% 0; } }
@media(max-width:1180px){.sg-anime-schedule .schedule-list{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(max-width:940px){.sg-anime-schedule .schedule-list{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:720px){.sg-anime-schedule .schedule-intro{margin:15px 0 14px;align-items:center}.sg-anime-schedule .schedule-intro p{max-width:270px;font-size:.62rem}.sg-anime-schedule .back-home{display:none}.sg-anime-schedule .schedule-days{gap:3px}.sg-anime-schedule .schedule-days button{min-height:56px;border-radius:9px}.sg-anime-schedule .schedule-days button b{font-size:.8rem}.sg-anime-schedule .schedule-days button small{font-size:.48rem}.sg-anime-schedule .schedule-panel{padding-top:9px}.sg-anime-schedule .schedule-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.sg-anime-schedule .schedule-copy{padding:8px 8px 6px}.sg-anime-schedule .schedule-copy b{font-size:.68rem}.sg-anime-schedule .schedule-copy small{font-size:.54rem}.sg-anime-schedule .schedule-time{padding:6px 8px 8px}.sg-anime-schedule .schedule-time b{font-size:.64rem}}
@media(max-width:560px){.sg-anime-schedule{padding-top:calc(var(--nova-app-header-h,58px) + var(--safe-top,0px) + 6px);padding-bottom:calc(var(--bottom-nav-h,54px) + var(--safe-bottom,0px) + 16px)}.sg-anime-schedule .schedule-intro span{font-size:.51rem}.sg-anime-schedule .schedule-intro h1{font-size:1.43rem}.sg-anime-schedule .schedule-days{overflow-x:auto;display:flex;scrollbar-width:none}.sg-anime-schedule .schedule-days::-webkit-scrollbar{display:none}.sg-anime-schedule .schedule-days button{flex:0 0 72px}.sg-anime-schedule .schedule-days button em{top:3px;left:3px;min-width:14px;height:14px;font-size:.43rem}.sg-anime-schedule .schedule-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}}
@media(max-width:360px){.sg-anime-schedule .schedule-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.sg-anime-schedule .schedule-skeleton i{animation:none}.sg-anime-schedule .schedule-item{transition:none!important}}
/* SOURCE: Components/Shared/AnimeSectionNav.razor.css | WEB SCOPE: .sg-anime-pro-nav */
.sg-anime-pro-nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
width: min(100%, 620px);
margin-inline: auto;
padding: 5px;
border: 1px solid var(--oscar-border);
border-radius: 14px;
background: #000000;
}
.sg-anime-pro-nav button {
min-width: 0;
min-height: 38px;
padding: 6px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--oscar-muted);
font: inherit;
font-size: .78rem;
font-weight: 750;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.sg-anime-pro-nav button.active {
color: var(--oscar-text);
border-color: var(--accent);
background: #000000;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.sg-anime-pro-nav button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (max-width: 560px) {
.sg-anime-pro-nav {
width: 100%;
gap: 3px;
padding: 4px;
border-radius: 12px;
}
.sg-anime-pro-nav button {
min-height: 35px;
gap: 4px;
padding-inline: 4px;
font-size: .66rem;
}
}
/* SOURCE: Components/Shared/WrestlingBrandTile.razor.css | WEB SCOPE: .wrestling-brand-tile */
.wrestling-brand-tile {
position:relative;
min-width:0;
min-height:110px;
padding:13px 14px;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-rows:58px auto;
gap:7px 10px;
overflow:hidden;
border:1px solid var(--sgn-border-soft);
border-radius:var(--sgn-radius-card);
background:var(--sgn-card-gradient);
color:var(--sgn-white,var(--oscar-text));
box-shadow:var(--sgn-shadow-card);
backdrop-filter:blur(var(--sgn-blur)) saturate(1.16);
-webkit-backdrop-filter:blur(var(--sgn-blur)) saturate(1.16);
font:inherit;
text-align:right;
cursor:pointer;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.wrestling-brand-tile::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 84% 10%,rgba(155,77,255,.14),transparent 34%),linear-gradient(120deg,rgba(20,215,255,.04),transparent 42%,rgba(240,74,216,.04)); }
.wrestling-brand-tile::after { content:""; position:absolute; right:10%; bottom:0; left:10%; height:1px; background:var(--sgn-gradient); opacity:.28; }
.wrestling-brand-tile>* { position:relative; z-index:1; }
.wrestling-brand-tile .logo-wrap { grid-column:1/3; min-width:0; height:58px; display:flex; align-items:center; justify-content:center; position:relative; }
.wrestling-brand-tile .logo-wrap img,.wrestling-brand-tile .logo-wrap .nova-fast-image { max-width:88%; max-height:56px; object-fit:contain; filter:drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
.wrestling-brand-tile .logo-wrap i { position:absolute; right:10%; left:10%; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--sgn-border-accent),var(--sgn-border-cyan),transparent); }
.wrestling-brand-tile .copy { min-width:0; display:grid; gap:2px; align-content:center; }
.wrestling-brand-tile .copy b { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.72rem; font-weight:900; }
.wrestling-brand-tile .copy small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--sgn-text-muted); font-size:.52rem; }
.wrestling-brand-tile em { align-self:center; font-style:normal; color:var(--sgn-cyan); font-size:.52rem; font-weight:850; white-space:nowrap; }
.wrestling-brand-tile:hover,.wrestling-brand-tile:focus-visible { transform:translateY(-2px); border-color:var(--sgn-border-accent); box-shadow:var(--sgn-shadow-neon); outline:none; }
.wrestling-brand-tile.event { min-height:116px; }
.wrestling-brand-tile.event .logo-wrap { height:64px; }
@media(max-width:720px){.wrestling-brand-tile{min-height:96px;padding:10px 11px;grid-template-rows:50px auto;border-radius:11px}.wrestling-brand-tile .logo-wrap{height:50px}.wrestling-brand-tile .logo-wrap img,.wrestling-brand-tile .logo-wrap .nova-fast-image{max-height:48px}.wrestling-brand-tile .copy b{font-size:.65rem}.wrestling-brand-tile .copy small,.wrestling-brand-tile em{font-size:.48rem}}
@media(prefers-reduced-motion:reduce){.wrestling-brand-tile{transition:none!important}}
/* SOURCE: Components/Shared/WrestlingCatalogExperience.razor.css | WEB SCOPE: .sg-wrestling-catalog */
.sg-wrestling-catalog{display:block;background:#000000}
.sg-wrestling-catalog{width:100%;min-height:100dvh;padding-top:calc(var(--nova-app-header-h,58px) + var(--safe-top,env(safe-area-inset-top,0px)));padding-bottom:calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 20px);overflow-x:hidden;color:var(--oscar-text);background:#000000;font-family:inherit}
.sg-wrestling-catalog .catalog-intro{width:100%;padding:16px 10px 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}.sg-wrestling-catalog .catalog-intro>div:first-child{min-width:0}.sg-wrestling-catalog .catalog-intro .eyebrow{display:block;color:var(--accent);font-size:.49rem;font-weight:950;letter-spacing:.13em}.sg-wrestling-catalog .catalog-intro h1{margin:4px 0 0;font-size:clamp(1.45rem,3vw,2.15rem);font-weight:950;letter-spacing:-.02em}.sg-wrestling-catalog .catalog-intro p{max-width:700px;margin:6px 0 0;color:var(--oscar-muted);font-size:.69rem;line-height:1.65}.sg-wrestling-catalog .catalog-count{flex:0 0 auto;min-width:76px;min-height:58px;padding:7px 10px;display:grid;place-items:center;align-content:center;border:1px solid var(--oscar-border);border-radius:10px;background:#000000}.sg-wrestling-catalog .catalog-count b{font-size:1rem}.sg-wrestling-catalog .catalog-count small{color:var(--oscar-muted);font-size:.48rem}
.sg-wrestling-catalog .category-tiles{width:100%;padding:3px 10px 10px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.sg-wrestling-catalog .category-tiles::-webkit-scrollbar{display:none}.sg-wrestling-catalog .brand-tile-shell{flex:0 0 176px;border-radius:14px}.sg-wrestling-catalog .brand-tile-shell.active{outline:2px solid var(--accent);outline-offset:1px}
.sg-wrestling-catalog .catalog-tools{position:sticky;top:calc(var(--nova-app-header-h,58px) + var(--safe-top,env(safe-area-inset-top,0px)) + 39px);z-index:35;width:100%;padding:8px 10px 9px;display:grid;gap:8px;background:rgba(0,0,0,.94);border-top:1px solid var(--oscar-border);border-bottom:1px solid var(--oscar-border);backdrop-filter:blur(14px)}
.sg-wrestling-catalog .search-box{height:45px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--oscar-border);border-radius:10px;background:#000000}.sg-wrestling-catalog .search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--oscar-text);font:inherit;font-size:.72rem}.sg-wrestling-catalog .search-box input::placeholder{color:var(--oscar-muted)}.sg-wrestling-catalog .clear-search{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:var(--oscar-text);font-size:.9rem}
.sg-wrestling-catalog .filter-strip{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.sg-wrestling-catalog .filter-strip::-webkit-scrollbar{display:none}.sg-wrestling-catalog .filter-pill,.sg-wrestling-catalog .reset-filters{flex:0 0 auto;height:37px;padding:0 11px;display:flex;align-items:center;gap:7px;border:1px solid var(--oscar-border);border-radius:9px;background:#000000;color:var(--oscar-text);font:inherit;font-size:.6rem;font-weight:850}.sg-wrestling-catalog .filter-pill span{color:var(--oscar-muted);font-size:.51rem}.sg-wrestling-catalog .filter-pill select{border:0;outline:0;background:transparent;color:var(--oscar-text);font:inherit;font-size:.61rem;font-weight:850}.sg-wrestling-catalog .filter-pill.primary{border-color:var(--accent);background:linear-gradient(135deg,rgba(0,0,0,.13),rgba(0,0,0,.05))}.sg-wrestling-catalog .reset-filters{color:var(--accent)}
.sg-wrestling-catalog .catalog-progress{height:2px;overflow:hidden;background:rgba(0,0,0,.04)}.sg-wrestling-catalog .catalog-progress i{display:block;width:34%;height:100%;background:linear-gradient(90deg,#000000,#000000);animation:catProgress 1s ease-in-out infinite alternate}@keyframes catProgress{to{transform:translateX(190%)}}
.sg-wrestling-catalog .date-timeline{width:100%;padding:12px 0 4px}.sg-wrestling-catalog .date-timeline>header{padding:0 10px 7px;display:flex;align-items:center;justify-content:space-between}.sg-wrestling-catalog .date-timeline h2{margin:0;font-size:.82rem;font-weight:950}.sg-wrestling-catalog .date-timeline>header button{padding:0;border:0;background:transparent;color:var(--accent);font:inherit;font-size:.58rem;font-weight:900}.sg-wrestling-catalog .date-timeline>div{display:flex;gap:7px;overflow-x:auto;padding:0 10px;scrollbar-width:none}.sg-wrestling-catalog .date-timeline>div::-webkit-scrollbar{display:none}.sg-wrestling-catalog .date-node{flex:0 0 170px;min-height:76px;padding:8px 9px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 7px;border:1px solid var(--oscar-border);border-radius:9px;background:#000000;color:var(--oscar-text);text-align:right;font:inherit}.sg-wrestling-catalog .date-node b{font-size:.58rem}.sg-wrestling-catalog .date-node small{justify-self:end;color:var(--accent);font-size:.49rem}.sg-wrestling-catalog .date-node span{grid-column:1/3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.58rem;font-weight:850}
.sg-wrestling-catalog .sg-wrestling-media-grid{padding:12px 10px 0}
.sg-wrestling-catalog .catalog-skeleton-grid{padding:12px 10px 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px 12px}.sg-wrestling-catalog .catalog-skeleton-grid article{display:grid;gap:7px}.sg-wrestling-catalog .catalog-skeleton-grid i,.sg-wrestling-catalog .catalog-skeleton-grid span,.sg-wrestling-catalog .catalog-skeleton-grid small{display:block;background:linear-gradient(100deg,#000000 20%,#000000 36%,#000000 52%);background-size:220% 100%;animation:catalogShimmer 1.2s linear infinite;border-radius:8px}.sg-wrestling-catalog .catalog-skeleton-grid i{aspect-ratio:2/3}.sg-wrestling-catalog .catalog-skeleton-grid span{height:10px}.sg-wrestling-catalog .catalog-skeleton-grid small{width:65%;height:8px}@keyframes catalogShimmer{to{background-position:-220% 0}}
.sg-wrestling-catalog .catalog-empty{min-height:48vh;padding:20px;display:grid;place-items:center;align-content:center;gap:8px;text-align:center}.sg-wrestling-catalog .catalog-empty h2{margin:0;font-size:.9rem}.sg-wrestling-catalog .catalog-empty p{max-width:440px;margin:0;color:var(--oscar-muted);font-size:.62rem;line-height:1.65}.sg-wrestling-catalog .catalog-empty button,.sg-wrestling-catalog .catalog-warning button{padding:7px 12px;border:1px solid var(--accent);border-radius:8px;background:#000000;color:var(--accent);font:inherit;font-size:.6rem}
.sg-wrestling-catalog .catalog-warning{margin:9px 10px 0;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--oscar-border);border-radius:8px;background:#000000;color:var(--oscar-muted);font-size:.58rem}.sg-wrestling-catalog .catalog-tail{min-height:56px;display:grid;place-items:center;padding:8px 10px}.sg-wrestling-catalog .tail-loading,.sg-wrestling-catalog .tail-complete{color:var(--oscar-muted);font-size:.58rem}.sg-wrestling-catalog .infinite-sentinel{width:100%;height:1px}
@media(max-width:1180px){.sg-wrestling-catalog .catalog-skeleton-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:940px){.sg-wrestling-catalog .catalog-skeleton-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:720px){.sg-wrestling-catalog .catalog-intro{padding-top:12px}.sg-wrestling-catalog .catalog-intro p{font-size:.62rem}.sg-wrestling-catalog .catalog-count{min-width:67px;min-height:54px}.sg-wrestling-catalog .brand-tile-shell{flex-basis:148px}.sg-wrestling-catalog .catalog-skeleton-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px 9px}.sg-wrestling-catalog .sg-wrestling-media-grid{padding-inline:9px}.sg-wrestling-catalog .catalog-tools{padding-inline:9px}.sg-wrestling-catalog .category-tiles,.sg-wrestling-catalog .date-timeline>div{padding-inline:9px}.sg-wrestling-catalog .date-timeline>header{padding-inline:9px}}
@media(max-width:560px){.sg-wrestling-catalog .catalog-intro h1{font-size:1.35rem}.sg-wrestling-catalog .catalog-intro p{max-width:76vw}.sg-wrestling-catalog .catalog-skeleton-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}}
@media(max-width:360px){.sg-wrestling-catalog .catalog-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.sg-wrestling-catalog .catalog-progress i,.sg-wrestling-catalog .catalog-skeleton-grid i,.sg-wrestling-catalog .catalog-skeleton-grid span,.sg-wrestling-catalog .catalog-skeleton-grid small{animation:none!important}}
/* Phase 13 — full viewport canvas; no page-level horizontal gutters. */
.sg-wrestling-catalog{
width:100vw!important;
max-width:none!important;
margin-inline:calc(50% - 50vw)!important;
padding-inline:0!important;
}
.sg-wrestling-catalog .catalog-intro,
.sg-wrestling-catalog .category-tiles,
.sg-wrestling-catalog .catalog-tools,
.sg-wrestling-catalog .date-timeline,
.sg-wrestling-catalog .catalog-skeleton-grid,
.sg-wrestling-catalog .catalog-empty,
.sg-wrestling-catalog .catalog-warning,
.sg-wrestling-catalog .catalog-tail{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
}
.sg-wrestling-catalog .category-tiles{padding-left:0!important;padding-right:0!important}
.sg-wrestling-catalog .catalog-tools{padding-left:0!important;padding-right:0!important}
.sg-wrestling-catalog .catalog-tools .search-box{margin-left:0!important;margin-right:0!important;border-radius:0!important}
.sg-wrestling-catalog .catalog-tools .filter-strip{padding-left:0!important;padding-right:0!important}
.sg-wrestling-catalog .date-timeline>header{padding-left:12px!important;padding-right:12px!important}
.sg-wrestling-catalog .date-timeline>div{padding-left:0!important;padding-right:0!important}
.sg-wrestling-catalog .sg-wrestling-media-grid{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
}
.sg-wrestling-catalog .catalog-skeleton-grid{padding-left:0!important;padding-right:0!important}
.sg-wrestling-catalog .catalog-warning{border-radius:0!important}
@media(max-width:720px){
.sg-wrestling-catalog .sg-wrestling-media-grid,
.sg-wrestling-catalog .catalog-tools,
.sg-wrestling-catalog .category-tiles,
.sg-wrestling-catalog .date-timeline>div,
.sg-wrestling-catalog .catalog-skeleton-grid{padding-left:0!important;padding-right:0!important}
.sg-wrestling-catalog .catalog-intro{padding-left:10px!important;padding-right:10px!important}
}
/* Final freeze — preserve wrestling taxonomy/date logic, elevate only presentation. */
.sg-wrestling-catalog {
background: var(--sgn-dark-gradient,linear-gradient(180deg,#03040a,#000 58%,#020207)) !important;
}
.sg-wrestling-catalog .catalog-intro {
padding-right:max(12px,var(--safe-right,0px)) !important;
padding-left:max(12px,var(--safe-left,0px)) !important;
}
.sg-wrestling-catalog .catalog-count,
.sg-wrestling-catalog .brand-tile-shell,
.sg-wrestling-catalog .date-node {
border-color:var(--sgn-border-soft,rgba(255,255,255,.1)) !important;
background:var(--sgn-card-gradient,linear-gradient(145deg,rgba(21,22,34,.92),rgba(6,7,13,.96))) !important;
box-shadow:var(--sgn-shadow-card,0 14px 34px rgba(0,0,0,.3));
backdrop-filter:blur(var(--sgn-blur,18px)) saturate(1.08);
-webkit-backdrop-filter:blur(var(--sgn-blur,18px)) saturate(1.08);
}
.sg-wrestling-catalog .brand-tile-shell:is(:hover,:focus-within,.active),.sg-wrestling-catalog .date-node:is(:hover,:focus-visible) {
border-color:var(--sgn-border-accent,rgba(155,77,255,.7)) !important;
box-shadow:var(--sgn-shadow-neon,0 0 26px rgba(155,77,255,.2)),var(--sgn-shadow-card,0 14px 34px rgba(0,0,0,.3));
}
.sg-wrestling-catalog .catalog-tools {
padding-right:max(10px,var(--safe-right,0px)) !important;
padding-left:max(10px,var(--safe-left,0px)) !important;
background:var(--sgn-glass-strong,rgba(7,8,16,.84)) !important;
border-color:var(--sgn-border-soft,rgba(255,255,255,.1)) !important;
backdrop-filter:blur(var(--sgn-blur,18px)) saturate(1.12) !important;
-webkit-backdrop-filter:blur(var(--sgn-blur,18px)) saturate(1.12) !important;
}
.sg-wrestling-catalog .search-box,
.sg-wrestling-catalog .filter-pill,
.sg-wrestling-catalog .reset-filters {
background:var(--sgn-glass,rgba(11,12,22,.68)) !important;
border-color:var(--sgn-border-soft,rgba(255,255,255,.1)) !important;
}
.sg-wrestling-catalog .filter-pill.primary,
.sg-wrestling-catalog .reset-filters {
border-color:var(--sgn-border-accent,rgba(155,77,255,.65)) !important;
box-shadow:var(--sgn-shadow-neon,0 0 26px rgba(155,77,255,.16));
}
.sg-wrestling-catalog .date-timeline>header {
padding-right:max(12px,var(--safe-right,0px)) !important;
padding-left:max(12px,var(--safe-left,0px)) !important;
}
.sg-wrestling-catalog .category-tiles,
.sg-wrestling-catalog .date-timeline>div,
.sg-wrestling-catalog .sg-wrestling-media-grid,
.sg-wrestling-catalog .catalog-skeleton-grid {
padding-right:0 !important;
padding-left:0 !important;
}
/* SOURCE: Components/Shared/WrestlingHomeExperience.razor.css | WEB SCOPE: .sg-wrestling-home */
.sg-wrestling-home { display:block; background:#000; }
.sg-wrestling-home {
width:100vw;
max-width:none;
min-height:100dvh;
margin-inline:calc(50% - 50vw);
padding:calc(var(--nova-app-header-h,58px) + var(--safe-top,0px)) 0 calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 20px);
overflow-x:hidden;
background:
radial-gradient(circle at 88% 5%, rgba(155,77,255,.075), transparent 22rem),
radial-gradient(circle at 8% 44%, rgba(20,215,255,.045), transparent 24rem),
#000;
color:var(--sgn-white,var(--oscar-text));
font-family:inherit;
}
.sg-wrestling-home .wrestling-hero { position:relative; width:100%; min-height:clamp(390px,52vw,680px); overflow:hidden; background:#000; }
.sg-wrestling-home .wrestling-hero img,.sg-wrestling-home .wrestling-hero .nova-fast-image { position:absolute; inset:0; width:100%!important; height:100%!important; object-fit:cover!important; object-position:center 26%; }
.sg-wrestling-home .hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(1,3,9,.66) 34%,rgba(2,4,12,.18) 70%,rgba(0,0,0,.04) 100%),linear-gradient(0deg,#000 0%,rgba(0,0,0,.80) 18%,rgba(0,0,0,.20) 62%,rgba(0,0,0,.08) 100%),radial-gradient(circle at 74% 24%,rgba(155,77,255,.14),transparent 35%); }
.sg-wrestling-home .hero-copy { position:absolute; right:max(clamp(14px,4vw,52px),var(--safe-right,0px)); bottom:clamp(34px,7vw,78px); width:min(50%,640px); display:grid; gap:10px; }
.sg-wrestling-home .eyebrow { width:max-content; min-height:27px; padding:0 10px; display:inline-flex; align-items:center; border:1px solid var(--sgn-border-accent); border-radius:999px; background:rgba(7,9,18,.62); color:var(--sgn-cyan); box-shadow:var(--sgn-shadow-neon); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:.6rem; font-weight:950; letter-spacing:.08em; }
.sg-wrestling-home .hero-copy h1 { margin:0; font-size:clamp(2rem,4.2vw,4.5rem); line-height:1.02; font-weight:950; letter-spacing:-.03em; text-shadow:0 8px 30px rgba(0,0,0,.84); }
.sg-wrestling-home .hero-meta { display:flex; flex-wrap:wrap; gap:7px; color:var(--sgn-white); font-size:.68rem; font-weight:800; }
.sg-wrestling-home .hero-meta span { min-height:25px; padding:0 8px; display:inline-flex; align-items:center; border:1px solid var(--sgn-border-soft); border-radius:999px; background:rgba(7,9,18,.52); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.sg-wrestling-home .hero-copy p { max-width:570px; margin:0; color:var(--sgn-text-soft); font-size:.76rem; line-height:1.7; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.sg-wrestling-home .hero-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:3px; }
.sg-wrestling-home .hero-actions button { min-height:42px; padding:0 15px; display:inline-flex; align-items:center; gap:7px; border-radius:11px; font:inherit; font-size:.72rem; font-weight:900; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.sg-wrestling-home .hero-actions button:active { transform:scale(.97); }
.sg-wrestling-home .hero-actions .primary { border:1px solid rgba(255,255,255,.10); background:var(--sgn-neon-button-gradient); color:#fff; box-shadow:var(--sgn-shadow-neon); }
.sg-wrestling-home .hero-actions .secondary { border:1px solid var(--sgn-border-soft); background:var(--sgn-glass); color:var(--sgn-white); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.sg-wrestling-home .hero-actions .secondary.active { border-color:var(--sgn-border-accent); color:var(--sgn-cyan); box-shadow:var(--sgn-shadow-neon); }
.sg-wrestling-home .hero-dots { position:absolute; right:50%; bottom:13px; transform:translateX(50%); display:flex; gap:5px; }
.sg-wrestling-home .hero-dots button { width:18px; height:3px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.20); }
.sg-wrestling-home .hero-dots button.active { width:34px; background:var(--sgn-gradient); box-shadow:0 0 16px rgba(20,215,255,.22); }
.sg-wrestling-home .offline { margin:8px 0 0; padding:8px max(12px,var(--safe-right,0px)) 8px max(12px,var(--safe-left,0px)); display:flex; align-items:center; gap:7px; border-block:1px solid var(--sgn-border-soft); background:linear-gradient(90deg,transparent,rgba(155,77,255,.07),transparent); color:var(--sgn-text-soft); font-size:.61rem; }
.sg-wrestling-home .quick-gates { width:100%; padding:12px 0 2px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; background:transparent; }
.sg-wrestling-home .quick-gates button { min-height:72px; padding:10px 11px; display:flex; align-items:center; gap:9px; border:1px solid var(--sgn-border-soft); border-radius:var(--sgn-radius-card); background:var(--sgn-glass); color:var(--sgn-white); box-shadow:var(--sgn-shadow-card); backdrop-filter:blur(var(--sgn-blur)) saturate(1.14); -webkit-backdrop-filter:blur(var(--sgn-blur)) saturate(1.14); font:inherit; text-align:right; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.sg-wrestling-home .quick-gates button:hover,.sg-wrestling-home .quick-gates button:focus-visible { transform:translateY(-2px); border-color:var(--sgn-border-accent); box-shadow:var(--sgn-shadow-neon); outline:none; }
.sg-wrestling-home .quick-gates button:first-child { border-start-start-radius:0; border-end-start-radius:0; }
.sg-wrestling-home .quick-gates button:last-child { border-start-end-radius:0; border-end-end-radius:0; }
.sg-wrestling-home .quick-gates button>span { min-width:0; display:grid; gap:2px; }
.sg-wrestling-home .quick-gates b { font-size:.68rem; }
.sg-wrestling-home .quick-gates small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--sgn-text-muted); font-size:.49rem; }
.sg-wrestling-home .quick-gates svg { color:var(--sgn-cyan); filter:drop-shadow(0 0 9px rgba(20,215,255,.18)); }
.sg-wrestling-home .home-section { width:100%; max-width:none; margin:16px 0 0; background:transparent; }
.sg-wrestling-home .home-section>header { min-height:38px; padding:0 max(12px,var(--safe-right,0px)) 8px max(12px,var(--safe-left,0px)); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.sg-wrestling-home .home-section>header>div { display:grid; gap:2px; }
.sg-wrestling-home .home-section>header small { color:var(--sgn-cyan); font-size:.47rem; font-weight:950; letter-spacing:.13em; }
.sg-wrestling-home .home-section h2 { margin:0; font-size:.96rem; font-weight:950; }
.sg-wrestling-home .home-section>header>button { padding:0; border:0; background:transparent; color:var(--sgn-cyan); font:inherit; font-size:.62rem; font-weight:900; }
.sg-wrestling-home .brand-rail,.sg-wrestling-home .continue-rail,.sg-wrestling-home .year-strip,.sg-wrestling-home .schedule-strip { width:100%; padding:0; display:flex; gap:7px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-padding-inline:0; overscroll-behavior-inline:contain; }
.sg-wrestling-home .brand-rail::-webkit-scrollbar,.sg-wrestling-home .continue-rail::-webkit-scrollbar,.sg-wrestling-home .year-strip::-webkit-scrollbar,.sg-wrestling-home .schedule-strip::-webkit-scrollbar { display:none; }
.sg-wrestling-home .brand-rail .wrestling-brand-tile { flex:0 0 176px; }
.sg-wrestling-home .brand-rail.event .wrestling-brand-tile { flex-basis:210px; }
.sg-wrestling-home .schedule-strip { gap:6px; }
.sg-wrestling-home .schedule-item { flex:0 0 min(74vw,360px); min-height:88px; padding:0; display:grid; grid-template-columns:78px 96px minmax(0,1fr); align-items:center; overflow:hidden; border:1px solid var(--sgn-border-soft); border-radius:var(--sgn-radius-card); background:var(--sgn-card-gradient); color:var(--sgn-white); box-shadow:var(--sgn-shadow-card); font:inherit; text-align:right; }
.sg-wrestling-home .schedule-item .date { padding:0 8px; display:grid; gap:3px; justify-items:center; }
.sg-wrestling-home .schedule-item .date b { font-size:.67rem; }
.sg-wrestling-home .schedule-item .date small { color:var(--sgn-cyan); font-size:.52rem; }
.sg-wrestling-home .schedule-item .art { height:86px; overflow:hidden; }
.sg-wrestling-home .schedule-item .art img,.sg-wrestling-home .schedule-item .art .nova-fast-image { width:100%!important; height:100%!important; object-fit:cover!important; }
.sg-wrestling-home .schedule-item .copy { min-width:0; padding:0 10px; display:grid; gap:4px; }
.sg-wrestling-home .schedule-item .copy b,.sg-wrestling-home .schedule-item .copy small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sg-wrestling-home .schedule-item .copy b { font-size:.66rem; }
.sg-wrestling-home .schedule-item .copy small { color:var(--sgn-text-muted); font-size:.5rem; }
.sg-wrestling-home .continue-rail>button { position:relative; flex:0 0 min(27vw,330px); aspect-ratio:16/8.5; overflow:hidden; padding:0; border:1px solid var(--sgn-border-soft); border-radius:var(--sgn-radius-card); background:var(--sgn-card-gradient); color:var(--sgn-white); box-shadow:var(--sgn-shadow-card); font:inherit; text-align:right; }
.sg-wrestling-home .continue-rail>button img,.sg-wrestling-home .continue-rail>button .nova-fast-image { position:absolute; inset:0; width:100%!important; height:100%!important; object-fit:cover!important; }
.sg-wrestling-home .continue-rail>button>i { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.90),transparent 66%); }
.sg-wrestling-home .continue-rail>button>span { position:absolute; right:10px; left:10px; bottom:12px; display:grid; gap:2px; }
.sg-wrestling-home .continue-rail b { font-size:.66rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-wrestling-home .continue-rail small { color:var(--sgn-text-muted); font-size:.5rem; }
.sg-wrestling-home .continue-rail em { position:absolute; right:0; bottom:0; left:0; height:3px; background:rgba(255,255,255,.10); }
.sg-wrestling-home .continue-rail u { display:block; height:100%; background:var(--sgn-gradient); box-shadow:0 0 12px rgba(20,215,255,.35); text-decoration:none; }
.sg-wrestling-home .year-strip { gap:6px; }
.sg-wrestling-home .year-strip .archive-year-control { flex:0 0 auto; min-width:112px; margin:0!important; border-color:var(--sgn-border-soft)!important; background:var(--sgn-glass)!important; box-shadow:var(--sgn-shadow-card); }
.sg-wrestling-home .year-strip .archive-year-control:hover,.sg-wrestling-home .year-strip .archive-year-control:focus-visible { border-color:var(--sgn-border-accent)!important; box-shadow:var(--sgn-shadow-neon); outline:none; }
.sg-wrestling-home .home-skeleton { width:100%; display:grid; gap:10px; }
.sg-wrestling-home .home-skeleton>.hero { height:430px; border-radius:0; }
.sg-wrestling-home .home-skeleton i,.sg-wrestling-home .home-skeleton>div i { display:block; background:linear-gradient(100deg,rgba(17,20,35,.62) 20%,rgba(44,48,75,.72) 36%,rgba(17,20,35,.62) 52%); background-size:220% 100%; animation:fightShimmer 1.2s linear infinite; }
.sg-wrestling-home .home-skeleton>div { padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.sg-wrestling-home .home-skeleton>div i { aspect-ratio:2/3; border-radius:var(--sgn-radius-card); }
.sg-wrestling-home .home-error { min-height:58vh; padding:20px max(20px,var(--safe-right,0px)) 20px max(20px,var(--safe-left,0px)); display:grid; place-items:center; align-content:center; gap:8px; text-align:center; color:var(--sgn-text-soft); }
.sg-wrestling-home .home-error strong { color:var(--sgn-white); }
.sg-wrestling-home .home-error small { max-width:460px; }
.sg-wrestling-home .home-error button { min-height:40px; padding:0 15px; border:1px solid var(--sgn-border-accent); border-radius:10px; background:var(--sgn-glass); color:var(--sgn-cyan); box-shadow:var(--sgn-shadow-neon); font:inherit; }
@keyframes fightShimmer { to { background-position:-220% 0; } }
@media(max-width:980px) { .sg-wrestling-home .quick-gates{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:720px) {
.sg-wrestling-home .wrestling-hero{min-height:340px}.sg-wrestling-home .hero-shade{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.76) 30%,rgba(0,0,0,.18) 72%),radial-gradient(circle at 70% 24%,rgba(155,77,255,.13),transparent 36%)}
.sg-wrestling-home .hero-copy{right:max(13px,var(--safe-right,0px));left:max(13px,var(--safe-left,0px));bottom:27px;width:auto;gap:6px}.sg-wrestling-home .eyebrow{font-size:.49rem}.sg-wrestling-home .hero-copy h1{font-size:1.55rem;max-width:91%}.sg-wrestling-home .hero-copy p{display:none}.sg-wrestling-home .hero-meta{font-size:.55rem}.sg-wrestling-home .hero-actions button{min-height:36px;padding:0 11px;font-size:.61rem}.sg-wrestling-home .hero-actions .secondary{display:none}
.sg-wrestling-home .brand-rail .wrestling-brand-tile{flex-basis:146px}.sg-wrestling-home .brand-rail.event .wrestling-brand-tile{flex-basis:178px}.sg-wrestling-home .continue-rail>button{flex-basis:74vw}.sg-wrestling-home .home-skeleton>.hero{height:340px}.sg-wrestling-home .home-skeleton>div{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce) { .sg-wrestling-home .home-skeleton i,.sg-wrestling-home .home-skeleton>div i{animation:none!important}.sg-wrestling-home .quick-gates button,.sg-wrestling-home .hero-actions button{transition:none!important} }
/* SOURCE: Components/Shared/WrestlingMediaGrid.razor.css | WEB SCOPE: .sg-wrestling-media-grid */
.sg-wrestling-media-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px 12px;align-items:start}
@media(max-width:1180px){.sg-wrestling-media-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:940px){.sg-wrestling-media-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:720px){.sg-wrestling-media-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px 9px}}
@media(max-width:560px){.sg-wrestling-media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}}
@media(max-width:360px){.sg-wrestling-media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 10px}}
/* SOURCE: Components/Shared/WrestlingNativeMediaCard.razor.css | WEB SCOPE: .sg-wrestling-card */
.sg-wrestling-card{min-width:0;padding:0;border:0;background:transparent;color:var(--oscar-text);font:inherit;text-align:right;cursor:pointer;display:grid;gap:7px;content-visibility:auto;contain-intrinsic-size:170px 315px}.sg-wrestling-card .artwork{position:relative;display:block;overflow:hidden;border:1px solid var(--oscar-border);border-radius:10px;background:#000000;box-shadow:0 9px 24px rgba(0,0,0,.25)}.sg-wrestling-card.poster .artwork,.sg-wrestling-card.ranked .artwork{aspect-ratio:2/3}.sg-wrestling-card.landscape .artwork{aspect-ratio:16/9}.sg-wrestling-card .artwork img,.sg-wrestling-card .artwork .nova-fast-image{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .22s ease}.sg-wrestling-card .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,transparent 27%,transparent 52%,rgba(0,0,0,.88) 100%);pointer-events:none}.sg-wrestling-card .play{position:absolute;left:8px;bottom:8px;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--oscar-border);border-radius:50%;background:linear-gradient(135deg,#000000,#000000);color:var(--oscar-text);opacity:0;transform:scale(.88);transition:.18s ease}.sg-wrestling-card .quality{position:absolute;top:7px;right:7px;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.84);border:1px solid var(--accent);color:var(--accent);font-size:.49rem;font-style:normal;font-weight:900}.sg-wrestling-card .date-badge{position:absolute;top:7px;left:7px;min-height:23px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--oscar-border);border-radius:999px;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);color:var(--oscar-text);direction:ltr}.sg-wrestling-card .date-badge b{font-size:.47rem;font-weight:900;letter-spacing:.01em}.sg-wrestling-card .date-badge svg{color:var(--accent)}.sg-wrestling-card .tournament-badge{position:absolute;right:7px;bottom:7px;max-width:calc(100% - 54px);min-height:23px;padding:0 7px;display:inline-flex;align-items:center;overflow:hidden;border:1px solid var(--accent);border-radius:999px;background:rgba(0,0,0,.84);color:var(--accent);font-size:.49rem;font-weight:900;white-space:nowrap;text-overflow:ellipsis}.sg-wrestling-card .rank{position:absolute;right:7px;bottom:36px;font-size:2.1rem;line-height:.9;color:var(--accent);text-shadow:0 4px 15px rgba(0,0,0,.75);font-weight:950}.sg-wrestling-card .copy{min-width:0;display:grid;gap:5px}.sg-wrestling-card .copy>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;line-height:1.25}.sg-wrestling-card .card-facts{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px}.sg-wrestling-card .card-facts small{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.54rem}.sg-wrestling-card .card-facts .tournament{color:var(--accent);font-weight:900}.sg-wrestling-card .card-facts .date{color:var(--accent);direction:ltr;font-weight:850}.sg-wrestling-card .secondary-meta{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--accent);font-size:.50rem}.sg-wrestling-card:hover .artwork img,.sg-wrestling-card:focus-visible .artwork img{transform:scale(1.035)}.sg-wrestling-card:hover .play,.sg-wrestling-card:focus-visible .play{opacity:1;transform:scale(1)}.sg-wrestling-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px}
@media(max-width:720px){.sg-wrestling-card{gap:5px}.sg-wrestling-card .quality{display:none}.sg-wrestling-card .artwork{border-radius:8px}.sg-wrestling-card .copy>b{font-size:.64rem}.sg-wrestling-card .card-facts small{font-size:.48rem}.sg-wrestling-card .secondary-meta{font-size:.46rem}.sg-wrestling-card .play{display:none}.sg-wrestling-card .rank{font-size:1.7rem;bottom:34px}.sg-wrestling-card .date-badge{top:5px;left:5px;min-height:21px;padding-inline:6px}.sg-wrestling-card .date-badge b{font-size:.43rem}.sg-wrestling-card .tournament-badge{right:5px;bottom:5px;max-width:calc(100% - 10px);min-height:21px;font-size:.44rem}}
@media(prefers-reduced-motion:reduce){.sg-wrestling-card .artwork img,.sg-wrestling-card .play{transition:none!important}}
/* SOURCE: Components/Shared/WrestlingScheduleExperience.razor.css | WEB SCOPE: .sg-wrestling-schedule */
.sg-wrestling-schedule{display:block;background:#000}
.sg-wrestling-schedule{width:100vw;max-width:none;min-height:100dvh;margin-inline:calc(50% - 50vw);padding:calc(var(--nova-app-header-h,58px) + var(--safe-top,0px)) 0 calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 20px);overflow-x:hidden;background:radial-gradient(circle at 88% 8%,rgba(155,77,255,.075),transparent 25rem),radial-gradient(circle at 6% 70%,rgba(20,215,255,.045),transparent 26rem),#000;color:var(--sgn-white,var(--oscar-text));font-family:inherit}
.sg-wrestling-schedule .schedule-intro{padding:16px max(14px,var(--safe-right,0px)) 12px max(14px,var(--safe-left,0px))}.sg-wrestling-schedule .schedule-intro>span{color:var(--sgn-cyan);font-size:.49rem;font-weight:950;letter-spacing:.13em}.sg-wrestling-schedule .schedule-intro h1{margin:4px 0 0;font-size:clamp(1.45rem,3vw,2.15rem);font-weight:950}.sg-wrestling-schedule .schedule-intro p{max-width:660px;margin:6px 0 0;color:var(--sgn-text-soft);font-size:.69rem;line-height:1.65}
.sg-wrestling-schedule .offline{margin:0;padding:8px max(12px,var(--safe-right,0px)) 8px max(12px,var(--safe-left,0px));display:flex;align-items:center;gap:7px;border-block:1px solid var(--sgn-border-soft);background:linear-gradient(90deg,transparent,rgba(155,77,255,.07),transparent);color:var(--sgn-text-soft);font-size:.58rem}
.sg-wrestling-schedule .day-strip{width:100%;padding:0 0 9px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.sg-wrestling-schedule .day-strip button{min-height:56px;padding:5px 4px;display:grid;place-items:center;align-content:center;gap:2px;border:1px solid var(--sgn-border-soft);border-radius:10px;background:var(--sgn-glass);color:var(--sgn-text-soft);box-shadow:var(--sgn-shadow-card);font:inherit}.sg-wrestling-schedule .day-strip button b{font-size:.58rem}.sg-wrestling-schedule .day-strip button small{font-size:.48rem}.sg-wrestling-schedule .day-strip button.active{border-color:var(--sgn-border-accent);background:var(--sgn-glass-strong);color:var(--sgn-white);box-shadow:var(--sgn-shadow-neon)}
.sg-wrestling-schedule .timeline{position:relative;width:100%;padding:4px 0 12px;display:grid;gap:6px}.sg-wrestling-schedule .timeline-row{position:relative;min-height:88px;padding:0;display:grid;grid-template-columns:78px 108px minmax(0,1fr);align-items:center;overflow:hidden;border:1px solid var(--sgn-border-soft);border-radius:var(--sgn-radius-card);background:var(--sgn-card-gradient);color:var(--sgn-white);box-shadow:var(--sgn-shadow-card);text-align:right;font:inherit;transition:border-color .16s ease,box-shadow .16s ease}.sg-wrestling-schedule .timeline-row:hover,.sg-wrestling-schedule .timeline-row:focus-visible{border-color:var(--sgn-border-accent);box-shadow:var(--sgn-shadow-neon);outline:none}.sg-wrestling-schedule .timeline-row .date{padding:0 8px;display:grid;gap:3px;justify-items:center}.sg-wrestling-schedule .timeline-row .date b{font-size:.61rem}.sg-wrestling-schedule .timeline-row .date small{color:var(--sgn-cyan);font-size:.49rem}.sg-wrestling-schedule .timeline-row .art{height:86px;overflow:hidden}.sg-wrestling-schedule .timeline-row .art img,.sg-wrestling-schedule .timeline-row .art .nova-fast-image{width:100%!important;height:100%!important;object-fit:cover!important}.sg-wrestling-schedule .timeline-row .copy{min-width:0;padding:0 12px;display:grid;gap:4px}.sg-wrestling-schedule .timeline-row .copy b,.sg-wrestling-schedule .timeline-row .copy small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sg-wrestling-schedule .timeline-row .copy b{font-size:.69rem}.sg-wrestling-schedule .timeline-row .copy small{color:var(--sgn-text-muted);font-size:.51rem}.sg-wrestling-schedule .timeline-row .line{position:absolute;right:34px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--sgn-border-accent),var(--sgn-border-cyan),transparent);pointer-events:none}
.sg-wrestling-schedule .date-table{width:100%;padding:12px 0 0}.sg-wrestling-schedule .date-table>header{min-height:36px;padding:0 max(12px,var(--safe-right,0px)) 0 max(12px,var(--safe-left,0px));display:flex;align-items:center;justify-content:space-between;gap:10px}.sg-wrestling-schedule .date-table h2{margin:0;font-size:.84rem}.sg-wrestling-schedule .date-table>header button{padding:0;border:0;background:transparent;color:var(--sgn-cyan);font:inherit;font-size:.58rem;font-weight:900}.sg-wrestling-schedule .table-head,.sg-wrestling-schedule .table-row{width:100%;min-height:42px;padding:0 max(10px,var(--safe-right,0px)) 0 max(10px,var(--safe-left,0px));display:grid;grid-template-columns:92px 72px 120px minmax(0,1fr);align-items:center;gap:8px}.sg-wrestling-schedule .table-head{color:var(--sgn-text-muted);font-size:.49rem}.sg-wrestling-schedule .table-row{min-height:54px;border-top:1px solid var(--sgn-border-soft);background:linear-gradient(90deg,transparent,rgba(155,77,255,.025),transparent);color:var(--sgn-white);border-right:0;border-left:0;border-bottom:0;font:inherit;text-align:right}.sg-wrestling-schedule .table-row span,.sg-wrestling-schedule .table-row b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.56rem}.sg-wrestling-schedule .table-row b{font-weight:850}
.sg-wrestling-schedule .schedule-skeleton{padding:8px 0;display:grid;gap:6px}.sg-wrestling-schedule .schedule-skeleton i{height:86px;border-radius:var(--sgn-radius-card);background:linear-gradient(100deg,rgba(17,20,35,.62) 20%,rgba(44,48,75,.72) 36%,rgba(17,20,35,.62) 52%);background-size:220% 100%;animation:scheduleShimmer 1.2s linear infinite}@keyframes scheduleShimmer{to{background-position:-220% 0}}
.sg-wrestling-schedule .schedule-empty{min-height:55vh;padding:20px max(20px,var(--safe-right,0px)) 20px max(20px,var(--safe-left,0px));display:grid;place-items:center;align-content:center;gap:8px;text-align:center}.sg-wrestling-schedule .schedule-empty h2{margin:0;font-size:.9rem}.sg-wrestling-schedule .schedule-empty p{max-width:470px;margin:0;color:var(--sgn-text-muted);font-size:.62rem;line-height:1.65}.sg-wrestling-schedule .schedule-empty button{min-height:40px;padding:0 13px;border:1px solid var(--sgn-border-accent);border-radius:10px;background:var(--sgn-glass);color:var(--sgn-cyan);box-shadow:var(--sgn-shadow-neon);font:inherit;font-size:.6rem}
@media(max-width:720px){.sg-wrestling-schedule .day-strip{gap:3px}.sg-wrestling-schedule .day-strip button{min-height:48px}.sg-wrestling-schedule .timeline-row{grid-template-columns:69px 92px minmax(0,1fr);min-height:78px}.sg-wrestling-schedule .timeline-row .art{height:76px}.sg-wrestling-schedule .timeline-row .copy{padding-inline:9px}.sg-wrestling-schedule .table-head,.sg-wrestling-schedule .table-row{grid-template-columns:82px 60px 88px minmax(0,1fr);gap:6px}.sg-wrestling-schedule .table-row span,.sg-wrestling-schedule .table-row b{font-size:.51rem}}
@media(max-width:520px){.sg-wrestling-schedule .day-strip{overflow-x:auto;display:flex;scrollbar-width:none}.sg-wrestling-schedule .day-strip::-webkit-scrollbar{display:none}.sg-wrestling-schedule .day-strip button{flex:0 0 70px}.sg-wrestling-schedule .table-head{display:none}.sg-wrestling-schedule .table-row{min-height:66px;grid-template-columns:80px 70px minmax(0,1fr)}.sg-wrestling-schedule .table-row span:nth-child(3){display:none}.sg-wrestling-schedule .table-row b{font-size:.56rem}.sg-wrestling-schedule .schedule-intro h1{font-size:1.32rem}}
@media(prefers-reduced-motion:reduce){.sg-wrestling-schedule .schedule-skeleton i{animation:none!important}.sg-wrestling-schedule .timeline-row{transition:none!important}}
/* SOURCE: Components/Shared/WrestlingSectionNav.razor.css | WEB SCOPE: .sg-wrestling-section-nav */
.sg-wrestling-section-nav {
width:100%;
min-height:40px;
padding:4px 10px 5px;
display:flex;
align-items:center;
gap:7px;
overflow-x:auto;
scrollbar-width:none;
background:#000000;
border-bottom:1px solid var(--oscar-border);
}
.sg-wrestling-section-nav::-webkit-scrollbar{display:none}
.sg-wrestling-section-nav button {
flex:0 0 auto;
height:31px;
padding:0 12px;
border:1px solid var(--oscar-border);
border-radius:999px;
background:rgba(0,0,0,.025);
color:var(--oscar-muted);
font:inherit;
font-size:.62rem;
font-weight:850;
white-space:nowrap;
}
.sg-wrestling-section-nav button.active {
border-color:var(--accent);
color:var(--oscar-text);
background:linear-gradient(135deg,rgba(0,0,0,.22),rgba(0,0,0,.10));
box-shadow:inset 0 0 0 1px rgba(0,0,0,.035);
}
@media(max-width:600px){.sg-wrestling-section-nav{padding-inline:9px;gap:6px}.sg-wrestling-section-nav button{height:30px;padding:0 11px;font-size:.58rem}}
/* Phase 13 — section nav follows the full-bleed page canvas. */
.sg-wrestling-section-nav{width:100%!important;max-width:none!important;margin-inline:0!important;padding-left:0!important;padding-right:0!important}
/* === MAUI inline Razor styles (source-exact) === */
/* Shared/CommercialAdSlot.razor inline-style 1 */
.sg-commercial-ad{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:14px auto 8px;max-width:1060px;padding:10px 12px;border-radius:17px;border:1px solid #34344a;background:linear-gradient(120deg,#191623,#101117);box-shadow:0 12px 28px rgba(0,0,0,.2);overflow:hidden}.sg-commercial-ad.sg-commercial-ad-grid{grid-column:1/-1;width:min(100%,1060px);justify-self:center}.sg-commercial-ad>img{width:78px;height:58px;object-fit:cover;border-radius:12px;background:#20212b}.sg-ad-copy{min-width:0}.sg-ad-copy span{display:inline-block;font-size:.6rem;color:#b9afe7;background:#28223e;padding:3px 6px;border-radius:999px}.sg-ad-copy strong{display:block;margin-top:4px;color:#fff;font-size:.86rem}.sg-ad-copy p{margin:3px 0 0;color:#999bad;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sg-commercial-ad>button:not(.sg-ad-close){border:0;border-radius:11px;padding:9px 12px;background:linear-gradient(100deg,#F04AD8 0%,#9B4DFF 50%,#14D7FF 100%);color:white;font-size:.75rem;font-weight:850;white-space:nowrap}.sg-ad-close{position:absolute;z-index:6;left:4px;top:2px;width:30px;height:30px;border:0;background:transparent;color:#a4a6b2;font-size:1.08rem}
/* Home is not a banner ad squeezed between rails. It is an editorial billboard:
full-bleed artwork, controlled cinematic fade and a single clean CTA. No-fill/VIP
still renders nothing because the Razor branch above remains unchanged. */
.sg-commercial-ad.sg-commercial-ad-home{
width:100%;
max-width:none;
min-height:clamp(310px,58vw,560px);
margin:20px 0 30px;
padding:0;
display:block;
border:0;
border-radius:0;
background:
radial-gradient(circle at 78% 16%,rgba(155,77,255,.14),transparent 34%),
linear-gradient(145deg,#10131b 0%,#06070b 62%,#000 100%);
box-shadow:none;
isolation:isolate;
}
.sg-commercial-ad.sg-commercial-ad-home::before{
content:"";
position:absolute;
z-index:2;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg,rgba(0,0,0,.04) 18%,rgba(0,0,0,.18) 48%,rgba(0,0,0,.82) 83%,#000 100%),
linear-gradient(90deg,rgba(0,0,0,.26),transparent 44%,rgba(0,0,0,.08));
}
.sg-commercial-ad.sg-commercial-ad-home>img{
position:absolute;
z-index:0;
inset:0;
width:100%;
height:100%;
border-radius:0;
object-fit:cover;
object-position:center;
background:#080a0f;
filter:saturate(.98) contrast(1.035);
}
.sg-commercial-ad.sg-commercial-ad-home .sg-ad-copy{
position:absolute;
z-index:3;
right:max(18px,var(--safe-right,0px));
left:max(18px,var(--safe-left,0px));
bottom:78px;
max-width:min(620px,88vw);
margin-inline:auto;
text-align:center;
}
.sg-commercial-ad.sg-commercial-ad-home .sg-ad-copy span{
padding:5px 9px;
color:rgba(255,255,255,.76);
border:1px solid rgba(255,255,255,.13);
border-radius:999px;
background:rgba(7,8,12,.58);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
font-size:.62rem;
font-weight:850;
}
.sg-commercial-ad.sg-commercial-ad-home .sg-ad-copy strong{
margin-top:10px;
color:#fff;
font-size:clamp(1.35rem,5.2vw,2.35rem);
line-height:1.08;
font-weight:950;
letter-spacing:-.035em;
text-shadow:0 5px 22px rgba(0,0,0,.72);
}
.sg-commercial-ad.sg-commercial-ad-home .sg-ad-copy p{
max-width:520px;
margin:8px auto 0;
color:rgba(255,255,255,.70);
font-size:clamp(.73rem,2.3vw,.92rem);
line-height:1.58;
font-weight:650;
white-space:normal;
overflow:visible;
text-overflow:clip;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.sg-commercial-ad.sg-commercial-ad-home>button:not(.sg-ad-close){
position:absolute;
z-index:4;
right:50%;
bottom:24px;
min-width:148px;
min-height:42px;
padding:0 22px;
transform:translateX(50%);
border:0;
border-radius:999px;
background:linear-gradient(100deg,#F04AD8 0%,#9B4DFF 50%,#14D7FF 100%);
box-shadow:0 12px 30px rgba(155,77,255,.24);
color:#fff;
font-size:.78rem;
font-weight:950;
}
.sg-commercial-ad.sg-commercial-ad-home .sg-ad-close{
top:14px;
left:max(14px,var(--safe-left,0px));
width:36px;
height:36px;
color:rgba(255,255,255,.78);
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
background:rgba(0,0,0,.34);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
@media(max-width:560px){
.sg-commercial-ad:not(.sg-commercial-ad-home){grid-template-columns:auto 1fr;margin-inline:10px;padding-left:32px}
.sg-commercial-ad:not(.sg-commercial-ad-home)>img{width:62px;height:54px}
.sg-commercial-ad:not(.sg-commercial-ad-home)>button:not(.sg-ad-close){grid-column:1/-1;width:100%}
.sg-commercial-ad:not(.sg-commercial-ad-home) .sg-ad-copy p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sg-commercial-ad.sg-commercial-ad-home{min-height:clamp(360px,112vw,520px);margin-top:14px;margin-bottom:24px}
.sg-commercial-ad.sg-commercial-ad-home .sg-ad-copy{bottom:82px}
}
/* Shared/NotificationHub.razor inline-style 1 */
.sg-notification-bell{position:fixed;z-index:1400;top:max(14px,var(--safe-top,0px));left:14px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}.sg-notification-bell::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,#F04AD8,#9B4DFF,#14D7FF);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}.sg-notification-bell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sg-notification-count{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:linear-gradient(120deg,#F04AD8,#9B4DFF,#14D7FF);border:2px solid #000;color:#fff;display:grid;place-items:center;font-size:.61rem;font-weight:950}.sg-notification-scrim{position:fixed;z-index:1490;inset:0;border:0;background:rgba(0,0,0,.82)}
.sg-notification-panel{position:fixed;z-index:1500;top:0;left:0;width:min(440px,100vw);height:100dvh;background:#000;color:#fff;border-right:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;animation:sgNotificationSlide .28s cubic-bezier(.18,.82,.22,1)}.sg-notification-panel>header{padding:max(24px,var(--safe-top,0px)) 18px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.09);background:#000}.sg-notification-panel header span{display:block;color:#9B4DFF;font-size:.58rem;letter-spacing:1.3px;font-weight:900}.sg-notification-panel h2{margin:5px 0 0;font-size:1.5rem;font-weight:950}.sg-notification-actions{display:flex;gap:6px}.sg-notification-actions button{width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#000;color:#fff;font-size:1rem}.sg-notification-actions button:hover{border-color:#9B4DFF}.sg-notification-list{min-height:0;overflow:auto;padding:10px 10px calc(24px + var(--safe-bottom,0px));display:grid;align-content:start;gap:8px;background:#000}.sg-notification-item{position:relative;width:100%;min-height:96px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#000;color:#fff;display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;text-align:right;overflow:hidden}.sg-notification-item.unread{border-color:transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(115deg,#F04AD8,#9B4DFF,#14D7FF) border-box}.sg-notification-item::after{content:"";position:absolute;right:0;top:15px;bottom:15px;width:2px;background:linear-gradient(#F04AD8,#9B4DFF,#14D7FF);opacity:0}.sg-notification-item.unread::after{opacity:1}.sg-notification-media{width:74px;height:74px;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;background:#000;display:grid;place-items:center}.sg-notification-media img,.sg-notification-logo img{width:100%;height:100%;object-fit:cover}.sg-notification-logo{width:100%;height:100%;padding:12px;display:grid;place-items:center;background:#000}.sg-notification-logo img{object-fit:contain}.sg-notification-copy{min-width:0;align-self:center}.sg-notification-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.sg-notification-title-row strong{font-size:.9rem;font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sg-notification-title-row i{width:7px;height:7px;border-radius:50%;background:#9B4DFF;box-shadow:0 0 12px rgba(155,77,255,.7);flex:0 0 auto}.sg-notification-copy p{margin:5px 0;color:rgba(255,255,255,.68);font-size:.74rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sg-notification-copy small{font-size:.62rem;color:rgba(255,255,255,.42)}.sg-notification-empty{min-height:360px;padding:56px 26px;display:grid;place-items:center;align-content:center;text-align:center;color:rgba(255,255,255,.55)}.sg-notification-empty span{width:72px;height:72px;border:1px solid transparent;border-radius:50%;background:linear-gradient(#000,#000) padding-box,linear-gradient(115deg,#F04AD8,#9B4DFF,#14D7FF) border-box;display:grid;place-items:center;color:#fff;font-size:1.5rem}.sg-notification-empty h3{color:#fff;margin:12px 0 6px}.sg-notification-empty p{margin:0;line-height:1.7;font-size:.8rem}
.sg-notification-headsup{position:fixed;z-index:1450;top:max(70px,calc(var(--safe-top,0px) + 66px));left:14px;width:min(420px,calc(100vw - 28px));min-height:96px;padding:9px;border:1px solid transparent;border-radius:17px;background:linear-gradient(#000,#000) padding-box,linear-gradient(115deg,#F04AD8,#9B4DFF,#14D7FF) border-box;color:#fff;display:grid;grid-template-columns:76px minmax(0,1fr) 26px;gap:11px;align-items:center;text-align:right;box-shadow:0 20px 60px rgba(0,0,0,.62);animation:sgHeadsUp .36s cubic-bezier(.18,.82,.22,1)}.sg-headsup-image{width:76px;height:76px;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;background:#000}.sg-headsup-image img{width:100%;height:100%;object-fit:cover}.sg-headsup-image span{width:100%;height:100%;padding:12px;display:grid;place-items:center;background:#000}.sg-headsup-image span img{object-fit:contain}.sg-headsup-copy{min-width:0}.sg-headsup-copy small{display:block;color:#9B4DFF;font-size:.59rem;font-weight:900;letter-spacing:.7px;margin-bottom:4px}.sg-headsup-copy strong{display:block;font-size:.9rem;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sg-headsup-copy p{margin:4px 0 0;color:rgba(255,255,255,.68);font-size:.73rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sg-headsup-arrow{width:26px;height:40px;display:grid;place-items:center;border-right:1px solid rgba(255,255,255,.1);color:#14D7FF;font-size:1.45rem}
@keyframes sgNotificationSlide{from{transform:translateX(-28px);opacity:0}to{transform:none;opacity:1}}@keyframes sgHeadsUp{from{transform:translateY(-18px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@media(max-width:520px){.sg-notification-bell{top:max(10px,var(--safe-top,0px));left:10px;width:40px;height:40px}.sg-notification-panel{width:100vw;border-right:0}.sg-notification-headsup{left:8px;width:calc(100vw - 16px);top:max(58px,calc(var(--safe-top,0px) + 56px));grid-template-columns:62px minmax(0,1fr) 22px;min-height:82px;border-radius:14px}.sg-headsup-image{width:62px;height:62px;border-radius:10px}.sg-headsup-copy p{-webkit-line-clamp:1}.sg-notification-item{grid-template-columns:64px minmax(0,1fr);min-height:84px}.sg-notification-media{width:64px;height:64px}}
/* Shared/AccountPortal.razor inline-style 1 */
body .sg-account-portal{width:min(100%,1100px);margin:0 auto;display:grid;gap:18px;background:#000!important;color:#fff!important}
body .sg-account-profile-card{position:relative;min-height:190px;padding:26px;display:grid;grid-template-columns:150px minmax(0,1fr) 180px;align-items:center;gap:24px;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:24px;background:#000!important}
body .sg-account-avatar-wrap{position:relative;width:132px;height:132px;border:2px solid transparent;border-radius:50%;background:linear-gradient(#000,#000) padding-box,linear-gradient(135deg,#c62cff,#7050ff,#16a8ff) border-box;display:grid;place-items:center}
body .sg-account-avatar-wrap img{width:112px;height:112px;border-radius:50%;object-fit:cover;background:#000}
body .sg-account-avatar-wrap span{position:absolute;right:4px;bottom:8px;width:38px;height:38px;display:grid;place-items:center;border:1px solid #8d4fff;border-radius:50%;background:#000;color:#fff}
body .sg-account-profile-copy{min-width:0}.sg-account-profile-copy h2{margin:0;color:#fff;font-size:clamp(1.45rem,2.5vw,2rem);font-weight:950}.sg-account-profile-copy p{margin:8px 0;color:rgba(255,255,255,.62);font-size:.92rem}.sg-account-profile-copy b{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border:1px solid transparent;border-radius:999px;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box;color:#bc5cff;font-size:.85rem}.sg-account-brand-mark{display:grid;place-items:center;color:#744fff;opacity:.6}
body .sg-account-message{padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#000;color:#fff;font-weight:800}.sg-account-message.error{border-color:#b643ff}
body .sg-account-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.13);border-radius:18px;background:#000;overflow:hidden}.sg-account-stats div{min-height:105px;padding:14px;display:grid;place-items:center;align-content:center;gap:4px;border-inline-start:1px solid rgba(255,255,255,.1)}.sg-account-stats div:first-child{border-inline-start:0}.sg-account-stats .oscar-icon{color:#8c54ff}.sg-account-stats strong{font-size:1.2rem}.sg-account-stats span{color:rgba(255,255,255,.56);font-size:.78rem}
body .sg-account-plan-card{min-height:132px;padding:20px;display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:center;gap:20px;border:1px solid transparent;border-radius:22px;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box}.sg-account-plan-icon{width:82px;height:82px;display:grid;place-items:center;border:1px solid rgba(157,81,255,.6);border-radius:50%;color:#9b54ff;background:#000}.sg-account-plan-copy span{color:rgba(255,255,255,.6);font-size:.8rem}.sg-account-plan-copy h3{margin:3px 0;color:#aa55ff;font-size:1.45rem}.sg-account-plan-copy p,.sg-account-plan-copy small{margin:0;color:rgba(255,255,255,.6);font-size:.78rem}.sg-account-plan-action{height:48px;padding:0 22px;border:0;border-radius:10px;background:linear-gradient(100deg,#b51cff,#6352ff,#10a9ff);color:#fff;font:inherit;font-weight:900}
body .sg-account-quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.sg-account-quick-grid button{min-height:112px;padding:16px;display:grid;grid-template-columns:58px minmax(0,1fr) 22px;grid-template-rows:auto auto;align-items:center;column-gap:14px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:#000;color:#fff;text-align:right;font:inherit}.sg-account-quick-grid button>span{grid-row:1/3;width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:50%;color:#8d53ff}.sg-account-quick-grid strong{align-self:end}.sg-account-quick-grid small{align-self:start;color:rgba(255,255,255,.5);font-size:.72rem}.sg-account-quick-grid button>.oscar-icon{grid-column:3;grid-row:1/3;color:rgba(255,255,255,.55)}
body .sg-account-menu{border:1px solid rgba(255,255,255,.13);border-radius:18px;background:#000;overflow:hidden}.sg-account-menu button{width:100%;min-height:68px;padding:12px 18px;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;align-items:center;gap:13px;border:0;border-bottom:1px solid rgba(255,255,255,.09);background:#000;color:#fff;text-align:right;font:inherit}.sg-account-menu button:last-child{border-bottom:0}.sg-account-menu .menu-icon{width:44px;height:44px;display:grid;place-items:center;color:#8d53ff}.sg-account-menu strong,.sg-account-menu small{display:block}.sg-account-menu strong{font-size:.94rem}.sg-account-menu small{margin-top:4px;color:rgba(255,255,255,.48);font-size:.7rem}.sg-account-menu button>.oscar-icon{color:rgba(255,255,255,.5)}
body .sg-account-login{padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:#000}.sg-account-login header{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}.sg-account-login h3{margin:0;font-size:1.1rem}.sg-account-login p{margin:5px 0 0;color:rgba(255,255,255,.55);font-size:.78rem}.sg-account-login header>.oscar-icon{color:#8d53ff}.sg-account-login form{display:grid;grid-template-columns:1fr;gap:10px}.sg-account-login button[type=submit]{width:100%;height:50px;padding:0 22px;border:0;border-radius:9px;background:linear-gradient(135deg,#F04AD8 0%,#9B4DFF 48%,#14D7FF 100%);color:#fff;font:inherit;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s ease,opacity .12s ease}.sg-account-login button[type=submit]:active:not(:disabled){transform:scale(.99)}.sg-account-login button[type=submit]:disabled{opacity:.72}.sg-account-login-progress{margin:0;text-align:center;color:rgba(255,255,255,.58);font-size:.72rem}.sg-account-busy-dot{width:15px;height:15px;border:2px solid rgba(255,255,255,.32);border-top-color:#fff;border-radius:50%;animation:sg-account-spin .75s linear infinite}@keyframes sg-account-spin{to{transform:rotate(360deg)}}
body .sg-account-logout{min-height:52px;transition:transform .12s ease,opacity .12s ease;border:1px solid rgba(255,80,100,.55);border-radius:12px;background:#000;color:#ff6374;font:inherit;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px}.sg-account-logout:active:not(:disabled){transform:scale(.995)}.sg-account-logout:disabled{opacity:.7}
body .sg-account-offers{padding-top:4px}.sg-account-offers header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.sg-account-offers h3{margin:0}.sg-account-offers header span{color:rgba(255,255,255,.5);font-size:.72rem}.sg-account-offers article{min-height:86px;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid rgba(255,255,255,.09)}.sg-account-offers h4{margin:5px 0;color:#fff}.sg-account-offers p{margin:0;color:rgba(255,255,255,.55);font-size:.75rem}.sg-account-offers em{color:#a855ff;font-size:.68rem;font-style:normal}.sg-account-offers article button{height:40px;padding:0 16px;border:1px solid transparent;border-radius:8px;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box;color:#fff;font:inherit;font-weight:900}
@media(max-width:700px){body .sg-account-profile-card{min-height:150px;padding:18px;grid-template-columns:92px minmax(0,1fr);gap:15px}.sg-account-avatar-wrap{width:84px!important;height:84px!important}.sg-account-avatar-wrap img{width:70px!important;height:70px!important}.sg-account-avatar-wrap span{width:30px!important;height:30px!important}.sg-account-brand-mark{display:none!important}.sg-account-profile-copy h2{font-size:1.25rem!important}.sg-account-profile-copy p{font-size:.72rem!important}.sg-account-stats div{min-height:88px}.sg-account-plan-card{grid-template-columns:64px minmax(0,1fr);padding:17px;gap:13px}.sg-account-plan-icon{width:58px!important;height:58px!important}.sg-account-plan-action{grid-column:1/3;width:100%}.sg-account-quick-grid{grid-template-columns:1fr!important}.sg-account-login form{grid-template-columns:1fr!important}.sg-account-login button[type=submit]{width:100%}}
@media(max-width:420px){body .sg-account-profile-card{grid-template-columns:76px minmax(0,1fr);padding:14px}.sg-account-avatar-wrap{width:68px!important;height:68px!important}.sg-account-avatar-wrap img{width:56px!important;height:56px!important}.sg-account-profile-copy h2{font-size:1.15rem!important}.sg-account-profile-copy b{min-height:28px;padding:0 10px;font-size:.7rem}.sg-account-stats span{font-size:.62rem}.sg-account-stats strong{font-size:1.05rem}.sg-account-quick-grid button{min-height:98px}}
/* Shared/ContentComments.razor inline-style 1 */
body .pro-comments{width:min(100%,980px)!important;margin:26px auto 0!important;padding:0 0 34px!important;background:#000!important;color:#fff!important}
body .pro-comments-header{height:54px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}.pro-comments-header h2{margin:0!important;font-size:1.35rem!important}.pro-comments-header button{width:40px;height:40px;border:0;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center}
body .pro-comments-content-banner{position:relative;min-height:180px;margin-top:16px;padding:22px;display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:24px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:#000!important}.pro-comments-banner-art{width:150px;height:130px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:12px}.pro-comments-banner-art img{width:100%;height:100%;object-fit:cover}.pro-comments-content-banner span{color:rgba(255,255,255,.55);font-size:.8rem}.pro-comments-content-banner h3{margin:7px 0;font-size:1.5rem;text-align:start;unicode-bidi:plaintext}.pro-comments-content-banner p{margin:0;color:rgba(255,255,255,.55);font-size:.8rem}
body .pro-comments-tabs{display:flex;gap:9px;margin:18px 0;overflow-x:auto;scrollbar-width:none}.pro-comments-tabs::-webkit-scrollbar{display:none}.pro-comments-tabs button{height:42px;padding:0 18px;flex:0 0 auto;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:#000;color:rgba(255,255,255,.7);font:inherit;font-weight:800;display:flex;align-items:center;gap:7px}.pro-comments-tabs button.active{border-color:transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box;color:#fff}
body .pro-comment-composer{margin:0 0 16px!important;padding:14px!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) 48px!important;gap:10px!important;align-items:center!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:16px!important;background:#000!important}.pro-comment-composer>span{width:44px!important;height:44px!important;border:1px solid #8c4fff!important;border-radius:50%!important;background:#000!important;color:#fff!important;display:grid!important;place-items:center!important}.pro-comment-composer input{height:48px!important;padding:0 14px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:11px!important;background:#000!important;color:#fff!important;font:inherit!important}.pro-comment-composer>button{width:46px!important;height:46px!important;padding:0!important;border:0!important;border-radius:50%!important;background:linear-gradient(135deg,#b21fff,#6652ff,#13a8ff)!important;color:#fff!important;display:grid!important;place-items:center!important}.pro-comment-composer>button:disabled{opacity:.58!important}.comment-send-spinner{width:19px;height:19px;border:2px solid rgba(255,255,255,.38);border-top-color:#fff;border-radius:50%;animation:commentSendSpin .72s linear infinite}.comment-send-spinner.small{width:15px;height:15px;display:inline-block}.comment-send-progress{position:relative;height:32px;margin:-8px 4px 16px;overflow:hidden;border:1px solid rgba(138,79,255,.32);border-radius:9px;background:rgba(255,255,255,.035);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.76);font-size:.7rem;font-weight:800}.comment-send-progress i{position:absolute;inset:0 auto 0 -42%;width:42%;background:linear-gradient(90deg,transparent,rgba(181,45,255,.8),rgba(26,169,255,.9),transparent);animation:commentSendProgress 1.05s ease-in-out infinite}.comment-send-progress span{position:relative;z-index:1}.comment-send-progress.compact{height:27px;margin:7px 0 2px;font-size:.65rem}@keyframes commentSendSpin{to{transform:rotate(360deg)}}@keyframes commentSendProgress{0%{left:-42%}100%{left:100%}}
body .pro-comments .content-comments-list{display:grid!important;gap:13px!important}.pro-comments .content-comment{padding:18px!important;display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;gap:13px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:17px!important;background:#000!important;color:#fff!important}.pro-comments .content-comment.nested{margin-top:12px!important;padding:14px!important;border-radius:14px!important}.pro-comments .content-comment-avatar{width:48px!important;height:48px!important;border:1px solid transparent!important;border-radius:50%!important;background:linear-gradient(#000,#000) padding-box,linear-gradient(135deg,#c62cff,#7050ff,#16a8ff) border-box!important;color:#fff!important;display:grid!important;place-items:center!important}.pro-comments .content-comment header{display:flex!important;align-items:center!important;gap:8px!important}.pro-comments .content-comment header strong{font-size:.93rem!important}.pro-comments .content-comment header i{width:7px!important;height:7px!important;border-radius:50%!important;background:#9a50ff!important}.pro-comments .content-comment header small{color:rgba(255,255,255,.46)!important;font-size:.67rem!important}.pro-comments .content-comment p{margin:10px 0!important;color:rgba(255,255,255,.78)!important;font-size:.88rem!important;line-height:1.85!important;text-align:start!important;unicode-bidi:plaintext}.pro-comments .content-comment-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}.pro-comments .content-comment-actions button{height:32px!important;padding:0 10px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:999px!important;background:#000!important;color:rgba(255,255,255,.6)!important;font:inherit!important;font-size:.65rem!important;display:flex!important;align-items:center!important;gap:5px!important}.pro-comments .content-comment-actions .accent{color:#a75aff!important}.pro-comments .content-reply-composer{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;margin-top:10px!important}.pro-comments .content-reply-composer input{height:40px!important;padding:0 12px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:9px!important;background:#000!important;color:#fff!important}.pro-comments .content-reply-composer button{height:40px!important;padding:0 15px!important;border:1px solid transparent!important;border-radius:9px!important;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box!important;color:#fff!important}.pro-comments .content-comments-more{height:42px!important;margin:18px auto 0!important;padding:0 18px!important;border:1px solid transparent!important;border-radius:999px!important;background:linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box!important;color:#fff!important;display:flex!important;align-items:center!important;gap:7px!important}.pro-comments .content-comments-empty{min-height:190px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:7px!important;color:rgba(255,255,255,.5)!important}.pro-comments .content-comments-empty strong{color:#fff!important}
@media(max-width:640px){body .pro-comments{margin-top:16px!important}.pro-comments-header h2{font-size:1.18rem!important}.pro-comments-content-banner{min-height:135px!important;padding:13px!important;grid-template-columns:100px minmax(0,1fr)!important;gap:13px!important}.pro-comments-banner-art{width:100px!important;height:106px!important}.pro-comments-content-banner h3{font-size:1.08rem!important}.pro-comments-content-banner p{font-size:.68rem!important}.pro-comment-composer{padding:10px!important;grid-template-columns:40px minmax(0,1fr) 42px!important;gap:7px!important}.pro-comment-composer>span{width:38px!important;height:38px!important}.pro-comment-composer input{height:42px!important;font-size:.75rem!important}.pro-comment-composer>button{width:40px!important;height:40px!important}.pro-comments .content-comment{padding:13px!important;grid-template-columns:42px minmax(0,1fr)!important;gap:9px!important}.pro-comments .content-comment-avatar{width:40px!important;height:40px!important}.pro-comments .content-comment p{font-size:.76rem!important}}
/* Pages/MovieCollectionsPage.razor inline-style 1 */
.server-collections-shell .sgc-head{display:none!important}
.server-collections-shell .sgc-page>.sgc-wrap{padding-top:calc(var(--nova-compact-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)) + 14px)!important}
.server-collections-shell .collection-details-loading,
.server-collections-shell .collection-details-state{padding-top:calc(var(--nova-compact-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)) + 26px)!important}
/* Pages/MovieCollectionDetailsPage.razor inline-style 1 */
.server-collection-details-shell .collection-details-loading,
.server-collection-details-shell .collection-details-state{padding-top:calc(var(--nova-compact-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)) + 26px)!important}
/* Pages/PublicLinkResolver.razor inline-style 1 */
.public-link-resolver{min-height:calc(100dvh - 90px);display:grid;place-items:center;align-content:center;gap:13px;padding:40px 20px;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(86,109,255,.18),transparent 32%)}
.public-link-resolver img{width:88px;height:88px;border-radius:24px;box-shadow:0 25px 70px rgba(0,0,0,.5),0 0 45px rgba(86,109,255,.22)}
.public-link-resolver h1{margin:7px 0 0;font-size:clamp(29px,6vw,46px)}
.public-link-resolver p{margin:0;color:#9fa9bf}
.public-link-resolver button{margin-top:10px;padding:12px 20px;border:0;border-radius:13px;background:linear-gradient(105deg,#14D7FF,#566DFF,#9B4DFF);color:#fff;font-weight:900}
.public-link-resolver__spinner{width:35px;height:35px;margin-top:8px;border:3px solid rgba(255,255,255,.13);border-top-color:#14D7FF;border-radius:50%;animation:publicLinkSpin .75s linear infinite}
@keyframes publicLinkSpin{to{transform:rotate(360deg)}}
/* ===== source: windows-click-recovery.css ===== */
/* Windows WebView2 hit-testing guard. Keeps the visual design intact while making
all real controls clickable above decorative images/overlays. */
html.sg-windows-click-ready button,
html.sg-windows-click-ready a,
html.sg-windows-click-ready input,
html.sg-windows-click-ready select,
html.sg-windows-click-ready textarea,
html.sg-windows-click-ready label,
html.sg-windows-click-ready [role="button"],
html.sg-windows-click-ready [tabindex] {
pointer-events: auto !important;
}
html.sg-windows-click-ready .oscar-bottom-nav,
html.sg-windows-click-ready .oscar-bottom-nav * {
pointer-events: auto !important;
}
html.sg-windows-click-ready .safe-background-image,
html.sg-windows-click-ready .target-hero-shade,
html.sg-windows-click-ready .target-hero-artwork,
html.sg-windows-click-ready .shahid-card-shade,
html.sg-windows-click-ready .target-api-promo-shade,
html.sg-windows-click-ready .target-worldcup-shade,
html.sg-windows-click-ready .poster-gradient {
pointer-events: none !important;
}
html.sg-windows-click-ready .oscar-bottom-nav {
z-index: 170 !important;
}
html.sg-windows-click-ready .search-sheet { z-index: 180 !important; }
html.sg-windows-click-ready .menu-backdrop { z-index: 190 !important; }
html.sg-windows-click-ready .side-menu { z-index: 200 !important; }
/* ===== source: nova-identity-final.css ===== */
/* Space Gate Nova+ — FINAL COLOR IDENTITY LOCK
This file must be loaded last. It enforces the approved black + purple/magenta/blue identity. */
:root {
color-scheme: dark;
--nova-black: #000000;
--nova-black-2: #050812;
--nova-surface: #0d0d0d;
--nova-surface-2: #141414;
--nova-surface-3: #1a1a1a;
--nova-purple: #9B4DFF;
--nova-magenta: #F04AD8;
--nova-blue: #566DFF;
--nova-cyan: #14D7FF;
--nova-text: #ffffff;
--nova-text-2: rgba(255,255,255,.78);
--nova-muted: rgba(255,255,255,.56);
--nova-line: rgba(255,255,255,.08);
--nova-line-strong: rgba(255,255,255,.15);
--nova-brand-gradient: linear-gradient(135deg, #14D7FF 0%, #566DFF 34%, #9B4DFF 68%, #F04AD8 100%);
--nova-brand-gradient-x: linear-gradient(90deg, #14D7FF 0%, #566DFF 34%, #9B4DFF 68%, #F04AD8 100%);
--nova-brand-gradient-y: linear-gradient(180deg, #14D7FF 0%, #566DFF 34%, #9B4DFF 68%, #F04AD8 100%);
--nova-brand-shadow: 0 14px 34px rgba(155,77,255,.30);
--nova-blue-shadow: 0 14px 34px rgba(20,215,255,.22);
--oscar-bg: #000000 !important;
--oscar-bg-soft: #050505 !important;
--oscar-surface: #0d0d0d !important;
--oscar-surface-2: #141414 !important;
--oscar-surface-3: #1a1a1a !important;
--oscar-glass: rgba(13,13,13,.94) !important;
--oscar-text: #ffffff !important;
--oscar-text-2: rgba(255,255,255,.78) !important;
--oscar-muted: rgba(255,255,255,.56) !important;
--oscar-border: rgba(255,255,255,.08) !important;
--oscar-red: #9B4DFF !important;
--oscar-red-2: #14D7FF !important;
--oscar-yellow: #14D7FF !important;
--oscar-orange: #F04AD8 !important;
--oscar-cyan: #14D7FF !important;
--oscar-purple: #9B4DFF !important;
--accent: #9B4DFF !important;
}
/* True black application shell */
html,
body,
#app,
.app-root,
.oscar-app,
.oscar-main,
.native-view,
.sg-app-root,
.sg-main-content,
.mc-root,
.episode-details-page,
.matches-theme,
.anime-theme,
.catalog-app,
.account-page-app,
.favorites-page-app,
.notifications-page-app {
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
color: #ffffff !important;
}
/* Approved subtle surfaces only */
.card,
.panel,
.account-card,
.settings-card,
.match-card,
.channel-card,
.media-card,
.content-card,
.detail-card,
.favorite-card,
.notification-card,
.oscar-card,
.sg-card,
.mc-card,
.empty-card,
.catalog-empty,
.catalog-loading,
.search-sheet,
.side-menu,
.sg-side-drawer,
.anime-ref-card,
.anime-ref-grid-card,
.live-channel-tile {
background: #0d0d0d !important;
background-image: none !important;
border-color: rgba(255,255,255,.08) !important;
box-shadow: none !important;
}
/* Remove old colored page glows and non-identity gradients */
.oscar-app::before,
.oscar-app::after,
.native-view::before,
.native-view::after,
.account-page-app::before,
.favorites-page-app::before,
.notifications-page-app::before {
background: none !important;
box-shadow: none !important;
}
/* Navigation identity */
.oscar-bottom-nav,
.original-bottom-nav,
.nova-shell-nav,
.sg-bottom-nav {
background: rgba(0,0,0,.96) !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
box-shadow: none !important;
}
.oscar-bottom-nav button,
.original-bottom-nav button,
.nova-shell-nav button,
.sg-bottom-nav button {
color: rgba(255,255,255,.55) !important;
}
.oscar-bottom-nav button.active,
.original-bottom-nav button.active,
.nova-shell-nav button.active,
.sg-bottom-nav button.active,
.oscar-bottom-nav button.active svg,
.original-bottom-nav button.active svg,
.nova-shell-nav button.active svg,
.sg-bottom-nav button.active svg {
color: #9B4DFF !important;
fill: currentColor !important;
stroke: currentColor !important;
}
.oscar-bottom-nav button.active .nav-icon,
.original-bottom-nav button.active .nav-icon,
.nova-shell-nav button.active > span,
.sg-bottom-nav button.active span {
background: var(--nova-brand-gradient) !important;
color: #fff !important;
box-shadow: 0 10px 26px rgba(155,77,255,.28) !important;
}
/* Core accent controls */
.primary-action,
.secondary-action.accent,
.login-button,
.submit-button,
.save-button,
.play-button,
.hero-watch-button,
.hero-primary,
.action-primary,
.sg-primary-button,
.nova-primary,
.account-login-button,
.favorites-empty button,
.notifications-empty button,
.anime-primary-action,
.live-now,
.tab-btn.active,
.filter-pill.active,
.ref-filter-pill.active,
.live-forced-tab.active,
.live-forced-pill.active,
.anime-chip.kind,
.anime-ref-badge.kind,
.badge.active,
.quality-pill.active {
background: var(--nova-brand-gradient) !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 12px 28px rgba(155,77,255,.26) !important;
}
/* Outlined identity buttons */
.outline-action,
.secondary-action,
.hero-list-button,
.border-button,
.series-toolbar-button,
.movies-toolbar-button,
.anime-world-icon,
.anime-ref-icon,
.live-forced-icon,
.icon-button {
border-color: rgba(155,77,255,.55) !important;
color: #ffffff !important;
}
.hero-list-button,
.outline-action.brand-border {
background:
linear-gradient(#000,#000) padding-box,
var(--nova-brand-gradient) border-box !important;
border: 2px solid transparent !important;
}
/* Dots, indicators and separators */
.swiper-pagination-bullet-active,
.hero-dot.active,
.slider-dot.active,
.carousel-dot.active,
.home-hero-dot.active,
.pager-dot.active,
.active-dot,
.status-dot,
.anime-world-heading h2::before,
.anime-section-heading h2::before,
.anime-ref-catalog-header h1::before,
.section-title::before,
.rail-title::before,
.details-section h2::before,
.series-title::before {
background: var(--nova-brand-gradient-y) !important;
color: #9B4DFF !important;
}
/* Links and highlighted text */
a,
.link,
.show-all,
.view-all,
.home-rail-see-all,
.anime-world-heading button,
.anime-section-heading button,
.text-accent,
.highlight,
.accent-text {
color: #9B4DFF !important;
}
/* Replace legacy red/orange/green/yellow badges with identity palette */
.age-badge,
.age,
.anime-chip.age,
.anime-ref-badge.age,
.quality-badge,
.translate,
.anime-chip.translate,
.anime-ref-badge.translate,
.live-badge,
.status-badge,
.source-badge,
.episode-badge,
.rating-badge,
.match-status,
.badge-danger,
.badge-warning,
.badge-success,
.badge-live {
background: rgba(155,77,255,.94) !important;
color: #ffffff !important;
border-color: rgba(155,77,255,.35) !important;
}
.anime-chip.translate,
.anime-ref-badge.translate,
.translate,
.quality-badge,
.live-badge {
background: #14D7FF !important;
}
.anime-chip.age,
.anime-ref-badge.age,
.age,
.age-badge {
background: #F04AD8 !important;
}
/* Rating stars should not introduce yellow UI blocks; make them blue/purple text */
.rating-star,
.star,
[class*="star"],
[class*="rating"] svg {
color: #14D7FF !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* Form fields */
input,
select,
textarea,
.search-input,
.filter-input,
.account-input,
.settings-input {
background: #0d0d0d !important;
color: #ffffff !important;
border-color: rgba(255,255,255,.10) !important;
}
input:focus,
select:focus,
textarea:focus {
border-color: rgba(20,215,255,.75) !important;
box-shadow: 0 0 0 3px rgba(155,77,255,.18) !important;
}
/* Player identity */
.sg-player-main-play,
.sg-player-badge,
.sg-player-progress-fill,
.player-progress-fill,
.player-play-button,
.in-app-player .play-button {
background: var(--nova-brand-gradient) !important;
color: #ffffff !important;
box-shadow: var(--nova-brand-shadow) !important;
}
.sg-player-spinner {
border-top-color: #9B4DFF !important;
}
.sg-player-timeline input,
.sg-player-volume,
.sg-player-brightness,
input[type="range"] {
accent-color: #9B4DFF !important;
}
/* Keep backgrounds black for previously customized sections */
.home-shell,
.home-page,
.series-landing-app,
.movies-landing-app,
.wrestling-landing-app,
.anime-world-app,
.live-forced-catalog,
.live-catalog-app,
.movies-catalog-app,
.series-catalog-app,
.wrestling-catalog-app,
.anime-ref-catalog-app {
background: #000000 !important;
background-image: none !important;
}
@media (min-width: 760px) {
.media-card:hover,
.anime-ref-card:hover,
.anime-ref-grid-card:hover,
.live-channel-tile:hover {
border-color: rgba(20,215,255,.28) !important;
box-shadow: 0 18px 36px rgba(155,77,255,.16) !important;
}
}
/* Home screen final redesign lock */
.home-app,
.home-main,
.target-home,
.target-home-reference,
.shahid-home-reference,
.target-home-hero-shell,
.shahid-home-section {
background: #000000 !important;
background-image: none !important;
}
.professional-home-toolbar .icon-button.home-header-action,
.professional-home-toolbar .icon-button.home-menu-button,
.professional-home-toolbar .icon-button.home-header-action:hover,
.professional-home-toolbar .icon-button.home-menu-button:hover,
.professional-home-toolbar .icon-button.home-header-action:focus,
.professional-home-toolbar .icon-button.home-menu-button:focus {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.target-watch-button,
.hero-watch-button {
background: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 46%, #14D7FF 100%) !important;
color: #ffffff !important;
box-shadow: 0 16px 34px rgba(155,77,255,.30), 0 0 22px rgba(20,215,255,.16) !important;
}
.target-save-button,
.hero-list-button {
background:
linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)) padding-box,
linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
border: 3px solid transparent !important;
color: #ffffff !important;
box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 18px rgba(155,77,255,.20) !important;
}
.shahid-home-reference .target-hero-actions {
width: min(100%, 640px) !important;
margin-top: 20px !important;
gap: 16px !important;
}
.shahid-home-reference .target-watch-button,
.shahid-home-reference .target-save-button {
height: 58px !important;
min-height: 58px !important;
padding: 0 24px !important;
border-radius: 999px !important;
font-size: .98rem !important;
font-weight: 950 !important;
line-height: 1 !important;
}
.shahid-home-reference .target-save-button,
.shahid-home-reference .target-save-button.saved,
.shahid-home-reference .target-save-button:hover,
.shahid-home-reference .target-save-button:focus,
.shahid-home-reference .target-save-button:active {
border: 3px solid transparent !important;
background:
linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)) padding-box,
linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) border-box !important;
box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 18px rgba(155,77,255,.20) !important;
}
.target-hero-dots button.active,
.home-hero-dot.active,
.slider-dot.active {
background: linear-gradient(90deg, #F04AD8 0%, #9B4DFF 52%, #14D7FF 100%) !important;
}
/* Final visibility repair: remove the black transparent veil from app content. */
.target-hero-shade,
.spotlight-overlay,
.details-hero-shade,
.episode-detail-shade,
.nova-home-hero-shade,
.nova-details-shade,
.sg-notification-scrim,
.menu-backdrop,
.sg-backdrop {
display: none !important;
background: none !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.home-subscribe-cta {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.target-home-hero-shell::after,
.home-spotlight::after,
.details-backdrop::after,
.channel-details-hero::after,
.nova-home-hero::after,
.nova-details-hero::after,
.media-card::after,
.poster-wrap::after,
.nova-media-thumb::after,
.mc-video-thumb::after,
.mc-video-hero::after {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
}
.safe-background-image,
.target-hero-slide .safe-background-image,
.nova-home-hero-image,
.nova-details-backdrop,
.details-backdrop img,
.media-card img,
.nova-media-image {
opacity: 1 !important;
filter: none !important;
}
header.oscar-toolbar.home-toolbar,
header.oscar-toolbar.professional-home-toolbar,
.oscar-toolbar.home-toolbar {
background: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
@media (max-width: 600px) {
.shahid-home-reference .target-hero-actions {
width: 100% !important;
margin-top: 18px !important;
gap: 15px !important;
}
.shahid-home-reference .target-watch-button,
.shahid-home-reference .target-save-button {
height: 50px !important;
min-height: 50px !important;
padding: 0 15px !important;
border-width: 3px !important;
font-size: .88rem !important;
gap: 10px !important;
}
.shahid-home-reference .target-hero-dots {
bottom: 30px !important;
gap: 7px !important;
}
.shahid-home-reference .target-hero-dots button {
width: 27px !important;
height: 3px !important;
}
.shahid-home-reference .target-hero-dots button.active {
width: 34px !important;
}
}
/* FIX: My List hero button stays transparent; only the frame carries the screenshot purple/blue color. */
.shahid-home-reference .target-save-button,
.shahid-home-reference .target-save-button.saved,
.shahid-home-reference .target-save-button:hover,
.shahid-home-reference .target-save-button:focus,
.shahid-home-reference .target-save-button:active,
.target-save-button,
.target-save-button.saved,
.target-save-button:hover,
.target-save-button:focus,
.target-save-button:active,
.hero-list-button,
.hero-list-button:hover,
.hero-list-button:focus,
.hero-list-button:active {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
color: #ffffff !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(155,77,255,.18) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.shahid-home-reference .target-save-button::before,
.shahid-home-reference .target-save-button.saved::before,
.shahid-home-reference .target-save-button:hover::before,
.shahid-home-reference .target-save-button:focus::before,
.shahid-home-reference .target-save-button:active::before,
.target-save-button::before,
.target-save-button.saved::before,
.target-save-button:hover::before,
.target-save-button:focus::before,
.target-save-button:active::before,
.hero-list-button::before,
.hero-list-button:hover::before,
.hero-list-button:focus::before,
.hero-list-button:active::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
padding: 3px;
pointer-events: none;
background: linear-gradient(100deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
.shahid-home-reference .target-save-button > *,
.shahid-home-reference .target-save-button span,
.shahid-home-reference .target-save-button .oscar-icon,
.shahid-home-reference .target-save-button svg,
.target-save-button > *,
.target-save-button span,
.target-save-button .oscar-icon,
.target-save-button svg,
.hero-list-button > *,
.hero-list-button span,
.hero-list-button .oscar-icon,
.hero-list-button svg {
position: relative;
z-index: 1;
background: transparent !important;
background-image: none !important;
}
@supports not (-webkit-mask-composite: xor) {
.shahid-home-reference .target-save-button::before,
.shahid-home-reference .target-save-button.saved::before,
.shahid-home-reference .target-save-button:hover::before,
.shahid-home-reference .target-save-button:focus::before,
.shahid-home-reference .target-save-button:active::before,
.target-save-button::before,
.target-save-button.saved::before,
.target-save-button:hover::before,
.target-save-button:focus::before,
.target-save-button:active::before,
.hero-list-button::before,
.hero-list-button:hover::before,
.hero-list-button:focus::before,
.hero-list-button:active::before {
padding: 0;
border: 3px solid #8E44FF;
background: transparent;
-webkit-mask: none;
mask: none;
}
}
/* ===== source: nova-ui-fix.css ===== */
/* ==========================================================
Space Gate Nova — minimal compatibility fix
Keeps the OLD catalog appearance from css/nova-catalog.css.
This file intentionally avoids overriding CatalogBrowser / filters / chips.
========================================================== */
:root {
--sgn-safe-top: var(--safe-top, 0px);
--sgn-safe-bottom: var(--safe-bottom, 0px);
--sgn-purple: #9B4DFF;
--sgn-blue: #14D7FF;
--sgn-page-pad: clamp(14px, 4vw, 28px);
}
html, body, #app { background:#000 !important; }
body { color:#fff !important; }
/* Keep poster cards protected without changing the old catalog design. */
.media-poster-art,
.poster-shell,
.movie-poster-shell {
overflow: hidden !important;
}
.media-poster-art img,
.poster-shell img,
.movie-poster-shell img,
.media-poster-card img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Details: SafeImage child component sizing only. */
.details-app,
.details-page-shell,
.nova-media-details {
background: #000 !important;
color: #fff !important;
overflow-x: hidden !important;
}
.details-app .nova-hero-solid {
position: relative !important;
min-height: min(76dvh, 720px) !important;
width: 100% !important;
display: flex !important;
align-items: flex-end !important;
overflow: hidden !important;
background: #000 !important;
padding: 0 !important;
}
.details-app .nova-bg-layer.nova-fast-image,
.details-app .nova-bg-layer {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center top !important;
filter: brightness(.68) contrast(1.08) saturate(1.08) !important;
}
.details-app .nova-vignette-solid {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background:
linear-gradient(to top, #000 0%, rgba(0,0,0,.92) 19%, rgba(0,0,0,.60) 48%, rgba(0,0,0,.12) 100%),
radial-gradient(circle at 50% 100%, rgba(155,77,255,.19), transparent 44%) !important;
}
.details-app .nova-details-topbar {
position: absolute !important;
top: calc(var(--sgn-safe-top) + 16px) !important;
left: 18px !important;
right: 18px !important;
z-index: 6 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.details-app .nova-icon-btn {
width: 48px !important;
height: 48px !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,.08) !important;
background: rgba(0,0,0,.46) !important;
color: #fff !important;
backdrop-filter: blur(12px) !important;
}
.details-app .nova-topbar-actions { display:flex !important; gap:12px !important; }
.details-app .nova-container { width:100% !important; max-width: 1180px !important; margin:0 auto !important; position:relative !important; z-index:2 !important; }
.details-app .nova-hero-content {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
display: flex !important;
align-items: flex-end !important;
gap: clamp(18px, 4vw, 34px) !important;
padding: calc(var(--sgn-safe-top) + 88px) var(--sgn-page-pad) 34px !important;
}
.details-app .nova-poster-main.nova-fast-image,
.details-app .nova-poster-main {
width: clamp(145px, 18vw, 240px) !important;
height: auto !important;
max-width: 30vw !important;
aspect-ratio: 2 / 3 !important;
object-fit: cover !important;
border-radius: 22px !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 28px 74px rgba(0,0,0,.72) !important;
flex: 0 0 auto !important;
display: block !important;
}
.details-app .nova-info-stack { flex:1 1 auto !important; min-width:0 !important; padding:0 !important; }
.details-app .nova-title-main {
margin: 0 0 14px !important;
color:#fff !important;
font-size: clamp(2rem, 6vw, 4.4rem) !important;
line-height:1.05 !important;
font-weight:950 !important;
text-shadow:0 16px 42px rgba(0,0,0,.78) !important;
}
.details-app .nova-meta-row,
.details-app .nova-tags-row,
.details-app .nova-stats-row { display:flex !important; flex-wrap:wrap !important; gap:12px 16px !important; align-items:center !important; color:rgba(255,255,255,.72) !important; }
.details-app .nova-plot-main { max-width: 720px !important; margin: 16px 0 22px !important; color:rgba(255,255,255,.72) !important; line-height:1.9 !important; }
.details-app .nova-action-row { display:flex !important; gap:12px !important; }
.details-app .nova-btn-primary {
min-height: 54px !important;
padding: 0 28px !important;
border:0 !important;
border-radius: 14px !important;
background: linear-gradient(100deg, var(--sgn-purple), var(--sgn-blue)) !important;
color:#fff !important;
font-weight:950 !important;
box-shadow: 0 18px 44px rgba(68,91,255,.28) !important;
}
.details-app .nova-content-flow {
padding: 28px var(--sgn-page-pad) calc(var(--bottom-nav-h,78px) + var(--sgn-safe-bottom) + 24px) !important;
display:flex !important;
flex-direction:column !important;
gap:30px !important;
}
.details-app .nova-story-box { border:1px solid rgba(255,255,255,.06) !important; border-radius:20px !important; background:rgba(255,255,255,.035) !important; padding:20px !important; }
.details-app .nova-story-box p { color:rgba(255,255,255,.68) !important; line-height:1.9 !important; }
@media (max-width: 760px) {
.details-app .nova-hero-solid { min-height: 72dvh !important; }
.details-app .nova-hero-content {
min-height: 72dvh !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: center !important;
text-align: center !important;
gap: 10px !important;
padding: calc(var(--sgn-safe-top) + 78px) 20px 28px !important;
}
.details-app .nova-poster-main.nova-fast-image,
.details-app .nova-poster-main {
width: min(34vw, 134px) !important;
max-width: 134px !important;
border-radius: 18px !important;
}
.details-app .nova-title-main { font-size: clamp(1.9rem, 8.5vw, 2.8rem) !important; margin-bottom:10px !important; }
}
/* ===== source: nova-page-transitions.css ===== */
:root {
--sg-transition-fast: 180ms;
--sg-transition-normal: 320ms;
--sg-transition-slow: 460ms;
--sg-transition-ease: cubic-bezier(.18, .84, .28, 1);
}
html.sg-navigating,
html.sg-navigating body {
cursor: progress;
}
body {
overscroll-behavior-y: contain;
background: #000;
}
:is(a, button, .nav-icon, .filter-chip, .catalog-chip, .media-card, .poster-card, .catalog-card) {
-webkit-tap-highlight-color: transparent;
}
:is(a, button, .filter-chip, .catalog-chip, .media-card, .poster-card, .catalog-card) {
transition:
transform var(--sg-transition-fast) var(--sg-transition-ease),
opacity var(--sg-transition-fast) var(--sg-transition-ease),
border-color var(--sg-transition-normal) var(--sg-transition-ease),
background var(--sg-transition-normal) var(--sg-transition-ease),
box-shadow var(--sg-transition-normal) var(--sg-transition-ease);
}
:is(a, button, .filter-chip, .catalog-chip, .media-card, .poster-card, .catalog-card):active {
transform: scale(.975);
}
.original-bottom-nav a,
.oscar-bottom-nav a {
transition:
transform 220ms var(--sg-transition-ease),
opacity 220ms var(--sg-transition-ease),
color 260ms var(--sg-transition-ease),
filter 260ms var(--sg-transition-ease);
}
.original-bottom-nav a.active,
.oscar-bottom-nav a.active {
animation: sgNavActivePop 360ms var(--sg-transition-ease) both;
}
@keyframes sgNavActivePop {
0% { transform: translateY(8px) scale(.92); filter: blur(2px); }
68% { transform: translateY(-2px) scale(1.05); filter: blur(0); }
100% { transform: translateY(0) scale(1); filter: blur(0); }
}
.sg-list-refreshing :is(.media-card, .poster-card, .catalog-card) {
animation: sgListRefreshIn 360ms var(--sg-transition-ease) both;
}
@keyframes sgListRefreshIn {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
:is(a, button, .filter-chip, .catalog-chip, .media-card, .poster-card, .catalog-card, .original-bottom-nav a, .oscar-bottom-nav a) {
animation: none !important;
transition: none !important;
}
}
/* ===== source: nova-commercial-native-final.css ===== */
/* Space Gate Nova+ — commercial native polish layer
Loaded last. Keeps the current visual identity, only removes non-native chrome and improves motion/performance. */
:root {
--sg-native-ease: cubic-bezier(.18, .84, .28, 1);
--sg-native-fast: 140ms;
--sg-native-normal: 240ms;
--sg-native-header-bg: linear-gradient(to bottom, rgba(0,0,0,.86), rgba(0,0,0,.34), rgba(0,0,0,0));
}
html,
body {
background: #000 !important;
color-scheme: dark;
overscroll-behavior-y: contain;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
scroll-behavior: auto;
}
body {
margin: 0;
min-height: 100dvh;
touch-action: manipulation;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
input,
textarea,
[contenteditable="true"] {
-webkit-user-select: text;
user-select: text;
}
:is(a, button, [role="button"], .oscar-card, .media-card, .poster-card, .catalog-card, .home-rail-card, .channel-card) {
-webkit-tap-highlight-color: transparent !important;
}
button,
a,
[role="button"] {
touch-action: manipulation;
}
/* رؤوس الصفحات: إزالة الإطار / الخلفية من الأزرار الأيقونية فقط */
:is(
header,
.oscar-toolbar,
.professional-home-toolbar,
.catalog-landing-toolbar,
.nova-page-header,
.nova-catalog-header,
.movies-page-toolbar,
.series-page-toolbar,
.anime-page-toolbar,
.wrestling-page-toolbar,
.details-toolbar,
.details-header,
.account-header,
.notifications-header,
.settings-header
) :is(
.catalog-landing-toolbar-button,
.icon-button,
.toolbar-button,
.header-button,
.page-icon-button,
.back-button,
.search-button,
.home-header-action,
.home-menu-button,
button[aria-label]
) {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
padding: 0 !important;
display: inline-grid;
place-items: center;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: #fff !important;
}
:is(
header,
.oscar-toolbar,
.professional-home-toolbar,
.catalog-landing-toolbar,
.nova-page-header,
.nova-catalog-header,
.movies-page-toolbar,
.series-page-toolbar,
.anime-page-toolbar,
.wrestling-page-toolbar,
.details-toolbar,
.details-header,
.account-header,
.notifications-header,
.settings-header
) :is(
.catalog-landing-toolbar-button,
.icon-button,
.toolbar-button,
.header-button,
.page-icon-button,
.back-button,
.search-button,
.home-header-action,
.home-menu-button,
button[aria-label]
)::before,
:is(
header,
.oscar-toolbar,
.professional-home-toolbar,
.catalog-landing-toolbar,
.nova-page-header,
.nova-catalog-header,
.movies-page-toolbar,
.series-page-toolbar,
.anime-page-toolbar,
.wrestling-page-toolbar,
.details-toolbar,
.details-header,
.account-header,
.notifications-header,
.settings-header
) :is(
.catalog-landing-toolbar-button,
.icon-button,
.toolbar-button,
.header-button,
.page-icon-button,
.back-button,
.search-button,
.home-header-action,
.home-menu-button,
button[aria-label]
)::after {
content: none !important;
display: none !important;
}
:is(
header,
.oscar-toolbar,
.professional-home-toolbar,
.catalog-landing-toolbar,
.nova-page-header,
.nova-catalog-header,
.movies-page-toolbar,
.series-page-toolbar,
.anime-page-toolbar,
.wrestling-page-toolbar,
.details-toolbar,
.details-header,
.account-header,
.notifications-header,
.settings-header
) :is(.catalog-landing-toolbar-button, .icon-button, .toolbar-button, .header-button, .page-icon-button, .back-button, .search-button, .home-header-action, .home-menu-button, button[aria-label]):active {
transform: scale(.9) !important;
background: transparent !important;
box-shadow: none !important;
}
:is(header, .oscar-toolbar, .catalog-landing-toolbar, .professional-home-toolbar) :is(svg, .oscar-icon) {
filter: drop-shadow(0 2px 8px rgba(0,0,0,.74));
}
/* الخط الذي كان ظاهرًا أسفل رؤوس الأفلام/المسلسلات والكتالوجات */
.catalog-landing-toolbar,
.catalog-landing-app .catalog-landing-toolbar,
.catalog-landing-movie .catalog-landing-toolbar,
.catalog-landing-series .catalog-landing-toolbar,
.catalog-landing-anime .catalog-landing-toolbar,
.catalog-landing-wrestling .catalog-landing-toolbar,
header.oscar-toolbar,
.nova-shell-header,
.nova-page-header,
.nova-catalog-header,
.movies-page-toolbar,
.series-page-toolbar,
.anime-page-toolbar,
.wrestling-page-toolbar,
.details-toolbar,
.details-header {
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.catalog-landing-toolbar {
background: var(--sg-native-header-bg) !important;
}
/* لا تجعل خلفية الرأس ترسم خطًا رفيعًا وهميًا بعد التدرج */
.catalog-landing-toolbar::before,
.catalog-landing-toolbar::after,
header.oscar-toolbar::before,
header.oscar-toolbar::after,
.nova-page-header::before,
.nova-page-header::after,
.nova-catalog-header::before,
.nova-catalog-header::after {
content: none !important;
display: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* سلاسة تجارية مع الحفاظ على الشكل الحالي */
:is(.oscar-card, .media-card, .poster-card, .catalog-card, .home-rail-card, .channel-card, .filter-chip, .catalog-chip, .primary-action, .nav-item, .bottom-nav-item) {
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform var(--sg-native-fast) var(--sg-native-ease), opacity var(--sg-native-fast) var(--sg-native-ease);
}
:is(.oscar-card, .media-card, .poster-card, .catalog-card, .home-rail-card, .channel-card):active {
transform: translateZ(0) scale(.982);
}
:is(button, a, .filter-chip, .catalog-chip, .primary-action):active {
transform: scale(.965);
}
:is(.poster-wrap, .media-card img, .oscar-card img, .home-rail-card img, .catalog-card img, .target-home img, .catalog-landing-reference img) {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}
/* تحسين الأداء عند القوائم الطويلة بدون تغيير الشكل */
@supports (content-visibility: auto) {
:is(.oscar-card, .media-card, .poster-card, .catalog-card, .home-rail-card, .channel-card) {
content-visibility: auto;
contain-intrinsic-size: 220px 340px;
}
:is(.oscar-section, .home-rail-section, .catalog-section, .target-home-rail) {
content-visibility: auto;
contain-intrinsic-size: 420px;
}
}
/* إخفاء أي Scrollbar ويب حتى يكون الإحساس Android أصلي */
* {
scrollbar-width: none;
}
*::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
/* ثبات المساحة الآمنة في Android */
.oscar-app,
.catalog-landing-app,
.nova-app-shell,
.main-layout-shell {
min-height: 100dvh;
background: #000 !important;
}
/* منع وميض أبيض أو رمادي أثناء الانتقال */
#app,
#blazor-error-ui,
.sg-route-frame,
.sg-route-surface {
background: #000 !important;
}
.sg-native-cold-start :is(.oscar-card, .media-card, .poster-card, .catalog-card, .home-rail-card) {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
}
.sg-in-view {
opacity: 1;
}
@media (max-width: 600px) {
:is(header, .catalog-landing-toolbar, .oscar-toolbar) :is(.catalog-landing-toolbar-button, .icon-button, .toolbar-button, .header-button, .page-icon-button, .back-button, .search-button, button[aria-label]) {
width: 34px;
height: 34px;
min-width: 34px;
min-height: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
.sg-header-icon-plain {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sg-native-pressed {
transform: scale(.965) translateZ(0) !important;
}
/* ===== source: nova-minimal-catalog-fixed-nav.css ===== */
/* Space Gate Nova — minimal catalog pages + fixed bottom navigation
Loaded last. Keeps the approved old visual identity, removes catalog header/statistics only. */
:root {
--sg-catalog-top-gap: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px);
--sg-bottom-fixed-z: 2147483000;
}
/* لا تجعل أي حاوية عليا تصنع containing block يجعل المنيو السفلي يتحرك مع المحتوى */
html,
body,
#app,
.app-root,
.main-layout-shell,
.oscar-app,
.native-view,
.catalog-landing-app,
.nova-app-shell {
transform: none !important;
perspective: none !important;
filter: none !important;
}
/* صفحات كل الأفلام/كل المسلسلات/كل الأنمي: حذف الرأس والإحصائيات بالكامل */
.nova-catalog-page {
padding-top: var(--sg-catalog-top-gap) !important;
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 26px) !important;
background: #000 !important;
}
.nova-catalog-hero,
.nova-catalog-stats,
.nova-eyebrow,
.nova-result-summary:not(.silent) {
display: none !important;
}
/* زر رجوع أيقوني فقط، بدون رأس، مفيد للويندوز ولا يضيف شريطًا بصريًا */
.nova-catalog-minimal-actions {
min-height: 38px;
margin: 0 0 8px;
display: flex;
align-items: center;
justify-content: flex-start;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.nova-catalog-back-plain,
.nova-catalog-back-plain:hover,
.nova-catalog-back-plain:focus,
.nova-catalog-back-plain:focus-visible,
.nova-catalog-back-plain:active {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: #fff !important;
transform: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.nova-catalog-back-plain::before,
.nova-catalog-back-plain::after {
content: none !important;
display: none !important;
}
.nova-catalog-back-plain:active { opacity: .68; }
/* اجعل الفلاتر والأنواع هي أول ما يراه المستخدم */
.nova-catalog-controls {
margin-top: 0 !important;
margin-bottom: 10px !important;
border: 0 !important;
box-shadow: none !important;
}
.nova-category-strip {
margin-top: 8px !important;
margin-bottom: 14px !important;
padding-bottom: 2px !important;
}
.nova-category-strip button small,
.nova-category-strip .count,
.nova-category-strip [data-count] {
display: none !important;
}
/* شريط تحديث صامت بدون أرقام أو إحصائيات */
.nova-result-summary.silent {
min-height: 18px !important;
height: 18px !important;
margin: 0 0 6px !important;
padding: 0 !important;
justify-content: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* تثبيت المنيو السفلي بشكل صارم حتى لا يتحرك مع المحتوى */
nav.oscar-bottom-nav.original-bottom-nav,
body nav.oscar-bottom-nav.original-bottom-nav,
html body nav.oscar-bottom-nav.original-bottom-nav {
position: fixed !important;
z-index: var(--sg-bottom-fixed-z) !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
top: auto !important;
width: 100vw !important;
max-width: 100vw !important;
height: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
margin: 0 !important;
transform: translate3d(0,0,0) !important;
will-change: transform !important;
contain: layout paint style !important;
pointer-events: auto !important;
overscroll-behavior: contain !important;
}
/* مساحة حماية حتى لا تختفي البطاقات خلف المنيو */
.oscar-app,
.native-view,
.catalog-landing-main,
.nova-catalog-page,
.movies-catalog-page,
.series-catalog-page,
.anime-catalog-page,
.wrestling-catalog-page {
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 24px) !important;
}
/* منع أي animation/transition من تحريك المنيو */
nav.oscar-bottom-nav.original-bottom-nav,
nav.oscar-bottom-nav.original-bottom-nav * {
animation-name: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked {
position: fixed !important;
bottom: 0 !important;
}
@media (max-width: 680px) {
.nova-catalog-page { padding-inline: 12px !important; }
.nova-catalog-minimal-actions { min-height: 32px; margin-bottom: 6px; }
.nova-catalog-back-plain { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; }
.nova-select-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* ===== source: nova-video-transparent-fixed-nav.css ===== */
/* Space Gate Nova+ final layer: transparent video/startup status header + truly fixed bottom menu. */
:root {
--sg-bottom-nav-z-final: 2147483000;
}
html,
body {
background: #000 !important;
min-height: 100dvh !important;
overscroll-behavior-y: auto !important;
transform: none !important;
perspective: none !important;
filter: none !important;
}
#app,
.app-root,
.main-layout-shell,
.oscar-app,
.native-view,
.nova-app-shell,
.catalog-landing-app {
background: #000 !important;
min-height: 100dvh !important;
transform: none !important;
perspective: none !important;
filter: none !important;
}
body.sg-bottom-nav-portaled {
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
}
/* Absolute final lock: the nav is moved under by JS, away from any scrolling page container. */
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked,
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked {
position: fixed !important;
z-index: var(--sg-bottom-nav-z-final) !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
max-width: 100vw !important;
height: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
margin: 0 !important;
transform: none !important;
translate: none !important;
will-change: auto !important;
contain: layout paint style !important;
pointer-events: auto !important;
background: rgba(5,5,6,.985) !important;
}
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal *,
nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked * {
animation-name: none !important;
}
.oscar-app,
.native-view,
.catalog-landing-main,
.nova-catalog-page,
.movies-catalog-page,
.series-catalog-page,
.anime-catalog-page,
.wrestling-catalog-page,
.details-page,
.channel-details {
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 22px) !important;
}
/* Video/startup headers: no strip above the video, only system icons over content. */
.video-topbar,
.player-topbar,
.video-header,
.player-header,
.startup-header,
.startup-video-header,
.sg-video-header,
.sg-player-header,
.secure-start-header,
.nova-secure-start,
.nova-startup-badge,
.nova-loading-badge,
.header-bar.video,
.header-bar.player {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-bottom: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.video-topbar::before, .video-topbar::after,
.player-topbar::before, .player-topbar::after,
.video-header::before, .video-header::after,
.player-header::before, .player-header::after,
.startup-header::before, .startup-header::after,
.startup-video-header::before, .startup-video-header::after,
.secure-start-header::before, .secure-start-header::after,
.nova-secure-start::before, .nova-secure-start::after,
.nova-startup-badge::before, .nova-startup-badge::after {
content: none !important;
display: none !important;
}
/* Video header pass for startup/player surfaces. */
.sg-player-layer,
.sg-player-shell {
inset: 0 !important;
width: 100dvw !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
}
.sg-player-topbar,
.mc-video-topbar,
.video-header,
.video-topbar,
.player-header,
.player-topbar,
.splash-header,
.startup-header,
.startup-video-header,
.secure-start-header,
.status-strip,
.top-safe-area {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sg-player-topbar {
margin: 0 !important;
padding: calc(8px + var(--safe-top, 0px)) 14px 8px !important;
}
.sg-player-topbar::before, .sg-player-topbar::after,
.mc-video-topbar::before, .mc-video-topbar::after,
.video-header::before, .video-header::after,
.video-topbar::before, .video-topbar::after,
.player-header::before, .player-header::after,
.player-topbar::before, .player-topbar::after,
.splash-header::before, .splash-header::after,
.startup-header::before, .startup-header::after,
.startup-video-header::before, .startup-video-header::after,
.secure-start-header::before, .secure-start-header::after,
.status-strip::before, .status-strip::after,
.top-safe-area::before, .top-safe-area::after {
content: none !important;
display: none !important;
}
.status-strip,
.top-safe-area {
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.sg-player-topbar .sg-player-icon,
.sg-player-topbar .sg-player-select-wrap,
.mc-video-topbar button,
.video-header :is(button, a, .icon-button),
.video-topbar :is(button, a, .icon-button),
.player-header :is(button, a, .icon-button),
.player-topbar :is(button, a, .icon-button),
.splash-header :is(button, a, .icon-button),
.startup-header :is(button, a, .icon-button),
.secure-start-header :is(button, a, .icon-button) {
background: transparent !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.mc-video-details {
position: relative !important;
padding-top: 0 !important;
}
.mc-video-details > .mc-video-topbar {
position: absolute !important;
z-index: 8 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
min-height: calc(58px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
margin: 0 !important;
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px) var(--page-pad, 16px) 8px !important;
}
.mc-video-details > .mc-video-hero {
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Final video edge-to-edge lock: only video/startup header surfaces are affected. */
.sg-player-layer,
.sg-player-shell {
inset: 0 !important;
width: 100dvw !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
}
.video-header,
.video-topbar,
.player-header,
.player-topbar,
.splash-header,
.startup-header,
.startup-video-header,
.secure-start-header,
.status-strip,
.top-safe-area,
.sg-video-header,
.sg-player-header,
.sg-player-topbar,
.mc-video-topbar {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.video-header::before, .video-header::after,
.video-topbar::before, .video-topbar::after,
.player-header::before, .player-header::after,
.player-topbar::before, .player-topbar::after,
.splash-header::before, .splash-header::after,
.startup-header::before, .startup-header::after,
.startup-video-header::before, .startup-video-header::after,
.secure-start-header::before, .secure-start-header::after,
.status-strip::before, .status-strip::after,
.top-safe-area::before, .top-safe-area::after,
.sg-video-header::before, .sg-video-header::after,
.sg-player-header::before, .sg-player-header::after,
.sg-player-topbar::before, .sg-player-topbar::after,
.mc-video-topbar::before, .mc-video-topbar::after {
content: none !important;
display: none !important;
}
.status-strip,
.top-safe-area {
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.sg-player-topbar {
top: 0 !important;
margin: 0 !important;
min-height: calc(58px + var(--safe-top, 0px)) !important;
padding: calc(8px + var(--safe-top, 0px)) 14px 8px !important;
}
.sg-player-topbar .sg-player-icon,
.sg-player-topbar .sg-player-select-wrap,
.mc-video-topbar button,
.video-header :is(button, a, .icon-button),
.video-topbar :is(button, a, .icon-button),
.player-header :is(button, a, .icon-button),
.player-topbar :is(button, a, .icon-button),
.splash-header :is(button, a, .icon-button),
.startup-header :is(button, a, .icon-button),
.secure-start-header :is(button, a, .icon-button) {
background: transparent !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.mc-video-details {
position: relative !important;
padding-top: 0 !important;
}
.mc-video-details > .mc-video-topbar {
position: absolute !important;
z-index: 8 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
min-height: calc(58px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
margin: 0 !important;
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px) var(--page-pad, 16px) 8px !important;
}
.mc-video-details > .mc-video-hero {
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
.video-topbar :is(button, a, .icon-button),
.player-topbar :is(button, a, .icon-button),
.video-header :is(button, a, .icon-button),
.player-header :is(button, a, .icon-button) {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
@supports (padding: env(safe-area-inset-top)) {
.video-topbar,
.player-topbar,
.video-header,
.player-header {
padding-top: calc(var(--safe-top,0px) + 4px) !important;
}
}
/* SCROLL-SAFE PATCH ---------------------------------------------------------
Keep the bottom nav fixed without touching the page scroll container. */
html,
body,
#app,
.app-root,
.main-layout-shell,
.sg-route-frame,
.sg-route-surface {
overflow-y: auto !important;
touch-action: pan-y !important;
-webkit-overflow-scrolling: touch !important;
}
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-portal,
html body > nav.oscar-bottom-nav.original-bottom-nav.sg-bottom-nav-locked {
touch-action: pan-x manipulation !important;
overscroll-behavior: contain !important;
}
body.sg-bottom-nav-fixed-body,
body.sg-bottom-nav-portaled {
overflow-y: auto !important;
touch-action: pan-y !important;
}
/* FINAL v2: Scroll-safe native Android layer --------------------------------
No JS portaling, no transformed route containers, and the browser document is the only vertical scroll root. */
html,
body,
#app,
.app-root {
height: auto !important;
min-height: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
touch-action: pan-y !important;
overscroll-behavior-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
body,
body.sg-bottom-nav-fixed-body,
body.sg-bottom-nav-portaled {
overflow-y: auto !important;
touch-action: pan-y !important;
}
.main-layout-shell,
.sg-route-frame,
.sg-route-surface,
.oscar-app,
.oscar-main,
.native-view,
.catalog-landing-main,
.nova-catalog-page,
.movies-catalog-page,
.series-catalog-page,
.anime-catalog-page,
.wrestling-catalog-page,
.details-page,
.channel-details {
height: auto !important;
min-height: 100dvh !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: visible !important;
transform: none !important;
translate: none !important;
contain: none !important;
pointer-events: auto !important;
touch-action: pan-y !important;
}
.sg-route-is-navigating .sg-route-frame {
pointer-events: auto !important;
}
/* Fixed bottom menu without moving it to body. */
nav.oscar-bottom-nav.original-bottom-nav,
.oscar-bottom-nav.original-bottom-nav {
position: fixed !important;
z-index: 2147483000 !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
transform: none !important;
translate: none !important;
contain: none !important;
pointer-events: auto !important;
touch-action: pan-x manipulation !important;
}
.oscar-app,
.native-view,
.catalog-landing-main,
.nova-catalog-page,
.movies-catalog-page,
.series-catalog-page,
.anime-catalog-page,
.wrestling-catalog-page,
.details-page,
.channel-details {
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 28px) !important;
}
/* Professional video page: completely transparent top/header/status area. */
.sg-player-layer,
.sg-player-shell {
background: #000 !important;
}
.sg-player-vignette {
background: linear-gradient(180deg, transparent 0%, transparent 64%, rgba(0,0,0,.88) 100%) !important;
}
.sg-player-topbar,
.sg-player-topbar::before,
.sg-player-topbar::after {
background: transparent !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sg-player-topbar {
min-height: calc(58px + var(--safe-top, 0px)) !important;
padding-top: calc(8px + var(--safe-top, 0px)) !important;
}
.sg-player-topbar .sg-player-icon,
.sg-player-topbar .sg-player-select-wrap {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Catalog filters exactly like the channels page: black headerless tabs + pill filters. */
.nova-catalog-page {
padding-top: calc(10px + var(--safe-top, 0px)) !important;
background: #000 !important;
}
.nova-catalog-minimal-actions {
position: sticky !important;
top: var(--safe-top, 0px) !important;
z-index: 60 !important;
min-height: 38px !important;
padding: 2px 12px 4px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
background: #000 !important;
border: 0 !important;
box-shadow: none !important;
}
.nova-catalog-back-plain,
.nova-catalog-back-plain:hover,
.nova-catalog-back-plain:focus,
.nova-catalog-back-plain:active {
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #fff !important;
box-shadow: none !important;
outline: none !important;
}
.nova-catalog-controls {
padding: 0 12px 8px !important;
background: #000 !important;
border: 0 !important;
box-shadow: none !important;
}
.nova-search-box {
min-height: 40px !important;
border: 0 !important;
border-radius: 12px !important;
background: #111 !important;
box-shadow: none !important;
}
.nova-category-strip {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 12px 10px !important;
margin: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
direction: rtl !important;
scrollbar-width: none !important;
background: #000 !important;
border: 0 !important;
box-shadow: none !important;
}
.nova-category-strip::-webkit-scrollbar,
.nova-select-row::-webkit-scrollbar { display: none !important; }
.nova-category-strip button,
.nova-category-strip .nova-category-chip {
flex: 0 0 auto !important;
height: 34px !important;
min-width: auto !important;
padding: 0 14px !important;
border: 0 !important;
border-radius: 6px !important;
background: transparent !important;
color: #999 !important;
font-size: .95rem !important;
font-weight: 600 !important;
white-space: nowrap !important;
box-shadow: none !important;
}
.nova-category-strip button.active,
.nova-category-strip .nova-category-chip.active,
.nova-category-strip button.is-active,
.nova-category-strip .nova-category-chip.is-active {
background: linear-gradient(to left, #14D7FF, #9B4DFF) !important;
color: #fff !important;
font-weight: 700 !important;
}
.nova-select-row,
.nova-live-filter-row {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 0 8px !important;
margin: 8px 0 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
direction: rtl !important;
scrollbar-width: none !important;
background: transparent !important;
}
.nova-select-row label,
.nova-live-filter-row label {
position: relative !important;
flex: 0 0 auto !important;
height: 30px !important;
min-width: auto !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border: 0 !important;
border-radius: 15px !important;
background-color: #1a1a1a !important;
color: #ccc !important;
font-size: .8rem !important;
font-weight: 600 !important;
white-space: nowrap !important;
box-shadow: none !important;
}
.nova-select-row label span,
.nova-live-filter-row label span {
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
}
.nova-select-row label:has(select:not([value="all"])),
.nova-live-filter-row label:has(select:not([value="all"])) {
color: #fff !important;
}
.nova-select-row label select,
.nova-live-filter-row label select {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
cursor: pointer !important;
}
.nova-result-summary,
.nova-result-summary.silent {
display: none !important;
}
/* SG RESTORE v3: startup video + scroll-safe layout bottom nav ----------------
This layer does not portal/move elements with JS and does not turn the page into
a fixed-height scroll trap. It only locks the layout-level nav created in MainLayout. */
html,
body,
#app,
.app-root,
.main-layout-shell,
.sg-route-frame,
.sg-route-surface {
overflow-x: hidden !important;
transform: none !important;
contain: none !important;
}
html,
body,
#app,
.app-root {
height: auto !important;
min-height: 100% !important;
overflow-y: auto !important;
touch-action: pan-y !important;
-webkit-overflow-scrolling: touch !important;
}
.main-layout-shell,
.sg-route-frame,
.sg-route-surface,
.oscar-app,
.oscar-main,
.native-view,
.catalog-landing-main,
.nova-catalog-page,
.movies-catalog-page,
.series-catalog-page,
.anime-catalog-page,
.wrestling-catalog-page,
.details-page,
.channel-details {
height: auto !important;
min-height: 100dvh !important;
max-height: none !important;
overflow-y: visible !important;
touch-action: pan-y !important;
padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 28px) !important;
}
.sg-layout-bottom-nav {
display: block !important;
visibility: visible !important;
position: fixed !important;
z-index: 2147483000 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
height: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
pointer-events: none !important;
transform: none !important;
translate: none !important;
contain: none !important;
isolation: isolate !important;
}
.sg-layout-bottom-nav > nav.oscar-bottom-nav.original-bottom-nav {
display: flex !important;
visibility: visible !important;
position: fixed !important;
z-index: 2147483000 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
pointer-events: auto !important;
transform: none !important;
translate: none !important;
contain: layout paint style !important;
touch-action: pan-x manipulation !important;
}
/* Hide older page-level copies only, not the layout-level copy. */
.sg-route-frame nav.oscar-bottom-nav.original-bottom-nav,
.sg-route-surface nav.oscar-bottom-nav.original-bottom-nav {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Transparent video/startup top strip: no solid status/header band. */
.video-topbar,
.player-topbar,
.video-header,
.player-header,
.startup-header,
.startup-video-header,
.sg-video-header,
.sg-player-header,
.secure-start-header,
.nova-secure-start,
.nova-startup-badge,
.nova-loading-badge,
.header-bar.video,
.header-bar.player {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
outline: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.video-topbar::before, .video-topbar::after,
.player-topbar::before, .player-topbar::after,
.video-header::before, .video-header::after,
.player-header::before, .player-header::after,
.startup-header::before, .startup-header::after,
.startup-video-header::before, .startup-video-header::after,
.secure-start-header::before, .secure-start-header::after,
.nova-secure-start::before, .nova-secure-start::after,
.nova-startup-badge::before, .nova-startup-badge::after {
content: none !important;
display: none !important;
}
/* Absolute final video header pass. Keep this block at EOF. */
.sg-player-layer,
.sg-player-shell {
inset: 0 !important;
width: 100dvw !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
}
.sg-player-topbar,
.mc-video-topbar,
.video-header,
.video-topbar,
.player-header,
.player-topbar,
.splash-header,
.startup-header,
.startup-video-header,
.secure-start-header,
.status-strip,
.top-safe-area {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sg-player-topbar {
margin: 0 !important;
padding: calc(8px + var(--safe-top, 0px)) 14px 8px !important;
}
.sg-player-topbar::before, .sg-player-topbar::after,
.mc-video-topbar::before, .mc-video-topbar::after,
.video-header::before, .video-header::after,
.video-topbar::before, .video-topbar::after,
.player-header::before, .player-header::after,
.player-topbar::before, .player-topbar::after,
.splash-header::before, .splash-header::after,
.startup-header::before, .startup-header::after,
.startup-video-header::before, .startup-video-header::after,
.secure-start-header::before, .secure-start-header::after,
.status-strip::before, .status-strip::after,
.top-safe-area::before, .top-safe-area::after {
content: none !important;
display: none !important;
}
.status-strip,
.top-safe-area {
min-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.sg-player-topbar .sg-player-icon,
.sg-player-topbar .sg-player-select-wrap,
.mc-video-topbar button,
.video-header :is(button, a, .icon-button),
.video-topbar :is(button, a, .icon-button),
.player-header :is(button, a, .icon-button),
.player-topbar :is(button, a, .icon-button),
.splash-header :is(button, a, .icon-button),
.startup-header :is(button, a, .icon-button),
.secure-start-header :is(button, a, .icon-button) {
background: transparent !important;
background-image: none !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.mc-video-details {
position: relative !important;
padding-top: 0 !important;
}
.mc-video-details > .mc-video-topbar {
position: absolute !important;
z-index: 8 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
min-height: calc(58px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
margin: 0 !important;
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 8px) var(--page-pad, 16px) 8px !important;
}
.mc-video-details > .mc-video-hero {
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* SG FIXED PAGE HEADERS v1 -------------------------------------------------
Keeps every existing page header visible while the document scrolls.
The catalog browser uses one sticky wrapper so search, filters, and
categories move as a single unit without changing their approved sizes. */
:root {
--sg-fixed-page-header-z: 860;
--sg-fixed-page-overlay-z: 1200;
}
/* Existing full-width page headers. Heights, spacing, and visual identity
remain owned by their original component styles. */
:where(
.oscar-toolbar,
.catalog-landing-toolbar,
.anime-landing-toolbar,
.movies-landing-toolbar,
.series-landing-toolbar,
.wrestling-landing-toolbar,
.account-plain-header,
.favorites-plain-header,
.notifications-plain-header,
.live-forced-header
) {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: var(--sg-fixed-page-header-z) !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
}
/* All-movies / all-series / anime / wrestling catalog pages. */
.nova-catalog-page {
padding-top: 0 !important;
}
.nova-catalog-fixed-header {
position: sticky !important;
position: -webkit-sticky !important;
top: 0 !important;
z-index: calc(var(--sg-fixed-page-header-z) + 10) !important;
margin: 0 0 12px !important;
padding-top: calc(8px + var(--safe-top, 0px)) !important;
background: rgba(0, 0, 0, .985) !important;
border-bottom: 1px solid rgba(255, 255, 255, .045) !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, .48) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
isolation: isolate !important;
}
.nova-catalog-fixed-header .nova-catalog-minimal-actions {
position: relative !important;
top: auto !important;
z-index: auto !important;
margin: 0 !important;
}
.nova-catalog-fixed-header .nova-catalog-controls,
.nova-catalog-fixed-header .nova-category-strip {
position: relative !important;
top: auto !important;
z-index: auto !important;
}
/* Detail-page floating action headers. They stay visible without reserving
additional space because they already overlay the hero artwork. */
.details-app .nova-details-topbar {
position: fixed !important;
top: calc(var(--safe-top, 0px) + 12px) !important;
right: clamp(12px, 3vw, 28px) !important;
left: clamp(12px, 3vw, 28px) !important;
z-index: calc(var(--sg-fixed-page-header-z) + 20) !important;
}
.media-details .details-topbar,
.channel-details .details-topbar {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: calc(var(--sg-fixed-page-header-z) + 20) !important;
}
/* Match-center headers that already represent compact page bars. */
.mc-video-topbar,
.mc-tabs,
.mc-league-tabs {
position: sticky !important;
position: -webkit-sticky !important;
top: 0 !important;
z-index: calc(var(--sg-fixed-page-header-z) + 5) !important;
}
.mc-league-back {
position: fixed !important;
top: calc(var(--safe-top, 0px) + 14px) !important;
right: 14px !important;
z-index: calc(var(--sg-fixed-page-header-z) + 20) !important;
}
/* Search and drawer overlays must remain above the newly fixed headers. */
.search-sheet {
z-index: var(--sg-fixed-page-overlay-z) !important;
}
.menu-backdrop {
z-index: calc(var(--sg-fixed-page-overlay-z) + 10) !important;
}
.side-menu {
z-index: calc(var(--sg-fixed-page-overlay-z) + 20) !important;
}
@media (max-width: 680px) {
.nova-catalog-fixed-header {
margin-bottom: 10px !important;
padding-top: calc(6px + var(--safe-top, 0px)) !important;
}
}
/* More-specific rule required because the video details bar was previously
forced to absolute positioning by an earlier compatibility layer. */
.mc-video-details > .mc-video-topbar {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: calc(var(--sg-fixed-page-header-z) + 20) !important;
}
/* SG VIEWPORT HEADER LOCK v2 — final cascade layer -------------------------
The document remains the only vertical scroll root. Every page header is
fixed against the WebView viewport, not an animated route container. */
:root {
--sg-page-header-z: 920;
--sg-catalog-fixed-h: calc(146px + var(--safe-top, 0px));
}
html,
body,
#app,
.app-root,
.main-layout-shell,
.sg-route-frame,
.sg-route-surface,
.oscar-app,
.oscar-main,
.native-view,
.catalog-landing-app,
.nova-app,
.details-app {
transform: none !important;
translate: none !important;
filter: none !important;
perspective: none !important;
contain: none !important;
}
.sg-route-frame,
.sg-route-frame[class*="sg-route-"] {
animation: none !important;
}
:where(
header.oscar-toolbar,
.catalog-landing-toolbar,
.account-plain-header,
.favorites-plain-header,
.notifications-plain-header,
.live-forced-header,
.nova-live-fixed-header
) {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: var(--sg-page-header-z) !important;
transform: none !important;
translate: none !important;
contain: none !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
}
/* All-content catalog header: fixed as one compact unit. */
.nova-catalog-page {
padding-top: var(--sg-catalog-fixed-h) !important;
}
.nova-catalog-fixed-header {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: calc(var(--sg-page-header-z) + 5) !important;
min-height: var(--sg-catalog-fixed-h) !important;
margin: 0 !important;
padding: calc(7px + var(--safe-top, 0px)) clamp(12px, 3vw, 24px) 8px !important;
box-sizing: border-box !important;
background: rgba(0, 0, 0, .99) !important;
border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, .56) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
transform: none !important;
contain: none !important;
}
.nova-catalog-fixed-header .nova-catalog-minimal-actions,
.nova-catalog-fixed-header .nova-catalog-controls,
.nova-catalog-fixed-header .nova-category-strip {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
z-index: auto !important;
}
/* Details and league back controls remain visible above hero artwork. */
.details-app .nova-details-topbar,
.media-details .details-topbar,
.channel-details .details-topbar,
.mc-league-back {
position: fixed !important;
z-index: calc(var(--sg-page-header-z) + 30) !important;
transform: none !important;
contain: none !important;
}
/* Keep match-center primary bars attached to the viewport. */
.mc-video-details > .mc-video-topbar,
.mc-video-topbar {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: calc(var(--sg-page-header-z) + 20) !important;
}
.search-sheet { z-index: 1300 !important; }
.menu-backdrop { z-index: 1310 !important; }
.side-menu { z-index: 1320 !important; }
@media (max-width: 680px) {
:root {
--sg-catalog-fixed-h: calc(176px + var(--safe-top, 0px));
}
.nova-catalog-fixed-header {
padding-top: calc(5px + var(--safe-top, 0px)) !important;
padding-inline: 10px !important;
}
}
/* ===== source: nova-catalog-professional-header.css ===== */
/* Space Gate Nova+ — catalog reference header
Keeps the original catalog filtering behavior while applying the same
compact button language used by the channel guide. */
:root {
--nova-catalog-header-h: calc(174px + var(--safe-top, 0px));
--nova-catalog-page-pad: clamp(18px, 3.1vw, 54px);
--nova-catalog-control-h: 38px;
--nova-catalog-chip-h: 35px;
--nova-catalog-line: rgba(132, 145, 176, .20);
--nova-catalog-active-border: linear-gradient(100deg, #f04ad8 0%, #9b4dff 48%, #14d7ff 100%);
}
.nova-catalog-page {
width: 100% !important;
max-width: none !important;
min-height: 100dvh !important;
margin: 0 !important;
padding: calc(var(--nova-catalog-header-h) + 15px) var(--nova-catalog-page-pad)
calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 26px) !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
background:
radial-gradient(circle at 50% -14%, rgba(92, 49, 190, .075), transparent 32%),
#000 !important;
}
.nova-catalog-fixed-header {
position: fixed !important;
z-index: 925 !important;
inset: 0 0 auto !important;
width: 100% !important;
height: var(--nova-catalog-header-h) !important;
margin: 0 !important;
padding: var(--safe-top, 0px) var(--nova-catalog-page-pad) 8px !important;
display: grid !important;
grid-template-rows: 72px 54px 44px !important;
grid-template-areas:
"hero"
"controls"
"genres" !important;
align-content: start !important;
overflow: hidden !important;
box-sizing: border-box !important;
background:
radial-gradient(ellipse 43% 116% at 50% -12%, rgba(102, 51, 215, .20), transparent 62%),
radial-gradient(ellipse 27% 100% at 9% 8%, rgba(27, 109, 239, .08), transparent 66%),
linear-gradient(180deg, rgba(3, 5, 12, .998) 0%, rgba(2, 4, 9, .996) 78%, rgba(0, 0, 0, .996) 100%) !important;
border-bottom: 1px solid rgba(145, 156, 186, .14) !important;
box-shadow: 0 15px 38px rgba(0, 0, 0, .52) !important;
backdrop-filter: blur(20px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
transform: none !important;
contain: none !important;
}
.nova-catalog-fixed-header::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
opacity: .44;
background:
radial-gradient(circle at 22% 24%, rgba(255, 255, 255, .24) 0 1px, transparent 2px),
radial-gradient(circle at 39% 47%, rgba(133, 69, 255, .22) 0 1px, transparent 2px),
radial-gradient(circle at 61% 18%, rgba(255, 255, 255, .20) 0 1px, transparent 2px),
radial-gradient(circle at 79% 38%, rgba(70, 143, 255, .21) 0 1px, transparent 2px);
background-size: 260px 170px, 190px 132px, 300px 190px, 220px 150px;
}
/* Header identity row ----------------------------------------------------- */
.nova-catalog-hero-row {
grid-area: hero;
min-width: 0;
height: 72px;
display: grid;
grid-template-columns: minmax(110px, 1fr) minmax(250px, 1.25fr) minmax(310px, 1fr);
grid-template-areas: "back title cluster";
align-items: center;
gap: clamp(12px, 2vw, 28px);
direction: ltr;
}
.nova-catalog-back {
grid-area: back;
justify-self: start;
width: 44px;
height: 44px;
min-width: 44px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid var(--nova-catalog-line);
border-radius: 50%;
background: rgba(4, 7, 14, .82);
color: rgba(255, 255, 255, .90);
cursor: pointer;
}
.nova-catalog-heading-copy {
grid-area: title;
min-width: 0;
display: grid;
justify-items: center;
align-content: center;
gap: 5px;
direction: rtl;
text-align: center;
}
.nova-catalog-heading-copy h1 {
max-width: 100%;
margin: 0;
overflow: hidden;
color: #fff;
font-size: clamp(1.48rem, 2.25vw, 2.12rem);
line-height: 1.05;
font-weight: 900;
letter-spacing: -.035em;
white-space: nowrap;
text-overflow: ellipsis;
background: linear-gradient(95deg, #f0e9ff 7%, #c465ff 49%, #65bfff 93%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.nova-catalog-heading-copy p {
max-width: min(540px, 100%);
margin: 0;
overflow: hidden;
color: rgba(255, 255, 255, .46);
font-size: clamp(.69rem, .92vw, .84rem);
line-height: 1.25;
white-space: nowrap;
text-overflow: ellipsis;
}
.nova-catalog-header-cluster {
grid-area: cluster;
justify-self: end;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
direction: ltr;
}
.nova-catalog-brand {
flex: 0 0 auto;
width: clamp(150px, 12.2vw, 198px);
height: 54px;
padding: 0;
display: grid;
place-items: center end;
border: 0;
background: transparent;
cursor: pointer;
}
.nova-catalog-brand img {
width: 100%;
height: 51px;
display: block;
object-fit: contain;
object-position: right center;
}
.nova-catalog-actions {
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 3px;
direction: ltr;
}
.nova-catalog-icon,
.nova-catalog-back,
.nova-catalog-brand {
font: inherit;
color: #f7f8fb;
}
.nova-catalog-icon {
position: relative;
width: 44px;
height: 44px;
min-width: 44px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: rgba(255, 255, 255, .88);
cursor: pointer;
transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}
.nova-catalog-icon:hover,
.nova-catalog-icon.active,
.nova-catalog-back:hover {
color: #fff;
border-color: rgba(105, 153, 255, .28);
background: rgba(117, 68, 235, .12);
}
.nova-catalog-icon:active,
.nova-catalog-back:active { transform: scale(.96); }
.nova-catalog-mobile-search-toggle { display: none; }
.nova-catalog-notification i {
position: absolute;
top: 5px;
right: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #c331ff;
box-shadow: 0 0 0 3px rgba(195, 49, 255, .14);
}
/* Search and old catalog filters ---------------------------------------- */
.nova-catalog-controls-row {
grid-area: controls;
min-width: 0;
height: 54px;
display: grid;
grid-template-columns: minmax(280px, 1fr) auto;
align-items: center;
gap: 12px;
direction: ltr;
}
.nova-catalog-search {
min-width: 0;
width: 100%;
height: 43px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(157, 168, 197, .29) !important;
border-radius: 10px !important;
background: linear-gradient(90deg, rgba(17, 22, 37, .86), rgba(7, 10, 18, .94)) !important;
color: rgba(255, 255, 255, .65) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
box-sizing: border-box;
direction: ltr;
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.nova-catalog-search:focus-within {
border-color: rgba(78, 166, 255, .72) !important;
background: rgba(9, 13, 23, .99) !important;
box-shadow: 0 0 0 3px rgba(105, 72, 255, .10) !important;
}
.nova-catalog-search input {
min-width: 0;
flex: 1;
height: 100% !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
color: #fff !important;
direction: rtl;
text-align: right;
font-size: .86rem;
}
.nova-catalog-search input::placeholder { color: rgba(255, 255, 255, .39); }
.nova-catalog-search > button {
width: 27px;
height: 27px;
min-width: 27px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 7px;
background: rgba(255, 255, 255, .05);
color: rgba(255, 255, 255, .72);
}
.nova-catalog-filter-strip {
min-width: 0;
max-width: 100%;
height: 43px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
overscroll-behavior-inline: contain;
}
.nova-catalog-filter-strip::-webkit-scrollbar { display: none; }
.nova-catalog-select-card,
.nova-catalog-reset-filter {
position: relative;
flex: 0 0 auto;
height: var(--nova-catalog-control-h);
min-height: var(--nova-catalog-control-h);
border: 1px solid var(--nova-catalog-line) !important;
border-radius: 8px !important;
background: rgba(4, 7, 13, .92) !important;
color: rgba(255, 255, 255, .72) !important;
box-sizing: border-box;
}
.nova-catalog-select-card {
min-width: 118px;
max-width: 178px;
padding: 0 10px;
display: grid;
grid-template-columns: 18px auto minmax(38px, auto) 14px;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
direction: rtl;
}
.nova-catalog-select-card > span {
color: rgba(255, 255, 255, .42);
font-size: .66rem;
font-weight: 650;
white-space: nowrap;
}
.nova-catalog-select-card > strong {
min-width: 0;
overflow: hidden;
color: rgba(255, 255, 255, .82);
font-size: .73rem;
font-weight: 760;
white-space: nowrap;
text-overflow: ellipsis;
}
.nova-catalog-select-card > svg:first-child { color: rgba(255, 255, 255, .60); }
.nova-catalog-select-card > svg:nth-last-child(2) { color: rgba(255, 255, 255, .45); }
.nova-catalog-select-card select {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.nova-catalog-select-card:hover,
.nova-catalog-select-card:focus-within {
color: #fff !important;
border-color: rgba(119, 70, 239, .48) !important;
}
.nova-catalog-select-card.active {
color: #fff !important;
border-color: transparent !important;
background:
linear-gradient(rgba(5, 8, 16, .99), rgba(5, 8, 16, .99)) padding-box,
var(--nova-catalog-active-border) border-box !important;
box-shadow: 0 0 0 1px rgba(155, 77, 255, .08), 0 6px 18px rgba(45, 111, 219, .10) !important;
}
.nova-catalog-select-card.active > strong,
.nova-catalog-select-card.active > svg { color: #fff; }
.nova-catalog-reset-filter {
width: var(--nova-catalog-control-h);
min-width: var(--nova-catalog-control-h);
padding: 0;
display: grid;
place-items: center;
cursor: pointer;
}
.nova-catalog-reset-filter:hover {
color: #fff !important;
border-color: rgba(240, 74, 216, .55) !important;
background: rgba(130, 45, 165, .16) !important;
}
/* Genre chips — identical scale and active border language to channels. */
.nova-catalog-genre-row {
grid-area: genres;
min-width: 0;
height: 44px;
display: block;
overflow: hidden;
}
.nova-catalog-fixed-header .nova-category-strip {
min-width: 0;
width: 100%;
height: 44px;
margin: 0 !important;
padding: 3px 0 6px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 9px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: transparent !important;
border: 0 !important;
direction: rtl !important;
scrollbar-width: none !important;
scroll-snap-type: x proximity;
overscroll-behavior-inline: contain;
}
.nova-catalog-fixed-header .nova-category-strip::-webkit-scrollbar { display: none !important; }
.nova-catalog-fixed-header .nova-category-strip button,
.nova-catalog-fixed-header .nova-category-strip .nova-category-chip {
flex: 0 0 auto !important;
height: var(--nova-catalog-chip-h) !important;
min-height: var(--nova-catalog-chip-h) !important;
min-width: 70px !important;
padding: 0 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid var(--nova-catalog-line) !important;
border-radius: 8px !important;
background: rgba(4, 7, 13, .92) !important;
color: rgba(255, 255, 255, .69) !important;
font-size: .78rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
box-shadow: none !important;
scroll-snap-align: start;
cursor: pointer;
}
.nova-catalog-fixed-header .nova-category-strip button:hover {
color: #fff !important;
border-color: rgba(119, 70, 239, .48) !important;
}
.nova-catalog-fixed-header .nova-category-strip button.active,
.nova-catalog-fixed-header .nova-category-strip .nova-category-chip.active,
.nova-catalog-fixed-header .nova-category-strip button.is-active,
.nova-catalog-fixed-header .nova-category-strip .nova-category-chip.is-active {
color: #fff !important;
border-color: transparent !important;
background:
linear-gradient(rgba(5, 8, 16, .99), rgba(5, 8, 16, .99)) padding-box,
var(--nova-catalog-active-border) border-box !important;
box-shadow: 0 0 0 1px rgba(155, 77, 255, .08), 0 6px 18px rgba(45, 111, 219, .10) !important;
}
/* Medium desktop / tablet window ---------------------------------------- */
@media (max-width: 1240px) and (min-width: 1001px) {
:root { --nova-catalog-page-pad: 22px; }
.nova-catalog-hero-row {
grid-template-columns: 72px minmax(220px, 1fr) minmax(270px, auto);
gap: 12px;
}
.nova-catalog-brand { width: 158px; }
.nova-catalog-controls-row { grid-template-columns: minmax(240px, 1fr) minmax(0, auto); gap: 9px; }
.nova-catalog-select-card { min-width: 105px; max-width: 145px; padding-inline: 8px; }
.nova-catalog-select-card > span { display: none; }
.nova-catalog-select-card { grid-template-columns: 18px minmax(42px, auto) 14px; }
}
/* Android and narrow windows: reference portrait layout.
Search remains hidden until the header search icon is pressed. */
@media (max-width: 1000px) {
:root {
--nova-catalog-header-h: calc(156px + var(--safe-top, 0px));
--nova-catalog-page-pad: 11px;
--nova-catalog-control-h: 35px;
--nova-catalog-chip-h: 31px;
}
.nova-catalog-page.mobile-search-open {
--nova-catalog-header-h: calc(207px + var(--safe-top, 0px));
}
.nova-catalog-fixed-header {
padding: var(--safe-top, 0px) 11px 6px !important;
grid-template-rows: 68px 44px 40px !important;
grid-template-areas:
"hero"
"controls"
"genres" !important;
transition: height .18s ease, grid-template-rows .18s ease;
}
.nova-catalog-page.mobile-search-open .nova-catalog-fixed-header {
grid-template-rows: 68px 95px 40px !important;
}
.nova-catalog-hero-row {
height: 68px;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "cluster title";
gap: 8px;
direction: ltr;
}
.nova-catalog-heading-copy {
justify-self: end;
justify-items: end;
text-align: right;
}
.nova-catalog-heading-copy h1 {
font-size: clamp(1.38rem, 6.2vw, 1.92rem);
background: none;
-webkit-text-fill-color: #f5f3fa;
color: #f5f3fa;
}
.nova-catalog-heading-copy p,
.nova-catalog-brand,
.nova-catalog-back { display: none; }
.nova-catalog-header-cluster {
justify-self: start;
gap: 0;
}
.nova-catalog-actions {
justify-content: flex-start;
gap: 2px;
}
.nova-catalog-mobile-search-toggle { display: grid; }
.nova-catalog-icon {
width: 44px;
height: 44px;
min-width: 44px;
border-radius: 8px;
}
.nova-catalog-controls-row {
height: 44px;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 44px;
grid-template-areas: "filters";
align-items: center;
gap: 0;
overflow: hidden;
transition: height .18s ease, grid-template-rows .18s ease;
}
.nova-catalog-controls-row.mobile-open {
height: 95px;
grid-template-rows: 49px 42px;
grid-template-areas:
"search"
"filters";
gap: 4px;
}
.nova-catalog-search {
grid-area: search;
height: 46px;
padding-inline: 12px;
display: none;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
border-radius: 9px !important;
}
.nova-catalog-controls-row.mobile-open .nova-catalog-search {
display: flex;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
animation: nova-catalog-search-in .18s ease-out both;
}
.nova-catalog-search input { font-size: .78rem; }
.nova-catalog-filter-strip {
grid-area: filters;
width: 100%;
height: 42px;
gap: 7px;
}
.nova-catalog-select-card {
min-width: 88px;
max-width: 132px;
padding: 0 8px;
grid-template-columns: 16px minmax(38px, auto) 13px;
gap: 5px;
border-radius: 7px !important;
}
.nova-catalog-select-card > span { display: none; }
.nova-catalog-select-card > strong { font-size: .68rem; }
.nova-catalog-select-card > svg:first-child { width: 15px; height: 15px; }
.nova-catalog-reset-filter { border-radius: 7px !important; }
.nova-catalog-genre-row { height: 40px; }
.nova-catalog-fixed-header .nova-category-strip {
height: 40px;
gap: 7px !important;
padding: 3px 0 6px !important;
}
.nova-catalog-fixed-header .nova-category-strip button,
.nova-catalog-fixed-header .nova-category-strip .nova-category-chip {
min-width: 57px !important;
padding: 0 13px !important;
border-radius: 7px !important;
font-size: .69rem !important;
}
}
/* Android landscape follows the reference: back at left, title centered,
official channel-header logo at right, with the same compact filters. */
@media (max-width: 1000px) and (orientation: landscape) {
:root { --nova-catalog-header-h: calc(158px + var(--safe-top, 0px)); }
.nova-catalog-page.mobile-search-open { --nova-catalog-header-h: calc(209px + var(--safe-top, 0px)); }
.nova-catalog-fixed-header {
padding-inline: 17px !important;
grid-template-rows: 66px 48px 40px !important;
}
.nova-catalog-page.mobile-search-open .nova-catalog-fixed-header {
grid-template-rows: 66px 99px 40px !important;
}
.nova-catalog-hero-row {
height: 66px;
grid-template-columns: 48px minmax(0, 1fr) minmax(170px, 220px);
grid-template-areas: "back title cluster";
gap: 12px;
}
.nova-catalog-back { display: grid; width: 44px; height: 44px; min-width: 44px; }
.nova-catalog-heading-copy { justify-self: center; justify-items: center; text-align: center; }
.nova-catalog-heading-copy h1 {
font-size: clamp(1.35rem, 3.7vw, 2rem);
background: linear-gradient(95deg, #f0e9ff 7%, #c465ff 48%, #65bfff 92%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.nova-catalog-heading-copy p { display: block; font-size: .68rem; }
.nova-catalog-header-cluster { justify-self: end; gap: 4px; }
.nova-catalog-brand { display: grid; width: 146px; height: 48px; }
.nova-catalog-brand img { height: 46px; }
.nova-catalog-notification,
.nova-catalog-menu { display: none !important; }
.nova-catalog-controls-row { height: 48px; grid-template-rows: 48px; }
.nova-catalog-controls-row.mobile-open { height: 99px; grid-template-rows: 49px 46px; }
.nova-catalog-search { height: 45px; }
.nova-catalog-filter-strip { height: 46px; }
}
@media (max-width: 420px) {
:root { --nova-catalog-page-pad: 9px; }
.nova-catalog-fixed-header { padding-inline: 9px !important; }
.nova-catalog-heading-copy h1 { font-size: 1.42rem; }
.nova-catalog-icon { width: 44px; height: 44px; min-width: 44px; }
.nova-catalog-select-card { min-width: 82px; max-width: 118px; padding-inline: 7px; }
.nova-catalog-select-card > strong { font-size: .65rem; }
}
@media (max-width: 360px) {
.nova-catalog-notification { display: none !important; }
.nova-catalog-heading-copy h1 { font-size: 1.30rem; }
.nova-catalog-select-card { min-width: 78px; }
}
@keyframes nova-catalog-search-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.nova-catalog-fixed-header,
.nova-catalog-controls-row,
.nova-catalog-search,
.nova-catalog-icon { transition: none !important; animation: none !important; }
}
/* Loading state stays below the fixed catalog header and never paints a panel behind the indicator. */
.nova-catalog-motion-loading {
min-height: calc(100dvh - var(--nova-catalog-header-h) - var(--bottom-nav-h, 78px));
padding-top: 12px;
box-sizing: border-box;
background: transparent !important;
}
.nova-catalog-motion-loading .nova-progressive-loader,
.nova-catalog-motion-loading .nova-progressive-loader::before {
background: transparent !important;
}
/* ===== source: nova-content-flow-fix.css ===== */
/* Space Gate Nova+ — definitive content-flow repair
Loaded last. The MAUI WebView must render the real height of rails/cards;
content-visibility intrinsic placeholders were creating large black gaps. */
html,
body,
#app,
.app-root,
.main-layout-shell,
.sg-route-frame,
.sg-route-surface {
width: 100% !important;
height: auto !important;
min-height: 100dvh !important;
overflow-x: hidden !important;
background: #000000 !important;
}
/* Critical: Chromium WebView can leave contain-intrinsic-size placeholders
behind when Blazor replaces horizontal rails. Always use measured content. */
:is(
.oscar-section,
.home-rail-section,
.shahid-home-section,
.target-home-rail,
.catalog-section,
.media-card,
.poster-card,
.catalog-card,
.home-rail-card,
.channel-card,
.oscar-card,
.nova-batch-loader,
.catalog-landing-rail-skeleton,
.home-rail-skeleton
) {
content-visibility: visible !important;
contain-intrinsic-size: auto !important;
contain: none !important;
}
/* The layout owns the viewport. Pages and nested shells follow their actual
content height, reserving the fixed bottom navigation only once. */
.sg-route-surface > :is(.oscar-app, .nova-app, .discover-page),
.home-app,
.home-main,
.target-home,
.target-home-reference,
.shahid-home-reference,
.catalog-landing-app,
.catalog-landing-main,
.catalog-landing-reference,
.nova-catalog-page,
.nova-live-page,
.favorites-page-app,
.favorites-page-shell,
.account-page-app,
.account-page-shell,
.notifications-page-app,
.notifications-page-shell,
.settings-page-app,
.settings-page-shell,
.discover-page,
.discover-shell {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
align-content: start !important;
justify-content: start !important;
}
.home-app,
.catalog-landing-app,
.favorites-page-app,
.account-page-app,
.notifications-page-app,
.settings-page-app {
padding-bottom: 0 !important;
}
.target-home,
.target-home-reference,
.shahid-home-reference,
.catalog-landing-reference,
.favorites-page-shell,
.account-page-shell,
.notifications-page-shell,
.settings-page-shell,
.discover-page,
.nova-live-page,
.nova-catalog-page {
padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px) !important;
}
.catalog-landing-main,
.home-main {
padding-bottom: 0 !important;
}
/* Keep every rendered rail adjacent to the previous one. */
:is(.shahid-home-section, .home-rail-section, .oscar-section, .target-home-rail, .catalog-section) {
margin-block-start: 0 !important;
}
:is(.shahid-home-section, .home-rail-section, .oscar-section, .target-home-rail, .catalog-section) +
:is(.shahid-home-section, .home-rail-section, .oscar-section, .target-home-rail, .catalog-section, .nova-batch-loader) {
margin-top: 0 !important;
}
/* Sentinels participate in observation but never become a visual spacer. */
.home-lazy-sentinel,
.catalog-landing-lazy-sentinel,
.nova-infinite-sentinel,
.live-infinite-sentinel,
.nova-live-infinite-sentinel {
display: block !important;
width: 100% !important;
min-height: 2px !important;
height: 2px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #000000 !important;
}
.home-lazy-sentinel > *,
.catalog-landing-lazy-sentinel > *,
.nova-infinite-sentinel > *,
.live-infinite-sentinel > *,
.nova-live-infinite-sentinel > * {
display: none !important;
}
/* A loader is shown only while a real request is running and starts directly
after the existing content instead of being pushed toward the viewport end. */
.nova-batch-loader,
.home-rail-skeleton-batch,
.catalog-landing-rail-skeleton-batch {
margin: 0 !important;
align-self: start !important;
justify-self: stretch !important;
}
.shahid-home-section:last-of-type,
.nova-card-grid:last-child,
.favorites-grid:last-child,
.notifications-list:last-child,
.discover-results-grid:last-child {
margin-bottom: 0 !important;
}
@media (max-width: 680px) {
.target-home,
.target-home-reference,
.shahid-home-reference,
.catalog-landing-reference,
.favorites-page-shell,
.account-page-shell,
.notifications-page-shell,
.settings-page-shell,
.discover-page,
.nova-live-page,
.nova-catalog-page {
padding-bottom: calc(var(--bottom-nav-h, 72px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px) !important;
}
}
/* Home terminal spacing: reserve only the fixed navigation safe area. */
.home-app .target-home,
.home-app .target-home-reference,
.home-app .shahid-home-reference {
min-height: 0 !important;
padding-bottom: calc(var(--bottom-nav-h, 72px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 6px) !important;
}
.home-app .home-lazy-sentinel {
min-height: 1px !important;
height: 1px !important;
padding: 0 !important;
}
/* ===== source: nova-scroll-reactive-headers.css ===== */
/* Space Gate Nova+ — reactive transparent headers
Transparent above hero artwork; premium black glass after vertical scroll. */
:root {
--nova-app-header-h: 58px;
--nova-header-glass: rgba(0, 0, 0, .74);
--nova-header-glass-strong: rgba(0, 0, 0, .82);
--nova-header-line: rgba(255, 255, 255, .065);
--nova-header-ease: cubic-bezier(.2, .78, .2, 1);
}
/* Shared compact height for the simple application headers. */
:where(header.oscar-toolbar, .catalog-landing-toolbar) {
height: calc(var(--nova-app-header-h) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
min-height: calc(var(--nova-app-header-h) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;
background: transparent !important;
border-bottom: 1px solid transparent !important;
box-shadow: none !important;
backdrop-filter: blur(0) saturate(1) !important;
-webkit-backdrop-filter: blur(0) saturate(1) !important;
transition:
background-color .26s var(--nova-header-ease),
background .26s var(--nova-header-ease),
backdrop-filter .26s var(--nova-header-ease),
border-color .26s var(--nova-header-ease),
box-shadow .26s var(--nova-header-ease) !important;
}
html.sg-header-scrolled :where(header.oscar-toolbar, .catalog-landing-toolbar) {
background: var(--nova-header-glass) !important;
border-bottom-color: var(--nova-header-line) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
backdrop-filter: blur(20px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}
/* Home header keeps the approved free-floating icon layout. */
header.oscar-toolbar.professional-home-toolbar {
min-height: calc(var(--nova-app-header-h) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
padding-inline: clamp(14px, 3vw, 22px) !important;
}
.professional-home-toolbar .home-toolbar-shell {
min-height: var(--nova-app-header-h) !important;
}
.professional-home-toolbar .icon-button.home-header-action,
.professional-home-toolbar .icon-button.home-menu-button {
width: 36px !important;
height: 36px !important;
}
/* Section landing header. */
.catalog-landing-toolbar {
padding-inline: clamp(14px, 3vw, 24px) !important;
gap: 16px;
}
.catalog-landing-title-copy {
min-width: 0;
}
.catalog-landing-toolbar-actions {
display: inline-flex;
align-items: center;
gap: 7px;
direction: ltr;
}
.catalog-landing-toolbar-button {
position: relative;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #fff !important;
}
.catalog-landing-toolbar-button.notification i {
position: absolute;
top: 4px;
right: 2px;
width: 7px;
height: 7px;
border-radius: 50%;
background: linear-gradient(135deg, #F04AD8, #9B4DFF 54%, #14D7FF);
box-shadow: 0 0 0 3px rgba(155,77,255,.14);
}
/* All-content compound header: smaller and transparent at the top, black glass after scrolling. */
:root {
--nova-catalog-header-h: calc(156px + var(--safe-top, 0px));
--sg-catalog-fixed-h: var(--nova-catalog-header-h);
}
.nova-catalog-fixed-header {
height: var(--nova-catalog-header-h) !important;
min-height: var(--nova-catalog-header-h) !important;
grid-template-rows: 58px 51px 39px !important;
padding-top: var(--safe-top, 0px) !important;
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: blur(0) saturate(1) !important;
-webkit-backdrop-filter: blur(0) saturate(1) !important;
transition:
background .26s var(--nova-header-ease),
backdrop-filter .26s var(--nova-header-ease),
border-color .26s var(--nova-header-ease),
box-shadow .26s var(--nova-header-ease) !important;
}
.nova-catalog-fixed-header::before {
opacity: .12 !important;
}
html.sg-header-scrolled .nova-catalog-fixed-header {
background: var(--nova-header-glass-strong) !important;
border-bottom-color: var(--nova-header-line) !important;
box-shadow: 0 14px 36px rgba(0,0,0,.34) !important;
backdrop-filter: blur(22px) saturate(1.1) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.1) !important;
}
.nova-catalog-hero-row {
height: 58px !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas: "heading actions" !important;
direction: rtl !important;
gap: 12px !important;
}
.nova-catalog-heading-group {
grid-area: heading;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
}
.nova-catalog-heading-copy {
min-width: 0;
display: grid !important;
justify-items: start !important;
text-align: right !important;
gap: 3px !important;
}
.nova-catalog-heading-copy h1 {
font-size: clamp(1.34rem, 2.1vw, 1.9rem) !important;
}
.nova-catalog-heading-copy p {
font-size: clamp(.64rem, .8vw, .75rem) !important;
}
.nova-catalog-back {
position: static !important;
flex: 0 0 auto;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.nova-catalog-actions {
grid-area: actions;
justify-self: end;
gap: 6px !important;
}
.nova-catalog-brand,
.nova-catalog-menu {
display: none !important;
}
.nova-catalog-icon {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.nova-catalog-page {
padding-top: calc(var(--nova-catalog-header-h) + 12px) !important;
}
/* Details header changes from transparent to premium black glass while scrolling. */
.details-app .nova-details-topbar,
.media-details .details-topbar,
.channel-details .details-topbar {
top: 0 !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
min-height: calc(var(--nova-app-header-h) + var(--safe-top, 0px)) !important;
padding: var(--safe-top, 0px) clamp(14px, 3vw, 28px) 0 !important;
box-sizing: border-box !important;
background: transparent !important;
border-bottom: 1px solid transparent !important;
box-shadow: none !important;
backdrop-filter: blur(0) !important;
-webkit-backdrop-filter: blur(0) !important;
transition:
background .26s var(--nova-header-ease),
backdrop-filter .26s var(--nova-header-ease),
border-color .26s var(--nova-header-ease),
box-shadow .26s var(--nova-header-ease) !important;
}
html.sg-header-scrolled .details-app .nova-details-topbar,
html.sg-header-scrolled .media-details .details-topbar,
html.sg-header-scrolled .channel-details .details-topbar {
background: var(--nova-header-glass) !important;
border-bottom-color: var(--nova-header-line) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.26) !important;
backdrop-filter: blur(20px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}
/* The initial section gate owns the first paint; old skeletons must not leak into the header. */
.home-skeleton-page,
.catalog-landing-skeleton,
.catalog-landing-motion-loading,
.home-motion-loading {
padding-top: 0 !important;
}
@media (max-width: 680px) {
:root {
--nova-app-header-h: 54px;
--nova-catalog-header-h: calc(164px + var(--safe-top, 0px));
--sg-catalog-fixed-h: var(--nova-catalog-header-h);
}
.nova-catalog-fixed-header {
grid-template-rows: 54px 60px 42px !important;
padding-inline: 10px !important;
}
.nova-catalog-hero-row { height: 54px !important; }
.nova-catalog-heading-copy p { display: none !important; }
.nova-catalog-heading-copy h1 { font-size: 1.42rem !important; }
.nova-catalog-heading-group { gap: 7px; }
.nova-catalog-back { width: 33px !important; height: 33px !important; min-width: 33px !important; }
.catalog-landing-toolbar {
padding-inline: 15px !important;
}
.catalog-landing-toolbar span {
margin-bottom: 2px !important;
font-size: .57rem !important;
}
.catalog-landing-toolbar h1 {
font-size: 1.14rem !important;
}
.professional-home-toolbar .icon-button.home-header-action,
.professional-home-toolbar .icon-button.home-menu-button,
.catalog-landing-toolbar-button {
width: 33px !important;
height: 33px !important;
}
}
@media (prefers-reduced-motion: reduce) {
:where(header.oscar-toolbar, .catalog-landing-toolbar, .nova-catalog-fixed-header, .details-app .nova-details-topbar) {
transition: none !important;
}
}
/* ===== source: nova-final-polish-v2.css ===== */
/* Space Gate Nova+ — final header, catalog and details polish
Loaded last to resolve legacy style collisions without removing existing features. */
:root {
--nova-compact-header-h: 54px;
--nova-glass-black: rgba(0, 0, 0, .76);
--nova-glass-black-strong: rgba(0, 0, 0, .86);
--nova-active-gradient: linear-gradient(100deg, #f04ad8 0%, #9b4dff 48%, #14d7ff 100%);
}
/* --------------------------------------------------------------------------
1. Reactive application headers — transparent at the top, black glass after
real document OR nested WebView scrolling.
-------------------------------------------------------------------------- */
header.oscar-toolbar.nova-reactive-header,
header.oscar-toolbar.professional-home-toolbar,
.catalog-landing-toolbar.nova-reactive-header {
height: calc(var(--nova-compact-header-h) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
min-height: calc(var(--nova-compact-header-h) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
padding-top: var(--safe-top, env(safe-area-inset-top, 0px)) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: blur(0) saturate(1) !important;
-webkit-backdrop-filter: blur(0) saturate(1) !important;
transition: background .24s cubic-bezier(.2,.78,.2,1),
backdrop-filter .24s cubic-bezier(.2,.78,.2,1),
box-shadow .24s cubic-bezier(.2,.78,.2,1) !important;
}
html.sg-header-scrolled header.oscar-toolbar.nova-reactive-header,
html.sg-header-scrolled header.oscar-toolbar.professional-home-toolbar,
html.sg-header-scrolled .catalog-landing-toolbar.nova-reactive-header {
background: var(--nova-glass-black) !important;
box-shadow: 0 12px 30px rgba(0,0,0,.30) !important;
backdrop-filter: blur(18px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
header.oscar-toolbar.professional-home-toolbar {
padding-inline: clamp(14px, 3vw, 22px) !important;
}
.professional-home-toolbar .home-toolbar-shell {
min-height: var(--nova-compact-header-h) !important;
}
/* Remove the old purple SPACE GATE NOVA+ eyebrow from section landing pages. */
.catalog-landing-title-copy > span,
.catalog-landing-toolbar span:not(.nova-refresh-desktop-icon) {
display: none !important;
}
.catalog-landing-toolbar {
padding-inline: clamp(14px, 3vw, 24px) !important;
}
.catalog-landing-toolbar h1 {
font-size: clamp(1.08rem, 2.4vw, 1.42rem) !important;
line-height: 1 !important;
}
.catalog-landing-toolbar-actions {
gap: 7px !important;
}
.catalog-landing-toolbar-button {
width: 35px !important;
height: 35px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* --------------------------------------------------------------------------
2. All-content pages — compact fixed header with very small row spacing.
-------------------------------------------------------------------------- */
.nova-catalog-fixed-header {
background: transparent !important;
}
html.sg-header-scrolled .nova-catalog-fixed-header {
background: var(--nova-glass-black-strong) !important;
}
.nova-catalog-brand,
.nova-catalog-menu,
.nova-catalog-heading-copy p {
display: none !important;
}
.nova-catalog-back,
.nova-catalog-icon {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.nova-catalog-search:focus-within,
.nova-catalog-controls-row.mobile-open .nova-catalog-search {
border: 1px solid transparent !important;
background:
linear-gradient(#05070d, #05070d) padding-box,
var(--nova-active-gradient) border-box !important;
box-shadow: 0 0 0 1px rgba(155,77,255,.06), 0 8px 24px rgba(0,0,0,.22) !important;
}
@media (max-width: 1000px) {
:root {
--nova-catalog-header-h: calc(132px + var(--safe-top, 0px));
--sg-catalog-fixed-h: var(--nova-catalog-header-h);
--nova-catalog-control-h: 34px;
--nova-catalog-chip-h: 32px;
}
.nova-catalog-page.mobile-search-open {
--nova-catalog-header-h: calc(178px + var(--safe-top, 0px));
--sg-catalog-fixed-h: var(--nova-catalog-header-h);
}
.nova-catalog-fixed-header {
height: var(--nova-catalog-header-h) !important;
min-height: var(--nova-catalog-header-h) !important;
padding: var(--safe-top, 0px) 12px 3px !important;
grid-template-rows: 50px 42px 34px !important;
gap: 0 !important;
align-content: start !important;
overflow: hidden !important;
}
.nova-catalog-page.mobile-search-open .nova-catalog-fixed-header {
grid-template-rows: 50px 88px 34px !important;
}
.nova-catalog-page {
padding-top: calc(var(--nova-catalog-header-h) + 4px) !important;
}
.nova-catalog-hero-row {
height: 50px !important;
min-height: 50px !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas: "heading actions" !important;
gap: 8px !important;
direction: rtl !important;
}
.nova-catalog-heading-group {
grid-area: heading !important;
min-width: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
direction: rtl !important;
}
.nova-catalog-heading-copy {
min-width: 0 !important;
justify-items: start !important;
text-align: right !important;
}
.nova-catalog-heading-copy h1 {
margin: 0 !important;
font-size: clamp(1.28rem, 6vw, 1.72rem) !important;
line-height: 1 !important;
background: none !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
.nova-catalog-back {
display: grid !important;
position: static !important;
width: 33px !important;
height: 33px !important;
min-width: 33px !important;
color: #fff !important;
}
.nova-catalog-actions {
grid-area: actions !important;
justify-self: end !important;
gap: 3px !important;
direction: ltr !important;
}
.nova-catalog-icon {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
}
.nova-catalog-controls-row {
height: 42px !important;
min-height: 42px !important;
grid-template-rows: 42px !important;
gap: 0 !important;
overflow: hidden !important;
}
.nova-catalog-controls-row.mobile-open {
height: 88px !important;
min-height: 88px !important;
grid-template-rows: 46px 40px !important;
gap: 2px !important;
}
.nova-catalog-search {
height: 43px !important;
min-height: 43px !important;
margin: 0 !important;
border-radius: 8px !important;
}
.nova-catalog-filter-strip {
height: 40px !important;
min-height: 40px !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 !important;
}
.nova-catalog-select-card,
.nova-catalog-reset-filter {
height: 34px !important;
min-height: 34px !important;
border-radius: 7px !important;
}
.nova-catalog-select-card {
min-width: 84px !important;
max-width: 126px !important;
padding-inline: 7px !important;
gap: 4px !important;
}
.nova-catalog-genre-row {
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 0 !important;
}
.nova-catalog-fixed-header .nova-category-strip {
height: 34px !important;
min-height: 34px !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 !important;
align-items: center !important;
}
.nova-catalog-fixed-header .nova-category-strip button,
.nova-catalog-fixed-header .nova-category-strip .nova-category-chip {
height: 32px !important;
min-height: 32px !important;
min-width: 56px !important;
padding-inline: 12px !important;
border-radius: 7px !important;
font-size: .68rem !important;
}
}
@media (max-width: 390px) {
:root { --nova-catalog-header-h: calc(128px + var(--safe-top, 0px)); }
.nova-catalog-page.mobile-search-open { --nova-catalog-header-h: calc(174px + var(--safe-top, 0px)); }
.nova-catalog-fixed-header { padding-inline: 9px !important; }
.nova-catalog-select-card { min-width: 78px !important; max-width: 112px !important; }
}
/* --------------------------------------------------------------------------
3. Details page — remove the oversized dark toolbar and restore a cinematic
Android hero with correctly distributed controls and content.
-------------------------------------------------------------------------- */
.cinematic-details-page .nova-details-topbar,
.nova-channel-details .nova-details-topbar {
position: fixed !important;
z-index: 2147482500 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
height: calc(var(--nova-compact-header-h) + var(--safe-top, 0px)) !important;
min-height: calc(var(--nova-compact-header-h) + var(--safe-top, 0px)) !important;
padding: var(--safe-top, 0px) 16px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: blur(0) !important;
-webkit-backdrop-filter: blur(0) !important;
pointer-events: none !important;
}
html.sg-header-scrolled .cinematic-details-page .nova-details-topbar,
html.sg-header-scrolled .nova-channel-details .nova-details-topbar {
background: var(--nova-glass-black) !important;
box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
backdrop-filter: blur(18px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
.cinematic-details-page .nova-details-topbar .nova-icon-btn,
.nova-channel-details .nova-details-topbar .nova-icon-btn {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #fff !important;
pointer-events: auto !important;
}
.cinematic-details-page .nova-topbar-actions,
.nova-channel-details .nova-topbar-actions {
gap: 8px !important;
pointer-events: auto !important;
}
@media (max-width: 820px) {
.cinematic-details-page {
background: #000 !important;
}
.cinematic-details-hero {
position: relative !important;
inset: auto !important;
width: 100% !important;
height: clamp(590px, 76dvh, 760px) !important;
min-height: 590px !important;
overflow: hidden !important;
background: #000 !important;
}
.cinematic-details-backdrop {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: center top !important;
}
.cinematic-details-shade {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background:
linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.04) 35%, rgba(0,0,0,.30) 56%, rgba(0,0,0,.88) 82%, #000 100%),
linear-gradient(90deg, rgba(0,0,0,.16), transparent 48%, rgba(0,0,0,.12)) !important;
}
.cinematic-hero-copy {
position: absolute !important;
z-index: 2 !important;
inset: 0 !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: calc(var(--nova-compact-header-h) + var(--safe-top, 0px) + 20px) 16px 22px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
text-align: center !important;
background: transparent !important;
box-sizing: border-box !important;
}
.cinematic-eyebrow,
.cinematic-meta,
.cinematic-ranking {
justify-content: center !important;
}
.cinematic-title {
width: min(100%, 680px) !important;
margin: 7px auto 11px !important;
font-size: clamp(2rem, 9vw, 3.05rem) !important;
line-height: 1.04 !important;
letter-spacing: -.025em !important;
text-align: center !important;
overflow-wrap: anywhere !important;
text-wrap: balance !important;
}
.cinematic-meta {
gap: 5px !important;
}
.cinematic-meta > *,
.cinematic-age {
min-height: 27px !important;
padding-inline: 9px !important;
font-size: .67rem !important;
}
.cinematic-ranking {
margin-top: 8px !important;
gap: 7px !important;
}
.cinematic-ranking span {
min-height: 31px !important;
padding-inline: 10px !important;
border-radius: 7px !important;
background: rgba(0,0,0,.58) !important;
font-size: .66rem !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.cinematic-actions {
width: 100% !important;
margin-top: 15px !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 9px !important;
direction: rtl !important;
}
.cinematic-watch-button {
grid-column: 1 / -1 !important;
width: 100% !important;
height: 54px !important;
min-height: 54px !important;
border-radius: 12px !important;
font-size: 1rem !important;
}
.cinematic-secondary-action {
min-height: 49px !important;
padding: 0 12px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 11px !important;
background: rgba(0,0,0,.42) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.cinematic-secondary-action span {
font-size: .76rem !important;
}
.cinematic-details-content {
position: relative !important;
z-index: 3 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 15px 24px !important;
background: #000 !important;
box-sizing: border-box !important;
}
.cinematic-tabs {
margin-top: 0 !important;
}
}
@media (max-width: 390px) {
.cinematic-details-hero {
height: clamp(550px, 73dvh, 690px) !important;
min-height: 550px !important;
}
.cinematic-title {
font-size: clamp(1.78rem, 8.4vw, 2.45rem) !important;
}
}
/* --------------------------------------------------------------------------
4. Refined Windows refresh action.
-------------------------------------------------------------------------- */
.nova-refresh-desktop {
width: 36px !important;
height: 36px !important;
color: rgba(255,255,255,.92) !important;
}
.nova-refresh-desktop:hover {
color: #fff !important;
filter: drop-shadow(0 0 9px rgba(71,175,255,.72)) drop-shadow(0 0 5px rgba(205,73,255,.48));
}
.nova-refresh-desktop-icon {
border-radius: 50%;
}
.is-refreshing .nova-refresh-desktop-icon {
color: #7ad9ff !important;
}
@media (prefers-reduced-motion: reduce) {
header.oscar-toolbar.nova-reactive-header,
.catalog-landing-toolbar.nova-reactive-header,
.nova-catalog-fixed-header,
.cinematic-details-page .nova-details-topbar {
transition: none !important;
}
}
/* ===== source: continue-watching.css ===== */
/* Continue Watching is a standalone component. Keep its layout self-contained
instead of depending on the scoped styles of HomeRailSection. */
.continue-watching-section {
width: 100%;
max-width: 100%;
margin: 0;
padding: 18px 0 24px;
overflow: hidden;
box-sizing: border-box;
background: #000;
}
.continue-watching-section .shahid-section-heading {
min-height: 58px;
padding: 0 clamp(16px, 3vw, 28px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
direction: rtl;
}
.continue-watching-section .shahid-section-heading h2 {
position: relative;
min-width: 0;
margin: 0;
padding-inline-start: 13px;
color: #fff;
font-size: clamp(.98rem, 2vw, 1.16rem);
line-height: 1.2;
font-weight: 950;
letter-spacing: -.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.continue-watching-section .shahid-section-heading h2::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
width: 5px;
height: 28px;
border-radius: 999px;
background: linear-gradient(180deg, #14d7ff 0%, #9b4dff 56%, #f04ad8 100%);
transform: translateY(-50%);
}
.continue-watching-section .shahid-section-heading > small {
flex: 0 0 auto;
margin-inline-start: auto;
color: #8e99aa;
font-size: .72rem;
line-height: 1.35;
font-weight: 700;
white-space: nowrap;
}
.continue-watching-section .horizontal-scroll-shell,
.continue-watching-section .desktop-rail-controls {
position: relative;
width: 100%;
isolation: isolate;
}
.continue-watching-rail {
width: 100%;
margin: 0;
padding: 0 clamp(16px, 3vw, 28px) 8px;
display: flex;
align-items: flex-start;
gap: 14px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scroll-snap-type: x proximity;
scroll-padding-inline: clamp(16px, 3vw, 28px);
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.continue-watching-rail::-webkit-scrollbar {
display: none;
}
.continue-watching-card {
flex: 0 0 clamp(210px, 42vw, 310px);
min-width: 0;
max-width: 310px;
display: grid;
grid-template-rows: auto auto auto;
align-content: start;
gap: 7px;
color: inherit;
background: transparent;
border: 0;
border-radius: 12px;
scroll-snap-align: start;
cursor: pointer;
outline: none;
content-visibility: visible;
contain: none;
box-sizing: border-box;
}
.continue-watching-card:focus-visible .continue-watching-image {
box-shadow: 0 0 0 3px rgba(130, 91, 255, .85);
}
.continue-watching-image {
position: relative;
width: 100%;
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 12px;
background: #11141c;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.continue-watching-image > img,
.continue-watching-image .shahid-card-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.continue-watching-image .shahid-card-shade {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .12) 67%, rgba(0, 0, 0, .58) 100%);
}
.continue-watching-play {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 50%;
color: #fff;
background: rgba(10, 12, 18, .74);
box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
transform: translate(-50%, -50%);
pointer-events: none;
}
.continue-watching-progress {
position: absolute;
z-index: 3;
inset-inline: 9px;
bottom: 8px;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, .28);
pointer-events: none;
}
.continue-watching-progress > i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #7c4dff, #e742ff);
}
.continue-watching-card > strong,
.continue-watching-card > small {
min-width: 0;
padding-inline: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.continue-watching-card > strong {
color: #f6f7fb;
font-size: .88rem;
line-height: 1.35;
font-weight: 850;
}
.continue-watching-card > small {
color: #8d98a9;
font-size: .7rem;
line-height: 1.35;
direction: rtl;
}
.continue-watching-section .scroll-arrow {
position: absolute;
z-index: 6;
top: 50%;
width: 44px;
height: 44px;
display: none;
place-items: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, .58);
box-shadow: 0 10px 25px rgba(0, 0, 0, .34);
transform: translateY(-50%);
cursor: pointer;
}
.continue-watching-section .scroll-arrow-right {
right: 12px;
}
.continue-watching-section .scroll-arrow-left {
left: 12px;
}
@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
.continue-watching-section .scroll-arrow {
display: grid;
}
}
@media (max-width: 600px) {
.continue-watching-section {
padding-block: 14px 20px;
}
.continue-watching-section .shahid-section-heading {
min-height: 50px;
padding-inline: 14px;
}
.continue-watching-section .shahid-section-heading > small {
font-size: .66rem;
}
.continue-watching-rail {
padding-inline: 14px;
scroll-padding-inline: 14px;
gap: 11px;
}
.continue-watching-card {
flex-basis: min(76vw, 270px);
}
.continue-watching-play {
width: 40px;
height: 40px;
}
}
/* ===== source: details-fixed-header-final.css ===== */
/* Space Gate Nova+ — final fixed details header
Loaded after every legacy stylesheet to keep the details page aligned with
the standard application header on Android and Windows. */
/* =========================================================
STANDARD FIXED DETAILS HEADER
Uses the same application-toolbar contract as the remaining pages.
The unique class intentionally bypasses all legacy floating hero-topbar
overrides that previously changed between absolute and fixed positioning.
========================================================= */
.details-app > .details-standard-header {
position: fixed !important;
inset: 0 0 auto 0 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: 2200 !important;
width: 100% !important;
max-width: none !important;
height: calc(var(--nova-app-header-h, 58px) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
min-height: calc(var(--nova-app-header-h, 58px) + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
padding: var(--safe-top, env(safe-area-inset-top, 0px)) max(clamp(14px, 3vw, 24px), var(--safe-right, 0px)) 0 max(clamp(14px, 3vw, 24px), var(--safe-left, 0px)) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
box-sizing: border-box !important;
direction: rtl !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid transparent !important;
box-shadow: none !important;
backdrop-filter: blur(0) saturate(1) !important;
-webkit-backdrop-filter: blur(0) saturate(1) !important;
transform: translateZ(0) !important;
contain: layout style !important;
transition:
background .24s cubic-bezier(.2,.78,.2,1),
border-color .24s cubic-bezier(.2,.78,.2,1),
box-shadow .24s cubic-bezier(.2,.78,.2,1),
backdrop-filter .24s cubic-bezier(.2,.78,.2,1) !important;
}
html.sg-header-scrolled .details-app > .details-standard-header {
background: rgba(0, 0, 0, .82) !important;
border-bottom-color: rgba(255,255,255,.065) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.30) !important;
backdrop-filter: blur(20px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}
.details-standard-header .details-standard-title {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 9px !important;
overflow: hidden !important;
}
.details-standard-header .details-standard-title h1 {
min-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #fff !important;
font-size: clamp(1.05rem, 2.4vw, 1.38rem) !important;
font-weight: 900 !important;
line-height: 1.15 !important;
text-shadow: 0 2px 12px rgba(0,0,0,.72) !important;
}
.details-standard-header .details-header-actions {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
direction: ltr !important;
}
.details-standard-header .details-header-action {
position: relative !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
outline: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: drop-shadow(0 2px 9px rgba(0,0,0,.72)) !important;
}
.details-standard-header .details-header-action.active {
color: #f04ad8 !important;
}
.details-standard-header .details-header-action:active {
transform: scale(.91) !important;
}
/* The old per-hero topbar is no longer rendered. Keep a defensive rule so a
stale WebView DOM cannot display it during hot reload or back navigation. */
.details-app .nova-details-topbar {
display: none !important;
}
@media (max-width: 600px) {
.details-app > .details-standard-header {
height: calc(54px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
min-height: calc(54px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
padding-inline: 12px !important;
gap: 7px !important;
}
.details-standard-header .details-standard-title {
gap: 5px !important;
}
.details-standard-header .details-standard-title h1 {
font-size: 1.02rem !important;
}
.details-standard-header .details-header-action {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
}
.details-standard-header .details-header-actions {
gap: 2px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.details-app > .details-standard-header {
transition: none !important;
}
}
@media (min-width: 600px) {
.details-app > .details-standard-header {
max-width: 1180px !important;
margin-inline: auto !important;
}
}
/* Runtime audit: use a real 44px interactive box. Negative inline margins
keep the approved compact visual footprint while the actual button remains
accessibility-sized. The glyph itself stays unchanged. */
.details-standard-header .details-header-action {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
margin-inline: -3px !important;
}
.details-standard-header .details-standard-title h1 {
text-align: start !important;
unicode-bidi: plaintext !important;
}
@media (max-width: 600px) {
.details-standard-header .details-header-action {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
margin-inline: -5px !important;
}
}
/* ===== source: wrestling-hub-v259.css ===== */
/* NOVA+ 2.62.0 Build 78 — Wrestling compatibility layer
Legacy selector layer mapped to the commercial purple / indigo / cyan identity.
The Build 78 full-canvas stylesheet is loaded after this compatibility layer. */
:root {
--wrestling-bg: #000000;
--wrestling-surface: #000000;
--wrestling-surface-2: #000000;
--wrestling-line: var(--oscar-border);
--wrestling-red: var(--accent);
--wrestling-red-hot: var(--accent);
--wrestling-gold: var(--accent);
--wrestling-gold-soft: var(--accent);
--wrestling-text: var(--oscar-text);
--wrestling-muted: var(--oscar-muted);
}
/* ---------- Wrestling landing world ---------- */
.catalog-landing-wrestling {
background:
radial-gradient(90% 42% at 50% 0%, rgba(0,0,0,.12), transparent 70%),
radial-gradient(62% 30% at 90% 38%, rgba(0,0,0,.055), transparent 72%),
#000000 !important;
}
.catalog-landing-wrestling .catalog-landing-toolbar {
border-bottom-color: var(--accent);
background: linear-gradient(to bottom, rgba(0,0,0,.96), rgba(0,0,0,.50), transparent);
}
.catalog-landing-wrestling .catalog-landing-toolbar h1 {
color: var(--wrestling-text);
letter-spacing: -.025em;
}
.catalog-landing-wrestling .catalog-landing-toolbar-button {
border-color: var(--accent);
background: rgba(0,0,0,.72);
box-shadow: 0 12px 30px rgba(0,0,0,.46), 0 0 20px rgba(0,0,0,.06);
}
.wrestling-hub-quick-nav {
width: 100%;
margin: -3px 0 2px;
padding: 6px 16px 12px;
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
overscroll-behavior-inline: contain;
box-sizing: border-box;
}
.wrestling-hub-quick-nav::-webkit-scrollbar { display: none; }
.wrestling-hub-chip {
flex: 0 0 auto;
min-height: 36px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid var(--accent);
border-radius: 10px;
color: var(--accent);
background: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.92));
box-shadow: inset 0 1px rgba(0,0,0,.025), 0 8px 20px rgba(0,0,0,.26);
font-family:inherit;
font-size: .72rem;
font-weight: 850;
white-space: nowrap;
}
.wrestling-hub-chip svg { color: var(--wrestling-gold); }
.wrestling-hub-chip.active,
.wrestling-hub-chip.live {
color: var(--oscar-text);
border-color: var(--accent);
background: linear-gradient(135deg, rgba(0,0,0,.94), rgba(0,0,0,.94));
box-shadow: 0 10px 24px rgba(0,0,0,.20), inset 0 1px rgba(0,0,0,.08);
}
.wrestling-hub-chip.live svg { color: var(--oscar-text); }
.wrestling-hub-chip:active { transform: scale(.97); }
/* Hero: keep the actual catalog artwork, change only the broadcast language. */
.world-wrestling.target-home-hero-shell {
background: #000000;
margin-bottom: 10px;
}
.world-wrestling .target-hero-slide {
height: clamp(430px, 58dvh, 590px);
min-height: 430px;
}
.world-wrestling .target-hero-shade {
background:
radial-gradient(circle at 70% 36%, rgba(0,0,0,.14), transparent 36%),
linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.02) 25%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.91) 88%, #000000 100%),
linear-gradient(90deg, rgba(0,0,0,.22), transparent 36%, rgba(0,0,0,.10));
}
.world-wrestling .target-hero-text h1 {
color: var(--oscar-text);
text-shadow: 0 4px 24px rgba(0,0,0,.88), 0 0 28px rgba(0,0,0,.08);
}
.world-wrestling .target-hero-text p,
.world-wrestling .target-hero-meta { color: var(--oscar-text); }
.world-wrestling .target-hero-meta > span:not(.target-hero-status) + span:not(.target-hero-status)::before {
background: #000000;
}
.world-wrestling .target-hero-status::before {
border-radius: 50%;
transform: none;
background: #000000;
box-shadow: 0 0 14px rgba(0,0,0,.58);
}
.world-wrestling .target-watch-button {
background: linear-gradient(135deg, #000000 0%, #000000 64%, #000000 100%);
box-shadow: 0 12px 26px rgba(0,0,0,.30), inset 0 1px rgba(0,0,0,.11);
}
.world-wrestling .target-save-button,
.world-wrestling .target-save-button.saved,
.world-wrestling .target-save-button:hover,
.world-wrestling .target-save-button:focus,
.world-wrestling .target-save-button:active {
border: 1px solid var(--accent) !important;
background: rgba(0,0,0,.72) !important;
color: var(--accent) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.38), inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
.world-wrestling .target-save-button.saved {
background: rgba(0,0,0,.30) !important;
}
.world-wrestling .target-hero-dots button.active {
background: linear-gradient(90deg, #000000, #000000);
box-shadow: 0 0 12px rgba(0,0,0,.25);
}
/* Compact wrestling rails. */
.shahid-home-section.world-wrestling {
background: transparent;
padding-top: 13px;
padding-bottom: 17px;
}
.world-wrestling .shahid-section-heading { min-height: 44px; }
.world-wrestling .shahid-section-heading h2 {
color: var(--oscar-text);
font-size: clamp(.86rem, 2vw, 1.02rem);
}
.world-wrestling .shahid-section-heading h2::before {
width: 4px;
min-height: 24px;
background: linear-gradient(180deg, #000000, #000000);
}
.world-wrestling .shahid-section-heading > button { color: var(--wrestling-red-hot); }
.world-wrestling .shahid-rail { gap: 9px; }
.world-wrestling.shahid-short-section .shahid-short-card {
flex-basis: clamp(230px, 52vw, 380px);
aspect-ratio: 16 / 9;
border-radius: 10px;
}
.world-wrestling.shahid-short-section .shahid-short-copy {
right: 10px; left: 10px; bottom: 9px;
}
.world-wrestling .shahid-poster-card,
.world-wrestling .shahid-live-card,
.world-wrestling .shahid-short-card,
.world-wrestling .shahid-landscape-card,
.world-wrestling .shahid-ranked-card {
border: 1px solid var(--accent);
background: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.98));
box-shadow: 0 9px 22px rgba(0,0,0,.28);
}
.world-wrestling .shahid-poster-card,
.world-wrestling .shahid-live-card { border-radius: 10px; overflow: hidden; }
.world-wrestling .shahid-landscape-card { border-radius: 10px; }
.world-wrestling .shahid-taxonomy-badges em.region {
background: linear-gradient(135deg, rgba(0,0,0,.95), rgba(0,0,0,.82));
}
.world-wrestling .shahid-landscape-duration {
border-color: var(--accent);
background: rgba(0,0,0,.82);
}
.world-wrestling .shahid-rank-ribbon {
color: var(--oscar-muted);
background: linear-gradient(180deg, #000000, #000000);
}
.world-wrestling .nova-rail-page-sentinel.loading i:nth-child(1) {
color: var(--accent);
background: #000000;
box-shadow: 0 0 12px rgba(0,0,0,.72);
}
.world-wrestling .nova-rail-page-sentinel.loading i:nth-child(2) {
color: var(--accent);
background: #000000;
box-shadow: 0 0 12px rgba(0,0,0,.68);
}
.world-wrestling .nova-rail-page-sentinel.loading i:nth-child(3) {
color: var(--oscar-text);
background: #000000;
box-shadow: 0 0 11px rgba(0,0,0,.44);
}
/* ---------- Full wrestling catalog ---------- */
.catalog-world-wrestling {
--nova-catalog-line: var(--oscar-border);
--nova-catalog-active-border: linear-gradient(100deg, var(--accent) 0%, var(--accent) 52%, var(--accent) 100%);
--nova-catalog-header-h: calc(216px + var(--safe-top, 0px));
background: #000000 !important;
}
.catalog-world-wrestling .nova-catalog-fixed-header {
background:
radial-gradient(90% 130% at 84% 0%, rgba(0,0,0,.10), transparent 62%),
linear-gradient(180deg, rgba(0,0,0,.99), rgba(0,0,0,.97));
border-bottom-color: var(--accent) !important;
}
.catalog-world-wrestling .nova-catalog-heading-copy h1 { color: var(--oscar-text); }
.catalog-world-wrestling .nova-catalog-heading-copy p { color: var(--oscar-muted); }
.catalog-world-wrestling .nova-catalog-back,
.catalog-world-wrestling .nova-catalog-icon,
.catalog-world-wrestling .nova-catalog-search,
.catalog-world-wrestling .nova-catalog-select-card {
border-color: var(--accent) !important;
background-color: rgba(0,0,0,.88) !important;
}
.catalog-world-wrestling .nova-catalog-search:focus-within,
.catalog-world-wrestling .nova-catalog-select-card.active {
border-color: transparent !important;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(100deg,#000000,#000000) border-box !important;
}
.catalog-world-wrestling .nova-catalog-notification i { background: #000000 !important; }
.wrestling-catalog-quick-row {
height: 39px;
min-height: 39px;
display: flex;
align-items: center;
gap: 7px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
padding-top: 4px;
}
.wrestling-catalog-quick-row::-webkit-scrollbar { display: none; }
.wrestling-catalog-quick-chip {
flex: 0 0 auto;
height: 31px;
min-height: 31px;
padding: 0 13px;
border: 1px solid var(--accent);
border-radius: 8px;
color: var(--accent);
background: rgba(0,0,0,.88);
font-family:inherit;
font-size: .68rem;
font-weight: 850;
}
.wrestling-catalog-quick-chip.active {
color: var(--oscar-text);
border-color: var(--accent);
background: linear-gradient(135deg, #000000, #000000);
box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.catalog-world-wrestling .nova-category-chip.active {
color: var(--oscar-text) !important;
}
.catalog-world-wrestling .nova-media-art {
border-color: var(--accent);
border-radius: 12px;
background: #000000;
box-shadow: 0 10px 22px rgba(0,0,0,.32);
}
.catalog-world-wrestling .nova-media-card > strong { color: var(--oscar-text); }
.catalog-world-wrestling .nova-media-card > small { color: var(--accent); }
.catalog-world-wrestling .nova-media-quality {
color: var(--oscar-muted);
background: linear-gradient(180deg,#000000,#000000) !important;
}
.catalog-world-wrestling .nova-media-play {
background: rgba(0,0,0,.88) !important;
border-color: var(--oscar-border) !important;
}
.catalog-world-wrestling .nova-inline-sync i { background: #000000 !important; }
/* ---------- Wrestling event details ---------- */
.details-wrestling {
--nova-bg-master: #000000 !important;
--nova-surface-dark: #000000 !important;
--nova-surface-card: #000000 !important;
--nova-surface-hover: #000000 !important;
--nova-border-subtle: var(--accent) !important;
--nova-brand-primary: var(--accent) !important;
--nova-brand-secondary: var(--accent) !important;
--nova-text-pure: var(--oscar-text) !important;
--nova-text-dim: var(--oscar-text-2) !important;
--nova-text-muted: var(--oscar-muted) !important;
background: #000000 !important;
}
.details-wrestling .details-standard-header {
border-bottom-color: var(--accent) !important;
background: linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.58), transparent) !important;
}
.details-wrestling .cinematic-details-shade {
background:
radial-gradient(circle at 74% 32%, rgba(0,0,0,.12), transparent 34%),
linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.06) 28%, rgba(0,0,0,.58) 68%, #000000 100%) !important;
}
.details-wrestling .cinematic-eyebrow span,
.details-wrestling .pulse-dot { background: #000000 !important; box-shadow: 0 0 12px rgba(0,0,0,.52) !important; }
.details-wrestling .cinematic-eyebrow b { color: var(--wrestling-gold-soft) !important; }
.details-wrestling .cinematic-ranking span:first-child { color: var(--wrestling-gold-soft) !important; }
.details-wrestling .cinematic-watch-button {
background: linear-gradient(135deg,#000000,#000000) !important;
box-shadow: 0 13px 28px rgba(0,0,0,.28) !important;
}
.details-wrestling .cinematic-secondary-action {
border-color: var(--accent) !important;
color: var(--accent) !important;
background: rgba(0,0,0,.76) !important;
}
.details-wrestling .cinematic-tabs button.active {
color: var(--oscar-text) !important;
border-color: var(--wrestling-red-hot) !important;
}
.details-wrestling .cinematic-tabs button.active::after,
.details-wrestling .episode-season-filter-strip button.active::after {
background: linear-gradient(90deg,#000000,#000000) !important;
}
.details-wrestling .reference-panel,
.details-wrestling .episode-gallery-panel,
.details-wrestling .server-row,
.details-wrestling .source-card {
border-color: var(--accent) !important;
background: linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.96)) !important;
}
.details-wrestling .reference-panel-heading h2,
.details-wrestling .episode-gallery-heading h2 { color: var(--oscar-text) !important; }
.details-wrestling .rating-highlight,
.details-wrestling .reference-info-grid dd svg { color: var(--wrestling-gold) !important; }
@media (max-width: 680px) {
.world-wrestling .target-hero-slide {
height: clamp(370px, 52dvh, 455px);
min-height: 370px;
}
.wrestling-hub-quick-nav { padding-inline: 12px; gap: 7px; }
.wrestling-hub-chip { min-height: 34px; padding-inline: 12px; font-size: .68rem; }
.shahid-home-section.world-wrestling { padding-block: 11px 15px; }
.world-wrestling .shahid-section-heading { min-height: 40px; padding-inline: 14px; }
.world-wrestling .shahid-poster-card,
.world-wrestling .shahid-live-card { flex-basis: 27.5vw; }
.catalog-world-wrestling {
--nova-catalog-header-h: calc(196px + var(--safe-top, 0px));
}
.catalog-world-wrestling.mobile-search-open {
--nova-catalog-header-h: calc(245px + var(--safe-top, 0px));
}
.wrestling-catalog-quick-row { height: 36px; min-height: 36px; }
.wrestling-catalog-quick-chip { height: 29px; min-height: 29px; padding-inline: 11px; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
.wrestling-hub-chip,
.wrestling-catalog-quick-chip { transition: none !important; }
}
/* ===== source: anime-hub-v260.css ===== */
/* NOVA+ 2.60.0 Build 76 — Anime Otaku Hub
Dedicated Neon / Cyberpunk / Japanese-minimal world. Loaded last and scoped. */
:root {
--anime-bg: #000000;
--anime-surface: #000000;
--anime-surface-2: #000000;
--anime-line: var(--oscar-border);
--anime-cyan: var(--accent);
--anime-blue: var(--accent);
--anime-purple: var(--accent);
--anime-pink: var(--accent);
--anime-text: var(--oscar-text);
--anime-muted: var(--oscar-muted);
}
/* ---------- Anime landing ---------- */
.catalog-landing-anime {
background:
radial-gradient(70% 35% at 86% 0%, rgba(0,0,0,.14), transparent 72%),
radial-gradient(58% 26% at 10% 32%, rgba(0,0,0,.08), transparent 72%),
linear-gradient(180deg,#000000,#000000 55%,#000000) !important;
}
.catalog-landing-anime .catalog-landing-toolbar {
border-bottom-color: var(--accent);
background: linear-gradient(to bottom, rgba(0,0,0,.97), rgba(0,0,0,.52), transparent);
}
.catalog-landing-anime .catalog-landing-toolbar h1 {
color: var(--anime-text);
font-size: clamp(1.12rem, 3vw, 1.42rem);
letter-spacing: -.03em;
text-shadow: 0 0 22px rgba(0,0,0,.10);
}
.catalog-landing-anime .catalog-landing-toolbar-button {
border: 1px solid var(--accent);
background: rgba(0,0,0,.72);
box-shadow: 0 10px 28px rgba(0,0,0,.40), 0 0 18px rgba(0,0,0,.035);
}
.anime-season-strip {
width: 100%;
padding: 5px 14px 5px;
display: flex;
align-items: center;
gap: 7px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
box-sizing: border-box;
}
.anime-season-strip::-webkit-scrollbar { display:none; }
.anime-season-year,
.anime-season-chip {
flex: 0 0 auto;
min-height: 32px;
border: 1px solid var(--accent);
border-radius: 9px;
color: var(--accent);
background: linear-gradient(180deg,rgba(0,0,0,.84),rgba(0,0,0,.90));
font-family:inherit;
font-size: .68rem;
font-weight: 800;
}
.anime-season-year { min-width: 58px; padding: 0 11px; color:var(--accent); }
.anime-season-year.previous { color:var(--accent); }
.anime-season-chip { padding: 0 11px; display:inline-flex; align-items:center; gap:6px; }
.anime-season-chip span { font-size:.76rem; }
.anime-season-chip.active {
color:var(--oscar-text);
border-color: var(--accent);
background: linear-gradient(135deg,rgba(0,0,0,.44),rgba(0,0,0,.58),rgba(0,0,0,.50));
box-shadow: 0 7px 20px rgba(0,0,0,.07), inset 0 1px rgba(0,0,0,.06);
}
.anime-hub-quick-nav {
width:100%;
margin: 1px 0 5px;
padding: 4px 14px 10px;
display:flex;
gap:7px;
overflow-x:auto;
overflow-y:hidden;
direction:rtl;
scrollbar-width:none;
box-sizing:border-box;
}
.anime-hub-quick-nav::-webkit-scrollbar{display:none;}
.anime-hub-chip {
flex:0 0 auto;
min-height:34px;
padding:0 12px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
border:1px solid var(--accent);
border-radius:10px;
color:var(--accent);
background:rgba(0,0,0,.78);
font: 800 .67rem/1 Tajawal,Arial,sans-serif;
white-space:nowrap;
box-shadow: inset 0 1px rgba(0,0,0,.025);
}
.anime-hub-chip svg { color:var(--anime-cyan); }
.anime-hub-chip > span:first-child:not(:last-child) { color:var(--accent); font-size:.62rem; }
.anime-hub-chip.active {
color:var(--oscar-text);
border-color:var(--accent);
background:linear-gradient(135deg,rgba(0,0,0,.70),rgba(0,0,0,.78),rgba(0,0,0,.70));
box-shadow:0 8px 22px rgba(0,0,0,.11), inset 0 1px rgba(0,0,0,.07);
}
.anime-hub-chip:active { transform:scale(.97); }
/* Hero */
.world-anime.target-home-hero-shell { background:transparent; margin-bottom:3px; }
.world-anime .target-hero-slide { height:clamp(410px,55dvh,560px); min-height:410px; }
.world-anime .target-hero-shade {
background:
radial-gradient(circle at 78% 28%,rgba(0,0,0,.13),transparent 36%),
radial-gradient(circle at 42% 48%,rgba(0,0,0,.08),transparent 40%),
linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.02) 28%,rgba(0,0,0,.48) 64%,#000000 100%);
}
.world-anime .target-hero-copy { padding-bottom:58px; }
.world-anime .target-hero-text { max-width:min(720px,88vw); }
.world-anime .target-hero-text h1 { color:var(--oscar-text); font-size:clamp(1.55rem,5vw,2.8rem); text-shadow:0 4px 26px rgba(0,0,0,.86),0 0 24px rgba(0,0,0,.10); }
.world-anime .target-hero-text p,
.world-anime .target-hero-meta { color:var(--accent); font-size:.74rem; }
.anime-hero-badges { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; }
.anime-hero-badges span {
min-height:24px; padding:0 8px; display:inline-flex; align-items:center; gap:4px;
border:1px solid var(--accent); border-radius:7px;
color:var(--accent); background:rgba(0,0,0,.62); backdrop-filter:blur(10px);
font-size:.62rem; font-weight:850;
}
.anime-hero-badges .studio { border-color:var(--accent); color:var(--accent); }
.anime-hero-badges .score { color:var(--accent); }
.anime-hero-badges .episode { border-color:var(--accent); color:var(--accent); }
.anime-hero-alias { display:block; max-width:80%; margin:2px 0 5px; color:var(--accent); font-size:.68rem; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.world-anime .target-hero-meta > span:not(.target-hero-status) + span:not(.target-hero-status)::before { background:#000000; }
.world-anime .target-hero-status::before { background:#000000; box-shadow:0 0 13px rgba(0,0,0,.52); }
.world-anime .target-watch-button { background:linear-gradient(105deg,#000000 0%,#000000 54%,#000000 100%); box-shadow:0 12px 28px rgba(0,0,0,.25),inset 0 1px rgba(0,0,0,.13); }
.world-anime .target-save-button,
.world-anime .target-save-button.saved,
.world-anime .target-save-button:hover,
.world-anime .target-save-button:focus,
.world-anime .target-save-button:active {
border:1px solid var(--accent)!important;
background:rgba(0,0,0,.68)!important;
color:var(--oscar-text)!important;
box-shadow:0 12px 28px rgba(0,0,0,.34),inset 0 0 0 1px rgba(0,0,0,.03)!important;
}
.world-anime .target-hero-dots button.active { background:linear-gradient(90deg,#000000,#000000,#000000); box-shadow:0 0 12px rgba(0,0,0,.34); }
/* Compact anime rails */
.shahid-home-section.world-anime { background:transparent; padding-top:10px; padding-bottom:15px; }
.world-anime .shahid-section-heading { min-height:39px; padding-inline:14px; }
.world-anime .shahid-section-heading h2 { color:var(--oscar-text); font-size:clamp(.82rem,2vw,.98rem); font-weight:900; }
.world-anime .shahid-section-heading h2::before { width:3px; min-height:22px; background:linear-gradient(180deg,#000000,#000000,#000000); }
.world-anime .shahid-section-heading > button { color:var(--anime-cyan); width:36px; height:36px; }
.world-anime .shahid-rail { gap:8px; }
.world-anime.shahid-short-section .shahid-short-card { flex-basis:clamp(160px,31vw,250px); aspect-ratio:2/3; border-radius:11px; }
.world-anime .shahid-poster-card,
.world-anime .shahid-live-card,
.world-anime .shahid-short-card,
.world-anime .shahid-landscape-card,
.world-anime .shahid-ranked-card {
border:1px solid var(--accent);
background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.98));
box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.world-anime .shahid-poster-card,
.world-anime .shahid-live-card { border-radius:11px; overflow:hidden; }
.world-anime .shahid-short-copy strong { font-size:clamp(.68rem,1.7vw,.88rem); }
.world-anime .shahid-short-copy small { font-size:clamp(.58rem,1.35vw,.72rem); color:var(--accent); }
.world-anime .shahid-taxonomy-badges em.region { background:linear-gradient(135deg,rgba(0,0,0,.92),rgba(0,0,0,.90),rgba(0,0,0,.88)); }
.world-anime .shahid-rank-ribbon { background:linear-gradient(180deg,#000000,#000000 56%,#000000); color:var(--accent); }
.world-anime .nova-rail-page-sentinel.loading i:nth-child(1) { color:var(--anime-cyan); background:#000000; box-shadow:0 0 12px rgba(0,0,0,.72); }
.world-anime .nova-rail-page-sentinel.loading i:nth-child(2) { color:var(--anime-blue); background:#000000; box-shadow:0 0 12px rgba(0,0,0,.70); }
.world-anime .nova-rail-page-sentinel.loading i:nth-child(3) { color:var(--anime-purple); background:#000000; box-shadow:0 0 12px rgba(0,0,0,.68); }
/* Schedule is rendered only when the backend supplies real next-air metadata. */
.anime-weekly-schedule { margin:12px 14px 18px; padding:12px; border:1px solid var(--accent); border-radius:14px; background:linear-gradient(145deg,rgba(0,0,0,.84),rgba(0,0,0,.93)); box-shadow:0 14px 32px rgba(0,0,0,.26); }
.anime-weekly-schedule header { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:10px; }
.anime-weekly-schedule header span { color:var(--anime-cyan); font-size:.56rem; font-weight:950; letter-spacing:.12em; }
.anime-weekly-schedule header h2 { margin:2px 0 0; color:var(--oscar-text); font-size:.88rem; }
.anime-weekly-schedule header button { border:0; background:transparent; color:var(--accent); font:800 .64rem Tajawal,Arial; }
.anime-schedule-rail { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; direction:rtl; }
.anime-schedule-rail::-webkit-scrollbar{display:none;}
.anime-schedule-card { flex:0 0 clamp(210px,62vw,320px); min-height:76px; padding:7px; display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:8px; border:1px solid var(--accent); border-radius:10px; color:var(--oscar-text); background:rgba(0,0,0,.88); text-align:right; }
.anime-schedule-card img { width:54px!important; height:62px!important; object-fit:cover!important; border-radius:7px; }
.anime-schedule-card span { min-width:0; display:grid; gap:3px; }
.anime-schedule-card b { font-size:.69rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.anime-schedule-card small { color:var(--accent); font-size:.58rem; }
.anime-schedule-card em { padding:4px 6px; border-radius:6px; color:var(--accent); background:rgba(0,0,0,.12); font-style:normal; font-size:.56rem; white-space:nowrap; }
/* ---------- Anime full catalog ---------- */
.catalog-world-anime {
--nova-catalog-line:var(--oscar-border);
--nova-catalog-active-border:linear-gradient(100deg,var(--accent) 0%,var(--accent) 48%,var(--accent) 100%);
--nova-catalog-header-h:calc(254px + var(--safe-top,0px));
background:#000000!important;
}
.catalog-world-anime .nova-catalog-fixed-header { background:radial-gradient(90% 130% at 84% 0%,rgba(0,0,0,.11),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.995),rgba(0,0,0,.97)); border-bottom-color:var(--accent)!important; }
.catalog-world-anime .nova-catalog-heading-copy h1 { color:var(--oscar-text); }
.catalog-world-anime .nova-catalog-heading-copy p { color:var(--accent); }
.catalog-world-anime .nova-catalog-back,
.catalog-world-anime .nova-catalog-icon,
.catalog-world-anime .nova-catalog-search,
.catalog-world-anime .nova-catalog-select-card { border-color:var(--accent)!important; background-color:rgba(0,0,0,.88)!important; }
.catalog-world-anime .nova-catalog-search:focus-within,
.catalog-world-anime .nova-catalog-select-card.active { border-color:transparent!important; background:linear-gradient(#000000,#000000) padding-box,linear-gradient(100deg,#000000,#000000,#000000) border-box!important; }
.catalog-world-anime .nova-catalog-notification i { background:#000000!important; }
.catalog-world-anime .nova-media-art { border-color:var(--accent); border-radius:12px; background:#000000; box-shadow:0 9px 20px rgba(0,0,0,.28); }
.catalog-world-anime .nova-media-card > strong { color:var(--oscar-text); font-size:.73rem; }
.catalog-world-anime .nova-media-card > small { color:var(--accent); font-size:.59rem; }
.catalog-world-anime .nova-media-quality { background:linear-gradient(135deg,#000000,#000000,#000000)!important; }
.catalog-world-anime .nova-media-play { background:rgba(0,0,0,.88)!important; border-color:var(--accent)!important; }
.catalog-world-anime .nova-inline-sync i { background:#000000!important; }
.anime-catalog-quick-row { height:37px; min-height:37px; display:flex; align-items:center; gap:7px; overflow-x:auto; overflow-y:hidden; direction:rtl; scrollbar-width:none; padding-top:3px; }
.anime-catalog-quick-row::-webkit-scrollbar{display:none;}
.anime-catalog-quick-chip { flex:0 0 auto; height:29px; min-height:29px; padding:0 11px; border:1px solid var(--accent); border-radius:8px; color:var(--accent); background:rgba(0,0,0,.88); font:800 .64rem Tajawal,Arial; }
.anime-catalog-quick-chip.active { color:var(--oscar-text); border-color:var(--accent); background:linear-gradient(135deg,rgba(0,0,0,.70),rgba(0,0,0,.78),rgba(0,0,0,.72)); box-shadow:0 7px 18px rgba(0,0,0,.10); }
.anime-catalog-meta-row { min-height:37px; display:flex; align-items:center; gap:7px; overflow-x:auto; direction:rtl; scrollbar-width:none; padding:2px 0 4px; }
.anime-catalog-meta-row::-webkit-scrollbar{display:none;}
.anime-catalog-meta-row label { position:relative; flex:0 0 auto; height:30px; min-width:104px; padding:0 9px; display:flex; align-items:center; gap:6px; border:1px solid var(--accent); border-radius:8px; color:var(--accent); background:rgba(0,0,0,.88); font-size:.58rem; }
.anime-catalog-meta-row label span { pointer-events:none; }
.anime-catalog-meta-row select { min-width:58px; border:0; outline:0; color:var(--accent); background:transparent; font:800 .62rem Tajawal,Arial; }
.anime-catalog-meta-row select option { color:var(--oscar-text); background:#000000; }
/* ---------- Anime details ---------- */
.details-anime {
--nova-bg-master:#000000!important;
--nova-surface-dark:#000000!important;
--nova-surface-card:#000000!important;
--nova-surface-hover:#000000!important;
--nova-border-subtle:var(--accent)!important;
--nova-brand-primary:var(--accent)!important;
--nova-brand-secondary:var(--accent)!important;
--nova-text-pure:var(--oscar-text)!important;
--nova-text-dim:var(--oscar-text-2)!important;
--nova-text-muted:var(--oscar-muted)!important;
background:#000000!important;
}
.details-anime .details-standard-header { border-bottom-color:var(--accent)!important; background:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.60),transparent)!important; }
.details-anime .cinematic-details-shade { background:radial-gradient(circle at 76% 28%,rgba(0,0,0,.13),transparent 36%),radial-gradient(circle at 40% 48%,rgba(0,0,0,.08),transparent 42%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.08) 28%,rgba(0,0,0,.58) 69%,#000000 100%)!important; }
.details-anime .cinematic-eyebrow span,.details-anime .pulse-dot { background:#000000!important; box-shadow:0 0 12px rgba(0,0,0,.48)!important; }
.details-anime .cinematic-eyebrow b { color:var(--accent)!important; letter-spacing:.05em; }
.details-anime .cinematic-title { font-size:clamp(1.55rem,5vw,3rem)!important; }
.anime-details-aliases { margin-top:4px; max-width:78%; color:var(--accent); font-size:clamp(.68rem,1.8vw,.84rem); font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.details-anime .cinematic-ranking span:first-child { color:var(--accent)!important; }
.details-anime .anime-studio-pill { color:var(--accent)!important; border:1px solid var(--accent); border-radius:7px; padding:3px 7px; background:rgba(0,0,0,.48); }
.details-anime .cinematic-watch-button { background:linear-gradient(105deg,#000000,#000000 54%,#000000)!important; box-shadow:0 13px 30px rgba(0,0,0,.24)!important; }
.details-anime .cinematic-secondary-action { border-color:var(--accent)!important; color:var(--accent)!important; background:rgba(0,0,0,.72)!important; }
.details-anime .cinematic-tabs button.active { color:var(--oscar-text)!important; border-color:var(--anime-cyan)!important; }
.details-anime .cinematic-tabs button.active::after,.details-anime .episode-season-filter-strip button.active::after { background:linear-gradient(90deg,#000000,#000000,#000000)!important; }
.details-anime .reference-panel,.details-anime .episode-gallery-panel,.details-anime .server-row,.details-anime .source-card { border-color:var(--accent)!important; background:linear-gradient(180deg,rgba(0,0,0,.91),rgba(0,0,0,.96))!important; }
.details-anime .reference-panel-heading h2,.details-anime .episode-gallery-heading h2 { color:var(--oscar-text)!important; }
.details-anime .rating-highlight,.details-anime .reference-info-grid dd svg { color:var(--accent)!important; }
.anime-episode-kind-filter { display:flex; gap:7px; margin:8px 0 10px; overflow-x:auto; scrollbar-width:none; }
.anime-episode-kind-filter::-webkit-scrollbar{display:none;}
.anime-episode-kind-filter button { min-width:64px; height:30px; padding:0 11px; border:1px solid var(--accent); border-radius:8px; color:var(--accent); background:rgba(0,0,0,.82); font:800 .64rem Tajawal,Arial; }
.anime-episode-kind-filter button.active { color:var(--oscar-text); border-color:var(--accent); background:linear-gradient(135deg,rgba(0,0,0,.55),rgba(0,0,0,.66)); }
.anime-episode-kind { min-width:48px; padding:3px 7px; border-radius:7px; font-style:normal; font-size:.55rem; font-weight:900; text-align:center; }
.anime-episode-kind.canon { color:var(--accent); border:1px solid var(--accent); background:rgba(0,0,0,.10); }
.anime-episode-kind.filler { color:var(--accent); border:1px solid var(--accent); background:rgba(0,0,0,.09); }
@media (max-width:680px) {
.world-anime .target-hero-slide { height:clamp(365px,49dvh,445px); min-height:365px; }
.world-anime .target-hero-copy { padding-bottom:52px; }
.world-anime .target-hero-text h1 { font-size:1.55rem; }
.shahid-home-section.world-anime { padding-block:8px 13px; }
.world-anime .shahid-poster-card,.world-anime .shahid-live-card { flex-basis:24.5vw; }
.world-anime.shahid-short-section .shahid-short-card { flex-basis:31vw; }
.catalog-world-anime { --nova-catalog-header-h:calc(228px + var(--safe-top,0px)); }
.catalog-world-anime.mobile-search-open { --nova-catalog-header-h:calc(276px + var(--safe-top,0px)); }
.anime-catalog-meta-row { min-height:34px; }
.anime-catalog-meta-row label { height:28px; }
}
@media (prefers-reduced-motion:reduce) {
.anime-hub-chip,.anime-season-chip,.anime-catalog-quick-chip { transition:none!important; }
}
/* ===== source: professional-world-hubs-v262.css ===== */
/* NOVA+ 2.62.0 Build 78 — Immersive Full-Canvas Anime + Wrestling Hubs
No sidebars. Pure #000000 canvas. Full-width responsive composition.
Accent palette is locked to Space Gate commercial identity only. */
:root {
--hub-brand-a: #C25DFF;
--hub-brand-b: #6D7DFF;
--hub-brand-c: #4BE9FF;
--hub-brand-d: #C25DFF;
--hub-bg: #05060c;
--hub-panel: rgba(11, 13, 24, .88);
--hub-panel-strong: rgba(8, 10, 18, .96);
--hub-line: rgba(137, 115, 255, .18);
--hub-line-strong: rgba(155, 77, 255, .38);
--hub-text: #F7F8FF;
--hub-muted: #929BB6;
--hub-grad: linear-gradient(105deg, var(--hub-brand-a), var(--hub-brand-b) 52%, var(--hub-brand-c));
}
.catalog-landing-anime,
.catalog-landing-wrestling {
background:
radial-gradient(70% 44% at 82% -4%, rgba(109,125,255,.11), transparent 68%),
radial-gradient(46% 28% at 8% 32%, rgba(75,233,255,.055), transparent 70%),
#05060c !important;
}
.catalog-landing-anime .catalog-landing-main,
.catalog-landing-wrestling .catalog-landing-main,
.catalog-landing-anime .catalog-landing-reference,
.catalog-landing-wrestling .catalog-landing-reference {
background: transparent !important;
}
.catalog-landing-anime .catalog-landing-toolbar,
.catalog-landing-wrestling .catalog-landing-toolbar {
background: linear-gradient(180deg, rgba(5,6,12,.96), rgba(5,6,12,.68), transparent) !important;
border-bottom-color: rgba(194,93,255,.09) !important;
}
.catalog-landing-anime .catalog-landing-toolbar-button,
.catalog-landing-wrestling .catalog-landing-toolbar-button {
border-color: rgba(194,93,255,.22) !important;
color: var(--hub-text) !important;
background: rgba(10,12,22,.76) !important;
}
/* ----- responsive hub shell ----- */
.world-hub-shell {
width: min(100%, 1620px);
margin: 0 auto;
padding: 82px clamp(14px, 2.2vw, 30px) 36px;
display: grid;
grid-template-columns: 228px minmax(0, 1fr);
gap: 18px;
direction: ltr;
box-sizing: border-box;
}
.world-hub-sidebar,
.world-hub-stage {
direction: rtl;
}
.world-hub-sidebar {
position: sticky;
top: 82px;
align-self: start;
height: calc(100dvh - 108px);
min-height: 560px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 14px;
overflow: hidden;
border: 1px solid var(--hub-line);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(16,18,33,.94), rgba(7,9,17,.96)),
#080a12;
box-shadow: 0 24px 60px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025);
}
.world-hub-sidebar-brand {
min-height: 62px;
padding: 5px 4px 13px;
display: grid;
grid-template-columns: 34px minmax(0,1fr);
gap: 10px;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.world-hub-brand-mark {
position: relative;
width: 32px;
height: 32px;
display: block;
transform: rotate(45deg);
}
.world-hub-brand-mark i {
position: absolute;
inset: 4px;
border: 2px solid var(--hub-brand-a);
border-radius: 7px;
box-shadow: 0 0 18px rgba(194,93,255,.18);
}
.world-hub-brand-mark i:nth-child(2) { inset: 9px; border-color: var(--hub-brand-b); }
.world-hub-brand-mark i:nth-child(3) { inset: 14px; border-color: var(--hub-brand-c); }
.world-hub-sidebar-brand b,
.world-hub-sidebar-brand small { display:block; }
.world-hub-sidebar-brand b { color:var(--hub-text); font-size:.92rem; font-weight:950; }
.world-hub-sidebar-brand small { margin-top:3px; color:#C25DFF; font-size:.54rem; font-weight:950; letter-spacing:.13em; }
.world-hub-sidebar nav {
display:grid;
gap:5px;
}
.world-hub-sidebar nav button {
min-height: 43px;
padding: 0 12px;
display:flex;
align-items:center;
gap:10px;
border:1px solid transparent;
border-radius:10px;
color:#A8B0C7;
background:transparent;
font:800 .72rem/1 Tajawal,Arial,sans-serif;
text-align:right;
}
.world-hub-sidebar nav button svg { color:#8D95AC; }
.world-hub-sidebar nav button:hover,
.world-hub-sidebar nav button.active {
color:#fff;
border-color:rgba(194,93,255,.28);
background:linear-gradient(90deg,rgba(194,93,255,.18),rgba(109,125,255,.08),rgba(75,233,255,.025));
box-shadow:inset 3px 0 0 rgba(75,233,255,.32);
}
.world-hub-sidebar nav button:hover svg,
.world-hub-sidebar nav button.active svg { color:#C25DFF; }
.world-hub-sidebar-card {
margin-top:auto;
padding:14px;
display:grid;
gap:7px;
border:1px solid rgba(194,93,255,.20);
border-radius:14px;
background:
radial-gradient(circle at 90% 0%,rgba(109,125,255,.13),transparent 48%),
rgba(14,16,29,.84);
}
.world-hub-sidebar-card small { color:#C25DFF; font-size:.52rem; font-weight:950; letter-spacing:.1em; }
.world-hub-sidebar-card strong { color:#F5F6FF; font-size:.77rem; line-height:1.5; }
.world-hub-sidebar-card p { margin:0; color:#8790AA; font-size:.62rem; line-height:1.7; }
.world-hub-sidebar-card button {
min-height:36px;
border:1px solid transparent;
border-radius:9px;
color:#fff;
background:linear-gradient(#0d101d,#0d101d) padding-box,var(--hub-grad) border-box;
font:900 .68rem Tajawal,Arial,sans-serif;
}
.world-hub-stage {
min-width:0;
display:grid;
gap:14px;
}
.world-hub-desktop-topbar {
min-height:64px;
padding:0 4px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.world-hub-desktop-copy small,
.world-hub-desktop-copy strong,
.world-hub-desktop-copy span { display:block; }
.world-hub-desktop-copy small { color:#C25DFF; font-size:.54rem; font-weight:950; letter-spacing:.14em; }
.world-hub-desktop-copy strong { margin-top:3px; color:#fff; font-size:1.17rem; font-weight:950; }
.world-hub-desktop-copy span { margin-top:4px; color:#818BA5; font-size:.62rem; }
.world-hub-desktop-actions { display:flex; align-items:center; gap:8px; }
.world-hub-desktop-actions button {
min-height:38px;
border:1px solid rgba(194,93,255,.18);
border-radius:11px;
color:#DDE2F2;
background:rgba(10,12,22,.80);
}
.world-hub-desktop-actions > button:not(.world-hub-search) { width:40px; display:grid; place-items:center; }
.world-hub-search { width:min(330px,31vw); padding:0 13px; display:flex; align-items:center; gap:10px; text-align:right; }
.world-hub-search span { color:#727C95; font-size:.65rem; }
.world-hub-hero-frame {
position:relative;
min-width:0;
overflow:hidden;
border:1px solid rgba(194,93,255,.16);
border-radius:18px;
background:#080A12;
box-shadow:0 24px 65px rgba(0,0,0,.35),0 0 36px rgba(109,125,255,.035);
}
.world-hub-hero-frame .target-home-hero-shell { margin:0 !important; background:transparent !important; }
.world-hub-hero-frame .target-hero-slide {
height:clamp(340px,35vw,430px) !important;
min-height:340px !important;
}
.world-hub-hero-frame .target-hero-slide,
.world-hub-hero-frame .safe-background-image,
.world-hub-hero-frame .target-hero-shade { border-radius:18px; }
.world-hub-hero-frame .target-hero-copy { padding-inline:clamp(22px,4vw,58px) !important; padding-bottom:clamp(38px,5vw,58px) !important; }
.world-hub-hero-frame .target-hero-text { max-width:min(560px,52vw) !important; }
.world-hub-hero-frame .target-hero-text h1 { font-size:clamp(1.65rem,3.4vw,3.1rem) !important; }
.world-hub-hero-frame .target-hero-actions button { min-height:42px; border-radius:9px !important; }
.world-hub-hero-frame .target-watch-button { background:var(--hub-grad) !important; box-shadow:0 15px 35px rgba(102,70,255,.22) !important; }
.world-hub-hero-frame .target-save-button,
.world-hub-hero-frame .target-save-button.saved {
border:1px solid rgba(194,93,255,.30) !important;
color:#F4F6FF !important;
background:rgba(7,9,17,.72) !important;
}
.world-hub-hero-frame .target-hero-dots button.active { background:var(--hub-grad) !important; }
/* ----- compact dashboard shortcuts ----- */
.world-hub-action-tiles {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
}
.world-hub-action-tile {
min-width:0;
min-height:66px;
padding:10px 11px;
display:grid;
grid-template-columns:38px minmax(0,1fr) 18px;
align-items:center;
gap:9px;
border:1px solid rgba(137,115,255,.15);
border-radius:12px;
color:#F5F7FF;
background:linear-gradient(145deg,rgba(18,21,37,.90),rgba(8,10,19,.94));
text-align:right;
box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.world-hub-action-icon {
width:36px;
height:36px;
display:grid;
place-items:center;
border:1px solid rgba(194,93,255,.20);
border-radius:10px;
color:#C25DFF;
background:rgba(194,93,255,.08);
}
.world-hub-action-tile > span:nth-child(2) { min-width:0; }
.world-hub-action-tile b,
.world-hub-action-tile small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.world-hub-action-tile b { font-size:.72rem; font-weight:900; }
.world-hub-action-tile small { margin-top:4px; color:#7F89A3; font-size:.55rem; }
.world-hub-action-tile > svg { color:#59627A; }
.world-hub-action-tile:active { transform:scale(.985); }
/* ----- dashboard rail grid ----- */
.world-hub-rail-grid {
display:grid;
grid-template-columns:repeat(12,minmax(0,1fr));
gap:12px;
min-width:0;
}
.world-hub-rail-slot { min-width:0; overflow:hidden; border:1px solid rgba(137,115,255,.11); border-radius:14px; background:rgba(7,9,17,.42); }
.world-hub-rail-slot.wide { grid-column:1 / -1; }
.world-hub-rail-slot.compact { grid-column:span 6; }
.world-hub-rail-slot > .shahid-home-section { margin:0 !important; padding:10px 0 12px !important; }
.world-hub-rail-slot .shahid-section-heading { min-height:38px !important; padding-inline:12px !important; }
.world-hub-rail-slot .shahid-section-heading h2 { font-size:.82rem !important; }
.world-hub-rail-slot .shahid-section-heading h2::before { width:3px !important; min-height:18px !important; background:var(--hub-grad) !important; }
.world-hub-rail-slot .shahid-section-heading > button { color:#C25DFF !important; }
.world-hub-rail-slot .horizontal-scroll-shell { padding-inline:12px; }
.world-hub-rail-slot .shahid-rail { gap:8px !important; }
.world-hub-rail-slot .shahid-poster-card,
.world-hub-rail-slot .shahid-live-card { flex-basis:clamp(112px,11.5vw,158px) !important; }
.world-hub-rail-slot .shahid-short-card { flex-basis:clamp(170px,19vw,260px) !important; aspect-ratio:16 / 9 !important; }
.world-hub-rail-slot .shahid-landscape-card { flex-basis:clamp(220px,26vw,350px) !important; }
.world-hub-rail-slot .shahid-ranked-card { flex-basis:clamp(150px,16vw,220px) !important; }
.world-hub-rail-slot .shahid-poster-card,
.world-hub-rail-slot .shahid-short-card,
.world-hub-rail-slot .shahid-landscape-card,
.world-hub-rail-slot .shahid-ranked-card {
border-color:rgba(137,115,255,.14) !important;
background:linear-gradient(180deg,rgba(17,20,35,.95),rgba(8,10,18,.98)) !important;
border-radius:10px !important;
}
.world-hub-rail-slot .shahid-rank-ribbon,
.world-hub-rail-slot .shahid-taxonomy-badges em.region { background:var(--hub-grad) !important; }
/* ----- quick navigation / season strip unified with commercial palette ----- */
.anime-season-strip,
.anime-hub-quick-nav,
.wrestling-hub-quick-nav { padding-inline:0 !important; }
.anime-season-year,
.anime-season-chip,
.anime-hub-chip,
.wrestling-hub-chip {
border-color:rgba(137,115,255,.17) !important;
color:#B6BED3 !important;
background:rgba(14,17,29,.82) !important;
}
.anime-season-year.active-year,
.anime-season-chip.active,
.anime-hub-chip.active,
.wrestling-hub-chip.active {
color:#fff !important;
border-color:transparent !important;
background:linear-gradient(#111423,#111423) padding-box,var(--hub-grad) border-box !important;
box-shadow:0 9px 24px rgba(110,76,255,.10) !important;
}
.anime-hub-chip svg,
.wrestling-hub-chip svg { color:#C25DFF !important; }
/* ----- footer information panels ----- */
.world-hub-footer-panel {
margin-top:2px;
padding:14px;
border:1px solid rgba(137,115,255,.15);
border-radius:15px;
background:
radial-gradient(circle at 88% 8%,rgba(109,125,255,.09),transparent 36%),
linear-gradient(145deg,rgba(14,17,30,.88),rgba(7,9,17,.94));
}
.world-hub-footer-panel header { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.world-hub-footer-panel header small { color:#C25DFF; font-size:.52rem; font-weight:950; letter-spacing:.13em; }
.world-hub-footer-panel header h2 { margin:2px 0 0; color:#F3F5FF; font-size:.84rem; }
.world-hub-footer-panel header > button { border:0; background:transparent; color:#C25DFF; font:900 .62rem Tajawal,Arial,sans-serif; }
.world-hub-footer-chips,
.world-hub-footer-groups span { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }
.world-hub-footer-chips::-webkit-scrollbar,
.world-hub-footer-groups span::-webkit-scrollbar { display:none; }
.world-hub-footer-chips button,
.world-hub-footer-groups button {
min-height:31px;
padding:0 11px;
flex:0 0 auto;
border:1px solid rgba(137,115,255,.16);
border-radius:9px;
color:#B8C0D5;
background:rgba(10,12,22,.82);
font:800 .62rem Tajawal,Arial,sans-serif;
white-space:nowrap;
}
.world-hub-footer-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.world-hub-footer-groups > div { min-width:0; display:grid; gap:8px; }
.world-hub-footer-groups b { color:#E9ECF8; font-size:.68rem; }
/* ----- Anime/Wrestling dedicated catalog: same identity, real taxonomy ----- */
.catalog-world-anime,
.catalog-world-wrestling {
--nova-catalog-line: rgba(137,115,255,.17) !important;
--nova-catalog-active-border: var(--hub-grad) !important;
background:#05060c !important;
}
.catalog-world-anime .nova-catalog-fixed-header,
.catalog-world-wrestling .nova-catalog-fixed-header {
background:
radial-gradient(70% 120% at 82% 0%,rgba(109,125,255,.09),transparent 62%),
linear-gradient(180deg,rgba(5,6,12,.99),rgba(6,8,15,.97)) !important;
border-bottom-color:rgba(137,115,255,.10) !important;
}
.catalog-world-anime .nova-catalog-search,
.catalog-world-wrestling .nova-catalog-search,
.catalog-world-anime .nova-catalog-select-card,
.catalog-world-wrestling .nova-catalog-select-card,
.catalog-world-anime .nova-catalog-back,
.catalog-world-wrestling .nova-catalog-back,
.catalog-world-anime .nova-catalog-icon,
.catalog-world-wrestling .nova-catalog-icon {
border-color:rgba(137,115,255,.18) !important;
background:rgba(12,14,25,.90) !important;
}
.catalog-world-anime .nova-catalog-search:focus-within,
.catalog-world-wrestling .nova-catalog-search:focus-within,
.catalog-world-anime .nova-catalog-select-card.active,
.catalog-world-wrestling .nova-catalog-select-card.active {
border-color:transparent !important;
background:linear-gradient(#0d101d,#0d101d) padding-box,var(--hub-grad) border-box !important;
}
.wrestling-catalog-quick-chip,
.anime-catalog-quick-chip {
border-color:rgba(137,115,255,.17) !important;
color:#B6BED3 !important;
background:rgba(14,17,29,.86) !important;
}
.wrestling-catalog-quick-chip.active,
.anime-catalog-quick-chip.active {
color:#fff !important;
border-color:transparent !important;
background:linear-gradient(#101321,#101321) padding-box,var(--hub-grad) border-box !important;
box-shadow:0 8px 22px rgba(102,70,255,.10) !important;
}
.catalog-world-anime .nova-media-art,
.catalog-world-wrestling .nova-media-art {
border-color:rgba(137,115,255,.16) !important;
background:#0d101c !important;
box-shadow:0 10px 24px rgba(0,0,0,.30) !important;
}
.catalog-world-anime .nova-media-quality,
.catalog-world-wrestling .nova-media-quality,
.catalog-world-anime .nova-media-play,
.catalog-world-wrestling .nova-media-play { background:var(--hub-grad) !important; color:#fff !important; }
/* Wrestling now deliberately uses the commercial brand palette; no red/gold world palette. */
.catalog-landing-wrestling,
.catalog-world-wrestling,
.details-wrestling {
--wrestling-bg:#000000 !important;
--wrestling-red:var(--accent) !important;
--wrestling-red-hot:var(--accent) !important;
--wrestling-gold:var(--accent) !important;
--wrestling-gold-soft:var(--accent) !important;
--nova-brand-primary:#C25DFF !important;
--nova-brand-secondary:#4BE9FF !important;
}
.world-wrestling .target-watch-button,
.details-wrestling .cinematic-watch-button { background:var(--hub-grad) !important; box-shadow:0 13px 30px rgba(96,68,255,.24) !important; }
.world-wrestling .target-save-button,
.world-wrestling .target-save-button.saved,
.details-wrestling .cinematic-secondary-action {
border-color:rgba(137,115,255,.28) !important;
color:#EDF1FF !important;
background:rgba(9,11,20,.76) !important;
}
.world-wrestling .shahid-section-heading h2::before,
.details-wrestling .cinematic-tabs button.active::after,
.details-wrestling .episode-season-filter-strip button.active::after { background:var(--hub-grad) !important; }
.world-wrestling .shahid-rank-ribbon,
.world-wrestling .shahid-taxonomy-badges em.region { background:var(--hub-grad) !important; color:#fff !important; }
.world-wrestling .nova-rail-page-sentinel.loading i:nth-child(1) { background:var(--hub-brand-a) !important; color:var(--hub-brand-a) !important; box-shadow:0 0 12px rgba(194,93,255,.65) !important; }
.world-wrestling .nova-rail-page-sentinel.loading i:nth-child(2) { background:var(--hub-brand-b) !important; color:var(--hub-brand-b) !important; box-shadow:0 0 12px rgba(109,125,255,.65) !important; }
.world-wrestling .nova-rail-page-sentinel.loading i:nth-child(3) { background:var(--hub-brand-c) !important; color:var(--hub-brand-c) !important; box-shadow:0 0 12px rgba(75,233,255,.60) !important; }
@media (max-width: 1180px) {
.world-hub-shell { grid-template-columns: 204px minmax(0,1fr); gap:13px; }
.world-hub-rail-slot.compact { grid-column:1 / -1; }
.world-hub-action-tile { grid-template-columns:34px minmax(0,1fr); }
.world-hub-action-tile > svg { display:none; }
}
@media (max-width: 860px) {
.catalog-landing-anime .catalog-landing-toolbar,
.catalog-landing-wrestling .catalog-landing-toolbar { display:flex; }
.world-hub-shell { width:100%; padding:calc(58px + var(--safe-top,0px)) 0 22px; display:block; }
.world-hub-sidebar,
.world-hub-desktop-topbar { display:none; }
.world-hub-stage { display:block; }
.world-hub-hero-frame { margin:0 12px 9px; border-radius:15px; }
.world-hub-hero-frame .target-hero-slide { height:clamp(330px,47dvh,420px) !important; min-height:330px !important; }
.world-hub-hero-frame .target-hero-text { max-width:86vw !important; }
.world-hub-hero-frame .target-hero-text h1 { font-size:clamp(1.35rem,7vw,2.1rem) !important; }
.world-hub-hero-frame .target-hero-copy { padding-inline:16px !important; padding-bottom:42px !important; }
.world-hub-action-tiles {
margin:0 12px 7px;
padding:2px 0 4px;
display:flex;
gap:7px;
overflow-x:auto;
scrollbar-width:none;
}
.world-hub-action-tiles::-webkit-scrollbar { display:none; }
.world-hub-action-tile { flex:0 0 190px; min-height:58px; padding:8px; grid-template-columns:32px minmax(0,1fr); border-radius:10px; }
.world-hub-action-icon { width:31px; height:31px; border-radius:8px; }
.world-hub-action-tile b { font-size:.66rem; }
.world-hub-action-tile small { font-size:.52rem; }
.anime-season-strip,
.anime-hub-quick-nav,
.wrestling-hub-quick-nav { padding-inline:12px !important; }
.world-hub-rail-grid { display:block; }
.world-hub-rail-slot { margin:0 12px 10px; border-radius:12px; }
.world-hub-rail-slot > .shahid-home-section { padding:8px 0 11px !important; }
.world-hub-rail-slot .horizontal-scroll-shell { padding-inline:10px; }
.world-hub-rail-slot .shahid-poster-card,
.world-hub-rail-slot .shahid-live-card { flex-basis:clamp(104px,28vw,132px) !important; }
.world-hub-rail-slot .shahid-short-card { flex-basis:clamp(176px,58vw,245px) !important; }
.world-hub-rail-slot .shahid-landscape-card { flex-basis:clamp(210px,68vw,280px) !important; }
.world-hub-rail-slot .shahid-ranked-card { flex-basis:clamp(128px,35vw,165px) !important; }
.world-hub-footer-panel { margin:4px 12px 12px; padding:12px; border-radius:12px; }
.world-hub-footer-groups { grid-template-columns:1fr; }
}
@media (min-width: 861px) {
.catalog-landing-anime .catalog-landing-toolbar,
.catalog-landing-wrestling .catalog-landing-toolbar { display:none; }
.catalog-landing-anime .catalog-landing-main,
.catalog-landing-wrestling .catalog-landing-main { padding-bottom:28px; }
}
@media (prefers-reduced-motion: reduce) {
.world-hub-action-tile,
.world-hub-sidebar nav button { transition:none !important; }
}
.wrestling-hero-badges {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
margin-bottom:8px;
}
.wrestling-hero-badges span {
min-height:24px;
padding:0 8px;
display:inline-flex;
align-items:center;
border:1px solid rgba(137,115,255,.24);
border-radius:7px;
color:#E9ECF8;
background:rgba(7,9,17,.64);
backdrop-filter:blur(10px);
font-size:.61rem;
font-weight:900;
}
.wrestling-hero-badges .world { border-color:rgba(194,93,255,.40); color:#C25DFF; }
.wrestling-hero-badges .event { border-color:rgba(109,125,255,.36); color:#6D7DFF; }
.wrestling-hero-badges .year { border-color:rgba(75,233,255,.28); color:#4BE9FF; }
/* ----- Dedicated full catalogs: compact discovery density from approved layout ----- */
.catalog-world-anime,
.catalog-world-wrestling {
width:min(100%,1580px) !important;
margin-inline:auto !important;
padding-inline:clamp(12px,2vw,26px) !important;
}
.catalog-world-anime .nova-catalog-fixed-header,
.catalog-world-wrestling .nova-catalog-fixed-header {
border:1px solid rgba(109,125,255,.11) !important;
border-radius:0 0 16px 16px !important;
box-shadow:0 18px 45px rgba(0,0,0,.26) !important;
}
.catalog-world-anime .nova-catalog-heading-copy h1,
.catalog-world-wrestling .nova-catalog-heading-copy h1 {
color:#F7F8FF !important;
font-size:clamp(1rem,2vw,1.35rem) !important;
}
.catalog-world-anime .nova-catalog-heading-copy p,
.catalog-world-wrestling .nova-catalog-heading-copy p {
color:#8791AA !important;
font-size:.64rem !important;
}
.catalog-world-anime .nova-card-grid,
.catalog-world-wrestling .nova-card-grid {
grid-template-columns:repeat(auto-fill,minmax(126px,1fr)) !important;
gap:14px 9px !important;
}
.catalog-world-anime .nova-media-card,
.catalog-world-wrestling .nova-media-card {
min-width:0 !important;
}
.catalog-world-anime .nova-media-title,
.catalog-world-wrestling .nova-media-title {
font-size:.72rem !important;
line-height:1.45 !important;
}
.catalog-world-anime .nova-media-meta,
.catalog-world-wrestling .nova-media-meta {
font-size:.58rem !important;
}
@media (max-width: 860px) {
.catalog-world-anime,
.catalog-world-wrestling {
padding-inline:10px !important;
}
.catalog-world-anime .nova-card-grid,
.catalog-world-wrestling .nova-card-grid {
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:12px 7px !important;
}
}
@media (max-width: 380px) {
.catalog-world-anime .nova-card-grid,
.catalog-world-wrestling .nova-card-grid {
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
/* ========================================================================
BUILD 78 — IMMERSIVE FULL-CANVAS OVERRIDES
The page canvas is intentionally pure black. Brand color is reserved for
hierarchy, focus, progress and interactive emphasis—not decorative noise.
======================================================================== */
:root {
--hub-bg: #000000;
--hub-panel: rgba(255,255,255,.025);
--hub-panel-strong: rgba(255,255,255,.04);
--hub-line: rgba(255,255,255,.075);
--hub-line-strong: rgba(194,93,255,.34);
}
.catalog-landing-anime,
.catalog-landing-wrestling,
.catalog-landing-anime .catalog-landing-main,
.catalog-landing-wrestling .catalog-landing-main,
.catalog-landing-anime .catalog-landing-reference,
.catalog-landing-wrestling .catalog-landing-reference,
.catalog-landing-anime .dedicated-world-hub,
.catalog-landing-wrestling .dedicated-world-hub,
.world-hub-shell,
.world-hub-stage {
background: #000000 !important;
background-image: none !important;
}
.catalog-landing-anime.oscar-app,
.catalog-landing-wrestling.oscar-app {
background: #000000 !important;
background-image: none !important;
}
/* Full viewport ownership. No sidebar column, no centered dashboard island. */
.world-hub-shell {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 14px clamp(12px,1.6vw,28px) 34px !important;
display: block !important;
direction: rtl !important;
box-sizing: border-box;
}
.world-hub-stage {
width: 100% !important;
max-width: none !important;
min-width: 0;
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
gap: 14px !important;
direction: rtl !important;
}
/* Build 78 removed the sidebar in Razor. Keep this hard guard so an old
pre-rendered fragment can never reserve a side column after hot reload. */
.world-hub-sidebar { display: none !important; }
/* Horizontal command bar replaces sidebar navigation. */
.world-hub-desktop-topbar {
position: sticky;
z-index: 74;
top: 0;
width: 100%;
min-height: 68px;
padding: 8px 4px;
display: grid;
grid-template-columns: minmax(210px,.72fr) minmax(360px,1.65fr) minmax(280px,.9fr);
align-items: center;
gap: 14px;
border-bottom: 1px solid rgba(255,255,255,.055);
background: rgba(0,0,0,.90) !important;
backdrop-filter: blur(20px) saturate(125%);
-webkit-backdrop-filter: blur(20px) saturate(125%);
}
.world-hub-desktop-brand {
min-width: 0;
display: flex;
align-items: center;
gap: 11px;
}
.world-hub-desktop-brand .world-hub-brand-mark {
flex: 0 0 31px;
}
.world-hub-desktop-copy {
min-width: 0;
}
.world-hub-desktop-copy small { color: var(--hub-brand-a); }
.world-hub-desktop-copy strong {
overflow: hidden;
color: #ffffff;
font-size: 1.03rem;
white-space: nowrap;
text-overflow: ellipsis;
}
.world-hub-desktop-copy span {
overflow: hidden;
color: rgba(255,255,255,.43);
white-space: nowrap;
text-overflow: ellipsis;
}
.world-hub-topnav {
min-width: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
overflow: hidden;
}
.world-hub-topnav button {
min-width: 0;
min-height: 38px;
padding: 0 10px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
border-radius: 9px;
color: rgba(255,255,255,.60);
background: transparent;
font: 800 .63rem/1 Tajawal,Arial,sans-serif;
white-space: nowrap;
}
.world-hub-topnav button svg { color: rgba(255,255,255,.38); }
.world-hub-topnav button:hover,
.world-hub-topnav button.active {
color: #fff;
background: linear-gradient(180deg,rgba(194,93,255,.12),rgba(109,125,255,.05));
}
.world-hub-topnav button.active {
box-shadow: inset 0 -2px 0 var(--hub-brand-a);
}
.world-hub-topnav button:hover svg,
.world-hub-topnav button.active svg { color: var(--hub-brand-a); }
.world-hub-desktop-actions {
min-width: 0;
justify-content: flex-end;
}
.world-hub-desktop-actions button,
.world-hub-icon-action {
border-color: rgba(255,255,255,.08) !important;
background: #000000 !important;
}
.world-hub-desktop-actions button:hover,
.world-hub-icon-action:hover {
border-color: rgba(194,93,255,.32) !important;
box-shadow: 0 0 0 1px rgba(109,125,255,.08), 0 10px 28px rgba(0,0,0,.45);
}
.world-hub-search {
width: min(350px,29vw);
min-width: 170px;
}
.world-hub-search span { color: rgba(255,255,255,.38); }
/* Hero is the visual anchor and uses the full available width. */
.world-hub-hero-frame {
width: 100%;
border: 1px solid rgba(255,255,255,.075);
border-radius: 20px;
background: #000000 !important;
box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(194,93,255,.025);
}
.world-hub-hero-frame::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(109,125,255,.025);
}
.world-hub-hero-frame .target-hero-slide {
height: clamp(430px,48dvh,610px) !important;
min-height: 430px !important;
}
.world-hub-hero-frame .target-hero-copy {
padding-inline: clamp(26px,4.2vw,72px) !important;
padding-bottom: clamp(42px,6vh,74px) !important;
}
.world-hub-hero-frame .target-hero-text { max-width: min(650px,54vw) !important; }
.world-hub-hero-frame .target-hero-text h1 {
font-size: clamp(1.85rem,3.25vw,3.65rem) !important;
letter-spacing: -.035em;
text-wrap: balance;
}
.world-hub-hero-frame .target-hero-actions button {
min-height: 44px;
padding-inline: 20px !important;
border-radius: 10px !important;
}
.world-hub-hero-frame .target-save-button,
.world-hub-hero-frame .target-save-button.saved {
background: rgba(0,0,0,.72) !important;
backdrop-filter: blur(14px);
}
/* Shortcuts become a clean command ribbon, not four bulky dashboard cards. */
.world-hub-action-tiles {
width: 100%;
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 8px;
}
.world-hub-action-tile {
min-height: 64px;
padding: 9px 12px;
border-color: rgba(255,255,255,.07);
border-radius: 12px;
background:
linear-gradient(135deg,rgba(194,93,255,.045),transparent 52%),
#000000;
box-shadow: none;
transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.world-hub-action-tile:hover {
border-color: rgba(194,93,255,.28);
background:
linear-gradient(135deg,rgba(194,93,255,.09),rgba(109,125,255,.035) 55%,transparent),
#000000;
transform: translateY(-1px);
}
.world-hub-action-icon {
border-color: rgba(194,93,255,.18);
color: var(--hub-brand-a);
background: rgba(194,93,255,.055);
}
.world-hub-action-tile small { color: rgba(255,255,255,.40); }
.world-hub-action-tile > svg { color: rgba(255,255,255,.27); }
/* Every rail participates in one full-width bento canvas. */
.world-hub-rail-grid {
width: 100%;
grid-template-columns: repeat(12,minmax(0,1fr));
gap: 12px;
}
.world-hub-rail-slot {
min-width: 0;
overflow: hidden;
border: 1px solid rgba(255,255,255,.065);
border-radius: 14px;
background: #000000 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}
.world-hub-rail-slot.wide { grid-column: 1 / -1; }
.world-hub-rail-slot.compact { grid-column: span 6; }
.world-hub-rail-slot:hover { border-color: rgba(109,125,255,.15); }
.world-hub-rail-slot > .shahid-home-section { background: #000000 !important; }
.world-hub-rail-slot .shahid-section-heading {
min-height: 42px !important;
padding-inline: 14px !important;
}
.world-hub-rail-slot .shahid-section-heading h2 {
color: #fff !important;
font-size: .84rem !important;
letter-spacing: -.015em;
}
.world-hub-rail-slot .shahid-section-heading h2::before {
width: 3px !important;
min-height: 17px !important;
border-radius: 99px;
}
.world-hub-rail-slot .horizontal-scroll-shell { padding-inline: 12px; }
.world-hub-rail-slot .shahid-rail { gap: 9px !important; }
.world-hub-rail-slot .shahid-poster-card,
.world-hub-rail-slot .shahid-short-card,
.world-hub-rail-slot .shahid-landscape-card,
.world-hub-rail-slot .shahid-ranked-card,
.world-hub-rail-slot .shahid-live-card {
border-color: rgba(255,255,255,.075) !important;
background: #000000 !important;
border-radius: 11px !important;
box-shadow: 0 8px 22px rgba(0,0,0,.38) !important;
}
.world-hub-rail-slot :is(.shahid-poster-card,.shahid-short-card,.shahid-landscape-card,.shahid-ranked-card,.shahid-live-card):hover {
border-color: rgba(194,93,255,.26) !important;
box-shadow: 0 14px 32px rgba(0,0,0,.52), 0 0 22px rgba(109,125,255,.055) !important;
}
.world-hub-rail-slot .shahid-poster-card,
.world-hub-rail-slot .shahid-live-card { flex-basis: clamp(116px,10.4vw,168px) !important; }
.world-hub-rail-slot .shahid-short-card { flex-basis: clamp(184px,17.5vw,282px) !important; }
.world-hub-rail-slot .shahid-landscape-card { flex-basis: clamp(236px,23vw,372px) !important; }
.world-hub-rail-slot .shahid-ranked-card { flex-basis: clamp(158px,14.5vw,230px) !important; }
/* Filter/category strips sit directly on black to preserve visual rhythm. */
.anime-season-strip,
.anime-hub-quick-nav,
.wrestling-hub-quick-nav {
width: 100%;
padding: 2px 0 !important;
}
.anime-season-year,
.anime-season-chip,
.anime-hub-chip,
.wrestling-hub-chip {
border-color: rgba(255,255,255,.08) !important;
background: #000000 !important;
}
.anime-season-year.active-year,
.anime-season-chip.active,
.anime-hub-chip.active,
.wrestling-hub-chip.active {
background: linear-gradient(#000000,#000000) padding-box,var(--hub-grad) border-box !important;
}
.world-hub-footer-panel {
width: 100%;
padding: 15px;
border-color: rgba(255,255,255,.07);
background:
linear-gradient(110deg,rgba(194,93,255,.045),rgba(109,125,255,.018) 55%,transparent),
#000000 !important;
}
.world-hub-footer-chips button,
.world-hub-footer-groups button {
border-color: rgba(255,255,255,.08);
background: #000000;
}
.world-hub-footer-chips button:hover,
.world-hub-footer-groups button:hover { border-color: rgba(194,93,255,.28); color:#fff; }
/* Full catalog pages also use every pixel available to the route surface. */
.catalog-world-anime,
.catalog-world-wrestling {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-inline: clamp(10px,1.45vw,24px) !important;
background: #000000 !important;
}
.catalog-world-anime .nova-catalog-fixed-header,
.catalog-world-wrestling .nova-catalog-fixed-header {
background: rgba(0,0,0,.96) !important;
border-color: rgba(255,255,255,.06) !important;
box-shadow: 0 18px 45px rgba(0,0,0,.52) !important;
}
.catalog-world-anime .nova-catalog-search,
.catalog-world-wrestling .nova-catalog-search,
.catalog-world-anime .nova-catalog-select-card,
.catalog-world-wrestling .nova-catalog-select-card,
.catalog-world-anime .nova-catalog-back,
.catalog-world-wrestling .nova-catalog-back,
.catalog-world-anime .nova-catalog-icon,
.catalog-world-wrestling .nova-catalog-icon,
.wrestling-catalog-quick-chip,
.anime-catalog-quick-chip {
background: #000000 !important;
border-color: rgba(255,255,255,.08) !important;
}
.catalog-world-anime .nova-catalog-select-card.active,
.catalog-world-wrestling .nova-catalog-select-card.active,
.wrestling-catalog-quick-chip.active,
.anime-catalog-quick-chip.active {
background: linear-gradient(#000000,#000000) padding-box,var(--hub-grad) border-box !important;
}
.catalog-world-anime .nova-media-art,
.catalog-world-wrestling .nova-media-art {
background: #000000 !important;
border-color: rgba(255,255,255,.075) !important;
}
.catalog-world-anime .nova-card-grid,
.catalog-world-wrestling .nova-card-grid {
grid-template-columns: repeat(auto-fill,minmax(132px,1fr)) !important;
gap: 15px 10px !important;
}
/* Tablet: maintain full width and collapse only the least useful navigation. */
@media (max-width: 1180px) and (min-width: 861px) {
.world-hub-shell { padding-inline: 16px !important; }
.world-hub-desktop-topbar {
grid-template-columns: minmax(185px,.68fr) minmax(250px,1fr) minmax(240px,.78fr);
}
.world-hub-topnav button { padding-inline: 7px; }
.world-hub-topnav button svg { display:none; }
.world-hub-search { width:min(290px,27vw); }
.world-hub-rail-slot.compact { grid-column: span 6 !important; }
}
/* Mobile: full-black edge-to-edge canvas with disciplined 10px content gutters. */
@media (max-width: 860px) {
.catalog-landing-anime .catalog-landing-toolbar,
.catalog-landing-wrestling .catalog-landing-toolbar {
display: flex;
background: rgba(0,0,0,.93) !important;
border-bottom-color: rgba(255,255,255,.05) !important;
box-shadow: 0 12px 32px rgba(0,0,0,.54) !important;
}
.catalog-landing-anime .catalog-landing-toolbar-button,
.catalog-landing-wrestling .catalog-landing-toolbar-button {
background: #000000 !important;
border-color: rgba(255,255,255,.08) !important;
}
.world-hub-shell {
width: 100% !important;
padding: calc(58px + var(--safe-top,0px)) 0 20px !important;
}
.world-hub-stage { display: block !important; width:100% !important; }
.world-hub-desktop-topbar { display:none !important; }
.world-hub-hero-frame {
margin: 0 10px 9px;
width: calc(100% - 20px);
border-radius: 16px;
}
.world-hub-hero-frame .target-hero-slide {
height: clamp(350px,52dvh,470px) !important;
min-height: 350px !important;
}
.world-hub-hero-frame .target-hero-copy {
padding-inline: 16px !important;
padding-bottom: 44px !important;
}
.world-hub-hero-frame .target-hero-text { max-width: 90vw !important; }
.world-hub-hero-frame .target-hero-text h1 { font-size: clamp(1.45rem,7.4vw,2.25rem) !important; }
.world-hub-action-tiles {
margin: 0;
padding: 3px 10px 7px;
display: flex;
gap: 7px;
overflow-x: auto;
scroll-padding-inline: 10px;
scrollbar-width: none;
}
.world-hub-action-tiles::-webkit-scrollbar { display:none; }
.world-hub-action-tile {
flex: 0 0 min(72vw,220px);
min-height: 58px;
grid-template-columns: 32px minmax(0,1fr);
border-radius: 10px;
}
.world-hub-action-tile > svg { display:none; }
.anime-season-strip,
.anime-hub-quick-nav,
.wrestling-hub-quick-nav { padding-inline: 10px !important; }
.world-hub-rail-grid { display:block !important; width:100% !important; }
.world-hub-rail-slot {
width: calc(100% - 20px);
margin: 0 10px 10px;
border-radius: 12px;
}
.world-hub-rail-slot .horizontal-scroll-shell { padding-inline: 9px; }
.world-hub-rail-slot .shahid-poster-card,
.world-hub-rail-slot .shahid-live-card { flex-basis: clamp(106px,29vw,138px) !important; }
.world-hub-rail-slot .shahid-short-card { flex-basis: clamp(178px,56vw,248px) !important; }
.world-hub-rail-slot .shahid-landscape-card { flex-basis: clamp(212px,68vw,286px) !important; }
.world-hub-rail-slot .shahid-ranked-card { flex-basis: clamp(130px,36vw,170px) !important; }
.world-hub-footer-panel {
width: calc(100% - 20px);
margin: 4px 10px 12px;
padding: 12px;
}
.catalog-world-anime,
.catalog-world-wrestling { padding-inline: 9px !important; }
.catalog-world-anime .nova-card-grid,
.catalog-world-wrestling .nova-card-grid {
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 12px 7px !important;
}
}
@media (max-width: 390px) {
.world-hub-hero-frame { margin-inline:8px; width:calc(100% - 16px); }
.world-hub-action-tiles { padding-inline:8px; }
.world-hub-rail-slot { width:calc(100% - 16px); margin-inline:8px; }
.world-hub-footer-panel { width:calc(100% - 16px); margin-inline:8px; }
.catalog-world-anime .nova-card-grid,
.catalog-world-wrestling .nova-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (prefers-reduced-motion: reduce) {
.world-hub-action-tile,
.world-hub-topnav button { transition: none !important; }
}
/* ===== source: anime-commercial-stage9.css ===== */
/* Stage 9 — Anime commercial layout refinement
Brand locked to Space Gate Nova+ GlobalResources; all section surfaces remain #000000. */
:root {
--anime9-bg: #000000;
--anime9-panel: #000000;
--anime9-panel-soft: #000000;
--anime9-line: var(--oscar-border);
--anime9-purple: var(--accent);
--anime9-blue: var(--accent);
--anime9-cyan: var(--accent);
--anime9-text: var(--oscar-text);
--anime9-muted: var(--oscar-muted);
--anime9-grad: #000000;
}
/* ---------- anime landing: full restructure ---------- */
.catalog-landing-anime,
.catalog-landing-anime .catalog-landing-main,
.catalog-landing-anime .catalog-landing-reference,
.catalog-landing-anime .world-hub-shell,
.catalog-landing-anime .world-hub-stage {
background: #000000 !important;
}
.world-hub-anime {
width: min(100%, 1500px) !important;
margin-inline: auto !important;
padding: calc(70px + var(--safe-top,0px)) clamp(12px,2.3vw,30px) 30px !important;
display: block !important;
direction: rtl !important;
}
.world-hub-anime .world-hub-stage {
display: block !important;
}
.anime-v2-masthead {
position: relative;
min-height: clamp(280px, 34vw, 430px);
overflow: hidden;
display: grid;
grid-template-columns: minmax(0,1.18fr) minmax(300px,.82fr);
align-items: stretch;
border: 1px solid var(--accent);
border-radius: 22px;
background: #000000;
box-shadow: 0 24px 64px rgba(0,0,0,.40);
}
.anime-v2-masthead-art {
position: relative;
min-width: 0;
overflow: hidden;
}
.anime-v2-masthead-art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: 28% center;
transform: scale(1.015);
}
.anime-v2-masthead-shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent 35%, rgba(0,0,0,.32) 68%, #000000 100%),
linear-gradient(180deg, transparent 62%, rgba(0,0,0,.42));
}
.anime-v2-masthead-copy {
position: relative;
z-index: 2;
min-width: 0;
padding: clamp(24px,4vw,54px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: right;
}
.anime-v2-masthead-copy small {
color: var(--anime9-purple);
font-size: .66rem;
font-weight: 950;
letter-spacing: .14em;
}
.anime-v2-masthead-copy h1 {
margin: 8px 0 6px;
color: var(--oscar-text);
font-size: clamp(1.65rem,4vw,3.25rem);
line-height: 1.05;
font-weight: 950;
letter-spacing: -.035em;
}
.anime-v2-masthead-copy p {
max-width: 460px;
margin: 0;
color: var(--oscar-text);
font-size: clamp(.74rem,1.25vw,.92rem);
line-height: 1.8;
}
.anime-v2-masthead-actions {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.anime-v2-masthead-actions button {
min-height: 42px;
padding: 0 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--accent);
border-radius: 12px;
color: var(--oscar-text);
background: rgba(0,0,0,.88);
font: 900 .72rem Tajawal,Arial,sans-serif;
transition: transform .16s ease,border-color .16s ease,background-color .16s ease;
}
.anime-v2-masthead-actions button.primary {
border-color: transparent;
color: var(--oscar-text);
background: #000000;
box-shadow: 0 14px 30px rgba(0,0,0,.20);
}
.anime-v2-masthead-actions button:active { transform: scale(.975); }
.anime-v2-section-head {
min-height: 44px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
margin-bottom: 10px;
}
.anime-v2-section-head > div { min-width: 0; }
.anime-v2-section-head small {
display: block;
margin-bottom: 2px;
color: var(--anime9-purple);
font-size: .55rem;
font-weight: 950;
letter-spacing: .12em;
}
.anime-v2-section-head h2 {
margin: 0;
color: var(--oscar-text);
font-size: clamp(1rem,2vw,1.3rem);
font-weight: 950;
line-height: 1.1;
}
.anime-v2-section-head > button {
min-height: 34px;
padding: 0 4px;
border: 0;
color: var(--accent);
background: transparent;
font: 850 .68rem Tajawal,Arial,sans-serif;
}
.anime-v2-studios,
.anime-v2-episodes {
margin-top: 18px;
}
.anime-v2-studio-rail,
.anime-v2-episode-rail {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scrollbar-width: none;
scroll-snap-type: x proximity;
padding-bottom: 3px;
}
.anime-v2-studio-rail::-webkit-scrollbar,
.anime-v2-episode-rail::-webkit-scrollbar { display:none; }
.anime-v2-studio-card {
flex: 0 0 118px;
min-width: 0;
padding: 8px 6px 10px;
display: grid;
justify-items: center;
gap: 7px;
border: 0;
color: var(--oscar-text);
background: transparent;
scroll-snap-align: start;
font-family:inherit;
}
.anime-v2-studio-mark {
width: 84px;
height: 84px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--accent);
border-radius: 50%;
background:
radial-gradient(circle at 50% 35%,rgba(0,0,0,.08),transparent 58%),
#000000;
box-shadow: inset 0 1px 0 rgba(0,0,0,.025);
}
.anime-v2-studio-card:active .anime-v2-studio-mark {
border-color: var(--accent);
transform: scale(.97);
}
.anime-v2-studio-mark img { width: 74%; height: 74%; object-fit: contain; }
.anime-v2-studio-mark b {
color: var(--oscar-text);
font-size: 1.25rem;
font-weight: 950;
text-shadow: 0 0 18px rgba(0,0,0,.18);
}
.anime-v2-studio-card strong {
max-width: 100%;
overflow: hidden;
color: var(--oscar-text);
font-size: .65rem;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.anime-v2-episode-card {
flex: 0 0 clamp(250px,34vw,390px);
min-width: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--accent);
border-radius: 15px;
color: var(--oscar-text);
background: #000000;
text-align: right;
scroll-snap-align: start;
box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.anime-v2-episode-art {
position: relative;
display: block;
aspect-ratio: 16 / 8.6;
overflow: hidden;
background: #000000;
}
.anime-v2-episode-art ::deep img,
.anime-v2-episode-art img {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
}
.anime-v2-episode-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg,rgba(0,0,0,.02) 42%,rgba(0,0,0,.82));
}
.anime-v2-episode-play {
position: absolute;
inset: 50% auto auto 50%;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid var(--oscar-border);
border-radius: 50%;
color: var(--oscar-text);
background: rgba(0,0,0,.48);
transform: translate(-50%,-50%);
backdrop-filter: blur(8px);
}
.anime-v2-episode-art em {
position: absolute;
right: 9px;
bottom: 9px;
min-height: 24px;
padding: 0 8px;
display: inline-flex;
align-items: center;
border-radius: 7px;
color: var(--oscar-text);
background: rgba(0,0,0,.70);
font: normal 850 .6rem Tajawal,Arial,sans-serif;
backdrop-filter: blur(8px);
}
.anime-v2-episode-copy {
padding: 10px 11px 11px;
display: grid;
gap: 4px;
}
.anime-v2-episode-copy strong {
overflow: hidden;
color: var(--oscar-text);
font-size: .76rem;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.anime-v2-episode-copy small {
overflow: hidden;
color: var(--anime9-muted);
font-size: .59rem;
text-overflow: ellipsis;
white-space: nowrap;
}
/* quick navigation becomes the compact filter spine under the studios. */
.world-hub-anime .anime-hub-quick-nav {
margin: 12px 0 0 !important;
padding: 0 0 2px !important;
gap: 7px !important;
}
.world-hub-anime .anime-hub-chip {
min-height: 34px !important;
padding-inline: 12px !important;
border-radius: 999px !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
background: #000000 !important;
}
.world-hub-anime .anime-hub-chip.active {
color: var(--oscar-text) !important;
border-color: transparent !important;
background: linear-gradient(#000000,#000000) padding-box,#000000 border-box !important;
}
/* old dashboard/hero is intentionally not part of anime v2. */
.world-hub-anime .world-hub-action-tiles,
.world-hub-anime .world-hub-hero-frame,
.world-hub-anime .anime-season-strip { display:none !important; }
/* rails are content-first, not dashboard cards. */
.world-hub-anime .anime-v2-rail-grid {
display: block !important;
margin-top: 17px;
}
.world-hub-anime .world-hub-rail-slot {
margin: 0 0 14px !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
.world-hub-anime .world-hub-rail-slot > .shahid-home-section {
padding: 0 0 12px !important;
}
.world-hub-anime .world-hub-rail-slot .shahid-section-heading {
min-height: 44px !important;
padding-inline: 0 !important;
}
.world-hub-anime .world-hub-rail-slot .shahid-section-heading h2 {
font-size: clamp(.96rem,2vw,1.2rem) !important;
}
.world-hub-anime .world-hub-rail-slot .horizontal-scroll-shell { padding-inline: 0 !important; }
.world-hub-anime .world-hub-rail-slot .shahid-rail { gap: 10px !important; }
.world-hub-anime .anime-v2-posters-primary .shahid-poster-card,
.world-hub-anime .anime-v2-posters-primary .shahid-live-card {
flex-basis: clamp(128px,14vw,178px) !important;
}
.world-hub-anime .anime-v2-posters-compact .shahid-poster-card,
.world-hub-anime .anime-v2-posters-compact .shahid-live-card {
flex-basis: clamp(116px,12.4vw,160px) !important;
}
.world-hub-anime .anime-v2-landscape-featured .shahid-landscape-card {
flex-basis: clamp(238px,30vw,390px) !important;
}
.world-hub-anime .anime-v2-ranked-primary .shahid-ranked-card,
.world-hub-anime .shahid-ranked-card {
flex-basis: clamp(145px,16vw,205px) !important;
}
.world-hub-anime .shahid-poster-card,
.world-hub-anime .shahid-live-card,
.world-hub-anime .shahid-landscape-card,
.world-hub-anime .shahid-ranked-card {
border-radius: 13px !important;
border-color: var(--accent) !important;
background: #000000 !important;
box-shadow: none !important;
}
/* schedule is a clean editorial block. */
.world-hub-anime .anime-weekly-schedule {
margin: 8px 0 16px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.world-hub-anime .anime-weekly-schedule header { min-height: 44px; margin-bottom: 9px; }
.world-hub-anime .anime-weekly-schedule header h2 { font-size: 1.02rem; }
.world-hub-anime .anime-schedule-card {
flex-basis: clamp(220px,28vw,330px) !important;
min-height: 78px !important;
border-color: var(--accent) !important;
border-radius: 12px !important;
background: #000000 !important;
}
.world-hub-anime .world-hub-footer-panel {
margin: 0 0 8px !important;
border-color: var(--accent) !important;
background: #000000 !important;
}
/* ---------- dedicated anime catalog ---------- */
.catalog-world-anime {
--anime9-catalog-header-h: calc(312px + var(--safe-top,0px));
--nova-catalog-header-h: var(--anime9-catalog-header-h) !important;
background: #000000 !important;
}
.catalog-world-anime .nova-catalog-fixed-header {
background: linear-gradient(180deg,#000000 0%,#000000 100%) !important;
border-bottom-color: var(--accent) !important;
}
.catalog-world-anime .nova-catalog-heading-copy h1 {
font-size: clamp(1.45rem,4vw,2.25rem) !important;
font-weight: 950 !important;
letter-spacing: -.035em;
}
.catalog-world-anime .nova-catalog-heading-copy p { display:none; }
.catalog-world-anime .nova-catalog-back,
.catalog-world-anime .nova-catalog-icon {
width: 44px !important;
height: 44px !important;
border: 0 !important;
background: transparent !important;
}
.anime-v2-catalog-orbits {
min-height: 78px;
padding: 7px 0 8px;
display: flex;
align-items: flex-start;
gap: 12px;
overflow-x: auto;
direction: rtl;
scrollbar-width: none;
}
.anime-v2-catalog-orbits::-webkit-scrollbar { display:none; }
.anime-v2-catalog-orbits button {
flex: 0 0 58px;
padding: 0;
display: grid;
justify-items: center;
gap: 5px;
border: 0;
color: var(--accent);
background: transparent;
font-family:inherit;
}
.anime-v2-catalog-orbits button > span {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border: 1px solid var(--accent);
border-radius: 50%;
color: var(--accent);
background: #000000;
font-size: .9rem;
font-weight: 950;
}
.anime-v2-catalog-orbits button small {
max-width: 66px;
overflow: hidden;
font-size: .52rem;
white-space: nowrap;
text-overflow: ellipsis;
}
.anime-v2-catalog-orbits button.active > span {
color: var(--oscar-text);
border-color: transparent;
background: linear-gradient(#000000,#000000) padding-box,#000000 border-box;
box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}
.catalog-world-anime .nova-catalog-controls-row { gap: 8px !important; }
.catalog-world-anime .nova-catalog-search {
min-height: 40px !important;
border-radius: 12px !important;
border-color: var(--accent) !important;
background: #000000 !important;
}
.catalog-world-anime .nova-catalog-filter-strip { gap: 7px !important; }
.catalog-world-anime .nova-catalog-select-card {
min-height: 34px !important;
border-radius: 999px !important;
border-color: var(--oscar-border) !important;
background: #000000 !important;
}
.catalog-world-anime .nova-catalog-select-card.active {
border-color: transparent !important;
background: linear-gradient(#000000,#000000) padding-box,#000000 border-box !important;
}
.catalog-world-anime .anime-catalog-quick-row {
min-height: 34px !important;
height: auto !important;
gap: 7px !important;
padding: 4px 0 !important;
}
.catalog-world-anime .anime-catalog-quick-chip {
height: 31px !important;
min-height: 31px !important;
border-radius: 999px !important;
background: #000000 !important;
}
.catalog-world-anime .anime-catalog-meta-row {
min-height: 34px !important;
padding: 3px 0 !important;
}
.catalog-world-anime .anime-catalog-meta-row label {
height: 31px !important;
border-radius: 999px !important;
background: #000000 !important;
}
.catalog-world-anime .nova-catalog-genre-row { padding-top: 3px !important; }
.catalog-world-anime .nova-category-strip { gap: 7px !important; }
.catalog-world-anime .nova-category-strip button {
min-height: 30px !important;
border-radius: 999px !important;
}
.catalog-world-anime .nova-card-grid {
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 11px 10px !important;
}
.catalog-world-anime .nova-media-card { min-width:0 !important; }
.catalog-world-anime .nova-media-art {
border-radius: 13px !important;
border-color: var(--accent) !important;
background: #000000 !important;
box-shadow: none !important;
}
.catalog-world-anime .nova-media-card > strong {
margin-top: 6px !important;
font-size: .70rem !important;
line-height: 1.35 !important;
}
.catalog-world-anime .nova-media-card > small { font-size: .55rem !important; }
@media (max-width: 860px) {
.world-hub-anime {
padding: calc(58px + var(--safe-top,0px)) 12px 22px !important;
}
.anime-v2-masthead {
min-height: 370px;
display: block;
border-radius: 17px;
}
.anime-v2-masthead-art {
position: absolute;
inset: 0;
}
.anime-v2-masthead-art img {
object-position: 24% center;
}
.anime-v2-masthead-shade {
background:
linear-gradient(180deg,rgba(0,0,0,.05) 24%,rgba(0,0,0,.30) 52%,#000000 95%),
linear-gradient(90deg,transparent 50%,rgba(0,0,0,.12));
}
.anime-v2-masthead-copy {
min-height: 370px;
padding: 190px 18px 18px;
justify-content: flex-end;
}
.anime-v2-masthead-copy h1 { font-size: 1.72rem; }
.anime-v2-masthead-copy p { max-width: 92%; font-size: .70rem; line-height: 1.7; }
.anime-v2-masthead-actions {
width: 100%;
margin-top: 13px;
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: 7px;
}
.anime-v2-masthead-actions button {
min-height: 39px;
padding-inline: 8px;
border-radius: 10px;
font-size: .60rem;
}
.anime-v2-studios,
.anime-v2-episodes { margin-top: 15px; }
.anime-v2-studio-card { flex-basis: 92px; padding-inline: 3px; }
.anime-v2-studio-mark { width: 68px; height: 68px; }
.anime-v2-studio-card strong { font-size: .58rem; }
.anime-v2-episode-card { flex-basis: 72vw; max-width: 300px; }
.anime-v2-episode-copy strong { font-size: .72rem; }
.world-hub-anime .world-hub-rail-slot { margin-bottom: 10px !important; }
.world-hub-anime .anime-v2-posters-primary .shahid-poster-card,
.world-hub-anime .anime-v2-posters-primary .shahid-live-card { flex-basis: 31vw !important; }
.world-hub-anime .anime-v2-posters-compact .shahid-poster-card,
.world-hub-anime .anime-v2-posters-compact .shahid-live-card { flex-basis: 28vw !important; }
.world-hub-anime .anime-v2-landscape-featured .shahid-landscape-card { flex-basis: 72vw !important; }
.world-hub-anime .shahid-ranked-card { flex-basis: 38vw !important; }
.catalog-world-anime {
--anime9-catalog-header-h: calc(314px + var(--safe-top,0px));
}
.catalog-world-anime.mobile-search-open {
--anime9-catalog-header-h: calc(362px + var(--safe-top,0px));
}
.anime-v2-catalog-orbits { min-height: 72px; gap: 10px; }
.anime-v2-catalog-orbits button { flex-basis: 54px; }
.anime-v2-catalog-orbits button > span { width: 50px; height:50px; }
.catalog-world-anime .nova-card-grid { gap: 10px 8px !important; }
}
@media (max-width: 390px) {
.anime-v2-masthead-actions button span { font-size: .56rem; }
.catalog-world-anime .nova-card-grid { gap: 9px 7px !important; }
}
@media (min-width: 861px) {
.catalog-landing-anime .catalog-landing-toolbar { display:none !important; }
.catalog-world-anime .nova-card-grid { grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap: 16px 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
.anime-v2-masthead-actions button,
.anime-v2-studio-mark { transition:none !important; }
}
/* ===== source: anime-native-reference-v1.css ===== */
/* Space Gate Nova+ — Anime Native Reference UI / Phase 1
Visual target: the user-provided mobile + desktop reference captures.
This file is loaded after the legacy anime styles and is intentionally scoped. */
:root {
--anime-ref-bg: #000000;
--anime-ref-panel: #000000;
--anime-ref-panel-2: #000000;
--anime-ref-text: var(--oscar-text);
--anime-ref-muted: var(--oscar-muted);
--anime-ref-purple: var(--accent);
--anime-ref-purple-2: var(--accent);
--anime-ref-violet: var(--accent);
--anime-ref-line: var(--oscar-border);
--anime-ref-line-soft: var(--oscar-border);
--anime-ref-glow: none;
}
.catalog-landing-anime > .catalog-landing-toolbar { display: none !important; }
.catalog-landing-anime,
.catalog-landing-anime .catalog-landing-main,
.catalog-landing-anime .catalog-landing-reference,
.catalog-landing-anime .world-hub-shell,
.catalog-landing-anime .world-hub-stage {
background: #000000 !important;
}
.world-hub-anime {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: #000000 !important;
}
.world-hub-anime .world-hub-stage {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: #000000 !important;
}
.anime-ref-shell,
.anime-ref-shell * { box-sizing: border-box; }
.anime-ref-shell {
width: min(100%, 1500px);
min-height: 100dvh;
margin: 0 auto;
padding: calc(15px + var(--safe-top, env(safe-area-inset-top, 0px))) clamp(14px, 3.2vw, 50px) calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 30px);
overflow: hidden;
color: var(--anime-ref-text);
background:
radial-gradient(70% 28% at 50% -12%, rgba(0,0,0,.14), transparent 72%),
#000000;
font-family:inherit;
}
/* ------------------------------------------------------
Header — brand on the left, tools on the right, matching
the reference rather than the normal catalogue header.
------------------------------------------------------ */
.anime-ref-topbar {
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
direction: ltr;
}
.anime-ref-brand {
min-width: 0;
padding: 0;
display: inline-flex;
align-items: center;
gap: 10px;
border: 0;
color: var(--oscar-text);
background: transparent;
cursor: pointer;
}
.anime-ref-brand img {
width: clamp(82px, 8.2vw, 122px);
max-height: 42px;
object-fit: contain;
object-position: left center;
}
.anime-ref-brand span {
padding-left: 9px;
border-left: 1px solid var(--oscar-border);
color: var(--accent);
font-size: .64rem;
font-weight: 950;
letter-spacing: .18em;
}
.anime-ref-tools {
display: flex;
align-items: center;
gap: 9px;
direction: ltr;
}
.anime-ref-tools > button {
position: relative;
width: 42px;
height: 42px;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
color: var(--oscar-text);
background: transparent;
cursor: pointer;
}
.anime-ref-tools > button:active { transform: scale(.94); }
.anime-ref-tools .notification i {
position: absolute;
top: 6px;
right: 6px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #000000;
box-shadow: 0 0 0 2px #000000, 0 0 12px rgba(0,0,0,.75);
}
.anime-ref-tools .anime-ref-avatar {
width: 48px;
height: 48px;
padding: 3px;
border: 1px solid var(--accent);
box-shadow: 0 0 14px rgba(0,0,0,.28);
}
.anime-ref-avatar img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
object-fit: cover;
background: #000000;
}
/* ------------------------------------------------------
Connected Series / Movies selector.
------------------------------------------------------ */
.anime-ref-type-switcher {
position: relative;
width: min(590px, 66vw);
min-height: 72px;
margin: -2px auto 14px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
direction: rtl;
isolation: isolate;
}
.anime-ref-type-switcher > button {
position: relative;
z-index: 1;
min-width: 0;
padding: 10px 26px;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
border: 1px solid var(--oscar-border);
color: var(--oscar-text);
background: linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.98));
font: inherit;
cursor: pointer;
}
.anime-ref-type-switcher > button:first-child {
border-radius: 18px 5px 5px 18px;
clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 50%, calc(100% - 23px) 100%, 0 100%, 12px 50%);
}
.anime-ref-type-switcher > button:last-child {
border-radius: 5px 18px 18px 5px;
clip-path: polygon(23px 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 23px 100%, 0 50%);
}
.anime-ref-type-switcher > button.active {
border-color: var(--accent);
background:
radial-gradient(circle at 50% 0, rgba(0,0,0,.30), transparent 62%),
linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.98));
box-shadow: inset 0 0 18px rgba(0,0,0,.17), 0 0 18px rgba(0,0,0,.18);
}
.anime-ref-type-switcher button > span:last-child {
min-width: 0;
display: grid;
gap: 2px;
text-align: right;
}
.anime-ref-type-switcher strong {
color: var(--oscar-text);
font-size: .9rem;
font-weight: 950;
white-space: nowrap;
}
.anime-ref-type-switcher small {
color: var(--oscar-muted);
font-size: .59rem;
white-space: nowrap;
}
.anime-ref-type-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex: 0 0 auto;
color: var(--oscar-text);
}
.anime-ref-type-switcher .active .anime-ref-type-icon { color: var(--accent); }
.anime-ref-switch-diamond {
position: absolute;
z-index: 4;
left: 50%;
top: 50%;
width: 36px;
height: 36px;
display: grid;
place-items: center;
transform: translate(-50%, -50%) rotate(45deg);
border: 1px solid var(--accent);
background: #000000;
box-shadow: 0 0 17px rgba(0,0,0,.82), inset 0 0 12px rgba(0,0,0,.08);
}
.anime-ref-switch-diamond::before,
.anime-ref-switch-diamond::after,
.anime-ref-switch-diamond i {
content: "";
position: absolute;
inset: 8px;
border: 1px solid var(--accent);
}
.anime-ref-switch-diamond::after { inset: 12px; background:#000000; box-shadow:0 0 12px #000000; }
.anime-ref-switch-diamond i { inset: 15px; background:#000000; border:0; }
/* ------------------------------------------------------
Hero — reference-style cinematic panel.
------------------------------------------------------ */
.anime-ref-hero {
position: relative;
min-height: clamp(280px, 29vw, 390px);
overflow: hidden;
border: 1px solid var(--accent);
border-radius: 18px;
background: #000000;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.015), 0 18px 46px rgba(0,0,0,.46);
}
.anime-ref-hero-art,
.anime-ref-hero-art > .nova-fast-image,
.anime-ref-hero-art .anime-ref-hero-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.anime-ref-hero-art .anime-ref-hero-image {
object-fit: cover !important;
object-position: 68% center !important;
transform: scale(1.015);
}
.anime-ref-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 24%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.10) 72%),
linear-gradient(0deg, rgba(0,0,0,.80) 0%, transparent 40%);
}
.anime-ref-hero-copy {
position: absolute;
z-index: 2;
left: clamp(22px, 4.2vw, 58px);
top: 50%;
width: min(43%, 520px);
transform: translateY(-50%);
display: grid;
justify-items: start;
text-align: right;
}
.anime-ref-exclusive {
margin-bottom: 9px;
color: var(--accent);
font-size: .69rem;
font-weight: 950;
}
.anime-ref-hero h1 {
width: 100%;
margin: 0;
color: var(--oscar-text);
font-size: clamp(2.05rem, 4.3vw, 4.35rem);
line-height: 1.04;
font-weight: 950;
letter-spacing: -.045em;
text-shadow: 0 8px 26px rgba(0,0,0,.82);
}
.anime-ref-hero p {
max-width: 490px;
margin: 13px 0 0;
display: -webkit-box;
overflow: hidden;
color: var(--oscar-text);
font-size: clamp(.72rem, 1.15vw, .94rem);
line-height: 1.9;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.anime-ref-hero-meta {
margin-top: 10px;
display: flex;
gap: 7px;
flex-wrap: wrap;
}
.anime-ref-hero-meta span {
min-height: 24px;
padding: 0 8px;
display: inline-flex;
align-items: center;
border: 1px solid var(--oscar-border);
border-radius: 999px;
color: var(--oscar-text);
background: rgba(0,0,0,.40);
font-size: .58rem;
font-weight: 800;
}
.anime-ref-hero-actions {
margin-top: 18px;
display: flex;
gap: 10px;
}
.anime-ref-hero-actions button {
min-height: 43px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--oscar-border);
border-radius: 9px;
color: var(--oscar-text);
background: rgba(0,0,0,.64);
font: 900 .75rem Tajawal,Arial,sans-serif;
backdrop-filter: blur(6px);
}
.anime-ref-hero-actions .primary {
min-width: 142px;
border-color: var(--accent);
background: linear-gradient(90deg, rgba(0,0,0,.90), rgba(0,0,0,.92));
box-shadow: inset 0 0 15px rgba(0,0,0,.17), 0 0 15px rgba(0,0,0,.22);
}
.anime-ref-hero-arrow {
position: absolute;
z-index: 3;
top: 50%;
width: 35px;
height: 35px;
padding: 0;
display: grid;
place-items: center;
transform: translateY(-50%);
border: 1px solid var(--oscar-border);
border-radius: 50%;
color: var(--oscar-text);
background: rgba(0,0,0,.48);
backdrop-filter: blur(6px);
}
.anime-ref-hero-arrow.previous { right: 12px; }
.anime-ref-hero-arrow.next { right: 54px; }
.anime-ref-hero-dots {
position: absolute;
z-index: 3;
bottom: 11px;
left: 50%;
display: flex;
gap: 9px;
transform: translateX(-50%);
}
.anime-ref-hero-dots button {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0,0,0,.62);
}
.anime-ref-hero-dots button.active { background:#000000; box-shadow:0 0 9px rgba(0,0,0,.8); }
/* ------------------------------------------------------
Sections + rails.
------------------------------------------------------ */
.anime-ref-section { margin-top: 14px; }
.anime-ref-section-head {
min-height: 34px;
margin-bottom: 8px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 14px;
}
.anime-ref-section-head h2 {
margin: 0;
color: var(--oscar-text);
font-size: clamp(.96rem, 1.65vw, 1.2rem);
font-weight: 900;
line-height: 1.1;
}
.anime-ref-section-head button {
min-height: 28px;
padding: 0 3px;
border: 0;
color: var(--accent);
background: transparent;
font: 850 .67rem Tajawal,Arial,sans-serif;
}
.anime-ref-studios-rail,
.anime-ref-episode-rail,
.anime-ref-poster-rail {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding: 1px 0 3px;
direction: rtl;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.anime-ref-studios-rail::-webkit-scrollbar,
.anime-ref-episode-rail::-webkit-scrollbar,
.anime-ref-poster-rail::-webkit-scrollbar { display:none; }
.anime-ref-studio-card {
flex: 1 0 128px;
min-width: 128px;
height: 66px;
padding: 8px 12px;
display: grid;
place-items: center;
overflow: hidden;
scroll-snap-align: start;
border: 1px solid var(--oscar-border);
border-radius: 8px;
color: var(--oscar-text);
background: linear-gradient(180deg,#000000,#000000);
}
.anime-ref-studio-card img {
max-width: 100%;
max-height: 42px;
object-fit: contain;
filter: saturate(.86) contrast(1.04);
}
.anime-ref-studio-card strong {
overflow: hidden;
font-size: .69rem;
font-weight: 950;
text-overflow: ellipsis;
white-space: nowrap;
}
.anime-ref-episode-card {
flex: 0 0 clamp(180px, 17vw, 238px);
min-width: 0;
padding: 0;
overflow: hidden;
scroll-snap-align: start;
border: 1px solid var(--oscar-border);
border-radius: 8px;
color: var(--oscar-text);
background: #000000;
text-align: right;
}
.anime-ref-episode-art {
position: relative;
height: 112px;
display: block;
overflow: hidden;
background:#000000;
}
.anime-ref-episode-art > img,
.anime-ref-episode-art > .nova-fast-image {
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
.anime-ref-episode-art::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 58%);
pointer-events:none;
}
.anime-ref-new-badge {
position:absolute;
z-index:3;
top:7px;
right:7px;
min-height:21px;
padding:0 7px;
display:inline-flex;
align-items:center;
border-radius:5px;
color:var(--oscar-text);
background:#000000;
font-size:.54rem;
font-weight:900;
box-shadow:0 0 9px rgba(0,0,0,.42);
}
.anime-ref-card-play {
position:absolute;
z-index:3;
left:50%;
top:50%;
width:34px;
height:34px;
display:grid;
place-items:center;
transform:translate(-50%,-50%);
border:1px solid var(--oscar-border);
border-radius:50%;
color:var(--oscar-text);
background:rgba(0,0,0,.56);
}
.anime-ref-card-copy {
min-width:0;
padding:8px 8px 9px;
display:grid;
gap:3px;
}
.anime-ref-card-copy strong {
overflow:hidden;
color:var(--oscar-text);
font-size:.70rem;
font-weight:850;
text-overflow:ellipsis;
white-space:nowrap;
}
.anime-ref-card-copy small {
overflow:hidden;
color:var(--oscar-muted);
font-size:.55rem;
text-overflow:ellipsis;
white-space:nowrap;
}
.anime-ref-poster-card {
flex: 0 0 clamp(116px, 10.8vw, 158px);
min-width:0;
padding:0;
scroll-snap-align:start;
border:0;
color:var(--oscar-text);
background:transparent;
text-align:right;
}
.anime-ref-poster-art {
position:relative;
aspect-ratio:2/3;
display:block;
overflow:hidden;
border:1px solid var(--oscar-border);
border-radius:7px;
background:#000000;
}
.anime-ref-poster-art > img,
.anime-ref-poster-art > .nova-fast-image {
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
.anime-ref-poster-art::after {
content:"";
position:absolute;
inset:52% 0 0;
background:linear-gradient(0deg,rgba(0,0,0,.63),transparent);
pointer-events:none;
}
.anime-ref-poster-card .anime-ref-card-copy { padding:6px 2px 1px; }
.anime-ref-score {
position:absolute;
z-index:3;
top:6px;
left:6px;
min-height:20px;
padding:0 6px;
display:inline-flex;
align-items:center;
border-radius:4px;
color:var(--accent);
background:rgba(0,0,0,.76);
font-size:.55rem;
font-weight:950;
}
.anime-ref-poster-card .anime-ref-new-badge { top:6px; right:6px; }
.anime-ref-rank {
position:absolute;
z-index:3;
right:6px;
bottom:3px;
color:var(--oscar-text);
font-size:1.6rem;
font-weight:950;
line-height:1;
text-shadow:0 2px 0 #000000,0 0 12px rgba(0,0,0,.52);
}
.anime-ref-ratings-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.anime-ref-ratings-layout .anime-ref-section { min-width:0; }
.anime-ref-ratings-layout .anime-ref-poster-card { flex-basis: clamp(102px, 8.9vw, 135px); }
/* ------------------------------------------------------
Weekly schedule.
------------------------------------------------------ */
.anime-ref-schedule-section {
padding: 0;
border-radius: 11px;
}
.anime-ref-schedule-days {
min-height: 43px;
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
overflow:hidden;
border:1px solid var(--oscar-border);
border-radius:9px;
background:#000000;
}
.anime-ref-schedule-days button {
min-width:0;
border:0;
border-left:1px solid var(--oscar-border);
color:var(--oscar-text);
background:transparent;
font:800 .62rem Tajawal,Arial,sans-serif;
}
.anime-ref-schedule-days button:last-child { border-left:0; }
.anime-ref-schedule-days button.active {
color:var(--oscar-text);
background:linear-gradient(180deg,#000000,#000000);
box-shadow:inset 0 0 15px rgba(0,0,0,.06),0 0 18px rgba(0,0,0,.28);
}
.anime-ref-schedule-list {
margin-top:7px;
border:1px solid var(--oscar-border);
border-radius:9px;
overflow:hidden;
background:#000000;
}
.anime-ref-schedule-item {
width:100%;
min-height:67px;
padding:6px 10px;
display:grid;
grid-template-columns:95px minmax(0,1fr) 68px 94px;
align-items:center;
gap:11px;
border:0;
border-top:1px solid var(--oscar-border);
color:var(--oscar-text);
background:transparent;
text-align:right;
}
.anime-ref-schedule-item:first-child { border-top:0; }
.anime-ref-schedule-item > img,
.anime-ref-schedule-item > .nova-fast-image {
width:95px!important;
height:54px!important;
object-fit:cover!important;
border-radius:6px;
}
.anime-ref-schedule-item > span:nth-of-type(1) { min-width:0; display:grid; gap:3px; }
.anime-ref-schedule-item strong { overflow:hidden; font-size:.72rem; font-weight:900; white-space:nowrap; text-overflow:ellipsis; }
.anime-ref-schedule-item small { overflow:hidden; color:var(--oscar-muted); font-size:.56rem; white-space:nowrap; text-overflow:ellipsis; }
.anime-ref-schedule-item time { color:var(--accent); font-size:.84rem; font-weight:950; }
.anime-ref-remind {
min-height:34px;
display:flex!important;
align-items:center;
justify-content:center;
gap:6px;
border:1px solid var(--oscar-border);
border-radius:7px;
color:var(--accent);
}
.anime-ref-remind b { color:var(--oscar-text); font-size:.58rem; }
.anime-ref-schedule-empty {
min-height:78px;
margin-top:7px;
padding:12px 15px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border:1px solid var(--oscar-border);
border-radius:9px;
color:var(--accent);
background:#000000;
}
.anime-ref-schedule-empty > span { display:grid; gap:2px; }
.anime-ref-schedule-empty strong { color:var(--oscar-text); font-size:.72rem; }
.anime-ref-schedule-empty small { color:var(--oscar-muted); font-size:.56rem; }
.anime-ref-ad-slot { margin-top:18px; }
/* ------------------------------------------------------
Mobile reference composition.
------------------------------------------------------ */
@media (max-width: 860px) {
.anime-ref-shell {
width:100%;
padding: calc(10px + var(--safe-top, env(safe-area-inset-top, 0px))) 12px calc(var(--bottom-nav-h,78px) + var(--safe-bottom, env(safe-area-inset-bottom,0px)) + 16px);
background:#000000;
}
.anime-ref-topbar { min-height:58px; }
.anime-ref-brand img { width:82px; max-height:34px; }
.anime-ref-brand span { display:none; }
.anime-ref-tools { gap:2px; }
.anime-ref-tools > button { width:36px; height:36px; }
.anime-ref-tools .anime-ref-avatar { width:42px; height:42px; padding:2px; margin-left:4px; }
.anime-ref-type-switcher {
width:100%;
min-height:72px;
margin:4px auto 13px;
}
.anime-ref-type-switcher > button { padding:8px 11px; gap:8px; }
.anime-ref-type-switcher strong { font-size:.79rem; }
.anime-ref-type-switcher small { font-size:.50rem; }
.anime-ref-type-icon { width:28px; height:28px; }
.anime-ref-switch-diamond { width:32px; height:32px; }
.anime-ref-hero { min-height:254px; border-radius:10px; }
.anime-ref-hero-art .anime-ref-hero-image { object-position:70% center!important; }
.anime-ref-hero-shade {
background:
linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.82) 37%,rgba(0,0,0,.21) 72%),
linear-gradient(0deg,rgba(0,0,0,.74),transparent 46%);
}
.anime-ref-hero-copy {
left:17px;
top:50%;
width:58%;
transform:translateY(-48%);
}
.anime-ref-exclusive { margin-bottom:6px; font-size:.56rem; }
.anime-ref-hero h1 { font-size:clamp(1.55rem,8vw,2.25rem); }
.anime-ref-hero p { margin-top:7px; font-size:.58rem; line-height:1.7; -webkit-line-clamp:2; }
.anime-ref-hero-meta { display:none; }
.anime-ref-hero-actions { margin-top:11px; }
.anime-ref-hero-actions button { min-height:37px; padding:0 13px; border-radius:7px; font-size:.62rem; }
.anime-ref-hero-actions .primary { min-width:112px; }
.anime-ref-hero-actions .secondary { display:none; }
.anime-ref-hero-arrow { width:30px; height:30px; top:auto; bottom:9px; transform:none; }
.anime-ref-hero-arrow.previous { right:8px; }
.anime-ref-hero-arrow.next { display:none; }
.anime-ref-hero-dots { bottom:9px; gap:7px; }
.anime-ref-hero-dots button { width:6px; height:6px; }
.anime-ref-section { margin-top:13px; }
.anime-ref-section-head { min-height:28px; margin-bottom:6px; }
.anime-ref-section-head h2 { font-size:.92rem; }
.anime-ref-section-head button { font-size:.59rem; }
.anime-ref-studio-card { flex:0 0 96px; min-width:96px; height:54px; padding:6px 8px; border-radius:6px; }
.anime-ref-studio-card img { max-height:34px; }
.anime-ref-studio-card strong { font-size:.58rem; }
.anime-ref-episode-rail { gap:8px; }
.anime-ref-episode-card { flex:0 0 43vw; border-radius:7px; }
.anime-ref-episode-art { height:94px; }
.anime-ref-card-copy { padding:7px 7px 8px; }
.anime-ref-card-copy strong { font-size:.64rem; }
.anime-ref-card-copy small { font-size:.49rem; }
.anime-ref-card-play { width:31px; height:31px; }
.anime-ref-poster-rail { gap:8px; }
.anime-ref-poster-card { flex:0 0 29vw; }
.anime-ref-poster-art { border-radius:6px; }
.anime-ref-poster-card .anime-ref-card-copy strong { font-size:.61rem; }
.anime-ref-poster-card .anime-ref-card-copy small { font-size:.47rem; }
.anime-ref-score { top:5px; left:5px; font-size:.48rem; }
.anime-ref-rank { font-size:1.35rem; }
.anime-ref-ratings-layout { display:block; }
.anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:29vw; }
.anime-ref-rating-section.movies { margin-top:14px; }
.anime-ref-schedule-days { min-height:38px; overflow-x:auto; display:flex; scrollbar-width:none; }
.anime-ref-schedule-days::-webkit-scrollbar { display:none; }
.anime-ref-schedule-days button { flex:0 0 68px; border-left:1px solid var(--oscar-border); font-size:.56rem; }
.anime-ref-schedule-item { grid-template-columns:86px minmax(0,1fr) 50px; gap:8px; min-height:63px; padding:5px 7px; }
.anime-ref-schedule-item > img,
.anime-ref-schedule-item > .nova-fast-image { width:86px!important; height:50px!important; }
.anime-ref-schedule-item time { font-size:.72rem; }
.anime-ref-remind { display:none!important; }
.anime-ref-schedule-empty { min-height:68px; }
}
@media (max-width: 390px) {
.anime-ref-shell { padding-inline:10px; }
.anime-ref-type-switcher strong { font-size:.72rem; }
.anime-ref-type-switcher small { font-size:.46rem; }
.anime-ref-hero { min-height:238px; }
.anime-ref-hero-copy { width:62%; left:14px; }
.anime-ref-poster-card { flex-basis:31vw; }
.anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:31vw; }
}
/* Windows/desktop: condensed rails, side-by-side ranking blocks, no global bottom nav. */
@media (min-width: 861px) {
.catalog-landing-anime .catalog-landing-main { padding-bottom:20px!important; }
.anime-ref-studios-section { margin-top:17px; }
.anime-ref-episodes-section { margin-top:13px; }
}
@media (hover:hover) {
.anime-ref-type-switcher > button:hover,
.anime-ref-studio-card:hover,
.anime-ref-episode-card:hover,
.anime-ref-poster-card:hover .anime-ref-poster-art {
border-color:var(--accent);
}
.anime-ref-episode-card:hover,
.anime-ref-poster-card:hover { transform:translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
.anime-ref-shell *,
.anime-ref-shell *::before,
.anime-ref-shell *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
/* Desktop composition mirrors the supplied wide-screen reference: hero first,
today's episodes beside the weekly schedule, rankings below, studios last. */
@media (min-width: 861px) {
.anime-ref-shell {
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
grid-template-areas:
"top top"
"state state"
"switch switch"
"hero hero"
"continue continue"
"episodes schedule"
"latest latest"
"ratings ratings"
"studios studios"
"ad ad";
column-gap:18px;
align-items:start;
}
.anime-ref-topbar { grid-area:top; }
.anime-ref-connection-state { grid-area:state; }
.anime-ref-type-switcher { grid-area:switch; }
.anime-ref-hero { grid-area:hero; }
.anime-ref-continue-section { grid-area:continue; }
.anime-ref-episodes-section { grid-area:episodes; min-width:0; margin-top:14px; }
.anime-ref-schedule-section { grid-area:schedule; min-width:0; margin-top:14px; }
.anime-ref-latest-section { grid-area:latest; }
.anime-ref-ratings-layout { grid-area:ratings; }
.anime-ref-studios-section { grid-area:studios; }
.anime-ref-ad-slot { grid-area:ad; }
.anime-ref-episodes-section .anime-ref-episode-card { flex-basis:clamp(150px,12.6vw,195px); }
.anime-ref-episodes-section .anime-ref-episode-art { height:94px; }
.anime-ref-schedule-section .anime-ref-section-head,
.anime-ref-episodes-section .anime-ref-section-head { min-height:31px; }
.anime-ref-schedule-days { min-height:39px; }
.anime-ref-schedule-item { grid-template-columns:72px minmax(0,1fr) 52px; gap:8px; min-height:57px; padding:5px 7px; }
.anime-ref-schedule-item > img,
.anime-ref-schedule-item > .nova-fast-image { width:72px!important; height:44px!important; }
.anime-ref-schedule-item .anime-ref-remind { display:none!important; }
}
/* ======================================================
Phase 2 — Native Data & UX refinement
====================================================== */
.anime-ref-connection-state {
width: fit-content;
min-height: 28px;
margin: -3px 0 8px auto;
padding: 0 9px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--accent);
border-radius: 999px;
color: var(--accent);
background: rgba(0,0,0,.82);
font-size: .56rem;
font-weight: 800;
}
.anime-ref-connection-state.offline { color: var(--accent); border-color: var(--accent); }
.anime-ref-connection-state.synced i { width: 6px; height: 6px; border-radius: 50%; background: #000000; box-shadow: 0 0 9px rgba(0,0,0,.8); }
.anime-ref-section-note { color: var(--oscar-muted); font-size: .61rem; font-weight: 700; }
.anime-ref-continue-section { margin-top: 17px; }
.anime-ref-continue-rail {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.anime-ref-continue-card {
min-width: 0;
padding: 0;
overflow: hidden;
display: grid;
grid-template-columns: 132px minmax(0,1fr) auto;
align-items: center;
gap: 10px;
border: 1px solid var(--oscar-border);
border-radius: 9px;
color: var(--oscar-text);
background: #000000;
text-align: right;
cursor: pointer;
}
.anime-ref-continue-art { position: relative; width: 132px; height: 68px; display: block; overflow: hidden; background: #000000; }
.anime-ref-continue-art > .nova-fast-image,
.anime-ref-continue-art img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.anime-ref-continue-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.30)); pointer-events:none; }
.anime-ref-continue-art .anime-ref-card-play { z-index: 3; width: 30px; height: 30px; }
.anime-ref-continue-progress { position: absolute; z-index: 4; right: 6px; left: 6px; bottom: 5px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(0,0,0,.18); }
.anime-ref-continue-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#000000,#000000); box-shadow:0 0 8px rgba(0,0,0,.66); }
.anime-ref-continue-copy { min-width:0; display:grid; gap:4px; }
.anime-ref-continue-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--oscar-text); font-size:.66rem; font-weight:900; }
.anime-ref-continue-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--oscar-muted); font-size:.53rem; }
.anime-ref-continue-card > b { padding-left:9px; color:var(--accent); font-size:.55rem; font-weight:900; }
.anime-ref-continue-card:active { transform: scale(.985); }
/* Skeleton mirrors the final reference hierarchy instead of showing a generic spinner. */
.anime-ref-skeleton-shell { pointer-events:none; }
.anime-ref-skeleton-brand { width:104px; height:32px; border-radius:7px; }
.anime-ref-skeleton-tools { display:flex; align-items:center; gap:9px; }
.anime-ref-skeleton-tools i { width:38px; height:38px; display:block; border-radius:50%; }
.anime-ref-skeleton-switcher { overflow:hidden; border-radius:17px; gap:4px; }
.anime-ref-skeleton-switcher > span { min-height:68px; display:block; border-radius:14px; }
.anime-ref-skeleton-hero { min-height:clamp(280px,29vw,390px); }
.anime-ref-skeleton-hero-copy { position:absolute; z-index:3; left:5%; top:50%; width:min(42%,470px); transform:translateY(-50%); display:grid; gap:11px; }
.anime-ref-skeleton-hero-copy i { width:74px; height:13px; border-radius:5px; background:rgba(0,0,0,.13); }
.anime-ref-skeleton-hero-copy strong { width:72%; height:48px; border-radius:8px; background:rgba(0,0,0,.10); }
.anime-ref-skeleton-hero-copy span { width:100%; height:33px; border-radius:8px; background:rgba(0,0,0,.08); }
.anime-ref-skeleton-hero-copy b { width:122px; height:39px; border-radius:9px; background:rgba(0,0,0,.18); }
.anime-ref-skeleton-section .anime-ref-section-head h2 > span { width:140px; height:18px; display:block; border-radius:5px; }
.anime-ref-skeleton-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.anime-ref-skeleton-cards > i { display:block; aspect-ratio:16/9; border-radius:10px; }
/* Logos are real first-party proxied images in Phase 2; keep them crisp and neutral. */
.anime-ref-studio-card img { max-width:84%; max-height:54px; object-fit:contain; filter:none; }
@media(max-width:1100px) {
.anime-ref-continue-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
.anime-ref-connection-state { margin-top:1px; margin-bottom:7px; }
.anime-ref-continue-rail { display:flex; overflow-x:auto; gap:8px; scrollbar-width:none; scroll-snap-type:x proximity; }
.anime-ref-continue-rail::-webkit-scrollbar { display:none; }
.anime-ref-continue-card { flex:0 0 min(82vw,330px); grid-template-columns:112px minmax(0,1fr) auto; scroll-snap-align:start; }
.anime-ref-continue-art { width:112px; height:64px; }
.anime-ref-skeleton-hero-copy { left:16px; right:16px; bottom:24px; top:auto; width:auto; transform:none; }
.anime-ref-skeleton-cards { display:flex; overflow:hidden; }
.anime-ref-skeleton-cards > i { flex:0 0 31vw; min-height:128px; aspect-ratio:2/3; }
}
@media(max-width:760px) {
/* The supplied phone reference moves directly from Hero to Studios. */
.anime-ref-continue-section { display:none; }
}
/* ======================================================
Phase 3 — Schedule + pixel polish against the supplied
Android and Windows visual references.
====================================================== */
.anime-ref-chrome { position: relative; }
.anime-ref-brand-lockup {
position:relative;
width:96px;
height:43px;
display:grid;
align-content:center;
justify-items:start;
line-height:.78;
letter-spacing:-.055em;
color:var(--oscar-text);
}
.anime-ref-brand-lockup b,
.anime-ref-brand-lockup strong { display:block; font-family:inherit; font-size:1.18rem; font-weight:950; }
.anime-ref-brand-lockup strong { margin-top:2px; }
.anime-ref-brand-lockup i {
position:absolute;
left:62px;
top:17px;
width:9px;
height:9px;
transform:rotate(45deg);
background:#000000;
box-shadow:0 0 14px rgba(0,0,0,.95);
}
.anime-ref-mobile-label { display:none; }
.anime-ref-desktop-label { display:inline; }
.anime-ref-schedule-item {
padding:0;
grid-template-columns:minmax(0,1fr) 92px;
gap:0;
}
.anime-ref-schedule-open {
min-width:0;
min-height:66px;
padding:6px 10px;
display:grid;
grid-template-columns:95px minmax(0,1fr) 68px;
align-items:center;
gap:11px;
border:0;
color:var(--oscar-text);
background:transparent;
text-align:right;
font:inherit;
}
.anime-ref-schedule-open > img,
.anime-ref-schedule-open > .nova-fast-image {
width:95px!important;
height:54px!important;
object-fit:cover!important;
border-radius:6px;
}
.anime-ref-schedule-open > span { min-width:0; display:grid; gap:3px; }
.anime-ref-schedule-open strong { overflow:hidden; font-size:.72rem; font-weight:900; white-space:nowrap; text-overflow:ellipsis; }
.anime-ref-schedule-open small { overflow:hidden; color:var(--oscar-muted); font-size:.56rem; white-space:nowrap; text-overflow:ellipsis; }
.anime-ref-schedule-open time { color:var(--accent); font-size:.84rem; font-weight:950; }
.anime-ref-schedule-item.estimated .anime-ref-schedule-open time { color:var(--accent); font-size:.62rem; }
.anime-ref-schedule-item .anime-ref-remind {
width:82px;
min-height:34px;
margin:0 6px;
align-self:center;
border:1px solid var(--accent);
background:#000000;
font:inherit;
}
.anime-ref-schedule-item .anime-ref-remind.active {
border-color:var(--accent);
color:var(--accent);
background:rgba(0,0,0,.24);
box-shadow:inset 0 0 12px rgba(0,0,0,.12);
}
@media (min-width: 861px) {
.anime-ref-shell {
width:min(100%,1480px);
padding-top:12px;
padding-inline:clamp(28px,3vw,52px);
grid-template-columns:minmax(0,1.27fr) minmax(340px,.73fr);
grid-template-areas:
"top top"
"state state"
"hero hero"
"continue continue"
"episodes schedule"
"ratings ratings"
"studios studios"
"ad ad";
column-gap:18px;
}
.anime-ref-chrome { grid-area:top; min-height:78px; }
.anime-ref-topbar { min-height:78px; }
.anime-ref-type-switcher {
position:absolute;
z-index:4;
top:2px;
left:50%;
width:min(560px,48vw);
min-height:70px;
margin:0;
transform:translateX(-50%);
}
.anime-ref-connection-state { grid-area:state; }
.anime-ref-hero {
grid-area:hero;
min-height:clamp(292px,23.5vw,350px);
border-radius:12px;
}
.anime-ref-hero-copy { width:min(39%,500px); left:36px; }
.anime-ref-hero h1 { font-size:clamp(2.25rem,3.7vw,3.85rem); }
.anime-ref-hero p { max-width:440px; }
.anime-ref-hero-art .anime-ref-hero-image { object-position:72% center!important; }
.anime-ref-continue-section { grid-area:continue; margin-top:10px; }
.anime-ref-episodes-section { grid-area:episodes; }
.anime-ref-schedule-section { grid-area:schedule; }
.anime-ref-ratings-layout { grid-area:ratings; gap:14px; }
.anime-ref-studios-section { grid-area:studios; }
.anime-ref-ad-slot { grid-area:ad; }
.anime-ref-latest-section { display:none; }
.anime-ref-episode-rail { gap:8px; }
.anime-ref-episodes-section .anime-ref-episode-card { flex-basis:clamp(132px,11vw,178px); }
.anime-ref-episodes-section .anime-ref-episode-art { height:86px; }
.anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:clamp(90px,7.6vw,118px); }
.anime-ref-studios-rail { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; overflow:visible; }
.anime-ref-studio-card { width:100%; min-width:0; flex:none; height:58px; }
.anime-ref-schedule-open {
min-height:56px;
padding:5px 7px;
grid-template-columns:70px minmax(0,1fr) 50px;
gap:8px;
}
.anime-ref-schedule-open > img,
.anime-ref-schedule-open > .nova-fast-image { width:70px!important; height:43px!important; }
.anime-ref-schedule-open time { font-size:.70rem; }
.anime-ref-schedule-item { grid-template-columns:minmax(0,1fr) 72px; min-height:56px; }
.anime-ref-schedule-item .anime-ref-remind { width:64px; min-height:30px; margin-inline:4px; }
.anime-ref-schedule-item .anime-ref-remind b { font-size:.52rem; }
}
@media (max-width: 860px) {
.anime-ref-mobile-label { display:inline; }
.anime-ref-desktop-label { display:none; }
.anime-ref-chrome { display:block; }
.anime-ref-brand-lockup { width:84px; height:38px; }
.anime-ref-brand-lockup b,
.anime-ref-brand-lockup strong { font-size:1.02rem; }
.anime-ref-brand-lockup i { left:55px; top:15px; width:8px; height:8px; }
.anime-ref-type-switcher { position:relative; transform:none; }
.anime-ref-hero { min-height:260px; }
.anime-ref-studios-section { margin-top:13px; }
.anime-ref-rating-section.movies { display:none; }
.anime-ref-schedule-section { margin-top:13px; }
.anime-ref-schedule-item { grid-template-columns:minmax(0,1fr) 68px; min-height:63px; }
.anime-ref-schedule-open { min-height:62px; padding:5px 7px; grid-template-columns:82px minmax(0,1fr) 48px; gap:8px; }
.anime-ref-schedule-open > img,
.anime-ref-schedule-open > .nova-fast-image { width:82px!important; height:49px!important; }
.anime-ref-schedule-open time { font-size:.70rem; }
.anime-ref-schedule-item .anime-ref-remind { display:flex!important; width:60px; min-height:32px; margin-inline:3px; }
.anime-ref-schedule-item .anime-ref-remind b { display:none; }
.anime-ref-schedule-item.estimated .anime-ref-remind { opacity:.72; }
}
@media (max-width: 430px) {
.anime-ref-shell { padding-inline:10px; }
.anime-ref-topbar { min-height:56px; }
.anime-ref-type-switcher { min-height:74px; margin-top:5px; }
.anime-ref-type-switcher > button { padding-inline:9px; }
.anime-ref-type-switcher strong { font-size:.76rem; }
.anime-ref-type-switcher small { font-size:.46rem; }
.anime-ref-hero { min-height:248px; }
.anime-ref-hero-copy { left:14px; width:61%; }
.anime-ref-hero h1 { font-size:1.85rem; }
.anime-ref-studio-card { flex-basis:92px; min-width:92px; }
.anime-ref-episode-card { flex-basis:44vw; }
.anime-ref-poster-card,
.anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:30.5vw; }
}
/* ======================================================
Phase 4 — Native interaction + production polish
Reference lock: supplied Android + Windows captures.
====================================================== */
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] {
--anime-ref-focus: var(--accent);
--anime-ref-focus-soft: var(--oscar-border);
content-visibility: auto;
contain-intrinsic-size: auto 1500px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] button,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] [tabindex] {
-webkit-tap-highlight-color: transparent;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] button:focus-visible,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] [tabindex]:focus-visible {
outline: 2px solid var(--anime-ref-focus);
outline-offset: 3px;
box-shadow: 0 0 0 4px var(--anime-ref-focus-soft), 0 0 22px rgba(0,0,0,.20);
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero {
touch-action: pan-y pinch-zoom;
will-change: transform;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-art,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy {
transform: translateZ(0);
backface-visibility: hidden;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-art {
animation: animePhase4HeroReveal .32s cubic-bezier(.2,.74,.25,1);
}
@keyframes animePhase4HeroReveal {
from { opacity: .72; }
to { opacity: 1; }
}
.anime-ref-studios-rail,
.anime-ref-episode-rail,
.anime-ref-poster-rail,
.anime-ref-schedule-days,
.anime-ref-continue-rail {
overscroll-behavior-inline: contain;
scroll-padding-inline: 8px;
-webkit-overflow-scrolling: touch;
}
.anime-ref-episode-card,
.anime-ref-poster-card,
.anime-ref-studio-card,
.anime-ref-continue-card,
.anime-ref-schedule-open,
.anime-ref-remind {
transition: transform .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.anime-ref-episode-card:active,
.anime-ref-poster-card:active,
.anime-ref-studio-card:active,
.anime-ref-continue-card:active,
.anime-ref-schedule-open:active,
.anime-ref-remind:active {
transform: scale(.975);
}
/* The reference uses very quiet chrome. Keep state visible but subordinate. */
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-connection-state {
opacity: .78;
backdrop-filter: blur(12px);
}
/* Mobile reference lock — dimensions and density follow the supplied phone capture. */
@media (max-width: 860px) {
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] {
padding-top: calc(11px + var(--safe-top, env(safe-area-inset-top,0px)));
padding-inline: 11px;
row-gap: 0;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-topbar {
min-height: 58px;
margin-bottom: 9px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-tools > button {
width: 39px;
height: 39px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-tools .anime-ref-avatar {
width: 45px;
height: 45px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-switcher {
width: 100%;
min-height: 78px;
margin: 1px auto 11px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-switch-diamond {
width: 34px;
height: 34px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero {
min-height: clamp(244px, 60vw, 296px);
border-radius: 13px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy {
left: 16px;
width: 62%;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero h1 {
font-size: clamp(1.72rem, 8.1vw, 2.28rem);
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero p {
margin-top: 7px;
font-size: .65rem;
line-height: 1.7;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-meta { display:none; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-actions { margin-top: 13px; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-actions button {
min-height: 40px;
padding-inline: 15px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-actions .secondary { display:none; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section { margin-top: 15px; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section-head {
min-height: 29px;
margin-bottom: 7px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section-head h2 {
font-size: 1rem;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section-head button {
min-height: 28px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-studios-rail { gap: 8px; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-studio-card {
flex-basis: 96px;
min-width: 96px;
height: 58px;
border-radius: 7px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episode-rail { gap: 8px; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episode-card {
flex-basis: min(43vw, 174px);
border-radius: 8px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episode-art { height: 116px; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-poster-rail { gap: 8px; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-poster-card,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-ratings-layout .anime-ref-poster-card {
flex-basis: min(30.4vw, 124px);
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-schedule-days {
border-radius: 10px;
padding: 3px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-schedule-days > button {
min-width: 58px;
min-height: 33px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-schedule-list {
margin-top: 7px;
border-radius: 10px;
}
}
@media (max-width: 390px) {
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-switcher strong { font-size:.72rem; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-switcher small { display:none; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-icon { width:28px; height:28px; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero { min-height:232px; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episode-card { flex-basis:45vw; }
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-poster-card,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:31.4vw; }
}
/* Desktop reference lock — compact 16:9 composition and four-card continue rail. */
@media (min-width: 861px) {
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] {
width: min(100%, 1470px);
padding: 12px clamp(26px, 2.75vw, 48px) 24px;
grid-template-columns: minmax(0, 1.31fr) minmax(340px, .69fr);
column-gap: 17px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-chrome,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-topbar {
min-height: 73px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-switcher {
top: 1px;
width: min(560px, 47vw);
min-height: 68px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero {
min-height: clamp(304px, 22.7vw, 346px);
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy {
left: 34px;
width: min(39%, 490px);
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-continue-rail {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 11px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-continue-card {
grid-template-columns: 126px minmax(0, 1fr) auto;
min-height: 68px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-continue-art {
width:126px;
height:68px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episodes-section .anime-ref-episode-card {
flex-basis: clamp(128px, 10.45vw, 168px);
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episodes-section .anime-ref-episode-art {
height: 82px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-ratings-layout {
gap: 13px;
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-ratings-layout .anime-ref-poster-card {
flex-basis: clamp(88px, 7.2vw, 112px);
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-studio-card {
height: 56px;
}
}
@media (hover:hover) and (pointer:fine) {
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-tools > button:hover,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section-head button:hover {
color:var(--accent);
}
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-actions button:hover,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-remind:hover {
border-color: var(--accent);
box-shadow: 0 0 18px rgba(0,0,0,.16);
}
}
@media (prefers-reduced-motion: reduce) {
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-art {
animation: none !important;
}
}
/* ======================================================
Phase 5 — Final screenshot-reference density lock
Supplied Android + Windows captures remain the geometry reference.
This block intentionally overrides earlier phase dimensions only inside V5.
====================================================== */
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] {
--anime-v5-purple:var(--accent);
--anime-v5-purple-hot:var(--accent);
--anime-v5-hairline:rgba(255,255,255,.17);
background:#000000;
}
/* The reference does not show a normal-online status chip. Offline remains explicit. */
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-connection-state.synced { display:none!important; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-connection-state.offline {
margin-block:1px 7px;
opacity:.88;
}
/* Sharper, quieter outlines matching the supplied black/purple UI. */
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher > button,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-card,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-art,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-days,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-list,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-continue-card {
border-color:var(--anime-v5-hairline);
}
@media (max-width:860px) {
/* Phone reference is intentionally dense: six studios, about four episode/poster
cards and five ranked cards are visible without a swipe. */
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] {
padding-top:calc(9px + var(--safe-top, env(safe-area-inset-top,0px)));
padding-inline:12px;
padding-bottom:calc(68px + var(--safe-bottom, env(safe-area-inset-bottom,0px)) + 12px);
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-topbar {
min-height:52px;
margin-bottom:7px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-brand-lockup {
width:78px;
height:35px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-brand-lockup b,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-brand-lockup strong {
font-size:.96rem;
letter-spacing:-.045em;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-brand-lockup i {
left:51px; top:13px; width:8px; height:8px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-tools { gap:1px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-tools > button { width:35px; height:35px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-tools .anime-ref-avatar { width:41px; height:41px; margin-left:3px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher {
min-height:61px;
margin:2px auto 10px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher > button {
padding:7px 8px;
gap:7px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher strong { font-size:.72rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher small { font-size:.43rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-icon { width:27px; height:27px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-switch-diamond { width:30px; height:30px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero {
min-height:clamp(164px,43vw,206px);
border-radius:10px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-copy {
left:14px;
width:53%;
transform:translateY(-47%);
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-exclusive { margin-bottom:4px; font-size:.50rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero h1 { font-size:clamp(1.38rem,6.7vw,1.78rem); }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero p {
margin-top:5px;
font-size:.50rem;
line-height:1.55;
-webkit-line-clamp:2;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-actions { margin-top:9px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-actions button {
min-height:34px;
padding-inline:12px;
border-radius:6px;
font-size:.56rem;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-dots { bottom:7px; gap:6px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-dots button { width:5px; height:5px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-arrow { width:27px; height:27px; bottom:6px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-section { margin-top:11px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-section-head { min-height:24px; margin-bottom:5px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-section-head h2 { font-size:.84rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-section-head button { min-height:23px; font-size:.53rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studios-rail { gap:6px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card {
flex:0 0 calc((100vw - 24px - 30px) / 6);
min-width:calc((100vw - 24px - 30px) / 6);
height:43px;
padding:4px 5px;
border-radius:5px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card img { max-width:90%; max-height:29px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card strong { font-size:.43rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-rail { gap:7px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-card {
flex:0 0 min(23.8vw,104px);
border-radius:6px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-art { height:68px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-new-badge { top:4px; right:4px; min-height:16px; padding-inline:4px; font-size:.42rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-card-play { width:27px; height:27px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-card-copy { padding:5px 5px 6px; gap:2px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-card-copy strong { font-size:.52rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-card-copy small { font-size:.42rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-rail { gap:7px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card {
flex:0 0 min(23.2vw,102px);
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-rating-section.series .anime-ref-poster-card {
flex-basis:min(18.5vw,82px);
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-art { border-radius:5px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card .anime-ref-card-copy { padding:4px 1px 0; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card .anime-ref-card-copy strong { font-size:.50rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card .anime-ref-card-copy small { font-size:.40rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-score { top:4px; left:4px; min-height:16px; padding-inline:4px; font-size:.42rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-rank { right:4px; bottom:2px; font-size:1.05rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-days {
min-height:35px;
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
overflow:hidden;
padding:2px;
border-radius:8px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-days > button {
min-width:0;
min-height:29px;
padding:0 2px;
font-size:.45rem;
border-radius:7px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-list { margin-top:5px; border-radius:8px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-item { min-height:51px; grid-template-columns:minmax(0,1fr) 54px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open {
min-height:51px;
padding:4px 6px;
grid-template-columns:72px minmax(0,1fr) 44px;
gap:6px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open > img,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open > .nova-fast-image { width:72px!important; height:41px!important; border-radius:5px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-item strong { font-size:.55rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-item small { font-size:.43rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open time { font-size:.61rem; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-item .anime-ref-remind { width:50px; min-height:28px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-empty { min-height:58px; margin-top:5px; padding:8px 10px; }
}
@media (max-width:390px) {
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher small { display:none; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero { min-height:158px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-card { flex-basis:24.4vw; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card { flex-basis:23.7vw; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-rating-section.series .anime-ref-poster-card { flex-basis:19vw; }
}
@media (min-width:861px) {
/* Wide reference is a dense ~1280px content canvas rather than a stretched web page. */
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] {
width:min(calc(100% - 24px),1280px);
padding:10px 28px 20px;
grid-template-columns:minmax(0,1.34fr) minmax(330px,.66fr);
column-gap:15px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-chrome,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-topbar { min-height:68px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher {
top:0;
width:min(540px,46vw);
min-height:64px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero {
min-height:clamp(238px,18vw,270px);
border-radius:10px;
}
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-copy { left:31px; width:min(38%,455px); }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero h1 { font-size:clamp(2rem,3.1vw,3.15rem); }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero p { max-width:410px; font-size:.72rem; line-height:1.65; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-continue-section { margin-top:8px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-continue-card { min-height:61px; grid-template-columns:116px minmax(0,1fr) auto; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-continue-art { width:116px; height:61px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episodes-section .anime-ref-episode-card { flex-basis:clamp(118px,9.6vw,148px); }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episodes-section .anime-ref-episode-art { height:72px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:clamp(82px,6.8vw,100px); }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studios-rail { gap:10px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card { height:52px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-days { min-height:35px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open { min-height:50px; grid-template-columns:64px minmax(0,1fr) 46px; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open > img,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open > .nova-fast-image { width:64px!important; height:39px!important; }
}
/* ======================================================
Phase 6 — Release Candidate geometry + WebView stability lock
Final static geometry pass based on the supplied phone/Windows references.
Keeps the V5 visual language but removes WebView/DPI variability and
stabilizes rail density at the two production form factors.
====================================================== */
.anime-ref-shell[data-anime-phase6-root="true"] {
--anime-phase6-vw: 100vw;
--anime-phase6-vh: 100dvh;
--anime-phase6-hairline: rgba(255,255,255,.16);
--anime-phase6-purple: var(--accent);
--anime-phase6-hot: var(--accent);
overscroll-behavior-y: contain;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
.anime-ref-shell[data-anime-phase6-root="true"] :is(button,a) {
-webkit-tap-highlight-color: transparent;
}
.anime-ref-shell[data-anime-phase6-root="true"] :is(.anime-ref-studios-rail,.anime-ref-episode-rail,.anime-ref-poster-rail,.anime-ref-continue-rail) {
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.anime-ref-shell[data-anime-phase6-root="true"] :is(.anime-ref-studio-card,.anime-ref-episode-card,.anime-ref-poster-card,.anime-ref-continue-card) {
scroll-snap-align: start;
}
.anime-ref-shell[data-anime-phase6-root="true"][data-anime-hero-visible="false"] .anime-ref-hero-dots button {
box-shadow:none!important;
}
/* Phone reference lock: 6 studio marks / 4 episode cards / 4 latest posters /
5 ranked cards, one-line seven-day schedule and a ~2.25:1 cinematic hero. */
@media (max-width:860px) {
.anime-ref-shell[data-anime-phase6-root="true"] {
width:100%;
max-width:540px;
padding-top:calc(8px + var(--safe-top, env(safe-area-inset-top,0px)));
padding-inline:13px;
padding-bottom:calc(70px + var(--safe-bottom, env(safe-area-inset-bottom,0px)) + 10px);
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-topbar {
min-height:50px;
margin-bottom:7px;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-brand-lockup { width:76px; height:34px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-tools > button { width:34px; height:34px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-tools .anime-ref-avatar { width:40px; height:40px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher {
width:100%;
min-height:60px;
margin:1px auto 10px;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher > button { padding:6px 8px; gap:6px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher strong { font-size:.72rem; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher small { font-size:.42rem; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-switch-diamond { width:29px; height:29px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero {
min-height:0!important;
height:auto;
aspect-ratio:2.28 / 1;
border-radius:9px;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-art .anime-ref-hero-image {
object-position:72% center!important;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-copy {
left:13px;
width:54%;
transform:translateY(-48%);
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-exclusive { font-size:.49rem; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero h1 {
font-size:clamp(1.30rem,6.45vw,1.72rem);
line-height:1.08;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero p {
max-width:95%;
margin-top:4px;
font-size:.49rem;
line-height:1.48;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-actions { margin-top:8px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-actions button {
min-height:33px;
padding-inline:11px;
font-size:.55rem;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-dots { bottom:6px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-arrow { bottom:5px; width:26px; height:26px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-section { margin-top:10px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-section-head { min-height:23px; margin-bottom:5px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-section-head h2 { font-size:.82rem; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studios-rail {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:6px;
overflow:visible;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studio-card {
width:100%; min-width:0; height:43px; flex:none; padding:4px;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episode-rail {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px;
overflow:visible;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episode-card {
width:100%; min-width:0; flex:none;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episode-art {
height:auto;
aspect-ratio:1.08 / 1;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-latest-section .anime-ref-poster-rail {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:7px;
overflow:visible;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-latest-section .anime-ref-poster-card {
width:100%; min-width:0; flex:none;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-rating-section.series .anime-ref-poster-rail {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:7px;
overflow:visible;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-rating-section.series .anime-ref-poster-card {
width:100%; min-width:0; flex:none;
}
/* Mobile reference ends with series ranking + schedule; movies remain accessible
from the Movies selector and catalogue instead of duplicating the desktop row. */
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-rating-section.movies { display:none!important; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-schedule-days {
grid-template-columns:repeat(7,minmax(0,1fr));
gap:0;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-schedule-days > button {
min-height:28px;
font-size:.44rem;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-schedule-open {
grid-template-columns:74px minmax(0,1fr) 43px;
}
}
/* Narrow phones: keep the same composition instead of falling back to a different design. */
@media (max-width:390px) {
.anime-ref-shell[data-anime-phase6-root="true"] { padding-inline:10px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher small { display:none; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero { aspect-ratio:2.18 / 1; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero h1 { font-size:1.28rem; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studio-card { height:40px; }
}
/* Windows reference lock: centered 1280-ish canvas, compact hero, four continue
cards, five today cards, three visible schedule entries, 6+6 rankings, seven studios. */
@media (min-width:861px) {
.anime-ref-shell[data-anime-phase6-root="true"] {
width:min(calc(100% - 28px),1280px);
max-width:1280px;
padding:10px 28px 18px;
grid-template-columns:minmax(0,1.36fr) minmax(350px,.64fr);
column-gap:14px;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-chrome,
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-topbar { min-height:66px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher {
width:min(535px,45vw);
min-height:62px;
top:1px;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero {
min-height:0!important;
height:auto;
aspect-ratio:4.45 / 1;
border-radius:9px;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-copy {
left:30px;
width:min(38%,430px);
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero h1 { font-size:clamp(2rem,3vw,3rem); }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero p { max-width:395px; font-size:.69rem; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-continue-rail {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
overflow:visible;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-continue-card {
width:100%; min-width:0; grid-template-columns:108px minmax(0,1fr) auto;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-continue-art { width:108px; height:58px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episodes-section .anime-ref-episode-rail {
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:8px;
overflow:visible;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episodes-section .anime-ref-episode-card {
width:100%; min-width:0; flex:none;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episodes-section .anime-ref-episode-art {
height:auto;
aspect-ratio:1.30 / 1;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-schedule-list .anime-ref-schedule-item:nth-child(n+4) { display:none; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-ratings-layout { gap:13px; }
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-ratings-layout .anime-ref-poster-rail {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;
overflow:visible;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-ratings-layout .anime-ref-poster-card {
width:100%; min-width:0; flex:none;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studios-rail {
grid-template-columns:repeat(7,minmax(0,1fr));
gap:10px;
}
.anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studio-card { height:50px; }
}
/* Precision accessibility / keyboard focus without adding chrome to pointer/touch use. */
.anime-ref-shell[data-anime-phase6-root="true"] :is(button,a):focus-visible {
outline:2px solid var(--accent);
outline-offset:2px;
}
@media (prefers-contrast: more) {
.anime-ref-shell[data-anime-phase6-root="true"] {
--anime-phase6-hairline:rgba(255,255,255,.34);
}
.anime-ref-shell[data-anime-phase6-root="true"] :is(.anime-ref-hero,.anime-ref-studio-card,.anime-ref-episode-card,.anime-ref-poster-art,.anime-ref-schedule-days,.anime-ref-schedule-list) {
border-color:var(--oscar-border)!important;
}
}
/* ======================================================
Phase 7 — Device calibration instrumentation lock
The supplied references were cropped to their UI canvases (phone 680×1539,
Windows 1228×851). Phase 7 locks the two most reliable reference ratios
(hero geometry) and adds deterministic QA hooks. Remaining DPI/font offsets
still require screenshots from the real Android/WebView2 builds.
====================================================== */
.anime-ref-shell[data-anime-phase7-root="true"] {
--anime-phase7-reference-phone: 941 / 1672;
--anime-phase7-reference-windows: 1448 / 1086;
font-synthesis: none;
}
.anime-ref-shell[data-anime-phase7-root="true"][data-anime-calibration="true"] {
isolation:isolate;
}
.anime-ref-shell[data-anime-phase7-root="true"] [data-anime-qa-label] {
pointer-events:none!important;
}
@media (max-width:860px) {
.anime-ref-shell[data-anime-phase7-root="true"] .anime-ref-hero { aspect-ratio:2.38 / 1; }
}
@media (max-width:390px) {
.anime-ref-shell[data-anime-phase7-root="true"] .anime-ref-hero { aspect-ratio:2.30 / 1; }
}
@media (min-width:861px) {
.anime-ref-shell[data-anime-phase7-root="true"] .anime-ref-hero { aspect-ratio:5.00 / 1; }
}
/* ======================================================
Phase 8 — strict Anime format + schedule route
====================================================== */
.anime-schedule-page {
min-height: 100dvh;
padding-top: calc(18px + var(--safe-top, env(safe-area-inset-top, 0px)));
}
.anime-schedule-page-head {
min-height: 78px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 8px 0 18px;
border-bottom: 1px solid var(--oscar-border);
}
.anime-schedule-page-head > div { min-width: 0; }
.anime-schedule-page-head small { color: var(--anime-ref-purple-2); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.anime-schedule-page-head h1 { margin: 4px 0 3px; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; }
.anime-schedule-page-head p { margin: 0; max-width: 720px; color: var(--anime-ref-muted); font-size: 13px; }
.anime-schedule-page-head > button {
width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
display: grid; place-items: center; border: 1px solid var(--anime-ref-line-soft);
background: #000000; color: var(--oscar-text);
}
.anime-schedule-page-days { margin: 20px 0 18px; }
.anime-schedule-page-list { display: grid; gap: 10px; }
.anime-schedule-page-card {
overflow: hidden; border: 1px solid var(--oscar-border); border-radius: 14px;
background: linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.98));
}
.anime-schedule-page-card.estimated { border-color: var(--accent); }
.anime-schedule-page-open {
width: 100%; min-height: 96px; display: grid; grid-template-columns: 150px minmax(0,1fr) 70px;
align-items: center; gap: 14px; padding: 9px; text-align: right; border: 0; background: transparent; color: inherit;
}
.anime-schedule-page-open > .safe-image,
.anime-schedule-page-open > picture,
.anime-schedule-page-open > img,
.anime-schedule-page-open > :first-child {
width: 150px; height: 78px; border-radius: 10px; overflow: hidden; object-fit: cover;
}
.anime-schedule-page-copy { min-width: 0; display: grid; gap: 4px; }
.anime-schedule-page-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.anime-schedule-page-copy small { color: var(--anime-ref-muted); font-size: 12px; }
.anime-schedule-page-copy em { width: fit-content; padding: 3px 7px; border-radius: 999px; color: var(--accent); background: rgba(0,0,0,.12); font-size: 10px; font-style: normal; }
.anime-schedule-page-open time { direction: ltr; justify-self: end; color: var(--oscar-text); font-weight: 800; font-size: 13px; }
.anime-schedule-page-loading { display: grid; gap: 10px; }
.anime-schedule-page-loading i { display: block; height: 96px; border-radius: 14px; }
@media (max-width: 760px) {
.anime-schedule-page { padding-inline: 14px; }
.anime-schedule-page-head { min-height: 68px; padding-bottom: 13px; }
.anime-schedule-page-head h1 { font-size: 25px; }
.anime-schedule-page-head p { display: none; }
.anime-schedule-page-days { margin: 14px -2px 14px; display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)); overflow: visible !important; gap: 4px; }
.anime-schedule-page-days button { min-width: 0 !important; padding-inline: 2px !important; font-size: 10px !important; }
.anime-schedule-page-open { min-height: 82px; grid-template-columns: 92px minmax(0,1fr) 54px; gap: 10px; padding: 7px; }
.anime-schedule-page-open > .safe-image,
.anime-schedule-page-open > picture,
.anime-schedule-page-open > img,
.anime-schedule-page-open > :first-child { width: 92px; height: 68px; border-radius: 9px; }
.anime-schedule-page-copy b { font-size: 13px; }
.anime-schedule-page-copy small { font-size: 10px; }
.anime-schedule-page-open time { font-size: 11px; }
}
/* ===== source: anime-wrestling-identity-lock.css ===== */
/*
Space Gate Nova+ — Anime / Wrestling visual identity lock
--------------------------------------------------------
IMPORTANT: this layer changes presentation only. It intentionally does not
alter the existing Anime/Wrestling DOM structure, section order, rails,
grids, or navigation flows.
Visual rules:
- all solid surfaces are #000000;
- image scrims may use black alpha only;
- text / borders / focus states inherit application tokens;
- no Anime/Wrestling-specific color palette is introduced here.
*/
.sg-anime-pro-home,
.sg-anime-catalog,
.sg-anime-schedule,
.sg-wrestling-home,
.sg-wrestling-catalog,
.sg-wrestling-schedule {
background: #000000 !important;
color: var(--oscar-text) !important;
font-family: inherit !important;
}
/* Shared typography ------------------------------------------------------ */
.sg-anime-pro-home *,
.sg-anime-catalog *,
.sg-anime-schedule *,
.sg-wrestling-home *,
.sg-wrestling-catalog *,
.sg-wrestling-schedule * {
font-family: inherit !important;
}
.sg-anime-pro-home h1,
.sg-anime-pro-home h2,
.sg-anime-catalog h1,
.sg-anime-catalog h2,
.sg-anime-schedule h1,
.sg-anime-schedule h2,
.sg-wrestling-home h1,
.sg-wrestling-home h2,
.sg-wrestling-catalog h1,
.sg-wrestling-catalog h2,
.sg-wrestling-schedule h1,
.sg-wrestling-schedule h2 {
color: var(--oscar-text) !important;
font-family: inherit !important;
letter-spacing: 0 !important;
}
.sg-anime-pro-home p,
.sg-anime-pro-home small,
.sg-anime-catalog p,
.sg-anime-catalog small,
.sg-anime-schedule p,
.sg-anime-schedule small,
.sg-wrestling-home p,
.sg-wrestling-home small,
.sg-wrestling-catalog p,
.sg-wrestling-catalog small,
.sg-wrestling-schedule p,
.sg-wrestling-schedule small {
font-family: inherit !important;
}
/* Header / navigation: preserve original layout, normalize surfaces. ----- */
.sg-anime-pro-shell-head,
.sg-anime-pro-topbar,
.sg-wrestling-shell-header,
.sg-anime-pro-nav,
.sg-wrestling-section-nav {
background: #000000 !important;
color: var(--oscar-text) !important;
}
.sg-anime-pro-brand,
.sg-anime-pro-actions button,
.sg-wrestling-shell-header .brand,
.sg-wrestling-shell-header .header-actions > button,
.sg-anime-pro-nav button,
.sg-wrestling-section-nav button {
background: #000000 !important;
color: var(--oscar-text) !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
font-family: inherit !important;
}
.sg-anime-pro-shell-head .logo-mark,
.sg-wrestling-shell-header .brand-mark {
background: #000000 !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-anime-pro-shell-head .logo-mark { color: var(--accent) !important; }
.sg-wrestling-shell-header .brand-mark i {
background: #000000 !important;
border-top: 2px solid var(--accent) !important;
box-shadow: none !important;
}
.sg-wrestling-shell-header .brand-mark i:nth-child(3) {
width: 5px !important;
height: 5px !important;
border: 1px solid var(--accent) !important;
border-radius: 50% !important;
}
.sg-wrestling-shell-header .notify i {
background: #000000 !important;
border: 1px solid var(--accent) !important;
box-shadow: none !important;
}
.sg-anime-pro-shell-head .logo-copy small,
.sg-wrestling-shell-header .brand-copy small,
.sg-wrestling-shell-header .header-actions .search,
.sg-anime-pro-nav button,
.sg-wrestling-section-nav button {
color: var(--oscar-muted) !important;
}
.sg-anime-pro-nav button.active,
.sg-wrestling-section-nav button.active {
background: #000000 !important;
color: var(--oscar-text) !important;
border-color: var(--accent) !important;
box-shadow: none !important;
}
/* Hero / large actions --------------------------------------------------- */
.sg-anime-pro-hero,
.sg-wrestling-home .wrestling-hero {
background: #000000 !important;
}
.sg-anime-pro-hero .hero-shade,
.sg-wrestling-home .hero-shade {
background: linear-gradient(180deg,
rgba(0,0,0,.06) 0%,
rgba(0,0,0,.18) 38%,
rgba(0,0,0,.72) 72%,
rgba(0,0,0,.98) 100%) !important;
}
.sg-anime-pro-hero .eyebrow,
.sg-wrestling-home .eyebrow,
.sg-anime-pro-hero .hero-meta span,
.sg-wrestling-home .hero-meta span {
background: rgba(0,0,0,.82) !important;
color: var(--oscar-text-2) !important;
border: 1px solid var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-anime-pro-hero .hero-actions button,
.sg-wrestling-home .hero-actions button {
min-height: 44px !important;
padding-inline: 18px !important;
border-radius: 999px !important;
background: #000000 !important;
color: var(--oscar-text) !important;
box-shadow: none !important;
font-family: inherit !important;
font-weight: 900 !important;
}
.sg-anime-pro-hero .hero-actions .primary,
.sg-wrestling-home .hero-actions .primary {
border: 1px solid var(--accent) !important;
}
.sg-anime-pro-hero .hero-actions .secondary,
.sg-wrestling-home .hero-actions .secondary {
border: 1px solid var(--oscar-border) !important;
}
.sg-anime-pro-hero .hero-actions .secondary.active,
.sg-wrestling-home .hero-actions .secondary.active {
border-color: var(--accent) !important;
color: var(--oscar-text) !important;
}
.sg-anime-pro-hero .hero-dots button,
.sg-wrestling-home .hero-dots button {
background: #000000 !important;
border: 1px solid var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-anime-pro-hero .hero-dots button.active,
.sg-wrestling-home .hero-dots button.active {
background: #000000 !important;
border-color: var(--accent) !important;
}
/* General old-layout surfaces / controls -------------------------------- */
.sg-anime-pro-gateway > button,
.sg-anime-pro-offline,
.sg-anime-pro-error,
.sg-anime-pro-section,
.sg-anime-pro-section .studio-rail > button,
.sg-anime-pro-section .continue-grid > button,
.sg-anime-pro-home .schedule-item,
.sg-anime-pro-home .schedule-days button,
.sg-wrestling-home .offline,
.sg-wrestling-home .quick-gates,
.sg-wrestling-home .quick-gates button,
.sg-wrestling-home .home-section,
.sg-wrestling-home .schedule-item,
.sg-wrestling-home .continue-rail > button,
.sg-wrestling-home .year-strip button,
.sg-wrestling-home .home-error,
.wrestling-brand-tile {
background: #000000 !important;
background-image: none !important;
color: var(--oscar-text) !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-anime-pro-gateway > button:focus-visible,
.sg-anime-pro-gateway > button:hover,
.sg-wrestling-home .quick-gates button:focus-visible,
.sg-wrestling-home .quick-gates button:hover,
.wrestling-brand-tile:focus-visible,
.wrestling-brand-tile:hover {
background: #000000 !important;
border-color: var(--accent) !important;
box-shadow: none !important;
}
.sg-anime-pro-gateway .gate-icon,
.sg-anime-pro-section > header button,
.sg-wrestling-home .quick-gates svg,
.sg-wrestling-home .home-section > header > button,
.sg-wrestling-home .home-section > header small,
.wrestling-brand-tile em {
color: var(--accent) !important;
}
.sg-anime-pro-gateway small,
.sg-anime-pro-section .copy small,
.sg-wrestling-home .quick-gates small,
.sg-wrestling-home .schedule-item .copy small,
.wrestling-brand-tile .copy small {
color: var(--oscar-muted) !important;
}
/* Anime native content cards -------------------------------------------- */
.sg-anime-pro-card {
background: transparent !important;
color: var(--oscar-text) !important;
}
.sg-anime-pro-card .art {
background: #000000 !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-anime-pro-card .shade {
background: linear-gradient(180deg,
rgba(0,0,0,.02) 38%,
rgba(0,0,0,.34) 66%,
rgba(0,0,0,.94) 100%) !important;
}
.sg-anime-pro-card .score,
.sg-anime-pro-card .format,
.sg-anime-pro-card .new,
.sg-anime-pro-card .play {
background: rgba(0,0,0,.86) !important;
color: var(--oscar-text) !important;
border: 1px solid var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-anime-pro-card .score,
.sg-anime-pro-card .format,
.sg-anime-pro-card .new {
font-weight: 900 !important;
}
.sg-anime-pro-card .format,
.sg-anime-pro-card .new {
border-color: var(--accent) !important;
}
.sg-anime-pro-card .copy b { color: var(--oscar-text) !important; }
.sg-anime-pro-card .copy small { color: var(--oscar-muted) !important; }
.sg-anime-pro-card:focus-visible .art,
.sg-anime-pro-card:hover .art { border-color: var(--accent) !important; }
/* Wrestling native cards: date is a first-class piece of metadata. ------- */
.sg-wrestling-card {
background: transparent !important;
color: var(--oscar-text) !important;
}
.sg-wrestling-card .artwork {
background: #000000 !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-wrestling-card .shade {
background: linear-gradient(180deg,
rgba(0,0,0,.03) 30%,
rgba(0,0,0,.30) 60%,
rgba(0,0,0,.96) 100%) !important;
}
.sg-wrestling-card .date-badge,
.sg-wrestling-card .tournament-badge,
.sg-wrestling-card .quality,
.sg-wrestling-card .play {
background: rgba(0,0,0,.88) !important;
color: var(--oscar-text) !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.sg-wrestling-card .date-badge {
min-height: 26px !important;
padding-inline: 8px !important;
border-color: var(--accent) !important;
}
.sg-wrestling-card .date-badge b {
color: var(--oscar-text) !important;
font-size: .53rem !important;
font-weight: 950 !important;
font-variant-numeric: tabular-nums;
}
.sg-wrestling-card .date-badge svg,
.sg-wrestling-card .card-facts .date,
.sg-wrestling-card .card-facts .tournament {
color: var(--accent) !important;
}
.sg-wrestling-card .tournament-badge {
border-color: var(--oscar-border) !important;
}
.sg-wrestling-card .copy > b { color: var(--oscar-text) !important; }
.sg-wrestling-card .secondary-meta { color: var(--oscar-muted) !important; }
.sg-wrestling-card:hover .artwork,
.sg-wrestling-card:focus-visible .artwork { border-color: var(--accent) !important; }
/* Wrestling brand logos ------------------------------------------------- */
.wrestling-brand-tile .logo-wrap,
.wrestling-brand-tile .logo-wrap i {
background: transparent !important;
}
.wrestling-brand-tile .logo-wrap i {
border-bottom: 1px solid var(--oscar-border) !important;
}
/* Wrestling home schedule preview --------------------------------------- */
.sg-wrestling-home .schedule-strip .schedule-item {
background: #000000 !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-wrestling-home .schedule-strip .schedule-item:hover,
.sg-wrestling-home .schedule-strip .schedule-item:focus-visible {
border-color: var(--accent) !important;
}
.sg-wrestling-home .schedule-strip .schedule-item .date {
border-inline-end: 1px solid var(--oscar-border);
}
.sg-wrestling-home .schedule-strip .schedule-item .date b {
color: var(--oscar-text) !important;
font-size: .69rem !important;
font-weight: 950 !important;
font-variant-numeric: tabular-nums;
}
.sg-wrestling-home .schedule-strip .schedule-item .date small {
color: var(--accent) !important;
font-weight: 900 !important;
}
/* Wrestling catalogue chronology cards --------------------------------- */
.sg-wrestling-catalog .date-node {
background: #000000 !important;
background-image: none !important;
border-color: var(--oscar-border) !important;
color: var(--oscar-text) !important;
box-shadow: none !important;
}
.sg-wrestling-catalog .date-node:hover,
.sg-wrestling-catalog .date-node:focus-visible {
border-color: var(--accent) !important;
}
.sg-wrestling-catalog .date-node b {
color: var(--oscar-text) !important;
font-size: .61rem !important;
font-weight: 950 !important;
font-variant-numeric: tabular-nums;
}
.sg-wrestling-catalog .date-node small,
.sg-wrestling-catalog .date-timeline > header button {
color: var(--accent) !important;
font-weight: 900 !important;
}
.sg-wrestling-catalog .date-node span {
color: var(--oscar-text-2) !important;
}
.sg-wrestling-catalog .catalog-progress,
.sg-wrestling-catalog .catalog-progress i {
background: #000000 !important;
background-image: none !important;
}
.sg-wrestling-catalog .catalog-progress i {
border-top: 2px solid var(--accent) !important;
}
/* Wrestling full schedule ------------------------------------------------ */
.sg-wrestling-schedule .schedule-intro > span,
.sg-wrestling-schedule .date-table > header button {
color: var(--accent) !important;
}
.sg-wrestling-schedule .schedule-intro p,
.sg-wrestling-schedule .offline,
.sg-wrestling-schedule .timeline-row .copy small,
.sg-wrestling-schedule .table-head,
.sg-wrestling-schedule .schedule-empty p {
color: var(--oscar-muted) !important;
}
.sg-wrestling-schedule .offline,
.sg-wrestling-schedule .day-strip button,
.sg-wrestling-schedule .timeline-row,
.sg-wrestling-schedule .table-row,
.sg-wrestling-schedule .schedule-empty button,
.sg-wrestling-schedule .schedule-skeleton i {
background: #000000 !important;
background-image: none !important;
color: var(--oscar-text) !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-wrestling-schedule .day-strip button.active {
background: #000000 !important;
color: var(--oscar-text) !important;
border-color: var(--accent) !important;
}
.sg-wrestling-schedule .day-strip button.active small,
.sg-wrestling-schedule .timeline-row .date small {
color: var(--accent) !important;
}
.sg-wrestling-schedule .timeline-row {
border-radius: 12px !important;
}
.sg-wrestling-schedule .timeline-row:hover,
.sg-wrestling-schedule .timeline-row:focus-visible {
border-color: var(--accent) !important;
}
.sg-wrestling-schedule .timeline-row .date {
border-inline-end: 1px solid var(--oscar-border);
}
.sg-wrestling-schedule .timeline-row .date b {
color: var(--oscar-text) !important;
font-size: .66rem !important;
font-weight: 950 !important;
font-variant-numeric: tabular-nums;
}
.sg-wrestling-schedule .timeline-row .art {
background: #000000 !important;
}
.sg-wrestling-schedule .timeline-row .line {
background: transparent !important;
border-inline-start: 1px solid var(--accent) !important;
opacity: .55;
}
.sg-wrestling-schedule .date-table {
background: #000000 !important;
}
.sg-wrestling-schedule .table-row {
min-height: 58px !important;
margin-bottom: 7px !important;
border: 1px solid var(--oscar-border) !important;
border-radius: 10px !important;
}
.sg-wrestling-schedule .table-row:hover,
.sg-wrestling-schedule .table-row:focus-visible {
border-color: var(--accent) !important;
}
.sg-wrestling-schedule .table-row span:first-child {
color: var(--oscar-text) !important;
font-weight: 950 !important;
font-variant-numeric: tabular-nums;
}
.sg-wrestling-schedule .table-row span:nth-child(2),
.sg-wrestling-schedule .table-row span:nth-child(3) {
color: var(--oscar-muted) !important;
}
.sg-wrestling-schedule .schedule-skeleton i {
border: 1px solid var(--oscar-border) !important;
animation: novaSchedulePulse 1.2s ease-in-out infinite !important;
}
/* Anime home schedule preview ------------------------------------------- */
.sg-anime-pro-home .schedule-days button,
.sg-anime-pro-home .schedule-item {
background: #000000 !important;
background-image: none !important;
border-color: var(--oscar-border) !important;
color: var(--oscar-text) !important;
box-shadow: none !important;
}
.sg-anime-pro-home .schedule-days button.active,
.sg-anime-pro-home .schedule-item:hover,
.sg-anime-pro-home .schedule-item:focus-visible {
background: #000000 !important;
border-color: var(--accent) !important;
}
.sg-anime-pro-home .schedule-days button.active,
.sg-anime-pro-home .schedule-item time {
color: var(--accent) !important;
}
/* Anime full weekly schedule -------------------------------------------- */
.sg-anime-schedule .schedule-intro span,
.sg-anime-schedule .schedule-time b {
color: var(--accent) !important;
}
.sg-anime-schedule .schedule-intro p,
.sg-anime-schedule .schedule-panel-head small,
.sg-anime-schedule .schedule-panel-head > span,
.sg-anime-schedule .schedule-copy small,
.sg-anime-schedule .schedule-time small,
.sg-anime-schedule .day-empty,
.sg-anime-schedule .schedule-empty p,
.sg-anime-schedule .schedule-offline,
.sg-anime-schedule .schedule-trust-note {
color: var(--oscar-muted) !important;
}
.sg-anime-schedule .back-home,
.sg-anime-schedule .schedule-days button,
.sg-anime-schedule .schedule-panel,
.sg-anime-schedule .schedule-item,
.sg-anime-schedule .schedule-copy em,
.sg-anime-schedule .schedule-empty button,
.sg-anime-schedule .schedule-skeleton i,
.sg-anime-schedule .schedule-offline {
background: #000000 !important;
background-image: none !important;
color: var(--oscar-text) !important;
border-color: var(--oscar-border) !important;
box-shadow: none !important;
}
.sg-anime-schedule .back-home,
.sg-anime-schedule .schedule-days button.active,
.sg-anime-schedule .schedule-copy em,
.sg-anime-schedule .schedule-empty button {
border-color: var(--accent) !important;
}
.sg-anime-schedule .schedule-days button.active,
.sg-anime-schedule .schedule-days button.active small,
.sg-anime-schedule .schedule-days button.active em,
.sg-anime-schedule .schedule-copy em {
color: var(--accent) !important;
}
.sg-anime-schedule .schedule-days button em {
background: #000000 !important;
color: var(--oscar-muted) !important;
border: 1px solid var(--oscar-border);
}
.sg-anime-schedule .schedule-item {
border-radius: 12px !important;
}
.sg-anime-schedule .schedule-item.confirmed {
border-inline-start-color: var(--accent) !important;
}
.sg-anime-schedule .schedule-item.estimated {
border-inline-start-color: var(--oscar-border) !important;
}
.sg-anime-schedule .schedule-item:hover,
.sg-anime-schedule .schedule-item:focus-visible {
border-color: var(--accent) !important;
}
.sg-anime-schedule .schedule-art {
background: #000000 !important;
}
.sg-anime-schedule .schedule-copy b {
color: var(--oscar-text) !important;
font-weight: 900 !important;
}
.sg-anime-schedule .schedule-time {
font-variant-numeric: tabular-nums;
}
.sg-anime-schedule .schedule-skeleton i {
border: 1px solid var(--oscar-border) !important;
animation: novaSchedulePulse 1.2s ease-in-out infinite !important;
}
/* Catalog surfaces: old Anime/Wrestling layout stays intact. ------------- */
.sg-anime-catalog button,
.sg-anime-catalog select,
.sg-anime-catalog input,
.sg-wrestling-catalog button,
.sg-wrestling-catalog select,
.sg-wrestling-catalog input,
.catalog-world-anime .nova-catalog-fixed-header,
.catalog-world-wrestling .nova-catalog-fixed-header,
.catalog-world-anime .nova-catalog-search,
.catalog-world-wrestling .nova-catalog-search,
.catalog-world-anime .nova-catalog-select-card,
.catalog-world-wrestling .nova-catalog-select-card,
.catalog-world-anime .nova-category-chip,
.catalog-world-wrestling .nova-category-chip,
.catalog-world-anime .nova-media-art,
.catalog-world-wrestling .nova-media-art {
background: #000000 !important;
background-image: none !important;
box-shadow: none !important;
}
.catalog-world-anime .nova-catalog-select-card.active,
.catalog-world-wrestling .nova-catalog-select-card.active,
.catalog-world-anime .nova-category-chip.active,
.catalog-world-wrestling .nova-category-chip.active {
background: #000000 !important;
border-color: var(--accent) !important;
color: var(--oscar-text) !important;
}
.catalog-world-anime .nova-media-play,
.catalog-world-wrestling .nova-media-play,
.catalog-world-anime .nova-media-quality,
.catalog-world-wrestling .nova-media-quality {
background: #000000 !important;
background-image: none !important;
border-color: var(--oscar-border) !important;
color: var(--oscar-text) !important;
}
/* Skeletons / progress: black surfaces only. ----------------------------- */
.sg-anime-pro-home-skeleton i,
.sg-wrestling-home .home-skeleton i,
.sg-wrestling-home .home-skeleton > div i {
background: #000000 !important;
background-image: none !important;
border: 1px solid var(--oscar-border) !important;
animation: novaSchedulePulse 1.2s ease-in-out infinite !important;
}
.sg-wrestling-home .continue-rail em,
.sg-anime-pro-home .continue-progress {
background: #000000 !important;
}
.sg-wrestling-home .continue-rail u,
.sg-anime-pro-home .continue-progress i {
background: #000000 !important;
border-top: 2px solid var(--accent) !important;
}
@keyframes novaSchedulePulse {
0%, 100% { opacity: .46; }
50% { opacity: 1; }
}
@media (max-width: 720px) {
.sg-wrestling-card .date-badge {
min-height: 23px !important;
padding-inline: 7px !important;
}
.sg-wrestling-card .date-badge b { font-size: .47rem !important; }
.sg-wrestling-schedule .table-row { margin-bottom: 6px !important; }
}
@media (prefers-reduced-motion: reduce) {
.sg-anime-schedule .schedule-skeleton i,
.sg-wrestling-schedule .schedule-skeleton i,
.sg-anime-pro-home-skeleton i,
.sg-wrestling-home .home-skeleton i,
.sg-wrestling-home .home-skeleton > div i {
animation: none !important;
}
}
/* Final visual-only schedule/card polish — original grids and DOM stay untouched. */
.sg-wrestling-schedule .timeline-row,
.sg-wrestling-schedule .table-row,
.sg-anime-schedule .schedule-item,
.sg-anime-schedule .schedule-panel,
.sg-wrestling-home .schedule-strip .schedule-item,
.sg-wrestling-catalog .date-node {
border-radius: var(--nova-radius-sm) !important;
}
.sg-wrestling-schedule .day-strip button,
.sg-anime-schedule .schedule-days button,
.sg-anime-schedule .back-home,
.sg-anime-schedule .schedule-empty button,
.sg-wrestling-schedule .schedule-empty button {
background: #000000 !important;
background-image: none !important;
box-shadow: none !important;
}
.sg-wrestling-card .date-badge,
.sg-wrestling-card .tournament-badge,
.sg-wrestling-card .quality,
.sg-wrestling-card .play {
background: #000000 !important;
}
.sg-wrestling-schedule .timeline-row,
.sg-wrestling-schedule .table-row,
.sg-anime-schedule .schedule-item {
transition: border-color 140ms ease, opacity 140ms ease, transform 140ms ease !important;
}
.sg-wrestling-schedule .timeline-row:active,
.sg-wrestling-schedule .table-row:active,
.sg-anime-schedule .schedule-item:active {
transform: scale(.985) !important;
}
.sg-wrestling-schedule .timeline-row .copy b,
.sg-wrestling-schedule .table-row b,
.sg-anime-schedule .schedule-copy b {
line-height: 1.35 !important;
}
/* Dates remain visually stable and readable across Arabic/Latin numerals. */
.sg-wrestling-card .date-badge b,
.sg-wrestling-card .card-facts .date,
.sg-wrestling-home .schedule-strip .schedule-item .date b,
.sg-wrestling-catalog .date-node b,
.sg-wrestling-schedule .timeline-row .date b,
.sg-wrestling-schedule .table-row span:first-child,
.sg-anime-schedule .schedule-time {
font-variant-numeric: tabular-nums !important;
}
/* ===== source: anime-wrestling-precision-reference.css ===== */
/* Space Gate Nova+ — Anime/Wrestling exact reference inheritance
All geometry below is copied from existing production controls:
- NativeCatalogHeader.razor.css
- nova-catalog-professional-header.css / nova-final-polish-v2.css
- Details.razor.css episode-season-filter
- AnimeHomeExperience.razor.css studio rail
HomeHeroSlider keeps its own isolated production CSS unchanged. */
/* Canvas rule requested for Anime/Wrestling: no solid surface other than black. */
.sg-anime-pro-home, .sg-anime-catalog, .sg-anime-schedule,
.sg-wrestling-home, .sg-wrestling-catalog, .sg-wrestling-schedule {
background:#000000 !important;
background-color:#000000 !important;
}
/* Exact NativeCatalogHeader clearance: no extra invented offset. */
.sg-anime-pro-home, .sg-anime-catalog, .sg-anime-schedule,
.sg-wrestling-home, .sg-wrestling-catalog, .sg-wrestling-schedule {
padding-top:calc(var(--nova-app-header-h,58px) + var(--safe-top, env(safe-area-inset-top,0px))) !important;
}
/* Keep NativeCatalogHeader untouched by section-level black button locks.
Geometry still comes from the same global header rules used by Movies/Series. */
.sg-anime-pro-home .nova-native-catalog-header .catalog-landing-toolbar-button,
.sg-anime-catalog .nova-native-catalog-header .catalog-landing-toolbar-button,
.sg-anime-schedule .nova-native-catalog-header .catalog-landing-toolbar-button,
.sg-wrestling-home .nova-native-catalog-header .catalog-landing-toolbar-button,
.sg-wrestling-catalog .nova-native-catalog-header .catalog-landing-toolbar-button,
.sg-wrestling-schedule .nova-native-catalog-header .catalog-landing-toolbar-button {
background:transparent !important;
background-image:none !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
}
/* Anime hero is the real HomeHeroSlider. Make only this section full-bleed; its
height, typography and action sizes remain owned by HomeHeroSlider.razor.css. */
.sg-anime-pro-home .target-home-hero-shell {
width:100vw !important;
max-width:none !important;
margin-inline:calc(50% - 50vw) !important;
background:#000000 !important;
}
/* Search field: same component/class and computed mobile geometry as All Movies.
It is permanently visible in these dedicated catalogs; the interior remains black.
The active outline is the existing NOVA gradient from nova-final-polish-v2.css. */
.sg-anime-catalog .sg-reference-search,
.sg-wrestling-catalog .sg-reference-search {
display:flex !important;
opacity:1 !important;
transform:none !important;
pointer-events:auto !important;
border:1px solid transparent !important;
background:
linear-gradient(#000000,#000000) padding-box,
var(--nova-active-gradient) border-box !important;
box-shadow:0 0 0 1px rgba(155,77,255,.06),0 8px 24px rgba(0,0,0,.22) !important;
}
.sg-anime-catalog .sg-reference-search:focus-within,
.sg-wrestling-catalog .sg-reference-search:focus-within {
border:1px solid transparent !important;
background:
linear-gradient(#000000,#000000) padding-box,
var(--nova-active-gradient) border-box !important;
box-shadow:0 0 0 1px rgba(155,77,255,.06),0 8px 24px rgba(0,0,0,.22) !important;
}
.sg-anime-catalog .sg-reference-search > button,
.sg-wrestling-catalog .sg-reference-search > button { background:#000000 !important; }
/* Filter strip + schedule day navigation: exact Details season selector geometry. */
.sg-anime-catalog .reference-filter-strip,
.sg-wrestling-catalog .reference-filter-strip,
.sg-anime-pro-home .schedule-days,
.sg-anime-schedule .schedule-days,
.sg-wrestling-schedule .day-strip,
.sg-wrestling-home .year-strip {
display:flex !important;
align-items:center !important;
gap:7px !important;
padding:0 0 8px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
scrollbar-width:none !important;
background:transparent !important;
border:0 !important;
}
.sg-anime-catalog .reference-filter-strip::-webkit-scrollbar,
.sg-wrestling-catalog .reference-filter-strip::-webkit-scrollbar,
.sg-anime-pro-home .schedule-days::-webkit-scrollbar,
.sg-anime-schedule .schedule-days::-webkit-scrollbar,
.sg-wrestling-schedule .day-strip::-webkit-scrollbar,
.sg-wrestling-home .year-strip::-webkit-scrollbar { display:none !important; }
.sg-anime-catalog .nova-catalog-select-card,
.sg-wrestling-catalog .nova-catalog-select-card,
.sg-anime-pro-home .schedule-day-control,
.sg-anime-schedule .schedule-day-control,
.sg-wrestling-schedule .schedule-day-control,
.sg-wrestling-home .archive-year-control {
position:relative !important;
flex:0 0 auto !important;
height:var(--nova-catalog-control-h,42px) !important;
min-height:var(--nova-catalog-control-h,42px) !important;
min-width:118px !important;
max-width:178px !important;
margin:0 !important;
padding:0 10px !important;
display:grid !important;
grid-template-columns:18px auto minmax(38px,auto) 14px !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
border:1px solid var(--nova-catalog-line,rgba(132,145,176,.20)) !important;
border-radius:8px !important;
background:#000000 !important;
color:rgba(255,255,255,.72) !important;
box-shadow:none !important;
direction:rtl !important;
box-sizing:border-box !important;
font-family:inherit !important;
}
.sg-anime-catalog .nova-catalog-select-card.active,
.sg-wrestling-catalog .nova-catalog-select-card.active,
.sg-anime-pro-home .schedule-day-control.active,
.sg-anime-schedule .schedule-day-control.active,
.sg-wrestling-schedule .schedule-day-control.active,
.sg-wrestling-home .archive-year-control.active {
color:#fff !important;
border-color:transparent !important;
background:
linear-gradient(#000000,#000000) padding-box,
var(--nova-catalog-active-border) border-box !important;
box-shadow:0 0 0 1px rgba(155,77,255,.08),0 6px 18px rgba(45,111,219,.10) !important;
}
.sg-anime-pro-home .schedule-day-control > span,
.sg-anime-schedule .schedule-day-control > span,
.sg-wrestling-schedule .schedule-day-control > span,
.sg-wrestling-home .archive-year-control > span {
color:rgba(255,255,255,.42) !important;
font-size:.66rem !important;
font-weight:650 !important;
white-space:nowrap !important;
}
.sg-anime-pro-home .schedule-day-control > strong,
.sg-anime-schedule .schedule-day-control > strong,
.sg-wrestling-schedule .schedule-day-control > strong,
.sg-wrestling-home .archive-year-control > strong {
min-width:0 !important;
overflow:hidden !important;
color:rgba(255,255,255,.82) !important;
font-size:.73rem !important;
font-weight:760 !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* Studio rail: keep the original Anime layout geometry from AnimeHomeExperience,
but remove the tile chrome to match the supplied old Anime screenshot. */
.sg-anime-pro-home .studio-rail { gap:10px !important; background:transparent !important; }
.sg-anime-pro-home .studio-rail > button {
flex:0 0 clamp(126px,13vw,176px) !important;
min-width:0 !important;
min-height:70px !important;
padding:7px 10px 6px !important;
display:grid !important;
grid-template-rows:36px auto !important;
place-items:center !important;
gap:4px !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:var(--oscar-text) !important;
}
.sg-anime-pro-home .studio-logo {
width:100% !important;
height:36px !important;
display:grid !important;
place-items:center !important;
overflow:visible !important;
background:transparent !important;
}
.sg-anime-pro-home .studio-logo img,
.sg-anime-pro-home .studio-logo .nova-fast-image {
width:100% !important;
height:100% !important;
object-fit:contain !important;
background:transparent !important;
filter:none !important;
}
.sg-anime-pro-home .studio-rail small {
width:100% !important;
overflow:hidden !important;
color:var(--oscar-muted) !important;
font-size:.58rem !important;
text-align:center !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
}
/* Catalog studio rail uses the same open-logo treatment while retaining its
original catalog width values. */
.sg-anime-catalog .studio-strip { gap:9px !important; background:transparent !important; }
.sg-anime-catalog .studio-tile {
flex:0 0 116px !important;
min-width:0 !important;
padding:8px 8px 7px !important;
display:grid !important;
gap:6px !important;
justify-items:center !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:var(--oscar-muted) !important;
}
.sg-anime-catalog .studio-logo {
width:100% !important;
height:40px !important;
display:grid !important;
place-items:center !important;
overflow:visible !important;
background:transparent !important;
}
.sg-anime-catalog .studio-logo img,
.sg-anime-catalog .studio-logo .nova-fast-image {
width:100% !important;
height:100% !important;
object-fit:contain !important;
background:transparent !important;
filter:none !important;
}
.sg-anime-catalog .studio-tile small {
width:100% !important;
overflow:hidden !important;
text-align:center !important;
white-space:nowrap !important;
text-overflow:ellipsis !important;
font-size:.61rem !important;
}
/* Timeline/list cards: preserve original grids and dimensions; remove table-like
separators and reuse the existing rounded-card treatment already present in
the Wrestling timeline. Dates remain first-class and visible. */
.sg-anime-schedule .schedule-panel,
.sg-anime-schedule .schedule-item,
.sg-anime-pro-home .schedule-item,
.sg-wrestling-schedule .timeline-row,
.sg-wrestling-schedule .table-row,
.sg-wrestling-catalog .date-node {
background:#000000 !important;
background-image:none !important;
border-color:var(--oscar-border) !important;
box-shadow:none !important;
}
.sg-wrestling-schedule .date-table { display:grid !important; gap:7px !important; }
.sg-wrestling-schedule .table-head { display:none !important; }
.sg-wrestling-schedule .table-row {
border:1px solid var(--oscar-border) !important;
border-radius:10px !important;
}
.sg-wrestling-card .date-badge {
background:rgba(0,0,0,.88) !important;
color:var(--oscar-text) !important;
border-color:var(--oscar-border) !important;
}
.sg-wrestling-card .card-facts .date {
color:var(--oscar-text) !important;
font-weight:900 !important;
}
@media(max-width:1000px) {
/* This is the exact mobile selector geometry in Details + final catalog polish. */
.sg-anime-catalog .nova-catalog-select-card,
.sg-wrestling-catalog .nova-catalog-select-card,
.sg-anime-pro-home .schedule-day-control,
.sg-anime-schedule .schedule-day-control,
.sg-wrestling-schedule .schedule-day-control,
.sg-wrestling-home .archive-year-control {
height:34px !important;
min-height:34px !important;
min-width:84px !important;
max-width:126px !important;
padding-inline:7px !important;
grid-template-columns:15px minmax(38px,auto) 13px !important;
gap:4px !important;
border-radius:7px !important;
}
.sg-anime-catalog .nova-catalog-select-card > span,
.sg-wrestling-catalog .nova-catalog-select-card > span,
.sg-anime-pro-home .schedule-day-control > span,
.sg-anime-schedule .schedule-day-control > span,
.sg-wrestling-schedule .schedule-day-control > span,
.sg-wrestling-home .archive-year-control > span { display:none !important; }
.sg-anime-catalog .nova-catalog-select-card > strong,
.sg-wrestling-catalog .nova-catalog-select-card > strong,
.sg-anime-pro-home .schedule-day-control > strong,
.sg-anime-schedule .schedule-day-control > strong,
.sg-wrestling-schedule .schedule-day-control > strong,
.sg-wrestling-home .archive-year-control > strong { font-size:.68rem !important; }
}
@media(max-width:720px) {
/* Original phone studio geometry: ~5.5 logos visible, as in the supplied reference. */
.sg-anime-pro-home .studio-rail { gap:6px !important; }
.sg-anime-pro-home .studio-rail > button {
flex-basis:calc((100vw - 57px) / 5.5) !important;
min-height:58px !important;
padding:5px 4px 4px !important;
grid-template-rows:31px auto !important;
border-radius:0 !important;
}
.sg-anime-pro-home .studio-logo { height:31px !important; }
.sg-anime-pro-home .studio-rail small { font-size:.47rem !important; }
.sg-anime-catalog .studio-tile { flex-basis:102px !important; }
}
@media(max-width:560px) {
.sg-anime-catalog .studio-strip { gap:7px !important; }
.sg-anime-catalog .studio-tile {
flex-basis:89px !important;
padding:6px !important;
border-radius:0 !important;
}
.sg-anime-catalog .studio-logo { height:33px !important; }
}
@media(max-width:390px) {
.sg-anime-pro-home .studio-rail > button {
flex-basis:calc((100vw - 48px) / 4.7) !important;
}
}
/* ===== source: nova-visual-source-of-truth.css ===== */
/*
Space Gate Nova+ — Visual Source of Truth (2026-08-17)
-------------------------------------------------------
Reference: supplied production screenshots.
Brand gradient is intentionally restricted to:
1) primary CTAs, 2) secondary-action outline,
3) approved active navigation/filter states, 4) search-field outline.
Media cards, studio/show tiles, schedule cards and content surfaces MUST stay
neutral/dark and never receive a gradient border.
*/
:root {
--nova-ink: #000000;
--nova-surface: #07080d;
--nova-surface-raised: #0b0d14;
--nova-glass: rgba(10, 12, 19, .78);
--nova-glass-strong: rgba(12, 14, 22, .92);
--nova-text: #f7f8fc;
--nova-text-soft: rgba(247, 248, 252, .68);
--nova-text-muted: rgba(247, 248, 252, .46);
--nova-line: rgba(255, 255, 255, .09);
--nova-line-strong: rgba(255, 255, 255, .16);
--nova-pink: #f04ad8;
--nova-violet: #9b4dff;
--nova-cyan: #14d7ff;
--nova-brand-gradient: linear-gradient(100deg, var(--nova-pink) 0%, var(--nova-violet) 50%, var(--nova-cyan) 100%);
--nova-radius-control: 12px;
--nova-radius-card: 14px;
--nova-radius-pill: 999px;
--nova-shadow-soft: 0 10px 26px rgba(0, 0, 0, .34);
--nova-shadow-card: 0 12px 28px rgba(0, 0, 0, .32);
--nova-shadow-cta: 0 10px 28px rgba(155, 77, 255, .22), 0 0 20px rgba(20, 215, 255, .08);
/* Backwards-compatible shared tokens: one palette, one direction. */
--sgn-background: var(--nova-ink);
--sgn-background-alt: var(--nova-surface);
--sgn-white: var(--nova-text);
--sgn-cyan: var(--nova-cyan);
--sgn-violet: var(--nova-violet);
--sgn-magenta: var(--nova-pink);
--sgn-gradient: var(--nova-brand-gradient);
--sgn-neon-button-gradient: var(--nova-brand-gradient);
--sgn-border-soft: var(--nova-line);
--sgn-border-accent: rgba(155, 77, 255, .56);
--sgn-border-cyan: rgba(20, 215, 255, .34);
--sgn-text-soft: var(--nova-text-soft);
--sgn-text-muted: var(--nova-text-muted);
--sgn-glass: linear-gradient(145deg, rgba(13, 15, 23, .86), rgba(5, 6, 10, .92));
--sgn-glass-strong: linear-gradient(145deg, rgba(16, 18, 27, .95), rgba(6, 7, 11, .97));
--sgn-dark-gradient: linear-gradient(180deg, #05060a 0%, #000 66%, #020205 100%);
--sgn-card-gradient: linear-gradient(150deg, rgba(13, 15, 23, .94), rgba(5, 6, 10, .98));
--sgn-shadow-panel: var(--nova-shadow-soft);
--sgn-shadow-card: var(--nova-shadow-card);
--sgn-shadow-neon: var(--nova-shadow-cta);
}
/* ---------------------------------------------------------------------
1. PRIMARY / SECONDARY BUTTON SYSTEM
------------------------------------------------------------------ */
.sg-anime-pro-home .hero-actions .primary,
.sg-wrestling-home .hero-actions .primary,
.sg-anime-pro-hero .hero-actions .primary,
.nova-btn-primary {
min-height: 52px !important;
padding-inline: 22px !important;
border: 0 !important;
border-radius: var(--nova-radius-pill) !important;
background: var(--nova-brand-gradient) !important;
background-image: var(--nova-brand-gradient) !important;
color: #fff !important;
box-shadow: var(--nova-shadow-cta) !important;
font-weight: 900 !important;
}
.sg-anime-pro-home .hero-actions .secondary,
.sg-wrestling-home .hero-actions .secondary,
.sg-anime-pro-hero .hero-actions .secondary,
.nova-btn-secondary {
position: relative !important;
isolation: isolate;
min-height: 52px !important;
padding-inline: 22px !important;
border: 0 !important;
border-radius: var(--nova-radius-pill) !important;
background: rgba(0, 0, 0, .82) !important;
background-image: none !important;
color: var(--nova-text) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, .34) !important;
font-weight: 900 !important;
}
.sg-anime-pro-home .hero-actions .secondary::before,
.sg-wrestling-home .hero-actions .secondary::before,
.sg-anime-pro-hero .hero-actions .secondary::before,
.nova-btn-secondary::before {
content: "";
position: absolute;
z-index: 0;
inset: 0;
padding: 1.35px;
border-radius: inherit;
background: var(--nova-brand-gradient);
pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.sg-anime-pro-home .hero-actions .secondary.active,
.sg-wrestling-home .hero-actions .secondary.active,
.sg-anime-pro-hero .hero-actions .secondary.active {
color: #fff !important;
background: rgba(6, 7, 11, .90) !important;
}
/* HomeHeroSlider is shared by Anime and the main home; these are the exact
production action classes visible in the supplied reference screenshots. */
.target-home-hero-shell .target-watch-button {
border: 0 !important;
border-radius: var(--nova-radius-pill) !important;
background: var(--nova-brand-gradient) !important;
background-image: var(--nova-brand-gradient) !important;
color: #fff !important;
box-shadow: var(--nova-shadow-cta) !important;
}
.target-home-hero-shell .target-save-button,
.target-home-hero-shell .target-save-button.saved,
.target-home-hero-shell .target-save-button:hover,
.target-home-hero-shell .target-save-button:focus,
.target-home-hero-shell .target-save-button:active {
position: relative !important;
isolation: isolate !important;
border: 0 !important;
border-radius: var(--nova-radius-pill) !important;
background: rgba(0,0,0,.76) !important;
background-image: none !important;
color: #fff !important;
box-shadow: 0 10px 24px rgba(0,0,0,.34) !important;
}
.target-home-hero-shell .target-save-button::before,
.target-home-hero-shell .target-save-button.saved::before,
.target-home-hero-shell .target-save-button:hover::before,
.target-home-hero-shell .target-save-button:focus::before,
.target-home-hero-shell .target-save-button:active::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
padding: 1.5px !important;
border: 0 !important;
border-radius: inherit !important;
background: var(--nova-brand-gradient) !important;
pointer-events: none !important;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
-webkit-mask-composite: xor !important;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
mask-composite: exclude !important;
}
/* ---------------------------------------------------------------------
2. TABS — active state is underline only
------------------------------------------------------------------ */
.sg-anime-pro-nav,
.sg-wrestling-section-nav {
position: relative !important;
display: flex !important;
align-items: stretch !important;
gap: clamp(8px, 2vw, 20px) !important;
width: 100% !important;
max-width: none !important;
min-height: 48px !important;
margin: 0 !important;
padding: 0 max(10px, var(--safe-right, 0px)) 0 max(10px, var(--safe-left, 0px)) !important;
overflow-x: auto !important;
border: 0 !important;
border-bottom: 1px solid var(--nova-line) !important;
border-radius: 0 !important;
background: #000 !important;
box-shadow: none !important;
scrollbar-width: none !important;
}
.sg-anime-pro-nav::-webkit-scrollbar,
.sg-wrestling-section-nav::-webkit-scrollbar { display: none !important; }
.sg-anime-pro-nav button,
.sg-wrestling-section-nav button {
position: relative !important;
flex: 0 0 auto !important;
min-width: max-content !important;
min-height: 47px !important;
height: auto !important;
padding: 0 8px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
color: var(--nova-text-muted) !important;
box-shadow: none !important;
font-weight: 760 !important;
}
.sg-anime-pro-nav button::after,
.sg-wrestling-section-nav button::after {
content: "";
position: absolute;
right: 18%;
bottom: -1px;
left: 18%;
height: 3px;
border-radius: 999px 999px 0 0;
background: transparent;
box-shadow: none;
}
.sg-anime-pro-nav button.active,
.sg-wrestling-section-nav button.active {
border: 0 !important;
background: transparent !important;
color: #fff !important;
box-shadow: none !important;
}
.sg-anime-pro-nav button.active::after,
.sg-wrestling-section-nav button.active::after {
background: var(--nova-brand-gradient) !important;
box-shadow: 0 0 10px rgba(155, 77, 255, .26);
}
/* ---------------------------------------------------------------------
3. SEARCH — base legacy rule; final hotfix below restores approved gradient frame
------------------------------------------------------------------ */
.sg-anime-catalog .sg-reference-search,
.sg-wrestling-catalog .sg-reference-search,
.sg-anime-catalog .nova-catalog-search,
.sg-wrestling-catalog .nova-catalog-search {
border: 1px solid var(--nova-line) !important;
border-radius: var(--nova-radius-control) !important;
background: var(--nova-glass) !important;
background-image: none !important;
color: var(--nova-text) !important;
box-shadow: var(--nova-shadow-soft) !important;
backdrop-filter: blur(16px) saturate(1.04) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.04) !important;
}
.sg-anime-catalog .sg-reference-search:focus-within,
.sg-wrestling-catalog .sg-reference-search:focus-within,
.sg-anime-catalog .nova-catalog-search:focus-within,
.sg-wrestling-catalog .nova-catalog-search:focus-within {
border-color: var(--nova-line-strong) !important;
background: var(--nova-glass-strong) !important;
background-image: none !important;
box-shadow: 0 0 0 1px rgba(155, 77, 255, .10), 0 10px 28px rgba(0, 0, 0, .38) !important;
}
.sg-anime-catalog .sg-reference-search::before,
.sg-anime-catalog .sg-reference-search::after,
.sg-wrestling-catalog .sg-reference-search::before,
.sg-wrestling-catalog .sg-reference-search::after { content: none !important; display: none !important; }
/* ---------------------------------------------------------------------
4. FILTER CHIPS — gradient frame ONLY when active
------------------------------------------------------------------ */
.sg-anime-catalog .nova-catalog-select-card,
.sg-wrestling-catalog .nova-catalog-select-card,
.sg-anime-pro-home .schedule-day-control,
.sg-anime-schedule .schedule-day-control,
.sg-wrestling-schedule .schedule-day-control,
.sg-wrestling-home .archive-year-control {
position: relative !important;
isolation: isolate;
border: 1px solid var(--nova-line) !important;
border-radius: 10px !important;
background: rgba(8, 9, 14, .82) !important;
background-image: none !important;
color: var(--nova-text-soft) !important;
box-shadow: none !important;
}
.sg-anime-catalog .nova-catalog-select-card::before,
.sg-wrestling-catalog .nova-catalog-select-card::before,
.sg-anime-pro-home .schedule-day-control::before,
.sg-anime-schedule .schedule-day-control::before,
.sg-wrestling-schedule .schedule-day-control::before,
.sg-wrestling-home .archive-year-control::before {
content: none;
}
.sg-anime-catalog .nova-catalog-select-card.active,
.sg-wrestling-catalog .nova-catalog-select-card.active,
.sg-anime-pro-home .schedule-day-control.active,
.sg-anime-schedule .schedule-day-control.active,
.sg-wrestling-schedule .schedule-day-control.active,
.sg-wrestling-home .archive-year-control.active {
border-color: transparent !important;
background: rgba(8, 9, 14, .92) !important;
background-image: none !important;
color: #fff !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, .30) !important;
}
.sg-anime-catalog .nova-catalog-select-card.active::before,
.sg-wrestling-catalog .nova-catalog-select-card.active::before,
.sg-anime-pro-home .schedule-day-control.active::before,
.sg-anime-schedule .schedule-day-control.active::before,
.sg-wrestling-schedule .schedule-day-control.active::before,
.sg-wrestling-home .archive-year-control.active::before {
content: "";
position: absolute;
z-index: 0;
inset: 0;
padding: 1px;
border-radius: inherit;
background: var(--nova-brand-gradient);
pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* ---------------------------------------------------------------------
5. MEDIA / CONTENT CARDS — no gradient outlines, no neon frames
------------------------------------------------------------------ */
.sg-anime-pro-card,
.sg-wrestling-card,
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork,
.sg-wrestling-home .quick-gates button,
.sg-wrestling-home .schedule-item,
.sg-wrestling-home .continue-rail > button,
.sg-wrestling-schedule .timeline-row,
.sg-wrestling-schedule .table-row,
.sg-wrestling-catalog .date-node,
.sg-anime-pro-home .schedule-item,
.sg-anime-pro-home .continue-grid > button {
background-image: none !important;
}
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork {
border: 1px solid var(--nova-line) !important;
background: #08090d !important;
box-shadow: var(--nova-shadow-card) !important;
}
.sg-anime-pro-card:hover .art,
.sg-anime-pro-card:focus-visible .art,
.sg-wrestling-card:hover .artwork,
.sg-wrestling-card:focus-visible .artwork {
border-color: rgba(255,255,255,.14) !important;
box-shadow: 0 14px 30px rgba(0,0,0,.40) !important;
}
/* HomeRail media image shells inherit the same clean treatment. */
.sg-anime-pro-home .nova-rail-card .shahid-poster-image,
.sg-anime-pro-home .nova-rail-card .shahid-ranked-poster,
.sg-anime-pro-home .nova-rail-card .shahid-landscape-image,
.sg-wrestling-home .nova-rail-card .shahid-poster-image,
.sg-wrestling-home .nova-rail-card .shahid-ranked-poster,
.sg-wrestling-home .nova-rail-card .shahid-landscape-image {
border: 1px solid var(--nova-line) !important;
background: #08090d !important;
background-image: none !important;
box-shadow: var(--nova-shadow-card) !important;
}
/* Custom functional cards retain their logic and geometry, but their chrome is neutral. */
.sg-wrestling-home .quick-gates button,
.sg-wrestling-home .schedule-item,
.sg-wrestling-home .continue-rail > button,
.sg-wrestling-schedule .timeline-row,
.sg-wrestling-catalog .date-node,
.sg-anime-pro-home .schedule-item,
.sg-anime-pro-home .continue-grid > button {
border-color: var(--nova-line) !important;
background: linear-gradient(150deg, rgba(13,15,23,.92), rgba(4,5,9,.97)) !important;
box-shadow: var(--nova-shadow-card) !important;
}
.sg-wrestling-home .quick-gates button:hover,
.sg-wrestling-home .quick-gates button:focus-visible,
.sg-wrestling-home .schedule-item:hover,
.sg-wrestling-home .schedule-item:focus-visible,
.sg-wrestling-schedule .timeline-row:hover,
.sg-wrestling-schedule .timeline-row:focus-visible,
.sg-wrestling-catalog .date-node:hover,
.sg-wrestling-catalog .date-node:focus-visible {
border-color: var(--nova-line-strong) !important;
box-shadow: 0 14px 30px rgba(0,0,0,.40) !important;
outline: none !important;
}
/* Avoid accidental gradient pseudo-elements on media/search surfaces. */
.sg-anime-pro-card .art::before,
.sg-anime-pro-card .art::after,
.sg-wrestling-card .artwork::before,
.sg-wrestling-card .artwork::after,
.sg-anime-pro-home .nova-rail-card::before,
.sg-wrestling-home .nova-rail-card::before {
background-image: none !important;
}
/* Wrestling brand/category tiles are content cards, not CTA controls. */
.sg-wrestling-home .wrestling-brand-tile {
border: 1px solid var(--nova-line) !important;
background: linear-gradient(150deg, rgba(13,15,23,.92), rgba(4,5,9,.97)) !important;
box-shadow: var(--nova-shadow-card) !important;
}
.sg-wrestling-home .wrestling-brand-tile::before,
.sg-wrestling-home .wrestling-brand-tile::after {
content: none !important;
background: none !important;
}
.sg-wrestling-home .wrestling-brand-tile:hover,
.sg-wrestling-home .wrestling-brand-tile:focus-visible,
.sg-anime-pro-home .schedule-item:hover,
.sg-anime-pro-home .schedule-item:focus-visible {
border-color: var(--nova-line-strong) !important;
box-shadow: 0 14px 30px rgba(0,0,0,.40) !important;
outline: none !important;
}
/* ---------------------------------------------------------------------
6. Small active indicators: gradient is a line/dot, never a card frame
------------------------------------------------------------------ */
.sg-anime-pro-home .hero-dots button,
.sg-wrestling-home .hero-dots button {
border: 0 !important;
background: rgba(255,255,255,.24) !important;
box-shadow: none !important;
}
.sg-anime-pro-home .hero-dots button.active,
.sg-wrestling-home .hero-dots button.active {
border: 0 !important;
background: var(--nova-brand-gradient) !important;
box-shadow: 0 0 10px rgba(155,77,255,.24) !important;
}
/* Accessibility focus: visible, premium, and still non-rainbow on cards/search. */
.sg-anime-catalog .sg-reference-search:focus-within,
.sg-wrestling-catalog .sg-reference-search:focus-within,
.sg-anime-pro-card:focus-visible .art,
.sg-wrestling-card:focus-visible .artwork {
outline: none !important;
}
@media (max-width: 600px) {
.sg-anime-pro-home .hero-actions .primary,
.sg-wrestling-home .hero-actions .primary,
.sg-anime-pro-home .hero-actions .secondary,
.sg-wrestling-home .hero-actions .secondary {
min-height: 48px !important;
padding-inline: 18px !important;
}
.sg-anime-pro-nav,
.sg-wrestling-section-nav {
min-height: 45px !important;
gap: 7px !important;
}
.sg-anime-pro-nav button,
.sg-wrestling-section-nav button {
min-height: 44px !important;
padding-inline: 7px !important;
}
}
/* =====================================================================
URGENT HOTFIX — Search neon restored + content-card neon forbidden
Reference lock: 2026-08-17 supplied Discover / All Movies screenshots.
The gradient is valid ONLY on search frames, active filter chips,
primary CTA fill and secondary CTA outline. Media/studio/show cards stay
neutral, cinematic and shadow-led.
===================================================================== */
:root {
--nova-search-surface: linear-gradient(180deg, rgba(8, 9, 14, .96), rgba(3, 4, 8, .98));
--nova-card-surface: linear-gradient(155deg, rgba(11, 13, 19, .94), rgba(4, 5, 9, .98));
--nova-card-border: rgba(255, 255, 255, .085);
--nova-card-border-hover: rgba(255, 255, 255, .15);
--nova-card-shadow-clean: 0 12px 26px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .20);
--nova-card-shadow-hover: 0 16px 34px rgba(0, 0, 0, .42), 0 3px 10px rgba(0, 0, 0, .24);
--nova-section-space: clamp(22px, 4vw, 38px);
--nova-grid-gap-x: clamp(8px, 1.1vw, 13px);
--nova-grid-gap-y: clamp(16px, 2.2vw, 24px);
}
/* Search is intentionally neon-framed in the approved production identity. */
.sg-anime-catalog :is(.sg-reference-search, .nova-catalog-search),
.sg-wrestling-catalog :is(.sg-reference-search, .nova-catalog-search) {
position: relative !important;
min-height: 44px !important;
border: 1px solid transparent !important;
border-radius: 10px !important;
background:
var(--nova-search-surface) padding-box,
var(--nova-brand-gradient) border-box !important;
background-image:
var(--nova-search-surface),
var(--nova-brand-gradient) !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, .34), 0 0 14px rgba(155, 77, 255, .08) !important;
backdrop-filter: blur(15px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(15px) saturate(1.05) !important;
}
.sg-anime-catalog :is(.sg-reference-search, .nova-catalog-search):focus-within,
.sg-wrestling-catalog :is(.sg-reference-search, .nova-catalog-search):focus-within {
border-color: transparent !important;
background:
linear-gradient(180deg, rgba(10, 11, 18, .98), rgba(4, 5, 10, .99)) padding-box,
var(--nova-brand-gradient) border-box !important;
background-image:
linear-gradient(180deg, rgba(10, 11, 18, .98), rgba(4, 5, 10, .99)),
var(--nova-brand-gradient) !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, .40), 0 0 18px rgba(155, 77, 255, .13) !important;
}
.sg-anime-catalog :is(.sg-reference-search, .nova-catalog-search)::before,
.sg-anime-catalog :is(.sg-reference-search, .nova-catalog-search)::after,
.sg-wrestling-catalog :is(.sg-reference-search, .nova-catalog-search)::before,
.sg-wrestling-catalog :is(.sg-reference-search, .nova-catalog-search)::after {
content: none !important;
display: none !important;
}
.sg-anime-catalog :is(.sg-reference-search, .nova-catalog-search) input,
.sg-wrestling-catalog :is(.sg-reference-search, .nova-catalog-search) input {
color: #f7f8fc !important;
caret-color: var(--nova-cyan) !important;
}
.sg-anime-catalog :is(.sg-reference-search, .nova-catalog-search) input::placeholder,
.sg-wrestling-catalog :is(.sg-reference-search, .nova-catalog-search) input::placeholder {
color: rgba(247, 248, 252, .38) !important;
}
/* Active filter chips get the same premium 1px gradient frame. */
.sg-anime-catalog .nova-catalog-select-card,
.sg-wrestling-catalog .nova-catalog-select-card,
.sg-anime-pro-home .schedule-day-control,
.sg-anime-schedule .schedule-day-control,
.sg-wrestling-schedule .schedule-day-control,
.sg-wrestling-home .archive-year-control {
border: 1px solid rgba(255, 255, 255, .11) !important;
border-radius: 9px !important;
background: rgba(7, 8, 13, .90) !important;
background-image: none !important;
box-shadow: 0 5px 12px rgba(0, 0, 0, .18) !important;
}
.sg-anime-catalog .nova-catalog-select-card.active,
.sg-wrestling-catalog .nova-catalog-select-card.active,
.sg-anime-pro-home .schedule-day-control.active,
.sg-anime-schedule .schedule-day-control.active,
.sg-wrestling-schedule .schedule-day-control.active,
.sg-wrestling-home .archive-year-control.active {
border: 1px solid transparent !important;
background:
linear-gradient(180deg, rgba(8, 9, 15, .97), rgba(3, 4, 8, .99)) padding-box,
var(--nova-brand-gradient) border-box !important;
background-image:
linear-gradient(180deg, rgba(8, 9, 15, .97), rgba(3, 4, 8, .99)),
var(--nova-brand-gradient) !important;
color: #fff !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, .30), 0 0 12px rgba(155, 77, 255, .08) !important;
}
.sg-anime-catalog .nova-catalog-select-card.active::before,
.sg-wrestling-catalog .nova-catalog-select-card.active::before,
.sg-anime-pro-home .schedule-day-control.active::before,
.sg-anime-schedule .schedule-day-control.active::before,
.sg-wrestling-schedule .schedule-day-control.active::before,
.sg-wrestling-home .archive-year-control.active::before {
content: none !important;
display: none !important;
}
/* ---------------------------------------------------------------------
Cinematic card geometry — identical poster language for Anime/Wrestling.
------------------------------------------------------------------ */
.sg-anime-catalog .sg-anime-commercial-grid,
.sg-wrestling-catalog .sg-wrestling-media-grid {
width: 100% !important;
padding-inline: 0 !important;
gap: var(--nova-grid-gap-y) var(--nova-grid-gap-x) !important;
align-items: start !important;
}
.sg-anime-pro-card,
.sg-wrestling-card {
gap: 6px !important;
background: transparent !important;
box-shadow: none !important;
}
.sg-anime-pro-card.poster .art,
.sg-wrestling-card.poster .artwork,
.sg-wrestling-card.ranked .artwork {
aspect-ratio: 2 / 3 !important;
}
.sg-anime-pro-card.episode .art,
.sg-wrestling-card.landscape .artwork {
aspect-ratio: 16 / 9 !important;
}
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork,
.sg-anime-pro-home .nova-rail-card .shahid-poster-image,
.sg-anime-pro-home .nova-rail-card .shahid-ranked-poster,
.sg-anime-pro-home .nova-rail-card .shahid-landscape-image,
.sg-wrestling-home .nova-rail-card .shahid-poster-image,
.sg-wrestling-home .nova-rail-card .shahid-ranked-poster,
.sg-wrestling-home .nova-rail-card .shahid-landscape-image {
overflow: hidden !important;
border: 1px solid var(--nova-card-border) !important;
border-radius: 10px !important;
background: #07080d !important;
background-image: none !important;
box-shadow: var(--nova-card-shadow-clean) !important;
}
.sg-anime-pro-card:is(:hover, :focus-visible) .art,
.sg-wrestling-card:is(:hover, :focus-visible) .artwork,
.sg-anime-pro-home .nova-rail-card:is(:hover, :focus-visible) :is(.shahid-poster-image, .shahid-ranked-poster, .shahid-landscape-image),
.sg-wrestling-home .nova-rail-card:is(:hover, :focus-visible) :is(.shahid-poster-image, .shahid-ranked-poster, .shahid-landscape-image) {
border-color: var(--nova-card-border-hover) !important;
box-shadow: var(--nova-card-shadow-hover) !important;
outline: none !important;
}
.sg-anime-pro-card:focus-visible,
.sg-wrestling-card:focus-visible,
.sg-anime-pro-home .nova-rail-card:focus-visible,
.sg-wrestling-home .nova-rail-card:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* Hard kill any inherited rainbow pseudo-frame on media artwork. */
.sg-anime-pro-card::before,
.sg-anime-pro-card::after,
.sg-anime-pro-card .art::before,
.sg-anime-pro-card .art::after,
.sg-wrestling-card::before,
.sg-wrestling-card::after,
.sg-wrestling-card .artwork::before,
.sg-wrestling-card .artwork::after,
.sg-anime-pro-home .nova-rail-card::before,
.sg-anime-pro-home .nova-rail-card::after,
.sg-wrestling-home .nova-rail-card::before,
.sg-wrestling-home .nova-rail-card::after {
content: none !important;
border: 0 !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
}
/* Studio/show tiles are content cards, never neon controls. */
.sg-anime-pro-home .studio-rail > button,
.sg-anime-catalog .studio-tile,
.anime-ref-studio-card,
.anime-v2-studio-card,
.sg-wrestling-home .wrestling-brand-tile,
.sg-wrestling-catalog .brand-tile-shell,
.sg-wrestling-catalog .date-node {
border: 1px solid var(--nova-card-border) !important;
outline: 0 !important;
background: var(--nova-card-surface) !important;
background-image: var(--nova-card-surface) !important;
box-shadow: var(--nova-card-shadow-clean) !important;
backdrop-filter: blur(14px) saturate(1.04) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
}
.sg-anime-pro-home .studio-rail > button:is(:hover, :focus-visible, .active),
.sg-anime-catalog .studio-tile:is(:hover, :focus-visible, .active),
.anime-ref-studio-card:is(:hover, :focus-visible, .active),
.anime-v2-studio-card:is(:hover, :focus-visible, .active),
.sg-wrestling-home .wrestling-brand-tile:is(:hover, :focus-visible, .active),
.sg-wrestling-catalog .brand-tile-shell:is(:hover, :focus-within, .active),
.sg-wrestling-catalog .date-node:is(:hover, :focus-visible) {
border-color: var(--nova-card-border-hover) !important;
outline: 0 !important;
box-shadow: var(--nova-card-shadow-hover) !important;
}
.sg-anime-pro-home .studio-rail > button::before,
.sg-anime-pro-home .studio-rail > button::after,
.sg-anime-catalog .studio-tile::before,
.sg-anime-catalog .studio-tile::after,
.anime-ref-studio-card::before,
.anime-ref-studio-card::after,
.anime-v2-studio-card::before,
.anime-v2-studio-card::after,
.sg-wrestling-home .wrestling-brand-tile::before,
.sg-wrestling-home .wrestling-brand-tile::after,
.sg-wrestling-catalog .brand-tile-shell::before,
.sg-wrestling-catalog .brand-tile-shell::after {
content: none !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
}
/* Better breathing rhythm without reintroducing page gutters. */
.sg-anime-pro-home-body > :is(.sg-anime-pro-section, .shahid-home-section),
.sg-wrestling-home > :is(.home-section, .shahid-home-section) {
margin-top: var(--nova-section-space) !important;
}
.sg-anime-pro-home .sg-anime-pro-section > header,
.sg-wrestling-home .home-section > header,
.sg-anime-pro-home .shahid-section-heading,
.sg-wrestling-home .shahid-section-heading {
min-height: 46px !important;
padding-bottom: 10px !important;
}
.sg-anime-pro-card .copy b,
.sg-wrestling-card .copy > b,
.sg-anime-pro-home .nova-rail-card strong,
.sg-wrestling-home .nova-rail-card strong {
color: rgba(255, 255, 255, .96) !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, .35) !important;
}
.sg-anime-pro-card .copy small,
.sg-wrestling-card :is(.copy small, .secondary-meta),
.sg-anime-pro-home .nova-rail-card small,
.sg-wrestling-home .nova-rail-card small {
color: rgba(247, 248, 252, .56) !important;
}
@media (max-width: 560px) {
.sg-anime-catalog .sg-anime-commercial-grid,
.sg-wrestling-catalog .sg-wrestling-media-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 15px 7px !important;
}
.sg-anime-pro-card,
.sg-wrestling-card {
gap: 5px !important;
}
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork {
border-radius: 8px !important;
box-shadow: 0 9px 20px rgba(0, 0, 0, .33) !important;
}
.sg-anime-catalog :is(.sg-reference-search, .nova-catalog-search),
.sg-wrestling-catalog :is(.sg-reference-search, .nova-catalog-search) {
min-height: 42px !important;
border-radius: 8px !important;
}
}
@media (max-width: 360px) {
.sg-anime-catalog .sg-anime-commercial-grid,
.sg-wrestling-catalog .sg-wrestling-media-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px 9px !important;
}
}
/* =====================================================================
FINAL CONTENT-CARD CLEAN LOCK + HUB RHYTHM
Explicitly covers every HomeRail media geometry used by Anime/Wrestling.
Search/chip/CTA neon remains untouched above; artwork never receives it.
===================================================================== */
.sg-anime-pro-home .nova-rail-card.shahid-short-card,
.sg-wrestling-home .nova-rail-card.shahid-short-card,
.sg-anime-pro-home .nova-rail-card .shahid-live-poster,
.sg-wrestling-home .nova-rail-card .shahid-live-poster {
border: 1px solid var(--nova-card-border) !important;
background: #07080d !important;
background-image: none !important;
box-shadow: var(--nova-card-shadow-clean) !important;
}
.sg-anime-pro-home .nova-rail-card.shahid-short-card:is(:hover, :focus-visible),
.sg-wrestling-home .nova-rail-card.shahid-short-card:is(:hover, :focus-visible),
.sg-anime-pro-home .nova-rail-card:is(:hover, :focus-visible) .shahid-live-poster,
.sg-wrestling-home .nova-rail-card:is(:hover, :focus-visible) .shahid-live-poster {
border-color: var(--nova-card-border-hover) !important;
background-image: none !important;
box-shadow: var(--nova-card-shadow-hover) !important;
}
.sg-anime-pro-home .nova-rail-card.shahid-short-card::before,
.sg-anime-pro-home .nova-rail-card.shahid-short-card::after,
.sg-wrestling-home .nova-rail-card.shahid-short-card::before,
.sg-wrestling-home .nova-rail-card.shahid-short-card::after,
.sg-anime-pro-home .nova-rail-card .shahid-live-poster::before,
.sg-anime-pro-home .nova-rail-card .shahid-live-poster::after,
.sg-wrestling-home .nova-rail-card .shahid-live-poster::before,
.sg-wrestling-home .nova-rail-card .shahid-live-poster::after {
content: none !important;
border: 0 !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
}
/* Keep the canonical cinematic geometry identical across both premium hubs. */
.sg-anime-pro-home .nova-rail-card :is(.shahid-poster-image, .shahid-ranked-poster, .shahid-live-poster),
.sg-wrestling-home .nova-rail-card :is(.shahid-poster-image, .shahid-ranked-poster, .shahid-live-poster) {
aspect-ratio: 2 / 3 !important;
}
.sg-anime-pro-home .nova-rail-card .shahid-landscape-image,
.sg-wrestling-home .nova-rail-card .shahid-landscape-image,
.sg-wrestling-home .continue-rail > button {
aspect-ratio: 16 / 9 !important;
}
/* Deliberate breathing room: section-to-section, not page-edge gutters. */
.sg-anime-pro-home .sg-anime-pro-midgrid {
gap: clamp(18px, 2.4vw, 28px) !important;
}
.sg-anime-pro-home :is(.studio-rail, .episode-rail),
.sg-wrestling-home :is(.brand-rail, .continue-rail, .schedule-strip, .year-strip) {
gap: clamp(8px, 1.15vw, 12px) !important;
}
.sg-anime-pro-home :is(.sg-anime-pro-section, .shahid-home-section),
.sg-wrestling-home :is(.home-section, .shahid-home-section) {
scroll-margin-top: calc(var(--safe-top, 0px) + 74px) !important;
}
@media (max-width: 560px) {
.sg-anime-pro-home .sg-anime-pro-midgrid {
gap: 20px !important;
}
.sg-anime-pro-home :is(.studio-rail, .episode-rail),
.sg-wrestling-home :is(.brand-rail, .continue-rail, .schedule-strip, .year-strip) {
gap: 8px !important;
}
}
/* ===== source: nova-ultimate-visual-contract.css ===== */
/*
Space Gate Nova+ — Ultimate Visual Contract
Final visual-system layer built from the approved production screenshots.
Loaded LAST on purpose: it normalizes legacy CSS without deleting functional code.
Brand-gradient law:
- YES: search frames, active filter/chip frames, active-tab underlines,
primary CTA fills, secondary CTA outlines, approved nav indicators.
- NO: media/content/studio/show/channel/collection cards and data panels.
*/
:root {
--nova-v3-bg: #000000;
--nova-v3-bg-elevated: #05060a;
--nova-v3-surface: rgba(8, 10, 15, .86);
--nova-v3-surface-strong: rgba(10, 12, 18, .96);
--nova-v3-surface-soft: rgba(255, 255, 255, .035);
--nova-v3-card: #07080d;
--nova-v3-card-2: #0a0c12;
--nova-v3-text: #f8f9fd;
--nova-v3-text-2: rgba(248, 249, 253, .72);
--nova-v3-text-3: rgba(248, 249, 253, .50);
--nova-v3-line: rgba(255, 255, 255, .085);
--nova-v3-line-strong: rgba(255, 255, 255, .15);
--nova-v3-pink: #f04ad8;
--nova-v3-violet: #9b4dff;
--nova-v3-cyan: #14d7ff;
--nova-v3-gradient: linear-gradient(100deg, var(--nova-v3-pink) 0%, var(--nova-v3-violet) 50%, var(--nova-v3-cyan) 100%);
--nova-v3-gradient-soft: linear-gradient(100deg, rgba(240,74,216,.16), rgba(155,77,255,.12) 50%, rgba(20,215,255,.12));
--nova-v3-glass: linear-gradient(155deg, rgba(14, 16, 24, .86), rgba(5, 6, 10, .94));
--nova-v3-glass-strong: linear-gradient(155deg, rgba(16, 18, 27, .95), rgba(5, 6, 10, .985));
--nova-v3-shadow-card: 0 12px 28px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .18);
--nova-v3-shadow-card-hover: 0 18px 38px rgba(0, 0, 0, .44), 0 4px 12px rgba(0, 0, 0, .22);
--nova-v3-shadow-panel: 0 18px 48px rgba(0, 0, 0, .38);
--nova-v3-shadow-cta: 0 14px 34px rgba(108, 76, 255, .22), 0 0 20px rgba(20, 215, 255, .07);
--nova-v3-radius-xs: 8px;
--nova-v3-radius-sm: 10px;
--nova-v3-radius-md: 14px;
--nova-v3-radius-lg: 18px;
--nova-v3-radius-xl: 24px;
--nova-v3-pill: 999px;
--nova-v3-space-1: 4px;
--nova-v3-space-2: 8px;
--nova-v3-space-3: 12px;
--nova-v3-space-4: 16px;
--nova-v3-space-5: 20px;
--nova-v3-space-6: 24px;
--nova-v3-space-7: 32px;
--nova-v3-space-8: 40px;
--nova-v3-page-inline: clamp(12px, 3vw, 28px);
--nova-v3-section-gap: clamp(24px, 4vw, 40px);
--nova-v3-control-h: 46px;
--nova-v3-control-h-lg: 54px;
--nova-v3-ease: cubic-bezier(.2, .8, .2, 1);
/* Fold legacy names into one authoritative contract. */
--sgn-background: var(--nova-v3-bg);
--sgn-background-alt: var(--nova-v3-bg-elevated);
--sgn-white: var(--nova-v3-text);
--sgn-cyan: var(--nova-v3-cyan);
--sgn-violet: var(--nova-v3-violet);
--sgn-magenta: var(--nova-v3-pink);
--sgn-gradient: var(--nova-v3-gradient);
--sgn-neon-button-gradient: var(--nova-v3-gradient);
--sgn-border-soft: var(--nova-v3-line);
--sgn-text-soft: var(--nova-v3-text-2);
--sgn-text-muted: var(--nova-v3-text-3);
--sgn-shadow-card: var(--nova-v3-shadow-card);
--sgn-shadow-panel: var(--nova-v3-shadow-panel);
--sgn-radius-card: var(--nova-v3-radius-md);
--page-pad: var(--nova-v3-page-inline);
}
/* ------------------------------------------------------------------
GLOBAL FOUNDATIONS
------------------------------------------------------------------ */
html,
body,
#app,
.app-root,
.main-layout-shell,
.sg-route-frame,
.sg-route-surface {
background: var(--nova-v3-bg) !important;
color: var(--nova-v3-text) !important;
}
body {
font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif !important;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
:is(h1, h2, h3, h4, strong) {
text-wrap: balance;
}
:is(p, small, dd, .secondary-meta, .media-meta, .card-meta) {
color: var(--nova-v3-text-2);
}
:is(.oscar-app, .nova-app, .discover-page, .nova-live-page, .rail-catalog-app, .server-collections-shell, .server-collection-details-shell) {
background: #000 !important;
}
:is(button, a, [role="button"], input, select) {
-webkit-tap-highlight-color: transparent;
}
:is(button, a, [role="button"]):focus-visible {
outline: none;
}
/* ------------------------------------------------------------------
HEADERS + BOTTOM NAV: one dark premium shell
------------------------------------------------------------------ */
:is(.oscar-toolbar, .account-pro-header, .favorites-pro-header, .notifications-pro-header,
.nova-catalog-fixed-header, .catalog-landing-toolbar, .nova-native-catalog-header,
.rail-catalog-header, .details-standard-header, .nova-live-fixed-header) {
color: var(--nova-v3-text) !important;
border-bottom: 1px solid rgba(255,255,255,.055) !important;
background: linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.82)) !important;
backdrop-filter: blur(18px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.05) !important;
box-shadow: 0 8px 26px rgba(0,0,0,.18) !important;
}
/* Home / hero headers stay visually transparent over artwork. */
:is(.home-toolbar-shell, .oscar-toolbar.home-toolbar, .target-home .home-toolbar-shell) {
border-bottom-color: transparent !important;
background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.28) 58%, transparent) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
:is(.icon-button, .home-header-action, .catalog-landing-toolbar-button, .nova-catalog-icon,
.details-header-action, .nova-live-icon, .notification-action-icon) {
border: 1px solid transparent !important;
background: rgba(0,0,0,.16) !important;
color: #fff !important;
transition: background-color 160ms var(--nova-v3-ease), transform 140ms var(--nova-v3-ease), border-color 160ms var(--nova-v3-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
:is(.icon-button, .home-header-action, .catalog-landing-toolbar-button, .nova-catalog-icon,
.details-header-action, .nova-live-icon, .notification-action-icon):hover {
border-color: rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.075) !important;
}
}
:is(.icon-button, .home-header-action, .catalog-landing-toolbar-button, .nova-catalog-icon,
.details-header-action, .nova-live-icon, .notification-action-icon):active {
transform: scale(.94) !important;
}
.sg-layout-bottom-nav > nav.oscar-bottom-nav.original-bottom-nav,
nav.oscar-bottom-nav.original-bottom-nav {
border-top: 1px solid rgba(255,255,255,.075) !important;
background: rgba(3,4,7,.94) !important;
backdrop-filter: blur(22px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
box-shadow: 0 -14px 36px rgba(0,0,0,.42) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) {
color: rgba(248,249,253,.48) !important;
transition: color 160ms var(--nova-v3-ease), transform 150ms var(--nova-v3-ease) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active {
color: #fff !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon {
filter: drop-shadow(0 4px 10px rgba(155,77,255,.26)) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-label-text,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active b {
color: #fff !important;
font-weight: 800 !important;
}
/* ------------------------------------------------------------------
SEARCH: gradient border is REQUIRED by the approved identity
------------------------------------------------------------------ */
:is(.search-field,
.discover-desktop-search,
.discover-search-box,
.nova-catalog-search,
.sg-reference-search,
.nova-live-search,
.nova-search-bar,
.episode-gallery-search,
.world-hub-search,
.search-solid-input) {
border: 1px solid transparent !important;
border-radius: var(--nova-v3-radius-sm) !important;
background:
linear-gradient(180deg, rgba(8,10,16,.98), rgba(3,4,8,.99)) padding-box,
var(--nova-v3-gradient) border-box !important;
background-image:
linear-gradient(180deg, rgba(8,10,16,.98), rgba(3,4,8,.99)),
var(--nova-v3-gradient) !important;
color: var(--nova-v3-text) !important;
box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 14px rgba(155,77,255,.07) !important;
backdrop-filter: blur(14px) saturate(1.04) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
transition: box-shadow 180ms var(--nova-v3-ease), background 180ms var(--nova-v3-ease) !important;
}
:is(.search-field,
.discover-desktop-search,
.discover-search-box,
.nova-catalog-search,
.sg-reference-search,
.nova-live-search,
.nova-search-bar,
.episode-gallery-search,
.world-hub-search):focus-within,
.search-solid-input:focus {
border-color: transparent !important;
box-shadow: 0 12px 30px rgba(0,0,0,.40), 0 0 20px rgba(155,77,255,.13) !important;
}
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
.sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
.world-hub-search) input,
.search-solid-input {
color: #fff !important;
caret-color: var(--nova-v3-cyan) !important;
}
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
.sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
.world-hub-search) input::placeholder,
.search-solid-input::placeholder {
color: rgba(248,249,253,.38) !important;
}
/* ------------------------------------------------------------------
BUTTON SYSTEM
------------------------------------------------------------------ */
:is(.primary-action,
.nova-btn-primary,
.target-watch-button,
.cinematic-watch-button,
.channel-primary-action,
.standalone-episode-play,
.standalone-episode-state-action,
.watch-retry-button,
.nova-offline-retry,
.nova-not-found-actions .primary,
.server-driven-error button,
.discover-preview-actions .primary,
.settings-actions .primary,
.sg-account-plan-action,
.sg-account-login form button,
.rewarded-test-actions .primary,
.favorites-featured-copy button,
.sg-anime-pro-home .hero-actions .primary,
.sg-wrestling-home .hero-actions .primary) {
min-height: var(--nova-v3-control-h-lg) !important;
border: 0 !important;
border-radius: var(--nova-v3-pill) !important;
background: var(--nova-v3-gradient) !important;
background-image: var(--nova-v3-gradient) !important;
color: #fff !important;
font-weight: 900 !important;
box-shadow: var(--nova-v3-shadow-cta) !important;
transition: transform 150ms var(--nova-v3-ease), filter 180ms var(--nova-v3-ease), box-shadow 180ms var(--nova-v3-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
:is(.primary-action, .nova-btn-primary, .target-watch-button, .cinematic-watch-button,
.channel-primary-action, .standalone-episode-play, .standalone-episode-state-action,
.watch-retry-button, .nova-offline-retry, .nova-not-found-actions .primary,
.server-driven-error button, .discover-preview-actions .primary, .settings-actions .primary,
.sg-account-plan-action, .sg-account-login form button, .favorites-featured-copy button,
.sg-anime-pro-home .hero-actions .primary, .sg-wrestling-home .hero-actions .primary):hover {
filter: brightness(1.055) saturate(1.06) !important;
box-shadow: 0 16px 38px rgba(108,76,255,.27), 0 0 22px rgba(20,215,255,.09) !important;
}
}
:is(.primary-action, .nova-btn-primary, .target-watch-button, .cinematic-watch-button,
.channel-primary-action, .standalone-episode-play, .standalone-episode-state-action,
.watch-retry-button, .nova-offline-retry, .nova-not-found-actions .primary,
.server-driven-error button, .discover-preview-actions .primary, .settings-actions .primary,
.sg-account-plan-action, .sg-account-login form button, .favorites-featured-copy button,
.sg-anime-pro-home .hero-actions .primary, .sg-wrestling-home .hero-actions .primary):active {
transform: scale(.985) !important;
}
/* Secondary = dark fill + thin brand-gradient outline. */
:is(.outline-action,
.nova-btn-secondary,
.target-save-button,
.cinematic-secondary-action,
.channel-detail-save,
.nova-not-found-actions .secondary,
.discover-preview-actions button:not(.primary),
.sg-anime-pro-home .hero-actions .secondary,
.sg-wrestling-home .hero-actions .secondary) {
min-height: var(--nova-v3-control-h-lg) !important;
border: 1px solid transparent !important;
border-radius: var(--nova-v3-pill) !important;
background:
linear-gradient(180deg, rgba(4,5,9,.97), rgba(0,0,0,.99)) padding-box,
var(--nova-v3-gradient) border-box !important;
background-image:
linear-gradient(180deg, rgba(4,5,9,.97), rgba(0,0,0,.99)),
var(--nova-v3-gradient) !important;
color: #fff !important;
font-weight: 850 !important;
box-shadow: 0 10px 24px rgba(0,0,0,.34) !important;
transition: transform 150ms var(--nova-v3-ease), box-shadow 180ms var(--nova-v3-ease) !important;
}
:is(.outline-action, .nova-btn-secondary, .target-save-button, .cinematic-secondary-action,
.channel-detail-save, .discover-preview-actions button:not(.primary),
.sg-anime-pro-home .hero-actions .secondary, .sg-wrestling-home .hero-actions .secondary):active {
transform: scale(.985) !important;
}
/* ------------------------------------------------------------------
ACTIVE STATES
Chip-style tabs/filters = gradient frame.
Content/detail tabs = gradient underline only.
------------------------------------------------------------------ */
:is(.category-tabs button,
.filter-chip,
.nova-catalog-select-card,
.discover-desktop-tabs button,
.discover-result-tabs button,
.discover-topic-chip,
.favorites-filters button,
.notifications-filters button,
.mc-day-tabs button,
.mc-league-tabs button,
.anime-season-chip,
.related-type-chip,
.schedule-day-control,
.archive-year-control) {
border: 1px solid rgba(255,255,255,.105) !important;
border-radius: var(--nova-v3-radius-sm) !important;
background: rgba(8,9,14,.90) !important;
background-image: none !important;
color: var(--nova-v3-text-2) !important;
box-shadow: 0 5px 14px rgba(0,0,0,.16) !important;
transition: color 160ms var(--nova-v3-ease), background 160ms var(--nova-v3-ease), box-shadow 160ms var(--nova-v3-ease), transform 140ms var(--nova-v3-ease) !important;
}
:is(.category-tabs button,
.filter-chip,
.nova-catalog-select-card,
.discover-desktop-tabs button,
.discover-result-tabs button,
.discover-topic-chip,
.favorites-filters button,
.notifications-filters button,
.mc-day-tabs button,
.mc-league-tabs button,
.anime-season-chip,
.related-type-chip,
.schedule-day-control,
.archive-year-control).active {
border: 1px solid transparent !important;
background:
linear-gradient(180deg, rgba(8,9,15,.98), rgba(3,4,8,.99)) padding-box,
var(--nova-v3-gradient) border-box !important;
background-image:
linear-gradient(180deg, rgba(8,9,15,.98), rgba(3,4,8,.99)),
var(--nova-v3-gradient) !important;
color: #fff !important;
box-shadow: 0 8px 20px rgba(0,0,0,.28), 0 0 12px rgba(155,77,255,.075) !important;
}
:is(.category-tabs button, .filter-chip, .nova-catalog-select-card, .discover-desktop-tabs button,
.discover-result-tabs button, .discover-topic-chip, .favorites-filters button,
.notifications-filters button, .mc-day-tabs button, .mc-league-tabs button,
.anime-season-chip, .related-type-chip, .schedule-day-control, .archive-year-control):active {
transform: scale(.975) !important;
}
:is(.cinematic-tabs, .pro-comments-tabs, .standalone-episode-tabs,
.sg-anime-pro-nav, .sg-wrestling-section-nav) {
border: 0 !important;
border-bottom: 1px solid var(--nova-v3-line) !important;
background: #000 !important;
box-shadow: none !important;
}
:is(.cinematic-tabs button, .pro-comments-tabs button, .standalone-episode-tabs button,
.sg-anime-pro-nav button, .sg-wrestling-section-nav button) {
position: relative !important;
border: 0 !important;
background: transparent !important;
color: var(--nova-v3-text-3) !important;
box-shadow: none !important;
}
:is(.cinematic-tabs button, .pro-comments-tabs button, .standalone-episode-tabs button,
.sg-anime-pro-nav button, .sg-wrestling-section-nav button).active {
color: #fff !important;
}
:is(.cinematic-tabs button, .pro-comments-tabs button, .standalone-episode-tabs button,
.sg-anime-pro-nav button, .sg-wrestling-section-nav button).active::after {
content: "" !important;
position: absolute !important;
right: 18% !important;
bottom: -1px !important;
left: 18% !important;
height: 3px !important;
border-radius: var(--nova-v3-pill) var(--nova-v3-pill) 0 0 !important;
background: var(--nova-v3-gradient) !important;
box-shadow: 0 0 10px rgba(155,77,255,.22) !important;
}
/* ------------------------------------------------------------------
MEDIA / CONTENT CARDS — HARD NO-NEON CONTRACT
------------------------------------------------------------------ */
:is(.poster-wrapper,
.poster-wrap,
.nova-media-art,
.discover-desktop-art,
.discover-similar button img,
.movie-collection-card-art,
.anime-ref-poster-art,
.anime-v2-episode-art,
.anime-ref-episode-art,
.related-poster-shell,
.episode-gallery-card,
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork,
.shahid-poster-image,
.shahid-ranked-poster,
.shahid-landscape-image,
.shahid-live-poster) {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-card) !important;
background-image: none !important;
box-shadow: var(--nova-v3-shadow-card) !important;
overflow: hidden !important;
}
:is(.poster-wrapper,
.poster-wrap,
.nova-media-art,
.discover-desktop-art,
.movie-collection-card-art,
.anime-ref-poster-art,
.anime-v2-episode-art,
.anime-ref-episode-art,
.related-poster-shell,
.episode-gallery-card,
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork,
.shahid-poster-image,
.shahid-ranked-poster,
.shahid-landscape-image,
.shahid-live-poster)::before,
:is(.poster-wrapper,
.poster-wrap,
.nova-media-art,
.discover-desktop-art,
.movie-collection-card-art,
.anime-ref-poster-art,
.anime-v2-episode-art,
.anime-ref-episode-art,
.related-poster-shell,
.episode-gallery-card,
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork,
.shahid-poster-image,
.shahid-ranked-poster,
.shahid-landscape-image,
.shahid-live-poster)::after {
border: 0 !important;
background-image: none !important;
box-shadow: none !important;
}
/* selected discovery card stays clean: selection is depth/contrast, never rainbow chrome */
.discover-desktop-card.selected .discover-desktop-art {
border-color: rgba(255,255,255,.22) !important;
background: var(--nova-v3-card) !important;
background-image: none !important;
box-shadow: 0 18px 38px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.035) !important;
}
/* Content tiles/panels are neutral glass, not branded frames. */
:is(.studio-tile,
.anime-v2-studio-card,
.anime-native-studio,
.wrestling-brand-tile,
.brand-tile-shell,
.movie-producer-card,
.world-hub-action-tile,
.settings-status-card,
.settings-section,
.sg-account-profile-card,
.sg-account-plan-card,
.sg-account-stats,
.sg-account-quick-grid > button,
.sg-account-menu,
.notification-card,
.favorite-card,
.favorites-card,
.channel-card,
.mc-match-card,
.standalone-source-card,
.standalone-source-panel,
.offline-device-card,
.nova-server-card,
.reference-panel,
.reference-production-card,
.reference-promo-card,
.download-link-card) {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
:is(.studio-tile, .anime-v2-studio-card, .anime-native-studio, .wrestling-brand-tile,
.brand-tile-shell, .movie-producer-card, .world-hub-action-tile,
.sg-account-profile-card, .sg-account-plan-card, .sg-account-quick-grid > button,
.channel-card, .mc-match-card, .standalone-source-card, .standalone-source-panel,
.offline-device-card, .nova-server-card,
.reference-panel, .reference-production-card, .reference-promo-card)::before,
:is(.studio-tile, .anime-v2-studio-card, .anime-native-studio, .wrestling-brand-tile,
.brand-tile-shell, .movie-producer-card, .world-hub-action-tile,
.sg-account-profile-card, .sg-account-plan-card, .sg-account-quick-grid > button,
.channel-card, .mc-match-card, .standalone-source-card, .standalone-source-panel,
.offline-device-card, .nova-server-card,
.reference-panel, .reference-production-card, .reference-promo-card)::after {
background-image: none !important;
}
/* Uniform cinematic ratios. */
:is(.poster-wrapper, .poster-wrap, .nova-media-art,
.sg-anime-pro-card.poster .art, .sg-wrestling-card.poster .artwork,
.sg-wrestling-card.ranked .artwork, .anime-ref-poster-art) {
aspect-ratio: 2 / 3 !important;
}
:is(.sg-anime-pro-card.episode .art, .sg-wrestling-card.landscape .artwork,
.shahid-landscape-image, .anime-v2-episode-art, .anime-ref-episode-art,
.episode-gallery-card .ep-thumb) {
aspect-ratio: 16 / 9 !important;
}
/* Collection tiles are cinematic widescreen surfaces. */
.movie-collection-card-art {
aspect-ratio: 16 / 9 !important;
border-radius: var(--nova-v3-radius-lg) !important;
}
/* Media titles/meta: premium contrast hierarchy. */
:is(.media-title, .card-title, .poster-title,
.nova-media-card > strong, .discover-desktop-card > strong,
.sg-anime-pro-card .copy b, .sg-wrestling-card .copy > b,
.anime-ref-card-copy strong, .movie-collection-card-copy strong) {
color: rgba(255,255,255,.96) !important;
font-weight: 800 !important;
}
:is(.media-meta, .card-meta, .nova-media-card > small,
.discover-desktop-card > small, .sg-anime-pro-card .copy small,
.sg-wrestling-card .secondary-meta, .anime-ref-card-copy small,
.movie-collection-card-copy small) {
color: rgba(248,249,253,.56) !important;
}
/* Micro interaction = artwork depth, not neon. */
@media (hover: hover) and (pointer: fine) {
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card) {
transition: transform 180ms var(--nova-v3-ease) !important;
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card):hover {
transform: translateY(-2px) !important;
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card):hover
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
.movie-collection-card-art, .art, .artwork, .anime-ref-poster-art, .anime-v2-episode-art) {
border-color: var(--nova-v3-line-strong) !important;
box-shadow: var(--nova-v3-shadow-card-hover) !important;
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card):hover img {
transform: scale(1.025) !important;
}
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card):active {
transform: scale(.988) !important;
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card) img {
transition: transform 260ms var(--nova-v3-ease), opacity 180ms var(--nova-v3-ease) !important;
}
/* ------------------------------------------------------------------
HOME + MOVIES + SERIES + ANIME + WRESTLING LANDINGS
------------------------------------------------------------------ */
:is(.home-main, .catalog-landing-main, .sg-anime-pro-home-body, .sg-wrestling-home) {
background: #000 !important;
}
:is(.shahid-home-section, .oscar-section, .sg-anime-pro-section, .home-section,
.anime-ref-section, .anime-v2-studios, .anime-v2-episodes,
.movie-producers-section, .movie-collections-rail) {
margin-block: 0 var(--nova-v3-section-gap) !important;
}
:is(.shahid-section-heading, .section-heading, .sg-anime-pro-section > header,
.home-section > header, .anime-ref-section-head, .anime-v2-section-head,
.movie-producers-head, .movie-collections-rail-head) {
min-height: 48px !important;
padding-bottom: 10px !important;
}
:is(.shahid-section-heading h2, .section-heading h2, .sg-anime-pro-section h2,
.home-section h2, .anime-ref-section-head h2, .anime-v2-section-head h2,
.movie-producers-head h2, .movie-collections-rail-head h2) {
color: #fff !important;
font-weight: 900 !important;
letter-spacing: -.01em;
}
:is(.target-home-hero-shell, .world-hub-stage, .anime-ref-hero, .wrestling-hero) {
background-color: #000 !important;
}
:is(.target-home-hero-shell, .world-hub-stage, .wrestling-hero) :is(h1, h2, strong),
.anime-ref-hero :is(h1, h2, strong) {
color: #fff !important;
text-shadow: 0 3px 18px rgba(0,0,0,.68) !important;
}
:is(.target-home-hero-shell, .world-hub-stage, .wrestling-hero, .anime-ref-hero) :is(p, small, .hero-meta) {
color: rgba(255,255,255,.74) !important;
}
/* Hero dots / carousel active indicator: small gradient indicator only. */
:is(.hero-dots button.active, .target-home-hero-shell .target-hero-dot.active, .world-hub-stage .active-dot) {
background: var(--nova-v3-gradient) !important;
box-shadow: 0 0 10px rgba(155,77,255,.22) !important;
}
/* Quick-nav tiles are navigation surfaces, not media artwork: restrained glass. */
:is(.anime-hub-quick-nav, .wrestling-hub-quick-nav, .world-hub-action-tiles) button,
.world-hub-action-tile {
border-color: var(--nova-v3-line) !important;
border-radius: var(--nova-v3-radius-md) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: 0 10px 26px rgba(0,0,0,.26) !important;
}
/* ------------------------------------------------------------------
CATALOGS + DISCOVER
------------------------------------------------------------------ */
:is(.nova-catalog-page, .sg-anime-catalog, .sg-wrestling-catalog,
.discover-page, .rail-catalog-app) {
color: var(--nova-v3-text) !important;
background: #000 !important;
}
:is(.nova-catalog-page, .sg-anime-catalog, .sg-wrestling-catalog) :is(.catalog-tools, .sg-anime-catalog-tools),
.discover-desktop-filters {
gap: 8px !important;
}
:is(.nova-catalog-page, .sg-anime-catalog, .sg-wrestling-catalog) :is(.catalog-intro, .sg-anime-catalog-intro),
.discover-desktop-header,
.rail-catalog-summary {
margin-bottom: 18px !important;
}
.discover-desktop-catalog {
border-inline-end: 1px solid var(--nova-v3-line) !important;
background: #000 !important;
}
.discover-desktop-preview {
background: #000 !important;
}
.discover-preview-shade {
background: linear-gradient(180deg, rgba(0,0,0,.03) 8%, rgba(0,0,0,.16) 38%, rgba(0,0,0,.86) 73%, #000 94%) !important;
}
.discover-preview-copy h2 {
color: #fff !important;
text-shadow: 0 4px 22px rgba(0,0,0,.68) !important;
}
.discover-preview-copy p {
color: rgba(248,249,253,.76) !important;
line-height: 1.8 !important;
}
.discover-preview-facts {
border-color: var(--nova-v3-line) !important;
background: #000 !important;
}
.discover-preview-facts > div {
border-color: var(--nova-v3-line) !important;
}
/* Smart suggestion cards: neutral glass; brand lives in icon accents only. */
.discover-smart-card {
border: 1px solid var(--nova-v3-line) !important;
border-radius: var(--nova-v3-radius-lg) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
/* ------------------------------------------------------------------
DETAILS / EPISODES
------------------------------------------------------------------ */
:is(.details-app, .cinematic-details-page, .standalone-episode-page, .nova-channel-details) {
background: #000 !important;
color: var(--nova-v3-text) !important;
}
:is(.cinematic-details-shade, .channel-detail-shade, .standalone-episode-shade) {
background: linear-gradient(180deg, rgba(0,0,0,.08) 5%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.84) 78%, #000 100%) !important;
}
:is(.cinematic-title, .cinematic-title-en, .channel-detail-copy h1, .standalone-episode-series-name) {
color: #fff !important;
text-shadow: 0 4px 24px rgba(0,0,0,.72) !important;
}
:is(.cinematic-meta, .channel-detail-meta, .standalone-episode-meta) {
color: rgba(248,249,253,.72) !important;
}
:is(.reference-story-block, .series-story, .episode-story, .standalone-story-card,
.reference-info-panel, .reference-watch-panel, .channel-detail-status-card,
.channel-detail-source-card, .episode-panel, .episode-gallery-panel) {
border-color: var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
:is(.reference-story-block, .series-story, .episode-story, .standalone-story-card) :is(p, .nova-directional-text) {
color: rgba(248,249,253,.76) !important;
line-height: 1.85 !important;
}
:is(.reference-details-overview-grid, .reference-wide-details-grid, .standalone-episode-info-grid) {
gap: clamp(10px, 2vw, 18px) !important;
}
:is(.reference-related-card, .related-media-card) {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Episodic cards remain dark + clean, no rainbow border. */
:is(.nova-episode-card, .episode-gallery-entry, .standalone-episode-jump-rail button) {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
/* ------------------------------------------------------------------
PLAYER
------------------------------------------------------------------ */
.sg-player-layer,
.sg-player-shell {
background: #000 !important;
}
.sg-player-vignette {
background: radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.20) 76%, rgba(0,0,0,.46) 100%) !important;
}
.sg-player-topbar {
border: 0 !important;
background: linear-gradient(180deg, rgba(0,0,0,.80), rgba(0,0,0,.24) 66%, transparent) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sg-player-topbar :is(.sg-player-icon, .sg-player-select-wrap) {
border-color: rgba(255,255,255,.12) !important;
background: rgba(5,6,10,.54) !important;
color: #fff !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
:is(.sg-player-main-play, .sg-player-badge, .sg-player-progress-fill) {
background: var(--nova-v3-gradient) !important;
}
.sg-player-progress-track {
background: rgba(255,255,255,.18) !important;
}
/* ------------------------------------------------------------------
LIVE TV
------------------------------------------------------------------ */
.nova-live-page {
background: #000 !important;
}
:is(.nova-live-filter-panel, .nova-live-menu, .channel-detail-body) {
border-color: var(--nova-v3-line) !important;
background: var(--nova-v3-glass-strong) !important;
box-shadow: var(--nova-v3-shadow-panel) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
.channel-card {
border-radius: var(--nova-v3-radius-md) !important;
}
.channel-logo-wrapper {
border: 1px solid var(--nova-v3-line) !important;
background: rgba(255,255,255,.025) !important;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.16) !important;
}
.live-badge {
background: rgba(240,74,216,.14) !important;
color: #fff !important;
border: 1px solid rgba(240,74,216,.28) !important;
}
/* ------------------------------------------------------------------
ACCOUNT / FAVORITES / NOTIFICATIONS / SETTINGS
------------------------------------------------------------------ */
:is(.account-page-shell, .favorites-page-shell, .notifications-page-shell, .settings-page-shell) {
background: #000 !important;
}
:is(.sg-account-portal, .favorites-page-content, .notifications-page-content, .settings-layout) {
gap: clamp(16px, 2.4vw, 24px) !important;
}
/* Profile avatar is not a neon control: neutral ring, clean depth. */
body .account-page-app .sg-account-avatar-wrap {
border: 1px solid rgba(255,255,255,.16) !important;
background: #05060a !important;
background-image: none !important;
box-shadow: 0 14px 34px rgba(0,0,0,.38) !important;
}
body .account-page-app .sg-account-profile-copy b {
border: 1px solid rgba(155,77,255,.28) !important;
background: rgba(155,77,255,.09) !important;
background-image: none !important;
color: #c9a8ff !important;
}
body .account-page-app :is(.sg-account-stats, .sg-account-menu, .sg-account-plan-card,
.sg-account-profile-card, .sg-account-quick-grid > button, .sg-account-offers article) {
border-color: var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
body .account-page-app .sg-account-quick-grid > button:hover,
body .account-page-app .sg-account-menu > button:hover {
border-color: var(--nova-v3-line-strong) !important;
background: var(--nova-v3-glass-strong) !important;
}
:is(.favorites-featured, .notifications-delivery-state, .settings-intro) {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-panel) !important;
}
/* Favorites media artwork must obey the same no-neon law. */
.favorites-page-app :is(.poster-wrapper, .favorites-featured-art, .favorite-card-art, .favorites-card-art) {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-card) !important;
background-image: none !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
.notifications-page-app :is(.notification-card, .notification-item) {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
/* Favorites + notifications: final content-card contract. */
.favorites-page-app .favorites-card {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
transition: transform 170ms var(--nova-v3-ease), opacity 170ms var(--nova-v3-ease) !important;
}
.favorites-page-app .favorites-card-art,
.notifications-page-app .notification-media {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-card) !important;
background-image: none !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
.notifications-page-app .notification-card.unread {
border: 1px solid var(--nova-v3-line-strong) !important;
background: var(--nova-v3-glass-strong) !important;
background-image: var(--nova-v3-glass-strong) !important;
box-shadow: 0 14px 32px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.018) !important;
}
.notifications-page-app .notifications-preferences {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
.notifications-page-app .notification-title-row i {
background: var(--nova-v3-cyan) !important;
background-image: none !important;
box-shadow: 0 0 12px rgba(20,215,255,.22) !important;
}
:is(.favorites-empty button, .notifications-empty button, .discover-error button) {
min-height: 44px !important;
padding-inline: 20px !important;
border: 1px solid transparent !important;
border-radius: var(--nova-v3-pill) !important;
background:
linear-gradient(180deg, rgba(4,5,9,.98), rgba(0,0,0,.99)) padding-box,
var(--nova-v3-gradient) border-box !important;
color: #fff !important;
font-weight: 900 !important;
box-shadow: 0 8px 20px rgba(0,0,0,.30) !important;
}
@media (hover: hover) and (pointer: fine) {
.favorites-page-app .favorites-card:hover {
transform: translateY(-3px) !important;
}
}
.settings-section,
.settings-status-card {
border-radius: var(--nova-v3-radius-lg) !important;
}
.settings-row {
border-color: rgba(255,255,255,.06) !important;
}
.settings-row:hover {
background: rgba(255,255,255,.022) !important;
}
.settings-toggle {
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.07) !important;
box-shadow: none !important;
}
.settings-toggle.active {
border-color: transparent !important;
background: var(--nova-v3-gradient) !important;
box-shadow: 0 6px 18px rgba(155,77,255,.18) !important;
}
.settings-select {
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(6,7,11,.88) !important;
}
/* ------------------------------------------------------------------
COLLECTIONS / RAIL CATALOG / MATCH CENTER / COMMENTS / DOWNLOADS
------------------------------------------------------------------ */
:is(.movie-collections-rail, .server-collections-shell, .server-collection-details-shell,
.rail-catalog-main, .mc-root, .content-comments, .download-link-card) {
color: var(--nova-v3-text) !important;
}
.movie-collections-entry-button {
border: 1px solid var(--nova-v3-line) !important;
border-radius: var(--nova-v3-radius-lg) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
.movie-collections-entry-button::before {
content: none !important;
background: none !important;
}
.rail-catalog-grid {
gap: clamp(18px, 2.2vw, 24px) clamp(9px, 1.4vw, 15px) !important;
}
:is(.mc-match-card, .mc-list-hero, .mc-detail-card, .pro-comment-composer, .content-comment) {
border-color: var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
.content-comment-composer :is(textarea, input) {
border-color: rgba(255,255,255,.10) !important;
background: rgba(4,5,9,.92) !important;
color: #fff !important;
}
/* ------------------------------------------------------------------
EMPTY / ERROR / OFFLINE / LOADING STATES
------------------------------------------------------------------ */
:is(.favorites-empty, .notifications-empty, .catalog-empty, .rail-catalog-empty,
.sg-anime-catalog-empty, .schedule-empty, .day-empty, .nova-empty-state,
.discover-error, .server-driven-error, .standalone-watch-empty) {
color: var(--nova-v3-text) !important;
}
:is(.favorites-empty, .notifications-empty, .catalog-empty, .rail-catalog-empty,
.sg-anime-catalog-empty, .schedule-empty, .nova-empty-state, .discover-error) p {
color: var(--nova-v3-text-2) !important;
}
:is(.nova-offline-state, .nova-not-found, .nova-progressive-loader, .nova-motion-loader,
.nova-initial-gate) {
color: var(--nova-v3-text) !important;
}
/* Skeletons: elegant graphite pulse, no rainbow-card chrome. */
:is(.catalog-shimmer, .nova-shimmer, .home-skeleton-card, .home-skeleton-heading,
.catalog-landing-skeleton-card, .catalog-landing-skeleton-heading,
.anime-ref-skeleton-brand, .anime-ref-skeleton-tools > *, .anime-ref-skeleton-switcher > *,
.anime-ref-skeleton-hero-copy > *, .anime-ref-skeleton-cards > *,
.catalog-skeleton, .catalog-skeleton > *, .home-skeleton-row > *,
.home-hero-skeleton-copy > *, .schedule-skeleton > *, .skeleton-match,
.favorites-skeletons > *, .favorites-skeletons i,
.watch-quality-skeletons > *, .watch-server-skeletons > *,
.standalone-quality-skeletons > *, .standalone-server-skeletons > *) {
position: relative !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.045) !important;
background: linear-gradient(110deg, #07080c 12%, #0b0d14 44%, #0e1018 52%, #0b0d14 60%, #07080c 88%) !important;
background-size: 240% 100% !important;
box-shadow: 0 8px 22px rgba(0,0,0,.20) !important;
animation: novaV3SkeletonSweep 1.55s ease-in-out infinite !important;
}
@keyframes novaV3SkeletonSweep {
0% { background-position: 100% 50%; opacity: .82; }
50% { opacity: 1; }
100% { background-position: -120% 50%; opacity: .82; }
}
/* Loading/offline visual surfaces are dark objects; brand light is ambient, never a rainbow frame. */
.offline-device-card,
.standalone-source-panel {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass-strong) !important;
background-image: var(--nova-v3-glass-strong) !important;
box-shadow: var(--nova-v3-shadow-panel) !important;
}
.offline-device-card::before,
.offline-device-card::after,
.standalone-source-panel::before,
.standalone-source-panel::after {
border-image: none !important;
}
/* ------------------------------------------------------------------
DENSITY + RESPONSIVE RHYTHM
------------------------------------------------------------------ */
:is(.poster-rail, .shahid-home-rail, .studio-rail, .episode-rail, .brand-rail,
.continue-rail, .anime-ref-continue-rail, .anime-v2-studio-rail,
.anime-v2-episode-rail, .movie-producers-rail, .movie-collections-rail-row) {
gap: clamp(9px, 1.5vw, 14px) !important;
}
:is(.oscar-grid, .discover-desktop-grid, .rail-catalog-grid,
.sg-anime-commercial-grid, .sg-wrestling-media-grid, .nova-related-grid) {
align-items: start !important;
}
@media (max-width: 760px) {
:root {
--nova-v3-page-inline: 10px;
--nova-v3-section-gap: 26px;
--nova-v3-control-h-lg: 50px;
}
:is(.account-pro-header, .favorites-pro-header, .notifications-pro-header,
.nova-catalog-fixed-header, .catalog-landing-toolbar, .nova-native-catalog-header,
.rail-catalog-header, .details-standard-header, .nova-live-fixed-header) {
box-shadow: none !important;
}
:is(.shahid-section-heading, .section-heading, .sg-anime-pro-section > header,
.home-section > header, .anime-ref-section-head, .anime-v2-section-head) {
min-height: 44px !important;
padding-bottom: 8px !important;
}
.discover-mobile-section {
margin-top: 26px !important;
}
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
.sg-anime-pro-card .art, .sg-wrestling-card .artwork) {
border-radius: 9px !important;
box-shadow: 0 9px 22px rgba(0,0,0,.30) !important;
}
.movie-collection-card-art {
border-radius: 14px !important;
}
}
@media (max-width: 390px) {
:root {
--nova-v3-page-inline: 8px;
}
:is(.oscar-grid, .rail-catalog-grid) {
gap: 16px 8px !important;
}
}
/* ------------------------------------------------------------------
ACCESSIBILITY + MOTION SAFETY
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ------------------------------------------------------------------
OVERLAYS / DRAWER / NOTIFICATION HUB / ADS / SERVER HOSTS
------------------------------------------------------------------ */
.search-sheet {
border-bottom: 1px solid var(--nova-v3-line) !important;
background: rgba(3,4,7,.96) !important;
box-shadow: 0 16px 36px rgba(0,0,0,.48) !important;
backdrop-filter: blur(20px) saturate(1.06) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.06) !important;
}
.menu-backdrop,
.sg-notification-scrim {
background: rgba(0,0,0,.68) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
}
body .side-menu {
border-inline-start: 1px solid var(--nova-v3-line) !important;
background: linear-gradient(180deg, rgba(13,15,22,.98), rgba(3,4,7,.995)) !important;
box-shadow: -24px 0 54px rgba(0,0,0,.58) !important;
backdrop-filter: blur(24px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.05) !important;
}
body .side-menu > :is(a, button) {
color: rgba(248,249,253,.74) !important;
background: transparent !important;
transition: background 150ms var(--nova-v3-ease), color 150ms var(--nova-v3-ease), transform 140ms var(--nova-v3-ease) !important;
}
body .side-menu > :is(a, button):hover {
color: #fff !important;
background: rgba(255,255,255,.045) !important;
}
body .side-menu > :is(a, button):active {
transform: scale(.99) !important;
background: rgba(255,255,255,.065) !important;
}
body .sg-notification-panel,
body .sg-notification-headsup {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass-strong) !important;
background-image: var(--nova-v3-glass-strong) !important;
box-shadow: 0 22px 60px rgba(0,0,0,.58) !important;
backdrop-filter: blur(24px) saturate(1.06) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.06) !important;
}
body .sg-notification-item {
border-color: rgba(255,255,255,.07) !important;
background: transparent !important;
background-image: none !important;
}
body .sg-notification-item.unread {
background: rgba(155,77,255,.055) !important;
}
body .sg-notification-media,
body .sg-headsup-image {
border: 1px solid var(--nova-v3-line) !important;
background: #05060a !important;
background-image: none !important;
box-shadow: 0 8px 20px rgba(0,0,0,.26) !important;
}
body .sg-notification-empty span {
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.035) !important;
background-image: none !important;
box-shadow: none !important;
}
body .sg-commercial-ad {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
body .sg-commercial-ad > img {
border: 1px solid var(--nova-v3-line) !important;
background: #07080d !important;
box-shadow: 0 7px 18px rgba(0,0,0,.24) !important;
}
body .sg-commercial-ad > button:not(.sg-ad-close) {
border: 0 !important;
border-radius: var(--nova-v3-pill) !important;
background: var(--nova-v3-gradient) !important;
color: #fff !important;
font-weight: 900 !important;
box-shadow: 0 8px 20px rgba(108,76,255,.18) !important;
}
.rewarded-test-card {
border: 1px solid var(--nova-v3-line) !important;
background: var(--nova-v3-glass) !important;
background-image: var(--nova-v3-glass) !important;
box-shadow: var(--nova-v3-shadow-card) !important;
}
.public-link-resolver,
.nova-server-rendered-page-host {
background: #000 !important;
color: var(--nova-v3-text) !important;
}
/* ==================================================================
FINAL GUARD: content/media surfaces can NEVER receive brand-gradient
border/background from older late-stage CSS. Keep this block last.
================================================================== */
:is(.poster-wrapper,
.poster-wrap,
.nova-media-art,
.discover-desktop-art,
.movie-collection-card-art,
.favorites-card-art,
.notification-media,
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork,
.studio-tile,
.anime-v2-studio-card,
.anime-native-studio,
.wrestling-brand-tile,
.brand-tile-shell,
.movie-producer-card,
.channel-card,
.mc-match-card,
.related-poster-shell,
.episode-gallery-card,
.anime-ref-poster-art,
.anime-v2-episode-art,
.anime-ref-episode-art) {
border-image: none !important;
outline: 0 !important;
}
:is(.poster-wrapper,
.poster-wrap,
.nova-media-art,
.discover-desktop-art,
.movie-collection-card-art,
.favorites-card-art,
.notification-media,
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork,
.studio-tile,
.anime-v2-studio-card,
.anime-native-studio,
.wrestling-brand-tile,
.brand-tile-shell,
.movie-producer-card,
.channel-card,
.mc-match-card,
.related-poster-shell,
.episode-gallery-card,
.anime-ref-poster-art,
.anime-v2-episode-art,
.anime-ref-episode-art)::before,
:is(.poster-wrapper,
.poster-wrap,
.nova-media-art,
.discover-desktop-art,
.movie-collection-card-art,
.favorites-card-art,
.notification-media,
.sg-anime-pro-card .art,
.sg-wrestling-card .artwork,
.studio-tile,
.anime-v2-studio-card,
.anime-native-studio,
.wrestling-brand-tile,
.brand-tile-shell,
.movie-producer-card,
.channel-card,
.mc-match-card,
.related-poster-shell,
.episode-gallery-card,
.anime-ref-poster-art,
.anime-v2-episode-art,
.anime-ref-episode-art)::after {
background-image: none !important;
border-image: none !important;
box-shadow: none !important;
}
/* ===== source: nova-premium-cinematic-pass.css ===== */
/*
Space Gate Nova+ — Premium Cinematic Pass (2026-08-17)
Loaded LAST after the Ultimate Visual Contract.
Purpose:
- cinematic hero blending + restrained brand ambience
- single typography / spacing / radius / shadow rhythm
- clean media cards (never neon-framed)
- premium search / filters / buttons / tabs
- details + episodes elevation
- subtle interactions, skeletons and image reveal
- stable route polish that does NOT transform fixed-navigation ancestors
*/
:root {
/* Brand is intentionally scarce: only controls, active states and progress. */
--nova-p4-pink: #F04AD8;
--nova-p4-violet: #9B4DFF;
--nova-p4-cyan: #14D7FF;
--nova-p4-brand: linear-gradient(100deg, var(--nova-p4-pink) 0%, var(--nova-p4-violet) 50%, var(--nova-p4-cyan) 100%);
--nova-p4-bg: #000000;
--nova-p4-surface-0: #05060A;
--nova-p4-surface-1: #080A0F;
--nova-p4-surface-2: #0B0D14;
--nova-p4-glass: rgba(10, 12, 18, .78);
--nova-p4-glass-strong: rgba(8, 10, 15, .92);
--nova-p4-line: rgba(255, 255, 255, .065);
--nova-p4-line-strong: rgba(255, 255, 255, .125);
--nova-p4-text: rgba(255, 255, 255, .98);
--nova-p4-text-secondary: rgba(248, 249, 253, .68);
--nova-p4-text-muted: rgba(248, 249, 253, .48);
/* Only two elevation families across the product. */
--nova-p4-shadow-card: 0 12px 30px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .018);
--nova-p4-shadow-overlay: 0 22px 58px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255, 255, 255, .025);
--nova-p4-r-sm: 10px;
--nova-p4-r-card: 14px;
--nova-p4-r-panel: 18px;
--nova-p4-pill: 999px;
/* Strict 4/8 rhythm; 56 is the only large exception. */
--nova-p4-s1: 4px;
--nova-p4-s2: 8px;
--nova-p4-s3: 12px;
--nova-p4-s4: 16px;
--nova-p4-s5: 20px;
--nova-p4-s6: 24px;
--nova-p4-s7: 32px;
--nova-p4-s8: 40px;
--nova-p4-s9: 56px;
--nova-p4-page-x: clamp(12px, 3vw, 28px);
--nova-p4-section-y: clamp(30px, 4.5vw, 48px);
--nova-p4-hero-title: clamp(2.1rem, 6vw, 5.4rem);
--nova-p4-section-title: clamp(1.02rem, 2vw, 1.28rem);
--nova-p4-card-title: clamp(.72rem, 1.2vw, .90rem);
--nova-p4-meta: clamp(.60rem, .95vw, .74rem);
--nova-p4-ease: cubic-bezier(.2, .8, .2, 1);
}
/* ---------------------------------------------------------------
1. FOUNDATION / PREMIUM GRAIN / TYPE
--------------------------------------------------------------- */
html,
body,
#app,
.main-layout-shell,
.sg-route-frame,
.sg-route-surface {
background: var(--nova-p4-bg) !important;
}
body::after {
content: "";
position: fixed;
z-index: 2147482000;
inset: 0;
pointer-events: none;
opacity: .022;
background-image:
repeating-radial-gradient(circle at 0 0,
rgba(255,255,255,.9) 0 .45px,
transparent .55px 2.4px);
background-size: 5px 5px;
mix-blend-mode: soft-light;
}
html.sg-player-open body::after,
body.sg-player-open::after {
opacity: 0 !important;
}
body {
color: var(--nova-p4-text) !important;
font-feature-settings: "kern" 1, "liga" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Four-level hierarchy: Hero / Section / Card / Metadata. */
:is(.target-hero-text h1, .cinematic-title, .channel-detail-copy h1, .standalone-episode-series-name) {
color: var(--nova-p4-text) !important;
font-size: var(--nova-p4-hero-title) !important;
font-weight: 950 !important;
letter-spacing: -.035em !important;
}
:is(.shahid-section-heading h2, .section-heading h2, .nova-section-head h2,
.anime-ref-section-head h2, .anime-v2-section-head h2, .movie-producers-head h2,
.movie-collections-rail-head h2, .episode-gallery-heading h2,
.standalone-section-heading-row h2) {
color: var(--nova-p4-text) !important;
font-size: var(--nova-p4-section-title) !important;
line-height: 1.25 !important;
font-weight: 900 !important;
letter-spacing: -.012em !important;
}
:is(.media-title, .card-title, .poster-title, .nova-media-card > strong,
.discover-desktop-card > strong, .sg-anime-pro-card .copy b,
.sg-wrestling-card .copy > b, .anime-ref-card-copy strong,
.movie-collection-card-copy strong, .continue-watching-card > strong,
.episode-gallery-collapsed-copy strong) {
color: rgba(255,255,255,.96) !important;
font-size: var(--nova-p4-card-title) !important;
font-weight: 820 !important;
line-height: 1.38 !important;
}
:is(.media-meta, .card-meta, .nova-media-card > small, .discover-desktop-card > small,
.sg-anime-pro-card .copy small, .sg-wrestling-card .secondary-meta,
.anime-ref-card-copy small, .movie-collection-card-copy small,
.continue-watching-card > small, .episode-gallery-collapsed-copy small) {
color: var(--nova-p4-text-muted) !important;
font-size: var(--nova-p4-meta) !important;
line-height: 1.5 !important;
}
/* ---------------------------------------------------------------
2. CINEMATIC HERO — HOME / ANIME / WRESTLING / DETAILS
--------------------------------------------------------------- */
:is(.target-home-hero-shell, .cinematic-details-hero, .channel-detail-hero,
.standalone-episode-hero, .world-hub-stage, .anime-ref-hero, .wrestling-hero) {
background: #000 !important;
}
.target-hero-slide::before,
.cinematic-details-hero::before,
.channel-detail-hero::before,
.standalone-episode-hero::before {
content: "";
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 58% 38% at 50% 82%, rgba(155,77,255,.055), transparent 70%),
radial-gradient(ellipse 82% 64% at 50% 42%, transparent 52%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.58) 100%);
}
.target-hero-shade,
.cinematic-details-shade,
.channel-detail-shade,
.standalone-episode-shade {
background:
linear-gradient(180deg,
rgba(0,0,0,.12) 0%,
rgba(0,0,0,.02) 24%,
rgba(0,0,0,.04) 44%,
rgba(0,0,0,.30) 64%,
rgba(0,0,0,.76) 82%,
#000 100%),
radial-gradient(ellipse 92% 82% at 50% 48%, transparent 44%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.62) 100%) !important;
}
/* Desktop details needs a side-readable fade without killing the artwork. */
@media (min-width: 900px) {
.cinematic-details-shade {
background:
linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.10) 56%, rgba(0,0,0,.86) 100%),
linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.78) 26%, rgba(0,0,0,.26) 54%, rgba(0,0,0,.04) 78%, rgba(0,0,0,.18) 100%),
radial-gradient(ellipse 70% 90% at 70% 45%, transparent 48%, rgba(0,0,0,.34) 100%) !important;
}
}
:is(.target-hero-text, .cinematic-hero-copy, .channel-detail-copy) {
position: relative;
}
:is(.target-hero-text, .cinematic-hero-copy, .channel-detail-copy)::before {
content: "";
position: absolute;
z-index: -1;
inset: -28px -36px;
pointer-events: none;
opacity: .65;
filter: blur(24px);
background: radial-gradient(ellipse at center, rgba(0,0,0,.56), transparent 72%);
}
:is(.target-hero-text h1, .cinematic-title, .cinematic-title-en, .channel-detail-copy h1) {
text-shadow: 0 5px 24px rgba(0,0,0,.78), 0 1px 0 rgba(255,255,255,.025) !important;
}
.target-home-hero-shell {
margin-bottom: var(--nova-p4-s7) !important;
}
.target-hero-copy {
bottom: clamp(76px, 10dvh, 112px) !important;
}
.target-hero-text {
width: min(100%, 620px) !important;
}
.target-hero-text p {
color: rgba(255,255,255,.76) !important;
font-weight: 720 !important;
}
.target-hero-meta {
color: rgba(255,255,255,.66) !important;
gap: 6px 10px !important;
}
.target-hero-meta > span:not(.target-hero-status) + span:not(.target-hero-status)::before {
width: 3px !important;
height: 3px !important;
margin-inline: 2px 8px !important;
border-radius: 50% !important;
background: rgba(255,255,255,.40) !important;
}
/* Tiny brand status jewel is acceptable; it is not a card frame. */
.target-hero-status::before {
width: 7px !important;
height: 7px !important;
box-shadow: 0 0 10px rgba(155,77,255,.22) !important;
}
.target-hero-actions {
width: min(100%, 410px) !important;
margin-top: var(--nova-p4-s4) !important;
gap: var(--nova-p4-s3) !important;
}
.target-watch-button,
.target-save-button {
height: 48px !important;
min-height: 48px !important;
padding-inline: 20px !important;
font-size: .82rem !important;
}
/* ---------------------------------------------------------------
3. MEDIA CARDS — CLEAN, FLAT, CINEMATIC
--------------------------------------------------------------- */
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
.movie-collection-card-art, .favorites-card-art, .notification-media,
.anime-ref-poster-art, .anime-v2-episode-art, .anime-ref-episode-art,
.related-poster-shell, .episode-gallery-card,
.sg-anime-pro-card .art, .sg-wrestling-card .artwork,
.shahid-poster-image, .shahid-ranked-poster, .shahid-landscape-image,
.shahid-live-poster, .continue-watching-image) {
border: 1px solid rgba(255,255,255,.055) !important;
border-image: none !important;
border-radius: var(--nova-p4-r-card) !important;
background: var(--nova-p4-surface-1) !important;
background-image: none !important;
box-shadow: var(--nova-p4-shadow-card) !important;
overflow: hidden !important;
}
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
.movie-collection-card-art, .favorites-card-art, .notification-media,
.anime-ref-poster-art, .anime-v2-episode-art, .anime-ref-episode-art,
.related-poster-shell, .episode-gallery-card,
.sg-anime-pro-card .art, .sg-wrestling-card .artwork,
.shahid-poster-image, .shahid-ranked-poster, .shahid-landscape-image,
.shahid-live-poster, .continue-watching-image)::before,
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
.movie-collection-card-art, .favorites-card-art, .notification-media,
.anime-ref-poster-art, .anime-v2-episode-art, .anime-ref-episode-art,
.related-poster-shell, .episode-gallery-card,
.sg-anime-pro-card .art, .sg-wrestling-card .artwork,
.shahid-poster-image, .shahid-ranked-poster, .shahid-landscape-image,
.shahid-live-poster, .continue-watching-image)::after {
border-image: none !important;
box-shadow: none !important;
}
:is(.poster-wrapper, .poster-wrap, .nova-media-art,
.sg-anime-pro-card.poster .art, .sg-wrestling-card.poster .artwork,
.sg-wrestling-card.ranked .artwork, .anime-ref-poster-art) {
aspect-ratio: 2 / 3 !important;
}
:is(.sg-anime-pro-card.episode .art, .sg-wrestling-card.landscape .artwork,
.anime-v2-episode-art, .anime-ref-episode-art, .continue-watching-image,
.episode-gallery-collapsed-art, .episode-gallery-expanded-art) {
aspect-ratio: 16 / 9 !important;
}
/* No outer neon on focus: use a neutral high-contrast ring. */
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
.continue-watching-card):focus-visible {
outline: 2px solid rgba(255,255,255,.62) !important;
outline-offset: 3px !important;
}
:is(.sg-anime-pro-card, .sg-wrestling-card):focus-visible :is(.art, .artwork),
.continue-watching-card:focus-visible .continue-watching-image {
outline: 0 !important;
border-color: rgba(255,255,255,.16) !important;
box-shadow: var(--nova-p4-shadow-card) !important;
}
@media (hover: hover) and (pointer: fine) {
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
.continue-watching-card) {
transition: transform 180ms var(--nova-p4-ease), opacity 180ms var(--nova-p4-ease) !important;
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
.continue-watching-card):hover {
transform: translateY(-3px) !important;
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
.continue-watching-card):hover :is(.poster-wrapper, .poster-wrap, .nova-media-art,
.discover-desktop-art, .movie-collection-card-art, .art, .artwork,
.anime-ref-poster-art, .anime-v2-episode-art, .continue-watching-image) {
border-color: rgba(255,255,255,.105) !important;
box-shadow: 0 17px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
.continue-watching-card):hover img {
transform: scale(1.025) !important;
}
}
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
.continue-watching-card):active {
transform: scale(.985) !important;
}
/* ---------------------------------------------------------------
4. IMAGE REVEAL — SafeImage lifecycle class
--------------------------------------------------------------- */
.nova-fast-image {
transition: opacity 220ms var(--nova-p4-ease), transform 280ms var(--nova-p4-ease), filter 220ms var(--nova-p4-ease) !important;
}
.nova-fast-image.nova-image-pending {
opacity: .34 !important;
filter: saturate(.78) brightness(.72) blur(3px) !important;
}
.nova-fast-image.nova-image-loaded {
opacity: 1 !important;
filter: none !important;
}
/* ---------------------------------------------------------------
5. CONTINUE WATCHING — premium 16:9 + hairline progress
--------------------------------------------------------------- */
.continue-watching-section {
padding-block: var(--nova-p4-s4) var(--nova-p4-section-y) !important;
}
.continue-watching-section .shahid-section-heading {
min-height: 52px !important;
padding-inline: var(--nova-p4-page-x) !important;
}
.continue-watching-section .shahid-section-heading h2 {
padding-inline-start: 0 !important;
}
.continue-watching-section .shahid-section-heading h2::before {
content: none !important;
display: none !important;
}
.continue-watching-rail {
padding-inline: var(--nova-p4-page-x) !important;
scroll-padding-inline: var(--nova-p4-page-x) !important;
gap: var(--nova-p4-s3) !important;
}
.continue-watching-card {
flex-basis: clamp(220px, 42vw, 320px) !important;
max-width: 320px !important;
gap: 6px !important;
}
.continue-watching-progress {
inset-inline: 0 !important;
bottom: 0 !important;
height: 3px !important;
border-radius: 0 !important;
background: rgba(255,255,255,.14) !important;
}
.continue-watching-progress > i {
background: var(--nova-p4-brand) !important;
box-shadow: none !important;
}
.continue-watching-card > small {
color: var(--nova-p4-text-muted) !important;
}
/* ---------------------------------------------------------------
6. SEARCH / FILTERS / TABS — jewellery, not decoration
--------------------------------------------------------------- */
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
.sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
.world-hub-search, .search-solid-input) {
min-height: 46px !important;
border-radius: var(--nova-p4-r-sm) !important;
box-shadow: 0 10px 24px rgba(0,0,0,.30), 0 0 12px rgba(155,77,255,.045) !important;
}
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
.sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
.world-hub-search):focus-within,
.search-solid-input:focus {
box-shadow: 0 12px 28px rgba(0,0,0,.38), 0 0 18px rgba(155,77,255,.11) !important;
}
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
.sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
.world-hub-search) > .oscar-icon,
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
.sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
.world-hub-search) svg {
transition: transform 180ms var(--nova-p4-ease), opacity 180ms var(--nova-p4-ease) !important;
}
:is(.search-field, .discover-desktop-search, .discover-search-box, .nova-catalog-search,
.sg-reference-search, .nova-live-search, .nova-search-bar, .episode-gallery-search,
.world-hub-search):focus-within > .oscar-icon {
transform: scale(1.06) !important;
}
.search-field > .icon-button:last-child {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 50% !important;
background: rgba(255,255,255,.045) !important;
}
:is(.category-tabs button, .filter-chip, .nova-catalog-select-card,
.discover-desktop-tabs button, .discover-result-tabs button, .discover-topic-chip,
.favorites-filters button, .notifications-filters button, .mc-day-tabs button,
.mc-league-tabs button, .anime-season-chip, .related-type-chip,
.schedule-day-control, .archive-year-control) {
min-height: 38px !important;
padding-inline: 13px !important;
border-radius: var(--nova-p4-r-sm) !important;
font-size: .74rem !important;
}
:is(.cinematic-tabs, .pro-comments-tabs, .standalone-episode-tabs,
.sg-anime-pro-nav, .sg-wrestling-section-nav) {
gap: clamp(8px, 2vw, 22px) !important;
}
:is(.cinematic-tabs button, .pro-comments-tabs button, .standalone-episode-tabs button,
.sg-anime-pro-nav button, .sg-wrestling-section-nav button).active::after {
right: 30% !important;
left: 30% !important;
height: 2px !important;
box-shadow: 0 0 8px rgba(155,77,255,.16) !important;
transition: right 190ms var(--nova-p4-ease), left 190ms var(--nova-p4-ease), opacity 190ms var(--nova-p4-ease) !important;
}
/* ---------------------------------------------------------------
7. BOTTOM NAV — gradient icon + white label + tiny indicator
--------------------------------------------------------------- */
nav.oscar-bottom-nav.original-bottom-nav {
background: rgba(3,4,7,.94) !important;
border-top-color: rgba(255,255,255,.055) !important;
box-shadow: 0 -16px 36px rgba(0,0,0,.44) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) {
gap: 3px !important;
color: rgba(248,249,253,.44) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active b,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-label-text {
background: transparent !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #fff !important;
color: #fff !important;
font-weight: 800 !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a)::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 2px !important;
left: 50% !important;
width: 18px !important;
height: 2px !important;
border-radius: var(--nova-p4-pill) !important;
opacity: 0 !important;
transform: translateX(-50%) scaleX(.5) !important;
background: transparent !important;
box-shadow: none !important;
transition: opacity 170ms var(--nova-p4-ease), transform 190ms var(--nova-p4-ease) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active::before {
opacity: 1 !important;
transform: translateX(-50%) scaleX(1) !important;
background: var(--nova-p4-brand) !important;
box-shadow: 0 0 8px rgba(155,77,255,.18) !important;
}
/* ---------------------------------------------------------------
8. DETAILS — cinematic hierarchy, unboxed story, glass info cells
--------------------------------------------------------------- */
.cinematic-details-hero {
min-height: clamp(430px, 58dvh, 680px) !important;
}
.cinematic-hero-copy {
width: min(48vw, 560px) !important;
}
.cinematic-title {
margin-block: 10px 12px !important;
}
.cinematic-meta {
gap: 6px !important;
}
.cinematic-meta > * {
min-height: 28px !important;
padding-inline: 10px !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: var(--nova-p4-r-sm) !important;
background: rgba(0,0,0,.34) !important;
color: rgba(255,255,255,.74) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.cinematic-ranking {
margin-top: var(--nova-p4-s3) !important;
gap: var(--nova-p4-s2) !important;
}
.cinematic-ranking span {
min-height: 34px !important;
padding-inline: 11px !important;
border-color: rgba(255,255,255,.075) !important;
border-radius: var(--nova-p4-r-sm) !important;
background: rgba(3,5,9,.46) !important;
color: var(--nova-p4-text-secondary) !important;
}
.cinematic-actions {
margin-top: var(--nova-p4-s5) !important;
gap: var(--nova-p4-s3) !important;
}
/* Narrative text should breathe on the canvas rather than live inside a box. */
:is(.reference-story-block, .reference-details-story, .series-story, .episode-story,
.standalone-story-card, .standalone-episode-narrative .standalone-story-card) {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
:is(.reference-story-block, .standalone-story-card, .series-story, .episode-story) {
padding-inline: 0 !important;
}
:is(.reference-details-story, .reference-story-block p, .series-story p,
.episode-story p, .standalone-story-card p, .cinematic-story p) {
color: rgba(248,249,253,.72) !important;
font-size: clamp(.84rem, 1.3vw, 1rem) !important;
line-height: 1.9 !important;
max-width: 76ch !important;
}
/* Information turns into quiet mini glass cells, never neon. */
.reference-info-grid,
.anime-hero-facts,
.standalone-episode-info-grid,
.channel-detail-facts {
display: grid !important;
gap: var(--nova-p4-s2) !important;
border: 0 !important;
}
.reference-info-grid > div,
.anime-hero-facts > div,
.standalone-episode-info-grid > div,
.channel-detail-facts > div {
min-height: 56px !important;
padding: 10px 12px !important;
border: 1px solid rgba(255,255,255,.065) !important;
border-radius: var(--nova-p4-r-sm) !important;
background: rgba(255,255,255,.025) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.015) !important;
}
.reference-info-grid dt,
.anime-hero-facts dt,
.standalone-episode-info-grid span,
.channel-detail-facts span {
color: var(--nova-p4-text-muted) !important;
font-size: .62rem !important;
}
.reference-info-grid dd,
.anime-hero-facts dd,
.standalone-episode-info-grid strong,
.channel-detail-facts strong {
color: rgba(255,255,255,.92) !important;
font-size: .72rem !important;
font-weight: 800 !important;
}
.cinematic-details-content {
width: min(calc(100% - 2 * var(--nova-p4-page-x)), 1120px) !important;
padding-bottom: var(--nova-p4-s9) !important;
}
.cinematic-tabs {
margin-top: var(--nova-p4-s2) !important;
}
.cinematic-desktop-content,
.cinematic-tab-content {
padding-top: var(--nova-p4-s5) !important;
}
/* ---------------------------------------------------------------
9. EPISODES — clean 16:9 cards + status progress, no gradient frame
--------------------------------------------------------------- */
.episode-gallery-list {
gap: var(--nova-p4-s3) !important;
}
.episode-gallery-card,
.episode-gallery-card.expanded,
.cinematic-tab-content .nova-episode-card,
.nova-episode-card,
.episode-gallery-entry {
border-color: rgba(255,255,255,.065) !important;
background: var(--nova-p4-surface-1) !important;
background-image: none !important;
box-shadow: var(--nova-p4-shadow-card) !important;
}
.episode-gallery-card::before,
.episode-gallery-card.expanded::before {
content: none !important;
display: none !important;
background: none !important;
}
.episode-gallery-collapsed-art,
.episode-gallery-expanded-art,
.cinematic-tab-content .ep-thumb {
aspect-ratio: 16 / 9 !important;
border-radius: var(--nova-p4-r-sm) !important;
}
.episode-gallery-progress,
:is(.nova-episode-card, .episode-gallery-card) .episode-progress,
:is(.nova-episode-card, .episode-gallery-card) .progress-fill {
height: 3px !important;
background: var(--nova-p4-brand) !important;
box-shadow: none !important;
}
.episode-gallery-collapsed-copy strong {
margin-bottom: 5px !important;
}
.episode-gallery-collapsed-copy small {
color: var(--nova-p4-text-muted) !important;
line-height: 1.65 !important;
}
.episode-gallery-collapsed-meta {
color: var(--nova-p4-text-muted) !important;
}
.episode-gallery-more,
.episode-gallery-collapse {
border-color: rgba(255,255,255,.10) !important;
border-radius: var(--nova-p4-r-sm) !important;
background: rgba(255,255,255,.025) !important;
}
.episode-gallery-more:hover,
.episode-gallery-more:focus-visible {
border-color: rgba(255,255,255,.18) !important;
}
/* ---------------------------------------------------------------
10. ANIME / WRESTLING — same Nova identity, subtle world ambience
--------------------------------------------------------------- */
:is(.sg-anime-pro-home, .sg-anime-catalog, .anime-ref-shell, .anime-v2-shell) {
background:
radial-gradient(circle at 84% 10%, rgba(155,77,255,.035), transparent 25%),
radial-gradient(circle at 14% 36%, rgba(20,215,255,.018), transparent 24%),
#000 !important;
}
:is(.sg-wrestling-home, .sg-wrestling-catalog, .wrestling-world-shell) {
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.028), transparent 34%),
linear-gradient(180deg, #020306 0%, #000 38%) !important;
}
/* Studio / wrestling brand tiles are navigation/data surfaces: quiet glass only. */
:is(.studio-tile, .anime-v2-studio-card, .anime-native-studio,
.wrestling-brand-tile, .brand-tile-shell, .movie-producer-card) {
border-color: rgba(255,255,255,.065) !important;
border-radius: var(--nova-p4-r-card) !important;
background: linear-gradient(155deg, rgba(13,15,22,.78), rgba(5,6,10,.92)) !important;
background-image: linear-gradient(155deg, rgba(13,15,22,.78), rgba(5,6,10,.92)) !important;
box-shadow: var(--nova-p4-shadow-card) !important;
}
/* ---------------------------------------------------------------
11. PANELS / GLASS — reserve blur for overlays and chrome
--------------------------------------------------------------- */
:is(.oscar-toolbar, .account-pro-header, .favorites-pro-header, .notifications-pro-header,
.nova-catalog-fixed-header, .catalog-landing-toolbar, .nova-native-catalog-header,
.rail-catalog-header, .details-standard-header, .nova-live-fixed-header,
.search-sheet, .nova-live-filter-panel, .nova-live-menu, .sg-notification-panel,
.sg-notification-headsup, .side-menu) {
backdrop-filter: blur(20px) saturate(1.05) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.05) !important;
}
/* Content panels are flatter than overlays. */
:is(.reference-info-panel, .reference-watch-panel, .channel-detail-status-card,
.channel-detail-source-card, .episode-panel, .episode-gallery-panel,
.favorites-featured, .notifications-delivery-state, .settings-intro,
.settings-section, .settings-status-card, .mc-match-card, .mc-detail-card,
.content-comment, .download-link-card) {
border-color: rgba(255,255,255,.06) !important;
border-radius: var(--nova-p4-r-panel) !important;
background: rgba(8,10,15,.72) !important;
background-image: none !important;
box-shadow: var(--nova-p4-shadow-card) !important;
}
/* ---------------------------------------------------------------
12. SPACING / BREATHING ROOM
--------------------------------------------------------------- */
:is(.shahid-home-section, .oscar-section, .sg-anime-pro-section, .home-section,
.anime-ref-section, .anime-v2-studios, .anime-v2-episodes,
.movie-producers-section, .movie-collections-rail, .nova-content-section) {
margin-bottom: var(--nova-p4-section-y) !important;
}
:is(.shahid-section-heading, .section-heading, .sg-anime-pro-section > header,
.home-section > header, .anime-ref-section-head, .anime-v2-section-head,
.movie-producers-head, .movie-collections-rail-head, .nova-section-head) {
min-height: 48px !important;
padding-bottom: var(--nova-p4-s3) !important;
}
:is(.poster-rail, .shahid-home-rail, .studio-rail, .episode-rail, .brand-rail,
.continue-rail, .anime-ref-continue-rail, .anime-v2-studio-rail,
.anime-v2-episode-rail, .movie-producers-rail, .movie-collections-rail-row) {
gap: var(--nova-p4-s3) !important;
}
:is(.oscar-grid, .discover-desktop-grid, .rail-catalog-grid,
.sg-anime-commercial-grid, .sg-wrestling-media-grid, .nova-related-grid) {
row-gap: var(--nova-p4-s6) !important;
column-gap: var(--nova-p4-s3) !important;
}
/* ---------------------------------------------------------------
13. SKELETONS — slower graphite shimmer
--------------------------------------------------------------- */
:is(.catalog-shimmer, .nova-shimmer, .home-skeleton-card, .home-skeleton-heading,
.catalog-landing-skeleton-card, .catalog-landing-skeleton-heading,
.anime-ref-skeleton-brand, .anime-ref-skeleton-tools > *, .anime-ref-skeleton-switcher > *,
.anime-ref-skeleton-hero-copy > *, .anime-ref-skeleton-cards > *,
.catalog-skeleton, .catalog-skeleton > *, .home-skeleton-row > *,
.home-hero-skeleton-copy > *, .schedule-skeleton > *, .skeleton-match,
.favorites-skeletons > *, .favorites-skeletons i,
.watch-quality-skeletons > *, .watch-server-skeletons > *,
.standalone-quality-skeletons > *, .standalone-server-skeletons > *) {
border-color: rgba(255,255,255,.035) !important;
background: linear-gradient(110deg, #06070A 12%, #090B10 44%, #0D0F16 52%, #090B10 60%, #06070A 88%) !important;
background-size: 245% 100% !important;
box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
animation-duration: 1.9s !important;
animation-timing-function: ease-in-out !important;
}
/* ---------------------------------------------------------------
14. EMPTY / ERROR — minimal, one clear action
--------------------------------------------------------------- */
:is(.favorites-empty, .notifications-empty, .catalog-empty, .rail-catalog-empty,
.sg-anime-catalog-empty, .schedule-empty, .day-empty, .nova-empty-state,
.discover-error, .server-driven-error, .standalone-watch-empty,
.nova-offline-state, .nova-not-found) {
max-width: 520px !important;
margin-inline: auto !important;
padding: clamp(28px, 6vw, 52px) var(--nova-p4-s6) !important;
text-align: center !important;
}
:is(.favorites-empty, .notifications-empty, .catalog-empty, .rail-catalog-empty,
.sg-anime-catalog-empty, .schedule-empty, .nova-empty-state, .discover-error,
.nova-offline-state, .nova-not-found) p {
max-width: 44ch !important;
margin-inline: auto !important;
color: var(--nova-p4-text-secondary) !important;
line-height: 1.75 !important;
}
/* ---------------------------------------------------------------
15. CONTENT ENTRANCE — 8px lift without touching fixed ancestors
--------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.sg-route-surface :is(.shahid-home-section, .catalog-landing-main > section,
.nova-catalog-main > section, .cinematic-details-content,
.favorites-page-content > section, .notifications-page-content > section,
.settings-layout > section, .discover-mobile-section,
.server-collections-shell > section, .rail-catalog-main > section) {
animation: novaP4ContentIn 190ms var(--nova-p4-ease) both;
}
}
@keyframes novaP4ContentIn {
from { opacity: .01; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------------------------------------------------------------
16. RESPONSIVE POLISH
--------------------------------------------------------------- */
@media (max-width: 760px) {
:root {
--nova-p4-page-x: 12px;
--nova-p4-section-y: 32px;
--nova-p4-hero-title: clamp(2rem, 11.5vw, 4rem);
}
body::after { opacity: .014; }
.target-hero-slide {
height: clamp(520px, 76dvh, 700px) !important;
min-height: 520px !important;
}
.target-hero-copy {
right: 14px !important;
left: 14px !important;
bottom: 74px !important;
}
.target-hero-actions {
width: min(100%, 360px) !important;
gap: 10px !important;
}
.target-watch-button,
.target-save-button {
height: 44px !important;
min-height: 44px !important;
font-size: .76rem !important;
}
.cinematic-details-hero {
min-height: clamp(520px, 70dvh, 680px) !important;
}
.cinematic-hero-copy {
width: auto !important;
}
.cinematic-actions {
gap: 8px !important;
}
.reference-info-grid,
.standalone-episode-info-grid,
.channel-detail-facts {
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
.episode-gallery-list {
grid-template-columns: 1fr !important;
}
.episode-gallery-collapsed {
grid-template-columns: minmax(128px, 38%) minmax(0,1fr) !important;
}
.episode-gallery-collapsed-meta {
display: none !important;
}
}
@media (max-width: 390px) {
:root {
--nova-p4-page-x: 10px;
--nova-p4-section-y: 28px;
}
:is(.category-tabs button, .filter-chip, .nova-catalog-select-card,
.discover-desktop-tabs button, .discover-result-tabs button, .discover-topic-chip,
.favorites-filters button, .notifications-filters button) {
min-height: 36px !important;
padding-inline: 11px !important;
}
}
/* ---------------------------------------------------------------
17. REDUCED MOTION + FINAL NO-NEON CARD GUARD
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.nova-fast-image,
:is(.nova-item-card, .oscar-card, .nova-media-card, .discover-desktop-card,
.movie-collection-card, .sg-anime-pro-card, .sg-wrestling-card,
.anime-ref-poster-card, .anime-v2-episode-card, .related-media-card,
.continue-watching-card) {
transition: none !important;
animation: none !important;
}
.nova-fast-image.nova-image-pending {
opacity: 1 !important;
filter: none !important;
}
}
/* Content artwork / media / studio / wrestling tiles can never inherit a brand frame. */
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
.movie-collection-card-art, .favorites-card-art, .notification-media,
.sg-anime-pro-card .art, .sg-wrestling-card .artwork,
.studio-tile, .anime-v2-studio-card, .anime-native-studio,
.wrestling-brand-tile, .brand-tile-shell, .movie-producer-card,
.channel-card, .mc-match-card, .related-poster-shell,
.episode-gallery-card, .anime-ref-poster-art,
.anime-v2-episode-art, .anime-ref-episode-art,
.continue-watching-image) {
border-image: none !important;
outline-color: transparent !important;
}
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
.movie-collection-card-art, .favorites-card-art, .notification-media,
.sg-anime-pro-card .art, .sg-wrestling-card .artwork,
.studio-tile, .anime-v2-studio-card, .anime-native-studio,
.wrestling-brand-tile, .brand-tile-shell, .movie-producer-card,
.channel-card, .mc-match-card, .related-poster-shell,
.episode-gallery-card, .anime-ref-poster-art,
.anime-v2-episode-art, .anime-ref-episode-art,
.continue-watching-image)::before,
:is(.poster-wrapper, .poster-wrap, .nova-media-art, .discover-desktop-art,
.movie-collection-card-art, .favorites-card-art, .notification-media,
.sg-anime-pro-card .art, .sg-wrestling-card .artwork,
.studio-tile, .anime-v2-studio-card, .anime-native-studio,
.wrestling-brand-tile, .brand-tile-shell, .movie-producer-card,
.channel-card, .mc-match-card, .related-poster-shell,
.episode-gallery-card, .anime-ref-poster-art,
.anime-v2-episode-art, .anime-ref-episode-art,
.continue-watching-image)::after {
border-image: none !important;
}
/* ---------------------------------------------------------------
18. PLAYER — cinematic chrome, quiet until interaction
--------------------------------------------------------------- */
.sg-player-controls {
padding-bottom: max(18px, var(--safe-bottom, 0px)) !important;
background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.24) 66%, transparent) !important;
}
.sg-player-control-row {
gap: 10px !important;
}
.sg-player-icon,
.sg-player-select-wrap {
border: 1px solid rgba(255,255,255,.105) !important;
background: rgba(4,5,9,.48) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
transition: transform 150ms var(--nova-p4-ease), background 170ms var(--nova-p4-ease), border-color 170ms var(--nova-p4-ease) !important;
}
.sg-player-icon:active {
transform: scale(.94) !important;
}
.sg-player-main-play {
box-shadow: 0 14px 34px rgba(0,0,0,.44), 0 0 18px rgba(155,77,255,.12) !important;
}
.sg-player-timeline,
.sg-player-progress-track {
height: 3px !important;
border-radius: var(--nova-p4-pill) !important;
}
.sg-player-toast,
.sg-player-delay-panel,
.sg-player-next-prompt {
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: var(--nova-p4-r-panel) !important;
background: rgba(7,8,12,.88) !important;
box-shadow: var(--nova-p4-shadow-overlay) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
/* ---------------------------------------------------------------
19. ACCOUNT / FAVORITES / NOTIFICATIONS / SETTINGS
--------------------------------------------------------------- */
:is(.sg-account-profile-card, .sg-account-plan-card, .sg-account-stats,
.sg-account-menu, .sg-account-offers article, .sg-account-quick-grid > button,
.favorites-featured, .notifications-delivery-state,
.settings-intro, .settings-section, .settings-status-card) {
border-color: rgba(255,255,255,.06) !important;
border-radius: var(--nova-p4-r-panel) !important;
background: rgba(8,10,15,.70) !important;
background-image: none !important;
box-shadow: var(--nova-p4-shadow-card) !important;
}
.sg-account-portal,
.favorites-page-content,
.notifications-page-content,
.settings-layout {
gap: var(--nova-p4-s6) !important;
}
.sg-account-quick-grid > button,
.settings-row {
transition: background 160ms var(--nova-p4-ease), transform 150ms var(--nova-p4-ease), border-color 160ms var(--nova-p4-ease) !important;
}
@media (hover:hover) and (pointer:fine) {
.sg-account-quick-grid > button:hover,
.settings-row:hover {
background: rgba(255,255,255,.035) !important;
border-color: rgba(255,255,255,.09) !important;
}
}
.settings-row {
min-height: 58px !important;
padding-block: 10px !important;
}
.settings-row-icon,
.settings-status-icon,
.sg-account-plan-icon {
border: 1px solid rgba(255,255,255,.07) !important;
background: rgba(255,255,255,.025) !important;
box-shadow: none !important;
}
.settings-brand-mark,
.sg-account-brand-mark {
filter: drop-shadow(0 8px 22px rgba(0,0,0,.42)) !important;
}
.favorites-grid {
row-gap: var(--nova-p4-s6) !important;
column-gap: var(--nova-p4-s3) !important;
}
.notifications-page-app .notification-card {
border-radius: var(--nova-p4-r-card) !important;
}
.notifications-page-app .notification-card.unread {
border-color: rgba(255,255,255,.12) !important;
background: rgba(12,14,21,.82) !important;
background-image: none !important;
}
/* ---------------------------------------------------------------
20. LIVE / MATCHES / COLLECTIONS / COMMENTS
--------------------------------------------------------------- */
:is(.channel-card, .mc-match-card, .movie-collection-card, .content-comment,
.download-link-card, .reference-related-card) {
border-color: rgba(255,255,255,.055) !important;
border-radius: var(--nova-p4-r-card) !important;
background-image: none !important;
box-shadow: var(--nova-p4-shadow-card) !important;
}
.channel-logo-wrapper {
border-color: rgba(255,255,255,.055) !important;
border-radius: var(--nova-p4-r-sm) !important;
}
.live-badge {
border-color: rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.90) !important;
box-shadow: none !important;
}
.movie-collection-card-art {
aspect-ratio: 16 / 9 !important;
}
.pro-comment-composer {
border-color: rgba(255,255,255,.065) !important;
border-radius: var(--nova-p4-r-panel) !important;
background: rgba(8,10,15,.72) !important;
box-shadow: var(--nova-p4-shadow-card) !important;
}
.pro-comment-composer > span {
border-color: rgba(255,255,255,.09) !important;
background: rgba(255,255,255,.025) !important;
color: rgba(255,255,255,.86) !important;
box-shadow: none !important;
}
.pro-comment-composer input,
.content-comment-composer :is(textarea, input) {
border-color: rgba(255,255,255,.075) !important;
border-radius: var(--nova-p4-r-sm) !important;
background: rgba(3,4,7,.76) !important;
}
.comment-send-progress {
border-color: rgba(255,255,255,.07) !important;
background: rgba(255,255,255,.022) !important;
}
/* ---------------------------------------------------------------
21. CTA MICRO-INTERACTION — tactile but restrained
--------------------------------------------------------------- */
:is(.primary-action, .nova-btn-primary, .target-watch-button, .cinematic-watch-button,
.channel-primary-action, .standalone-episode-play, .watch-retry-button,
.nova-offline-retry, .nova-not-found-actions .primary,
.server-driven-error button, .discover-preview-actions .primary,
.settings-actions .primary, .sg-account-plan-action,
.sg-account-login form button, .favorites-featured-copy button) {
background-size: 130% 100% !important;
background-position: 50% 50% !important;
transition: transform 150ms var(--nova-p4-ease), filter 170ms var(--nova-p4-ease),
box-shadow 180ms var(--nova-p4-ease), background-position 240ms var(--nova-p4-ease) !important;
}
@media (hover:hover) and (pointer:fine) {
:is(.primary-action, .nova-btn-primary, .target-watch-button, .cinematic-watch-button,
.channel-primary-action, .standalone-episode-play, .watch-retry-button,
.nova-offline-retry, .nova-not-found-actions .primary,
.server-driven-error button, .discover-preview-actions .primary,
.settings-actions .primary, .sg-account-plan-action,
.sg-account-login form button, .favorites-featured-copy button):hover {
background-position: 70% 50% !important;
}
}
/* ===== source: nova-home-experience-v2.css ===== */
/* =====================================================================
Space Gate Nova+ — Home Experience V2
Cinematic hierarchy inspired by premium streaming editorial layouts.
Brand rule remains strict: gradients belong to actions/search/active UI;
media artwork stays graphite/black with neutral borders only.
===================================================================== */
:root {
--nova-home-section-gap: clamp(26px, 5vw, 44px);
--nova-home-heading-x: max(16px, var(--safe-right, 0px));
--nova-home-card-shadow: 0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
}
/* 1) HERO — the first frame owns the screen, but leaves a hint of the feed. */
.target-home-hero-shell {
margin: 0 0 8px !important;
background: #000 !important;
}
.target-hero-slide {
height: clamp(560px, 72dvh, 790px) !important;
min-height: 560px !important;
}
.target-hero-slide::after {
background:
radial-gradient(ellipse 76% 34% at 50% 87%, rgba(0,0,0,.30), transparent 70%),
linear-gradient(180deg, rgba(0,0,0,.07) 0%, rgba(0,0,0,0) 31%, rgba(0,0,0,.08) 48%, rgba(0,0,0,.50) 71%, rgba(0,0,0,.91) 91%, #000 100%) !important;
}
.target-hero-copy {
bottom: clamp(70px, 9dvh, 102px) !important;
}
.target-hero-text h1 {
font-size: clamp(1.7rem, 6vw, 3.4rem) !important;
line-height: 1.02 !important;
}
.target-hero-text p {
max-width: 540px;
margin-inline: auto !important;
color: rgba(255,255,255,.72) !important;
}
/* 2) HOME RHYTHM — strong groups with breathing room instead of a wall of rails. */
.target-home .shahid-home-section {
padding-block: 12px var(--nova-home-section-gap) !important;
background: #000 !important;
}
.target-home .shahid-home-section + .shahid-home-section {
padding-top: 0 !important;
}
.target-home .shahid-section-heading {
min-height: 48px !important;
padding-inline: max(16px, var(--safe-right, 0px)) max(16px, var(--safe-left, 0px)) !important;
margin-bottom: 10px !important;
}
.target-home .shahid-section-heading h2 {
padding-inline-start: 0 !important;
color: #fff !important;
font-size: clamp(1.02rem, 4vw, 1.36rem) !important;
line-height: 1.12 !important;
font-weight: 950 !important;
letter-spacing: -.03em !important;
}
.target-home .shahid-section-heading h2::before {
content: none !important;
display: none !important;
}
.target-home .shahid-section-heading > button {
color: rgba(255,255,255,.58) !important;
}
/* 3) QUICK DISCOVERY — compact landscape cards inspired by the lightweight
top strip in the reference, not another tall poster carousel. */
.target-home .upcoming .shahid-short-rail {
gap: 10px !important;
padding-inline: max(12px, var(--safe-right, 0px)) max(12px, var(--safe-left, 0px)) !important;
scroll-padding-inline: 12px !important;
}
.target-home .upcoming .shahid-short-card {
flex: 0 0 clamp(170px, 43vw, 270px) !important;
aspect-ratio: 16 / 10 !important;
border: 0 !important;
border-radius: 16px !important;
background: #090b10 !important;
box-shadow: var(--nova-home-card-shadow) !important;
}
.target-home .upcoming .shahid-short-copy {
right: 11px !important;
bottom: 9px !important;
left: 11px !important;
}
.target-home .upcoming .shahid-short-copy strong {
font-size: .74rem !important;
line-height: 1.25 !important;
}
.target-home .upcoming .shahid-short-copy small {
display: none !important;
}
/* 4) MOVIES + SERIES — Shahid-like three-up visual density on phones, but with
Nova's clean graphite cards and absolutely no gradient frame. */
.target-home :is(.nova-series-showcase, .nova-movie-showcase) {
padding-top: 6px !important;
padding-bottom: clamp(32px, 7vw, 50px) !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-section-heading {
min-height: 54px !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-section-heading h2 {
font-size: clamp(1.16rem, 4.5vw, 1.54rem) !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-rail {
gap: 10px !important;
padding-inline: 10px !important;
scroll-padding-inline: 10px !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-card {
flex: 0 0 clamp(132px, 30.6vw, 190px) !important;
max-width: 190px !important;
background: transparent !important;
box-shadow: none !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-image {
width: 100% !important;
aspect-ratio: 2 / 3 !important;
border: 1px solid rgba(255,255,255,.055) !important;
border-image: none !important;
border-radius: 13px !important;
background: #090a0f !important;
background-image: none !important;
box-shadow: 0 15px 32px rgba(0,0,0,.34) !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-image::before,
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-image::after {
border: 0 !important;
border-image: none !important;
box-shadow: none !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-image > strong {
right: 9px !important;
bottom: 9px !important;
left: 9px !important;
font-size: clamp(.69rem, 2.3vw, .82rem) !important;
line-height: 1.28 !important;
font-weight: 900 !important;
text-shadow: 0 3px 12px rgba(0,0,0,.9) !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-card > small {
margin-top: 7px !important;
color: rgba(255,255,255,.48) !important;
font-size: .62rem !important;
font-weight: 650 !important;
}
/* 5) RANKED / PEOPLE / LATER RAILS — lower visual weight after the first
editorial sequence, so the page has a clear hierarchy. */
.target-home .shahid-ranked-card {
flex-basis: clamp(210px, 44vw, 320px) !important;
}
.target-home .shahid-ranked-poster,
.target-home .shahid-person-card,
.target-home .shahid-landscape-image,
.target-home .shahid-live-poster {
border-color: rgba(255,255,255,.05) !important;
border-image: none !important;
box-shadow: var(--nova-home-card-shadow) !important;
}
.target-home .shahid-rank-ribbon {
background: rgba(6,7,11,.82) !important;
border: 1px solid rgba(255,255,255,.12) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.target-home .shahid-rank-ribbon small { color: rgba(255,255,255,.60) !important; }
.target-home .shahid-rank-ribbon b { color: #fff !important; }
/* 6) CONTINUE WATCHING — give the most useful rail priority without making it noisy. */
.target-home .continue-watching-section {
padding-top: 8px !important;
padding-bottom: 24px !important;
}
.target-home .continue-watching-card {
flex-basis: clamp(230px, 58vw, 340px) !important;
max-width: 340px !important;
}
.target-home .continue-watching-image {
border-radius: 15px !important;
}
/* 7) Interactions: depth only, never rainbow frames on media. */
@media (hover:hover) and (pointer:fine) {
.target-home .nova-rail-card {
transition: transform 190ms cubic-bezier(.22,1,.36,1), opacity 190ms ease !important;
}
.target-home .nova-rail-card:hover { transform: translateY(-3px) !important; }
.target-home .nova-rail-card:hover :is(.shahid-poster-image,.shahid-ranked-poster,.shahid-landscape-image,.shahid-live-poster) {
border-color: rgba(255,255,255,.09) !important;
border-image: none !important;
box-shadow: 0 20px 42px rgba(0,0,0,.42) !important;
}
}
.target-home .nova-rail-card:focus-visible {
outline: 2px solid rgba(255,255,255,.64) !important;
outline-offset: 3px !important;
}
/* 8) Large screen editorial balance. */
@media (min-width: 760px) {
.target-hero-slide { height: clamp(620px, 76dvh, 860px) !important; }
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-card {
flex-basis: clamp(168px, 18vw, 220px) !important;
max-width: 220px !important;
}
.target-home .upcoming .shahid-short-card {
flex-basis: clamp(230px, 30vw, 360px) !important;
}
}
@media (max-width: 560px) {
.target-hero-slide {
height: 70dvh !important;
min-height: 540px !important;
}
.target-hero-copy { bottom: 68px !important; }
.target-hero-actions { margin-top: 13px !important; }
.target-home .shahid-section-heading { margin-bottom: 7px !important; }
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-rail {
gap: 8px !important;
padding-inline: 8px !important;
}
.target-home :is(.nova-series-showcase, .nova-movie-showcase) .shahid-poster-card {
flex-basis: 30.8vw !important;
max-width: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.target-home .nova-rail-card { transition: none !important; }
}
/* v133 — Home-only horizontal Worlds + Movie Collections rails.
Keeps the standalone movie-collections page untouched. */
.home-app .nova-world-gateway-horizontal {
margin: 8px 0 20px !important;
padding-inline: max(10px, var(--safe-right, 0px)) max(10px, var(--safe-left, 0px)) !important;
}
.home-app .nova-world-gateway-horizontal .nova-world-heading {
margin-bottom: 10px !important;
}
.home-app .nova-world-gateway-horizontal .nova-world-rail {
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 2px 2px 11px !important;
scroll-snap-type: x proximity !important;
scroll-padding-inline: 2px !important;
scrollbar-width: none !important;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
.home-app .nova-world-gateway-horizontal .nova-world-rail::-webkit-scrollbar { display: none !important; }
.home-app .nova-world-gateway-horizontal .nova-world-rail-card {
position: relative !important;
flex: 0 0 clamp(238px, 28vw, 330px) !important;
min-width: 0 !important;
min-height: 142px !important;
padding: 15px !important;
display: flex !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 11px !important;
color: #fff !important;
text-align: right !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 22px !important;
background-color: #090b10 !important;
background-size: cover !important;
background-position: center !important;
box-shadow: 0 18px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035) !important;
overflow: hidden !important;
cursor: pointer !important;
scroll-snap-align: start !important;
scroll-snap-stop: normal;
}
.home-app .nova-world-gateway-horizontal .nova-world-series { background-image: image-set(url('/app/assets/images/home/worlds/nova-world-series-320.webp') 1x, url('/app/assets/images/home/worlds/nova-world-series-480.webp') 2x) !important; }
.home-app .nova-world-gateway-horizontal .nova-world-movies { background-image: image-set(url('/app/assets/images/home/worlds/nova-world-movies-320.webp') 1x, url('/app/assets/images/home/worlds/nova-world-movies-480.webp') 2x) !important; }
.home-app .nova-world-gateway-horizontal .nova-world-anime { background-image: image-set(url('/app/assets/images/home/worlds/nova-world-anime-320.webp') 1x, url('/app/assets/images/home/worlds/nova-world-anime-480.webp') 2x) !important; }
.home-app .nova-world-gateway-horizontal .nova-world-wrestling { background-image: image-set(url('/app/assets/images/home/worlds/nova-world-wrestling-320.webp') 1x, url('/app/assets/images/home/worlds/nova-world-wrestling-480.webp') 2x) !important; }
html[data-nova-data-saver="true"] .home-app .nova-world-gateway-horizontal .nova-world-series { background-image: url('/app/assets/images/home/worlds/nova-world-series-320.webp') !important; }
html[data-nova-data-saver="true"] .home-app .nova-world-gateway-horizontal .nova-world-movies { background-image: url('/app/assets/images/home/worlds/nova-world-movies-320.webp') !important; }
html[data-nova-data-saver="true"] .home-app .nova-world-gateway-horizontal .nova-world-anime { background-image: url('/app/assets/images/home/worlds/nova-world-anime-320.webp') !important; }
html[data-nova-data-saver="true"] .home-app .nova-world-gateway-horizontal .nova-world-wrestling { background-image: url('/app/assets/images/home/worlds/nova-world-wrestling-320.webp') !important; }
.home-app .nova-world-gateway-horizontal .nova-world-rail-card::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
background: linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.20) 38%,rgba(0,0,0,.84) 100%) !important;
pointer-events: none !important;
}
.home-app .nova-world-gateway-horizontal .nova-world-rail-card > * { position: relative !important; z-index: 1 !important; }
.home-app .nova-world-gateway-horizontal .nova-world-copy { margin-inline-end: auto !important; }
.home-app .nova-world-gateway-horizontal .nova-world-copy strong { font-size: .98rem !important; }
.home-app .nova-world-gateway-horizontal .nova-world-copy small { font-size: .68rem !important; color: rgba(255,255,255,.68) !important; }
.home-app .nova-world-gateway-horizontal .nova-world-arrow {
width: 32px !important;
height: 32px !important;
flex: 0 0 32px !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
color: rgba(255,255,255,.86) !important;
background: rgba(6,9,15,.48) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Home collections: compact horizontal rail; intentionally no cinematic promo hero. */
.home-app .nova-home-collections-rail {
width: 100% !important;
margin: 2px 0 22px !important;
padding: 0 max(10px,var(--safe-right,0px)) 0 max(10px,var(--safe-left,0px)) !important;
box-sizing: border-box !important;
}
.home-app .nova-home-collections-rail .nova-movie-collections-head {
margin: 0 2px 10px !important;
align-items: center !important;
}
.home-app .nova-home-collections-rail .nova-movie-collections-head span {
margin-bottom: 3px !important;
font-size: .62rem !important;
color: rgba(255,255,255,.46) !important;
}
.home-app .nova-home-collections-rail .nova-movie-collections-head h3 {
font-size: clamp(1.12rem,4vw,1.48rem) !important;
line-height: 1.08 !important;
}
.home-app .nova-home-collections-rail .nova-movie-collections-more {
min-width: max-content !important;
color: rgba(255,255,255,.72) !important;
font-size: .78rem !important;
}
.home-app .nova-home-collections-track {
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 2px 2px 12px !important;
scroll-snap-type: x proximity !important;
scroll-padding-inline: 2px !important;
scrollbar-width: none !important;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
}
.home-app .nova-home-collections-track::-webkit-scrollbar { display: none !important; }
.home-app .nova-home-collections-track .nova-movie-collection-card {
flex: 0 0 clamp(138px, 17vw, 184px) !important;
min-width: 0 !important;
display: grid !important;
gap: 7px !important;
scroll-snap-align: start !important;
}
.home-app .nova-home-collections-track .nova-movie-collection-poster {
width: 100% !important;
aspect-ratio: 2 / 3 !important;
min-height: 0 !important;
border-radius: 16px !important;
box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.home-app .nova-home-collections-track .nova-movie-collection-badge {
top: 8px !important;
right: 8px !important;
padding: 5px 8px !important;
font-size: .58rem !important;
}
.home-app .nova-home-collections-track .nova-movie-collection-copy { gap: 2px !important; }
.home-app .nova-home-collections-track .nova-movie-collection-copy strong {
font-size: .88rem !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.home-app .nova-home-collections-track .nova-movie-collection-copy small,
.home-app .nova-home-collections-track .nova-movie-collection-copy span {
font-size: .66rem !important;
}
@media (max-width: 720px) {
.home-app .nova-world-gateway-horizontal .nova-world-heading p { display: none !important; }
.home-app .nova-world-gateway-horizontal .nova-world-rail-card {
flex-basis: 76vw !important;
min-height: 132px !important;
border-radius: 19px !important;
}
.home-app .nova-home-collections-track .nova-movie-collection-card {
flex-basis: 34vw !important;
}
}
@media (max-width: 430px) {
.home-app .nova-world-gateway-horizontal .nova-world-rail-card { flex-basis: 78vw !important; }
.home-app .nova-home-collections-track .nova-movie-collection-card { flex-basis: 36.5vw !important; }
}
@media (hover:hover) and (pointer:fine) {
.home-app .nova-world-gateway-horizontal .nova-world-rail-card {
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.home-app .nova-world-gateway-horizontal .nova-world-rail-card:hover,
.home-app .nova-world-gateway-horizontal .nova-world-rail-card:focus-visible {
transform: translateY(-3px) !important;
border-color: rgba(255,255,255,.16) !important;
box-shadow: 0 24px 50px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.home-app .nova-world-gateway-horizontal .nova-world-rail-card { transition: none !important; }
}
/* ===== source: nova-header-live-hotfix.css ===== */
/* Space Gate Nova+ — Header + Live Catalogue emergency repair
Loaded last. Repairs cascade regressions without changing page logic. */
:root {
--nova-home-header-content-h: 64px;
--nova-landing-header-content-h: 62px;
--nova-header-inline: clamp(16px, 3vw, 28px);
}
/* HOME -------------------------------------------------------------------
Later global layers had collapsed the NOVA+ wordmark button to 36px.
Restore the intended free-floating brand + utility-action composition. */
header.oscar-toolbar.professional-home-toolbar {
width: 100% !important;
max-width: none !important;
height: calc(var(--nova-home-header-content-h) + var(--safe-top, 0px)) !important;
min-height: calc(var(--nova-home-header-content-h) + var(--safe-top, 0px)) !important;
margin: 0 !important;
padding: var(--safe-top, 0px)
max(var(--nova-header-inline), var(--safe-right, 0px)) 0
max(var(--nova-header-inline), var(--safe-left, 0px)) !important;
background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.27) 64%, transparent 100%) !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow: visible !important;
}
html.sg-header-scrolled header.oscar-toolbar.professional-home-toolbar {
background: rgba(2,3,7,.84) !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
backdrop-filter: blur(20px) saturate(1.06) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.06) !important;
}
.professional-home-toolbar .home-toolbar-shell {
width: 100% !important;
min-height: var(--nova-home-header-content-h) !important;
grid-template-columns: auto minmax(18px,1fr) auto !important;
gap: clamp(12px, 2vw, 24px) !important;
}
.professional-home-toolbar .home-toolbar-actions {
gap: clamp(10px, 1.4vw, 16px) !important;
}
.professional-home-toolbar .icon-button.home-header-action {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.professional-home-toolbar .icon-button.home-menu-button {
width: clamp(116px, 10.5vw, 148px) !important;
min-width: clamp(116px, 10.5vw, 148px) !important;
height: 48px !important;
padding: 2px 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.professional-home-toolbar .home-menu-button .nova-menu-logo {
width: 100% !important;
height: auto !important;
max-height: 45px !important;
object-fit: contain !important;
object-position: right center !important;
}
/* ANIME LANDING -----------------------------------------------------------
The legacy anime reference CSS still hid the shared header after the page
migrated back to CatalogLandingHeader. Re-enable the unified header. */
.catalog-landing-anime > .catalog-landing-toolbar.nova-native-catalog-header {
display: flex !important;
position: fixed !important;
inset: 0 0 auto 0 !important;
z-index: 930 !important;
width: 100% !important;
max-width: none !important;
height: calc(var(--nova-landing-header-content-h) + var(--safe-top, 0px)) !important;
min-height: calc(var(--nova-landing-header-content-h) + var(--safe-top, 0px)) !important;
margin: 0 !important;
padding: var(--safe-top, 0px)
max(var(--nova-header-inline), var(--safe-right, 0px)) 0
max(var(--nova-header-inline), var(--safe-left, 0px)) !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.24) 68%, transparent 100%) !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.sg-header-scrolled .catalog-landing-anime > .catalog-landing-toolbar.nova-native-catalog-header {
background: rgba(2,3,7,.86) !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
box-shadow: 0 12px 32px rgba(0,0,0,.30) !important;
backdrop-filter: blur(20px) saturate(1.06) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.06) !important;
}
.catalog-landing-anime .nova-native-header-leading {
min-width: 0 !important;
flex: 1 1 auto !important;
justify-content: flex-start !important;
}
.catalog-landing-anime .nova-native-title-copy h1 {
font-size: clamp(1.25rem, 2.1vw, 1.58rem) !important;
font-weight: 950 !important;
letter-spacing: -.025em !important;
}
.catalog-landing-anime .catalog-landing-toolbar-actions {
flex: 0 0 auto !important;
gap: 10px !important;
}
.catalog-landing-anime .catalog-landing-toolbar-button {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Hero remains full-bleed beneath the fixed anime header. */
.catalog-landing-anime .catalog-landing-main {
padding-top: 0 !important;
}
.catalog-landing-anime .catalog-landing-empty,
.catalog-landing-anime > .catalog-landing-motion-loading,
.catalog-landing-anime > .catalog-landing-skeleton {
padding-top: calc(var(--nova-landing-header-content-h) + var(--safe-top, 0px) + 18px) !important;
}
/* LIVE -------------------------------------------------------------------
Empty/missing channel artwork is intentional: SafeImage supplies a branded
fallback. Ensure the fallback reads as a clean channel tile, not an error. */
.nova-live-row-logo {
background: linear-gradient(155deg, rgba(16,18,25,.90), rgba(5,6,10,.96)) !important;
border-color: rgba(255,255,255,.075) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.26) !important;
}
@media (max-width: 700px) {
:root {
--nova-home-header-content-h: 58px;
--nova-landing-header-content-h: 56px;
--nova-header-inline: 15px;
}
.professional-home-toolbar .icon-button.home-header-action {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
}
.professional-home-toolbar .home-toolbar-actions {
gap: 12px !important;
}
.professional-home-toolbar .icon-button.home-menu-button {
width: 108px !important;
min-width: 108px !important;
height: 42px !important;
}
.catalog-landing-anime .catalog-landing-toolbar-button {
width: 35px !important;
height: 35px !important;
min-width: 35px !important;
}
.catalog-landing-anime .nova-native-title-copy h1 {
font-size: 1.22rem !important;
}
}
@media (max-width: 380px) {
.professional-home-toolbar .icon-button.home-menu-button {
width: 96px !important;
min-width: 96px !important;
}
.professional-home-toolbar .home-toolbar-actions { gap: 8px !important; }
}
/* ===== source: nova-web-browser-adapter-v100.css ===== */
/* Browser-only mechanics. Visual rules come from the MAUI source styles above this file. */
:root{--safe-top:max(env(safe-area-inset-top,0px),var(--nova-native-safe-top,0px));--safe-right:max(env(safe-area-inset-right,0px),var(--nova-native-safe-right,0px));--safe-bottom:max(env(safe-area-inset-bottom,0px),var(--nova-native-safe-bottom,0px));--safe-left:max(env(safe-area-inset-left,0px),var(--nova-native-safe-left,0px))}
html,body,#nova-app,#nova-route-frame,#nova-page-root{width:100%;min-width:0;min-height:100%;margin:0;background:#000;color:#fff}
body{min-height:100dvh;overflow-x:hidden;-webkit-touch-callout:none}
#nova-route-frame,#nova-page-root,.sg-route-surface{margin-inline:0;padding-inline:0}
#nova-page-root{min-height:100dvh;padding-bottom:calc(var(--bottom-nav-h,78px) + var(--safe-bottom))}
html.nova-immersive-route #nova-page-root{padding-bottom:0}
html.nova-immersive-route #nova-global-header,html.nova-immersive-route #nova-bottom-nav-host{display:none!important}
#nova-global-header[hidden]{display:none!important}
.nova-web-page{min-height:100dvh;background:#000}
.nova-shell-icon{display:inline-grid;place-items:center;line-height:0}.nova-shell-icon>svg{display:block}
.nova-safe-web-image{display:block;width:100%;height:100%;object-fit:cover;background:#08080a}
.target-hero-slide .safe-background-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shahid-card-image{width:100%;height:100%;object-fit:cover;display:block}
.shahid-short-card .shahid-card-image,.shahid-person-card .shahid-card-image,.shahid-ranked-poster .shahid-card-image,.shahid-live-poster .shahid-card-image,.shahid-poster-image .shahid-card-image,.shahid-landscape-image .shahid-card-image{width:100%!important;height:100%!important;display:block;object-fit:cover;pointer-events:none}
.nova-web-catalog-loader,.details-motion-loading{min-height:calc(100dvh - var(--bottom-nav-h,78px));display:grid;place-items:center;background:#000}.details-motion-loading{min-height:100dvh}
.nova-route-transition{position:fixed;inset:0;z-index:2147483640;display:grid;place-items:center;background:rgba(0,0,0,.90);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 110ms ease,visibility 0s linear 120ms;backdrop-filter:blur(8px)}
.nova-route-transition.is-active{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.nova-route-transition .nova-motion-loader{min-height:0;width:min(210px,52vw);padding:0;background:transparent}.sg-route-frame.nova-route-swapping .sg-route-surface{opacity:.82}.sg-route-surface{transition:opacity 160ms cubic-bezier(.18,.82,.22,1)}
.nova-web-error{min-height:52dvh;display:grid;place-items:center;align-content:center;text-align:center;padding:28px;color:#fff}.nova-web-error p{color:rgba(255,255,255,.58);max-width:520px;line-height:1.7}.nova-web-error button{border:0;border-radius:999px;padding:12px 20px;background:linear-gradient(105deg,#F04AD8,#9B4DFF 52%,#14D7FF);color:#fff;font-weight:900}
@media(prefers-reduced-motion:reduce){.nova-route-transition,.sg-route-surface{transition:none!important}}
/* ===== source: nova-bottom-nav-maui-exact-v103.css ===== */
/*
* v103 — MAUI BottomNavigation final visual lock.
* Loaded last on purpose: legacy web identity layers must never repaint
* the active icon container or change the SVG root fill/stroke semantics.
* Source of truth: Components/Shared/BottomNavigation.razor.css
*/
nav.oscar-bottom-nav.original-bottom-nav {
--nav-active-grad-a: #9B4DFF;
--nav-active-grad-b: #7B5CFF;
--nav-active-grad-c: #14D7FF;
--nav-inactive-soft: #8A8A92;
--nav-active-gradient: linear-gradient(105deg, var(--nav-active-grad-a) 0%, var(--nav-active-grad-b) 48%, var(--nav-active-grad-c) 100%);
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a),
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:hover,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:focus,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active:focus-visible {
background: transparent !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
transform: none !important;
filter: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav .nav-icon,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
overflow: visible !important;
}
nav.oscar-bottom-nav.original-bottom-nav .nav-icon-solid,
nav.oscar-bottom-nav.original-bottom-nav .nav-icon-gradient-layer,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-solid,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
/* Restore the SVG root contract produced by OscarIcon/NovaIcons. A legacy
web rule used fill/stroke=currentColor on the root SVG; that inheritance is
what turns outlined icons into filled rectangles/squares. */
nav.oscar-bottom-nav.original-bottom-nav .nav-icon .oscar-icon,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon .oscar-icon {
color: inherit !important;
fill: none !important;
stroke: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-solid {
opacity: 0 !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer {
opacity: 1 !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-start {
color: var(--nav-active-grad-a) !important;
clip-path: polygon(0 0, 43% 0, 34% 100%, 0 100%) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-mid {
color: var(--nav-active-grad-b) !important;
clip-path: polygon(30% 0, 74% 0, 62% 100%, 23% 100%) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-end {
color: var(--nav-active-grad-c) !important;
clip-path: polygon(58% 0, 100% 0, 100% 100%, 50% 100%) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer .oscar-icon {
color: inherit !important;
opacity: 1 !important;
fill: none !important;
stroke: none !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-icon-gradient-layer .oscar-icon * {
vector-effect: non-scaling-stroke;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active b,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a).active .nav-label-text {
background: var(--nav-active-gradient) !important;
background-image: var(--nav-active-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: var(--nav-active-grad-a) !important;
text-shadow: none !important;
filter: none !important;
font-weight: 800 !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-icon-gradient-layer {
opacity: 0 !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-icon-solid {
opacity: 1 !important;
color: var(--nav-inactive-soft) !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) b,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a):not(.active) .nav-label-text {
color: var(--nav-inactive-soft) !important;
-webkit-text-fill-color: currentColor !important;
background: transparent !important;
background-image: none !important;
text-shadow: none !important;
filter: none !important;
font-weight: 600 !important;
}
nav.oscar-bottom-nav.original-bottom-nav :is(button, a)::before,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a)::after,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) .nav-icon::before,
nav.oscar-bottom-nav.original-bottom-nav :is(button, a) .nav-icon::after {
display: none !important;
content: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* ===== source: nova-global-route-loader-v104.css ===== */
/* NOVA+ v104 — Global route preparation gate.
Visual source: NovaInitialGateLoader used by Home.
Scope: presentation only; no backend/API behavior changes. */
.nova-global-route-gate {
position: fixed;
z-index: 2147482500;
top: calc(var(--nova-app-header-h, 58px) + var(--safe-top, 0px));
right: 0;
bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px));
left: 0;
display: grid;
place-items: center;
overflow: hidden;
isolation: isolate;
background: #000;
color: #fff;
opacity: 0;
visibility: visible;
pointer-events: auto;
transition: opacity 105ms ease;
}
.nova-global-route-gate.is-visible { opacity: 1; }
.nova-global-route-gate.is-leaving { opacity: 0; pointer-events: none; }
/* The immersive details/player routes have no application header or bottom nav. */
html.nova-immersive-route .nova-global-route-gate {
top: 0;
bottom: 0;
}
/* Keep the exact Home-loader geometry/copy while making it route-global. */
.nova-global-route-gate .nova-initial-gate__topline {
top: 0;
}
.nova-global-route-gate .nova-initial-gate__center {
position: relative;
z-index: 2;
}
.nova-global-route-gate .nova-initial-gate__motion .nova-motion-loader {
min-height: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* Hide route-local loaders behind the global gate while the destination mounts.
They remain in the DOM so existing rendering code can remove them normally. */
html.nova-route-preparing .nova-web-catalog-loader,
html.nova-route-preparing .details-motion-loading {
visibility: hidden !important;
}
@media (max-width: 620px) {
.nova-global-route-gate {
top: calc(var(--nova-app-header-h, 58px) + var(--safe-top, 0px));
bottom: calc(var(--bottom-nav-h, 54px) + var(--safe-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
.nova-global-route-gate { transition: none !important; }
}
/* ===== source: nova-original-pull-refresh-v108.css ===== */
/* NOVA+ v108 — Android pull-to-refresh visual contract.
Source of truth: original MAUI NovaRefreshControl.razor.css (Build 91).
The web shell owns the gesture; Android Native owns only cache/storage invalidation. */
#nova-web-original-refresh {
position: relative;
z-index: 2147481200;
pointer-events: none;
}
#nova-web-original-refresh .nova-refresh-desktop {
position: fixed;
z-index: 2147482600;
top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 12px);
left: clamp(142px, 9.5vw, 178px);
width: 43px;
height: 43px;
min-width: 43px;
padding: 0;
display: none;
place-items: center;
border: 0 !important;
border-radius: 50%;
color: #fff;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
pointer-events: auto;
cursor: pointer;
transition: background .18s ease, transform .12s ease, color .16s ease, opacity .16s ease;
}
#nova-web-original-refresh .nova-refresh-desktop:hover {
color: #fff;
background: rgba(255,255,255,.075) !important;
transform: none;
box-shadow: none !important;
}
#nova-web-original-refresh .nova-refresh-desktop:active {
background: rgba(255,255,255,.09) !important;
transform: scale(.93);
}
#nova-web-original-refresh .nova-refresh-desktop:disabled { cursor: wait; opacity: .72; }
#nova-web-original-refresh .nova-refresh-desktop-icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
flex: 0 0 22px;
}
#nova-web-original-refresh .nova-refresh-desktop-icon .oscar-icon {
width: 22px;
height: 22px;
color: currentColor;
filter: none;
}
#nova-web-original-refresh.is-refreshing .nova-refresh-desktop-icon {
color: #fff;
animation: novaRefreshSpinV108 .78s linear infinite;
}
#nova-web-original-refresh .nova-refresh-mobile {
--nova-pull-progress: 0;
position: fixed;
z-index: 2147482600;
top: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 5px);
left: 50%;
width: 48px;
height: 48px;
display: none;
place-items: center;
border: 0 !important;
border-radius: 50%;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
opacity: calc(var(--nova-pull-progress) * 1);
transform: translate(-50%, calc(-58px + var(--nova-pull-progress) * 72px)) scale(calc(.72 + var(--nova-pull-progress) * .28));
transition: opacity 140ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
#nova-web-original-refresh .nova-refresh-ring {
width: 28px;
height: 28px;
display: block;
border-radius: 50%;
background: conic-gradient(from 0deg, #e04bdf, #8156ff, #28dfff, #e04bdf);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
filter: drop-shadow(0 0 8px rgba(96, 119, 255, .75));
}
#nova-web-original-refresh.is-refreshing .nova-refresh-ring {
animation: novaRefreshSpinV108 .78s linear infinite;
}
#nova-web-original-refresh.is-refreshing .nova-refresh-mobile {
opacity: 1 !important;
transform: translate(-50%, 12px) scale(1) !important;
}
@keyframes novaRefreshSpinV108 { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
#nova-web-original-refresh .nova-refresh-mobile { display: grid; }
}
html.sg-platform-android #nova-web-original-refresh .nova-refresh-mobile { display: grid !important; }
html.sg-platform-desktop #nova-web-original-refresh .nova-refresh-mobile { display: none !important; }
html.sg-platform-desktop #nova-web-original-refresh .nova-refresh-desktop { display: grid !important; }
html.sg-platform-android #nova-web-original-refresh .nova-refresh-desktop { display: none !important; }
/* During a native hard refresh, never fall back to the route-global startup gate.
The original pull ring remains the only refresh affordance. */
html.nova-hard-refresh #nova-global-route-gate,
html.nova-hard-refresh [data-nova-page-loader] {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
#nova-web-original-refresh .nova-refresh-ring { animation: none !important; }
}
/* ===== source: nova-v117-original-91-parity.css ===== */
/* Space Gate NOVA+ Web v117 — original build 91 presentation lock.
The original MAUI/global styles remain the source of truth. This last layer
contains only browser-host corrections requested by the product owner:
clean page-header glyphs, the original translucent details header state,
and visual feedback while the native runtime resolves playback sources.
No data, API, route or playback-source contract is changed here. */
/* -------------------------------------------------------------------------
Page-header actions: preserve every original header's own measurements and
spacing, while removing the legacy tile/halo treatment from action glyphs.
------------------------------------------------------------------------- */
html body :is(
#nova-global-header,
.details-standard-header,
.catalog-landing-toolbar,
.nova-native-catalog-header,
.nova-catalog-fixed-header,
.nova-live-fixed-header,
.nova-live-guide-header,
.account-pro-header,
.favorites-pro-header,
.notifications-pro-header,
.rail-catalog-header
) :is(
button.icon-button,
button.home-header-action,
button.home-menu-button,
button.details-header-action,
button.details-header-back,
button.catalog-landing-toolbar-button,
button.nova-native-back,
button.nova-catalog-icon,
button.nova-catalog-back,
button.nova-live-icon,
button.nova-live-menu,
button.nova-live-brand,
button.rail-catalog-back,
button.series-back-button,
button[data-native-favorite-header],
button[data-native-share-header],
button[data-router-back]
),
html body .account-pro-header > button,
html body .favorites-pro-header > div > button,
html body .notifications-pro-header > button,
html body .settings-page-app > .oscar-toolbar .toolbar-actions > .icon-button {
border: 0 !important;
border-color: transparent !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
text-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
}
html body :is(
#nova-global-header,
.details-standard-header,
.catalog-landing-toolbar,
.nova-native-catalog-header,
.nova-catalog-fixed-header,
.nova-live-fixed-header,
.nova-live-guide-header,
.account-pro-header,
.favorites-pro-header,
.notifications-pro-header,
.rail-catalog-header
) :is(
button.icon-button,
button.home-header-action,
button.home-menu-button,
button.details-header-action,
button.details-header-back,
button.catalog-landing-toolbar-button,
button.nova-native-back,
button.nova-catalog-icon,
button.nova-catalog-back,
button.nova-live-icon,
button.nova-live-menu,
button.nova-live-brand,
button.rail-catalog-back,
button.series-back-button,
button[data-native-favorite-header],
button[data-native-share-header],
button[data-router-back]
):is(:hover, :focus, :focus-visible, :active),
html body .account-pro-header > button:is(:hover, :focus, :focus-visible, :active),
html body .favorites-pro-header > div > button:is(:hover, :focus, :focus-visible, :active),
html body .notifications-pro-header > button:is(:hover, :focus, :focus-visible, :active),
html body .settings-page-app > .oscar-toolbar .toolbar-actions > .icon-button:is(:hover, :focus, :focus-visible, :active) {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
text-shadow: none !important;
}
html body :is(
#nova-global-header,
.details-standard-header,
.catalog-landing-toolbar,
.nova-native-catalog-header,
.nova-catalog-fixed-header,
.nova-live-fixed-header,
.nova-live-guide-header,
.account-pro-header,
.favorites-pro-header,
.notifications-pro-header,
.rail-catalog-header
) :is(.nova-shell-icon, .oscar-icon) {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html body :is(
#nova-global-header,
.details-standard-header,
.catalog-landing-toolbar,
.nova-native-catalog-header,
.nova-catalog-fixed-header,
.nova-live-fixed-header,
.nova-live-guide-header,
.account-pro-header,
.favorites-pro-header,
.notifications-pro-header,
.rail-catalog-header
) :is(.nova-shell-icon, .oscar-icon) > svg,
html body :is(
#nova-global-header,
.details-standard-header,
.catalog-landing-toolbar,
.nova-native-catalog-header,
.nova-catalog-fixed-header,
.nova-live-fixed-header,
.nova-live-guide-header,
.account-pro-header,
.favorites-pro-header,
.notifications-pro-header,
.rail-catalog-header
) button > svg {
display: block !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html body :is(#nova-global-header, .catalog-landing-toolbar, .nova-catalog-fixed-header,
.account-pro-header, .favorites-pro-header, .notifications-pro-header, .nova-live-fixed-header)
:is(.notification, .nova-catalog-notification) > i {
border: 0 !important;
box-shadow: none !important;
filter: none !important;
}
#nova-global-header :is(.nova-menu-logo, .nova-wordmark-logo) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: none !important;
}
html body .settings-page-app > .oscar-toolbar .toolbar-actions > .icon-button :is(.oscar-icon, svg) {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: none !important;
}
/* The original Build 91 details header is transparent on the artwork, then
becomes a restrained translucent black surface after scrolling. */
.nova-web-details-scope .details-app > .details-standard-header,
.details-app > .details-standard-header {
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: blur(0) saturate(1) !important;
-webkit-backdrop-filter: blur(0) saturate(1) !important;
}
html.sg-header-scrolled .nova-web-details-scope .details-app > .details-standard-header,
html.sg-header-scrolled .details-app > .details-standard-header {
background: rgba(0, 0, 0, .82) !important;
border-bottom-color: rgba(255, 255, 255, .065) !important;
box-shadow: 0 12px 34px rgba(0, 0, 0, .30) !important;
backdrop-filter: blur(20px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}
/* -------------------------------------------------------------------------
Original playback preparation feedback. The native layer performs source
lookup; these states only mirror that work in the already-rendered controls.
------------------------------------------------------------------------- */
.nova-web-details-scope :is(.nova-playback-pending, .nova-playback-source-pending) {
cursor: wait !important;
opacity: 1 !important;
}
.nova-web-details-scope .nova-playback-pending {
position: relative !important;
overflow: hidden !important;
}
.nova-web-details-scope .nova-playback-pending > :not(.nova-playback-pending-ui) {
opacity: 0 !important;
visibility: hidden !important;
}
.nova-web-details-scope .nova-playback-pending-ui {
position: absolute !important;
z-index: 20 !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 0 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
direction: rtl !important;
color: #fff !important;
background: transparent !important;
pointer-events: none !important;
}
.nova-web-details-scope .nova-playback-pending-ui strong {
color: inherit !important;
font: inherit !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
.nova-web-details-scope .standalone-hero-art-play .nova-playback-pending-ui { padding: 0 !important; }
.nova-web-details-scope .standalone-hero-art-play .nova-playback-pending-ui strong { display: none !important; }
.nova-web-details-scope .nova-playback-orbit {
position: relative !important;
width: 27px !important;
height: 27px !important;
flex: 0 0 27px !important;
display: block !important;
border-radius: 50% !important;
background: conic-gradient(from 0deg, transparent 0 12%, #14d7ff 30%, #9b4dff 58%, #f04ad8 78%, transparent 94%) !important;
box-shadow: 0 0 14px rgba(20, 215, 255, .2), 0 0 18px rgba(155, 77, 255, .18) !important;
animation: nova-v117-playback-spin .78s linear infinite !important;
}
.nova-web-details-scope .nova-playback-orbit::before {
content: "" !important;
position: absolute !important;
inset: 3px !important;
border-radius: inherit !important;
background: #030307 !important;
}
.nova-web-details-scope .nova-playback-orbit::after {
content: "" !important;
position: absolute !important;
inset: 8px !important;
border: 1px solid rgba(255, 255, 255, .35) !important;
border-radius: inherit !important;
background: #000 !important;
}
.nova-web-details-scope .nova-playback-orbit > i {
position: absolute !important;
z-index: 2 !important;
top: 1px !important;
left: 50% !important;
width: 4px !important;
height: 4px !important;
margin-left: -2px !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 0 8px #14d7ff !important;
}
.nova-web-details-scope .nova-playback-orbit.compact {
width: 20px !important;
height: 20px !important;
flex-basis: 20px !important;
}
.nova-web-details-scope .nova-playback-orbit.compact::before { inset: 2px !important; }
.nova-web-details-scope .nova-playback-orbit.compact::after { inset: 6px !important; }
.nova-web-details-scope .nova-playback-source-pending :is(.server-icon, .standalone-source-play) {
position: relative !important;
overflow: hidden !important;
}
.nova-web-details-scope .nova-playback-source-pending :is(.server-icon, .standalone-source-play) > :not(.nova-playback-source-orbit) {
opacity: 0 !important;
visibility: hidden !important;
}
.nova-web-details-scope .nova-playback-source-orbit {
position: absolute !important;
z-index: 4 !important;
inset: 0 !important;
display: grid !important;
place-items: center !important;
pointer-events: none !important;
}
.nova-web-details-scope .nova-playback-alert {
position: fixed !important;
z-index: 2147482450 !important;
top: calc(var(--nova-app-header-h, 58px) + var(--safe-top, env(safe-area-inset-top, 0px)) + 9px) !important;
right: max(12px, var(--safe-right, 0px)) !important;
left: max(12px, var(--safe-left, 0px)) !important;
width: min(560px, calc(100% - 24px)) !important;
min-height: 56px !important;
margin-inline: auto !important;
padding: 9px 10px !important;
display: grid !important;
grid-template-columns: 36px minmax(0, 1fr) 34px !important;
align-items: center !important;
gap: 9px !important;
direction: rtl !important;
border: 1px solid rgba(240, 74, 216, .32) !important;
border-radius: 14px !important;
background: rgba(8, 5, 13, .97) !important;
color: #fff !important;
box-shadow: 0 18px 50px rgba(0, 0, 0, .58) !important;
opacity: 0 !important;
transform: translateY(-8px) !important;
transition: opacity .18s ease, transform .18s ease !important;
}
.nova-web-details-scope .nova-playback-alert.visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
.nova-web-details-scope .nova-playback-alert-mark {
width: 34px !important;
height: 34px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(240, 74, 216, .45) !important;
border-radius: 50% !important;
color: #ff88e9 !important;
background: rgba(240, 74, 216, .09) !important;
font-weight: 950 !important;
}
.nova-web-details-scope .nova-playback-alert-copy {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
}
.nova-web-details-scope .nova-playback-alert-copy strong {
color: #fff !important;
font-size: .78rem !important;
font-weight: 950 !important;
}
.nova-web-details-scope .nova-playback-alert-copy small {
overflow: hidden !important;
color: rgba(255, 255, 255, .65) !important;
font-size: .67rem !important;
line-height: 1.5 !important;
text-overflow: ellipsis !important;
}
.nova-web-details-scope .nova-playback-alert-close,
.nova-web-details-scope .nova-playback-alert-close:is(:hover, :focus, :active) {
width: 34px !important;
height: 34px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
color: rgba(255, 255, 255, .72) !important;
box-shadow: none !important;
font: 300 1.35rem/1 sans-serif !important;
}
@keyframes nova-v117-playback-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.nova-web-details-scope .nova-playback-orbit { animation-duration: 1.6s !important; }
}
/* ===== source: nova-v119-remaining-exact-parity.css ===== */
/* Space Gate Nova+ v119
Surgical visual compatibility for DOM states that the original Blazor
components render conditionally. No API or native playback behavior lives
in this stylesheet. */
html body #nova-page-root [hidden],
html body #nova-original-side-menu-host[hidden] {
display: none !important;
}
html body .nova-live-filter-panel[hidden],
html body [data-live-filter-panel][hidden] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html body .nova-live-filter-panel:not([hidden]),
html body [data-live-filter-panel]:not([hidden]) {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
/* ===== source: nova-v120-data-pages-exact.css ===== */
/* v120 — restore the original Build 91 Favorites/Notifications visual contract.
Kept deliberately page-scoped so catalog, home, account and playback surfaces are untouched. */
body .favorites-page-app,
body .favorites-page-app .favorites-page-shell,
body .notifications-page-app,
body .notifications-page-app .notifications-page-shell {
background: #000 !important;
background-image: none !important;
}
body .favorites-page-app .favorites-page-content {
gap: 20px !important;
}
body .favorites-page-app .favorites-featured {
min-height: 300px !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 18px !important;
background: #000 !important;
background-image: none !important;
box-shadow: none !important;
}
body .favorites-page-app .favorites-featured-art {
border: 0 !important;
border-radius: 0 !important;
background: #000 !important;
background-image: none !important;
box-shadow: none !important;
}
body .favorites-page-app .favorites-featured-shade {
background: linear-gradient(90deg,rgba(0,0,0,.1),#000 78%),linear-gradient(180deg,transparent,#000 115%) !important;
}
body .favorites-page-app .favorites-filters button {
height: 40px !important;
padding: 0 20px !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 9px !important;
background: #000 !important;
background-image: none !important;
color: rgba(255,255,255,.7) !important;
box-shadow: none !important;
}
body .favorites-page-app .favorites-filters button.active {
border-color: transparent !important;
background: linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box !important;
color: #fff !important;
}
body .favorites-page-app .favorites-grid {
row-gap: 20px !important;
column-gap: 14px !important;
}
body .favorites-page-app .favorites-card {
border: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
body .favorites-page-app .favorites-card-art {
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.13) !important;
border-radius: 10px !important;
background: #000 !important;
background-image: none !important;
box-shadow: none !important;
}
body .favorites-page-app .favorites-empty button {
min-height: 42px !important;
height: 42px !important;
padding: 0 18px !important;
border: 1px solid transparent !important;
border-radius: 9px !important;
background: linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box !important;
box-shadow: none !important;
}
body .notifications-page-app .notifications-page-content {
gap: 18px !important;
}
body .notifications-page-app .notifications-delivery-state {
min-height: 66px !important;
padding: 11px 14px !important;
border: 1px solid rgba(79,216,152,.32) !important;
border-radius: 14px !important;
background: rgba(31,127,82,.1) !important;
background-image: none !important;
box-shadow: none !important;
}
body .notifications-page-app .notifications-filters button {
height: 42px !important;
padding: 0 18px !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 9px !important;
background: #000 !important;
background-image: none !important;
color: rgba(255,255,255,.72) !important;
box-shadow: none !important;
}
body .notifications-page-app .notifications-filters button.active {
border-color: transparent !important;
background: linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box !important;
color: #fff !important;
}
body .notifications-page-app .notification-card,
body .notifications-page-app .notification-card.unread {
min-height: 126px !important;
padding: 14px !important;
grid-template-columns: 120px minmax(0,1fr) 58px !important;
gap: 18px !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 16px !important;
background: #000 !important;
background-image: none !important;
color: #fff !important;
box-shadow: none !important;
}
body .notifications-page-app .notification-card.unread {
border-color: transparent !important;
background: linear-gradient(#000,#000) padding-box,linear-gradient(100deg,rgba(198,44,255,.75),rgba(112,80,255,.55),rgba(22,168,255,.72)) border-box !important;
}
body .notifications-page-app .notification-media {
width: 116px !important;
height: 82px !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 11px !important;
background: #000 !important;
background-image: none !important;
box-shadow: none !important;
}
body .notifications-page-app .notification-title-row i {
background: linear-gradient(100deg,#c62cff,#16a8ff) !important;
box-shadow: none !important;
}
body .notifications-page-app .notifications-preferences {
min-height: 92px !important;
padding: 15px 18px !important;
grid-template-columns: 58px minmax(0,1fr) 24px !important;
gap: 15px !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 16px !important;
background: #000 !important;
background-image: none !important;
box-shadow: none !important;
}
body .notifications-page-app .notifications-empty button {
min-height: 42px !important;
height: 42px !important;
padding: 0 18px !important;
border: 1px solid transparent !important;
border-radius: 9px !important;
background: linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#c62cff,#7050ff,#16a8ff) border-box !important;
box-shadow: none !important;
}
@media (max-width: 700px) {
body .favorites-page-app .favorites-featured {
min-height: 305px !important;
}
body .favorites-page-app .favorites-featured-shade {
background: linear-gradient(180deg,rgba(0,0,0,.05),#000 82%) !important;
}
}
@media (max-width: 640px) {
body .notifications-page-app .notification-card,
body .notifications-page-app .notification-card.unread {
min-height: 112px !important;
padding: 11px !important;
grid-template-columns: 92px minmax(0,1fr) 46px !important;
gap: 11px !important;
}
body .notifications-page-app .notification-media {
width: 90px !important;
height: 70px !important;
}
}
@media (max-width: 410px) {
body .favorites-page-app .favorites-featured {
min-height: 330px !important;
}
body .notifications-page-app .notification-card,
body .notifications-page-app .notification-card.unread {
grid-template-columns: 74px minmax(0,1fr) !important;
}
body .notifications-page-app .notification-media {
width: 72px !important;
height: 64px !important;
}
body .notifications-page-app .notifications-filters button {
height: 38px !important;
padding: 0 14px !important;
font-size: .72rem !important;
}
}
/* ===== source: nova-v120-details-build91-important-lock.css ===== */
/* v120 — authoritative visual lock generated from the original Build 91 Details.razor.css.
Scoped to .nova-web-details-scope; no application or playback logic is included. */
/* NOVA+ Phase 3 — scoped extraction of the ORIGINAL Details.razor.css.
Generated from the uploaded Android/Windows project. Do not hand-redesign.
Blazor scoped-selector semantics are translated into .nova-web-details-scope. */
.nova-web-details-scope{
display: block !important;
background: transparent !important;
}
.nova-web-details-scope .torrent-preparation-overlay{
position: fixed !important;
inset: 0 !important;
z-index: 2147483000 !important;
display: grid !important;
place-items: center !important;
padding: 24px !important;
direction: rtl !important;
}
.nova-web-details-scope .torrent-preparation-backdrop{
position: absolute !important;
inset: 0 !important;
background:
radial-gradient(circle at 50% 38%, rgba(122, 57, 255, .20), transparent 38%),
rgba(2, 1, 7, .96) !important;
backdrop-filter: blur(18px) !important;
}
.nova-web-details-scope .torrent-preparation-card{
position: relative !important;
width: min(520px, 100%) !important;
min-height: 330px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 46px 38px 34px !important;
border: 1px solid rgba(155, 77, 255, .38) !important;
border-radius: 26px !important;
color: #fff !important;
background: linear-gradient(150deg, rgba(20, 15, 34, .98), rgba(5, 4, 12, .98)) !important;
box-shadow: 0 34px 100px rgba(0, 0, 0, .72), 0 0 44px rgba(115, 62, 255, .13) !important;
}
.nova-web-details-scope .torrent-preparation-spinner{
width: 78px !important;
height: 78px !important;
margin-bottom: 24px !important;
border-radius: 50% !important;
border: 5px solid rgba(255, 255, 255, .10) !important;
border-top-color: #9b4dff !important;
border-right-color: #14d7ff !important;
animation: torrent-preparation-spin .9s linear infinite !important;
box-shadow: 0 0 28px rgba(155, 77, 255, .28) !important;
}
.nova-web-details-scope .torrent-preparation-badge{
margin-bottom: 10px !important;
padding: 6px 12px !important;
border-radius: 999px !important;
background: rgba(155, 77, 255, .14) !important;
color: #cab2ff !important;
font-size: .72rem !important;
font-weight: 900 !important;
letter-spacing: .08em !important;
}
.nova-web-details-scope .torrent-preparation-card h2{
margin: 0 !important;
font-size: clamp(1.45rem, 3vw, 2rem) !important;
font-weight: 900 !important;
}
.nova-web-details-scope .torrent-preparation-card p{
min-height: 28px !important;
margin: 15px 0 7px !important;
color: #d7d2e3 !important;
font-size: 1rem !important;
line-height: 1.8 !important;
}
.nova-web-details-scope .torrent-preparation-card small{
color: #888298 !important;
line-height: 1.7 !important;
}
.nova-web-details-scope .torrent-preparation-cancel{
min-width: 170px !important;
margin-top: 26px !important;
padding: 12px 22px !important;
border: 1px solid rgba(255, 255, 255, .14) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
font: inherit !important;
font-weight: 800 !important;
cursor: pointer !important;
}
.nova-web-details-scope .torrent-preparation-cancel.primary{
border-color: transparent !important;
background: linear-gradient(135deg, #8c4dff, #4d9cff) !important;
}
.nova-web-details-scope .torrent-preparation-error-icon{
width: 70px !important;
height: 70px !important;
display: grid !important;
place-items: center !important;
margin-bottom: 22px !important;
border: 2px solid rgba(255, 86, 111, .62) !important;
border-radius: 50% !important;
color: #ff6a80 !important;
background: rgba(255, 54, 88, .10) !important;
font-size: 2rem !important;
font-weight: 900 !important;
}
@keyframes torrent-preparation-spin {
to { transform: rotate(360deg); }
}
/* =========================================
1. الهوية اللونية (Solid Premium Theme)
========================================= */
.nova-web-details-scope,
.nova-web-details-scope .nova-app,
.nova-web-details-scope .details-app{
--nova-bg-master: #030206 !important; /* أسود سينمائي عميق */
--nova-surface-dark: #0a0812 !important;
--nova-surface-card: #110d1a !important;
--nova-surface-hover: #181326 !important;
--nova-border-subtle: rgba(255, 255, 255, 0.05) !important;
--nova-brand-primary: #9B4DFF !important;
--nova-brand-secondary: #14D7FF !important;
--nova-text-pure: #ffffff !important;
--nova-text-dim: #a3a1ab !important;
--nova-text-muted: #6a6775 !important;
--font-family: "Inter", "Tajawal", system-ui, sans-serif !important;
/* مسافات ديناميكية تتكيف مع حجم الشاشة */
--page-pad: clamp(20px, 5vw, 60px) !important;
--transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* الإعدادات الشاملة لمنع التكدس */
.nova-web-details-scope .details-app,
.nova-web-details-scope .details-page-shell{
min-height: 100dvh !important;
background: var(--nova-bg-master) !important;
color: var(--nova-text-pure) !important;
font-family: var(--font-family) !important;
overflow-x: hidden !important;
-webkit-font-smoothing: antialiased !important;
/* إجبار التطبيق على احترام اتجاه اليمين لليسار بشكل صحيح */
direction: rtl !important;
}
.nova-web-details-scope ::-webkit-scrollbar{
width: 5px !important;
height: 5px !important;
}
.nova-web-details-scope ::-webkit-scrollbar-track{
background: var(--nova-bg-master) !important;
}
.nova-web-details-scope ::-webkit-scrollbar-thumb{
background: #2a2240 !important;
border-radius: 10px !important;
}
.nova-web-details-scope ::-webkit-scrollbar-thumb:hover{
background: var(--nova-brand-primary) !important;
}
/* =========================================
2. الحاوية المركزية (الحل الجذري للويندوز)
========================================= */
/* هذه الفئة هي السر، ستمنع المحتوى من الهروب لليمين وتتوسطه في الشاشة */
.nova-web-details-scope .nova-container{
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
position: relative !important;
z-index: 10 !important;
}
/* =========================================
3. الرأس (Hero Section) - خلفية سينمائية غامرة
========================================= */
.nova-web-details-scope .nova-hero-solid{
position: relative !important;
width: 100% !important;
/* ارتفاع ديناميكي يملأ معظم الشاشة */
min-height: clamp(550px, 75vh, 850px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
padding-bottom: 50px !important;
overflow: hidden !important;
}
.nova-web-details-scope .nova-bg-layer{
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
/* تخفيف سطوع الخلفية لبروز النصوص */
filter: brightness(0.7) contrast(1.1) !important;
}
/* تدرج لوني يبتلع أسفل ويمين الصورة لدمجها مع لون الخلفية */
.nova-web-details-scope .nova-vignette-solid{
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background: linear-gradient(to top, var(--nova-bg-master) 0%, rgba(3,2,6,0.8) 35%, transparent 80%), linear-gradient(to right, rgba(3,2,6,0.95) 0%, rgba(3,2,6,0.5) 40%, transparent 100%) !important;
}
.nova-web-details-scope .nova-details-topbar{
position: absolute !important;
top: calc(var(--safe-top, 0px) + 30px) !important;
left: var(--page-pad) !important;
right: var(--page-pad) !important;
z-index: 50 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.nova-web-details-scope .nova-icon-btn{
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: rgba(10, 8, 18, 0.6) !important;
border: 1px solid var(--nova-border-subtle) !important;
color: #fff !important;
display: grid !important;
place-items: center !important;
cursor: pointer !important;
backdrop-filter: blur(8px) !important;
transition: var(--transition-fast) !important;
}
.nova-web-details-scope .nova-icon-btn:hover,
.nova-web-details-scope .nova-icon-btn.active{
background: var(--nova-brand-primary) !important;
border-color: var(--nova-brand-primary) !important;
transform: scale(1.05) !important;
}
.nova-web-details-scope .nova-topbar-actions{
display: flex !important;
gap: 12px !important;
}
/* =========================================
4. توزيع المحتوى (البوستر بجانب النصوص)
========================================= */
.nova-web-details-scope .nova-hero-content{
display: flex !important;
gap: 40px !important;
align-items: flex-end !important;
padding: 0 var(--page-pad) !important;
}
.nova-web-details-scope .nova-poster-main{
width: clamp(200px, 18vw, 280px) !important;
aspect-ratio: 2 / 3 !important;
object-fit: cover !important;
border-radius: 8px !important;
border: 1px solid rgba(255,255,255,0.1) !important;
box-shadow: 0 25px 60px rgba(0,0,0,0.9) !important;
flex-shrink: 0 !important;
}
.nova-web-details-scope .nova-info-stack{
flex: 1 !important;
min-width: 0 !important;
padding-bottom: 10px !important;
}
.nova-web-details-scope .nova-badge-type,
.nova-web-details-scope .nova-badge-live{
display: inline-flex !important;
align-items: center !important;
padding: 6px 12px !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 6px !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
color: var(--nova-text-dim) !important;
margin-bottom: 16px !important;
backdrop-filter: blur(4px) !important;
}
.nova-web-details-scope .nova-badge-live{
color: #ff3b30 !important;
border-color: rgba(255,59,48,0.3) !important;
background: rgba(255,59,48,0.1) !important;
}
.nova-web-details-scope .pulse-dot{
width: 6px !important;
height: 6px !important;
background: #ff3b30 !important;
border-radius: 50% !important;
margin-left: 8px !important;
box-shadow: 0 0 10px #ff3b30 !important;
}
.nova-web-details-scope .nova-title-main{
font-size: clamp(2.2rem, 5vw, 4rem) !important;
font-weight: 950 !important;
line-height: 1.1 !important;
margin: 0 0 20px !important;
color: var(--nova-text-pure) !important;
text-shadow: 0 4px 20px rgba(0,0,0,0.8) !important;
letter-spacing: -0.02em !important;
}
.nova-web-details-scope .nova-meta-row{
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 20px !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
color: var(--nova-text-dim) !important;
margin-bottom: 16px !important;
}
.nova-web-details-scope .rating-highlight{
color: #f5c518 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 0.85rem !important;
}
.nova-web-details-scope .quality-tag{
background: rgba(255,255,255,0.1) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
padding: 2px 8px !important;
border-radius: 4px !important;
color: #fff !important;
}
.nova-web-details-scope .nova-tags-row{
display: flex !important;
gap: 10px !important;
margin-bottom: 20px !important;
}
.nova-web-details-scope .nova-tags-row span{
font-size: 0.7rem !important;
font-weight: 800 !important;
padding: 4px 10px !important;
border-radius: 4px !important;
background: var(--nova-surface-card) !important;
border: 1px solid var(--nova-border-subtle) !important;
}
.nova-web-details-scope .tag-airing{
color: var(--nova-brand-secondary) !important;
border-color: rgba(20,215,255,0.3) !important;
}
.nova-web-details-scope .tag-translated{
color: var(--nova-brand-primary) !important;
border-color: rgba(155,77,255,0.3) !important;
}
.nova-web-details-scope .nova-plot-main{
font-size: 0.9rem !important;
line-height: 1.8 !important;
color: var(--nova-text-dim) !important;
margin: 0 0 30px !important;
max-width: 850px !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.nova-web-details-scope .nova-stats-row{
display: flex !important;
gap: 24px !important;
font-size: 0.75rem !important;
color: var(--nova-text-muted) !important;
margin-bottom: 30px !important;
}
.nova-web-details-scope .stat-item,
.nova-web-details-scope .stat-btn{
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.nova-web-details-scope .stat-btn{
background: transparent !important;
border: none !important;
color: inherit !important;
font-size: inherit !important;
cursor: pointer !important;
padding: 0 !important;
transition: color 0.2s !important;
}
.nova-web-details-scope .stat-btn:hover{
color: var(--nova-text-pure) !important;
}
.nova-web-details-scope .nova-action-row{
display: flex !important;
gap: 16px !important;
}
.nova-web-details-scope .nova-btn-primary{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
height: 52px !important;
padding: 0 40px !important;
border: none !important;
border-radius: 6px !important;
background: linear-gradient(90deg, var(--nova-brand-primary), var(--nova-brand-secondary)) !important;
color: #fff !important;
font-size: 0.9rem !important;
font-weight: 900 !important;
cursor: pointer !important;
box-shadow: 0 8px 25px rgba(155, 77, 255, 0.25) !important;
transition: var(--transition-fast) !important;
}
.nova-web-details-scope .nova-btn-primary:hover{
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px rgba(155, 77, 255, 0.4) !important;
filter: brightness(1.1) !important;
}
/* =========================================
5. محتوى الصفحة السفلي (Sections & Rails)
========================================= */
.nova-web-details-scope .nova-content-flow{
padding: 40px var(--page-pad) 120px !important;
display: flex !important;
flex-direction: column !important;
gap: 48px !important;
}
.nova-web-details-scope .nova-section-head{
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 24px !important;
}
.nova-web-details-scope .nova-section-head h2{
font-size: 1.1rem !important;
font-weight: 900 !important;
margin: 0 !important;
color: var(--nova-text-pure) !important;
}
.nova-web-details-scope .nova-section-head h2::before{
content: "" !important;
display: inline-block !important;
width: 4px !important;
height: 18px !important;
background: var(--nova-brand-primary) !important;
margin-left: 8px !important;
border-radius: 2px !important;
}
/* سكة الممثلين */
.nova-web-details-scope .nova-people-rail{
display: flex !important;
gap: 20px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
padding-bottom: 10px !important;
}
.nova-web-details-scope .nova-people-rail::-webkit-scrollbar{
display: none !important;
}
.nova-web-details-scope .person-card{
flex: 0 0 auto !important;
width: 100px !important;
text-align: center !important;
}
.nova-web-details-scope .person-avatar{
width: 90px !important;
height: 90px !important;
border-radius: 50% !important;
margin: 0 auto 12px !important;
background: var(--nova-surface-card) !important;
border: 1px solid var(--nova-border-subtle) !important;
overflow: hidden !important;
}
.nova-web-details-scope .person-avatar img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.nova-web-details-scope .person-card strong{
display: block !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
color: var(--nova-text-pure) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.nova-web-details-scope .person-card small{
display: block !important;
font-size: 0.65rem !important;
color: var(--nova-text-muted) !important;
margin-top: 4px !important;
}
.nova-web-details-scope .nova-story-box{
background: var(--nova-surface-dark) !important;
border: 1px solid var(--nova-border-subtle) !important;
padding: 30px !important;
border-radius: 8px !important;
}
.nova-web-details-scope .nova-story-box p{
font-size: 0.85rem !important;
line-height: 1.8 !important;
color: var(--nova-text-dim) !important;
margin: 0 !important;
max-width: 1000px !important;
}
/* =========================================
5.1 أعمال قد تثير اهتمامك - Nova Related Cards
========================================= */
.nova-web-details-scope .nova-empty-state{
min-height: 120px !important;
display: grid !important;
place-items: center !important;
padding: 24px !important;
background: linear-gradient(145deg, rgba(17,13,26,0.96), rgba(7,5,12,0.98)) !important;
border: 1px solid rgba(151, 0, 198, 0.22) !important;
border-radius: 18px !important;
color: var(--nova-text-dim) !important;
font-size: 0.84rem !important;
font-weight: 800 !important;
}
.nova-web-details-scope .nova-related-section{
position: relative !important;
isolation: isolate !important;
}
.nova-web-details-scope .nova-related-section::before{
content: "" !important;
position: absolute !important;
inset: -18px -18px auto !important;
height: 170px !important;
border-radius: 30px !important;
background: radial-gradient(circle at 88% 10%, rgba(151, 0, 198, 0.18), transparent 46%),
radial-gradient(circle at 12% 28%, rgba(50, 150, 255, 0.12), transparent 42%) !important;
pointer-events: none !important;
z-index: -1 !important;
}
.nova-web-details-scope .nova-related-head{
justify-content: space-between !important;
align-items: flex-end !important;
margin-bottom: 20px !important;
}
.nova-web-details-scope .section-title-stack{
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
.nova-web-details-scope .section-kicker{
width: fit-content !important;
font-size: 0.62rem !important;
font-weight: 950 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
color: transparent !important;
background: linear-gradient(90deg, #b24cff, #3296ff) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
.nova-web-details-scope .related-total{
flex: 0 0 auto !important;
font-style: normal !important;
color: #d9ceff !important;
background: linear-gradient(135deg, rgba(151, 0, 198, 0.22), rgba(50, 150, 255, 0.16)) !important;
border: 1px solid rgba(151, 0, 198, 0.34) !important;
border-radius: 999px !important;
padding: 8px 13px !important;
font-size: 0.68rem !important;
font-weight: 950 !important;
box-shadow: 0 10px 24px rgba(151, 0, 198, 0.12) !important;
}
.nova-web-details-scope .nova-related-rail{
display: flex !important;
gap: 16px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-inline: contain !important;
scroll-snap-type: x proximity !important;
scrollbar-width: none !important;
padding: 4px 2px 14px !important;
}
.nova-web-details-scope .nova-related-rail::-webkit-scrollbar{
display: none !important;
}
.nova-web-details-scope .nova-related-grid{
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)) !important;
gap: 18px !important;
align-items: start !important;
}
.nova-web-details-scope .related-media-card{
min-width: 0 !important;
cursor: pointer !important;
color: var(--nova-text-pure) !important;
outline: none !important;
scroll-snap-align: start !important;
}
.nova-web-details-scope .related-poster-shell{
position: relative !important;
aspect-ratio: 2 / 3 !important;
overflow: hidden !important;
border-radius: 24px !important;
background: linear-gradient(145deg, #110d1a, #050309) !important;
border: 1px solid rgba(151, 0, 198, 0.32) !important;
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.58),
0 0 0 1px rgba(255, 255, 255, 0.025) inset !important;
transform: translateZ(0) !important;
transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease, filter 0.28s ease !important;
}
.nova-web-details-scope .related-poster-shell img{
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transform: scale(1.01) !important;
transition: transform 0.38s ease, filter 0.38s ease !important;
}
.nova-web-details-scope .related-poster-gradient{
position: absolute !important;
inset: 0 !important;
background: linear-gradient(to top, rgba(3, 2, 6, 0.94) 0%, rgba(3, 2, 6, 0.36) 42%, transparent 72%),
radial-gradient(circle at 18% 14%, rgba(178, 76, 255, 0.30), transparent 38%),
linear-gradient(135deg, rgba(151, 0, 198, 0.14), rgba(50, 150, 255, 0.10)) !important;
pointer-events: none !important;
}
.nova-web-details-scope .related-media-card:hover .related-poster-shell,
.nova-web-details-scope .related-media-card:focus-visible .related-poster-shell{
transform: translateY(-6px) !important;
border-color: rgba(50, 150, 255, 0.72) !important;
box-shadow: 0 24px 58px rgba(0, 0, 0, 0.70),
0 0 28px rgba(151, 0, 198, 0.28),
0 0 32px rgba(50, 150, 255, 0.18) !important;
filter: brightness(1.04) !important;
}
.nova-web-details-scope .related-media-card:hover .related-poster-shell img,
.nova-web-details-scope .related-media-card:focus-visible .related-poster-shell img{
transform: scale(1.075) !important;
}
.nova-web-details-scope .related-type-chip,
.nova-web-details-scope .related-score,
.nova-web-details-scope .related-favorite{
position: absolute !important;
z-index: 3 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.nova-web-details-scope .related-type-chip{
top: 10px !important;
right: 10px !important;
min-height: 26px !important;
padding: 0 10px !important;
border-radius: 999px !important;
color: #fff !important;
background: linear-gradient(135deg, #9700c6, #3296ff) !important;
font-size: 0.62rem !important;
font-weight: 950 !important;
box-shadow: 0 10px 24px rgba(151, 0, 198, 0.28) !important;
}
.nova-web-details-scope .related-score{
left: 10px !important;
bottom: 10px !important;
gap: 4px !important;
min-height: 25px !important;
padding: 0 9px !important;
border-radius: 999px !important;
color: #fff3a5 !important;
background: rgba(3, 2, 6, 0.72) !important;
border: 1px solid rgba(255, 231, 97, 0.20) !important;
font-size: 0.63rem !important;
font-weight: 950 !important;
}
.nova-web-details-scope .related-favorite{
top: 10px !important;
left: 10px !important;
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
background: rgba(3, 2, 6, 0.70) !important;
color: #fff !important;
cursor: pointer !important;
transition: var(--transition-fast) !important;
}
.nova-web-details-scope .related-favorite:hover,
.nova-web-details-scope .related-favorite.active{
color: #fff !important;
background: linear-gradient(135deg, #9700c6, #3296ff) !important;
border-color: rgba(255, 255, 255, 0.20) !important;
box-shadow: 0 10px 24px rgba(151, 0, 198, 0.28) !important;
}
.nova-web-details-scope .related-card-info{
padding: 12px 4px 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
min-width: 0 !important;
}
.nova-web-details-scope .related-card-info strong{
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 2.55em !important;
color: #fff !important;
font-size: 0.83rem !important;
font-weight: 950 !important;
line-height: 1.28 !important;
text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55) !important;
}
.nova-web-details-scope .related-card-info small{
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
color: var(--nova-text-muted) !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
}
.nova-web-details-scope .related-card-tags{
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
min-height: 22px !important;
}
.nova-web-details-scope .related-card-tags span{
min-height: 22px !important;
display: inline-flex !important;
align-items: center !important;
padding: 0 8px !important;
border-radius: 999px !important;
color: #cfc7ea !important;
background: rgba(17, 13, 26, 0.95) !important;
border: 1px solid rgba(151, 0, 198, 0.18) !important;
font-size: 0.58rem !important;
font-weight: 950 !important;
}
/* =========================================
6. قسم الحلقات (Episodes Panel) - إصلاح العرض
========================================= */
.nova-web-details-scope .episode-panel .nova-section-head{
justify-content: space-between !important;
}
.nova-web-details-scope .nova-sort-btn{
background: var(--nova-surface-card) !important;
border: 1px solid var(--nova-border-subtle) !important;
color: var(--nova-text-dim) !important;
border-radius: 6px !important;
padding: 8px 16px !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
transition: var(--transition-fast) !important;
}
.nova-web-details-scope .nova-sort-btn:hover{
color: #fff !important;
border-color: rgba(255,255,255,0.2) !important;
}
.nova-web-details-scope .nova-season-tabs{
display: flex !important;
gap: 12px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
margin-bottom: 24px !important;
}
.nova-web-details-scope .nova-season-tabs::-webkit-scrollbar{
display: none !important;
}
.nova-web-details-scope .season-tab{
flex: 0 0 auto !important;
background: var(--nova-surface-dark) !important;
border: 1px solid var(--nova-border-subtle) !important;
padding: 12px 24px !important;
border-radius: 8px !important;
color: var(--nova-text-dim) !important;
text-align: right !important;
cursor: pointer !important;
transition: var(--transition-fast) !important;
}
.nova-web-details-scope .season-tab strong{
display: block !important;
font-size: 0.8rem !important;
font-weight: 800 !important;
}
.nova-web-details-scope .season-tab small{
display: block !important;
font-size: 0.65rem !important;
margin-top: 4px !important;
opacity: 0.7 !important;
}
.nova-web-details-scope .season-tab:hover{
background: var(--nova-surface-hover) !important;
}
.nova-web-details-scope .season-tab.active{
background: var(--nova-brand-primary) !important;
border-color: var(--nova-brand-primary) !important;
color: var(--nova-text-pure) !important;
}
.nova-web-details-scope .nova-search-bar{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 24px !important;
font-size: 0.75rem !important;
color: var(--nova-text-muted) !important;
}
.nova-web-details-scope .search-solid-input{
display: flex !important;
align-items: center !important;
gap: 10px !important;
background: var(--nova-surface-dark) !important;
border: 1px solid var(--nova-border-subtle) !important;
padding: 0 16px !important;
height: 42px !important;
border-radius: 6px !important;
width: 300px !important;
}
.nova-web-details-scope .search-solid-input input{
background: transparent !important;
border: none !important;
color: #fff !important;
font-size: 0.75rem !important;
outline: none !important;
width: 100% !important;
}
/* شبكة الحلقات الاحترافية */
.nova-web-details-scope .nova-episode-grid{
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 20px !important;
}
.nova-web-details-scope .nova-episode-card{
background: var(--nova-surface-card) !important;
border: 1px solid var(--nova-border-subtle) !important;
border-radius: 8px !important;
overflow: hidden !important;
cursor: pointer !important;
transition: var(--transition-fast) !important;
}
.nova-web-details-scope .nova-episode-card:hover{
transform: translateY(-4px) !important;
border-color: var(--nova-brand-primary) !important;
box-shadow: 0 12px 30px rgba(0,0,0,0.6) !important;
}
.nova-web-details-scope .ep-thumb{
position: relative !important;
aspect-ratio: 16 / 9 !important;
background: #000 !important;
}
.nova-web-details-scope .ep-thumb img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.nova-web-details-scope .ep-overlay{
position: absolute !important;
inset: 0 !important;
background: rgba(0,0,0,0.5) !important;
display: grid !important;
place-items: center !important;
opacity: 0 !important;
transition: var(--transition-fast) !important;
}
.nova-web-details-scope .play-ring{
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
background: var(--nova-brand-primary) !important;
display: grid !important;
place-items: center !important;
color: #fff !important;
}
.nova-web-details-scope .nova-episode-card:hover .ep-overlay{
opacity: 1 !important;
}
.nova-web-details-scope .ep-details{
padding: 16px !important;
}
.nova-web-details-scope .ep-header{
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
margin-bottom: 8px !important;
}
.nova-web-details-scope .ep-header strong{
font-size: 0.85rem !important;
font-weight: 850 !important;
color: var(--nova-text-pure) !important;
}
.nova-web-details-scope .ep-badges span{
font-size: 0.6rem !important;
font-weight: 900 !important;
background: var(--nova-surface-dark) !important;
border: 1px solid var(--nova-border-subtle) !important;
padding: 2px 8px !important;
border-radius: 4px !important;
}
.nova-web-details-scope .ep-details small{
font-size: 0.7rem !important;
color: var(--nova-text-muted) !important;
}
/* =========================================
7. سيرفرات التشغيل (Solid & Sharp)
========================================= */
.nova-web-details-scope .nova-server-grid{
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
gap: 16px !important;
}
.nova-web-details-scope .nova-server-card{
display: flex !important;
align-items: center !important;
gap: 16px !important;
text-align: right !important;
background: var(--nova-surface-card) !important;
border: 1px solid var(--nova-border-subtle) !important;
padding: 16px 20px !important;
border-radius: 8px !important;
color: var(--nova-text-pure) !important;
cursor: pointer !important;
transition: var(--transition-fast) !important;
}
.nova-web-details-scope .nova-server-card:hover{
background: var(--nova-surface-hover) !important;
border-color: var(--nova-brand-primary) !important;
transform: translateX(-4px) !important;
}
.nova-web-details-scope .server-icon{
width: 44px !important;
height: 44px !important;
border-radius: 6px !important;
background: var(--nova-surface-dark) !important;
display: grid !important;
place-items: center !important;
color: var(--nova-brand-secondary) !important;
border: 1px solid var(--nova-border-subtle) !important;
}
.nova-web-details-scope .nova-server-card:hover .server-icon{
background: var(--nova-brand-primary) !important;
color: #fff !important;
border-color: var(--nova-brand-primary) !important;
}
.nova-web-details-scope .server-details{
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
flex: 1 !important;
min-width: 0 !important;
}
.nova-web-details-scope .server-details strong{
font-size: 0.85rem !important;
font-weight: 850 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.nova-web-details-scope .server-details small{
font-size: 0.7rem !important;
color: var(--nova-text-dim) !important;
}
.nova-web-details-scope .server-badge{
font-style: normal !important;
font-size: 0.65rem !important;
font-weight: 900 !important;
background: var(--nova-surface-dark) !important;
border: 1px solid var(--nova-border-subtle) !important;
padding: 4px 10px !important;
border-radius: 4px !important;
}
/* =========================================
8. استجابة الأندرويد (تكدس عمودي احترافي)
========================================= */
@media (max-width: 760px) {
.nova-web-details-scope .nova-hero-solid{
min-height: 70vh !important;
padding-bottom: 20px !important;
}
/* تغيير التوزيع في الموبايل من أفقي إلى عمودي */
.nova-web-details-scope .nova-hero-content{
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
text-align: center !important;
}
.nova-web-details-scope .nova-vignette-solid{
background: linear-gradient(to top, var(--nova-bg-master) 0%, rgba(3,2,6,0.6) 45%, transparent 100%) !important;
}
.nova-web-details-scope .nova-poster-main{
width: 140px !important;
margin-top: calc(var(--safe-top, 0px) + 70px) !important;
}
.nova-web-details-scope .nova-info-stack{
align-items: center !important;
}
.nova-web-details-scope .nova-title-main{
font-size: 1.8rem !important;
}
.nova-web-details-scope .nova-meta-row,
.nova-web-details-scope .nova-tags-row,
.nova-web-details-scope .nova-stats-row{
justify-content: center !important;
}
.nova-web-details-scope .nova-plot-main{
font-size: 0.8rem !important;
-webkit-line-clamp: 4 !important;
text-align: center !important;
}
.nova-web-details-scope .nova-action-row{
justify-content: center !important;
width: 100% !important;
}
.nova-web-details-scope .nova-btn-primary{
width: 100% !important;
justify-content: center !important;
}
.nova-web-details-scope .nova-content-flow{
padding-top: 24px !important;
gap: 32px !important;
}
.nova-web-details-scope .nova-related-section::before{
inset-inline: -8px !important;
height: 140px !important;
opacity: 0.8 !important;
}
.nova-web-details-scope .nova-related-head{
align-items: flex-start !important;
gap: 12px !important;
}
.nova-web-details-scope .related-total{
padding: 7px 11px !important;
font-size: 0.62rem !important;
}
.nova-web-details-scope .nova-related-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px 12px !important;
}
.nova-web-details-scope .related-poster-shell{
border-radius: 20px !important;
}
.nova-web-details-scope .related-card-info{
padding-top: 10px !important;
}
.nova-web-details-scope .related-card-info strong{
font-size: 0.76rem !important;
}
.nova-web-details-scope .related-card-info small{
font-size: 0.62rem !important;
}
.nova-web-details-scope .related-card-tags span:nth-child(n/**/+3){
display: none !important;
}
/* تحويل الحلقات إلى نمط القائمة (List) لتسهيل التصفح بالهاتف */
.nova-web-details-scope .nova-episode-grid{
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.nova-web-details-scope .nova-episode-card{
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 8px !important;
border-radius: 6px !important;
}
.nova-web-details-scope .ep-thumb{
width: 130px !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
}
.nova-web-details-scope .ep-details{
padding: 0 !important;
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.nova-web-details-scope .ep-header{
flex-direction: column !important;
margin-bottom: 4px !important;
gap: 6px !important;
}
.nova-web-details-scope .ep-header strong{
font-size: 0.75rem !important;
}
.nova-web-details-scope .nova-search-bar{
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.nova-web-details-scope .search-solid-input{
width: 100% !important;
}
}
/* Skeleton تفصيلي بدون شاشة التحميل القديمة */
.nova-web-details-scope .details-skeleton-page{
min-height: 100dvh !important;
position: relative !important;
overflow: hidden !important;
background: #030206 !important;
padding-bottom: calc(var(--bottom-nav-h, 76px) + var(--safe-bottom, 0px)) !important;
}
.nova-web-details-scope .details-skeleton-backdrop{
position: absolute !important;
inset: 0 !important;
min-height: 64vh !important;
opacity: .92 !important;
}
.nova-web-details-scope .details-skeleton-backdrop::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
background:
radial-gradient(circle at 72% 28%, rgba(155,77,255,.28), transparent 32%),
radial-gradient(circle at 22% 58%, rgba(20,215,255,.18), transparent 30%),
linear-gradient(to top, #030206 0%, rgba(3,2,6,.72) 44%, rgba(3,2,6,.15) 100%) !important;
}
.nova-web-details-scope .details-skeleton-content{
position: relative !important;
z-index: 2 !important;
min-height: 78vh !important;
display: grid !important;
grid-template-columns: minmax(170px, 250px) minmax(0, 1fr) !important;
gap: clamp(18px, 4vw, 34px) !important;
align-items: end !important;
max-width: 1180px !important;
margin: 0 auto !important;
padding: clamp(120px, 24vh, 230px) var(--page-pad) 56px !important;
}
.nova-web-details-scope .details-skeleton-poster{
width: 100% !important;
aspect-ratio: 2/3 !important;
border-radius: 24px !important;
box-shadow: 0 32px 80px rgba(0,0,0,.58) !important;
}
.nova-web-details-scope .details-skeleton-copy{
display: grid !important;
gap: 14px !important;
max-width: 620px !important;
}
.nova-web-details-scope .details-skeleton-pill,
.nova-web-details-scope .details-skeleton-title,
.nova-web-details-scope .details-skeleton-line,
.nova-web-details-scope .details-skeleton-actions b{
display: block !important;
border-radius: 999px !important;
}
.nova-web-details-scope .details-skeleton-pill{ width: 120px !important; height: 13px !important; }
.nova-web-details-scope .details-skeleton-title{ width: min(520px, 78vw) !important; height: 44px !important; }
.nova-web-details-scope .details-skeleton-line{ width: min(460px, 70vw) !important; height: 13px !important; }
.nova-web-details-scope .details-skeleton-line.short{ width: min(320px, 54vw) !important; }
.nova-web-details-scope .details-skeleton-actions{ display: flex !important; gap: 12px !important; margin-top: 10px !important; }
.nova-web-details-scope .details-skeleton-actions b{ width: 132px !important; height: 46px !important; }
.nova-web-details-scope .details-shimmer{
position: relative !important;
overflow: hidden !important;
background: linear-gradient(100deg, #090814 0%, #15132b 33%, #221a46 48%, #11142d 62%, #090814 100%) !important;
background-size: 240% 100% !important;
animation: details-shimmer 1.16s linear infinite !important;
}
@keyframes details-shimmer { to { background-position-x: -240%; } }
@media (max-width: 760px) {
.nova-web-details-scope .details-skeleton-content{
grid-template-columns: 1fr !important;
align-items: end !important;
padding-top: 42vh !important;
}
.nova-web-details-scope .details-skeleton-poster{
display: none !important;
}
}
/* Cinematic mobile details — reference layout */
.nova-web-details-scope .cinematic-details-page{
position: relative !important;
min-height: 100dvh !important;
overflow-x: hidden !important;
background: #01030a !important;
color: #fff !important;
padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 24px) !important;
}
.nova-web-details-scope .cinematic-details-page .nova-details-topbar{
position: fixed !important;
z-index: 980 !important;
top: calc(var(--safe-top, 0px) + 10px) !important;
right: 14px !important;
left: 14px !important;
width: auto !important;
pointer-events: none !important;
}
.nova-web-details-scope .cinematic-details-page .nova-details-topbar .nova-icon-btn{
pointer-events: auto !important;
border: 0 !important;
background: rgba(1, 4, 12, .34) !important;
box-shadow: 0 5px 18px rgba(0, 0, 0, .32) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.nova-web-details-scope .cinematic-details-hero{
position: absolute !important;
z-index: 0 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
height: clamp(540px, 56dvh, 790px) !important;
overflow: hidden !important;
background: #050713 !important;
}
.nova-web-details-scope .cinematic-details-backdrop{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
filter: saturate(1.08) contrast(1.05) !important;
}
.nova-web-details-scope .cinematic-details-shade{
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(180deg, rgba(1, 3, 10, .04) 0%, rgba(1, 3, 10, .04) 50%, rgba(1, 3, 10, .72) 78%, #01030a 100%),
linear-gradient(90deg, rgba(1, 3, 10, .14), transparent 24%, transparent 76%, rgba(1, 3, 10, .14)) !important;
}
.nova-web-details-scope .cinematic-details-content{
position: relative !important;
z-index: 2 !important;
width: min(100%, 920px) !important;
margin: 0 auto !important;
padding: clamp(470px, 51dvh, 700px) clamp(18px, 5vw, 42px) 0 !important;
box-sizing: border-box !important;
text-align: center !important;
}
.nova-web-details-scope .cinematic-eyebrow{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
color: rgba(255, 255, 255, .78) !important;
font-size: .92rem !important;
}
.nova-web-details-scope .cinematic-eyebrow span{
width: 13px !important;
height: 13px !important;
border-radius: 2px !important;
background: linear-gradient(145deg, #7744ff, #1b9eff) !important;
transform: rotate(45deg) !important;
box-shadow: 0 0 16px rgba(68, 105, 255, .5) !important;
}
.nova-web-details-scope .cinematic-eyebrow b{ font-weight: 500 !important; }
.nova-web-details-scope .cinematic-title{
margin: 11px 0 16px !important;
color: #f4e9e5 !important;
font-size: clamp(3rem, 10vw, 6.4rem) !important;
line-height: .96 !important;
font-weight: 900 !important;
letter-spacing: -.055em !important;
text-shadow: 0 9px 32px rgba(0, 0, 0, .84) !important;
}
.nova-web-details-scope .cinematic-meta{
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 0 !important;
color: rgba(255, 255, 255, .63) !important;
font-size: .9rem !important;
}
.nova-web-details-scope .cinematic-meta > *{
display: inline-flex !important;
align-items: center !important;
min-height: 28px !important;
padding: 0 13px !important;
border-inline-start: 1px solid rgba(255, 255, 255, .20) !important;
}
.nova-web-details-scope .cinematic-meta > *:first-child{ border-inline-start: 0 !important; }
.nova-web-details-scope .cinematic-quality{ color: #9e39ff !important; font-size: 1.02rem !important; font-weight: 900 !important; font-style: italic !important; }
.nova-web-details-scope .cinematic-age{ border: 1px solid rgba(255, 255, 255, .34) !important; border-radius: 6px !important; margin-inline: 7px !important; padding-inline: 8px !important; min-height: 26px !important; color: rgba(255, 255, 255, .8) !important; }
.nova-web-details-scope .cinematic-ranking{
margin-top: 15px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 9px !important;
}
.nova-web-details-scope .cinematic-ranking span{
min-height: 42px !important;
padding: 0 15px !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
border: 1px solid rgba(130, 146, 183, .28) !important;
border-radius: 8px !important;
background: rgba(3, 7, 17, .52) !important;
color: rgba(255, 255, 255, .72) !important;
font-size: .82rem !important;
}
.nova-web-details-scope .cinematic-ranking span:first-child{ direction: ltr !important; }
.nova-web-details-scope .cinematic-ranking span:first-child .oscar-icon{ color: #9b36ff !important; }
.nova-web-details-scope .cinematic-story{
margin-top: 27px !important;
text-align: right !important;
}
.nova-web-details-scope .cinematic-story h2{
margin: 0 0 10px !important;
font-size: 1.24rem !important;
font-weight: 900 !important;
}
.nova-web-details-scope .cinematic-story p{
margin: 0 !important;
overflow: hidden !important;
color: rgba(255, 255, 255, .68) !important;
font-size: clamp(.9rem, 2.8vw, 1.06rem) !important;
line-height: 1.85 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
}
.nova-web-details-scope .cinematic-story p.expanded{ display: block !important; overflow: visible !important; }
.nova-web-details-scope .cinematic-story button{
margin-top: 4px !important;
padding: 4px 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
border: 0 !important;
background: transparent !important;
color: #b83bff !important;
font-size: .95rem !important;
font-weight: 800 !important;
}
.nova-web-details-scope .cinematic-actions{
margin-top: 28px !important;
display: grid !important;
grid-template-columns: 110px 110px minmax(260px, 1fr) !important;
align-items: center !important;
gap: 14px !important;
direction: ltr !important;
}
.nova-web-details-scope .cinematic-secondary-action{
min-height: 78px !important;
display: grid !important;
place-items: center !important;
align-content: center !important;
gap: 7px !important;
border: 0 !important;
background: transparent !important;
color: rgba(255, 255, 255, .88) !important;
}
.nova-web-details-scope .cinematic-secondary-action span{ font-size: .78rem !important; }
.nova-web-details-scope .cinematic-watch-button{
height: 64px !important;
padding: 0 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 15px !important;
border: 0 !important;
border-radius: 32px !important;
color: #fff !important;
background: linear-gradient(100deg, #b521ff 0%, #7440ff 47%, #159eff 100%) !important;
box-shadow: 0 12px 32px rgba(82, 63, 255, .36), 0 0 18px rgba(46, 145, 255, .18) !important;
font-size: 1.2rem !important;
font-weight: 850 !important;
direction: rtl !important;
}
.nova-web-details-scope .cinematic-tabs{
margin-top: 26px !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
.nova-web-details-scope .cinematic-tabs button{
position: relative !important;
min-height: 58px !important;
padding: 0 8px !important;
border: 0 !important;
background: transparent !important;
color: rgba(255, 255, 255, .57) !important;
font-size: .96rem !important;
font-weight: 700 !important;
}
.nova-web-details-scope .cinematic-tabs button.active{ color: #fff !important; font-weight: 900 !important; }
.nova-web-details-scope .cinematic-tabs button.active::after{
content: "" !important;
position: absolute !important;
right: 22% !important;
bottom: -1px !important;
left: 22% !important;
height: 3px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, #c02cff, #1da0ff) !important;
}
.nova-web-details-scope .cinematic-tab-content{
padding: 24px 0 30px !important;
text-align: right !important;
}
.nova-web-details-scope .cinematic-tab-content .nova-content-section{ margin: 0 !important; }
.nova-web-details-scope .cinematic-tab-content .nova-section-head{ margin-bottom: 14px !important; }
.nova-web-details-scope .cinematic-tab-content .nova-section-head h2{ font-size: 1rem !important; }
.nova-web-details-scope .cinematic-genre-pills{ margin-bottom: 24px !important; }
.nova-web-details-scope .cinematic-cast-section{ margin-top: 24px !important; }
.nova-web-details-scope .cinematic-tab-content .episode-panel > .nova-section-head{
display: none !important;
}
.nova-web-details-scope .cinematic-tab-content .nova-season-tabs{
margin-bottom: 14px !important;
}
.nova-web-details-scope .cinematic-tab-content .nova-search-bar{
margin-bottom: 14px !important;
}
.nova-web-details-scope .cinematic-tab-content .nova-episode-grid{
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.nova-web-details-scope .cinematic-tab-content .nova-episode-card{
min-height: 150px !important;
display: grid !important;
grid-template-columns: 128px minmax(0, 1fr) 44px !important;
grid-template-areas: "thumb details actions" !important;
align-items: stretch !important;
direction: ltr !important;
border: 1px solid rgba(128, 149, 185, .25) !important;
border-radius: 17px !important;
background: linear-gradient(90deg, rgba(5, 10, 19, .98), rgba(3, 7, 15, .96)) !important;
box-shadow: none !important;
}
.nova-web-details-scope .cinematic-tab-content .nova-episode-card:hover{ transform: none !important; }
.nova-web-details-scope .cinematic-tab-content .ep-thumb{ grid-area: thumb !important; aspect-ratio: auto !important; min-height: 150px !important; margin: 12px !important; border-radius: 10px !important; overflow: hidden !important; }
.nova-web-details-scope .cinematic-tab-content .ep-overlay{ opacity: 1 !important; background: rgba(0, 0, 0, .22) !important; }
.nova-web-details-scope .cinematic-tab-content .play-ring{ width: 48px !important; height: 48px !important; background: rgba(0, 0, 0, .56) !important; border: 1px solid rgba(255,255,255,.5) !important; }
.nova-web-details-scope .cinematic-tab-content .ep-details{ grid-area: details !important; min-width: 0 !important; padding: 20px 10px !important; direction: rtl !important; text-align: right !important; }
.nova-web-details-scope .cinematic-tab-content .ep-header{ margin: 0 !important; }
.nova-web-details-scope .cinematic-tab-content .ep-header > div:first-child{ min-width: 0 !important; display: grid !important; gap: 5px !important; }
.nova-web-details-scope .cinematic-tab-content .ep-header small{ color: rgba(255,255,255,.52) !important; font-size: .72rem !important; }
.nova-web-details-scope .cinematic-tab-content .ep-header strong{ overflow: hidden !important; color: #fff !important; font-size: 1.06rem !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.nova-web-details-scope .cinematic-tab-content .ep-details p{ margin: 12px 0 0 !important; overflow: hidden !important; color: rgba(255,255,255,.58) !important; font-size: .78rem !important; line-height: 1.65 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
.nova-web-details-scope .cinematic-tab-content .ep-badges{ display: none !important; }
.nova-web-details-scope .cinematic-tab-content .ep-card-actions{ grid-area: actions !important; padding: 20px 7px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 19px !important; color: rgba(255,255,255,.7) !important; }
@media (max-width: 680px) {
.nova-web-details-scope .cinematic-details-hero{ height: clamp(510px, 54dvh, 690px) !important; }
.nova-web-details-scope .cinematic-details-content{ padding: clamp(455px, 49dvh, 610px) 16px 0 !important; }
.nova-web-details-scope .cinematic-title{ font-size: clamp(2.65rem, 12.6vw, 4.7rem) !important; }
.nova-web-details-scope .cinematic-meta{ font-size: .76rem !important; }
.nova-web-details-scope .cinematic-meta > *{ padding-inline: 9px !important; }
.nova-web-details-scope .cinematic-ranking span{ min-height: 38px !important; padding-inline: 11px !important; font-size: .72rem !important; }
.nova-web-details-scope .cinematic-story{ margin-top: 22px !important; }
.nova-web-details-scope .cinematic-actions{ grid-template-columns: 74px 74px minmax(0, 1fr) !important; gap: 8px !important; }
.nova-web-details-scope .cinematic-secondary-action{ min-height: 68px !important; }
.nova-web-details-scope .cinematic-secondary-action span{ font-size: .7rem !important; }
.nova-web-details-scope .cinematic-watch-button{ height: 58px !important; padding-inline: 20px !important; font-size: 1.04rem !important; }
.nova-web-details-scope .cinematic-tabs{ margin-top: 18px !important; }
.nova-web-details-scope .cinematic-tabs button{ min-height: 52px !important; font-size: .84rem !important; }
.nova-web-details-scope .cinematic-tab-content{ padding-top: 18px !important; }
.nova-web-details-scope .cinematic-tab-content .nova-search-bar{ display: grid !important; gap: 10px !important; }
.nova-web-details-scope .cinematic-tab-content .search-solid-input{ width: 100% !important; }
.nova-web-details-scope .cinematic-tab-content .nova-episode-card{ min-height: 134px !important; grid-template-columns: 104px minmax(0, 1fr) 38px !important; }
.nova-web-details-scope .cinematic-tab-content .ep-thumb{ min-height: 110px !important; margin: 11px !important; }
.nova-web-details-scope .cinematic-tab-content .ep-details{ padding: 16px 6px !important; }
.nova-web-details-scope .cinematic-tab-content .ep-header strong{ font-size: .94rem !important; }
.nova-web-details-scope .cinematic-tab-content .ep-details p{ margin-top: 8px !important; font-size: .7rem !important; }
.nova-web-details-scope .cinematic-tab-content .ep-card-actions{ padding-inline: 4px !important; }
}
@media (min-width: 900px) {
.nova-web-details-scope .cinematic-details-backdrop{ object-position: center 22% !important; }
.nova-web-details-scope .cinematic-details-content{ padding-inline: 54px !important; }
}
/* =========================================================
Reference details layout — desktop + Android (2026-07)
Keeps the existing details header/topbar untouched.
========================================================= */
.nova-web-details-scope .cinematic-details-page{
--details-panel: rgba(2, 5, 11, .90) !important;
--details-panel-soft: rgba(7, 10, 17, .88) !important;
--details-line: rgba(151, 165, 190, .28) !important;
--details-muted: rgba(255, 255, 255, .62) !important;
--details-gradient: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%) !important;
position: relative !important;
min-height: 100dvh !important;
padding-bottom: calc(82px + var(--safe-bottom, 0px)) !important;
overflow: hidden !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-hero{
position: relative !important;
z-index: 0 !important;
width: 100% !important;
height: clamp(330px, 38vw, 450px) !important;
overflow: hidden !important;
background: #02040a !important;
}
.nova-web-details-scope .cinematic-details-backdrop{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 22% !important;
filter: saturate(1.03) contrast(1.04) !important;
}
.nova-web-details-scope .cinematic-details-shade{
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .08) 52%, rgba(0, 0, 0, .88) 100%),
linear-gradient(90deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .88) 25%, rgba(0, 0, 0, .42) 52%, rgba(0, 0, 0, .08) 78%, rgba(0, 0, 0, .18) 100%) !important;
}
.nova-web-details-scope .cinematic-hero-copy{
position: absolute !important;
z-index: 2 !important;
top: 0 !important;
bottom: 0 !important;
left: clamp(34px, 4vw, 64px) !important;
width: min(46vw, 510px) !important;
padding-top: clamp(48px, 6vh, 78px) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
box-sizing: border-box !important;
direction: rtl !important;
text-align: right !important;
}
.nova-web-details-scope .cinematic-eyebrow{
justify-content: flex-start !important;
gap: 9px !important;
color: rgba(255, 255, 255, .92) !important;
font-size: clamp(.76rem, 1.05vw, .94rem) !important;
}
.nova-web-details-scope .cinematic-eyebrow span{
width: 9px !important;
height: 9px !important;
border-radius: 1px !important;
}
.nova-web-details-scope .cinematic-title{
margin: 10px 0 13px !important;
max-width: 100% !important;
color: #fff !important;
font-size: clamp(2.7rem, 5.2vw, 5rem) !important;
line-height: .98 !important;
font-weight: 950 !important;
letter-spacing: -.045em !important;
text-align: right !important;
text-shadow: 0 8px 28px rgba(0, 0, 0, .9) !important;
}
.nova-web-details-scope .cinematic-meta{
justify-content: flex-start !important;
gap: 8px !important;
font-size: .78rem !important;
}
.nova-web-details-scope .cinematic-meta > *{
min-height: 29px !important;
padding: 0 12px !important;
border: 1px solid rgba(255, 255, 255, .35) !important;
border-radius: 5px !important;
color: rgba(255, 255, 255, .86) !important;
background: rgba(0, 0, 0, .23) !important;
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;
}
.nova-web-details-scope .cinematic-meta > *:first-child{
border-inline-start: 1px solid rgba(255, 255, 255, .35) !important;
}
.nova-web-details-scope .cinematic-age{
margin: 0 !important;
min-height: 29px !important;
padding-inline: 12px !important;
border: 1px solid rgba(255, 255, 255, .35) !important;
}
.nova-web-details-scope .cinematic-ranking{
margin-top: 10px !important;
justify-content: flex-start !important;
gap: 8px !important;
}
.nova-web-details-scope .cinematic-ranking span{
min-height: 31px !important;
padding: 0 12px !important;
border-radius: 5px !important;
background: rgba(0, 0, 0, .28) !important;
font-size: .75rem !important;
}
.nova-web-details-scope .cinematic-ranking span:first-child{
color: #fff !important;
}
.nova-web-details-scope .cinematic-ranking span:last-child{
border-color: transparent !important;
background:
linear-gradient(#05070d, #05070d) padding-box,
linear-gradient(100deg, #c000ff, #139cff) border-box !important;
border: 1px solid transparent !important;
color: #d950ff !important;
}
.nova-web-details-scope .cinematic-actions{
width: 100% !important;
margin-top: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 15px !important;
direction: ltr !important;
}
.nova-web-details-scope .cinematic-watch-button{
width: clamp(205px, 21vw, 245px) !important;
height: 55px !important;
flex: 0 0 auto !important;
border-radius: 12px !important;
background: var(--details-gradient) !important;
box-shadow: 0 12px 30px rgba(85, 48, 255, .32) !important;
font-size: 1rem !important;
}
.nova-web-details-scope .cinematic-secondary-action{
width: 58px !important;
min-height: 70px !important;
padding: 0 !important;
gap: 5px !important;
direction: rtl !important;
}
.nova-web-details-scope .cinematic-secondary-action > .oscar-icon{
width: 48px !important;
height: 48px !important;
padding: 11px !important;
box-sizing: border-box !important;
border: 1px solid rgba(255, 255, 255, .50) !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, .25) !important;
}
.nova-web-details-scope .cinematic-secondary-action span{
font-size: .68rem !important;
color: rgba(255, 255, 255, .82) !important;
}
.nova-web-details-scope .cinematic-secondary-action.active > .oscar-icon{
border-color: rgba(155,77,255,.72) !important;
color: #fff !important;
background: linear-gradient(135deg, rgba(240,74,216,.28), rgba(155,77,255,.30) 52%, rgba(20,215,255,.22)) !important;
box-shadow: 0 0 0 1px rgba(155,77,255,.12), 0 8px 22px rgba(83,43,170,.18) !important;
}
.nova-web-details-scope .cinematic-secondary-action.active span{
color: rgba(255,255,255,.96) !important;
font-weight: 800 !important;
}
.nova-web-details-scope .cinematic-details-content{
position: relative !important;
z-index: 3 !important;
width: min(100% - 64px, 1080px) !important;
margin: 0 auto !important;
padding: 0 0 34px !important;
text-align: right !important;
box-sizing: border-box !important;
}
.nova-web-details-scope .cinematic-tabs{
margin: 0 !important;
min-height: 52px !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}
.nova-web-details-scope .cinematic-tabs button{
min-height: 52px !important;
font-size: .93rem !important;
}
.nova-web-details-scope .cinematic-tabs button.active::after{
right: 30% !important;
left: 30% !important;
height: 3px !important;
}
.nova-web-details-scope .cinematic-desktop-content{
display: block !important;
padding-top: 10px !important;
}
.nova-web-details-scope .cinematic-mobile-content{
display: none !important;
}
.nova-web-details-scope .reference-desktop-grid{
display: grid !important;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
gap: 16px !important;
align-items: start !important;
direction: ltr !important;
}
.nova-web-details-scope .reference-primary-column,
.nova-web-details-scope .reference-side-column,
.nova-web-details-scope .reference-wide-details-grid{
min-width: 0 !important;
direction: rtl !important;
}
.nova-web-details-scope .reference-side-column{
display: grid !important;
gap: 12px !important;
}
.nova-web-details-scope .reference-wide-details-grid{
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr) !important;
gap: 16px !important;
align-items: start !important;
}
.nova-web-details-scope .reference-panel{
min-width: 0 !important;
padding: 13px 14px !important;
border: 1px solid var(--details-line) !important;
border-radius: 12px !important;
background: linear-gradient(180deg, rgba(3, 6, 12, .96), rgba(0, 2, 7, .98)) !important;
box-shadow: 0 15px 45px rgba(0, 0, 0, .18) !important;
}
.nova-web-details-scope .reference-panel-heading{
min-height: 25px !important;
margin-bottom: 9px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 11px !important;
}
.nova-web-details-scope .reference-panel-heading h2{
margin: 0 !important;
color: #fff !important;
font-size: .98rem !important;
font-weight: 900 !important;
}
.nova-web-details-scope .reference-panel-heading span{
color: #149cff !important;
font-size: .72rem !important;
font-weight: 800 !important;
}
.nova-web-details-scope .reference-season-tabs{
margin: -1px 0 9px !important;
padding-bottom: 4px !important;
display: flex !important;
gap: 6px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.nova-web-details-scope .reference-season-tabs::-webkit-scrollbar{
display: none !important;
}
.nova-web-details-scope .reference-season-tabs button{
min-height: 28px !important;
padding: 0 10px !important;
flex: 0 0 auto !important;
border: 1px solid rgba(133, 151, 181, .28) !important;
border-radius: 6px !important;
background: rgba(9, 13, 22, .78) !important;
color: rgba(255, 255, 255, .66) !important;
font-size: .68rem !important;
}
.nova-web-details-scope .reference-season-tabs button.active{
border-color: transparent !important;
background:
linear-gradient(#070a11, #070a11) padding-box,
linear-gradient(100deg, #c000ff, #139cff) border-box !important;
color: #fff !important;
}
.nova-web-details-scope .reference-episode-list{
display: grid !important;
gap: 8px !important;
}
.nova-web-details-scope .reference-episode-card{
min-height: 65px !important;
display: grid !important;
grid-template-columns: 108px minmax(0, 1fr) 58px 36px !important;
align-items: stretch !important;
gap: 0 !important;
overflow: hidden !important;
border: 1px solid rgba(137, 153, 180, .20) !important;
border-radius: 9px !important;
background: rgba(1, 4, 9, .92) !important;
direction: ltr !important;
cursor: pointer !important;
}
.nova-web-details-scope .reference-episode-card:hover{
border-color: rgba(91, 119, 188, .62) !important;
background: rgba(5, 8, 16, .98) !important;
}
.nova-web-details-scope .reference-episode-thumb{
position: relative !important;
min-height: 65px !important;
overflow: hidden !important;
}
.nova-web-details-scope .reference-episode-thumb img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.nova-web-details-scope .reference-episode-thumb::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: rgba(0, 0, 0, .12) !important;
}
.nova-web-details-scope .reference-play-ring{
position: absolute !important;
z-index: 2 !important;
top: 50% !important;
left: 50% !important;
width: 39px !important;
height: 39px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255, 255, 255, .85) !important;
border-radius: 50% !important;
background: rgba(0, 0, 0, .58) !important;
color: #fff !important;
transform: translate(-50%, -50%) !important;
}
.nova-web-details-scope .reference-episode-copy{
min-width: 0 !important;
padding: 10px 12px !important;
align-self: center !important;
direction: rtl !important;
text-align: right !important;
}
.nova-web-details-scope .reference-episode-copy strong{
display: block !important;
overflow: hidden !important;
color: #fff !important;
font-size: .82rem !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .reference-episode-copy p{
margin: 4px 0 0 !important;
overflow: hidden !important;
color: rgba(255, 255, 255, .55) !important;
font-size: .62rem !important;
line-height: 1.55 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
}
.nova-web-details-scope .reference-episode-duration{
align-self: center !important;
display: grid !important;
gap: 2px !important;
direction: rtl !important;
text-align: center !important;
color: rgba(255, 255, 255, .75) !important;
font-size: .6rem !important;
}
.nova-web-details-scope .reference-episode-duration small{
color: rgba(255, 255, 255, .58) !important;
font-size: .58rem !important;
}
.nova-web-details-scope .reference-download-icon{
display: grid !important;
place-items: center !important;
border-left: 1px solid rgba(255, 255, 255, .08) !important;
color: rgba(255, 255, 255, .78) !important;
}
.nova-web-details-scope .reference-show-all{
margin-top: 10px !important;
padding: 2px 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
border: 0 !important;
background: transparent !important;
color: #bd36ff !important;
font-size: .74rem !important;
font-weight: 850 !important;
}
.nova-web-details-scope .reference-related-strip{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 9px !important;
}
.nova-web-details-scope .reference-related-card{
min-width: 0 !important;
display: grid !important;
grid-template-rows: auto auto auto !important;
gap: 4px !important;
border: 0 !important;
background: transparent !important;
color: #fff !important;
cursor: pointer !important;
}
.nova-web-details-scope .reference-related-card img{
width: 100% !important;
aspect-ratio: 2 / 2.7 !important;
object-fit: cover !important;
border: 1px solid rgba(126, 145, 178, .24) !important;
border-radius: 8px !important;
background: #090d16 !important;
}
.nova-web-details-scope .reference-related-card strong{
overflow: hidden !important;
color: #fff !important;
font-size: .68rem !important;
line-height: 1.35 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .reference-related-card small{
display: flex !important;
align-items: center !important;
gap: 3px !important;
color: #f3b700 !important;
font-size: .58rem !important;
direction: ltr !important;
justify-self: end !important;
}
.nova-web-details-scope .reference-info-grid{
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
.nova-web-details-scope .reference-info-grid > div{
min-width: 0 !important;
padding: 4px 8px 9px !important;
border-inline-start: 1px solid rgba(255, 255, 255, .07) !important;
text-align: center !important;
}
.nova-web-details-scope .reference-info-grid > div:first-child{
border-inline-start: 0 !important;
}
.nova-web-details-scope .reference-info-grid dt{
color: rgba(255, 255, 255, .57) !important;
font-size: .61rem !important;
}
.nova-web-details-scope .reference-info-grid dd{
margin: 3px 0 0 !important;
overflow: hidden !important;
color: #fff !important;
font-size: .66rem !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .reference-details-story{
margin: 9px 0 0 !important;
color: rgba(255, 255, 255, .67) !important;
font-size: .68rem !important;
line-height: 1.7 !important;
}
.nova-web-details-scope .reference-cast-section{
margin-top: 18px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(255, 255, 255, .08) !important;
}
.nova-web-details-scope .reference-cast-section h3{
margin: 0 0 11px !important;
font-size: .92rem !important;
}
.nova-web-details-scope .reference-details-sources,
.nova-web-details-scope .reference-watch-panel .nova-content-section{
margin-top: 18px !important;
}
.nova-web-details-scope .reference-watch-panel{
padding: 15px !important;
}
.nova-web-details-scope .reference-watch-panel > .nova-content-section,
.nova-web-details-scope .reference-details-sources > .nova-content-section{
margin-inline: 0 !important;
}
@media (max-width: 820px) {
.nova-web-details-scope .cinematic-details-page{
padding-bottom: calc(78px + var(--safe-bottom, 0px)) !important;
}
.nova-web-details-scope .cinematic-details-hero{
height: auto !important;
min-height: 450px !important;
overflow: visible !important;
}
.nova-web-details-scope .cinematic-details-backdrop{
height: 270px !important;
object-position: center top !important;
}
.nova-web-details-scope .cinematic-details-shade{
height: 355px !important;
background:
linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .06) 43%, rgba(0, 0, 0, .93) 78%, #000 100%),
linear-gradient(90deg, rgba(0, 0, 0, .16), transparent 45%, rgba(0, 0, 0, .12)) !important;
}
.nova-web-details-scope .cinematic-hero-copy{
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
min-height: 450px !important;
padding: 230px 15px 18px !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
}
.nova-web-details-scope .cinematic-eyebrow,
.nova-web-details-scope .cinematic-meta,
.nova-web-details-scope .cinematic-ranking{
justify-content: center !important;
}
.nova-web-details-scope .cinematic-title{
margin: 8px 0 12px !important;
font-size: clamp(2rem, 10vw, 3.25rem) !important;
text-align: center !important;
}
.nova-web-details-scope .cinematic-meta{
gap: 6px !important;
}
.nova-web-details-scope .cinematic-meta > *,
.nova-web-details-scope .cinematic-age{
min-height: 28px !important;
padding-inline: 10px !important;
font-size: .7rem !important;
}
.nova-web-details-scope .cinematic-ranking{
margin-top: 9px !important;
}
.nova-web-details-scope .cinematic-ranking span{
min-height: 30px !important;
padding-inline: 10px !important;
font-size: .68rem !important;
}
.nova-web-details-scope .cinematic-actions{
margin-top: 15px !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
direction: ltr !important;
}
.nova-web-details-scope .cinematic-watch-button{
width: 100% !important;
height: 48px !important;
grid-column: 1 / -1 !important;
grid-row: 1 !important;
border-radius: 7px !important;
font-size: .94rem !important;
}
.nova-web-details-scope .cinematic-secondary-action{
width: 100% !important;
min-height: 43px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid rgba(255, 255, 255, .26) !important;
border-radius: 7px !important;
background: rgba(0, 0, 0, .26) !important;
}
.nova-web-details-scope .cinematic-secondary-action > .oscar-icon{
width: 22px !important;
height: 22px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
.nova-web-details-scope .cinematic-secondary-action span{
font-size: .73rem !important;
}
.nova-web-details-scope .cinematic-details-content{
width: 100% !important;
padding: 0 14px 24px !important;
}
.nova-web-details-scope .cinematic-tabs{
position: relative !important;
z-index: 5 !important;
}
.nova-web-details-scope .cinematic-tabs button{
min-height: 48px !important;
font-size: .78rem !important;
}
.nova-web-details-scope .cinematic-desktop-content{
display: none !important;
}
.nova-web-details-scope .cinematic-mobile-content{
display: block !important;
padding-top: 10px !important;
}
.nova-web-details-scope .reference-panel{
padding: 10px 0 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.nova-web-details-scope .reference-panel-heading{
padding-inline: 2px !important;
}
.nova-web-details-scope .reference-episode-card{
min-height: 66px !important;
grid-template-columns: 96px minmax(0, 1fr) 49px 31px !important;
border-radius: 8px !important;
}
.nova-web-details-scope .reference-episode-thumb{
min-height: 66px !important;
}
.nova-web-details-scope .reference-play-ring{
width: 38px !important;
height: 38px !important;
}
.nova-web-details-scope .reference-episode-copy{
padding: 8px 9px !important;
}
.nova-web-details-scope .reference-episode-copy strong{
font-size: .76rem !important;
}
.nova-web-details-scope .reference-episode-copy p{
font-size: .58rem !important;
-webkit-line-clamp: 2 !important;
}
.nova-web-details-scope .reference-episode-duration{
font-size: .56rem !important;
}
.nova-web-details-scope .reference-episode-duration small{
font-size: .54rem !important;
}
.nova-web-details-scope .reference-related-strip{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px 9px !important;
}
.nova-web-details-scope .reference-related-card strong{
font-size: .72rem !important;
}
.nova-web-details-scope .reference-info-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
border: 1px solid rgba(255, 255, 255, .10) !important;
border-radius: 9px !important;
overflow: hidden !important;
}
.nova-web-details-scope .reference-info-grid > div{
padding: 10px 8px !important;
border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
.nova-web-details-scope .reference-info-grid > div:nth-last-child(-n/**/+2){
border-bottom: 0 !important;
}
.nova-web-details-scope .reference-details-story{
margin-top: 13px !important;
font-size: .76rem !important;
line-height: 1.75 !important;
}
}
@media (max-width: 390px) {
.nova-web-details-scope .cinematic-details-backdrop{
height: 235px !important;
}
.nova-web-details-scope .cinematic-details-shade{
height: 315px !important;
}
.nova-web-details-scope .cinematic-hero-copy{
min-height: 425px !important;
padding-top: 202px !important;
}
.nova-web-details-scope .cinematic-title{
font-size: 2rem !important;
}
.nova-web-details-scope .cinematic-meta > *,
.nova-web-details-scope .cinematic-age{
min-height: 26px !important;
padding-inline: 8px !important;
font-size: .64rem !important;
}
.nova-web-details-scope .cinematic-ranking span{
padding-inline: 8px !important;
font-size: .62rem !important;
}
.nova-web-details-scope .reference-episode-card{
grid-template-columns: 88px minmax(0, 1fr) 30px !important;
}
.nova-web-details-scope .reference-episode-duration{
display: none !important;
}
.nova-web-details-scope .reference-episode-copy p{
-webkit-line-clamp: 1 !important;
}
}
/* =========================================================
Full-screen details distribution + taller Android hero
========================================================= */
@media (min-width: 821px) {
.nova-web-details-scope .cinematic-details-page{
overflow-x: hidden !important;
}
.nova-web-details-scope .cinematic-details-hero{
height: clamp(440px, 43vw, 640px) !important;
min-height: 440px !important;
}
.nova-web-details-scope .cinematic-details-backdrop{
object-position: center 24% !important;
}
.nova-web-details-scope .cinematic-details-shade{
background:
linear-gradient(180deg, rgba(0, 0, 0, .03) 0%, rgba(0, 0, 0, .06) 58%, rgba(0, 0, 0, .86) 100%),
linear-gradient(90deg, rgba(0, 0, 0, .99) 0%, rgba(0, 0, 0, .92) 20%, rgba(0, 0, 0, .58) 43%, rgba(0, 0, 0, .10) 72%, rgba(0, 0, 0, .13) 100%) !important;
}
.nova-web-details-scope .cinematic-hero-copy{
left: clamp(42px, 5vw, 96px) !important;
width: min(39vw, 620px) !important;
padding-top: clamp(62px, 7vh, 102px) !important;
}
.nova-web-details-scope .cinematic-title{
font-size: clamp(3.2rem, 5.5vw, 5.8rem) !important;
}
.nova-web-details-scope .cinematic-details-content{
width: calc(100% - clamp(42px, 6vw, 104px)) !important;
max-width: 1720px !important;
margin-inline: auto !important;
padding-bottom: 48px !important;
}
.nova-web-details-scope .cinematic-tabs{
min-height: 58px !important;
}
.nova-web-details-scope .cinematic-tabs button{
min-height: 58px !important;
font-size: 1rem !important;
}
.nova-web-details-scope .cinematic-desktop-content{
padding-top: clamp(14px, 1.7vw, 26px) !important;
}
.nova-web-details-scope .reference-desktop-grid{
grid-template-columns: minmax(560px, 1.22fr) minmax(430px, .78fr) !important;
gap: clamp(18px, 2vw, 32px) !important;
}
.nova-web-details-scope .reference-wide-details-grid{
grid-template-columns: minmax(620px, 1.28fr) minmax(420px, .72fr) !important;
gap: clamp(18px, 2vw, 32px) !important;
}
.nova-web-details-scope .reference-side-column{
gap: clamp(15px, 1.5vw, 24px) !important;
}
.nova-web-details-scope .reference-panel{
padding: clamp(17px, 1.6vw, 26px) !important;
border-radius: 15px !important;
}
.nova-web-details-scope .reference-panel-heading{
min-height: 31px !important;
margin-bottom: 13px !important;
}
.nova-web-details-scope .reference-panel-heading h2{
font-size: clamp(1rem, 1.25vw, 1.2rem) !important;
}
.nova-web-details-scope .reference-episode-list{
gap: 10px !important;
}
.nova-web-details-scope .reference-episode-card{
min-height: 82px !important;
grid-template-columns: clamp(120px, 10vw, 160px) minmax(0, 1fr) 70px 44px !important;
border-radius: 11px !important;
}
.nova-web-details-scope .reference-episode-thumb{
min-height: 82px !important;
}
.nova-web-details-scope .reference-episode-copy{
padding: 13px 16px !important;
}
.nova-web-details-scope .reference-episode-copy strong{
font-size: .93rem !important;
}
.nova-web-details-scope .reference-episode-copy p{
font-size: .7rem !important;
}
.nova-web-details-scope .reference-related-strip{
gap: 12px !important;
}
.nova-web-details-scope .reference-related-card strong{
font-size: .76rem !important;
}
.nova-web-details-scope .reference-info-grid dt{
font-size: .68rem !important;
}
.nova-web-details-scope .reference-info-grid dd{
font-size: .76rem !important;
}
.nova-web-details-scope .reference-details-story{
font-size: .78rem !important;
line-height: 1.82 !important;
}
}
@media (min-width: 1500px) {
.nova-web-details-scope .reference-desktop-grid{
grid-template-columns: minmax(720px, 1.32fr) minmax(500px, .68fr) !important;
}
.nova-web-details-scope .reference-related-strip{
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (max-width: 820px) {
.nova-web-details-scope .cinematic-details-hero{
min-height: clamp(700px, 88dvh, 860px) !important;
}
.nova-web-details-scope .cinematic-details-backdrop{
height: clamp(500px, 64dvh, 620px) !important;
object-position: center top !important;
}
.nova-web-details-scope .cinematic-details-shade{
height: clamp(620px, 78dvh, 760px) !important;
background:
linear-gradient(180deg, rgba(0, 0, 0, .01) 0%, rgba(0, 0, 0, .04) 52%, rgba(0, 0, 0, .86) 76%, #000 100%),
linear-gradient(90deg, rgba(0, 0, 0, .10), transparent 50%, rgba(0, 0, 0, .08)) !important;
}
.nova-web-details-scope .cinematic-hero-copy{
min-height: clamp(700px, 88dvh, 860px) !important;
padding: clamp(455px, 59dvh, 565px) 15px 20px !important;
}
}
@media (max-width: 390px) {
.nova-web-details-scope .cinematic-details-hero{
min-height: 680px !important;
}
.nova-web-details-scope .cinematic-details-backdrop{
height: 470px !important;
}
.nova-web-details-scope .cinematic-details-shade{
height: 590px !important;
}
.nova-web-details-scope .cinematic-hero-copy{
min-height: 680px !important;
padding-top: 425px !important;
}
}
/* =========================================================
Android hero correction — compact cinematic overlap
Final override: eliminates the empty gap under the artwork.
========================================================= */
@media (max-width: 820px) {
.nova-web-details-scope .cinematic-details-page{
background: #000000 !important;
}
.nova-web-details-scope .cinematic-details-hero{
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
background: #000000 !important;
}
.nova-web-details-scope .cinematic-details-backdrop{
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: clamp(450px, 66dvh, 660px) !important;
min-height: 450px !important;
object-fit: cover !important;
object-position: center 18% !important;
background: #000000 !important;
}
.nova-web-details-scope .cinematic-details-shade{
position: absolute !important;
z-index: 1 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
bottom: auto !important;
width: 100% !important;
height: clamp(450px, 66dvh, 660px) !important;
background:
linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.04) 44%, rgba(0,0,0,.38) 69%, rgba(0,0,0,.92) 91%, #000 100%),
linear-gradient(90deg, rgba(0,0,0,.14), transparent 46%, rgba(0,0,0,.12)) !important;
pointer-events: none !important;
}
.nova-web-details-scope .cinematic-hero-copy{
position: relative !important;
z-index: 2 !important;
inset: auto !important;
width: 100% !important;
min-height: 0 !important;
margin: clamp(-190px, -21dvh, -138px) 0 0 !important;
padding: clamp(150px, 18dvh, 188px) 16px 20px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: center !important;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 37%, #000 74%) !important;
box-sizing: border-box !important;
}
.nova-web-details-scope .cinematic-eyebrow{
margin: 0 0 6px !important;
font-size: .72rem !important;
}
.nova-web-details-scope .cinematic-title{
width: min(100%, 680px) !important;
margin: 5px auto 12px !important;
font-size: clamp(1.85rem, 8.4vw, 2.85rem) !important;
line-height: 1.05 !important;
letter-spacing: -.025em !important;
overflow-wrap: anywhere !important;
text-wrap: balance !important;
}
.nova-web-details-scope .cinematic-meta{
gap: 6px !important;
}
.nova-web-details-scope .cinematic-meta > *,
.nova-web-details-scope .cinematic-age{
min-height: 27px !important;
padding-inline: 9px !important;
font-size: .67rem !important;
}
.nova-web-details-scope .cinematic-ranking{
margin-top: 8px !important;
}
.nova-web-details-scope .cinematic-ranking span{
min-height: 31px !important;
padding-inline: 10px !important;
font-size: .66rem !important;
background: #000000 !important;
}
.nova-web-details-scope .cinematic-actions{
width: 100% !important;
margin-top: 15px !important;
}
.nova-web-details-scope .cinematic-details-content{
position: relative !important;
z-index: 3 !important;
margin-top: 0 !important;
padding-top: 0 !important;
background: #000000 !important;
}
}
@media (max-width: 390px) {
.nova-web-details-scope .cinematic-details-backdrop,
.nova-web-details-scope .cinematic-details-shade{
height: clamp(430px, 64dvh, 570px) !important;
min-height: 430px !important;
}
.nova-web-details-scope .cinematic-hero-copy{
margin-top: -155px !important;
padding-top: 128px !important;
}
.nova-web-details-scope .cinematic-title{
font-size: clamp(1.68rem, 8.1vw, 2.25rem) !important;
}
}
/* Nova Aperture replaces the old large detail skeleton without changing the details header or content layout. */
.nova-web-details-scope .details-motion-loading{
min-height: 100dvh !important;
padding-top: calc(72px + var(--safe-top, env(safe-area-inset-top, 0px))) !important;
box-sizing: border-box !important;
background: transparent !important;
overflow: hidden !important;
}
.nova-web-details-scope .details-motion-loading .nova-motion-loader{
min-height: 100dvh !important;
}
/* ==========================================================
Channel details — dedicated Windows / Android experience
========================================================== */
.nova-web-details-scope .nova-channel-details{
min-height: 100dvh !important;
padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, 0px) + 24px) !important;
background: #000 !important;
color: #fff !important;
}
.nova-web-details-scope .channel-detail-hero{
position: relative !important;
min-height: clamp(560px, 72dvh, 820px) !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
background: #000 !important;
}
.nova-web-details-scope .channel-detail-backdrop,
.nova-web-details-scope .channel-detail-backdrop img{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.nova-web-details-scope .channel-detail-backdrop img,
.nova-web-details-scope img.channel-detail-backdrop{
object-fit: cover !important;
object-position: center 28% !important;
filter: saturate(.92) contrast(1.05) brightness(.72) !important;
}
.nova-web-details-scope .channel-detail-shade{
position: absolute !important;
inset: 0 !important;
background:
linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.52) 48%, #000 100%),
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12) 48%, #000 100%) !important;
}
.nova-web-details-scope .channel-detail-hero-inner{
position: relative !important;
z-index: 4 !important;
width: min(100% - clamp(32px, 8vw, 120px), 1560px) !important;
min-height: inherit !important;
margin: 0 auto !important;
padding: clamp(112px, 14vh, 150px) 0 clamp(48px, 7vh, 78px) !important;
display: grid !important;
grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.15fr) !important;
align-items: end !important;
gap: clamp(38px, 6vw, 92px) !important;
direction: ltr !important;
}
.nova-web-details-scope .channel-detail-identity,
.nova-web-details-scope .channel-detail-copy{
direction: rtl !important;
}
.nova-web-details-scope .channel-detail-identity{
display: grid !important;
place-items: end start !important;
}
.nova-web-details-scope .channel-detail-logo-shell{
position: relative !important;
width: min(34vw, 370px) !important;
aspect-ratio: 1.3 / 1 !important;
padding: clamp(18px, 2.4vw, 30px) !important;
display: grid !important;
place-items: center !important;
border: 1px solid transparent !important;
border-radius: 26px !important;
background:
linear-gradient(#000,#000) padding-box,
linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 48px rgba(103,71,255,.14) !important;
}
.nova-web-details-scope .channel-detail-logo,
.nova-web-details-scope .channel-detail-logo img{
width: 100% !important;
height: 100% !important;
}
.nova-web-details-scope .channel-detail-logo img,
.nova-web-details-scope img.channel-detail-logo{
object-fit: contain !important;
}
.nova-web-details-scope .channel-detail-live-mark{
position: absolute !important;
right: 16px !important;
bottom: 14px !important;
height: 31px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
border: 1px solid rgba(255,255,255,.22) !important;
border-radius: 8px !important;
background: #000 !important;
color: #fff !important;
font-size: .68rem !important;
font-weight: 950 !important;
letter-spacing: .08em !important;
}
.nova-web-details-scope .channel-detail-live-mark i,
.nova-web-details-scope .channel-status-heading span i{
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #F04AD8 !important;
box-shadow: 0 0 0 4px rgba(240,74,216,.14), 0 0 16px rgba(240,74,216,.7) !important;
animation: channel-live-pulse 1.7s ease-in-out infinite !important;
}
.nova-web-details-scope .channel-detail-copy{
align-self: end !important;
max-width: 720px !important;
}
.nova-web-details-scope .channel-detail-eyebrow{
display: inline-flex !important;
margin-bottom: 14px !important;
color: #14D7FF !important;
font-size: .75rem !important;
font-weight: 950 !important;
letter-spacing: .12em !important;
}
.nova-web-details-scope .channel-detail-copy h1{
margin: 0 !important;
max-width: 100% !important;
color: #fff !important;
font-size: clamp(2.5rem, 5.4vw, 5.2rem) !important;
line-height: .98 !important;
font-weight: 1000 !important;
letter-spacing: -.045em !important;
text-wrap: balance !important;
}
.nova-web-details-scope .channel-detail-meta{
margin-top: 18px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.nova-web-details-scope .channel-detail-meta span{
min-height: 31px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 8px !important;
background: #000 !important;
color: rgba(255,255,255,.78) !important;
font-size: .72rem !important;
font-weight: 800 !important;
}
.nova-web-details-scope .channel-detail-copy p{
max-width: 680px !important;
margin: 18px 0 0 !important;
color: rgba(255,255,255,.68) !important;
font-size: clamp(.84rem,1.25vw,1rem) !important;
line-height: 1.8 !important;
}
.nova-web-details-scope .channel-detail-actions{
margin-top: 26px !important;
display: flex !important;
gap: 12px !important;
}
.nova-web-details-scope .channel-detail-actions button{
min-height: 52px !important;
padding: 0 25px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
border-radius: 10px !important;
color: #fff !important;
font: inherit !important;
font-weight: 950 !important;
}
.nova-web-details-scope .channel-detail-play{
min-width: 220px !important;
border: 0 !important;
background: linear-gradient(100deg,#c728ff,#7650ff,#16a8ff) !important;
box-shadow: 0 15px 38px rgba(99,74,255,.25) !important;
}
.nova-web-details-scope .channel-detail-save{
border: 1px solid rgba(255,255,255,.2) !important;
background: #000 !important;
}
.nova-web-details-scope .channel-detail-save.active{
border-color: transparent !important;
background: linear-gradient(#000,#000) padding-box,linear-gradient(100deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
}
.nova-web-details-scope .channel-detail-body{
width: min(100% - clamp(28px, 7vw, 104px), 1560px) !important;
margin: 0 auto !important;
padding: 32px 0 10px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr) !important;
gap: 18px !important;
}
.nova-web-details-scope .channel-detail-status-card,
.nova-web-details-scope .channel-detail-source-card,
.nova-web-details-scope .channel-detail-related{
min-width: 0 !important;
border: 1px solid rgba(255,255,255,.13) !important;
border-radius: 18px !important;
background: #000 !important;
}
.nova-web-details-scope .channel-detail-status-card{
padding: 22px !important;
}
.nova-web-details-scope .channel-status-heading{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
padding-bottom: 17px !important;
border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
.nova-web-details-scope .channel-status-heading span{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
font-weight: 950 !important;
}
.nova-web-details-scope .channel-status-heading small{
color: rgba(255,255,255,.5) !important;
}
.nova-web-details-scope .channel-detail-facts{
padding-top: 20px !important;
display: grid !important;
grid-template-columns: repeat(4,minmax(0,1fr)) !important;
gap: 14px !important;
}
.nova-web-details-scope .channel-detail-facts > div{
min-width: 0 !important;
display: grid !important;
justify-items: center !important;
gap: 6px !important;
padding: 12px 8px !important;
border-inline-start: 1px solid rgba(255,255,255,.08) !important;
text-align: center !important;
}
.nova-web-details-scope .channel-detail-facts > div:last-child{ border-inline-start: 0 !important; }
.nova-web-details-scope .channel-detail-facts .oscar-icon{ color: #9B4DFF !important; }
.nova-web-details-scope .channel-detail-facts strong{ font-size: .72rem !important; }
.nova-web-details-scope .channel-detail-facts span{ max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: rgba(255,255,255,.58) !important; font-size: .68rem !important; }
.nova-web-details-scope .channel-detail-source-card{
padding: 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 18px !important;
}
.nova-web-details-scope .channel-detail-source-card > div{
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.nova-web-details-scope .channel-source-icon{
width: 46px !important;
height: 46px !important;
flex: 0 0 auto !important;
display: grid !important;
place-items: center !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background: linear-gradient(#000,#000) padding-box,linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
color: #14D7FF !important;
}
.nova-web-details-scope .channel-detail-source-card strong,
.nova-web-details-scope .channel-detail-source-card small{ display: block !important; }
.nova-web-details-scope .channel-detail-source-card strong{ font-size: .88rem !important; }
.nova-web-details-scope .channel-detail-source-card small{ margin-top: 5px !important; color: rgba(255,255,255,.5) !important; font-size: .7rem !important; }
.nova-web-details-scope .channel-detail-source-card > button{
min-height: 45px !important;
border: 1px solid rgba(255,255,255,.17) !important;
border-radius: 10px !important;
background: #000 !important;
color: #fff !important;
font: inherit !important;
font-weight: 900 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.nova-web-details-scope .channel-detail-related{
grid-column: 1 / -1 !important;
padding: 20px !important;
}
.nova-web-details-scope .channel-detail-related .nova-related-section{ margin: 0 !important; }
@keyframes channel-live-pulse {
0%,100% { opacity: .6; transform: scale(.86); }
50% { opacity: 1; transform: scale(1.08); }
}
@media (max-width: 780px) {
.nova-web-details-scope .nova-channel-details{
padding-bottom: calc(var(--bottom-nav-h, 72px) + var(--safe-bottom, 0px) + 12px) !important;
}
.nova-web-details-scope .channel-detail-hero{
min-height: auto !important;
overflow: visible !important;
border-bottom: 0 !important;
}
.nova-web-details-scope .channel-detail-backdrop,
.nova-web-details-scope .channel-detail-backdrop img{
height: clamp(330px, 53dvh, 540px) !important;
}
.nova-web-details-scope .channel-detail-backdrop img,
.nova-web-details-scope img.channel-detail-backdrop{
object-position: center 25% !important;
filter: saturate(.95) contrast(1.04) brightness(.78) !important;
}
.nova-web-details-scope .channel-detail-shade{
height: clamp(330px, 53dvh, 540px) !important;
bottom: auto !important;
background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16) 58%,#000 100%) !important;
}
.nova-web-details-scope .channel-detail-hero-inner{
width: 100% !important;
min-height: 0 !important;
padding: clamp(270px, 45dvh, 440px) 14px 18px !important;
display: block !important;
}
.nova-web-details-scope .channel-detail-identity{
display: none !important;
}
.nova-web-details-scope .channel-detail-copy{
max-width: none !important;
text-align: center !important;
}
.nova-web-details-scope .channel-detail-eyebrow{
margin-bottom: 10px !important;
font-size: .66rem !important;
}
.nova-web-details-scope .channel-detail-copy h1{
font-size: clamp(2rem, 9vw, 3.2rem) !important;
line-height: 1.03 !important;
}
.nova-web-details-scope .channel-detail-meta{
justify-content: center !important;
margin-top: 14px !important;
}
.nova-web-details-scope .channel-detail-meta span{
min-height: 29px !important;
padding-inline: 10px !important;
font-size: .65rem !important;
}
.nova-web-details-scope .channel-detail-copy p{
margin: 14px auto 0 !important;
max-width: 560px !important;
font-size: .78rem !important;
line-height: 1.7 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
overflow: hidden !important;
}
.nova-web-details-scope .channel-detail-actions{
margin-top: 18px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 9px !important;
}
.nova-web-details-scope .channel-detail-actions button{
min-width: 0 !important;
min-height: 48px !important;
padding-inline: 10px !important;
font-size: .78rem !important;
}
.nova-web-details-scope .channel-detail-play{ grid-column: 1 / -1 !important; }
.nova-web-details-scope .channel-detail-body{
width: calc(100% - 24px) !important;
padding-top: 10px !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.nova-web-details-scope .channel-detail-status-card,
.nova-web-details-scope .channel-detail-source-card,
.nova-web-details-scope .channel-detail-related{
border-radius: 14px !important;
}
.nova-web-details-scope .channel-detail-status-card{ padding: 15px !important; }
.nova-web-details-scope .channel-status-heading{ align-items: flex-start !important; padding-bottom: 13px !important; }
.nova-web-details-scope .channel-status-heading small{ max-width: 46% !important; text-align: left !important; font-size: .62rem !important; }
.nova-web-details-scope .channel-detail-facts{
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 0 !important;
padding-top: 12px !important;
}
.nova-web-details-scope .channel-detail-facts > div{
min-height: 86px !important;
border-inline-start: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.nova-web-details-scope .channel-detail-facts > div:nth-last-child(-n/**/+2){ border-bottom: 0 !important; }
.nova-web-details-scope .channel-detail-facts > div:nth-child(odd){ border-inline-end: 1px solid rgba(255,255,255,.08) !important; }
.nova-web-details-scope .channel-detail-source-card{ padding: 15px !important; }
.nova-web-details-scope .channel-detail-related{ padding: 14px !important; }
.nova-web-details-scope .nova-channel-details .nova-details-topbar{
top: calc(var(--safe-top, 0px) + 12px) !important;
left: 12px !important;
right: 12px !important;
}
}
/* =========================================================
FINAL MOBILE DETAILS REPAIR
Keeps the artwork, floating actions and copy in one coherent hero without
the opaque toolbar slab or the empty vertical gap introduced by older rules.
========================================================= */
@media (max-width: 820px) {
.nova-web-details-scope .cinematic-details-page .nova-details-topbar{
position: absolute !important;
top: calc(var(--safe-top, 0px) + 10px) !important;
right: 12px !important;
left: 12px !important;
width: auto !important;
min-height: 44px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.nova-web-details-scope .cinematic-details-page .nova-details-topbar .nova-icon-btn{
width: 42px !important;
height: 42px !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 50% !important;
color: #fff !important;
background: rgba(0,0,0,.28) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
.nova-web-details-scope .cinematic-details-page .nova-topbar-actions{ gap: 8px !important; }
.nova-web-details-scope .cinematic-details-hero{
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-backdrop{
position: relative !important;
width: 100% !important;
height: clamp(480px, 68dvh, 700px) !important;
min-height: 480px !important;
display: block !important;
object-fit: cover !important;
object-position: center 18% !important;
filter: saturate(1.02) contrast(1.04) brightness(.9) !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-shade{
position: absolute !important;
z-index: 1 !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: clamp(480px, 68dvh, 700px) !important;
pointer-events: none !important;
background:
linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.02) 36%, rgba(0,0,0,.20) 57%, rgba(0,0,0,.66) 76%, rgba(0,0,0,.94) 91%, #000 100%),
linear-gradient(90deg, rgba(0,0,0,.16), transparent 34%, transparent 66%, rgba(0,0,0,.14)) !important;
}
.nova-web-details-scope .cinematic-hero-copy{
position: relative !important;
z-index: 2 !important;
inset: auto !important;
width: 100% !important;
min-height: 0 !important;
margin: clamp(-176px, -19dvh, -132px) 0 0 !important;
padding: clamp(128px, 15dvh, 160px) 16px 22px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
box-sizing: border-box !important;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 32%, #000 76%) !important;
}
.nova-web-details-scope .cinematic-title{
width: min(100%, 640px) !important;
margin: 5px auto 11px !important;
font-size: clamp(1.82rem, 8.2vw, 2.8rem) !important;
line-height: 1.06 !important;
overflow-wrap: anywhere !important;
text-wrap: balance !important;
}
.nova-web-details-scope .cinematic-actions{
width: min(100%, 640px) !important;
margin-top: 16px !important;
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 9px !important;
direction: rtl !important;
}
.nova-web-details-scope .cinematic-watch-button{
grid-column: 1 / -1 !important;
width: 100% !important;
min-height: 52px !important;
height: 52px !important;
border-radius: 15px !important;
font-size: .93rem !important;
}
.nova-web-details-scope .cinematic-secondary-action{
min-height: 48px !important;
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 13px !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-content{
position: relative !important;
z-index: 3 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 14px calc(var(--bottom-nav-h,72px) + 22px) !important;
background: #000 !important;
box-sizing: border-box !important;
}
.nova-web-details-scope .cinematic-tabs{ margin-top: 4px !important; }
}
@media (max-width: 390px) {
.nova-web-details-scope .cinematic-details-backdrop,
.nova-web-details-scope .cinematic-details-shade{
height: clamp(440px, 65dvh, 590px) !important;
min-height: 440px !important;
}
.nova-web-details-scope .cinematic-hero-copy{
margin-top: -148px !important;
padding-top: 116px !important;
}
}
/* =========================================================
ANDROID DETAILS HERO — FINAL STRUCTURAL FIX
- Styles the SafeImage output through a native wrapper, so CSS isolation
cannot collapse the artwork.
- Keeps the floating details actions fixed inside the Android safe area.
- Preserves the desktop layout and all existing interaction logic.
========================================================= */
.nova-web-details-scope .cinematic-details-backdrop-shell{
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
overflow: hidden !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
.nova-web-details-scope .cinematic-details-backdrop-shell img{
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center 22% !important;
background: #000 !important;
filter: saturate(1.03) contrast(1.04) brightness(.9) !important;
}
@media (max-width: 820px) {
.nova-web-details-scope .cinematic-details-page{
position: relative !important;
overflow-x: hidden !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-page .nova-details-topbar{
position: fixed !important;
z-index: 1400 !important;
top: calc(var(--safe-top, 0px) + 8px) !important;
right: 12px !important;
left: 12px !important;
width: auto !important;
min-height: 46px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
pointer-events: none !important;
}
.nova-web-details-scope .cinematic-details-page .nova-details-topbar .nova-icon-btn{
width: 42px !important;
height: 42px !important;
flex: 0 0 42px !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 50% !important;
background: rgba(0,0,0,.38) !important;
color: #fff !important;
box-shadow: 0 8px 24px rgba(0,0,0,.34) !important;
backdrop-filter: blur(12px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
pointer-events: auto !important;
}
.nova-web-details-scope .cinematic-details-page .nova-topbar-actions{
display: flex !important;
align-items: center !important;
gap: 8px !important;
pointer-events: auto !important;
}
.nova-web-details-scope .cinematic-details-page .details-title-spacer{
flex: 1 1 auto !important;
min-width: 0 !important;
}
.nova-web-details-scope .cinematic-details-hero{
position: relative !important;
z-index: 0 !important;
width: 100% !important;
height: clamp(680px, 92dvh, 900px) !important;
min-height: 680px !important;
overflow: hidden !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-backdrop-shell{
position: absolute !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: clamp(540px, 72dvh, 760px) !important;
min-height: 540px !important;
overflow: hidden !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
.nova-web-details-scope .cinematic-details-backdrop-shell img{
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
object-fit: cover !important;
object-position: center 18% !important;
filter: saturate(1.04) contrast(1.05) brightness(.9) !important;
}
.nova-web-details-scope .cinematic-details-shade{
position: absolute !important;
z-index: 1 !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
background:
linear-gradient(180deg,
rgba(0,0,0,.03) 0%,
rgba(0,0,0,.04) 35%,
rgba(0,0,0,.18) 52%,
rgba(0,0,0,.68) 72%,
rgba(0,0,0,.96) 88%,
#000 100%),
linear-gradient(90deg,
rgba(0,0,0,.16) 0%,
transparent 28%,
transparent 72%,
rgba(0,0,0,.14) 100%) !important;
}
.nova-web-details-scope .cinematic-hero-copy{
position: absolute !important;
z-index: 2 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
top: auto !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 170px 16px 24px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-end !important;
box-sizing: border-box !important;
text-align: center !important;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.52) 28%, #000 78%) !important;
}
.nova-web-details-scope .cinematic-title{
width: min(100%, 640px) !important;
margin: 6px auto 11px !important;
font-size: clamp(1.9rem, 8.4vw, 2.9rem) !important;
line-height: 1.06 !important;
text-align: center !important;
overflow-wrap: anywhere !important;
}
.nova-web-details-scope .cinematic-eyebrow,
.nova-web-details-scope .cinematic-meta,
.nova-web-details-scope .cinematic-ranking{
justify-content: center !important;
}
.nova-web-details-scope .cinematic-actions{
width: min(100%, 640px) !important;
margin-top: 16px !important;
}
.nova-web-details-scope .cinematic-details-content{
position: relative !important;
z-index: 3 !important;
width: 100% !important;
margin: 0 !important;
padding-top: 0 !important;
background: #000 !important;
}
}
@media (max-width: 390px) {
.nova-web-details-scope .cinematic-details-hero{
height: clamp(640px, 90dvh, 820px) !important;
min-height: 640px !important;
}
.nova-web-details-scope .cinematic-details-backdrop-shell{
height: clamp(500px, 70dvh, 690px) !important;
min-height: 500px !important;
}
.nova-web-details-scope .cinematic-hero-copy{
padding-top: 150px !important;
}
}
/* =========================================================
COMMERCIAL DETAILS HEADER — FINAL FIXED LAYER
Applies to movies, series, episodes and live channels.
========================================================= */
.nova-web-details-scope .details-app .nova-details-topbar{
position: fixed !important;
z-index: 2200 !important;
top: calc(var(--safe-top, 0px) + 8px) !important;
right: clamp(12px, 2.2vw, 30px) !important;
left: clamp(12px, 2.2vw, 30px) !important;
width: auto !important;
min-height: 48px !important;
padding: 3px 6px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
pointer-events: none !important;
background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.34)) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 999px !important;
box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
backdrop-filter: blur(14px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
}
.nova-web-details-scope .details-app .nova-details-topbar > strong{
min-width: 0 !important;
flex: 1 1 auto !important;
overflow: hidden !important;
color: #fff !important;
font-size: clamp(.82rem, 1.5vw, 1rem) !important;
font-weight: 900 !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .details-app .nova-details-topbar .details-title-spacer{ flex: 1 1 auto !important; }
.nova-web-details-scope .details-app .nova-details-topbar .nova-icon-btn,
.nova-web-details-scope .details-app .nova-details-topbar .nova-topbar-actions{ pointer-events: auto !important; }
.nova-web-details-scope .details-app .nova-details-topbar .nova-icon-btn{
width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(0,0,0,.52) !important;
}
@media (max-width: 640px) {
.nova-web-details-scope .details-app .nova-details-topbar{
top: calc(var(--safe-top, 0px) + 6px) !important;
right: 10px !important;
left: 10px !important;
min-height: 46px !important;
padding: 2px 5px !important;
}
.nova-web-details-scope .details-app .nova-details-topbar .nova-icon-btn{ width: 39px !important; height: 39px !important; flex-basis: 39px !important; }
}
/* Current public-catalog rich metadata: real Nova2/TMDB promotional videos. */
.nova-web-details-scope .reference-promo-section{
margin-top: 1.35rem !important;
}
.nova-web-details-scope .reference-promo-section h3{
margin: 0 0 .75rem !important;
}
.nova-web-details-scope .reference-promo-rail{
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(220px, 30vw) !important;
gap: .85rem !important;
overflow-x: auto !important;
overscroll-behavior-inline: contain !important;
scrollbar-width: thin !important;
padding-bottom: .35rem !important;
}
.nova-web-details-scope .reference-promo-card{
appearance: none !important;
border: 0 !important;
background: transparent !important;
color: inherit !important;
text-align: start !important;
padding: 0 !important;
cursor: pointer !important;
min-width: 0 !important;
}
.nova-web-details-scope .reference-promo-card:disabled{
cursor: default !important;
opacity: .7 !important;
}
.nova-web-details-scope .reference-promo-art{
position: relative !important;
display: block !important;
overflow: hidden !important;
border-radius: 14px !important;
aspect-ratio: 16 / 9 !important;
background: rgba(255, 255, 255, .06) !important;
}
.nova-web-details-scope .reference-promo-art img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.nova-web-details-scope .reference-promo-play{
position: absolute !important;
inset: 50% auto auto 50% !important;
transform: translate(-50%, -50%) !important;
width: 46px !important;
height: 46px !important;
border-radius: 999px !important;
display: grid !important;
place-items: center !important;
background: rgba(0, 0, 0, .72) !important;
backdrop-filter: blur(8px) !important;
}
.nova-web-details-scope .reference-promo-card strong,
.nova-web-details-scope .reference-promo-card small{
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .reference-promo-card strong{
margin-top: .55rem !important;
font-size: .94rem !important;
}
.nova-web-details-scope .reference-promo-card small{
margin-top: .2rem !important;
opacity: .7 !important;
}
@media (max-width: 720px) {
.nova-web-details-scope .reference-promo-rail{
grid-auto-columns: minmax(210px, 76vw) !important;
}
}
/* NOVA+ 2.53 — inline commercial episode gallery. */
.nova-web-details-scope .episode-gallery-shell,
.nova-web-details-scope .episode-gallery-panel,
.nova-web-details-scope .episode-gallery-card,
.nova-web-details-scope .episode-gallery-collapsed,
.nova-web-details-scope .episode-gallery-expanded-layout,
.nova-web-details-scope .episode-source-card,
.nova-web-details-scope .episode-source-login,
.nova-web-details-scope .episode-source-error,
.nova-web-details-scope .episode-source-empty,
.nova-web-details-scope .episode-gallery-loading,
.nova-web-details-scope .episode-gallery-empty{
background: #000000 !important;
}
.nova-web-details-scope .episode-gallery-panel{
width: 100% !important;
min-width: 0 !important;
}
.nova-web-details-scope .episode-gallery-header{
min-height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
margin-bottom: 14px !important;
border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
.nova-web-details-scope .episode-gallery-heading{
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
min-width: 0 !important;
}
.nova-web-details-scope .episode-gallery-heading h2{
margin: 0 !important;
font-size: 1.18rem !important;
line-height: 1.35 !important;
font-weight: 850 !important;
color: rgba(255,255,255,.96) !important;
}
.nova-web-details-scope .episode-gallery-heading span{
font-size: .78rem !important;
color: rgba(255,255,255,.56) !important;
white-space: nowrap !important;
}
.nova-web-details-scope .episode-gallery-tools{
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.nova-web-details-scope .episode-gallery-sort{
width: auto !important;
min-width: 92px !important;
grid-auto-flow: column !important;
gap: 7px !important;
padding: 0 11px !important;
}
.nova-web-details-scope .episode-gallery-sort span{
font-size: .72rem !important;
font-weight: 780 !important;
}
.nova-web-details-scope .episode-season-filter-strip{
position: relative !important;
display: flex !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
margin: 0 0 16px !important;
padding: 4px 0 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-inline: contain !important;
scrollbar-width: none !important;
}
.nova-web-details-scope .episode-season-filter-strip::-webkit-scrollbar{
display: none !important;
}
.nova-web-details-scope .episode-season-filter{
appearance: none !important;
flex: 0 0 auto !important;
text-align: right !important;
}
.nova-web-details-scope .episode-season-filter:hover,
.nova-web-details-scope .episode-season-filter:focus-visible{
outline: 0 !important;
}
.nova-web-details-scope .episode-gallery-season,
.nova-web-details-scope .episode-gallery-tool{
height: 39px !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 9px !important;
color: rgba(255,255,255,.9) !important;
background: #000000 !important;
}
.nova-web-details-scope .episode-gallery-season{
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-width: 166px !important;
padding: 0 11px !important;
}
.nova-web-details-scope .episode-gallery-season select{
appearance: none !important;
flex: 1 !important;
min-width: 0 !important;
height: 37px !important;
border: 0 !important;
outline: 0 !important;
background: #000000 !important;
color: rgba(255,255,255,.9) !important;
font: inherit !important;
font-size: .79rem !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-gallery-season > .oscar-icon:last-child{
pointer-events: none !important;
color: rgba(255,255,255,.55) !important;
}
.nova-web-details-scope .episode-gallery-tool{
appearance: none !important;
width: 41px !important;
min-width: 41px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-gallery-tool:hover,
.nova-web-details-scope .episode-gallery-tool.active,
.nova-web-details-scope .episode-gallery-tool:focus-visible,
.nova-web-details-scope .episode-gallery-season:focus-within{
border-color: #14D7FF !important;
color: #14D7FF !important;
outline: 0 !important;
}
.nova-web-details-scope .episode-gallery-search{
height: 42px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 0 12px !important;
margin: 0 0 14px !important;
border: 1px solid rgba(255,255,255,.17) !important;
border-radius: 9px !important;
background: #000000 !important;
color: rgba(255,255,255,.55) !important;
}
.nova-web-details-scope .episode-gallery-search:focus-within{
border-color: #9B4DFF !important;
}
.nova-web-details-scope .episode-gallery-search input{
flex: 1 !important;
min-width: 0 !important;
border: 0 !important;
outline: 0 !important;
color: rgba(255,255,255,.94) !important;
background: #000000 !important;
font: inherit !important;
font-size: .84rem !important;
}
.nova-web-details-scope .episode-gallery-search button{
width: 34px !important;
height: 34px !important;
border: 0 !important;
border-radius: 8px !important;
display: grid !important;
place-items: center !important;
color: rgba(255,255,255,.65) !important;
background: #000000 !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-gallery-list{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.nova-web-details-scope .episode-gallery-entry{
min-width: 0 !important;
opacity: 0;
transform: translateY(12px) scale(.992);
animation: episode-season-enter .38s cubic-bezier(.2,.8,.2,1) forwards !important;
}
.nova-web-details-scope .episode-gallery-entry.expanded{
grid-column: 1 / -1 !important;
}
.nova-web-details-scope .episode-gallery-entry:nth-child(2){ animation-delay: 35ms !important; }
.nova-web-details-scope .episode-gallery-entry:nth-child(3){ animation-delay: 70ms !important; }
.nova-web-details-scope .episode-gallery-entry:nth-child(4){ animation-delay: 105ms !important; }
.nova-web-details-scope .episode-gallery-entry:nth-child(n/**/+5){ animation-delay: 125ms !important; }
.nova-web-details-scope .episode-gallery-card{
position: relative !important;
width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.13) !important;
border-radius: 11px !important;
transition: border-color .18s ease, box-shadow .18s ease !important;
}
.nova-web-details-scope .episode-gallery-card::before{
content: "" !important;
position: absolute !important;
z-index: 4 !important;
top: 0 !important;
right: 12% !important;
left: 12% !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
background: linear-gradient(90deg,transparent,#F04AD8,#14D7FF,transparent) !important;
transition: opacity .2s ease, right .2s ease, left .2s ease !important;
}
.nova-web-details-scope .episode-gallery-card:hover::before,
.nova-web-details-scope .episode-gallery-card.expanded::before{
right: 3% !important;
left: 3% !important;
opacity: .78 !important;
}
.nova-web-details-scope .episode-gallery-card:hover{
border-color: rgba(255,255,255,.25) !important;
}
.nova-web-details-scope .episode-gallery-card.expanded{
grid-column: 1 / -1 !important;
border-color: transparent !important;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(105deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
box-shadow: 0 18px 46px rgba(0,0,0,.42) !important;
}
.nova-web-details-scope .episode-gallery-collapsed{
appearance: none !important;
width: 100% !important;
min-height: 126px !important;
display: grid !important;
grid-template-columns: minmax(190px, 36%) minmax(0,1fr) auto !important;
align-items: stretch !important;
gap: 14px !important;
padding: 0 !important;
border: 0 !important;
color: inherit !important;
text-align: right !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-gallery-collapsed-art{
position: relative !important;
overflow: hidden !important;
min-height: 126px !important;
background: #000000 !important;
}
.nova-web-details-scope .episode-gallery-collapsed-art img,
.nova-web-details-scope .episode-gallery-expanded-art img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform .25s ease !important;
}
.nova-web-details-scope .episode-gallery-card:hover .episode-gallery-collapsed-art img{
transform: scale(1.025) !important;
}
.nova-web-details-scope .episode-gallery-collapsed-art::after,
.nova-web-details-scope .episode-gallery-expanded-art::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background: linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.12) 52%,rgba(0,0,0,.82)) !important;
}
.nova-web-details-scope .episode-gallery-collapsed-art > small,
.nova-web-details-scope .episode-gallery-number{
position: absolute !important;
z-index: 2 !important;
top: 9px !important;
right: 9px !important;
padding: 4px 8px !important;
border-radius: 6px !important;
background: #000000 !important;
color: rgba(255,255,255,.92) !important;
font-size: .69rem !important;
font-weight: 750 !important;
}
.nova-web-details-scope .episode-gallery-collapsed-copy{
align-self: center !important;
min-width: 0 !important;
}
.nova-web-details-scope .episode-gallery-collapsed-copy strong,
.nova-web-details-scope .episode-gallery-collapsed-copy small{
display: block !important;
}
.nova-web-details-scope .episode-gallery-collapsed-copy strong{
margin-bottom: 8px !important;
color: rgba(255,255,255,.96) !important;
font-size: 1rem !important;
line-height: 1.45 !important;
}
.nova-web-details-scope .episode-gallery-collapsed-copy small{
display: -webkit-box !important;
overflow: hidden !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
color: rgba(255,255,255,.54) !important;
font-size: .76rem !important;
line-height: 1.7 !important;
}
.nova-web-details-scope .episode-gallery-collapsed-meta{
min-width: 96px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 11px !important;
padding: 0 15px !important;
color: rgba(255,255,255,.52) !important;
}
.nova-web-details-scope .episode-gallery-collapsed-meta small{
white-space: nowrap !important;
font-size: .72rem !important;
}
.nova-web-details-scope .episode-gallery-more{
appearance: none !important;
min-width: 190px !important;
height: 41px !important;
margin: 16px auto 0 !important;
padding: 0 17px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
border: 1px solid rgba(255,255,255,.17) !important;
border-radius: 9px !important;
background: #000000 !important;
color: rgba(255,255,255,.84) !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-gallery-more:hover,
.nova-web-details-scope .episode-gallery-more:focus-visible{
border-color: #9B4DFF !important;
outline: 0 !important;
}
.nova-web-details-scope .episode-gallery-expanded-layout{
min-width: 0 !important;
padding: 16px !important;
display: grid !important;
grid-template-columns: minmax(300px,.8fr) minmax(235px,.58fr) minmax(500px,1.55fr) !important;
grid-template-areas: "sources copy art" !important;
gap: 22px !important;
align-items: center !important;
direction: ltr !important;
}
.nova-web-details-scope .episode-gallery-expanded-art,
.nova-web-details-scope .episode-gallery-expanded-copy,
.nova-web-details-scope .episode-source-area{
direction: rtl !important;
}
.nova-web-details-scope .episode-gallery-expanded-art{
grid-area: art !important;
appearance: none !important;
position: relative !important;
overflow: hidden !important;
width: 100% !important;
aspect-ratio: 16 / 8.6 !important;
min-height: 230px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 10px !important;
color: #ffffff !important;
background: #000000 !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-gallery-play{
position: absolute !important;
z-index: 3 !important;
inset: 50% auto auto 50% !important;
transform: translate(-50%,-50%) !important;
width: 54px !important;
height: 54px !important;
display: grid !important;
place-items: center !important;
border: 2px solid transparent !important;
border-radius: 999px !important;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(120deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
box-shadow: 0 8px 28px rgba(0,0,0,.55) !important;
}
.nova-web-details-scope .episode-gallery-progress{
position: absolute !important;
z-index: 3 !important;
right: 0 !important;
bottom: 0 !important;
width: 33% !important;
height: 3px !important;
background: linear-gradient(90deg,#F04AD8,#9B4DFF,#14D7FF) !important;
}
.nova-web-details-scope .episode-gallery-expanded-copy{
grid-area: copy !important;
position: relative !important;
min-width: 0 !important;
}
.nova-web-details-scope .episode-gallery-collapse{
position: absolute !important;
top: -8px !important;
left: 0 !important;
width: 39px !important;
height: 39px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 9px !important;
color: rgba(255,255,255,.68) !important;
background: #000000 !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-gallery-collapse .oscar-icon{
transform: rotate(180deg) !important;
}
.nova-web-details-scope .episode-gallery-expanded-copy > small{
color: #F04AD8 !important;
font-size: .79rem !important;
font-weight: 780 !important;
}
.nova-web-details-scope .episode-gallery-expanded-copy h3{
margin: 10px 0 8px !important;
color: rgba(255,255,255,.98) !important;
font-size: clamp(1.3rem,2vw,2rem) !important;
line-height: 1.32 !important;
}
.nova-web-details-scope .episode-gallery-meta{
display: flex !important;
flex-wrap: wrap !important;
gap: 6px 13px !important;
color: rgba(255,255,255,.62) !important;
font-size: .77rem !important;
}
.nova-web-details-scope .episode-gallery-expanded-copy p{
margin: 15px 0 0 !important;
display: -webkit-box !important;
overflow: hidden !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
color: rgba(255,255,255,.62) !important;
font-size: .82rem !important;
line-height: 1.85 !important;
}
.nova-web-details-scope .episode-source-area{
grid-area: sources !important;
min-width: 0 !important;
}
.nova-web-details-scope .episode-source-heading{
margin-bottom: 11px !important;
}
.nova-web-details-scope .episode-source-heading h3{
margin: 0 !important;
color: rgba(255,255,255,.95) !important;
font-size: .91rem !important;
}
.nova-web-details-scope .episode-source-heading small{
display: block !important;
margin-top: 3px !important;
color: rgba(255,255,255,.48) !important;
font-size: .68rem !important;
}
.nova-web-details-scope .episode-source-grid{
display: grid !important;
gap: 8px !important;
}
.nova-web-details-scope .episode-source-card{
appearance: none !important;
width: 100% !important;
min-height: 62px !important;
padding: 7px 10px !important;
display: grid !important;
grid-template-columns: minmax(48px,auto) minmax(0,1fr) 44px !important;
align-items: center !important;
gap: 10px !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: 9px !important;
color: rgba(255,255,255,.9) !important;
text-align: right !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-source-card.primary{
border-color: transparent !important;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
}
.nova-web-details-scope .episode-source-card:hover,
.nova-web-details-scope .episode-source-card:focus-visible{
border-color: #14D7FF !important;
outline: 0 !important;
}
.nova-web-details-scope .episode-source-card:disabled{
cursor: wait !important;
opacity: .58 !important;
}
.nova-web-details-scope .episode-source-card.loading{
opacity: 1 !important;
}
.nova-web-details-scope .episode-source-quality{
color: #F04AD8 !important;
font-size: .88rem !important;
font-weight: 850 !important;
direction: ltr !important;
text-align: center !important;
}
.nova-web-details-scope .episode-source-card:nth-child(2n) .episode-source-quality{
color: #14D7FF !important;
}
.nova-web-details-scope .episode-source-copy{
min-width: 0 !important;
}
.nova-web-details-scope .episode-source-copy strong,
.nova-web-details-scope .episode-source-copy small{
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .episode-source-copy strong{
color: rgba(255,255,255,.94) !important;
font-size: .82rem !important;
}
.nova-web-details-scope .episode-source-copy small{
margin-top: 3px !important;
color: rgba(255,255,255,.46) !important;
font-size: .65rem !important;
}
.nova-web-details-scope .episode-source-play{
width: 39px !important;
height: 39px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255,255,255,.42) !important;
border-radius: 999px !important;
color: rgba(255,255,255,.94) !important;
background: #000000 !important;
}
.nova-web-details-scope .episode-source-spinner{
width: 18px !important;
height: 18px !important;
border: 2px solid rgba(255,255,255,.24) !important;
border-top-color: #14D7FF !important;
border-radius: 999px !important;
animation: episode-source-spin .7s linear infinite !important;
}
.nova-web-details-scope .episode-source-login,
.nova-web-details-scope .episode-source-error,
.nova-web-details-scope .episode-source-empty{
min-height: 58px !important;
width: 100% !important;
border: 1px solid rgba(255,255,255,.17) !important;
border-radius: 9px !important;
color: rgba(255,255,255,.76) !important;
}
.nova-web-details-scope .episode-source-login{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-source-error,
.nova-web-details-scope .episode-source-empty{
padding: 11px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
font-size: .72rem !important;
line-height: 1.6 !important;
}
.nova-web-details-scope .episode-source-error button{
flex: 0 0 auto !important;
min-height: 36px !important;
padding: 0 11px !important;
border: 1px solid rgba(255,255,255,.22) !important;
border-radius: 8px !important;
background: #000000 !important;
color: #14D7FF !important;
cursor: pointer !important;
}
.nova-web-details-scope .episode-source-skeletons{
display: grid !important;
gap: 8px !important;
}
.nova-web-details-scope .episode-source-skeletons span{
height: 62px !important;
border: 1px solid rgba(255,255,255,.1) !important;
border-radius: 9px !important;
background: linear-gradient(100deg,#000000 18%,rgba(255,255,255,.08) 42%,#000000 66%) !important;
background-size: 240% 100% !important;
animation: episode-source-shimmer 1.2s ease-in-out infinite !important;
}
.nova-web-details-scope .episode-gallery-loading,
.nova-web-details-scope .episode-gallery-empty{
min-height: 150px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
border: 1px solid rgba(255,255,255,.11) !important;
border-radius: 10px !important;
color: rgba(255,255,255,.56) !important;
}
@keyframes episode-source-spin { to { transform: rotate(360deg); } }
@keyframes episode-source-shimmer { to { background-position: -180% 0; } }
@keyframes episode-season-enter {
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1240px) {
.nova-web-details-scope .episode-gallery-list{
grid-template-columns: 1fr !important;
}
.nova-web-details-scope .episode-gallery-expanded-layout{
grid-template-columns: minmax(250px,.72fr) minmax(220px,.56fr) minmax(430px,1.35fr) !important;
gap: 16px !important;
}
}
@media (max-width: 900px) {
.nova-web-details-scope .episode-gallery-header{
min-height: auto !important;
align-items: flex-start !important;
flex-direction: column !important;
padding-bottom: 12px !important;
}
.nova-web-details-scope .episode-gallery-tools{
width: 100% !important;
}
.nova-web-details-scope .episode-gallery-season{
flex: 1 !important;
}
.nova-web-details-scope .episode-gallery-tool{
width: 48px !important;
min-width: 48px !important;
height: 48px !important;
}
.nova-web-details-scope .episode-gallery-sort{
width: auto !important;
min-width: 104px !important;
}
.nova-web-details-scope .episode-season-filter-strip{
margin-bottom: 12px !important;
padding-bottom: 7px !important;
}
.nova-web-details-scope .episode-gallery-season,
.nova-web-details-scope .episode-gallery-season select{
height: 48px !important;
}
.nova-web-details-scope .episode-gallery-list{
gap: 10px !important;
}
.nova-web-details-scope .episode-gallery-collapsed{
min-height: 96px !important;
grid-template-columns: 128px minmax(0,1fr) 36px !important;
gap: 10px !important;
}
.nova-web-details-scope .episode-gallery-collapsed-art{
min-height: 96px !important;
}
.nova-web-details-scope .episode-gallery-collapsed-copy strong{
margin-bottom: 4px !important;
font-size: .88rem !important;
}
.nova-web-details-scope .episode-gallery-collapsed-copy small{
-webkit-line-clamp: 1 !important;
font-size: .68rem !important;
}
.nova-web-details-scope .episode-gallery-collapsed-meta{
min-width: 36px !important;
padding: 0 8px !important;
}
.nova-web-details-scope .episode-gallery-collapsed-meta small{
display: none !important;
}
.nova-web-details-scope .episode-gallery-expanded-layout{
padding: 10px !important;
grid-template-columns: minmax(0,1fr) !important;
grid-template-areas: "art" "copy" "sources" !important;
gap: 16px !important;
}
.nova-web-details-scope .episode-gallery-expanded-art{
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
}
.nova-web-details-scope .episode-gallery-expanded-copy h3{
padding-left: 42px !important;
font-size: 1.2rem !important;
}
.nova-web-details-scope .episode-gallery-expanded-copy p{
-webkit-line-clamp: 3 !important;
font-size: .76rem !important;
}
.nova-web-details-scope .episode-source-card{
min-height: 58px !important;
grid-template-columns: 52px minmax(0,1fr) 48px !important;
padding: 5px 7px !important;
}
.nova-web-details-scope .episode-source-play{
width: 34px !important;
height: 34px !important;
justify-self: center !important;
}
.nova-web-details-scope .episode-gallery-more{
min-height: 48px !important;
}
}
@media (max-width: 520px) {
.nova-web-details-scope .episode-gallery-heading{
width: 100% !important;
justify-content: space-between !important;
}
.nova-web-details-scope .episode-gallery-collapsed{
grid-template-columns: 112px minmax(0,1fr) 32px !important;
gap: 8px !important;
}
.nova-web-details-scope .episode-gallery-collapsed-meta{
min-width: 32px !important;
padding: 0 5px !important;
}
.nova-web-details-scope .episode-gallery-collapsed-art > small{
top: 6px !important;
right: 6px !important;
padding: 3px 6px !important;
font-size: .62rem !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-web-details-scope .episode-gallery-card,
.nova-web-details-scope .episode-gallery-entry,
.nova-web-details-scope .episode-gallery-collapsed-art img,
.nova-web-details-scope .episode-source-spinner,
.nova-web-details-scope .episode-source-skeletons span{
transition: none !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
/* NOVA+ 2.55 — standalone episode experience and compact rich details. */
.nova-web-details-scope .episode-season-filter-strip{
align-items: center !important;
gap: 7px !important;
padding: 0 0 8px !important;
}
.nova-web-details-scope .episode-season-filter.nova-catalog-select-card{
flex: 0 0 auto !important;
height: var(--nova-catalog-control-h, 42px) !important;
min-height: var(--nova-catalog-control-h, 42px) !important;
min-width: 118px !important;
max-width: 178px !important;
margin: 0 !important;
padding: 0 10px !important;
grid-template-columns: 18px auto minmax(38px, auto) 14px !important;
gap: 6px !important;
border-radius: 8px !important;
}
.nova-web-details-scope .episode-season-filter.nova-catalog-select-card::after{
display: none !important;
}
.nova-web-details-scope .reference-info-panel{
padding: 13px !important;
}
.nova-web-details-scope .reference-info-grid{
grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
}
.nova-web-details-scope .reference-info-grid > div{
padding: 3px 7px 8px !important;
}
.nova-web-details-scope .reference-info-grid dd{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
}
.nova-web-details-scope .reference-details-story{
max-width: 1050px !important;
margin-top: 8px !important;
font-size: .65rem !important;
line-height: 1.65 !important;
}
.nova-web-details-scope .reference-cast-section{
margin-top: 14px !important;
padding-top: 11px !important;
}
.nova-web-details-scope .reference-cast-section h3{
margin-bottom: 9px !important;
font-size: .82rem !important;
}
.nova-web-details-scope .reference-info-panel .nova-people-rail{
gap: 12px !important;
padding-bottom: 6px !important;
}
.nova-web-details-scope .reference-info-panel .person-card{
width: 78px !important;
}
.nova-web-details-scope .reference-info-panel .person-avatar{
width: 68px !important;
height: 68px !important;
margin-bottom: 7px !important;
}
.nova-web-details-scope .reference-info-panel .person-card strong{
font-size: .68rem !important;
}
.nova-web-details-scope .reference-info-panel .person-card small{
margin-top: 2px !important;
font-size: .57rem !important;
}
.nova-web-details-scope .reference-promo-player{
overflow: hidden !important;
margin: 0 0 14px !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 13px !important;
background: #000000 !important;
box-shadow: 0 18px 42px rgba(0,0,0,.38) !important;
animation: promo-player-enter .24s ease-out both !important;
}
.nova-web-details-scope .reference-promo-player > header{
min-height: 52px !important;
padding: 8px 11px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
.nova-web-details-scope .reference-promo-player > header > div{
min-width: 0 !important;
}
.nova-web-details-scope .reference-promo-player > header span,
.nova-web-details-scope .reference-promo-player > header strong{
display: block !important;
}
.nova-web-details-scope .reference-promo-player > header span{
color: #14D7FF !important;
font-size: .57rem !important;
font-weight: 800 !important;
letter-spacing: .06em !important;
}
.nova-web-details-scope .reference-promo-player > header strong{
margin-top: 2px !important;
overflow: hidden !important;
color: #fff !important;
font-size: .76rem !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .reference-promo-player > header button{
width: 34px !important;
height: 34px !important;
flex: 0 0 34px !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 8px !important;
background: #000000 !important;
color: #fff !important;
}
.nova-web-details-scope .reference-promo-frame{
position: relative !important;
aspect-ratio: 16 / 9 !important;
background: #000000 !important;
}
.nova-web-details-scope .reference-promo-frame iframe{
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
background: #000000 !important;
}
.nova-web-details-scope .reference-promo-card.active .reference-promo-art{
outline: 2px solid #9B4DFF !important;
outline-offset: 2px !important;
box-shadow: 0 0 24px rgba(20,215,255,.15) !important;
}
@keyframes promo-player-enter {
from { opacity: 0; transform: translateY(8px) scale(.992); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nova-web-details-scope .standalone-episode-page{
min-height: 100% !important;
padding-bottom: 36px !important;
background: #000000 !important;
color: #fff !important;
animation: standalone-page-enter .26s ease-out both !important;
}
.nova-web-details-scope .standalone-episode-hero{
position: relative !important;
isolation: isolate !important;
height: clamp(410px, 48vh, 530px) !important;
min-height: 410px !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(255,255,255,.09) !important;
background: #000000 !important;
}
.nova-web-details-scope .standalone-episode-backdrop{
position: absolute !important;
z-index: 0 !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 30% !important;
transform: scale(1.012) !important;
animation: standalone-art-enter .7s cubic-bezier(.2,.72,.25,1) both !important;
}
.nova-web-details-scope .standalone-episode-shade{
position: absolute !important;
z-index: 1 !important;
inset: 0 !important;
background:
linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.20) 35%, rgba(0,0,0,.78) 72%, #000000 100%),
linear-gradient(0deg, #000000 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.30) 100%) !important;
pointer-events: none !important;
}
.nova-web-details-scope .standalone-episode-shade::after{
content: "" !important;
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
width: min(48vw, 720px) !important;
height: 2px !important;
background: linear-gradient(90deg, #F04AD8, #9B4DFF 52%, #14D7FF) !important;
box-shadow: 0 0 20px rgba(155,77,255,.28) !important;
}
.nova-web-details-scope .standalone-episode-hero-content{
position: absolute !important;
z-index: 3 !important;
inset: 0 0 0 auto !important;
width: min(650px, 47vw) !important;
min-height: 0 !important;
padding: clamp(74px, 8vh, 98px) clamp(30px, 4.5vw, 72px) 38px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: flex-start !important;
}
.nova-web-details-scope .standalone-hero-art-play{
position: absolute !important;
z-index: 3 !important;
top: 52% !important;
left: 29% !important;
width: 62px !important;
height: 62px !important;
transform: translate(-50%, -50%) !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255,255,255,.48) !important;
border-radius: 50% !important;
background: rgba(0,0,0,.54) !important;
color: #fff !important;
box-shadow: 0 12px 36px rgba(0,0,0,.42), 0 0 0 7px rgba(0,0,0,.15) !important;
backdrop-filter: blur(8px) !important;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.nova-web-details-scope .standalone-hero-art-play:hover,
.nova-web-details-scope .standalone-hero-art-play:focus-visible{
transform: translate(-50%, -50%) scale(1.07) !important;
border-color: #14D7FF !important;
outline: 0 !important;
box-shadow: 0 12px 38px rgba(0,0,0,.48), 0 0 0 7px rgba(155,77,255,.18), 0 0 22px rgba(20,215,255,.22) !important;
}
.nova-web-details-scope .standalone-episode-kicker,
.nova-web-details-scope .standalone-episode-meta,
.nova-web-details-scope .standalone-episode-actions{
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
}
.nova-web-details-scope .standalone-episode-kicker{
gap: 9px !important;
color: rgba(255,255,255,.72) !important;
font-size: .69rem !important;
font-weight: 800 !important;
}
.nova-web-details-scope .standalone-episode-kicker i{
width: 4px !important;
height: 4px !important;
border-radius: 50% !important;
background: #14D7FF !important;
box-shadow: 0 0 9px #14D7FF !important;
}
.nova-web-details-scope .standalone-episode-series-name{
max-width: 100% !important;
margin-top: 12px !important;
overflow: hidden !important;
color: rgba(255,255,255,.78) !important;
font-size: .78rem !important;
font-weight: 750 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .standalone-episode-hero-content h1{
max-width: 100% !important;
margin: 5px 0 0 !important;
font-size: clamp(2.05rem, 3.15vw, 3.25rem) !important;
line-height: 1.1 !important;
text-wrap: balance !important;
}
.nova-web-details-scope .standalone-episode-hero-content > p{
max-width: 590px !important;
margin: 11px 0 0 !important;
display: -webkit-box !important;
overflow: hidden !important;
color: rgba(255,255,255,.70) !important;
font-size: .86rem !important;
line-height: 1.78 !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
}
.nova-web-details-scope .standalone-episode-meta{
gap: 12px !important;
margin-top: 14px !important;
}
.nova-web-details-scope .standalone-episode-meta span{
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
color: rgba(255,255,255,.67) !important;
font-size: .71rem !important;
}
.nova-web-details-scope .standalone-episode-actions{
gap: 9px !important;
margin-top: 20px !important;
}
.nova-web-details-scope .standalone-episode-play,
.nova-web-details-scope .standalone-series-return{
min-height: 48px !important;
padding: 0 17px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
border-radius: 11px !important;
color: #fff !important;
}
.nova-web-details-scope .standalone-episode-play{
min-width: 164px !important;
border: 0 !important;
background: #fff !important;
color: #000 !important;
}
.nova-web-details-scope .standalone-episode-play > span{
width: 30px !important;
height: 30px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
background: #000 !important;
color: #fff !important;
}
.nova-web-details-scope .standalone-episode-play strong{
font-size: .79rem !important;
}
.nova-web-details-scope .standalone-series-return{
max-width: 300px !important;
border: 1px solid rgba(255,255,255,.20) !important;
background: rgba(0,0,0,.64) !important;
backdrop-filter: blur(12px) !important;
}
.nova-web-details-scope .standalone-series-return span{
overflow: hidden !important;
font-size: .71rem !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .standalone-episode-content{
width: min(1500px, calc(100% - clamp(32px, 5vw, 84px))) !important;
margin: 0 auto !important;
padding-top: 24px !important;
display: grid !important;
gap: 24px !important;
}
.nova-web-details-scope .standalone-episode-narrative{
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
gap: 14px !important;
}
.nova-web-details-scope .standalone-story-card,
.nova-web-details-scope .standalone-source-panel{
border: 1px solid rgba(255,255,255,.11) !important;
border-radius: 13px !important;
background: #000000 !important;
}
.nova-web-details-scope .standalone-story-card{
min-width: 0 !important;
padding: 21px 22px !important;
position: relative !important;
overflow: hidden !important;
}
.nova-web-details-scope .standalone-story-card::before{
content: "" !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 110px !important;
height: 1px !important;
background: linear-gradient(90deg, #F04AD8, #14D7FF) !important;
}
.nova-web-details-scope .standalone-section-kicker{
color: #14D7FF !important;
font-size: .58rem !important;
font-weight: 850 !important;
letter-spacing: .07em !important;
}
.nova-web-details-scope .standalone-story-card h2{
margin: 6px 0 0 !important;
font-size: 1.08rem !important;
}
.nova-web-details-scope .standalone-story-card p{
margin: 9px 0 0 !important;
display: -webkit-box !important;
overflow: hidden !important;
color: rgba(255,255,255,.66) !important;
font-size: .79rem !important;
line-height: 1.78 !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 5 !important;
}
.nova-web-details-scope .standalone-story-card.episode-story p{
-webkit-line-clamp: 4 !important;
}
.nova-web-details-scope .standalone-story-facts{
margin-top: 13px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.nova-web-details-scope .standalone-story-facts span{
min-height: 26px !important;
padding: 0 9px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 7px !important;
color: rgba(255,255,255,.72) !important;
font-size: .64rem !important;
}
.nova-web-details-scope .standalone-story-card > button{
margin-top: 12px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
border: 0 !important;
background: transparent !important;
color: #14D7FF !important;
font-size: .69rem !important;
}
.nova-web-details-scope .standalone-source-panel{
padding: 22px !important;
}
.nova-web-details-scope .standalone-source-panel > header,
.nova-web-details-scope .standalone-related-episodes > header{
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 18px !important;
}
.nova-web-details-scope .standalone-source-panel > header h2,
.nova-web-details-scope .standalone-related-episodes > header h2{
margin: 5px 0 0 !important;
color: #fff !important;
font-size: 1.16rem !important;
}
.nova-web-details-scope .standalone-source-panel > header p{
margin: 5px 0 0 !important;
color: rgba(255,255,255,.48) !important;
font-size: .7rem !important;
}
.nova-web-details-scope .standalone-source-count{
min-height: 34px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 8px !important;
color: rgba(255,255,255,.66) !important;
font-size: .67rem !important;
white-space: nowrap !important;
}
.nova-web-details-scope .standalone-source-grid{
margin-top: 18px !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 11px !important;
}
.nova-web-details-scope .standalone-source-card.episode-source-card{
min-height: 74px !important;
padding: 8px !important;
display: grid !important;
grid-template-columns: 66px minmax(0,1fr) 46px !important;
align-items: center !important;
gap: 9px !important;
border: 1px solid rgba(255,255,255,.13) !important;
border-radius: 11px !important;
background: #000000 !important;
color: #fff !important;
text-align: right !important;
}
.nova-web-details-scope .standalone-source-card.episode-source-card.primary{
border-color: transparent !important;
background:
linear-gradient(#000000,#000000) padding-box,
linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
}
.nova-web-details-scope .standalone-source-card.episode-source-card:hover,
.nova-web-details-scope .standalone-source-card.episode-source-card:focus-visible{
transform: translateY(-2px) !important;
border-color: #9B4DFF !important;
outline: 0 !important;
}
.nova-web-details-scope .standalone-source-quality{
height: 48px !important;
display: grid !important;
place-items: center !important;
border-left: 1px solid rgba(255,255,255,.10) !important;
color: #14D7FF !important;
font-size: .83rem !important;
font-weight: 900 !important;
direction: ltr !important;
}
.nova-web-details-scope .standalone-source-copy{
min-width: 0 !important;
}
.nova-web-details-scope .standalone-source-copy strong,
.nova-web-details-scope .standalone-source-copy small{
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .standalone-source-copy strong{
font-size: .8rem !important;
}
.nova-web-details-scope .standalone-source-copy small{
margin-top: 4px !important;
color: rgba(255,255,255,.46) !important;
font-size: .62rem !important;
}
.nova-web-details-scope .standalone-source-play{
width: 38px !important;
height: 38px !important;
display: grid !important;
place-items: center !important;
justify-self: center !important;
border: 1px solid rgba(255,255,255,.24) !important;
border-radius: 50% !important;
}
.nova-web-details-scope .standalone-source-login,
.nova-web-details-scope .standalone-source-skeletons,
.nova-web-details-scope .standalone-source-error,
.nova-web-details-scope .standalone-source-empty{
margin-top: 16px !important;
}
.nova-web-details-scope .standalone-related-episodes{
min-width: 0 !important;
}
.nova-web-details-scope .standalone-related-rail{
margin-top: 13px !important;
padding-bottom: 7px !important;
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(230px, 20vw) !important;
gap: 12px !important;
overflow-x: auto !important;
overscroll-behavior-inline: contain !important;
scrollbar-width: thin !important;
}
.nova-web-details-scope .standalone-related-card{
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
background: #000000 !important;
color: #fff !important;
text-align: right !important;
}
.nova-web-details-scope .standalone-related-art{
position: relative !important;
overflow: hidden !important;
display: block !important;
aspect-ratio: 16 / 9 !important;
border: 1px solid rgba(255,255,255,.11) !important;
border-radius: 11px !important;
background: #000000 !important;
}
.nova-web-details-scope .standalone-related-art img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform .24s ease !important;
}
.nova-web-details-scope .standalone-related-art i{
position: absolute !important;
inset: 50% auto auto 50% !important;
width: 34px !important;
height: 34px !important;
transform: translate(-50%, -50%) !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255,255,255,.28) !important;
border-radius: 50% !important;
background: rgba(0,0,0,.70) !important;
opacity: 0 !important;
transition: opacity .2s ease !important;
}
.nova-web-details-scope .standalone-related-art > small{
position: absolute !important;
top: 7px !important;
right: 7px !important;
padding: 4px 7px !important;
border-radius: 6px !important;
background: rgba(0,0,0,.78) !important;
font-size: .58rem !important;
}
.nova-web-details-scope .standalone-related-card:hover .standalone-related-art i,
.nova-web-details-scope .standalone-related-card:focus-visible .standalone-related-art i{
opacity: 1 !important;
}
.nova-web-details-scope .standalone-related-card:hover .standalone-related-art img{
transform: scale(1.035) !important;
}
.nova-web-details-scope .standalone-related-card > strong,
.nova-web-details-scope .standalone-related-card > small{
display: block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .standalone-related-card > strong{
margin-top: 8px !important;
font-size: .78rem !important;
}
.nova-web-details-scope .standalone-related-card > small{
margin-top: 3px !important;
color: rgba(255,255,255,.43) !important;
font-size: .62rem !important;
}
@keyframes standalone-art-enter {
from { opacity: .35; transform: scale(1.045); }
to { opacity: 1; transform: scale(1.012); }
}
@keyframes standalone-page-enter {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 821px) {
.nova-web-details-scope .cinematic-details-hero{
height: clamp(390px, 47dvh, 555px) !important;
}
.nova-web-details-scope .cinematic-title{
font-size: clamp(2.15rem, 5.1vw, 4.7rem) !important;
}
}
@media (max-width: 1040px) {
.nova-web-details-scope .standalone-source-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.nova-web-details-scope .standalone-episode-narrative{
grid-template-columns: 1fr !important;
}
}
@media (max-width: 820px) {
.nova-web-details-scope .episode-season-filter.nova-catalog-select-card{
height: 34px !important;
min-height: 34px !important;
min-width: 84px !important;
max-width: 126px !important;
padding-inline: 7px !important;
grid-template-columns: 15px minmax(38px, auto) 13px !important;
gap: 4px !important;
border-radius: 7px !important;
}
.nova-web-details-scope .episode-season-filter.nova-catalog-select-card > span{
display: none !important;
}
.nova-web-details-scope .episode-season-filter.nova-catalog-select-card > strong{
font-size: .68rem !important;
}
.nova-web-details-scope .cinematic-details-hero{
height: clamp(390px, 49dvh, 475px) !important;
min-height: 390px !important;
}
.nova-web-details-scope .cinematic-title{
font-size: clamp(1.75rem, 9vw, 3.25rem) !important;
}
.nova-web-details-scope .reference-info-panel .person-card{
width: 68px !important;
}
.nova-web-details-scope .reference-info-panel .person-avatar{
width: 58px !important;
height: 58px !important;
}
.nova-web-details-scope .standalone-episode-hero{
height: auto !important;
min-height: 0 !important;
display: grid !important;
grid-template: auto auto / minmax(0, 1fr) !important;
overflow: hidden !important;
}
.nova-web-details-scope .standalone-episode-backdrop{
position: relative !important;
z-index: 0 !important;
grid-area: 1 / 1 !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 8.8 !important;
object-position: center 28% !important;
}
.nova-web-details-scope .standalone-episode-shade{
position: relative !important;
z-index: 1 !important;
grid-area: 1 / 1 !important;
inset: auto !important;
background:
linear-gradient(0deg, #000000 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.28) 100%),
linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.18)) !important;
}
.nova-web-details-scope .standalone-episode-shade::after{
width: 58% !important;
}
.nova-web-details-scope .standalone-hero-art-play{
position: relative !important;
z-index: 2 !important;
grid-area: 1 / 1 !important;
place-self: center !important;
top: auto !important;
left: auto !important;
width: 56px !important;
height: 56px !important;
transform: none !important;
}
.nova-web-details-scope .standalone-hero-art-play:hover,
.nova-web-details-scope .standalone-hero-art-play:focus-visible{
transform: scale(1.06) !important;
}
.nova-web-details-scope .standalone-episode-hero-content{
position: relative !important;
z-index: 3 !important;
grid-area: 2 / 1 !important;
inset: auto !important;
width: 100% !important;
min-height: 0 !important;
margin-top: -32px !important;
padding: 48px 18px 22px !important;
justify-content: flex-end !important;
background: linear-gradient(0deg, #000 0%, #000 78%, rgba(0,0,0,0) 100%) !important;
}
.nova-web-details-scope .standalone-episode-hero-content h1{
font-size: clamp(1.65rem, 7.2vw, 2.35rem) !important;
}
.nova-web-details-scope .standalone-episode-hero-content > p{
max-width: 100% !important;
font-size: .77rem !important;
line-height: 1.72 !important;
-webkit-line-clamp: 3 !important;
}
.nova-web-details-scope .standalone-episode-content{
width: calc(100% - 24px) !important;
padding-top: 16px !important;
gap: 18px !important;
}
.nova-web-details-scope .standalone-story-card{
padding: 17px !important;
}
.nova-web-details-scope .standalone-story-card p{
font-size: .75rem !important;
-webkit-line-clamp: 5 !important;
}
.nova-web-details-scope .standalone-source-panel{
padding: 16px !important;
}
.nova-web-details-scope .standalone-source-panel > header p{
display: none !important;
}
.nova-web-details-scope .standalone-related-rail{
grid-auto-columns: minmax(205px, 64vw) !important;
}
}
@media (max-width: 560px) {
.nova-web-details-scope .standalone-episode-hero{
min-height: 0 !important;
}
.nova-web-details-scope .standalone-episode-backdrop{
aspect-ratio: 4 / 3 !important;
}
.nova-web-details-scope .standalone-episode-series-name{
margin-top: 9px !important;
font-size: .72rem !important;
}
.nova-web-details-scope .standalone-episode-hero-content{
margin-top: -27px !important;
padding: 43px 14px 18px !important;
}
.nova-web-details-scope .standalone-episode-kicker{
font-size: .64rem !important;
}
.nova-web-details-scope .standalone-episode-actions{
width: 100% !important;
}
.nova-web-details-scope .standalone-episode-play,
.nova-web-details-scope .standalone-series-return{
flex: 1 1 138px !important;
min-height: 46px !important;
max-width: none !important;
padding-inline: 11px !important;
}
.nova-web-details-scope .standalone-series-return span{
font-size: .66rem !important;
}
.nova-web-details-scope .standalone-source-grid{
grid-template-columns: 1fr !important;
}
.nova-web-details-scope .standalone-source-panel > header{
align-items: center !important;
}
.nova-web-details-scope .standalone-source-panel > header h2{
font-size: .98rem !important;
}
.nova-web-details-scope .standalone-story-card{
padding: 15px !important;
}
.nova-web-details-scope .standalone-source-card.episode-source-card{
min-height: 68px !important;
grid-template-columns: 58px minmax(0,1fr) 42px !important;
}
.nova-web-details-scope .standalone-source-quality{
height: 44px !important;
font-size: .78rem !important;
}
.nova-web-details-scope .standalone-related-rail{
grid-auto-columns: minmax(190px, 70vw) !important;
}
.nova-web-details-scope .reference-promo-rail{
grid-auto-columns: minmax(190px, 74vw) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-web-details-scope .standalone-episode-page,
.nova-web-details-scope .standalone-episode-backdrop,
.nova-web-details-scope .reference-promo-player,
.nova-web-details-scope .standalone-related-art img{
animation: none !important;
transition: none !important;
}
}
/* =========================================================
EPISODE DETAILS — RESPONSIVE PROFESSIONAL LAYOUT V2
This final block intentionally overrides the legacy standalone episode
rules above. SafeImage renders a child ![]()
, therefore image styling must
cross the scoped-component boundary with ::deep.
========================================================= */
.nova-web-details-scope .standalone-episode-page{
min-height: 100dvh !important;
padding-bottom: calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 34px) !important;
background:
radial-gradient(circle at 18% 8%, rgba(155,77,255,.075), transparent 25rem),
radial-gradient(circle at 83% 22%, rgba(20,215,255,.045), transparent 22rem),
#030304 !important;
color: #fff !important;
}
.nova-web-details-scope .standalone-episode-hero{
position: relative !important;
height: auto !important;
min-height: 0 !important;
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 78px) clamp(18px, 3vw, 46px) 26px !important;
overflow: visible !important;
border: 0 !important;
background: transparent !important;
}
.nova-web-details-scope .standalone-episode-hero-frame{
width: min(1460px, 100%) !important;
min-height: 430px !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1.55fr) minmax(340px, .78fr) !important;
grid-template-areas: "media info" !important;
direction: ltr !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.095) !important;
border-radius: 22px !important;
background: #08080b !important;
box-shadow: 0 26px 80px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.035) inset !important;
}
.nova-web-details-scope .standalone-episode-media{
position: relative !important;
grid-area: media !important;
min-width: 0 !important;
min-height: 430px !important;
overflow: hidden !important;
isolation: isolate !important;
background: #07070a !important;
}
.nova-web-details-scope .standalone-episode-media::before{
content: "" !important;
position: absolute !important;
z-index: 2 !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.02) 56%, rgba(8,8,11,.92) 100%),
linear-gradient(0deg, rgba(0,0,0,.52) 0%, transparent 42%, rgba(0,0,0,.18) 100%) !important;
}
.nova-web-details-scope .standalone-episode-media .standalone-episode-backdrop-image,
.nova-web-details-scope .standalone-episode-media .standalone-episode-art-image{
position: absolute !important;
display: block !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
user-select: none !important;
-webkit-user-drag: none !important;
}
.nova-web-details-scope .standalone-episode-media .standalone-episode-backdrop-image{
z-index: 0 !important;
object-fit: cover !important;
object-position: center 28% !important;
transform: scale(1.09) !important;
filter: blur(20px) saturate(.82) brightness(.58) !important;
opacity: .76 !important;
}
.nova-web-details-scope .standalone-episode-media .standalone-episode-art-image{
z-index: 1 !important;
object-fit: contain !important;
object-position: center !important;
filter: saturate(.96) contrast(1.02) brightness(.94) !important;
animation: standalone-art-enter .55s cubic-bezier(.2,.72,.25,1) both !important;
}
.nova-web-details-scope .standalone-episode-shade{
position: absolute !important;
z-index: 3 !important;
inset: 0 !important;
pointer-events: none !important;
background:
linear-gradient(90deg, rgba(0,0,0,.02), transparent 48%, rgba(7,7,10,.72) 100%),
linear-gradient(0deg, rgba(0,0,0,.45), transparent 42%) !important;
}
.nova-web-details-scope .standalone-episode-shade::after{
right: auto !important;
left: 0 !important;
bottom: 0 !important;
width: 46% !important;
height: 2px !important;
background: linear-gradient(90deg, #14D7FF, #9B4DFF 55%, #F04AD8) !important;
opacity: .86 !important;
}
.nova-web-details-scope .standalone-hero-art-play{
position: absolute !important;
z-index: 5 !important;
top: 50% !important;
left: 50% !important;
width: 64px !important;
height: 64px !important;
transform: translate(-50%, -50%) !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255,255,255,.5) !important;
border-radius: 50% !important;
background: rgba(3,3,5,.62) !important;
color: #fff !important;
box-shadow: 0 14px 44px rgba(0,0,0,.46), 0 0 0 8px rgba(0,0,0,.16) !important;
backdrop-filter: blur(12px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
}
.nova-web-details-scope .standalone-hero-art-play:hover,
.nova-web-details-scope .standalone-hero-art-play:focus-visible{
transform: translate(-50%, -50%) scale(1.07) !important;
border-color: #14D7FF !important;
outline: 0 !important;
box-shadow: 0 16px 46px rgba(0,0,0,.52), 0 0 0 8px rgba(155,77,255,.15), 0 0 28px rgba(20,215,255,.24) !important;
}
.nova-web-details-scope .standalone-episode-hero-content{
position: relative !important;
grid-area: info !important;
z-index: 4 !important;
inset: auto !important;
width: auto !important;
min-width: 0 !important;
min-height: 430px !important;
padding: clamp(28px, 3vw, 44px) clamp(24px, 2.8vw, 40px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
direction: rtl !important;
text-align: right !important;
background:
linear-gradient(135deg, rgba(17,17,22,.97), rgba(8,8,11,.985)),
#08080b !important;
border-left: 1px solid rgba(255,255,255,.055) !important;
}
.nova-web-details-scope .standalone-episode-hero-content::before{
content: "" !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 148px !important;
height: 2px !important;
background: linear-gradient(90deg, #F04AD8, #9B4DFF, #14D7FF) !important;
opacity: .92 !important;
}
.nova-web-details-scope .standalone-episode-kicker{
gap: 8px !important;
color: rgba(255,255,255,.64) !important;
font-size: .68rem !important;
font-weight: 850 !important;
}
.nova-web-details-scope .standalone-episode-series-name{
margin-top: 13px !important;
color: rgba(255,255,255,.72) !important;
font-size: .77rem !important;
font-weight: 750 !important;
}
.nova-web-details-scope .standalone-episode-hero-content h1{
max-width: 100% !important;
margin: 6px 0 0 !important;
color: #fff !important;
font-size: clamp(2rem, 2.9vw, 3.05rem) !important;
line-height: 1.08 !important;
letter-spacing: -.025em !important;
text-wrap: balance !important;
}
.nova-web-details-scope .standalone-episode-hero-content > p{
max-width: 100% !important;
margin: 13px 0 0 !important;
color: rgba(255,255,255,.64) !important;
font-size: .82rem !important;
line-height: 1.82 !important;
-webkit-line-clamp: 4 !important;
}
.nova-web-details-scope .standalone-episode-meta{
gap: 7px 11px !important;
margin-top: 16px !important;
}
.nova-web-details-scope .standalone-episode-meta span{
min-height: 27px !important;
padding: 0 8px !important;
border: 1px solid rgba(255,255,255,.085) !important;
border-radius: 7px !important;
background: rgba(255,255,255,.025) !important;
color: rgba(255,255,255,.67) !important;
font-size: .67rem !important;
}
.nova-web-details-scope .standalone-episode-actions{
width: 100% !important;
margin-top: 22px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 9px !important;
}
.nova-web-details-scope .standalone-episode-play,
.nova-web-details-scope .standalone-series-return{
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 48px !important;
padding: 0 13px !important;
border-radius: 10px !important;
}
.nova-web-details-scope .standalone-episode-play{
background: #fff !important;
color: #050506 !important;
box-shadow: 0 8px 24px rgba(255,255,255,.07) !important;
}
.nova-web-details-scope .standalone-series-return{
border-color: rgba(255,255,255,.13) !important;
background: rgba(255,255,255,.035) !important;
backdrop-filter: none !important;
}
.nova-web-details-scope .standalone-episode-play:hover,
.nova-web-details-scope .standalone-episode-play:focus-visible{
transform: translateY(-1px) !important;
box-shadow: 0 10px 26px rgba(255,255,255,.11) !important;
outline: 0 !important;
}
.nova-web-details-scope .standalone-series-return:hover,
.nova-web-details-scope .standalone-series-return:focus-visible{
border-color: rgba(20,215,255,.42) !important;
background: rgba(20,215,255,.055) !important;
outline: 0 !important;
}
.nova-web-details-scope .standalone-episode-content{
width: min(1460px, calc(100% - clamp(36px, 6vw, 92px))) !important;
margin: 0 auto !important;
padding-top: 0 !important;
display: grid !important;
gap: 20px !important;
}
.nova-web-details-scope .standalone-episode-narrative{
gap: 14px !important;
}
.nova-web-details-scope .standalone-story-card,
.nova-web-details-scope .standalone-source-panel{
border-color: rgba(255,255,255,.085) !important;
border-radius: 16px !important;
background: linear-gradient(145deg, rgba(15,15,19,.96), rgba(7,7,9,.98)) !important;
box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
}
.nova-web-details-scope .standalone-story-card{
padding: 22px 24px !important;
}
.nova-web-details-scope .standalone-story-card::before{
width: 126px !important;
height: 2px !important;
}
.nova-web-details-scope .standalone-story-card h2,
.nova-web-details-scope .standalone-source-panel > header h2,
.nova-web-details-scope .standalone-related-episodes > header h2{
letter-spacing: -.012em !important;
}
.nova-web-details-scope .standalone-story-card p{
color: rgba(255,255,255,.61) !important;
}
.nova-web-details-scope .standalone-source-panel{
padding: 22px 24px !important;
}
.nova-web-details-scope .standalone-source-card.episode-source-card{
min-height: 72px !important;
border-color: rgba(255,255,255,.09) !important;
background: rgba(255,255,255,.024) !important;
transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}
.nova-web-details-scope .standalone-source-card.episode-source-card.primary{
border-color: transparent !important;
background:
linear-gradient(#0b0b0e,#0b0b0e) padding-box,
linear-gradient(110deg,#F04AD8,#9B4DFF,#14D7FF) border-box !important;
}
.nova-web-details-scope .standalone-related-art{
border-radius: 14px !important;
background: #09090c !important;
}
@media (max-width: 1120px) {
.nova-web-details-scope .standalone-episode-hero-frame{
grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr) !important;
min-height: 400px !important;
}
.nova-web-details-scope .standalone-episode-media,
.nova-web-details-scope .standalone-episode-hero-content{
min-height: 400px !important;
}
.nova-web-details-scope .standalone-episode-hero-content{
padding: 28px 25px !important;
}
.nova-web-details-scope .standalone-episode-hero-content h1{
font-size: clamp(1.8rem, 3vw, 2.45rem) !important;
}
.nova-web-details-scope .standalone-episode-actions{
grid-template-columns: 1fr !important;
}
}
@media (max-width: 820px) {
.nova-web-details-scope .standalone-episode-hero{
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 66px) 14px 18px !important;
}
.nova-web-details-scope .standalone-episode-hero-frame{
min-height: 0 !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
"media"
"info" !important;
border-radius: 18px !important;
}
.nova-web-details-scope .standalone-episode-media{
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
}
.nova-web-details-scope .standalone-episode-media::before{
background:
linear-gradient(0deg, rgba(8,8,11,.70) 0%, transparent 38%),
linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.08)) !important;
}
.nova-web-details-scope .standalone-episode-media .standalone-episode-backdrop-image{
object-position: center 24% !important;
filter: blur(18px) saturate(.84) brightness(.56) !important;
}
.nova-web-details-scope .standalone-episode-media .standalone-episode-art-image{
object-fit: contain !important;
object-position: center !important;
}
.nova-web-details-scope .standalone-episode-shade{
position: absolute !important;
grid-area: auto !important;
background: linear-gradient(0deg, rgba(8,8,11,.76), transparent 42%) !important;
}
.nova-web-details-scope .standalone-episode-shade::after{
width: 54% !important;
}
.nova-web-details-scope .standalone-hero-art-play{
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 58px !important;
height: 58px !important;
transform: translate(-50%, -50%) !important;
}
.nova-web-details-scope .standalone-hero-art-play:hover,
.nova-web-details-scope .standalone-hero-art-play:focus-visible{
transform: translate(-50%, -50%) scale(1.06) !important;
}
.nova-web-details-scope .standalone-episode-hero-content{
min-height: 0 !important;
margin: 0 !important;
padding: 24px 22px 23px !important;
justify-content: flex-start !important;
background: linear-gradient(180deg, #0d0d11, #08080b) !important;
border-left: 0 !important;
border-top: 1px solid rgba(255,255,255,.055) !important;
}
.nova-web-details-scope .standalone-episode-hero-content h1{
font-size: clamp(1.65rem, 6.8vw, 2.25rem) !important;
}
.nova-web-details-scope .standalone-episode-hero-content > p{
font-size: .78rem !important;
line-height: 1.76 !important;
-webkit-line-clamp: 3 !important;
}
.nova-web-details-scope .standalone-episode-actions{
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
.nova-web-details-scope .standalone-episode-content{
width: calc(100% - 28px) !important;
gap: 16px !important;
}
.nova-web-details-scope .standalone-story-card,
.nova-web-details-scope .standalone-source-panel{
border-radius: 14px !important;
}
.nova-web-details-scope .standalone-story-card,
.nova-web-details-scope .standalone-source-panel{
padding: 18px !important;
}
}
@media (max-width: 560px) {
.nova-web-details-scope .standalone-episode-hero{
padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 56px) 0 12px !important;
}
.nova-web-details-scope .standalone-episode-hero-frame{
border-right: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
}
.nova-web-details-scope .standalone-episode-media{
aspect-ratio: 16 / 10.5 !important;
}
.nova-web-details-scope .standalone-episode-media .standalone-episode-art-image{
object-fit: contain !important;
}
.nova-web-details-scope .standalone-hero-art-play{
width: 54px !important;
height: 54px !important;
}
.nova-web-details-scope .standalone-episode-hero-content{
padding: 21px 14px 20px !important;
}
.nova-web-details-scope .standalone-episode-series-name{
margin-top: 10px !important;
font-size: .71rem !important;
}
.nova-web-details-scope .standalone-episode-hero-content h1{
font-size: clamp(1.55rem, 8vw, 1.95rem) !important;
}
.nova-web-details-scope .standalone-episode-hero-content > p{
margin-top: 10px !important;
font-size: .75rem !important;
}
.nova-web-details-scope .standalone-episode-meta{
margin-top: 13px !important;
}
.nova-web-details-scope .standalone-episode-meta span{
min-height: 25px !important;
font-size: .62rem !important;
}
.nova-web-details-scope .standalone-episode-actions{
grid-template-columns: 1fr !important;
margin-top: 17px !important;
}
.nova-web-details-scope .standalone-episode-play,
.nova-web-details-scope .standalone-series-return{
min-height: 46px !important;
}
.nova-web-details-scope .standalone-episode-content{
width: calc(100% - 20px) !important;
gap: 14px !important;
}
.nova-web-details-scope .standalone-story-card,
.nova-web-details-scope .standalone-source-panel{
padding: 16px !important;
border-radius: 13px !important;
}
.nova-web-details-scope .standalone-source-panel > header{
align-items: flex-start !important;
gap: 10px !important;
}
.nova-web-details-scope .standalone-source-count{
min-height: 30px !important;
padding-inline: 9px !important;
font-size: .61rem !important;
}
.nova-web-details-scope .standalone-source-grid{
margin-top: 14px !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
}
.nova-web-details-scope .standalone-related-rail{
grid-auto-columns: minmax(190px, 78vw) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-web-details-scope .standalone-episode-media .standalone-episode-art-image,
.nova-web-details-scope .standalone-hero-art-play,
.nova-web-details-scope .standalone-source-card.episode-source-card{
animation: none !important;
transition: none !important;
}
}
/* =========================================================
RELEASE AUDIT STAGE 1 — DETAILS TEXT / ACTION FEEDBACK
Keeps the approved visual identity while fixing bidi text, action feedback
and hidden error states.
========================================================= */
.nova-web-details-scope .nova-directional-text{
text-align: start !important;
unicode-bidi: plaintext !important;
overflow-wrap: anywhere !important;
}
.nova-web-details-scope .nova-directional-text[dir="ltr"],
.nova-web-details-scope .details-standard-title h1[dir="ltr"],
.nova-web-details-scope .cinematic-title[dir="ltr"]{
direction: ltr !important;
text-align: left !important;
}
.nova-web-details-scope .nova-directional-text[dir="rtl"],
.nova-web-details-scope .details-standard-title h1[dir="rtl"],
.nova-web-details-scope .cinematic-title[dir="rtl"]{
direction: rtl !important;
text-align: right !important;
}
.nova-web-details-scope .details-action-alert{
position: fixed !important;
z-index: 2250 !important;
top: calc(var(--nova-app-header-h, 58px) + var(--safe-top, env(safe-area-inset-top, 0px)) + 8px) !important;
right: clamp(12px, 3vw, 28px) !important;
left: clamp(12px, 3vw, 28px) !important;
width: min(560px, calc(100% - 24px)) !important;
min-height: 42px !important;
margin-inline: auto !important;
padding: 8px 8px 8px 11px !important;
display: grid !important;
grid-template-columns: 20px minmax(0, 1fr) 34px !important;
align-items: center !important;
gap: 8px !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 10px !important;
color: rgba(255,255,255,.92) !important;
background: rgba(12,10,17,.94) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.34) !important;
backdrop-filter: blur(16px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
font-size: .76rem !important;
line-height: 1.55 !important;
}
.nova-web-details-scope .details-action-alert > .oscar-icon{
color: #C25DFF !important;
}
.nova-web-details-scope .details-action-alert > button{
width: 34px !important;
height: 34px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 0 !important;
border-radius: 50% !important;
color: rgba(255,255,255,.78) !important;
background: transparent !important;
}
.nova-web-details-scope .cinematic-watch-button:disabled,
.nova-web-details-scope .cinematic-secondary-action:disabled,
.nova-web-details-scope .nova-server-card:disabled,
.nova-web-details-scope .standalone-episode-play:disabled,
.nova-web-details-scope .standalone-hero-art-play:disabled,
.nova-web-details-scope .details-header-action:disabled{
cursor: default !important;
opacity: .62 !important;
}
@media (max-width: 600px) {
.nova-web-details-scope .details-action-alert{
top: calc(54px + var(--safe-top, env(safe-area-inset-top, 0px)) + 6px) !important;
font-size: .72rem !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-web-details-scope .details-action-alert,
.nova-web-details-scope .details-action-alert *{
animation: none !important;
transition: none !important;
}
}
/* =========================================================
STAGE 2 RUNTIME DETAILS — COMMERCIAL HERO / PROMO / STORY
Keeps NOVA identity while reducing vertical dominance, moving promotional
playback into the approved hero artwork slot and removing bottom-nav reserve
from immersive details routes.
========================================================= */
.nova-web-details-scope .cinematic-title-stack{
width: min(100%, 680px) !important;
display: grid !important;
justify-items: center !important;
gap: 4px !important;
}
.nova-web-details-scope .cinematic-title-stack .cinematic-title{
margin-bottom: 0 !important;
}
.nova-web-details-scope .cinematic-title-en{
max-width: 100% !important;
color: rgba(255,255,255,.68) !important;
font-size: clamp(.78rem, 2.1vw, 1rem) !important;
font-weight: 650 !important;
line-height: 1.35 !important;
letter-spacing: .01em !important;
text-align: center !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
unicode-bidi: plaintext !important;
}
.nova-web-details-scope .cinematic-hero-promo{
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
overflow: hidden !important;
background: #000 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 220ms ease, visibility 220ms ease !important;
}
.nova-web-details-scope .cinematic-hero-promo iframe{
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
transform: translate(-50%, -50%) !important;
pointer-events: none !important;
background: #000 !important;
}
.nova-web-details-scope .cinematic-details-hero.nova-promo-active .cinematic-hero-promo{
opacity: 1 !important;
visibility: visible !important;
}
.nova-web-details-scope .cinematic-details-hero.nova-promo-active .cinematic-details-backdrop-shell > .cinematic-details-backdrop-image,
.nova-web-details-scope .cinematic-details-hero.nova-promo-active .cinematic-details-backdrop-shell > img{
opacity: 0 !important;
}
.nova-web-details-scope .cinematic-details-backdrop-shell .cinematic-details-backdrop-image,
.nova-web-details-scope .cinematic-details-backdrop-shell img{
transition: opacity 220ms ease !important;
}
.nova-web-details-scope .cinematic-hero-promo-controls{
position: absolute !important;
z-index: 6 !important;
display: flex !important;
gap: 7px !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 180ms ease, visibility 180ms ease !important;
}
.nova-web-details-scope .cinematic-details-hero.nova-promo-active .cinematic-hero-promo-controls{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.nova-web-details-scope .cinematic-hero-promo-controls button{
width: 40px !important;
height: 40px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 1px solid rgba(255,255,255,.20) !important;
border-radius: 50% !important;
color: #fff !important;
background: rgba(5,5,8,.52) !important;
box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
backdrop-filter: blur(12px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
}
.nova-web-details-scope .cinematic-hero-promo-controls button:active{
transform: scale(.96) !important;
}
.nova-web-details-scope .promo-state-pause,
.nova-web-details-scope .promo-state-audible{ display: none !important; }
.nova-web-details-scope .cinematic-details-hero.nova-promo-playing .promo-state-play{ display: none !important; }
.nova-web-details-scope .cinematic-details-hero.nova-promo-playing .promo-state-pause{ display: inline-grid !important; }
.nova-web-details-scope .cinematic-details-hero:not(.nova-promo-muted) .promo-state-muted{ display: none !important; }
.nova-web-details-scope .cinematic-details-hero:not(.nova-promo-muted) .promo-state-audible{ display: inline-grid !important; }
.nova-web-details-scope .reference-details-overview-grid{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(156px, 190px) !important;
gap: 14px !important;
align-items: stretch !important;
}
.nova-web-details-scope .reference-production-card{
min-width: 0 !important;
padding: 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 13px !important;
background: rgba(255,255,255,.025) !important;
}
.nova-web-details-scope .reference-production-label{
color: rgba(255,255,255,.48) !important;
font-size: .66rem !important;
font-weight: 700 !important;
}
.nova-web-details-scope .reference-production-logos{
display: grid !important;
gap: 8px !important;
}
.nova-web-details-scope .reference-production-company{
min-width: 0 !important;
display: grid !important;
gap: 6px !important;
}
.nova-web-details-scope .reference-production-logo{
height: 54px !important;
padding: 7px 10px !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
border-radius: 9px !important;
background: rgba(255,255,255,.96) !important;
}
.nova-web-details-scope .reference-production-logo img{
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.nova-web-details-scope .reference-production-company strong{
min-width: 0 !important;
color: rgba(255,255,255,.76) !important;
font-size: .66rem !important;
font-weight: 650 !important;
line-height: 1.35 !important;
text-align: start !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
unicode-bidi: plaintext !important;
}
.nova-web-details-scope .reference-story-block{
margin-top: 16px !important;
padding-top: 15px !important;
border-top: 1px solid rgba(255,255,255,.07) !important;
}
.nova-web-details-scope .reference-story-block h3{
margin: 0 0 8px !important;
color: #fff !important;
font-size: .92rem !important;
font-weight: 780 !important;
}
.nova-web-details-scope .reference-story-block .reference-details-story{
margin: 0 !important;
color: rgba(255,255,255,.72) !important;
font-size: .78rem !important;
line-height: 1.85 !important;
text-align: right !important;
overflow-wrap: anywhere !important;
}
/* Details routes are immersive; MainLayout removes its bottom navigation. */
.nova-web-details-scope .details-app .details-page-shell,
.nova-web-details-scope .details-app .cinematic-details-content,
.nova-web-details-scope .details-app .nova-channel-details,
.nova-web-details-scope .details-app .standalone-episode-page{
padding-bottom: calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 24px) !important;
}
@media (min-width: 821px) {
.nova-web-details-scope .cinematic-hero-promo-controls{
left: clamp(18px, 3vw, 42px) !important;
bottom: 20px !important;
}
}
@media (max-width: 820px) {
.nova-web-details-scope .cinematic-details-hero{
height: clamp(600px, 72dvh, 760px) !important;
min-height: 600px !important;
}
.nova-web-details-scope .cinematic-details-backdrop-shell{
height: clamp(430px, 55dvh, 560px) !important;
min-height: 430px !important;
}
.nova-web-details-scope .cinematic-hero-promo iframe{
width: 177.78% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
}
.nova-web-details-scope .cinematic-hero-copy{
padding: 132px 16px 18px !important;
}
.nova-web-details-scope .cinematic-title-stack{
gap: 3px !important;
}
.nova-web-details-scope .cinematic-title{
margin: 4px auto 0 !important;
font-size: clamp(1.62rem, 7.6vw, 2.45rem) !important;
line-height: 1.04 !important;
}
.nova-web-details-scope .cinematic-title-en{
max-width: min(92vw, 620px) !important;
font-size: .72rem !important;
}
.nova-web-details-scope .cinematic-meta{
margin-top: 9px !important;
}
.nova-web-details-scope .cinematic-ranking{
margin-top: 8px !important;
}
.nova-web-details-scope .cinematic-actions{
margin-top: 12px !important;
gap: 8px !important;
}
.nova-web-details-scope .cinematic-watch-button{
min-height: 48px !important;
height: 48px !important;
border-radius: 13px !important;
font-size: .88rem !important;
}
.nova-web-details-scope .cinematic-secondary-action{
min-height: 44px !important;
height: 44px !important;
border-radius: 12px !important;
gap: 6px !important;
}
.nova-web-details-scope .cinematic-secondary-action span{
font-size: .7rem !important;
}
.nova-web-details-scope .cinematic-hero-promo-controls{
top: calc(clamp(430px, 55dvh, 560px) - 54px) !important;
left: 14px !important;
}
.nova-web-details-scope .cinematic-hero-promo-controls button{
width: 38px !important;
height: 38px !important;
}
.nova-web-details-scope .reference-details-overview-grid{
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.nova-web-details-scope .reference-production-card{
padding: 10px !important;
}
.nova-web-details-scope .reference-production-logos{
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.nova-web-details-scope .reference-production-logos::-webkit-scrollbar{ display: none !important; }
.nova-web-details-scope .reference-production-company{
flex: 0 0 132px !important;
}
.nova-web-details-scope .reference-production-logo{
height: 48px !important;
}
}
@media (max-width: 390px) {
.nova-web-details-scope .cinematic-details-hero{
height: clamp(560px, 70dvh, 690px) !important;
min-height: 560px !important;
}
.nova-web-details-scope .cinematic-details-backdrop-shell{
height: clamp(400px, 52dvh, 510px) !important;
min-height: 400px !important;
}
.nova-web-details-scope .cinematic-hero-copy{
padding: 112px 14px 16px !important;
}
.nova-web-details-scope .cinematic-hero-promo-controls{
top: calc(clamp(400px, 52dvh, 510px) - 51px) !important;
left: 12px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-web-details-scope .cinematic-hero-promo,
.nova-web-details-scope .cinematic-hero-promo-controls,
.nova-web-details-scope .cinematic-details-backdrop-shell img,
.nova-web-details-scope .cinematic-hero-promo-controls button{
transition: none !important;
}
}
/* =========================================================
Stage 8 — Details commercial interaction polish
Identity locked to Nova+: #F04AD8 → #9B4DFF → #14D7FF
========================================================= */
.nova-web-details-scope .cinematic-details-page{
--nova-pink: #F04AD8 !important;
--nova-purple: #9B4DFF !important;
--nova-cyan: #14D7FF !important;
padding-bottom: calc(24px + var(--safe-bottom, 0px)) !important;
}
.nova-web-details-scope .cinematic-actions{
column-gap: 12px !important;
row-gap: 12px !important;
}
.nova-web-details-scope .cinematic-secondary-action{
position: relative !important;
overflow: hidden !important;
border: 1px solid rgba(255,255,255,.20) !important;
background: rgba(4,4,8,.52) !important;
transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
.nova-web-details-scope .cinematic-secondary-action::after{
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
opacity: 0 !important;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), transparent 58%) !important;
transform: scale(.7) !important;
transition: opacity .18s ease, transform .18s ease !important;
}
.nova-web-details-scope .cinematic-secondary-action:active{
transform: scale(.975) !important;
}
.nova-web-details-scope .cinematic-secondary-action:active::after{
opacity: 1 !important;
transform: scale(1) !important;
}
.nova-web-details-scope .secondary-action-icon{
width: 44px !important;
height: 44px !important;
display: grid !important;
place-items: center !important;
border-radius: 50% !important;
color: rgba(255,255,255,.92) !important;
background: rgba(255,255,255,.035) !important;
transition: transform .18s cubic-bezier(.2,.8,.2,1), color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
.nova-web-details-scope .cinematic-secondary-action.active{
border-color: transparent !important;
color: #fff !important;
background:
linear-gradient(#07070b,#07070b) padding-box,
linear-gradient(105deg,var(--nova-pink),var(--nova-purple) 52%,var(--nova-cyan)) border-box !important;
box-shadow: 0 8px 26px rgba(0,0,0,.34), 0 0 20px rgba(155,77,255,.12) !important;
}
.nova-web-details-scope .cinematic-secondary-action.active .secondary-action-icon{
color: #fff !important;
background: linear-gradient(135deg,rgba(240,74,216,.28),rgba(155,77,255,.34) 52%,rgba(20,215,255,.24)) !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(155,77,255,.18) !important;
transform: scale(1.06) !important;
}
.nova-web-details-scope .cinematic-secondary-action.favorite-action.active .secondary-action-icon{
color: #F45BDB !important;
}
.nova-web-details-scope .cinematic-secondary-action.list-action.active .secondary-action-icon{
color: #fff !important;
}
.nova-web-details-scope .cinematic-secondary-action.just-selected .secondary-action-icon{
animation: novaActionConfirm .34s cubic-bezier(.22,.9,.3,1.2) !important;
}
@keyframes novaActionConfirm {
0% { transform: scale(.82); }
58% { transform: scale(1.17); }
100% { transform: scale(1.06); }
}
.nova-web-details-scope .reference-story-block.story-first{
margin: 0 0 18px !important;
padding: 0 2px 18px !important;
border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.nova-web-details-scope .reference-story-block.story-first .reference-panel-heading{
margin-bottom: 7px !important;
}
.nova-web-details-scope .reference-story-block.story-first .reference-details-story{
margin: 0 !important;
color: rgba(255,255,255,.75) !important;
font-size: clamp(.78rem,1.5vw,.92rem) !important;
line-height: 1.88 !important;
}
.nova-web-details-scope .reference-panel-heading.details-heading{
margin-top: 2px !important;
}
.nova-web-details-scope .reference-production-card{
min-width: 220px !important;
padding: 12px !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 13px !important;
background: linear-gradient(145deg,rgba(12,8,18,.84),rgba(2,5,11,.90)) !important;
}
.nova-web-details-scope .reference-production-label{
display: block !important;
margin-bottom: 9px !important;
color: #C55CFF !important;
font-size: .66rem !important;
font-weight: 900 !important;
}
.nova-web-details-scope .reference-production-logos{
display: grid !important;
gap: 8px !important;
}
.nova-web-details-scope .reference-production-company{
min-width: 0 !important;
display: grid !important;
grid-template-columns: 48px minmax(0,1fr) !important;
gap: 10px !important;
align-items: center !important;
}
.nova-web-details-scope .reference-production-logo{
width: 48px !important;
height: 48px !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
background:
linear-gradient(#07080d,#07080d) padding-box,
linear-gradient(135deg,rgba(240,74,216,.72),rgba(155,77,255,.62),rgba(20,215,255,.66)) border-box !important;
}
.nova-web-details-scope .reference-production-logo img{
width: 82% !important;
height: 82% !important;
object-fit: contain !important;
}
.nova-web-details-scope .production-logo-fallback{
color: #fff !important;
font-size: 1rem !important;
font-weight: 950 !important;
}
.nova-web-details-scope .reference-production-copy{
min-width: 0 !important;
display: grid !important;
gap: 2px !important;
}
.nova-web-details-scope .reference-production-copy strong{
overflow: hidden !important;
color: #fff !important;
font-size: .78rem !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-web-details-scope .reference-production-copy small{
color: rgba(255,255,255,.45) !important;
font-size: .6rem !important;
}
.nova-web-details-scope .watch-options-section{
min-height: 220px !important;
}
.nova-web-details-scope .watch-loading-shell{
display: grid !important;
gap: 14px !important;
}
.nova-web-details-scope .watch-quality-skeletons{
display: flex !important;
gap: 8px !important;
overflow: hidden !important;
}
.nova-web-details-scope .watch-quality-skeletons i{
width: 82px !important;
height: 34px !important;
flex: 0 0 auto !important;
border-radius: 10px !important;
background: linear-gradient(100deg,rgba(255,255,255,.05) 22%,rgba(155,77,255,.18) 44%,rgba(20,215,255,.11) 52%,rgba(255,255,255,.05) 72%) !important;
background-size: 240% 100% !important;
animation: novaWatchShimmer 1.05s linear infinite !important;
}
.nova-web-details-scope .watch-server-skeletons{
display: grid !important;
gap: 10px !important;
}
.nova-web-details-scope .watch-server-skeletons > div{
min-height: 66px !important;
display: grid !important;
grid-template-columns: 44px minmax(0,1fr) 28px !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 12px !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 13px !important;
background: rgba(255,255,255,.025) !important;
}
.nova-web-details-scope .watch-server-skeletons span{
width: 44px !important;
height: 44px !important;
border-radius: 11px !important;
background: rgba(255,255,255,.07) !important;
}
.nova-web-details-scope .watch-server-skeletons b{
width: 62% !important;
height: 11px !important;
border-radius: 999px !important;
background: linear-gradient(90deg,rgba(255,255,255,.06),rgba(155,77,255,.15),rgba(255,255,255,.06)) !important;
background-size: 220% 100% !important;
animation: novaWatchShimmer 1.05s linear infinite !important;
}
.nova-web-details-scope .watch-server-skeletons em,
.nova-web-details-scope .watch-loading-note > i{
width: 22px !important;
height: 22px !important;
border: 2px solid rgba(255,255,255,.14) !important;
border-top-color: var(--nova-purple) !important;
border-right-color: var(--nova-cyan) !important;
border-radius: 50% !important;
animation: novaWatchSpin .75s linear infinite !important;
}
.nova-web-details-scope .watch-loading-note{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
color: rgba(255,255,255,.52) !important;
font-size: .72rem !important;
}
.nova-web-details-scope .watch-quality-row{
margin: 12px 0 14px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.nova-web-details-scope .watch-quality-row span{
min-height: 32px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
border: 1px solid rgba(155,77,255,.30) !important;
border-radius: 10px !important;
color: rgba(255,255,255,.86) !important;
background: rgba(155,77,255,.07) !important;
font-size: .7rem !important;
font-weight: 800 !important;
}
.nova-web-details-scope .watch-empty-state{
min-height: 300px !important;
padding: 28px 18px 20px !important;
display: grid !important;
justify-items: center !important;
align-content: center !important;
text-align: center !important;
}
.nova-web-details-scope .watch-empty-illustration{
position: relative !important;
width: 128px !important;
height: 112px !important;
margin-bottom: 14px !important;
}
.nova-web-details-scope .watch-empty-cloud{
position: absolute !important;
top: 4px !important;
left: 20px !important;
width: 88px !important;
height: 58px !important;
border: 2px solid rgba(155,77,255,.62) !important;
border-radius: 36px !important;
background: rgba(155,77,255,.035) !important;
box-shadow: 0 0 28px rgba(155,77,255,.08) !important;
}
.nova-web-details-scope .watch-empty-cloud::after{
content: "×" !important;
position: absolute !important;
inset: 0 !important;
display: grid !important;
place-items: center !important;
color: #C44DFF !important;
font-size: 2rem !important;
font-weight: 300 !important;
}
.nova-web-details-scope .watch-empty-server{
position: absolute !important;
right: 27px !important;
bottom: 0 !important;
width: 74px !important;
display: grid !important;
gap: 4px !important;
}
.nova-web-details-scope .watch-empty-server i{
height: 18px !important;
border: 1px solid rgba(20,215,255,.24) !important;
border-radius: 6px !important;
background: linear-gradient(90deg,rgba(155,77,255,.10),rgba(20,215,255,.04)) !important;
}
.nova-web-details-scope .watch-empty-state h3{
margin: 0 !important;
color: #fff !important;
font-size: clamp(1.05rem,3vw,1.35rem) !important;
font-weight: 950 !important;
}
.nova-web-details-scope .watch-empty-state p{
max-width: 460px !important;
margin: 10px 0 0 !important;
color: rgba(255,255,255,.55) !important;
font-size: .78rem !important;
line-height: 1.75 !important;
}
.nova-web-details-scope .watch-retry-button{
min-height: 44px !important;
margin-top: 17px !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
color: #fff !important;
background: linear-gradient(#030307,#030307) padding-box, linear-gradient(100deg,var(--nova-pink),var(--nova-purple),var(--nova-cyan)) border-box !important;
}
@keyframes novaWatchShimmer { to { background-position-x: -220%; } }
@keyframes novaWatchSpin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
.nova-web-details-scope .cinematic-actions{
gap: 10px !important;
}
.nova-web-details-scope .cinematic-secondary-action{
min-height: 50px !important;
padding: 0 12px !important;
border-radius: 12px !important;
}
.nova-web-details-scope .secondary-action-icon{
width: 30px !important;
height: 30px !important;
background: transparent !important;
}
.nova-web-details-scope .reference-story-block.story-first{
margin-bottom: 16px !important;
padding-bottom: 16px !important;
}
.nova-web-details-scope .reference-production-card{
margin-top: 14px !important;
min-width: 0 !important;
}
.nova-web-details-scope .reference-production-company{
grid-template-columns: 52px minmax(0,1fr) !important;
}
.nova-web-details-scope .reference-production-logo{
width: 52px !important;
height: 52px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-web-details-scope .cinematic-secondary-action,
.nova-web-details-scope .cinematic-secondary-action::after,
.nova-web-details-scope .secondary-action-icon,
.nova-web-details-scope .watch-quality-skeletons i,
.nova-web-details-scope .watch-server-skeletons b,
.nova-web-details-scope .watch-server-skeletons em,
.nova-web-details-scope .watch-loading-note > i{ animation: none !important; transition: none !important; }
}
/* =========================================================
STAGE 9 — STANDALONE EPISODE COMMERCIAL RESTRUCTURE
Story → Details → Watch, exact action spacing, premium states.
========================================================= */
.nova-web-details-scope .standalone-episode-page{
--episode9-purple:#C25DFF !important;
--episode9-blue:#6D7DFF !important;
--episode9-cyan:#4BE9FF !important;
--episode9-grad:linear-gradient(105deg,#C25DFF,#6D7DFF 52%,#4BE9FF) !important;
background:#000 !important;
}
.nova-web-details-scope .standalone-episode-hero-frame{
border-color:rgba(109,125,255,.16) !important;
background:#08090e !important;
}
.nova-web-details-scope .standalone-episode-hero-content{
background:linear-gradient(145deg,#0c0d14,#07080c) !important;
}
.nova-web-details-scope .standalone-episode-hero-content::before,
.nova-web-details-scope .standalone-story-card::before{
background:var(--episode9-grad) !important;
}
.nova-web-details-scope .standalone-episode-actions{
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) !important;
gap:10px !important;
}
.nova-web-details-scope .standalone-episode-play{
color:#fff !important;
background:var(--episode9-grad) !important;
box-shadow:0 13px 30px rgba(92,70,235,.20) !important;
}
.nova-web-details-scope .standalone-episode-state-action{
min-width:0 !important;
min-height:48px !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
border:1px solid rgba(109,125,255,.22) !important;
border-radius:10px !important;
color:#EDEFFF !important;
background:#0A0B11 !important;
font:850 .70rem Tajawal,Arial,sans-serif !important;
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease !important;
}
.nova-web-details-scope .standalone-episode-state-action:active{ transform:scale(.975) !important; }
.nova-web-details-scope .standalone-episode-state-action.favorite.active{
border-color:rgba(194,93,255,.54) !important;
color:#fff !important;
background:linear-gradient(120deg,rgba(194,93,255,.22),rgba(74,34,92,.18)) !important;
box-shadow:0 0 0 1px rgba(194,93,255,.08) inset,0 10px 26px rgba(194,93,255,.10) !important;
}
.nova-web-details-scope .standalone-episode-state-action.mylist.active{
border-color:rgba(75,233,255,.48) !important;
color:#fff !important;
background:linear-gradient(120deg,rgba(109,125,255,.22),rgba(75,233,255,.09)) !important;
box-shadow:0 0 0 1px rgba(75,233,255,.06) inset,0 10px 26px rgba(75,233,255,.07) !important;
}
.nova-web-details-scope .standalone-episode-state-action.favorite.active svg{ color:#E574FF !important; }
.nova-web-details-scope .standalone-episode-state-action.mylist.active svg{ color:#82EEFF !important; }
.nova-web-details-scope .standalone-episode-tabs{
min-height:54px !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
align-items:end !important;
gap:4px !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.nova-web-details-scope .standalone-episode-tabs button{
position:relative !important;
min-height:50px !important;
border:0 !important;
color:rgba(255,255,255,.50) !important;
background:transparent !important;
font:900 .78rem Tajawal,Arial,sans-serif !important;
}
.nova-web-details-scope .standalone-episode-tabs button.active{ color:#fff !important; }
.nova-web-details-scope .standalone-episode-tabs button.active::after{
content:"" !important;
position:absolute !important;
right:18% !important;
bottom:-1px !important;
left:18% !important;
height:3px !important;
border-radius:999px !important;
background:var(--episode9-grad) !important;
}
.nova-web-details-scope .standalone-section-heading-row{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
}
.nova-web-details-scope .standalone-section-heading-row svg{ color:#A980FF !important; }
.nova-web-details-scope .standalone-episode-narrative{ display:block !important; }
.nova-web-details-scope .standalone-story-card.episode-story{ width:100% !important; }
.nova-web-details-scope .standalone-story-card.episode-story h2{ margin-top:8px !important; }
.nova-web-details-scope .standalone-episode-info-panel{
padding:20px 22px !important;
border:1px solid rgba(109,125,255,.13) !important;
border-radius:15px !important;
background:linear-gradient(145deg,#0c0e16,#07080c) !important;
}
.nova-web-details-scope .standalone-episode-info-panel header h2{
margin:3px 0 0 !important;
color:#fff !important;
font-size:1rem !important;
font-weight:950 !important;
}
.nova-web-details-scope .standalone-episode-info-grid{
margin-top:15px !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
border:1px solid rgba(255,255,255,.065) !important;
border-radius:12px !important;
overflow:hidden !important;
}
.nova-web-details-scope .standalone-episode-info-grid > div{
min-height:70px !important;
padding:12px 14px !important;
display:grid !important;
gap:4px !important;
align-content:center !important;
border-left:1px solid rgba(255,255,255,.055) !important;
border-bottom:1px solid rgba(255,255,255,.055) !important;
}
.nova-web-details-scope .standalone-episode-info-grid > div:nth-child(3n){ border-left:0 !important; }
.nova-web-details-scope .standalone-episode-info-grid > div:nth-last-child(-n/**/+3){ border-bottom:0 !important; }
.nova-web-details-scope .standalone-episode-info-grid span{ color:rgba(255,255,255,.43) !important; font-size:.60rem !important; }
.nova-web-details-scope .standalone-episode-info-grid strong{ color:#F5F6FF !important; font-size:.78rem !important; font-weight:850 !important; }
.nova-web-details-scope .standalone-episode-info-grid strong.available{ color:#8CE6BA !important; }
.nova-web-details-scope .standalone-series-return.compact{
width:auto !important;
min-height:38px !important;
margin-top:14px !important;
padding-inline:13px !important;
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
color:#C8CCE0 !important;
border:1px solid rgba(109,125,255,.15) !important;
border-radius:9px !important;
background:#0A0B11 !important;
}
.nova-web-details-scope .standalone-source-panel{
border-color:rgba(109,125,255,.13) !important;
background:linear-gradient(145deg,#0c0e16,#07080c) !important;
}
.nova-web-details-scope .standalone-source-panel > header p{ color:rgba(255,255,255,.48) !important; }
.nova-web-details-scope .standalone-source-count{
border-color:rgba(109,125,255,.16) !important;
background:#0A0B11 !important;
}
.nova-web-details-scope .standalone-watch-loading{
margin-top:15px !important;
display:grid !important;
gap:13px !important;
}
.nova-web-details-scope .standalone-quality-skeletons{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:8px !important;
}
.nova-web-details-scope .standalone-quality-skeletons span{
height:40px !important;
border:1px solid rgba(109,125,255,.09) !important;
border-radius:10px !important;
background:linear-gradient(100deg,#0b0d14 10%,#151827 46%,#0b0d14 80%) !important;
background-size:220% 100% !important;
animation:standalone-watch-shimmer 1.15s linear infinite !important;
}
.nova-web-details-scope .standalone-server-skeletons{ display:grid !important; gap:8px !important; }
.nova-web-details-scope .standalone-server-skeletons span{
height:68px !important;
border:1px solid rgba(109,125,255,.09) !important;
border-radius:11px !important;
background:linear-gradient(100deg,#0b0d14 10%,#151827 46%,#0b0d14 80%) !important;
background-size:220% 100% !important;
animation:standalone-watch-shimmer 1.15s linear infinite !important;
}
.nova-web-details-scope .standalone-watch-loading > small{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
color:rgba(255,255,255,.48) !important;
font-size:.65rem !important;
}
@keyframes standalone-watch-shimmer { to { background-position-x:-220%; } }
.nova-web-details-scope .standalone-watch-empty{
margin-top:15px !important;
min-height:190px !important;
padding:22px !important;
display:grid !important;
justify-items:center !important;
align-content:center !important;
gap:8px !important;
border:1px solid rgba(109,125,255,.12) !important;
border-radius:13px !important;
text-align:center !important;
background:radial-gradient(circle at 50% 20%,rgba(109,125,255,.07),transparent 46%),#090a10 !important;
}
.nova-web-details-scope .standalone-watch-empty-icon{
width:58px !important;
height:58px !important;
display:grid !important;
place-items:center !important;
border:1px solid rgba(109,125,255,.22) !important;
border-radius:16px !important;
color:#A980FF !important;
background:#0C0E17 !important;
}
.nova-web-details-scope .standalone-watch-empty strong{ color:#fff !important; font-size:.9rem !important; }
.nova-web-details-scope .standalone-watch-empty p{ max-width:500px !important; margin:0 !important; color:rgba(255,255,255,.48) !important; font-size:.67rem !important; line-height:1.7 !important; }
.nova-web-details-scope .standalone-watch-empty button{
min-height:38px !important;
margin-top:4px !important;
padding:0 14px !important;
display:inline-flex !important;
align-items:center !important;
gap:7px !important;
border:1px solid transparent !important;
border-radius:9px !important;
color:#fff !important;
background:linear-gradient(#090a10,#090a10) padding-box,var(--episode9-grad) border-box !important;
font:850 .66rem Tajawal,Arial,sans-serif !important;
}
.nova-web-details-scope .standalone-related-episodes.compact-navigation{
padding:18px 20px !important;
border:1px solid rgba(109,125,255,.13) !important;
border-radius:15px !important;
background:#090A10 !important;
}
.nova-web-details-scope .standalone-related-episodes.compact-navigation > header{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
margin-bottom:12px !important;
}
.nova-web-details-scope .standalone-related-episodes.compact-navigation > header svg{ color:#A980FF !important; }
.nova-web-details-scope .standalone-episode-jump-rail{
display:flex !important;
gap:8px !important;
overflow-x:auto !important;
direction:rtl !important;
scrollbar-width:none !important;
}
.nova-web-details-scope .standalone-episode-jump-rail::-webkit-scrollbar{ display:none !important; }
.nova-web-details-scope .standalone-episode-jump-rail button{
flex:0 0 auto !important;
min-width:112px !important;
min-height:48px !important;
padding:7px 11px !important;
display:grid !important;
justify-items:center !important;
align-content:center !important;
gap:3px !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:9px !important;
color:#EDEFFF !important;
background:#0D0F16 !important;
font-family:inherit !important;
}
.nova-web-details-scope .standalone-episode-jump-rail button:active{
border-color:rgba(75,233,255,.40) !important;
transform:scale(.98) !important;
}
.nova-web-details-scope .standalone-episode-jump-rail button span{ font-size:.68rem !important; font-weight:850 !important; }
.nova-web-details-scope .standalone-episode-jump-rail button small{ color:rgba(255,255,255,.40) !important; font-size:.54rem !important; }
@media(max-width:1120px){
.nova-web-details-scope .standalone-episode-actions{ grid-template-columns:1.2fr 1fr !important; }
.nova-web-details-scope .standalone-episode-play{ grid-column:1 / -1 !important; }
}
@media(max-width:820px){
.nova-web-details-scope .standalone-episode-tabs{ margin-top:2px !important; }
.nova-web-details-scope .standalone-episode-actions{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.nova-web-details-scope .standalone-episode-play{ grid-column:1 / -1 !important; }
.nova-web-details-scope .standalone-episode-info-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.nova-web-details-scope .standalone-episode-info-grid > div:nth-child(3n){ border-left:1px solid rgba(255,255,255,.055) !important; }
.nova-web-details-scope .standalone-episode-info-grid > div:nth-child(2n){ border-left:0 !important; }
.nova-web-details-scope .standalone-episode-info-grid > div:nth-last-child(-n/**/+3){ border-bottom:1px solid rgba(255,255,255,.055) !important; }
.nova-web-details-scope .standalone-episode-info-grid > div:nth-last-child(-n/**/+2){ border-bottom:0 !important; }
}
@media(max-width:560px){
.nova-web-details-scope .standalone-episode-actions{ gap:8px !important; }
.nova-web-details-scope .standalone-episode-state-action{ min-height:45px !important; font-size:.64rem !important; }
.nova-web-details-scope .standalone-episode-tabs{ min-height:50px !important; }
.nova-web-details-scope .standalone-episode-tabs button{ min-height:46px !important; font-size:.70rem !important; }
.nova-web-details-scope .standalone-episode-info-panel,
.nova-web-details-scope .standalone-related-episodes.compact-navigation{ padding:15px !important; border-radius:13px !important; }
.nova-web-details-scope .standalone-episode-info-grid > div{ min-height:64px !important; padding:10px !important; }
.nova-web-details-scope .standalone-quality-skeletons{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.nova-web-details-scope .standalone-watch-empty{ min-height:170px !important; padding:18px 14px !important; }
.nova-web-details-scope .standalone-episode-jump-rail button{ min-width:104px !important; }
}
@media(prefers-reduced-motion:reduce){
.nova-web-details-scope .standalone-quality-skeletons span,
.nova-web-details-scope .standalone-server-skeletons span,
.nova-web-details-scope .standalone-episode-state-action,
.nova-web-details-scope .standalone-episode-jump-rail button{ animation:none!important; transition:none!important; }
}
/* Stage 9 active favorite state marker. */
.nova-web-details-scope .favorite-icon-state{ position:relative !important; }
.nova-web-details-scope .favorite-state-check{
position:absolute !important;
right:-5px !important;
bottom:-5px !important;
width:16px !important;
height:16px !important;
display:grid !important;
place-items:center !important;
border:1px solid rgba(255,255,255,.26) !important;
border-radius:50% !important;
color:#fff !important;
background:#08090e !important;
}
.nova-web-details-scope .cinematic-secondary-action.favorite-action.active .favorite-state-check{
color:#fff !important;
border-color:rgba(75,233,255,.38) !important;
background:linear-gradient(135deg,#C25DFF,#6D7DFF 55%,#4BE9FF) !important;
}
.nova-web-details-scope .compact-series-story{ margin-top:12px !important; }
/* =========================================================
Nova+ details surfaces — pure black policy
Requested visual rule: all non-media detail surfaces use #000000 only.
Hero/poster imagery and Nova accent controls remain untouched.
========================================================= */
.nova-web-details-scope,
.nova-web-details-scope .nova-app,
.nova-web-details-scope .details-app,
.nova-web-details-scope .cinematic-details-page{
--nova-bg-master: #000000 !important;
--nova-surface-dark: #000000 !important;
--nova-surface-card: #000000 !important;
--nova-surface-hover: #000000 !important;
--details-panel: #000000 !important;
--details-panel-soft: #000000 !important;
}
.nova-web-details-scope .details-app,
.nova-web-details-scope .details-page-shell,
.nova-web-details-scope .cinematic-details-page,
.nova-web-details-scope .cinematic-details-content,
.nova-web-details-scope .cinematic-desktop-content,
.nova-web-details-scope .cinematic-mobile-content,
.nova-web-details-scope .reference-wide-details-grid,
.nova-web-details-scope .reference-desktop-grid,
.nova-web-details-scope .reference-primary-column,
.nova-web-details-scope .reference-side-column,
.nova-web-details-scope .reference-panel,
.nova-web-details-scope .reference-watch-panel,
.nova-web-details-scope .reference-info-panel,
.nova-web-details-scope .reference-related-panel,
.nova-web-details-scope .reference-production-card,
.nova-web-details-scope .reference-production-logo,
.nova-web-details-scope .nova-content-section,
.nova-web-details-scope .episode-panel,
.nova-web-details-scope .watch-options-section,
.nova-web-details-scope .standalone-episode-page,
.nova-web-details-scope .standalone-episode-hero-frame,
.nova-web-details-scope .standalone-episode-media,
.nova-web-details-scope .standalone-episode-hero-content,
.nova-web-details-scope .standalone-episode-body,
.nova-web-details-scope .standalone-episode-narrative,
.nova-web-details-scope .standalone-story-card,
.nova-web-details-scope .standalone-related-episodes,
.nova-web-details-scope .standalone-navigation-card,
.nova-web-details-scope .nova-channel-details,
.nova-web-details-scope .channel-detail-content,
.nova-web-details-scope .channel-detail-panel{
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
}
.nova-web-details-scope .reference-season-tabs button,
.nova-web-details-scope .reference-season-tabs button.active,
.nova-web-details-scope .reference-episode-card,
.nova-web-details-scope .reference-episode-card:hover,
.nova-web-details-scope .watch-server-skeletons > div,
.nova-web-details-scope .server-option,
.nova-web-details-scope .server-card,
.nova-web-details-scope .server-row,
.nova-web-details-scope .quality-chip,
.nova-web-details-scope .quality-chip.active,
.nova-web-details-scope .standalone-episode-meta span,
.nova-web-details-scope .cinematic-secondary-action,
.nova-web-details-scope .cinematic-secondary-action.active,
.nova-web-details-scope .secondary-action-icon,
.nova-web-details-scope .reference-production-company,
.nova-web-details-scope .reference-promo-card{
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
}
/* Keep media itself visible; only its empty/fallback canvas is pure black. */
.nova-web-details-scope .related-poster-shell,
.nova-web-details-scope .reference-related-card img,
.nova-web-details-scope .reference-episode-thumb,
.nova-web-details-scope .standalone-episode-media img,
.nova-web-details-scope .cinematic-details-backdrop-shell{
background-color: #000000 !important;
}
/* Anime semantic details: keep the existing details architecture, only allow
multi-value taxonomy and character labels to breathe inside the native grid. */
.nova-web-details-scope .reference-info-grid > .reference-anime-genres{
grid-column: span 2 !important;
}
.nova-web-details-scope .reference-info-grid > .reference-anime-genres dd{
overflow: visible !important;
white-space: normal !important;
line-height: 1.55 !important;
text-overflow: clip !important;
}
.nova-web-details-scope .reference-anime-characters .anime-character-card small{
white-space: normal !important;
line-height: 1.35 !important;
}
@media (max-width: 680px) {
.nova-web-details-scope .reference-info-grid > .reference-anime-genres{
grid-column: 1 / -1 !important;
}
}
/* Anime semantic hero facts: same NOVA+ details palette and surface language. */
.nova-web-details-scope .anime-hero-facts{
width: min(780px, 100%) !important;
margin: 14px 0 0 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.nova-web-details-scope .anime-hero-facts > div{
min-width: 0 !important;
padding: 9px 11px !important;
display: grid !important;
gap: 4px !important;
border: 1px solid var(--oscar-border) !important;
border-radius: 9px !important;
background: var(--oscar-bg) !important;
backdrop-filter: blur(10px) !important;
}
.nova-web-details-scope .anime-hero-facts dt,
.nova-web-details-scope .anime-hero-facts dd{
margin: 0 !important;
}
.nova-web-details-scope .anime-hero-facts dt{
color: var(--oscar-muted) !important;
font-size: .62rem !important;
font-weight: 750 !important;
}
.nova-web-details-scope .anime-hero-facts dd{
overflow: hidden !important;
color: var(--oscar-text) !important;
font-size: .76rem !important;
font-weight: 850 !important;
line-height: 1.45 !important;
text-overflow: ellipsis !important;
}
.nova-web-details-scope .anime-hero-facts-wide{
grid-column: 1 / -1 !important;
}
.nova-web-details-scope .anime-hero-facts-wide dd{
white-space: normal !important;
}
@media (max-width: 820px) {
.nova-web-details-scope .anime-hero-facts{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
.nova-web-details-scope .anime-hero-facts > div{
padding: 7px 9px !important;
border-radius: 8px !important;
}
.nova-web-details-scope .anime-hero-facts dt{
font-size: .56rem !important;
}
.nova-web-details-scope .anime-hero-facts dd{
font-size: .68rem !important;
}
}
/* Final freeze — direction must win over legacy RTL presentation rules. */
.nova-web-details-scope .details-app .reference-story-block .reference-details-story.nova-directional-text[dir="ltr"],
.nova-web-details-scope .details-app .details-standard-title h1[dir="ltr"],
.nova-web-details-scope .details-app .cinematic-title[dir="ltr"]{
direction:ltr !important;
text-align:left !important;
unicode-bidi:plaintext !important;
}
.nova-web-details-scope .details-app .reference-story-block .reference-details-story.nova-directional-text[dir="rtl"],
.nova-web-details-scope .details-app .details-standard-title h1[dir="rtl"],
.nova-web-details-scope .details-app .cinematic-title[dir="rtl"]{
direction:rtl !important;
text-align:right !important;
unicode-bidi:plaintext !important;
}
/* ============================================================
NOVA+ v124 — curated section polish + catalog filter sheets
Scoped to RailCatalogPage and All Movies/Series filters only.
============================================================ */
/* All Movies / All Series — keep current catalog layout, improve filter UX only. */
.nova-catalog-page .nova-catalog-filter-control{
flex:0 0 auto !important;
min-width:0 !important;
display:block !important;
}
.nova-catalog-page .nova-catalog-filter-control > .nova-catalog-select-card{
width:100% !important;
min-width:clamp(136px,34vw,190px) !important;
height:64px !important;
padding:8px 12px !important;
border:1px solid rgba(255,255,255,.11) !important;
border-radius:14px !important;
background:rgba(8,9,14,.88) !important;
color:#fff !important;
display:grid !important;
grid-template-columns:22px minmax(0,1fr) 16px !important;
grid-template-rows:auto auto !important;
column-gap:8px !important;
align-items:center !important;
text-align:right !important;
box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
}
.nova-catalog-page .nova-catalog-filter-control > .nova-catalog-select-card > .oscar-icon:first-child{
grid-row:1 / 3 !important;
color:rgba(255,255,255,.72) !important;
}
.nova-catalog-page .nova-catalog-filter-control > .nova-catalog-select-card > .oscar-icon:last-child{
grid-column:3 !important;
grid-row:1 / 3 !important;
color:rgba(255,255,255,.42) !important;
}
.nova-catalog-page .nova-catalog-filter-control > .nova-catalog-select-card > span{
grid-column:2 !important;
grid-row:1 !important;
color:rgba(255,255,255,.50) !important;
font-size:.62rem !important;
font-weight:800 !important;
white-space:nowrap !important;
}
.nova-catalog-page .nova-catalog-filter-control > .nova-catalog-select-card > strong{
grid-column:2 !important;
grid-row:2 !important;
max-width:100% !important;
color:#fff !important;
font-size:.76rem !important;
font-weight:900 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
.nova-catalog-page .nova-catalog-filter-control > .nova-catalog-select-card.active{
border-color:transparent !important;
background:linear-gradient(#08090e,#08090e) padding-box,linear-gradient(105deg,#db35df,#8d50ff,#21c7ff) border-box !important;
box-shadow:0 10px 26px rgba(103,71,255,.13) !important;
}
.nova-catalog-page .nova-catalog-reset-filter{
position:relative !important;
}
.nova-catalog-page .nova-catalog-reset-filter > span{
position:absolute !important;
top:-5px !important;
inset-inline-start:-4px !important;
min-width:17px !important;
height:17px !important;
padding:0 4px !important;
border-radius:999px !important;
display:grid !important;
place-items:center !important;
background:linear-gradient(135deg,#d83ae2,#7756ff,#20c9ff) !important;
color:#fff !important;
font-size:.55rem !important;
font-weight:950 !important;
box-shadow:0 0 0 2px #000 !important;
}
.nova-filter-sheet-backdrop{
position:fixed !important;
z-index:9999 !important;
inset:0 !important;
padding:16px !important;
padding-bottom:calc(16px + var(--safe-bottom,0px)) !important;
display:flex !important;
align-items:flex-end !important;
justify-content:center !important;
background:rgba(0,0,0,.68) !important;
backdrop-filter:blur(8px) !important;
opacity:0 !important;
transition:opacity .18s ease !important;
}
.nova-filter-sheet-backdrop.open{opacity:1 !important;}
.nova-filter-sheet{
width:min(100%,560px) !important;
max-height:min(76dvh,650px) !important;
overflow:hidden !important;
border:1px solid rgba(255,255,255,.12) !important;
border-radius:24px !important;
background:linear-gradient(180deg,rgba(24,25,31,.99),rgba(10,11,16,.995)) !important;
box-shadow:0 -16px 60px rgba(0,0,0,.58) !important;
transform:translateY(24px) scale(.985) !important;
transition:transform .2s cubic-bezier(.2,.8,.2,1) !important;
}
.nova-filter-sheet-backdrop.open .nova-filter-sheet{transform:translateY(0) scale(1) !important;}
.nova-filter-sheet > header{
min-height:76px !important;
padding:14px 16px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.nova-filter-sheet > header small{
display:block !important;
margin-bottom:3px !important;
color:#a66cff !important;
font-size:.56rem !important;
font-weight:950 !important;
letter-spacing:.11em !important;
}
.nova-filter-sheet > header h2{
margin:0 !important;
color:#fff !important;
font-size:1.14rem !important;
font-weight:950 !important;
}
.nova-filter-sheet > header button{
width:42px !important;
height:42px !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:50% !important;
display:grid !important;
place-items:center !important;
background:rgba(255,255,255,.04) !important;
color:#fff !important;
}
.nova-filter-sheet-options{
max-height:calc(min(76dvh,650px) - 76px) !important;
overflow:auto !important;
overscroll-behavior:contain !important;
padding:8px 14px 16px !important;
}
.nova-filter-sheet-option{
width:100% !important;
min-height:58px !important;
padding:0 8px !important;
border:0 !important;
border-bottom:1px solid rgba(255,255,255,.07) !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
background:transparent !important;
color:rgba(255,255,255,.86) !important;
text-align:right !important;
font:inherit !important;
font-size:.94rem !important;
font-weight:800 !important;
}
.nova-filter-sheet-option:last-child{border-bottom:0 !important;}
.nova-filter-sheet-option > i{
width:22px !important;
height:22px !important;
flex:0 0 22px !important;
border:2px solid rgba(255,255,255,.26) !important;
border-radius:50% !important;
display:grid !important;
place-items:center !important;
}
.nova-filter-sheet-option.active{color:#fff !important;}
.nova-filter-sheet-option.active > i{
border-color:#24bfff !important;
box-shadow:inset 0 0 0 5px #15171d,0 0 0 1px rgba(135,79,255,.55) !important;
background:linear-gradient(135deg,#df39df,#7954ff,#1ec8ff) !important;
}
/* Curated section pages — editorial presentation, not the All catalog browser. */
.rail-catalog-app{
--rail-edge:clamp(14px,3.5vw,26px) !important;
min-height:100dvh !important;
background:#000 !important;
}
.rail-catalog-header{
min-height:calc(88px + var(--safe-top,0px)) !important;
padding:var(--safe-top,0px) var(--rail-edge) 12px !important;
grid-template-columns:46px minmax(0,1fr) 46px !important;
gap:12px !important;
background:linear-gradient(180deg,rgba(0,0,0,.99) 0%,rgba(0,0,0,.94) 64%,rgba(0,0,0,.72) 84%,rgba(0,0,0,0) 100%) !important;
border-bottom:0 !important;
backdrop-filter:blur(16px) !important;
}
.rail-catalog-back{
width:44px !important;
height:44px !important;
border:0 !important;
border-radius:50% !important;
background:transparent !important;
color:#fff !important;
box-shadow:none !important;
}
.rail-catalog-heading{
display:grid !important;
justify-items:center !important;
align-content:center !important;
min-width:0 !important;
text-align:center !important;
}
.rail-catalog-heading > span{
display:block !important;
color:#a86cff !important;
font-size:.62rem !important;
font-weight:950 !important;
letter-spacing:.10em !important;
line-height:1.3 !important;
}
.rail-catalog-heading h1{
margin:5px 0 0 !important;
max-width:min(100%,560px) !important;
color:#fff !important;
font-size:clamp(1.16rem,5vw,1.62rem) !important;
font-weight:950 !important;
line-height:1.32 !important;
white-space:normal !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.rail-catalog-main{
min-height:100dvh !important;
padding:calc(104px + var(--safe-top,0px)) var(--rail-edge) calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 34px) !important;
background:radial-gradient(circle at 72% -6%,rgba(128,77,255,.10),transparent 27%),#000 !important;
}
.rail-catalog-content{
width:100% !important;
max-width:1280px !important;
margin:0 auto !important;
}
.rail-catalog-summary{
min-height:42px !important;
margin:0 0 16px !important;
padding:0 2px !important;
display:flex !important;
align-items:center !important;
gap:7px !important;
color:rgba(255,255,255,.52) !important;
font-size:.68rem !important;
font-weight:700 !important;
}
.rail-catalog-summary-mark{
width:7px !important;
height:7px !important;
flex:0 0 7px !important;
border-radius:50% !important;
background:linear-gradient(135deg,#df3adf,#8350ff,#1fc9ff) !important;
box-shadow:0 0 13px rgba(126,83,255,.58) !important;
}
.rail-catalog-summary strong{
color:#fff !important;
font-size:.72rem !important;
font-weight:950 !important;
}
.rail-catalog-grid{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:24px 14px !important;
align-items:start !important;
}
.rail-catalog-grid .rail-catalog-card{
min-width:0 !important;
width:100% !important;
padding:0 !important;
text-align:right !important;
}
.rail-catalog-grid .rail-catalog-card .nova-media-art{
position:relative !important;
width:100% !important;
aspect-ratio:2 / 3 !important;
overflow:hidden !important;
border:1px solid rgba(255,255,255,.09) !important;
border-radius:16px !important;
background:#090a0e !important;
box-shadow:0 12px 32px rgba(0,0,0,.30) !important;
}
.rail-catalog-grid .rail-catalog-card .nova-media-image{
width:100% !important;
height:100% !important;
object-fit:cover !important;
transition:transform .22s ease,filter .22s ease !important;
}
.rail-catalog-grid .rail-catalog-card:active .nova-media-image{
transform:scale(1.025) !important;
filter:brightness(.86) !important;
}
.rail-catalog-grid .rail-catalog-card > strong{
margin-top:10px !important;
min-height:2.65em !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
color:#f7f7fa !important;
font-size:.82rem !important;
font-weight:900 !important;
line-height:1.45 !important;
}
.rail-catalog-grid .rail-catalog-card > small{
margin-top:3px !important;
display:block !important;
overflow:hidden !important;
color:rgba(255,255,255,.42) !important;
font-size:.64rem !important;
line-height:1.35 !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
.rail-catalog-grid .rail-catalog-card .nova-media-type,
.rail-catalog-grid .rail-catalog-card .nova-media-genre,
.rail-catalog-grid .rail-catalog-card .nova-media-quality{
border:1px solid rgba(255,255,255,.10) !important;
background:rgba(12,13,20,.88) !important;
backdrop-filter:blur(8px) !important;
box-shadow:0 5px 14px rgba(0,0,0,.20) !important;
}
.rail-catalog-grid .rail-catalog-card .nova-media-play{
opacity:0 !important;
}
.rail-catalog-rank{
position:absolute !important;
z-index:4 !important;
top:10px !important;
inset-inline-start:10px !important;
min-width:42px !important;
min-height:48px !important;
padding:5px 8px !important;
border:1px solid rgba(255,255,255,.16) !important;
border-radius:13px !important;
display:grid !important;
place-items:center !important;
align-content:center !important;
background:rgba(4,5,10,.82) !important;
backdrop-filter:blur(10px) !important;
color:#fff !important;
box-shadow:0 8px 20px rgba(0,0,0,.32) !important;
}
.rail-catalog-rank small{
color:#a974ff !important;
font-size:.48rem !important;
font-weight:950 !important;
letter-spacing:.08em !important;
line-height:1 !important;
}
.rail-catalog-rank b{
margin-top:2px !important;
font-size:1rem !important;
font-weight:950 !important;
line-height:1 !important;
}
.rail-catalog-end{
margin-top:34px !important;
border-color:rgba(255,255,255,.07) !important;
background:rgba(255,255,255,.025) !important;
color:rgba(255,255,255,.42) !important;
}
@media (min-width:720px){
.rail-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:28px 18px !important;}
}
@media (min-width:1040px){
.rail-catalog-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:30px 20px !important;}
}
@media (max-width:420px){
.rail-catalog-header{min-height:calc(82px + var(--safe-top,0px)) !important;padding-inline:12px !important;}
.rail-catalog-main{padding-top:calc(98px + var(--safe-top,0px)) !important;padding-inline:12px !important;}
.rail-catalog-grid{gap:22px 11px !important;}
.rail-catalog-grid .rail-catalog-card > strong{font-size:.78rem !important;}
.nova-filter-sheet-backdrop{padding:10px !important;padding-bottom:calc(10px + var(--safe-bottom,0px)) !important;}
.nova-filter-sheet{border-radius:22px 22px 18px 18px !important;}
}
/* NOVA+ v125 — compact curated-page geometry.
Curated rails use the original compact section-page placement: no phantom
top reservation and no second content spacer. All-catalog pages are untouched. */
html body .nova-web-page.nova-catalog-page:has(.rail-catalog-app),
html body .nova-web-page.nova-catalog-page:has(.rail-catalog-app) > .catalog-landing-main,
html body .nova-web-page.nova-catalog-page:has(.rail-catalog-app) > .catalog-landing-main > .catalog-landing-page,
html body .catalog-landing-page:has(> [data-nova-catalog-content] > .rail-catalog-app),
html body [data-nova-catalog-content]:has(> .rail-catalog-app),
html body .rail-catalog-app {
margin-top:0 !important;
padding-top:0 !important;
transform:none !important;
}
html body .rail-catalog-header {
position:fixed !important;
z-index:190 !important;
top:0 !important;
right:0 !important;
left:0 !important;
min-height:calc(68px + var(--safe-top,0px)) !important;
height:auto !important;
margin:0 !important;
padding:var(--safe-top,0px) 16px 8px !important;
grid-template-columns:44px minmax(0,1fr) 44px !important;
gap:12px !important;
align-items:center !important;
background:linear-gradient(to bottom,rgba(0,0,0,.96),rgba(0,0,0,.82),rgba(0,0,0,.28),transparent) !important;
border-bottom:0 !important;
box-shadow:none !important;
backdrop-filter:blur(16px) !important;
-webkit-backdrop-filter:blur(16px) !important;
}
html body .rail-catalog-heading > span {
font-size:.58rem !important;
letter-spacing:.12em !important;
line-height:1.2 !important;
}
html body .rail-catalog-heading h1 {
margin:3px 0 0 !important;
max-width:100% !important;
font-size:clamp(1rem,4.2vw,1.34rem) !important;
line-height:1.28 !important;
white-space:nowrap !important;
display:block !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
html body .rail-catalog-main {
min-height:100dvh !important;
margin:0 !important;
padding:calc(82px + var(--safe-top,0px)) var(--rail-edge,14px) calc(var(--bottom-nav-h,76px) + var(--safe-bottom,0px) + 28px) !important;
}
html body .rail-catalog-summary {
display:none !important;
}
@media (max-width:420px){
html body .rail-catalog-header {
min-height:calc(66px + var(--safe-top,0px)) !important;
padding:var(--safe-top,0px) 12px 7px !important;
}
html body .rail-catalog-main {
padding-top:calc(78px + var(--safe-top,0px)) !important;
padding-inline:12px !important;
}
}
/* NOVA+ v126 — curated section header follows the exact shared reactive-header contract.
Fixed at the top; transparent at rest; premium black glass after vertical scroll. */
html body .rail-catalog-header {
position:fixed !important;
z-index:190 !important;
top:0 !important;
right:0 !important;
left:0 !important;
width:100% !important;
height:calc(var(--nova-app-header-h,58px) + var(--safe-top,env(safe-area-inset-top,0px))) !important;
min-height:calc(var(--nova-app-header-h,58px) + var(--safe-top,env(safe-area-inset-top,0px))) !important;
margin:0 !important;
padding:var(--safe-top,env(safe-area-inset-top,0px)) clamp(14px,3vw,24px) 0 !important;
grid-template-columns:44px minmax(0,1fr) 44px !important;
gap:12px !important;
align-items:center !important;
background:transparent !important;
border-bottom:1px solid transparent !important;
box-shadow:none !important;
backdrop-filter:blur(0) saturate(1) !important;
-webkit-backdrop-filter:blur(0) saturate(1) !important;
transition:
background-color .26s var(--nova-header-ease,cubic-bezier(.2,.78,.2,1)),
background .26s var(--nova-header-ease,cubic-bezier(.2,.78,.2,1)),
backdrop-filter .26s var(--nova-header-ease,cubic-bezier(.2,.78,.2,1)),
border-color .26s var(--nova-header-ease,cubic-bezier(.2,.78,.2,1)),
box-shadow .26s var(--nova-header-ease,cubic-bezier(.2,.78,.2,1)) !important;
}
html.sg-header-scrolled body .rail-catalog-header {
background:var(--nova-header-glass,rgba(0,0,0,.74)) !important;
border-bottom-color:var(--nova-header-line,rgba(255,255,255,.065)) !important;
box-shadow:0 12px 34px rgba(0,0,0,.28) !important;
backdrop-filter:blur(20px) saturate(1.12) !important;
-webkit-backdrop-filter:blur(20px) saturate(1.12) !important;
}
html body .rail-catalog-heading {
align-self:stretch !important;
align-content:center !important;
}
html body .rail-catalog-heading > span {
font-size:.56rem !important;
letter-spacing:.12em !important;
line-height:1.1 !important;
}
html body .rail-catalog-heading h1 {
margin:3px 0 0 !important;
font-size:clamp(1rem,4.2vw,1.32rem) !important;
line-height:1.18 !important;
}
html body .rail-catalog-main {
padding-top:calc(var(--nova-app-header-h,58px) + var(--safe-top,env(safe-area-inset-top,0px)) + 10px) !important;
}
@media (max-width:420px){
html body .rail-catalog-header {
height:calc(var(--nova-app-header-h,58px) + var(--safe-top,env(safe-area-inset-top,0px))) !important;
min-height:calc(var(--nova-app-header-h,58px) + var(--safe-top,env(safe-area-inset-top,0px))) !important;
padding:var(--safe-top,env(safe-area-inset-top,0px)) 12px 0 !important;
}
html body .rail-catalog-main {
padding-top:calc(var(--nova-app-header-h,58px) + var(--safe-top,env(safe-area-inset-top,0px)) + 8px) !important;
}
}
/* NOVA+ v127 — curated header viewport portal.
The header is mounted as a direct #nova-app child, outside the scrolling route
surface, so Android WebView cannot convert it into a route-local fixed box. */
#nova-app > #nova-rail-catalog-header.rail-catalog-header {
position: fixed !important;
z-index: 2147482200 !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
transform: none !important;
translate: none !important;
contain: none !important;
will-change: auto !important;
}
html.sg-header-scrolled #nova-app > #nova-rail-catalog-header.rail-catalog-header {
background: var(--nova-header-glass,rgba(0,0,0,.78)) !important;
border-bottom-color: var(--nova-header-line,rgba(255,255,255,.065)) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
backdrop-filter: blur(20px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}
/* NOVA+ v128 — curated section header identity/layout.
Right: back arrow + section title. Left: NOVA+ brand mark.
No duplicate SPACE GATE NOVA text line. Existing fixed/reactive behavior stays intact. */
html body .rail-catalog-header {
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
direction:rtl !important;
}
html body .rail-catalog-leading {
min-width:0 !important;
flex:1 1 auto !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:7px !important;
direction:rtl !important;
}
html body .rail-catalog-leading .rail-catalog-back {
flex:0 0 42px !important;
width:42px !important;
height:42px !important;
margin:0 !important;
}
html body .rail-catalog-leading h1 {
min-width:0 !important;
margin:0 !important;
padding:0 !important;
color:#fff !important;
font-size:clamp(1.08rem,4.6vw,1.42rem) !important;
font-weight:950 !important;
line-height:1.18 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-align:right !important;
}
html body .rail-catalog-offline {
display:none !important;
}
html body .rail-catalog-brand {
position:relative !important;
flex:0 0 104px !important;
width:104px !important;
height:38px !important;
overflow:hidden !important;
display:block !important;
margin-inline-start:4px !important;
pointer-events:none !important;
}
html body .rail-catalog-brand > img {
position:absolute !important;
width:145px !important;
height:auto !important;
max-width:none !important;
max-height:none !important;
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) scale(1.08) !important;
transform-origin:center !important;
object-fit:contain !important;
display:block !important;
}
html body .rail-catalog-heading,
html body .rail-catalog-header-spacer {
display:none !important;
}
@media (max-width:420px){
html body .rail-catalog-header {
gap:8px !important;
}
html body .rail-catalog-leading {
gap:4px !important;
}
html body .rail-catalog-leading .rail-catalog-back {
flex-basis:40px !important;
width:40px !important;
height:40px !important;
}
html body .rail-catalog-leading h1 {
font-size:clamp(1rem,4.45vw,1.25rem) !important;
}
html body .rail-catalog-brand {
flex-basis:92px !important;
width:92px !important;
height:34px !important;
margin-inline-start:0 !important;
}
html body .rail-catalog-brand > img {
width:132px !important;
}
}
/* ===== source: nova-stage15-2-ui-hotfix.css ===== */
/* Stage 15.2 — compact Android filter sheet and exact black catalog controls. */
.nova-catalog-filter-control {
position: relative !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card,
.nova-catalog-select-card,
.nova-catalog-reset-filter {
background: #000000 !important;
}
.nova-catalog-filter-pending .nova-card-grid,
.nova-catalog-filter-pending .sg-anime-commercial-grid,
.nova-catalog-filter-pending .sg-wrestling-media-grid {
pointer-events: none !important;
}
.nova-filter-sheet-backdrop {
z-index: 2147483000 !important;
padding: 8px !important;
padding-top: max(8px, var(--safe-top, env(safe-area-inset-top, 0px))) !important;
padding-bottom: max(8px, var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
background: rgba(0, 0, 0, .78) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.nova-filter-sheet {
width: min(100%, 520px) !important;
max-height: min(88dvh, 720px) !important;
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) auto !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, .14) !important;
border-radius: 16px !important;
background: #000000 !important;
box-shadow: 0 -12px 42px rgba(0, 0, 0, .72) !important;
}
.nova-filter-sheet > header {
min-height: 56px !important;
padding: 8px 10px 8px 14px !important;
border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
background: #000000 !important;
}
.nova-filter-sheet > header small {
margin-bottom: 1px !important;
font-size: .48rem !important;
}
.nova-filter-sheet > header h2 {
font-size: .94rem !important;
}
.nova-filter-sheet > header button {
width: 34px !important;
height: 34px !important;
background: #000000 !important;
}
.nova-filter-sheet-options {
min-height: 0 !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
padding: 4px 10px !important;
background: #000000 !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(90, 196, 255, .55) #000000 !important;
}
.nova-filter-sheet-option {
min-height: 42px !important;
padding: 0 6px !important;
border-bottom-color: rgba(255, 255, 255, .08) !important;
background: #000000 !important;
font-size: .80rem !important;
font-weight: 780 !important;
}
.nova-filter-sheet-option > i {
width: 18px !important;
height: 18px !important;
flex-basis: 18px !important;
border-width: 1.5px !important;
}
.nova-filter-sheet-option.active > i {
box-shadow: inset 0 0 0 4px #000000, 0 0 0 1px rgba(135, 79, 255, .55) !important;
}
.nova-filter-sheet > footer {
min-height: 56px !important;
padding: 7px 10px !important;
display: grid !important;
grid-template-columns: minmax(76px, .38fr) minmax(150px, 1fr) !important;
gap: 8px !important;
border-top: 1px solid rgba(255, 255, 255, .10) !important;
background: #000000 !important;
}
.nova-filter-sheet > footer button {
min-height: 40px !important;
border-radius: 9px !important;
color: #ffffff !important;
font: inherit !important;
font-size: .78rem !important;
font-weight: 900 !important;
}
.nova-filter-sheet-cancel {
border: 1px solid rgba(255, 255, 255, .16) !important;
background: #000000 !important;
}
.nova-filter-sheet-apply {
border: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
background: linear-gradient(100deg, #ef43d4, #8655ff, #20c8ff) !important;
}
.nova-filter-sheet-apply small {
color: #ffffff !important;
font-size: .68rem !important;
}
@media (max-height: 620px) {
.nova-filter-sheet { max-height: 94dvh !important; }
.nova-filter-sheet-option { min-height: 38px !important; }
.nova-filter-sheet > header,
.nova-filter-sheet > footer { min-height: 50px !important; }
}
/* ===== source: nova-stage15-3-live-filter.css ===== */
/* Stage 15.3 — exact compact catalog controls and non-blocking live results. */
.nova-catalog-filter-strip,
.reference-filter-strip {
align-items: center !important;
gap: 6px !important;
}
.nova-catalog-filter-control {
flex: 0 0 auto !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card,
.nova-catalog-filter-strip > .nova-catalog-select-card {
height: 34px !important;
min-height: 34px !important;
min-width: 84px !important;
max-width: 126px !important;
padding-inline: 8px !important;
grid-template-columns: 16px minmax(42px, 1fr) 13px !important;
gap: 5px !important;
border: 1px solid rgba(255, 255, 255, .13) !important;
border-radius: 8px !important;
background: #000000 !important;
color: rgba(255, 255, 255, .72) !important;
box-shadow: none !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card > span,
.nova-catalog-filter-strip > .nova-catalog-select-card > span {
display: none !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card > strong,
.nova-catalog-filter-strip > .nova-catalog-select-card > strong {
overflow: hidden !important;
color: rgba(255, 255, 255, .82) !important;
font-size: .67rem !important;
font-weight: 850 !important;
line-height: 1 !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card.active,
.nova-catalog-filter-strip > .nova-catalog-select-card.active {
border-color: transparent !important;
background:
linear-gradient(#000000, #000000) padding-box,
linear-gradient(100deg, #ef43d4, #8655ff, #20c8ff) border-box !important;
color: #ffffff !important;
}
[data-catalog-results] {
position: relative !important;
min-height: 45vh !important;
contain: layout paint !important;
}
.nova-catalog-filter-pending [data-catalog-results]::before {
content: "" !important;
position: absolute !important;
z-index: 2147482000 !important;
top: 0 !important;
right: 0 !important;
width: 38% !important;
height: 2px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, transparent, #e941d7, #7658ff, #22c9ff, transparent) !important;
box-shadow: 0 0 10px rgba(35, 201, 255, .42) !important;
animation: nova-filter-live-progress .72s linear infinite !important;
pointer-events: none !important;
}
.nova-catalog-filter-pending .nova-card-grid {
pointer-events: auto !important;
opacity: 1 !important;
filter: none !important;
}
@keyframes nova-filter-live-progress {
from { transform: translateX(270%); }
to { transform: translateX(-270%); }
}
@media (min-width: 391px) and (max-width: 820px) {
.nova-catalog-filter-control > .nova-catalog-select-card,
.nova-catalog-filter-strip > .nova-catalog-select-card {
min-width: 94px !important;
max-width: 132px !important;
}
}
@media (max-width: 390px) {
.nova-catalog-filter-control > .nova-catalog-select-card,
.nova-catalog-filter-strip > .nova-catalog-select-card {
min-width: 82px !important;
max-width: 112px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nova-catalog-filter-pending [data-catalog-results]::before {
width: 100% !important;
animation: none !important;
}
}
/* ===== source: nova-stage15-4-original-filter-parity.css ===== */
/* Stage 15.4 — restore the original MAUI CatalogBrowser filter geometry. */
.nova-catalog-filter-control {
display: contents !important;
}
@media (max-width: 1000px) {
.nova-catalog-filter-strip {
width: 100% !important;
height: 42px !important;
gap: 7px !important;
align-items: center !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card,
.nova-catalog-filter-strip > .nova-catalog-select-card {
position: relative !important;
flex: 0 0 auto !important;
width: auto !important;
height: var(--nova-catalog-control-h, 35px) !important;
min-height: var(--nova-catalog-control-h, 35px) !important;
min-width: 88px !important;
max-width: 132px !important;
padding: 0 8px !important;
display: grid !important;
grid-template-columns: 16px minmax(38px, auto) 13px !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border: 1px solid var(--nova-catalog-line, rgba(132, 145, 176, .20)) !important;
border-radius: 7px !important;
background: #000000 !important;
color: rgba(255, 255, 255, .72) !important;
box-shadow: none !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card > span,
.nova-catalog-filter-strip > .nova-catalog-select-card > span {
display: none !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card > strong,
.nova-catalog-filter-strip > .nova-catalog-select-card > strong {
min-width: 0 !important;
overflow: hidden !important;
color: rgba(255, 255, 255, .82) !important;
font-size: .68rem !important;
font-weight: 760 !important;
line-height: 1 !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card > svg:first-child,
.nova-catalog-filter-strip > .nova-catalog-select-card > svg:first-child {
width: 15px !important;
height: 15px !important;
color: rgba(255, 255, 255, .60) !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card.active,
.nova-catalog-filter-strip > .nova-catalog-select-card.active {
border-color: transparent !important;
background:
linear-gradient(#000000, #000000) padding-box,
var(--nova-catalog-active-border, linear-gradient(100deg, #f04ad8, #9b4dff, #14d7ff)) border-box !important;
color: #ffffff !important;
}
}
@media (max-width: 420px) {
.nova-catalog-filter-control > .nova-catalog-select-card,
.nova-catalog-filter-strip > .nova-catalog-select-card {
min-width: 82px !important;
max-width: 118px !important;
padding-inline: 7px !important;
}
.nova-catalog-filter-control > .nova-catalog-select-card > strong,
.nova-catalog-filter-strip > .nova-catalog-select-card > strong {
font-size: .65rem !important;
}
}
@media (max-width: 360px) {
.nova-catalog-filter-control > .nova-catalog-select-card,
.nova-catalog-filter-strip > .nova-catalog-select-card {
min-width: 78px !important;
}
}
/* ===== source: nova-experience-v2.css ===== */
/* NOVA Experience V2 — intentionally isolated from the legacy presentation stack. */
[data-nova-experience="v2"].nx2-page {
--nx2-bg: #06070a;
--nx2-panel: rgba(255,255,255,.055);
--nx2-line: rgba(255,255,255,.10);
--nx2-text: #f7f8fb;
--nx2-muted: rgba(235,239,247,.68);
--nx2-soft: rgba(235,239,247,.48);
--nx2-accent: #ffffff;
position: relative;
min-height: 100vh;
overflow: hidden;
background:
radial-gradient(circle at 74% 8%, rgba(79,70,229,.11), transparent 31rem),
radial-gradient(circle at 18% 32%, rgba(14,165,233,.07), transparent 27rem),
linear-gradient(180deg, #050609 0%, #080a0f 42%, #06070a 100%);
color: var(--nx2-text);
padding-bottom: max(92px, env(safe-area-inset-bottom));
isolation: isolate;
}
[data-nova-experience="v2"]::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 72%);
}
[data-nova-experience="v2"] .nx2-page-intro {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
padding: 26px clamp(18px,4.2vw,70px) 8px;
}
[data-nova-experience="v2"] .nx2-page-intro > div { min-width: 0; }
[data-nova-experience="v2"] .nx2-page-intro span {
display: block;
margin-bottom: 6px;
font-size: 10px;
font-weight: 800;
letter-spacing: .22em;
color: var(--nx2-soft);
}
[data-nova-experience="v2"] .nx2-page-intro h1 {
margin: 0;
font-size: clamp(25px,3vw,42px);
line-height: 1.08;
font-weight: 850;
}
[data-nova-experience="v2"] .nx2-page-intro p {
margin: 8px 0 0;
max-width: 680px;
color: var(--nx2-muted);
font-size: clamp(12px,1.1vw,15px);
line-height: 1.8;
}
[data-nova-experience="v2"] .nx2-discover {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 0 16px;
border: 1px solid var(--nx2-line);
border-radius: 999px;
background: rgba(255,255,255,.055);
color: var(--nx2-text);
backdrop-filter: blur(14px);
cursor: pointer;
}
[data-nova-experience="v2"] .nx2-hero {
position: relative;
height: clamp(430px,64vh,760px);
min-height: 430px;
background: #090b10;
}
[data-nova-experience="v2"] .nx2-hero-track,
[data-nova-experience="v2"] .nx2-hero-slide,
[data-nova-experience="v2"] .nx2-hero-art { position: absolute; inset: 0; }
[data-nova-experience="v2"] .nx2-hero-slide {
opacity: 0;
pointer-events: none;
transition: opacity .72s ease;
}
[data-nova-experience="v2"] .nx2-hero-slide.is-active { opacity: 1; pointer-events: auto; }
[data-nova-experience="v2"] .nx2-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
[data-nova-experience="v2"] .nx2-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(5,6,9,.22) 0%, rgba(5,6,9,.48) 37%, rgba(5,6,9,.88) 74%, #06070a 100%),
linear-gradient(0deg, #06070a 0%, rgba(6,7,10,.86) 8%, rgba(6,7,10,.12) 46%, rgba(6,7,10,.28) 100%);
}
[data-nova-experience="v2"] .nx2-hero-copy {
position: absolute;
z-index: 2;
right: clamp(20px,5vw,86px);
bottom: clamp(52px,10vh,112px);
width: min(630px,56vw);
}
[data-nova-experience="v2"] .nx2-eyebrow {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 10px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
background: rgba(5,7,11,.48);
color: rgba(255,255,255,.8);
font-size: 11px;
font-weight: 760;
backdrop-filter: blur(12px);
}
[data-nova-experience="v2"] .nx2-hero-copy h1 {
margin: 13px 0 8px;
max-width: 15ch;
font-size: clamp(38px,5.6vw,78px);
line-height: .98;
font-weight: 900;
text-wrap: balance;
text-shadow: 0 8px 34px rgba(0,0,0,.42);
}
[data-nova-experience="v2"] .nx2-hero-copy p {
margin: 13px 0 0;
max-width: 58ch;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: rgba(247,248,251,.78);
font-size: clamp(13px,1.2vw,16px);
line-height: 1.9;
}
[data-nova-experience="v2"] .nx2-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
[data-nova-experience="v2"] .nx2-hero-meta span {
padding: 4px 8px;
border-radius: 7px;
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.76);
font-size: 11px;
font-weight: 700;
}
[data-nova-experience="v2"] .nx2-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
[data-nova-experience="v2"] .nx2-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 124px;
min-height: 45px;
padding: 0 17px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 10px;
font-weight: 800;
cursor: pointer;
}
[data-nova-experience="v2"] .nx2-action--primary { background: #fff; color: #090a0d; border-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
[data-nova-experience="v2"] .nx2-action--secondary { background: rgba(8,10,14,.56); color: #fff; backdrop-filter: blur(14px); }
[data-nova-experience="v2"] .nx2-hero-dots {
position: absolute;
left: clamp(20px,4vw,70px);
bottom: 34px;
z-index: 4;
display: flex;
direction: ltr;
gap: 7px;
}
[data-nova-experience="v2"] .nx2-hero-dots button { width: 20px; height: 3px; padding: 0; border: 0; border-radius: 5px; background: rgba(255,255,255,.28); cursor: pointer; transition: width .25s ease,background .25s ease; }
[data-nova-experience="v2"] .nx2-hero-dots button.is-active { width: 38px; background: #fff; }
[data-nova-experience="v2"] .nx2-rails { padding-top: 8px; }
[data-nova-experience="v2"] .nx2-rail-section { position: relative; margin: clamp(22px,3vw,38px) 0; content-visibility: auto; contain-intrinsic-size: 360px; }
[data-nova-experience="v2"] .nx2-rail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 0 clamp(18px,4.2vw,70px) 11px;
}
[data-nova-experience="v2"] .nx2-rail-head h2 { margin: 0; font-size: clamp(18px,1.8vw,27px); line-height: 1.2; font-weight: 840; letter-spacing: -.02em; }
[data-nova-experience="v2"] .nx2-see-all {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 0;
border: 0;
background: transparent;
color: rgba(255,255,255,.55);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
[data-nova-experience="v2"] .nx2-see-all:hover { color: #fff; }
[data-nova-experience="v2"] .nx2-rail-scroll {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
overscroll-behavior-inline: contain;
scroll-snap-type: inline proximity;
padding-inline: clamp(18px,4.2vw,70px);
-webkit-overflow-scrolling: touch;
}
[data-nova-experience="v2"] .nx2-rail-scroll::-webkit-scrollbar { display: none; }
[data-nova-experience="v2"] .nx2-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(142px,14vw,212px); gap: clamp(10px,1vw,16px); width: max-content; }
[data-nova-experience="v2"] .nx2-rail--landscape { grid-auto-columns: clamp(245px,25vw,385px); }
[data-nova-experience="v2"] .nx2-rail--collection { grid-auto-columns: clamp(255px,26vw,405px); }
[data-nova-experience="v2"] .nx2-rail--ranked { grid-auto-columns: clamp(160px,15.8vw,238px); gap: clamp(14px,1.4vw,22px); }
[data-nova-experience="v2"] .nx2-card {
position: relative;
display: block;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-align: right;
scroll-snap-align: start;
cursor: pointer;
}
[data-nova-experience="v2"] .nx2-card-art {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 2/3;
border: 1px solid rgba(255,255,255,.075);
border-radius: clamp(9px,1vw,14px);
background: #11141a;
box-shadow: 0 12px 32px rgba(0,0,0,.16);
transform: translateZ(0);
transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-art,
[data-nova-experience="v2"] .nx2-card--collection .nx2-card-art { aspect-ratio: 16/9; }
[data-nova-experience="v2"] .nx2-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .38s ease,filter .25s ease; }
[data-nova-experience="v2"] .nx2-card-vignette { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.52),transparent 42%); opacity: .6; }
[data-nova-experience="v2"] .nx2-card-play {
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(8,10,14,.64);
border: 1px solid rgba(255,255,255,.22);
color: #fff;
backdrop-filter: blur(10px);
opacity: 0;
transform: scale(.82);
transition: opacity .2s ease,transform .2s ease;
}
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-art,
[data-nova-experience="v2"] .nx2-card:focus-visible .nx2-card-art { transform: translateY(-4px) scale(1.018); border-color: rgba(255,255,255,.2); box-shadow: 0 18px 42px rgba(0,0,0,.34); }
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-art img { transform: scale(1.035); }
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-play,
[data-nova-experience="v2"] .nx2-card:focus-visible .nx2-card-play { opacity: 1; transform: scale(1); }
[data-nova-experience="v2"] .nx2-card-copy { display: grid; gap: 4px; padding: 8px 3px 0; }
[data-nova-experience="v2"] .nx2-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 780; }
[data-nova-experience="v2"] .nx2-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx2-soft); font-size: 10.5px; }
[data-nova-experience="v2"] .nx2-card--collection .nx2-card-copy strong { font-size: 14px; }
[data-nova-experience="v2"] .nx2-rank {
position: absolute;
right: -3px;
bottom: -17px;
z-index: 3;
font-size: clamp(58px,6vw,88px);
line-height: .78;
font-weight: 950;
letter-spacing: -.08em;
color: #0b0d12;
-webkit-text-stroke: 2px rgba(255,255,255,.85);
filter: drop-shadow(0 7px 12px rgba(0,0,0,.45));
}
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-copy { padding-right: 8px; }
[data-nova-experience="v2"] .nx2-local-slot:empty { display: none; }
[data-nova-experience="v2"] .nx2-local-slot:not(:empty) { margin: clamp(22px,3vw,38px) 0; }
[data-nova-experience="v2"] .nx2-local-slot .continue-watching-section { margin: 0; padding: 0; background: transparent; }
[data-nova-experience="v2"] .nx2-local-slot .shahid-section-heading { padding-inline: clamp(18px,4.2vw,70px); }
[data-nova-experience="v2"] .nx2-local-slot .horizontal-scroll-shell { padding-inline: clamp(18px,4.2vw,70px); overflow-x: auto; scrollbar-width: none; }
[data-nova-experience="v2"] .nx2-local-slot .horizontal-scroll-shell::-webkit-scrollbar { display: none; }
[data-nova-experience="v2"] .nx2-skeleton { padding: 20px clamp(18px,4.2vw,70px); }
[data-nova-experience="v2"] .nx2-skeleton > span { display: block; width: 190px; height: 20px; margin-bottom: 14px; border-radius: 8px; background: rgba(255,255,255,.07); animation: nx2Pulse 1.2s ease-in-out infinite alternate; }
[data-nova-experience="v2"] .nx2-skeleton > div { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(142px,14vw,212px); gap: 12px; overflow: hidden; }
[data-nova-experience="v2"] .nx2-skeleton i { display: block; aspect-ratio: 2/3; border-radius: 12px; background: rgba(255,255,255,.055); animation: nx2Pulse 1.2s ease-in-out infinite alternate; }
[data-nova-experience="v2"] .nx2-sentinel { display: grid; justify-items: center; gap: 8px; min-height: 110px; padding: 32px 20px; color: var(--nx2-soft); font-size: 10px; }
[data-nova-experience="v2"] .nx2-sentinel > span { width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.7); border-radius: 50%; opacity: .28; }
[data-nova-experience="v2"] .nx2-sentinel.is-loading > span { opacity: 1; animation: nx2Spin .75s linear infinite; }
[data-nova-experience="v2"] .nx2-sentinel[hidden] { display: none; }
@keyframes nx2Spin { to { transform: rotate(360deg); } }
@keyframes nx2Pulse { from { opacity: .55; } to { opacity: 1; } }
@media (max-width: 760px) {
[data-nova-experience="v2"] .nx2-hero { height: min(69vh,630px); min-height: 490px; }
[data-nova-experience="v2"] .nx2-hero-art img { object-position: center 16%; }
[data-nova-experience="v2"] .nx2-hero-shade { background: linear-gradient(0deg,#06070a 0%,rgba(6,7,10,.9) 20%,rgba(6,7,10,.08) 60%,rgba(6,7,10,.28) 100%); }
[data-nova-experience="v2"] .nx2-hero-copy { right: 18px; left: 18px; bottom: 42px; width: auto; }
[data-nova-experience="v2"] .nx2-hero-copy h1 { max-width: 13ch; font-size: clamp(34px,10vw,58px); }
[data-nova-experience="v2"] .nx2-hero-copy p { -webkit-line-clamp: 2; font-size: 12px; line-height: 1.7; max-width: 90%; }
[data-nova-experience="v2"] .nx2-hero-dots { left: 18px; bottom: 18px; }
[data-nova-experience="v2"] .nx2-page-intro { padding-top: 16px; align-items: center; }
[data-nova-experience="v2"] .nx2-page-intro p { display: none; }
[data-nova-experience="v2"] .nx2-discover { min-height: 38px; padding: 0 13px; }
[data-nova-experience="v2"] .nx2-rail { grid-auto-columns: 34vw; gap: 10px; }
[data-nova-experience="v2"] .nx2-rail--landscape { grid-auto-columns: 65vw; }
[data-nova-experience="v2"] .nx2-rail--collection { grid-auto-columns: 70vw; }
[data-nova-experience="v2"] .nx2-rail--ranked { grid-auto-columns: 39vw; }
[data-nova-experience="v2"] .nx2-card-play { display: none; }
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-art { transform: none; }
[data-nova-experience="v2"] .nx2-rail-section { contain-intrinsic-size: 300px; margin-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
[data-nova-experience="v2"] *,
[data-nova-experience="v2"] *::before,
[data-nova-experience="v2"] *::after { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
}
/* V2.6 strict-cutover components: these classes are unique to Experience V2. */
[data-nova-experience="v2"] .nx2-card-shell { position: relative; display: block; }
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-shell { padding-inline-start: 24px; }
[data-nova-experience="v2"] .nx2-progress {
position: absolute;
right: 9px;
left: 9px;
bottom: 8px;
z-index: 4;
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(255,255,255,.2);
box-shadow: 0 1px 8px rgba(0,0,0,.36);
}
[data-nova-experience="v2"] .nx2-progress > i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg,#20d9ff,#4d72ff 52%,#d144f5);
}
[data-nova-experience="v2"] .nx2-local-slot .nx2-rail-section--continue { margin: 0; }
[data-nova-experience="v2"] .nx2-card--continue .nx2-card-copy small { color: rgba(235,239,247,.64); }
[data-nova-experience="v2"].nx2-page--failure {
display: grid;
place-items: center;
min-height: calc(100vh - max(76px, env(safe-area-inset-bottom)));
padding: 90px 20px 120px;
}
[data-nova-experience="v2"] .nx2-failure {
width: min(560px,100%);
display: grid;
justify-items: center;
gap: 12px;
padding: clamp(28px,5vw,48px);
border: 1px solid rgba(255,255,255,.1);
border-radius: 24px;
background: linear-gradient(180deg,rgba(18,21,31,.92),rgba(8,10,15,.96));
box-shadow: 0 28px 80px rgba(0,0,0,.38);
text-align: center;
}
[data-nova-experience="v2"] .nx2-failure-mark {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border-radius: 19px;
background: linear-gradient(145deg,#1dcdf4,#425dff 52%,#c33df0);
color: #fff;
font-size: 21px;
font-weight: 950;
box-shadow: 0 14px 38px rgba(73,83,255,.27);
}
[data-nova-experience="v2"] .nx2-failure small { color: var(--nx2-soft); font-size: 10px; font-weight: 850; letter-spacing: .18em; }
[data-nova-experience="v2"] .nx2-failure h1 { margin: 2px 0 0; font-size: clamp(24px,3vw,36px); line-height: 1.2; }
[data-nova-experience="v2"] .nx2-failure p { max-width: 46ch; margin: 0 0 6px; color: var(--nx2-muted); font-size: 13px; line-height: 1.9; }
[data-nova-experience="v2"] .nx2-failure code { color: rgba(255,255,255,.28); font-size: 9px; direction: ltr; }
/* V2.9 commercial polish — driven by the first real production screenshots. */
[data-nova-experience="v2"].nx2-page {
padding-bottom: max(132px, calc(env(safe-area-inset-bottom) + 108px));
}
[data-nova-experience="v2"] .nx2-rails {
position: relative;
z-index: 3;
margin-top: -10px;
padding-top: 0;
}
[data-nova-experience="v2"] .nx2-rail-section {
margin-block: clamp(24px,2.65vw,36px);
}
[data-nova-experience="v2"] .nx2-rail-head {
padding-bottom: 12px;
}
[data-nova-experience="v2"] .nx2-rail-head h2 {
font-size: clamp(19px,1.72vw,26px);
font-weight: 880;
letter-spacing: -.025em;
}
[data-nova-experience="v2"] .nx2-see-all {
color: rgba(255,255,255,.62);
font-size: 12.5px;
}
[data-nova-experience="v2"] .nx2-card-copy {
gap: 5px;
padding-top: 9px;
}
[data-nova-experience="v2"] .nx2-card-copy strong {
font-size: 13.5px;
line-height: 1.35;
}
[data-nova-experience="v2"] .nx2-card-copy small {
color: rgba(235,239,247,.52);
font-size: 10.75px;
line-height: 1.35;
}
[data-nova-experience="v2"] .nx2-card-art {
border-color: rgba(255,255,255,.09);
box-shadow: 0 13px 34px rgba(0,0,0,.19);
}
[data-nova-experience="v2"] .nx2-rail--ranked {
grid-auto-columns: clamp(172px,16.4vw,248px);
gap: clamp(18px,1.65vw,28px);
padding-bottom: 12px;
}
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-shell {
padding-inline-start: clamp(28px,2.6vw,44px);
}
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-art {
box-shadow: 0 18px 46px rgba(0,0,0,.28);
}
[data-nova-experience="v2"] .nx2-rank {
right: auto;
left: -2px;
bottom: -14px;
font-size: clamp(68px,7vw,104px);
color: #07090d;
-webkit-text-stroke: 2px rgba(255,255,255,.9);
filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-copy {
padding-inline-start: clamp(28px,2.6vw,44px);
padding-right: 3px;
}
[data-nova-experience="v2"] .nx2-rail-section--social .nx2-rail-head h2::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-inline-end: 8px;
border-radius: 50%;
background: currentColor;
opacity: .32;
vertical-align: .14em;
}
[data-nova-experience="v2"] .nx2-hero-copy p {
-webkit-line-clamp: 2;
max-width: 55ch;
}
[data-nova-experience="v2"] .nx2-hero-meta span {
background: rgba(10,12,17,.62);
border: 1px solid rgba(255,255,255,.08);
}
[data-nova-experience="v2"] .nx2-sentinel {
min-height: 72px;
padding: 18px 20px 30px;
}
[data-nova-experience="v2"] .nx2-sentinel > span {
opacity: 0;
transition: opacity .18s ease;
}
[data-nova-experience="v2"] .nx2-sentinel.is-loading > span { opacity: 1; }
@media (max-width: 760px) {
[data-nova-experience="v2"] .nx2-rails { margin-top: -4px; }
[data-nova-experience="v2"] .nx2-rail--ranked { grid-auto-columns: 43vw; }
[data-nova-experience="v2"] .nx2-rank { font-size: clamp(62px,20vw,90px); }
}
/* =====================================================================
V2.13 — visual parity restored from the approved legacy nova_web.zip.
Data/composition stays Experience V2; only presentation is translated
from the old target-home / shahid-* visual contract into nx2 classes.
===================================================================== */
[data-nova-experience="v2"].nx2-page {
--nx2-bg: #000;
--nx2-panel: #0d0d0d;
--nx2-line: rgba(255,255,255,.055);
--nx2-text: #fff;
--nx2-muted: rgba(255,255,255,.72);
--nx2-soft: rgba(255,255,255,.48);
min-height: 100vh;
overflow-x: hidden;
background: #000;
color: #fff;
padding-bottom: max(116px, calc(env(safe-area-inset-bottom) + 92px));
}
[data-nova-experience="v2"].nx2-page::before { content: none; display: none; }
/* HERO — exact legacy visual language: full bleed, centered copy, restrained title. */
[data-nova-experience="v2"] .nx2-hero {
position: relative;
width: 100%;
max-width: none;
height: clamp(540px,74svh,820px);
min-height: 540px;
margin: 0 0 8px;
overflow: hidden;
background: #000;
isolation: isolate;
}
[data-nova-experience="v2"] .nx2-hero-track,
[data-nova-experience="v2"] .nx2-hero-slide,
[data-nova-experience="v2"] .nx2-hero-art { position: absolute; inset: 0; }
[data-nova-experience="v2"] .nx2-hero-slide {
overflow: hidden;
background: #000;
opacity: 0;
pointer-events: none;
transition: opacity .58s ease;
}
[data-nova-experience="v2"] .nx2-hero-slide.is-active { opacity: 1; pointer-events: auto; }
[data-nova-experience="v2"] .nx2-hero-art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: none;
}
[data-nova-experience="v2"] .nx2-hero-shade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(90deg,rgba(0,0,0,.18) 0%,transparent 34%,transparent 66%,rgba(0,0,0,.16) 100%),
linear-gradient(180deg,rgba(0,0,0,.12) 0%,transparent 30%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.56) 77%,rgba(0,0,0,.94) 95%,#000 100%);
}
[data-nova-experience="v2"] .nx2-hero-copy {
position: absolute;
z-index: 3;
right: clamp(16px,4vw,42px);
left: clamp(16px,4vw,42px);
bottom: clamp(72px,9svh,102px);
width: auto;
text-align: center;
pointer-events: none;
}
[data-nova-experience="v2"] .nx2-hero-text {
width: min(100%,580px);
max-width: 580px;
margin: 0 auto;
text-align: center;
}
[data-nova-experience="v2"] .nx2-eyebrow { display: none; }
[data-nova-experience="v2"] .nx2-hero-copy h1 {
max-width: 560px;
margin: 0 auto 7px;
color: #fff;
font-size: clamp(1.7rem,6vw,3.4rem);
line-height: 1.02;
font-weight: 950;
letter-spacing: -.035em;
text-wrap: balance;
text-shadow: 0 3px 18px rgba(0,0,0,.78);
}
[data-nova-experience="v2"] .nx2-hero-genres {
max-width: 540px;
margin: 0 auto;
color: rgba(255,255,255,.72);
font-size: clamp(.72rem,1.55vw,.92rem);
line-height: 1.45;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nova-experience="v2"] .nx2-hero-copy > p { display: none; }
[data-nova-experience="v2"] .nx2-hero-meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 7px;
margin-top: 9px;
color: rgba(255,255,255,.76);
font-size: clamp(.62rem,1.25vw,.78rem);
font-weight: 760;
}
[data-nova-experience="v2"] .nx2-hero-meta span {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
font-size: inherit;
font-weight: inherit;
}
[data-nova-experience="v2"] .nx2-hero-meta span + span::before {
content: "•";
margin-inline: 0 7px;
color: rgba(255,255,255,.35);
}
[data-nova-experience="v2"] .nx2-hero-actions {
width: min(100%,370px);
margin: 14px auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
direction: rtl;
pointer-events: auto;
}
[data-nova-experience="v2"] .nx2-action {
min-width: 0;
min-height: 40px;
height: 40px;
padding: 0 15px;
border-radius: 999px;
font-size: clamp(.68rem,1.25vw,.82rem);
line-height: 1;
font-weight: 950;
transition: transform .14s ease,opacity .14s ease,border-color .14s ease,box-shadow .14s ease;
}
[data-nova-experience="v2"] .nx2-action:active { transform: scale(.965); }
[data-nova-experience="v2"] .nx2-action--primary {
color: #fff;
border: 0;
background: linear-gradient(100deg,#F04AD8 0%,#9B4DFF 48%,#14D7FF 100%);
box-shadow: 0 10px 22px rgba(155,77,255,.28),0 0 18px rgba(20,215,255,.12);
}
[data-nova-experience="v2"] .nx2-action--secondary {
color: #fff;
border: 3px solid transparent;
background:
linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)) padding-box,
linear-gradient(100deg,#F04AD8 0%,#9B4DFF 48%,#14D7FF 100%) border-box;
box-shadow: 0 10px 24px rgba(0,0,0,.34),0 0 18px rgba(155,77,255,.20);
backdrop-filter: none;
}
[data-nova-experience="v2"] .nx2-hero-dots {
position: absolute;
z-index: 5;
right: 50%;
left: auto;
bottom: 32px;
transform: translateX(50%);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
direction: rtl;
}
[data-nova-experience="v2"] .nx2-hero-dots button {
width: 10px;
height: 3px;
border-radius: 99px;
background: rgba(176,186,202,.52);
opacity: .72;
transform: scaleX(.92);
transition: width .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1),opacity .26s ease,background .26s ease,box-shadow .26s ease;
}
[data-nova-experience="v2"] .nx2-hero-dots button.is-active {
width: 21px;
opacity: 1;
transform: scaleX(1);
background: linear-gradient(90deg,#F04AD8 0%,#9B4DFF 52%,#14D7FF 100%);
box-shadow: 0 0 12px rgba(155,77,255,.30);
}
/* PAGE RHYTHM — same compact rail rhythm as the approved old interface. */
[data-nova-experience="v2"] .nx2-rails {
position: relative;
z-index: 3;
margin: 0;
padding-top: 0;
background: #000;
}
[data-nova-experience="v2"] .nx2-rail-section {
width: 100%;
max-width: 100%;
margin: 0;
padding: 12px 0 clamp(26px,5vw,44px);
overflow: hidden;
background: #000;
content-visibility: auto;
contain-intrinsic-size: 320px;
}
[data-nova-experience="v2"] .nx2-rail-section + .nx2-rail-section { padding-top: 0; }
[data-nova-experience="v2"] .nx2-rail-head {
min-height: 48px;
margin: 0 0 10px;
padding: 0 max(16px,var(--safe-right,0px)) 0 max(16px,var(--safe-left,0px));
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
[data-nova-experience="v2"] .nx2-rail-head h2 {
margin: 0;
padding: 0;
color: #fff;
font-size: clamp(1.02rem,4vw,1.36rem);
line-height: 1.12;
font-weight: 950;
letter-spacing: -.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-nova-experience="v2"] .nx2-rail-section--social .nx2-rail-head h2::before { content: none; display: none; }
[data-nova-experience="v2"] .nx2-see-all {
flex: 0 0 auto;
padding: 5px 0;
color: rgba(255,255,255,.58);
background: transparent;
font-size: .76rem;
font-weight: 800;
}
[data-nova-experience="v2"] .nx2-rail-scroll {
width: 100%;
margin: 0;
padding-inline: max(10px,var(--safe-right,0px)) max(10px,var(--safe-left,0px));
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scroll-padding-inline: 10px;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
[data-nova-experience="v2"] .nx2-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: clamp(132px,18vw,220px);
align-items: stretch;
gap: 10px;
width: max-content;
}
[data-nova-experience="v2"] .nx2-rail--landscape { grid-auto-columns: clamp(290px,45vw,520px); }
[data-nova-experience="v2"] .nx2-rail--collection { grid-auto-columns: clamp(138px,17vw,184px); }
[data-nova-experience="v2"] .nx2-rail--ranked { grid-auto-columns: clamp(210px,44vw,320px); gap: 10px; padding-bottom: 0; }
/* CARDS — legacy poster geometry, title inside poster, metadata underneath. */
[data-nova-experience="v2"] .nx2-card {
position: relative;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
text-align: right;
scroll-snap-align: start;
cursor: pointer;
}
[data-nova-experience="v2"] .nx2-card-shell { position: relative; display: block; padding: 0; }
[data-nova-experience="v2"] .nx2-card-art {
position: relative;
display: block;
width: 100%;
aspect-ratio: 2/3;
overflow: hidden;
border: 1px solid rgba(255,255,255,.055);
border-radius: 13px;
background: #090a0f;
box-shadow: 0 15px 32px rgba(0,0,0,.34);
transform: translateZ(0);
transition: transform 190ms cubic-bezier(.22,1,.36,1),border-color 190ms ease,box-shadow 190ms ease;
}
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-art {
aspect-ratio: 16/9;
border-radius: 15px;
}
[data-nova-experience="v2"] .nx2-card--collection .nx2-card-art {
aspect-ratio: 2/3;
border-radius: 16px;
box-shadow: 0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);
}
[data-nova-experience="v2"] .nx2-card-art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: none;
transition: transform .28s ease;
}
[data-nova-experience="v2"] .nx2-card-vignette {
position: absolute;
inset: 0;
opacity: 1;
pointer-events: none;
background: linear-gradient(180deg,transparent 43%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.96) 100%);
}
[data-nova-experience="v2"] .nx2-card-overlay-title {
position: absolute;
z-index: 3;
right: 9px;
bottom: 9px;
left: 9px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #fff;
font-size: clamp(.69rem,2.3vw,.82rem);
line-height: 1.28;
font-weight: 900;
text-shadow: 0 3px 12px rgba(0,0,0,.9);
}
[data-nova-experience="v2"] .nx2-card-play {
width: 40px;
height: 40px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(0,0,0,.42);
opacity: 0;
}
[data-nova-experience="v2"] .nx2-card-copy {
min-height: 0;
display: grid;
gap: 3px;
padding: 7px 2px 0;
}
[data-nova-experience="v2"] .nx2-card-copy strong {
overflow: hidden;
color: #fff;
font-size: .82rem;
line-height: 1.28;
font-weight: 850;
white-space: nowrap;
text-overflow: ellipsis;
}
[data-nova-experience="v2"] .nx2-card-copy small {
overflow: hidden;
color: rgba(255,255,255,.48);
font-size: .62rem;
line-height: 1.25;
font-weight: 650;
white-space: nowrap;
text-overflow: ellipsis;
}
[data-nova-experience="v2"] .nx2-card--collection .nx2-card-copy strong { font-size: .88rem; }
[data-nova-experience="v2"] .nx2-card--collection .nx2-card-copy small { font-size: .66rem; }
/* Ranked cards return to the legacy TOP ribbon instead of giant numerals. */
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-shell { padding: 0; }
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-art { border-radius: 13px; }
[data-nova-experience="v2"] .nx2-rank { display: none; }
[data-nova-experience="v2"] .nx2-rank-ribbon {
position: absolute;
z-index: 4;
top: 0;
left: 8px;
min-width: 48px;
padding: 8px 7px 13px;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg,#F04AD8 0%,#9B4DFF 52%,#14D7FF 100%);
clip-path: polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
line-height: 1;
}
[data-nova-experience="v2"] .nx2-rank-ribbon small { font-size: .65rem; font-weight: 900; }
[data-nova-experience="v2"] .nx2-rank-ribbon b { margin-top: 3px; font-size: 1.8rem; font-weight: 950; }
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-copy { padding: 8px 2px 0; }
/* Continue watching mirrors the old wide rail and keeps the progress bar prominent. */
[data-nova-experience="v2"] .nx2-local-slot:empty { display: none; }
[data-nova-experience="v2"] .nx2-local-slot:not(:empty) { margin: 0; }
[data-nova-experience="v2"] .nx2-local-slot .nx2-rail-section--continue { padding-top: 8px; padding-bottom: 24px; }
[data-nova-experience="v2"] .nx2-local-slot .nx2-rail--landscape { grid-auto-columns: clamp(230px,42vw,340px); }
[data-nova-experience="v2"] .nx2-card--continue .nx2-card-art { border-radius: 15px; }
[data-nova-experience="v2"] .nx2-progress {
right: 0;
left: 0;
bottom: 0;
height: 3px;
border-radius: 0;
background: rgba(255,255,255,.14);
box-shadow: none;
}
[data-nova-experience="v2"] .nx2-progress > i {
border-radius: 0;
background: linear-gradient(90deg,#F04AD8 0%,#9B4DFF 52%,#14D7FF 100%);
}
/* Skeleton and lazy loader inherit the black legacy canvas. */
[data-nova-experience="v2"] .nx2-skeleton { padding: 18px 10px 26px; background: #000; }
[data-nova-experience="v2"] .nx2-skeleton > div { grid-auto-columns: clamp(132px,18vw,220px); gap: 10px; }
[data-nova-experience="v2"] .nx2-skeleton i { border-radius: 13px; background: rgba(255,255,255,.055); }
[data-nova-experience="v2"] .nx2-sentinel { min-height: 68px; padding: 16px 20px 28px; background: #000; }
@media (hover:hover) and (pointer:fine) {
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-art,
[data-nova-experience="v2"] .nx2-card:focus-visible .nx2-card-art {
transform: translateY(-3px);
border-color: rgba(255,255,255,.09);
box-shadow: 0 20px 42px rgba(0,0,0,.42);
}
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-art img { transform: none; }
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-play,
[data-nova-experience="v2"] .nx2-card:focus-visible .nx2-card-play { opacity: 1; transform: scale(1); }
}
[data-nova-experience="v2"] .nx2-card:focus-visible { outline: 2px solid rgba(255,255,255,.64); outline-offset: 3px; }
@media (max-width: 760px) {
[data-nova-experience="v2"] .nx2-hero {
height: 70dvh;
min-height: 540px;
}
[data-nova-experience="v2"] .nx2-hero-art img { object-position: center; }
[data-nova-experience="v2"] .nx2-hero-copy {
right: 14px;
left: 14px;
bottom: 68px;
}
[data-nova-experience="v2"] .nx2-hero-copy h1 {
max-width: 94%;
margin-bottom: 5px;
font-size: clamp(1.18rem,5.8vw,1.82rem);
line-height: 1;
letter-spacing: -.03em;
}
[data-nova-experience="v2"] .nx2-hero-genres { font-size: .69rem; }
[data-nova-experience="v2"] .nx2-hero-meta { margin-top: 7px; font-size: .62rem; gap: 5px; }
[data-nova-experience="v2"] .nx2-hero-actions {
width: min(100%,286px);
margin-top: 10px;
gap: 8px;
}
[data-nova-experience="v2"] .nx2-action { height: 40px; min-height: 40px; padding: 0 12px; font-size: .68rem; }
[data-nova-experience="v2"] .nx2-hero-dots { bottom: 30px; gap: 3px; }
[data-nova-experience="v2"] .nx2-hero-dots button { width: 5px; height: 2px; }
[data-nova-experience="v2"] .nx2-hero-dots button.is-active { width: 11px; }
[data-nova-experience="v2"] .nx2-rail-head { min-height: 46px; margin-bottom: 7px; padding-inline: max(16px,var(--safe-right,0px)) max(16px,var(--safe-left,0px)); }
[data-nova-experience="v2"] .nx2-rail-head h2 { font-size: clamp(1.02rem,4vw,1.36rem); }
[data-nova-experience="v2"] .nx2-rail-scroll { padding-inline: 8px; scroll-padding-inline: 8px; }
[data-nova-experience="v2"] .nx2-rail { grid-auto-columns: 30.8vw; gap: 8px; }
[data-nova-experience="v2"] .nx2-rail--landscape { grid-auto-columns: 57.2vw; gap: 10px; }
[data-nova-experience="v2"] .nx2-rail--collection { grid-auto-columns: 34vw; gap: 10px; }
[data-nova-experience="v2"] .nx2-rail--ranked { grid-auto-columns: 44vw; gap: 10px; }
[data-nova-experience="v2"] .nx2-local-slot .nx2-rail--landscape { grid-auto-columns: 58vw; }
[data-nova-experience="v2"] .nx2-card-play { display: none; }
[data-nova-experience="v2"] .nx2-card-art { border-radius: 13px; }
[data-nova-experience="v2"] .nx2-card-overlay-title { right: 8px; bottom: 8px; left: 8px; font-size: .66rem; }
[data-nova-experience="v2"] .nx2-card-copy { padding-top: 6px; }
[data-nova-experience="v2"] .nx2-card-copy strong { font-size: .74rem; }
[data-nova-experience="v2"] .nx2-card-copy small { font-size: .60rem; }
[data-nova-experience="v2"] .nx2-rank-ribbon { left: 5px; min-width: 39px; padding: 6px 5px 11px; }
[data-nova-experience="v2"] .nx2-rank-ribbon small { font-size: .58rem; }
[data-nova-experience="v2"] .nx2-rank-ribbon b { font-size: 1.45rem; }
[data-nova-experience="v2"] .nx2-rail-section { contain-intrinsic-size: 280px; }
}
@media (max-width: 380px) {
[data-nova-experience="v2"] .nx2-hero { height: 72dvh; min-height: 470px; }
[data-nova-experience="v2"] .nx2-hero-copy { right: 14px; left: 14px; bottom: 66px; }
[data-nova-experience="v2"] .nx2-hero-copy h1 { font-size: clamp(1.08rem,5.6vw,1.58rem); }
[data-nova-experience="v2"] .nx2-hero-actions { width: min(100%,262px); gap: 7px; }
}
/* =====================================================================
V2.13 — legacy UX parity from the approved nova_web.zip.
Restores the interaction contract as well as the visual contract:
route-local catalog headers, swipeable hero, desktop arrows, old rail
geometry, heading rhythm and stable card behavior. Data stays V2.
===================================================================== */
/* Movies / Series own their local header exactly as the old landing pages did. */
[data-nova-experience="v2"] .nx2-catalog-header {
position: fixed;
z-index: 180;
top: 0;
right: 0;
left: 0;
height: calc(66px + var(--safe-top, 0px));
padding: var(--safe-top, 0px) max(18px, var(--safe-right, 0px)) 0 max(18px, var(--safe-left, 0px));
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.24), rgba(0,0,0,0));
border-bottom: 1px solid rgba(255,255,255,.03);
box-shadow: 0 18px 42px rgba(0,0,0,.28);
pointer-events: auto;
}
[data-nova-experience="v2"] .nx2-catalog-header .catalog-landing-title-copy h1 {
margin: 0;
color: #fff;
font-size: clamp(1.18rem,3vw,1.55rem);
line-height: 1;
font-weight: 950;
letter-spacing: -.03em;
text-shadow: 0 12px 26px rgba(0,0,0,.85);
}
[data-nova-experience="v2"] .nx2-catalog-header .catalog-landing-toolbar-actions {
display: inline-flex;
align-items: center;
gap: 7px;
direction: ltr;
}
[data-nova-experience="v2"] .nx2-catalog-header .catalog-landing-toolbar-button {
position: relative;
width: 44px;
height: 44px;
min-width: 44px;
padding: 0;
margin-inline: -4px;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
box-shadow: none;
}
[data-nova-experience="v2"] .nx2-catalog-header .catalog-landing-toolbar-button:active { transform: scale(.92); }
[data-nova-experience="v2"] .nx2-catalog-header .catalog-landing-toolbar-button.notification i {
position: absolute;
top: 4px;
right: 2px;
width: 7px;
height: 7px;
border-radius: 50%;
background: linear-gradient(135deg,#F04AD8,#9B4DFF 54%,#14D7FF);
box-shadow: 0 0 0 3px rgba(155,77,255,.14);
}
/* Hero goes back to a genuine horizontal snap carousel instead of fade-only slides. */
[data-nova-experience="v2"] .nx2-hero {
height: clamp(540px,76dvh,780px);
min-height: 540px;
margin: 0 0 22px;
}
[data-nova-experience="v2"] .nx2-hero-track {
position: relative;
inset: auto;
width: 100%;
height: 100%;
display: flex;
direction: rtl;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
cursor: grab;
}
[data-nova-experience="v2"] .nx2-hero-track:active { cursor: grabbing; }
[data-nova-experience="v2"] .nx2-hero-track::-webkit-scrollbar { display: none; }
[data-nova-experience="v2"] .nx2-hero-slide {
position: relative;
inset: auto;
flex: 0 0 100%;
width: 100%;
height: 100%;
min-height: 540px;
overflow: hidden;
scroll-snap-align: center;
scroll-snap-stop: always;
background: #000;
opacity: 1;
pointer-events: auto;
transition: none;
cursor: pointer;
}
[data-nova-experience="v2"] .nx2-hero-art { position: absolute; inset: 0; }
[data-nova-experience="v2"] .nx2-hero-art img {
object-position: center top;
filter: saturate(1) contrast(1.02) brightness(1);
transform: scale(1.002);
}
[data-nova-experience="v2"] .nx2-hero-copy { bottom: clamp(72px,10dvh,104px); }
[data-nova-experience="v2"] .nx2-hero-copy h1 { font-size: clamp(1.45rem,4.4vw,3.15rem); line-height: .98; }
[data-nova-experience="v2"] .nx2-hero-genres { color: rgba(255,255,255,.88); font-size: clamp(.68rem,1.55vw,.92rem); font-weight: 800; }
[data-nova-experience="v2"] .nx2-hero-meta { gap: 5px 9px; font-size: clamp(.62rem,1.3vw,.78rem); font-weight: 750; }
[data-nova-experience="v2"] .nx2-hero-meta span + span::before {
content: "";
width: 3px;
height: 12px;
margin-left: 7px;
display: inline-block;
border-radius: 99px;
background: #14D7FF;
vertical-align: -2px;
}
/* Same arrow control contract used by the old hero and every horizontal rail. */
[data-nova-experience="v2"] .nx2-horizontal-scroll-shell,
[data-nova-experience="v2"] .nx2-desktop-rail-controls { position: relative; isolation: isolate; }
[data-nova-experience="v2"] .nx2-scroll-arrow {
position: absolute;
z-index: 26;
top: 50%;
width: 47px;
height: 47px;
display: none;
place-items: center;
padding: 0;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
background: transparent;
color: #fff;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: translateY(-50%);
transition: border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease;
pointer-events: auto;
cursor: pointer;
}
[data-nova-experience="v2"] .nx2-scroll-arrow::before {
content: "";
position: absolute;
inset: -7px;
border-radius: 999px;
background: radial-gradient(circle at center,rgba(155,108,255,.18) 0%,rgba(53,168,255,.10) 38%,rgba(53,168,255,0) 72%);
opacity: .75;
pointer-events: none;
filter: blur(6px);
}
[data-nova-experience="v2"] .nx2-scroll-arrow > * { position: relative; z-index: 1; }
[data-nova-experience="v2"] .nx2-scroll-arrow--right { right: 8px; }
[data-nova-experience="v2"] .nx2-scroll-arrow--left { left: 8px; }
[data-nova-experience="v2"] .nx2-rail-scroll-arrow { top: 48%; }
[data-nova-experience="v2"] .nx2-hero-scroll-arrow { width: 42px; height: 42px; border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.10); }
[data-nova-experience="v2"] .nx2-hero-scroll-arrow.nx2-scroll-arrow--right { right: 14px; }
[data-nova-experience="v2"] .nx2-hero-scroll-arrow.nx2-scroll-arrow--left { left: 14px; }
/* Restore the exact old section rhythm and title marker. */
[data-nova-experience="v2"] .nx2-rail-section {
padding: 18px 0 24px;
contain-intrinsic-size: 320px;
}
[data-nova-experience="v2"] .nx2-rail-section + .nx2-rail-section { padding-top: 24px; }
[data-nova-experience="v2"] .nx2-rail-head {
min-height: 58px;
margin: 0;
padding: 0 max(18px,var(--safe-right,0px)) 0 max(18px,var(--safe-left,0px));
}
[data-nova-experience="v2"] .nx2-rail-head h2 {
position: relative;
padding-right: 13px;
font-size: clamp(.95rem,2vw,1.15rem);
line-height: 1.2;
font-weight: 950;
letter-spacing: -.02em;
}
[data-nova-experience="v2"] .nx2-rail-head h2::before,
[data-nova-experience="v2"] .nx2-rail-section--social .nx2-rail-head h2::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 5px;
height: 28px;
min-height: 28px;
border-radius: 999px;
background: linear-gradient(180deg,#14D7FF 0%,#9B4DFF 56%,#F04AD8 100%);
transform: translateY(-50%);
display: block;
}
[data-nova-experience="v2"] .nx2-see-all { font-size: .72rem; font-weight: 850; }
/* Old rails were flex scrollers; keep that geometry so desktop arrows move by one viewport naturally. */
[data-nova-experience="v2"] .nx2-rail-scroll {
width: 100%;
margin: 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
direction: rtl;
scroll-snap-type: x proximity;
scroll-padding-inline: 0;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
[data-nova-experience="v2"] .nx2-rail {
width: 100%;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
gap: 8px;
}
[data-nova-experience="v2"] .nx2-rail > * { scroll-snap-align: start; }
[data-nova-experience="v2"] .nx2-rail--poster > .nx2-card { flex: 0 0 clamp(150px,22vw,230px); }
[data-nova-experience="v2"] .nx2-rail--landscape > .nx2-card { flex: 0 0 clamp(290px,45vw,560px); }
[data-nova-experience="v2"] .nx2-rail--ranked > .nx2-card { flex: 0 0 clamp(300px,46vw,470px); }
[data-nova-experience="v2"] .nx2-rail--collection > .nx2-card { flex: 0 0 clamp(138px,17vw,184px); }
[data-nova-experience="v2"] .nx2-local-slot .nx2-rail--landscape > .nx2-card { flex-basis: clamp(290px,45vw,560px); }
/* Old card surface was flatter and tighter than V2.13. */
[data-nova-experience="v2"] .nx2-card-art {
border: 0;
border-radius: 5px;
background: #0d0d0d;
box-shadow: none;
transform: none;
transition: none;
}
[data-nova-experience="v2"] .nx2-card--landscape {
overflow: hidden;
border-radius: 6px;
background: #0d0d0d;
}
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-art { border-radius: 0; }
[data-nova-experience="v2"] .nx2-card--collection .nx2-card-art { border-radius: 6px; box-shadow: none; }
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-art { border-radius: 5px; }
[data-nova-experience="v2"] .nx2-card-art img { transition: none; transform: none; }
[data-nova-experience="v2"] .nx2-card--poster .nx2-card-copy { display: none; }
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-copy {
min-height: 58px;
padding: 10px 12px;
display: grid;
align-content: center;
gap: 4px;
background: #0d0d0d;
}
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-copy strong { font-size: clamp(.74rem,1.6vw,.95rem); font-weight: 850; }
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-copy { padding: 8px 0 0; }
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-copy strong { font-size: .82rem; font-weight: 850; }
[data-nova-experience="v2"] .nx2-card--ranked .nx2-card-copy small { margin-top: 2px; font-size: clamp(.62rem,1.45vw,.78rem); color: rgba(255,255,255,.82); font-weight: 750; }
[data-nova-experience="v2"] .nx2-card-play { display: none; }
@media (hover:hover) and (pointer:fine) and (min-width:760px) {
[data-nova-experience="v2"] .nx2-scroll-arrow { display: grid; }
[data-nova-experience="v2"] .nx2-scroll-arrow:hover {
color: #14D7FF;
border-color: rgba(20,215,255,.42);
background: rgba(0,0,0,.18);
transform: translateY(-50%) scale(1.06);
}
[data-nova-experience="v2"] .nx2-rail-scroll { scroll-behavior: smooth; }
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-art,
[data-nova-experience="v2"] .nx2-card:focus-visible .nx2-card-art,
[data-nova-experience="v2"] .nx2-card:hover .nx2-card-art img { transform: none; border-color: transparent; box-shadow: none; }
}
@media (max-width:600px) {
[data-nova-experience="v2"] .nx2-catalog-header {
height: calc(58px + var(--safe-top,0px));
padding-inline: 16px;
}
[data-nova-experience="v2"] .nx2-hero { height: clamp(500px,74dvh,660px); min-height: 500px; margin-bottom: 18px; }
[data-nova-experience="v2"] .nx2-hero-slide { min-height: 500px; }
[data-nova-experience="v2"] .nx2-hero-copy { bottom: 68px; }
[data-nova-experience="v2"] .nx2-rail-section { padding-top: 16px; padding-bottom: 20px; }
[data-nova-experience="v2"] .nx2-rail-section + .nx2-rail-section { padding-top: 19px; }
[data-nova-experience="v2"] .nx2-rail-head { min-height: 46px; padding-inline: 18px; }
[data-nova-experience="v2"] .nx2-rail-head h2 { font-size: clamp(.85rem,3.5vw,.95rem); }
[data-nova-experience="v2"] .nx2-rail--poster > .nx2-card { flex-basis: 29.2vw; }
[data-nova-experience="v2"] .nx2-rail--landscape > .nx2-card { flex-basis: 57.2vw; }
[data-nova-experience="v2"] .nx2-rail--ranked > .nx2-card { flex-basis: 60.3vw; }
[data-nova-experience="v2"] .nx2-rail--collection > .nx2-card { flex-basis: 34vw; }
[data-nova-experience="v2"] .nx2-local-slot .nx2-rail--landscape > .nx2-card { flex-basis: 57.2vw; }
[data-nova-experience="v2"] .nx2-card-art { border-radius: 5px; }
[data-nova-experience="v2"] .nx2-card-overlay-title { right: 8px; bottom: 8px; left: 8px; font-size: .70rem; }
[data-nova-experience="v2"] .nx2-rank-ribbon { left: 5px; min-width: 39px; padding: 6px 5px 11px; }
[data-nova-experience="v2"] .nx2-rank-ribbon small { font-size: .52rem; }
[data-nova-experience="v2"] .nx2-rank-ribbon b { font-size: 1.45rem; }
}
/* V2.13 DOM parity lock — the Experience renderer now emits the approved
legacy component class names too, so the original nova_web stylesheet can
supply its exact micro-layout while this file only resolves nx2 conflicts. */
[data-nova-experience="v2"] .nx2-page-main,
[data-nova-experience="v2"] .nx2-experience-body {
min-width: 0;
width: 100%;
background: #000;
}
[data-nova-experience="v2"] .nx2-experience-body { overflow-x: hidden; }
/* The scroller and the flex rail are intentionally the same element, matching
the old .shahid-rail contract rather than an extra nested Experience track. */
[data-nova-experience="v2"] .nx2-rail-scroll.nx2-rail.shahid-rail {
width: 100%;
max-width: 100%;
display: flex;
align-items: stretch;
overflow-x: auto;
overflow-y: hidden;
gap: 8px;
direction: rtl;
scroll-snap-type: x proximity;
scroll-padding-inline: 0;
overscroll-behavior-inline: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
[data-nova-experience="v2"] .nx2-rail-scroll.nx2-rail.shahid-rail::-webkit-scrollbar { display: none; }
/* Exact old landscape DOM: image + duration, then one-line title and menu mark. */
[data-nova-experience="v2"] .nx2-card--landscape.shahid-landscape-card {
display: block;
background: #0d0d0d;
}
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-copy.shahid-landscape-copy {
min-height: 58px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: #0d0d0d;
}
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-copy.shahid-landscape-copy strong {
min-width: 0;
overflow: hidden;
color: #fff;
font-size: clamp(.74rem,1.6vw,.95rem);
font-weight: 850;
white-space: nowrap;
text-overflow: ellipsis;
}
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-copy.shahid-landscape-copy b {
color: #fff;
font-size: 1.55rem;
line-height: 1;
}
/* Ranked now uses the exact old direct-title/direct-subtitle DOM. */
[data-nova-experience="v2"] .nx2-card--ranked.shahid-ranked-card { background: #0d0d0d; }
[data-nova-experience="v2"] .nx2-card--ranked > .nx2-ranked-title {
margin-top: 8px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #fff;
font-size: .82rem;
font-weight: 850;
}
[data-nova-experience="v2"] .nx2-card--ranked > .nx2-ranked-meta {
margin-top: 5px;
display: block;
color: rgba(255,255,255,.82);
font-size: clamp(.62rem,1.45vw,.78rem);
font-weight: 750;
}
/* Continue Watching uses the standalone legacy component again; only desktop
arrows were added because the approved component originally omitted them. */
[data-nova-experience="v2"] .nx2-local-slot .continue-watching-section {
width: 100%;
margin: 0;
padding: 18px 0 24px;
background: #000;
}
[data-nova-experience="v2"] .nx2-local-slot .continue-watching-section .horizontal-scroll-shell {
width: 100%;
padding-inline: 0;
overflow: visible;
}
[data-nova-experience="v2"] .nx2-local-slot .continue-watching-rail {
width: 100%;
padding: 0 clamp(16px,3vw,28px) 8px;
gap: 14px;
overflow-x: auto;
direction: rtl;
scroll-snap-type: x proximity;
scroll-padding-inline: clamp(16px,3vw,28px);
}
[data-nova-experience="v2"] .nx2-local-slot .continue-watching-card {
flex: 0 0 clamp(210px,42vw,310px);
max-width: 310px;
}
@media (max-width:600px) {
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-copy.shahid-landscape-copy {
min-height: 47px;
padding: 8px 10px;
}
[data-nova-experience="v2"] .nx2-card--landscape .nx2-card-copy.shahid-landscape-copy strong { font-size: .68rem; }
[data-nova-experience="v2"] .nx2-card--ranked > .nx2-ranked-title { font-size: .7rem; }
[data-nova-experience="v2"] .nx2-card--ranked > .nx2-ranked-meta { font-size: .57rem; }
[data-nova-experience="v2"] .nx2-local-slot .continue-watching-section { padding-block: 14px 20px; }
[data-nova-experience="v2"] .nx2-local-slot .continue-watching-rail {
padding-inline: 14px;
scroll-padding-inline: 14px;
gap: 11px;
}
[data-nova-experience="v2"] .nx2-local-slot .continue-watching-card { flex-basis: min(76vw,270px); }
}
/* -------------------------------------------------------------------------
V2.17 — Dedicated Experience Section Browser
“استعراض” now opens the rail itself as an independent NOVA+ surface. It does
not reuse the generic All Movies/Series filter catalogue.
------------------------------------------------------------------------- */
.nx2-section-browser-page{min-height:100dvh;background:#000;color:#fff;padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
.nx2-section-browser-main{min-height:100dvh;background:#000}
.nx2-section-browser-header{position:sticky;top:0;z-index:18;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px clamp(16px,3vw,44px);background:linear-gradient(180deg,rgba(3,3,5,.98),rgba(3,3,5,.9) 72%,rgba(3,3,5,.72));border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(18px) saturate(125%)}
.nx2-section-browser-back{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.055);color:#fff;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.nx2-section-browser-back:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28);transform:translateX(2px)}
.nx2-section-browser-heading{min-width:0;text-align:right}
.nx2-section-browser-heading small{display:block;margin-bottom:3px;color:#a9a9b2;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.nx2-section-browser-heading h1{margin:0;color:#fff;font-size:clamp(1.28rem,2.3vw,2rem);font-weight:800;line-height:1.25}
.nx2-section-browser-heading p{max-width:780px;margin:6px 0 0;color:#aaaab3;font-size:clamp(.78rem,1.2vw,.94rem);line-height:1.65}
.nx2-section-browser-count{align-self:center;padding:7px 11px;border:1px solid rgba(155,77,255,.38);border-radius:999px;background:rgba(155,77,255,.09);color:#d7c4ff;font-size:.78rem;font-weight:700;white-space:nowrap}
.nx2-section-browser-content{padding:24px clamp(12px,2.8vw,44px) 36px}
.nx2-section-browser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:22px 12px;align-items:start}
.nx2-section-browser-grid>.nx2-card{width:100%;min-width:0;max-width:none;flex:none;margin:0}
.nx2-section-browser-grid--landscape{grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:20px 14px}
.nx2-section-browser-grid--ranked{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.nx2-section-browser-grid--collection{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.nx2-section-browser-grid .nx2-card--poster .nx2-card-art,.nx2-section-browser-grid .shahid-poster-image{aspect-ratio:2/3}
.nx2-section-browser-grid .nx2-card--landscape .nx2-card-art,.nx2-section-browser-grid .shahid-landscape-image{aspect-ratio:16/9}
.nx2-section-browser-grid .nx2-card--ranked{min-width:0}
.nx2-section-browser-skeleton{display:block;width:100%;aspect-ratio:2/3;border-radius:5px;background:linear-gradient(100deg,#0c0c0f 20%,#17171d 40%,#0c0c0f 60%);background-size:220% 100%;animation:nx2SectionShimmer 1.2s linear infinite}
@keyframes nx2SectionShimmer{to{background-position:-220% 0}}
.nx2-section-browser-sentinel{display:grid;place-items:center;height:86px;margin-top:12px}
.nx2-section-browser-sentinel[hidden]{display:none}
.nx2-section-browser-sentinel span{width:22px;height:22px;border:2px solid rgba(255,255,255,.13);border-top-color:#9B4DFF;border-radius:50%;opacity:0}
.nx2-section-browser-sentinel.is-loading span{opacity:1;animation:nx2SectionSpin .75s linear infinite}
@keyframes nx2SectionSpin{to{transform:rotate(360deg)}}
.nx2-section-browser-empty{grid-column:1/-1;display:grid;place-items:center;min-height:45vh;text-align:center;color:#aaaab3}
.nx2-section-browser-empty h2{margin:0 0 8px;color:#fff;font-size:1.2rem}
.nx2-section-browser-empty p{margin:0}
@media (max-width:759px){
.nx2-section-browser-header{gap:10px;padding:12px 11px}
.nx2-section-browser-back{width:36px;height:36px}
.nx2-section-browser-heading p{display:none}
.nx2-section-browser-count{font-size:.68rem;padding:5px 8px}
.nx2-section-browser-content{padding:14px 8px 24px}
.nx2-section-browser-grid,.nx2-section-browser-grid--ranked,.nx2-section-browser-grid--collection{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 7px}
.nx2-section-browser-grid--landscape{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px}
}
/* -------------------------------------------------------------------------
V2.18 — Unified browser header + premium cards + complete collections
------------------------------------------------------------------------- */
.nx2-section-browser-page .nx2-section-browser-header{
position:sticky;top:0;z-index:40;
display:flex;justify-content:space-between;align-items:center;
min-height:68px;padding:10px clamp(14px,2.7vw,42px);
background:linear-gradient(180deg,rgba(3,3,5,.96),rgba(3,3,5,.84));
border-bottom:1px solid rgba(255,255,255,.065);
backdrop-filter:blur(22px) saturate(135%);
box-shadow:0 10px 32px rgba(0,0,0,.22)
}
.nx2-section-browser-header .nova-native-header-leading,.nx2-section-browser-header .catalog-landing-toolbar-actions{display:flex;align-items:center;gap:10px;min-width:0}
.nx2-section-browser-heading{min-width:0;text-align:right}
.nx2-section-browser-heading h1{margin:0;font-size:clamp(1rem,1.8vw,1.42rem);font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx2-section-browser-heading small{display:block;max-width:min(58vw,620px);margin-top:4px;color:#9d9da6;font-size:.69rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx2-section-browser-back,.nx2-section-browser-header .catalog-landing-toolbar-button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:#fff;display:grid;place-items:center;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.nx2-section-browser-back:hover,.nx2-section-browser-header .catalog-landing-toolbar-button:hover{background:rgba(255,255,255,.105);border-color:rgba(255,255,255,.2)}
.nx2-section-browser-count{padding:5px 9px;border-radius:999px;background:rgba(155,77,255,.10);border:1px solid rgba(155,77,255,.28);color:#d9c8ff;font-size:.68rem;font-weight:800;white-space:nowrap}
.nx2-section-browser-content{padding:24px clamp(12px,2.8vw,42px) 42px}
.nx2-section-browser-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:24px 13px}
.nx2-section-browser-grid>.nx2-card{position:relative;border-radius:10px;overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));transition:transform .2s ease,filter .2s ease}
.nx2-section-browser-grid>.nx2-card .nx2-card-art{overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.075);background:#0b0b0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}
.nx2-section-browser-grid>.nx2-card .nx2-card-art img{transition:transform .32s cubic-bezier(.2,.7,.2,1),filter .25s ease}
.nx2-section-browser-grid>.nx2-card .nx2-card-vignette{background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.16) 65%,rgba(0,0,0,.91) 100%)}
.nx2-section-browser-grid>.nx2-card .nx2-card-overlay-title{padding:18px 9px 9px;font-size:.76rem;line-height:1.35;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.nx2-section-browser-grid>.nx2-card--landscape .nx2-card-copy{padding-top:8px}
.nx2-section-browser-grid>.nx2-card--collection .nx2-card-copy{padding:9px 2px 0}
.nx2-section-browser-grid>.nx2-card--collection .nx2-card-copy strong{font-size:.82rem}
.nx2-section-browser-grid>.nx2-card--collection .nx2-card-copy small{margin-top:3px;color:#8f8f99;font-size:.67rem}
@media (hover:hover) and (pointer:fine){
.nx2-section-browser-grid>.nx2-card:hover{transform:translateY(-4px);filter:drop-shadow(0 16px 26px rgba(0,0,0,.34))}
.nx2-section-browser-grid>.nx2-card:hover .nx2-card-art{border-color:rgba(255,255,255,.17)}
.nx2-section-browser-grid>.nx2-card:hover .nx2-card-art img{transform:scale(1.035);filter:saturate(1.06) contrast(1.02)}
}
/* Important Collections library: same native header language, every collection,
progressive loading, and premium editorial cards. */
.nova-collections-library{min-height:100dvh;background:#000;color:#fff;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.nova-collections-library>.nova-native-catalog-header,.server-collection-details-shell>.nova-native-catalog-header{position:sticky;top:0;z-index:42;background:linear-gradient(180deg,rgba(3,3,5,.96),rgba(3,3,5,.84));backdrop-filter:blur(22px) saturate(135%);border-bottom:1px solid rgba(255,255,255,.065);box-shadow:0 10px 32px rgba(0,0,0,.22)}
.nova-collections-library-main{padding:0 clamp(12px,2.8vw,42px) 42px}
.nova-collections-library-intro{position:relative;margin:20px 0 24px;padding:clamp(20px,3.6vw,42px);overflow:hidden;border:1px solid rgba(255,255,255,.075);border-radius:18px;background:radial-gradient(circle at 88% 15%,rgba(155,77,255,.22),transparent 32%),radial-gradient(circle at 15% 100%,rgba(10,203,255,.12),transparent 34%),linear-gradient(135deg,#111116,#08080b 68%);box-shadow:0 18px 42px rgba(0,0,0,.22)}
.nova-collections-library-intro:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 55%,rgba(255,255,255,.035) 55% 56%,transparent 56% 100%)}
.nova-collections-library-intro>span{display:block;color:#b695ff;font-size:.7rem;font-weight:900;letter-spacing:.12em}
.nova-collections-library-intro h2{margin:8px 0 8px;font-size:clamp(1.55rem,3vw,2.6rem);line-height:1.15}
.nova-collections-library-intro p{max-width:760px;margin:0;color:#aaaab3;font-size:clamp(.82rem,1.25vw,.98rem);line-height:1.8}
.nova-collections-library-stat{display:inline-flex;margin-top:16px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#d3d3da;font-size:.72rem;font-weight:800}
.nova-collections-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px 14px;align-items:start}
.nova-collections-library-grid .nova-movie-collection-card{display:block;min-width:0;text-decoration:none;color:#fff;border-radius:12px;transition:transform .2s ease,filter .2s ease}
.nova-collections-library-grid .nova-movie-collection-poster{position:relative;display:block;overflow:hidden;aspect-ratio:2/3;border-radius:12px;background:#0b0b0e;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.nova-collections-library-grid .nova-movie-collection-poster:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));pointer-events:none}
.nova-collections-library-grid .nova-movie-collection-image,.nova-collections-library-grid .nova-movie-collection-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.nova-collections-library-grid .nova-movie-collection-badge{position:absolute;z-index:2;top:9px;right:9px;padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);font-size:.63rem;font-weight:900}
.nova-collections-library-grid .nova-movie-collection-copy{padding:10px 3px 0;display:grid;gap:3px}
.nova-collections-library-grid .nova-movie-collection-copy strong{font-size:.82rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nova-collections-library-grid .nova-movie-collection-copy small{color:#aaaab3;font-size:.68rem}
.nova-collections-library-grid .nova-movie-collection-copy span{color:#73737d;font-size:.64rem}
.nova-collections-library-sentinel{height:90px;display:grid;place-items:center}
.nova-collections-library-sentinel[hidden]{display:none}
.nova-collections-library-sentinel span{width:24px;height:24px;border:2px solid rgba(255,255,255,.12);border-top-color:#9b4dff;border-radius:50%;opacity:0}
.nova-collections-library-sentinel.is-loading span{opacity:1;animation:nx2SectionSpin .75s linear infinite}
@media (hover:hover) and (pointer:fine){.nova-collections-library-grid .nova-movie-collection-card:hover{transform:translateY(-5px);filter:drop-shadow(0 17px 28px rgba(0,0,0,.28))}.nova-collections-library-grid .nova-movie-collection-card:hover img{transform:scale(1.04)}}
@media (max-width:759px){
.nx2-section-browser-page .nx2-section-browser-header{min-height:58px;padding:8px 10px}
.nx2-section-browser-heading h1{font-size:.94rem}.nx2-section-browser-heading small{font-size:.61rem;max-width:46vw}
.nx2-section-browser-back,.nx2-section-browser-header .catalog-landing-toolbar-button{width:36px;height:36px}
.nx2-section-browser-actions{gap:6px}.nx2-section-browser-count{display:none}
.nx2-section-browser-content{padding:16px 8px 28px}
.nx2-section-browser-grid,.nx2-section-browser-grid--ranked,.nx2-section-browser-grid--collection{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 7px}
.nx2-section-browser-grid--landscape{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 8px}
.nx2-section-browser-grid>.nx2-card .nx2-card-art{border-radius:8px}.nx2-section-browser-grid>.nx2-card .nx2-card-overlay-title{font-size:.66rem;padding:15px 7px 7px}
.nova-collections-library-main{padding:0 9px 28px}.nova-collections-library-intro{margin:12px 0 18px;padding:20px 16px;border-radius:14px}.nova-collections-library-intro p{font-size:.78rem}
.nova-collections-library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 7px}.nova-collections-library-grid .nova-movie-collection-poster{border-radius:9px}.nova-collections-library-grid .nova-movie-collection-copy strong{font-size:.68rem}.nova-collections-library-grid .nova-movie-collection-copy small,.nova-collections-library-grid .nova-movie-collection-copy span{font-size:.58rem}
}
/* -------------------------------------------------------------------------
V2.19 — Premium Section Browser + Cinematic Collections
Visual/UX only: larger desktop cards, calmer metadata, unified sticky head,
cinematic hover, and intentional end-of-content states.
------------------------------------------------------------------------- */
.nx2-section-browser-page .nx2-section-browser-header,
.nova-collections-library>.nova-native-catalog-header,
.server-collection-details-shell>.nova-native-catalog-header{
min-height:64px;
padding:8px clamp(16px,2.55vw,40px);
background:linear-gradient(180deg,rgba(5,5,7,.97),rgba(5,5,7,.89));
border-bottom:1px solid rgba(255,255,255,.07);
box-shadow:0 8px 30px rgba(0,0,0,.30);
backdrop-filter:blur(20px) saturate(130%);
}
.nx2-section-browser-heading h1{font-size:clamp(1rem,1.45vw,1.28rem);font-weight:850;letter-spacing:-.01em}
.nx2-section-browser-heading small{margin-top:3px;color:rgba(255,255,255,.54);font-size:.66rem;font-weight:650}
.nx2-section-browser-back,.nx2-section-browser-header .catalog-landing-toolbar-button{width:38px;height:38px;background:transparent;border-color:transparent}
.nx2-section-browser-back:hover,.nx2-section-browser-header .catalog-landing-toolbar-button:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.08);transform:none}
.nx2-section-browser-count{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.09);color:rgba(255,255,255,.72);font-size:.65rem}
.nx2-section-browser-main{min-height:calc(100dvh - 64px)}
.nx2-section-browser-content{width:100%;max-width:1920px;margin-inline:auto;padding:26px clamp(18px,3vw,52px) 34px}
.nx2-section-browser-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:30px 17px}
.nx2-section-browser-grid--poster,.nx2-section-browser-grid--ranked{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.nx2-section-browser-grid--landscape{grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:28px 18px}
.nx2-section-browser-grid--collection{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 18px}
.nx2-section-browser-grid>.nx2-card{display:none}
.nx2-browser-card{appearance:none;border:0;background:none;color:#fff;text-align:right;min-width:0;padding:0;cursor:pointer;display:grid;align-content:start;gap:0;transition:transform .22s cubic-bezier(.2,.7,.2,1),filter .22s ease}
.nx2-browser-card-art{position:relative;display:block;overflow:hidden;width:100%;aspect-ratio:2/3;border-radius:14px;background:#0b0b0f;border:1px solid rgba(255,255,255,.075);box-shadow:0 15px 34px rgba(0,0,0,.30),inset 0 0 0 1px rgba(255,255,255,.018);isolation:isolate}
.nx2-browser-card--landscape .nx2-browser-card-art,.nx2-browser-card--collection .nx2-browser-card-art{aspect-ratio:16/9}
.nx2-browser-card--ranked .nx2-browser-card-art{aspect-ratio:2/3}
.nx2-browser-card-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .25s ease}
.nx2-browser-card-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.64) 100%);pointer-events:none}
.nx2-browser-card-copy{display:grid;gap:4px;padding:10px 3px 0;min-width:0}
.nx2-browser-card-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;line-height:1.35;font-weight:800;color:rgba(255,255,255,.96)}
.nx2-browser-card-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.50);font-size:.67rem;line-height:1.35;font-weight:560}
.nx2-browser-card-chip{position:absolute;z-index:3;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(0,0,0,.60);backdrop-filter:blur(9px);color:#fff;font-size:.62rem;font-weight:800;line-height:1}
.nx2-browser-card-action{position:absolute;z-index:4;left:10px;bottom:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:#07070a;box-shadow:0 8px 20px rgba(0,0,0,.30);opacity:0;transform:translateY(5px) scale(.92);transition:opacity .2s ease,transform .2s ease}
.nx2-browser-rank{position:absolute;z-index:4;top:10px;right:10px;display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:9px;background:linear-gradient(135deg,rgba(240,74,216,.94),rgba(155,77,255,.94));box-shadow:0 8px 18px rgba(86,25,144,.35)}
.nx2-browser-rank small{font-size:.49rem;font-weight:950;letter-spacing:.08em}.nx2-browser-rank b{font-size:.82rem;line-height:1}
.nx2-section-browser-end,.nova-collections-library-end{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;margin:18px auto 4px;padding:8px 12px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.50);font-size:.67rem;font-weight:700}
.nx2-section-browser-end[hidden],.nova-collections-library-end[hidden]{display:none}
.nx2-section-browser-end p,.nova-collections-library-end p{margin:0}
.nx2-section-browser-end span,.nova-collections-library-end span{display:grid;place-items:center;color:#9b75ff}
@media (hover:hover) and (pointer:fine){
.nx2-browser-card:hover,.nx2-browser-card:focus-visible{transform:translateY(-5px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.32));outline:none}
.nx2-browser-card:hover .nx2-browser-card-art,.nx2-browser-card:focus-visible .nx2-browser-card-art{border-color:rgba(255,255,255,.18);box-shadow:0 19px 42px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.035)}
.nx2-browser-card:hover .nx2-browser-card-art img,.nx2-browser-card:focus-visible .nx2-browser-card-art img{transform:scale(1.045);filter:saturate(1.06) contrast(1.02)}
.nx2-browser-card:hover .nx2-browser-card-action,.nx2-browser-card:focus-visible .nx2-browser-card-action{opacity:1;transform:translateY(0) scale(1)}
}
.nova-collections-library-main{max-width:1920px;margin-inline:auto;padding:0 clamp(18px,3vw,52px) 38px}
.nova-collections-library-intro{margin:18px 0 30px;padding:clamp(22px,3vw,36px);border-radius:20px;background:radial-gradient(circle at 88% 18%,rgba(155,77,255,.20),transparent 31%),radial-gradient(circle at 12% 100%,rgba(20,215,255,.10),transparent 32%),linear-gradient(135deg,#101015,#08080b 72%);border-color:rgba(255,255,255,.07);box-shadow:0 18px 44px rgba(0,0,0,.25)}
.nova-collections-library-intro h2{font-size:clamp(1.45rem,2.4vw,2.25rem)}
.nova-collections-library-intro p{max-width:700px;color:rgba(255,255,255,.58);line-height:1.75}
.nova-collections-library-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:32px 18px}
.nova-collections-library-grid .nova-movie-collection-card{position:relative;border-radius:14px;transition:transform .22s cubic-bezier(.2,.7,.2,1),filter .22s ease}
.nova-collections-library-grid .nova-movie-collection-poster{border-radius:14px;border-color:rgba(255,255,255,.075);box-shadow:0 15px 34px rgba(0,0,0,.30)}
.nova-collections-library-grid .nova-movie-collection-copy{position:relative;padding:11px 32px 0 3px;gap:4px}
.nova-collections-library-grid .nova-movie-collection-copy strong{font-size:.9rem;font-weight:820}
.nova-collections-library-grid .nova-movie-collection-copy small{font-size:.69rem;color:rgba(255,255,255,.53)}
.nova-collections-library-grid .nova-movie-collection-copy span{font-size:.64rem;color:rgba(255,255,255,.36)}
.nova-collections-library-grid .nova-movie-collection-copy i{position:absolute;right:3px;top:12px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.055);color:rgba(255,255,255,.62);font-style:normal;transition:background .18s ease,color .18s ease,transform .18s ease}
@media (hover:hover) and (pointer:fine){
.nova-collections-library-grid .nova-movie-collection-card:hover{transform:translateY(-5px);filter:drop-shadow(0 18px 32px rgba(0,0,0,.32))}
.nova-collections-library-grid .nova-movie-collection-card:hover .nova-movie-collection-poster{border-color:rgba(255,255,255,.17)}
.nova-collections-library-grid .nova-movie-collection-card:hover img{transform:scale(1.045)}
.nova-collections-library-grid .nova-movie-collection-card:hover .nova-movie-collection-copy i{background:rgba(155,77,255,.18);color:#fff;transform:translateX(-2px)}
}
@media (min-width:1500px){
.nx2-section-browser-grid--poster,.nx2-section-browser-grid--ranked{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.nx2-section-browser-grid--landscape{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.nova-collections-library-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media (max-width:1100px) and (min-width:760px){
.nx2-section-browser-grid--poster,.nx2-section-browser-grid--ranked{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.nx2-section-browser-grid--landscape{grid-template-columns:repeat(auto-fill,minmax(225px,1fr))}
.nova-collections-library-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}
@media (max-width:759px){
.nx2-section-browser-page .nx2-section-browser-header{min-height:58px;padding:7px 9px}
.nx2-section-browser-content{padding:16px 9px 28px}
.nx2-section-browser-grid,.nx2-section-browser-grid--poster,.nx2-section-browser-grid--ranked,.nx2-section-browser-grid--collection{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 8px}
.nx2-section-browser-grid--landscape{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 9px}
.nx2-browser-card-art{border-radius:10px}.nx2-browser-card-copy{padding-top:7px}.nx2-browser-card-copy strong{font-size:.7rem}.nx2-browser-card-copy small{font-size:.58rem}
.nx2-browser-card-action{display:none}.nx2-browser-card-chip{right:7px;bottom:7px;padding:3px 6px;font-size:.54rem}
.nova-collections-library-main{padding:0 9px 28px}.nova-collections-library-intro{margin:12px 0 20px;padding:20px 16px;border-radius:15px}
.nova-collections-library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 8px}.nova-collections-library-grid .nova-movie-collection-poster{border-radius:10px}.nova-collections-library-grid .nova-movie-collection-copy{padding:8px 2px 0}.nova-collections-library-grid .nova-movie-collection-copy strong{font-size:.69rem}.nova-collections-library-grid .nova-movie-collection-copy small,.nova-collections-library-grid .nova-movie-collection-copy span{font-size:.58rem}.nova-collections-library-grid .nova-movie-collection-copy i{display:none}
}
/* -------------------------------------------------------------------------
V2.20 — Permanent compact glass header + safe content offset
The browser/collections headers now start in the exact compact glass state
used after scroll and never switch back to transparent. Content always
begins below the fixed header with a deliberate breathing gap.
------------------------------------------------------------------------- */
.nx2-section-browser-page,
.nova-collections-library,
.server-collection-details-shell{
--nx2-fixed-browser-header-h:54px;
--nx2-fixed-browser-gap:20px;
}
.catalog-landing-toolbar.nova-fixed-glass-header{
position:fixed;
top:0;
right:0;
left:0;
z-index:180;
width:100%;
box-sizing:border-box;
height:calc(var(--nx2-fixed-browser-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)));
min-height:calc(var(--nx2-fixed-browser-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)));
padding-top:var(--safe-top,env(safe-area-inset-top,0px));
background:rgba(0,0,0,.76);
border:0;
border-bottom:1px solid rgba(255,255,255,.055);
box-shadow:0 12px 30px rgba(0,0,0,.30);
backdrop-filter:blur(18px) saturate(1.08);
-webkit-backdrop-filter:blur(18px) saturate(1.08);
transition:none;
}
.nx2-section-browser-page .nx2-section-browser-header.nova-fixed-glass-header{
min-height:calc(var(--nx2-fixed-browser-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)));
padding:var(--safe-top,env(safe-area-inset-top,0px)) clamp(16px,2.55vw,40px) 0;
}
.nx2-section-browser-main{
padding-top:calc(var(--nx2-fixed-browser-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)) + var(--nx2-fixed-browser-gap,20px));
}
.nx2-section-browser-content{padding-top:0}
.nova-collections-library-main{
padding-top:calc(var(--nx2-fixed-browser-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)) + var(--nx2-fixed-browser-gap,20px));
}
.server-collection-details-shell>.catalog-landing-main,
.server-collection-details-shell>.nova-server-rendered-page-host{
padding-top:calc(var(--nx2-fixed-browser-header-h,54px) + var(--safe-top,env(safe-area-inset-top,0px)) + var(--nx2-fixed-browser-gap,20px));
}
@media (max-width:759px){
.nx2-section-browser-page,
.nova-collections-library,
.server-collection-details-shell{
--nx2-fixed-browser-header-h:54px;
--nx2-fixed-browser-gap:14px;
}
.nx2-section-browser-page .nx2-section-browser-header.nova-fixed-glass-header{padding-inline:10px}
}
/* ===== source: nova-browser-player.css ===== */
body.sg-player-open { overflow: hidden !important; }
.sg-player-layer {
position: fixed;
inset: 0;
width: 100dvw;
height: 100dvh;
z-index: 10000;
display: none;
overflow: hidden;
background: #000;
direction: ltr;
contain: strict;
overscroll-behavior: none;
}
.sg-player-layer.show { display: block; }
.sg-player-shell {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
color: #fff;
outline: none;
user-select: none;
touch-action: manipulation;
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
.sg-player-shell.ui-hidden { cursor: none; }
.sg-player-shell:fullscreen,
.sg-player-shell:-webkit-full-screen {
width: 100vw;
height: 100vh;
background: #000;
}
.sg-player-video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
background: #000;
object-fit: cover;
object-position: center center;
transform: translateZ(0);
will-change: auto;
}
.sg-player-shell.fit-cover .sg-player-video { object-fit: cover !important; }
.sg-player-shell.fit-fill .sg-player-video { object-fit: fill !important; }
.sg-player-shell.fit-contain .sg-player-video { object-fit: contain !important; }
.sg-player-shell.fit-scale-down .sg-player-video { object-fit: scale-down !important; }
.sg-player-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, transparent 64%, rgba(0,0,0,.88) 100%);
opacity: 1;
transition: opacity .18s ease;
}
.sg-player-ui {
transition: opacity .2s ease, transform .2s ease;
}
.sg-player-shell.ui-hidden .sg-player-ui,
.sg-player-shell.ui-hidden .sg-player-vignette {
opacity: 0;
pointer-events: none;
}
.sg-player-shell.ui-hidden .sg-player-topbar { transform: translateY(-14px); }
.sg-player-shell.ui-hidden .sg-player-controls { transform: translateY(16px); }
.sg-player-shell.ui-hidden .sg-player-center { transform: translate(-50%, -50%) scale(.94); }
.sg-player-shell.ui-hidden.is-buffering .sg-player-center {
opacity: 1;
pointer-events: none;
transform: translate(-50%, -50%) scale(1);
}
.sg-player-shell.ui-hidden.is-buffering .sg-player-center > .sg-player-skip { opacity: 0; }
.sg-player-shell.ui-hidden.is-buffering .sg-player-main-play { opacity: 0; }
.sg-player-topbar {
position: absolute;
z-index: 5;
top: 0;
right: 0;
left: 0;
min-height: calc(58px + env(safe-area-inset-top, 0px));
margin: 0;
padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
display: grid;
grid-template-columns: auto minmax(180px, 1fr) auto;
align-items: center;
gap: 14px;
direction: ltr;
}
.sg-player-heading {
min-width: 0;
display: grid;
gap: 3px;
direction: rtl;
text-align: left;
}
.sg-player-heading strong {
overflow: hidden;
color: #fff;
font-size: clamp(1rem, 1.45vw, 1.25rem);
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-player-heading span {
overflow: hidden;
color: rgba(255,255,255,.66);
font-size: .78rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-player-top-actions,
.sg-player-left-controls,
.sg-player-right-controls {
display: flex;
align-items: center;
gap: 9px;
}
.sg-player-icon,
.sg-player-skip,
.sg-player-main-play {
border: 0;
color: #fff;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.sg-player-icon {
width: 42px;
height: 42px;
padding: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(31,32,37,.82);
transition: background .14s ease, transform .14s ease;
}
.sg-player-icon:hover { background: rgba(64,65,72,.92); }
.sg-player-icon:active { transform: scale(.94); }
.sg-player-icon:focus-visible, .sg-player-skip:focus-visible, .sg-player-main-play:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 3px; }
.sg-player-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-player-back { background: transparent !important; }
.sg-player-topbar::before,
.sg-player-topbar::after {
content: none !important;
display: none !important;
}
.sg-player-topbar .sg-player-icon,
.sg-player-topbar .sg-player-select-wrap {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sg-player-select-wrap {
position: relative;
min-width: 64px;
height: 42px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: 999px;
background: rgba(31,32,37,.82);
color: #fff;
overflow: hidden;
}
.sg-player-select-wrap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sg-player-select-wrap span { font-size: .76rem; font-weight: 800; }
.sg-player-select-wrap select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.sg-player-center {
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
display: flex;
align-items: center;
gap: clamp(28px, 5vw, 72px);
transform: translate(-50%, -50%);
}
.sg-player-center-host {
position: relative;
width: 76px;
height: 76px;
flex: 0 0 76px;
}
.sg-player-main-play,
.sg-player-spinner {
position: absolute;
border-radius: 50%;
}
.sg-player-main-play {
inset: 0;
width: 76px;
height: 76px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
box-shadow: 0 14px 36px rgba(155,77,255,.30);
transition: opacity .14s ease, transform .14s ease;
}
.sg-player-main-play:hover { transform: scale(1.04); }
.sg-player-main-play svg { width: 32px; height: 32px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sg-player-main-play .sg-pause-glyph { display: none; fill: none; }
.sg-player-shell.is-playing .sg-player-main-play .sg-play-glyph { display: none; }
.sg-player-shell.is-playing .sg-player-main-play .sg-pause-glyph { display: block; }
.sg-player-spinner {
top: 6px;
left: 6px;
width: 64px;
height: 64px;
display: none;
border: 3px solid rgba(255,255,255,.2);
border-top-color: #9B4DFF;
animation: sg-spin .72s linear infinite;
}
.sg-player-shell.is-buffering .sg-player-spinner { display: block; }
.sg-player-shell.is-buffering .sg-player-main-play { opacity: 0; pointer-events: none; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-player-skip {
width: 58px;
height: 58px;
padding: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(22,23,27,.78);
transition: background .14s ease, transform .14s ease;
}
.sg-player-shell.is-live .sg-player-skip { opacity: .3; pointer-events: none; }
.sg-player-shell.is-live #sgSeek { opacity: .45; cursor: default; }
.sg-player-skip:hover { background: rgba(58,59,65,.9); }
.sg-player-skip:active { transform: scale(.93); }
.sg-player-skip svg { width: 31px; height: 31px; fill: none; stroke: #fff; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.sg-player-skip text { fill: #fff; stroke: none; font-size: 7px; font-weight: 800; text-anchor: middle; }
.sg-player-controls {
position: absolute;
z-index: 5;
right: 0;
bottom: 0;
left: 0;
padding: 18px 20px 17px;
direction: ltr;
}
.sg-player-timeline {
display: grid;
grid-template-columns: 58px minmax(100px, 1fr) 58px;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.82);
font-size: .74rem;
font-variant-numeric: tabular-nums;
}
.sg-player-timeline span:last-child { text-align: right; }
.sg-player-timeline input,
.sg-player-volume,
.sg-player-brightness {
accent-color: #9B4DFF;
cursor: pointer;
}
#sgSeek {
width: 100%;
direction: ltr;
}
.sg-player-control-row {
min-height: 50px;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.sg-player-play-small .sg-pause-glyph { display: none; fill: none; }
.sg-player-shell.is-playing .sg-player-play-small .sg-play-glyph { display: none; }
.sg-player-shell.is-playing .sg-player-play-small .sg-pause-glyph { display: block; }
.sg-player-shell.is-muted .sg-volume-on { display: none; }
.sg-player-shell:not(.is-muted) .sg-volume-off { display: none; }
.sg-player-volume { width: 94px; }
.sg-player-brightness { width: 82px; }
.sg-player-badge {
min-height: 28px;
padding: 0 10px;
display: inline-flex;
align-items: center;
border-radius: 7px;
background: linear-gradient(135deg, #F04AD8 0%, #9B4DFF 48%, #14D7FF 100%);
color: #fff;
font-size: .67rem;
font-weight: 900;
direction: ltr;
}
.sg-player-quality-wrap {
height: 38px;
padding: 0 11px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 9px;
background: rgba(31,32,37,.82);
color: #fff;
font-size: .72rem;
}
.sg-player-quality-wrap select {
border: 0;
outline: none;
background: transparent;
color: #fff;
font: inherit;
cursor: pointer;
}
.sg-player-quality-wrap option { color: #111; }
.sg-player-toast {
position: absolute;
z-index: 9;
right: 50%;
bottom: 105px;
max-width: min(560px, 76vw);
padding: 10px 16px;
border-radius: 10px;
background: rgba(20,21,25,.94);
color: #fff;
font-size: .78rem;
text-align: center;
direction: rtl;
opacity: 0;
pointer-events: none;
transform: translate(50%, 8px);
transition: opacity .16s ease, transform .16s ease;
}
.sg-player-toast.show { opacity: 1; transform: translate(50%, 0); }
@media (max-width: 860px) {
.sg-player-topbar { grid-template-columns: auto minmax(120px, 1fr) auto; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; }
.sg-player-top-actions .sg-player-select-wrap { display: none; }
.sg-player-volume, .sg-player-brightness, #sgBrightnessButton { display: none; }
.sg-player-quality-wrap span { display: none; }
.sg-player-center { gap: 24px; }
.sg-player-skip { width: 50px; height: 50px; }
.sg-player-center-host, .sg-player-main-play { width: 66px; height: 66px; }
.sg-player-spinner { top: 5px; left: 5px; width: 56px; height: 56px; }
.sg-player-controls { padding-inline: 12px; }
}
/* SPACEGATE_PLAYER_EXPERIENCE_V53_3 */
.sg-player-shell {
--sg-accent-cyan: #1fd7ff;
--sg-accent-blue: #3a7bff;
--sg-accent-violet: #8f46ff;
--sg-accent-magenta: #d74dff;
--sg-ui-surface: rgba(14, 16, 24, .74);
--sg-ui-border: rgba(255,255,255,.08);
--sg-range-height: 4px;
--sg-range-thumb: 13px;
font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
}
.sg-player-layer,
.sg-player-shell,
.sg-player-shell:fullscreen,
.sg-player-shell:-webkit-full-screen {
height: var(--sg-app-vh, 100dvh);
}
.sg-player-topbar {
min-height: calc(62px + env(safe-area-inset-top, 0px));
padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px;
}
.sg-player-heading strong {
font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
font-size: clamp(1.12rem, 1.8vw, 1.5rem);
font-weight: 700;
line-height: 1.15;
}
.sg-player-heading span {
font-size: .85rem;
color: rgba(255,255,255,.72);
}
.sg-player-icon,
.sg-player-select-wrap,
.sg-player-quality-wrap,
.sg-player-skip {
border: 1px solid var(--sg-ui-border);
background: var(--sg-ui-surface) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.sg-player-main-play,
.sg-player-badge {
background: linear-gradient(135deg, var(--sg-accent-magenta) 0%, var(--sg-accent-violet) 48%, var(--sg-accent-cyan) 100%);
box-shadow: 0 14px 36px rgba(79, 114, 255, .25);
}
.sg-player-badge {
min-width: 74px;
justify-content: center;
font-size: .72rem;
letter-spacing: .02em;
}
.sg-player-spinner {
border-top-color: var(--sg-accent-cyan);
border-right-color: var(--sg-accent-violet);
box-shadow: 0 0 18px rgba(31,215,255,.18);
}
.sg-player-sequence[hidden] { display: none !important; }
.sg-player-sequence:disabled { opacity: .38; cursor: default; }
.sg-player-sequence:not(:disabled):hover {
color: var(--sg-accent-cyan);
border-color: rgba(31,215,255,.34);
}
.sg-player-timeline input,
.sg-player-volume,
.sg-player-brightness {
accent-color: var(--sg-accent-violet);
}
#sgSeek,
.sg-player-volume,
.sg-player-brightness {
--sg-fill: 0%;
--sg-buffered: 0%;
-webkit-appearance: none;
appearance: none;
background: transparent;
}
#sgSeek::-webkit-slider-runnable-track,
.sg-player-volume::-webkit-slider-runnable-track,
.sg-player-brightness::-webkit-slider-runnable-track {
height: var(--sg-range-height);
border-radius: 999px;
background: linear-gradient(to right,
var(--sg-accent-magenta) 0%,
var(--sg-accent-violet) calc(var(--sg-fill) * .6),
var(--sg-accent-cyan) var(--sg-fill),
rgba(255,255,255,.20) var(--sg-fill),
rgba(255,255,255,.20) var(--sg-buffered),
rgba(255,255,255,.08) var(--sg-buffered),
rgba(255,255,255,.08) 100%);
}
.sg-player-volume::-moz-range-track,
.sg-player-brightness::-moz-range-track,
#sgSeek::-moz-range-track {
height: var(--sg-range-height);
border-radius: 999px;
background: rgba(255,255,255,.12);
}
#sgSeek::-webkit-slider-thumb,
.sg-player-volume::-webkit-slider-thumb,
.sg-player-brightness::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--sg-range-thumb);
height: var(--sg-range-thumb);
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 3px rgba(143,70,255,.25);
margin-top: calc((var(--sg-range-height) - var(--sg-range-thumb)) / 2);
}
#sgSeek::-moz-range-thumb,
.sg-player-volume::-moz-range-thumb,
.sg-player-brightness::-moz-range-thumb {
width: var(--sg-range-thumb);
height: var(--sg-range-thumb);
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 3px rgba(143,70,255,.25);
}
.sg-player-volume { width: 88px; }
.sg-player-brightness { width: 76px; }
.sg-player-quality-wrap select,
.sg-player-select-wrap select { font-family: inherit; }
.sg-player-toast {
background: rgba(11, 14, 21, .92);
border: 1px solid rgba(255,255,255,.08);
}
.sg-player-shell.is-android-shell .sg-player-controls {
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.sg-player-shell.is-android-shell .sg-player-topbar {
padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
@media (pointer: coarse) {
.sg-player-controls { padding-inline: 14px; }
.sg-player-control-row { min-height: 54px; }
.sg-player-icon { width: 44px; height: 44px; }
.sg-player-quality-wrap { height: 40px; }
}
@media (max-width: 860px) {
.sg-player-topbar {
grid-template-columns: auto minmax(140px, 1fr) auto;
gap: 10px;
}
.sg-player-top-actions { gap: 5px; }
.sg-player-top-actions .sg-player-sequence { display: grid; }
.sg-player-heading strong { font-size: 1.05rem; }
.sg-player-controls { padding-inline: 12px; }
.sg-player-timeline { grid-template-columns: 50px minmax(80px, 1fr) 50px; }
.sg-player-badge { min-width: 68px; }
}
/* SPACEGATE_WEB_PLAYER_HARDENING_R1 */
.sg-player-forensic-mark {
position: absolute;
z-index: 4;
max-width: 34vw;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .09em;
color: rgba(255,255,255,.32);
background: rgba(0,0,0,.12);
border: 1px solid rgba(255,255,255,.08);
border-radius: 5px;
padding: 4px 6px;
text-shadow: 0 1px 2px rgba(0,0,0,.7);
transform: translate(-50%, -50%) rotate(-8deg);
mix-blend-mode: screen;
transition: left .45s ease, top .45s ease, opacity .2s ease;
}
.sg-player-forensic-mark[hidden] { display: none !important; }
/* SPACEGATE_MOBILE_SELECT_GUARD_R1
Keep native select controls stable while Android/iOS opens the system picker. */
.sg-player-quality-wrap,
.sg-player-select-wrap {
touch-action: auto;
}
.sg-player-quality-wrap select,
.sg-player-select-wrap select {
touch-action: auto;
pointer-events: auto;
-webkit-user-select: auto;
user-select: auto;
}
@media (pointer: coarse) {
.sg-player-quality-wrap select,
.sg-player-select-wrap select {
min-height: 40px;
}
}
/* SPACEGATE_MOBILE_TOP_SOURCE_MENU_R3
Exact target: server/quality control directly beside 1X in the top bar. */
.sg-player-source-mobile-trigger {
display: none;
flex: 0 0 auto;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.sg-player-source-mobile-trigger svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
}
.sg-player-shell.uses-mobile-source-sheet .sg-player-source-native {
display: none !important;
}
.sg-player-shell.uses-mobile-source-sheet .sg-player-source-mobile-trigger {
display: grid !important;
}
.sg-player-mobile-source-sheet {
position: absolute;
z-index: 96;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding: calc(66px + env(safe-area-inset-top, 0px)) 12px 12px;
visibility: hidden;
opacity: 0;
pointer-events: none;
direction: rtl;
transition: opacity .12s ease, visibility .12s ease;
}
.sg-player-mobile-source-sheet.show {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.sg-player-mobile-source-backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: rgba(0,0,0,.54);
touch-action: none;
}
.sg-player-mobile-source-panel {
position: relative;
z-index: 1;
width: min(92vw, 460px);
max-height: min(72dvh, 520px);
padding: 10px;
border: 1px solid rgba(255,255,255,.13);
border-radius: 16px;
background: rgba(12,14,20,.985);
box-shadow: 0 18px 55px rgba(0,0,0,.48);
overflow: hidden;
touch-action: pan-y;
}
.sg-player-mobile-source-head {
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 4px 8px;
}
.sg-player-mobile-source-head strong {
font-size: .94rem;
font-weight: 900;
}
.sg-player-mobile-source-close {
width: 38px;
height: 38px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
background: rgba(255,255,255,.06);
color: #fff;
font: inherit;
font-size: 1.45rem;
line-height: 1;
touch-action: manipulation;
}
.sg-player-mobile-source-list {
max-height: calc(min(72dvh, 520px) - 58px);
display: grid;
gap: 8px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
.sg-player-mobile-source-option {
width: 100%;
min-height: 50px;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
background: rgba(255,255,255,.055);
color: #fff;
font: inherit;
font-size: .84rem;
font-weight: 800;
text-align: right;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.sg-player-mobile-source-option.selected {
border-color: rgba(31,215,255,.72);
background: rgba(31,215,255,.14);
box-shadow: inset 0 0 0 1px rgba(143,70,255,.24);
}
.sg-player-shell.mobile-source-open .sg-player-ui {
pointer-events: none;
}
.sg-player-shell.mobile-source-open .sg-player-mobile-source-sheet,
.sg-player-shell.mobile-source-open .sg-player-mobile-source-sheet * {
pointer-events: auto;
}
@media (orientation: landscape) and (max-height: 600px) {
.sg-player-mobile-source-sheet {
padding-top: calc(52px + env(safe-area-inset-top, 0px));
}
.sg-player-mobile-source-panel {
width: min(86vw, 640px);
max-height: 78dvh;
}
.sg-player-mobile-source-list {
max-height: calc(78dvh - 58px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* SPACEGATE_ANDROID_NATIVE_PLAYER_R4
Touch-first Android player polish, compact glass source menu and cinematic fallback. */
.sg-player-shell {
--sg-glass-bg: rgba(9, 13, 21, .58);
--sg-glass-bg-strong: rgba(9, 13, 21, .76);
--sg-glass-border: rgba(255,255,255,.13);
--sg-glass-highlight: rgba(255,255,255,.18);
--sg-accent-electric: #25c8ff;
--sg-accent-deep: #675cff;
}
.sg-player-shell::before {
content: "";
position: absolute;
z-index: 0;
inset: -4%;
pointer-events: none;
background-image:
linear-gradient(180deg, rgba(2,5,10,.18), rgba(0,0,0,.50)),
var(--sg-player-artwork, url('/app/assets/images/nova-player-cinematic-fallback.svg?v=player-nova-identity-r6-20260918'));
background-size: cover;
background-position: center;
filter: blur(12px) saturate(1.08) brightness(.68);
transform: scale(1.06);
opacity: .92;
}
.sg-player-video {
z-index: 1;
background: transparent !important;
}
.sg-player-vignette {
z-index: 3;
background:
linear-gradient(180deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.08) 23%, transparent 47%, rgba(0,0,0,.14) 66%, rgba(0,0,0,.88) 100%);
}
.sg-player-brand-watermark { z-index: 4; }
.sg-player-topbar,
.sg-player-center,
.sg-player-controls { z-index: 8; }
/* Keep touch gestures native-feeling and stop browser panning from stealing vertical swipes. */
.sg-player-shell.has-native-touch-gestures .sg-player-video {
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.sg-player-gesture-hud {
position: absolute;
z-index: 94;
top: 50%;
width: 64px;
min-height: 154px;
padding: 12px 10px 10px;
display: grid;
justify-items: center;
align-content: center;
gap: 8px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 22px;
background: linear-gradient(180deg, rgba(24,31,43,.66), rgba(5,8,14,.72));
box-shadow: 0 18px 55px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
-webkit-backdrop-filter: blur(20px) saturate(145%);
backdrop-filter: blur(20px) saturate(145%);
color: #fff;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) scale(.94);
transition: opacity .13s ease, transform .13s ease;
}
.sg-player-gesture-hud.is-volume {
right: max(18px, calc(env(safe-area-inset-right, 0px) + 12px));
}
.sg-player-gesture-hud.is-brightness {
left: max(18px, calc(env(safe-area-inset-left, 0px) + 12px));
}
.sg-player-gesture-hud.show {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.sg-player-gesture-icon {
width: 30px;
height: 30px;
display: grid;
place-items: center;
color: #fff;
}
.sg-player-gesture-icon svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.sg-player-gesture-meter {
position: relative;
width: 7px;
height: 70px;
overflow: hidden;
border-radius: 999px;
background: rgba(255,255,255,.13);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.sg-player-gesture-meter i {
--sg-gesture-fill: 0%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: var(--sg-gesture-fill);
border-radius: inherit;
background: linear-gradient(180deg, var(--sg-accent-electric), #2a80ff 55%, var(--sg-accent-deep));
box-shadow: 0 0 14px rgba(37,200,255,.42);
}
.sg-player-gesture-value {
font-size: .72rem;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.sg-player-gesture-label {
font-size: .61rem;
color: rgba(255,255,255,.66);
font-weight: 700;
}
/* R4: compact premium glass source/quality menu. */
.sg-player-mobile-source-sheet {
z-index: 98;
direction: ltr;
align-items: flex-start;
justify-content: flex-end;
padding: calc(60px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
}
.sg-player-mobile-source-backdrop {
background: rgba(0,0,0,.20);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.sg-player-mobile-source-panel {
box-sizing: border-box;
direction: rtl;
width: min(78vw, 318px);
max-height: min(64dvh, 420px);
padding: 8px;
border: 1px solid var(--sg-glass-border);
border-radius: 16px;
background:
linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 42%),
var(--sg-glass-bg);
box-shadow: 0 18px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
-webkit-backdrop-filter: blur(24px) saturate(150%);
backdrop-filter: blur(24px) saturate(150%);
}
.sg-player-mobile-source-head {
min-height: 38px;
gap: 8px;
padding: 1px 3px 7px;
}
.sg-player-mobile-source-title {
min-width: 0;
display: grid;
gap: 1px;
}
.sg-player-mobile-source-title strong {
font-size: .82rem;
line-height: 1.15;
font-weight: 900;
}
.sg-player-mobile-source-title small {
font-size: .60rem;
color: rgba(255,255,255,.54);
font-weight: 700;
}
.sg-player-mobile-source-close {
width: 32px;
height: 32px;
border-color: rgba(255,255,255,.10);
background: rgba(255,255,255,.055);
font-size: 1.15rem;
}
.sg-player-mobile-source-list {
max-height: calc(min(64dvh, 420px) - 51px);
gap: 5px;
padding: 1px;
scrollbar-width: thin;
}
.sg-player-mobile-source-option {
min-height: 44px;
padding: 7px 9px;
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
border-color: rgba(255,255,255,.075);
border-radius: 11px;
background: rgba(255,255,255,.045);
font-size: .76rem;
text-align: right;
transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.sg-player-mobile-source-option:active { transform: scale(.985); }
.sg-player-mobile-source-check {
width: 20px;
height: 20px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05);
color: transparent;
font-size: .70rem;
font-weight: 900;
}
.sg-player-mobile-source-copy {
min-width: 0;
display: grid;
gap: 1px;
}
.sg-player-mobile-source-copy strong {
overflow: hidden;
color: rgba(255,255,255,.96);
font-size: .78rem;
font-weight: 850;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-player-mobile-source-copy small {
overflow: hidden;
color: rgba(255,255,255,.50);
font-size: .59rem;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-player-mobile-source-quality {
min-width: 48px;
padding: 4px 7px;
border: 1px solid rgba(255,255,255,.09);
border-radius: 8px;
background: rgba(255,255,255,.055);
color: rgba(255,255,255,.78);
font-size: .64rem;
font-weight: 900;
text-align: center;
direction: ltr;
}
.sg-player-mobile-source-option.selected {
border-color: rgba(37,200,255,.50);
background: linear-gradient(135deg, rgba(37,200,255,.12), rgba(103,92,255,.10));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 5px 16px rgba(0,0,0,.12);
}
.sg-player-mobile-source-option.selected .sg-player-mobile-source-check {
border-color: rgba(37,200,255,.65);
background: linear-gradient(135deg, #25c8ff, #675cff);
color: #fff;
}
.sg-player-mobile-source-option.selected .sg-player-mobile-source-quality {
border-color: rgba(37,200,255,.38);
background: rgba(37,200,255,.12);
color: #e9fbff;
}
.sg-player-shell.mobile-source-open .sg-player-source-mobile-trigger {
border-color: rgba(37,200,255,.48);
background: linear-gradient(135deg, rgba(37,200,255,.15), rgba(103,92,255,.14)) !important;
color: #ecfbff;
box-shadow: 0 0 0 1px rgba(37,200,255,.08), 0 8px 24px rgba(0,0,0,.18);
}
/* Larger, clearer touch targets while keeping the top bar compact. */
@media (pointer: coarse) {
.sg-player-ui { transition-duration: .16s; }
.sg-player-icon {
width: 46px;
height: 46px;
border-radius: 13px;
-webkit-tap-highlight-color: transparent;
}
.sg-player-top-actions .sg-player-icon,
.sg-player-top-actions .sg-player-select-wrap {
width: 42px;
min-width: 42px;
height: 42px;
border-radius: 12px;
}
.sg-player-select-wrap { min-width: 42px; }
.sg-player-center { gap: clamp(22px, 7vw, 44px); }
.sg-player-center-host,
.sg-player-main-play {
width: clamp(84px, 13dvh, 94px);
height: clamp(84px, 13dvh, 94px);
}
.sg-player-main-play {
border: 1px solid rgba(255,255,255,.28);
background: rgba(8,12,20,.52) !important;
box-shadow: 0 16px 42px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(37,200,255,.10);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
}
.sg-player-main-play svg {
width: clamp(34px, 5.2dvh, 42px);
height: clamp(34px, 5.2dvh, 42px);
}
.sg-player-spinner {
top: 6px;
left: 6px;
width: calc(clamp(84px, 13dvh, 94px) - 12px);
height: calc(clamp(84px, 13dvh, 94px) - 12px);
}
.sg-player-skip {
width: clamp(54px, 8.4dvh, 62px);
height: clamp(54px, 8.4dvh, 62px);
border-radius: 50%;
background: rgba(8,12,20,.48) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.sg-player-skip svg { width: 32px; height: 32px; }
.sg-player-controls {
padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,.70) 100%);
}
.sg-player-control-row { margin-top: 7px; min-height: 50px; }
#sgSeek { --sg-range-height: 5px; --sg-range-thumb: 16px; min-height: 28px; }
.sg-player-timeline { font-size: .70rem; }
.sg-player-toast {
bottom: 98px;
padding: 8px 13px;
border-radius: 12px;
background: rgba(7,10,16,.68);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
}
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
.sg-player-topbar {
min-height: calc(52px + env(safe-area-inset-top, 0px));
padding-top: calc(6px + env(safe-area-inset-top, 0px));
padding-bottom: 4px;
}
.sg-player-heading strong { font-size: .96rem; }
.sg-player-heading span { font-size: .68rem; }
.sg-player-mobile-source-sheet {
padding-top: calc(50px + env(safe-area-inset-top, 0px));
}
.sg-player-mobile-source-panel {
width: min(42vw, 310px);
max-height: 72dvh;
}
.sg-player-mobile-source-list {
max-height: calc(72dvh - 51px);
grid-template-columns: 1fr;
}
.sg-player-gesture-hud {
min-height: 138px;
padding-block: 10px 8px;
}
.sg-player-gesture-meter { height: 58px; }
}
/* SPACEGATE_ANDROID_PLAYER_POLISH_R5
Mobile/coarse-pointer polish: gesture-only sound/brightness controls and premium seek timeline. */
.sg-player-shell {
--sg-progress-played: #24c7ff;
--sg-progress-played-2: #4f8dff;
--sg-progress-buffered: rgba(218, 238, 255, .24);
--sg-progress-idle: rgba(155, 181, 207, .16);
--sg-progress-frame: rgba(153, 210, 255, .085);
--sg-progress-surface: rgba(7, 13, 22, .36);
}
/* Timeline gets its own quiet glass surface instead of a heavy dark strip. */
.sg-player-timeline {
min-height: 34px;
padding: 3px 9px;
border: 1px solid var(--sg-progress-frame);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.010)),
var(--sg-progress-surface);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 8px 24px rgba(0,0,0,.10);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
}
.sg-player-timeline > span {
color: rgba(235, 245, 255, .76);
font-size: .68rem;
font-weight: 700;
letter-spacing: .01em;
text-shadow: 0 1px 6px rgba(0,0,0,.32);
}
/* Large invisible hit-area, slim visible rail. */
#sgSeek {
--sg-range-height: 4px;
--sg-range-thumb: 14px;
min-height: 30px;
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
touch-action: pan-x;
-webkit-tap-highlight-color: transparent;
}
#sgSeek::-webkit-slider-runnable-track {
height: var(--sg-range-height);
border: 1px solid rgba(255,255,255,.045);
border-radius: 999px;
background: linear-gradient(to right,
var(--sg-progress-played) 0%,
var(--sg-progress-played-2) var(--sg-fill),
var(--sg-progress-buffered) var(--sg-fill),
var(--sg-progress-buffered) var(--sg-buffered),
var(--sg-progress-idle) var(--sg-buffered),
var(--sg-progress-idle) 100%);
box-shadow:
inset 0 1px 2px rgba(0,0,0,.38),
0 0 0 1px rgba(0,0,0,.10);
}
#sgSeek::-moz-range-track {
height: var(--sg-range-height);
border: 1px solid rgba(255,255,255,.045);
border-radius: 999px;
background: var(--sg-progress-idle);
box-shadow: inset 0 1px 2px rgba(0,0,0,.38);
}
#sgSeek::-moz-range-progress {
height: var(--sg-range-height);
border: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--sg-progress-played), var(--sg-progress-played-2));
}
#sgSeek::-webkit-slider-thumb {
width: var(--sg-range-thumb);
height: var(--sg-range-thumb);
border: 2px solid rgba(220, 250, 255, .94);
background: var(--sg-progress-played);
box-shadow:
0 0 0 3px rgba(36,199,255,.14),
0 0 15px rgba(36,199,255,.34),
0 2px 6px rgba(0,0,0,.28);
}
#sgSeek::-moz-range-thumb {
width: var(--sg-range-thumb);
height: var(--sg-range-thumb);
border: 2px solid rgba(220, 250, 255, .94);
background: var(--sg-progress-played);
box-shadow:
0 0 0 3px rgba(36,199,255,.14),
0 0 15px rgba(36,199,255,.34),
0 2px 6px rgba(0,0,0,.28);
}
#sgSeek:focus-visible {
outline: none;
}
#sgSeek:focus-visible::-webkit-slider-thumb {
box-shadow:
0 0 0 4px rgba(36,199,255,.22),
0 0 18px rgba(36,199,255,.42);
}
/* On Android/touch mode the vertical gestures are the primary controls.
Remove the duplicated bottom sound + brightness cluster at every landscape width. */
.sg-player-shell.has-native-touch-gestures #sgMute,
.sg-player-shell.has-native-touch-gestures .sg-player-volume,
.sg-player-shell.has-native-touch-gestures #sgBrightnessButton,
.sg-player-shell.has-native-touch-gestures .sg-player-brightness {
display: none !important;
}
.sg-player-shell.has-native-touch-gestures .sg-player-left-controls {
gap: 6px;
}
@media (pointer: coarse) {
.sg-player-timeline {
grid-template-columns: 52px minmax(120px, 1fr) 52px;
gap: 8px;
min-height: 36px;
padding: 3px 8px;
border-radius: 13px;
}
#sgSeek {
--sg-range-height: 5px;
--sg-range-thumb: 15px;
min-height: 32px;
}
.sg-player-controls {
padding-top: 12px;
}
.sg-player-control-row {
margin-top: 5px;
min-height: 46px;
}
}
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
.sg-player-timeline {
min-height: 32px;
padding-block: 2px;
}
#sgSeek { min-height: 28px; }
.sg-player-controls {
padding-top: 8px;
padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
}
.sg-player-control-row {
min-height: 42px;
margin-top: 3px;
}
}
/* SPACEGATE_NOVA_IDENTITY_R6
NOVA+ identity pass: frameless seek timeline + branded quality badges.
Brand palette taken from the supplied NOVA identity board:
cyan #00E5FF, blue #2B7BFF, violet #7B5CFF, magenta #FF4EDB. */
.sg-player-shell {
--nova-cyan: #00E5FF;
--nova-blue: #2B7BFF;
--nova-violet: #7B5CFF;
--nova-magenta: #FF4EDB;
--nova-night: #07111F;
--nova-night-2: #0B1020;
--sg-progress-buffered: rgba(148, 172, 211, .26);
--sg-progress-idle: rgba(173, 192, 222, .16);
}
/* R6: absolutely no frame, glass box, outline or surface around the seek area. */
.sg-player-timeline,
.sg-player-shell.has-native-touch-gestures .sg-player-timeline {
min-height: 31px;
padding: 0;
border: 0 !important;
outline: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.sg-player-timeline > span {
color: rgba(244,248,255,.82);
text-shadow: 0 1px 7px rgba(0,0,0,.5);
}
/* Keep a generous invisible touch target but render only a slim NOVA rail. */
#sgSeek {
--sg-range-height: 5px;
--sg-range-thumb: 15px;
min-height: 31px;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#sgSeek::-webkit-slider-runnable-track {
height: var(--sg-range-height);
border: 0 !important;
outline: 0 !important;
border-radius: 999px;
background:
linear-gradient(90deg,
var(--nova-cyan) 0%,
var(--nova-blue) 38%,
var(--nova-violet) 70%,
var(--nova-magenta) 100%)
0 50% / var(--sg-fill) 100% no-repeat,
linear-gradient(90deg,
var(--sg-progress-buffered) 0%,
var(--sg-progress-buffered) var(--sg-buffered),
var(--sg-progress-idle) var(--sg-buffered),
var(--sg-progress-idle) 100%);
box-shadow: none !important;
}
#sgSeek::-moz-range-track {
height: var(--sg-range-height);
border: 0 !important;
border-radius: 999px;
background: var(--sg-progress-idle);
box-shadow: none !important;
}
#sgSeek::-moz-range-progress {
height: var(--sg-range-height);
border: 0 !important;
border-radius: 999px;
background: linear-gradient(90deg,
var(--nova-cyan) 0%,
var(--nova-blue) 38%,
var(--nova-violet) 70%,
var(--nova-magenta) 100%);
box-shadow: none !important;
}
#sgSeek::-webkit-slider-thumb {
width: var(--sg-range-thumb);
height: var(--sg-range-thumb);
border: 0 !important;
background: linear-gradient(135deg, var(--nova-cyan), var(--nova-violet) 58%, var(--nova-magenta));
box-shadow:
0 0 0 2px rgba(255,255,255,.82),
0 0 15px rgba(43,123,255,.46),
0 0 25px rgba(255,78,219,.17),
0 2px 7px rgba(0,0,0,.34);
}
#sgSeek::-moz-range-thumb {
width: var(--sg-range-thumb);
height: var(--sg-range-thumb);
border: 0 !important;
background: linear-gradient(135deg, var(--nova-cyan), var(--nova-violet) 58%, var(--nova-magenta));
box-shadow:
0 0 0 2px rgba(255,255,255,.82),
0 0 15px rgba(43,123,255,.46),
0 0 25px rgba(255,78,219,.17),
0 2px 7px rgba(0,0,0,.34);
}
#sgSeek:focus-visible::-webkit-slider-thumb {
box-shadow:
0 0 0 2px rgba(255,255,255,.92),
0 0 0 6px rgba(123,92,255,.15),
0 0 20px rgba(0,229,255,.42),
0 0 30px rgba(255,78,219,.18);
}
/* NOVA palette carries through the gesture HUD. */
.sg-player-gesture-meter i {
background: linear-gradient(180deg,
var(--nova-cyan) 0%,
var(--nova-blue) 36%,
var(--nova-violet) 70%,
var(--nova-magenta) 100%);
box-shadow: 0 0 15px rgba(0,229,255,.34), 0 0 24px rgba(123,92,255,.16);
}
/* Refined NOVA glass source/quality menu. */
.sg-player-mobile-source-panel {
border-color: rgba(123,92,255,.24);
background:
radial-gradient(circle at 100% 0%, rgba(0,229,255,.09), transparent 34%),
radial-gradient(circle at 0% 100%, rgba(255,78,219,.08), transparent 36%),
linear-gradient(155deg, rgba(15,23,43,.88), rgba(5,10,20,.91));
box-shadow:
0 22px 58px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.075),
0 0 0 1px rgba(0,229,255,.035);
}
.sg-player-mobile-source-title strong {
background: linear-gradient(90deg, #fff 0%, #dff9ff 42%, #eadfff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sg-player-mobile-source-option {
border-color: rgba(143,161,199,.11);
background: rgba(255,255,255,.038);
}
.sg-player-mobile-source-option.selected {
border-color: rgba(0,229,255,.48);
background:
linear-gradient(105deg, rgba(0,229,255,.12), rgba(43,123,255,.10) 36%, rgba(123,92,255,.13) 72%, rgba(255,78,219,.10));
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.025),
0 0 18px rgba(43,123,255,.11);
}
.sg-player-mobile-source-check {
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.045);
}
.sg-player-mobile-source-option.selected .sg-player-mobile-source-check {
border-color: transparent;
background: linear-gradient(135deg, var(--nova-cyan), var(--nova-blue) 45%, var(--nova-violet) 76%, var(--nova-magenta));
color: #fff;
box-shadow: 0 0 12px rgba(0,229,255,.26);
}
/* Quality cell: resolution + a compact commercial tier badge. */
.sg-player-mobile-source-quality {
min-width: 86px;
padding: 0;
border: 0 !important;
border-radius: 0;
background: transparent !important;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: rgba(240,246,255,.76);
white-space: nowrap;
}
.sg-player-mobile-source-resolution {
font-size: .61rem;
font-weight: 800;
letter-spacing: .01em;
direction: ltr;
}
.sg-player-mobile-source-quality-badge {
min-width: 31px;
height: 21px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.13);
border-radius: 6px;
color: #fff;
font-size: .58rem;
line-height: 1;
font-style: normal;
font-weight: 950;
letter-spacing: .015em;
text-shadow: 0 1px 4px rgba(0,0,0,.38);
box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 3px 9px rgba(0,0,0,.18);
}
.sg-player-mobile-source-quality.quality-4k .sg-player-mobile-source-quality-badge {
background: linear-gradient(135deg, var(--nova-violet), var(--nova-magenta));
box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 12px rgba(255,78,219,.20);
}
.sg-player-mobile-source-quality.quality-fhd .sg-player-mobile-source-quality-badge {
background: linear-gradient(135deg, var(--nova-cyan), var(--nova-blue));
color: #061322;
text-shadow: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 12px rgba(0,229,255,.18);
}
.sg-player-mobile-source-quality.quality-hd .sg-player-mobile-source-quality-badge {
background: linear-gradient(135deg, var(--nova-blue), var(--nova-violet));
}
.sg-player-mobile-source-quality.quality-sd .sg-player-mobile-source-quality-badge {
border-color: rgba(123,92,255,.25);
background: linear-gradient(135deg, rgba(34,49,79,.96), rgba(47,39,79,.96));
color: #dce7ff;
}
.sg-player-mobile-source-quality.quality-auto .sg-player-mobile-source-quality-badge {
border-color: transparent;
background: linear-gradient(135deg, var(--nova-cyan), var(--nova-blue) 36%, var(--nova-violet) 68%, var(--nova-magenta));
color: #fff;
}
.sg-player-mobile-source-option.selected .sg-player-mobile-source-quality-badge {
transform: translateZ(0);
filter: saturate(1.12) brightness(1.05);
}
.sg-player-shell.mobile-source-open .sg-player-source-mobile-trigger {
border-color: rgba(0,229,255,.42);
background: linear-gradient(135deg, rgba(0,229,255,.13), rgba(123,92,255,.14), rgba(255,78,219,.10)) !important;
box-shadow: 0 0 0 1px rgba(0,229,255,.07), 0 7px 22px rgba(0,0,0,.20), 0 0 20px rgba(123,92,255,.09);
}
@media (pointer: coarse) {
.sg-player-timeline,
.sg-player-shell.has-native-touch-gestures .sg-player-timeline {
min-height: 32px;
padding: 0;
}
#sgSeek {
--sg-range-height: 5px;
--sg-range-thumb: 15px;
min-height: 32px;
}
}
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
.sg-player-timeline,
.sg-player-shell.has-native-touch-gestures .sg-player-timeline {
min-height: 29px;
padding: 0;
}
#sgSeek { min-height: 29px; }
.sg-player-mobile-source-quality { min-width: 80px; gap: 5px; }
.sg-player-mobile-source-quality-badge { min-width: 29px; height: 20px; padding-inline: 5px; }
}
/* SPACEGATE_COMMERCIAL_PLAYER_R7
Premium NOVA material, richer motion and native-style Android double-tap seek.
Keeps the R6 frameless seek rail intact. */
.sg-player-shell {
--nova-r7-glass: rgba(7, 14, 28, .58);
--nova-r7-glass-strong: rgba(8, 15, 30, .78);
--nova-r7-border: rgba(190, 221, 255, .14);
--nova-r7-border-active: rgba(0, 229, 255, .38);
--nova-r7-shadow: 0 12px 34px rgba(0, 0, 0, .34);
--nova-r7-ease: cubic-bezier(.2,.82,.2,1);
}
/* Stronger cinema material without boxing the progress timeline. */
.sg-player-vignette {
background:
radial-gradient(circle at 50% 46%, transparent 22%, rgba(2, 5, 13, .10) 58%, rgba(1, 3, 9, .40) 100%),
linear-gradient(180deg, rgba(3, 8, 18, .44) 0%, rgba(3, 8, 18, .08) 23%, transparent 43%, transparent 59%, rgba(3, 7, 16, .18) 77%, rgba(2, 5, 13, .70) 100%);
}
.sg-player-topbar {
background: linear-gradient(180deg, rgba(3,8,20,.72) 0%, rgba(3,8,20,.30) 56%, transparent 100%);
transition: opacity .28s var(--nova-r7-ease), transform .34s var(--nova-r7-ease), filter .34s var(--nova-r7-ease);
}
.sg-player-controls {
background: linear-gradient(180deg, transparent 0%, rgba(3,7,16,.10) 15%, rgba(3,7,16,.48) 70%, rgba(2,5,13,.76) 100%);
transition: opacity .27s var(--nova-r7-ease), transform .34s var(--nova-r7-ease), filter .34s var(--nova-r7-ease);
}
.sg-player-center {
transition: opacity .24s var(--nova-r7-ease), transform .34s var(--nova-r7-ease), filter .34s var(--nova-r7-ease);
}
.sg-player-shell.ui-hidden .sg-player-topbar {
transform: translateY(-14px);
filter: blur(2px);
}
.sg-player-shell.ui-hidden .sg-player-controls {
transform: translateY(18px);
filter: blur(2px);
}
.sg-player-shell.ui-hidden .sg-player-center {
transform: translate(-50%, -50%) scale(.91);
filter: blur(1.2px);
}
/* Premium individual material for controls: clearer, larger, more commercial. */
.sg-player-icon,
.sg-player-quality-wrap,
.sg-player-select-wrap,
.sg-player-source-mobile-trigger {
border: 1px solid var(--nova-r7-border) !important;
background:
linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
var(--nova-r7-glass) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -1px 0 rgba(0,0,0,.16),
0 8px 22px rgba(0,0,0,.18);
-webkit-backdrop-filter: blur(18px) saturate(145%);
backdrop-filter: blur(18px) saturate(145%);
transition: transform .18s var(--nova-r7-ease), border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease !important;
}
.sg-player-topbar .sg-player-icon,
.sg-player-topbar .sg-player-select-wrap {
border: 1px solid rgba(189,218,255,.13) !important;
background:
linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.014)),
rgba(6,13,28,.48) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px rgba(0,0,0,.14) !important;
-webkit-backdrop-filter: blur(17px) saturate(140%) !important;
backdrop-filter: blur(17px) saturate(140%) !important;
}
.sg-player-icon:hover,
.sg-player-source-mobile-trigger:hover,
.sg-player-quality-wrap:hover {
border-color: rgba(0,229,255,.30) !important;
background:
linear-gradient(140deg, rgba(0,229,255,.10), rgba(123,92,255,.08) 62%, rgba(255,78,219,.06)),
rgba(8,16,32,.70) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 9px 26px rgba(0,0,0,.22), 0 0 20px rgba(43,123,255,.07) !important;
}
.sg-player-icon:active,
.sg-player-source-mobile-trigger:active {
transform: scale(.91) !important;
}
/* Bottom row polish. */
.sg-player-control-row {
min-height: 52px;
margin-top: 5px;
}
.sg-player-left-controls,
.sg-player-right-controls {
gap: 8px;
}
#sgPlay,
#sgReload {
width: 44px;
height: 44px;
border-radius: 13px;
}
#sgPlay {
color: #fff;
border-color: rgba(0,229,255,.24) !important;
background:
linear-gradient(145deg, rgba(0,229,255,.11), rgba(43,123,255,.07) 45%, rgba(123,92,255,.09)),
rgba(6,14,28,.68) !important;
}
#sgPlay svg { width: 21px; height: 21px; }
.sg-player-shell.is-playing #sgPlay {
border-color: rgba(123,92,255,.30) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.20), 0 0 18px rgba(123,92,255,.09) !important;
}
#sgReload {
color: rgba(238,246,255,.92);
}
#sgReload:hover { color: var(--nova-cyan); }
.sg-player-badge {
min-width: 58px;
height: 36px;
min-height: 36px;
padding: 0 11px;
justify-content: center;
border: 1px solid rgba(0,229,255,.16);
border-radius: 11px;
background:
linear-gradient(135deg, rgba(0,229,255,.15), rgba(43,123,255,.15) 38%, rgba(123,92,255,.18) 70%, rgba(255,78,219,.14)),
rgba(6,13,27,.64);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.18);
-webkit-backdrop-filter: blur(17px) saturate(145%);
backdrop-filter: blur(17px) saturate(145%);
font-size: .67rem;
font-weight: 950;
letter-spacing: .025em;
}
.sg-player-quality-wrap {
min-width: 106px;
height: 42px;
padding: 0 12px;
border-radius: 13px;
gap: 7px;
}
.sg-player-quality-wrap > span {
color: rgba(230,239,255,.62);
font-size: .65rem;
font-weight: 800;
}
.sg-player-quality-wrap select {
color: #fff;
font-weight: 850;
}
/* Main play gains depth and a restrained NOVA halo. */
.sg-player-main-play {
isolation: isolate;
overflow: visible;
border: 1px solid rgba(255,255,255,.20);
background:
radial-gradient(circle at 32% 24%, rgba(255,255,255,.20), transparent 34%),
linear-gradient(145deg, rgba(0,229,255,.22), rgba(43,123,255,.26) 35%, rgba(123,92,255,.32) 69%, rgba(255,78,219,.27)),
rgba(5,12,25,.72);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.20),
inset 0 -8px 18px rgba(0,0,0,.16),
0 18px 50px rgba(0,0,0,.34),
0 0 30px rgba(43,123,255,.16),
0 0 46px rgba(255,78,219,.08);
-webkit-backdrop-filter: blur(18px) saturate(145%);
backdrop-filter: blur(18px) saturate(145%);
}
.sg-player-main-play::before {
content: "";
position: absolute;
inset: -7px;
z-index: -1;
border-radius: inherit;
border: 1px solid rgba(123,92,255,.20);
opacity: .58;
transform: scale(.96);
animation: sg-r7-play-halo 2.8s ease-in-out infinite;
}
.sg-player-main-play:active { transform: scale(.92) !important; }
@keyframes sg-r7-play-halo {
0%,100% { opacity: .32; transform: scale(.96); box-shadow: 0 0 0 rgba(0,229,255,0); }
50% { opacity: .72; transform: scale(1.045); box-shadow: 0 0 24px rgba(43,123,255,.12); }
}
.sg-player-shell.is-playing .sg-player-main-play::before { animation-duration: 3.8s; opacity: .28; }
/* Source sheet gets a subtle spring rather than a flat appearance. */
.sg-player-mobile-source-panel {
transform-origin: 50% 15%;
transition: transform .30s var(--nova-r7-ease), opacity .22s ease, filter .28s ease;
}
.sg-player-mobile-source-sheet:not(.show) .sg-player-mobile-source-panel {
transform: translateY(-10px) scale(.965);
opacity: 0;
filter: blur(3px);
}
.sg-player-mobile-source-sheet.show .sg-player-mobile-source-panel {
transform: translateY(0) scale(1);
opacity: 1;
filter: none;
}
.sg-player-mobile-source-option {
transition: transform .17s var(--nova-r7-ease), border-color .17s ease, background .17s ease, box-shadow .17s ease;
}
.sg-player-mobile-source-option:active { transform: scale(.975); }
/* Native Android double-tap seek feedback. */
.sg-player-doubletap-hud {
position: absolute;
z-index: 16;
top: 50%;
width: clamp(112px, 19vw, 158px);
height: clamp(138px, 36dvh, 190px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
color: #fff;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) scale(.92);
transition: opacity .14s ease, transform .26s var(--nova-r7-ease);
overflow: hidden;
border-radius: 999px;
background: radial-gradient(circle at 50% 50%, rgba(43,123,255,.20), rgba(123,92,255,.10) 42%, rgba(4,10,22,.06) 68%, transparent 72%);
-webkit-tap-highlight-color: transparent;
}
.sg-player-doubletap-hud.is-left { left: max(2.5vw, 12px); }
.sg-player-doubletap-hud.is-right { right: max(2.5vw, 12px); }
.sg-player-doubletap-hud.show {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.sg-player-doubletap-arrow {
width: 43px;
height: 27px;
display: grid;
place-items: center;
margin-bottom: 2px;
}
.sg-player-doubletap-arrow svg {
width: 42px;
height: 24px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 9px rgba(0,229,255,.42));
}
.sg-player-doubletap-hud.is-left .sg-player-doubletap-arrow { transform: rotate(180deg); }
.sg-player-doubletap-hud strong {
font-size: 1.03rem;
line-height: 1.05;
font-weight: 950;
text-shadow: 0 2px 12px rgba(0,0,0,.48), 0 0 12px rgba(43,123,255,.24);
}
.sg-player-doubletap-hud small {
color: rgba(232,243,255,.76);
font-size: .61rem;
font-weight: 750;
}
.sg-player-doubletap-ripple {
position: absolute;
inset: 10%;
border: 1px solid rgba(0,229,255,.20);
border-radius: 999px;
opacity: 0;
}
.sg-player-doubletap-hud.pulse .ripple-a { animation: sg-r7-doubletap-ripple .62s ease-out 0s 1; }
.sg-player-doubletap-hud.pulse .ripple-b { animation: sg-r7-doubletap-ripple .62s ease-out .07s 1; }
.sg-player-doubletap-hud.pulse .ripple-c { animation: sg-r7-doubletap-ripple .62s ease-out .14s 1; }
@keyframes sg-r7-doubletap-ripple {
0% { opacity: .55; transform: scale(.48); border-color: rgba(0,229,255,.42); }
55% { opacity: .26; border-color: rgba(123,92,255,.34); }
100% { opacity: 0; transform: scale(1.08); border-color: rgba(255,78,219,.16); }
}
/* Android/touch: remove visible ±10 buttons; double-tap on the video replaces them. */
.sg-player-shell.has-native-touch-gestures .sg-player-skip {
display: none !important;
}
.sg-player-shell.has-native-touch-gestures .sg-player-center {
gap: 0 !important;
}
@media (pointer: coarse) {
#sgPlay,
#sgReload {
width: 46px;
height: 46px;
border-radius: 14px;
}
.sg-player-control-row {
min-height: 50px;
gap: 12px;
}
.sg-player-right-controls { gap: 7px; }
.sg-player-badge { height: 38px; min-height: 38px; border-radius: 12px; }
.sg-player-quality-wrap { height: 44px; border-radius: 14px; }
.sg-player-source-mobile-trigger { min-width: 44px; height: 44px; border-radius: 13px; }
}
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
#sgPlay,
#sgReload { width: 42px; height: 42px; border-radius: 12px; }
.sg-player-control-row { min-height: 44px; margin-top: 2px; }
.sg-player-badge { height: 34px; min-height: 34px; padding-inline: 9px; }
.sg-player-quality-wrap { height: 40px; min-width: 96px; padding-inline: 10px; }
.sg-player-doubletap-hud { width: 118px; height: 142px; }
}
@media (prefers-reduced-motion: reduce) {
.sg-player-topbar,
.sg-player-controls,
.sg-player-center,
.sg-player-icon,
.sg-player-main-play,
.sg-player-mobile-source-panel,
.sg-player-mobile-source-option,
.sg-player-doubletap-hud {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
.sg-player-main-play::before,
.sg-player-doubletap-ripple { animation: none !important; }
}
/* R7 micro-interactions: fast enough to feel native, restrained enough for long viewing. */
.sg-player-main-play .sg-play-glyph,
.sg-player-main-play .sg-pause-glyph,
.sg-player-play-small .sg-play-glyph,
.sg-player-play-small .sg-pause-glyph {
transform-origin: 50% 50%;
animation: sg-r7-glyph-in .24s var(--nova-r7-ease) both;
}
@keyframes sg-r7-glyph-in {
from { opacity: .18; transform: scale(.72) rotate(-5deg); }
to { opacity: 1; transform: scale(1) rotate(0); }
}
.sg-player-shell.is-buffering .sg-player-spinner {
box-shadow: 0 0 0 1px rgba(0,229,255,.08), 0 0 24px rgba(43,123,255,.16), 0 0 38px rgba(255,78,219,.08);
}
.sg-player-toast.show {
animation: sg-r7-toast-in .22s var(--nova-r7-ease) both;
}
@keyframes sg-r7-toast-in {
from { opacity: 0; transform: translate(50%, 10px) scale(.96); }
to { opacity: 1; transform: translate(50%, 0) scale(1); }
}
.sg-player-mobile-source-option.selected .sg-player-mobile-source-quality-badge {
animation: sg-r7-badge-pop .26s var(--nova-r7-ease) both;
}
@keyframes sg-r7-badge-pop {
from { transform: scale(.84); opacity: .55; }
to { transform: scale(1); opacity: 1; }
}
/* SPACEGATE_REFINED_PLAYER_R8
Deterministic touch controls, unboxed gesture HUD, one bottom source/quality
control, native-safe custom playback-speed menu and smaller central play. */
/* R8 — sound/brightness feedback floats directly over video: no card, no border,
no glass container. The meter itself remains for legibility. */
.sg-player-gesture-hud {
width: 54px;
min-height: 136px;
padding: 4px 3px;
gap: 6px;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
text-shadow: 0 2px 9px rgba(0,0,0,.78);
}
.sg-player-gesture-icon {
filter: drop-shadow(0 2px 8px rgba(0,0,0,.72));
}
.sg-player-gesture-meter {
width: 6px;
height: 72px;
border: 0;
background: rgba(226,238,255,.20);
box-shadow: 0 1px 8px rgba(0,0,0,.44);
}
.sg-player-gesture-value { font-size: .70rem; }
.sg-player-gesture-label { color: rgba(245,249,255,.78); }
/* R8 — on touch there is one quality/source affordance only. The native quality
label remains in the DOM as state, but the clickable control is moved to the
bottom row beside the current-quality card. */
.sg-player-shell.uses-mobile-source-sheet .sg-player-quality-native {
display: none !important;
}
.sg-player-shell.uses-mobile-source-sheet .sg-player-bottom-source-trigger {
display: grid !important;
}
.sg-player-shell.has-native-touch-gestures #sgSourceMobileTrigger,
.sg-player-shell.has-native-touch-gestures #sgPlay,
.sg-player-shell.has-native-touch-gestures #sgReload {
border: 0 !important;
outline: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.sg-player-shell.has-native-touch-gestures #sgSourceMobileTrigger {
width: 40px;
min-width: 40px;
height: 40px;
border-radius: 10px;
color: rgba(242,248,255,.92);
}
.sg-player-shell.has-native-touch-gestures #sgSourceMobileTrigger:hover,
.sg-player-shell.has-native-touch-gestures #sgSourceMobileTrigger:active,
.sg-player-shell.has-native-touch-gestures #sgPlay:hover,
.sg-player-shell.has-native-touch-gestures #sgPlay:active,
.sg-player-shell.has-native-touch-gestures #sgReload:hover,
.sg-player-shell.has-native-touch-gestures #sgReload:active {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.sg-player-shell.has-native-touch-gestures #sgSourceMobileTrigger:active,
.sg-player-shell.has-native-touch-gestures #sgPlay:active,
.sg-player-shell.has-native-touch-gestures #sgReload:active {
transform: scale(.90) !important;
color: var(--nova-cyan);
}
.sg-player-shell.mobile-source-open.has-native-touch-gestures #sgSourceMobileTrigger {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--nova-cyan);
filter: drop-shadow(0 0 8px rgba(0,229,255,.32));
}
/* Keep the current-quality badge as the polished NOVA rectangle the user chose. */
.sg-player-shell.has-native-touch-gestures .sg-player-badge {
min-width: 58px;
height: 34px;
min-height: 34px;
padding: 0 11px;
border: 1px solid rgba(0,229,255,.16) !important;
border-radius: 10px;
background:
linear-gradient(135deg, rgba(0,229,255,.18), rgba(43,123,255,.20) 36%, rgba(123,92,255,.24) 69%, rgba(255,78,219,.18)),
rgba(6,13,27,.70) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 7px 18px rgba(0,0,0,.18) !important;
-webkit-backdrop-filter: blur(15px) saturate(145%);
backdrop-filter: blur(15px) saturate(145%);
}
/* R8 — custom speed control. The hidden native