:root {
    --bg: #070a14;
    --panel: rgba(18, 23, 43, 0.68);
    --line: rgba(124, 165, 255, 0.2);
    --text: #f5f7ff;
    --muted: #a8b3cf;
    --accent: #ffba2d;
    --accent-2: #58e1ff;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: "Space Grotesk", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 10% -10%, rgba(88, 225, 255, 0.2), transparent 45%),
        radial-gradient(circle at 85% 0%, rgba(255, 186, 45, 0.16), transparent 35%),
        linear-gradient(160deg, #070a14, #0b1020 55%, #090d18);
    min-height: 100vh;
    overflow-x: hidden;
}

.intro-curtain {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 50%, rgba(255, 205, 120, 0.12), rgba(6, 8, 18, 0.98));
    transition: opacity 700ms ease, visibility 700ms ease;
}

.intro-reel {
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: #ffdca0;
    animation: reelPulse 1s ease-in-out infinite;
}

body.page-ready .intro-curtain {
    opacity: 0;
    visibility: hidden;
}

/* Page-exit: curtain drops back before navigation */
body.page-exit .intro-curtain {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 350ms ease, visibility 0ms ease;
}

.intro-curtain .intro-reel {
    transition: opacity 350ms ease;
}
body.page-exit .intro-curtain .intro-reel {
    opacity: 0;
}

@keyframes reelPulse {
    0%, 100% { transform: scale(1); opacity: 0.65; }
    50% { transform: scale(1.05); opacity: 1; }
}

.noise-layer, .scanline-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.noise-layer {
    opacity: 0.08;
    background-image: radial-gradient(rgba(255, 255, 255, 0.55) 0.7px, transparent 0.7px);
    background-size: 4px 4px;
}

.scanline-layer {
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: soft-light;
}

main, .topbar, .site-footer { position: relative; z-index: 2; }

.topbar {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px clamp(14px, 3vw, 36px);
    backdrop-filter: blur(12px);
    background: rgba(8, 11, 21, 0.72);
    border-bottom: 1px solid var(--line);
}

.brand-wrap { display: flex; align-items: center; gap: 12px; }

.brand-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 186, 45, 0.2), rgba(88, 225, 255, 0.2));
    border: 1px solid var(--line);
}

.brand-kicker { margin: 0; letter-spacing: 0.2em; color: var(--accent); font-size: 0.68rem; }
.brand-title { margin: 0; font-size: clamp(1rem, 2vw, 1.2rem); }

.topnav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.topnav a {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.9rem;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: 180ms ease;
}

.topnav a:hover {
    color: var(--text);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.03);
}

.hero-stage, .section-block {
    width: min(1200px, 92vw);
    margin: 24px auto;
}

.hero-stage {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 22px;
    align-items: stretch;
}

.hero-copy, .featured-frame, .section-block {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
}

.hero-copy {
    padding: clamp(20px, 4vw, 38px);
    position: relative;
    overflow: hidden;
}

.hero-copy::after {
    content: "NOW PLAYING";
    position: absolute;
    right: -18px;
    top: 10px;
    transform: rotate(8deg);
    color: rgba(255, 255, 255, 0.08);
    font-size: clamp(2rem, 8vw, 4.8rem);
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.06em;
}

.hero-eyebrow {
    margin: 0;
    color: var(--accent);
    letter-spacing: 0.2em;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.hero-copy h2 {
    margin: 10px 0;
    font-family: "Bebas Neue", sans-serif;
    line-height: 0.95;
    letter-spacing: 0.02em;
    font-size: clamp(2.1rem, 6vw, 4.2rem);
}

.hero-copy p { margin: 0; max-width: 56ch; color: var(--muted); }

.hero-actions {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn {
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    padding: 11px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 200ms ease;
    font-family: inherit;
}

.btn-primary { color: #1b1a17; background: linear-gradient(135deg, var(--accent), #ffe088); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 186, 45, 0.33); }
.btn-ghost { color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, 0.03); }

.featured-frame {
    position: relative;
    overflow: hidden;
    min-height: 320px;
}

.featured-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    filter: contrast(1.05) saturate(0.95);
}

.featured-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 16px;
    background: linear-gradient(180deg, transparent, rgba(8, 10, 18, 0.93));
}

