/* ========================================
   RESPONSIVE.CSS - Mobile & Tablet Styles
   ======================================== */

/* ----- Tablets (768px - 1024px) ----- */
@media (max-width: 1024px) {
    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    /* Games */
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    
    /* Tasks */
    .tasks-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    /* Premium Plans */
    .premium-plans {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----- Mobile Landscape (480px - 768px) ----- */
@media (max-width: 768px) {
    /* ===== Global ===== */
    .container {
        padding: 0 16px;
    }
    
    /* ===== Sidebar ===== */
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    .sidebar-toggle {
        display: block !important;
    }
    
    .main-content {
        margin-left: 0;
        padding: 16px;
    }
    
    /* ===== Top Bar ===== */
    .topbar {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .topbar-left h1 {
        font-size: 18px;
    }
    
    .topbar-right {
        width: 100%;
        justify-content: flex-end;
    }
    
    /* ===== Stats ===== */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stat-card {
        padding: 14px 16px;
    }
    
    .stat-card .stat-value {
        font-size: 18px;
    }
    
    /* ===== Cards ===== */
    .card {
        padding: 16px 18px;
    }
    
    /* ===== Games ===== */
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 14px;
    }
    
    .game-card .game-thumbnail {
        height: 120px;
    }
    
    .game-card .game-thumbnail .game-icon {
        font-size: 40px;
    }
    
    .games-hub-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* ===== Game Play ===== */
    .game-area {
        padding: 20px 16px;
        min-height: 300px;
    }
    
    .quiz-question .options {
        grid-template-columns: 1fr;
    }
    
    .game-play-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* ===== Tasks ===== */
    .tasks-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    
    .task-card {
        padding: 16px;
    }
    
    .tasks-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .task-filters {
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
    
    .task-filters .filter-btn {
        padding: 6px 14px;
        font-size: 12px;
        white-space: nowrap;
    }
    
    /* ===== Social Feed ===== */
    .post-card {
        padding: 14px 16px;
    }
    
    .post-content .post-text {
        font-size: 14px;
    }
    
    .post-actions {
        gap: 12px;
    }
    
    .post-actions .action-btn {
        font-size: 13px;
        padding: 2px 6px;
    }
    
    .feed-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .feed-tabs .tab-btn {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    /* ===== Profile ===== */
    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        padding: 20px;
    }
    
    .profile-header .profile-info {
        text-align: center;
    }
    
    .profile-header .profile-stats {
        gap: 16px;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .profile-header .profile-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .profile-tabs .tab-btn {
        font-size: 13px;
        padding: 8px 12px;
    }
    
    /* ===== Wallet ===== */
    .balance-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .balance-card .balance-actions {
        width: 100%;
        justify-content: center;
    }
    
    .transaction-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .transaction-item .tx-amount {
        align-self: flex-start;
    }
    
    .redeem-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    /* ===== Premium ===== */
    .premium-plans {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 16px auto 32px;
    }
    
    .plan-card {
        padding: 20px 16px;
    }
    
    .plan-card .plan-price {
        font-size: 28px;
    }
    
    .premium-header h1 {
        font-size: 24px;
    }
    
    /* ===== Referral ===== */
    .referral-code-box .code-value {
        font-size: 24px;
        letter-spacing: 2px;
        padding: 6px 16px;
    }
    
    .referral-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .referral-tiers {
        grid-template-columns: 1fr 1fr;
    }
    
    .current-plan {
        flex-direction: column;
        text-align: center;
    }
    
    /* ===== Admin ===== */
    .admin-sidebar {
        transform: translateX(-100%);
        width: 280px;
    }
    
    .admin-sidebar.open {
        transform: translateX(0);
    }
    
    .admin-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99;
    }
    
    .admin-sidebar-overlay.active {
        display: block;
    }
    
    .admin-sidebar-toggle {
        display: block !important;
    }
    
    .admin-main {
        margin-left: 0;
        padding: 16px;
    }
    
    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .admin-table-wrapper {
        overflow-x: auto;
    }
    
    .admin-table {
        min-width: 600px;
    }
    
    .admin-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .admin-toolbar .search-box input {
        width: 100%;
    }
    
    /* ===== Modals ===== */
    .modal {
        padding: 24px;
        margin: 16px;
    }
    
    /* ===== Daily Challenge Banner ===== */
    .daily-challenge-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .daily-challenge-banner .challenge-info {
        flex-direction: column;
    }
}

/* ----- Mobile Portrait (below 480px) ----- */
@media (max-width: 480px) {
    /* ===== Stats ===== */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* ===== Games ===== */
    .games-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .game-card .game-body {
        padding: 12px 14px 14px;
    }
    
    .game-card .game-body .game-title {
        font-size: 14px;
    }
    
    .game-card .game-body .game-desc {
        font-size: 12px;
        -webkit-line-clamp: 1;
    }
    
    .game-card .game-body .game-meta .game-stats {
        font-size: 11px;
        gap: 8px;
    }
    
    /* ===== Profile ===== */
    .profile-header .profile-avatar-large {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }
    
    .profile-header .profile-info .profile-name {
        font-size: 20px;
    }
    
    .profile-header .profile-stats .stat-item .stat-number {
        font-size: 16px;
    }
    
    .badges-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    /* ===== Wallet ===== */
    .balance-card .balance-info .balance-amount {
        font-size: 28px;
    }
    
    .redeem-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    /* ===== Referral ===== */
    .referral-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .referral-tiers {
        grid-template-columns: 1fr;
    }
    
    .referral-link-box {
        flex-direction: column;
    }
    
    .referral-link-box .link-input {
        width: 100%;
        text-align: center;
    }
    
    /* ===== Post ===== */
    .post-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .post-actions .action-btn {
        flex: 1;
        justify-content: center;
        padding: 6px 4px;
        font-size: 12px;
    }
    
    .create-post-form .form-actions {
        flex-direction: column;
    }
    
    /* ===== Admin ===== */
    .admin-stats {
        grid-template-columns: 1fr;
    }
    
    .admin-login-card {
        padding: 32px 20px;
    }
    
    /* ===== Game Results ===== */
    .game-results .result-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    /* ===== Quick Actions ===== */
    .quick-actions {
        grid-template-columns: 1fr;
    }
    
    /* ===== Premium Plans ===== */
    .plan-card .plan-features li {
        font-size: 13px;
    }
}

/* ----- Small Mobile (below 360px) ----- */
@media (max-width: 360px) {
    .games-grid {
        grid-template-columns: 1fr;
    }
    
    .redeem-grid {
        grid-template-columns: 1fr;
    }
    
    .referral-stats {
        grid-template-columns: 1fr;
    }
    
    .badges-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    
    .stat-card .stat-value {
        font-size: 16px;
    }
}

/* ----- Print Styles ----- */
@media print {
    .sidebar,
    .topbar,
    .no-print {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding: 20px !important;
    }
    
    body {
        background: #fff !important;
        color: #000 !important;
    }
    
    .card,
    .stat-card,
    .post-card {
        border: 1px solid #ddd !important;
        background: #fff !important;
        color: #000 !important;
    }
}