/* ========================================
   HUD — приборная панель корабля

   Слой лежит поверх игрового кадра, поэтому у каждого модуля своя тёмная
   подложка: текст прямо на космосе не читается ни на одной планете.
   Цвет здесь несёт смысл — циан «активно/выбрано», янтарь «валюта»,
   красный появляется только когда значение упало ниже порога.
   ======================================== */

/* ========================================
   КОНТЕЙНЕР И ОБЩИЕ ВЕЛИЧИНЫ HUD
   ======================================== */

.game-hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.game-hud > * {
    pointer-events: auto;
}

/* Кегль HUD задан через max(): --adaptive-scale на узком окне падает до 0.3,
   и без нижней границы подписи ушли бы в нечитаемые 4px. */
.game-hud,
.selected-info-panel,
.device-effect-selector,
.system-info {
    --hud-font-label: max(11px, calc(11px * var(--adaptive-scale)));
    --hud-font-text: max(12px, calc(12.5px * var(--adaptive-scale)));
    --hud-font-num: max(12px, calc(13px * var(--adaptive-scale)));
    --hud-font-title: max(13px, calc(14px * var(--adaptive-scale)));
    --hud-tap: calc(44px * var(--adaptive-scale));
}

/* Корпус модуля: тёмное стекло + тонкая приборная линия. */
.player-dock,
.right-panel,
.devices-panel,
.action-buttons,
.selected-info-panel,
.device-effect-selector {
    background: var(--u-bg-hud);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--u-border);
    box-shadow: var(--u-shadow-soft);
}

/* Световой кант по верхней кромке — единственное «свечение» в покое. */
.player-dock::before,
.action-buttons::before,
.devices-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(10px * var(--adaptive-scale));
    right: calc(10px * var(--adaptive-scale));
    height: 1px;
    background: var(--u-grad-edge);
    opacity: 0.7;
    pointer-events: none;
}

/* ========================================
   ПОЛОСЫ СОСТОЯНИЯ — центр сверху
   ======================================== */

.player-dock {
    position: absolute;
    top: calc(12px * var(--adaptive-scale));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: calc(14px * var(--adaptive-scale));
    padding: calc(10px * var(--adaptive-scale)) calc(14px * var(--adaptive-scale));
    border-radius: var(--u-radius-lg);
}

.player-info {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--adaptive-scale));
}

.player-stats {
    display: flex;
    flex-direction: column;
    gap: calc(7px * var(--adaptive-scale));
    min-width: calc(300px * var(--adaptive-scale));
}

/* Подпись — шкала — число. Число вынесено из полосы: внутри оно
   упиралось в край и обрезалось на трёхзначных значениях. */
.stat {
    display: grid;
    grid-template-columns: calc(62px * var(--adaptive-scale)) 1fr auto;
    align-items: center;
    gap: calc(9px * var(--adaptive-scale));
}

.stat[hidden] {
    display: none;
}

.stat-label {
    font-family: var(--u-font-display);
    font-size: var(--hud-font-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--u-text-muted);
    white-space: nowrap;
}

.stat-value,
.stat-value-inside {
    font-family: var(--u-font-display);
    font-size: var(--hud-font-num);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--u-text);
    text-align: right;
    /* Место под «9999/9999» держится всегда: иначе шкала дёргается
       по ширине на каждом попадании. */
    min-width: calc(84px * var(--adaptive-scale));
    white-space: nowrap;
}

.health-bar-dock,
.energy-bar-dock,
.shield-bar-dock {
    position: relative;
    height: calc(11px * var(--adaptive-scale));
    min-height: 8px;
    background: var(--u-bg-black-medium);
    border: 1px solid var(--u-border-light);
    border-radius: var(--u-radius-sm);
    overflow: hidden;
}

/* Деления шкалы — по четвертям, чтобы значение читалось без числа. */
.health-bar-dock::after,
.energy-bar-dock::after,
.shield-bar-dock::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(25% - 1px),
        rgba(var(--u-primary-rgb), 0.28) calc(25% - 1px),
        rgba(var(--u-primary-rgb), 0.28) 25%
    );
    pointer-events: none;
}

.health-fill-dock,
.energy-fill-dock,
.shield-fill-dock {
    height: 100%;
    border-radius: inherit;
    transition: width var(--u-transition), background-color var(--u-transition);
}

/* Корпус цел — спокойная бирюза. Красный тут был бы вечной тревогой. */
.health-fill-dock {
    background: linear-gradient(180deg, rgba(var(--u-success-rgb), 0.95), rgba(var(--u-success-rgb), 0.6));
}