.ticker {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 186, 45, 0.2);
    color: #ffe9b3;
    font-size: 0.72rem;
    margin: 0;
}

.featured-overlay h3 { margin: 7px 0; font-size: 1.2rem; }
.featured-stats { display: flex; flex-wrap: wrap; gap: 7px; }
.featured-stats span { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 4px 10px; font-size: 0.78rem; color: var(--muted); }

.section-block { padding: clamp(16px, 3vw, 24px); }
.section-head h2 { margin: 0; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.05em; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.section-head p { margin: 6px 0 18px; color: var(--muted); }

.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.quick-stat {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.quick-stat b { display: block; font-size: 1.3rem; color: var(--accent); }
.quick-stat span { color: var(--muted); font-size: 0.83rem; }

.continue-grid, .catalog-grid, .franchise-grid, .community-grid { display: grid; gap: 12px; }
.continue-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.continue-card, .catalog-card, .franchise-card, .pulse-card, .roulette-result {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.continue-card { padding: 12px; }
.continue-card h3 { margin: 0; font-size: 1rem; }
.continue-card p { margin: 7px 0; color: var(--muted); font-size: 0.86rem; }

.progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffbe2d, #58e1ff);
    box-shadow: 0 0 16px rgba(88, 225, 255, 0.5);
    transition: width 320ms ease;
}

.roulette-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
    gap: 8px;
    margin-bottom: 12px;
}

.roulette-controls select, .part-select, .part-comment, .part-rating {
    width: 100%;
    background: rgba(11, 16, 32, 0.9);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    font-family: inherit;
}

.roulette-result { min-height: 120px; padding: 12px; display: grid; align-items: center; }
.roulette-result.is-loading { animation: pulse 900ms ease; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 rgba(255, 186, 45, 0.5); }
    50% { box-shadow: 0 0 32px rgba(255, 186, 45, 0.5); }
    100% { box-shadow: 0 0 0 rgba(255, 186, 45, 0.05); }
}

.result-card { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.result-card img { width: 80px; height: 110px; object-fit: cover; border-radius: 8px; }
.result-meta h4 { margin: 0; }
.result-meta p { margin: 5px 0; color: var(--muted); font-size: 0.87rem; }

.mini-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.mini-actions button {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
}

.franchise-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.franchise-card { padding: 12px; transition: 220ms ease; }
.franchise-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.28); }

.franchise-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.franchise-head h3 { margin: 0; font-size: 1.06rem; }

.franchise-chip {
    font-size: 0.72rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--muted);
}

.franchise-progress-row {
    margin: 10px 0 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.franchise-progress-row span { color: var(--muted); font-size: 0.82rem; }

.parts-list { display: grid; gap: 8px; }

.part-item {
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    padding: 8px;
    background: rgba(11, 16, 32, 0.75);
}

.part-head {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.part-title { font-size: 0.9rem; }
.part-head .part-community { font-size: 0.74rem; color: var(--muted); }

.part-controls {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 8px;
}

.part-comment {
    resize: vertical;
    min-height: 36px;
    max-height: 88px;
}

.catalog-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.catalog-card {
    overflow: hidden;
    transition: transform 230ms ease, border-color 230ms ease;
}

.catalog-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.32);
}

.catalog-cover { width: 100%; aspect-ratio: 2 / 2.7; object-fit: cover; }
.catalog-body { padding: 10px; }
.catalog-body h3 { margin: 0; font-size: 1.02rem; }
.catalog-desc { font-size: 0.78rem; color: var(--muted); margin: 7px 0 4px; line-height: 1.4; }

.meta-line, .rating-line, .user-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.meta-pill, .rating-pill {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.72rem;
    color: var(--muted);
}

.rating-pill strong { color: var(--text); }

.user-line select {
    background: rgba(11, 16, 32, 0.9);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 10px;
    padding: 6px;
    font-family: inherit;
    flex: 1;
}

.card-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.card-actions button {
    flex: 1;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    padding: 7px 9px;
    cursor: pointer;
}

