/* ========================================
   UNIFIED UI COMPONENTS - AAA GAME STYLE
   Расширение styles-unified.css
   Содержит ТОЛЬКО уникальные компоненты
   ======================================== */

/* ========================================
   AVATAR (расширенный вариант)
   ======================================== */

.unified-avatar {
    width: 100%;
    aspect-ratio: 1;
    max-height: calc(170px * var(--adaptive-scale));
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 30%, rgba(var(--u-accent-gold-rgb), 0.45) 0%, rgba(var(--u-danger-rgb), 0.25) 30%, rgba(var(--u-accent-lavender-rgb), 0.15) 55%, rgba(var(--u-night-rgb), 0.6) 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--u-space-lg);
    border: 2px solid rgba(var(--u-line-rgb), 0.4);
    box-shadow:
        inset 0 0 32px rgba(var(--u-accent-gold-rgb), 0.25),
        0 0 28px rgba(var(--u-primary-rgb), 0.35),
        0 8px 22px rgba(var(--u-navy-rgb), 0.5);
    overflow: hidden;
    position: relative;
}

.unified-avatar::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(var(--u-accent-gold-rgb), 0.6),
        rgba(var(--u-danger-rgb), 0.5),
        rgba(var(--u-accent-lavender-rgb), 0.5),
        rgba(var(--u-primary-rgb), 0.5),
        rgba(var(--u-accent-gold-rgb), 0.6));
    opacity: 0.7;
    z-index: -1;
    animation: avatarRotate 12s linear infinite;
    filter: blur(6px);
}

@keyframes avatarRotate {
    to { transform: rotate(360deg); }
}

.unified-avatar img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(var(--u-accent-gold-rgb), 0.55)) drop-shadow(0 0 24px rgba(var(--u-danger-rgb), 0.35));
}

/* ========================================
   TABS (anime pill tabs)
   ======================================== */

.unified-tabs {
    display: flex;
    gap: var(--u-space-xs);
    padding: var(--u-space-xs);
    border-radius: var(--u-radius-full);
    background:
        linear-gradient(180deg, rgba(var(--u-line-rgb), 0.08), rgba(var(--u-danger-rgb), 0.04)),
        linear-gradient(180deg, rgba(var(--u-panel-rgb), 0.7), rgba(var(--u-night-rgb), 0.85));
    border: 1.5px solid rgba(var(--u-line-rgb), 0.22);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.1),
        0 4px 14px rgba(var(--u-navy-rgb), 0.35);
}

.unified-tabs::-webkit-scrollbar { display: none; }

.unified-tab {
    flex: 1;
    min-width: calc(70px * var(--adaptive-scale));
    padding: var(--u-space-sm) var(--u-space-lg);
    font-size: var(--u-font-sm);
    text-align: center;
    border-radius: var(--u-radius-full);
    cursor: pointer;
    color: var(--u-text-secondary);
    transition: var(--u-transition);
    border: none;
    background: transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-xs);
    font-weight: 600;
    letter-spacing: 0.3px;
    position: relative;
}

.unified-tab:hover {
    color: var(--u-text);
    background: linear-gradient(135deg, rgba(var(--u-primary-rgb), 0.15), rgba(var(--u-danger-rgb), 0.1));
}

.unified-tab.active {
    background: linear-gradient(135deg, var(--u-primary-light) 0%, var(--u-primary-light) 50%, var(--u-accent-lavender) 100%);
    color: var(--u-bg-dark);
    font-weight: 700;
    box-shadow:
        0 0 20px rgba(var(--u-primary-rgb), 0.55),
        0 0 36px rgba(var(--u-accent-lavender-rgb), 0.3),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.4);
    text-shadow: 0 1px 0 rgba(var(--u-white-rgb), 0.4);
}

/* ========================================
   PANELS (расширенный вариант)
   ======================================== */

.unified-panel {
    flex: 1;
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 60%),
        linear-gradient(180deg, rgba(var(--u-panel-rgb), 0.55), rgba(var(--u-night-rgb), 0.7));
    border-radius: var(--u-radius-xl);
    border: 1.5px solid rgba(var(--u-line-rgb), 0.18);
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
    overflow: auto;
    box-shadow:
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.08),
        0 6px 18px rgba(var(--u-navy-rgb), 0.35);
}

.unified-section {
    border-radius: var(--u-radius-lg);
    padding: var(--u-space-md);
    border: 1.5px solid rgba(var(--u-line-rgb), 0.2);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.06), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.6), rgba(var(--u-navy-rgb), 0.75));
    box-shadow:
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.08),
        0 4px 14px rgba(var(--u-navy-rgb), 0.3);
}

.unified-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--u-space-sm);
}

/* ========================================
   SLOTS (Inventory Grid)
   ======================================== */

/* Единая ячейка предмета для инвентаря, магазина, хранилища и обмена.

   Раньше каждое окно рисовало свой слот: разные скругления, разная реакция на
   наведение, разное место бейджей. Одинаковый по смыслу элемент обязан вести
   себя одинаково, поэтому визуал слота живёт здесь, а окна добавляют только
   раскладку сетки.

   Редкость передаётся классом `rarity-*` и разворачивается в две переменные:
   `--slot-rarity` красит кант и бейдж, `--slot-rarity-rgb` — подложку и свет.
   Так добавление шестой редкости не требует править шесть блоков правил. */

.unified-slot,
.inventory-slot,
.shop-item-slot {
    --slot-rarity: var(--u-text-muted);
    --slot-rarity-rgb: 117, 137, 168;
}

.unified-slot.rarity-rare,
.inventory-slot.rarity-rare,
.shop-item-slot.rarity-rare {
    --slot-rarity: var(--u-primary);
    --slot-rarity-rgb: var(--u-primary-rgb);
}

.unified-slot.rarity-epic,
.inventory-slot.rarity-epic,
.shop-item-slot.rarity-epic {
    --slot-rarity: var(--u-accent-lavender);
    --slot-rarity-rgb: var(--u-accent-lavender-rgb);
}

.unified-slot.rarity-legendary,
.inventory-slot.rarity-legendary,
.shop-item-slot.rarity-legendary {
    --slot-rarity: var(--u-accent-gold);
    --slot-rarity-rgb: var(--u-accent-gold-rgb);
}

/* auto-fill, а не фиксированные 6 колонок: на 390px шесть колонок давали
   ячейку в 48px, в которую не попадает палец и не помещается бейдж. */
.unified-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(84px * var(--adaptive-scale)), 1fr));
    gap: var(--u-space-sm);
}

.unified-slot {
    position: relative;
    border-radius: var(--u-radius-md);
    aspect-ratio: 1;
    background:
        linear-gradient(180deg, rgba(var(--slot-rarity-rgb), 0.10), transparent 60%),
        var(--u-bg-card);
    border: 1px solid rgba(var(--slot-rarity-rgb), 0.38);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--u-transition);
}

.unified-slot:hover {
    border-color: var(--slot-rarity);
    background:
        linear-gradient(180deg, rgba(var(--slot-rarity-rgb), 0.18), transparent 60%),
        var(--u-bg-card-hover);
}

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

/* Выбор — всегда циан, независимо от редкости: иначе «что выбрано» читается
   по-разному у обычного и легендарного предмета. */
.unified-slot.selected {
    border-color: var(--u-primary);
    box-shadow:
        0 0 0 1px var(--u-primary),
        var(--u-glow-primary, 0 0 16px rgba(var(--u-primary-rgb), 0.35));
    background:
        linear-gradient(180deg, rgba(var(--u-primary-rgb), 0.16), transparent 60%),
        var(--u-bg-card-hover);
}

.unified-slot.empty {
    cursor: default;
    border-style: dashed;
    border-color: var(--u-border-light);
    background: var(--u-bg-row);
    box-shadow: none;
}

.unified-slot.empty:hover {
    border-color: var(--u-border);
    background: var(--u-bg-row);
}

.unified-slot.disabled,
.unified-slot.locked {
    cursor: not-allowed;
    border-color: rgba(var(--u-danger-rgb), 0.30);
    opacity: var(--u-opacity-solid);
    filter: saturate(0.4);
}

.unified-slot.dragging {
    opacity: var(--u-opacity-strong);
    cursor: grabbing;
}

.unified-slot.drop-target {
    border-color: var(--u-success);
    border-style: dashed;
    background: rgba(var(--u-success-rgb), var(--u-opacity-faint));
}

.unified-slot-icon {
    width: 70%;
    height: 70%;
    border-radius: var(--u-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.unified-slot-icon img { width: 100%; height: 100%; object-fit: contain; }

/* Заглушка, когда картинки предмета нет: подложка берёт цвет редкости,
   поэтому пустая ячейка всё равно отличается от обычной от эпической. */
.unified-slot-icon.placeholder,
.unified-slot-icon.gold,
.unified-slot-icon.green,
.unified-slot-icon.blue,
.unified-slot-icon.dark,
.unified-slot-icon.pink,
.unified-slot-icon.sakura,
.unified-slot-icon.lavender,
.unified-slot-icon.purple {
    background: rgba(var(--slot-rarity-rgb), var(--u-opacity-light));
    border: 1px solid rgba(var(--slot-rarity-rgb), var(--u-opacity-medium));
    color: var(--slot-rarity);
}

/* Бейджи слота — общие для всех окон.

   Раньше они позиционировались правилом `.inventory-slot-level`, а следом
   в файле шёл `[class*="-slot"] { position: relative }`, под который бейдж
   попадал сам (в его имени тоже есть «-slot») и возвращался в поток: подпись
   уезжала под нижнюю границу и обрезалась `overflow: hidden`. Здесь бейджи
   прибиты к углам с отступом внутрь, чтобы кант слота их не резал. */
.unified-slot-badge {
    position: absolute;
    z-index: 2;
    font-family: var(--u-font-display);
    font-size: var(--u-font-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: calc(3px * var(--adaptive-scale)) calc(5px * var(--adaptive-scale));
    border-radius: var(--u-radius-sm);
    pointer-events: none;
    max-width: calc(100% - 8px * var(--adaptive-scale));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unified-slot-badge.count {
    top: calc(3px * var(--adaptive-scale));
    left: calc(3px * var(--adaptive-scale));
    background: var(--u-bg-black-medium);
    border: 1px solid var(--u-border-light);
    color: var(--u-text);
}

.unified-slot-badge.level {
    bottom: calc(3px * var(--adaptive-scale));
    right: calc(3px * var(--adaptive-scale));
    background: var(--u-bg-black-medium);
    border: 1px solid rgba(var(--slot-rarity-rgb), var(--u-opacity-strong));
    color: var(--slot-rarity);
}

/* ========================================
   SETTINGS (дополнительные стили)
   Основные стили в styles-unified.css
   ======================================== */

.unified-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--u-space-md) var(--u-space-lg);
    background: rgba(var(--u-night-rgb), var(--u-opacity-overlay));
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    margin-bottom: var(--u-space-sm);
    transition: var(--u-transition);
}

.unified-setting-row:hover { 
    background: var(--u-bg-card-hover); 
    transform: translateX(2px); 
}

.unified-setting-label { 
    color: var(--u-text-secondary); 
    font-size: var(--u-font-md); 
}

/* NOTE: .unified-toggle, .unified-slider, .unified-select 
   определены в styles-unified.css (секция 7. FORM ELEMENTS) */

/* ========================================
   QUESTS (Список квестов)
   ======================================== */

.unified-quest-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md) var(--u-space-lg);
    background: rgba(var(--u-night-rgb), var(--u-opacity-overlay));
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    margin-bottom: var(--u-space-sm);
    cursor: pointer;
    transition: var(--u-transition);
    border-left: 3px solid var(--u-text-muted);
}

.unified-quest-item:hover { 
    background: var(--u-bg-card-hover); 
    transform: translateX(4px); 
    border-left-color: var(--u-primary); 
}

.unified-quest-item.active { 
    border-color: var(--u-primary); 
    background: rgba(var(--u-primary-rgb), var(--u-opacity-light)); 
}

.unified-quest-avatar {
    width: calc(44px * var(--adaptive-scale));
    height: calc(44px * var(--adaptive-scale));
    border-radius: var(--u-radius-full);
    background: var(--u-bg-medium);
    border: 2px solid var(--u-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--u-font-2xl);
    flex-shrink: 0;
}

.unified-quest-info { flex: 1; min-width: 0; }

.unified-quest-giver { 
    font-size: var(--u-font-xs); 
    color: var(--u-text-muted); 
    margin-bottom: calc(2px * var(--adaptive-scale)); 
}

.unified-quest-name { 
    font-size: var(--u-font-md); 
    color: var(--u-text); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.unified-quest-status {
    width: calc(10px * var(--adaptive-scale));
    height: calc(10px * var(--adaptive-scale));
    border-radius: var(--u-radius-full);
    flex-shrink: 0;
}

.unified-quest-status.available { 
    background: var(--u-warning); 
    box-shadow: 0 0 8px var(--u-warning); 
}

.unified-quest-status.active { 
    background: var(--u-success); 
    box-shadow: 0 0 8px var(--u-success); 
}

.unified-quest-status.completed { 
    background: var(--u-primary); 
    box-shadow: 0 0 8px var(--u-primary); 
}

/* NOTE: .unified-empty определён в styles-unified.css (секция 9. STATES) */

/* ========================================
   ARENA - специфичные стили
   ======================================== */

.arena-icon {
    width: calc(80px * var(--adaptive-scale));
    height: calc(80px * var(--adaptive-scale));
    margin: var(--u-space-lg) auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(var(--u-danger-rgb), var(--u-opacity-soft)), transparent 70%);
    border-radius: var(--u-radius-full);
    border: 2px solid rgba(var(--u-danger-rgb), var(--u-opacity-medium));
}

.arena-desc { 
    color: var(--u-text-secondary); 
    font-size: var(--u-font-sm); 
    line-height: 1.5; 
    padding: var(--u-space-sm) 0; 
}

/* Arena requests list */
.arena-requests-header {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr calc(124px * var(--adaptive-scale));
    gap: var(--u-space-lg);
    padding: var(--u-space-md) var(--u-space-lg);
    background: var(--u-bg-medium);
    border-radius: var(--u-radius-md) var(--u-radius-md) 0 0;
    border-bottom: 1px solid var(--u-border-light);
}

.arena-header-cell {
    color: var(--u-primary);
    font-size: var(--u-font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.arena-requests-list { 
    flex: 1; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: calc(2px * var(--adaptive-scale)); 
}

.arena-request-row {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr calc(124px * var(--adaptive-scale));
    gap: var(--u-space-lg);
    padding: var(--u-space-md) var(--u-space-lg);
    background: var(--u-bg-row);
    border-radius: var(--u-radius-sm);
    cursor: pointer;
    transition: var(--u-transition);
    border-left: 3px solid transparent;
}

.arena-request-row:hover {
    background: var(--u-bg-card-hover);
    border-left-color: var(--u-primary);
    transform: translateX(2px);
}

.arena-cell { 
    display: flex; 
    align-items: center; 
    color: var(--u-text); 
    font-size: var(--u-font-md); 
}

.arena-col-players .players-current { color: var(--u-primary); font-weight: 600; }
.arena-col-players .players-max { color: var(--u-text-muted); }

.arena-join-btn {
    padding: var(--u-space-sm) var(--u-space-lg);
    background: linear-gradient(135deg, rgba(var(--u-danger-rgb), var(--u-opacity-medium)), rgba(var(--u-danger-rgb), var(--u-opacity-soft)));
    border: 1px solid rgba(var(--u-danger-rgb), var(--u-opacity-strong));
    border-radius: var(--u-radius-sm);
    color: var(--u-danger);
    font-size: var(--u-font-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--u-transition);
}

.arena-join-btn:hover {
    background: linear-gradient(135deg, rgba(var(--u-danger-rgb), var(--u-opacity-solid)), rgba(var(--u-danger-rgb), var(--u-opacity-strong)));
    border-color: var(--u-danger);
    color: var(--u-text);
    transform: scale(1.05);
}

/* Arena empty/loading states - используем unified-* из styles-unified.css */
.arena-empty-state, .arena-loading { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: var(--u-space-lg); 
    color: var(--u-text-muted); 
}

.arena-loading-spinner {
    width: calc(24px * var(--adaptive-scale)); 
    height: calc(24px * var(--adaptive-scale));
    border: calc(3px * var(--adaptive-scale)) solid var(--u-border);
    border-top-color: var(--u-primary);
    border-radius: var(--u-radius-full);
    animation: unified-spin 1s linear infinite;
}

/* Arena create form */
.arena-create-content { 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: var(--u-space-3xl); 
}

.arena-create-header { 
    text-align: center; 
    margin-bottom: var(--u-space-2xl); 
}

.arena-create-title { 
    color: var(--u-text); 
    font-size: var(--u-font-3xl); 
    font-weight: 600; 
    margin: 0 0 var(--u-space-sm) 0; 
}

.arena-create-subtitle { 
    color: var(--u-text-muted); 
    font-size: var(--u-font-md); 
    margin: 0; 
}

.arena-create-form { 
    width: 100%; 
    max-width: calc(600px * var(--adaptive-scale)); 
    display: flex; 
    flex-direction: column; 
    gap: var(--u-space-xl); 
}

.arena-create-field { 
    display: flex; 
    flex-direction: column; 
    gap: var(--u-space-md); 
}

.arena-create-label { 
    color: var(--u-text-secondary); 
    font-size: var(--u-font-md); 
    font-weight: 500; 
}

.arena-battle-types { 
    display: flex; 
    flex-wrap: wrap; 
    gap: var(--u-space-sm); 
}

.arena-type-btn {
    flex: 1; 
    min-width: calc(100px * var(--adaptive-scale)); 
    padding: var(--u-space-md) var(--u-space-lg);
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: var(--u-space-xs);
    background: var(--u-bg-medium); 
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm); 
    cursor: pointer; 
    transition: var(--u-transition);
}

.arena-type-btn:hover { 
    background: var(--u-bg-card-hover); 
    border-color: var(--u-primary); 
}

.arena-type-btn.active { 
    background: rgba(var(--u-primary-rgb), var(--u-opacity-light)); 
    border-color: var(--u-primary); 
    box-shadow: var(--u-glow-primary); 
}

.arena-type-btn .type-name { 
    color: var(--u-text); 
    font-size: var(--u-font-md); 
    font-weight: 600; 
}

.arena-type-btn .type-cost { 
    color: var(--u-text-muted); 
    font-size: var(--u-font-sm); 
}

.arena-type-btn.active .type-cost { 
    color: var(--u-primary); 
}

.arena-players-selector { 
    display: flex; 
    gap: var(--u-space-sm); 
}

.arena-players-btn {
    width: calc(48px * var(--adaptive-scale)); 
    height: calc(48px * var(--adaptive-scale)); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: var(--u-bg-medium); 
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm); 
    color: var(--u-text); 
    font-size: var(--u-font-xl); 
    font-weight: 600;
    cursor: pointer; 
    transition: var(--u-transition);
}

.arena-players-btn:hover { 
    background: var(--u-bg-card-hover); 
    border-color: var(--u-primary); 
}

.arena-players-btn.active { 
    background: rgba(var(--u-primary-rgb), var(--u-opacity-light)); 
    border-color: var(--u-primary); 
    box-shadow: var(--u-glow-primary); 
}

/* Arena toggle - используем unified-toggle стиль */
.arena-toggle-field { 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
}

.arena-toggle-container { 
    display: flex; 
    align-items: center; 
    gap: var(--u-space-md); 
}

.arena-toggle {
    width: calc(48px * var(--adaptive-scale)); 
    height: calc(26px * var(--adaptive-scale)); 
    background: var(--u-border); 
    border: none;
    border-radius: calc(13px * var(--adaptive-scale)); 
    cursor: pointer; 
    position: relative; 
    transition: var(--u-transition);
}

.arena-toggle .toggle-slider {
    position: absolute; 
    top: calc(3px * var(--adaptive-scale)); 
    left: calc(3px * var(--adaptive-scale)); 
    width: calc(20px * var(--adaptive-scale)); 
    height: calc(20px * var(--adaptive-scale));
    background: var(--u-text); 
    border-radius: var(--u-radius-full); 
    transition: transform var(--u-transition);
}

.arena-toggle.active { 
    background: var(--u-primary); 
}

.arena-toggle.active .toggle-slider { 
    transform: translateX(calc(22px * var(--adaptive-scale))); 
}

.arena-toggle-hint { 
    color: var(--u-text-muted); 
    font-size: var(--u-font-sm); 
}

.arena-create-summary { 
    padding: var(--u-space-lg); 
    background: var(--u-bg-medium); 
    border-radius: var(--u-radius-sm); 
    border: 1px solid var(--u-border); 
}

.summary-title { 
    color: var(--u-primary); 
    font-size: var(--u-font-md); 
    font-weight: 600; 
    margin-bottom: var(--u-space-md); 
}

.summary-row { 
    display: flex; 
    justify-content: space-between; 
    padding: calc(6px * var(--adaptive-scale)) 0; 
}

.summary-label { 
    color: var(--u-text-muted); 
    font-size: var(--u-font-sm); 
}

.summary-value { 
    color: var(--u-text); 
    font-size: var(--u-font-sm); 
    font-weight: 500; 
}

.summary-award { 
    color: var(--u-success) !important; 
}

.arena-create-buttons { 
    display: flex; 
    gap: var(--u-space-md); 
    justify-content: center; 
    margin-top: var(--u-space-xl); 
}

.arena-error {
    position: absolute; 
    bottom: calc(80px * var(--adaptive-scale)); 
    left: 50%; 
    transform: translateX(-50%);
    padding: var(--u-space-md) var(--u-space-xl); 
    background: rgba(var(--u-danger-rgb), 0.9); 
    border-radius: var(--u-radius-sm);
    color: var(--u-text); 
    font-size: var(--u-font-md); 
    animation: unified-fade-in 0.3s ease;
}

/* Arena battle (waiting) */
.battle-info-row { 
    display: flex; 
    justify-content: space-between; 
    padding: var(--u-space-sm) var(--u-space-md); 
    background: var(--u-bg-medium); 
    border-radius: var(--u-radius-sm); 
    margin-bottom: calc(6px * var(--adaptive-scale)); 
}

.battle-info-label { 
    color: var(--u-text-muted); 
    font-size: var(--u-font-sm); 
}

.battle-info-value { 
    color: var(--u-text); 
    font-size: var(--u-font-sm); 
    font-weight: 500; 
}

.battle-award { 
    color: var(--u-success) !important; 
}

.arena-battle-status { 
    padding: var(--u-space-md); 
    background: var(--u-bg-medium); 
    border-radius: var(--u-radius-sm); 
    text-align: center; 
    color: var(--u-text-secondary); 
    font-size: var(--u-font-md); 
}

.arena-battle-status.waiting { 
    color: var(--u-warning); 
}

.arena-battle-status.starting { 
    color: var(--u-success); 
    animation: unified-pulse 1s ease-in-out infinite; 
}

.arena-ready-btn.is-ready { 
    background: linear-gradient(135deg, rgba(var(--u-success-rgb), var(--u-opacity-medium)), rgba(var(--u-success-rgb), var(--u-opacity-soft))) !important; 
    border-color: rgba(var(--u-success-rgb), var(--u-opacity-solid)) !important; 
    color: var(--u-success) !important; 
}

