/* Mobile AR - Touch-friendly buttons and layout for phones */
@media (max-width: 768px) {
    .menu-btn { font-size: 1rem; padding: 18px 24px; min-height: 52px; }
    .title-glitch { font-size: 1.25rem; }
}

/* Phone-sized screens - larger touch targets (Apple: min 44px) */
@media (max-width: 480px) {
    /* Hub action buttons - full width, easy to tap */
    .hub-actions {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
    .hub-action-btn {
        width: 100%;
        min-height: 56px;
        padding: 18px 24px;
        font-size: 1.05rem;
    }
    .hub-action-icon { font-size: 28px; }
    
    /* Quiz/activity modal - answer buttons */
    .activity-opt-btn {
        min-height: 52px;
        padding: 18px 24px;
        font-size: 1.1rem;
    }
    .activity-options { gap: 16px; }
    
    /* Skip / Close buttons in modals */
    .activity-modal .btn-sm,
    .activity-modal .btn-ghost {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    /* General buttons */
    .btn {
        min-height: 48px;
        padding: 14px 24px;
    }
    .btn-sm { min-height: 44px; padding: 12px 20px; font-size: 0.95rem; }
    
    /* Building/upgrade cards - larger tap areas */
    .building-card,
    .upgrade-card {
        padding: 16px 20px;
        min-height: 56px;
    }
    .building-actions .btn { min-height: 44px; }
    
    /* Menu buttons */
    .menu-btn {
        width: 100%;
        max-width: 320px;
        min-height: 56px;
        padding: 20px 28px;
    }
    
    /* Panel padding for thumb reach */
    .panel-content { padding: 20px; }
    .activity-content { padding: 20px; }
}