/* series-home.css — extracted from index1.html inline styles (perf, spotlight/rows, restyle) */

/* NIKA PERFORMANCE OPTIMIZATION -- additive, namespaced. Gated by [data-nk-perf] / [data-nk-hover]
   (set in the head before first paint) plus standard media queries. Nothing here changes layout,
   colors, or the visual identity; it only (a) trims expensive compositing on low-end / TV,
   (b) restores hover effects only where a real hover pointer exists, (c) strengthens keyboard / TV
   focus, and (d) styles the offline toast + section-level retry UI shown by the optimizer. */

/* (a) low-end + TV: drop blur / backdrop-filter and heavy shadows (backgrounds are already opaque). */
html[data-nk-perf="low"] *,
html[data-nk-perf="tv"] * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html[data-nk-perf="low"] :where(.anime-card, .nk-card-enhanced, .nk-x-card, .card) {
    box-shadow: none !important;
}
html[data-nk-perf="low"] .anime-card:hover .card-img-wrapper img,
html[data-nk-perf="low"] .anime-card:hover img,
html[data-nk-perf="tv"] .anime-card:hover .card-img-wrapper img,
html[data-nk-perf="tv"] .anime-card:hover img { transform: none !important; }

/* respect reduced-motion everywhere (also pauses the hero slide transition) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    #heroCarousel .carousel-item { transition: none !important; }
}

/* (b) hover transforms only where a real hover pointer exists (kills sticky-hover on touch) */
@media (hover: none) {
    .anime-card:hover .card-img-wrapper img,
    .anime-card:hover img { transform: none !important; }
}