/* NOTE: .unified-btn-danger определён в styles-unified.css */

/* Arena players list */
.arena-players-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom: var(--u-space-lg); 
    border-bottom: 1px solid var(--u-border); 
    margin-bottom: var(--u-space-lg); 
}

.arena-players-title { 
    color: var(--u-text); 
    font-size: var(--u-font-xl); 
    font-weight: 600; 
    margin: 0; 
}

.arena-players-count { 
    color: var(--u-primary); 
    font-size: var(--u-font-md); 
    font-weight: 500; 
}

.arena-players-list { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: var(--u-space-sm); 
    overflow-y: auto; 
}

.arena-player-row {
    display: flex; 
    align-items: center; 
    gap: var(--u-space-md); 
    padding: var(--u-space-md) var(--u-space-lg);
    background: var(--u-bg-medium); 
    border-radius: var(--u-radius-sm);
    border-left: 3px solid rgba(var(--u-warning-rgb), var(--u-opacity-solid)); 
    transition: var(--u-transition);
}

.arena-player-row.ready { 
    border-left-color: var(--u-success); 
    background: rgba(var(--u-success-rgb), var(--u-opacity-soft)); 
}

.arena-player-ready-indicator { 
    width: calc(24px * var(--adaptive-scale)); 
    height: calc(24px * var(--adaptive-scale)); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: var(--u-font-lg); 
}

.ready-icon { color: var(--u-success); }
.not-ready-icon { color: var(--u-text-muted); }

.arena-player-avatar { 
    width: calc(40px * var(--adaptive-scale)); 
    height: calc(40px * var(--adaptive-scale)); 
    border-radius: var(--u-radius-full); 
    background-color: var(--u-bg-medium); 
    background-size: cover; 
    background-position: center; 
    border: 2px solid var(--u-border-light); 
}

.arena-player-info { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: calc(2px * var(--adaptive-scale)); 
}

.arena-player-name { 
    color: var(--u-text); 
    font-size: var(--u-font-md); 
    font-weight: 500; 
}

.arena-player-ship { 
    color: var(--u-text-muted); 
    font-size: var(--u-font-sm); 
}

.arena-player-status { 
    color: var(--u-text-muted); 
    font-size: var(--u-font-sm); 
    padding: var(--u-space-xs) var(--u-space-sm); 
    background: var(--u-bg-dark); 
    border-radius: var(--u-radius-sm); 
}

.arena-player-row.ready .arena-player-status { 
    color: var(--u-success); 
    background: rgba(var(--u-success-rgb), var(--u-opacity-light)); 
}

.arena-players-empty { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--u-text-muted); 
    font-size: var(--u-font-md); 
}

/* ========================================
   RESPONSIVE
   Адаптация через --adaptive-scale
   Media queries убраны - масштабирование непрерывное
   ======================================== */

/* ========================================
   BANK STYLES
   ======================================== */

.bank-section {
    margin-bottom: var(--u-space-xl);
    padding: var(--u-space-lg);
    background: var(--u-bg-card);
    border-radius: var(--u-radius-lg);
    border: 1px solid var(--u-border);
}

.bank-form {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-lg);
}

.bank-input-group {
    display: flex;
    gap: var(--u-space-sm);
}

.bank-input-group .unified-input {
    flex: 1;
}

.bank-fee-info {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    background: rgba(var(--u-warning-rgb), var(--u-opacity-light));
    border-radius: var(--u-radius-md);
    border: 1px solid rgba(var(--u-warning-rgb), var(--u-opacity-soft));
}

.bank-fee-info .fee-label {
    color: var(--u-text-muted);
    font-size: var(--u-font-sm);
}

.bank-fee-info .fee-value {
    color: var(--u-warning);
    font-size: var(--u-font-md);
    font-weight: 600;
}

.bank-fee-info .fee-total {
    color: var(--u-text-secondary);
    font-size: var(--u-font-sm);
    margin-left: auto;
}

.bank-fee-info .fee-total span {
    color: var(--u-primary);
    font-weight: 600;
}

.bank-clan-info {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
    margin-bottom: var(--u-space-md);
    padding: var(--u-space-sm) var(--u-space-md);
    background: rgba(var(--u-primary-rgb), var(--u-opacity-light));
    border-radius: var(--u-radius-md);
}

.bank-clan-info .clan-name {
    color: var(--u-primary);
    font-size: var(--u-font-md);
    font-weight: 600;
}

.bank-info-section {
    margin-top: auto;
    padding: var(--u-space-lg);
    background: var(--u-bg-card);
    border-radius: var(--u-radius-lg);
    border: 1px solid var(--u-border);
}

.bank-info-section .unified-desc {
    line-height: 1.8;
}

/* Bank notification animation */
.bank-notification {
    animation: unified-slide-in 0.3s ease;
}

/* ========================================
   REPOSITORY STYLES (Хранилище)
   ======================================== */

/* Секции хранилища */
.repo-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.repo-section .unified-header {
    flex-shrink: 0;
}

.repo-section-icon {
    margin-right: var(--u-space-sm);
}

/* Сетка предметов */
.repo-items-grid {
    flex: 1;
    display: grid;
    /* start: иначе stretch в паре с overflow:hidden у карточек схлопывает
       строки до высоты строки текста и обрезает содержимое */
    align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(calc(200px * var(--adaptive-scale)), 1fr));
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    overflow-y: auto;
    background: var(--u-bg-card);
    border-radius: var(--u-radius-lg);
    border: 1px solid var(--u-border);
}

.repo-items-grid .unified-empty {
    grid-column: 1 / -1;
    padding: var(--u-space-3xl);
}

/* Карточка предмета */
.repo-item-card {
    display: flex;
    align-items: flex-start;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    background:
        linear-gradient(180deg, rgba(var(--u-line-rgb), 0.06), transparent 70%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.6), rgba(var(--u-panel-rgb), 0.75));
    border-radius: var(--u-radius-lg);
    border: 1.5px solid rgba(var(--u-line-rgb), 0.15);
    cursor: pointer;
    transition: all var(--u-transition);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    overflow: hidden;
}

.repo-item-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(var(--u-accent-gold-rgb), 0.1), transparent 70%);
    opacity: 0;
    transition: opacity var(--u-transition);
    pointer-events: none;
}

.repo-item-card:hover {
    border-color: rgba(var(--u-accent-gold-rgb), 0.55);
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 10px 28px rgba(var(--u-navy-rgb), 0.5),
        0 0 22px rgba(var(--u-accent-gold-rgb), 0.3),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.15);
}

.repo-item-card:hover::before {
    opacity: 1;
}

/* Цветовые классы для типов предметов */
.repo-item-card.item-weapon { border-left: 3px solid var(--u-danger); box-shadow: -2px 0 12px rgba(var(--u-danger-rgb), 0.3); }
.repo-item-card.item-engine { border-left: 3px solid var(--u-warning); box-shadow: -2px 0 12px rgba(var(--u-warning-rgb), 0.3); }
.repo-item-card.item-device { border-left: 3px solid var(--u-accent-gold); box-shadow: -2px 0 12px rgba(var(--u-accent-gold-rgb), 0.3); }
.repo-item-card.item-droid { border-left: 3px solid var(--u-accent-lavender); box-shadow: -2px 0 12px rgba(var(--u-accent-lavender-rgb), 0.3); }
.repo-item-card.item-resource { border-left: 3px solid var(--u-success); box-shadow: -2px 0 12px rgba(var(--u-success-rgb), 0.3); }
.repo-item-card.item-ammo { border-left: 3px solid var(--u-accent-gold); box-shadow: -2px 0 12px rgba(var(--u-accent-gold-rgb), 0.3); }
.repo-item-card.item-container { border-left: 3px solid var(--u-primary-light); box-shadow: -2px 0 12px rgba(var(--u-line-rgb), 0.3); }
.repo-item-card.item-quest { border-left: 3px solid var(--u-danger); box-shadow: -2px 0 12px rgba(var(--u-danger-rgb), 0.3); }
.repo-item-card.item-common { border-left: 3px solid var(--u-border); }

/* Иконка предмета */
.repo-item-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    position: relative;
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.repo-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.repo-item-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--u-scrim-heavy);
    color: var(--u-primary);
    font-size: var(--u-font-xs);
    font-weight: 600;
    padding: 1px 4px;
    border-radius: var(--u-radius-sm);
}

/* Информация о предмете */
.repo-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.repo-item-name {
    color: var(--u-text);
    font-size: var(--u-font-md);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repo-item-type {
    color: var(--u-text-muted);
    font-size: var(--u-font-sm);
}

.repo-item-level {
    color: var(--u-primary);
    font-size: var(--u-font-sm);
    font-weight: 500;
}

.repo-item-cost {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
    margin-top: var(--u-space-xs);
}

.repo-item-cost .cost-label {
    color: var(--u-text-muted);
    font-size: var(--u-font-sm);
}

.repo-item-cost .cost-value {
    color: var(--u-warning);
    font-size: var(--u-font-sm);
    font-weight: 600;
}

/* Замок для заблокированных предметов */
.repo-item-locked {
    position: absolute;
    top: var(--u-space-sm);
    right: var(--u-space-sm);
    font-size: var(--u-font-lg);
    opacity: 0.7;
}

/* ========================================
   REPOSITORY DIALOGS
   ======================================== */

.repo-dialog-overlay {
    position: fixed;
    inset: 0;
    background: var(--u-scrim-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: unified-fade-in 0.2s ease;
}

.repo-dialog {
    width: 100%;
    max-width: 400px;
    background: linear-gradient(135deg, var(--u-bg-window-primary) 0%, var(--u-bg-window-secondary) 100%);
    border-radius: var(--u-radius-xl);
    border: 1px solid var(--u-border-light);
    box-shadow: var(--u-shadow-lg);
    overflow: hidden;
    animation: unified-slide-in 0.3s ease;
}

.repo-dialog-confirm {
    max-width: 350px;
}

.repo-dialog-header {
    padding: var(--u-space-lg) var(--u-space-xl);
    background: var(--u-bg-card);
    border-bottom: 1px solid var(--u-border);
}

.repo-dialog-title {
    color: var(--u-text);
    font-size: var(--u-font-xl);
    font-weight: 600;
    margin: 0;
}

.repo-dialog-content {
    padding: var(--u-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-lg);
}

.repo-dialog-item-name {
    color: var(--u-primary);
    font-size: var(--u-font-lg);
    font-weight: 500;
    text-align: center;
}

.repo-dialog-message {
    color: var(--u-text-secondary);
    font-size: var(--u-font-md);
    text-align: center;
    line-height: 1.5;
}

.repo-dialog-field {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-sm);
}

/* Контролы количества */
.repo-count-controls {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
}

.repo-count-controls .unified-input {
    flex: 1;
    text-align: center;
    font-size: var(--u-font-lg);
    font-weight: 600;
}

.repo-count-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--u-bg-card);
    border-radius: 3px;
    outline: none;
    margin: var(--u-space-sm) 0;
}

.repo-count-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--u-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(var(--u-primary-rgb), 0.5);
}

.repo-count-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--u-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(var(--u-primary-rgb), 0.5);
}

.repo-count-hint {
    color: var(--u-text-muted);
    font-size: var(--u-font-sm);
    text-align: center;
}

/* Стоимость в диалоге */
.repo-dialog-cost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    background: rgba(var(--u-warning-rgb), var(--u-opacity-light));
    border-radius: var(--u-radius-md);
    border: 1px solid rgba(var(--u-warning-rgb), var(--u-opacity-soft));
}

.repo-dialog-cost .cost-label {
    color: var(--u-text-muted);
    font-size: var(--u-font-md);
}

.repo-dialog-cost .cost-value {
    color: var(--u-warning);
    font-size: var(--u-font-lg);
    font-weight: 600;
}

/* Кнопки диалога */
.repo-dialog-buttons {
    display: flex;
    gap: var(--u-space-md);
    padding: var(--u-space-lg) var(--u-space-xl);
    background: var(--u-bg-card);
    border-top: 1px solid var(--u-border);
}

.repo-dialog-buttons .unified-btn {
    flex: 1;
}

/* Repository notification */
.repo-notification {
    animation: unified-slide-in 0.3s ease;
}

/* ========================================
   REPOSITORY - CLAN STYLES
   ======================================== */

/* Иконка кланового хранилища */
.unified-icon.clan {
    background: radial-gradient(circle at center, rgba(var(--u-warning-rgb), var(--u-opacity-soft)), transparent 70%);
    border-color: rgba(var(--u-warning-rgb), var(--u-opacity-medium));
}

/* Цвета значений статистики */
.unified-stat-value.primary { color: var(--u-primary); }
.unified-stat-value.success { color: var(--u-success); }
.unified-stat-value.danger { color: var(--u-danger); }
.unified-stat-value.warning { color: var(--u-warning); }

/* Секция клановой информации */
.repo-clan-section {
    background: linear-gradient(135deg, rgba(var(--u-warning-rgb), var(--u-opacity-light)), rgba(var(--u-warning-rgb), var(--u-opacity-subtle)));
    border: 1px solid rgba(var(--u-warning-rgb), var(--u-opacity-soft));
    border-radius: var(--u-radius-lg);
    padding: var(--u-space-md);
    margin-bottom: var(--u-space-md);
}

.repo-clan-name {
    color: var(--u-warning);
    font-size: var(--u-font-lg);
    font-weight: 600;
    margin-bottom: var(--u-space-sm);
}

.repo-clan-level {
    color: var(--u-text-secondary);
    font-size: var(--u-font-sm);
}

/* Индикатор прав доступа */
.repo-access-granted {
    color: var(--u-success);
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
}

.repo-access-denied {
    color: var(--u-danger);
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
}

/* Repository использует --adaptive-scale для автоматической адаптации */

/* ========================================
   ANGAR STYLES (Смена кораблей)
   ======================================== */

/* Секция ангара */
.angar-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Сетка кораблей */
.angar-ships-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(280px * var(--adaptive-scale)), 1fr));
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    overflow-y: auto;
    flex: 1;
}

/* Карточка корабля */
.angar-ship-card {
    background:
        linear-gradient(180deg, rgba(var(--u-line-rgb), 0.08), transparent 70%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.6), rgba(var(--u-panel-rgb), 0.78));
    border: 1.5px solid rgba(var(--u-line-rgb), 0.18);
    border-radius: var(--u-radius-lg);
    padding: var(--u-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-sm);
    transition: all var(--u-transition);
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.08),
        0 4px 14px rgba(var(--u-navy-rgb), 0.3);
    overflow: hidden;
}

.angar-ship-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, transparent, rgba(var(--u-line-rgb), 0.3), rgba(var(--u-danger-rgb), 0.2), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--u-transition);
    pointer-events: none;
}

.angar-ship-card:hover:not(.disabled) {
    border-color: rgba(var(--u-accent-gold-rgb), 0.5);
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 14px 36px rgba(var(--u-navy-rgb), 0.55),
        0 0 28px rgba(var(--u-accent-gold-rgb), 0.3),
        0 0 50px rgba(var(--u-primary-rgb), 0.18),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.18);
}

.angar-ship-card:hover:not(.disabled)::before {
    opacity: 1;
}

.angar-ship-card.disabled {
    opacity: 0.5;
    filter: saturate(0.4);
}

/* Иконка корабля */
.angar-ship-icon {
    width: 100%;
    height: calc(120px * var(--adaptive-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at center, rgba(var(--u-primary-rgb), 0.15), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-night-rgb), 0.5), rgba(var(--u-navy-rgb), 0.4));
    border-radius: var(--u-radius-md);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    overflow: hidden;
    position: relative;
}

.angar-ship-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(var(--u-white-rgb), 0.06), transparent 60%);
    pointer-events: none;
}

.angar-ship-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Информация о корабле */
.angar-ship-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs);
}

.angar-ship-name {
    font-size: var(--u-font-lg);
    font-weight: 600;
    color: var(--u-text-primary);
}

/* Статы корабля */
.angar-ship-stats {
    display: flex;
    gap: var(--u-space-md);
    flex-wrap: wrap;
}

.angar-stat {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
    font-size: var(--u-font-sm);
}

.angar-stat-icon {
    font-size: calc(14px * var(--adaptive-scale));
}

.angar-stat-value {
    color: var(--u-text-primary);
    font-weight: 500;
}

/* Детали корабля */
.angar-ship-details {
    display: flex;
    gap: var(--u-space-sm);
    flex-wrap: wrap;
    font-size: var(--u-font-xs);
    color: var(--u-text-secondary);
}

/* Стоимость смены */
.angar-ship-cost {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--u-space-sm);
    background: rgba(var(--u-success-rgb), var(--u-opacity-light));
    border-radius: var(--u-radius-sm);
    margin-top: var(--u-space-xs);
}

.angar-ship-cost.not-affordable {
    background: rgba(var(--u-danger-rgb), var(--u-opacity-light));
}

.angar-ship-cost .cost-label {
    color: var(--u-text-secondary);
    font-size: var(--u-font-sm);
}

.angar-ship-cost .cost-value {
    color: var(--u-success);
    font-weight: 600;
}

.angar-ship-cost.not-affordable .cost-value {
    color: var(--u-danger);
}

/* Заблокированный корабль */
.angar-ship-locked {
    position: absolute;
    top: var(--u-space-sm);
    right: var(--u-space-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--u-space-xs) var(--u-space-sm);
    background: rgba(var(--u-danger-rgb), var(--u-opacity-soft));
    border-radius: var(--u-radius-sm);
    font-size: var(--u-font-xs);
    color: var(--u-danger);
}

/* Кнопка смены */
.angar-change-btn {
    width: 100%;
    margin-top: var(--u-space-sm);
}

/* Пустой ангар */
.angar-ships-grid .unified-empty {
    grid-column: 1 / -1;
}

.unified-empty-hint {
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
    margin-top: var(--u-space-xs);
}

/* Angar использует --adaptive-scale для автоматической адаптации */

/* ========================================
   GENETIC LAB - Генетическая лаборатория
   ======================================== */

.gineticlab-window .game-window-content {
    padding: 0;
}

.gineticlab-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-lg);
}

.gineticlab-description {
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.1), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.6), rgba(var(--u-panel-rgb), 0.78));
    border-radius: var(--u-radius-lg);
    padding: var(--u-space-lg);
    border: 1.5px solid rgba(var(--u-line-rgb), 0.18);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.08);
}

.gineticlab-description p {
    margin: 0 0 var(--u-space-sm) 0;
    color: var(--u-text-secondary);
    font-size: var(--u-font-sm);
    line-height: 1.5;
}

.gineticlab-description .warning {
    color: var(--u-danger);
    font-weight: 600;
}

.gineticlab-description .notice {
    color: var(--u-primary);
}

.gineticlab-options {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
}

.gineticlab-option {
    display: flex;
    align-items: center;
    gap: var(--u-space-lg);
    padding: var(--u-space-lg);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    border: 1.5px solid rgba(var(--u-line-rgb), 0.18);
    transition: var(--u-transition);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
}

.gineticlab-option:hover {
    border-color: var(--u-primary);
    box-shadow: var(--u-glow-primary);
}

.gineticlab-option-icon {
    width: 48px;
    height: 48px;
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.gineticlab-option-icon.icon-reset-parameters::before { content: '🧬'; }
.gineticlab-option-icon.icon-reset-skills::before { content: '📚'; }

.gineticlab-option-info {
    flex: 1;
    min-width: 0;
}

.gineticlab-option-title {
    font-size: var(--u-font-md);
    font-weight: 600;
    color: var(--u-text);
    margin-bottom: var(--u-space-xs);
}

.gineticlab-option-hint {
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
    margin-bottom: var(--u-space-sm);
}

.gineticlab-option-cost {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
    font-size: var(--u-font-sm);
}

.gineticlab-option-cost .cost-label { color: var(--u-text-secondary); }
.gineticlab-option-cost .cost-value { color: var(--u-cash); font-weight: 600; }

.gineticlab-apply-btn {
    flex-shrink: 0;
    padding: var(--u-space-sm) var(--u-space-lg) !important;
}

.gineticlab-empty {
    text-align: center;
    padding: var(--u-space-xl);
    color: var(--u-text-muted);
}

/* ========================================
   SHIP UPDATE - Улучшение кораблей
   ======================================== */

.shipupdate-window .game-window-content {
    padding: 0;
}

.shipupdate-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-lg);
}

.shipupdate-ships {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-lg);
}

.shipupdate-arrow {
    font-size: 32px;
    color: var(--u-primary);
    animation: pulse-arrow 1.5s ease-in-out infinite;
}

@keyframes pulse-arrow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.shipupdate-ship-card {
    width: 180px;
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.1), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.6), rgba(var(--u-panel-rgb), 0.8));
    border-radius: var(--u-radius-lg);
    border: 1.5px solid rgba(var(--u-line-rgb), 0.2);
    padding: var(--u-space-md);
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.08),
        0 4px 14px rgba(var(--u-navy-rgb), 0.3);
}

.shipupdate-ship-card.has-error {
    border-color: rgba(var(--u-danger-rgb), 0.55);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-danger-rgb), 0.2), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-danger-rgb), 0.6), rgba(var(--u-danger-rgb), 0.8));
    box-shadow: 0 0 22px rgba(var(--u-danger-rgb), 0.35);
}

.ship-card-title {
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
    margin-bottom: var(--u-space-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ship-card-image {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--u-space-sm);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ship-card-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.ship-card-name {
    font-size: var(--u-font-sm);
    font-weight: 600;
    color: var(--u-text);
    margin-bottom: var(--u-space-sm);
}

.ship-card-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    font-size: var(--u-font-xs);
}

.ship-param {
    display: flex;
    justify-content: space-between;
    color: var(--u-text-secondary);
}

.ship-param span:last-child {
    color: var(--u-primary);
    font-weight: 500;
}

.shipupdate-cost {
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    padding: var(--u-space-lg);
}

.shipupdate-cost-title {
    font-size: var(--u-font-sm);
    color: var(--u-text);
    margin-bottom: var(--u-space-md);
    font-weight: 600;
}

.shipupdate-cost-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--u-space-md);
}

.cost-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border);
    min-width: 60px;
}

.cost-item.not-enough {
    border-color: var(--u-danger);
    background: rgba(var(--u-danger-rgb), 0.2);
}

.cost-item .cost-icon {
    font-size: 24px;
    margin-bottom: var(--u-space-xs);
}

.cost-item .cost-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.cost-item .cost-value {
    font-size: var(--u-font-sm);
    color: var(--u-text);
    font-weight: 600;
}

.shipupdate-description {
    text-align: center;
    padding: var(--u-space-md);
    color: var(--u-primary);
    font-size: var(--u-font-sm);
}

.shipupdate-buttons {
    display: flex;
    justify-content: center;
}

.shipupdate-btn {
    padding: var(--u-space-md) var(--u-space-xl) !important;
    font-size: var(--u-font-md) !important;
}

.shipupdate-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   RES UPDATE - Фабрика ресурсов
   ======================================== */

