/* ============================================================
   AVTOMAKTAB PREMIUM - RESPONSIVE DESIGN
   Mobile-First Responsive System
   ============================================================ */

/* ===== MOBILE SMALL (320px) ===== */
@media (max-width: 320px) {
    .app-header {
        padding: 8px 10px;
    }
    
    .header-logo {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .header-brand-name {
        font-size: 14px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .menu-tile {
        padding: 12px 6px;
    }
    
    .menu-tile-icon {
        font-size: 22px;
    }
    
    .menu-tile-label {
        font-size: 8px;
    }
    
    .game-grid {
        grid-template-columns: 1fr;
    }
    
    .tariff-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .user-card {
        padding: 14px;
    }
    
    .user-avatar {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ===== MOBILE MEDIUM (375px) ===== */
@media (max-width: 375px) {
    .app-main {
        padding: 8px;
    }
    
    .card {
        padding: 12px;
    }
    
    .btn {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* ===== MOBILE LARGE (414px) ===== */
@media (max-width: 414px) {
    .bottom-nav {
        padding: 6px 2px 10px;
    }
    
    .nav-item {
        padding: 4px 8px;
        min-width: 48px;
    }
    
    .nav-icon-wrapper {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* ===== TABLET (768px) ===== */
@media (min-width: 768px) {
    .app-container {
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
    }
    
    .app-main {
        padding: 20px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    
    .game-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== DESKTOP (1024px) ===== */
@media (min-width: 1024px) {
    .app-container {
        max-width: 500px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== DARK MODE PREFERENCE ===== */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-primary: #0a0b14;
        --text-primary: #f8fafc;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .bg-orb,
    .bg-grid {
        animation: none !important;
    }
}

/* ===== HIGH CONTRAST ===== */
@media (prefers-contrast: high) {
    .card {
        border-width: 2px;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* ===== PRINT ===== */
@media print {
    .bg-layer,
    .bottom-nav,
    .app-header,
    .confetti-container,
    .toast-container {
        display: none !important;
    }
    
    .app-container {
        max-width: 100%;
        box-shadow: none;
    }
    
    body {
        background: #fff;
        color: #000;
    }
}