.pulse-card { padding: 14px; }
.community-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pulse-tag { margin: 0; color: var(--accent); font-size: 0.75rem; }
.pulse-card h3 { margin: 7px 0 4px; font-size: 1.04rem; }
.pulse-card p { margin: 0; color: var(--muted); }
.pulse-card span { display: block; margin-top: 9px; color: var(--accent-2); font-size: 0.8rem; }

.franchise-lab-panel,
.community-pulse-panel {
    width: min(1200px, 92vw);
    margin: 18px auto;
}

.franchise-lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.lab-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        rgba(255,255,255,0.03);
    padding: 16px;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.lab-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(88,225,255,0.8), transparent);
    opacity: 0.85;
}

.lab-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.28);
    box-shadow: 0 20px 40px rgba(0,0,0,0.28);
}

.lab-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lab-card-header h3 {
    margin: 0;
    font-size: 1rem;
}

.lab-kicker,
.lab-chip {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.68rem;
    color: var(--muted);
    background: rgba(255,255,255,0.04);
    letter-spacing: 0.04em;
}

.lab-copy {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.lab-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 12px;
    color: var(--muted);
    font-size: 0.78rem;
}

.lab-btn {
    width: 100%;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.lab-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255,186,45,0.35);
    background: rgba(255,186,45,0.12);
}

.pulse-card strong {
    color: var(--text);
}

.site-footer {
    width: min(1200px, 92vw);
    margin: 24px auto 34px;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
}

.my-controls {
    display: grid;
    gap: 12px;
}

.ctrl-group span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ctrl-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ctrl-btn {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    font-family: inherit;
    transition: 180ms ease;
}

.ctrl-btn.active,
.ctrl-btn:hover {
    background: linear-gradient(135deg, rgba(255, 186, 45, 0.2), rgba(88, 225, 255, 0.18));
    border-color: rgba(255, 255, 255, 0.28);
}

.my-franchise-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.my-franchise-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
}

.my-franchise-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.my-franchise-head h3 {
    margin: 0;
    font-size: 1rem;
}

.my-franchise-head span {
    font-size: 0.78rem;
    color: var(--muted);
}

.my-franchise-progress {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.my-franchise-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.my-franchise-list button {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    border-radius: 999px;
    padding: 5px 9px;
    cursor: pointer;
    font-size: 0.76rem;
}

.mylist-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.mylist-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.mylist-card:hover,
.mylist-card.spotlight {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 22px rgba(88, 225, 255, 0.22);
}

.mylist-card-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.mylist-card-body {
    padding: 10px;
}

.mylist-card-body h3 {
    margin: 0;
    font-size: 1rem;
}

.mylist-card-body p {
    margin: 5px 0 7px;
    color: var(--muted);
    font-size: 0.8rem;
}

.mylist-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mylist-tags span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.7rem;
    color: var(--muted);
}

.mylist-rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.mylist-rating-row strong {
    color: #ffe09a;
    font-size: 0.82rem;
}

.status-chip {
    margin-left: auto;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.68rem;
    border: 1px solid var(--line);
}