.resupdate-window .game-window-content {
    padding: 0;
}

.resupdate-content {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
    padding: var(--u-space-lg);
    height: 100%;
}

.resupdate-panel {
    flex: 1;
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    padding: var(--u-space-md);
    overflow: auto;
}

.resupdate-panel .panel-title {
    font-size: var(--u-font-sm);
    font-weight: 600;
    color: var(--u-text);
    margin-bottom: var(--u-space-md);
    padding-bottom: var(--u-space-sm);
    border-bottom: 1px solid var(--u-border);
}

.resupdate-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--u-space-sm);
}

.resupdate-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border);
    cursor: pointer;
    transition: var(--u-transition);
    min-width: 150px;
}

.resupdate-item:hover {
    border-color: var(--u-primary);
    box-shadow: var(--u-glow-primary);
}

.resupdate-item.not-satisfying {
    opacity: 0.5;
}

.resupdate-item .item-icon {
    width: 40px;
    height: 40px;
    background: var(--u-bg-medium);
    border-radius: var(--u-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.resupdate-item .item-icon img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
}

.resupdate-item .item-info {
    flex: 1;
    min-width: 0;
}

.resupdate-item .item-name {
    font-size: var(--u-font-xs);
    color: var(--u-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resupdate-item .item-count {
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
}

.resupdate-item .item-cost {
    font-size: var(--u-font-xs);
    color: var(--u-cash);
}

.resupdate-buttons {
    display: flex;
    justify-content: space-between;
    gap: var(--u-space-md);
}

.resupdate-empty {
    text-align: center;
    padding: var(--u-space-xl);
    color: var(--u-text-muted);
    width: 100%;
}

/* ========================================
   TOP LIST - Топ игроков
   ======================================== */

/* Общий каркас рейтинговых таблиц: топ пилотов, топ кланов, PvP.
   Три окна показывают одно и то же — «место, кто, сколько», — и раньше
   расходились в мелочах. Здесь один скелет, а колонки задаёт каждое окно. */

.rating-table {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Шапка липкая: при прокрутке сотни строк подпись колонки должна
   оставаться на экране, иначе правое число нечем опознать. */
.rating-table > .rating-row:first-child,
.toplist-header,
.topclanlist-header,
.toprating-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--u-bg-window-secondary);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--u-border-accent);
    color: var(--u-text-muted);
    font-family: var(--u-font-display);
    font-size: var(--u-font-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: default;
}

.rating-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Липкая своя строка перекрывает последнюю обычную — компенсируем снизу. */
    scroll-padding-bottom: calc(52px * var(--adaptive-scale));
}

.rating-row {
    display: grid;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-sm) var(--u-space-lg);
    min-height: calc(44px * var(--adaptive-scale));
    border-bottom: 1px solid var(--u-border-light);
    border-left: calc(3px * var(--adaptive-scale)) solid transparent;
    transition: background var(--u-transition), border-color var(--u-transition);
}

.rating-body > .rating-row {
    cursor: pointer;
}

/* Чередование строк — единственное, что разделяет плотный список:
   рамка на каждой строке дала бы четвёртый уровень вложенности. */
.rating-body > .rating-row:nth-child(even) {
    background: var(--u-bg-row);
}

.rating-body > .rating-row:hover {
    background: var(--u-bg-card-hover);
    border-left-color: var(--u-primary);
}

.rating-body > .rating-row:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: calc(-2px * var(--adaptive-scale));
}

/* Призовые места — узкая полоса слева и цвет номера, без «медалек». */
.rating-row.rank-gold { border-left-color: var(--u-accent-gold); }
.rating-row.rank-silver { border-left-color: var(--u-primary-light); }
.rating-row.rank-bronze { border-left-color: var(--u-accent-sakura-dark); }

.rating-row.rank-gold .rank-number { color: var(--u-accent-gold); }
.rating-row.rank-silver .rank-number { color: var(--u-primary-light); }
.rating-row.rank-bronze .rank-number { color: var(--u-accent-sakura-dark); }

/* Своя строка залипает у нижнего края списка: игрок на 300-м месте
   видит себя, не прокручивая таблицу. */
.rating-body > .rating-row.is-self {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--u-bg-primary-light);
    border-left-color: var(--u-primary);
    box-shadow: 0 calc(-6px * var(--adaptive-scale)) calc(18px * var(--adaptive-scale)) var(--u-scrim);
}

.rating-body > .rating-row.is-self .player-name {
    color: var(--u-primary);
}

.rank-number {
    font-family: var(--u-font-display);
    font-size: var(--u-font-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-text-secondary);
}

.rating-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-sm);
    padding: var(--u-space-3xl) var(--u-space-xl);
    text-align: center;
}

.rating-empty-icon {
    display: block;
    color: var(--u-text-dim);
}

.rating-empty-icon svg {
    width: calc(40px * var(--adaptive-scale));
    height: calc(40px * var(--adaptive-scale));
}

.rating-empty-text {
    color: var(--u-text-secondary);
    font-family: var(--u-font-display);
    font-size: var(--u-font-lg);
}

.rating-empty-hint {
    color: var(--u-text-muted);
    font-size: var(--u-font-sm);
    max-width: calc(320px * var(--adaptive-scale));
}

/* --- Топ пилотов --- */

.toplist-window .game-window-content {
    padding: 0;
    min-height: 0;
}

.toplist-header,
.toplist-row {
    grid-template-columns: calc(64px * var(--adaptive-scale)) minmax(0, 1fr) calc(140px * var(--adaptive-scale));
}

.col-rank {
    display: flex;
    align-items: center;
}

.col-player {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    min-width: 0;
}

.player-icons {
    display: flex;
    gap: var(--u-space-xs);
    flex-shrink: 0;
}

.player-icons img {
    width: calc(30px * var(--adaptive-scale));
    height: calc(30px * var(--adaptive-scale));
    object-fit: contain;
    border-radius: var(--u-radius-sm);
    background: var(--u-bg-black-light);
}

.player-info {
    flex: 1;
    min-width: 0;
}

.player-name {
    font-size: var(--u-font-md);
    font-weight: 600;
    color: var(--u-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Тег клана — лавандовый: тот же смысл, что и во всех клановых окнах. */
.player-clan {
    color: var(--u-accent-lavender);
    font-weight: 600;
    margin-right: var(--u-space-xs);
}

.player-meta {
    font-size: var(--u-font-sm);
    color: var(--u-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Числа выровнены вправо и моноширинные по цифрам: колонка не пляшет
   при обновлении значений. */
.col-exp {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.exp-value {
    font-family: var(--u-font-display);
    font-size: var(--u-font-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-accent-gold);
}

/* --- Топ пилотов: телефон ---
   Аватар корабля и подпись расы уходят, остаются место / имя / опыт. */
@media (max-width: 480px) {
    .toplist-header,
    .toplist-row {
        grid-template-columns: calc(40px * var(--adaptive-scale)) minmax(0, 1fr) auto;
        gap: var(--u-space-sm);
        padding: var(--u-space-sm) var(--u-space-md);
    }

    .toplist-row .ship-icon,
    .toplist-row .player-meta {
        display: none;
    }
}

/* ========================================
   TOP CLANS LIST - Топ кланов
   ======================================== */

.topclanlist-window .game-window-content {
    padding: 0;
    min-height: 0;
}

.topclanlist-header,
.topclanlist-row {
    grid-template-columns: calc(64px * var(--adaptive-scale)) minmax(0, 1fr) calc(140px * var(--adaptive-scale));
}

.col-clan {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    min-width: 0;
}

.clan-logo {
    width: calc(34px * var(--adaptive-scale));
    height: calc(34px * var(--adaptive-scale));
    border-radius: var(--u-radius-sm);
    overflow: hidden;
    background: var(--u-bg-black-light);
    border: 1px solid var(--u-border-light);
    flex-shrink: 0;
}

.clan-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clan-info {
    flex: 1;
    min-width: 0;
}

.clan-name {
    font-size: var(--u-font-md);
    font-weight: 600;
    color: var(--u-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clan-leader {
    font-size: var(--u-font-sm);
    color: var(--u-text-muted);
}

.col-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.col-stats .stat-value {
    font-family: var(--u-font-display);
    font-size: var(--u-font-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--u-accent-gold);
}

/* --- Топ кланов: телефон --- */
@media (max-width: 480px) {
    .topclanlist-header,
    .topclanlist-row {
        grid-template-columns: calc(40px * var(--adaptive-scale)) minmax(0, 1fr) auto;
        gap: var(--u-space-sm);
        padding: var(--u-space-sm) var(--u-space-md);
    }

    .topclanlist-row .clan-leader {
        display: none;
    }
}

/* ========================================
   ITEM UPDATE - Улучшение предметов
   ======================================== */

.itemupdate-window .game-window-content { padding: 0; }

.itemupdate-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-lg);
}

.itemupdate-description {
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    padding: var(--u-space-md);
    border: 1px solid var(--u-border);
}

.itemupdate-description p { margin: 0 0 var(--u-space-xs) 0; color: var(--u-text-secondary); font-size: var(--u-font-sm); }
.itemupdate-description .notice { color: var(--u-primary); }

.itemupdate-panel {
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    padding: var(--u-space-md);
}

.itemupdate-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--u-space-sm);
    max-height: 200px;
    overflow-y: auto;
}

.itemupdate-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border);
    min-width: 200px;
    transition: var(--u-transition);
}

.itemupdate-item:hover { border-color: var(--u-primary); }
.itemupdate-item.not-satisfying { opacity: 0.5; }

.itemupdate-item .item-icon {
    width: 48px;
    height: 48px;
    background: var(--u-bg-medium);
    border-radius: var(--u-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.itemupdate-item .item-icon img { max-width: 40px; max-height: 40px; }
.itemupdate-item .item-count-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--u-primary);
    color: var(--u-bg-dark);
    font-size: var(--u-font-xs);
    padding: 1px 4px;
    border-radius: var(--u-radius-sm);
}

.itemupdate-item .item-info { flex: 1; min-width: 0; }
.itemupdate-item .item-name { font-size: var(--u-font-sm); color: var(--u-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itemupdate-item .item-details { font-size: var(--u-font-xs); color: var(--u-text-muted); }
.itemupdate-item .item-level { color: var(--u-primary); margin-right: var(--u-space-sm); }
.itemupdate-item .item-cost { color: var(--u-cash); }

.itemupdate-buttons { display: flex; justify-content: space-between; gap: var(--u-space-md); }
.itemupdate-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); width: 100%; }

/* ========================================
   AUCTION - Аукцион
   ======================================== */

.auction-window .game-window-content { padding: 0; }

.auction-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
    height: 100%;
}

.auction-filters {
    display: flex;
    gap: var(--u-space-sm);
    align-items: center;
}

.auction-category-filter {
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    color: var(--u-text);
    font-size: var(--u-font-sm);
}

.auction-search {
    flex: 1;
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    color: var(--u-text);
}

.auction-lots-panel {
    flex: 1;
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    overflow: hidden;
}

.auction-lots-header {
    display: grid;
    grid-template-columns: 2fr 1fr 100px 80px 80px;
    gap: var(--u-space-md);
    padding: var(--u-space-sm) var(--u-space-md);
    background: var(--u-bg-dark);
    border-bottom: 1px solid var(--u-border);
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
    text-transform: uppercase;
}

.auction-lots-list { max-height: 300px; overflow-y: auto; }

.auction-lot-row {
    display: grid;
    grid-template-columns: 2fr 1fr 100px 80px 80px;
    gap: var(--u-space-md);
    padding: var(--u-space-sm) var(--u-space-md);
    border-bottom: 1px solid var(--u-border);
    align-items: center;
    transition: var(--u-transition);
    cursor: pointer;
}

.auction-lot-row:hover { background: rgba(var(--u-line-rgb), 0.06); }

.col-item { display: flex; align-items: center; gap: var(--u-space-sm); }
.lot-item-icon {
    width: 40px;
    height: 40px;
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-sm);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lot-item-icon img { max-width: 36px; max-height: 36px; }
.lot-count { position: absolute; bottom: -2px; right: -2px; font-size: var(--u-font-xs); background: var(--u-primary); color: var(--u-bg-dark); padding: 1px 3px; border-radius: 3px; }
.lot-item-name { font-size: var(--u-font-sm); color: var(--u-text); }
.lot-item-level { font-size: var(--u-font-xs); color: var(--u-text-muted); }
.col-seller { font-size: var(--u-font-sm); color: var(--u-text-secondary); }
.lot-price { color: var(--u-cash); font-weight: 600; }
.lot-currency { color: var(--u-text-muted); font-size: var(--u-font-xs); }
.col-time { font-size: var(--u-font-sm); color: var(--u-text-secondary); }
.col-time.urgent { color: var(--u-danger); }

.auction-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--u-space-md);
}

.auction-sell-panel {
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    padding: var(--u-space-lg);
    text-align: center;
}

.sell-panel-title { font-size: var(--u-font-md); font-weight: 600; color: var(--u-text); margin-bottom: var(--u-space-sm); }
.sell-panel-hint { font-size: var(--u-font-sm); color: var(--u-text-muted); margin-bottom: var(--u-space-md); }
.auction-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

/* ========================================
   TREASURE SHOP - Сокровищница
   ======================================== */

.treasure-window .game-window-content { padding: 0; }

.treasure-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
}

.treasure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--u-space-md);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
}

.treasure-balance {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
}

.balance-icon { font-size: 20px; }
.treasure-balance-value { font-size: var(--u-font-lg); font-weight: 700; color: var(--u-cash); }
.treasure-unlock-timer { font-size: var(--u-font-sm); color: var(--u-text-secondary); }
.treasure-unlock-timer.unlocked { color: var(--u-success); }

.treasure-tab-content {
    flex: 1;
    min-height: 300px;
}

.treasure-capsules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--u-space-md);
}

.treasure-capsule-card {
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    padding: var(--u-space-md);
    text-align: center;
    transition: var(--u-transition);
}

.treasure-capsule-card:hover { border-color: var(--u-primary); }
.treasure-capsule-card.sold-out { opacity: 0.5; }

.capsule-icon { font-size: calc(32px * var(--adaptive-scale)); margin-bottom: var(--u-space-sm); line-height: 1; display: flex; align-items: center; justify-content: center; }
.capsule-name { font-size: var(--u-font-sm); font-weight: 600; color: var(--u-text); margin-bottom: var(--u-space-sm); line-height: 1.3; }
.capsule-price { display: flex; justify-content: center; align-items: center; gap: var(--u-space-xs); margin-bottom: var(--u-space-sm); }
.price-icon { font-size: calc(16px * var(--adaptive-scale)); line-height: 1; display: flex; align-items: center; justify-content: center; }
.price-value { color: var(--u-cash); font-weight: 600; }
.capsule-stock { font-size: var(--u-font-xs); margin-bottom: var(--u-space-sm); }
.stock-unlimited { color: var(--u-text-muted); }
.stock-available { color: var(--u-text-secondary); }
.stock-low { color: var(--u-warning); }
.stock-soldout { color: var(--u-danger); font-weight: 600; }

.treasure-mycases-grid, .treasure-sell-list { display: flex; flex-direction: column; gap: var(--u-space-sm); }
.treasure-mycases-header, .treasure-history-header, .treasure-sell-header {
    font-size: var(--u-font-md);
    font-weight: 600;
    color: var(--u-text);
    margin-bottom: var(--u-space-md);
}

.treasure-mycase-card {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border);
}

.mycase-icon { font-size: 24px; }
.mycase-name { flex: 1; font-size: var(--u-font-sm); color: var(--u-text); }
.mycase-status { font-size: var(--u-font-xs); }
.status-claimed { color: var(--u-text-muted); }
.status-ready { color: var(--u-success); }

.treasure-history-list { max-height: 250px; overflow-y: auto; }
.treasure-history-row {
    display: flex;
    justify-content: space-between;
    padding: var(--u-space-sm);
    border-bottom: 1px solid var(--u-border);
    font-size: var(--u-font-sm);
}

.treasure-sell-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border);
}

.sell-item-icon { width: 48px; height: 48px; background: var(--u-bg-medium); border-radius: var(--u-radius-sm); display: flex; align-items: center; justify-content: center; }
.sell-item-icon img { max-width: 40px; max-height: 40px; }
.sell-item-info { flex: 1; }
.sell-item-class, .sell-item-wear { font-size: var(--u-font-xs); color: var(--u-text-secondary); }
.sell-item-bonus { display: flex; align-items: center; gap: var(--u-space-xs); }
.bonus-icon { font-size: 16px; }
.bonus-value { color: var(--u-cash); font-weight: 600; }

.treasure-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

/* ========================================
   CLAN CASH - Казна клана
   ======================================== */

.clancash-window .game-window-content { padding: 0; }

.clancash-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
}

.clancash-overview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-lg);
    padding: var(--u-space-xl);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-accent-gold-rgb), 0.18), transparent 60%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.7), rgba(var(--u-panel-rgb), 0.85));
    border-radius: var(--u-radius-xl);
    border: 1.5px solid rgba(var(--u-accent-gold-rgb), 0.3);
}

.clancash-icon { font-size: 48px; }
.clancash-info { text-align: center; }
.clancash-label { font-size: var(--u-font-sm); color: var(--u-text-muted); margin-bottom: var(--u-space-xs); }
.clancash-amount { font-size: 32px; font-weight: 700; color: var(--u-cash); }
.clancash-currency { font-size: var(--u-font-sm); color: var(--u-text-secondary); }

.clancash-tab-content { flex: 1; }

.clancash-overview-panel, .clancash-donate-panel, .clancash-history-panel {
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    padding: var(--u-space-lg);
}

.overview-section { margin-bottom: var(--u-space-lg); }
.section-title { font-size: var(--u-font-md); font-weight: 600; color: var(--u-text); margin-bottom: var(--u-space-md); border-bottom: 1px solid var(--u-border); padding-bottom: var(--u-space-sm); }
.stat-row { display: flex; justify-content: space-between; padding: var(--u-space-xs) 0; }
.stat-label { color: var(--u-text-secondary); }
.stat-value { color: var(--u-text); font-weight: 500; }
.stat-value.cash { color: var(--u-cash); }

.top-donors-list { display: flex; flex-direction: column; gap: var(--u-space-xs); }
.donor-row { display: flex; align-items: center; gap: var(--u-space-sm); padding: var(--u-space-xs) 0; }
.donor-rank { color: var(--u-primary); font-weight: 600; width: 24px; }
.donor-name { flex: 1; color: var(--u-text); }
.donor-amount { color: var(--u-cash); }
.no-donors { color: var(--u-text-muted); font-style: italic; }

.overview-hint { font-size: var(--u-font-sm); color: var(--u-text-muted); }
.overview-hint ul { margin: var(--u-space-sm) 0 0 var(--u-space-lg); }

.donate-info { margin-bottom: var(--u-space-md); color: var(--u-text-secondary); }
.player-cash { color: var(--u-cash); font-weight: 600; }

.donate-input-group { margin-bottom: var(--u-space-md); }
.donate-input-group label { display: block; margin-bottom: var(--u-space-xs); color: var(--u-text-secondary); font-size: var(--u-font-sm); }
.donate-amount-input {
    width: 100%;
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    color: var(--u-text);
    font-size: var(--u-font-md);
}

.donate-quick-amounts { display: flex; flex-wrap: wrap; gap: var(--u-space-sm); margin-bottom: var(--u-space-lg); }
.donate-actions { text-align: center; margin-bottom: var(--u-space-md); }
.donate-hint { font-size: var(--u-font-xs); color: var(--u-text-muted); text-align: center; }

.clancash-history-panel .history-header {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    gap: var(--u-space-md);
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--u-space-sm);
}

.history-list { max-height: 200px; overflow-y: auto; }
.history-row {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    gap: var(--u-space-md);
    padding: var(--u-space-sm);
    border-bottom: 1px solid var(--u-border);
    font-size: var(--u-font-sm);
}
.history-row .col-amount { color: var(--u-success); text-align: right; }

.clancash-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

/* ========================================
   GOVERMENT - Правление клана
   ======================================== */

.goverment-window .game-window-content { padding: 0; }

.goverment-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
}

.goverment-description {
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    padding: var(--u-space-md);
    border: 1px solid var(--u-border);
}
.goverment-description p { margin: 0 0 var(--u-space-xs) 0; color: var(--u-text-secondary); font-size: var(--u-font-sm); }
.goverment-description .warning { color: var(--u-warning); }

.goverment-members-panel {
    flex: 1;
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    padding: var(--u-space-md);
}

.members-list { max-height: 250px; overflow-y: auto; }

.goverment-member-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-sm) var(--u-space-md);
    margin-bottom: var(--u-space-xs);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border);
    cursor: pointer;
    transition: var(--u-transition);
}

.goverment-member-row:hover { border-color: var(--u-primary); }
.goverment-member-row.selected { border-color: var(--u-primary); background: rgba(var(--u-accent-gold-rgb), 0.12); }
.goverment-member-row.is-leader { border-left: 3px solid var(--u-accent-gold); box-shadow: -2px 0 14px rgba(var(--u-accent-gold-rgb), 0.35); }

.member-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-online { background: var(--u-success); box-shadow: 0 0 6px var(--u-success); }
.status-offline { background: var(--u-text-muted); }

.member-info { flex: 1; min-width: 0; }
.member-name { font-size: var(--u-font-sm); color: var(--u-text); font-weight: 500; }
.member-role { font-size: var(--u-font-xs); color: var(--u-text-muted); }
.member-level { font-size: var(--u-font-sm); color: var(--u-primary); }
.member-actions { display: flex; gap: var(--u-space-xs); }

.goverment-member-panel {
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    padding: var(--u-space-lg);
}

.member-detail-header { display: flex; align-items: center; gap: var(--u-space-md); margin-bottom: var(--u-space-lg); }
.detail-avatar { font-size: 48px; }
.detail-name { font-size: var(--u-font-lg); font-weight: 600; color: var(--u-text); }
.detail-role { font-size: var(--u-font-sm); color: var(--u-text-secondary); }

.member-stats { margin-bottom: var(--u-space-lg); }
.member-stats .stat-value.online { color: var(--u-success); }
.member-stats .stat-value.offline { color: var(--u-text-muted); }

.member-actions-panel { border-top: 1px solid var(--u-border); padding-top: var(--u-space-lg); }
.action-section { margin-bottom: var(--u-space-md); }
.action-section label { display: block; margin-bottom: var(--u-space-xs); color: var(--u-text-secondary); font-size: var(--u-font-sm); }
.role-select {
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    color: var(--u-text);
    margin-right: var(--u-space-sm);
}
.action-section.danger { margin-top: var(--u-space-lg); padding-top: var(--u-space-md); border-top: 1px solid var(--u-danger); }

.goverment-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

/* ========================================
   SELECT CLAN - Поиск клана
   ======================================== */

.selectclan-window .game-window-content { padding: 0; }

.selectclan-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
}

.selectclan-search { display: flex; gap: var(--u-space-sm); }
.selectclan-search-input {
    flex: 1;
    padding: var(--u-space-sm);
    background: var(--u-bg-dark);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    color: var(--u-text);
}

