/* =============================== */
/* CINEMA — Niguro Cinema (cinema.php; templates cinema.tpl, __ng_cinema_*.tpl; script
   includes/assets/js/core/niguro-cinema.js): /cinema and its pages at niguroapp's own sizes — niguro's
   assets/css/cinema.css under niguroapp's skins/services-sub.css §1, zz-flat-cards.css, zz-mobile-gutters.css and
   bs-dates.css. The cinema's own header bar and drawer are replaced by Sngine's header and the kit's tab bar.
   Widths: boards (hub, browse, rankings) 1150px, a movie / show / person 920px (from 768px), the watchlist 1100px;
   gutter 8px under 1024px, 24px beside the rail. Phones and tablets: the hub's hero runs edge to edge and starts
   behind the header. Colours are Niguro tokens; the fact tiles use the accent (the kit's one-accent rule) where
   niguroapp cycled four hues. Loaded on the cinema pages only (_head.tpl). */
/* =============================== */

.ngc-frame {
  --ngc-w: 71.875rem;
  --ngc-gap: 12px;
  /* [Flush hero: one rule] (2026-10-18): the hub hero is the shared .ng-hero--flush (niguro.css [Layout: flush hero]);
     the frame's top padding it climbs over is the shared --ng-flush-gap (16px, 24px from 768px), its strip behind
     the header is top padding (the picture fills the padding box), so no transparent border and no side padding
     (the content keeps to --ngc-w itself). --ngc-hx, the header + that gap, sizes the hero below. */
  --ng-flush-gap: 16px; --ng-flush-strip: 0px; --ng-flush-pad: 0px;
  --ngc-hx: calc(var(--ng-header-h, var(--ng-top, 56px)) + var(--ng-flush-gap));
  --ngc-hero-bg:
    radial-gradient(120% 140% at 100% 0%, hsl(var(--primary) / .18) 0%, hsl(var(--primary) / .06) 38%, transparent 62%),
    radial-gradient(90% 120% at 0% 100%, hsl(var(--primary) / .07) 0%, transparent 55%),
    var(--ng-card);
  --ngc-rings:
    radial-gradient(circle, transparent 46%, hsl(var(--primary) / .14) 46.5%, hsl(var(--primary) / .14) 47.5%, transparent 48%),
    radial-gradient(circle, transparent 62%, hsl(var(--primary) / .10) 62.5%, hsl(var(--primary) / .10) 63.5%, transparent 64%),
    radial-gradient(circle, transparent 78%, hsl(var(--primary) / .07) 78.5%, hsl(var(--primary) / .07) 79.5%, transparent 80%);
  --ngc-gold: 42 92% 52%;
  margin-top: 0 !important;
}
.ngc-frame--movie, .ngc-frame--tv, .ngc-frame--actor { --ngc-w: 920px; }
.ngc-frame--watchlist { --ngc-w: 1100px; }
@media (min-width: 768px) { .ngc-frame { --ngc-gap: 20px; --ng-flush-gap: 24px; } }

/* the page: 16px / 24px from the header, 32px / 40px to the footer; every block centred on its width */
.ngc { display: flex; flex-direction: column; gap: var(--ngc-gap); padding: 16px 0 32px; min-width: 0; }
@media (min-width: 768px) { .ngc { padding: 24px 0 40px; } }
/* pages without the hero start clear of the header's cloud edge on phones (the site's 20px; niguro.com 16px) */
@media (max-width: 767.98px) { .ngc-frame:not(.ngc-frame--hub) .ngc { padding-top: 20px; } }
@media (min-width: 1024px) { .ngc { padding-left: 12px; padding-right: 12px; } }
.ngc > *, .ngc-page > :not(.ngc-hero) { width: 100%; max-width: var(--ngc-w); margin-left: auto; margin-right: auto; box-sizing: border-box; }
.ngc a { text-decoration: none; }
.ngc img { max-width: 100%; display: block; }
.ngc :where(h1, h2, h3, h4, p) { margin: 0; }
.ngc-page, .ngc-list, .ngc-detail, .ngc-watchlist { display: flex; flex-direction: column; gap: var(--ngc-gap); min-width: 0; }
.ngc-credit { margin: 0 auto; padding: 4px 16px 0; text-align: center; font-size: 12px; color: var(--ng-faint); }

/* tabs (the cinema header's links): [Segments: one style] (owner, 2026-10-19), the --ng-seg-* track and pills that
   /news's category pills use (niguro.css), in one row that scrolls sideways (the shared [Scroll arrows] on hover,
   data-ng-scroll); the selected pill is the current page (niguro-cinema.js scrolls it into view). The search
   button beside it is the track's height (38px) and shape. */
.ngc-tabs { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.ngc-tabs__list {
  display: flex; flex: 0 1 auto; min-width: 0; max-width: 100%; margin-right: auto; gap: var(--ng-seg-gap); padding: var(--ng-seg-pad);
  border-radius: var(--ng-seg-r); background: var(--ng-seg-bg); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; /* [Segments: one style] */
}
.ngc-tabs__list::-webkit-scrollbar { display: none; }
.ngc-tabs__list a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--ng-seg-h); padding: 0 var(--ng-seg-px); border-radius: var(--ng-seg-r);
  background: transparent; color: var(--ng-seg-ink); font-size: var(--ng-seg-fs); font-weight: var(--ng-seg-fw); line-height: 1; white-space: nowrap;
  transition: background-color .15s, color .15s; /* [Segments: one style] */
}
.ngc-tabs__list a .ng-ico { flex: none; width: var(--ng-seg-ico); height: var(--ng-seg-ico); }
.ngc-tabs__list a:hover { background: var(--ng-seg-hover-bg); color: var(--ng-seg-hover-ink); }
.ngc-tabs__list a:focus-visible { outline: var(--ng-seg-focus); outline-offset: -2px; }
.ngc-tabs__list a.active, .ngc-tabs__list a.active:hover { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); }
.ngc-tabs__acts { display: flex; flex: none; gap: 8px; }
.ngc-tabs__search { height: 38px; border-radius: var(--ng-seg-r); }
@media (max-width: 767.98px) {
  .ngc-tabs__search { width: 38px; padding: 0; }
  .ngc-tabs__search span { display: none; }
}

