/* ============================================================
   Trading Fight — Responsive Styles
   Mobile-first responsive breakpoints
   ============================================================ */

/* ============================================================
   TABLET (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .live-stats-bar {
        gap: 1rem;
    }
    .training-modules {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    .rank-tiers-display {
        gap: 0.4rem;
    }
    .rank-tier {
        min-width: 70px;
        padding: 0.4rem 0.6rem;
    }
}

/* ============================================================
   MOBILE LANDSCAPE / SMALL TABLET (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Header */
    .header {
        padding: 0 1rem;
    }
    .header-nav {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0; right: 0;
        background: rgba(10, 14, 23, 0.98);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        padding: 0.5rem;
        z-index: 999;
    }
    .header-nav.open {
        display: flex;
        animation: slideDown 0.2s ease reverse;
    }
    .nav-btn {
        padding: 0.8rem 1rem;
        font-size: 1rem;
        border-radius: var(--border-radius);
        justify-content: flex-start;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .header-balance {
        display: none;
    }

    .avatar-nickname,
    .avatar-rank {
        display: none;
    }

    /* App content */
    .app-content {
        padding: 1rem;
    }

    /* Live stats */
    .live-stats-bar {
        gap: 0.8rem;
        padding: 0.6rem 0.8rem;
    }
    .stat-label { font-size: 0.65rem; }
    .stat-value { font-size: 0.85rem; }

    /* Lobby */
    .lobby-actions {
        flex-direction: column;
    }
    .lobby-actions .btn {
        width: 100%;
    }
    .games-grid {
        grid-template-columns: 1fr;
    }

    /* Game page */
    .game-header {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .game-player {
        flex-direction: column;
        gap: 0.3rem;
    }
    .game-player-right {
        flex-direction: column;
        text-align: center;
    }
    .game-avatar {
        width: 40px;
        height: 40px;
    }
    .game-chart {
        height: 280px;
    }
    .game-vs .vs-text {
        font-size: 1.2rem;
    }
    .timer-value {
        font-size: 1.1rem;
    }

    .prediction-panel {
        padding: 1rem;
    }

    .game-info-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .info-item {
        flex: 0 0 calc(50% - 0.25rem);
    }

    /* Rankings */
    .rank-tiers-display {
        gap: 0.3rem;
    }
    .rank-tier {
        min-width: 60px;
        padding: 0.4rem;
    }
    .tier-icon { font-size: 1.2rem; }
    .tier-name { font-size: 0.6rem; }

    .leaderboard-table { font-size: 0.85rem; }
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.5rem 0.6rem;
    }

    /* Training */
    .training-modules {
        grid-template-columns: 1fr;
    }

    /* Profile */
    .profile-header-card {
        flex-direction: column;
        text-align: center;
    }
    .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wallet-address {
        font-size: 0.7rem;
    }

    /* Modal */
    .modal-content {
        padding: 1.5rem;
        margin: 0.5rem;
    }
    .radio-group {
        gap: 0.3rem;
    }

    /* Countdown */
    .countdown-number {
        font-size: 5rem;
    }

    /* Matchmaking */
    .matchmaking-content h3 {
        font-size: 1.1rem;
    }
}

/* ============================================================
   MOBILE PORTRAIT (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .header {
        padding: 0 0.8rem;
        height: 56px;
    }
    :root {
        --header-height: 56px;
    }

    .logo .logo-text {
        font-size: 1rem;
    }
    .logo .logo-icon {
        font-size: 1.2rem;
    }

    .app-content {
        padding: 0.6rem;
    }

    /* Lobby */
    .game-card {
        padding: 0.8rem;
    }
    .game-card-pair { font-size: 0.9rem; }

    /* Game */
    .game-chart {
        height: 220px;
    }
    .prediction-input-group {
        max-width: 100%;
    }
    .prediction-helpers .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }

    .game-info-bar {
        padding: 0.5rem;
    }
    .info-label { font-size: 0.6rem; }
    .info-value { font-size: 0.8rem; }

    /* Rankings */
    .rank-tiers-display {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.5rem;
    }
    .rank-tier {
        flex-shrink: 0;
    }

    /* Training */
    .training-card {
        padding: 0.8rem;
    }

    /* Profile stats */
    .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .stat-number { font-size: 1.1rem; }

    /* Modal */
    .modal-content {
        padding: 1.2rem;
        border-radius: var(--border-radius-lg);
    }
    .wallet-btn {
        padding: 0.8rem;
    }

    /* Result */
    .result-title { font-size: 1.5rem; }
    .result-animation { height: 80px; }

    /* Toast */
    .toast-container {
        right: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }

    /* Countdown */
    .countdown-number {
        font-size: 4rem;
    }
    .countdown-text {
        font-size: 1rem;
    }
}

/* ============================================================
   VERY SMALL SCREENS (max-width: 360px)
   ============================================================ */
@media (max-width: 360px) {
    html { font-size: 13px; }

    .live-stats-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .stat-item {
        flex: 0 0 calc(50% - 0.25rem);
    }

    .game-card-players {
        flex-direction: column;
        gap: 0.3rem;
    }
    .game-card-vs { display: none; }
}

/* ============================================================
   LANDSCAPE MOBILE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .game-chart {
        height: 200px;
    }
    .countdown-number {
        font-size: 4rem;
    }
    .game-header {
        padding: 0.5rem;
    }
    .prediction-panel {
        padding: 0.8rem;
    }
}

/* ============================================================
   HOVER MEDIA QUERY (Disable hover effects on touch)
   ============================================================ */
@media (hover: none) {
    .game-card:hover,
    .training-card:hover,
    .rank-tier:hover,
    .btn-primary:hover,
    .btn-accent:hover {
        transform: none;
    }
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .loading-bar-fill {
        width: 100%;
    }
}

/* ============================================================
   PRINT (hide everything non-essential)
   ============================================================ */
@media print {
    .header,
    .loading-screen,
    .modal,
    .toast-container,
    .matchmaking-overlay,
    .countdown-overlay {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
    }
    .app-content {
        margin-top: 0;
    }
}