.selectclan-letters {
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    padding: var(--u-space-sm);
    border: 1px solid var(--u-border);
}

.letters-row { display: flex; flex-wrap: wrap; gap: 2px; }
.letter-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: var(--u-font-xs);
    background: transparent;
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-sm);
    color: var(--u-text-secondary);
    cursor: pointer;
    transition: var(--u-transition);
}
.letter-btn:hover { border-color: var(--u-primary); color: var(--u-text); }
.letter-btn.active { background: var(--u-primary); color: var(--u-bg-dark); border-color: var(--u-primary); }

.selectclan-list-panel {
    flex: 1;
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
    overflow: hidden;
}

.selectclan-list { max-height: 300px; overflow-y: auto; }
.selectclan-loading { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

.selectclan-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    border-bottom: 1px solid var(--u-border);
    cursor: pointer;
    transition: var(--u-transition);
}
.selectclan-row:hover { background: rgba(var(--u-line-rgb), 0.06); }

.selectclan-row .clan-logo { width: calc(48px * var(--adaptive-scale)); height: calc(48px * var(--adaptive-scale)); border-radius: var(--u-radius-md); overflow: hidden; flex-shrink: 0; }
.selectclan-row .clan-logo img { width: 100%; height: 100%; object-fit: cover; }
.selectclan-row .clan-info { flex: 1; min-width: 0; }
.selectclan-row .clan-name { font-size: var(--u-font-sm); font-weight: 600; color: var(--u-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selectclan-row .clan-meta { font-size: var(--u-font-xs); color: var(--u-text-muted); display: flex; gap: var(--u-space-md); }
.selectclan-row .clan-level { color: var(--u-primary); }
.selectclan-row .clan-actions { display: flex; gap: var(--u-space-xs); }

.selectclan-pagination { display: flex; justify-content: center; align-items: center; gap: var(--u-space-md); }
.selectclan-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

/* ========================================
   TOP RATING - PvP Рейтинг
   ======================================== */

.toprating-window .game-window-content { padding: 0; min-height: 0; }

/* Фильтр периода лежит над липкой шапкой и не уезжает вместе со списком. */
.toprating-filters {
    display: flex;
    gap: var(--u-space-sm);
    flex-wrap: wrap;
    padding: var(--u-space-md) var(--u-space-lg);
    border-bottom: 1px solid var(--u-border-light);
    flex-shrink: 0;
}

.toprating-filters .period-btn {
    min-height: calc(36px * var(--adaptive-scale));
    padding: calc(7px * var(--adaptive-scale)) var(--u-space-lg);
    font-size: var(--u-font-sm);
}

/* Выбранный период — единственное цианом на экране: это состояние. */
.toprating-filters .period-btn.active {
    background: var(--u-bg-primary-light);
    border-color: var(--u-primary);
    color: var(--u-primary);
    box-shadow: var(--u-glow-primary);
}

.toprating-header,
.toprating-row {
    grid-template-columns:
        calc(64px * var(--adaptive-scale)) minmax(0, 1fr)
        calc(46px * var(--adaptive-scale)) calc(72px * var(--adaptive-scale))
        calc(72px * var(--adaptive-scale)) calc(60px * var(--adaptive-scale))
        calc(84px * var(--adaptive-scale));
    gap: var(--u-space-sm);
}

.toprating-row .col-player { display: flex; align-items: center; gap: var(--u-space-sm); min-width: 0; }
.toprating-row .player-race {
    width: calc(22px * var(--adaptive-scale));
    height: calc(22px * var(--adaptive-scale));
    border-radius: var(--u-radius-sm);
    object-fit: contain;
    flex-shrink: 0;
    background: var(--u-bg-black-light);
}
.toprating-row .player-name { color: var(--u-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toprating-row .player-clan { font-size: var(--u-font-sm); flex-shrink: 0; }

/* Все счётные колонки — вправо и tabular-nums. */
.toprating-header .col-level,
.toprating-header .col-kills,
.toprating-header .col-deaths,
.toprating-header .col-kd,
.toprating-header .col-rating,
.toprating-row .col-level,
.toprating-row .col-kills,
.toprating-row .col-deaths,
.toprating-row .col-kd,
.toprating-row .col-rating {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.toprating-row .col-level { color: var(--u-text-secondary); }
.toprating-row .col-kills { color: var(--u-success); }
.toprating-row .col-deaths { color: var(--u-danger); }
.toprating-row .col-kd { font-weight: 600; }
.toprating-row .kd-excellent { color: var(--u-accent-gold); }
.toprating-row .kd-good { color: var(--u-success); }
.toprating-row .kd-normal { color: var(--u-text); }
.toprating-row .kd-bad { color: var(--u-text-muted); }
.toprating-row .col-rating {
    font-family: var(--u-font-display);
    font-weight: 700;
    color: var(--u-accent-gold);
}

/* --- PvP: узкий экран ---
   Семь колонок на 390px нечитаемы. Уровень, убийства, смерти и K/D
   уходят: остаются место / пилот / очки — то, ради чего таблицу открыли. */
@media (max-width: 900px) {
    .toprating-header .col-level,
    .toprating-header .col-kills,
    .toprating-header .col-deaths,
    .toprating-row .col-level,
    .toprating-row .col-kills,
    .toprating-row .col-deaths {
        display: none;
    }

    .toprating-header,
    .toprating-row {
        grid-template-columns:
            calc(48px * var(--adaptive-scale)) minmax(0, 1fr)
            calc(56px * var(--adaptive-scale)) calc(80px * var(--adaptive-scale));
    }
}

@media (max-width: 480px) {
    .toprating-header .col-kd,
    .toprating-row .col-kd {
        display: none;
    }

    .toprating-header,
    .toprating-row {
        /* max-content: подпись «Место» не должна обрезаться на узком экране */
        grid-template-columns: max-content minmax(0, 1fr) auto;
        padding: var(--u-space-sm) var(--u-space-md);
    }

    .toprating-filters {
        padding: var(--u-space-sm) var(--u-space-md);
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .toprating-filters .period-btn {
        min-height: calc(44px * var(--adaptive-scale));
        white-space: nowrap;
    }
}

/* ========================================
   FRIEND REQUESTS - Запросы в друзья
   ======================================== */

.friendrequests-window .game-window-content { padding: 0; }

.friendrequests-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
}

.friendrequests-count {
    text-align: center;
    font-size: var(--u-font-md);
    color: var(--u-text-secondary);
}
.friendrequests-count .count-value { color: var(--u-primary); font-weight: 600; }

.friendrequests-list { max-height: 300px; overflow-y: auto; }

.friendrequest-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border);
    margin-bottom: var(--u-space-sm);
    cursor: pointer;
    transition: var(--u-transition);
}
.friendrequest-row:hover { border-color: var(--u-primary); }

.request-player { display: flex; align-items: center; gap: var(--u-space-sm); flex: 1; }
.request-player .player-race { font-size: 20px; }
.request-player .player-name { color: var(--u-text); font-weight: 500; }
.request-player .player-level { font-size: var(--u-font-xs); color: var(--u-text-muted); }
.request-time { font-size: var(--u-font-xs); color: var(--u-text-muted); }
.request-actions { display: flex; gap: var(--u-space-xs); }

.friendrequests-actions { text-align: center; }
.friendrequests-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

/* ========================================
   NEWS LIST - Новости
   ======================================== */

.newslist-window .game-window-content { padding: 0; }

.newslist-content {
    padding: var(--u-space-lg);
}

.newslist-list { max-height: 400px; overflow-y: auto; }

.news-item {
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border);
    margin-bottom: var(--u-space-sm);
    overflow: hidden;
    transition: var(--u-transition);
}
.news-item:hover { border-color: var(--u-primary); }
.news-item.is-new { border-color: var(--u-success); }
 
.news-header {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    cursor: pointer;
}
.news-meta { display: flex; align-items: center; gap: var(--u-space-sm); }
.news-badge { background: var(--u-success); color: var(--u-bg-dark); font-size: var(--u-font-xs); padding: 2px 6px; border-radius: var(--u-radius-sm); font-weight: 600; }
.news-date { font-size: var(--u-font-xs); color: var(--u-text-muted); min-width: 100px; }
.news-title { flex: 1; color: var(--u-text); font-weight: 500; }
.news-toggle { color: var(--u-text-muted); font-size: var(--u-font-xs); }

.news-body {
    padding: 0 var(--u-space-md) var(--u-space-md);
    border-top: 1px solid var(--u-border);
    padding-top: var(--u-space-md);
}
.news-text { font-size: var(--u-font-sm); color: var(--u-text-secondary); line-height: 1.6; }
.news-text a { color: var(--u-primary); }
.news-image { max-width: 100%; border-radius: var(--u-radius-md); margin-top: var(--u-space-md); }
.newslist-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

/* ========================================
   PLAYER INFO - Информация об игроке
   ======================================== */

.playerinfo-window .game-window-content { padding: 0; }

.playerinfo-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-lg);
}

.playerinfo-main {
    display: flex;
    gap: var(--u-space-lg);
    padding: var(--u-space-lg);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
}

.player-avatar {
    width: 80px;
    height: 80px;
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--u-line-rgb), 0.18), transparent 65%),
        linear-gradient(135deg, rgba(var(--u-panel-raised-rgb), 0.65), rgba(var(--u-panel-rgb), 0.85));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(var(--u-line-rgb), 0.4);
    box-shadow:
        0 8px 24px rgba(var(--u-navy-rgb), 0.45),
        0 0 24px rgba(var(--u-primary-rgb), 0.25),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.18);
    overflow: hidden;
}
.player-avatar img { max-width: 70px; max-height: 70px; }

.player-details { flex: 1; }
.player-name-line { display: flex; align-items: center; gap: var(--u-space-sm); margin-bottom: var(--u-space-xs); }
.playerinfo-main .player-name { font-size: var(--u-font-lg); font-weight: 600; color: var(--u-text); }
.playerinfo-main .player-clan { color: var(--u-primary); font-size: var(--u-font-sm); }
.playerinfo-main .player-race { font-size: var(--u-font-sm); margin-bottom: var(--u-space-xs); }
.playerinfo-main .player-level { font-size: var(--u-font-sm); color: var(--u-text-secondary); margin-bottom: var(--u-space-xs); }
.player-status { font-size: var(--u-font-sm); }
.player-status.online { color: var(--u-success); }
.player-status.offline { color: var(--u-text-muted); }

.playerinfo-stats { background: var(--u-bg-dark); border-radius: var(--u-radius-lg); padding: var(--u-space-md); border: 1px solid var(--u-border); }
.stats-section { margin-bottom: var(--u-space-md); }
.stats-section:last-child { margin-bottom: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--u-space-sm); }
.stat-item { text-align: center; padding: var(--u-space-sm); background: var(--u-bg-medium); border-radius: var(--u-radius-sm); }
.stat-item .stat-label { display: block; font-size: var(--u-font-xs); color: var(--u-text-muted); margin-bottom: 2px; }
.stat-item .stat-value { display: block; font-size: var(--u-font-md); font-weight: 600; color: var(--u-text); }
.stat-item .stat-value.kills { color: var(--u-success); }
.stat-item .stat-value.deaths { color: var(--u-danger); }
.stat-item .stat-value.rating { color: var(--u-cash); }

.clan-info-block { padding: var(--u-space-sm); background: var(--u-bg-medium); border-radius: var(--u-radius-sm); }
.clan-info-block .clan-name { color: var(--u-text); font-weight: 500; }
.clan-info-block .clan-role { font-size: var(--u-font-xs); color: var(--u-text-muted); }

.playerinfo-actions { display: flex; flex-wrap: wrap; gap: var(--u-space-sm); justify-content: center; }
.playerinfo-actions .action-btn { min-width: 120px; }
.actions-hint { text-align: center; color: var(--u-text-muted); width: 100%; }

/* ========================================
   DEVICE EFFECTS - Эффекты устройств
   ======================================== */

.deviceeffects-window .game-window-content { padding: 0; }

.deviceeffects-content {
    padding: var(--u-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
}

.device-info-panel {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-rgb), 0.72));
    border-radius: var(--u-radius-lg);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
    border: 1px solid var(--u-border);
}

.device-info-panel .device-icon {
    width: 64px;
    height: 64px;
    background: var(--u-bg-dark);
    border-radius: var(--u-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.device-info-panel .device-icon img { max-width: 56px; max-height: 56px; }
.device-name { font-size: var(--u-font-md); font-weight: 600; color: var(--u-text); }
.device-type { font-size: var(--u-font-sm); color: var(--u-text-muted); }

.effects-description { font-size: var(--u-font-sm); color: var(--u-text-secondary); text-align: center; }

.effects-list { max-height: 250px; overflow-y: auto; }

.effect-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-md);
    background:
        radial-gradient(ellipse at top left, rgba(var(--u-line-rgb), 0.06), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.4), rgba(var(--u-panel-rgb), 0.55));
    border-radius: var(--u-radius-lg);
    border: 1.5px solid rgba(var(--u-line-rgb), 0.18);
    margin-bottom: var(--u-space-sm);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: relative;
    box-shadow:
        0 4px 16px rgba(var(--u-navy-rgb), 0.25),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.06);
}
.effect-item:hover {
    border-color: rgba(var(--u-accent-gold-rgb), 0.45);
    transform: translateX(3px);
    box-shadow:
        0 6px 20px rgba(var(--u-navy-rgb), 0.35),
        0 0 18px rgba(var(--u-accent-gold-rgb), 0.18),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.12);
}
.effect-item.selected {
    border-color: rgba(var(--u-danger-rgb), 0.55);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-danger-rgb), 0.14), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.45), rgba(var(--u-panel-rgb), 0.6));
    box-shadow:
        0 6px 20px rgba(var(--u-navy-rgb), 0.4),
        0 0 20px rgba(var(--u-danger-rgb), 0.25),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.15);
}
.effect-item.active {
    border-color: rgba(var(--u-success-rgb), 0.55);
    box-shadow:
        0 6px 20px rgba(var(--u-navy-rgb), 0.4),
        0 0 22px rgba(var(--u-success-rgb), 0.28),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.12);
}

.effect-radio { flex-shrink: 0; }
.effect-radio input { accent-color: var(--u-primary); }
.effect-icon { font-size: 24px; flex-shrink: 0; }
.effect-info { flex: 1; min-width: 0; }
.effect-name { font-size: var(--u-font-sm); font-weight: 500; color: var(--u-text); }
.effect-description { font-size: var(--u-font-xs); color: var(--u-text-muted); }
.effect-cooldown { font-size: var(--u-font-xs); color: var(--u-primary); }
.effect-stats { display: flex; flex-direction: column; gap: 2px; font-size: var(--u-font-xs); }
.effect-stats .stat.positive { color: var(--u-success); }
.effect-stats .stat.negative { color: var(--u-danger); }
.active-badge { position: absolute; top: var(--u-space-xs); right: var(--u-space-xs); background: var(--u-success); color: var(--u-bg-dark); font-size: var(--u-font-xs); padding: 2px 6px; border-radius: var(--u-radius-sm); }

.deviceeffects-actions { display: flex; justify-content: flex-end; gap: var(--u-space-md); }
.effects-empty { text-align: center; padding: var(--u-space-xl); color: var(--u-text-muted); }

/* ============================================
   GAME MENU - Главное игровое меню
   ============================================ */

.game-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    width: calc(660px * var(--adaptive-scale));
    max-width: 95vw;
    max-height: 85vh;
    background:
        var(--u-grad-glass),
        linear-gradient(135deg, var(--u-bg-window-primary) 0%, var(--u-bg-window-secondary) 100%);
    border: 1px solid var(--u-border-light);
    border-radius: var(--u-radius-lg, 10px);
    box-shadow: var(--u-shadow-lg);
    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow: hidden;
}
.game-menu.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.game-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--u-space-md) var(--u-space-lg);
    background: linear-gradient(90deg, rgba(var(--u-primary-rgb), 0.18) 0%, rgba(var(--u-danger-rgb), 0.1) 50%, transparent 100%);
    border-bottom: 1px solid rgba(var(--u-line-rgb), 0.18);
}
.menu-title {
    font-size: var(--u-font-lg);
    font-weight: 700;
    color: var(--u-text);
    letter-spacing: 0.5px;
    text-shadow: 0 0 14px rgba(var(--u-primary-rgb), 0.5);
}
.menu-close-btn {
    width: calc(32px * var(--adaptive-scale));
    height: calc(32px * var(--adaptive-scale));
    min-width: calc(32px * var(--adaptive-scale));
    min-height: calc(32px * var(--adaptive-scale));
    background: var(--u-bg-card);
    border: 1px solid var(--u-border-light);
    border-radius: 50%;
    color: var(--u-danger);
    font-size: calc(14px * var(--adaptive-scale));
    cursor: pointer;
    transition: var(--u-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.menu-close-btn:hover {
    background: rgba(var(--u-danger-rgb), 0.15);
    border-color: var(--u-danger);
    color: var(--u-danger);
}

/* Две колонки: 20 пунктов в один столбец не помещались на экран,
   и половина меню оказывалась за нижней границей — до неё надо было
   догадаться доскроллить.
   Сетка, а не column-count: колонки уводили лишние секции вбок,
   за границу окна, где их обрезало overflow: hidden. */
.game-menu-content {
    padding: var(--u-space-md) var(--u-space-lg) var(--u-space-lg);
    max-height: calc(85vh - 60px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--u-space-sm) var(--u-space-lg);
    align-content: start;
}

.menu-section {
    margin-bottom: 0;
}
.menu-section-title {
    font-size: var(--u-font-sm);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--u-accent-gold);
    padding: var(--u-space-xs) var(--u-space-sm);
    margin-bottom: var(--u-space-xs);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(var(--u-accent-gold-rgb), 0.5);
}
.menu-items {
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--adaptive-scale));
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-md);
    padding: var(--u-space-sm) var(--u-space-md);
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--u-radius-md);
    color: var(--u-text);
    font-size: var(--u-font-md);
    text-align: left;
    cursor: pointer;
    transition: var(--u-transition);
    min-height: calc(38px * var(--adaptive-scale));
    position: relative;
    overflow: hidden;
}

/* Телефон: пункт меню — цель нажатия минимум 44px. */
@media (max-width: 480px) {
    .menu-item {
        min-height: 44px;
    }
}
.menu-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--u-primary-rgb), 0.2), rgba(var(--u-danger-rgb), 0.12), transparent);
    opacity: 0;
    transition: opacity var(--u-transition);
    pointer-events: none;
}
.menu-item:hover {
    border-color: rgba(var(--u-line-rgb), 0.3);
    transform: translateX(4px);
    color: var(--u-accent-sakura-light);
}
.menu-item:hover::before {
    opacity: 1;
}
.menu-item:active {
    transform: translateX(4px) scale(0.98);
}

.menu-icon {
    font-size: calc(20px * var(--adaptive-scale));
    width: calc(28px * var(--adaptive-scale));
    min-width: calc(28px * var(--adaptive-scale));
    height: calc(24px * var(--adaptive-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    position: relative;
    z-index: 1;
    transition: transform var(--u-transition);
}
.menu-item:hover .menu-icon {
    transform: scale(1.2) rotate(-6deg);
}
.menu-label {
    flex: 1;
    line-height: 1.3;
    font-size: var(--u-font-md);
    position: relative;
    z-index: 1;
    font-weight: 500;
}
.menu-hotkey {
    font-size: var(--u-font-xs);
    color: var(--u-primary-light);
    background: rgba(var(--u-line-rgb), 0.12);
    padding: calc(3px * var(--adaptive-scale)) calc(8px * var(--adaptive-scale));
    border-radius: var(--u-radius-full);
    flex-shrink: 0;
    border: 1px solid rgba(var(--u-line-rgb), 0.2);
    font-weight: 600;
    position: relative;
    z-index: 1;
    letter-spacing: 0.4px;
}

.menu-item-danger {
    color: var(--u-danger);
}
.menu-item-danger:hover {
    border-color: rgba(var(--u-danger-rgb), 0.4);
    color: var(--u-danger);
}
.menu-item-danger::before {
    background: linear-gradient(90deg, rgba(var(--u-danger-rgb), 0.25), rgba(var(--u-danger-rgb), 0.15), transparent);
}

/* override: anime menu-btn variant — fully redefined in hud-styles.css */

/* Адаптивность */
@media (max-width: 760px) {
    .game-menu-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .game-menu {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        transform: translate(-50%, -50%);
    }
    .game-menu.visible {
        transform: translate(-50%, -50%);
    }
    .game-menu-content {
        max-height: calc(var(--real-vh, 1vh) * 100 - 60px);
    }
}

/* ========================================
   MENU UI COMPONENTS STYLES
   UISkills, UITopList, UITopClanList, 
   UITopRatingList, UIFriends, UINews,
   UIAuction, UITreasure, UISelectClan
   ======================================== */

/* === ОБЩИЕ СТИЛИ ДЛЯ MENU ОКОН (anime sky glass) === */
.game-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:
        var(--u-grad-glass),
        linear-gradient(135deg, var(--u-bg-window-primary) 0%, var(--u-bg-window-secondary) 100%);
    border: 1px solid var(--u-border-light);
    border-radius: var(--u-radius-lg, 10px);
    box-shadow: var(--u-shadow-lg);
    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    min-width: min(400px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    animation: windowFadeIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes windowFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Шапка в едином стиле unified: без цветных градиентов —
   циан на экране означает состояние, а не украшение заголовка. */
.game-window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--u-space-sm, 12px) var(--u-space-lg, 16px);
    border-bottom: 1px solid var(--u-border-light);
    background: rgba(var(--u-panel-rgb), 0.45);
    border-radius: var(--u-radius-lg, 10px) var(--u-radius-lg, 10px) 0 0;
}

.game-window-title {
    font-family: var(--u-font-display);
    font-size: var(--u-font-lg, 16px);
    font-weight: 600;
    color: var(--u-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-window-close {
    width: calc(32px * var(--adaptive-scale));
    height: calc(32px * var(--adaptive-scale));
    min-width: calc(32px * var(--adaptive-scale));
    min-height: calc(32px * var(--adaptive-scale));
    border: 1px solid var(--u-border-light);
    background: var(--u-bg-card);
    border-radius: var(--u-radius-full);
    color: var(--u-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color var(--u-transition), border-color var(--u-transition), background var(--u-transition);
}
.game-window-close:hover {
    background: rgba(var(--u-danger-rgb), 0.15);
    border-color: var(--u-danger);
    color: var(--u-danger);
}
.game-window-close:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

.game-window-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--u-space-lg, 16px);
}

/* === SKILLS WINDOW === */
.skills-window {
    width: 800px;
    max-width: 95vw;
}

/* Окно по содержимому, а не во весь экран: навыков на четыре карточки,
   и в полноэкранном варианте две трети площади оставались пустой заливкой. */
.skills-window.fullscreen-window {
    width: calc(1180px * var(--adaptive-scale));
    max-width: 95vw;
    height: auto;
    max-height: calc(var(--real-vh, 1vh) * 90);
    border-radius: var(--u-radius-xl, 28px);
}

.skills-window.fullscreen-window .game-window-content {
    max-height: calc(var(--real-vh, 1vh) * 90 - 64px);
    overflow-y: auto;
}

/* Две колонки: карточка пилота слева, навыки справа.
   Раньше всё шло сверху вниз в одну колонку на всю ширину экрана:
   значения параметров улетали к правому краю в полутора тысячах пикселей
   от своих подписей, а нижние две трети окна оставались пустой заливкой. */
.skills-content {
    display: grid;
    grid-template-columns: calc(300px * var(--adaptive-scale)) 1fr;
    grid-template-rows: 1fr auto;
    gap: var(--u-space-lg, 16px);
    height: 100%;
    align-content: start;
}

.skills-player-info {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: var(--u-space-lg, 16px);
    padding: var(--u-space-lg, 16px);
    background: rgba(var(--u-line-rgb), 0.06);
    border-radius: var(--u-radius-md, 8px);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    align-self: start;
}

/* Ширину строки задаёт колонка, поэтому подпись и значение снова рядом. */
.skills-player-info .stat-row {
    justify-content: space-between;
    gap: var(--u-space-sm, 8px);
}

.skills-player-info .stat-label {
    min-width: 0;
}

.player-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-space-sm, 8px);
}

