/* Plants vs Brainrots - Modern Responsive Styles */

/* Large Desktop */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
        padding: 0 2rem;
    }
    
    .hero {
        padding: 10rem 0 8rem;
    }
    
    .hero-container {
        gap: 5rem;
    }
}

/* Desktop */
@media (max-width: 1280px) {
    .hero-container {
        gap: 3rem;
    }
    
    .games-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Tablet Styles */
@media (max-width: 1024px) {
    .hero {
        padding: 6rem 0 4rem;
        min-height: 70vh;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
    }
    
    .games-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .adventures-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .adventure-card {
        min-height: 250px;
    }
    
    .adventure-content {
        padding: 1.5rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .tips-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .section {
        padding: 4rem 0;
    }
    
    .section-lg {
        padding: 5rem 0;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    body {
        padding-top: 120px; /* Increase space for mobile navbar which wraps */
    }
    
    .container {
        padding: 0 1rem;
    }
    
    .navbar {
        padding: 1rem 0;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .nav-brand .logo {
        height: 36px;
    }
    
    .nav-brand h1,
    .nav-brand .brand-name {
        font-size: 1.5rem;
    }
    
    .nav-links {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    
    .nav-links a {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    .hero {
        padding: 4rem 0 3rem;
        min-height: 60vh;
    }
    
    .hero-container {
        gap: 2rem;
    }
    
    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 2.8rem);
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        margin-bottom: 1.5rem;
    }
    
    .hero-description {
        font-size: 1rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .hero-buttons {
        justify-content: center;
        gap: 0.75rem;
    }
    
    .btn {
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
        font-weight: 700;
        min-height: 48px;
        letter-spacing: 0.025em;
    }
    
    .video-container {
        max-width: 100%;
        border-radius: var(--radius-xl);
    }
    
    .hero-preview-image {
        max-width: 320px;
        border-radius: var(--radius-xl);
    }
    
    .game-image {
        height: 200px;
        padding: 0.75rem;
    }
    
    .game-content {
        padding: 1.25rem;
    }
    
    .game-actions {
        padding: 0 1.25rem 1.25rem;
    }
    
    .section,
    .section-sm {
        padding: 3rem 0;
    }
    
    .section-lg {
        padding: 4rem 0;
    }
    
    .game-section,
    .similar-games,
    .special-adventures,
    .game-intro,
    .code-guide,
    .working-codes,
    .how-to-play,
    .key-features,
    .pro-tips,
    .game-details,
    .faq {
        padding: 3rem 0;
    }
    
    .game-section h2,
    .similar-games h2,
    .special-adventures h2,
    .game-intro h2,
    .code-guide h2,
    .working-codes h2,
    .how-to-play h2,
    .key-features h2,
    .pro-tips h2,
    .game-details h2,
    .faq h2 {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
        margin-bottom: 2rem;
    }
    
    .code-step {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    
    .code-step:nth-child(even) {
        grid-template-columns: 1fr;
    }
    
    .code-step:nth-child(even) .step-content,
    .code-step:nth-child(even) .step-image-container {
        order: 0;
    }
    
    .step-content {
        flex-direction: column;
        text-align: center;
    }
    
    .codes-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .games-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .adventures-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .adventure-card {
        min-height: 220px;
    }
    
    .adventure-content {
        padding: 1.25rem;
    }
    
    .adventure-content h3 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .adventure-content p {
        font-size: 0.9rem;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .step {
        padding: 1.5rem;
    }
    
    .feature {
        padding: 1.5rem;
    }
    
    .tip {
        padding: 1.5rem;
    }
    
    .adventure-card {
        min-height: 250px;
    }
    
    .adventure-content {
        padding: 1.5rem;
    }
    
    .step-image {
        width: 100px;
        height: 70px;
    }
    
    .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .faq-item {
        padding: 1.5rem;
    }
    
    .table-container {
        font-size: 0.9rem;
    }
    
    .details-table th,
    .details-table td {
        padding: 0.8rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .footer-links {
        gap: 1rem;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    body {
        padding-top: 140px; /* Extra space for very small screens */
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 0.95rem;
    }
    
    .btn {
        padding: 0.9rem 1.2rem;
        font-size: 1rem;
        font-weight: 700;
        min-height: 44px;
        letter-spacing: 0.025em;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .game-section h2,
    .similar-games h2,
    .special-adventures h2,
    .game-intro h2,
    .how-to-play h2,
    .key-features h2,
    .pro-tips h2,
    .game-details h2,
    .faq h2 {
        font-size: 1.8rem;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    .step-image {
        width: 80px;
        height: 60px;
    }
    
    .adventure-card {
        min-height: 200px;
    }
    
    .game-embed iframe {
        height: 300px;
    }
    
    .table-container {
        font-size: 0.8rem;
    }
    
    .details-table th,
    .details-table td {
        padding: 0.6rem;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 1.5rem 0;
    }
    
    .hero-content h1 {
        font-size: 2.2rem;
    }
    
    .video-container {
        max-width: 400px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .game-image {
        background-size: cover;
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .hero-video,
    .game-embed,
    .btn {
        display: none;
    }
    
    .hero {
        background: none;
        color: #333;
    }
    
    .hero-content {
        text-align: left;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    .game-card,
    .feature,
    .tip,
    .faq-item {
        page-break-inside: avoid;
    }
}