/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (max 1024px) */
@media (max-width: 1024px) {
    :root {
        --section-gap: 80px;
    }
    
    .container {
        padding: 0 24px;
    }
    
    /* Header */
    .nav-main {
        display: none;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    /* Hero */
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .hero-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-cta-group {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-visual {
        order: -1;
    }
    
    .hero-game-preview {
        max-width: 400px;
    }
    
    /* Dashboard */
    .dashboard-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .dashboard-welcome {
        flex-direction: column;
    }
    
    .dashboard-stats-row {
        justify-content: center;
    }
    
    .dashboard-actions {
        justify-content: center;
    }
    
    /* Games Grid */
    .games-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .games-page-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Game Info */
    .game-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Steps */
    .steps-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .step-card {
        max-width: 400px;
    }
    
    .step-connector {
        transform: rotate(90deg);
        padding: 0;
    }
    
    .connector-line {
        width: 40px;
    }
    
    /* Promos */
    .promos-grid {
        grid-template-columns: 1fr;
    }
    
    .promo-featured {
        grid-column: 1;
        grid-row: 1;
    }
    
    .promo-hero {
        flex-direction: column;
        text-align: center;
        padding: 36px;
    }
    
    .promo-hero-values {
        justify-content: center;
    }
    
    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }
    
    /* About */
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .values-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    
    .footer-brand {
        grid-column: 1 / -1;
    }
    
    /* Reward Grid */
    .reward-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    :root {
        --section-gap: 60px;
    }
    
    .container {
        padding: 0 16px;
    }
    
    /* Hero */
    .hero {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 40px;
    }
    
    .hero-inner {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    
    .hero-moon {
        width: 80px;
        height: 80px;
        top: 10%;
        right: 10%;
    }
    
    .hero-game-preview {
        max-width: 320px;
    }
    
    .slot-reels {
        gap: 4px;
    }
    
    .slot-reel {
        width: 52px;
        height: 60px;
        font-size: 24px;
    }
    
    .hero-scroll-indicator {
        display: none;
    }
    
    /* Games Grid */
    .games-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .games-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Game Info */
    .game-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .game-info-card {
        padding: 16px;
    }
    
    /* Game Description */
    .game-description {
        padding: 20px;
    }
    
    /* Filter Bar */
    .game-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-tags {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    
    .filter-tag {
        flex-shrink: 0;
    }
    
    /* Promos */
    .promos-full-grid {
        grid-template-columns: 1fr;
    }
    
    .promo-hero-values {
        flex-direction: column;
        gap: 16px;
    }
    
    /* CTA */
    .cta-card {
        padding: 40px 24px;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    /* About Values */
    .values-cards {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-desc {
        max-width: 100%;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    /* Legal */
    .legal-document {
        padding: 28px 20px;
    }
    
    /* Modals */
    .modal-overlay {
        padding: 16px;
    }
    
    .modal-content {
        padding: 28px 20px;
    }
    
    .reward-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .reward-day-label {
        font-size: 8px;
    }
    
    .reward-icon {
        font-size: 16px;
    }
    
    .reward-amount {
        font-size: 10px;
    }
    
    /* Toast */
    .toast-container {
        right: 16px;
        left: 16px;
    }
    
    .toast {
        max-width: 100%;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    .games-row {
        grid-template-columns: 1fr;
    }
    
    .games-page-grid {
        grid-template-columns: 1fr;
    }
    
    .featured-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 12px;
    }
    
    .hero-stat-divider {
        display: none;
    }
    
    .hero-cta-group {
        flex-direction: column;
    }
    
    .hero-cta-group .btn {
        width: 100%;
    }
    
    .dashboard-stats-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .reward-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}