.energy-fill-dock {
    background: linear-gradient(180deg, rgba(var(--u-primary-rgb), 0.95), rgba(var(--u-primary-rgb), 0.6));
}

.shield-fill-dock {
    background: linear-gradient(180deg, rgba(var(--u-accent-lavender-rgb), 0.9), rgba(var(--u-accent-lavender-rgb), 0.55));
}

/* Порог внимания: половина запаса. */
.stat.is-warn .health-fill-dock,
.stat.is-warn .energy-fill-dock,
.stat.is-warn .shield-fill-dock {
    background: linear-gradient(180deg, rgba(var(--u-warning-rgb), 0.95), rgba(var(--u-warning-rgb), 0.6));
}

.stat.is-warn .stat-value {
    color: var(--u-warning);
}

/* Порог тревоги: четверть запаса. */
.stat.is-low .health-fill-dock,
.stat.is-low .energy-fill-dock,
.stat.is-low .shield-fill-dock {
    background: linear-gradient(180deg, rgba(var(--u-danger-rgb), 1), rgba(var(--u-danger-rgb), 0.65));
    animation: hud-alarm 1.6s ease-in-out infinite;
}

.stat.is-low .stat-label,
.stat.is-low .stat-value {
    color: var(--u-danger);
}

@keyframes hud-alarm {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ========================================
   СЧЁТ — янтарная валюта справа от шкал
   ======================================== */

.bank-btn {
    display: flex;
    align-items: center;
    gap: calc(7px * var(--adaptive-scale));
    height: calc(34px * var(--adaptive-scale));
    min-height: 34px;
    padding: 0 calc(12px * var(--adaptive-scale));
    background: rgba(var(--u-accent-sakura-rgb), var(--u-opacity-faint));
    border: 1px solid var(--u-border-sakura);
    border-radius: var(--u-radius-md);
    color: var(--u-accent-gold);
    cursor: pointer;
    transition: background var(--u-transition), border-color var(--u-transition);
}

.bank-btn:hover {
    background: rgba(var(--u-accent-sakura-rgb), var(--u-opacity-soft));
    border-color: var(--u-accent-gold);
}

.bank-btn:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

/* Телефон: цель нажатия — минимум 44px (--hud-tap). */
@media (max-width: 480px) {
    .bank-btn {
        min-height: var(--hud-tap);
    }
}

.bank-btn:active {
    background: rgba(var(--u-accent-sakura-rgb), var(--u-opacity-medium));
}

.bank-btn .ui-icon {
    width: calc(16px * var(--adaptive-scale));
    height: calc(16px * var(--adaptive-scale));
    min-width: 14px;
    min-height: 14px;
    flex-shrink: 0;
}

.bank-value {
    font-family: var(--u-font-display);
    font-size: var(--hud-font-num);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--u-accent-gold);
    white-space: nowrap;
}

/* Планшет и телефон: док прижимается к верхней кромке с учётом выреза
   и отдаёт ширину экрану, а не полям. */
@media (max-width: 900px) {
    .player-dock {
        top: calc(8px * var(--adaptive-scale) + env(safe-area-inset-top));
        gap: calc(10px * var(--adaptive-scale));
    }

    .player-stats {
        min-width: calc(220px * var(--adaptive-scale));
    }
}

/* ========================================
   ТАБЛИЧКА ПИЛОТА — аватар + ник + полосы.
   На десктопе скрыта (док компактный по центру), на телефоне — главный HUD.
   ======================================== */

.player-avatar,
.player-name-row {
    display: none;
}

.player-main {
    display: contents;
}

