/* Kinogo Ninja rankings: real category popularity and a focused home carousel. */
.ninja-popular[data-ninja-focus-carousel] .ninja-top-rank[data-ninja-place]::before { content: attr(data-ninja-place); }
.ninja-popular [data-ninja-autoplay] { font-size: 15px; font-weight: 700; }
.ninja-category-top { --top-ink: #f5fbf5; --top-muted: #c9dfcf; --top-gold: #e8cb8b; --top-line: rgba(235,255,238,.16); --top-fill: #315f40; margin: 28px 0 34px; min-width: 0; color: var(--top-ink); }
.lt-is-active .ninja-category-top { --top-ink: #233d2c; --top-muted: #526b59; --top-gold: #786329; --top-line: rgba(31,75,44,.2); --top-fill: #e0ecd5; }
.ninja-catalog > .ninja-category-top:first-child { margin-top: 0; }
.ninja-category-top__heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.ninja-category-top__heading .ninja-eyebrow { font-size: 8px; letter-spacing: 1.5px; }
.ninja-category-top__heading h2 { margin: 6px 0 0; color: var(--top-ink); font-size: 23px; font-weight: 700; line-height: 1.3; letter-spacing: -.6px; }
.ninja-category-top__controls { display: flex; gap: 7px; }
.ninja-category-top__controls[hidden] { display: none; }
.ninja-theme .ninja-category-top__controls button { display: grid; place-items: center; width: 38px; height: 38px; min-height: 38px; margin: 0; padding: 0; border: 1px solid var(--top-line); border-radius: 12px; color: var(--top-ink); background: var(--ninja-glass); box-shadow: none; }
.ninja-theme .ninja-category-top__controls button:disabled { opacity: .3; cursor: default; }
.ninja-category-top__controls svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ninja-category-top__track { display: flex; gap: 18px; width: 100%; margin: 0; padding: 4px 2px 12px; overflow-x: auto; list-style: none; counter-reset: ninja-category-rank; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-x pan-y pinch-zoom; cursor: grab; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--top-line) transparent; }
.ninja-category-top__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ninja-top-item { flex: 0 0 186px; min-width: 0; counter-increment: ninja-category-rank; scroll-snap-align: none; scroll-snap-stop: normal; }
.ninja-top-item__visual { position: relative; display: block; padding-left: 35px; color: var(--top-gold); }
.ninja-top-item__poster { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; border: 1px solid var(--top-line); border-radius: 15px; background: #25422d; }
.ninja-top-item__poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ninja-top-item__poster::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,rgba(13,31,20,.75)); pointer-events: none; }
.ninja-top-item__rank { position: absolute; left: 0; bottom: -7px; z-index: 2; color: var(--top-fill); -webkit-text-stroke: 2px var(--top-gold); font: 900 132px/1 NinjaOutfit,Manrope,sans-serif; letter-spacing: -9px; text-shadow: 0 5px 18px rgba(13,31,20,.22); pointer-events: none; }
.ninja-top-item__rank::before { content: counter(ninja-category-rank); }
.ninja-top-item:nth-child(10) .ninja-top-item__rank { font-size: 116px; letter-spacing: -13px; left: -3px; }
.ninja-top-item__rating { position: absolute; z-index: 2; top: 9px; right: 9px; padding: 5px 7px; color: #fff; background: rgba(16,38,24,.9); border-radius: 8px; font-size: 9px; line-height: 1.2; }
.ninja-top-item__rating b { margin-left: 3px; font-size: 11px; }
.ninja-top-item__play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; color: #263b27; background: #e3c78a; opacity: 0; transform: translate(-50%,-35%); transition: opacity .2s ease,transform .2s ease; font-size: 13px; }
.ninja-top-item__title { margin: 14px 0 5px 35px; padding: 0; color: var(--top-ink); font-size: 13px; font-weight: 700; line-height: 1.45; }
.ninja-top-item__title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: inherit; overflow-wrap: anywhere; }
.ninja-top-item__meta { display: flex; gap: 8px; margin-left: 35px; color: var(--top-muted); font-size: 10px; line-height: 1.4; }
.ninja-category-top :is(a,button,[tabindex]):focus-visible { outline: 2px solid var(--top-gold); outline-offset: 4px; border-radius: 12px; }
@media (hover: hover) {
    .ninja-top-item__visual:hover img { transform: scale(1.035); }
    .ninja-top-item__visual:hover .ninja-top-item__play { opacity: 1; transform: translate(-50%,-50%); }
    .ninja-top-item__title a:hover { color: var(--top-gold); }
}
.ninja-popular[data-ninja-focus-carousel] .ninja-popular__track { scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-x pan-y pinch-zoom; cursor: grab; }
.ninja-popular[data-ninja-focus-carousel] .ninja-popular__track.is-dragging { cursor: grabbing; user-select: none; }
@media (min-width: 1100px) {
    .ninja-theme .ninja-hero:has([data-ninja-focus-carousel]) { min-height: 585px; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-popular__heading { padding-right: 122px; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-popular__track { --ninja-pick-height: 156px; --ninja-visible-slots: 3; height: calc(var(--ninja-pick-height) * var(--ninja-visible-slots) + 14px * (var(--ninja-visible-slots) - 1) + 8px); scroll-snap-type: none; overflow-anchor: none; }
    .ninja-theme .ninja-popular[data-ninja-focus-carousel] .card.ninja-pick--reel { padding: 9px; opacity: .62; transform: scale(.94); transform-origin: center; scroll-snap-align: center; transition: opacity .3s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
    .ninja-theme .ninja-popular[data-ninja-focus-carousel] .card.ninja-pick--reel.is-active { opacity: 1; transform: scale(1); border-color: #e3c78a99; box-shadow: 0 0 0 1px #e3c78a22,0 8px 25px #112d2220; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-card__poster { flex-basis: 82px; width: 82px; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-card__body { padding-top: 0; padding-bottom: 0; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-card__meta { min-height: 14px; font-size: 9px; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-card__title { font-size: 14px; line-height: 1.4; margin-bottom: 4px; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-card__genre { margin-bottom: 3px; line-height: 1.35; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-pick__description { line-height: 1.4; margin-bottom: 5px; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-card__footer { padding-top: 4px; }
}
@media (max-width: 1099px) {
    .ninja-popular[data-ninja-focus-carousel] .ninja-popular__track { scroll-snap-type: none; scroll-behavior: auto; overflow-anchor: none; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-pick--reel { scroll-snap-align: none; scroll-snap-stop: normal; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-popular__heading { min-height: 34px; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-popular__count { margin-right: 44px; }
    .ninja-theme .ninja-popular[data-ninja-focus-carousel] .ninja-popular__controls [data-ninja-autoplay] { top: -46px; right: 0; left: auto; transform: none; width: 34px; height: 34px; min-height: 34px; border-radius: 11px; }
}
@media (max-width: 600px) {
    .ninja-category-top { margin: 24px 0 27px; }
    .ninja-category-top__heading h2 { font-size: 21px; }
    .ninja-category-top__track { gap: 14px; }
    .ninja-top-item { flex-basis: 160px; }
    .ninja-top-item__rank { font-size: 115px; }
    .ninja-top-item:nth-child(10) .ninja-top-item__rank { font-size: 100px; }
    .ninja-top-item__title { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ninja-theme .ninja-popular[data-ninja-focus-carousel] .card.ninja-pick--reel, .ninja-top-item__poster img, .ninja-top-item__play { transition: none; }
}

/* Keep bookmark targets separate from the title, including scaled desktop slides. */
.ninja-popular[data-ninja-focus-carousel] .ninja-pick--reel .ninja-card__title { padding-right: 44px; }
.ninja-popular[data-ninja-focus-carousel] .ninja-pick--reel .ninja-card__title a { min-height: 28px; }
.ninja-theme .ninja-popular[data-ninja-focus-carousel] .ninja-pick--reel .ninja-card__favorite > :is(a, button),
.ninja-theme .ninja-popular[data-ninja-focus-carousel] .ninja-pick--reel .ninja-card__favorite > span > a { width: 36px; height: 36px; min-height: 36px; border-radius: 10px; }
@media (max-width: 1099px) {
    /* Put the title below the bookmark row so narrow screens keep its full width. */
    .ninja-popular[data-ninja-focus-carousel] .ninja-pick--reel .ninja-card__meta { min-height: 40px; padding-right: 44px; }
    .ninja-popular[data-ninja-focus-carousel] .ninja-pick--reel .ninja-card__title { padding-right: 0; }
}