/* ------------------------------- */
/* hub hero: phones and tablets full-bleed under the header; from 1024px a 520px card */
/* ------------------------------- */
.ngc-hero {
  position: relative; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; box-sizing: border-box;
  width: auto; height: 64vh; max-height: 560px; padding-top: var(--ngc-hx); background: #0b0b0d;
}
@media (min-width: 768px) { .ngc-hero { height: 520px; max-height: none; } }
/* from 1024px it stays attached under the header too (user, 2026-10-17): edge to edge between the rail and the
   window's right edge, the picture running up behind the header's cloud; the text keeps to the page's width */
@media (min-width: 1024px) {
  .ngc-hero { height: calc(480px + var(--ngc-hx)); }
  .ngc-hero__content { max-width: var(--ngc-w); margin: 0 auto; }
  .ngc-hero__dots { right: max(28px, calc((100% - var(--ngc-w)) / 2 + 28px)); }
}
/* [Flush hero phones] (2026-10-18): the pull-up was a fixed 72px (a 56px header + 16px), but the phone header is
   96px (56px without its links row), so the hero started 40px down behind it. It is now the header's measured
   height, the shared token (niguro.css [Layout: flush hero]), plus the page's top padding at every width (--ngc-hx
   above); on phones the hero grows by what it climbs beyond the old 72px, so the picture keeps its height. */
@media (max-width: 767.98px) { .ngc-hero { height: calc(64vh + var(--ngc-hx) - 72px); max-height: calc(488px + var(--ngc-hx)); } }
/* [/Flush hero phones] */
/* the picture fills the whole hero, the top padding too: the strip behind the header, so the cloud edge sits on it
   (as /trends; the hero's overflow clips at its padding box, so the strip is padding, not a border) */
/* [Cinema hero swipe] (owner, 2026-10-19): the slides sit side by side on a scroll-snap track that fills the hero
   (its padding box too, so each picture still runs up behind the header; each slide keeps the strip as its own top
   padding): the theme's strip pattern (the media pages' featured carousel), so the browser moves it under a
   sideways swipe and keeps an up / down swipe for the page (pan-x and pan-y both left to it). One slide per swipe
   (scroll-snap-stop); a swipe at the ends stays in the hero (overscroll-behavior-x), not the browser's back
   gesture. The shared [Scroll arrows] show on hover, without their soft edges (the picture runs to the window's
   edges). The dots stay over it; niguro-cinema.js moves them with the scroll. */
.ngc-hero__track {
  position: absolute; inset: 0; z-index: 1; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}
