/* Колонка: язык + ссылка «Настройки» */
.top-right-controls {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* auto: иначе в части браузеров клики по флагу/панели ведут себя нестабильно */
    pointer-events: auto;
}

/* Одна кнопка с флагом текущего языка; по клику — панель выбора (как языковая панель Windows) */
.lang-flags-zone {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2000;
    pointer-events: none;
}

/* Панель языка раскрывается вниз и перекрывает зону кнопки «Настройки» по вертикали;
   следующий sibling (настройки) рисуется поверх — клики не доходят до пунктов меню.
   Поднимаем весь блок языка выше по z-index. */
.top-right-controls .lang-flags-zone {
    position: relative;
    top: auto;
    right: auto;
    z-index: 5;
}

/* Иконка «Настройки»: белый фон, крупнее шестерёнка, чуть шире блок языка */
.settings-icon-btn {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(52px, 10vw, 64px);
    height: clamp(36px, 7vw, 44px);
    padding: 0;
    border: 2px solid rgba(47, 54, 64, 0.14);
    border-radius: 8px;
    cursor: pointer;
    background-color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #2f3640;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.settings-icon-btn:hover {
    transform: scale(1.04);
}

.settings-icon-btn:active {
    transform: scale(0.98);
}

.settings-icon-btn:focus-visible {
    outline: 2px solid #fbc531;
    outline-offset: 2px;
}

.settings-icon-btn .settings-gear {
    font-size: 1.75rem;
    line-height: 1;
}

.lang-menu-trigger {
    pointer-events: auto;
    display: block;
    width: clamp(48px, 9vw, 58px);
    height: clamp(32px, 6vw, 40px);
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.15);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.lang-menu-trigger:hover {
    transform: scale(1.04);
}

.lang-menu-trigger:active {
    transform: scale(0.98);
}

.lang-menu-trigger:focus-visible {
    outline: 2px solid #fbc531;
    outline-offset: 2px;
}

#lang-flags-root[data-lang="ru"] .lang-menu-trigger {
    background-image: url('../img/flags/ru.svg');
}

#lang-flags-root[data-lang="by"] .lang-menu-trigger {
    background-image: url('../img/flags/by.svg');
}

.lang-menu-panel {
    pointer-events: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: min(200px, calc(100vw - 24px));
    max-width: calc(100vw - 16px);
    padding: 6px;
    background: rgba(255, 252, 248, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    flex-direction: column;
    gap: 4px;
}

.lang-menu-panel[hidden] {
    display: none !important;
}

.lang-menu-panel.is-open {
    display: flex;
}

.lang-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    margin: 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    font-family: 'Play', system-ui, sans-serif;
    font-size: 0.95rem;
    color: #2f3640;
    text-align: left;
}

.lang-menu-option:hover {
    background: rgba(0, 168, 255, 0.12);
}

.lang-menu-option[aria-selected='true'] {
    background: rgba(0, 168, 255, 0.2);
    font-weight: 700;
}

.lang-menu-option-flag {
    flex-shrink: 0;
    width: clamp(48px, 9vw, 58px);
    height: clamp(32px, 6vw, 40px);
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.lang-menu-option-flag[data-flag='ru'] {
    background-image: url('../img/flags/ru.svg');
}

.lang-menu-option-flag[data-flag='by'] {
    background-image: url('../img/flags/by.svg');
}

@media (max-width: 768px) {
    .game-world > .lang-flags-zone {
        top: max(8px, env(safe-area-inset-top, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
    }
    .top-right-controls {
        top: max(8px, env(safe-area-inset-top, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        gap: 8px;
    }

    .lang-menu-option {
        min-height: 44px;
        padding: 10px 12px;
    }

    .lang-menu-trigger,
    .settings-icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 380px) {
    .lang-menu-panel {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        min-width: min(240px, calc(100vw - 20px));
    }
}