@media (max-width: 480px) {
    /* Вертикальный телефон: состояние пилота живёт НАД кораблём
       (полоски в GameRenderer), угловая табличка не нужна.
     * Прячем только содержимое дока — сам контейнер оставляем видимым:
     * внутри сидит fixed-чип денег, и display:none на доке его похоронил бы. */
    .player-dock {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        /* Обязательно гасим backdrop-filter: он делает док containing-block
         * для fixed-чипа денег, и тот прилипает к доку вместо угла экрана. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .player-dock::before {
        display: none;
    }

    .player-info {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Прячем табличку (аватар/ник/полоски) — состояние живёт над кораблём.
     * Сам .player-info НЕ скрываем: внутри сидит fixed-чип денег,
     * display:none на предке похоронил бы и его. */
    .player-avatar,
    .player-main {
        display: none !important;
    }

    .bank-btn {
        position: fixed;
        top: calc(10px + env(safe-area-inset-top));
        right: calc(8px + env(safe-area-inset-right));
        height: 26px;
        min-height: 26px;
        padding: 0 10px;
        gap: 5px;
        background: rgb(6 10 18 / 0.55);
        border: 1px solid rgb(255 255 255 / 0.15);
        border-radius: 13px;
        box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
    }

    .bank-value {
        font-size: 11.5px;
    }
}

/* ========================================
   ЧАТ — справа
   ======================================== */

.right-panel {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    width: calc(320px * var(--adaptive-scale));
    min-width: 260px;
    max-height: min(calc(460px * var(--adaptive-scale)), 62vh);
    padding: calc(10px * var(--adaptive-scale));
    border-right: none;
    border-radius: var(--u-radius-lg) 0 0 var(--u-radius-lg);
    /* Ползунок прозрачности из настроек уважается, но не ниже плотности
       окна: под панелью идёт игровой кадр. */
    opacity: max(var(--chat-opacity, 1), var(--u-opacity-dense));
    transition: right var(--u-transition), opacity var(--u-transition);
}

.right-panel.hidden {
    right: calc(-340px * var(--adaptive-scale));
}

.chat-toggle {
    position: absolute;
    left: calc(-32px * var(--adaptive-scale));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(32px * var(--adaptive-scale));
    min-width: 32px;
    height: var(--hud-tap);
    min-height: 44px;
    /* Стрелки ◀ ▶ в разметку пишет игровой цикл; рисуем шеврон сами,
       чтобы значок был одной толщины с остальными иконками. */
    font-size: 0;
    color: var(--u-text-secondary);
    background: var(--u-bg-hud);
    border: 1px solid var(--u-border);
    border-right: none;
    border-radius: var(--u-radius-md) 0 0 var(--u-radius-md);
    cursor: pointer;
    transition: color var(--u-transition), border-color var(--u-transition);
}

.chat-toggle::before {
    content: '';
    width: calc(8px * var(--adaptive-scale));
    height: calc(8px * var(--adaptive-scale));
    min-width: 7px;
    min-height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--u-transition);
}

.right-panel.hidden .chat-toggle::before {
    transform: rotate(135deg);
}

.chat-toggle:hover,
.chat-toggle:focus-visible {
    color: var(--u-primary);
    border-color: var(--u-border-accent);
}

.chat-toggle:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: -2px;
}

/* Счётчик непрочитанного на язычке — нужен, когда панель свёрнута. */
.chat-toggle-badge {
    position: absolute;
    top: calc(4px * var(--adaptive-scale));
    left: calc(4px * var(--adaptive-scale));
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: var(--u-font-display);
    font-size: var(--hud-font-label);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-bg-deep);
    background: var(--u-primary);
    border-radius: var(--u-radius-full);
}

.chat-toggle-badge.visible {
    display: flex;
}

.chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat h3 {
    display: none;
}

/* Каналы */
.chat-tabs {
    display: flex;
    gap: calc(2px * var(--adaptive-scale));
    margin-bottom: calc(8px * var(--adaptive-scale));
    border-bottom: 1px solid var(--u-border-light);
}

.chat-tab {
    position: relative;
    flex: 1;
    padding: calc(8px * var(--adaptive-scale)) calc(6px * var(--adaptive-scale));
    min-height: calc(34px * var(--adaptive-scale));
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--u-radius-sm) var(--u-radius-sm) 0 0;
    font-family: var(--u-font-display);
    font-size: var(--hud-font-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--u-text-muted);
    cursor: pointer;
    transition: color var(--u-transition), background var(--u-transition), border-color var(--u-transition);
}

.chat-tab:hover:not(:disabled) {
    color: var(--u-text);
    background: var(--u-bg-primary-subtle);
}

.chat-tab:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: -2px;
}

.chat-tab.active {
    color: var(--u-primary);
    background: var(--u-bg-primary-subtle);
    border-bottom-color: var(--u-primary);
}

.chat-tab:disabled {
    color: var(--u-text-dim);
    cursor: not-allowed;
}

.chat-tab .unread-indicator {
    position: absolute;
    top: calc(2px * var(--adaptive-scale));
    right: calc(2px * var(--adaptive-scale));
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hud-font-label);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-bg-deep);
    background: var(--u-primary);
    border-radius: var(--u-radius-full);
}

