/* Common Header Component */
.common-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 0;
    margin-bottom: 30px;
    backdrop-filter: blur(15px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    position: sticky;
    top: 0;
    z-index: 100;
}

.common-header .header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    min-height: 70px;
}

.common-header .brand {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.common-header .brand-logo {
    font-size: 2.5rem;
    animation: bounce 2s infinite;
}

/* Ensure image-based logo scales cleanly */
.common-header .brand-logo .logo-image {
    display: block;
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

.common-header .brand-name {
    font-family: 'Fredoka One', cursive;
    font-size: 2rem;
    font-weight: 600;
    background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f, #4ecdc4);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient 3s ease infinite;
}

.common-header .nav-menu {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-shrink: 0;
}

.common-header .nav-menu a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.common-header .nav-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.common-header .nav-menu .home-link {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    color: #333;
    font-weight: 600;
    border: none;
}

.common-header .nav-menu .home-link:hover {
    background: linear-gradient(45deg, #ff5252, #ffcc02);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Responsive header */
@media (max-width: 768px) {
    .common-header {
        position: relative;
        z-index: 2000; /* ensure above page content */
    }
    
    .common-header .header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        position: relative;
        min-height: 64px;
    }
    
    .common-header .brand {
        flex-direction: row;
        text-align: left;
        gap: 10px;
    }
    
    .common-header .brand-name {
        font-size: 1.8rem;
    }
    
    .common-header .nav-menu {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }

    /* Make mobile menu a fixed dropdown under header */
    .mobile-menu {
        position: fixed;
        top: 60px; /* will be updated dynamically via JS */
        left: 0;
        right: 0;
    }

    /* Larger touch targets in mobile menu */
    .mobile-menu a {
        padding: 18px 22px;
        font-size: 1.1rem;
    }

    /* Mobile logo size */
    .common-header .brand-logo .logo-image,
    .logo-image {
        height: 36px;
        max-width: 120px;
    }
}

/* Desktop: Hide mobile toggle, show desktop menu */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }
    
    .common-header .nav-menu {
        display: flex;
    }
}

@media (max-width: 480px) {
    .common-header .nav-menu {
        flex-direction: column;
        gap: 8px;
    }
    
    .common-header .nav-menu a {
        width: 100%;
        text-align: center;
    }

    /* Slightly smaller logo for very small screens */
    .common-header .brand-logo .logo-image,
    .logo-image {
        height: 32px;
        max-width: 110px;
    }
}

/* BTD6: inner fixed-size frame like BTD5 */
.game-frame {
    width: 100%;
    max-width: 800px;
    height: 600px;
    background: #000;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
}

.game-frame #app {
    width: 100% !important;
    height: 100% !important;
}

.game-frame .game-loading,
.game-frame .game-launch,
.game-frame .game-error {
    border-radius: 10px;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Animated background stars */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        25px 25px white,
        50px 75px white,
        100px 50px white,
        150px 100px white,
        200px 25px white,
        250px 150px white,
        300px 75px white,
        350px 125px white,
        400px 50px white,
        450px 175px white,
        500px 100px white,
        550px 25px white,
        600px 150px white,
        650px 75px white,
        700px 125px white,
        750px 50px white,
        800px 175px white,
        850px 100px white,
        900px 25px white,
        950px 150px white,
        1000px 75px white,
        1050px 125px white,
        1100px 50px white,
        1150px 175px white,
        1200px 100px white;
    animation: twinkle 4s infinite ease-in-out;
}