/* (c) stronger, consistent keyboard / TV focus ring (complements the existing :focus-within) */
:where(.anime-card, .nk-x-card, [role="button"]):focus-visible {
    outline: 3px solid var(--theme-primary, #cae962) !important;
    outline-offset: 3px;
    border-radius: 10px;
    scroll-margin: 90px;
}
html[data-nk-perf="tv"] :where(.anime-card, .nk-x-card, a, button, [role="button"]):focus-visible {
    outline: 3px solid var(--theme-primary, #cae962) !important;
    outline-offset: 4px;
    scroll-margin: 120px;
}

/* (d) offline toast (non-blocking, sits above the mobile bottom nav) */
#nk-offline-toast {
    position: fixed; left: 50%; bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(160%);
    z-index: 2147483000; max-width: 92vw;
    background: var(--surface-elevated, #1a1a26); color: var(--text-main, #ffffff);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.14)); border-radius: 12px;
    padding: 10px 16px; font-size: 14px; line-height: 1.35; box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    transition: transform 0.28s ease, opacity 0.28s ease; opacity: 0; pointer-events: none;
}
#nk-offline-toast.nk-show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* (d) section-level error + retry (rendered by the optimizer only when a whole section fails) */
.nk-section-error {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 14px; color: var(--text-muted, #8888aa); text-align: center; font-size: 14px;
}
.nk-section-error .nk-retry-btn {
    cursor: pointer; border: 1px solid var(--theme-primary, #cae962); background: transparent;
    color: var(--theme-primary, #cae962); padding: 7px 18px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; transition: background 0.15s ease, color 0.15s ease;
}
.nk-section-error .nk-retry-btn:hover,
.nk-section-error .nk-retry-btn:focus-visible {
    background: var(--theme-primary, #cae962); color: #07070f; outline: none;
}

 :root { --theme-primary: #cae962; --theme-accent: #7c3aed; --surface-dark: #07070f; --surface-card: #12121a; --surface-elevated: #1a1a26; --border-subtle: rgba(255, 255, 255, 0.05); --text-main: #ffffff; --text-muted: #8888aa; } body { background-color: var(--surface-dark) !important; color: var(--text-main) !important; font-family: 'Outfit', sans-serif; overflow-x: hidden; } .premium-container { max-width: 1650px; margin: 0 auto; padding: 0 30px; } #main-header { background: var(--surface-dark) !important; border-bottom: 1px solid rgba(255,255,255,0.06); } body { padding-top: 64px; } @media (max-width: 1100px) { body { padding-top: 56px; } } .spotlight-carousel { position: relative !important; width: calc(100% - 60px) !important; max-width: 1650px !important; margin: 16px auto 30px !important; height: clamp(460px, 32vw, 640px); min-height: 440px; max-height: 680px; background: #07070f; border-radius: 16px !important; overflow: hidden !important; }
@media (min-width: 1366px) {
  .spotlight-carousel { height: clamp(480px, 34vw, 660px); }
}
@media (min-width: 1600px) {
  .spotlight-carousel { height: clamp(520px, 36vw, 680px); }
}
@media (min-width: 1920px) {
  .spotlight-carousel { height: clamp(560px, 32vw, 700px); }
  .spotlight-backdrop { object-position: 58% center; }
}
@media (min-width: 2560px) {
  .spotlight-carousel { height: clamp(600px, 28vw, 720px); }
}
 .spotlight-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; z-index: 1; } .spotlight-slide.active { opacity: 1; z-index: 2; } .spotlight-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; opacity: 1; transition: opacity 0.4s ease; image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); } .spotlight-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(7,7,15,0.97) 0%, rgba(7,7,15,0.85) 18%, rgba(7,7,15,0.55) 36%, rgba(7,7,15,0.18) 54%, rgba(7,7,15,0.04) 72%, transparent 100% ); z-index: 2; } .spotlight-content { position: relative; z-index: 3; width: 50%; max-width: 500px; min-width: 260px; padding: 0 0 0 5%; display: flex; flex-direction: column; justify-content: center; height: 100%; } .spotlight-rank { display: none; } .spotlight-title { font-size: 2.4rem; font-weight: 900; line-height: 1.15; margin-bottom: 12px; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.9); word-break: break-word; overflow-wrap: break-word; } .spotlight-meta-group { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; margin-bottom: 13px; flex-wrap: wrap; } .meta-chip { background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); padding: 3px 9px; border-radius: 4px; font-size: 0.73rem; color: #ddd; backdrop-filter: blur(6px); } .meta-chip.chip-quality { background: rgba(0,178,214,0.28); border-color: rgba(0,178,214,0.6); color: #00d8ff; font-weight: 800; } .meta-chip.chip-rating { background: rgba(255,184,0,0.18); border-color: rgba(255,184,0,0.5); color: #ffb800; font-weight: 800; } .spotlight-synopsis { color: #c0c0d8; font-size: 0.87rem; line-height: 1.65; margin-bottom: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 12px rgba(0,0,0,0.95); } #vheroWatchBtn { background: #00b2d6 !important; color: #fff !important; border: none !important; border-radius: 7px !important; padding: 11px 28px !important; font-size: 0.92rem !important; font-weight: 800 !important; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s, transform 0.2s; box-shadow: 0 4px 18px rgba(0,178,214,0.35); } #vheroWatchBtn:hover { background: #00ccf5 !important; color: #fff !important; transform: translateY(-2px); } #vheroInfoBtn { background: rgba(0,0,0,0.45) !important; color: #ddd !important; border: 1px solid rgba(255,255,255,0.28) !important; border-radius: 7px !important; padding: 11px 20px !important; font-weight: 700 !important; backdrop-filter: blur(6px); transition: background 0.2s, color 0.2s; } #vheroInfoBtn:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; } .hi-vhero-pagination { position: absolute; z-index: 10; bottom: 20px !important; left: 5% !important; right: auto !important; display: flex; flex-direction: row; gap: 6px; align-items: center; } .vhero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.3s ease; border: none; } .vhero-dot.active { background: #00b2d6; width: 24px; border-radius: 4px; } .nika-share-block { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 20px; margin-bottom: 32px; display: flex; flex-direction: column; gap: 12px; } .nika-share-notice { display: flex; align-items: center; gap: 10px; background: rgba(0,178,214,0.07); border: 1px solid rgba(0,178,214,0.18); border-radius: 8px; padding: 10px 14px; font-size: 0.82rem; color: #aac; line-height: 1.5; } .nika-share-notice i { color: #00b2d6; flex-shrink: 0; } .nika-share-notice a { color: #00b2d6; font-weight: 700; text-decoration: none; } .nika-share-notice a:hover { text-decoration: underline; } .nika-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nika-share-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; } .nika-share-btns { display: flex; gap: 8px; flex-wrap: wrap; } .nika-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 36px; border-radius: 8px; font-size: 0.95rem; font-weight: 700; text-decoration: none; color: #fff; transition: opacity 0.2s, transform 0.2s; border: none; cursor: pointer; padding: 0; } .nika-share-btn span { display: none; } .nika-share-btn:hover { opacity: 0.85; transform: translateY(-1px); color: #fff; } .nika-share-btn.btn-share { background: #84cc16; } .nika-share-btn.btn-x { background: #111; border: 1px solid #333; } .nika-share-btn.btn-wa { background: #25d366; } .nika-share-btn.btn-fb { background: #1877f2; } .nika-share-btn.btn-reddit { background: #ff4500; } .nika-share-btn.btn-copy { background: var(--surface-elevated); border: 1px solid rgba(255,255,255,0.12); color: #ccc; } .nika-share-btns{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;width:100%;}
.nika-share-btn{flex-shrink:0!important;width:52px!important;height:48px!important;font-size:1.3rem!important;border-radius:10px!important;}
#next-airing-countdown{display:none!important;}
@media (max-width:480px){.nika-share-btns{gap:8px!important;}.nika-share-btn{width:46px!important;height:42px!important;font-size:1.1rem!important;}} @media (max-width: 1100px) { .spotlight-carousel { width: calc(100% - 24px) !important; margin: 12px auto 24px !important; border-radius: 14px !important; height: 290px; min-height: 250px; } .spotlight-backdrop { object-position: 65% center; } .spotlight-overlay { background: linear-gradient(0deg, rgba(7,7,15,0.98) 0%, rgba(7,7,15,0.75) 38%, rgba(7,7,15,0.22) 68%, transparent 100% ), linear-gradient(90deg, rgba(7,7,15,0.7) 0%, transparent 58% ); } .spotlight-content { width: 100%; max-width: 100%; padding: 14px 18px 22px; justify-content: flex-end; } .spotlight-title { font-size: 1.3rem; margin-bottom: 8px; } .spotlight-synopsis { display: -webkit-box !important; -webkit-line-clamp: 2; font-size: 0.78rem; margin-bottom: 16px; max-width: 92%; } .spotlight-meta-group .hidemobile { display: none; } #vheroWatchBtn { padding: 9px 18px !important; font-size: 0.8rem !important; } #vheroInfoBtn { padding: 9px 14px !important; font-size: 0.8rem !important; } .hi-vhero-pagination { bottom: auto !important; top: 50% !important; left: auto !important; right: 12px !important; transform: translateY(-50%) !important; flex-direction: column !important; gap: 5px !important; } .vhero-dot.active { width: 8px !important; height: 22px !important; border-radius: 4px !important; } .spotlight-rank { display: none; } .nika-share-block { padding: 12px 14px; gap: 10px; } .nika-share-notice { font-size: 0.78rem; padding: 8px 12px; } .nika-share-btn { width: 38px; height: 34px; font-size: 0.9rem; } } .az-filter-wrapper { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 15px 20px; margin-bottom: 40px; display: flex; align-items: center; gap: 20px; } .az-label-block { flex-shrink: 0; } .az-title { font-weight: 800; font-size: 1.05rem; color: var(--theme-primary); margin: 0; } .az-subtitle { font-size: 0.72rem; color: var(--text-muted); } .az-alphabet-list { display: flex; gap: 6px; overflow-x: auto; width: 100%; scrollbar-width: none; } .az-alphabet-list::-webkit-scrollbar { display: none; } .az-pill { background: var(--surface-elevated); color: var(--text-main); padding: 5px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: all 0.2s; text-align: center; min-width: 32px; } .az-pill:hover, .az-pill.active { background: var(--theme-primary); color: #000; } .two-column-layout { display: flex; gap: 30px; margin-bottom: 60px; } .main-content-stream { flex: 1; min-width: 0; overflow: hidden; } .side-complementary-stream { width: 340px; flex-shrink: 0; display: block; } .section-headline-block { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .headline-title { font-size: 1.4rem; font-weight: 900; position: relative; padding-left: 14px; margin: 0; display: flex; align-items: center; gap: 10px; } .headline-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; } .accent-yellow::before { background: #ffb800; } .accent-blue::before { background: #00b2ff; } .accent-green::before { background: #22c55e; } .accent-purple::before { background: #a855f7; } .accent-pink::before { background: #ec4899; } .accent-orange::before { background: #f97316; } .horizontal-scroll-deck { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 15px; scroll-behavior: smooth; cursor: grab; scrollbar-width: none; } .card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; pointer-events: none; } .anime-card:hover .card-img-wrapper img { will-change: transform; } .horizontal-scroll-deck:active { cursor: grabbing; } .horizontal-scroll-deck::-webkit-scrollbar { display: none; } .anime-card { flex: 0 0 175px; display: flex; flex-direction: column; user-select: none; } .card-img-wrapper { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: #111; box-shadow: 0 4px 15px rgba(0,0,0,0.5); } .card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; pointer-events: none; } .anime-card:hover .card-img-wrapper img { transform: scale(1.05); } .card-img-wrapper .ep-badge { position: absolute !important; bottom: 8px !important; left: 8px !important; top: auto !important; right: auto !important; width: auto !important; height: auto !important; background: var(--theme-primary) !important; background-image: none !important; color: #000 !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 0.75rem !important; font-weight: 800 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important; z-index: 10 !important; display: inline-block !important; } .card-bottom-bar { position: absolute; bottom: 0; left: 0; width: 100%; padding: 8px; display: flex; justify-content: space-between; align-items: flex-end; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, transparent 100%); z-index: 5; } .tick-group { display: flex; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .tick-sub { background-color: #00b2ff; color: #fff; font-size: 0.65rem; font-weight: 800; padding: 2px 5px; display: flex; align-items: center; gap: 3px; } .tick-dub { background-color: #4a5266; color: #fff; font-size: 0.65rem; font-weight: 800; padding: 2px 5px; } .tick-format { color: #fff; font-size: 0.65rem; font-weight: 800; text-shadow: 1px 1px 2px #000; } .card-title { font-size: 0.95rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; color: var(--text-main); } .card-sub-info { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; } @keyframes pulse-skeleton { 0% { background-color: #1a1a24; } 50% { background-color: #262635; } 100% { background-color: #1a1a24; } } .skeleton-box { animation: pulse-skeleton 1.5s infinite ease-in-out; border-radius: 4px; width: 100%; } .skel-card { flex: 0 0 175px; display: flex; flex-direction: column; gap: 6px; } .skel-poster { width: 100%; aspect-ratio: 2/3; border-radius: 8px; } .skel-text-main { height: 16px; width: 85%; margin-top: 4px; } .skel-text-sub { height: 12px; width: 60%; } .sidebar-panel-widget { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px; margin-bottom: 30px; } .sidebar-headline { font-size: 1.15rem; font-weight: 900; margin-bottom: 20px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; display: flex; align-items: center; gap: 8px; } .sidebar-row-list { display: flex; flex-direction: column; gap: 14px; } .sch-item { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: background 0.2s; } .sch-item:hover { background: rgba(124,58,237,0.1); } .row-arrow-btn { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; } .row-arrow-btn:hover { background: var(--theme-primary); color: #000; border-color: var(--theme-primary); } .mobile-schedule-wrapper { display: none; } @media (max-width: 1100px) { .two-column-layout { flex-direction: column; } .side-complementary-stream { display: none !important; } .mobile-schedule-wrapper { display: block; } .premium-container { padding: 0 15px; } .anime-card, .skel-card { flex: 0 0 140px; } .row-arrow-btn { display: none; } }

/* === Anikage-inspired restyle (visual only — no IDs/classes/logic touched) === */

/* Hero: sharper overlay + small "Editor's Pick" style ribbon like Anikage's featured banner */
.spotlight-carousel{border:1px solid rgba(255,255,255,0.06);}
.spotlight-content{padding-left:6%;}
.spotlight-rank{display:inline-flex !important;align-items:center;gap:6px;background:linear-gradient(135deg,#cae962,#a3d635);color:#0a0a0f;font-weight:900;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;padding:4px 10px;border-radius:5px;margin-bottom:10px;width:fit-content;box-shadow:0 3px 10px rgba(202,233,98,0.35);}
.spotlight-title{letter-spacing:-0.01em;}

/* Anime cards: rounder, crisper, closer to Anikage's card treatment */
.anime-card{transition:transform .25s ease;}
.anime-card:hover{transform:translateY(-4px);}
.card-img-wrapper{border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.05);}
.card-title{transition:color .2s ease;}
.anime-card:hover .card-title{color:var(--theme-primary,#cae962);}

/* Top 10 Today: real colored numbered badge (matches window.nk-rank-badge already injected by index.js —
   that class had ZERO css anywhere before this, so it was rendering unstyled) */
.nk-rank-badge{
  position:absolute !important;top:8px !important;left:8px !important;z-index:6 !important;
  width:26px !important;height:26px !important;border-radius:8px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  color:#fff !important;font-weight:900 !important;font-size:0.85rem !important;font-family:'Outfit',sans-serif !important;
  background:linear-gradient(135deg,#7c3aed,#a855f7) !important;
  box-shadow:0 3px 10px rgba(0,0,0,0.55) !important;
}
#top10-today-list .anime-card:nth-child(1) .nk-rank-badge,#top10-today-list .trending-card:nth-child(1) .nk-rank-badge{background:linear-gradient(135deg,#f97316,#dc2626) !important;}
#top10-today-list .anime-card:nth-child(2) .nk-rank-badge,#top10-today-list .trending-card:nth-child(2) .nk-rank-badge{background:linear-gradient(135deg,#22c55e,#16a34a) !important;}
#top10-today-list .anime-card:nth-child(3) .nk-rank-badge,#top10-today-list .trending-card:nth-child(3) .nk-rank-badge{background:linear-gradient(135deg,#3b82f6,#2563eb) !important;}

/* Ep badge: green-dot pill, top-left (Anikage style) — overrides the old bottom-left lime badge */
.ep-badge{
  position:absolute !important;top:8px !important;bottom:auto !important;left:8px !important;right:auto !important;
  background:rgba(8,14,10,0.8) !important;background-image:none !important;
  border:1px solid rgba(34,197,94,0.4) !important;color:#fff !important;
  border-radius:20px !important;padding:3px 10px 3px 8px !important;
  font-size:0.68rem !important;font-weight:700 !important;
  display:flex !important;align-items:center !important;gap:5px !important;
  box-shadow:0 3px 10px rgba(0,0,0,0.4) !important;
}
.ep-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 6px #22c55e;}

/* Cards using the tick-group/card-bottom-bar template: move the ep tag to a top-left pill too,
   drop the bottom gradient bar and dub/format overlay text so it reads like Anikage's clean cards
   (score/format still shows via .card-sub-info under the title, untouched) */
.card-bottom-bar{position:absolute !important;bottom:auto !important;top:8px !important;left:8px !important;right:8px !important;padding:0 !important;background:none !important;justify-content:flex-start !important;align-items:flex-start !important;}
.tick-sub{background:rgba(8,14,10,0.8) !important;border:1px solid rgba(34,197,94,0.4) !important;border-radius:20px !important;padding:3px 10px 3px 8px !important;display:flex !important;align-items:center !important;gap:5px !important;color:#fff !important;box-shadow:0 3px 10px rgba(0,0,0,0.4) !important;}
.tick-sub i{display:none !important;}
.tick-sub::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 6px #22c55e;}
.tick-dub,.tick-format{display:none !important;}

/* Section header tag pills (HOT / SEASONAL / TOP / NEW) — visual chip only, added next to a few
   section titles below to match Anikage's row headers */
.nk-sec-tag{display:inline-block;font-size:0.62rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;padding:3px 9px;border-radius:6px;margin-left:8px;vertical-align:middle;}
.nk-sec-tag.tag-hot{background:rgba(249,115,22,0.15);color:#f97316;border:1px solid rgba(249,115,22,0.4);}
.nk-sec-tag.tag-seasonal{background:rgba(34,211,238,0.15);color:#22d3ee;border:1px solid rgba(34,211,238,0.4);}
.nk-sec-tag.tag-top{background:rgba(250,204,21,0.15);color:#facc15;border:1px solid rgba(250,204,21,0.4);}
.nk-sec-tag.tag-new{background:rgba(96,165,250,0.15);color:#60a5fa;border:1px solid rgba(96,165,250,0.4);}

/* Mobile hero: make it taller/bigger like Anikage's poster-style banner */
@media (max-width:1100px){
  .spotlight-carousel{height:370px !important;min-height:340px !important;}
  .spotlight-backdrop{object-position:center center !important;}
  .spotlight-title{font-size:1.5rem !important;}

  /* Let the hero run full-bleed behind the fixed header instead of starting below it
     (header itself, its links/logo/search/user-menu are untouched — only background + spacing) */
  body{padding-top:0 !important;}
  #main-header{
    background:linear-gradient(180deg,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.25) 65%,transparent 100%) !important;
    border-bottom:none !important;box-shadow:none !important;
  }
  #main-header.scrolled{
    background:rgba(6,6,11,0.92) !important;
    border-bottom:1px solid rgba(255,255,255,0.06) !important;
  }
}

/* Shrink the bookmark/share notice block further — still too big */
@media (max-width:1100px){
  .nika-share-block{padding:8px 10px !important;gap:6px !important;margin-bottom:16px !important;}
  .nika-share-notice{font-size:0.64rem !important;padding:6px 9px !important;gap:6px !important;line-height:1.3 !important;}
  .nika-share-notice i{font-size:0.75rem !important;}
  .nika-share-label{display:none !important;}
  .nika-share-btns{gap:5px !important;}
  .nika-share-btn{width:30px !important;height:26px !important;font-size:0.72rem !important;}
}
@media (max-width:1100px){
  #nika-mobile-bottom-nav{
    left:14px !important;right:14px !important;bottom:14px !important;
    border-radius:28px !important;padding:8px 6px !important;
    background:rgba(9,9,14,0.88) !important;
    box-shadow:0 10px 30px rgba(0,0,0,0.5) !important;
  }
  #nika-mobile-bottom-nav .nika-bn-item span{display:none !important;}
  #nika-mobile-bottom-nav .nika-bn-item{padding:9px !important;}
  #nika-mobile-bottom-nav .nika-bn-item i{font-size:1.15rem !important;}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)) !important;}
}

/* Section headlines: slightly tighter, modern rail-header feel like Anikage's "Trending Now / HOT" rows */
.headline-title{text-transform:none;}

/* Mobile bottom nav: modern pill-active state closer to Anikage's terminal-style nav polish
   (same links/labels/functions — visual only) */
@media (max-width:1100px){
  #nika-mobile-bottom-nav{gap:2px;}
  #nika-mobile-bottom-nav .nika-bn-item{border-radius:12px;}
  #nika-mobile-bottom-nav .nika-bn-item.active{transform:translateY(-2px);}
}

/* =====================================================================
   FULL HOMEPAGE REDESIGN — flat/rounded aesthetic (Aniwatch-inspired
   design tokens: amber accent, charcoal surface, flat/no-shadow, 30px
   pill buttons, 4px chips). Scoped ONLY to hero + cards + section
   containers below the header. Header, footer, social/bookmark block,
   and the mobile bottom nav are untouched.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --nk2-amber:#FFDD95;
  --nk2-teal:#86E3CE;
  --nk2-surface:#242428;
  --nk2-text:#FFFFFF;
  --nk2-muted:#AAAAAA;
}

/* ---- Hero ---- */
.spotlight-carousel{background:var(--nk2-surface) !important;border-radius:12px !important;box-shadow:none !important;border:none !important;}
.spotlight-overlay{background:linear-gradient(90deg,rgba(36,36,40,0.97) 0%,rgba(36,36,40,0.82) 22%,rgba(36,36,40,0.4) 45%,transparent 75%) !important;}
.spotlight-content{background:none !important;box-shadow:none !important;border:none !important;backdrop-filter:none !important;}
.spotlight-rank{display:block !important;background:none !important;box-shadow:none !important;color:var(--nk2-amber) !important;font-weight:600 !important;font-size:0.85rem !important;letter-spacing:0 !important;text-transform:none !important;padding:0 !important;margin-bottom:8px !important;}
.spotlight-title{font-family:'Poppins',sans-serif !important;font-weight:700 !important;color:var(--nk2-text) !important;text-shadow:none !important;}
@media (max-width:1100px){
  .spotlight-title{
    display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:2 !important;
    overflow:hidden !important;text-overflow:ellipsis !important;
    font-size:1.35rem !important;line-height:1.25 !important;
  }
}
.spotlight-synopsis{font-family:'Poppins',sans-serif !important;color:var(--nk2-muted) !important;text-shadow:none !important;}
.meta-chip{background:rgba(255,255,255,0.07) !important;border:none !important;border-radius:4px !important;box-shadow:none !important;backdrop-filter:none !important;color:var(--nk2-text) !important;}
.meta-chip.chip-quality{background:rgba(134,227,206,0.16) !important;color:var(--nk2-teal) !important;}
.meta-chip.chip-rating{background:rgba(255,221,149,0.16) !important;color:var(--nk2-amber) !important;}
#vheroWatchBtn{background:var(--nk2-amber) !important;color:#000 !important;border:none !important;border-radius:30px !important;box-shadow:none !important;font-weight:500 !important;padding:11px 26px !important;}
#vheroWatchBtn:hover{background:#ffe6ab !important;color:#000 !important;transform:none !important;}
#vheroInfoBtn{background:rgba(255,255,255,0.08) !important;color:var(--nk2-text) !important;border:none !important;border-radius:30px !important;box-shadow:none !important;backdrop-filter:none !important;}
#vheroInfoBtn:hover{background:rgba(255,255,255,0.16) !important;}
.hero-nav-arrow{background:rgba(255,255,255,0.07) !important;border-radius:4px !important;box-shadow:none !important;border:none !important;}
.vhero-dot{border-radius:4px !important;}
.vhero-dot.active{background:var(--nk2-amber) !important;}
@media (max-width:1100px){
  .spotlight-carousel{border-radius:16px !important;}
}


/* Desktop banner fit — consistent cover crop for mixed AniList aspect ratios */
.spotlight-backdrop, #heroImg {
  object-fit: cover !important;
  object-position: 62% center !important;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 1100px) {
  .spotlight-backdrop, #heroImg {
    object-position: center center !important;
  }
}

/* HERO FIT+HQ FIX — AniList banners are ~1900x400 (4.7:1). Old 640-720px tall hero forced
   a huge crop + upscale = blurry. Shorter hero matches banner ratio => crisp, full-fit. */
@media (min-width:1101px){
  .spotlight-backdrop,#heroImg{object-position:70% center !important;}
  /* taller hero so long titles always fit */
  .spotlight-carousel{height:clamp(500px,32vw,600px) !important;min-height:480px !important;max-height:620px !important;}
  .spotlight-content{max-width:640px !important;width:56% !important;padding-bottom:48px !important;box-sizing:border-box;}
  .spotlight-title{font-size:clamp(1.9rem,2.7vw,2.7rem) !important;line-height:1.12 !important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .spotlight-synopsis{-webkit-line-clamp:3 !important;}
}
#heroImg{image-rendering:auto;transform:none !important;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
/* cover-only fallback (no real banner): blurred bg + sharp poster, nothing stretched */
#heroBg{position:absolute;inset:-30px -30px -30px 36%;background-size:cover;background-position:center;filter:blur(34px) brightness(.8) saturate(1.8);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 45%);mask-image:linear-gradient(to right,transparent 0,#000 45%);z-index:0;transition:opacity .4s ease;pointer-events:none;}
/* DESKTOP banner mode: wide banner fades smoothly into the dark text panel on the left */
@media (min-width:1101px){
  /* left half = title panel, right half = anime banner, soft blend between */
  #heroImg.nk-banner-mode{left:auto !important;right:0 !important;width:56% !important;object-fit:cover !important;object-position:center center !important;z-index:1;
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 14%,#000 30%);
    mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 14%,#000 30%);}
  .spotlight-overlay{background:linear-gradient(90deg,rgba(8,8,16,.35) 0%,transparent 50%),linear-gradient(0deg,rgba(8,8,16,.6) 0%,transparent 30%) !important;}
  .spotlight-content{width:46% !important;max-width:46% !important;}
}
#heroImg{transition:opacity .6s ease !important;}
/* NikaStream brand tone: deep navy-black + purple/pink glow + amber/teal accents */
.spotlight-carousel{background:
  radial-gradient(1100px 640px at 4% 10%,rgba(168,85,247,.55),transparent 62%),
  radial-gradient(900px 560px at 58% 120%,rgba(255,77,141,.42),transparent 62%),
  radial-gradient(700px 480px at 100% 0%,rgba(124,58,237,.38),transparent 62%),
  radial-gradient(520px 380px at 0% 100%,rgba(255,221,149,.22),transparent 66%),
  linear-gradient(135deg,#140a2a 0%,#1b0f33 50%,#120a22 100%) !important;
  border:none !important;box-shadow:none !important;}
.nk-genre-chip{display:inline-block;padding:4px 13px;border-radius:99px;font-size:.78rem;font-weight:800;letter-spacing:.02em;color:#FFDD95;background:rgba(255,221,149,.12);border:1px solid rgba(255,221,149,.5);box-shadow:0 0 12px rgba(255,221,149,.12);}
.nk-year-chip{color:#86E3CE;font-weight:800;font-size:.82rem;}
.spotlight-synopsis{color:#e8e8f2 !important;font-size:1rem !important;line-height:1.65 !important;font-weight:400 !important;padding-left:14px;border-left:3px solid #FFDD95;max-width:520px !important;}
.spotlight-meta-group{gap:8px !important;margin-bottom:16px !important;}
@media (max-width:1100px){.spotlight-synopsis{font-size:.84rem !important;padding-left:10px;}.nk-genre-chip{padding:3px 10px;font-size:.7rem;}}
#heroImg.nk-cover-mode{object-fit:contain !important;object-position:82% center !important;z-index:1;}
@media (max-width:1100px){#heroImg.nk-cover-mode{object-position:center center !important;}}
/* MOBILE: sharp portrait cover instead of ultra-wide banner crop */
@media (max-width:1100px){
  .spotlight-backdrop,#heroImg{object-fit:cover !important;object-position:center 22% !important;}
  .spotlight-overlay{background:linear-gradient(0deg,rgba(7,7,15,.98) 0%,rgba(7,7,15,.82) 38%,rgba(7,7,15,.3) 70%,rgba(7,7,15,.45) 100%) !important;}
}

/* Share/bookmark block: fix overflow so it always fits its container on any screen size
   (box only — content, links, icons, colors all unchanged) */
.nika-share-block{width:100% !important;box-sizing:border-box !important;overflow:hidden !important;}
.nika-share-notice{box-sizing:border-box !important;word-break:break-word !important;overflow-wrap:break-word !important;}
.nika-share-row,.nika-share-btns{flex-wrap:wrap !important;box-sizing:border-box !important;}
.nika-share-block{border:1px solid rgba(255,255,255,0.08) !important;border-radius:12px !important;background:var(--nk2-surface,#242428) !important;}
/* Bookmark/share block in NikaStream brand tone */
.nika-share-block{background:
  radial-gradient(700px 220px at 0% 0%,rgba(168,85,247,.32),transparent 65%),
  radial-gradient(600px 200px at 100% 100%,rgba(255,77,141,.22),transparent 65%),
  linear-gradient(135deg,#140a2a 0%,#1b0f33 55%,#120a22 100%) !important;
  border:none !important;box-shadow:none !important;}
.nika-share-notice,.nika-share-notice span{color:#e4e0f2 !important;}
.nika-share-notice i{color:#FFDD95 !important;}
.nika-share-notice{border-radius:0 !important;border:none !important;background:none !important;padding:0 !important;}

/* ---- Cards (all sections) ---- */
.card-img-wrapper{border-radius:8px !important;box-shadow:none !important;border:none !important;background:var(--nk2-surface) !important;}
.card-title{font-family:'Poppins',sans-serif !important;font-weight:500 !important;color:var(--nk2-text) !important;}
.card-sub-info{font-family:'Poppins',sans-serif !important;color:var(--nk2-muted) !important;}
.ep-badge{background:rgba(0,0,0,0.55) !important;border:none !important;border-radius:4px !important;box-shadow:none !important;}
.ep-badge::before{background:var(--nk2-teal) !important;box-shadow:none !important;}
.tick-sub{background:rgba(0,0,0,0.55) !important;border:none !important;border-radius:4px !important;box-shadow:none !important;}
.tick-sub::before{background:var(--nk2-teal) !important;box-shadow:none !important;}
.nk-rank-badge{border-radius:4px !important;box-shadow:none !important;background:var(--nk2-amber) !important;color:#000 !important;}
#top10-today-list .anime-card:nth-child(1) .nk-rank-badge,#top10-today-list .trending-card:nth-child(1) .nk-rank-badge{background:var(--nk2-amber) !important;color:#000 !important;}
#top10-today-list .anime-card:nth-child(2) .nk-rank-badge,#top10-today-list .trending-card:nth-child(2) .nk-rank-badge{background:var(--nk2-teal) !important;color:#000 !important;}
#top10-today-list .anime-card:nth-child(3) .nk-rank-badge,#top10-today-list .trending-card:nth-child(3) .nk-rank-badge{background:#fff !important;color:#000 !important;}

/* ---- Section headers (Trending / Top 10 / Most Popular / etc.) ---- */
.headline-title{font-family:'Poppins',sans-serif !important;font-weight:600 !important;color:var(--nk2-amber) !important;}
.headline-title::before{display:none !important;}
.headline-title i{color:var(--nk2-amber) !important;}
.nk-sec-tag{border-radius:4px !important;box-shadow:none !important;background:rgba(255,221,149,0.14) !important;color:var(--nk2-amber) !important;border:none !important;}
.row-arrow-btn{background:rgba(255,255,255,0.07) !important;border:none !important;border-radius:4px !important;box-shadow:none !important;color:var(--nk2-text) !important;}
.hi-view-all{color:var(--nk2-muted) !important;}
@media (max-width:1100px){
  .headline-title{font-size:1.05rem !important;flex-wrap:nowrap !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  .nk-sec-tag{font-size:0.52rem !important;padding:2px 6px !important;margin-left:5px !important;}
  .section-headline-block{margin-bottom:10px !important;}
  .hi-section.mb-5{margin-bottom:24px !important;}
  .horizontal-scroll-deck{padding-bottom:6px !important;}
}

/* === Mobile hero: match Anikage's edge-to-edge hero card + bottom-row pagination === */
@media (max-width:1100px){
  .spotlight-carousel{width:calc(100% - 20px) !important;margin:10px auto !important;border-radius:16px !important;border:1px solid rgba(255,255,255,0.1) !important;}
  .meta-chip{border-radius:20px !important;padding:4px 11px !important;}
  #vheroWatchBtn{background:#fff !important;color:#0a0a0f !important;box-shadow:none !important;}
  #vheroInfoBtn{background:rgba(0,0,0,0.5) !important;border:1px solid rgba(255,255,255,0.3) !important;}

  .hi-vhero-pagination,#vheroPagination{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;position:absolute !important;left:50% !important;right:auto !important;bottom:12px !important;top:auto !important;transform:translateX(-50%) !important;gap:5px !important;z-index:12 !important;width:auto !important;margin:0 !important;}
  .hi-vhero-pagination .vhero-dot,#vheroPagination .vhero-dot{width:7px !important;height:7px !important;min-height:7px !important;max-height:7px !important;border-radius:50% !important;background:rgba(255,255,255,.35) !important;}
  .hi-vhero-pagination .vhero-dot.active,#vheroPagination .vhero-dot.active{width:20px !important;height:7px !important;max-height:7px !important;border-radius:99px !important;background:#FFDD95 !important;}

  .hero-nav-arrow{width:32px !important;height:32px !important;background:rgba(0,0,0,0.45) !important;top:auto !important;transform:none !important;}
  .hero-prev{left:auto !important;right:64px !important;bottom:14px !important;}
  .hero-next{right:16px !important;bottom:14px !important;}
}