/* Лента сообщений */
.chat-messages {
    flex: 1;
    min-height: 0;
    padding: calc(6px * var(--adaptive-scale)) calc(2px * var(--adaptive-scale));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--u-primary-rgb), 0.35) transparent;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(var(--u-primary-rgb), 0.3);
    border-radius: var(--u-radius-full);
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--u-primary-rgb), var(--u-opacity-solid));
}

/* Строка, а не пузырь: в ленте важна плотность и ровный левый край. */
.chat-message {
    padding: calc(3px * var(--adaptive-scale)) calc(6px * var(--adaptive-scale));
    font-size: var(--hud-font-text);
    line-height: 1.45;
    color: var(--u-text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chat-message + .chat-message {
    margin-top: calc(1px * var(--adaptive-scale));
}

.chat-time {
    margin-right: calc(6px * var(--adaptive-scale));
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
    color: var(--u-text-dim);
}

.chat-name {
    font-weight: 600;
    color: var(--u-text);
    cursor: pointer;
    transition: color var(--u-transition-fast);
}

.chat-name::after {
    content: ': ';
    font-weight: 400;
    color: var(--u-text-dim);
}

.chat-name:hover {
    color: var(--u-primary);
    text-decoration: underline;
}

.chat-text {
    color: var(--u-text-secondary);
}

/* Отправитель красится по каналу: канал должен читаться в ленте,
   а не только по подсвеченной вкладке. */
.chat-name--local { color: var(--u-text); }
.chat-name--global { color: var(--u-primary); }
.chat-name--clan { color: var(--u-success); }
.chat-name--private { color: var(--u-accent-sakura); }
.chat-name--admin { color: var(--u-accent-gold); }

.chat-message.private {
    background: rgba(var(--u-accent-sakura-rgb), var(--u-opacity-subtle));
    border-left: 2px solid var(--u-accent-sakura);
}

.chat-message.private .chat-text {
    color: var(--u-accent-sakura-light);
}

.chat-message.admin {
    background: rgba(var(--u-accent-gold-rgb), var(--u-opacity-subtle));
    border-left: 2px solid var(--u-accent-gold);
}

.chat-message.system-message {
    color: var(--u-text-muted);
    border-left: 2px solid var(--u-border);
}

.player-message {
    color: var(--u-text-secondary);
}

.player-message .sender {
    font-weight: 600;
    color: var(--u-primary);
}

/* Пустая лента: без объяснения панель выглядит сломанной. */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6px * var(--adaptive-scale));
    padding: calc(24px * var(--adaptive-scale)) calc(12px * var(--adaptive-scale));
    text-align: center;
    font-size: var(--hud-font-text);
    color: var(--u-text-muted);
}

.chat-empty .ui-icon {
    width: calc(24px * var(--adaptive-scale));
    height: calc(24px * var(--adaptive-scale));
    color: var(--u-text-dim);
}

/* Ввод */
.chat-input {
    display: flex;
    gap: calc(6px * var(--adaptive-scale));
    margin-top: calc(8px * var(--adaptive-scale));
}

.chat-input input {
    flex: 1;
    min-width: 0;
    height: calc(38px * var(--adaptive-scale));
    min-height: 38px;
    padding: 0 calc(12px * var(--adaptive-scale));
    background: var(--u-bg-black-light);
    border: 1px solid var(--u-border-light);
    border-radius: var(--u-radius-md);
    font-family: var(--u-font-family);
    font-size: var(--hud-font-text);
    color: var(--u-text);
    transition: border-color var(--u-transition), background var(--u-transition);
}

.chat-input input::placeholder {
    color: var(--u-text-muted);
    font-style: normal;
}

.chat-input input:hover {
    border-color: var(--u-border);
}

.chat-input input:focus {
    outline: none;
    background: var(--u-bg-black-medium);
    border-color: var(--u-primary);
}

.chat-input button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(38px * var(--adaptive-scale));
    min-width: 38px;
    height: calc(38px * var(--adaptive-scale));
    min-height: 38px;
    padding: 0;
    background: var(--u-bg-primary-light);
    border: 1px solid var(--u-border-accent);
    border-radius: var(--u-radius-md);
    color: var(--u-primary);
    cursor: pointer;
    transition: background var(--u-transition), border-color var(--u-transition), color var(--u-transition);
}

.chat-input button:hover {
    background: var(--u-bg-primary-soft);
    border-color: var(--u-primary);
    color: var(--u-primary-light);
}

.chat-input button:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