.ngc-hero__track::-webkit-scrollbar { display: none; }
.ngc-hero__slide {
  position: relative; isolation: isolate; flex: 0 0 100%; min-width: 0; display: flex; align-items: flex-end; box-sizing: border-box;
  padding-top: var(--ngc-hx); scroll-snap-align: start; scroll-snap-stop: always;
}
.ngc-hero__track.ng-sa { -webkit-mask-image: none !important; mask-image: none !important; }
.ngc-hero > .ng-strip__nav { z-index: 4; }
/* [/Cinema hero swipe] */
.ngc-hero__media { position: absolute; inset: 0; }
.ngc-hero__backdrop { position: absolute; inset: 0; display: block; }
.ngc-hero__backdrop img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.ngc-hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, hsl(0 0% 0% / .88) 0%, hsl(0 0% 0% / .45) 42%, hsl(0 0% 0% / .05) 75%),
    linear-gradient(to right, hsl(0 0% 0% / .55) 0%, transparent 60%);
}
.ngc-hero__content { position: relative; z-index: 2; width: 100%; box-sizing: border-box; padding: 24px 16px 44px; }
@media (min-width: 768px) { .ngc-hero__content { padding: 32px 36px 40px; } }
.ngc-hero__badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 12px; margin-bottom: 12px; border-radius: 999px;
  background: var(--ng-brand); color: hsl(var(--primary-foreground)); font-size: 12px; font-weight: 800;
}
.ngc-hero__badge svg { width: 14px; height: 14px; fill: currentColor; }
.ngc-hero__title { margin: 0 0 10px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: #fff; }
@media (min-width: 768px) { .ngc-hero__title { font-size: clamp(34px, 4vw, 48px); } }
.ngc-hero__title a { color: #fff; }
.ngc-hero__title a:hover { text-decoration: underline; color: #fff; }
.ngc-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ngc-hero__meta:empty { display: none; }
.ngc-hero__meta > span {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  background: hsl(0 0% 100% / .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12.5px; font-weight: 500;
}
.ngc-hero__overview {
  max-width: 560px; margin: 0; font-size: 14px; line-height: 1.55; color: hsl(0 0% 100% / .82);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 768px) { .ngc-hero__overview { font-size: 15px; } }
.ngc-hero__dots {
  position: absolute; z-index: 3; right: 16px; bottom: 16px; display: flex; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: hsl(0 0% 0% / .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ngc-hero__dots:empty { display: none; }
@media (min-width: 768px) { .ngc-hero__dots { right: 28px; bottom: 28px; } }
.ngc-hero__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: hsl(0 0% 100% / .45); cursor: pointer; transition: width .25s, background .25s; }
.ngc-hero__dot.active { width: 20px; border-radius: 999px; background: #fff; }
/* no key and nothing stored: niguro.com's notice instead of the hero */
.ngc-hero--none { display: block; height: auto; max-height: none; margin: 0 auto; padding: 0; border: 0; background: transparent; overflow: visible; }
@media (max-width: 1023.98px) { .ngc-hero--none { width: 100%; max-width: var(--ngc-w); } }

/* ------------------------------- */
/* sections (hub rows, ranking blocks, detail cards) */
/* ------------------------------- */
.ngc-sec { padding: 16px; border-radius: var(--ng-r); background: var(--ng-card); }
@media (min-width: 768px) { .ngc-sec { padding: 20px 22px; } }
.ngc-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ngc-sec__title { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--ng-ink); }
@media (min-width: 768px) { .ngc-sec__title { gap: 8px; font-size: 19px; } }
.ngc-sec__title .ng-ico { flex: none; width: 32px; height: 32px; padding: 7px; box-sizing: border-box; border-radius: 10px; background: hsl(var(--primary) / .12); color: var(--ng-brand); }
.ngc-list .ngc-sec__title { margin-bottom: 8px; }
.ngc-sec__aside { flex: none; font-size: 12px; color: var(--ng-sub); }
.ngc-sec__more { margin: 12px 2px 0; font-size: 13px; }
.ngc-sec__more a { color: var(--ng-brand); font-weight: 600; }
.ngc-sec__more a:hover { text-decoration: underline; }
/* the rows' arrows: the theme's shared [Scroll arrows] (niguro.css, niguro.js) */
/* the sideways row: room for the poster's lift, the bar out of sight */
/* [Scroll arrows] inset: the row runs to the card's edges and starts at its padding (--ng-pg, niguro.css) */
.ngc-sec, .ngc-dsec { --ng-pg: 16px; }
.ngc-band { --ng-pg: 16px; }
@media (min-width: 768px) { .ngc-sec { --ng-pg: 22px; } .ngc-dsec { --ng-pg: 22px; } .ngc-band { --ng-pg: 28px; } }
.ngc-row {
  display: flex; gap: 14px; overflow-x: auto; padding-block: 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.ngc-detail .ngc-row { padding-left: 2px; padding-right: 2px; margin: 0 -2px; }
.ngc-row::-webkit-scrollbar, .ngc-castrow::-webkit-scrollbar { height: 4px; }
.ngc-row::-webkit-scrollbar-thumb, .ngc-castrow::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--ng-line); }
.ngc-row::-webkit-scrollbar-track, .ngc-castrow::-webkit-scrollbar-track { background: transparent; }
.ngc-row > .ngc-note { margin: 0; font-size: 14px; color: var(--ng-sub); }
.ngc-row > .ngc-note button { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; }

/* ------------------------------- */
/* poster card */
/* ------------------------------- */
.ngc-card { position: relative; display: block; flex-shrink: 0; width: 152px; scroll-snap-align: start; color: inherit; cursor: pointer; }
.ngc-grid > .ngc-card { width: 100%; min-width: 0; }
.ngc-card__poster { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--ng-r-sm); background: var(--ng-fill); }
.ngc-card--person .ngc-card__poster { aspect-ratio: 3 / 4; }
.ngc .ngc-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ngc-card:hover .ngc-card__poster img { transform: scale(1.04); }
.ngc-card__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--ng-fill); color: var(--ng-sub); }
.ngc-card__ph .ng-ico { width: 32px; height: 32px; }
.ngc-card__rating {
  position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px;
  background: hsl(0 0% 0% / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.4;
}
.ngc-card__rating svg { flex: none; width: 12px; height: 12px; fill: #f59e0b; }
.ngc-card__chip {
  position: absolute; z-index: 2; top: 8px; left: 8px; max-width: calc(100% - 16px); box-sizing: border-box; padding: 3px 9px; border-radius: 999px;
  background: hsl(0 0% 0% / .72); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ngc-card__chip.is-top { background: hsl(var(--ngc-gold)); color: #1a1205; }
.ngc-card__play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.ngc-card:hover .ngc-card__play { opacity: 1; }
.ngc-card__play > span {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: hsl(0 0% 100% / .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; transition: transform .2s, background .2s;
}
.ngc-card__play > span:hover { background: hsl(0 0% 100% / .3); transform: scale(1.1); }
.ngc-card__play svg { width: 20px; height: 20px; fill: currentColor; }
.ngc-card__body { padding: 10px 2px 2px; }
.ngc-card__title { margin-bottom: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: var(--ng-ink); }
.ngc-card:hover .ngc-card__title { color: var(--ng-brand); }
.ngc-card__meta { margin: 0; font-size: 12px; color: var(--ng-sub); }
.ngc-card__bs { margin-top: 2px; }
.ngc-card__wl {
  position: absolute; z-index: 3; top: 8px; left: 8px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: 50%; background: hsl(0 0% 0% / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer;
}
.ngc-card__wl svg { width: 14px; height: 14px; fill: currentColor; }
.ngc-card__wl.saved { color: hsl(var(--destructive)); }

/* skeletons */
.ngc-skel { flex-shrink: 0; width: 160px; border-radius: var(--ng-r-sm); animation: ngc-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.ngc-grid > .ngc-skel { width: auto; min-width: 0; }
.ngc-skel__poster { aspect-ratio: 2 / 3; margin-bottom: 8px; border-radius: var(--ng-r-sm); background: var(--ng-fill-2); }
.ngc-skel__text { width: 70%; height: 14px; margin-bottom: 6px; border-radius: 6px; background: var(--ng-fill-2); }
.ngc-skel--fill { width: 100%; height: 100%; border-radius: 0; background: hsl(0 0% 100% / .06); }
@keyframes ngc-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* grids */
.ngc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 14px; }
@media (max-width: 767.98px) { .ngc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .ngc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* buttons */
.ngc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, filter .2s; text-decoration: none;
}
.ngc-btn--primary, .ngc-btn--primary:hover { background: var(--ng-brand); color: hsl(var(--primary-foreground)); }
.ngc-btn--primary:hover { filter: brightness(1.06); }
.ngc-btn--outline { background: var(--ng-fill); color: var(--ng-ink); }
.ngc-btn--outline:hover { background: var(--ng-fill-2); color: var(--ng-ink); }
.ngc-more { margin-top: 14px; }
.ngc-more__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 12px 16px; border: 0; border-radius: 999px;
  background: var(--ng-fill); color: var(--ng-ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s;
}
.ngc-more__btn:hover { background: hsl(var(--primary) / .1); color: var(--ng-brand); }
.ngc-more__btn:disabled { opacity: .5; cursor: default; }
.ngc-more__btn[hidden] { display: none; }

/* error / empty */
.ngc-error { padding: 40px 16px; border-radius: var(--ng-r); background: var(--ng-card); text-align: center; }
.ngc-error h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: hsl(var(--destructive)); }
.ngc-error p { margin: 0; font-size: 14px; color: var(--ng-sub); }
.ngc-error--flat { padding: 24px 0; }

/* ------------------------------- */
/* a movie, a TV show, a person */
/* ------------------------------- */
.ngc-dcard { overflow: hidden; border-radius: var(--ng-r); background: var(--ng-card); }
.ngc-dsec { padding: 16px; border-radius: var(--ng-r); background: var(--ng-card); }
@media (min-width: 768px) { .ngc-dsec { padding: 22px; } }
.ngc-cover { position: relative; height: 220px; overflow: hidden; }
@media (min-width: 768px) { .ngc-cover { height: 340px; } }
.ngc .ngc-cover img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease-in-out; }
.ngc-cover img[data-lightbox-images] { cursor: pointer; }
.ngc-cover__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, hsl(0 0% 0% / .8), hsl(0 0% 0% / .4) 50%, transparent); }
.ngc-cover__count {
  position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid hsl(0 0% 100% / .1);
  border-radius: 999px; background: hsl(0 0% 0% / .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: hsl(0 0% 100% / .9); font-size: 12px; font-weight: 500; pointer-events: none;
}
.ngc-cover__count .ng-ico { width: 12px; height: 12px; }

.ngc-ident { padding: 16px; }
@media (min-width: 768px) { .ngc-ident { padding: 24px 28px 26px; } }
.ngc-ident__row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .ngc-ident__row { flex-direction: row; gap: 24px; } }
.ngc-ident__poster { flex-shrink: 0; }
.ngc .ngc-poster {
  width: 128px; height: 192px; object-fit: cover; border-radius: var(--ng-r-sm); outline: 4px solid var(--ng-card);
  box-shadow: 0 2px 6px hsl(0 0% 0% / .12), 0 14px 32px hsl(0 0% 0% / .2);
}
.ngc .ngc-ident__poster--person .ngc-poster { width: 176px; height: 256px; }
@media (min-width: 768px) { .ngc .ngc-poster, .ngc .ngc-ident__poster--person .ngc-poster { width: 160px; height: 240px; } }
.ngc-poster[data-lightbox-images] { cursor: pointer; }
.ngc-ident--over .ngc-ident__poster { position: relative; z-index: 2; margin-top: -72px; }
@media (min-width: 768px) { .ngc-ident--over .ngc-ident__poster { margin-top: -96px; } }
.ngc-ident__main { flex: 1; min-width: 0; }
.ngc-h1 { margin: 0 0 12px; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: var(--ng-ink); }
@media (min-width: 768px) { .ngc-h1 { font-size: 32px; } }
.ngc-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ngc-fact {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--ng-fill); color: var(--ng-ink); font-size: 13px; font-weight: 600;
}
.ngc-fact .ng-ico { flex: none; width: 16px; height: 16px; margin-right: 6px; color: var(--ng-sub); }
.ngc-fact__star { flex: none; width: 16px; height: 16px; margin-right: 6px; fill: #facc15; }
.ngc-fact--brand > span { color: var(--ng-brand); }
.ngc-fact__dim { color: hsl(var(--muted-foreground) / .7); font-weight: 600; }
.ngc-fact__death { margin-left: 8px; }
.ngc-fact__bs::before { content: "\00B7"; margin: 0 6px; }
.ngc-fact--network { gap: 8px; }
.ngc-fact__label { font-size: 12px; color: var(--ng-sub); }
.ngc .ngc-fact--network img { height: 24px; width: auto; }
.ngc-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ngc-genre {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: hsl(var(--primary) / .1); color: var(--ng-brand); font-size: 12px; font-weight: 600;
}
.ngc-wl-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; margin: 0; border: 0; border-radius: 999px;
  background: hsl(var(--primary) / .1); color: var(--ng-brand); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s;
}
.ngc-wl-btn:hover { background: hsl(var(--primary) / .16); }
.ngc-wl-btn .ng-ico { width: 18px; height: 18px; }
.ngc-wl-btn.saved { background: var(--ng-brand); color: hsl(var(--primary-foreground)); }
.ngc-wl-btn.saved .ng-ico { fill: currentColor; }
.ngc-overview { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--ng-line); }
.ngc-h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; color: var(--ng-ink); }
.ngc-text { font-size: 14.5px; line-height: 1.65; color: var(--ng-sub); }
.ngc-text p { margin: 0; }
.ngc-text p + p { margin-top: 10px; }

