/* =====================================================
   DETAIL PAGE — cinematic redesign (2026-10-09)
   Loaded by fullstory.tpl only, after neon.css. Everything is scoped to
   .nx-d (the detail page root, which also carries .nx-cine / .nx-watch),
   so the header, the other pages and the shared components elsewhere
   are not touched. The palette (the site's violet, amber only for
   IMDb and HD, no reds) lives in --d-* here; the site's own
   tokens (--accent, --surface, ...) and the older --c-* / --watch-*
   ones are remapped inside the page, so the player server bar, the
   comment form and the cards take the same colours.
===================================================== */

.nx-d {
    --d-bg: #080A0F;
    --d-bg2: #10131A;
    --d-elev: #151923;
    --d-acc: #B78CFF;
    --d-acc2: #8B5CF6;
    --d-acc-l: #D1B5FF;
    --d-warm: #E5B86B;
    --d-text: #F5F5F7;
    --d-text2: #A6AAB5;
    --d-text3: #757A87;
    --d-read: #C9CCD4;
    --d-line: rgba(255, 255, 255, .10);
    --d-line2: rgba(255, 255, 255, .16);
    --d-hot: rgba(183, 140, 255, .45);
    --d-soft: rgba(183, 140, 255, .12);
    --d-grad: linear-gradient(135deg, #B28AF8 0%, #8660E0 100%);
    --d-ease: cubic-bezier(.22, 1, .36, 1);
    --d-font-read: "Noto Sans Georgian", var(--font);
    --d-font-num: "Inter", var(--font);
    --d-wrap: 1400px;

    /* the site tokens, inside this page only */
    --accent: var(--d-acc);
    --accent-2: var(--d-acc2);
    --accent-light: var(--d-acc-l);
    --accent-dark: #6E4BC1;
    --accent-soft: var(--d-soft);
    --accent-border: var(--d-hot);
    --accent-glow: rgba(183, 140, 255, .20);
    --btn-grad: var(--d-grad);
    --surface: var(--d-bg2);
    --surface-hover: var(--d-elev);
    --surface-2: var(--d-elev);
    --border: var(--d-line);
    --border-strong: var(--d-line2);
    --text: var(--d-text);
    --text-2: var(--d-text2);
    --text-muted: var(--d-text2);
    --text-faint: var(--d-text3);

    /* the older detail-page tokens neon.css still reads */
    --c-bg: var(--d-bg);
    --c-bg2: var(--d-bg2);
    --c-panel: var(--d-bg2);
    --c-panel2: var(--d-elev);
    --c-violet: var(--d-acc2);
    --c-violet2: var(--d-acc);
    --c-magenta: var(--d-acc2);
    --c-text: var(--d-text);
    --c-text2: var(--d-text2);
    --c-muted: var(--d-text3);
    --c-line: var(--d-line);
    --c-line-hot: var(--d-hot);
    --c-grad: var(--d-grad);
    --watch-surface: var(--d-bg2);
    --watch-surface-2: var(--d-elev);
    --watch-surface-3: var(--d-elev);
    --watch-border: var(--d-line);
    --watch-text: var(--d-text);
    --watch-muted: var(--d-text2);
    --watch-accent: var(--d-acc);
    --watch-accent-light: var(--d-acc-l);
}

/* the site's light look (.darken): same layout on light surfaces, the site's light violet */
.darken .nx-d {
    --d-bg: var(--bg);
    --d-bg2: #FFFFFF;
    --d-elev: #F7F6FA;
    --d-acc: #7E57D6;
    --d-acc2: #6E4BC1;
    --d-acc-l: #6E4BC1;
    --d-warm: #A8761F;
    --d-text: #15141D;
    --d-text2: #4D505E;
    --d-text3: #7A7D8C;
    --d-read: #2E3040;
    --d-line: rgba(20, 16, 40, .10);
    --d-line2: rgba(20, 16, 40, .17);
    --d-hot: rgba(126, 87, 214, .40);
    --d-soft: rgba(126, 87, 214, .08);
    --d-grad: linear-gradient(135deg, #9B74EE 0%, #6E4BC1 100%);
}

.nx-cine.nx-d { padding-bottom: 56px; background: var(--d-bg); color: var(--d-text); }
.nx-cine.nx-d .nx-cine-w { width: min(var(--d-wrap), calc(100% - 2 * var(--pad))); }
.nx-d .nx-i { stroke-width: 1.8; }

.nx-d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- reveal (opacity only on anything that holds the player, so no
   transform ever sits on a fullscreen ancestor) ---------- */
@keyframes nxdRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nxdFade { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================
   HERO — poster + player
===================================================== */
.nx-d-hero { position: relative; isolation: isolate; padding: 30px 0 4px; }
.nx-d-backdrop { position: absolute; z-index: -1; top: 0; right: 0; bottom: -120px; left: 0; inset: 0 0 -120px; overflow: hidden; pointer-events: none; }
.nx-d-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: blur(30px) saturate(1.15) brightness(.42); opacity: .95; transform: scale(1.15); }
.nx-d-backdrop::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--d-bg) 100%); /* browsers without color-mix() */
    background:
        radial-gradient(55% 60% at 88% 92%, rgba(139, 92, 246, .16), transparent 70%),
        radial-gradient(40% 50% at 6% 10%, rgba(229, 184, 107, .07), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--d-bg) 30%, transparent) 0%, color-mix(in srgb, var(--d-bg) 55%, transparent) 55%, var(--d-bg) 100%);
}
.darken .nx-d-backdrop img { filter: blur(30px) saturate(1.1) brightness(1.05); opacity: .35; }

.nx-d-hero-in { display: grid; grid-template-columns: clamp(220px, 23%, 320px) minmax(0, 1fr); align-items: start; gap: 24px; }
/* the apps banner spans both columns; the row gap replaces most of its own bottom margin */
.nx-d-hero-in > .ufab { grid-column: 1 / -1; margin-bottom: -8px; }

/* left column: the poster, the audience rating under it */
.nx-d-aside { display: grid; gap: 16px; min-width: 0; }
.nx-d-aside .nx-d-score { width: auto; animation: nxdRise .8s .12s var(--d-ease) backwards; }