.chat-input button:active {
    background: rgba(var(--u-primary-rgb), var(--u-opacity-medium));
}

/* На телефоне чат по умолчанию свёрнут в язычок со счётчиком:
   развёрнутая панель съедала бы половину кадра. */
@media (max-width: 900px) {
    .right-panel {
        width: calc(300px * var(--adaptive-scale));
        max-height: 58vh;
    }
}

@media (max-width: 480px) {
    .right-panel {
        top: auto;
        bottom: calc(128px + env(safe-area-inset-bottom));
        transform: none;
        width: calc(100vw - 12px);
        min-width: 0;
        max-height: 42vh;
        border-radius: var(--u-radius-lg) 0 0 var(--u-radius-lg);
    }

    .right-panel.hidden {
        right: calc(-100vw + 12px);
    }

    .chat-tab {
        min-height: 44px;
    }

    .chat-messages {
        font-size: 13px;
    }

    .chat-input input,
    .chat-input button {
        height: 44px;
        min-height: 44px;
    }

    .chat-input button {
        width: 44px;
        min-width: 44px;
    }
}

/* ========================================
   ДОК ДЕЙСТВИЙ — справа внизу
   ======================================== */

.action-buttons {
    position: absolute;
    right: calc(16px * var(--adaptive-scale));
    bottom: calc(16px * var(--adaptive-scale));
    display: flex;
    gap: calc(6px * var(--adaptive-scale));
    padding: calc(6px * var(--adaptive-scale));
    border-radius: var(--u-radius-lg);
    z-index: 100;
}

.action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hud-tap);
    height: var(--hud-tap);
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--u-radius-md);
    color: var(--u-text-secondary);
    cursor: pointer;
    transition: color var(--u-transition), background var(--u-transition), border-color var(--u-transition);
}

.action-btn:hover {
    color: var(--u-primary);
    background: var(--u-bg-primary-subtle);
    border-color: var(--u-border-accent);
}

.action-btn:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
    color: var(--u-primary);
}

.action-btn:active {
    background: var(--u-bg-primary-light);
}

/* Выбранное окно — единственная циановая заливка в доке. */
.action-btn.active,
.action-btn[aria-expanded="true"] {
    color: var(--u-primary);
    background: var(--u-bg-primary-light);
    border-color: var(--u-primary);
    box-shadow: var(--u-glow-primary);
}

.action-btn.menu-btn {
    color: var(--u-text);
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-text {
    display: none;
}

/* Подпись кнопки: в доке одни контуры, и без неё назначение
   угадывается только методом тыка. */
.action-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: calc(4px * var(--adaptive-scale)) calc(8px * var(--adaptive-scale));
    background: var(--u-bg-window-secondary);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm);
    font-family: var(--u-font-display);
    font-size: var(--hud-font-label);
    letter-spacing: 0.02em;
    color: var(--u-text);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--u-transition);
}

.action-btn:hover::after,
.action-btn:focus-visible::after {
    opacity: 1;
}

@media (max-width: 480px) {
    .action-buttons {
        right: calc(8px + env(safe-area-inset-right));
        bottom: calc(8px + env(safe-area-inset-bottom));
        gap: 4px;
        padding: 4px;
    }

    /* Подсказка не помещается над нижним доком телефона и перекрывает
       соседние кнопки — на узком экране её нет. */
    .action-btn::after {
        display: none;
    }
}

/* ========================================
   УСТРОЙСТВА — слева внизу
   ======================================== */

.devices-panel {
    position: absolute;
    left: calc(16px * var(--adaptive-scale));
    bottom: calc(16px * var(--adaptive-scale));
    display: flex;
    align-items: center;
    gap: calc(8px * var(--adaptive-scale));
    padding: calc(6px * var(--adaptive-scale));
    border-radius: var(--u-radius-lg);
    z-index: 100;
}

.devices-panel h3 {
    display: none;
}

.device-slots {
    display: flex;
    gap: calc(6px * var(--adaptive-scale));
}

.device-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--hud-tap);
    height: var(--hud-tap);
    min-width: 44px;
    min-height: 44px;
    background: var(--u-bg-black-light);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--u-transition), background var(--u-transition);
}

.device-slot:hover {
    background: var(--u-bg-primary-subtle);
    border-color: var(--u-border-accent);
}

.device-slot:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

.device-slot:active {
    background: var(--u-bg-primary-light);
}

/* Пусто: пунктир вместо сплошной рамки читается как «сюда можно
   поставить», а не как выключенная кнопка. */