.status-chip.watching { color: #ffda8a; }
.status-chip.completed { color: #99ffc3; }
.status-chip.planned { color: #99d8ff; }
.status-chip.paused { color: #ff9cae; }

.mylist-progress-row {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.mylist-progress-row span {
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 980px) {
    .hero-stage { grid-template-columns: 1fr; }
    .roulette-controls { grid-template-columns: 1fr 1fr; }
    .stats-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    .topbar { flex-direction: column; align-items: flex-start; }
    .roulette-controls { grid-template-columns: 1fr; }
    .stats-strip { grid-template-columns: 1fr; }
    .part-controls { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   CINEMATIC HERO
───────────────────────────────────────── */
.cine-hero {
    position: relative;
    min-height: clamp(520px, 82vh, 820px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
}

/* Cinematic letterbox bars */
.cine-hero::before,
.cine-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    z-index: 6;
    pointer-events: none;
}
.cine-hero::before {
    top: 0;
    height: 5px;
    background: linear-gradient(90deg,
        rgba(255,186,45,0.9) 0%,
        rgba(88,225,255,0.7) 50%,
        rgba(255,186,45,0.9) 100%);
    box-shadow: 0 0 24px rgba(255,186,45,0.5);
    animation: scanBar 4s ease-in-out infinite alternate;
}
@keyframes scanBar {
    0%   { opacity: 0.6; transform: scaleX(1); }
    100% { opacity: 1;   transform: scaleX(0.98); }
}

.hero-layer-bg,
.hero-layer-mid {
    position: absolute;
    inset: -60px;
    will-change: transform;
    transition: transform 100ms linear;
}

.hero-layer-bg {
    background:
        url('https://resizing.flixster.com/-XZAfHZM39UwaGJIFWKAE8fS0ak=/v3/t/assets/p185013_b_v8_af.jpg') center / cover no-repeat;
    filter: brightness(0.42) saturate(0.75);
    z-index: 0;
    transform-origin: center center;
}

/* Animated spotlight overlay */
.hero-layer-mid {
    background:
        radial-gradient(ellipse 60% 50% at 35% 75%, rgba(255,186,45,0.14), transparent 60%),
        radial-gradient(ellipse at 80% 15%, rgba(88,225,255,0.12), transparent 45%),
        radial-gradient(ellipse 40% 60% at 65% 60%, rgba(255,120,60,0.06), transparent 55%);
    z-index: 1;
    animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0%   { opacity: 0.7; }
    50%  { opacity: 1.0; }
    100% { opacity: 0.8; }
}

.hero-fog {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(7,10,20,0.20) 20%,
        rgba(7,10,20,0.60) 45%,
        rgba(7,10,20,0.94) 72%,
        var(--bg) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Side darkening vignette */
.hero-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 100% at center, transparent 20%, rgba(0,0,0,0.7) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.55) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.55) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Film strip decoration */
.hero-filmstrip {
    position: absolute;
    bottom: 110px;
    left: 0; right: 0;
    height: 28px;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.12;
    background:
        repeating-linear-gradient(90deg,
            transparent 0, transparent 10px,
            rgba(255,255,255,0.9) 10px, rgba(255,255,255,0.9) 12px,
            transparent 12px, transparent 34px
        ),
        rgba(0,0,0,0.5);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.hero-content {
    position: relative;
    z-index: 10;
    width: min(1200px, 92vw);
    margin: 0 auto;
    padding: 0 0 52px;
}

/* Entrance animation — triggered when body.page-ready */
.hero-eyebrow,
.hero-headline,
.hero-sub,
.hero-actions {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
body.page-ready .hero-eyebrow  { opacity: 1; transform: none; transition-delay: 100ms; }
body.page-ready .hero-headline { opacity: 1; transform: none; transition-delay: 220ms; }
body.page-ready .hero-sub      { opacity: 1; transform: none; transition-delay: 380ms; }
body.page-ready .hero-actions  { opacity: 1; transform: none; transition-delay: 500ms; }

.hero-eyebrow {
    margin: 0;
    color: var(--accent);
    letter-spacing: 0.24em;
    font-size: 0.75rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.hero-headline {
    margin: 14px 0 16px;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(3rem, 9vw, 6.2rem);
    line-height: 0.88;
    letter-spacing: 0.02em;
    text-shadow:
        0 4px 30px rgba(0,0,0,0.95),
        0 0 80px rgba(255,186,45,0.12);
}

.hero-sub {
    margin: 0;
    color: var(--muted);
    max-width: 50ch;
    font-size: 1.05rem;
    line-height: 1.55;
}

.hero-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Loading state shown in hero */
.hero-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    animation: reelPulse 1.2s ease-in-out infinite;
}

.hero-stats-bar {
    position: relative;
    z-index: 10;
    background: rgba(7,10,20,0.82);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--line);
    padding: 18px clamp(14px, 4vw, 48px);
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    justify-content: center;
    align-items: center;
}

.hero-stats-bar .quick-stat {
    border: none;
    background: none;
    padding: 0;
    text-align: center;
    border-radius: 0;
}

.hero-stats-bar .quick-stat b {
    display: block;
    font-size: 1.5rem;
    color: var(--accent);
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 0.04em;
    line-height: 1;
}

.hero-stats-bar .quick-stat span {
    display: block;
    color: var(--muted);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* ─────────────────────────────────────────
   CINEMA TICKER
───────────────────────────────────────── */
.cine-ticker {
    position: relative;
    z-index: 2;
    overflow: hidden;
    height: 34px;
    background: rgba(7,10,20,0.9);
    border-top: 1px solid rgba(255,186,45,0.15);
    border-bottom: 1px solid rgba(255,186,45,0.08);
    display: flex;
    align-items: center;
}

/* Fade edges */
.cine-ticker::before,
.cine-ticker::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.cine-ticker::before {
    left: 0;
    background: linear-gradient(90deg, rgba(7,10,20,1), transparent);
}
.cine-ticker::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(7,10,20,1), transparent);
}

.cine-ticker-track {
    display: flex;
    white-space: nowrap;
    animation: tickerScroll 40s linear infinite;
    font-family: "Bebas Neue", sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.35);
    gap: 0;
    will-change: transform;
}

.cine-ticker-track span {
    padding: 0 4px;
    flex-shrink: 0;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────
   ACCORDION SECTIONS
───────────────────────────────────────── */
.accordion-section {
    width: min(1200px, 92vw);
    margin: 14px auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.section-toggle-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px clamp(14px, 3vw, 26px);
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background 200ms ease;
}

.section-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.03);
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-icon-glyph {
    font-size: 1.1rem;
    line-height: 1;
}

.toggle-badge {
    background: rgba(255, 186, 45, 0.15);
    color: var(--accent);
    border: 1px solid rgba(255, 186, 45, 0.3);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

.toggle-chevron {
    transition: transform 330ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.45;
    font-size: 0.8rem;
}

.accordion-section.is-open .toggle-chevron {
    transform: rotate(180deg);
}

.section-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.drawer-inner {
    padding: 4px clamp(14px, 3vw, 26px) 28px;
}

.drawer-lead {
    color: var(--muted);
    margin: 0 0 16px;
    font-size: 0.92rem;
}

/* ─────────────────────────────────────────
   CATALOG SECTION + FILTERS
───────────────────────────────────────── */
.catalog-section {
    width: min(1200px, 92vw);
    margin: 24px auto 40px;
}

.catalog-header {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    backdrop-filter: blur(14px);
    padding: clamp(16px, 3vw, 26px);
    margin-bottom: 24px;
}

.catalog-title-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 16px;
}

.catalog-title {
    margin: 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: 0.05em;
}

.catalog-count {
    color: var(--muted);
    font-size: 0.85rem;
}

.catalog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-right: 14px;
    border-right: 1px solid var(--line);
}

.filter-group:last-child {
    border-right: none;
}

.filter-chip {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    transition: 180ms ease;
}

.filter-chip:hover,
.filter-chip.active {
    background: rgba(255, 186, 45, 0.12);
    color: var(--text);
    border-color: rgba(255, 186, 45, 0.38);
}

.catalog-sort-select {
    background: rgba(11, 16, 32, 0.92);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

/* ─────────────────────────────────────────
   SHELF — Main Collection Display
───────────────────────────────────────── */

/* Host wrapper */
.catalog-shelf-host {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* One shelf group (e.g. "SAW Universe", "Horror & Schock") */
.shelf-group {
    position: relative;
    margin: 0 0 56px;
}

/* Atmospheric blurred background glow per group */
.shelf-group::before {
    content: '';
    position: absolute;
    inset: -30px;
    z-index: 0;
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center 20%;
    filter: blur(80px) brightness(0.08) saturate(0.5);
    pointer-events: none;
    border-radius: 24px;
}

/* Header area above the books */
.shelf-group-inner {
    position: relative;
    z-index: 1;
    padding: 20px 28px 0;
    border: 1px solid rgba(255,255,255,0.06);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, rgba(12,16,30,0.72) 0%, rgba(8,11,20,0.45) 100%);
}

.shelf-group-label {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 0;
}

.shelf-group-name {
    margin: 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: 0.07em;
    color: var(--text);
}

.shelf-group-name::after {
    content: '';
    display: inline-block;
    width: 0;
    margin-left: 10px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    vertical-align: middle;
    transition: width 400ms ease;
}

.shelf-group-meta {
    color: var(--muted);
    font-size: 0.78rem;
    margin-left: auto;
    white-space: nowrap;
}

/* ── The actual "shelf" row with perspective ── */
.shelf-stage {
    position: relative;
    z-index: 1;
    /* NO overflow:hidden — would clip the popups that float above */
    overflow: visible;
    border-left:  1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(8,11,20,0.45) 0%, rgba(5,7,15,0.85) 100%);
}

/* Books track — continuous flow, no horizontal scroll */
.shelf-scroll {
    overflow: visible;
}

/* Perspective wrapper — wraps naturally, no scroll boxes */
.shelf-books {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 10px;
    padding: 24px 22px 14px;
    perspective: 1400px;
    perspective-origin: 50% -20%;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ── Individual cover ── */
.shelf-book {
    width: 140px;
    height: 210px;         /* 2:3 poster ratio */
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    z-index: 1;
    transform-origin: center bottom;
    transform-style: preserve-3d;
    transition:
        transform 400ms cubic-bezier(0.34, 1.36, 0.64, 1),
        z-index   0ms   400ms,
        filter    280ms ease;
    filter: brightness(0.80) saturate(0.88);
}

/* Hover: dramatic lift + forward lean */
.shelf-book.is-active,
.shelf-book:hover,
.shelf-book:focus-visible {
    transform: translateY(-60px) scale(1.28) rotateX(-5deg);
    z-index: 500;
    filter: brightness(1.10) saturate(1.15);
    transition:
        transform 400ms cubic-bezier(0.34, 1.36, 0.64, 1),
        filter    220ms ease,
        z-index   0ms   0ms;
}

/* Dim siblings when any book in the row is hovered */
.shelf-books:has(.shelf-book.is-active) .shelf-book:not(.is-active) {
    filter: brightness(0.55) saturate(0.6);
    transition: filter 220ms ease, transform 380ms cubic-bezier(0.34, 1.36, 0.64, 1);
}

/* Cover image */
.shelf-book-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 4px 6px 5px 4px;
    box-shadow:
        inset 4px 0 8px rgba(0,0,0,0.6),
        inset -1px 0 3px rgba(255,255,255,0.07),
        3px 0 16px rgba(0,0,0,0.55);
    transition: box-shadow 300ms ease;
}

.shelf-book.is-active .shelf-book-cover,
.shelf-book:hover .shelf-book-cover,
.shelf-book:focus-visible .shelf-book-cover {
    box-shadow:
        0 28px 70px rgba(0,0,0,0.95),
        0 0 30px rgba(255,186,45,0.22),
        0 0  8px rgba(255,255,255,0.08),
        3px 0 16px rgba(0,0,0,0.65);
}

/* Floor reflection — fades in on hover */
.shelf-book::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 4px;
    right: 4px;
    height: 30px;
    background: inherit;
    transform: scaleY(-1);
    opacity: 0;
    filter: blur(6px);
    transition: opacity 300ms ease;
    pointer-events: none;
    z-index: -1;
}
.shelf-book.is-active::before,
.shelf-book:hover::before,
.shelf-book:focus-visible::before {
    opacity: 0.18;
}

/* Watchlist gold dot in top-right corner */
.shelf-book.in-watchlist::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 7px var(--accent), 0 0 14px rgba(255,186,45,0.4);
    z-index: 10;
    pointer-events: none;
}

/* ───────────────────────────────────────────
   SCROLL REVEAL ANIMATIONS
─────────────────────────────────────────── */

.shelf-group {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity  600ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shelf-group.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger each group */
.shelf-group:nth-child(1) { transition-delay: 0ms; }
.shelf-group:nth-child(2) { transition-delay: 80ms; }
.shelf-group:nth-child(3) { transition-delay: 160ms; }
.shelf-group:nth-child(4) { transition-delay: 240ms; }
.shelf-group:nth-child(5) { transition-delay: 320ms; }
.shelf-group:nth-child(n+6) { transition-delay: 400ms; }

/* Accordion sections also reveal */
.accordion-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.accordion-section.is-visible {
    opacity: 1;
    transform: none;
}

/* ── DVD Case Modal Overlay ── */
.dvd-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 4, 14, 0.90);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.dvd-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

/* Close button */
.dvd-close {
    position: fixed;
    top: 22px;
    right: 28px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 200ms ease, transform 260ms cubic-bezier(0.34, 1.36, 0.64, 1);
    z-index: 10001;
    line-height: 1;
    font-family: inherit;
}
.dvd-close:hover {
    background: rgba(255,255,255,0.13);
    transform: scale(1.12) rotate(90deg);
}

/* Case outer wrapper */
.dvd-case-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    max-width: min(1060px, 96vw);
    width: 100%;
    max-height: 88vh;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 100px 200px rgba(0,0,0,0.98),
        0 0 0 1px rgba(255,255,255,0.07),
        0 0 140px rgba(255,186,45,0.04);
    transform: translateY(28px) scale(0.97);
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1) 40ms;
}
.dvd-overlay.is-opening .dvd-case-wrap {
    transform: translateY(0) scale(1);
}

