/* ==================== EXTRA SMALL SCREENS (≤380px) ==================== */
@media (max-width: 380px) {
    .container {
        padding: 4px;
    }
    
    .card {
        padding: 12px 8px;
    }
    
    .header {
        padding: 8px 10px;
        margin-bottom: 6px;
    }
    
    .header h1 {
        font-size: 1.1rem;
    }
    
    .tab {
        padding: 6px 8px;
        font-size: 0.72rem;
    }
    
    .tabs {
        margin-bottom: 6px;
        padding: 3px;
        gap: 2px;
    }
    
    .category-grid {
        grid-template-columns: 1fr;
    }
    
    /* Quiz card: header/tabs hidden, nearly full viewport */
    #quiz-area.card,
    #exam-area.card,
    #challenge-game.card {
        max-height: calc(var(--app-height, 100vh) - 12px);
        padding: 6px 6px 0;
    }
    
    .quiz-header {
        padding: 4px 6px;
        margin-bottom: 3px;
    }
    
    .quiz-progress {
        font-size: 0.75rem;
        padding: 2px 6px;
    }
    
    .quiz-score .correct,
    .quiz-score .wrong {
        padding: 2px 5px;
        font-size: 0.72rem;
    }
    
    .progress-bar {
        height: 2px;
        margin-bottom: 3px;
    }
    
    .question-text {
        font-size: 0.82rem;
        padding: 6px 8px;
        margin-bottom: 3px;
        line-height: 1.55;
    }
    
    .options-container {
        gap: 4px;
        margin-top: 3px;
    }
    
    .option {
        padding: 7px 8px;
        min-height: 32px;
        gap: 5px;
    }
    
    .option-select-btn {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }
    
    .option .text {
        font-size: 0.8rem;
    }
    
    .quiz-actions .btn {
        font-size: 0.8rem;
        padding: 7px 10px;
        min-height: 34px;
    }
    
    .feedback {
        padding: 6px 8px;
        margin-top: 4px;
    }
    
    .feedback.correct p,
    .feedback.wrong p {
        font-size: 0.8rem;
    }
    
    .auth-container {
        padding: 20px 14px;
    }
    
    .auth-header h1 {
        font-size: 1.4rem;
    }
    
    .question-nav-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 10px;
    }
    
    .q-nav-btn {
        font-size: 0.75rem;
    }
    
    .exam-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .kw-stats-bar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .room-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== TABLET (769px - 1024px) ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 20px;
        max-width: 100%;
    }
    
    /* Header stays row but tighter */
    .header {
        padding: 16px 20px;
    }
    
    .header h1 {
        font-size: 1.5rem;
    }
    
    /* Tabs: 2 rows max, smaller padding */
    .tabs {
        gap: 8px;
        padding: 8px;
    }
    
    .tab {
        padding: 10px 16px;
        font-size: 0.88rem;
    }
    
    /* Category grid: 3 columns on tablet */
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Quiz area */
    .quiz-header {
        padding: 14px 16px;
    }
    
    .question-text {
        font-size: 1.1rem;
        padding: 22px;
        line-height: 1.8;
    }
    
    .option {
        padding: 16px 20px;
    }
    
    .option .text {
        font-size: 1.05rem;
    }
    
    /* Card */
    .card {
        padding: 24px;
    }
    
    /* Results */
    .results-summary {
        gap: 32px;
    }
    
    /* Stats grid: 3 columns */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Streak/Goal */
    .streak-goal-container {
        grid-template-columns: 1fr 2fr;
    }
    
    /* Flashcard */
    .flashcard {
        max-width: 450px;
        height: 280px;
    }
    
    /* Exam size selector */
    .exam-size-selector {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Challenge */
    .challenge-actions-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .challenge-mode-selector {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Auth */
    .auth-container {
        max-width: 440px;
    }
    
    /* KW stats */
    .kw-stats-bar {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==================== TABLET PORTRAIT (769px - 1024px, portrait) ==================== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    /* Tabs scroll on portrait tablet too */
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .tabs::-webkit-scrollbar {
        display: none;
    }
    
    .tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Category grid: 2 columns in portrait */
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

/* ==================== SMALL LAPTOP / LARGE TABLET (1025px - 1200px) ==================== */
@media (min-width: 1025px) and (max-width: 1200px) {
    .container {
        max-width: 920px;
    }
    
    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    }
}

/* ==================== LANDSCAPE MOBILE (short height) ==================== */
@media (max-height: 500px) and (orientation: landscape) {
    .auth-screen {
        padding: 12px;
        align-items: flex-start;
    }
    
    .auth-container {
        padding: 20px;
    }
    
    .flashcard {
        height: 160px;
    }
    
    /* Hide header and tabs in landscape quiz to maximize space */
    .header {
        padding: 6px 10px;
        margin-bottom: 4px;
    }
    
    .header h1 {
        font-size: 1rem;
    }
    
    .tabs {
        margin-bottom: 4px;
        padding: 3px;
    }
    
    .tab {
        padding: 5px 8px;
        font-size: 0.72rem;
    }
    
    .container {
        padding: 4px;
    }
    
    .card {
        padding: 8px;
    }
    
    /* Quiz viewport fit for landscape - header/tabs hidden */
    #quiz-area.card,
    #exam-area.card,
    #challenge-game.card {
        display: flex;
        flex-direction: column;
        max-height: calc(var(--app-height, 100vh) - 12px);
        padding: 4px 6px 0;
        overflow: hidden;
    }
    
    .quiz-header {
        padding: 4px 6px;
        margin-bottom: 2px;
    }
    
    .progress-bar {
        height: 2px;
        margin-bottom: 2px;
    }
    
    .question-container {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        margin-bottom: 0;
    }
    
    .question-text {
        padding: 6px 8px;
        font-size: 0.82rem;
        margin-bottom: 3px;
        line-height: 1.5;
    }
    
    .options-container {
        gap: 3px;
        margin-top: 3px;
    }
    
    .option {
        padding: 6px 8px;
        min-height: 30px;
        gap: 5px;
    }
    
    .option-select-btn {
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }
    
    .option .text {
        font-size: 0.78rem;
    }
    
    .quiz-actions {
        flex-shrink: 0;
        padding: 4px 6px;
        margin: 0 -6px;
        border-top: 1px solid var(--border);
    }
    
    .quiz-actions .btn {
        flex: 1;
        padding: 5px 8px;
        font-size: 0.78rem;
        min-height: 30px;
    }
    
    .feedback {
        padding: 4px 6px;
        margin-bottom: 2px;
    }
    
    .feedback.correct p,
    .feedback.wrong p {
        font-size: 0.78rem;
    }
}

/* ==================== LANDSCAPE TABLET ==================== */
@media (min-height: 501px) and (max-height: 800px) and (orientation: landscape) and (min-width: 769px) {
    .container {
        padding: 16px;
    }
    
    .header {
        padding: 12px 16px;
        margin-bottom: 16px;
    }
    
    .tabs {
        margin-bottom: 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .tabs::-webkit-scrollbar {
        display: none;
    }
    
    .tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 10px 16px;
    }
    
    .card {
        padding: 20px;
    }
    
    .question-text {
        padding: 18px;
        margin-bottom: 16px;
    }
    
    .quiz-header {
        padding: 10px 14px;
        margin-bottom: 12px;
    }
    
    .progress-bar {
        margin-bottom: 12px;
    }
    
    .flashcard {
        height: 220px;
    }
}