.device-slot.empty {
    background: transparent;
    border-style: dashed;
    border-color: var(--u-border-light);
    opacity: 1;
}

.device-slot.empty:hover {
    border-color: var(--u-border-accent);
}

.device-slot.active {
    background: var(--u-bg-primary-light);
    border-color: var(--u-primary);
    box-shadow: var(--u-glow-primary);
}

.devices-panel .device-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--u-text-secondary);
}

.device-slot.active .device-icon {
    color: var(--u-primary);
}

.devices-panel .device-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.device-name {
    display: none;
}

/* Номер слота — это горячая клавиша, он должен читаться без
   всматривания. */
.device-hotkey {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px calc(4px * var(--adaptive-scale));
    font-family: var(--u-font-display);
    font-size: max(10px, calc(10px * var(--adaptive-scale)));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-text);
    background: var(--u-bg-black-heavy);
    border-bottom-right-radius: var(--u-radius-sm);
    pointer-events: none;
}

.device-slot.active .device-hotkey {
    color: var(--u-primary);
}

/* Перезарядка: слот гасится, а секунды идут поверх крупно и по центру. */
.device-slot.on-cooldown {
    border-color: var(--u-border-light);
    cursor: not-allowed;
}

.device-slot.on-cooldown .device-icon {
    opacity: 0.35;
}

.device-cooldown {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--u-font-display);
    font-size: var(--hud-font-num);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-warning);
    background: var(--u-bg-black-medium);
    pointer-events: none;
}

.device-slot-plus {
    font-size: max(16px, calc(18px * var(--adaptive-scale)));
    font-weight: 300;
    line-height: 1;
    color: var(--u-text-dim);
}

.device-slot.empty:hover .device-slot-plus {
    color: var(--u-primary);
}

/* Устройства и док действий вдвоём не помещаются в 390px по ширине,
   поэтому на телефоне они идут двумя строками: устройства над доком,
   обе строки в зоне большого пальца. */
@media (max-width: 480px) {
    .devices-panel {
        left: calc(8px + env(safe-area-inset-left));
        bottom: calc(68px + env(safe-area-inset-bottom));
        gap: 4px;
        padding: 4px;
    }

    .device-slots {
        gap: 4px;
    }
}

/* ========================================
   СЕЛЕКТОР ЭФФЕКТОВ УСТРОЙСТВА
   ======================================== */

.device-effect-selector {
    z-index: 500;
    min-width: calc(150px * var(--adaptive-scale));
    padding: calc(6px * var(--adaptive-scale));
    border-radius: var(--u-radius-md);
}

.effect-selector-header {
    padding: calc(6px * var(--adaptive-scale)) calc(8px * var(--adaptive-scale));
    margin-bottom: calc(6px * var(--adaptive-scale));
    font-family: var(--u-font-display);
    font-size: var(--hud-font-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--u-text-secondary);
    border-bottom: 1px solid var(--u-border-light);
    max-width: calc(240px * var(--adaptive-scale));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.effect-option {
    padding: calc(8px * var(--adaptive-scale)) calc(10px * var(--adaptive-scale));
    min-height: calc(36px * var(--adaptive-scale));
    display: flex;
    align-items: center;
    font-size: var(--hud-font-text);
    color: var(--u-text-secondary);
    border-radius: var(--u-radius-sm);
    cursor: pointer;
    transition: background var(--u-transition), color var(--u-transition);
}

.effect-option:hover {
    background: var(--u-bg-primary-subtle);
    color: var(--u-text);
}

.effect-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6px * var(--adaptive-scale));
    padding: calc(4px * var(--adaptive-scale));
}

.effect-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hud-tap);
    height: var(--hud-tap);
    min-width: 44px;
    min-height: 44px;
    background: var(--u-bg-black-light);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    cursor: pointer;
    transition: background var(--u-transition), border-color var(--u-transition);
}

.effect-button:hover {
    background: var(--u-bg-primary-subtle);
    border-color: var(--u-border-accent);
}

.effect-button:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

.effect-button:active {
    background: var(--u-bg-primary-light);
}

.effect-number {
    position: absolute;
    top: 1px;
    right: calc(3px * var(--adaptive-scale));
    font-family: var(--u-font-display);
    font-size: max(10px, calc(10px * var(--adaptive-scale)));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-text-muted);
}

.effect-icon {
    width: calc(26px * var(--adaptive-scale));
    height: calc(26px * var(--adaptive-scale));
    object-fit: contain;
}