/* poster: keeps its 2:3, the main play button sits on its lower edge */
.nx-d-poster {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--d-line);
    border-radius: 16px;
    background: var(--d-elev);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .05) inset;
    transition: transform .6s var(--d-ease), box-shadow .6s var(--d-ease);
    animation: nxdRise .8s var(--d-ease) backwards;
}
.nx-d-poster img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; transition: transform 1.2s var(--d-ease); }
.nx-d-poster:hover { transform: translateY(-4px); box-shadow: 0 38px 70px rgba(0, 0, 0, .6), 0 0 0 1px var(--d-hot); }
.nx-d-poster:hover img { transform: scale(1.035); }
.nx-d-poster-cta { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 14px 14px; background: linear-gradient(180deg, transparent 0%, rgba(8, 10, 15, .72) 45%, rgba(8, 10, 15, .92) 100%); }

.nx-d .nx-d-watch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--d-grad);
    box-shadow: 0 12px 30px rgba(134, 96, 224, .38), 0 1px 0 rgba(255, 255, 255, .25) inset;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .25s var(--d-ease), box-shadow .25s var(--d-ease), filter .25s;
}
.nx-d-watch-i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.nx-d-watch-i .nx-i { width: 12px; height: 12px; margin-left: 2px; }
.nx-d .nx-d-watch:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 16px 36px rgba(134, 96, 224, .48), 0 1px 0 rgba(255, 255, 255, .25) inset; }
.nx-d .nx-d-watch:active { transform: scale(.98); }

/* player frame: the server bar, the player and the hint below sit in one panel */
.nx-d-stage { min-width: 0; animation: nxdFade .9s .1s ease backwards; }
.nx-cine.nx-d .nx-w-player {
    position: relative;
    padding: 10px;
    border: 1px solid var(--d-line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--d-bg2) 88%, transparent);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.nx-cine.nx-d .nx-w-player .fullstory__player,
.nx-cine.nx-d .nx-w-player .tab-pane > iframe,
.nx-cine.nx-d .nx-w-player .tab-content { border-radius: 12px; }
.nx-cine.nx-d .nx-w-player .tab-content { overflow: hidden; background: #000; }
.nx-cine.nx-d .nx-srv { margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.nx-cine.nx-d .nx-srv-tab { height: 38px; border-radius: 10px; }
.nx-cine.nx-d .nx-srv-tab.is-on { box-shadow: 0 8px 20px rgba(134, 96, 224, .32); }
.nx-cine.nx-d .nx-srv-pick select { height: 38px; border-radius: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B78CFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.nx-cine.nx-d .nx-w-player .warning-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 2px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    color: var(--d-text3) !important;
    font-family: var(--d-font-read);
    font-size: 12.5px;
    line-height: 1.5;
}
.nx-cine.nx-d .nx-w-player .warning-box::before { content: "i"; flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border: 1px solid var(--d-line2); border-radius: 50%; color: var(--d-text2); font: 700 10px/1 var(--d-font-num); }
.nx-cine.nx-d .nx-w-admin { z-index: 6; }

/* the PlayerJS episode list, only when the server bar did not take over */
.nx-cine.nx-d .nx-d-eps { margin-top: 14px; padding: 14px; border: 1px solid var(--d-line); border-radius: 16px; background: var(--d-bg2); }
.nx-cine.nx-d .nx-d-eps .nx-ep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 340px; overflow-y: auto; }
.nx-cine.nx-d .nx-d-eps[hidden] { display: none; }

/* =====================================================
   TITLE, FACTS, ACTIONS, RATINGS
===================================================== */
.nx-d-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; gap: 48px; margin-top: 32px; }
.nx-d-col { min-width: 0; }
.nx-d-info { position: relative; animation: nxdRise .8s .15s var(--d-ease) backwards; }
.nx-d-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 18px 32px; }
.nx-d .nx-d-thumb { display: none; }
.nx-d-titles { min-width: 0; }
.nx-d-titleline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.nx-cine.nx-d .nx-d-title { margin: 0; color: var(--d-text); font-size: clamp(26px, 2.5vw, 38px) !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: 0; overflow-wrap: anywhere; text-wrap: balance; }
.nx-d-title-year { display: inline-flex; align-items: center; gap: 14px; color: var(--d-text2); font: 500 clamp(18px, 1.6vw, 24px)/1 var(--d-font-num); }
.nx-d-title-year::before { content: ""; width: 1px; height: .9em; background: var(--d-line2); }
.nx-d-q { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--d-warm) 60%, transparent); border-radius: 5px; color: var(--d-warm); font: 700 10.5px/1 var(--d-font-num); letter-spacing: .08em; }
.nx-d-orig { margin: 8px 0 0; color: var(--d-text2); font: 500 13px/1.45 var(--d-font-num); letter-spacing: .14em; text-transform: uppercase; overflow-wrap: anywhere; }

/* actions: real handlers only (DLE favourites / complaint, neon.js share / download / trailer) */
.nx-d-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.nx-d .nx-d-act:not(:has(> a)),
.nx-d .nx-d-act > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--d-line2);
    border-radius: 12px;
    background: color-mix(in srgb, var(--d-bg2) 60%, transparent);
    color: var(--d-text) !important;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .22s var(--d-ease), background-color .22s var(--d-ease), color .22s, transform .15s;
}
.nx-d .nx-d-act:has(> a) { display: inline-flex; height: auto; padding: 0; border: 0; background: none; }
.nx-d .nx-d-act:empty { display: none; }
.nx-d .nx-d-act .nx-i { width: 17px; height: 17px; color: var(--d-text2); transition: color .22s, transform .22s var(--d-ease); }
.nx-d .nx-d-act:not(:has(> a)):hover,
.nx-d .nx-d-act > a:hover { border-color: var(--d-hot); background: var(--d-soft); color: var(--d-text) !important; }
.nx-d .nx-d-act:hover .nx-i { color: var(--d-acc); }
.nx-d .nx-d-act:active, .nx-d .nx-d-act > a:active { transform: scale(.97); }
.nx-d .nx-d-act .nx-i-fill { color: var(--d-acc); }
.nx-d .nx-d-act.is-done { border-color: color-mix(in srgb, var(--d-warm) 60%, transparent); color: var(--d-warm) !important; }
.nx-d .nx-d-act.is-done .nx-i { color: var(--d-warm); }
.nx-d .nx-d-act-icon > a, .nx-d .nx-d-act-icon:not(:has(> a)) { width: 42px; padding: 0; }
.nx-d .nx-d-act-watch { display: none !important; }

