/* Мобильные стили для ValGuess */
@media (max-width: 768px) {
    /* Общие стили */
    body {
        font-size: 14px;
    }
    
    /* Хедер */
    .mobile-header {
        padding: 12px 16px !important;
        flex-wrap: wrap;
    }
    
    .mobile-header img {
        height: 32px !important;
    }
    
    .mobile-nav {
        gap: 8px !important;
    }
    
    .mobile-nav button {
        padding: 8px 12px !important;
        font-size: 12px;
    }
    
    /* Главная страница */
    .mobile-hero {
        padding: 40px 16px !important;
    }
    
    .mobile-hero h1 {
        font-size: 2.5rem !important;
        line-height: 1.2;
        margin-bottom: 16px !important;
    }
    
    .mobile-hero p {
        font-size: 16px !important;
        margin-bottom: 24px !important;
    }
    
    .mobile-hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }
    
    .mobile-hero-buttons button {
        width: 100% !important;
        padding: 16px !important;
        font-size: 16px !important;
    }
    
    /* Особенности */
    .mobile-features {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .mobile-features .feature-card {
        padding: 24px 16px !important;
    }
    
    /* FAQ */
    .mobile-faq {
        padding: 32px 16px !important;
    }
    
    .mobile-faq h2 {
        font-size: 2rem !important;
        margin-bottom: 24px !important;
    }
    
    .mobile-faq .faq-item {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }
    
    /* CTA секция */
    .mobile-cta {
        padding: 32px 16px !important;
    }
    
    .mobile-cta h2 {
        font-size: 2rem !important;
        margin-bottom: 16px !important;
    }
    
    .mobile-cta p {
        font-size: 16px !important;
        margin-bottom: 24px !important;
    }
    
    .mobile-cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }
    
    .mobile-cta-buttons button {
        width: 100% !important;
        padding: 16px !important;
    }
    
    /* Игровая страница */
    .mobile-game {
        margin-top: 60px !important;
        margin-bottom: 80px !important;
        padding: 16px !important;
    }
    
    .mobile-video {
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }
    
    .mobile-video video {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
    }
    
    .mobile-ranks {
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
        margin-bottom: 24px !important;
    }
    
    .mobile-ranks img {
        width: 48px !important;
        height: 48px !important;
        cursor: pointer;
        transition: transform 0.2s;
    }
    
    .mobile-ranks img:hover {
        transform: scale(1.1);
    }
    
    .mobile-result {
        margin-bottom: 24px !important;
    }
    
    .mobile-result .result-comparison {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .mobile-result .result-comparison > div:nth-child(2) {
        transform: rotate(90deg);
    }
    
    .mobile-controls {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .mobile-controls button {
        padding: 12px 16px !important;
        font-size: 14px !important;
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Модальные окна */
    .mobile-modal {
        margin: 16px !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 32px) !important;
        overflow-y: auto;
    }
    
    .mobile-modal .modal-content {
        padding: 20px !important;
    }
    
    .mobile-modal h2 {
        font-size: 1.5rem !important;
        margin-bottom: 16px !important;
    }
    
    .mobile-modal input,
    .mobile-modal textarea,
    .mobile-modal select {
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    .mobile-modal button {
        padding: 12px !important;
        font-size: 16px !important;
        width: 100% !important;
    }
    
    /* Футер */
    .mobile-footer {
        padding: 24px 16px !important;
    }
    
    .mobile-footer .footer-links {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
    
    /* Формы */
    .mobile-form {
        padding: 16px !important;
        max-width: 100% !important;
    }
    
    .mobile-form h1 {
        font-size: 2rem !important;
        margin-bottom: 24px !important;
    }
    
    .mobile-form input {
        padding: 16px !important;
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .mobile-form button {
        padding: 16px !important;
        font-size: 16px !important;
        width: 100% !important;
    }
    
    /* Профиль */
    .mobile-profile {
        padding: 16px !important;
    }
    
    .mobile-profile .profile-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    
    .mobile-profile .profile-card {
        padding: 16px !important;
    }
    
    /* Таблица лидеров */
    .mobile-leaderboard {
        padding: 16px !important;
    }
    
    .mobile-leaderboard table {
        font-size: 14px !important;
    }
    
    .mobile-leaderboard th,
    .mobile-leaderboard td {
        padding: 8px 4px !important;
    }
    
    /* Скрытие элементов на мобильных */
    .hide-mobile {
        display: none !important;
    }
    
    /* Показ только на мобильных */
    .show-mobile {
        display: block !important;
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .mobile-hero h1 {
        font-size: 2rem !important;
    }
    
    .mobile-video video {
        max-height: 40vh !important;
    }
    
    .mobile-ranks img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .mobile-controls button {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

/* Ландшафтная ориентация на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-video video {
        max-height: 70vh !important;
    }
    
    .mobile-game {
        margin-top: 50px !important;
        margin-bottom: 60px !important;
    }
}