/* ========================================
   ВЫБРАННЫЙ ОБЪЕКТ — над доком по центру
   ======================================== */

.selected-info-panel {
    position: absolute;
    left: 50%;
    bottom: calc(84px * var(--adaptive-scale));
    transform: translateX(-50%) translateY(6px);
    display: flex;
    align-items: center;
    gap: calc(12px * var(--adaptive-scale));
    padding: calc(8px * var(--adaptive-scale)) calc(12px * var(--adaptive-scale));
    border-radius: var(--u-radius-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--u-transition), transform var(--u-transition);
    z-index: 200;
}

.selected-info-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Телефон: крестик выбранной цели — не меньше 44px. */
@media (max-width: 480px) {
    .selected-close-btn {
        width: var(--hud-tap);
        height: var(--hud-tap);
        min-width: var(--hud-tap);
        min-height: var(--hud-tap);
    }
}

.selected-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(28px * var(--adaptive-scale));
    height: calc(28px * var(--adaptive-scale));
    min-width: 28px;
    min-height: 28px;
    background: transparent;
    border: 1px solid var(--u-border-light);
    border-radius: var(--u-radius-sm);
    color: var(--u-text-muted);
    cursor: pointer;
    transition: color var(--u-transition), border-color var(--u-transition), background var(--u-transition);
}

.selected-close-btn:hover {
    color: var(--u-danger);
    border-color: var(--u-danger);
    background: var(--u-bg-danger-light);
}

.selected-close-btn:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

.selected-header {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--adaptive-scale));
}

.selected-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(36px * var(--adaptive-scale));
    height: calc(36px * var(--adaptive-scale));
    min-width: 32px;
    min-height: 32px;
    background: var(--u-bg-black-light);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm);
    overflow: hidden;
}

.selected-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.selected-main {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--adaptive-scale));
    min-width: calc(120px * var(--adaptive-scale));
}

.selected-name {
    font-family: var(--u-font-display);
    font-size: var(--hud-font-text);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--u-text);
    max-width: calc(160px * var(--adaptive-scale));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Число живёт внутри полосы, поэтому полоса держит его высоту целиком:
   в прежние 10px подпись не помещалась и срезалась по нижнему краю. */
.selected-health-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(18px * var(--adaptive-scale));
    min-height: 16px;
    background: var(--u-bg-black-medium);
    border: 1px solid var(--u-border-light);
    border-radius: var(--u-radius-sm);
    overflow: hidden;
}

.selected-health-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(var(--u-success-rgb), 0.55);
    transition: width var(--u-transition);
}

.selected-health-value {
    position: relative;
    font-family: var(--u-font-display);
    font-size: var(--hud-font-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--u-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.selected-info-rows {
    display: none;
}

.selected-info-row {
    display: flex;
    justify-content: space-between;
    gap: calc(8px * var(--adaptive-scale));
    font-size: var(--hud-font-text);
}

.selected-info-label {
    color: var(--u-text-muted);
}

.selected-info-value {
    color: var(--u-text);
}

.selected-actions {
    display: flex;
    gap: calc(4px * var(--adaptive-scale));
}

.selected-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hud-tap);
    height: var(--hud-tap);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    color: var(--u-text-secondary);
    cursor: pointer;
    transition: color var(--u-transition), border-color var(--u-transition), background var(--u-transition);
}

.selected-action-btn:hover {
    color: var(--u-primary);
    border-color: var(--u-primary);
    background: var(--u-bg-primary-subtle);
}

.selected-action-btn:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

.selected-action-btn:active {
    background: var(--u-bg-primary-light);
}

.selected-action-btn .action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.selected-action-btn .action-label {
    display: none;
}

/* Действие с последствиями красится по смыслу, а не для украшения. */
.selected-action-btn[data-action="attack"]:hover {
    color: var(--u-danger);
    border-color: var(--u-danger);
    background: var(--u-bg-danger-light);
}

.selected-action-btn[data-action="land"]:hover {
    color: var(--u-success);
    border-color: var(--u-success);
    background: var(--u-bg-success-light);
}

.selected-action-btn[data-action="team"]:hover {
    color: var(--u-accent-lavender);
    border-color: var(--u-accent-lavender);
    background: var(--u-bg-lavender-light);
}

@media (max-width: 480px) {
    .selected-info-panel {
        left: 8px;
        right: 8px;
        bottom: calc(64px + env(safe-area-inset-bottom));
        transform: translateY(6px);
        gap: 8px;
        padding: 8px;
    }

    .selected-info-panel.visible {
        transform: translateY(0);
    }

    .selected-main {
        flex: 1;
        min-width: 0;
    }

    .selected-name {
        max-width: none;
    }
}