.ngc-band { padding: 4px 16px 16px; }
@media (min-width: 768px) { .ngc-band { padding: 4px 28px 26px; } }
.ngc-band__title { padding-top: 18px; border-top: 1px solid var(--ng-line); }
.ngc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ngc-tile {
  position: relative; display: flex; align-items: center; gap: 10px; overflow: hidden; padding: 12px 14px; border-radius: var(--ng-r-sm);
  background: linear-gradient(140deg, hsl(var(--primary) / .14), hsl(var(--primary) / .05));
}
.ngc-tile > .ng-ico { flex: none; width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 999px; background: hsl(var(--primary) / .18); color: var(--ng-brand); }
.ngc-tile > div { min-width: 0; }
.ngc-tile h3 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ng-sub); }
.ngc-tile p { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ng-ink); }
.ngc-tile .ngc-tile__bs { font-size: 12.5px; font-weight: 400; color: var(--ng-sub); }
.ngc-tile__dim { color: var(--ng-sub); font-weight: 400; }
.ngc-band__block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ng-line); }
.ngc-h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ng-ink); }
.ngc-h3--small { margin-bottom: 12px; font-size: 12px; color: var(--ng-sub); }
@media (min-width: 768px) { .ngc-h3--small { font-size: 14px; } }
.ngc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ngc-chip {
  display: inline-block; padding: var(--ng-chip-pad); border-radius: var(--ng-chip-r); background: var(--ng-fill); color: var(--ng-ink); font-size: var(--ng-chip-fs); font-weight: var(--ng-chip-fw); height: var(--ng-chip-h); line-height: var(--ng-chip-h); /* [Chips: one size] */
}
a.ngc-chip:hover { background: hsl(var(--primary) / .1); color: var(--ng-brand); }
.ngc-brand { flex: none; width: 14px; height: 14px; fill: currentColor; }
.ngc-trailer { overflow: hidden; border-radius: var(--ng-r-sm); background: #000; }
.ngc-trailer h4 { margin: 0; padding: 10px 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--ng-fill); color: var(--ng-ink); font-size: 13px; font-weight: 600; }
.ngc-trailer__frame { position: relative; padding-bottom: 56.25%; }
.ngc-trailer__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* TV: the cast row inside the card */
.ngc-band--cast .ngc-sec__head { margin-bottom: 24px; }
.ngc-band--cast .ngc-h2 { margin: 0; }
.ngc-castrow { display: flex; gap: 14px; overflow-x: auto; padding-block: 2px 10px; }
.ngc-castcard { flex-shrink: 0; width: 108px; color: inherit; }
.ngc-castcard__photo {
  display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; margin-bottom: 8px; overflow: hidden; border-radius: 50%;
  background: var(--ng-fill); box-shadow: 0 0 0 3px var(--ng-card), 0 0 0 5px hsl(var(--primary) / .18);
}
.ngc .ngc-castcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.ngc-castcard__photo span { font-size: 24px; font-weight: 700; color: var(--ng-sub); }
.ngc-castcard__info { text-align: center; }
.ngc-castcard__info strong { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--ng-ink); }
.ngc-castcard__info span { font-size: 11px; color: var(--ng-sub); }

