/* ==================== MOBILE NO SCROLL FIX ==================== */
/* Tối ưu giao diện mobile để vừa khít màn hình, không cần scroll */

@media (max-width: 768px) {
    /* Fix body và html - CHỈ cho các trang game cụ thể */
    body.game-page {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile */
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    /* Container chính - Cho phép scroll bình thường */
    .container {
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 60px 10px 70px !important;
    }
    
    /* Pet Home Section - Optimized for mobile */
    .pet-home-section {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0 !important;
    }
    
    /* Pet Home Stats Header - Sticky top */
    .pet-home-stats-header {
        position: sticky;
        top: 0;
        padding: 8px 10px !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 10;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    /* Pet Home Scene - Allow natural scroll */
    .pet-home-scene {
        min-height: auto !important;
        padding: 15px 10px 10px !important;
        overflow: visible !important;
    }
    
    /* House container */
    .house {
        padding: 10px !important;
        margin-bottom: 10px;
    }
    
    /* Pet display - Compact */
    .pet-home-display {
        padding: 10px !important;
        margin-bottom: 10px;
    }
    
    .pet-home-emoji {
        font-size: 3.5rem !important;
        margin: 5px 0 !important;
    }
    
    .pet-home-name {
        font-size: 1.1rem !important;
        margin: 5px 0 !important;
    }
    
    .pet-evolution-badge {
        font-size: 0.8rem !important;
        padding: 4px 10px !important;
    }
    
    /* Stats container - Compact */
    .stats-container {
        gap: 8px !important;
        padding: 8px !important;
        margin-bottom: 10px;
    }
    
    .stat-bar-home {
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .stat-label-home {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        min-width: 85px !important;
        white-space: nowrap !important;
    }
    
    .stat-bar-bg-home {
        flex: 1 !important;
        height: 14px !important;
    }
    
    .stat-bar-bg-home {
        height: 18px !important;
    }
    
    /* Action buttons - Compact */
    .home-actions-container {
        gap: 8px !important;
        padding: 8px !important;
        margin-bottom: 10px;
    }
    
    .home-action-btn {
        padding: 10px 6px !important;
        min-height: 70px !important;
    }
    
    .home-action-icon {
        font-size: 1.6rem !important;
        margin-bottom: 4px !important;
    }
    
    .home-action-name {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important;
    }
    
    .home-action-cost {
        font-size: 0.7rem !important;
    }
    
    /* Bottom actions - Now inside house, no sticky */
    .bottom-actions {
        position: relative;
        padding: 0 !important;
        gap: 6px !important;
        margin-top: 8px !important;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        z-index: 3;
    }
    
    .bottom-actions.extra-actions {
        margin-top: -50px !important;
        background: transparent !important;
    }
    
    .action-btn {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
        min-height: 38px !important;
    }
    
    .bottom-actions .action-btn {
        padding: 6px 10px !important;
        min-height: 32px !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }
    
    /* Decorations - Smaller */
    .decoration {
        font-size: 1.5rem !important;
    }
    
    .celestial {
        font-size: 2rem !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    .cloud {
        font-size: 1.5rem !important;
    }
    
    .ground {
        font-size: 1.2rem !important;
        padding: 8px !important;
    }
    
    /* Quests button - Góc trái trong house */
    .quests-button {
        top: 8px !important;
        bottom: auto !important;
        left: 8px !important;
        right: auto !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
    }
    
    /* ==================== TOAN GAME ==================== */
    .game-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        padding: 10px !important;
        margin-bottom: 10px !important;
    }
    
    .game-header h1 {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }
    
    .stats {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .game-area {
        padding: 10px !important;
    }
    
    .question-display {
        font-size: 1.8rem !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .answers {
        gap: 10px !important;
    }
    
    .answer-btn {
        font-size: 1.2rem !important;
        padding: 15px !important;
        min-height: 55px !important;
    }
    
    /* ==================== TIENG VIET GAME ==================== */
    .app-container {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
    }
    
    .page {
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .home-content {
        padding: 70px 15px 80px !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .app-title {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }
    
    .game-modes {
        gap: 12px !important;
    }
    
    .mode-card {
        padding: 15px !important;
    }
    
    /* ==================== TIENG ANH GAME ==================== */
    .header-content h1 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }
    
    .score-board {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .game-selection {
        gap: 12px !important;
    }
    
    .game-card {
        padding: 15px !important;
    }
    
    /* ==================== DASHBOARD ==================== */
    /* Dashboard CSS đã được xử lý trong common-mobile-fix.css và dashboard.css */
    /* Chỉ thêm CSS đặc biệt cho no-scroll nếu cần */
    .dashboard-container {
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    
    /* ==================== MODALS ==================== */
    .modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-content {
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        margin: 5vh auto !important;
    }
    
    .quiz-container {
        padding: 12px !important;
    }
    
    .question {
        font-size: 1.1rem !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .answers {
        gap: 8px !important;
    }
    
    .answer-btn {
        font-size: 0.95rem !important;
        padding: 12px !important;
        min-height: 48px !important;
    }
    
    /* Quests Modal */
    .quests-modal {
        overflow-y: auto !important;
    }
    
    .quests-content {
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        margin: 5vh auto;
    }
    
    /* Shop Modal */
    .shop-modal {
        overflow-y: auto !important;
    }
    
    .shop-content {
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        margin: 5vh auto;
    }
    
    /* Achievements Modal */
    .achievements-modal {
        overflow-y: auto !important;
    }
    
    .achievements-content {
        max-height: 90vh !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        margin: 5vh auto;
    }
}

/* ==================== SMALL MOBILE ==================== */
@media (max-width: 480px) {
    .pet-home-emoji {
        font-size: 3rem !important;
    }
    
    .home-action-btn {
        padding: 8px 4px !important;
        min-height: 65px !important;
    }
    
    .home-action-icon {
        font-size: 1.4rem !important;
    }
    
    .home-action-name {
        font-size: 0.75rem !important;
    }
    
    .home-action-cost {
        font-size: 0.65rem !important;
    }
    
    .action-btn {
        font-size: 0.8rem !important;
        padding: 8px 10px !important;
    }
}

/* ==================== LANDSCAPE MODE ==================== */
@media (max-width: 768px) and (orientation: landscape) {
    .pet-home-scene {
        min-height: 0 !important;
    }
    
    .pet-home-emoji {
        font-size: 2.5rem !important;
    }
    
    .house {
        padding: 8px !important;
    }
    
    .stats-container {
        gap: 6px !important;
        padding: 6px !important;
    }
    
    .home-actions-container {
        gap: 6px !important;
        padding: 6px !important;
    }
    
    .home-action-btn {
        min-height: 60px !important;
    }
}

/* ==================== SAFE AREA INSETS ==================== */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .pet-home-stats-header {
            padding-top: max(10px, env(safe-area-inset-top)) !important;
        }
        
        .bottom-actions {
            padding-bottom: max(8px, calc(8px + env(safe-area-inset-bottom))) !important;
            margin-bottom: max(60px, calc(60px + env(safe-area-inset-bottom))) !important;
        }
    }
}