/* facts row */
.nx-d-factsrow { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 20px 28px; margin-top: 22px; padding: 16px 0; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); }
.nx-d-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 14px; margin: 0; padding: 0; }
.nx-d-m { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 18px; list-style: none; }
.nx-d-m:first-child, .nx-d-m[hidden] + .nx-d-m { padding-left: 0; }
.nx-d-m[hidden] { display: none; }
.nx-d-m:not([hidden]) ~ .nx-d-m:not([hidden]) { padding-left: 18px; }
.nx-d-m:not([hidden]) ~ .nx-d-m:not([hidden])::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 30px; margin-top: -15px; background: var(--d-line); }
.nx-d-m > .nx-i { width: 22px; height: 22px; color: var(--d-text2); stroke-width: 1.6; }
.nx-d-m > span { display: grid; min-width: 0; line-height: 1.25; }
.nx-d-m b { overflow: hidden; color: var(--d-text); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.nx-d-m em { color: var(--d-text3); font-size: 11.5px; font-style: normal; }
.nx-d-m-imdb > .nx-i { width: 24px; height: 24px; color: var(--d-warm); }
.nx-d-m-imdb > span { grid-template-columns: auto auto; column-gap: 9px; align-items: center; }
.nx-d-m-imdb b { grid-row: 1 / 3; font: 700 26px/1 var(--d-font-num); }
.nx-d-m-imdb em { align-self: end; color: var(--d-warm); font: 700 11px/1 var(--d-font-num); letter-spacing: .06em; }
.nx-d-m-imdb small { align-self: start; color: var(--d-text3); font: 500 11px/1.4 var(--d-font-num); }
.nx-d-age { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 7px; border: 1px solid var(--d-line2); border-radius: 7px; color: var(--d-text); font: 700 12.5px/1 var(--d-font-num); }
/* genres in the facts row: the /categories/ links only, the first two (nx-detail.js trims the rest) */
.nx-d-mgenres { font-size: 0 !important; }
.nx-d-mgenres a { display: none; }
.nx-d-mgenres a.is-g { display: inline; color: var(--d-text) !important; font-size: 14px; transition: color .2s; }
.nx-d-mgenres a.is-g:hover { color: var(--d-acc-l) !important; }
.nx-d-mgenres a.is-g ~ a.is-g::before { content: ", "; color: var(--d-text2); }

/* the site's audience rating (likes / dislikes) — distinct from IMDb */
.nx-d-score { display: grid; gap: 10px; width: 270px; padding: 13px 14px 12px; border: 1px solid var(--d-line); border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--d-elev) 90%, transparent), color-mix(in srgb, var(--d-bg2) 70%, transparent)); }
.nx-d-score-top { display: flex; align-items: center; gap: 12px; }
.nx-d-score-pct { display: inline-flex; align-items: baseline; gap: 5px; }
.nx-d-score-pct b { color: var(--d-text); font: 700 26px/1 var(--d-font-num); }
.nx-d-score-pct small { color: var(--d-text2); font-size: 11.5px; }
.nx-d-score-top { flex-wrap: wrap; row-gap: 8px; }
.nx-d-score-l { order: -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; color: var(--d-text2); font-size: 12px; line-height: 1.35; }
.nx-d-score-l small { color: var(--d-text3); font: 500 11px/1.4 var(--d-font-num); }
.nx-d-score-bar { height: 4px; overflow: hidden; border-radius: 4px; background: var(--d-line); }
.nx-d-score-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--d-acc), var(--d-warm)); transition: width 1s var(--d-ease); }
.nx-d-score-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nx-d-score-btns > a { display: block; color: inherit !important; }
.nx-d-vote { display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border: 1px solid var(--d-line); border-radius: 9px; color: var(--d-text2); font-size: 12.5px; transition: border-color .2s, background-color .2s, color .2s; }
.nx-d-vote .nx-i { width: 16px; height: 16px; }
.nx-d-vote b { color: var(--d-text); font: 600 12.5px/1 var(--d-font-num); }
.nx-d-score-btns > a:hover .nx-d-vote { border-color: var(--d-hot); background: var(--d-soft); color: var(--d-acc-l); }
.nx-d-score-btns > a:hover .nx-d-vote.is-minus { border-color: var(--d-line2); background: color-mix(in srgb, var(--d-elev) 80%, transparent); color: var(--d-text); }
.nx-d-score-btns > a:active .nx-d-vote { transform: scale(.97); }