.stars::after {
    animation-delay: 2s;
    opacity: 0.5;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Header */
.header {
    text-align: center;
    padding: 40px 0;
}

.logo h1 {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f, #4ecdc4, #45b7d1);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient 3s ease infinite;
    margin-bottom: 10px;
}

.logo p {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 500;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hero section */
.hero {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 20px;
    font-weight: 700;
}

.hero p {
    font-size: 1.3rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* Games grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.game-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
}

.game-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

.game-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.game-card:hover .game-image img {
    transform: scale(1.05);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-card:hover .play-overlay {
    opacity: 1;
}

.play-button {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #333;
    transition: transform 0.3s ease;
}

.play-button:hover {
    transform: scale(1.1);
}

.game-info {
    padding: 25px;
}

.game-info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
    color: #fff;
}

.game-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
    line-height: 1.5;
}

.game-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.year {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: 500;
}

.difficulty {
    color: #ffd93d;
    font-size: 1.1rem;
}

.play-btn {
    display: inline-block;
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    color: #333;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
    background: linear-gradient(45deg, #ff5252, #ffcc02);
}

/* Features section */
.features {
    text-align: center;
    margin-bottom: 80px;
}

.features h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
    font-weight: 700;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px 20px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.feature:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.feature p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* Footer */
.footer {
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.footer p {
    margin-bottom: 10px;
}

/* Game Information Sections */
.game-info-sections {
    margin: 60px 0;
}

.game-info-section {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    color: #2c3e50;
}

.game-info-section h2 {
    color: #2c3e50;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Fredoka One', cursive;
}

.game-info-section h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Fredoka One', cursive;
}

.game-info-section h4 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 20px;
}

.game-info-section p {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.game-info-section li {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.game-info-section strong {
    color: #2c3e50;
    font-weight: 600;
}

.game-info-section em {
    color: #7f8c8d;
    font-style: italic;
}

.game-meta-info {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.game-meta-info span {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.game-meta-info .developer {
    background: linear-gradient(45deg, #3498db, #2980b9);
    color: white;
}

.game-meta-info .rating {
    background: linear-gradient(45deg, #f39c12, #e67e22);
    color: white;
}

.game-meta-info .votes {
    background: linear-gradient(45deg, #95a5a6, #7f8c8d);
    color: white;
}

.game-description {
    margin-bottom: 30px;
}

.game-description p {
    color: #34495e;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.game-description ul {
    list-style: none;
    padding: 0;
}

.game-description li {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.game-description li::before {
    content: "🎯";
    position: absolute;
    left: 0;
    top: 0;
}

.game-description strong {
    color: #2c3e50;
    font-weight: 600;
}

.how-to-play, .game-details {
    margin-bottom: 30px;
}

.how-to-play h3, .game-details h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Fredoka One', cursive;
}

.how-to-play ul, .game-details ul {
    list-style: none;
    padding: 0;
}

.how-to-play li, .game-details li {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.how-to-play li::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 0;
    color: #e74c3c;
    font-weight: bold;
}

.game-details p {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Game Categories */
.game-categories {
    margin: 60px 0;
    text-align: center;
}

.game-categories h3 {
    color: #2c3e50;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 30px;
    font-family: 'Fredoka One', cursive;
}

.category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.category-tag {
    background: #ecf0f1;
    color: #2c3e50;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #bdc3c7;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .category-tag:hover {
        background: #3498db;
        color: white;
        border-color: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    }
    
    /* Game info sections responsive */
    @media (max-width: 768px) {
        .game-info-section {
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .game-info-section h2 {
            font-size: 2rem;
        }
        
        .game-meta-info {
            flex-direction: column;
            gap: 10px;
        }
        
        .game-meta-info span {
            text-align: center;
        }
        
        .category-tags {
            gap: 10px;
        }
        
        .category-tag {
            padding: 8px 16px;
            font-size: 0.8rem;
        }
    }

/* Privacy Policy Styles */
.privacy-policy-section {
    margin: 40px 0;
}

.privacy-policy-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    max-width: 900px;
    margin: 0 auto;
}

.privacy-policy-content h1 {
    color: #2c3e50;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Fredoka One', cursive;
    text-align: center;
}

.last-updated {
    color: #7f8c8d;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 40px;
    font-style: italic;
}

.privacy-intro {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 40px;
    text-align: center;
}

.privacy-intro p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
}

.privacy-section {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ecf0f1;
}

.privacy-section:last-child {
    border-bottom: none;
}

.privacy-section h2 {
    color: #2c3e50;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: 'Fredoka One', cursive;
}

.privacy-section h3 {
    color: #34495e;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 25px 0 15px 0;
}

.privacy-section p {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

.privacy-section ul {
    margin: 15px 0;
    padding-left: 0;
    list-style: none;
}

.privacy-section li {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.privacy-section li::before {
    content: "•";
    color: #3498db;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

.privacy-section li strong {
    color: #2c3e50;
    font-weight: 600;
}

.contact-info {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid #3498db;
    margin: 20px 0;
}

.contact-info p {
    margin-bottom: 10px;
    color: #2c3e50;
}

.contact-info a {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
}

.contact-info a:hover {
    text-decoration: underline;
}

.privacy-footer {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin-top: 40px;
    text-align: center;
}

.privacy-footer p {
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.privacy-footer p:last-child {
    margin-bottom: 0;
    font-style: italic;
    opacity: 0.9;
}

/* Footer Links */
.footer-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #3498db;
}

/* Privacy Policy Responsive */
@media (max-width: 768px) {
    .privacy-policy-content {
        padding: 30px 20px;
        margin: 20px 10px;
    }
    
    .privacy-policy-content h1 {
        font-size: 2.5rem;
    }
    
    .privacy-section h2 {
        font-size: 1.6rem;
    }
    
    .privacy-section h3 {
        font-size: 1.2rem;
    }
    
    .privacy-intro {
        padding: 20px;
    }
    
    .privacy-intro p {
        font-size: 1.1rem;
    }
    
    .contact-info {
        padding: 20px;
    }
    
    .privacy-footer {
        padding: 25px 20px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
}

/* Contact Us Page Styles */
.contact-section {
    margin: 40px 0;
}

.contact-content {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-content h1 {
    color: white;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Fredoka One', cursive;
    text-align: center;
}

.contact-intro {
    color: white;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.contact-info-card, .contact-form-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.contact-info-card h2, .contact-form-card h2 {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 30px;
    font-family: 'Fredoka One', cursive;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    flex-shrink: 0;
}

.contact-text h3 {
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.contact-text p {
    color: #34495e;
    font-size: 1rem;
    margin-bottom: 5px;
}

.contact-text small {
    color: #7f8c8d;
    font-size: 0.9rem;
}

/* Contact Form Styles */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 15px;
    border: 2px solid #ecf0f1;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-group {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.checkbox-label a {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
}

.checkbox-label a:hover {
    text-decoration: underline;
}

.submit-btn {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #2980b9, #1f4e79);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

/* FAQ Section */
.faq-section {
    margin: 60px 0;
}

.faq-section h2 {
    color: white;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
    font-family: 'Fredoka One', cursive;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
}

.faq-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.faq-item h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.faq-item p {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
}

/* Additional Information */
.additional-info {
    margin: 60px 0;
}

.additional-info h2 {
    color: white;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
    font-family: 'Fredoka One', cursive;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.info-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    text-align: center;
}

.info-card h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.info-card p {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
}

/* Response Information */
.response-info {
    margin: 60px 0;
}

.response-info h2 {
    color: white;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
    font-family: 'Fredoka One', cursive;
}

.response-timeline {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.timeline-icon {
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    flex-shrink: 0;
}

.timeline-content h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.timeline-content p {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
}

/* Logo Image Styles */
.logo-image {
    height: 44px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

/* Hide brand name when logo image is present */
.brand-logo .logo-image {
    display: block;
}

.brand-logo .logo-image ~ * {
    display: none;
}

/* Alternative approach - hide brand name when logo image exists */
.brand.has-logo-image .brand-name {
    display: none;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 8px 12px;
    margin-left: auto;
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: 1001;
}

.mobile-menu-toggle:hover {
    color: #f39c12;
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(44, 62, 80, 0.98);
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    animation: slideDown 0.3s ease-out;
}

.mobile-menu.active {
    display: block;
}

/* Final mobile overrides placed at end to win cascade */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block !important;
    }
    .common-header .nav-menu {
        display: none !important;
    }
}

.mobile-menu a {
    display: block;
    padding: 16px 20px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 500;
}

.mobile-menu a:hover,
.mobile-menu a.active {
    background-color: rgba(243, 156, 18, 0.2);
    color: #f39c12;
    padding-left: 30px;
}

.mobile-menu a:last-child {
    border-bottom: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Game Title H1 Styles */
.game-title {
    color: white;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    margin: 40px 0;
    font-family: 'Fredoka One', cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Game Title Responsive */
@media (max-width: 768px) {
    .game-title {
        font-size: 2.5rem;
        margin: 30px 0;
    }
}

@media (max-width: 480px) {
    .game-title {
        font-size: 2rem;
        margin: 20px 0;
    }
    
    .logo-image {
        height: 25px;
        max-width: 70px;
    }
}

/* Contact Page Responsive */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-info-card, .contact-form-card {
        padding: 25px;
    }
    
    .contact-content h1 {
        font-size: 2.5rem;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .response-timeline {
        gap: 20px;
    }
    
    .timeline-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .checkbox-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .game-card {
        min-width: 0;
    }
    
    .hero {
        padding: 30px 15px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .game-meta {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .game-image {
        height: 150px;
    }
    
    .game-info {
        padding: 20px;
    }
    
    .play-button {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Navigation styles for game pages */
.nav-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px 0;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.home-btn {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d) !important;
    color: #333 !important;
    font-weight: 600 !important;
}

.home-btn:hover {
    background: linear-gradient(45deg, #ff5252, #ffcc02) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

/* Game page specific styles */
.game-page-body {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
}

.game-container {
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#ruffle, #app {
    width: 100%;
    max-width: 800px;
    height: 600px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: #000;
}

@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .game-container {
        height: calc(100vh - 120px);
        padding: 10px;
    }
    
    #ruffle, #app {
        height: 500px;
    }
}

/* BTD 6 specific styles */
.game-loading, .game-launch, .game-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Ensure BTD 6 game is properly contained */
.game-container #app {
    width: 100% !important;
    height: 100% !important;
    max-width: 800px !important;
    max-height: 600px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    background: #000 !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
}

/* Override any fullscreen styles from BTD 6 */
/* Relax canvas constraints to avoid conflicts with renderer sizing */
.game-container #app canvas,
.game-container #app .sc-canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Force BTD 6 to respect container boundaries */
/* Remove global max caps that interfered with internal layout */
.game-container #app * {
    box-sizing: border-box !important;
}

/* Override any absolute positioning that might break out of container */
/* Do not forcibly change internal positioning; let Scratch handle it */
.game-container #app .sc-stage,
.game-container #app .sc-stage * {
    position: initial !important;
}

/* Ensure the scaffolding respects container */
/* Allow scaffolding to fit container naturally */
.game-container #app .scaffolding {
    width: 100% !important;
    height: 100% !important;
}

/* Override any fullscreen or viewport styles */
/* Simplify container overrides */
.game-container #app {
    overflow: hidden !important;
}

/* Force all child elements to respect container */
/* Avoid blanket overflow rules that break internal layout */
.game-container #app * {}

/* Override any position: fixed that might break out of container */
/* Don't rewrite fixed positioning globally */
.game-container #app *[style*="position: fixed"] {}

/* Ensure the game stage is contained */
/* Let stage adopt container size without extra caps */
.game-container #app .sc-stage {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Control the game's internal scaling */
/* Canvas follows container size; renderer controls scaling */
.game-container #app .sc-stage canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Ensure the game container properly constrains BTD 6 */
.game-container {
    position: relative;
    overflow: hidden;
}

.loading-content, .launch-content, .error-content {
    text-align: center;
    color: white;
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 400px;
}

.loading-content h2, .launch-content h2, .error-content h2 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 600;
}

.loading-content p, .launch-content p, .error-content p {
    margin-bottom: 20px;
    opacity: 0.9;
}

.progress-bar-outer {
    border: 2px solid rgba(255, 255, 255, 0.3);
    height: 20px;
    width: 100%;
    border-radius: 10px;
    margin: 20px 0;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    width: 0%;
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    transition: width 0.3s ease;
    border-radius: 8px;
}

.launch-btn {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    color: #333;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
}

.launch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
    background: linear-gradient(45deg, #ff5252, #ffcc02);
}

.play-icon {
    font-size: 1.2rem;
}

.retry-btn {
    background: linear-gradient(45deg, #4ecdc4, #45b7d1);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
}

#app {
    display: none;
}

/* Fullscreen Zoom Icon */
.game-container {
    position: relative;
}

/* removed: fullscreen pseudo-class sizing and overrides */

/* (removed) fullscreen zoom icon styles */

/* removed: fullscreen overlay and overlay button styles */

/* removed: mobile back button styles */

/* removed: persistent bottom bar styles */

/* BTD fullscreen strip (shared) */
.btd1-page .btd1-fullscreen-strip,
.btd2-page .btd1-fullscreen-strip,
.btd3-page .btd1-fullscreen-strip,
.btd4-page .btd1-fullscreen-strip,
.btd5-page .btd1-fullscreen-strip,
.btd6-page .btd1-fullscreen-strip {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
}

.btd1-page .btd1-strip-content,
.btd2-page .btd1-strip-content,
.btd3-page .btd1-strip-content,
.btd4-page .btd1-strip-content,
.btd5-page .btd1-strip-content,
.btd6-page .btd1-strip-content {
    width: 100%;
    max-width: 800px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.btd1-page .btd1-game-title,
.btd2-page .btd1-game-title,
.btd3-page .btd1-game-title,
.btd4-page .btd1-game-title,
.btd5-page .btd1-game-title,
.btd6-page .btd1-game-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.btd1-page .btd1-fullscreen-btn,
.btd2-page .btd1-fullscreen-btn,
.btd3-page .btd1-fullscreen-btn,
.btd4-page .btd1-fullscreen-btn,
.btd5-page .btd1-fullscreen-btn,
.btd6-page .btd1-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(45deg, #4ecdc4, #45b7d1);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btd1-page .btd1-fullscreen-btn:hover,
.btd2-page .btd1-fullscreen-btn:hover,
.btd3-page .btd1-fullscreen-btn:hover,
.btd4-page .btd1-fullscreen-btn:hover,
.btd5-page .btd1-fullscreen-btn:hover,
.btd6-page .btd1-fullscreen-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(69, 183, 209, 0.35);
}

.btd1-page .btd1-fullscreen-btn[aria-pressed="true"],
.btd2-page .btd1-fullscreen-btn[aria-pressed="true"],
.btd3-page .btd1-fullscreen-btn[aria-pressed="true"],
.btd4-page .btd1-fullscreen-btn[aria-pressed="true"],
.btd5-page .btd1-fullscreen-btn[aria-pressed="true"],
.btd6-page .btd1-fullscreen-btn[aria-pressed="true"] {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    color: #333;
}

.btd1-page .btd1-fullscreen-icon,
.btd2-page .btd1-fullscreen-icon,
.btd3-page .btd1-fullscreen-icon,
.btd4-page .btd1-fullscreen-icon,
.btd5-page .btd1-fullscreen-icon,
.btd6-page .btd1-fullscreen-icon {
    display: inline-flex;
}

@media (max-width: 860px) {
    .btd1-page .btd1-strip-content,
    .btd2-page .btd1-strip-content,
    .btd3-page .btd1-strip-content,
    .btd4-page .btd1-strip-content,
    .btd5-page .btd1-strip-content,
    .btd6-page .btd1-strip-content {
        max-width: 100%;
        margin: 0 12px;
    }
}

/* BTD1: ensure true fullscreen scaling */
.btd1-page .game-container:fullscreen,
.btd2-page .game-container:fullscreen,
.btd3-page .game-container:fullscreen,
.btd4-page .game-container:fullscreen,
.btd5-page .game-container:fullscreen,
.btd6-page .game-container:fullscreen,
.btd1-page .game-container:-webkit-full-screen,
.btd2-page .game-container:-webkit-full-screen,
.btd3-page .game-container:-webkit-full-screen,
.btd4-page .game-container:-webkit-full-screen,
.btd5-page .game-container:-webkit-full-screen,
.btd6-page .game-container:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btd1-page .game-container:fullscreen #ruffle,
.btd2-page .game-container:fullscreen #ruffle,
.btd3-page .game-container:fullscreen #ruffle,
.btd4-page .game-container:fullscreen #ruffle,
.btd5-page .game-container:fullscreen #ruffle,
.btd6-page .game-container:fullscreen #ruffle,
.btd1-page .game-container:-webkit-full-screen #ruffle,
.btd2-page .game-container:-webkit-full-screen #ruffle,
.btd3-page .game-container:-webkit-full-screen #ruffle,
.btd4-page .game-container:-webkit-full-screen #ruffle,
.btd5-page .game-container:-webkit-full-screen #ruffle,
.btd6-page .game-container:-webkit-full-screen #ruffle {
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
}

/* Remove gap between game and strip on BTD pages */
.btd1-page .game-container,
.btd2-page .game-container,
.btd3-page .game-container,
.btd4-page .game-container,
.btd5-page .game-container,
.btd6-page .game-container {
    padding-bottom: 0;
    height: auto;
    align-items: flex-start;
}

.btd1-page .game-container:fullscreen #player,
.btd2-page .game-container:fullscreen #player,
.btd3-page .game-container:fullscreen #player,
.btd4-page .game-container:fullscreen #player,
.btd5-page .game-container:fullscreen #player,
.btd6-page .game-container:fullscreen #player,
.btd1-page .game-container:-webkit-full-screen #player,
.btd2-page .game-container:-webkit-full-screen #player,
.btd3-page .game-container:-webkit-full-screen #player,
.btd4-page .game-container:-webkit-full-screen #player,
.btd5-page .game-container:-webkit-full-screen #player,
.btd6-page .game-container:-webkit-full-screen #player {
    width: 100% !important;
    height: 100% !important;
}

/* BTD6: remove fixed frame caps only in fullscreen */
.btd6-page .game-container:fullscreen .game-frame,
.btd6-page .game-container:-webkit-full-screen .game-frame {
    max-width: none !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.btd6-page .game-container:fullscreen #app,
.btd6-page .game-container:-webkit-full-screen #app {
    max-width: none !important;
    max-height: none !important;
}

/* BTD6: ensure all internal nodes expand in fullscreen */
.btd6-page .game-container:fullscreen #app .scaffolding,
.btd6-page .game-container:fullscreen #app .sc-stage,
.btd6-page .game-container:fullscreen #app .sc-stage *,
.btd6-page .game-container:fullscreen #app canvas,
.btd6-page .game-container:fullscreen #app .sc-canvas,
.btd6-page .game-container:-webkit-full-screen #app .scaffolding,
.btd6-page .game-container:-webkit-full-screen #app .sc-stage,
.btd6-page .game-container:-webkit-full-screen #app .sc-stage *,
.btd6-page .game-container:-webkit-full-screen #app canvas,
.btd6-page .game-container:-webkit-full-screen #app .sc-canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    object-fit: contain !important;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

.breadcrumb-item {
    color: #9b59b6;
    text-decoration: none;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(155, 89, 182, 0.5);
}

.breadcrumb-item:hover {
    color: #e74c3c;
    text-shadow: 0 0 12px rgba(231, 76, 60, 0.7);
    transform: translateY(-1px);
}

.breadcrumb-separator {
    color: #9b59b6;
    margin: 0 8px;
    text-shadow: 0 0 8px rgba(155, 89, 182, 0.5);
}

.breadcrumb-current {
    color: #9b59b6;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(155, 89, 182, 0.5);
}

/* Related Games Section */
.related-games-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.related-games-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="stars" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23stars)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.related-games-section .container {
    position: relative;
    z-index: 1;
}

.related-games-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    font-family: 'Fredoka One', cursive;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.related-games-grid {
    display: flex;
    overflow-x: auto;
    gap: 25px;
    padding: 20px 0 30px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.related-games-grid .game-card {
    flex: 0 0 auto;
    width: 240px;
    scroll-snap-align: start;
    background: linear-gradient(145deg, #2c2c4a 0%, #1e1e3a 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    border: 2px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.related-games-grid .game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(255, 217, 61, 0.1), rgba(107, 207, 127, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.related-games-grid .game-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

.related-games-grid .game-card:hover::before {
    opacity: 1;
}

.related-games-grid .game-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
    border-radius: 15px 15px 0 0;
}

.related-games-grid .game-card:hover img {
    transform: scale(1.05);
}

.related-games-grid .game-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    padding: 15px 10px;
    text-align: center;
    color: white;
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Custom scrollbar for webkit browsers */
.related-games-grid::-webkit-scrollbar {
    height: 8px;
}

.related-games-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin: 0 20px;
}

.related-games-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff6b6b, #ffd93d);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.related-games-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ff5252, #ffcc02);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .related-games-section {
        padding: 40px 0;
    }

    .related-games-section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .related-games-grid {
        padding: 15px 20px 25px;
        gap: 20px;
    }

    .related-games-grid .game-card {
        width: 200px;
    }

    .related-games-grid .game-card img {
        height: 130px;
    }

    .related-games-grid .game-card h3 {
        font-size: 1.1rem;
        padding: 12px 8px;
    }
}

@media (max-width: 480px) {
    .related-games-section h2 {
        font-size: 1.8rem;
    }

    .related-games-grid .game-card {
        width: 180px;
    }

    .related-games-grid .game-card img {
        height: 110px;
    }

    .related-games-grid .game-card h3 {
        font-size: 1rem;
        padding: 10px 6px;
    }
}