/* Cinematic blurred poster backdrop behind everything */
.dvd-case-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--cover);
    background-size: cover;
    background-position: center 20%;
    filter: blur(52px) brightness(0.11) saturate(0.65);
    transform: scale(1.14);
    pointer-events: none;
}

/* Left panel — poster, slides in */
.dvd-case-front {
    position: relative;
    width: min(290px, 31vw);
    min-height: 440px;
    flex-shrink: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-44px) scale(0.97);
    transition:
        opacity 540ms cubic-bezier(0.22, 1, 0.36, 1) 60ms,
        transform 540ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}
.dvd-overlay.is-opening .dvd-case-front {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.dvd-case-front-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Right-edge shadow to blend into content */
.dvd-case-front::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 80px;
    background: linear-gradient(270deg, rgba(6,9,20,0.92) 0%, transparent 100%);
    pointer-events: none;
}

/* Bottom gradient on poster */
.dvd-case-front::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent 0%, rgba(6,9,20,0.88) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Spine text */
.dvd-case-spine {
    position: absolute;
    right: 0;
    top: 0; bottom: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}
.dvd-spine-text {
    writing-mode: vertical-rl;
    font-family: "Bebas Neue", sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 220px;
}

/* Right panel — slides in from left */
.dvd-case-content {
    flex: 1;
    position: relative;
    z-index: 2;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(-18px);
    transition:
        opacity 440ms ease 230ms,
        transform 440ms cubic-bezier(0.22, 1, 0.36, 1) 230ms;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,186,45,0.18) transparent;
}
.dvd-overlay.is-opening .dvd-case-content {
    opacity: 1;
    transform: translateX(0);
}