/* =====================================================
   SECTION TABS — anchors, the active one follows the scroll (neon.js)
===================================================== */
.nx-cine.nx-d .nx-cine-nav { margin-top: 24px; background: color-mix(in srgb, var(--d-bg) 88%, transparent); box-shadow: 0 1px 0 var(--d-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nx-cine.nx-d .nx-cine-nav > .nx-cine-w { gap: 4px; padding: 8px 0; }
.nx-cine.nx-d .nx-cine-nav a {
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border-radius: 11px;
    color: var(--d-text2) !important;
    font-size: 13.5px;
    font-weight: 600;
    transition: color .25s, background-color .25s var(--d-ease), box-shadow .25s var(--d-ease);
}
.nx-cine.nx-d .nx-cine-nav a::after { display: none; }
.nx-cine.nx-d .nx-cine-nav a .nx-i { display: block; width: 17px; height: 17px; color: var(--d-text3); transition: color .25s; }
.nx-cine.nx-d .nx-cine-nav a:hover { background: color-mix(in srgb, var(--d-elev) 70%, transparent); color: var(--d-text) !important; }
.nx-cine.nx-d .nx-cine-nav a.is-active { background: linear-gradient(135deg, rgba(134, 96, 224, .22), rgba(139, 92, 246, .08)); box-shadow: inset 0 0 0 1px var(--d-hot); color: var(--d-text) !important; }
.nx-cine.nx-d .nx-cine-nav a.is-active .nx-i { color: var(--d-acc); }
.nx-cine.nx-d .nx-cine-nav a:focus-visible { outline: 2px solid var(--d-acc); outline-offset: -2px; }

/* =====================================================
   SYNOPSIS + DETAILS
===================================================== */
.nx-d-synopsis { margin-top: 34px; }
.nx-d-score-slot:empty { display: none; }
.nx-cine.nx-d .nx-d-h,
.nx-cine.nx-d .nx-d-sh { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--d-text); font-size: 19px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.nx-d-h-i { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: var(--d-soft); color: var(--d-acc); }
.nx-d-h-i .nx-i { width: 17px; height: 17px; }

.nx-cine.nx-d .nx-d-text { max-width: 74ch; color: var(--d-read); font-family: var(--d-font-read); font-size: 15.5px; line-height: 1.85; }
.nx-cine.nx-d .nx-d-text p { margin: 0 0 .85em; }
.nx-cine.nx-d .nx-d-text p:last-child { margin-bottom: 0; }
.nx-cine.nx-d .nx-d-text.is-clamped { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.nx-cine.nx-d .nx-d-more { margin-top: 12px; color: var(--d-acc-l); font-size: 13px; font-weight: 600; }
.nx-cine.nx-d .nx-d-more:hover { color: var(--d-text); }

.nx-cine.nx-d .nx-d-genres { gap: 8px; margin-top: 22px; }
.nx-cine.nx-d .nx-d-genres a[href*="/categories/"] { height: 32px; padding: 0 15px; border: 1px solid var(--d-line2); border-radius: 999px; background: transparent; color: var(--d-text) !important; font-size: 12.5px; font-weight: 500; transition: border-color .22s, background-color .22s, color .22s; }
.nx-cine.nx-d .nx-d-genres a[href*="/categories/"]:hover { border-color: var(--d-hot); background: var(--d-soft); color: var(--d-text) !important; }
.nx-cine.nx-d .nx-d-genres a.is-first { border-color: color-mix(in srgb, var(--d-warm) 55%, transparent); background: color-mix(in srgb, var(--d-warm) 10%, transparent); color: var(--d-warm) !important; }

.nx-cine.nx-d .nx-d-keys { margin: 22px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--d-line); border-radius: 0; background: none; }

.nx-cine.nx-d .nx-d-facts { padding: 22px 24px 14px; border: 1px solid var(--d-line); border-radius: 18px; background: linear-gradient(180deg, var(--d-bg2), color-mix(in srgb, var(--d-bg2) 50%, var(--d-bg))); }
.nx-cine.nx-d .nx-d-facts .nx-d-h { margin-bottom: 8px; }
.nx-cine.nx-d .nx-d-facts dl { display: grid; gap: 0; margin: 0; }
.nx-cine.nx-d .nx-d-facts dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; gap: 12px; min-height: 0; padding: 11px 0; border-bottom: 1px solid var(--d-line); }
.nx-cine.nx-d .nx-d-facts dl > div:last-child { border-bottom: 0; }
.nx-cine.nx-d .nx-d-facts dt { color: var(--d-text3); font-size: 12.5px; font-weight: 500; }
.nx-cine.nx-d .nx-d-facts dd { margin: 0; color: var(--d-text); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.nx-cine.nx-d .nx-d-facts dd a { color: var(--d-text) !important; transition: color .2s; }
.nx-cine.nx-d .nx-d-facts dd a:hover { color: var(--d-acc-l) !important; }

/* =====================================================
   SECTIONS BELOW
===================================================== */
.nx-d-block { margin-top: 48px; }
.nx-d-sechead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.nx-cine.nx-d .nx-d-sechead .nx-d-sh { margin: 0; }
.nx-d .nx-d-all { display: inline-flex; align-items: center; gap: 6px; color: var(--d-acc-l) !important; font-size: 13px; font-weight: 600; white-space: nowrap; }
.nx-d .nx-d-all .nx-i { width: 16px; height: 16px; transition: transform .25s var(--d-ease); }
.nx-d .nx-d-all:hover .nx-i { transform: translateX(3px); }
.nx-d-count { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--d-soft); color: var(--d-acc-l); font: 700 12px/1 var(--d-font-num); }

/* gallery arrows (neon.js adds them to .nx-carousel) */
.nx-d .nx-arrow { width: 40px; height: 40px; border-color: var(--d-line2); background: color-mix(in srgb, var(--d-bg2) 92%, transparent); color: var(--d-text); }
.nx-d .nx-arrow:hover { border-color: var(--d-hot); background: var(--d-acc2); color: #fff; }

/* parts / seasons that are their own posts */
.nx-cine.nx-d .nx-d-parts[hidden] { display: none; }
.nx-cine.nx-d .nx-d-parts-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 290px); gap: 14px; max-height: none; margin: 0; padding: 2px 0 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.nx-cine.nx-d .nx-d-parts-row::-webkit-scrollbar { display: none; }
.nx-cine.nx-d .nx-d-parts .nx-ep { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 12px; row-gap: 3px; padding: 6px; border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-bg2); color: var(--d-text) !important; scroll-snap-align: start; transition: border-color .25s, transform .25s var(--d-ease); }
.nx-cine.nx-d .nx-d-parts .nx-ep:hover { border-color: var(--d-hot); transform: translateY(-2px); }
.nx-cine.nx-d .nx-d-parts .nx-ep-media { position: relative; grid-row: 1 / 3; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: var(--d-elev); }
.nx-cine.nx-d .nx-d-parts .nx-ep-media img { width: 100%; height: 100%; object-fit: cover; }
.nx-cine.nx-d .nx-d-parts .nx-ep-play { display: none; }
.nx-cine.nx-d .nx-d-parts .nx-ep-title { align-self: end; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nx-cine.nx-d .nx-d-parts .nx-ep-len { align-self: start; color: var(--d-text3); font-size: 12px; }

/* ---------- cast: portrait gallery ---------- */
.nx-cine.nx-d .nx-d-castcar { position: relative; }
.nx-cine.nx-d .nx-w-cast-row.nx-row { --cols: 10; --gap: 16px; padding: 6px 0 4px; }
.nx-cine.nx-d .nx-w-actor { overflow: visible; border: 0; border-radius: 0; background: none; text-align: center; transform: none; }
.nx-cine.nx-d .nx-w-actor:hover { border: 0; transform: none; filter: none; }
.nx-cine.nx-d .nx-w-actor img { width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-elev); object-fit: cover; object-position: center 20%; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); transition: transform .45s var(--d-ease), box-shadow .45s var(--d-ease), border-color .3s; }
.nx-cine.nx-d .nx-w-actor:hover img { transform: translateY(-4px); border-color: var(--d-hot); box-shadow: 0 18px 32px rgba(0, 0, 0, .45); }
.nx-cine.nx-d .nx-w-actor span { display: grid; gap: 3px; padding: 11px 2px 0; }
.nx-cine.nx-d .nx-w-actor b { overflow: hidden; color: var(--d-text); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; transition: color .2s; }
.nx-cine.nx-d .nx-w-actor:hover b { color: var(--d-acc-l); }
.nx-cine.nx-d .nx-w-actor small { overflow: hidden; color: var(--d-text3); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.nx-cine.nx-d .nx-d-castcar .nx-arrow { top: 42%; }

/* ---------- comments beside similar titles ---------- */
.nx-d-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: start; gap: 48px; padding-top: 44px; border-top: 1px solid var(--d-line); }
/* 2026-10-13: the comments travel down with the page while the longer column of posters beside them scrolls.
   --nx-talk-top is set by js/nx-detail.js: under the header, or higher when the comments are taller than the window
   (then they stop once their last line is in view). In one column (narrow screens) this is switched off below. */