.player-avatar-frame {
    width: 80px;
    height: 80px;
    border-radius: var(--u-radius-lg, 12px);
    border: 2px solid rgba(var(--u-accent-gold-rgb), 0.32);
    overflow: hidden;
    background: var(--u-scrim-soft);
}

.player-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-name {
    font-weight: 600;
    color: var(--u-text, var(--u-text));
}

.player-stats-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--u-space-sm, 8px);
}

.stat-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-md, 12px);
}

.stat-label {
    color: var(--u-text-secondary, var(--u-text-secondary));
    min-width: 120px;
}

.stat-value {
    font-weight: 600;
    color: var(--u-text, var(--u-text));
}

.level-value { color: var(--u-primary, var(--u-accent-gold)); }
.status-value { color: var(--u-warning, var(--u-accent-gold)); }

.free-points-row {
    margin-top: auto;
    padding-top: var(--u-space-sm, 8px);
    border-top: 1px solid rgba(var(--u-white-rgb), 0.1);
}
.free-points-value {
    color: var(--u-success, var(--u-success));
    font-size: 1.2em;
}

.exp-bar-container {
    flex: 1;
    height: 16px;
    background: var(--u-scrim-soft);
    border-radius: var(--u-radius-sm, 4px);
    position: relative;
    overflow: hidden;
}

.exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--u-warning, var(--u-accent-gold)) 0%, var(--u-primary, var(--u-accent-gold)) 100%);
    border-radius: var(--u-radius-sm, 4px);
    transition: width 0.3s ease;
}

.exp-bar-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--u-font-xs);
    color: var(--u-text, var(--u-text));
    text-shadow: 0 1px 2px var(--u-scrim-heavy);
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(280px * var(--adaptive-scale)), 1fr));
    gap: var(--u-space-md, 12px);
    align-content: start;
}

.skills-group {
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    overflow: hidden;
    align-self: start;
}

.skills-group-header {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm, 8px);
    padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--u-line-rgb), 0.12);
}

.group-icon {
    display: flex;
    align-items: center;
    color: var(--u-primary, var(--u-primary-light));
}

.group-icon .ui-icon {
    width: calc(18px * var(--adaptive-scale));
    height: calc(18px * var(--adaptive-scale));
}

.group-title {
    font-weight: 600;
    color: var(--u-primary, var(--u-accent-gold));
}

.skills-group-content {
    padding: var(--u-space-sm, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs, 4px);
}

.skill-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm, 8px);
    padding: var(--u-space-xs, 4px) var(--u-space-sm, 8px);
    border-radius: var(--u-radius-sm, 4px);
    transition: background 0.2s ease;
}
.skill-row:hover {
    background: rgba(var(--u-line-rgb), 0.06);
}

.skill-name {
    flex: 1;
    color: var(--u-text, var(--u-text));
    font-size: var(--u-font-sm, 13px);
}

.skill-bar {
    width: 80px;
    height: 8px;
    background: var(--u-scrim-soft);
    border-radius: var(--u-radius-sm, 4px);
    overflow: hidden;
}

.skill-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--u-primary, var(--u-accent-gold)) 0%, var(--u-success, var(--u-success)) 100%);
    border-radius: var(--u-radius-sm, 4px);
    transition: width 0.2s ease;
}

.skill-value {
    min-width: calc(24px * var(--adaptive-scale));
    text-align: center;
    font-weight: 600;
    color: var(--u-text, var(--u-text));
}
.skill-value.has-pending {
    color: var(--u-success, var(--u-success));
}

.skill-plus-btn {
    width: calc(26px * var(--adaptive-scale));
    height: calc(26px * var(--adaptive-scale));
    /* Без выравнивания по центру «+» упирался в нижнюю границу и срезался. */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid rgba(var(--u-accent-gold-rgb), 0.32);
    background: rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-sm, 4px);
    color: var(--u-primary, var(--u-accent-gold));
    font-size: calc(16px * var(--adaptive-scale));
    line-height: 1;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.skill-plus-btn:hover:not(:disabled) {
    background: rgba(var(--u-line-rgb), 0.22);
    border-color: var(--u-primary, var(--u-accent-gold));
}
.skill-plus-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.skills-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--u-space-md, 12px);
    padding-top: var(--u-space-md, 12px);
    border-top: 1px solid rgba(var(--u-white-rgb), 0.1);
}

.skills-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    padding: var(--u-space-md, 12px) var(--u-space-lg, 16px);
    background: linear-gradient(135deg, var(--u-success), var(--u-primary-light));
    color: var(--u-bg-dark);
    border-radius: var(--u-radius-md, 8px);
    font-weight: 600;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.3s ease;
    z-index: 2000;
}
.skills-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* === TOP LIST (Players) === */
.toplist-window,
.topclanlist-window {
    width: 650px;
}

.toplist-content,
.topclanlist-content {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md, 12px);
}

.toplist-header,
.topclanlist-header {
    display: grid;
    grid-template-columns: 60px 1fr 120px;
    gap: var(--u-space-md, 12px);
    padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    font-weight: 600;
    color: var(--u-text-secondary, var(--u-text-secondary));
    font-size: var(--u-font-sm, 13px);
}

.toplist-list,
.topclanlist-list {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs, 4px);
    max-height: 400px;
    overflow-y: auto;
}

.toplist-row,
.topclanlist-row {
    display: grid;
    grid-template-columns: 60px 1fr 120px;
    gap: var(--u-space-md, 12px);
    padding: var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.toplist-row:hover,
.topclanlist-row:hover {
    background: rgba(var(--u-line-rgb), 0.1);
    border-color: rgba(var(--u-line-rgb), 0.22);
}

.toplist-row.rank-gold,
.topclanlist-row.rank-gold {
    border-left: 3px solid var(--u-accent-gold);
}
.toplist-row.rank-silver,
.topclanlist-row.rank-silver {
    border-left: 3px solid var(--u-accent-lavender-light, var(--u-text));
}
.toplist-row.rank-bronze,
.topclanlist-row.rank-bronze {
    border-left: 3px solid var(--u-accent-sakura);
}

.rank-number {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--accent-color, var(--u-primary, var(--u-accent-gold)));
}

.col-player,
.col-clan {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm, 8px);
}

.player-icons,
.clan-logo {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs, 4px);
}

/* Только значки в строках рейтинга. Без ограничения селектора это правило
   задевало и крупный портрет расы на экране создания пилота — тот сжимался
   до 32 пикселей. */
.clan-logo img,
.player-icons .race-icon,
.player-icons .ship-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--u-radius-sm, 4px);
}

.player-info,
.clan-info {
    display: flex;
    flex-direction: column;
}

.player-name,
.clan-name {
    font-weight: 600;
    color: var(--u-text, var(--u-text));
}

.player-meta,
.clan-leader,
.clan-meta {
    font-size: var(--u-font-xs, 11px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}

.col-exp,
.col-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.exp-label,
.stat-label {
    font-size: var(--u-font-xs, 11px);
    color: var(--u-text-muted, var(--u-text-muted));
}

.exp-value {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--u-accent-gold);
}

.toplist-empty,
.topclanlist-empty,
.toprating-empty {
    text-align: center;
    padding: var(--u-space-xl, 24px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}

/* === TOP RATING (PvP) === */
.toprating-window {
    width: 700px;
}

.toprating-content {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md, 12px);
}

.toprating-filters {
    display: flex;
    gap: var(--u-space-sm, 8px);
}

.period-btn.active {
    background: var(--u-primary, var(--u-accent-gold));
    color: var(--u-bg-dark, var(--u-bg-dark));
}

.toprating-header {
    display: grid;
    gap: var(--u-space-sm, 8px);
    padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    font-weight: 600;
    color: var(--u-text-secondary, var(--u-text-secondary));
    font-size: var(--u-font-sm, 13px);
}

.toprating-list {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs, 4px);
    max-height: 400px;
    overflow-y: auto;
}

.toprating-row {
    display: grid;
    gap: var(--u-space-sm, 8px);
    padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.toprating-row:hover {
    background: rgba(var(--u-line-rgb), 0.1);
}

.toprating-row.top-1 { border-left: 3px solid var(--u-accent-gold); box-shadow: -2px 0 14px rgba(var(--u-accent-gold-rgb), 0.4); }
.toprating-row.top-2 { border-left: 3px solid var(--u-accent-lavender-light, var(--u-text)); box-shadow: -2px 0 14px rgba(var(--u-line-rgb), 0.35); }
.toprating-row.top-3 { border-left: 3px solid var(--u-accent-sakura); box-shadow: -2px 0 14px rgba(var(--u-accent-sakura-rgb), 0.35); }

.col-kills .kills { color: var(--u-success, var(--u-success)); }
.col-deaths .deaths { color: var(--u-danger, var(--u-danger)); }

.kd-excellent { color: var(--u-success); text-shadow: 0 0 8px rgba(var(--u-success-rgb), 0.5); }
.kd-good { color: var(--u-accent-gold); text-shadow: 0 0 8px rgba(var(--u-accent-gold-rgb), 0.5); }
.kd-normal { color: var(--u-warning); text-shadow: 0 0 8px rgba(var(--u-warning-rgb), 0.5); }
.kd-bad { color: var(--u-danger); text-shadow: 0 0 8px rgba(var(--u-danger-rgb), 0.5); }

/* === FRIENDS REQUESTS === */
.friendrequests-window {
    width: 450px;
}

.friendrequests-content {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md, 12px);
}

.friendrequests-count {
    padding: var(--u-space-sm, 8px);
    background: rgba(var(--u-line-rgb), 0.06);
    border-radius: var(--u-radius-md, 8px);
    text-align: center;
}

.count-value {
    font-weight: bold;
    color: var(--u-primary, var(--u-accent-gold));
}

.friendrequests-list {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs, 4px);
    max-height: 350px;
    overflow-y: auto;
}

.friendrequest-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-md, 12px);
    padding: var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
}
.friendrequest-row:hover {
    background: rgba(var(--u-line-rgb), 0.1);
}

.request-player {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--u-space-sm, 8px);
}

.request-time {
    font-size: var(--u-font-xs, 11px);
    color: var(--u-text-muted, var(--u-text-muted));
}

.request-actions {
    display: flex;
    gap: var(--u-space-xs, 4px);
}

.friendrequests-empty {
    text-align: center;
    padding: var(--u-space-xl, 24px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}

.friendrequests-actions {
    display: flex;
    justify-content: center;
}

/* === NEWS LIST === */
.newslist-window {
    width: 600px;
}

.newslist-content {
    display: flex;
    flex-direction: column;
}

.newslist-list {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-sm, 8px);
    max-height: 450px;
    overflow-y: auto;
}

.news-item {
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    overflow: hidden;
    transition: all 0.2s ease;
}
.news-item.is-new {
    border-color: rgba(var(--u-success-rgb), 0.3);
}
.news-item.expanded {
    border-color: rgba(var(--u-accent-gold-rgb), 0.32);
}

.news-header {
    display: flex;
    align-items: center;
    gap: var(--u-space-md, 12px);
    padding: var(--u-space-md, 12px);
    cursor: pointer;
    transition: background 0.2s ease;
}
.news-header:hover {
    background: rgba(var(--u-line-rgb), 0.06);
}

.news-meta {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm, 8px);
}

.news-badge {
    font-size: var(--u-font-xs);
    font-weight: bold;
    padding: 2px 6px;
    background: var(--u-success, var(--u-success));
    color: var(--u-bg-dark, var(--u-bg-dark));
    border-radius: var(--u-radius-sm, 4px);
}

.news-date {
    font-size: var(--u-font-xs, 11px);
    color: var(--u-text-muted, var(--u-text-muted));
}

.news-title {
    flex: 1;
    font-weight: 600;
    color: var(--u-text, var(--u-text));
}

.news-toggle {
    color: var(--u-text-secondary, var(--u-text-secondary));
}

.news-body {
    padding: 0 var(--u-space-md, 12px) var(--u-space-md, 12px);
    border-top: 1px solid rgba(var(--u-white-rgb), 0.05);
}

.news-text {
    color: var(--u-text-secondary, var(--u-text-secondary));
    line-height: 1.5;
}

.news-image {
    max-width: 100%;
    border-radius: var(--u-radius-md, 8px);
    margin-top: var(--u-space-md, 12px);
}

.newslist-empty {
    text-align: center;
    padding: var(--u-space-xl, 24px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}

/* === AUCTION === */
.auction-window {
    width: 750px;
}

.auction-content {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md, 12px);
}

.auction-filters {
    display: flex;
    gap: var(--u-space-sm, 8px);
}

.auction-category-filter {
    flex: 1;
    padding: var(--u-space-sm, 8px);
    background: rgba(var(--u-line-rgb), 0.06);
    border: 1px solid rgba(var(--u-line-rgb), 0.22);
    border-radius: var(--u-radius-md, 8px);
    color: var(--u-text, var(--u-text));
}

.auction-search {
    flex: 2;
    padding: var(--u-space-sm, 8px);
    background: var(--u-scrim-soft);
    border: 1px solid rgba(var(--u-line-rgb), 0.22);
    border-radius: var(--u-radius-md, 8px);
    color: var(--u-text, var(--u-text));
}
.auction-search::placeholder {
    color: var(--u-text-muted, var(--u-text-muted));
}

.auction-lots-header {
    display: grid;
    grid-template-columns: 1fr 100px 100px 80px 80px;
    gap: var(--u-space-sm, 8px);
    padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    font-weight: 600;
    color: var(--u-text-secondary, var(--u-text-secondary));
    font-size: var(--u-font-sm, 13px);
}

.auction-lots-list {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs, 4px);
    max-height: 350px;
    overflow-y: auto;
}

.auction-lot-row {
    display: grid;
    grid-template-columns: 1fr 100px 100px 80px 80px;
    gap: var(--u-space-sm, 8px);
    padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.auction-lot-row:hover {
    background: rgba(var(--u-line-rgb), 0.1);
}

.lot-item-icon {
    width: 40px;
    height: 40px;
    position: relative;
}
.lot-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.lot-count {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: var(--u-font-xs);
    background: var(--u-scrim-heavy);
    padding: 1px 4px;
    border-radius: 3px;
}

.col-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm, 8px);
}

.lot-item-name {
    font-weight: 600;
    color: var(--u-text, var(--u-text));
}
.lot-item-level {
    font-size: var(--u-font-xs, 11px);
    color: var(--u-text-muted, var(--u-text-muted));
}

.lot-price {
    font-weight: bold;
    color: var(--u-accent-gold);
}
.lot-currency {
    font-size: var(--u-font-xs, 11px);
    color: var(--u-text-muted, var(--u-text-muted));
}

.col-time.urgent {
    color: var(--u-danger, var(--u-danger));
}

.auction-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--u-space-md, 12px);
}

.auction-page-info {
    color: var(--u-text-secondary, var(--u-text-secondary));
}

.auction-sell-panel {
    padding: var(--u-space-lg, 16px);
    background: rgba(var(--u-line-rgb), 0.06);
    border-radius: var(--u-radius-md, 8px);
    text-align: center;
}

.sell-panel-title {
    font-weight: 600;
    margin-bottom: var(--u-space-sm, 8px);
}

.sell-panel-hint {
    color: var(--u-text-secondary, var(--u-text-secondary));
    margin-bottom: var(--u-space-md, 12px);
}

.auction-empty {
    text-align: center;
    padding: var(--u-space-xl, 24px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}

/* === TREASURE SHOP === */
.treasure-window {
    width: 700px;
}

.treasure-content {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md, 12px);
}

.treasure-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.06);
    border-radius: var(--u-radius-md, 8px);
}

.treasure-balance {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm, 8px);
}

.balance-icon {
    font-size: 1.5em;
}

.treasure-balance-value {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--u-accent-lavender);
}

.treasure-unlock-timer {
    font-size: var(--u-font-sm, 13px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}
.treasure-unlock-timer.unlocked {
    color: var(--u-success, var(--u-success));
}

.treasure-tab-content {
    min-height: 300px;
}

.treasure-capsules-grid,
.treasure-mycases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(140px * var(--adaptive-scale)), 1fr));
    gap: var(--u-space-md, 12px);
}

.treasure-capsule-card,
.treasure-mycase-card {
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    padding: var(--u-space-md, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-space-sm, 8px);
    transition: all 0.2s ease;
}
.treasure-capsule-card:hover,
.treasure-mycase-card:hover {
    border-color: rgba(var(--u-accent-gold-rgb), 0.32);
    transform: translateY(-2px);
}

.treasure-capsule-card.sold-out {
    opacity: 0.6;
}

.capsule-icon,
.mycase-icon {
    font-size: calc(32px * var(--adaptive-scale));
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.capsule-name,
.mycase-name {
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

.capsule-price {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs, 4px);
}

.price-icon {
    font-size: calc(16px * var(--adaptive-scale));
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-value {
    font-weight: bold;
    color: var(--u-accent-lavender);
}

.capsule-stock {
    font-size: var(--u-font-xs, 11px);
}
.stock-unlimited { color: var(--u-text-secondary, var(--u-text-secondary)); }
.stock-available { color: var(--u-success, var(--u-success)); }
.stock-low { color: var(--u-warning, var(--u-accent-gold)); }
.stock-soldout { color: var(--u-danger, var(--u-danger)); }

.mycase-status {
    font-size: var(--u-font-sm, 13px);
}
.status-ready { color: var(--u-success, var(--u-success)); }
.status-claimed { color: var(--u-text-muted, var(--u-text-muted)); }

.treasure-history-list,
.treasure-sell-list {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs, 4px);
    max-height: 300px;
    overflow-y: auto;
}

.treasure-history-row,
.treasure-sell-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--u-space-sm, 8px) var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
}

.treasure-empty {
    text-align: center;
    padding: var(--u-space-xl, 24px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}

/* === SELECT CLAN === */
.selectclan-window {
    width: 550px;
}

.selectclan-content {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md, 12px);
}

.selectclan-search {
    display: flex;
    gap: var(--u-space-sm, 8px);
}

.selectclan-search-input {
    flex: 1;
    padding: var(--u-space-sm, 8px);
    background: var(--u-scrim-soft);
    border: 1px solid rgba(var(--u-line-rgb), 0.22);
    border-radius: var(--u-radius-md, 8px);
    color: var(--u-text, var(--u-text));
}
.selectclan-search-input::placeholder {
    color: var(--u-text-muted, var(--u-text-muted));
}

.selectclan-letters {
    overflow-x: auto;
    padding: var(--u-space-xs, 4px) 0;
}

.letters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.letter-btn {
    min-width: calc(28px * var(--adaptive-scale));
    height: calc(28px * var(--adaptive-scale));
    border: 1px solid rgba(var(--u-line-rgb), 0.22);
    background: rgba(var(--u-line-rgb), 0.06);
    border-radius: var(--u-radius-sm, 4px);
    color: var(--u-text, var(--u-text));
    font-size: var(--u-font-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.letter-btn:hover {
    background: rgba(var(--u-line-rgb), 0.16);
    border-color: rgba(var(--u-accent-gold-rgb), 0.42);
}
.letter-btn.active {
    background: var(--u-primary, var(--u-accent-gold));
    color: var(--u-bg-dark, var(--u-bg-dark));
    border-color: var(--u-primary, var(--u-accent-gold));
}

.selectclan-list-panel {
    min-height: calc(250px * var(--adaptive-scale));
}

.selectclan-list {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs, 4px);
    max-height: calc(300px * var(--adaptive-scale));
    overflow-y: auto;
}

.selectclan-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-md, 12px);
    padding: var(--u-space-md, 12px);
    background: rgba(var(--u-line-rgb), 0.04);
    border: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-radius: var(--u-radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
}
.selectclan-row:hover {
    background: rgba(var(--u-line-rgb), 0.1);
    border-color: rgba(var(--u-line-rgb), 0.22);
}

.selectclan-row .clan-logo {
    width: calc(48px * var(--adaptive-scale));
    height: calc(48px * var(--adaptive-scale));
    border-radius: var(--u-radius-md, 8px);
    overflow: hidden;
    background: var(--u-scrim-soft);
}
.selectclan-row .clan-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selectclan-row .clan-info {
    flex: 1;
}

.selectclan-row .clan-name {
    font-weight: 600;
    color: var(--u-text, var(--u-text));
}

.selectclan-row .clan-meta {
    display: flex;
    gap: var(--u-space-md, 12px);
    font-size: var(--u-font-xs, 11px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}

.selectclan-row .clan-actions {
    display: flex;
    gap: var(--u-space-xs, 4px);
}

.selectclan-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--u-space-md, 12px);
}

.selectclan-page-info {
    color: var(--u-text-secondary, var(--u-text-secondary));
}

.selectclan-loading,
.selectclan-empty {
    text-align: center;
    padding: var(--u-space-xl, 24px);
    color: var(--u-text-secondary, var(--u-text-secondary));
}

/* === UNIFIED BUTTONS =========================================
   Единственное авторитетное описание кнопок: этот файл подключается
   последним и всё равно перебивает раздел 6 в styles-unified.css.
   В коде живут два способа записи вариантов — `unified-btn primary`
   и `unified-btn-primary`, — поэтому оба перечислены рядом и дают
   одинаковый вид. Иначе половина кнопок выглядела иначе, чем вторая.
   ============================================================ */