/* Hero banner at top of right panel */
.dvd-hero-banner {
    position: relative;
    height: 200px;
    flex-shrink: 0;
    overflow: hidden;
    background-image: var(--cover);
    background-size: cover;
    background-position: center 18%;
}
.dvd-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.55) 65%,
        rgba(8,11,22,1) 100%);
    z-index: 1;
}
/* Cinematic letterbox bars */
.dvd-hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.52) 0%, transparent 16%, transparent 84%, rgba(0,0,0,0.52) 100%);
    z-index: 2;
    pointer-events: none;
}

/* NOW PLAYING label on banner */
.dvd-now-playing {
    position: absolute;
    bottom: 18px;
    left: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    pointer-events: none;
}
.dvd-now-playing::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    flex-shrink: 0;
}

/* Stream button on banner */
.dvd-stream-btn {
    position: absolute;
    bottom: 14px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,186,45,0.13);
    border: 1px solid rgba(255,186,45,0.38);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #ffe09a;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms cubic-bezier(0.34, 1.36, 0.64, 1);
    font-family: inherit;
}
.dvd-stream-btn:hover {
    background: rgba(255,186,45,0.28);
    transform: scale(1.06);
}

/* Content body below banner */
.dvd-content-body {
    flex: 1;
    background: linear-gradient(180deg, rgba(8,11,22,1) 0%, rgba(5,8,18,0.97) 100%);
    padding: 20px 24px 26px;
}
.dvd-content-body::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(88,225,255,0.7) 55%, transparent 100%);
    margin-bottom: 18px;
    opacity: 0.65;
    border-radius: 2px;
}