.nx-d-bottom > .nx-d-talk { position: sticky; top: var(--nx-talk-top, 74px); }
.nx-d-talk { min-width: 0; }
.nx-cine.nx-d .nx-d-talk .nx-w-comments { margin: 0; }
.nx-cine.nx-d .nx-d-talk .nx-cform { border-color: var(--d-line); border-radius: 16px; background: var(--d-bg2); }
.nx-cine.nx-d .nx-d-talk .nx-cform-ico { background: var(--d-soft); color: var(--d-acc); }

.nx-d-side { display: grid; gap: 40px; min-width: 0; }
.nx-cine.nx-d .nx-d-grid.nx-row { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 20px 14px; padding: 0; overflow: visible; scroll-snap-type: none; }
.nx-cine.nx-d .nx-d-grid .nx-card-media { border-color: var(--d-line); border-radius: 14px; box-shadow: 0 12px 26px rgba(0, 0, 0, .35); transition: transform .45s var(--d-ease), box-shadow .45s var(--d-ease), border-color .3s; }
.nx-cine.nx-d .nx-d-grid .nx-card-media img { transition: transform 1s var(--d-ease); }
.nx-cine.nx-d .nx-d-grid .nx-card:hover .nx-card-media { transform: translateY(-3px); border-color: var(--d-hot); box-shadow: 0 20px 36px rgba(0, 0, 0, .5); }
.nx-cine.nx-d .nx-d-grid .nx-card:hover .nx-card-media img { transform: scale(1.05); }
.nx-cine.nx-d .nx-d-grid .nx-card-title { margin-top: 9px; font-size: 13px; }
.nx-cine.nx-d .nx-d-grid .nx-card-sub { color: var(--d-text3); }

/* jumps land below the header and the sticky tabs */
.nx-cine.nx-d #nx-facts { scroll-margin-top: calc(var(--header-h, 58px) + 72px); }
.nx-cine.nx-d #nx-desc, .nx-cine.nx-d #nx-cast, .nx-cine.nx-d #nx-comments, .nx-cine.nx-d #nx-related, .nx-cine.nx-d #nx-also { scroll-margin-top: calc(var(--header-h, 58px) + 72px); }

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1279px) {
    .nx-d-main { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 36px; }
    .nx-d-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 36px; }
    .nx-cine.nx-d .nx-d-grid.nx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-cine.nx-d .nx-w-cast-row.nx-row { --cols: 8; }
}