/* ========================================
   КНОПКА «НА КОРАБЛЬ» — под радаром
   ======================================== */

.to-ship-btn {
    position: absolute;
    top: calc(172px * var(--adaptive-scale));
    left: calc(12px * var(--adaptive-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hud-tap);
    height: var(--hud-tap);
    min-width: 44px;
    min-height: 44px;
    background: var(--u-bg-hud);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    color: var(--u-text-secondary);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--u-transition), color var(--u-transition), border-color var(--u-transition);
    z-index: 15;
}

.to-ship-btn:hover {
    color: var(--u-primary);
    border-color: var(--u-border-accent);
}

.to-ship-btn:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

.to-ship-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

.to-ship-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 480px) {
    .to-ship-btn {
        top: calc(120px * var(--adaptive-scale) + env(safe-area-inset-top));
        left: calc(8px + env(safe-area-inset-left));
    }
}

/* ========================================
   МЕТКИ И ЛИНИИ НА КАРТЕ СИСТЕМЫ
   ======================================== */

.map-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.map-lines line {
    stroke: rgba(var(--u-primary-rgb), 0.28);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.map-lines .radius-circle {
    fill: none;
    stroke: rgba(var(--u-primary-rgb), var(--u-opacity-strong));
    stroke-width: 1;
    stroke-dasharray: 6 8;
}

.system-label {
    font-family: var(--u-font-display);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--u-text);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
    user-select: none;
    z-index: 10;
}

.system-info {
    position: absolute;
    min-width: calc(200px * var(--adaptive-scale));
    max-width: calc(260px * var(--adaptive-scale));
    padding: calc(12px * var(--adaptive-scale));
    background: var(--u-bg-window-primary);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    box-shadow: var(--u-shadow);
    z-index: 20;
}

.system-info-title {
    margin-bottom: calc(8px * var(--adaptive-scale));
    padding-bottom: calc(6px * var(--adaptive-scale));
    font-family: var(--u-font-display);
    font-size: var(--hud-font-title);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--u-text);
    border-bottom: 1px solid var(--u-border-light);
}

.system-info-content {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--adaptive-scale));
}

.system-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10px * var(--adaptive-scale));
    font-size: var(--hud-font-text);
}

.system-info-label {
    color: var(--u-text-muted);
}

.system-info-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--u-text);
}

.system-info-value.reachable {
    color: var(--u-success);
}

.system-info-value.unreachable {
    color: var(--u-danger);
}

/* ========================================
   СКРЫТЫЕ ОСТАТКИ СТАРОЙ РАЗМЕТКИ
   ======================================== */

.target-info,
.top-panel,
.left-panel,
.bottom-panel,
.quick-actions,
.quick-btn,
.game-log {
    display: none !important;
}

/* ========================================
   ИКОНКИ HUD
   ======================================== */

.device-icon .ui-icon,
.device-icon-fallback .ui-icon,
.slot-icon .ui-icon {
    width: calc(22px * var(--adaptive-scale));
    height: calc(22px * var(--adaptive-scale));
    min-width: 18px;
    min-height: 18px;
}

.device-icon-fallback.empty .ui-icon {
    color: var(--u-text-dim);
}

.droid-slot-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--u-text-muted);
}

.droid-slot-icon .ui-icon {
    width: calc(18px * var(--adaptive-scale));
    height: calc(18px * var(--adaptive-scale));
    min-width: 16px;
    min-height: 16px;
}

.action-btn .btn-icon .ui-icon,
.to-ship-btn .btn-icon .ui-icon {
    width: calc(22px * var(--adaptive-scale));
    height: calc(22px * var(--adaptive-scale));
    min-width: 20px;
    min-height: 20px;
}

.selected-action-btn .ui-icon {
    width: calc(18px * var(--adaptive-scale));
    height: calc(18px * var(--adaptive-scale));
    min-width: 16px;
    min-height: 16px;
}

.selected-close-btn .ui-icon,
#chatSend .ui-icon {
    width: calc(16px * var(--adaptive-scale));
    height: calc(16px * var(--adaptive-scale));
    min-width: 14px;
    min-height: 14px;
}

/* ========================================
   ДВИЖЕНИЕ
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .game-hud *,
    .selected-info-panel *,
    .device-effect-selector * {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}