/* TV: seasons */
.ngc-seasons { display: flex; flex-direction: column; gap: 10px; }
.ngc-season { overflow: hidden; border-radius: var(--ng-r-sm); background: var(--ng-fill); }
.ngc-season__sum { display: flex; align-items: center; gap: 14px; padding: 12px 14px; font-size: 14px; color: var(--ng-ink); cursor: pointer; list-style: none; transition: background .2s; }
.ngc-season__sum::-webkit-details-marker { display: none; }
.ngc-season__sum:hover { background: var(--ng-fill-2); }
.ngc-season__poster { flex-shrink: 0; width: 50px; }
.ngc .ngc-season__poster img { width: 100%; border-radius: 8px; }
.ngc-season__poster span { display: flex; align-items: center; justify-content: center; width: 50px; height: 75px; border-radius: 8px; background: var(--ng-card); color: var(--ng-sub); font-size: 12px; }
.ngc-season__meta { flex: 1; min-width: 0; }
.ngc-season__meta strong { display: block; font-weight: 500; }
.ngc-season__meta span { display: block; font-size: 12px; color: var(--ng-sub); }
.ngc-season__chev { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.ngc-season[open] .ngc-season__chev { transform: rotate(90deg); }
.ngc-season__eps { padding: 0 14px 14px; }
.ngc-season__wait { padding: 8px; font-size: 12px; color: var(--ng-sub); }
.ngc-eps { display: grid; gap: 8px; }
.ngc-ep { display: flex; gap: 10px; padding: 8px; border-radius: 12px; transition: background .2s; }
.ngc-ep:hover { background: var(--ng-card); }
.ngc-ep__still { flex-shrink: 0; width: 120px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--ng-card); }
.ngc .ngc-ep__still img { width: 100%; height: 100%; object-fit: cover; }
.ngc-ep__info { flex: 1; min-width: 0; }
.ngc-ep__num { margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--ng-sub); }
.ngc-ep__title { margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--ng-ink); }
.ngc-ep__text { margin: 0; font-size: 11px; color: var(--ng-sub); }