/* tablet: the player takes the full width, the poster moves next to the title */
@media (max-width: 1023px) {
    .nx-d-hero { padding-top: 20px; }
    .nx-d-hero-in { grid-template-columns: minmax(0, 1fr); }
    /* one column: the banner stays right above the player, as before */
    .nx-d-hero-in > .ufab { order: 1; margin-bottom: -10px; }
    .nx-d-hero-in > .nx-d-stage { order: 2; }
    .nx-d .nx-d-poster { display: none; }
    .nx-d-aside:not(:has(.nx-d-score)) { display: none; }
    .nx-d-head { grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 16px 20px; }
    .nx-d .nx-d-thumb { display: block; grid-row: 1; width: 110px; height: auto; aspect-ratio: 2 / 3; border: 1px solid var(--d-line); border-radius: 12px; object-fit: cover; box-shadow: 0 16px 30px rgba(0, 0, 0, .45); }
    .nx-d-actions { grid-column: 1 / -1; }
    .nx-d .nx-d-act-watch { display: inline-flex !important; }
    .nx-d .nx-d-act-watch { border-color: transparent !important; background: var(--d-grad) !important; box-shadow: 0 10px 24px rgba(134, 96, 224, .32); color: #fff !important; }
    .nx-d .nx-d-act-watch .nx-i { width: 13px; height: 13px; color: #fff !important; }
    /* toolbar: the play button on its own row, the rest as equal icon tiles */
    .nx-d-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .nx-d .nx-d-act-watch { flex: 1 0 100%; height: 48px !important; font-size: 14.5px !important; }
    .nx-d .nx-d-actions > .nx-d-act:not(.nx-d-act-watch) { flex: 1 1 0; min-width: 0; }
    .nx-d .nx-d-actions > .nx-d-act:not(.nx-d-act-watch):not(:has(> a)),
    .nx-d .nx-d-actions > .nx-d-act:not(.nx-d-act-watch) > a { flex-direction: column; gap: 4px; width: 100%; height: 58px; padding: 0 4px; font-size: 11px; font-weight: 500; }
    .nx-d .nx-d-actions > .nx-d-act span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .nx-d .nx-d-actions > .nx-d-act.nx-d-act-icon { flex: 0 0 52px; }

    .nx-d-factsrow { grid-template-columns: minmax(0, 1fr); }
    .nx-d-score { width: 100%; max-width: 420px; }
    .nx-d-main { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
    .nx-d-bottom { grid-template-columns: minmax(0, 1fr); }
    .nx-d-bottom > .nx-d-talk { position: static; }
    .nx-d-side { order: -1; }
    .nx-cine.nx-d .nx-d-grid.nx-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; }
    .nx-cine.nx-d .nx-w-cast-row.nx-row { --cols: 6; }
}

@media (max-width: 767px) {
    .nx-d-hero { padding-top: 14px; }
    .nx-cine.nx-d .nx-w-player { padding: 6px; border-radius: 14px; }
    .nx-cine.nx-d .nx-w-player .warning-box { font-size: 12px; }
    .nx-d-head { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
    .nx-d .nx-d-thumb { width: 84px; border-radius: 10px; }
    .nx-cine.nx-d .nx-d-title { font-size: 23px !important; }
    .nx-d-title-year { font-size: 17px; gap: 10px; }
    .nx-d-orig { font-size: 12px; letter-spacing: .1em; }

    .nx-d-factsrow { margin-top: 18px; padding: 14px 0; }
    .nx-d-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
    .nx-d-m, .nx-d-m:not([hidden]) ~ .nx-d-m:not([hidden]) { padding: 0; }
    .nx-d-m:not([hidden]) ~ .nx-d-m:not([hidden])::before { display: none; }
    .nx-d-m-imdb { grid-column: 1 / -1; }
    .nx-d-score { max-width: none; }

    .nx-cine.nx-d .nx-cine-nav { margin-top: 20px; }
    .nx-cine.nx-d .nx-cine-nav > .nx-cine-w { padding: 6px 0; }
    .nx-cine.nx-d .nx-cine-nav a { height: 38px; padding: 0 12px; font-size: 13px; }

    .nx-d-synopsis { margin-top: 28px; }
    .nx-cine.nx-d .nx-d-text { font-size: 15px; line-height: 1.8; }
    .nx-cine.nx-d .nx-d-facts { padding: 18px 16px 8px; }
    .nx-cine.nx-d .nx-d-facts dl > div { grid-template-columns: 128px minmax(0, 1fr); }

    .nx-d-block { margin-top: 36px; }
    .nx-d-bottom { gap: 36px; padding-top: 32px; }
    .nx-cine.nx-d .nx-w-cast-row.nx-row { --cols: 3.4; --gap: 12px; }
    .nx-cine.nx-d .nx-d-grid.nx-row { grid-auto-columns: calc((100% - 2 * 12px) / 2.4); gap: 12px; }
    .nx-cine.nx-d .nx-d-parts-row { grid-auto-columns: minmax(240px, 82%); }
    .nx-d .nx-arrow { display: none; }
}

@media (max-width: 520px) {
    .nx-d .nx-d-actions > .nx-d-act:not(.nx-d-act-watch) { flex: 1 1 28%; }
    .nx-d .nx-d-actions > .nx-d-act.nx-d-act-icon { flex: 0 0 58px; }
    .nx-d-m-genre b { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-d *, .nx-d *::before, .nx-d *::after { animation: none !important; transition-duration: .01ms !important; }
    .nx-d-poster:hover, .nx-d-poster:hover img, .nx-cine.nx-d .nx-w-actor:hover img, .nx-cine.nx-d .nx-d-grid .nx-card:hover .nx-card-media, .nx-cine.nx-d .nx-d-grid .nx-card:hover .nx-card-media img { transform: none; }
}

/* the aside's sections carry .nx-section for neon.js's empty check only */
.nx-cine.nx-d .nx-d-similar { margin: 0; padding: 0; }
.darken .nx-cine.nx-d .nx-w-player, .darken .nx-d-poster { box-shadow: 0 22px 50px rgba(30, 24, 60, .14); }

/* =====================================================
   root-59 · 2026-10-09 · "დეტალური ინფორმაცია" across the full width
   The facts box no longer sits in a 400px side column: it spans from the
   poster's left edge to the player's right edge (the width of .nx-d-main),
   under the synopsis, with its rows in three even columns.
===================================================== */
.nx-cine.nx-d .nx-d-main { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.nx-cine.nx-d .nx-d-facts { padding: 24px 28px 10px; }
.nx-cine.nx-d .nx-d-facts .nx-d-h { margin-bottom: 6px; }
.nx-cine.nx-d .nx-d-facts dl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.nx-cine.nx-d .nx-d-facts dl > div { grid-template-columns: 150px minmax(0, 1fr); padding: 13px 0; border-bottom: 1px solid var(--d-line); }
/* no rule under the last row, whatever the count (cells of the last row of 3) */
.nx-cine.nx-d .nx-d-facts dl > div:nth-child(3n+1):nth-last-child(-n+3),
.nx-cine.nx-d .nx-d-facts dl > div:nth-child(3n+1):nth-last-child(-n+3) ~ div { border-bottom: 0; }
@media (max-width: 1100px) {
    .nx-cine.nx-d .nx-d-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .nx-cine.nx-d .nx-d-facts dl > div { border-bottom: 1px solid var(--d-line) !important; }
    .nx-cine.nx-d .nx-d-facts dl > div:nth-child(2n+1):nth-last-child(-n+2),
    .nx-cine.nx-d .nx-d-facts dl > div:nth-child(2n+1):nth-last-child(-n+2) ~ div { border-bottom: 0 !important; }
}
@media (max-width: 680px) {
    .nx-cine.nx-d .nx-d-facts { padding: 18px 16px 6px; }
    .nx-cine.nx-d .nx-d-facts dl { grid-template-columns: minmax(0, 1fr); }
    .nx-cine.nx-d .nx-d-facts dl > div { grid-template-columns: 128px minmax(0, 1fr); padding: 11px 0; }
    .nx-cine.nx-d .nx-d-facts dl > div { border-bottom: 1px solid var(--d-line) !important; }
    .nx-cine.nx-d .nx-d-facts dl > div:last-child { border-bottom: 0 !important; }
}

/* =====================================================
   root-59 · 2026-10-09 · cinematic redesign (reference image)
   1. the title's actions live under the poster as an icon row
   2. "დეტალური ინფორმაცია" | "სეზონები / სერიები" side by side
      (films have no episode panel: the facts box takes the row)
   3. episode rows: thumbnail, name, state; the playing one is lit
   4. trailer row (only when the post has a trailer)
   Supersedes the full-width facts block above.
===================================================== */

/* 1. poster actions */
.nx-cine.nx-d .nx-d-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; margin-top: 10px; padding: 6px; border: 1px solid var(--d-line); border-radius: 16px; background: color-mix(in srgb, var(--d-bg2) 88%, transparent); }
.nx-cine.nx-d .nx-d-quick .nx-d-act:empty { display: none; }
.nx-cine.nx-d .nx-d-quick .nx-d-act:not(:has(> a)),
.nx-cine.nx-d .nx-d-quick .nx-d-act > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 62px; min-width: 0; padding: 0 2px; border: 0; border-radius: 12px; background: transparent; color: var(--d-text2) !important; font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; white-space: normal; cursor: pointer; transition: background-color .2s, color .2s; }
.nx-cine.nx-d .nx-d-quick .nx-d-act:has(> a) { display: flex; height: auto; padding: 0; border: 0; background: none; }
.nx-cine.nx-d .nx-d-quick .nx-d-act span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-cine.nx-d .nx-d-quick .nx-d-act .nx-i { width: 19px; height: 19px; margin: 0; color: var(--d-text2); }
.nx-cine.nx-d .nx-d-quick .nx-d-act:not(:has(> a)):hover,
.nx-cine.nx-d .nx-d-quick .nx-d-act > a:hover { background: var(--d-soft); color: var(--d-text) !important; }
.nx-cine.nx-d .nx-d-quick .nx-d-act:hover .nx-i { color: var(--d-acc); }
.nx-cine.nx-d .nx-d-quick .nx-d-act:focus-visible, .nx-cine.nx-d .nx-d-quick .nx-d-act > a:focus-visible { outline: 2px solid var(--d-acc); outline-offset: -2px; }

/* 2. facts | episodes */
.nx-cine.nx-d .nx-d-main { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: stretch; column-gap: 24px; row-gap: 28px; }
.nx-cine.nx-d .nx-d-main > .nx-d-col { grid-column: 1 / -1; }
.nx-cine.nx-d .nx-d-main:not(:has(> .nx-d-eppanel:not([hidden]))) > .nx-d-facts { grid-column: 1 / -1; }
.nx-cine.nx-d .nx-d-main:not(.nx-has-eps) > .nx-d-facts { grid-column: 1 / -1; }
.nx-cine.nx-d .nx-d-main:has(> .nx-d-eppanel:not([hidden])) .nx-d-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.nx-cine.nx-d .nx-d-main.nx-has-eps .nx-d-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.nx-cine.nx-d .nx-d-main:has(> .nx-d-eppanel:not([hidden])) .nx-d-facts dl > div { border-bottom: 1px solid var(--d-line); }
.nx-cine.nx-d .nx-d-main.nx-has-eps .nx-d-facts dl > div { border-bottom: 1px solid var(--d-line); }
.nx-cine.nx-d .nx-d-main:has(> .nx-d-eppanel:not([hidden])) .nx-d-facts dl > div:nth-child(2n+1):nth-last-child(-n+2),
.nx-cine.nx-d .nx-d-main:has(> .nx-d-eppanel:not([hidden])) .nx-d-facts dl > div:nth-child(2n+1):nth-last-child(-n+2) ~ div { border-bottom: 0; }
.nx-cine.nx-d .nx-d-main.nx-has-eps .nx-d-facts dl > div:nth-child(2n+1):nth-last-child(-n+2),
.nx-cine.nx-d .nx-d-main.nx-has-eps .nx-d-facts dl > div:nth-child(2n+1):nth-last-child(-n+2) ~ div { border-bottom: 0; }

/* 3. the episode panel */
.nx-cine.nx-d .nx-d-eppanel { display: flex; flex-direction: column; min-width: 0; padding: 22px 18px 14px; border: 1px solid var(--d-line); border-radius: 18px; background: linear-gradient(180deg, var(--d-bg2), color-mix(in srgb, var(--d-bg2) 55%, var(--d-bg))); }
.nx-cine.nx-d .nx-d-eppanel[hidden] { display: none; }
.nx-cine.nx-d .nx-d-eph { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 10px; }
.nx-cine.nx-d .nx-d-eph .nx-d-h { margin: 0; }
.nx-cine.nx-d .nx-d-epcount { flex: 0 0 auto; color: var(--d-text3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-cine.nx-d .nx-d-epseasons { display: flex; gap: 6px; margin: 0 4px 10px; overflow-x: auto; scrollbar-width: none; }
.nx-cine.nx-d .nx-d-epseasons[hidden] { display: none; }
.nx-cine.nx-d .nx-d-epseason { flex: 0 0 auto; height: 32px; padding: 0 13px; border: 1px solid var(--d-line2); border-radius: 10px; background: transparent; color: var(--d-text2); font: 600 12.5px var(--font); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.nx-cine.nx-d .nx-d-epseason:hover { border-color: var(--d-hot); color: var(--d-text); }
.nx-cine.nx-d .nx-d-epseason.is-on { border-color: transparent; background: var(--d-grad); color: #fff; }
.nx-cine.nx-d .nx-d-eplist { display: grid; gap: 4px; flex: 1 1 auto; min-height: 0; max-height: 452px; margin: 0 -6px; padding: 2px 6px 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--d-acc) 55%, transparent) transparent; }
.nx-cine.nx-d .nx-d-ep { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 6px 10px 6px 6px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--d-text); text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.nx-cine.nx-d .nx-d-ep:hover { background: color-mix(in srgb, var(--d-elev) 80%, transparent); }
.nx-cine.nx-d .nx-d-ep:focus-visible { outline: 2px solid var(--d-acc); outline-offset: -2px; }
.nx-cine.nx-d .nx-d-ep.is-on { border-color: var(--d-hot); background: linear-gradient(90deg, var(--d-soft), color-mix(in srgb, var(--d-soft) 40%, transparent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--d-acc) 18%, transparent) inset; }
.nx-cine.nx-d .nx-d-ep-media { position: relative; display: block; width: 92px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--d-elev); }
.nx-cine.nx-d .nx-d-ep-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(.9) brightness(.8); transition: filter .2s; }
.nx-cine.nx-d .nx-d-ep:hover .nx-d-ep-media img, .nx-cine.nx-d .nx-d-ep.is-on .nx-d-ep-media img { filter: none; }
.nx-cine.nx-d .nx-d-ep-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(8, 10, 16, .55); color: #fff; opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .2s, transform .2s; }
.nx-cine.nx-d .nx-d-ep-play .nx-i { width: 11px; height: 11px; margin-left: 2px; }
.nx-cine.nx-d .nx-d-ep:hover .nx-d-ep-play, .nx-cine.nx-d .nx-d-ep.is-on .nx-d-ep-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.nx-cine.nx-d .nx-d-ep.is-on .nx-d-ep-play { border-color: transparent; background: var(--d-grad); }
.nx-cine.nx-d .nx-d-ep-txt { display: grid; gap: 3px; min-width: 0; }
.nx-cine.nx-d .nx-d-ep-txt b { overflow: hidden; color: var(--d-text); font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nx-cine.nx-d .nx-d-ep-txt small { color: var(--d-text3); font-size: 11.5px; }
.nx-cine.nx-d .nx-d-ep.is-on .nx-d-ep-txt small { color: var(--d-acc-l); font-weight: 600; }
.nx-cine.nx-d .nx-d-ep-seen { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, #5EE0A0 16%, transparent); color: #5EE0A0; font-size: 11px; font-weight: 800; }

/* 4. trailer */
.nx-cine.nx-d .nx-d-trailers .nx-d-tcard { position: relative; display: block; width: min(100%, 360px); aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-elev); }
.nx-cine.nx-d .nx-d-tcard img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .4s var(--d-ease), filter .3s; filter: brightness(.82); }
.nx-cine.nx-d .nx-d-tcard::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 10, 16, .85)); }
.nx-cine.nx-d .nx-d-tplay { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(8, 10, 16, .5); color: #fff; transform: translate(-50%, -50%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .25s, transform .25s; }
.nx-cine.nx-d .nx-d-tplay .nx-i { width: 18px; height: 18px; margin-left: 3px; }
.nx-cine.nx-d .nx-d-tlabel { position: absolute; z-index: 1; left: 14px; bottom: 11px; color: #fff; font-size: 13px; font-weight: 700; }
.nx-cine.nx-d .nx-d-tcard:hover img { transform: scale(1.06); filter: none; }
.nx-cine.nx-d .nx-d-tcard:hover .nx-d-tplay { background: var(--d-grad); border-color: transparent; transform: translate(-50%, -50%) scale(1.06); }
.nx-cine.nx-d .nx-d-tcard:focus-visible { outline: 2px solid var(--d-acc); outline-offset: 3px; }

@media (max-width: 1279px) {
    .nx-cine.nx-d .nx-d-main { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
    .nx-cine.nx-d .nx-d-main:has(> .nx-d-eppanel:not([hidden])) .nx-d-facts dl { grid-template-columns: minmax(0, 1fr); }
    .nx-cine.nx-d .nx-d-main.nx-has-eps .nx-d-facts dl { grid-template-columns: minmax(0, 1fr); }
    .nx-cine.nx-d .nx-d-main:has(> .nx-d-eppanel:not([hidden])) .nx-d-facts dl > div { border-bottom: 1px solid var(--d-line) !important; }
    .nx-cine.nx-d .nx-d-main.nx-has-eps .nx-d-facts dl > div { border-bottom: 1px solid var(--d-line) !important; }
    .nx-cine.nx-d .nx-d-main:has(> .nx-d-eppanel:not([hidden])) .nx-d-facts dl > div:last-child { border-bottom: 0 !important; }
    .nx-cine.nx-d .nx-d-main.nx-has-eps .nx-d-facts dl > div:last-child { border-bottom: 0 !important; }
}
@media (max-width: 1023px) {
    .nx-cine.nx-d .nx-d-main { grid-template-columns: minmax(0, 1fr); }
    .nx-cine.nx-d .nx-d-main > * { grid-column: 1 / -1 !important; }
    .nx-cine.nx-d .nx-d-eplist { max-height: 380px; }
}
@media (max-width: 680px) {
    .nx-cine.nx-d .nx-d-eppanel { padding: 18px 12px 10px; }
    .nx-cine.nx-d .nx-d-ep { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 10px; }
    .nx-cine.nx-d .nx-d-ep-media { width: 80px; }
    .nx-cine.nx-d .nx-d-quick .nx-d-act:not(:has(> a)), .nx-cine.nx-d .nx-d-quick .nx-d-act > a { height: 56px; font-size: 10.5px; }
}
/* poster actions: four in a 2 × 2 grid, icon beside a readable label (the trailer has its own row and tab) */
.nx-cine.nx-d .nx-d-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.nx-cine.nx-d .nx-d-quick > [data-nx-trailer] { display: none !important; }
.nx-cine.nx-d .nx-d-quick .nx-d-act:not(:has(> a)),
.nx-cine.nx-d .nx-d-quick .nx-d-act > a { flex-direction: row; justify-content: flex-start; gap: 8px; height: 42px; padding: 0 10px; font-size: 12px; text-align: left; }
.nx-cine.nx-d .nx-d-quick .nx-d-act .nx-i { flex: 0 0 auto; width: 17px; height: 17px; }
@media (max-width: 680px) {
    .nx-cine.nx-d .nx-d-quick .nx-d-act:not(:has(> a)), .nx-cine.nx-d .nx-d-quick .nx-d-act > a { height: 42px; font-size: 12px; }
}
/* tablet / phone: the action row under the title, four across, icon above label */
.nx-d-quick-slot:empty { display: none; }
@media (max-width: 1023px) {
    .nx-cine.nx-d .nx-d-quick-slot { margin-top: 16px; }
    .nx-cine.nx-d .nx-d-quick-slot .nx-d-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
    .nx-cine.nx-d .nx-d-quick-slot .nx-d-quick .nx-d-act:not(:has(> a)),
    .nx-cine.nx-d .nx-d-quick-slot .nx-d-quick .nx-d-act > a { flex-direction: column; justify-content: center; gap: 5px; height: 60px; padding: 0 4px; font-size: 11.5px; text-align: center; }
}
@media (max-width: 1023px) {
    .nx-cine.nx-d .nx-d-quick-slot .nx-d-quick .nx-d-act span { overflow: visible; white-space: normal; line-height: 1.15; }
    .nx-cine.nx-d .nx-d-quick-slot .nx-d-quick .nx-d-act:not(:has(> a)), .nx-cine.nx-d .nx-d-quick-slot .nx-d-quick .nx-d-act > a { height: 64px; font-size: 11px; }
}

/* the episode panel is in the page for every device (Android TVs are detected as phones); real phone-size screens keep the bar's picker only */
@media (max-width: 940px) { .nx-cine.nx-d .nx-d-eppanel.is-handheld { display: none !important; } }
/* remote / keyboard: the row in focus is plain to see */
.nx-cine.nx-d .nx-d-ep:focus, .nx-cine.nx-d .nx-d-epseason:focus { outline: 2px solid var(--d-acc); outline-offset: -2px; }
.nx-cine.nx-d .nx-d-ep:focus:not(:focus-visible), .nx-cine.nx-d .nx-d-epseason:focus:not(:focus-visible) { outline: 0; }
/* TVs (js/nx-servers.js moves the panel under the player): episodes in columns, big enough for a remote */
.nx-cine.nx-d .nx-d-tvpanel { position: relative; z-index: 1; margin-top: 18px; }
.nx-cine.nx-d .nx-d-tvpanel .nx-d-eppanel.is-handheld:not([hidden]) { display: flex !important; }
.nx-cine.nx-d .nx-d-tvpanel .nx-d-eplist { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.nx-cine.nx-d .nx-d-tvpanel .nx-d-ep:focus { outline: 3px solid #fff; outline-offset: -3px; background: var(--d-soft); }