.unified-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-sm, 8px);
    padding: calc(9px * var(--adaptive-scale, 1)) calc(18px * var(--adaptive-scale, 1));
    border: 1px solid var(--u-border, rgba(var(--u-line-rgb), 0.28));
    background:
        linear-gradient(180deg, rgba(var(--u-white-rgb), 0.06), transparent 70%),
        rgba(var(--u-panel-raised-rgb), 0.28);
    border-radius: var(--u-radius-md, 14px);
    color: var(--u-text, var(--u-text));
    font-size: var(--u-font-md, 14px);
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.18s ease;
}
.unified-btn:hover:not(:disabled) {
    background:
        linear-gradient(180deg, rgba(var(--u-white-rgb), 0.1), transparent 70%),
        rgba(var(--u-panel-raised-rgb), 0.38);
    border-color: var(--u-border-accent, rgba(var(--u-line-rgb), 0.45));
    transform: translateY(-1px);
}
.unified-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
}
.unified-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--u-primary-rgb, 111, 195, 255), 0.35);
}
.unified-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Основное действие окна — одно на экран. */
.unified-btn.primary,
.unified-btn-primary {
    background: linear-gradient(135deg,
        rgba(var(--u-primary-rgb, 111, 195, 255), 0.9),
        rgba(var(--u-accent-lavender-rgb, 196, 168, 255), 0.85));
    border-color: rgba(var(--u-primary-rgb, 111, 195, 255), 0.65);
    color: var(--u-bg-deep);
    text-shadow: none;
}
.unified-btn.primary:hover:not(:disabled),
.unified-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--u-primary, var(--u-primary-light)), var(--u-accent-lavender, var(--u-accent-lavender)));
    box-shadow: 0 6px 20px rgba(var(--u-primary-rgb, 111, 195, 255), 0.35);
}

.unified-btn.secondary,
.unified-btn-secondary {
    background: rgba(var(--u-panel-raised-rgb), 0.55);
    border-color: var(--u-border-light, rgba(var(--u-line-rgb), 0.16));
    color: var(--u-text-secondary, var(--u-text-secondary));
}
.unified-btn.secondary:hover:not(:disabled),
.unified-btn-secondary:hover:not(:disabled) {
    background: rgba(var(--u-panel-raised-rgb), 0.45);
    border-color: var(--u-border-accent, rgba(var(--u-line-rgb), 0.45));
    color: var(--u-text, var(--u-text));
}

.unified-btn.success,
.unified-btn-success {
    background: rgba(var(--u-success-rgb, 122, 231, 181), 0.18);
    border-color: rgba(var(--u-success-rgb, 122, 231, 181), 0.5);
    color: var(--u-success, var(--u-success));
}
.unified-btn.success:hover:not(:disabled),
.unified-btn-success:hover:not(:disabled) {
    background: rgba(var(--u-success-rgb, 122, 231, 181), 0.3);
    border-color: var(--u-success, var(--u-success));
}

.unified-btn.danger,
.unified-btn-danger {
    background: rgba(var(--u-danger-rgb, 255, 122, 149), 0.16);
    border-color: rgba(var(--u-danger-rgb, 255, 122, 149), 0.5);
    color: var(--u-danger, var(--u-danger));
    box-shadow: none;
}
.unified-btn.danger:hover:not(:disabled),
.unified-btn-danger:hover:not(:disabled) {
    background: rgba(var(--u-danger-rgb, 255, 122, 149), 0.28);
    border-color: var(--u-danger, var(--u-danger));
}

.unified-btn.warning,
.unified-btn-warning {
    background: rgba(var(--u-warning-rgb, 255, 184, 112), 0.18);
    border-color: rgba(var(--u-warning-rgb, 255, 184, 112), 0.5);
    color: var(--u-warning, var(--u-warning));
}
.unified-btn.warning:hover:not(:disabled),
.unified-btn-warning:hover:not(:disabled) {
    background: rgba(var(--u-warning-rgb, 255, 184, 112), 0.3);
    border-color: var(--u-warning, var(--u-warning));
}

.unified-btn.sm,
.unified-btn-sm {
    padding: calc(5px * var(--adaptive-scale, 1)) calc(11px * var(--adaptive-scale, 1));
    font-size: var(--u-font-sm, 12px);
}
.unified-btn.lg,
.unified-btn-lg {
    padding: calc(13px * var(--adaptive-scale, 1)) calc(26px * var(--adaptive-scale, 1));
    font-size: var(--u-font-lg, 16px);
}
.unified-btn.full,
.unified-btn-full {
    width: 100%;
}

/* ========================================
   INVENTORY - специфичные стили
   ======================================== */

.inventory-content {
    display: flex;
    flex: 1;
    gap: var(--u-space-lg);
    overflow: hidden;
    min-height: 0;
}

/* Sidebar - адаптивная ширина через --adaptive-scale */
.inventory-sidebar {
    width: calc(240px * var(--adaptive-scale));
    min-width: calc(180px * var(--adaptive-scale));
    max-width: calc(300px * var(--adaptive-scale));
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
    flex-shrink: 0;
    overflow-y: auto;
}

/* Спрайт корабля — низкое растровое разрешение, поэтому его не растягивают
   и не запирают в скруглённый квадрат: рамка подчёркивала мыло по краям.
   Вместо неё — прозрачная площадка с тонкой линией основания. */
.inventory-ship-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(96px * var(--adaptive-scale));
    margin: 0 auto;
    padding-bottom: var(--u-space-sm);
    border-bottom: 1px solid var(--u-border-light);
    overflow: hidden;
    flex-shrink: 0;
}

.inventory-ship-sprite {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: auto;
}

.inventory-stats {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs, 6px);
}

/* Числа характеристик — одна ширина знака, иначе колонка значений пляшет
   при каждом обновлении HP и энергии. */
.inventory-stats .unified-stat-value,
.inventory-stats .unified-stat-label {
    font-variant-numeric: tabular-nums;
}

/* Характеристики корабля не красятся «на вкус»: сама по себе строка HP не
   тревога и не успех. Цвет остаётся текстовым, а сигнальный появляется
   в `.low` — когда значение упало ниже порога. */
.inventory-stats .unified-stat-value {
    color: var(--u-text);
}

.inventory-stats .unified-stat-value.low { color: var(--u-danger); }
.inventory-stats .unified-stat-value.full { color: var(--u-success); }

/* Main area */
.inventory-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--u-space-md);
    min-width: 0;
    overflow-y: auto;
}

.inventory-tabs {
    display: flex;
    gap: var(--u-space-xs);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.inventory-tabs::-webkit-scrollbar { display: none; }

.inventory-tabs .unified-tab {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
    padding: var(--u-space-sm) var(--u-space-md);
    font-size: var(--u-font-sm);
    flex-shrink: 0;
}

.inventory-tabs .tab-icon {
    font-size: calc(16px * var(--adaptive-scale));
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-panel {
    flex: 1;
    display: flex;
    gap: var(--u-space-md);
    min-height: 0;
    overflow: hidden;
}

/* Equipment section - занимает только сколько нужно */
.inventory-equipment-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-height: 100%;
    overflow-y: auto;
}

.inventory-slots-count,
.inventory-hold-count {
    font-size: var(--u-font-xs, 12px);
    color: var(--u-text-secondary, var(--u-text-secondary));
    margin-left: auto;
}

.inventory-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(84px * var(--adaptive-scale)), 1fr));
    gap: calc(10px * var(--adaptive-scale));
    padding: calc(8px * var(--adaptive-scale));
}

/* Ячейка инвентаря повторяет общий слот из секции SLOTS: цвет редкости
   приходит через `--slot-rarity`, здесь остаётся только раскладка. */
.inventory-slot {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(var(--slot-rarity-rgb), 0.10), transparent 60%),
        var(--u-bg-card);
    border: 1px solid rgba(var(--slot-rarity-rgb), 0.38);
    border-radius: var(--u-radius-md);
    cursor: pointer;
    transition: var(--u-transition);
    position: relative;
    overflow: hidden;
}

/* Пустая ячейка — пунктир, а не «выцветшая занятая»: прежние 35% прозрачности
   читались как недоступный предмет, а не как свободное место. */
.inventory-slot.empty {
    cursor: default;
    border-style: dashed;
    border-color: var(--u-border-light);
    background: var(--u-bg-row);
}

.inventory-slot:not(.empty):hover {
    background:
        linear-gradient(180deg, rgba(var(--slot-rarity-rgb), 0.18), transparent 60%),
        var(--u-bg-card-hover);
    border-color: var(--slot-rarity);
}

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

.inventory-slot.selected {
    border-color: var(--u-primary);
    background:
        linear-gradient(180deg, rgba(var(--u-primary-rgb), 0.16), transparent 60%),
        var(--u-bg-card-hover);
    box-shadow: 0 0 0 1px var(--u-primary), var(--u-glow-primary);
}

.inventory-slot.disabled,
.inventory-slot.locked {
    cursor: not-allowed;
    border-color: rgba(var(--u-danger-rgb), 0.30);
    opacity: var(--u-opacity-solid);
    filter: saturate(0.4);
}

.inventory-slot.dragging { opacity: var(--u-opacity-strong); cursor: grabbing; }

.inventory-slot.drop-target {
    border-color: var(--u-success);
    border-style: dashed;
    background: rgba(var(--u-success-rgb), var(--u-opacity-faint));
}

.inventory-slot-icon {
    width: 74%;
    height: 74%;
    border-radius: var(--u-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform var(--u-transition);
}

.inventory-slot:not(.empty):hover .inventory-slot-icon {
    transform: scale(1.06);
}

.inventory-slot-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inventory-slot-icon > .ui-icon {
    width: 60%;
    height: 60%;
    color: var(--slot-rarity);
}

/* Тип предмета — только подложка заглушки, когда картинки нет.
   Насыщенность берётся от редкости: тип отвечает за «что это»,
   редкость за «насколько ценно», и смешивать их в одном канте нельзя. */
.inventory-slot-icon.item-weapon,
.inventory-slot-icon.item-device,
.inventory-slot-icon.item-resource,
.inventory-slot-icon.item-engine,
.inventory-slot-icon.item-droid,
.inventory-slot-icon.item-quest,
.inventory-slot-icon.item-container,
.inventory-slot-icon.item-ammo,
.inventory-slot-icon.item-common {
    background: rgba(var(--slot-rarity-rgb), var(--u-opacity-faint));
    border: 1px solid rgba(var(--slot-rarity-rgb), var(--u-opacity-medium));
    color: var(--slot-rarity);
}

/* Бейджи разведены по разным углам: количество слева сверху, уровень справа
   снизу. На одной стороне они перекрывали друг друга у стопки прокачанных
   предметов. Отступ внутрь — чтобы кант ячейки не срезал подпись. */
.inventory-slot-count,
.inventory-slot-level {
    position: absolute;
    z-index: 2;
    font-family: var(--u-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: calc(3px * var(--adaptive-scale)) calc(5px * var(--adaptive-scale));
    border-radius: var(--u-radius-sm);
    pointer-events: none;
    max-width: calc(100% - 8px * var(--adaptive-scale));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-slot-count {
    top: calc(3px * var(--adaptive-scale));
    left: calc(3px * var(--adaptive-scale));
    font-size: var(--u-font-xs);
    background: var(--u-bg-black-medium);
    border: 1px solid var(--u-border-light);
    color: var(--u-text);
}

.inventory-slot-level {
    bottom: calc(3px * var(--adaptive-scale));
    right: calc(3px * var(--adaptive-scale));
    font-size: var(--u-font-xs);
    background: var(--u-bg-black-medium);
    border: 1px solid rgba(var(--slot-rarity-rgb), var(--u-opacity-strong));
    color: var(--slot-rarity);
}

/* Tooltip */
.inventory-tooltip {
    position: fixed;
    z-index: 10000;
    min-width: calc(160px * var(--adaptive-scale));
    max-width: calc(280px * var(--adaptive-scale));
    padding: 0;
    background: var(--u-bg-window-secondary);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-md);
    box-shadow: var(--u-shadow-lg, 0 16px 40px rgba(var(--u-white-rgb), 0.6));
    pointer-events: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: var(--u-font-sm);
}

/* Шапка тултипа окрашивается редкостью предмета: тот же цвет, что у канта
   ячейки, из которой тултип вызван. */
.inventory-tooltip .tooltip-header {
    --slot-rarity: var(--u-text-secondary);
    --slot-rarity-rgb: 169, 189, 216;
    padding: var(--u-space-sm) var(--u-space-md);
    border-bottom: 1px solid var(--u-border-light);
    border-left: 2px solid var(--slot-rarity);
    background: rgba(var(--slot-rarity-rgb), var(--u-opacity-faint));
    border-radius: var(--u-radius-md) var(--u-radius-md) 0 0;
}

.inventory-tooltip .tooltip-header.rarity-rare {
    --slot-rarity: var(--u-primary);
    --slot-rarity-rgb: var(--u-primary-rgb);
}

.inventory-tooltip .tooltip-header.rarity-epic {
    --slot-rarity: var(--u-accent-lavender);
    --slot-rarity-rgb: var(--u-accent-lavender-rgb);
}

.inventory-tooltip .tooltip-header.rarity-legendary {
    --slot-rarity: var(--u-accent-gold);
    --slot-rarity-rgb: var(--u-accent-gold-rgb);
}

.inventory-tooltip .tooltip-name {
    font-family: var(--u-font-display);
    font-size: var(--u-font-md);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--slot-rarity);
}

.inventory-tooltip .tooltip-type {
    font-size: var(--u-font-xs);
    color: var(--u-text-secondary, var(--u-text-secondary));
    margin-top: calc(2px * var(--adaptive-scale));
}

.inventory-tooltip .tooltip-desc {
    padding: var(--u-space-sm) var(--u-space-md);
    font-size: var(--u-font-sm);
    color: var(--u-text-secondary);
    line-height: 1.45;
    border-bottom: 1px solid var(--u-border-light);
}

.inventory-tooltip .tooltip-stats {
    padding: var(--u-space-sm) var(--u-space-md);
}

.inventory-tooltip .tooltip-stat {
    display: flex;
    justify-content: space-between;
    gap: var(--u-space-md);
    font-size: var(--u-font-sm);
    color: var(--u-text-secondary);
    padding: calc(2px * var(--adaptive-scale)) 0;
}

.inventory-tooltip .tooltip-stat span {
    color: var(--u-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.inventory-tooltip .tooltip-hint {
    padding: var(--u-space-sm) var(--u-space-md);
    font-size: var(--u-font-sm);
    color: var(--u-text-muted);
    text-align: center;
    background: var(--u-bg-black-light);
    border-top: 1px solid var(--u-border-light);
    border-radius: 0 0 var(--u-radius-md) var(--u-radius-md);
}

/* ========================================
   ITEM INFO PANEL - Полные характеристики предметов
   (из Haxe ItemInfo.hx)
   ======================================== */

.item-info-panel {
    padding: var(--u-space-md);
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-rgb), 0.7), rgba(var(--u-night-rgb), 0.85));
    border-radius: var(--u-radius-lg);
    border: 1.5px solid rgba(var(--u-line-rgb), 0.22);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
}

.item-info-empty {
    color: var(--u-text-secondary, var(--u-text-secondary));
    text-align: center;
    padding: var(--u-space-lg);
    font-style: italic;
}

.item-info-header {
    margin-bottom: var(--u-space-sm);
    padding-bottom: var(--u-space-sm);
    border-bottom: 1px solid rgba(var(--u-line-rgb), 0.22);
}

.item-info-name {
    font-size: var(--u-font-lg);
    font-weight: 600;
    color: var(--u-primary, var(--u-accent-gold));
}

.item-info-type {
    font-size: var(--u-font-xs);
    color: var(--u-text-secondary, var(--u-text-secondary));
    margin-top: calc(2px * var(--adaptive-scale));
}

.item-info-desc {
    font-size: var(--u-font-sm);
    color: var(--u-text-secondary, var(--u-text-secondary));
    line-height: 1.4;
    margin-bottom: var(--u-space-sm);
    padding-bottom: var(--u-space-sm);
    border-bottom: 1px solid rgba(var(--u-line-rgb), 0.12);
}

.item-info-stats {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--adaptive-scale));
}

.item-info-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(3px * var(--adaptive-scale)) 0;
    font-size: var(--u-font-sm);
}

.item-info-stat .stat-label {
    color: var(--u-text-secondary, var(--u-text-secondary));
}

.item-info-stat .stat-value {
    color: var(--u-text);
    font-weight: 500;
}

.item-info-stat.stat-header {
    margin-top: var(--u-space-sm);
    padding-top: var(--u-space-sm);
    border-top: 1px solid rgba(var(--u-line-rgb), 0.12);
}

.item-info-stat.stat-header .stat-label {
    color: var(--u-primary, var(--u-accent-gold));
    font-weight: 600;
}

.item-info-effect {
    display: flex;
    align-items: flex-start;
    gap: var(--u-space-xs);
    padding: calc(2px * var(--adaptive-scale)) 0 calc(2px * var(--adaptive-scale)) var(--u-space-md);
    font-size: var(--u-font-xs);
}

.item-info-effect .effect-bullet {
    color: var(--u-primary, var(--u-accent-gold));
    flex-shrink: 0;
}

.item-info-effect .effect-text {
    color: var(--u-accent-gold);
    line-height: 1.3;
}

.item-info-cost {
    margin-top: var(--u-space-sm);
    padding-top: var(--u-space-sm);
    border-top: 1px solid rgba(var(--u-line-rgb), 0.22);
    display: flex;
    justify-content: space-between;
    font-size: var(--u-font-sm);
}

.item-info-cost .cost-label {
    color: var(--u-text-secondary, var(--u-text-secondary));
}

.item-info-cost .cost-value {
    color: var(--u-accent-gold);
    font-weight: 600;
}

/* Стили для характеристик в магазине */
.shop-details-stats,
.bonus-shop-details-stats {
    margin: var(--u-space-sm) 0;
    padding: var(--u-space-sm) 0;
    border-top: 1px solid rgba(var(--u-line-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--u-line-rgb), 0.12);
}

.shop-details-stats .item-info-stat,
.shop-details-stats .item-info-effect,
.bonus-shop-details-stats .item-info-stat,
.bonus-shop-details-stats .item-info-effect {
    font-size: var(--u-font-sm);
}

/* Стили для характеристик в тултипе инвентаря */
.inventory-tooltip .item-info-stat {
    padding: calc(1px * var(--adaptive-scale)) 0;
    font-size: var(--u-font-xs);
}

.inventory-tooltip .item-info-effect {
    font-size: var(--u-font-xs);
    padding: calc(1px * var(--adaptive-scale)) 0 calc(1px * var(--adaptive-scale)) var(--u-space-sm);
}

.inventory-tooltip .item-info-stat.stat-header {
    margin-top: var(--u-space-xs);
    padding-top: var(--u-space-xs);
}

/* Hold section - занимает всё оставшееся место */
.inventory-hold-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100px * var(--adaptive-scale));
    padding: var(--u-space-md);
    background: var(--u-bg-panel);
    border-radius: var(--u-radius-md);
    border: 1px solid var(--u-border-light);
    overflow: hidden;
}

.inventory-hold-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(84px * var(--adaptive-scale)), 1fr));
    gap: calc(8px * var(--adaptive-scale));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(8px * var(--adaptive-scale));
    align-content: start;
}

/* Пустой трюм.

   Раньше окно рисовало восемнадцать пустых ячеек на две трети экрана: сетка
   выглядела как «идёт загрузка», а не как «здесь ничего нет». Теперь при нуле
   предметов сетка не строится вовсе, а на её месте стоит объяснение. */
.inventory-hold-grid.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-sm);
    padding: var(--u-space-2xl) var(--u-space-lg);
    text-align: center;
    color: var(--u-text-muted);
}

.inventory-empty-state .ui-icon {
    width: calc(40px * var(--adaptive-scale));
    height: calc(40px * var(--adaptive-scale));
    opacity: var(--u-opacity-strong);
}

.inventory-empty-state-title {
    font-family: var(--u-font-display);
    font-size: var(--u-font-md);
    letter-spacing: .02em;
    color: var(--u-text-secondary);
}

.inventory-empty-state-hint {
    font-size: var(--u-font-sm);
    color: var(--u-text-muted);
    max-width: calc(280px * var(--adaptive-scale));
    line-height: 1.5;
}

/* --- Инвентарь на узком экране ---
   Сайдбар в 240px на 390px забирал две трети ширины под характеристики,
   а сетке оставалось полтора слота. Здесь он разворачивается в верхний
   блок обычного потока, а прокрутка уходит внутрь окна. */
@media (max-width: 900px) {
    .inventory-content {
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .inventory-sidebar {
        width: 100%;
        min-width: 0;
        max-width: none;
        overflow: visible;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--u-space-md);
    }

    .inventory-ship-avatar {
        width: calc(72px * var(--adaptive-scale));
        height: calc(72px * var(--adaptive-scale));
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Характеристики занимают остаток строки рядом со спрайтом и идут
       в две колонки: восемь строк подряд вытесняли сетку за экран. */
    .inventory-stats {
        flex: 1 1 calc(200px * var(--adaptive-scale));
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(calc(140px * var(--adaptive-scale)), 1fr));
        gap: var(--u-space-xs);
    }

    .inventory-panel {
        flex-direction: column;
        overflow: visible;
    }

    .inventory-main { overflow: visible; }

    .inventory-equipment-section { max-height: none; overflow: visible; }

    .inventory-hold-section { min-height: calc(220px * var(--adaptive-scale)); }

    /* Кегль на телефоне не уменьшается вместе с шириной. */
    .inventory-tabs .unified-tab {
        min-height: 44px;
        font-size: var(--u-font-md);
        padding: var(--u-space-sm) var(--u-space-lg);
    }
}

@media (max-width: 480px) {
    /* Слот крупнее, а не мельче: цель нажатия должна оставаться ≥44px,
       поэтому колонок меньше, а не ячейка тоньше. */
    .inventory-slots-grid,
    .inventory-hold-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: var(--u-space-sm);
    }

    .inventory-slot { min-height: 72px; }

    .inventory-slot-count,
    .inventory-slot-level { font-size: 11px; }

    .inventory-sidebar .unified-btn { min-height: 44px; }

    /* Тултип по длинному нажатию не должен закрывать полэкрана. */
    .inventory-tooltip {
        max-width: calc(100vw - 24px);
        font-size: var(--u-font-sm);
    }
}

/* ========================================
   QUEST DESCRIPTION - ADAPTIVE
   ======================================== */

.quest-description {
    position: absolute;
    background:
        linear-gradient(180deg, rgba(var(--u-line-rgb), 0.10) 0%, rgba(var(--u-danger-rgb), 0.05) 100%),
        linear-gradient(180deg, rgba(var(--u-panel-rgb), 0.95), rgba(var(--u-night-rgb), 0.98));
    border: 1.5px solid rgba(var(--u-line-rgb), 0.32);
    border-radius: calc(14px * var(--adaptive-scale, 1));
    padding: calc(20px * var(--adaptive-scale, 1));
    color: var(--u-text);
    overflow: auto;
    box-shadow:
        0 24px 64px rgba(var(--u-navy-rgb), 0.55),
        0 0 48px rgba(var(--u-primary-rgb), 0.22),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.18);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.quest-header {
    display: flex;
    align-items: center;
    margin-bottom: calc(20px * var(--adaptive-scale, 1));
    padding-bottom: calc(12px * var(--adaptive-scale, 1));
    border-bottom: 1px solid rgba(var(--u-line-rgb), 0.18);
}