/* cast and filmography grids */
.ngc-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) { .ngc-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ngc-pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ngc-pcard { overflow: hidden; border-radius: var(--ng-r-sm); background: var(--ng-fill); }
.ngc-pcard > a { display: block; color: inherit; }
.ngc-pcard__img { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--ng-fill-2); }
.ngc-pcard__img--person { aspect-ratio: 3 / 4; }
.ngc .ngc-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ngc-pcard:hover .ngc-pcard__img img { transform: scale(1.05); }
.ngc-pcard__initial, .ngc-pcard__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ng-sub); font-size: 36px; font-weight: 700; }
.ngc-pcard__ph .ng-ico { width: 48px; height: 48px; }
.ngc-pcard .ngc-card__rating { gap: 4px; padding: 4px 8px; background: hsl(0 0% 0% / .7); font-size: 12px; font-weight: 600; }
.ngc-pcard .ngc-card__rating svg { fill: #facc15; }
.ngc-pcard__body { padding: 10px 12px 12px; }
.ngc-pcard__body h3 {
  margin: 0 0 2px; font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ng-ink); transition: color .2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ngc-pcard:hover .ngc-pcard__body h3 { color: var(--ng-brand); }
.ngc-pcard__body p { margin: 0; font-size: 12px; line-height: 1.35; color: var(--ng-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ngc-pcard__body p.ngc-pcard__one { margin-bottom: 4px; -webkit-line-clamp: 1; }

/* person: photos */
.ngc-photos { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.ngc-photos::-webkit-scrollbar { display: none; }
.ngc-photos__item { flex-shrink: 0; scroll-snap-align: start; }
.ngc .ngc-photos__item img { width: auto; max-width: none; height: 256px; object-fit: cover; border-radius: var(--ng-r-sm); cursor: pointer; }
.ngc-note { margin: 8px 0 0; font-size: 12px; color: var(--ng-sub); }

/* ------------------------------- */
/* browse pages */
/* ------------------------------- */
.ngc-head, .ngc-ehero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--ng-r); background: var(--ngc-hero-bg); }
.ngc-head { padding: 22px 18px 18px; }
.ngc-head::before, .ngc-ehero::before {
  content: ""; position: absolute; z-index: -1; right: -110px; top: -130px; width: 340px; height: 340px; border-radius: 50%;
  background: var(--ngc-rings); pointer-events: none;
}
@media (min-width: 768px) { .ngc-head { padding: 30px 28px 24px; } }
.ngc-head--plain { padding: 22px 18px; }
@media (min-width: 768px) { .ngc-head--plain { padding: 30px 28px; } }
.ngc-head__eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--ng-brand); }
.ngc-head__title { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: var(--ng-ink); }
.ngc-head--plain .ngc-head__title { margin: 0; }
@media (min-width: 768px) { .ngc-head__title { font-size: 32px; } }
.ngc-head__sub { max-width: 620px; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ng-sub); }

.ngc-filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ngc .ngc-select {
  width: auto; height: auto; min-height: 38px; padding: 0 34px 0 14px; border: 0; border-radius: 999px; outline: none; box-shadow: none;
  background-color: var(--ng-fill); color: var(--ng-ink); font-size: 13px; font-weight: 600; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ngc-searchbar {
  display: flex; align-items: center; gap: 10px; max-width: 650px; min-height: 46px; margin: 0 auto; padding: 4px 4px 4px 16px; box-sizing: border-box;
  border-radius: 999px; background: var(--ng-fill);
}
.ngc-searchbar > .ng-ico { flex: none; width: 18px; height: 18px; color: var(--ng-sub); }
.ngc .ngc-searchbar input {
  flex: 1; min-width: 0; height: auto; padding: 6px 0; border: 0; outline: none; box-shadow: none; background: transparent; color: var(--ng-ink); font-size: 14.5px;
}
.ngc-searchbar .ngc-btn { min-height: 38px; }
.ngc-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 4px; }
.ngc-pager:empty { display: none; }
.ngc-pager__info { font-size: 13px; font-weight: 600; color: var(--ng-sub); }

/* ------------------------------- */
/* rankings (top-*, Nepali) */
/* ------------------------------- */
.ngc-list__lead { display: flex; flex-direction: column; gap: var(--ngc-gap); }
.ngc-ehero { padding: 22px 18px 20px; }
.ngc-ehero::before { width: 360px; height: 360px; }
@media (min-width: 768px) { .ngc-ehero { padding: 32px 30px 26px; } }
.ngc-ehero h1 { margin: 0 0 14px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.14; color: var(--ng-ink); }
@media (min-width: 768px) { .ngc-ehero h1 { font-size: clamp(30px, 3.4vw, 38px); } }
.ngc-ehero h1 span { display: block; margin-top: 6px; font-size: .6em; font-weight: 600; letter-spacing: -.01em; color: var(--ng-sub); }
.ngc-ehero__desc { display: flex; flex-direction: column; gap: 6px; max-width: 74ch; }
.ngc-ehero__desc h2 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ng-brand); }
.ngc-ehero__desc p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--ng-sub); }
.ngc-ehero__badges { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ngc-ehero__badges span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--ng-card); color: var(--ng-ink); font-size: 12px; font-weight: 600;
}
.ngc-ehero__note { margin: 12px 0 0; font-size: 12px; color: var(--ng-faint); }

.ngc-box { border-radius: var(--ng-r); background: var(--ng-card); }
.ngc-feat.ngc-box { padding: 16px; }
@media (min-width: 768px) { .ngc-feat.ngc-box { padding: 20px 22px; } }
.ngc-feat__head { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
@media (min-width: 640px) { .ngc-feat__head { flex-direction: row; align-items: center; } }
.ngc-feat__head > h2:not(.ngc-sec__title) { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--ng-ink); }
.ngc-feat__tags { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ng-sub); }
.ngc-feat__tags > * { white-space: nowrap; }
@media (min-width: 640px) { .ngc-feat__tags { gap: 16px; font-size: 14px; } }