/* Meta pills */
.dvd-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.dvd-pill {
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.71rem;
    color: var(--muted);
    background: rgba(255,255,255,0.04);
}
.dvd-pill-rating {
    background: rgba(255,186,45,0.12);
    color: #ffe09a;
    border-color: rgba(255,186,45,0.28);
    font-weight: 700;
}
.dvd-pill-wl {
    background: rgba(88,225,255,0.09);
    color: var(--accent-2);
    border-color: rgba(88,225,255,0.22);
}

/* Title */
.dvd-title {
    margin: 0 0 6px;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2rem, 5vw, 3.3rem);
    letter-spacing: 0.04em;
    line-height: 0.92;
    color: var(--text);
    text-shadow: 0 2px 16px rgba(0,0,0,0.9);
}

/* Stars */
.dvd-stars {
    color: var(--accent);
    font-size: 1.05rem;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

/* Genre tags */
.dvd-genre-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.dvd-genre-tag {
    background: rgba(88,225,255,0.06);
    border: 1px solid rgba(88,225,255,0.16);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-2);
}

/* Description */
.dvd-desc {
    font-size: 0.89rem;
    color: var(--muted);
    line-height: 1.66;
    margin: 0 0 18px;
    border-left: 2px solid rgba(255,186,45,0.22);
    padding-left: 12px;
}