.quest-avatar {
    width: calc(64px * var(--adaptive-scale, 1));
    height: calc(64px * var(--adaptive-scale, 1));
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--u-line-rgb), 0.22), transparent 65%),
        linear-gradient(135deg, rgba(var(--u-panel-raised-rgb), 0.7), rgba(var(--u-panel-rgb), 0.85));
    border: 2px solid rgba(var(--u-accent-gold-rgb), 0.45);
    border-radius: 50%;
    margin-right: calc(15px * var(--adaptive-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(24px * var(--adaptive-scale, 1));
    background-size: cover;
    background-position: center;
    box-shadow:
        0 0 18px rgba(var(--u-accent-gold-rgb), 0.32),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.18);
    overflow: hidden;
    flex-shrink: 0;
}

.quest-title {
    font-size: calc(18px * var(--adaptive-scale, 1));
    font-weight: bold;
    color: var(--u-success);
    text-shadow: 0 0 10px rgba(var(--u-success-rgb), 0.55);
    flex: 1;
}

.quest-description-text {
    margin-bottom: calc(20px * var(--adaptive-scale, 1));
    font-size: calc(14px * var(--adaptive-scale, 1));
    line-height: 1.4;
    color: var(--u-text-secondary);
}

.quest-targets-container,
.quest-awards-container {
    margin-bottom: calc(20px * var(--adaptive-scale, 1));
}

.quest-targets-container > div:first-child,
.quest-awards-container > div:first-child {
    font-size: calc(16px * var(--adaptive-scale, 1));
    font-weight: bold;
    margin-bottom: calc(10px * var(--adaptive-scale, 1));
    color: var(--u-text);
}

.quest-targets,
.quest-awards {
    font-size: calc(14px * var(--adaptive-scale, 1));
    color: var(--u-text-secondary);
}

.quest-buttons {
    display: flex;
    gap: calc(10px * var(--adaptive-scale, 1));
    justify-content: flex-end;
}

.quest-cancel-btn,
.quest-ok-btn {
    padding: calc(10px * var(--adaptive-scale, 1)) calc(20px * var(--adaptive-scale, 1));
    border-radius: calc(4px * var(--adaptive-scale, 1));
    color: var(--u-text);
    font-size: calc(14px * var(--adaptive-scale, 1));
    cursor: pointer;
    transition: all 0.15s ease;
}

.quest-cancel-btn {
    background: linear-gradient(135deg, rgba(var(--u-danger-rgb), 0.85), rgba(var(--u-danger-rgb), 0.8));
    border: 1.5px solid rgba(var(--u-danger-rgb), 0.7);
    box-shadow: 0 0 16px rgba(var(--u-danger-rgb), 0.4);
    font-weight: 600;
}

.quest-cancel-btn:hover {
    background: linear-gradient(135deg, rgba(var(--u-danger-rgb), 1), rgba(var(--u-danger-rgb), 0.95));
    box-shadow: 0 0 24px rgba(var(--u-danger-rgb), 0.7);
    transform: translateY(-1px) scale(1.03);
}

.quest-ok-btn {
    background: linear-gradient(135deg, rgba(var(--u-success-rgb), 0.85), rgba(var(--u-success-rgb), 0.8));
    border: 1.5px solid rgba(var(--u-success-rgb), 0.7);
    box-shadow: 0 0 16px rgba(var(--u-success-rgb), 0.4);
    font-weight: 600;
}

.quest-ok-btn:hover {
    background: linear-gradient(135deg, rgba(var(--u-success-rgb), 1), rgba(var(--u-success-rgb), 0.95));
    box-shadow: 0 0 24px rgba(var(--u-success-rgb), 0.7);
    transform: translateY(-1px) scale(1.03);
}

/* ========================================
   TRADE WINDOW - ADAPTIVE
   ======================================== */

.trade-window {
    background:
        linear-gradient(180deg, rgba(var(--u-line-rgb), 0.10) 0%, rgba(var(--u-danger-rgb), 0.05) 100%),
        linear-gradient(180deg, rgba(var(--u-panel-rgb), 0.93), rgba(var(--u-night-rgb), 0.97));
    border-radius: calc(12px * var(--adaptive-scale, 1));
    padding: calc(20px * var(--adaptive-scale, 1));
}

.trade-header {
    font-size: calc(18px * var(--adaptive-scale, 1));
    margin-bottom: calc(15px * var(--adaptive-scale, 1));
}

.trade-content {
    display: flex;
    gap: calc(20px * var(--adaptive-scale, 1));
}

.trade-player-section {
    flex: 1;
    padding: calc(15px * var(--adaptive-scale, 1));
    background:
        radial-gradient(ellipse at top, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.5), rgba(var(--u-panel-rgb), 0.65));
    border: 1px solid rgba(var(--u-line-rgb), 0.18);
    border-radius: calc(12px * var(--adaptive-scale, 1));
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.08);
}

.trade-player-name {
    font-size: calc(16px * var(--adaptive-scale, 1));
    font-weight: 600;
    margin-bottom: calc(10px * var(--adaptive-scale, 1));
}

.trade-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(60px * var(--adaptive-scale, 1)), 1fr));
    gap: calc(8px * var(--adaptive-scale, 1));
}

.trade-item-slot {
    width: calc(60px * var(--adaptive-scale, 1));
    height: calc(60px * var(--adaptive-scale, 1));
    background: rgba(var(--u-line-rgb), 0.12);
    border: 1px solid rgba(var(--u-line-rgb), 0.22);
    border-radius: calc(6px * var(--adaptive-scale, 1));
}

.trade-buttons {
    display: flex;
    gap: calc(10px * var(--adaptive-scale, 1));
    margin-top: calc(15px * var(--adaptive-scale, 1));
    justify-content: center;
}

/* ========================================
   PILOT SCREEN - ADAPTIVE
   ======================================== */

.pilot-list {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--adaptive-scale, 1));
}

.pilot-card {
    display: flex;
    align-items: center;
    gap: calc(15px * var(--adaptive-scale, 1));
    padding: calc(15px * var(--adaptive-scale, 1));
    background:
        radial-gradient(ellipse at top left, rgba(var(--u-line-rgb), 0.08), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.45), rgba(var(--u-panel-rgb), 0.6));
    border: 1.5px solid rgba(var(--u-line-rgb), 0.2);
    border-radius: calc(14px * var(--adaptive-scale, 1));
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: inset 0 1px 0 rgba(var(--u-white-rgb), 0.07);
}

.pilot-card:hover {
    background:
        radial-gradient(ellipse at top left, rgba(var(--u-accent-gold-rgb), 0.12), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-panel-raised-rgb), 0.55), rgba(var(--u-panel-raised-rgb), 0.7));
    border-color: rgba(var(--u-accent-gold-rgb), 0.5);
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(var(--u-navy-rgb), 0.45),
        0 0 22px rgba(var(--u-accent-gold-rgb), 0.22),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.15);
}

.pilot-card.selected {
    background:
        radial-gradient(ellipse at top left, rgba(var(--u-danger-rgb), 0.18), transparent 65%),
        linear-gradient(180deg, rgba(var(--u-accent-lavender-rgb), 0.6), rgba(var(--u-panel-raised-rgb), 0.72));
    border-color: rgba(var(--u-danger-rgb), 0.65);
    box-shadow:
        0 0 0 2px rgba(var(--u-danger-rgb), 0.4),
        0 8px 28px rgba(var(--u-danger-rgb), 0.3),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.18);
}

.pilot-avatar {
    width: calc(64px * var(--adaptive-scale, 1));
    height: calc(64px * var(--adaptive-scale, 1));
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(var(--u-line-rgb), 0.22), transparent 65%),
        linear-gradient(135deg, rgba(var(--u-panel-raised-rgb), 0.7), rgba(var(--u-panel-rgb), 0.85));
    border: 2px solid rgba(var(--u-accent-gold-rgb), 0.45);
    box-shadow:
        0 0 16px rgba(var(--u-accent-gold-rgb), 0.28),
        inset 0 1px 0 rgba(var(--u-white-rgb), 0.18);
    flex-shrink: 0;
    overflow: hidden;
}

.pilot-info {
    flex: 1;
}

.pilot-name {
    font-size: calc(18px * var(--adaptive-scale, 1));
    font-weight: 600;
    color: var(--u-primary, var(--u-accent-gold));
    margin-bottom: calc(4px * var(--adaptive-scale, 1));
}

.pilot-level {
    font-size: calc(14px * var(--adaptive-scale, 1));
    color: var(--u-text-muted, var(--u-text-muted));
}

.pilot-race {
    font-size: calc(12px * var(--adaptive-scale, 1));
    color: var(--u-text-dim, var(--u-text-dim));
}

/* ========================================
   WORLD MAP - ADAPTIVE
   ======================================== */

.galaxy-map-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.galaxy-map-controls {
    position: absolute;
    top: calc(10px * var(--adaptive-scale, 1));
    right: calc(10px * var(--adaptive-scale, 1));
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--adaptive-scale, 1));
}

.galaxy-map-btn {
    width: calc(40px * var(--adaptive-scale, 1));
    height: calc(40px * var(--adaptive-scale, 1));
    background: rgba(var(--u-panel-rgb), 0.85);
    border: 1px solid rgba(var(--u-accent-gold-rgb), 0.32);
    border-radius: calc(8px * var(--adaptive-scale, 1));
    color: var(--u-primary, var(--u-accent-gold));
    font-size: calc(18px * var(--adaptive-scale, 1));
    cursor: pointer;
}

.galaxy-map-btn:hover {
    background: rgba(var(--u-panel-raised-rgb), 0.85);
    border-color: rgba(var(--u-accent-gold-rgb), 0.55);
}

.star-tooltip {
    position: absolute;
    background:
        linear-gradient(180deg, rgba(var(--u-line-rgb), 0.08) 0%, rgba(var(--u-danger-rgb), 0.04) 100%),
        linear-gradient(180deg, rgba(var(--u-panel-rgb), 0.9), rgba(var(--u-night-rgb), 0.96));
    border: 1px solid rgba(var(--u-accent-gold-rgb), 0.32);
    border-radius: calc(8px * var(--adaptive-scale, 1));
    padding: calc(10px * var(--adaptive-scale, 1));
    font-size: calc(12px * var(--adaptive-scale, 1));
    pointer-events: none;
    z-index: 1000;
}

.star-tooltip-name {
    font-size: calc(14px * var(--adaptive-scale, 1));
    font-weight: 600;
    color: var(--u-primary, var(--u-accent-gold));
    margin-bottom: calc(4px * var(--adaptive-scale, 1));
}

/* ========================================
   COMMON ADAPTIVE OVERRIDES
   ======================================== */

/* Здесь стояли три правила по подстроке в имени класса:
       button[class*="-btn"]   — размер шрифта, отступы, скругление
       [class*="-icon"]        — жёсткие 48×48
       [class*="-avatar"]      — жёсткие 64×64
   Они шли последними в файле и при равной специфичности перебивали
   собственные размеры каждого компонента: иконка меню, объявленная как
   28×24, становилась 48×48 и раздувала строку меню вдвое; кнопка закрытия
   окна получала чужие отступы. Задумывались они как способ «переопределить
   inline-стили», но инлайн они всё равно не перебивают. Убраны: размеры
   задаются там же, где компонент. */

.game-button {
    font-size: calc(14px * var(--adaptive-scale, 1));
    padding: calc(10px * var(--adaptive-scale, 1)) calc(20px * var(--adaptive-scale, 1));
    border-radius: calc(6px * var(--adaptive-scale, 1));
}

/* ========================================
   CORE WINDOW - ADAPTIVE (anime sky glass)
   ======================================== */

/* Note: .game-window is fully styled at line ~3422 (anime sky glass).
   This block intentionally only overrides adaptive scale for sub-elements. */

.window-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(40px * var(--adaptive-scale, 1));
    background: linear-gradient(90deg, rgba(var(--u-primary-rgb), 0.18) 0%, rgba(var(--u-danger-rgb), 0.08) 60%, transparent 100%);
    border-bottom: 1px solid rgba(var(--u-line-rgb), 0.18);
    color: var(--u-accent-gold);
    font-size: calc(16px * var(--adaptive-scale, 1));
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: calc(40px * var(--adaptive-scale, 1));
    text-shadow: 0 0 14px rgba(var(--u-accent-gold-rgb), 0.55);
    user-select: none;
}

.window-close {
    position: absolute;
    top: calc(5px * var(--adaptive-scale, 1));
    right: calc(5px * var(--adaptive-scale, 1));
    width: calc(30px * var(--adaptive-scale, 1));
    height: calc(30px * var(--adaptive-scale, 1));
    background: linear-gradient(135deg, rgba(var(--u-danger-rgb), 0.4), rgba(var(--u-danger-rgb), 0.25));
    border: 1.5px solid rgba(var(--u-danger-rgb), 0.45);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(var(--u-danger-rgb), 0.35);
    color: var(--u-danger);
    font-size: calc(18px * var(--adaptive-scale, 1));
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.window-close:hover {
    background: linear-gradient(135deg, rgba(var(--u-danger-rgb), 0.65), rgba(var(--u-danger-rgb), 0.45));
    border-color: rgba(var(--u-danger-rgb), 0.7);
    box-shadow: 0 0 22px rgba(var(--u-danger-rgb), 0.6);
    transform: rotate(90deg) scale(1.1);
}

/* ========================================
   ARENA - ADAPTIVE
   ======================================== */

.arena-window {
    padding: calc(20px * var(--adaptive-scale, 1));
}

.arena-header {
    font-size: calc(20px * var(--adaptive-scale, 1));
    margin-bottom: calc(15px * var(--adaptive-scale, 1));
}

.arena-list {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--adaptive-scale, 1));
}

.arena-item {
    padding: calc(12px * var(--adaptive-scale, 1));
    background: rgba(var(--u-panel-rgb), 0.55);
    border: 1px solid rgba(var(--u-line-rgb), 0.22);
    border-radius: calc(8px * var(--adaptive-scale, 1));
    cursor: pointer;
}

.arena-item:hover {
    background: rgba(var(--u-panel-raised-rgb), 0.6);
    border-color: rgba(var(--u-accent-gold-rgb), 0.42);
}

.arena-item-name {
    font-size: calc(16px * var(--adaptive-scale, 1));
    font-weight: 600;
}

.arena-item-info {
    font-size: calc(12px * var(--adaptive-scale, 1));
    color: var(--u-text-muted, var(--u-text-muted));
}

/* ========================================
   AUCTION - ADAPTIVE
   ======================================== */

.auction-window {
    padding: calc(20px * var(--adaptive-scale, 1));
}

.auction-tabs {
    display: flex;
    gap: calc(8px * var(--adaptive-scale, 1));
    margin-bottom: calc(15px * var(--adaptive-scale, 1));
}

.auction-tab {
    padding: calc(10px * var(--adaptive-scale, 1)) calc(20px * var(--adaptive-scale, 1));
    font-size: calc(14px * var(--adaptive-scale, 1));
    background: rgba(var(--u-panel-rgb), 0.55);
    border: 1px solid rgba(var(--u-line-rgb), 0.22);
    border-radius: calc(6px * var(--adaptive-scale, 1));
    color: var(--u-text, var(--u-text));
    cursor: pointer;
}

.auction-tab.active {
    background: rgba(var(--u-accent-lavender-rgb), 0.6);
    border-color: var(--u-primary, var(--u-accent-gold));
}

.auction-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(140px * var(--adaptive-scale, 1)), 1fr));
    gap: calc(12px * var(--adaptive-scale, 1));
}

.auction-item {
    padding: calc(12px * var(--adaptive-scale, 1));
    background: rgba(var(--u-panel-rgb), 0.55);
    border: 1px solid rgba(var(--u-line-rgb), 0.16);
    border-radius: calc(8px * var(--adaptive-scale, 1));
}

.auction-item-icon {
    width: calc(48px * var(--adaptive-scale, 1));
    height: calc(48px * var(--adaptive-scale, 1));
    margin: 0 auto calc(8px * var(--adaptive-scale, 1));
}

.auction-item-name {
    font-size: calc(12px * var(--adaptive-scale, 1));
    text-align: center;
}

.auction-item-price {
    font-size: calc(11px * var(--adaptive-scale, 1));
    color: var(--u-accent-gold);
    text-align: center;
}

/* ========================================
   CHAT - ADAPTIVE
   ======================================== */

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: calc(10px * var(--adaptive-scale, 1));
}

.chat-message {
    margin-bottom: calc(6px * var(--adaptive-scale, 1));
    font-size: calc(13px * var(--adaptive-scale, 1));
    line-height: 1.4;
}

.chat-message-name {
    font-weight: 600;
    color: var(--u-primary, var(--u-accent-gold));
}

.chat-input-container {
    display: flex;
    gap: calc(8px * var(--adaptive-scale, 1));
    padding: calc(10px * var(--adaptive-scale, 1));
    border-top: 1px solid rgba(var(--u-line-rgb), 0.12);
}

.chat-input {
    flex: 1;
    padding: calc(8px * var(--adaptive-scale, 1)) calc(12px * var(--adaptive-scale, 1));
    font-size: calc(13px * var(--adaptive-scale, 1));
    background: rgba(var(--u-panel-rgb), 0.55);
    border: 1px solid rgba(var(--u-line-rgb), 0.22);
    border-radius: calc(6px * var(--adaptive-scale, 1));
    color: var(--u-text);
}

.chat-send-btn {
    padding: calc(8px * var(--adaptive-scale, 1)) calc(16px * var(--adaptive-scale, 1));
    font-size: calc(13px * var(--adaptive-scale, 1));
}

/* ========================================
   TOP LISTS - ADAPTIVE
   ======================================== */

.top-list-window {
    padding: calc(20px * var(--adaptive-scale, 1));
}

.top-list-header {
    font-size: calc(20px * var(--adaptive-scale, 1));
    margin-bottom: calc(15px * var(--adaptive-scale, 1));
}

.top-list-table {
    width: 100%;
    border-collapse: collapse;
}

.top-list-table th,
.top-list-table td {
    padding: calc(10px * var(--adaptive-scale, 1)) calc(12px * var(--adaptive-scale, 1));
    font-size: calc(13px * var(--adaptive-scale, 1));
    text-align: left;
    border-bottom: 1px solid rgba(var(--u-line-rgb), 0.12);
}

.top-list-table th {
    font-weight: 600;
    color: var(--u-primary, var(--u-accent-gold));
    background: rgba(var(--u-panel-rgb), 0.55);
}

.top-list-rank {
    width: calc(50px * var(--adaptive-scale, 1));
    text-align: center;
    font-weight: 600;
}

.top-list-rank.gold { color: var(--u-accent-gold); text-shadow: 0 0 12px rgba(var(--u-accent-gold-rgb), 0.6); }
.top-list-rank.silver { color: var(--u-accent-lavender-light, var(--u-text)); text-shadow: 0 0 12px rgba(var(--u-line-rgb), 0.5); }
.top-list-rank.bronze { color: var(--u-accent-sakura); text-shadow: 0 0 12px rgba(var(--u-accent-sakura-rgb), 0.5); }

/* ========================================
   FRIENDS - ADAPTIVE
   ======================================== */

.friends-list {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--adaptive-scale, 1));
}

.friend-item {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--adaptive-scale, 1));
    padding: calc(10px * var(--adaptive-scale, 1));
    background: rgba(var(--u-panel-rgb), 0.55);
    border: 1px solid rgba(var(--u-line-rgb), 0.16);
    border-radius: calc(8px * var(--adaptive-scale, 1));
}

.friend-avatar {
    width: calc(40px * var(--adaptive-scale, 1));
    height: calc(40px * var(--adaptive-scale, 1));
    border-radius: calc(6px * var(--adaptive-scale, 1));
}

.friend-name {
    font-size: calc(14px * var(--adaptive-scale, 1));
    font-weight: 500;
}

.friend-status {
    font-size: calc(11px * var(--adaptive-scale, 1));
    color: var(--u-text-muted, var(--u-text-muted));
}

.friend-status.online {
    color: var(--u-success);
    text-shadow: 0 0 10px rgba(var(--u-success-rgb), 0.6);
}

/* ========================================
   NEWS - ADAPTIVE
   ======================================== */

.news-list {
    display: flex;
    flex-direction: column;
    gap: calc(15px * var(--adaptive-scale, 1));
}

.news-item {
    padding: calc(15px * var(--adaptive-scale, 1));
    background: rgba(var(--u-panel-rgb), 0.55);
    border: 1px solid rgba(var(--u-line-rgb), 0.16);
    border-radius: calc(10px * var(--adaptive-scale, 1));
}

.news-title {
    font-size: calc(16px * var(--adaptive-scale, 1));
    font-weight: 600;
    color: var(--u-primary, var(--u-accent-gold));
    margin-bottom: calc(8px * var(--adaptive-scale, 1));
}

.news-date {
    font-size: calc(11px * var(--adaptive-scale, 1));
    color: var(--u-text-muted, var(--u-text-muted));
    margin-bottom: calc(10px * var(--adaptive-scale, 1));
}

.news-content {
    font-size: calc(13px * var(--adaptive-scale, 1));
    line-height: 1.5;
}

/* ========================================
   SLOT ICONS - ADAPTIVE FIT
   Иконки внутри слотов автоматически
   подстраиваются под размер контейнера
   ======================================== */

/* Селекторы здесь перечислены поимённо.

   Раньше блок ловил всё по `[class*="-slot"]`, и под него попадали не только
   ячейки, но и их потомки: `.inventory-slot-level` тоже содержит «-slot».
   Бейдж уровня получал `position: relative` из более позднего правила, выпадал
   в поток под иконку и обрезался границей ячейки — та самая срезанная «Lv1».
   Подстановочный отбор по имени класса для этого слишком груб. */
.slot,
.item-slot,
.inventory-slot,
.equipment-slot,
.ship-slot,
.weapon-slot,
.module-slot,
.cargo-slot,
.hold-slot,
.shop-item-slot,
.unified-slot {
    position: relative;
    overflow: hidden;
}

/* Картинка предмета занимает ячейку целиком, но только когда лежит
   непосредственно в ней или в её иконочной обёртке. */
.slot > img,
.item-slot > img,
.inventory-slot > img,
.equipment-slot > img,
.ship-slot > img,
.weapon-slot > img,
.module-slot > img,
.cargo-slot > img,
.hold-slot > img,
.shop-item-slot > img,
.unified-slot > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slot.fill > img,
.item-slot.fill > img,
.inventory-slot.fill > img {
    object-fit: cover;
}

/* Иконки кораблей */
.ship-icon,
.ship-image,
[class*="ship"] > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Иконки предметов */
.item-icon,
.item-image,
[class*="item"] > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Иконки оружия/модулей */
.weapon-icon,
.module-icon,
.equipment-icon {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Количество предметов в слоте — совпадает по месту и виду с
   `.unified-slot-badge.count`, чтобы окна на старой разметке не выбивались. */
.slot > .count,
.item-slot > .count,
.inventory-slot > .count,
.shop-item-slot > .count,
.unified-slot > .count,
.slot > .quantity,
.item-slot > .quantity,
.inventory-slot > .quantity {
    position: absolute;
    top: calc(3px * var(--adaptive-scale));
    left: calc(3px * var(--adaptive-scale));
    z-index: 2;
    font-family: var(--u-font-display);
    font-size: var(--u-font-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--u-text);
    background: var(--u-bg-black-medium);
    border: 1px solid var(--u-border-light);
    padding: calc(3px * var(--adaptive-scale)) calc(5px * var(--adaptive-scale));
    border-radius: var(--u-radius-sm);
    text-align: center;
}

/* ============================================
   GALAXY MAP — информационная панель системы
   Была без единого правила CSS: заголовок не отличался от строк,
   а элементы списка выводились с меткой «.» — в кадре это выглядело
   как лишняя точка на отдельной строке.
   ============================================ */

.unified-map-info-title {
    font-size: var(--u-font-lg, 16px);
    font-weight: 700;
    letter-spacing: 0.2px;
    padding-bottom: var(--u-space-sm, 8px);
    margin-bottom: var(--u-space-sm, 8px);
    border-bottom: 1px solid var(--u-border-light, rgba(var(--u-line-rgb), 0.16));
}

.unified-map-info-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--u-space-md, 12px);
    padding: calc(3px * var(--adaptive-scale, 1)) 0;
}