/* the trio: #1 spans two columns, #2 and #3 one each */
.ngc-trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .ngc-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ngc-trio { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ngc-trio__lead { grid-column: span 2; display: block; color: #fff; }
.ngc-trio__leadbox {
  position: relative; overflow: hidden; border-radius: var(--ng-r-md);
  background: linear-gradient(to bottom right, hsl(var(--primary) / .9), hsl(var(--primary) / .7)); box-shadow: var(--ng-shadow-lg);
}
.ngc .ngc-trio__leadbox img { width: 100%; height: 288px; object-fit: cover; opacity: .9; }
@media (min-width: 768px) { .ngc .ngc-trio__leadbox img { height: 320px; } }
@media (min-width: 640px) {
  .ngc-trio__leadbox { height: 100%; min-height: 288px; }
  .ngc .ngc-trio__leadbox img { position: absolute; inset: 0; height: 100%; }
}
.ngc-trio__shade { position: absolute; inset: 0; background: linear-gradient(to top, hsl(0 0% 0% / .7), transparent 50%, transparent); }
.ngc-trio__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; }
.ngc-trio__chips { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ngc-trio__rank { padding: 3px 9px; border-radius: 999px; background: hsl(var(--ngc-gold)); color: #000; font-size: 12px; font-weight: 700; }
.ngc-trio__glass { padding: 3px 9px; border-radius: 999px; background: hsl(0 0% 0% / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12px; }
.ngc-trio__text h3 { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.2; color: #fff; }
.ngc-trio__text h3.is-tight { margin-bottom: 4px; }
.ngc-trio__text p { margin: 0 0 8px; font-size: 14px; color: #e5e7eb; }
.ngc-trio__text p.is-last { margin: 0; }
.ngc-trio__side { display: block; overflow: hidden; border-radius: var(--ng-r-sm); background: var(--ng-fill); color: inherit; }
.ngc .ngc-trio__side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ngc-trio__body { padding: 12px; }
.ngc-trio__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ngc-trio__badge { padding: 4px 8px; border-radius: 999px; background: var(--ng-card); color: var(--ng-ink); font-size: 12px; font-weight: 700; }
.ngc-trio__score { font-size: 12px; font-weight: 600; color: var(--ng-sub); }
.ngc-trio__body h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ng-ink); }
.ngc-trio__body p { margin: 0 0 8px; font-size: 12px; color: var(--ng-sub); }

/* genre pills */
.ngc-pills { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.ngc-pills::-webkit-scrollbar { display: none; }
.ngc-pills button {
  flex-shrink: 0; padding: var(--ng-chip-pad); border: 0; border-radius: var(--ng-chip-r); background: var(--ng-card); color: var(--ng-ink); font-size: var(--ng-chip-fs); font-weight: var(--ng-chip-fw); cursor: pointer; display: inline-block; height: var(--ng-chip-h); line-height: var(--ng-chip-h); /* [Chips: one size] */
}
.ngc-pills button.active { background: var(--ng-ink); color: hsl(var(--background)); }

/* the ranked list */
.ngc-ranked__head { padding: 16px 16px 6px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ng-ink); }
.ngc-ranked__list { padding: 0 8px; }
.ngc-rrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; color: inherit; cursor: pointer; }
.ngc-rrow + .ngc-rrow { border-top: 1px solid var(--ng-line); }
.ngc-rrow:hover { background: var(--ng-fill); }
.ngc-rrow__rank { width: 32px; flex: none; text-align: center; font-size: 14px; font-weight: 600; color: var(--ng-ink); }
.ngc-rrow__rank.is-top { color: var(--ng-brand); }
.ngc .ngc-rrow img { flex: none; width: 40px; height: 56px; object-fit: cover; border: 1px solid var(--ng-line); border-radius: 10px; }
.ngc-rrow__ph {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 56px; box-sizing: border-box; border: 1px solid var(--ng-line);
  border-radius: 10px; background: var(--ng-tile); color: var(--ng-brand); font-size: 13px; font-weight: 700;
}
.ngc-rrow__info { flex: 1; min-width: 0; }
.ngc-rrow__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: var(--ng-ink); }
.ngc-rrow__sub { font-size: 12px; color: var(--ng-sub); }
.ngc-rrow__score { flex: none; font-size: 14px; font-weight: 600; color: var(--ng-ink); }
.ngc-rrow__pop { flex: none; font-size: 12px; color: var(--ng-sub); }
.ngc-ranked__note { padding: 24px; text-align: center; font-size: 14px; color: var(--ng-sub); }
.ngc-ranked__note.is-error { color: hsl(var(--destructive)); }
.ngc-ranked__foot { padding: 16px; }
.ngc-ranked__end { margin-top: 8px; text-align: center; font-size: 14px; color: var(--ng-sub); }

/* body copy on the Nepali pages */
.ngc-prose { font-size: 14.5px; line-height: 1.72; color: var(--ng-sub); }
.ngc-prose h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--ng-ink); }
.ngc-prose h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 700; color: var(--ng-ink); }
.ngc-prose p { margin: 0 0 12px; }
.ngc-prose strong { font-weight: 600; color: var(--ng-ink); }
.ngc-prose a { color: var(--ng-brand); }

/* ------------------------------- */
/* watchlist */
/* ------------------------------- */
.ngc-empty {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px;
  border-radius: var(--ng-r); background: var(--ng-card); text-align: center;
}
.ngc-empty > .ng-ico { width: 64px; height: 64px; padding: 14px; box-sizing: border-box; border-radius: 999px; background: hsl(var(--primary) / .1); color: var(--ng-brand); }
.ngc-empty h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--ng-ink); }
.ngc-empty p { max-width: 400px; margin: 0; font-size: 14px; color: var(--ng-sub); }

