/*
Theme Name: Goon Wonderland
Author: Your Name
Description: A custom theme based on the Pastel Video Site prototype.
Version: 1.0
*/

/* ----------  Color palette  ---------- */
        :root {
            --mint: #dff7e7;
            --mint-dark: #b4e0c8;
            --pink: #ffb4e8;
            --pink-dark: #ff93dd;
            --sunflower: #fff6b3;
            --white: #ffffff;
            --dark-bg: #1c1c24;
            --card-bg: rgba(255,255,255,0.02);
        }

        /* ----------  Reset  ---------- */
        * { box-sizing:border-box; margin:0; padding:0; }
        body { font-family:'Poppins',sans-serif; background:var(--dark-bg); color:var(--white); line-height:1.5; }
        a { text-decoration:none; }

        /* ----------  Navigation  ---------- */
        nav {
            position:fixed; top:0; left:0; width:100%;
            background:rgba(0,0,0,0.85);
            backdrop-filter:blur(8px);
            display:flex; align-items:center; justify-content:space-between;
            padding:12px 48px; z-index:1000;
        }
        .logo { font-weight:600; font-size:1.25rem; color:var(--white); }
        .nav-links { list-style:none; display:flex; gap:32px; }
        .nav-links a {
            position:relative; font-size:1.05rem; letter-spacing:2px;
            padding-bottom:4px; color:var(--mint);
            transition:color .25s ease;
        }
        /* underline */
        .nav-links a::after {
            content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
            background:var(--pink); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
        }
        .nav-links a:hover { color:var(--pink-dark); }
        .nav-links a:hover::after { transform:scaleX(1); }

        /* Active/current page */
        .nav-links a.active { color:var(--pink); }
        .nav-links a.active::after { transform:scaleX(1); }
        /* When current is hovered, mimic fade‑out to mint */
        .nav-links a.active:hover { color:var(--mint-dark); }

        /* ----------  Layout helpers  ---------- */
        main { margin-top:80px; }
        section { width:100%; }

        /* ----------  Hero  ---------- */
        .hero {
            position:relative; height:80vh; min-height:450px; overflow:hidden;
        }

        .hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:slideshow 36s infinite; }
        
        /* The PHP you had before would have generated this CSS, so we just write it manually */
        .hero img:nth-child(1) { animation-delay: 0s; }
        .hero img:nth-child(2) { animation-delay: 6s; }
        .hero img:nth-child(3) { animation-delay: 12s; }
        .hero img:nth-child(4) { animation-delay: 18s; }
        .hero img:nth-child(5) { animation-delay: 24s; }
        .hero img:nth-child(6) { animation-delay: 30s; }

        @keyframes slideshow {
            /* 0-8% fade in, stay, fade out */
            0%   { opacity:0; }
            6%   { opacity:1; }
            25%  { opacity:1; }
            33%  { opacity:0; }
            100% { opacity:0; }
        }
        /* Gradient overlay for legibility */
        .hero::after {
            content:""; position:absolute; inset:0; pointer-events:none;
            background:linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 65%, rgba(0,0,0,0.85) 100%);
        }
        .hero h1 {
            position:absolute; bottom:12%; left:50%; transform:translateX(-50%);
            font-size:clamp(2rem,4vw,3.75rem); font-weight:600; letter-spacing:4px;
            color:var(--pink); text-shadow:0 3px 6px rgba(0,0,0,0.6);
        }

        /* ----------  Section Headers  ---------- */
        .section-header {
            display:flex; justify-content:space-between; align-items:center;
            padding:0 48px; margin-bottom:16px;
        }
        .section-title {
            font-size:2rem; font-weight:600; color:var(--pink);
            letter-spacing:2px;
        }
        .section-controls {
            display:flex; align-items:center; gap:16px;
        }
        .carousel-controls {
            display:flex; gap:8px;
        }
        .carousel-btn {
            width:40px; height:40px; border-radius:50%; background:var(--mint);
            border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
            transition:background .25s ease, transform .25s ease; color:#000; font-weight:600;
        }
        .carousel-btn:hover {
            background:var(--mint-dark); transform:translateY(-2px);
        }
        .carousel-btn:disabled {
            background:#666; cursor:not-allowed; opacity:0.5;
        }

        /* ----------  Gallery  ---------- */
        .models-section {
            padding:64px 0 2px;
        }
        .gallery {
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
            gap:28px; padding:0 48px;
        }
        .card { position:relative; border:3px solid var(--pink-dark); border-radius:12px; overflow:hidden; background:#000; }
        .card:hover { transform:translateY(-4px); transition:all .3s ease; color:var(--mint-dark); border:3px solid var(--mint-dark); cursor:pointer; box-shadow:0 12px 24px rgba(255,180,232,0.15);
        }
        .card img { width:100%; height:540px; object-fit:cover; display:block; }
        .card-footer {
            position:absolute; bottom:0; left:0; width:100%;
            background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
            padding:12px 14px; color:var(--white);
        }
        .card-footer h3 { font-size:1.05rem; font-weight:500; margin-bottom:4px; color:var(--pink); }
        .meta {
            display:flex; justify-content:space-between; align-items:center; font-size:.8rem;
        }
        .rating { color:var(--sunflower); }

        /* ----------  Featured Channels  ---------- */
        .channels-section {
            padding:64px 0 10px;
        }
        .channels-grid {
            display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
            gap:32px; padding:0 48px;
        }
        .channel-card {
            position:cover; background:rgba(255,255,255,0.02);
            border:3px solid var(--pink-dark); border-radius:12px;
            overflow:hidden; transition:all .3s ease; cursor:pointer;
        }
        .channel-card:hover {
            transform:translateY(-4px); color:var(--mint-dark);
            border:3px solid var(--mint-dark);
            box-shadow:0 12px 24px rgba(255,180,232,0.15);
        }
        
        .channel-hero {
            position:relative; height:260px; overflow:hidden;
        }
        .channel-hero img {
            width:100%; height:100%; object-fit:cover;
            transition:opacity .3s ease;
        }
        .channel-hero .feature-img {
            position:absolute; top:0; left:0; opacity:0;
        }
        .channel-card:hover .channel-hero .logo-img {
            opacity:0;
        }
        .channel-card:hover .channel-hero .feature-img {
            opacity:1;
        }
        .channel-content {
            padding:20px;
        }
        .channel-content h3 {
            font-size:1.25rem; font-weight:600; color:var(--pink);
            margin-bottom:8px; letter-spacing:1px;
        }
        .channel-content p {
            color:var(--mint); font-size:0.9rem; line-height:1.6;
            margin-bottom:16px; opacity:0.9;
        }
        .channel-stats {
            display:flex; justify-content:space-between; align-items:center;
            font-size:0.8rem; color:var(--sunflower);
        }
        .channel-stats span {
            display:flex; align-items:center; gap:4px;
        }

        /* ----------  Videos Section  ---------- */
        .videos-section {
            padding:64px 0 96px;
        }
        .videos-grid {
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(400px,1fr));
            gap:20px; padding:0 42px;
        }
        .video-card {
            position:relative; border:3px solid var(--pink-dark); border-radius:12px;
            overflow:hidden; background:#000; transition:all .25s ease; cursor:pointer;
        
        .video-card:hover {
            transform:translateY(-4px); color:var(--mint-dark);
            border:3px solid var(--mint-dark);
            box-shadow:0 12px 24px rgba(255,180,232,0.15);
        }
        .video-card img {
            width:100%; height:100%; object-fit:cover; display:block;
        }
        .video-footer {
            position:absolute; bottom:0; left:0; width:100%;
            background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
            padding:6px 8px; color:var(--white);
            transition:all .25s ease;
            /* Start with minimal height - just title */
            height:36px;
            overflow:hidden;
        }
        .video-footer h3 {
            font-size:1.05rem; font-weight:500; margin-bottom:0; color:var(--pink);
            transition:margin-bottom .25s ease;
        }
        .video-meta {
            display:flex; justify-content:space-between; align-items:center; font-size:.8rem;
            opacity:0; transform:translateY(10px);
            transition:all .25s ease;
            margin-top:2px;
        }
        .video-card:hover .video-footer {
            padding:6px 8px; height:64px;
        }
        .video-card:hover .video-footer h3 {
            margin-bottom:4px;
        }
        .video-card:hover .video-meta {
            opacity:1; transform:translateY(0);
        }
        .video-meta .channel-info {
            color:var(--mint); cursor:pointer;
        }
        .video-meta .channel-info:hover {
            color:var(--mint-dark);
        }
        .video-meta .rating {
            color:var(--sunflower);
        }

        /* ----------  Buttons & badges  ---------- */
        .btn-primary {
            background:var(--pink); color:#000; padding:8px 22px; border-radius:24px; font-weight:600;
            transition:background .25s ease, transform .25s ease; display:inline-block;
        }
        .btn-primary:hover { background:var(--pink-dark); transform:translateY(-2px); }

        .btn-secondary {
            background:var(--mint); color:#000; padding:8px 18px; border-radius:20px; font-weight:500;
            transition:background .25s ease, transform .25s ease; display:inline-block;
            font-size:.9rem;
        }
        .btn-secondary:hover { background:var(--mint-dark); transform:translateY(-2px); }

        /* ----------  Responsive tweaks  ---------- */
        @media(max-width:640px){
            nav { padding:12px 24px; }
            .nav-links { gap:22px; }
            .section-header { padding:0 24px; flex-direction:column; gap:16px; }
            .gallery { padding:0 24px; }
            .channels-grid { padding:0 24px; }
            .videos-grid { grid-template-columns:1fr; padding:0 24px; }
            .card img { height:300px; }
            .video-card img { height:260px; }
        }
        @media(max-width:768px){
            .videos-grid { grid-template-columns:repeat(2, 1fr); }
        }
        @media(max-width:1024px){
            .videos-grid { grid-template-columns:repeat(2, 1fr); }
        }


/* ---------- Layout ---------- */
       main { margin-top:80px; padding:32px 48px 96px; }
       .video-container { display:grid; grid-template-columns:2fr 1fr; gap:48px; }

/* ---------- Video Player Section ---------- */
       .video-main {
           max-width:100%;
       }
       .video-player {
           position:relative; width:100%; height:0; padding-bottom:56.25%; / 16:9 aspect ratio */
           background:#000; border-radius:12px; overflow:hidden; margin-bottom:24px;
           border:3px solid var(--pink-dark);
       }
       .video-player video {
           position:absolute; top:0; left:0; width:100%; height:100%;
           object-fit:cover;
       }
       .video-placeholder {
           position:absolute; top:0; left:0; width:100%; height:100%;
           background:linear-gradient(45deg, var(--pink-dark), var(--mint-dark));
           display:flex; align-items:center; justify-content:center;
           color:var(--white); font-size:1.2rem; font-weight:600;
       }

/* ---------- Video Info ---------- */
       .video-info {
           margin-bottom:32px;
       }
       .video-title {
           font-size:1.8rem; font-weight:600; color:var(--pink);
           margin-bottom:16px; letter-spacing:1px;
       }
       .video-stats {
           display:flex; justify-content:space-between; align-items:center;
           margin-bottom:20px; padding:16px 0; border-bottom:2px solid var(--pink-dark);
       }
       .stats-left {
           display:flex; gap:24px; align-items:center; font-size:0.9rem; color:var(--mint);
       }
       .stats-right {
           display:flex; gap:16px; align-items:center;
       }
       .rating-display {
           display:flex; align-items:center; gap:8px; color:var(--sunflower);
           font-weight:600;
       }
       .like-dislike {
           display:flex; gap:12px;
       }
       .action-btn {
           display:flex; align-items:center; gap:6px; padding:8px 16px;
           background:var(--card-bg); border:2px solid var(--mint-dark);
           border-radius:20px; color:var(--mint); cursor:pointer;
           transition:all .3s ease; font-size:0.9rem;
       }
       .action-btn:hover {
           background:var(--mint-dark); color:#000; transform:translateY(-2px);
       }
       .action-btn.liked {
           background:var(--pink); color:#000; border-color:var(--pink);
       }

/* ---------- Channel Info ---------- */
       .channel-section {
           display:flex; align-items:center; gap:20px; padding:20px;
           background:var(--card-bg); border-radius:12px; margin-bottom:24px;
           border:2px solid var(--pink-dark);
       }
       .channel-avatar {
           width:80px; height:80px; border-radius:50%; overflow:hidden;
           border:3px solid var(--mint-dark);
       }
       .channel-avatar img {
           width:100%; height:100%; object-fit:cover;
       }
       .channel-details h3 {
           color:var(--pink); font-size:1.2rem; font-weight:600;
           margin-bottom:4px;
       }
       .channel-stats {
           color:var(--mint); font-size:0.9rem; margin-bottom:8px;
       }
       .channel-description {
           color:var(--mint); opacity:0.9; font-size:0.85rem; line-height:1.4;
       }
       .subscribe-btn {
           background:var(--pink); color:#000; padding:10px 20px;
           border-radius:24px; font-weight:600; margin-left:auto;
           transition:all .3s ease; cursor:pointer;
       }
       .subscribe-btn:hover {
           background:var(--pink-dark); transform:translateY(-2px);
       }

/* ---------- Description ---------- */
       .description-section {
           background:var(--card-bg); padding:24px; border-radius:12px;
           border:2px solid var(--pink-dark); margin-bottom:32px;
       }
       .description-section h3 {
           color:var(--pink); font-size:1.1rem; font-weight:600;
           margin-bottom:16px; letter-spacing:1px;
       }
       .description-text {
           color:var(--mint); line-height:1.6; margin-bottom:16px; opacity:0.9;
       }
       .video-tags {
           display:flex; flex-wrap:wrap; gap:8px;
       }
       .tag {
           background:var(--mint); color:#000; padding:4px 12px;
           border-radius:16px; font-size:0.8rem; font-weight:500;
       }

/* ---------- Comments Section ---------- */
       .comments-section {
           margin-top:32px;
       }
       .comments-section h3 {
           color:var(--pink); font-size:1.3rem; font-weight:600;
           margin-bottom:24px; letter-spacing:1px;
       }
       .comment {
           display:flex; gap:16px; padding:20px; background:var(--card-bg);
           border-radius:12px; border:2px solid var(--pink-dark); margin-bottom:16px;
       }
       .comment-avatar {
           width:50px; height:50px; border-radius:50%; overflow:hidden;
           border:2px solid var(--mint-dark); flex-shrink:0;
       }
       .comment-avatar img {
           width:100%; height:100%; object-fit:cover;
       }
       .comment-content h4 {
           color:var(--pink); font-size:0.95rem; font-weight:600; margin-bottom:4px;
       }
       .comment-text {
           color:var(--mint); line-height:1.5; margin-bottom:8px; opacity:0.9;
       }
       .comment-meta {
           display:flex; gap:16px; align-items:center; font-size:0.8rem;
           color:var(--mint); opacity:0.7;
       }
       .comment-like {
           display:flex; align-items:center; gap:4px; cursor:pointer;
           transition:color .3s ease;
       }
       .comment-like:hover {
           color:var(--pink);
       }

/* ---------- Sidebar ---------- */
       .video-sidebar {
           max-width:100%;
       }
       .sidebar-section {
           background:var(--card-bg); border-radius:12px; padding:24px;
           border:2px solid var(--pink-dark); margin-bottom:24px;
       }
       .sidebar-section h3 {
           color:var(--pink); font-size:1.1rem; font-weight:600;
           margin-bottom:20px; letter-spacing:1px;
       }
       .related-video {
           display:flex; gap:12px; padding:12px; border-radius:8px;
           transition:background .3s ease; cursor:pointer; margin-bottom:12px;
       }
       .related-video:hover {
           background:rgba(255,255,255,0.05);
       }
       .related-thumb {
           width:120px; height:68px; border-radius:6px; overflow:hidden;
           border:2px solid var(--pink-dark); flex-shrink:0;
       }
       .related-thumb img {
           width:100%; height:100%; object-fit:cover;
       }
       .related-info h4 {
           color:var(--pink); font-size:0.9rem; font-weight:500;
           margin-bottom:4px; line-height:1.3;
       }
       .related-meta {
           font-size:0.8rem; color:var(--mint); opacity:0.8;
           margin-bottom:2px;
       }
       .related-stats {
           font-size:0.75rem; color:var(--sunflower);
       }

/* ---------- Model Profile ---------- */
       .model-profile {
           display:flex; align-items:center; gap:16px; margin-bottom:16px;
       }
       .model-avatar {
           width:60px; height:60px; border-radius:50%; overflow:hidden;
           border:3px solid var(--mint-dark);
       }
       .model-avatar img {
           width:100%; height:100%; object-fit:cover;
       }
       .model-info h4 {
           color:var(--pink); font-size:1rem; font-weight:600;
       }
       .model-stats {
           color:var(--mint); font-size:0.85rem; opacity:0.8;
       }

/* ---------- Responsive ---------- */
       @media(max-width:1200px){
           .video-container { grid-template-columns:1fr; gap:32px; }
       }
       @media(max-width:768px){
           main { padding:24px; }
           nav { padding:12px 24px; }
           .nav-links { gap:20px; font-size:1rem; }
           .video-title { font-size:1.4rem; }
           .video-stats { flex-direction:column; gap:16px; align-items:flex-start; }
           .channel-section { flex-direction:column; text-align:center; }
           .subscribe-btn { margin-left:0; }
           .related-thumb { width:100px; height:56px; }
       }


/* ---------- Models Section ---------- */
       .models-section {
           padding:64px 48px;
       }
       .models-grid {
           display:grid; grid-template-columns:repeat(4, 1fr);
           gap:28px; margin-bottom:48px; opacity:1;
           transition:opacity .3s ease;
       }
       .models-grid.loading {
           opacity:0.5;
       }
       .model-card {
           position:relative; border:3px solid var(--pink-dark); border-radius:12px;
           overflow:hidden; background:#000; transition:all .3s ease; cursor:pointer;
       }
       .model-card:hover {
           transform:translateY(-4px); border:3px solid var(--mint-dark);
           box-shadow:0 12px 24px rgba(255,180,232,0.15);
       }
       .model-card img {
           width:100%; height:540px; object-fit:cover; display:block;
       }
       .card-footer {
           position:absolute; bottom:0; left:0; width:100%;
           background:rgba(0,0,0,0.65); backdrop-filter:blur(4px);
           padding:12px 14px; color:var(--white);
       }
       .card-footer h3 {
           font-size:1.05rem; font-weight:500; margin-bottom:4px; color:var(--pink);
       }
       .meta {
           display:flex; justify-content:space-between; align-items:center; font-size:.8rem;
       }
       .rating {
           color:var(--sunflower);
       }

/* ---------- Pagination ---------- */
       .pagination {
           display:flex; justify-content:flex-end; align-items:center;
           gap:16px; margin-top:32px;
       }
       .page-info {
           color:var(--mint); font-size:0.9rem;
       }
       .page-arrow {
           width:48px; height:48px; border-radius:50%; background:var(--mint);
           border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
           transition:all .25s ease; color:#000; font-weight:600; font-size:1.2rem;
       }
       .page-arrow:hover {
           background:var(--mint-dark); transform:translateY(-2px);
       }
       .page-arrow:disabled {
           background:#666; cursor:not-allowed; opacity:0.5;
           transform:none;
       }

/* ---------- Responsive tweaks ---------- */
       @media(max-width:1024px){
           .models-grid { grid-template-columns:repeat(3, 1fr); }
       }
       @media(max-width:768px){
           nav { padding:12px 24px; }
           .nav-links { gap:20px; font-size:0.95rem; }
           .models-section { padding:48px 24px; }
           .models-grid { grid-template-columns:repeat(2, 1fr); gap:20px; }
           .model-card img { height:300px; }
           .pagination { justify-content:center; }
       }
       @media(max-width:480px){
           .models-grid { grid-template-columns:1fr; }
           .model-card img { height:360px; }
       }

       /* ----------  Filters  ---------- */
        .filters-section {
            padding:48px 48px 24px;
        }
        .filters {
            display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
        }
        .filter-btn {
            background:rgba(255,255,255,0.1); border:2px solid var(--mint);
            color:var(--mint); padding:8px 20px; border-radius:24px;
            font-weight:500; cursor:pointer; transition:all .25s ease;
        }
        .filter-btn:hover, .filter-btn.active {
            background:var(--mint); color:var(--dark-bg);
            transform:translateY(-2px);
        }
 
        /* ---------- Model Profile (from model-template.php) ---------- */
        .model-profile {
            max-width: 1200px;
            margin: 0 auto 64px;
        }
        .profile-header {
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 48px;
            margin-bottom: 48px;
        }
        .main-image {
            border-radius: 12px;
            overflow: hidden;
            border: 3px solid var(--pink-dark);
        }
        .main-image img {
            width: 100%;
            height: 500px;
            object-fit: cover;
            display: block;
        }
        .model-info h1 {
            font-size: 3rem;
            color: var(--pink);
            font-weight: 600;
            margin-bottom: 24px;
            letter-spacing: 2px;
        }

        /* ---------- Stats Grid ---------- */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 16px;
            margin-bottom: 32px;
        }
        .stat-item {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid var(--mint);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        .stat-label {
            font-size: 0.8rem;
            color: var(--mint);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }
        .stat-value {
            font-size: 1.1rem;
            color: var(--white);
            font-weight: 600;
        }

        /* ---------- Channels & Scenes ---------- */
        .model-channels {
            margin-bottom: 24px;
        }
        .model-channels h3 {
            font-size: 1.2rem;
            color: var(--pink);
            margin-bottom: 12px;
            font-weight: 600;
        }
        .channels-list {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }
        .channel-badge {
            background: var(--mint);
            color: var(--dark-bg);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .scenes-info {
            color: var(--sunflower);
            font-size: 1rem;
            font-weight: 500;
        }

        /* ---------- Bio Section ---------- */
        .model-bio {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            padding: 24px;
            border: 2px solid rgba(255, 180, 232, 0.2);
        }
        .model-bio h3 {
            font-size: 1.3rem;
            color: var(--pink);
            margin-bottom: 16px;
            font-weight: 600;
        }
        .model-bio p {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--mint);
        }

        /* ---------- Gallery & Scenes Sections ---------- */
        .gallery-section, .scenes-section {
            max-width: 1200px;
            margin: 0 auto;
        }
        .section-title {
            font-size: 2.5rem;
            color: var(--pink);
            font-weight: 600;
            text-align: center;
            margin-bottom: 48px;
            letter-spacing: 2px;
        }
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-bottom: 48px;
        }
        .gallery-item {
            border-radius: 12px;
            overflow: hidden;
            border: 2px solid var(--pink-dark);
            transition: all .3s ease;
            cursor: pointer;
        }
        .gallery-item:hover {
            transform: translateY(-4px);
            border-color: var(--mint-dark);
            box-shadow: 0 12px 24px rgba(255, 180, 232, 0.15);
        }
        .gallery-item img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            display: block;
        }

        /* ---------- Recent Scenes ---------- */
        .scenes-section {
            margin-top: 64px;
            padding-top: 48px;
            border-top: 2px solid rgba(255, 180, 232, 0.2);
        }
        .scenes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 32px;
        }
        .scene-card {
            position: relative;
            border: 3px solid var(--pink-dark);
            border-radius: 12px;
            overflow: hidden;
            background: #000;
            transition: all .3s ease;
            cursor: pointer;
        }
        .scene-card:hover {
            transform: translateY(-4px);
            border: 3px solid var(--mint-dark);
            box-shadow: 0 12px 24px rgba(255, 180, 232, 0.15);
        }
        .scene-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        .scene-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(4px);
            padding: 12px 14px;
            color: var(--white);
        }
        .scene-footer h3 {
            font-size: 1.05rem;
            font-weight: 500;
            margin-bottom: 4px;
            color: var(--pink);
        }
        .scene-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .8rem;
        }
        .scene-meta .left-info {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--mint);
        }
        .scene-rating {
            color: var(--sunflower);
        }

        /* ---------- Back Button ---------- */
        .back-button {
            background: var(--mint);
            color: var(--dark-bg);
            padding: 12px 24px;
            border-radius: 24px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all .25s ease;
            margin-bottom: 32px;
        }
        .back-button:hover {
            background: var(--mint-dark);
            transform: translateY(-2px);
        }