.unified-map-info-label {
    color: var(--u-text-muted, var(--u-text-muted));
    font-size: var(--u-font-sm, 12px);
    white-space: nowrap;
}

.unified-map-info-value {
    color: var(--u-text, var(--u-text));
    font-weight: 600;
    text-align: right;
}

.unified-map-info-value.is-reachable { color: var(--u-success, var(--u-success)); }
.unified-map-info-value.is-blocked { color: var(--u-danger, var(--u-danger)); }

/* Подзаголовок группы: «Планеты», «Объекты». */
.unified-map-info-group {
    margin-top: var(--u-space-md, 12px);
    margin-bottom: calc(2px * var(--adaptive-scale, 1));
    color: var(--u-text-muted, var(--u-text-muted));
    font-size: var(--u-font-xs, 10px);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
}

.unified-map-info-item {
    padding: calc(2px * var(--adaptive-scale, 1)) 0;
}

.unified-map-info-entry {
    display: flex;
    align-items: center;
    font-size: var(--u-font-sm, 12px);
}

/* ===================================================================
   GALAXY MAP — карта галактики (ui/map/GalaxyMapNew.js)
   Приборная схема: поле звёзд на весь корпус, тонкая приборная линия,
   один ведущий циан = состояние. Слои: топбар → поле → карточка.
   Обратный зум (--gmap-inv-zoom) держит метки и марки постоянного
   размера на экране при любом масштабе поля.
   =================================================================== */

.galaxy-map-window .unified-window-content {
    flex-direction: column;
}

.gmap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--u-radius-lg);
    background:
        radial-gradient(ellipse at 50% 120%, rgba(var(--u-navy-rgb), 0.55), transparent 60%),
        rgba(var(--u-deep-rgb), 0.88);
}

/* --- Поле звёзд ---------------------------------------------------- */

.gmap-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.gmap-viewport:active { cursor: grabbing; }

.gmap-world {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

.gmap-world.is-animating {
    transition: transform var(--u-transition);
}

.gmap-lines {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: visible;
    pointer-events: none;
}

.gmap-links line { stroke: rgba(var(--u-line-rgb), var(--u-opacity-medium)); stroke-width: 1; }

.gmap-grid line { stroke: rgba(var(--u-line-rgb), 0.06); stroke-width: 1; }

.gmap-radius {
    fill: rgba(var(--u-primary-rgb), 0.04);
    stroke: var(--u-border-accent);
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
}

.gmap-route { stroke-width: 2; }
.gmap-route.is-reachable { stroke: var(--u-success); stroke-dasharray: 8 6; }
.gmap-route.is-locked { stroke: var(--u-danger); stroke-dasharray: 4 6; opacity: 0.7; }

/* --- Звезда системы ------------------------------------------------ */

.gmap-star {
    position: absolute;
    width: calc(44px * var(--adaptive-scale));
    height: calc(44px * var(--adaptive-scale));
    margin: calc(-22px * var(--adaptive-scale)) 0 0 calc(-22px * var(--adaptive-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    z-index: 2;
}

.gmap-star-body {
    /* Ядро звезды держит постоянный размер на экране независимо от зума */
    transform: scale(var(--gmap-inv-zoom, 1));
    width: calc(16px * var(--adaptive-scale));
    height: calc(16px * var(--adaptive-scale));
    border-radius: var(--u-radius-full);
    border: 2px solid transparent;
    transition: box-shadow var(--u-transition), border-color var(--u-transition);
}

/* Спектральный класс — цвет ядра */
.gmap-star-body[data-spectral='red']    { background: var(--u-danger); }
.gmap-star-body[data-spectral='yellow'] { background: var(--u-warning); }
.gmap-star-body[data-spectral='white']  { background: var(--u-text); }
.gmap-star-body[data-spectral='green']  { background: var(--u-success); }
.gmap-star-body[data-spectral='blue']   { background: var(--u-primary-light); }

/* Состояние — цвет кольца вокруг ядра */
.gmap-star.is-current .gmap-star-body {
    border-color: var(--u-primary);
    box-shadow: var(--u-glow-primary);
}
.gmap-star.is-reachable .gmap-star-body { border-color: var(--u-success); }
.gmap-star.is-locked .gmap-star-body { border-color: var(--u-text-dim); opacity: 0.65; }

.gmap-star.is-hovered .gmap-star-body { box-shadow: var(--u-glow-primary); }
.gmap-star.is-selected .gmap-star-body {
    box-shadow: var(--u-glow-gold);
    border-color: var(--u-accent-gold);
}

/* Метки объектов прямо на звезде: портал / улей / хранилище */
.gmap-star-tags {
    position: absolute;
    right: calc(6px * var(--adaptive-scale));
    bottom: calc(6px * var(--adaptive-scale));
    display: flex;
    gap: 3px;
    transform: scale(var(--gmap-inv-zoom, 1));
}

.gmap-star-tag {
    width: calc(7px * var(--adaptive-scale));
    height: calc(7px * var(--adaptive-scale));
    border-radius: var(--u-radius-full);
    border: 1px solid var(--u-bg-deep);
}
.gmap-star-tag.is-portal  { background: var(--u-accent-lavender); }
.gmap-star-tag.is-hive    { background: var(--u-danger); }
.gmap-star-tag.is-storage { background: var(--u-accent-gold); }

.gmap.is-filtered .gmap-star.is-locked:not(.is-current):not(.is-selected) { opacity: 0.25; }

/* --- Подписи систем ------------------------------------------------ */

.gmap-label {
    position: absolute;
    transform: translate(-50%, calc(14px * var(--adaptive-scale))) scale(var(--gmap-inv-zoom, 1));
    font-family: var(--u-font-display);
    font-size: max(11px, calc(11px * var(--adaptive-scale)));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--u-text-secondary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 1;
}

.gmap-label.is-current   { color: var(--u-primary-light); }
.gmap-label.is-reachable { color: var(--u-text); }
.gmap-label.is-locked    { color: var(--u-text-muted); }

.gmap-label.is-clipped { visibility: hidden; }

.gmap.is-filtered .gmap-label.is-locked:not(.is-current) { opacity: 0.25; }

/* --- Марка «вы здесь» ---------------------------------------------- */

.gmap-aim {
    position: absolute;
    width: calc(40px * var(--adaptive-scale));
    height: calc(40px * var(--adaptive-scale));
    margin: calc(-20px * var(--adaptive-scale)) 0 0 calc(-20px * var(--adaptive-scale));
    pointer-events: none;
    z-index: 3;
    transform: scale(var(--gmap-inv-zoom, 1));
}

.gmap-aim svg { width: 100%; height: 100%; }

.gmap-aim-ring {
    fill: none;
    stroke: var(--u-primary);
    stroke-width: 1.6;
    opacity: 0.9;
}
.gmap-aim-ring.is-inner { opacity: 0.45; }
.gmap-aim-tick {
    stroke: var(--u-primary);
    stroke-width: 2;
    stroke-linecap: round;
}

/* --- Подписи радиуса и курса --------------------------------------- */

.gmap-radius-label,
.gmap-route-label {
    position: absolute;
    transform: translate(-50%, -50%) scale(var(--gmap-inv-zoom, 1));
    padding: calc(3px * var(--adaptive-scale)) calc(10px * var(--adaptive-scale));
    background: rgba(var(--u-night-rgb), 0.85);
    border: 1px solid var(--u-border-accent);
    border-radius: var(--u-radius-full);
    color: var(--u-text-secondary);
    font-size: var(--u-font-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.gmap-route-label.is-reachable { border-color: var(--u-success); color: var(--u-text); }
.gmap-route-label.is-locked { border-color: var(--u-danger); color: var(--u-text-muted); }

/* --- Топбар --------------------------------------------------------- */

.gmap-topbar {
    position: relative;
    z-index: 5;
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--u-space-md);
    /* справа запас под глобальный крестик окна (.unified-back-btn) */
    padding: var(--u-space-sm) calc(64px * var(--adaptive-scale)) var(--u-space-sm) var(--u-space-lg);
    background: rgba(var(--u-panel-rgb), 0.55);
    border-bottom: 1px solid var(--u-border-light);
}

.gmap-brand {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
    min-width: 0;
}

.gmap-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(34px * var(--adaptive-scale));
    height: calc(34px * var(--adaptive-scale));
    color: var(--u-primary);
}

.gmap-brand-icon svg { width: 100%; height: 100%; }

.gmap-brand-text { display: flex; flex-direction: column; min-width: 0; }

.gmap-brand-title {
    font-family: var(--u-font-display);
    font-size: var(--u-font-md);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--u-text);
    white-space: nowrap;
}

.gmap-brand-meta {
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gmap-tools {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
    margin-left: auto;
    min-width: 0;
}

.gmap-search { position: relative; }

.gmap-search-icon {
    position: absolute;
    left: calc(10px * var(--adaptive-scale));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--u-text-muted);
    pointer-events: none;
}

.gmap-search-icon svg { width: calc(16px * var(--adaptive-scale)); height: calc(16px * var(--adaptive-scale)); }

.gmap-search-input {
    height: calc(36px * var(--adaptive-scale));
    width: calc(220px * var(--adaptive-scale));
    max-width: 100%;
    padding: 0 calc(12px * var(--adaptive-scale)) 0 calc(32px * var(--adaptive-scale));
    background: rgba(var(--u-white-rgb), 0.06);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-full);
    color: var(--u-text);
    font-size: var(--u-font-sm);
    outline: none;
    transition: border-color var(--u-transition), background var(--u-transition);
}

.gmap-search-input::placeholder { color: var(--u-text-dim); }

.gmap-search-input:hover { border-color: var(--u-border-accent); }

.gmap-search-input:focus-visible {
    border-color: var(--u-primary);
    box-shadow: var(--u-glow-primary);
    background: rgba(var(--u-white-rgb), 0.08);
}

.gmap-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    padding: var(--u-space-xs);
    background: rgba(var(--u-night-rgb), 0.95);
    border: 1px solid var(--u-border-accent);
    border-radius: var(--u-radius-md);
    box-shadow: var(--u-shadow-soft);
    z-index: 30;
}

.gmap-search-results.is-open { display: flex; }

.gmap-search-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
    min-height: 36px;
    padding: var(--u-space-xs) var(--u-space-sm);
    background: transparent;
    border: none;
    border-radius: var(--u-radius-sm);
    color: var(--u-text);
    font-size: var(--u-font-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--u-transition);
}

.gmap-search-item:hover { background: rgba(var(--u-primary-rgb), var(--u-opacity-faint)); }

.gmap-search-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gmap-search-dist { color: var(--u-text-muted); font-variant-numeric: tabular-nums; }

.gmap-search-empty {
    padding: var(--u-space-sm);
    color: var(--u-text-muted);
    font-size: var(--u-font-sm);
    text-align: center;
}

/* --- Кнопки и чипы --------------------------------------------------- */

.gmap-btn,
.gmap-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-xs);
    height: calc(36px * var(--adaptive-scale));
    padding: 0 var(--u-space-md);
    background: rgba(var(--u-white-rgb), 0.05);
    border: 1px solid var(--u-border);
    border-radius: var(--u-radius-full);
    color: var(--u-text-secondary);
    font-size: var(--u-font-sm);
    cursor: pointer;
    transition: background var(--u-transition), border-color var(--u-transition), color var(--u-transition);
}

.gmap-btn svg { width: calc(16px * var(--adaptive-scale)); height: calc(16px * var(--adaptive-scale)); }

.gmap-btn:hover,
.gmap-chip:hover {
    background: rgba(var(--u-primary-rgb), var(--u-opacity-faint));
    border-color: var(--u-border-accent);
    color: var(--u-text);
}

.gmap-btn:active,
.gmap-chip:active { background: rgba(var(--u-primary-rgb), var(--u-opacity-light)); }

.gmap-btn:focus-visible,
.gmap-chip:focus-visible,
.gmap-action:focus-visible,
.gmap-card-close:focus-visible,
.gmap-legend-head:focus-visible,
.gmap-search-item:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

.gmap-chip[aria-pressed='true'],
.gmap-chip.is-active {
    background: rgba(var(--u-primary-rgb), var(--u-opacity-light));
    border-color: var(--u-primary);
    color: var(--u-primary-light);
}

/* --- Легенда ---------------------------------------------------------- */

.gmap-legend {
    position: absolute;
    left: var(--u-space-lg);
    bottom: var(--u-space-lg);
    z-index: 5;
    min-width: calc(190px * var(--adaptive-scale));
    background: rgba(var(--u-panel-rgb), 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--u-border-light);
    border-radius: var(--u-radius-md);
    overflow: hidden;
}

.gmap-legend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-space-md);
    width: 100%;
    min-height: calc(36px * var(--adaptive-scale));
    padding: 0 var(--u-space-md);
    background: transparent;
    border: none;
    color: var(--u-text-secondary);
    font-family: var(--u-font-display);
    font-size: var(--u-font-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--u-transition);
}

.gmap-legend-head:hover { color: var(--u-text); }

.gmap-legend-caret {
    display: flex;
    transition: transform var(--u-transition);
}
.gmap-legend-caret svg { width: calc(14px * var(--adaptive-scale)); height: calc(14px * var(--adaptive-scale)); }
.gmap-legend:not(.is-collapsed) .gmap-legend-caret { transform: rotate(90deg); }

.gmap-legend-body {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs);
    padding: 0 var(--u-space-md) var(--u-space-sm);
}

.gmap-legend.is-collapsed .gmap-legend-body { display: none; }

.gmap-legend-row {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
    font-size: var(--u-font-xs);
    color: var(--u-text-secondary);
}

/* Ключи легенды повторяют вид состояний на карте */
.gmap-key {
    width: calc(12px * var(--adaptive-scale));
    height: calc(12px * var(--adaptive-scale));
    border-radius: var(--u-radius-full);
    border: 2px solid transparent;
    flex: none;
}
.gmap-key.is-current   { border-color: var(--u-primary); background: var(--u-primary-light); box-shadow: var(--u-glow-primary); }
.gmap-key.is-reachable { border-color: var(--u-success); background: var(--u-success-dark); }
.gmap-key.is-locked    { border-color: var(--u-text-dim); background: var(--u-bg-card-hover); }
.gmap-key.is-radius    { border-color: var(--u-border-accent); background: transparent; border-style: dashed; }

.gmap-legend-row .gmap-star-tag { position: static; }

/* --- Масштаб и зум ----------------------------------------------------- */

.gmap-controls {
    position: absolute;
    right: var(--u-space-lg);
    bottom: var(--u-space-lg);
    z-index: 5;
    display: flex;
    align-items: flex-end;
    gap: var(--u-space-md);
}

.gmap-scale {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--u-space-xs);
    margin-right: var(--u-space-xs);
}

.gmap-scale-bar { display: block; border-bottom: 2px solid var(--u-border-accent); }

.gmap-scale-line {
    display: block;
    height: calc(6px * var(--adaptive-scale));
    border-left: 2px solid var(--u-border-accent);
    border-right: 2px solid var(--u-border-accent);
}

.gmap-scale-text {
    font-size: var(--u-font-xs);
    color: var(--u-text-secondary);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.gmap-zoom {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs);
}

/* --- Карточка системы --------------------------------------------------- */

.gmap-card {
    position: absolute;
    top: calc(64px * var(--adaptive-scale));
    right: var(--u-space-lg);
    bottom: var(--u-space-lg);
    z-index: 6;
    width: calc(320px * var(--adaptive-scale));
    max-width: calc(100% - 2 * var(--u-space-lg));
    display: flex;
    flex-direction: column;
    padding: var(--u-space-md);
    background: rgba(var(--u-panel-rgb), 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--u-border-accent);
    border-radius: var(--u-radius-lg);
    box-shadow: var(--u-shadow-soft);
    visibility: hidden;
    opacity: 0;
    transform: translateX(calc(12px * var(--adaptive-scale)));
    transition: opacity var(--u-transition), transform var(--u-transition), visibility var(--u-transition);
}

.gmap-card.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.gmap-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--u-space-sm);
}

.gmap-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gmap-card-name {
    font-family: var(--u-font-display);
    font-size: var(--u-font-lg);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--u-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gmap-card-race {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
}

.gmap-race-dot {
    width: calc(9px * var(--adaptive-scale));
    height: calc(9px * var(--adaptive-scale));
    border-radius: var(--u-radius-full);
    background: var(--race-color, var(--u-text-dim));
    flex: none;
}

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

.gmap-card-close svg { width: calc(16px * var(--adaptive-scale)); height: calc(16px * var(--adaptive-scale)); }

.gmap-card-close:hover { color: var(--u-danger); border-color: var(--u-danger); }

.gmap-card-status {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
    margin-top: var(--u-space-sm);
    padding: var(--u-space-xs) var(--u-space-sm);
    border-radius: var(--u-radius-sm);
    font-size: var(--u-font-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gmap-card-status svg { width: calc(14px * var(--adaptive-scale)); height: calc(14px * var(--adaptive-scale)); }

.gmap-card-status.is-current   { color: var(--u-primary-light); background: rgba(var(--u-primary-rgb), var(--u-opacity-subtle)); }
.gmap-card-status.is-reachable { color: var(--u-success); background: rgba(var(--u-success-rgb), var(--u-opacity-subtle)); }
.gmap-card-status.is-locked    { color: var(--u-warning); background: rgba(var(--u-warning-rgb), var(--u-opacity-subtle)); }

.gmap-card-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--u-space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--u-space-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--u-border-accent) transparent;
}

.gmap-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--u-space-xs);
}

.gmap-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--u-space-xs) var(--u-space-sm);
    background: rgba(var(--u-white-rgb), 0.04);
    border-radius: var(--u-radius-sm);
}

.gmap-stat-label { font-size: var(--u-font-xs); color: var(--u-text-muted); }

.gmap-stat-value {
    font-family: var(--u-font-display);
    font-size: var(--u-font-sm);
    font-weight: 600;
    color: var(--u-text);
    font-variant-numeric: tabular-nums;
}

.gmap-card-group {
    font-family: var(--u-font-display);
    font-size: var(--u-font-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--u-text-muted);
}

.gmap-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-xs);
}

.gmap-card-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-sm);
    min-height: calc(32px * var(--adaptive-scale));
    padding: var(--u-space-xs);
    background: rgba(var(--u-white-rgb), 0.03);
    border-radius: var(--u-radius-sm);
}

.gmap-card-thumb {
    width: calc(24px * var(--adaptive-scale));
    height: calc(24px * var(--adaptive-scale));
    object-fit: contain;
    flex: none;
}

.gmap-card-item-name {
    flex: 1;
    min-width: 0;
    font-size: var(--u-font-sm);
    color: var(--u-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gmap-card-flag {
    width: calc(16px * var(--adaptive-scale));
    height: calc(11px * var(--adaptive-scale));
    object-fit: contain;
    flex: none;
}

.gmap-card-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(24px * var(--adaptive-scale));
    height: calc(24px * var(--adaptive-scale));
    color: var(--u-text-secondary);
    flex: none;
}

.gmap-card-glyph svg { width: 100%; height: 100%; }
.gmap-card-glyph.is-portal { color: var(--u-accent-lavender); }
.gmap-card-glyph.is-danger { color: var(--u-danger); }
.gmap-card-glyph.is-gold   { color: var(--u-accent-gold); }

.gmap-card-actions {
    margin-top: var(--u-space-sm);
    padding-top: var(--u-space-sm);
    border-top: 1px solid var(--u-border-light);
}

.gmap-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-xs);
    width: 100%;
    min-height: calc(44px * var(--adaptive-scale));
    background: rgba(var(--u-primary-rgb), var(--u-opacity-light));
    border: 1px solid var(--u-primary);
    border-radius: var(--u-radius-md);
    color: var(--u-primary-light);
    font-family: var(--u-font-display);
    font-size: var(--u-font-md);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background var(--u-transition), box-shadow var(--u-transition);
}

.gmap-action svg { width: calc(18px * var(--adaptive-scale)); height: calc(18px * var(--adaptive-scale)); }

.gmap-action:hover { background: rgba(var(--u-primary-rgb), var(--u-opacity-medium)); box-shadow: var(--u-glow-primary); }
.gmap-action:active { background: rgba(var(--u-primary-rgb), var(--u-opacity-strong)); }

.gmap-card-note {
    display: flex;
    align-items: center;
    gap: var(--u-space-xs);
    margin: 0;
    font-size: var(--u-font-xs);
    color: var(--u-text-muted);
}

.gmap-card-note svg { flex: none; width: calc(14px * var(--adaptive-scale)); height: calc(14px * var(--adaptive-scale)); }

/* --- Пустое состояние ---------------------------------------------------- */

.gmap-empty {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-sm);
    padding: var(--u-space-xl);
    text-align: center;
}

.gmap-empty.is-visible { display: flex; }

.gmap-empty-icon { display: flex; color: var(--u-text-dim); }
.gmap-empty-icon svg { width: calc(44px * var(--adaptive-scale)); height: calc(44px * var(--adaptive-scale)); }

.gmap-empty-title {
    font-family: var(--u-font-display);
    font-size: var(--u-font-lg);
    letter-spacing: 0.04em;
    color: var(--u-text-secondary);
}

.gmap-empty-text {
    max-width: calc(360px * var(--adaptive-scale));
    font-size: var(--u-font-sm);
    color: var(--u-text-muted);
}

/* --- Узкий экран ------------------------------------------------------------ */

/* Планшет/телефон: топбар в два ряда, карточка — нижний лист,
   легенда по умолчанию свёрнута (класс ставит JS). */
@media (max-width: 900px) {
    .gmap-tools { width: 100%; margin-left: 0; }
    .gmap-search { flex: 1; }
    .gmap-search-input { width: 100%; }

    .gmap-controls { right: var(--u-space-md); bottom: var(--u-space-md); }

    .gmap-legend {
        left: var(--u-space-md);
        bottom: var(--u-space-md);
        max-width: calc(100vw - 200px);
    }

    .gmap-card {
        top: auto;
        left: var(--u-space-md);
        right: var(--u-space-md);
        bottom: var(--u-space-md);
        width: auto;
        max-height: 46%;
        transform: translateY(calc(12px * var(--adaptive-scale)));
    }

    .gmap-card.is-open { transform: translateY(0); }
}