/* ------------------------------- */
/* search overlay, trailer, gallery */
/* ------------------------------- */
.ngc-search { position: fixed; inset: 0; z-index: 1090; }
.ngc-search[hidden], .ngc-trailer-modal[hidden], .ngc-lightbox[hidden] { display: none; }
.ngc-search__backdrop { position: absolute; inset: 0; background: hsl(0 0% 0% / .6); }
.ngc-search__dialog { position: absolute; inset: 0; overflow: hidden; background: hsl(var(--background)); animation: ngc-search-in .35s cubic-bezier(.25, .1, .25, 1) forwards; }
.ngc-search.is-closing .ngc-search__dialog { animation: ngc-search-out .25s cubic-bezier(.25, .1, .25, 1) forwards; }
@keyframes ngc-search-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes ngc-search-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px); } }
.ngc-search__box { position: relative; display: flex; flex-direction: column; height: 100%; max-width: 1360px; margin: 0 auto; padding: 16px 24px 0; box-sizing: border-box; }
.ngc-search__field { position: relative; flex-shrink: 0; margin-bottom: 20px; }
.ngc-search__inner {
  display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 0 20px; border: 1px solid transparent; border-radius: 20px;
  background: var(--ng-fill); transition: border-color .2s;
}
.ngc-search__inner:focus-within { border-color: var(--ng-brand); }
.ngc-search__ico { flex: none; width: 20px; height: 20px; color: var(--ng-sub); }
.ngc .ngc-search__input, .ngc-search .ngc-search__input {
  flex: 1; min-width: 0; height: auto; padding: 8px 0; border: 0; outline: none; box-shadow: none; background: transparent;
  color: var(--ng-ink); font-size: 22px; font-weight: 500;
}
.ngc-search__input::placeholder { opacity: .6; }
.ngc-search__close { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ng-sub); cursor: pointer; }
.ngc-search__close:hover { color: var(--ng-ink); }
.ngc-search__close .ng-ico { width: 16px; height: 16px; }
.ngc-search__loading { display: none; height: 3px; margin-top: -1px; overflow: hidden; border-radius: 0 0 20px 20px; }
.ngc-search__loading.active { display: block; }
.ngc-search__loading::after { content: ""; display: block; width: 33%; height: 100%; border-radius: 2px; background: var(--ng-brand); animation: ngc-search-bar 1.2s ease-in-out infinite; }
@keyframes ngc-search-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
.ngc-search__results { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 32px; scrollbar-width: none; }
.ngc-search__results::-webkit-scrollbar { display: none; }
.ngc-search__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; padding: 40px 20px; text-align: center; }
.ngc-search__empty[hidden] { display: none; }
.ngc-search__empty-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 50%; background: var(--ng-fill); color: var(--ng-sub); }
.ngc-search__empty-ico .ng-ico { width: 24px; height: 24px; }
.ngc-search__empty h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--ng-ink); }
.ngc-search__empty p { margin: 0 0 20px; font-size: 14px; color: var(--ng-sub); }
.ngc-search__hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ngc-search__hints span { padding: 6px 14px; border-radius: 999px; background: var(--ng-fill); color: var(--ng-sub); font-size: 12px; font-weight: 600; }
.ngc-search__none { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.ngc-search__none[hidden] { display: none; }
.ngc-search__none p { padding: 48px 0; font-size: 15px; color: var(--ng-sub); text-align: center; }
.ngc-search__sec { margin-bottom: 28px; }
.ngc-search__title { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ng-ink); }
.ngc-search .ngc-card { width: 100%; }
.ngc-search .ngc-card__poster img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) {
  .ngc-search__box { padding: 12px 12px 0; }
  .ngc-search__inner { min-height: 56px; padding: 0 14px; }
  .ngc-search .ngc-search__input { font-size: 17px; }
}

.ngc-trailer-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; }
.ngc-trailer-modal__backdrop { position: absolute; inset: 0; background: hsl(0 0% 0% / .9); }
.ngc-trailer-modal__content { position: relative; width: 90%; max-width: 960px; aspect-ratio: 16 / 9; }
.ngc-trailer-modal__player { width: 100%; height: 100%; overflow: hidden; border-radius: 16px; background: #000; }
.ngc-trailer-modal__player iframe { width: 100%; height: 100%; border: 0; }
.ngc-trailer-modal__player .ngc-error { height: 100%; box-sizing: border-box; border-radius: 0; background: transparent; }
.ngc-trailer-modal__close {
  position: absolute; z-index: 10; top: -44px; right: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: hsl(0 0% 100% / .7); font-size: 20px; cursor: pointer;
}
.ngc-trailer-modal__close:hover { color: #fff; }

.ngc-lightbox { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: #000; }
.ngc-lightbox__stage { position: relative; display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; overflow: hidden; }
.ngc-lightbox__stage img { max-width: 100%; max-height: 100%; padding: 0 48px; box-sizing: border-box; object-fit: contain; border-radius: 8px; user-select: none; }
.ngc-lightbox__btn {
  position: absolute; z-index: 30; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 50%; background: hsl(0 0% 0% / .5); color: #fff; font-size: 24px; cursor: pointer;
}
.ngc-lightbox__btn:hover { background: hsl(0 0% 0% / .75); }
.ngc-lightbox__close { top: 12px; right: 12px; }
.ngc-lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); font-size: 28px; }
.ngc-lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); font-size: 28px; }
.ngc-lightbox__thumbs { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; overflow-x: auto; background: hsl(0 0% 0% / .4); }
.ngc-lightbox__thumbs button { flex: none; width: 48px; height: 48px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: none; opacity: .6; cursor: pointer; }
.ngc-lightbox__thumbs button.active { border-color: #fff; opacity: 1; }
.ngc-lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
body.ngc-locked { overflow: hidden; }