/* Divider */
.dvd-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.07) 0%, transparent 80%);
    margin: 14px 0 16px;
}

/* Rating row */
.dvd-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.dvd-rating-label {
    font-size: 0.77rem;
    color: var(--muted);
    white-space: nowrap;
}
.dvd-rating-select {
    flex: 1;
    background: rgba(6,10,22,0.95);
    border: 1px solid rgba(255,255,255,0.11);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Action buttons */
.dvd-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.dvd-btn {
    flex: 1;
    min-width: 120px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 13px 18px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
    letter-spacing: 0.04em;
}
.dvd-btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #ffe088 100%);
    color: #1b1a17;
}
.dvd-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255,186,45,0.44);
}
.dvd-btn-wl {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.14);
    color: var(--text);
}
.dvd-btn-wl:hover {
    background: rgba(88,225,255,0.09);
    border-color: rgba(88,225,255,0.3);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 600px) {
    .dvd-case-front { display: none; }
    .dvd-content-body { padding: 16px 15px 20px; }
    .dvd-hero-banner { height: 150px; }
}

/* Legacy popup class kept as no-op (no JS uses it anymore) */
.shelf-popup {
    display: none !important;
}

/* wl-pill kept for backward compatibility */
.wl-pill {
    background: rgba(255,186,45,0.12) !important;
    color: var(--accent) !important;
    border-color: rgba(255,186,45,0.3) !important;
}

/* ── Wooden shelf plank ── */
.shelf-plank {
    position: relative;
    z-index: 3;
    height: 18px;
    background:
        linear-gradient(180deg,
            #5a3a14 0%,
            #3d2610 28%,
            #2a1a09 60%,
            #1a0f04 100%);
    border-top: 2px solid rgba(255,210,120,0.22);
    border-left:  1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.7);
    border-radius: 0 0 10px 10px;
    box-shadow:
        0  8px 28px rgba(0,0,0,0.85),
        0  2px  0   rgba(0,0,0,0.6),
        inset 0 1px 2px rgba(255,200,100,0.08);
}

/* Wood grain lines on plank */
.shelf-plank::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 28px,
        rgba(0,0,0,0.12) 28px,
        rgba(0,0,0,0.12) 30px
    );
    border-radius: inherit;
}

/* Floor shadow below plank */
.shelf-plank::after {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -12px;
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Empty state ── */
.empty-note {
    color: var(--muted);
    text-align: center;
    padding: 40px;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────
   RESPONSIVE — new sections
───────────────────────────────────────── */
@media (max-width: 980px) {
    .hero-stats-bar { gap: 18px 24px; }
    .catalog-filter-bar { gap: 8px; }
    .filter-group { padding-right: 10px; }
    .shelf-book { width: 100px; height: 150px; }
    .shelf-popup { width: 215px; }
}

@media (max-width: 680px) {
    .cine-hero { min-height: 65vh; }
    .hero-headline { font-size: 2.8rem; }
    .hero-stats-bar { padding: 14px; gap: 14px; }
    .filter-group { border-right: none; }
    .shelf-book { width: 82px; height: 123px; }
    .shelf-popup { width: 200px; }
    .shelf-books { padding: 60px 14px 0; gap: 3px; }
    .shelf-group-inner { padding: 16px 16px 0; }
}