/* game/responsive.css */

/* --- Планшеты и малые экраны (до 1024px) --- */
@media (max-width: 1024px) {
    .game-layout {
        flex-direction: column; /* Доски встают друг под друга */
        align-items: center;
        gap: 40px;
    }

    /* Оболочка доски со своими индивидуальными надписями */
    .board-wrapper-block {
        width: 90vw; /* Доска подстраивается под ширину экрана */
        max-width: 500px; /* Чтобы на больших планшетах не была гигантской */
        gap: 10px;
    }

    /* Контейнер холста */
    .board-holder {
        width: 100%;
    }

    canvas {
        width: 100% !important;
        height: auto !important;
    }

    /* Адаптация панелей игроков под ширину игрового поля */
    .match-players-bar {
        width: 100%;
        max-width: 100%;
    }

    .player-match-card {
        width: 100%;
    }
}

/* --- Мобильные телефоны (до 768px) --- */
@media (max-width: 768px) {
    body {
        padding: 10px;
        justify-content: flex-start; /* Elevates content for comfortable mobile scrolling */
    }

    /* Увеличиваем зону клика для бургера на мобилках */
    .hamburger-menu {
        top: 15px;
        left: 15px;
    }

    /* Делаем меню чуть шире для удобства пальцев */
    .side-menu {
        width: 85%;
        max-width: 300px;
        padding: 70px 15px 20px 15px;
        gap: 20px;
    }

    /* Уменьшаем размеры шрифтов в карточках для mobile */
    .player-match-card {
        padding: 6px 12px;
        font-size: 12px;
    }

    .match-player-name {
        max-width: 130px;
    }

    /* Снимаем лимит длины имени на мобильных устройствах, если у гостя скрыт рейтинг */
    .player-match-card:has(.match-player-elo:empty) .match-player-name {
        max-width: 100%;
    }

    .ratings-dashboard-side h3 {
        font-size: 13px;
    }

    .player-rating-block {
        padding: 8px;
    }

    .rating-list li {
        font-size: 10px;
    }

    .status {
        font-size: 15px;
        width: 100%;
        max-width: 500px;
        padding: 10px;
    }

    .board-label {
        font-size: 16px;
    }

    /* Адаптация модального окна конца игры для мобильных телефонов */
    .modal-content {
        padding: 20px !important;
    }

    #modalTitle {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }

    #modalMessage {
        font-size: 1rem !important;
        margin-bottom: 20px !important;
    }

    .modal-content button {
        padding: 10px 22px !important;
        font-size: 0.9rem !important;
    }
}

/* --- Очень маленькие экраны (до 400px) --- */
@media (max-width: 400px) {
    .match-player-name {
        max-width: 100px; /* Предотвращает выезд текста за рамки на узких экранах */
    }

    /* Снимаем лимит на сверхмалых экранах, если рейтинга нет */
    .player-match-card:has(.match-player-elo:empty) .match-player-name {
        max-width: 100%;
    }

    .reserve-piece {
        font-size: 26px; /* Уменьшаем фигуры в резерве, чтобы не вылезали */
    }

    .reserve-row {
        gap: 10px;
        min-height: 45px;
    }

    .reserve-count {
        font-size: 9px;
        padding: 1px 4px;
    }

    /* Коррекция модального окна на сверхмалых экранах */
    #modalTitle {
        font-size: 1.3rem !important;
    }

    #modalMessage {
        font-size: 0.9rem !important;
    }
}

/* Фикс для альбомной ориентации (когда телефон боком) */
@media (max-height: 500px) {
    .side-menu {
        padding: 40px 20px;
        gap: 20px;
        overflow-y: auto; /* Чтобы пункты меню не обрезались */
    }
}