/**
 * Dice Wars - Responsive CSS
 * Мобильная адаптация БЕЗ изменения десктопной версии
 *
 * ВАЖНО: Все стили применяются ТОЛЬКО для экранов < 768px
 * Десктоп (>= 768px) остается без изменений
 */

/* Скрываем landscape-close-btn по умолчанию (показываем только в landscape mobile) */
.landscape-close-btn {
    display: none !important;
}

/* ===========================
   ДЕСКТОП: Стили слотов игроков (>= 768px)
   =========================== */
@media screen and (min-width: 768px) {
    /* Чат - увеличенный отступ снизу чтобы не перекрывался слотами */
    #chat-panel {
        bottom: 115px !important;
    }

    /* Слоты игроков - flexbox вместо grid, чтобы не переносились */
    .bottom-players-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        justify-content: center !important;
    }

    /* === Для 4 и 6 игроков - занимают всю ширину === */
    .bottom-players-list[data-slot-count="4"] .player-card-wrapper,
    .bottom-players-list[data-slot-count="6"] .player-card-wrapper {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* === Для 6 игроков - более компактные элементы === */
    .bottom-players-list[data-slot-count="6"] .player-card-bottom {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom > div:first-child {
        width: clamp(28px, 3vw, 44px) !important;
        height: clamp(28px, 3vw, 44px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom > div:first-child span {
        font-size: clamp(12px, 1.5vw, 18px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-name-text {
        font-size: clamp(10px, 1vw, 13px) !important;
        max-width: clamp(50px, 7vw, 100px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-stats-row {
        font-size: clamp(9px, 0.8vw, 11px) !important;
        gap: clamp(3px, 0.5vw, 6px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-stats-row img {
        width: clamp(12px, 1.2vw, 16px) !important;
        height: clamp(12px, 1.2vw, 16px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-you-label {
        font-size: clamp(7px, 0.7vw, 10px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .waiting-slot-play-btn {
        padding: 6px 12px !important;
        font-size: clamp(10px, 0.9vw, 12px) !important;
        min-height: 30px !important;
    }

    /* === Для 2 игроков - по 1/3 ширины, центрированы === */
    .bottom-players-list[data-slot-count="2"] {
        justify-content: center !important;
    }

    .bottom-players-list[data-slot-count="2"] .player-card-wrapper {
        flex: 0 0 calc(33.333% - 8px) !important;
        min-width: 0 !important;
        max-width: calc(33.333% - 8px) !important;
    }

    /* Обертка карточки - базовые стили (для случаев без data-атрибута) */
    .bottom-players-list .player-card-wrapper {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Карточка игрока (waiting-slot и обычная) - масштабируемые размеры */
    .bottom-players-list .player-card-bottom {
        min-width: 0 !important;
        padding: clamp(6px, 1vw, 14px) !important;
        gap: clamp(6px, 1vw, 12px) !important;
    }

    /* Аватарка - масштабируемый размер */
    .bottom-players-list .player-card-bottom > div:first-child {
        width: clamp(32px, 4vw, 56px) !important;
        height: clamp(32px, 4vw, 56px) !important;
        flex-shrink: 0 !important;
    }

    /* Инициал в аватарке */
    .bottom-players-list .player-card-bottom > div:first-child span {
        font-size: clamp(14px, 2vw, 24px) !important;
    }

    /* Имя игрока */
    .bottom-players-list .player-name-text {
        font-size: clamp(11px, 1.2vw, 15px) !important;
        max-width: clamp(60px, 10vw, 150px) !important;
    }

    /* Строка статистики */
    .bottom-players-list .player-stats-row {
        font-size: clamp(10px, 1vw, 13px) !important;
        gap: clamp(4px, 0.8vw, 10px) !important;
    }

    /* Иконки в статистике */
    .bottom-players-list .player-stats-row img {
        width: clamp(14px, 1.5vw, 20px) !important;
        height: clamp(14px, 1.5vw, 20px) !important;
    }

    /* Метка "Вы" */
    .bottom-players-list .player-you-label {
        font-size: clamp(8px, 0.9vw, 11px) !important;
    }

    /* Кнопка "Играть" в пустом слоте */
    .bottom-players-list .player-card-bottom.waiting-slot button,
    .bottom-players-list .waiting-slot-play-btn {
        padding: clamp(6px, 1vw, 12px) clamp(10px, 1.5vw, 20px) !important;
        font-size: clamp(11px, 1.1vw, 14px) !important;
        min-height: clamp(32px, 3.5vw, 42px) !important;
    }
}

/* Дополнительное сжатие для узких десктопных экранов (768px - 1100px) */
@media screen and (min-width: 768px) and (max-width: 1100px) {
    /* Для 4 и 6 игроков - занимают всю ширину */
    .bottom-players-list[data-slot-count="4"] .player-card-wrapper,
    .bottom-players-list[data-slot-count="6"] .player-card-wrapper {
        flex: 1 1 0 !important;
        max-width: none !important;
    }

    /* Для 2 игроков - сохраняем 1/3 ширины */
    .bottom-players-list[data-slot-count="2"] .player-card-wrapper {
        flex: 0 0 calc(33.333% - 8px) !important;
        max-width: calc(33.333% - 8px) !important;
    }

    .bottom-players-list .player-card-bottom {
        padding: clamp(5px, 0.8vw, 10px) !important;
        gap: clamp(5px, 0.8vw, 10px) !important;
        min-height: auto !important;
    }

    /* Аватарка - меньше */
    .bottom-players-list .player-card-bottom > div:first-child {
        width: clamp(28px, 3.5vw, 44px) !important;
        height: clamp(28px, 3.5vw, 44px) !important;
        border-width: 2px !important;
        border-radius: 6px !important;
    }

    .bottom-players-list .player-card-bottom > div:first-child span {
        font-size: clamp(12px, 1.8vw, 20px) !important;
    }

    /* Имя */
    .bottom-players-list .player-name-text {
        font-size: clamp(10px, 1.1vw, 13px) !important;
        max-width: clamp(50px, 8vw, 100px) !important;
    }

    /* Статистика */
    .bottom-players-list .player-stats-row {
        font-size: clamp(9px, 0.9vw, 11px) !important;
        gap: clamp(3px, 0.6vw, 8px) !important;
        margin-top: 2px !important;
    }

    .bottom-players-list .player-stats-row img {
        width: clamp(12px, 1.3vw, 16px) !important;
        height: clamp(12px, 1.3vw, 16px) !important;
    }

    /* Кнопка "Играть" */
    .bottom-players-list .player-card-bottom.waiting-slot button,
    .bottom-players-list .waiting-slot-play-btn {
        padding: clamp(5px, 0.8vw, 10px) clamp(8px, 1.2vw, 16px) !important;
        font-size: clamp(10px, 1vw, 12px) !important;
        min-height: clamp(28px, 3vw, 36px) !important;
    }

    /* === Для 6 игроков - ещё компактнее === */
    .bottom-players-list[data-slot-count="6"] .player-card-bottom {
        padding: 5px 6px !important;
        gap: 5px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom > div:first-child {
        width: clamp(22px, 2.5vw, 32px) !important;
        height: clamp(22px, 2.5vw, 32px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom > div:first-child span {
        font-size: clamp(10px, 1.2vw, 14px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-name-text {
        font-size: clamp(9px, 0.9vw, 11px) !important;
        max-width: clamp(40px, 5vw, 70px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-stats-row {
        font-size: clamp(8px, 0.7vw, 10px) !important;
        gap: clamp(2px, 0.4vw, 4px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-stats-row img {
        width: clamp(10px, 1vw, 14px) !important;
        height: clamp(10px, 1vw, 14px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-you-label {
        font-size: clamp(6px, 0.6vw, 8px) !important;
    }

    .bottom-players-list[data-slot-count="6"] .waiting-slot-play-btn {
        padding: 4px 8px !important;
        font-size: clamp(9px, 0.8vw, 11px) !important;
        min-height: 26px !important;
    }
}

/* Ещё более компактный режим для очень узких десктопов (768px - 900px) */
@media screen and (min-width: 768px) and (max-width: 900px) {
    .bottom-players-list {
        gap: 4px !important;
    }

    /* Для 4 и 6 игроков - занимают всю ширину */
    .bottom-players-list[data-slot-count="4"] .player-card-wrapper,
    .bottom-players-list[data-slot-count="6"] .player-card-wrapper {
        flex: 1 1 0 !important;
        max-width: none !important;
    }

    /* Для 2 игроков - сохраняем 1/3 ширины */
    .bottom-players-list[data-slot-count="2"] .player-card-wrapper {
        flex: 0 0 calc(33.333% - 3px) !important;
        max-width: calc(33.333% - 3px) !important;
    }

    .bottom-players-list .player-card-bottom {
        padding: 4px 6px !important;
        gap: 4px !important;
        border-radius: 6px !important;
    }

    .bottom-players-list .player-card-bottom > div:first-child {
        width: 26px !important;
        height: 26px !important;
        border-width: 2px !important;
        border-radius: 4px !important;
    }

    .bottom-players-list .player-card-bottom > div:first-child span {
        font-size: 11px !important;
    }

    .bottom-players-list .player-name-text {
        font-size: 9px !important;
        max-width: 55px !important;
    }

    .bottom-players-list .player-stats-row {
        font-size: 8px !important;
        gap: 3px !important;
    }

    .bottom-players-list .player-stats-row img {
        width: 10px !important;
        height: 10px !important;
    }

    .bottom-players-list .player-you-label {
        font-size: 7px !important;
    }

    .bottom-players-list .player-card-bottom.waiting-slot button,
    .bottom-players-list .waiting-slot-play-btn {
        padding: 4px 8px !important;
        font-size: 9px !important;
        min-height: 24px !important;
    }

    /* === Для 6 игроков - минимальные размеры === */
    .bottom-players-list[data-slot-count="6"] {
        gap: 3px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom {
        padding: 3px 4px !important;
        gap: 3px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom > div:first-child {
        width: 20px !important;
        height: 20px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom > div:first-child span {
        font-size: 9px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-name-text {
        font-size: 8px !important;
        max-width: 35px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-stats-row {
        font-size: 7px !important;
        gap: 2px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-stats-row img {
        width: 9px !important;
        height: 9px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-you-label {
        font-size: 6px !important;
    }

    .bottom-players-list[data-slot-count="6"] .waiting-slot-play-btn {
        padding: 3px 6px !important;
        font-size: 8px !important;
        min-height: 22px !important;
    }
}

/* Чат отключён через настройки - скрываем везде */
#chat-panel.chat-disabled {
    display: none !important;
}

/* ===========================
   ТОЛЬКО МОБИЛЬНЫЕ УСТРОЙСТВА (< 768px)
   =========================== */
@media screen and (max-width: 767px) {
    /* Body - убираем отступы только на мобильных */
    body {
        padding: 0 !important;
    }

    .container {
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height для мобильных браузеров */
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* ===== MENU PANEL - FULLSCREEN на мобильных ===== */
    .vertical-menu-container {
        left: -100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        flex-direction: row !important;
    }

    .vertical-menu-container.visible {
        left: 0 !important;
    }

    /* Навигация слева - компактная вертикальная полоса с иконками */
    .vertical-menu-nav {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: none !important;
        flex-shrink: 0 !important;
        padding: 8px 4px !important;
    }

    /* Контент справа - занимает оставшееся место */
    .vertical-menu-content {
        width: calc(100vw - 70px) !important;
        height: 100% !important;
        flex: 1 !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }

    .vertical-menu-content.visible {
        width: calc(100vw - 70px) !important;
        border-radius: 0 !important;
    }

    .vertical-menu-content-inner {
        width: 100% !important;
        padding: 12px !important;
    }

    /* Заголовок меню - компактнее */
    .vertical-menu-header {
        padding: 6px 4px 8px !important;
        margin-bottom: 6px !important;
    }

    .vertical-menu-header h2 {
        font-size: 11px !important;
        text-align: center !important;
    }

    .vertical-menu-header p {
        display: none !important;
    }

    /* Профиль в меню - компактный */
    .vertical-menu-profile {
        padding: 6px !important;
        margin-bottom: 6px !important;
    }

    /* Кнопки меню - вертикальный список только с иконками */
    .vertical-menu-buttons {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-y: auto !important;
        padding: 4px 0 !important;
        gap: 14px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .vertical-menu-buttons::-webkit-scrollbar {
        display: none;
    }

    .vertical-menu-btn {
        flex-shrink: 0 !important;
        min-width: 54px !important;
        width: 54px !important;
        flex-direction: column !important;
        padding: 10px 4px !important;
        text-align: center !important;
        gap: 4px !important;
        margin: 0 auto !important;
    }

    .vertical-menu-btn-text {
        display: block !important;
    }

    .vertical-menu-btn-title {
        font-size: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 50px !important;
    }

    .vertical-menu-btn-subtitle {
        display: none !important;
    }

    .vertical-menu-btn-arrow {
        display: none !important;
    }

    .vertical-menu-btn-icon {
        margin: 0 auto !important;
        width: 28px !important;
        height: 28px !important;
    }

    .vertical-menu-btn-icon span,
    .vertical-menu-btn-icon .material-icons-round {
        font-size: 16px !important;
    }

    /* Версия скрыта */
    .vertical-menu-version {
        display: none !important;
    }

    /* Контент панели */
    .vertical-menu-tab-panel {
        padding: 10px !important;
    }

    .vertical-menu-panel-header {
        padding: 0 0 8px 0 !important;
        margin-bottom: 10px !important;
    }

    .vertical-menu-panel-title {
        font-size: 16px !important;
    }

    .vertical-menu-panel-description {
        font-size: 11px !important;
    }

    .vertical-menu-panel-badge {
        font-size: 9px !important;
        padding: 3px 8px !important;
        margin-bottom: 6px !important;
    }

    /* Карточки в меню - компактнее */
    .vertical-menu-card {
        padding: 10px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
    }

    .vertical-menu-card-header {
        margin-bottom: 8px !important;
        gap: 8px !important;
    }

    .vertical-menu-card-icon {
        width: 26px !important;
        height: 26px !important;
    }

    .vertical-menu-card-icon .material-icons-round {
        font-size: 14px !important;
    }

    .vertical-menu-card-title {
        font-size: 13px !important;
    }

    .vertical-menu-card-text {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* Статистика в меню - компактнее */
    .vertical-menu-stats-grid {
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .vertical-menu-stat-item {
        padding: 10px 8px !important;
        border-radius: 10px !important;
    }

    .vertical-menu-stat-value {
        font-size: 18px !important;
    }

    .vertical-menu-stat-label {
        font-size: 9px !important;
    }

    /* Toggle в настройках - компактнее */
    .vertical-menu-toggle-item {
        padding: 8px 10px !important;
    }

    .vertical-menu-toggle-info h4 {
        font-size: 12px !important;
    }

    .vertical-menu-toggle-info p {
        font-size: 10px !important;
    }

    .vertical-menu-toggle-switch {
        width: 36px !important;
        height: 20px !important;
    }

    .vertical-menu-toggle-switch::after {
        width: 16px !important;
        height: 16px !important;
    }

    .vertical-menu-toggle-switch.active::after {
        transform: translateX(16px) !important;
    }

    /* Кнопка закрытия меню */
    .vertical-menu-close-btn {
        width: 28px !important;
        height: 28px !important;
    }

    .vertical-menu-close-btn .material-icons-round {
        font-size: 16px !important;
    }

    /* ===== BATTLE LOG - скрыт на мобильных ===== */
    #battle-log {
        display: none !important;
    }

    /* ===== CHAT PANEL - компактнее и слева ===== */
    #chat-panel {
        left: 8px !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: 220px !important;
        bottom: 70px !important;
        max-height: 140px !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
    }

    #chat-panel .chat-message {
        padding: 4px 6px !important;
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    #chat-panel input {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    /* ===== BOTTOM CONTROLS - компактнее ===== */
    #bottom-controls {
        padding: 4px 6px !important;
        gap: 4px !important;
    }

    #bottom-controls button {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 32px !important;
        border-radius: 6px !important;
    }

    /* ===== BOTTOM PLAYERS - компактнее ===== */
    #bottom-players-container {
        padding: 4px 6px !important;
        gap: 3px !important;
    }

    #bottom-players-container .bottom-player-card {
        min-width: 60px !important;
        padding: 3px 5px !important;
        font-size: 9px !important;
        border-radius: 6px !important;
    }

    #bottom-players-container .player-name {
        font-size: 9px !important;
        max-width: 45px !important;
    }

    #bottom-players-container .player-avatar {
        width: 20px !important;
        height: 20px !important;
    }

    #bottom-players-container .player-stats {
        font-size: 8px !important;
    }

    /* ===== WAITING SLOTS - компактнее ===== */
    .player-card-bottom.waiting-slot {
        min-width: 100px !important;
        max-width: 140px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        gap: 6px !important;
        min-height: 50px !important;
    }

    /* Аватарка в waiting slot */
    .player-card-bottom.waiting-slot > div:first-child {
        width: 36px !important;
        height: 36px !important;
        border-radius: 6px !important;
        border-width: 2px !important;
    }

    .player-card-bottom.waiting-slot > div:first-child span {
        font-size: 16px !important;
    }

    .player-card-bottom.waiting-slot > div:first-child img {
        width: 100% !important;
        height: 100% !important;
    }

    /* Имя игрока в waiting slot */
    .player-card-bottom.waiting-slot .player-name-text {
        font-size: 11px !important;
        max-width: 80px !important;
    }

    /* Статистика в waiting slot */
    .player-card-bottom.waiting-slot .player-stats-row {
        font-size: 10px !important;
        gap: 6px !important;
        margin-top: 2px !important;
    }

    .player-card-bottom.waiting-slot .player-stats-row img {
        width: 14px !important;
        height: 14px !important;
    }

    /* Метка "Вы" */
    .player-card-bottom.waiting-slot .player-you-label {
        font-size: 9px !important;
    }

    /* Кнопка "Играть" в пустом слоте */
    .player-card-bottom.waiting-slot button {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-height: 32px !important;
    }

    /* Player card wrapper */
    .player-card-wrapper {
        max-width: 140px !important;
    }

    /* ===== Для 6 игроков на мобильных - ещё компактнее ===== */
    .bottom-players-list[data-slot-count="6"] {
        gap: 3px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-wrapper {
        max-width: 100px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom.waiting-slot {
        min-width: 70px !important;
        max-width: 100px !important;
        padding: 4px 5px !important;
        gap: 4px !important;
        min-height: 40px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom > div:first-child {
        width: 26px !important;
        height: 26px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-card-bottom > div:first-child span {
        font-size: 12px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-name-text {
        font-size: 9px !important;
        max-width: 50px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-stats-row {
        font-size: 8px !important;
        gap: 3px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-stats-row img {
        width: 11px !important;
        height: 11px !important;
    }

    .bottom-players-list[data-slot-count="6"] .player-you-label {
        font-size: 7px !important;
    }

    .bottom-players-list[data-slot-count="6"] .waiting-slot-play-btn {
        padding: 4px 8px !important;
        font-size: 9px !important;
        min-height: 26px !important;
    }

    /* ===== ROOMS LIST BUTTON - компактнее ===== */
    #rooms-list-btn {
        top: 6px !important;
        padding: 5px 12px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }

    #rooms-list-btn #rooms-list-online {
        font-size: 9px !important;
    }

    /* ===== GAME INFO PANEL - компактнее ===== */
    #game-info-panel {
        top: 6px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: 80% !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }

    /* ===== TURN INDICATOR - компактнее ===== */
    #turn-indicator {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
    }

    /* ===== HAMBURGER MENU BUTTON - компактнее ===== */
    #hamburger-menu-btn {
        width: 36px !important;
        height: 36px !important;
        top: 6px !important;
        left: 6px !important;
    }

    #hamburger-menu-btn .material-icons-round {
        font-size: 20px !important;
    }

    /* ===== MODALS - компактнее ===== */
    .game-modal {
        width: 92vw !important;
        max-width: 92vw !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
    }

    .game-modal-header {
        padding: 10px 14px !important;
    }

    .game-modal-header h3 {
        font-size: 14px !important;
    }

    .game-modal-body {
        padding: 10px !important;
        font-size: 12px !important;
    }

    .game-modal-buttons {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px !important;
    }

    .game-modal-btn {
        flex: 1 1 45% !important;
        min-height: 36px !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* ===== MULTIPLAYER LOBBY - компактнее ===== */
    #multiplayer-lobby {
        width: 92vw !important;
        max-height: 80vh !important;
        padding: 10px !important;
        border-radius: 12px !important;
    }

    .lobby-slots {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .lobby-slot {
        padding: 8px !important;
        min-height: 45px !important;
        border-radius: 8px !important;
    }

    /* ===== PLAYER CARDS в игре - компактнее ===== */
    .player-card-bottom,
    .bottom-player-card {
        padding: 4px 6px !important;
        border-radius: 6px !important;
    }

    .player-card-bottom .player-avatar,
    .bottom-player-card .player-avatar {
        width: 22px !important;
        height: 22px !important;
    }

    .player-card-bottom .player-name,
    .bottom-player-card .player-name {
        font-size: 10px !important;
    }

    .player-card-bottom .player-stats,
    .bottom-player-card .player-stats {
        font-size: 9px !important;
    }

    /* ===== NOTIFICATIONS - компактнее ===== */
    .turn-notification,
    .game-notification {
        font-size: 12px !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
    }

    /* ===== RECONNECT MODAL ===== */
    .reconnect-waiting-modal {
        width: 85vw !important;
        max-width: 280px !important;
        padding: 16px !important;
    }

    .reconnect-waiting-modal h3 {
        font-size: 14px !important;
    }

    .reconnect-waiting-modal p {
        font-size: 12px !important;
    }
}

/* ===========================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (< 380px)
   =========================== */
@media screen and (max-width: 379px) {
    .vertical-menu-nav {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    .vertical-menu-content.visible {
        width: calc(100vw - 60px) !important;
    }

    .vertical-menu-btn {
        min-width: 48px !important;
        width: 48px !important;
        padding: 4px 2px !important;
    }

    .vertical-menu-btn-title {
        font-size: 7px !important;
    }

    .vertical-menu-btn-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .vertical-menu-btn-icon span,
    .vertical-menu-btn-icon .material-icons-round {
        font-size: 14px !important;
    }

    #bottom-players-container .bottom-player-card {
        min-width: 55px !important;
    }

    /* Waiting slots на очень маленьких экранах */
    .player-card-bottom.waiting-slot {
        min-width: 85px !important;
        max-width: 120px !important;
        padding: 5px 6px !important;
        min-height: 45px !important;
    }

    .player-card-bottom.waiting-slot > div:first-child {
        width: 30px !important;
        height: 30px !important;
    }

    .player-card-bottom.waiting-slot .player-name-text {
        font-size: 10px !important;
        max-width: 65px !important;
    }

    .player-card-bottom.waiting-slot .player-stats-row {
        font-size: 9px !important;
    }

    .player-card-bottom.waiting-slot .player-stats-row img {
        width: 12px !important;
        height: 12px !important;
    }

    .player-card-wrapper {
        max-width: 120px !important;
    }

    .lobby-slots {
        grid-template-columns: 1fr !important;
    }

    #bottom-controls button {
        padding: 5px 8px !important;
        font-size: 10px !important;
    }
}

/* ===========================
   LANDSCAPE на мобильных телефонах
   Определяем по: альбомная ориентация + маленькая высота (телефон)
   =========================== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* Body */
    body {
        padding: 0 !important;
    }

    .container {
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* ===== MENU - fullscreen с компактной навигацией слева ===== */
    .vertical-menu-container {
        left: -100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        flex-direction: row !important;
    }

    .vertical-menu-container.visible {
        left: 0 !important;
    }

    /* Меню в landscape - навигация слева (196px = 280px * 0.7) */
    .vertical-menu-nav {
        width: 196px !important;
        min-width: 196px !important;
        max-width: 196px !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: none !important;
        flex-shrink: 0 !important;
        padding: 6px !important;
    }

    /* Контент справа */
    .vertical-menu-content {
        width: calc(100vw - 196px) !important;
        height: 100% !important;
        flex: 1 !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }

    .vertical-menu-content.visible {
        width: calc(100vw - 196px) !important;
        border-radius: 0 !important;
    }

    .vertical-menu-content-inner {
        width: 100% !important;
        padding: 10px !important;
    }

    /* Заголовок меню - полностью скрываем (крестик переносим в профиль) */
    .vertical-menu-header {
        display: none !important;
    }

    .vertical-menu-header h2,
    .vertical-menu-header p {
        display: none !important;
    }


    /* ===== ПРОФИЛЬ - с крестиком закрытия в правом верхнем углу ===== */
    .vertical-menu-profile {
        position: relative !important;
        padding: 10px !important;
        padding-top: 28px !important;
        margin-bottom: 6px !important;
        border-radius: 10px !important;
    }

    /* Крестик закрытия меню - внутри профиля, справа вверху */
    .vertical-menu-profile .vertical-menu-close-btn,
    .vertical-menu-profile .landscape-close-btn {
        position: absolute !important;
        top: 4px !important;
        right: 4px !important;
        width: 24px !important;
        height: 24px !important;
        background: transparent !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.6) !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        padding: 0 !important;
        border-radius: 4px !important;
    }

    .vertical-menu-profile .vertical-menu-close-btn:hover,
    .vertical-menu-profile .landscape-close-btn:hover {
        color: rgba(255, 255, 255, 0.9) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .vertical-menu-profile .vertical-menu-close-btn .material-icons-round,
    .vertical-menu-profile .landscape-close-btn .material-icons-round {
        font-size: 18px !important;
    }

    /* Аватарка - меньше */
    .vertical-menu-profile img {
        width: 32px !important;
        height: 32px !important;
        border-width: 2px !important;
        flex-shrink: 0 !important;
    }

    /* Внешний контейнер */
    .vertical-menu-profile > div {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* Верхняя часть (аватарка + текст) - горизонтально */
    .vertical-menu-profile > div > div:first-child {
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Контейнер текста */
    .vertical-menu-profile > div > div:first-child > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    /* Имя пользователя */
    .vertical-menu-profile > div > div:first-child > div > div:first-child {
        font-size: 11px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Subtitle (@username) */
    .vertical-menu-profile > div > div:first-child > div > div:last-child {
        display: block !important;
        font-size: 8px !important;
    }

    /* Кнопка выйти - border-radius как на ПК (8px) */
    #menu-logout-btn {
        padding: 6px 12px !important;
        font-size: 11px !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: #ef4444 !important;
        box-sizing: border-box !important;
    }

    #menu-logout-btn .material-icons-round {
        font-size: 14px !important;
        margin: 0 !important;
    }

    /* Кнопки входа - как в ПК версии с текстом (немного компактнее) */
    #guest-login-btn,
    #telegram-login-btn,
    #google-login-btn,
    #itchio-login-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;
        min-width: 100% !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        gap: 6px !important;
    }

    #guest-login-btn .material-icons-round {
        font-size: 14px !important;
        margin: 0 !important;
    }

    #telegram-login-btn svg,
    #google-login-btn svg,
    #itchio-login-btn svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    /* Показываем разделитель "или" */
    .vertical-menu-profile > div > div:nth-child(2) {
        display: flex !important;
    }

    /* Кнопки навигации - вертикальный список, ширина = ширине профиля */
    .vertical-menu-buttons {
        display: flex !important;
        flex-direction: column !important;
        padding: 4px 0 !important;
        gap: 4px !important;
        overflow-y: auto !important;
    }

    .vertical-menu-btn {
        flex-shrink: 0 !important;
        width: calc(100% - 12px) !important;
        min-width: auto !important;
        max-width: none !important;
        flex-direction: row !important;
        padding: 8px 10px !important;
        text-align: left !important;
        gap: 8px !important;
        margin: 0 6px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* Активная кнопка - фон как на ПК */
    .vertical-menu-btn.active {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.2)) !important;
    }

    .vertical-menu-btn-icon {
        margin: 0 !important;
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0 !important;
    }

    .vertical-menu-btn-icon span,
    .vertical-menu-btn-icon .material-icons-round {
        font-size: 14px !important;
    }

    .vertical-menu-btn-text {
        display: block !important;
        margin-top: 0 !important;
        flex: 1 !important;
    }

    .vertical-menu-btn-title {
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80px !important;
    }

    .vertical-menu-btn-subtitle {
        display: none !important;
    }

    /* Стрелка справа как на ПК */
    .vertical-menu-btn-arrow {
        position: relative !important;
        z-index: 1 !important;
        opacity: 0 !important;
        transform: translateX(-10px) !important;
        transition: all 0.3s ease !important;
    }

    .vertical-menu-btn-arrow .material-icons-round {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .vertical-menu-btn.active .vertical-menu-btn-arrow {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .vertical-menu-version {
        display: none !important;
    }

    /* Контент панели в landscape */
    .vertical-menu-tab-panel {
        padding: 10px !important;
    }

    .vertical-menu-panel-header {
        padding: 0 0 6px 0 !important;
        margin-bottom: 8px !important;
    }

    .vertical-menu-panel-title {
        font-size: 14px !important;
    }

    .vertical-menu-panel-description {
        font-size: 10px !important;
    }

    .vertical-menu-card {
        padding: 8px !important;
        margin-bottom: 6px !important;
    }

    .vertical-menu-card-title {
        font-size: 12px !important;
    }

    .vertical-menu-card-text {
        font-size: 10px !important;
    }

    /* Статистика в landscape */
    .vertical-menu-stats-grid {
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .vertical-menu-stat-item {
        padding: 8px 6px !important;
    }

    .vertical-menu-stat-value {
        font-size: 16px !important;
    }

    .vertical-menu-stat-label {
        font-size: 8px !important;
    }

    /* Toggle в landscape */
    .vertical-menu-toggle-item {
        padding: 6px 8px !important;
    }

    .vertical-menu-toggle-info h4 {
        font-size: 11px !important;
    }

    .vertical-menu-toggle-info p {
        font-size: 9px !important;
    }

    /* ===== СЛОТЫ ИГРОКОВ ВНИЗУ ===== */
    .bottom-players-bar {
        left: 10px !important;
        right: 10px !important;
        bottom: 8px !important;
    }

    /* Grid для слотов - уменьшенный minmax */
    .bottom-players-list {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 6px !important;
    }

    /* Обёртка карточки */
    .player-card-wrapper {
        max-width: none !important;
    }

    /* Карточка игрока (занятый слот) */
    .player-card-bottom {
        padding: 6px 8px !important;
        min-height: 45px !important;
        gap: 6px !important;
        border-radius: 8px !important;
        min-width: auto !important;
    }

    /* Аватарка в карточке */
    .player-card-bottom > div:first-child {
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        border-width: 2px !important;
        flex-shrink: 0 !important;
    }

    .player-card-bottom > div:first-child span {
        font-size: 14px !important;
    }

    .player-card-bottom > div:first-child img {
        width: 100% !important;
        height: 100% !important;
    }

    /* Имя игрока */
    .player-name-text {
        font-size: 10px !important;
        max-width: 70px !important;
    }

    /* Статистика игрока */
    .player-stats-row {
        font-size: 9px !important;
        gap: 4px !important;
        margin-top: 2px !important;
    }

    .player-stats-row img {
        width: 12px !important;
        height: 12px !important;
    }

    .player-stats-row span {
        font-size: 9px !important;
    }

    /* Метка "Вы" */
    .player-you-label {
        font-size: 8px !important;
    }

    /* Waiting slot (пустой слот с кнопкой "Играть") */
    .player-card-bottom.waiting-slot {
        min-width: auto !important;
        max-width: none !important;
        min-height: 40px !important;
    }

    /* Кнопка "Играть" в пустом слоте */
    .player-card-bottom.waiting-slot button,
    .player-card-bottom button {
        padding: 6px 12px !important;
        font-size: 11px !important;
        min-height: 30px !important;
    }

    /* Игровые элементы в landscape */
    #bottom-controls {
        padding: 3px 4px !important;
        gap: 3px !important;
    }

    #bottom-controls button {
        padding: 4px 8px !important;
        min-height: 28px !important;
        font-size: 10px !important;
    }

    #bottom-players-container {
        padding: 3px 4px !important;
        gap: 3px !important;
    }

    #bottom-players-container .bottom-player-card {
        min-width: 55px !important;
        padding: 2px 4px !important;
        font-size: 8px !important;
    }

    #bottom-players-container .player-avatar {
        width: 18px !important;
        height: 18px !important;
    }

    #bottom-players-container .player-name {
        font-size: 8px !important;
        max-width: 40px !important;
    }

    /* ===== КНОПКА МЕНЮ (hamburger) ===== */
    #hamburger-menu-btn {
        width: 40px !important;
        height: 32px !important;
        top: 6px !important;
        left: 6px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }

    #hamburger-menu-btn .material-icons-round {
        font-size: 16px !important;
    }

    /* Rooms list button в landscape */
    #rooms-list-btn {
        top: 4px !important;
        padding: 4px 10px !important;
        font-size: 10px !important;
    }

    #rooms-list-btn #rooms-list-online {
        font-size: 8px !important;
    }

    /* Стили чата перенесены в конец файла для лучшей читаемости */

    /* Game info в landscape */
    #game-info-panel {
        top: 4px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
    }

    /* Turn indicator в landscape */
    #turn-indicator {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    /* ===== MODALS в landscape ===== */
    .game-modal {
        max-height: 85vh !important;
        max-width: 90vw !important;
        border-radius: 10px !important;
    }

    .game-modal-header {
        padding: 8px 12px !important;
    }

    .game-modal-header h3 {
        font-size: 14px !important;
    }

    .game-modal-body {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .game-modal-buttons {
        padding: 8px !important;
        gap: 5px !important;
    }

    .game-modal-btn {
        min-height: 32px !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    /* Notifications в landscape */
    .turn-notification,
    .game-notification {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    /* ===== КНОПКИ ИГРЫ В LANDSCAPE ===== */
    /* Кнопка Меню - скрываем когда игра идёт */
    #menu-btn.mobile-game-hidden {
        display: none !important;
    }

    /* Кнопка Сдаться - левый верхний угол */
    #mobile-surrender-btn {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 1200 !important;
        padding: 6px 12px !important;
        background: linear-gradient(180deg, #a0aec0, #718096) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        font-size: 11px !important;
        box-shadow: 0 2px 8px rgba(113, 128, 150, 0.3) !important;
        cursor: pointer !important;
        display: none !important;
    }

    #mobile-surrender-btn.visible {
        display: block !important;
    }

    /* Кнопка Конец хода - правый нижний угол */
    #mobile-end-turn-btn {
        position: absolute !important;
        bottom: 55px !important;
        right: 10px !important;
        z-index: 1200 !important;
        padding: 8px 14px !important;
        background: linear-gradient(180deg, #4ecca3, #38b88a) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        box-shadow: 0 3px 10px rgba(78, 204, 163, 0.35) !important;
        cursor: pointer !important;
        display: none !important;
    }

    #mobile-end-turn-btn.visible {
        display: block !important;
    }

    #mobile-end-turn-btn:disabled {
        background: linear-gradient(180deg, #718096, #5a6c7d) !important;
        cursor: not-allowed !important;
        opacity: 0.7 !important;
    }
}

/* ===========================
   Safe Area для устройств с вырезами
   (применяется только на мобильных)
   =========================== */
@supports (padding: env(safe-area-inset-bottom)) {
    @media screen and (max-width: 767px) {
        #bottom-controls,
        #bottom-players-container,
        .waiting-slots-container {
            padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
        }

        #chat-panel {
            bottom: calc(56px + env(safe-area-inset-bottom)) !important;
        }

        .vertical-menu-nav {
            padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        }
    }

    @media screen and (orientation: landscape) and (max-height: 500px) {
        #bottom-controls,
        #bottom-players-container,
        .bottom-players-bar,
        .bottom-players-list {
            padding-bottom: calc(3px + env(safe-area-inset-bottom)) !important;
        }

        #chat-panel {
            bottom: calc(50px + env(safe-area-inset-bottom)) !important;
        }

        .vertical-menu-nav {
            padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
        }

        /* Safe area для левой части в landscape */
        .vertical-menu-nav {
            padding-left: calc(4px + env(safe-area-inset-left)) !important;
        }
    }
}

/* ===========================
   Reduced Motion (для всех устройств - это accessibility)
   =========================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================
   ДОПОЛНИТЕЛЬНЫЕ МОБИЛЬНЫЕ СТИЛИ
   =========================== */
@media screen and (max-width: 767px) {
    /* ===== ROOMS LIST MODAL - компактнее на мобильных ===== */
    .rooms-list-modal .rooms-list-content {
        max-width: 95vw !important;
        max-height: 75vh !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .rooms-list-modal .rooms-list-header {
        margin-bottom: 12px !important;
    }

    .rooms-list-modal .rooms-list-header h3 {
        font-size: 16px !important;
    }

    .rooms-list-modal .close-modal-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 24px !important;
    }

    /* Переключатель количества игроков - компактнее */
    .rooms-list-modal .players-toggle-container {
        margin-bottom: 12px !important;
    }

    .rooms-list-modal .players-toggle {
        padding: 3px !important;
        gap: 3px !important;
        border-radius: 10px !important;
    }

    .rooms-list-modal .players-toggle .toggle-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* Таблица комнат - компактнее и прокручиваемая */
    .rooms-list-modal .rooms-table-container {
        max-height: calc(75vh - 180px) !important;
        overflow-y: auto !important;
        margin-bottom: 10px !important;
    }

    .rooms-list-modal .rooms-table th,
    .rooms-list-modal .rooms-table td {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }

    .rooms-list-modal .rooms-table th {
        font-size: 10px !important;
    }

    .rooms-list-modal .rooms-list-actions {
        gap: 8px !important;
    }

    .rooms-list-modal .btn-refresh {
        padding: 10px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* ===== ВКЛАДКИ РЕЙТИНГ И ПРАВИЛА - исправление обрезки снизу ===== */
    #menu-content-leaderboard-data {
        max-height: calc(100vh - 120px) !important;
        max-height: calc(100dvh - 120px) !important;
        padding-bottom: 50px !important;
        overflow-y: auto !important;
    }

    /* Контейнер с карточками правил - последний div внутри панели */
    #menu-content-rules > div:not(.vertical-menu-panel-header) {
        max-height: calc(100vh - 120px) !important;
        max-height: calc(100dvh - 120px) !important;
        padding-bottom: 50px !important;
        overflow-y: auto !important;
    }

    /* Вся панель правил */
    #menu-content-rules {
        overflow: hidden !important;
    }

    /* Для вкладки друзей тоже */
    #menu-content-friends-data {
        max-height: calc(100vh - 180px) !important;
        max-height: calc(100dvh - 180px) !important;
        padding-bottom: 50px !important;
        overflow-y: auto !important;
    }

    /* Вся панель рейтинга */
    #menu-content-leaderboard {
        overflow: hidden !important;
    }

    /* ===== ИКОНКИ АВТОРИЗАЦИИ - центрирование ===== */
    .vertical-menu-profile > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Контейнер кнопок авторизации по центру */
    .vertical-menu-profile > div > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Кнопки входа */
    .vertical-menu-profile button[id*="login-btn"],
    .vertical-menu-profile [id*="login-btn"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Профиль боковое меню - кнопки по центру колонкой */
    #menu-content-profile-data > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Кнопки входа строго по центру */
    #menu-content-profile-data button,
    #menu-content-profile-data [style*="display: flex"][style*="gap"] {
        justify-content: center !important;
    }

    /* ===== КНОПКА МЕНЮ - скрываем в игровом режиме ===== */
    #menu-btn.mobile-game-hidden {
        display: none !important;
    }

    /* ===== КНОПКА СДАТЬСЯ - в мобильном игровом режиме ===== */
    #mobile-surrender-btn {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 1200 !important;
        padding: 8px 14px !important;
        background: linear-gradient(180deg, #a0aec0, #718096) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        box-shadow: 0 3px 10px rgba(113, 128, 150, 0.35) !important;
        cursor: pointer !important;
        display: none !important;
    }

    #mobile-surrender-btn.visible {
        display: block !important;
    }

    /* ===== КНОПКА КОНЕЦ ХОДА - в правый нижний угол над слотами ===== */
    #mobile-end-turn-btn {
        position: absolute !important;
        bottom: 75px !important;
        right: 12px !important;
        z-index: 1200 !important;
        padding: 12px 20px !important;
        background: linear-gradient(180deg, #4ecca3, #38b88a) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        box-shadow: 0 4px 15px rgba(78, 204, 163, 0.4) !important;
        cursor: pointer !important;
        display: none !important;
    }

    #mobile-end-turn-btn.visible {
        display: block !important;
    }

    #mobile-end-turn-btn:disabled {
        background: linear-gradient(180deg, #718096, #5a6c7d) !important;
        cursor: not-allowed !important;
        opacity: 0.7 !important;
    }

    /* ===== СКРЫТЬ ВЫБОР КУРСОРА НА МОБИЛЬНЫХ ===== */
    #cursor-selection-container {
        display: none !important;
    }

    /* ===== СОЦИАЛЬНЫЕ КНОПКИ - только иконки на мобильных ===== */
    #telegram-login-btn,
    #google-login-btn,
    #itchio-login-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        padding: 12px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
    }

    #telegram-login-btn svg,
    #google-login-btn svg,
    #itchio-login-btn svg {
        flex-shrink: 0 !important;
        width: 20px !important;
        height: 20px !important;
    }

    /* ===== КНОПКА МЕНЮ - мобильная позиция ===== */
    #menu-btn {
        top: 8px !important;
        left: 8px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* ===== КНОПКА ОБНОВИТЬ В HEADER СПИСКА ИГР ===== */
    .rooms-list-modal .btn-refresh-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }

    /* Увеличить высоту таблицы без кнопки внизу */
    .rooms-list-modal .rooms-table-container {
        max-height: calc(75vh - 140px) !important;
    }
}

/* ===== LANDSCAPE дополнительные стили ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* Rooms list в landscape */
    .rooms-list-modal .rooms-list-content {
        max-height: 90vh !important;
        padding: 12px !important;
    }

    .rooms-list-modal .rooms-table-container {
        max-height: calc(90vh - 120px) !important;
    }

    .rooms-list-modal .players-toggle .toggle-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Кнопка обновить в header */
    .rooms-list-modal .btn-refresh-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    /* Боковое меню - отступы между кнопками */
    .vertical-menu-buttons {
        gap: 10px !important;
        padding: 4px 0 !important;
    }

    /* Скрыть выбор курсора в landscape */
    #cursor-selection-container {
        display: none !important;
    }

    /* Социальные кнопки - стили перенесены в конец файла */

    /* Кнопка меню - ИДЕНТИЧНЫЕ размеры с кнопкой "Список карт" */
    #menu-btn {
        top: 4px !important;
        left: 5px !important;
        padding: 4px 10px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
        min-height: 32px !important;
        min-width: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Кнопка Список карт - такие же размеры */
    #rooms-list-btn {
        min-height: 32px !important;
        min-width: 70px !important;
        box-sizing: border-box !important;
    }

    /* Рейтинг/Правила/Друзья - увеличить доступное пространство */
    #menu-content-leaderboard-data {
        max-height: calc(100vh - 80px) !important;
        max-height: calc(100dvh - 80px) !important;
        padding-bottom: 40px !important;
    }

    #menu-content-rules > div:not(.vertical-menu-panel-header) {
        max-height: calc(100vh - 80px) !important;
        max-height: calc(100dvh - 80px) !important;
        padding-bottom: 40px !important;
    }

    #menu-content-friends-data {
        max-height: calc(100vh - 100px) !important;
        max-height: calc(100dvh - 100px) !important;
        padding-bottom: 40px !important;
    }

    /* Кнопки управления в landscape */
    /* Кнопка "Сдаться" - такой же размер как "Конец хода" */
    #mobile-surrender-btn {
        top: 5px !important;
        left: 5px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    /* Кнопка "Конец хода" - поднять выше (отступ от слота) */
    #mobile-end-turn-btn {
        bottom: 70px !important;
        right: 10px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    /* ===== ЧАТ - pointer-events: none чтобы можно было кликать через него ===== */
    #chat-panel {
        position: absolute !important;
        left: 15px !important;
        right: auto !important;
        transform: none !important;
        bottom: 80px !important;
        top: 40px !important;
        max-height: none !important;
        height: auto !important;
        max-width: 240px !important;
        width: 240px !important;
        background: transparent !important;
        border-radius: 8px !important;
        padding: 0 !important;
        z-index: 1100 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* Сообщения - pointer-events: none чтобы клики проходили на карту */
    #chat-panel #chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 4px !important;
        max-height: none !important;
        min-height: 0 !important;
        pointer-events: none !important;
    }

    #chat-panel .chat-message {
        padding: 2px 4px !important;
        font-size: 9px !important;
        margin-bottom: 1px !important;
        background: transparent !important;
        pointer-events: none !important;
    }

    /* Только поле ввода реагирует на клики */
    #chat-panel input {
        padding: 5px 8px !important;
        border: 1px solid rgba(0, 0, 0, 0.15) !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.6) !important;
        color: #333 !important;
        font-size: 10px !important;
        outline: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        pointer-events: auto !important;
    }

    #chat-panel input:focus {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: rgba(66, 153, 225, 0.5) !important;
    }

    /* Контейнер ввода - pointer-events: auto только для input */
    #chat-panel > div:last-child {
        pointer-events: auto !important;
    }

    /* ===== ROOMS LIST MODAL - переключатели игроков ===== */
    .rooms-list-modal .players-toggle .toggle-btn {
        padding: 10px 12px !important;
        font-size: 12px !important;
        min-height: 40px !important;
    }

    /* Кнопка обновить - убрать обводку, размер как крестик */
    .rooms-list-modal .btn-refresh-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .rooms-list-modal .btn-refresh-icon:hover {
        background: rgba(78, 204, 163, 0.3) !important;
    }

    /* Кнопка закрытия модала */
    .rooms-list-modal .close-modal-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 32px !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
    }

}