:root {
    --cinema-gold: #D4A853;
    --cinema-gold-light: #F0C674;
    --cinema-gold-dim: #9E7D3A;
    --cinema-red: #C1272D;
    --cinema-black: #030201;
    --cinema-card: #0C0A08;
    --cinema-border: rgba(212, 168, 83, 0.16);
}

html, body {
    background: transparent !important;
}

#cinemaWebglCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* ── Cinema Curtains ── */
.cinema-curtain {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 110px;
    z-index: -90;
    pointer-events: none;
    background: linear-gradient(90deg, #4A0E16 0%, #7A1520 15%, #8F1A26 35%, #7A1520 55%, #5E1018 80%, #3A0A10 100%);
    background-size: 40px 100%;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.5);
}

.cinema-curtain::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(0,0,0,0.12) 0px,
        rgba(0,0,0,0.02) 10px,
        rgba(0,0,0,0.12) 20px,
        rgba(0,0,0,0.0) 30px
    );
}

.cinema-curtain::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.7) 100%);
}

.cinema-curtain-left {
    left: 0;
    transform: perspective(400px) rotateY(8deg);
    transform-origin: left center;
    border-radius: 0 40px 40px 0;
}

.cinema-curtain-right {
    right: 0;
    transform: perspective(400px) rotateY(-8deg);
    transform-origin: right center;
    border-radius: 40px 0 0 40px;
}

@media (max-width: 768px) {
    .cinema-curtain { width: 40px; }
    .cinema-curtain-left { border-radius: 0 20px 20px 0; }
    .cinema-curtain-right { border-radius: 20px 0 0 20px; }
}

/* Content readability over background */
main.container {
    position: relative;
    z-index: 1;
}

.footer {
    position: relative;
    z-index: 1;
}

/* Dark cards globally */
body[data-theme="dark"] .card,
body[data-theme="dark"] .chart-card,
body[data-theme="dark"] .ticket-banner,
body[data-theme="dark"] .date-nav,
body[data-theme="dark"] .matrix-legend,
body[data-theme="dark"] .movie-card,
body[data-theme="dark"] .showtime-card,
body[data-theme="dark"] .ranking-card {
    background: var(--cinema-card);
    border: 1px solid var(--cinema-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

body[data-theme="dark"] .navbar {
    background: rgba(3, 2, 1, 0.85);
    border-bottom: 1px solid var(--cinema-border);
    backdrop-filter: blur(16px);
}

body[data-theme="dark"] .footer {
    background: rgba(3, 2, 1, 0.95);
    border-color: var(--cinema-border);
}