* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
    color: #333;
    cursor: auto;
}

.container {
    max-width: 1100px;
    margin: 0;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 30px;
}

/* Десктоп: растягиваем белый фон на всю страницу, Онлайн и Чат — у правого края */
@media (min-width: 769px) {
    body {
        padding: 0;
    }
    .container {
        max-width: none;
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

header {
    display: none;
}

main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Десктоп: две колонки — слева контент, справа Онлайн и Общий чат */
@media (min-width: 769px) {
    main#mainContent {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 24px;
        align-items: flex-start;
    }
    main .main-left-wrapper {
        flex: 0 1 auto;
        max-width: 1040px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
        order: 1;
    }
    main #onlinePanel,
#onlinePanel.mobile-content-section--active {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* На десктопе скрываем main — весь контент в topPanelsRow */
    main#mainContent {
        display: none !important;
    }
    /* В боковой панели — Онлайн и Чат в столбик */
    main #onlinePanel .online-chat-container {
        flex-direction: column;
    }
    main #onlinePanel .online-users-section {
        flex: 0 0 auto;
        max-height: 200px;
    }
}

/* Мобильные: main-left-wrapper не создаёт блок (children = direct children main) */
@media (max-width: 768px) {
    main .main-left-wrapper {
        display: contents;
    }
}

/* Панель онлайна/чата перемещена — всегда скрыта */
#onlinePanel {
    display: none !important;
}

.class-section {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 16px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.class-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.class-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 12px;
    background: white;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: 0.9em;
}

.class-option input[type="radio"] {
    display: none;
}

.class-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.class-option:has(input[type="radio"]:checked) {
    border-color: #ffb347;
    background: linear-gradient(135deg, rgba(255, 215, 128, 0.15), rgba(255, 179, 71, 0.15));
}

.class-option span {
    color: #444;
    font-weight: 600;
}

/* Верхний ряд: Торговая лавка слева, Экипировка и Системный чат справа */
.top-panels-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Левая колонка: аукцион сверху, общий чат сразу под ним */
.shop-chat-column {
    flex: 0 1 520px;
    min-width: 400px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto;
    align-self: flex-start;
}

/* Высота лавки — список лотов скроллится, чат сразу под блоком */
.shop-top-wrapper {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    height: 580px;
    max-height: 580px;
}

/* Колонка: кладовка сверху, общий чат снизу */
.klada-column {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

/* Десктоп: квесты под хранилищем в той же колонке */
@media (min-width: 901px) {
    .klada-column .daily-quest-panel {
        width: 100%;
        margin: 0;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 480px;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .klada-column .daily-quest-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 240px;
    }

    .klada-column .daily-quest-detail {
        flex: 0 0 auto;
        max-height: 220px;
        overflow-y: auto;
    }
}

/* Кнопка «Локации» над хранилищем (в отступе перед klada) */
.locations-btn-wrap {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none;
}

.locations-goto-btn {
    display: none;
    pointer-events: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 22px;
    font-size: 1.25em;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 55%, #14b8a6 100%);
    box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.locations-goto-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.45);
    filter: brightness(1.05);
}

.locations-goto-btn:active {
    transform: translateY(0);
}

/* Фаза 4: index.html — лобби (вход + чат), без дублей инвентаря/лавки */
body.index-lobby-mode #mainContent,
body.index-lobby-mode #rightColumnWrapper,
body.index-lobby-mode .klada-wrapper,
body.index-lobby-mode #dailyQuestPanel,
body.index-lobby-mode .shop-top-wrapper,
body.index-lobby-mode #mobileTabs {
    display: none !important;
}

body.index-lobby-mode #topPanelsRow {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
}

body.index-lobby-mode .index-lobby-panel {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 4px;
    text-align: center;
}

body.index-lobby-mode .index-lobby-lead {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
}

body.index-lobby-mode .index-lobby-sub {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
    max-width: 420px;
}

body.index-lobby-mode .locations-btn-wrap {
    display: flex !important;
    justify-content: center;
    padding: 8px 16px 20px;
    pointer-events: auto;
}

body.index-lobby-mode #monstersBtn {
    display: inline-flex !important;
    max-width: 360px;
}

/* Кладовка — между лавкой и инвентарём, выравнена по началу изображения инвентаря */
/* Высота = ширина / AR klada.png (358×305), чтобы % слотов совпадали на любом дисплее */
.klada-wrapper {
    flex: 0 0 auto;
    margin-top: 95px;
    position: relative;
    width: 100%;
    aspect-ratio: 358 / 305;
    min-height: 0;
    box-sizing: border-box;
    background-image: url('klada.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
}

.klada-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.klada-overlay .klada-grid-wrapper {
    pointer-events: all;
}

/* Кладовка: полностью как инвентарь — обертка с прокруткой и скроллбаром */
/* Кладовка: ширина ячеек = area% (JS px); +полоса под скроллбар */
.klada-grid-wrapper {
    pointer-events: all;
    position: absolute;
    left: 5.028%;
    top: 16.066%;
    width: calc(85.475% + 16px);
    height: 83.607%;
    box-sizing: border-box;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}

.klada-grid-wrapper::-webkit-scrollbar {
    width: 12px;
}

.klada-grid-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.klada-grid-wrapper::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.klada-grid-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
    background-clip: padding-box;
}

.klada-grid {
    pointer-events: all;
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    gap: 0;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    flex: none;
    min-height: 100%;
    box-sizing: border-box;
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.klada-grid .inventory-cell {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
    box-sizing: border-box;
    aspect-ratio: auto;
}


.klada-grid .inventory-cell .inventory-cell-inner {
    overflow: hidden !important;
    max-width: 100%;
    max-height: 100%;
}

.klada-grid .inventory-cell .inventory-cell-icon {
    overflow: hidden !important;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Слоты кладовки: иконка строго внутри ячейки, без выхода за границы */
.klada-grid .inventory-cell .inventory-cell-icon img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

.klada-config-controls {
    display: none;
}

.admin-slot-align-panel {
    display: none !important;
}

.image-config-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Оверлей для ручного выделения области окна модификации на мобильных */
.modi-mobile-bounds-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    cursor: crosshair;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;
}
.modi-mobile-bounds-hint {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 16px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.modi-mobile-bounds-selection {
    position: fixed;
    border: 2px dashed #667eea;
    background: rgba(102, 126, 234, 0.15);
    pointer-events: none;
    box-sizing: border-box;
}

/* Общий чат — под аукционом (десктоп), компактный */
.global-chat-slot {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.shop-chat-column .global-chat-slot {
    flex: 0 0 auto;
    height: 350px;
    max-height: 350px;
}

.shop-chat-column .global-chat-slot .global-chat-section {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

.shop-chat-column .global-chat-slot .global-chat-tabs {
    flex-shrink: 0;
}

.shop-chat-column .global-chat-slot .global-chat-tab-content {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.shop-chat-column .global-chat-slot .global-chat-header,
.shop-chat-column .global-chat-slot .global-chat-pinned {
    min-height: 0;
}

.shop-chat-column .global-chat-slot .global-chat-messages {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto;
    margin-bottom: 0;
}

.shop-chat-column .global-chat-slot .global-chat-input-container {
    flex-shrink: 0;
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid #e8eaf6;
}

.global-chat-slot .global-chat-section {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: 10px;
}

.global-chat-slot .global-chat-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
}

.global-chat-slot .global-chat-header h3 {
    font-size: 0.95em;
}

.global-chat-slot .global-chat-messages {
    min-height: 80px;
    max-height: 320px;
    gap: 6px;
    margin-bottom: 8px;
}

.global-chat-slot .global-chat-message {
    padding: 5px 8px;
}

.global-chat-slot .global-chat-message-author,
.global-chat-slot .global-chat-message-text {
    font-size: 0.8em;
}

.global-chat-slot .online-users-section {
    margin-top: 8px;
}

.global-chat-slot .global-chat-input {
    padding: 6px 10px;
    font-size: 0.8em;
}

.global-chat-slot .global-chat-send-btn {
    padding: 6px 12px;
    font-size: 0.8em;
}

.right-column-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left: auto;
    flex: 0 1 820px;
    min-width: 720px;
    max-width: 820px;
}

.inventory-and-modi-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
}

.equipment-top-wrapper {
    flex: 0 0 520px;
    display: flex;
    flex-direction: column;
    height: 800px;
}

.modi-wrapper {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* На мобильных блок модификации (сетка + кнопки) переключается отдельно от онлайн-чата */
.modi-inventory-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;
}

.online-slot {
    flex: 0 0 auto;
}

.daily-quest-panel {
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    margin: 0 0 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(92, 107, 192, 0.35);
    position: relative;
    z-index: 5;
}

.daily-quest-empty {
    color: #78909c;
    font-size: 0.85em;
    text-align: center;
    padding: 8px 4px;
}

.daily-quest-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.daily-quest-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.daily-quest-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 3px 6px;
    border: none;
    border-radius: 5px;
    background: #eceff1;
    color: #455a64;
    font-size: 0.76em;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
}

.daily-quest-section-head:hover {
    background: #e0e4e8;
}

.daily-quest-section-meta {
    font-size: 0.85em;
    font-weight: 500;
    color: #78909c;
    white-space: nowrap;
}

.daily-quest-section-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.daily-quest-section.is-collapsed .daily-quest-section-body {
    display: none;
}

.daily-quest-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 6px 4px 5px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    border-left-width: 3px;
    background: #f7f8fc;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 0;
}

.daily-quest-card-main {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
}

/* Не взято */
.daily-quest-card.is-available {
    background: #f4f6f8;
    border-color: #cfd8dc;
    border-left-color: #78909c;
}

.daily-quest-card.is-available .daily-quest-card-badge {
    color: #546e7a;
    font-weight: 600;
}

.daily-quest-card.is-available.is-selected {
    background: #eceff1;
    border-color: #90a4ae;
    border-left-color: #546e7a;
    box-shadow: 0 0 0 2px rgba(84, 110, 122, 0.22);
}

/* В процессе */
.daily-quest-card.is-active {
    background: #e8eaf6;
    border-color: #9fa8da;
    border-left-color: #5c6bc0;
}

.daily-quest-card.is-active .daily-quest-card-badge {
    color: #3949ab;
    font-weight: 600;
}

.daily-quest-card.is-active.is-selected {
    background: #dce1f7;
    border-color: #7986cb;
    border-left-color: #3f51b5;
    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.28);
}

/* Награда готова */
.daily-quest-card.is-claimable {
    background: #e8f5e9;
    border-color: #a5d6a7;
    border-left-color: #43a047;
}

.daily-quest-card.is-claimable .daily-quest-card-badge {
    color: #2e7d32;
    font-weight: 700;
}

.daily-quest-card.is-claimable.is-selected {
    background: #dcedc8;
    border-color: #81c784;
    border-left-color: #388e3c;
    box-shadow: 0 0 0 2px rgba(67, 160, 71, 0.28);
}

/* Выполнено */
.daily-quest-card.is-done {
    background: #f1f3f4;
    border-color: #dfe3e6;
    border-left-color: #90a4ae;
    opacity: 0.88;
}

.daily-quest-card.is-done .daily-quest-card-title {
    color: #78909c;
}

.daily-quest-card.is-done .daily-quest-card-badge {
    color: #607d8b;
    font-weight: 600;
}

.daily-quest-card.is-done.is-selected {
    background: #eceff1;
    border-color: #b0bec5;
    border-left-color: #78909c;
    box-shadow: 0 0 0 2px rgba(144, 164, 174, 0.25);
}

/* Ожидание продолжения */
.daily-quest-card.is-waiting {
    background: #fff8e1;
    border-color: #ffe082;
    border-left-color: #ffa000;
}

.daily-quest-card.is-waiting .daily-quest-card-badge {
    color: #ef6c00;
    font-weight: 600;
}

.daily-quest-card.is-waiting.is-selected {
    background: #ffecb3;
    border-color: #ffca28;
    border-left-color: #f57c00;
    box-shadow: 0 0 0 2px rgba(255, 160, 0, 0.25);
}

.daily-quest-card.is-selected {
    border-right-color: inherit;
    border-top-color: inherit;
    border-bottom-color: inherit;
}

.daily-quest-card-title {
    font-size: 0.78em;
    font-weight: 600;
    color: #37474f;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-quest-card-badge {
    font-size: 0.68em;
    color: #78909c;
    margin-top: 1px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-quest-accept-btn {
    flex: 0 0 auto;
    border: none;
    border-radius: 5px;
    padding: 3px 7px;
    background: #546e7a;
    color: #fff;
    font-size: 0.72em;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}

.daily-quest-card.is-active .daily-quest-accept-btn,
.daily-quest-card.is-claimable .daily-quest-accept-btn {
    background: #00897b;
}

.daily-quest-accept-btn--lg {
    width: 100%;
    padding: 8px 10px;
    min-height: 34px;
    font-size: 0.82em;
    border-radius: 7px;
}

.daily-quest-detail {
    border-top: 1px solid #e8eaf6;
    padding-top: 6px;
}

.daily-quest-avail-hint {
    font-size: 0.78em;
    color: #607d8b;
    margin-bottom: 6px;
    line-height: 1.25;
}

.daily-quest-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid #5c6bc0;
}

.daily-quest-header h3 {
    margin: 0;
    color: #5c6bc0;
    font-size: 0.82em;
    line-height: 1.25;
}

.daily-quest-timer {
    font-size: 0.78em;
    color: #78909c;
    white-space: nowrap;
}

.daily-quest-actions {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.daily-quest-action {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82em;
    color: #37474f;
    padding: 4px 6px;
    border-radius: 6px;
    background: #f5f7fb;
}

.daily-quest-action.is-done {
    background: #e8f5e9;
    color: #2e7d32;
}

.daily-quest-action-prog {
    font-weight: 700;
    white-space: nowrap;
}

.daily-quest-rewards-title {
    font-size: 0.8em;
    font-weight: 700;
    color: #5c6bc0;
    margin: 6px 0 4px;
}

.daily-quest-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.daily-quest-reward {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 4px 8px;
    position: relative;
}

.daily-quest-reward-icon {
    position: relative;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.daily-quest-reward-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.daily-quest-reward .item-bound-lock {
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    min-width: 10px;
    max-width: 10px;
    background-size: 8px 8px;
}

.daily-quest-reward .item-expiry-clock {
    bottom: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    min-width: 10px;
    max-width: 10px;
    background-size: 8px 8px;
}

.daily-quest-reward-fallback {
    font-size: 1rem;
}

.daily-quest-claim-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 12px;
    min-height: 44px;
    background: #5c6bc0;
    color: #fff;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 6;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(92, 107, 192, 0.35);
    user-select: none;
    -webkit-user-select: none;
}

.daily-quest-claim-btn:disabled {
    background: #b0bec5;
    cursor: default;
}

.daily-quest-claim-btn.is-claimed {
    background: #66bb6a;
}

.daily-quest-waiting {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 10px;
    color: #e65100;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
}

.daily-quest-claim-btn:not(:disabled):active {
    filter: brightness(0.92);
}

@media (max-width: 900px) {
    .daily-quest-panel.mobile-content-section--active {
        margin: 10px 8px 88px;
        max-width: none;
    }
}

.online-slot .online-users-section {
    margin: 0;
}

.online-slot .online-users-header h3 {
    font-size: 0.9em;
}

.online-slot .online-users-list {
    max-height: 140px;
    overflow-y: auto;
}

.modi-wrapper {
    position: relative;
}

.modi-overlay {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    background-image: url('modi.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

/* Сетка из 4 ячеек для сфер поверх modi.png. Позиция и размер задаются в JS (DEFAULT_MODI_GRID). */
.modi-grid {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    pointer-events: none;
    box-sizing: border-box;
}

.modi-grid .modi-cell {
    pointer-events: all;
    position: relative;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modi-grid .modi-cell .modi-cell-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modi-grid .modi-cell .modi-cell-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modi-grid .modi-cell .modi-cell-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modi-grid .modi-cell.empty {
    background: transparent;
}

.modi-grid .modi-cell:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(50, 50, 50, 0.25);
}

.modi-grid .modi-cell-level {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.7em;
}

.history-section-slot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 200px;
}

.right-column-wrapper .history-section {
    margin-top: 0;
}

.right-column-wrapper .history-section h2 {
    display: none;
}

.right-column-wrapper .history-section .chat-window {
    max-height: 180px;
}

/* Инвентарь в правой колонке — без обрезки, скролл при необходимости */
.equipment-top-wrapper .image-inventory-wrapper {
    flex-shrink: 0;
}

/* Торговая лавка — того же размера, что и инвентарь */
.shop-top-wrapper .shop-section {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.merchant-sell-zone {
    flex: 0 0 auto;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
    user-select: none;
}
.merchant-r2-shop {
    width: 100%;
    background: linear-gradient(180deg, #4a3f2c 0%, #2a2418 18%, #1a160f 100%);
    border: 2px solid #6d5a38;
    box-shadow: inset 0 1px 0 #8c7850, inset 0 -2px 0 #0d0b08, 0 8px 20px rgba(0,0,0,.35);
    padding: 6px;
    color: #ece6d4;
    font-family: Tahoma, "Segoe UI", sans-serif;
}
.merchant-r2-shop-titlebar {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #3d3426, #241e16);
    border: 1px solid #1a150f;
    box-shadow: inset 0 1px 0 rgba(210, 190, 140, .25);
    margin-bottom: 6px;
}
.merchant-r2-shop-title {
    font-size: 13px;
    letter-spacing: .02em;
    color: #f7f2e6;
    text-shadow: 0 1px 1px #000;
}
.merchant-r2-shop-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    max-height: 310px;
    overflow-y: auto;
    padding: 6px 8px;
    background: #14110c;
    border: 1px solid #0a0806;
    box-shadow: inset 0 0 0 1px #3a3224;
}
.merchant-r2-shop-slot {
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: 20px 22px;
    column-gap: 8px;
    row-gap: 3px;
    min-height: 48px;
    padding: 4px 2px;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: default;
}
.merchant-r2-shop-slot.is-filled {
    cursor: pointer;
}
.merchant-r2-shop-slot.is-filled:hover {
    background: rgba(90, 74, 42, .28);
}
.merchant-r2-shop-icon {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border: 1px solid #6a5a3c;
    box-shadow: inset 0 0 0 1px #0d0b08, inset 0 2px 4px rgba(0,0,0,.65);
    background: #0c0b09;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.merchant-r2-shop-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.merchant-r2-shop-icon-fallback {
    font-size: 18px;
    color: #c9a24f;
}
.merchant-r2-shop-name {
    font-size: 12px;
    color: #f3efe4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: end;
}
.merchant-r2-shop-name.is-empty {
    color: #d8d2c4;
}
.merchant-r2-shop-price {
    display: flex;
    align-items: center;
    height: 20px;
    padding: 0 2px 0 6px;
    background: #0c0b09;
    border: 1px solid #2a2418;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
}
.merchant-r2-shop-price-val {
    flex: 1;
    font-size: 12px;
    color: #efe8d8;
    letter-spacing: .02em;
}
.merchant-r2-shop-s {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    background: radial-gradient(circle at 30% 30%, #ffe27a, #c9a024 55%, #7a5a10);
    color: #5a3a00;
    font: 700 11px/16px Georgia, serif;
    text-align: center;
    border: 1px solid #3a2a08;
    flex: 0 0 auto;
}
.merchant-r2-shop-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding: 4px 8px 2px;
    font-size: 12px;
    color: #d9ccae;
}
.merchant-r2-shop-actions {
    display: flex;
    gap: 8px;
    padding: 6px 8px 4px;
}
.merchant-sell-confirm-btn,
.merchant-sell-clear-btn {
    flex: 1 1 0;
}
.merchant-sell-confirm-btn {
    background: linear-gradient(180deg, #5a4a32, #2a2218);
    color: #ece6d4;
    border: 1px solid #1c160f;
}
.merchant-sell-clear-btn {
    background: linear-gradient(180deg, #5a4a32, #2a2218);
    color: #ece6d4;
    border: 1px solid #1c160f;
}
.merchant-sell-zone.is-drag-over {
    box-shadow: 0 0 0 2px rgba(201, 162, 79, .35);
}

.shop-top-wrapper .shop-section h2 {
    display: none;
}

.shop-top-wrapper .shop-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Панель экипировки — инвентарь виден полностью, скролл при переполнении */
.equipment-top-wrapper .equipment-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Оставляем справа «коридор» под вертикальный скроллбар, чтобы он не обрезал правый столбец ячеек */
    padding-right: 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.equipment-top-wrapper .equipment-section h2 {
    display: none;
}

@media (max-width: 900px) {
    .top-panels-row {
        flex-direction: column;
        min-height: 0;
    }
    .shop-chat-column {
        /* На колонке flex-basis:520px с desktop иначе даёт пустые ~520px сверху */
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        gap: 8px;
    }
    .shop-top-wrapper {
        flex: none;
        height: auto;
        max-height: none;
        min-height: 0;
    }
    .shop-chat-column .global-chat-slot {
        flex: none;
        height: auto !important;
        max-height: none !important;
    }
    .shop-chat-column .global-chat-slot .global-chat-section {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .shop-chat-column .global-chat-slot .global-chat-tab-content {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        grid-template-rows: none !important;
    }
    .shop-chat-column .global-chat-slot .global-chat-tab-content[style*="display: none"] {
        display: none !important;
    }
    .shop-chat-column .global-chat-slot .global-chat-messages {
        min-height: 200px !important;
        max-height: 45vh !important;
    }
    .right-column-wrapper {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }
    .klada-column {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    .locations-btn-wrap {
        position: static;
        margin-top: 8px;
        margin-bottom: 0;
        order: -1;
        pointer-events: auto;
    }
    .locations-goto-btn {
        padding: 14px 18px;
        font-size: 1.15em;
    }
    /* Кладовка по ширине как торговая лавка, выделенные области сохраняются за счёт процентных размеров */
    .klada-wrapper {
        flex: none;
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
    }
    .inventory-and-modi-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .equipment-top-wrapper {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    /* Панель торговой лавки — по ширине панели с никнеймом (не вылезает за экран), лавка видна */
    .shop-top-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    .shop-top-wrapper .shop-section {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        box-sizing: border-box;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }
    .shop-top-wrapper .shop-list,
    .shop-top-wrapper .shop-filters,
    .shop-top-wrapper .shop-tabs {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Вся панель системного чата — по ширине инвентаря и окна модификации */
    #historySectionSlot.history-section-slot {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .right-column-wrapper .history-section,
    .history-section-slot .history-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        margin-top: 8px;
        padding: 8px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .history-section-slot .history-section .chat-window,
    .history-section-slot .history-section .chat-window-bg,
    .history-section-slot .history-section .chat-window-overlay,
    .history-section-slot .history-section .history-list,
    .history-section-slot .history-section .image-config-controls,
    .right-column-wrapper .history-section .chat-window,
    .right-column-wrapper .history-section .chat-window-bg,
    .right-column-wrapper .history-section .chat-window-overlay {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .history-section-slot .history-section .chat-window,
    .right-column-wrapper .history-section .chat-window {
        width: 100% !important;
    }
    /* Окно модификации меньше, по ширине как панель с никнеймом (!important перебивает inline от JS) */
    .modi-wrapper {
        flex: none;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        margin-left: auto !important;
        margin-right: auto !important;
        /* visible: иначе на iOS первый тап по кнопке квеста «съедается» clipping-контейнером */
        overflow: visible;
        box-sizing: border-box;
    }
    .modi-wrapper .modi-overlay {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Окно онлайна помещается в экран, список никнеймов прокручивается */
    .online-slot {
        max-height: none;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    .online-slot .online-users-section {
        max-height: none;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    .online-slot .online-users-list {
        max-height: 35vh;
        min-height: 80px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .equipment-top-wrapper .equipment-section {
        width: 100%;
        padding-right: 0;
    }

    .equipment-top-wrapper .image-inventory-wrapper,
    .equipment-section .image-inventory-wrapper,
    .image-inventory-wrapper {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .merchant-r2-shop-body {
        grid-template-columns: 1fr 1fr;
    }

    #historySectionSlot.history-section-slot {
        margin-bottom: 220px;
    }

    .history-section-slot .history-section,
    .online-slot .online-users-section {
        margin-bottom: 180px;
    }

    .global-chat-slot .global-chat-section {
        margin-bottom: 8px;
    }

    .global-chat-slot .online-users-section {
        margin-top: 0;
        margin-bottom: 0;
    }

    .shop-list {
        padding-bottom: 180px;
        scroll-padding-bottom: 180px;
    }
}

/* Пустой layout-top скрывается после переноса лавки */
.layout-top {
    display: block;
}

.layout-top .shop-section {
    width: 100%;
}

/* Экипировка и инвентарь — отдельная панель ниже лавки */

/* История (системный чат) внизу на всю ширину */
.history-section {
    margin-top: 8px;
}

.panel-collapse-btn {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid #d0d7ff;
    border-radius: 999px;
    background: #f4f6ff;
    color: #4b5bd5;
    font-size: 0.8em;
    font-weight: 700;
    cursor: pointer;
}

.history-section > h2,
.online-users-header,
.global-chat-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-section.panel-collapsed .chat-window {
    display: none;
}

.online-users-section.panel-collapsed .online-users-list {
    display: none;
}

.global-chat-section.panel-collapsed .global-chat-tab-content {
    display: none !important;
}

.chat-window {
    position: relative;
    max-width: 100%;
    margin-top: 10px;
    overflow: hidden;
}

.chat-window-bg {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

.chat-window-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px 12px;
    box-sizing: border-box;
    pointer-events: none;
    overflow: hidden;
}

.chat-window-overlay .history-list {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: auto;
    background: transparent;
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

/* Мобильные вкладки - скрыты на десктопе */
.mobile-tabs {
    display: none;
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 2px solid #e0e0e0;
    padding: 0;
    margin: -30px -30px 20px -30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    justify-content: space-around;
    align-items: center;
}

.mobile-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
    color: #666;
    min-height: 60px;
}

.mobile-tab-btn:active {
    background: rgba(102, 126, 234, 0.1);
}

.mobile-tab-btn--active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.mobile-tab-icon {
    font-size: 1.5em;
}

.mobile-tab-label {
    font-weight: 600;
    font-size: 0.9em;
}

.mobile-content-section {
    display: block;
}

/* Мобильные вкладки - скрыты на десктопе */
.mobile-tabs {
    display: none;
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 2px solid #e0e0e0;
    padding: 0;
    margin: -30px -30px 20px -30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
    color: #666;
    min-height: 60px;
}

.mobile-tab-btn:active {
    background: rgba(102, 126, 234, 0.1);
}

.mobile-tab-btn--active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.mobile-tab-icon {
    font-size: 1.5em;
}

.mobile-tab-label {
    font-weight: 600;
    font-size: 0.9em;
}

.mobile-content-section {
    display: block;
}

/* На десктопе показываем все секции */
@media (min-width: 901px) {
    .mobile-content-section {
        display: block !important;
    }

    /* Чат под аукционом: block !important ломал flex — сообщения раздували блок, поле ввода уезжало за overflow:hidden */
    .shop-chat-column .global-chat-slot .global-chat-section.mobile-content-section {
        display: flex !important;
        flex-direction: column;
    }

    .shop-chat-column .global-chat-slot .global-chat-tab-content {
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }

    .shop-chat-column .global-chat-slot .global-chat-messages {
        flex: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
}

/* Мобильная версия: компактные отступы, без перекрытий */
@media (max-width: 900px) {
    body {
        padding-bottom: 320px;
    }
    .container {
        padding: 8px 10px;
        max-width: 100%;
    }
    .user-panel {
        padding: 8px 10px;
        margin-bottom: 6px;
    }
    .user-panel .class-selector--compact .class-option {
        padding: 3px 8px;
        font-size: 0.8em;
    }
    .layout-top {
        flex-direction: column;
    }
    
    /* Мобильные вкладки внизу: один горизонтальный ряд со свайпом (как классы) */
    .mobile-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        border-top: 2px solid #e0e0e0;
        border-bottom: none;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
    }

    .mobile-tabs::-webkit-scrollbar {
        display: none;
    }
    
    /* Скрываем секции по умолчанию на мобильных */
    .mobile-content-section:not(.mobile-content-section--active) {
        display: none !important;
    }
    
    /* Показываем активную секцию и даём отступ снизу, чтобы контент не залезал под панель вкладок */
    .mobile-content-section.mobile-content-section--active {
        display: block !important;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .mobile-tab-btn {
        flex: 0 0 auto;
        min-width: 4.75rem;
        padding: 10px 12px;
    }

    .mobile-tab-more-btn {
        display: none !important;
    }

    .mobile-tab-btn--extra {
        display: flex;
    }

    /* Сворачивание категорий в аукционе на мобильных */
    #auctionCategoryToggle {
        display: inline-flex !important;
    }

    /* Оставляем только «Все» по умолчанию на мобилках */
    .shop-filter-btn[data-category]:not([data-category="all"]) {
        display: none;
    }
    #shopSection.auction-categories-expanded .shop-filter-btn[data-category]:not([data-category="all"]) {
        display: flex;
    }

    /* Всплывающая зона «В кладовку» при долгом удержании предмета в инвентаре */
    .mobile-klada-drop-zone {
        display: none;
        position: fixed;
        bottom: 88px;
        right: 12px;
        z-index: 150;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #f5f5f5;
        border: 2px solid #ccc;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .mobile-klada-drop-zone.mobile-klada-drop-zone--visible {
        display: flex;
    }
    .mobile-klada-drop-zone.highlight-drop {
        background: #e3f2fd;
        border-color: #2196f3;
        box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
    }
    .mobile-klada-drop-zone-icon {
        font-size: 24px;
        line-height: 1;
    }
    .mobile-klada-drop-zone-label {
        font-size: 10px;
        color: #555;
        margin-top: 2px;
    }

    /* На мобильных все секции идут вертикально */
    .layout-top {
        flex-direction: column;
    }
    
    .shop-section,
    .equipment-section {
        width: 100%;
        margin-bottom: 20px;
        overflow: visible !important;
    }
    
    .equipment-section {
        padding: 8px !important;
        margin-bottom: 12px;
    }
    .equipment-top-wrapper {
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
    }
    .equipment-top-wrapper .equipment-section {
        flex: none;
        padding-right: 8px;
    }
    .inventory-panel {
        margin-top: 4px;
    }
    
    /* Кнопки действий не выходят за пределы панелей и переносят текст при необходимости */
    .shop-buy-btn,
    .shop-buy-scroll-btn,
    .backup-action-btn,
    .image-config-btn,
    #globalChatSendBtn,
    #createBackupBtn {
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .equipment-section .inventory-panel {
        width: 100% !important;
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    
    .equipment-section .inventory-view {
        width: 100% !important;
        display: block !important;
        overflow: visible !important;
    }
    
    .equipment-section .image-inventory-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 4px auto 0 !important;
    }
    
    /* Корзина должна быть видна на мобильных */
    .trash-area {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: all !important;
        z-index: 100 !important;
        border: none !important;
        background-color: transparent !important;
    }
    
    .trash-area.highlight-drop {
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }
    
    /* Улучшаем отображение магазина на мобильных */
    .shop-section {
        max-height: none;
        overflow: visible;
        padding: 15px 15px 180px;
    }
    
    .shop-list {
        max-height: calc(100vh - 260px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 5px 5px 180px;
    }
    
    /* Компактные фильтры */
    .shop-filters {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .shop-filter-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    
    .shop-filter-label {
        font-size: 0.85em;
        margin-right: 8px;
        min-width: 70px;
        font-weight: 600;
    }
    
    .shop-filter-btn--small {
        padding: 8px 12px;
        font-size: 0.8em;
        min-height: 36px;
    }
    
    /* Улучшаем карточки товаров */
    .shop-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border-radius: 10px;
        background: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .shop-item-icon {
        flex-shrink: 0;
    }
    
    .shop-item-info {
        flex: 1;
        min-width: 0;
    }
    
    .shop-item-name {
        font-size: 0.9em;
        font-weight: 600;
        margin-bottom: 4px;
    }
    
    .shop-item-desc {
        font-size: 0.75em;
        color: #666;
        line-height: 1.3;
    }
    
    .shop-buy-btn {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 0.85em;
        min-height: 44px;
        min-width: 80px;
    }
    
    /* Улучшаем инвентарь */
    .inventory-section {
        padding: 12px;
    }
    
    .equip-slots {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-bottom: 15px;
    }
    
    .equip-slot {
        width: 70px;
        height: 70px;
        min-width: 70px;
        min-height: 70px;
    }
    
    /* Рамка без border на positioning-root (border ломает совпадение % с PNG) */
    .image-inventory-wrapper {
        border: none;
        border-radius: 12px;
        box-shadow: 0 0 0 3px #667eea;
        background-color: rgba(102, 126, 234, 0.05);
        margin-bottom: 15px;
        width: 100%;
        max-width: 100%;
        display: block;
        position: relative;
        overflow: visible;
    }
    
    .image-inventory-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    
    .inventory-panel {
        width: 100%;
        display: block;
        overflow: visible;
    }
    
    .inventory-view {
        width: 100%;
        display: block;
        overflow: visible;
    }
    
    .equipment-section {
        overflow: visible !important;
    }
    
    .equip-slot {
        border: 2px solid #667eea;
        background: rgba(102, 126, 234, 0.1);
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2);
    }
    
    .trash-area {
        border: 2px dashed #dc3545;
        background: rgba(220, 53, 69, 0.1);
        border-radius: 10px;
    }
    
    /* Улучшаем поиск */
    .shop-search-input {
        font-size: 0.9em !important;
        padding: 12px !important;
        min-height: 44px;
    }
    
    /* Улучшаем категории в магазине */
    .shop-category-title {
        font-size: 1.1em;
        margin: 15px 0 10px 0;
        padding: 8px 12px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 8px;
    }
    
    /* Панель онлайна и чата на мобильных */
    .online-panel.mobile-content-section {
        display: none !important;
    }
    
    .online-panel.mobile-content-section.mobile-content-section--active {
        display: block !important;
        padding: 15px;
    }

    /*
     * Вкладка Чат (mobile): обычный поток, без desktop height:350px / grid.
     * Важно: display:!important только при --active, иначе чат виден на всех вкладках.
     */
    .shop-chat-column .global-chat-slot.mobile-content-section:not(.mobile-content-section--active),
    .global-chat-slot.mobile-content-section:not(.mobile-content-section--active) {
        display: none !important;
    }

    .shop-chat-column .global-chat-slot.mobile-content-section--active,
    .global-chat-slot.mobile-content-section--active {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 8px 8px 96px !important;
        box-sizing: border-box;
        gap: 12px;
    }

    .shop-chat-column .global-chat-slot.mobile-content-section--active .online-users-section,
    .global-chat-slot.mobile-content-section--active .online-users-section {
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: block !important;
        margin: 0 !important;
    }

    .shop-chat-column .global-chat-slot.mobile-content-section--active .online-users-list,
    .global-chat-slot.mobile-content-section--active .online-users-list {
        max-height: 220px !important;
        min-height: 96px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .shop-chat-column .global-chat-slot.mobile-content-section--active .global-chat-section,
    .shop-chat-column .global-chat-slot.mobile-content-section--active .global-chat-section.mobile-content-section,
    .global-chat-slot.mobile-content-section--active .global-chat-section,
    .global-chat-slot.mobile-content-section--active .global-chat-section.mobile-content-section--active {
        display: block !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .shop-chat-column .global-chat-slot.mobile-content-section--active .global-chat-tab-content,
    .global-chat-slot.mobile-content-section--active .global-chat-tab-content {
        display: block !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        grid-template-rows: none !important;
    }

    .shop-chat-column .global-chat-slot.mobile-content-section--active .global-chat-tab-content[style*="display: none"],
    .global-chat-slot.mobile-content-section--active .global-chat-tab-content[style*="display: none"] {
        display: none !important;
    }

    .shop-chat-column .global-chat-slot.mobile-content-section--active .global-chat-messages,
    .global-chat-slot.mobile-content-section--active .global-chat-messages {
        flex: none !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: 45vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px !important;
    }

    .shop-chat-column .global-chat-slot.mobile-content-section--active .global-chat-input-container,
    .global-chat-slot.mobile-content-section--active .global-chat-input-container {
        display: flex !important;
        flex-shrink: 0 !important;
        gap: 8px;
        margin-top: 4px;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .online-chat-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .online-users-section,
    .global-chat-section {
        background: white;
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    
    .online-users-list {
        max-height: 200px;
        overflow-y: auto;
    }
    
    .global-chat-messages {
        max-height: 300px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px;
    }
    
    .global-chat-input-container {
        display: flex;
        gap: 8px;
    }
    
    .global-chat-input {
        flex: 1;
        padding: 10px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-size: 0.9em;
        min-height: 44px;
    }
    
    .global-chat-send-btn {
        padding: 10px 20px;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        min-height: 44px;
    }
    
    /* Системный чат — только во вкладке «Инвентарь» (видимость через historySectionSlot) */
    .mobile-chat-bottom {
        order: 999;
        position: static;
        margin-top: 20px;
        margin-bottom: 80px; /* запас под нижнюю панель вкладок */
        padding: 15px;
    }
    
    .history-section {
        margin-top: 20px;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .chat-window {
        max-height: 70vh !important; /* больше высота для отображения большего числа сообщений */
        width: 100% !important;
        margin-left: 0 !important;
        overflow: hidden !important;
    }
    
    .chat-window-overlay {
        max-height: 100% !important;
        overflow: hidden !important;
    }
    
    .history-list {
        max-height: 100% !important;
        height: 100% !important;
        font-size: 0.7em !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        line-height: 1.4;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
        padding-bottom: 18px !important; /* приподнимаем текст снизу */
    }
    
    .history-item {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    
    /* Класс персонажа отображается только во вкладке "Инвентарь" через mobile-content-section */
}

/* Планшеты и небольшие экраны */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .container {
        padding: 16px;
        border-radius: 15px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    .class-section {
        padding: 12px 16px;
    }
    
    .class-option {
        padding: 5px 10px;
        font-size: 0.85em;
    }
    
    .equipment-section,
    .upgrade-section,
    .history-section,
    .inventory-section {
        padding: 15px;
    }
    
    h2 {
        font-size: 1.3em;
        margin-bottom: 15px;
    }
    
    .shop-section {
        max-height: 400px;
    }
    
    .shop-item {
        padding: 8px;
    }
    
    .shop-item img {
        width: 40px;
        height: 40px;
    }
    
    .shop-buy-btn {
        padding: 6px 12px;
        font-size: 0.8em;
    }
    
    .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 6px;
    }
    
    .inventory-slot {
        width: 50px;
        height: 50px;
    }
    
    .inventory-slot img {
        width: 45px;
        height: 45px;
    }
    
    .inventory-slot .slot-level {
        font-size: 0.7em;
        padding: 1px 3px;
    }
    
    .user-panel {
        padding: 10px 15px;
    }
    
    .user-name {
        font-size: 0.9em;
    }
    
    .logout-btn {
        padding: 6px 15px;
        font-size: 0.85em;
    }
    
    .login-content {
        padding: 25px 20px;
        max-width: 90%;
    }
    
    .login-content h2 {
        font-size: 1.5em;
    }
    
    .login-subtitle {
        font-size: 0.9em;
    }
    
    .login-hint {
        font-size: 0.75em !important;
    }
    
    #usernameInput,
    #adminPasswordInput {
        padding: 10px;
        font-size: 0.95em;
        width: 100%;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        box-sizing: border-box;
        transition: border-color 0.2s ease;
    }
    
    #usernameInput:focus,
    #adminPasswordInput:focus {
        outline: none;
        border-color: #667eea;
    }
    
    #adminPasswordContainer {
        margin-top: 10px;
    }
    
    .login-btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}

/* Мобильные телефоны */
@media (max-width: 480px) {
    body {
        padding: 5px;
    }
    
    .container {
        padding: 10px;
        border-radius: 10px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    header {
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    
    .class-section {
        padding: 10px 12px;
    }
    
    .class-selector {
        gap: 6px;
    }
    
    .class-option {
        padding: 4px 8px;
        font-size: 0.75em;
    }
    
    .equipment-section,
    .upgrade-section,
    .history-section,
    .inventory-section {
        padding: 12px;
        border-radius: 10px;
    }
    
    h2 {
        font-size: 1.1em;
        margin-bottom: 12px;
    }
    
    .layout-top {
        gap: 15px;
    }
    
    .shop-section {
        max-height: none;
        padding: 12px;
    }
    
    .shop-list {
        max-height: calc(100vh - 300px);
    }
    
    .shop-tabs {
        gap: 5px;
        margin-bottom: 10px;
    }
    
    .shop-tab {
        padding: 6px 12px;
        font-size: 0.85em;
    }
    
    .shop-list {
        gap: 6px;
    }
    
    .shop-item {
        padding: 6px;
        border-radius: 6px;
    }
    
    .shop-item img {
        width: 35px;
        height: 35px;
    }
    
    .shop-item-name {
        font-size: 0.75em;
    }
    
    .shop-buy-btn {
        padding: 5px 10px;
        font-size: 0.75em;
    }
    
    .inventory-grid {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
        gap: 5px;
    }
    
    .inventory-slot {
        width: 45px;
        height: 45px;
    }
    
    .inventory-slot img {
        width: 40px;
        height: 40px;
    }
    
    .inventory-slot .slot-level {
        font-size: 0.65em;
        padding: 1px 2px;
    }
    
    .image-inventory-wrapper {
        border-radius: 8px;
    }
    
    .equip-slot {
        border-radius: 6px;
    }
    
    .equip-slot img {
        width: 35px;
        height: 35px;
    }
    
    .equip-slot .slot-level {
        font-size: 0.7em;
    }
    
    .trash-area {
        border-radius: 6px;
    }
    
    .user-panel {
        padding: 8px 12px;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .user-info {
        width: 100%;
    }
    
    .user-name {
        font-size: 0.85em;
        display: block;
    }
    
    .logout-btn {
        width: 100%;
        padding: 8px;
        font-size: 0.85em;
    }
    
    .login-modal {
        padding: 10px;
    }
    
    .login-content {
        padding: 20px 15px;
        max-width: 95%;
        border-radius: 10px;
    }
    
    .login-content h2 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }
    
    .login-subtitle {
        font-size: 0.85em;
        margin-bottom: 8px;
    }
    
    .login-hint {
        font-size: 0.7em !important;
        margin-top: -3px !important;
        margin-bottom: 8px !important;
    }
    
    #usernameInput,
    #adminPasswordInput {
        padding: 8px;
        font-size: 0.9em;
        margin-bottom: 12px;
        width: 100%;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        box-sizing: border-box;
    }
    
    #adminPasswordContainer {
        margin-top: 8px;
    }
    
    .login-buttons {
        flex-direction: column;
        gap: 8px;
    }
    
    .login-btn {
        width: 100%;
        padding: 10px;
        font-size: 0.9em;
    }
    
    .history-list {
        font-size: 11px;
        max-height: 200px;
    }
    
    .history-item {
        margin-bottom: 4px;
        font-size: 0.9em;
    }
    
    .chat-window-overlay {
        padding: 4px 8px;
    }
    
    /* Кнопки конфигурации (только для админа) */
    .config-btn {
        padding: 6px 12px;
        font-size: 0.8em;
        margin: 5px 0;
    }
    
    /* Улучшение отображения изображения инвентаря на мобильных */
    /* Тег img больше не используется, используется background-image */
}

/* Очень маленькие экраны */
@media (max-width: 360px) {
    header h1 {
        font-size: 1.4em;
    }
    
    .shop-item img {
        width: 30px;
        height: 30px;
    }
    
    .inventory-slot {
        width: 40px;
        height: 40px;
    }
    
    .inventory-slot img {
        width: 35px;
        height: 35px;
    }
    
    .equip-slot img {
        width: 30px;
        height: 30px;
    }
    
    /* Исправляем размеры ячеек инвентаря на мобильных */
    .inventory-cell {
        overflow: hidden !important;
    }
    
    .inventory-cell-inner {
        overflow: hidden !important;
    }
    
    .inventory-cell-icon {
        overflow: hidden !important;
    }
    
    .inventory-cell-icon img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* Улучшения для touch-устройств */
@media (hover: none) and (pointer: coarse) {
    /* Увеличиваем область нажатия для кнопок на touch-устройствах */
    .shop-buy-btn,
    .login-btn,
    .logout-btn,
    .config-btn {
        min-height: 44px; /* Минимальный размер для удобного нажатия */
        min-width: 44px;
    }
    
    /* Убираем hover-эффекты на touch-устройствах */
    .shop-item:hover,
    .inventory-slot:hover,
    .equip-slot:hover,
    .class-option:hover,
    .equipment-option:hover {
        transform: none;
    }

    /* Не меняем размер/позицию иконки в инвентаре при нажатии */
    .inventory-cell:hover,
    .inventory-cell:active,
    .inventory-cell:focus {
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Улучшаем визуальную обратную связь при нажатии */
    .shop-buy-btn:active,
    .login-btn:active,
    .logout-btn:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
    
    /* Увеличиваем размеры элементов для удобного нажатия */
    .inventory-slot {
        min-width: 48px;
        min-height: 48px;
    }
    
    .equip-slot {
        min-width: 48px;
        min-height: 48px;
    }
    
    /* Улучшаем скроллинг на touch-устройствах */
    .shop-list,
    .history-list {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Визуальная обратная связь при перетаскивании предмета */
    .inventory-cell.touch-dragging {
        opacity: 0.5;
        transform: scale(0.95);
        z-index: 1000;
    }
    
    /* Призрак предмета при перетаскивании */
    .inventory-drag-ghost {
        position: fixed;
        pointer-events: none;
        z-index: 10000;
        width: 60px;
        height: 60px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        background: rgba(255, 255, 255, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, -50%);
    }
    
    .inventory-drag-ghost img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }
    
    /* Подсветка целевой ячейки при перетаскивании */
    .inventory-cell.touch-drag-target {
        background: rgba(100, 181, 246, 0.3);
        border: 2px dashed #64b5f6;
    }

    /* Подсветка выбранной ячейки кладовки в режиме «Хранилище» */
    .inventory-cell.klada-cell.klada-cell--selected {
        outline: 2px solid #667eea;
        outline-offset: -2px;
        background: rgba(102, 126, 234, 0.18);
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
    }
    
    /* Убираем выделение текста при двойном нажатии */
    .shop-item,
    .inventory-slot,
    .equip-slot {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
        -webkit-user-select: none;
    }
}

.equipment-section,
.upgrade-section,
.history-section,
.inventory-section {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.equipment-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.equipment-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 16px;
    background: white;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.equipment-option input[type="radio"] {
    display: none;
}

.equipment-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.equipment-option:has(input[type="radio"]:checked) {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.equipment-option:has(input[type="radio"]:checked) span {
    font-weight: 600;
    color: #667eea;
}

.equipment-option span {
    font-size: 1em;
    color: #333;
}

/* Селектор типа экипировки сейчас скрыт, так как выбор идёт через лавку и инвентарь */
.equipment-selector {
    display: none;
}

h2 {
    color: #667eea;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.equipment-card {
    /* Визуальная карточка текущей экипировки сейчас не используется */
    display: none;
}

.equipment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.equipment-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
}

.equipment-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.icon-placeholder {
    font-size: 2.5em;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipment-info {
    flex: 1;
}

.equipment-info h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.enhancement-level {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.save-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    transition: all 0.3s ease;
    width: 100%;
}

.save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.save-btn:active {
    transform: translateY(0);
}

.level-badge {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.2em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.upgrade-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scroll-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scroll-option {
    display: block;
    cursor: pointer;
}

.scroll-option input[type="radio"] {
    display: none;
}

.scroll-option-content {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.scroll-option input[type="radio"]:checked + .scroll-option-content {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.scroll-option:hover .scroll-option-content {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scroll-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.scroll-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 1;
}

.scroll-icon.blessed {
    background-color: #ff0;
}

.scroll-icon.blessed img {
    mix-blend-mode: multiply;
}

.scroll-icon-fallback {
    font-size: 2em;
}

.scroll-option-content span {
    flex: 1;
    font-size: 1.1em;
    color: #333;
    font-weight: 500;
}

.upgrade-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 20px 40px;
    border-radius: 12px;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.upgrade-btn:active {
    transform: translateY(0);
}

.upgrade-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Панель улучшения через кнопку скрыта — улучшаем только в инвентаре */
.upgrade-section {
    display: none;
}

.success-rate {
    font-size: 0.7em;
    opacity: 0.9;
}

.result-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-message {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

.result-message.success {
    color: #28a745;
}

.result-message.failure {
    color: #dc3545;
}

.history-list {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 13px;
    line-height: 1.3;
    color: #e7d6ad; /* мягкий бежевый для системного чата */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-right: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

/* Когда history-list внутри chat-window-overlay, используем высоту родителя */
.chat-window-overlay > .history-list {
    max-height: 100%;
    height: 100%;
}

.history-item {
    background: transparent;
    padding: 0;
    margin: 0 0 6px 0; /* отступ между уведомлениями в системном чате */
    box-shadow: none;
    display: block;
    animation: fadeIn 0.2s ease;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.history-item.success {
    border-left: none;
}

.history-item--kill {
    color: #00ffff;
}

.history-item--loot {
    color: #ffe14d;
}

.history-item--enhance {
    color: #e7d6ad;
}

.history-item.failure {
    border-left: none;
}

.history-time {
    color: inherit;
    font-size: inherit;
}

.empty-history {
    text-align: left;
    color: #e7d6ad;
    font-style: normal;
    padding: 0;
    white-space: nowrap;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

/* Торговая лавка */
.shop-section {
    margin-top: 10px;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.shop-tabs {
    display: inline-flex;
    border-radius: 999px;
    background: #eef1ff;
    padding: 3px;
    margin-bottom: 10px;
    gap: 2px;
}

.shop-tab-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    color: #667eea;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.shop-tab-btn--active {
    background: #ffffff;
    color: #333;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.shop-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: #f4f5ff;
    border-radius: 10px;
}

.shop-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.shop-filter-label {
    font-size: 0.8em;
    font-weight: 600;
    color: #555;
    margin-right: 4px;
}

.shop-filter-btn {
    border: none;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75em;
    font-weight: 600;
    cursor: pointer;
    background: #e2e5ff;
    color: #4850b8;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.shop-filter-btn--small {
    padding: 3px 9px;
}

.shop-filter-btn:hover {
    background: #d4d8ff;
    transform: translateY(-1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.shop-filter-btn--active {
    background: #ffffff;
    color: #333;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

/* На десктопе скрываем кнопку раскрытия категорий (на мобилках нужна) */
@media (min-width: 901px) {
    #auctionCategoryToggle {
        display: none !important;
    }
}

.shop-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    flex: 1;              /* растягиваем список до низа панели лавки */
    min-height: 0;        /* важно для корректной работы скролла во flex-контейнере */
    overflow-y: auto;
    padding-right: 4px;
}

.shop-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.shop-item-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.shop-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    image-rendering: auto;
}

.shop-item-icon .icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    background: #f3f4f6;
    border-radius: 8px;
    color: #9ca3af;
}

.shop-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shop-item-name {
    font-weight: 600;
    color: #333;
}

.shop-item-desc {
    font-size: 0.85em;
    color: #666;
}

.shop-buy-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.shop-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
}

.shop-buy-btn:active {
    transform: translateY(0);
}

/* Простой инвентарь 4x4 */
.inventory-panel {
    margin-top: 16px;
    position: relative; /* Для позиционирования слотов относительно панели */
}

.inventory-panel h3 {
    font-size: 1em;
    margin-bottom: 6px;
    color: #555;
}

.inventory-tabs {
    display: inline-flex;
    border-radius: 999px;
    background: #eef1ff;
    padding: 3px;
    margin-bottom: 10px;
}

.inventory-tab {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    color: #667eea;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.inventory-tab.active {
    background: white;
    color: #333;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.inventory-view {
    margin-top: 8px;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.inventory-cell {
    position: relative;
    width: 100%;
    height: 100%; /* Используем высоту grid ячейки вместо padding-bottom */
    padding: 0; /* Убираем все отступы */
    margin: 0; /* Убираем все отступы */
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    overflow: visible !important; /* Разрешаем видимость содержимого, чтобы не обрезать верх */
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease, background-color 0.1s ease;
    /* Убеждаемся, что ячейка занимает всю доступную область */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ячейка должна быть точно квадратной и соответствовать размеру слота на изображении */
    aspect-ratio: 1 / 1;
}

/* Замочек на иконке предмета (правый верхний угол) — рисуем SVG, без PNG */
.item-bound-lock {
    position: absolute;
    top: 0;
    right: 0;
    width: 11px;
    height: 11px;
    min-width: 11px;
    max-width: 11px;
    z-index: 6;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: 1px;
    background-color: #c62828;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' d='M3.6 5.2V4a2.4 2.4 0 0 1 4.8 0v1.2'/%3E%3Crect fill='%23fff' x='2.4' y='5.2' width='7.2' height='5' rx='0.9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 9px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.inventory-cell.is-bound .item-bound-lock,
.inventory-slot.is-bound .item-bound-lock,
.daily-quest-reward-icon .item-bound-lock {
    display: block;
}

/* Часики на иконке (левый нижний угол) — временный предмет */
.item-expiry-clock {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 11px;
    height: 11px;
    min-width: 11px;
    max-width: 11px;
    z-index: 6;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: 1px;
    background-color: #1565c0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' d='M6 3.8V6l2 1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 9px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.inventory-cell.is-temporary .item-expiry-clock,
.daily-quest-reward-icon .item-expiry-clock {
    display: block;
}

.inventory-cell:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.inventory-cell-inner {
    position: absolute;
    inset: 0; /* Занимаем всю ячейку без отступов */
    border-radius: 0; /* Убираем скругление для точного соответствия */
    display: flex;
    align-items: flex-start; /* Выравниваем по верхнему краю */
    justify-content: flex-end; /* Выравниваем по правому краю */
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0; /* Убираем все отступы */
    margin: 0; /* Убираем все отступы */
    box-sizing: border-box;
    overflow: hidden !important; /* Обрезаем содержимое, которое выходит за пределы */
}

.inventory-cell-icon {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0; /* Убираем скругление для точного соответствия */
    background: transparent;
    display: flex;
    align-items: flex-start; /* Выравниваем по верхнему краю */
    justify-content: flex-end; /* Выравниваем по правому краю */
    overflow: hidden !important; /* Обрезаем иконки, которые выходят за пределы */
    box-sizing: border-box;
    padding: 0; /* Убираем все отступы */
    margin: 0; /* Убираем все отступы */
    position: relative;
}

.inventory-cell-icon img,
.inventory-cell .inventory-cell-icon img,
.image-inventory-grid .inventory-cell-icon img {
    /* Иконка полностью помещается в ячейку без обрезки */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    image-rendering: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
}

.inventory-cell-level {
    position: absolute;
    right: 1px;
    bottom: 1px;
    padding: 0 1px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.72);
    color: #f5f5f5;
    font-size: 0.52em;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.inventory-cell.scroll .inventory-cell-icon {
    background: rgba(255, 248, 220, 0.9);
}

.inventory-cell.scroll.blessed .inventory-cell-icon {
    background: #ff0; /* Жёлтая подложка (возвращена как было) */
    box-shadow: 0 0 4px rgba(255, 235, 59, 0.5); /* Менее яркая тень (контур) */
    border-radius: 4px;
}

.inventory-cell.scroll.blessed .inventory-cell-icon img {
    mix-blend-mode: multiply; /* Иконка «окрашивается» в жёлтый, но остаются детали */
}

/* Благословенные предметы (экипировка) с желтой заливкой */
.inventory-cell.equipment.blessed .inventory-cell-icon {
    background: #ff0; /* Жёлтая подложка */
    box-shadow: 0 0 4px rgba(255, 235, 59, 0.5); /* Менее яркая тень (контур) */
    border-radius: 4px;
}

.inventory-cell.selected-scroll {
    border-color: #ffcc00;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
}

/* Надетый предмет в инвентаре (затемнение/подсветка) */
.inventory-cell.equipment.equipped-item .inventory-cell-icon {
    position: relative;
    filter: grayscale(0.4);
    opacity: 0.8;
}

.inventory-cell.equipment.equipped-item::after {
    content: '✓';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.9);
    color: #fff;
    font-size: 8px;
    line-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    z-index: 5;
    pointer-events: none;
}

/* Overlay / мобилка: ячейки мелкие — бейджи не должны закрывать иконку */
body.inventory-overlay-mode .inventory-cell.equipment.equipped-item::after,
body.loc-inventory-native.inventory-overlay-mode .inventory-cell.equipment.equipped-item::after {
    top: 1px;
    left: 1px;
    width: 9px;
    height: 9px;
    font-size: 7px;
    line-height: 9px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}
body.inventory-overlay-mode .item-bound-lock,
body.inventory-overlay-mode .item-expiry-clock,
body.loc-inventory-native.inventory-overlay-mode .item-bound-lock,
body.loc-inventory-native.inventory-overlay-mode .item-expiry-clock {
    width: 8px;
    height: 8px;
    min-width: 8px;
    max-width: 8px;
    background-size: 6px 6px;
    border-radius: 1px;
}

.inventory-cell.empty {
    background: transparent;
}

.inventory-hint {
    margin-top: 8px;
    font-size: 0.8em;
    color: #777;
}

.volume-panel {
    margin-top: 8px;
    font-size: 0.8em;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-panel input[type="range"] {
    flex: 1;
}

/* Кнопка переключения инвентаря */
.inventory-toggle-btn {
    padding: 6px 14px;
    font-size: 0.85em;
    font-weight: 600;
    color: #667eea;
    background: #f4f5ff;
    border: 1px solid #ccd3ff;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.inventory-toggle-btn:hover {
    background: #e4e6ff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.inventory-toggle-btn:active {
    transform: translateY(1px);
}

/* Сортировка перенесена на иконку «↔» внизу inventory.png */
#inventorySortBtn {
    display: none !important;
}

/* Клик по иконке «↔» (сортировка) на inventory.png */
.inventory-sort-hit {
    position: absolute;
    z-index: 100;
    pointer-events: auto !important;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.01);
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
    left: 71.5%;
    top: 87%;
    width: 10.0%;
    height: 7%;
    display: block;
}
.inventory-sort-hit:hover,
.inventory-sort-hit:active,
.inventory-sort-hit:focus,
.inventory-sort-hit:focus-visible {
    background: rgba(255, 255, 255, 0.01);
    outline: none;
    box-shadow: none;
}

/* Инвентарь: box ≡ PNG (352×526). Сферы: .is-sphere → 354×526 */
.image-inventory-wrapper {
    position: relative;
    width: 100%;
    max-width: calc(100% - 20px);
    margin: 6px auto 0;
    box-sizing: border-box;
    aspect-ratio: 352 / 526;
    min-height: 0;
    background-image: url('inventory.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
}

.image-inventory-wrapper.is-sphere {
    aspect-ratio: 354 / 526;
}

.image-inventory-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Слоты позиционируются абсолютно относительно этого контейнера */
}

.q-button-area {
    position: absolute;
    display: none;
    z-index: 100;
    cursor: pointer;
    pointer-events: all;
}

/* Панель Q убираем полностью */
#qButtonArea,
.q-button-area {
    display: none !important;
}

.q-button-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.q-button-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    border-radius: 4px;
}

.q-button-item.blessed-scroll {
    background-color: #ff0 !important;
    box-shadow: 0 0 4px rgba(255, 235, 59, 0.5);
    border-radius: 4px;
}

.q-button-item.blessed-scroll img {
    mix-blend-mode: multiply;
    position: relative;
    z-index: 1;
}

.q-button-item-count {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffd700;
    font-size: 0.65em;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 2px;
    line-height: 1;
    z-index: 10;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.q-button-area.highlight-drop {
    background-color: rgba(76, 175, 80, 0.3);
    border: 2px dashed #4CAF50;
}

/* Кликабельные вкладки «Инвентарь» / «Сферы» поверх inventory.png / sphere.png — без подсветки */
.inventory-tab-hit {
    position: absolute;
    z-index: 500;
    pointer-events: auto !important;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    /* почти прозрачный фон — иначе некоторые браузеры не ловят клик по пустой кнопке */
    background: rgba(255, 255, 255, 0.01);
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    box-shadow: none;
}
.inventory-tab-hit:hover,
.inventory-tab-hit:active,
.inventory-tab-hit:focus,
.inventory-tab-hit:focus-visible {
    background: rgba(255, 255, 255, 0.01);
    outline: none;
    box-shadow: none;
}
/* Шире/выше текста вкладок на PNG (~y 30–46 из 526) */
#inventoryTabInventoryHit {
    left: 8%;
    top: 4.5%;
    width: 26%;
    height: 5.5%;
}
#inventoryTabSpheresHit {
    left: 34%;
    top: 4.5%;
    width: 28%;
    height: 5.5%;
}

/* Кликабельная «Модификация» на modi.png (227×260) */
.modi-btn-hit {
    position: absolute;
    z-index: 500;
    pointer-events: auto !important;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.01);
    appearance: none;
    -webkit-appearance: none;
}
.modi-btn-hit:hover {
    background: rgba(255, 255, 255, 0.12);
}
.modi-btn-hit:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.45);
    outline-offset: -1px;
}
#modiRunHit {
    left: 2%;
    top: 85%;
    width: 48%;
    height: 12%;
}
/* REGRESSION: крестик на modi.png — отдельная hit-зона (HTML × вне wrapper не попадал в клик). */
#modiCloseHit {
    left: 82%;
    top: 0.5%;
    width: 17%;
    height: 11%;
    z-index: 620;
    background: transparent;
}

/* Панель персонажа + серебро поверх inventory.png (352×526) */
.inventory-char-overlays {
    position: absolute;
    inset: 0;
    z-index: 45;
    pointer-events: none;
}

.inventory-char-overlay,
.inventory-silver-overlay {
    position: absolute;
    pointer-events: none;
    display: flex;
    align-items: center;
    background-color: #3e372b;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0    1px 0 #000,
         0   -1px 0 #000,
         1px  0   0 #000,
        -1px  0   0 #000;
}

.inventory-char-nick {
    left: 6.5%;
    top: 11.4%;
    width: 42%;
    height: 2.7%;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
}

.inventory-char-row {
    left: 5.7%;
    width: 39.5%;
    height: 2.55%;
    justify-content: space-between;
    padding: 0 2px;
}

#inventoryGuildOverlay { top: 16.75%; }
#inventoryLevelOverlay { top: 20.55%; }
#inventoryHpOverlay { top: 24.35%; }
#inventoryMpOverlay { top: 28.35%; }
#inventoryStrOverlay { top: 32.35%; }
#inventoryAgiOverlay { top: 36.35%; }
#inventoryIntOverlay { top: 40.35%; }
#inventoryDefOverlay { top: 44.35%; }

.inventory-char-overlay .inv-stat-label,
.inventory-char-overlay .inv-stat-value,
.inventory-char-overlay span,
.inventory-silver-overlay span {
    font: inherit;
    color: inherit;
    text-shadow: inherit;
    letter-spacing: inherit;
}

.inventory-silver-overlay {
    /* y≈464–470, x≈18… — одна строка «Серебро : N» */
    left: 4.8%;
    top: 87.95%;
    width: 42%;
    height: 1.9%;
    z-index: 45;
    background-color: #3e3e33;
}

.image-inventory-wrapper.is-sphere .inventory-char-overlays {
    display: none;
}

.trash-area {
    position: absolute;
    pointer-events: all;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    left: 81.52173913043478%;
    top: 86.85215493726132%;
    width: 11.73913043478261%;
    height: 7.12856883069649%;
    display: block;
}

.trash-area.highlight-drop {
    border: none;
    box-shadow: none;
    background-color: transparent;
}

/* Обертка сетки: ширина ячеек = area% PNG (задаётся JS в px); +полоса под скроллбар */
.image-inventory-grid-wrapper {
    pointer-events: all;
    position: absolute;
    left: 4.2614%;
    top: 57.0342%;
    width: calc(86.9318% + 16px);
    height: 29.2776%;
    box-sizing: border-box;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}

.image-inventory-grid {
    pointer-events: all;
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    /* fallback до JS: 100% минус полоса скролла; JS ставит точный px = area% родителя */
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
}

/* Стилизация скроллбара для WebKit-браузеров (Chrome, Safari) */
.image-inventory-grid-wrapper::-webkit-scrollbar {
    width: 12px;
}

.image-inventory-grid-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.image-inventory-grid-wrapper::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.image-inventory-grid-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
    background-clip: padding-box;
}

.image-config-controls {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.image-config-btn {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 0.8em;
    border-radius: 999px;
    border: 1px solid #ccd3ff;
    background: #f4f5ff;
    color: #4b5bd5;
    cursor: pointer;
}

.image-config-btn:hover {
    background: #e4e6ff;
}

.image-selection-box {
    position: absolute;
    z-index: 660;
    border: 2px dashed #4b5bd5;
    background: rgba(75, 91, 213, 0.18);
    box-sizing: border-box;
    pointer-events: none;
}

/* Инвентарь с изображением как фоном (пока не используется, оставляем на будущее) */
.inventory-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.inventory-background {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}

.inventory-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Слоты для экипировки (верхние) - позиционируются относительно .image-inventory-wrapper */
.equipment-slots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 60; /* слоты экипировки (в т.ч. сфер) поверх grid-инвентаря */
    /* Позиционируются относительно .image-inventory-wrapper */
}

.equipment-slot {
    position: absolute;
    pointer-events: all;
    z-index: 50; /* всегда поверх сетки ячеек инвентаря */
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Позиции слотов экипировки на inventory.png (как оверлеи статов) */
#equipSlotWeapon {
    left: 48.8636%;
    top: 27.5665%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotHelmet {
    left: 64.4886%;
    top: 11.2167%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotEquipment {
    left: 80.1136%;
    top: 21.673%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotArmor {
    left: 64.4886%;
    top: 21.673%;
    width: 13.6364%;
    height: 9.1255%;
}

/* Слоты сфер на sphere.png; по умолчанию скрыты */
#equipSlotSphereLife,
#equipSlotSphereSoul,
#equipSlotSphereMastery,
#equipSlotSphereDefense,
#equipSlotSphereDestruction,
#equipSlotSphereShining {
    display: none;
}

#equipSlotSphereLife {
    left: 52.0607%;
    top: 10.3652%;
    width: 14.9675%;
    height: 10.2192%;
}

#equipSlotSphereSoul {
    left: 79.6095%;
    top: 23.5251%;
    width: 14.5336%;
    height: 9.7813%;
}

#equipSlotSphereMastery {
    left: 69.6312%;
    top: 46.1117%;
    width: 14.9675%;
    height: 9.6353%;
}

#equipSlotSphereDefense {
    left: 34.7072%;
    top: 45.8198%;
    width: 14.7505%;
    height: 10.3652%;
}

#equipSlotSphereDestruction {
    left: 24.5119%;
    top: 23.2748%;
    width: 14.9675%;
    height: 10.3652%;
}

#equipSlotSphereShining {
    left: 4.5198%;
    top: 33.4601%;
    width: 16.6667%;
    height: 10.6464%;
}

/* JPG: рамка смещена — cover + focal point, без translate (ломал вертикаль) */
#equipSlotSphereShining img {
    object-position: 55% 62%;
    transform: scale(0.97);
    transform-origin: center center;
}

#equipSlotGloves {
    left: 80.1136%;
    top: 32.1293%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotBoots {
    left: 64.4886%;
    top: 42.5856%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotCloak {
    left: 80.1136%;
    top: 11.2167%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotNecklace {
    left: 48.8636%;
    top: 17.1103%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotRing1 {
    left: 48.8636%;
    top: 38.0228%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotRing2 {
    left: 80.1136%;
    top: 42.5856%;
    width: 13.6364%;
    height: 9.1255%;
}

#equipSlotBelt {
    left: 64.4886%;
    top: 32.1293%;
    width: 13.6364%;
    height: 9.1255%;
}

.equipment-slot:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.equipment-slot img {
    /* Иконка заполняет слот полностью без рамок */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: auto;
}

.equipment-slot .slot-level {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 2px;
    line-height: 1;
}

/* Слоты для инвентаря (нижние) */
.inventory-slots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.inventory-slot {
    position: absolute;
    pointer-events: all;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    background: transparent;
}

.inventory-slot:hover {
    border-color: rgba(255, 215, 0, 0.6);
    background-color: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.inventory-slot.filled {
    background-color: transparent;
    border-color: transparent;
}

.inventory-slot.filled:hover {
    border-color: rgba(255, 215, 0, 0.8);
    background-color: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.inventory-slot.selected-scroll {
    border: 2px solid #4CAF50 !important;
    background-color: rgba(76, 175, 80, 0.2) !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.6) !important;
}

.inventory-slot.selected-equipment {
    border: 2px solid #2196F3 !important;
    background-color: rgba(33, 150, 243, 0.2) !important;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.6) !important;
}

/* Благословенные свитки с желтой заливкой */
.inventory-slot.blessed-slot {
    background-color: #ff0 !important;
    position: relative;
}

.inventory-slot.blessed-slot img {
    mix-blend-mode: multiply;
    position: relative;
    z-index: 1;
}

/* Благословенные предметы в слотах экипировки */
[id^="equipSlot"].blessed-slot,
[id*="equipSlot"].blessed-slot {
    background-color: #ff0 !important;
    box-shadow: 0 0 4px rgba(255, 235, 59, 0.5) !important;
    border-radius: 4px;
}

[id^="equipSlot"].blessed-slot img,
[id*="equipSlot"].blessed-slot img {
    mix-blend-mode: multiply;
}

.inventory-slot img {
    width: 85%;
    height: 85%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    pointer-events: none;
}

.inventory-slot .slot-level {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffd700;
    font-size: 0.65em;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 2px;
    line-height: 1;
    z-index: 10;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Режим настройки слотов */
.toggle-config-btn {
    background: linear-gradient(135deg, #8b7355 0%, #a0826d 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.toggle-config-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.inventory-config-panel {
    background: #f8f9fa;
    border: 2px solid #8b7355;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.inventory-config-panel h3 {
    color: #8b7355;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.config-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.config-btn {
    background: #8b7355;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.config-btn:hover {
    background: #a0826d;
    transform: translateY(-1px);
}

.config-info {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.config-info p {
    margin: 5px 0;
    color: #666;
}

.config-info strong {
    color: #8b7355;
}

/* Область выделения */
.selection-box {
    position: absolute;
    border: 2px dashed #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
    pointer-events: none;
    z-index: 1000;
    box-sizing: border-box;
}

/* Стили для режима настройки слотов */
.inventory-slot.config-mode,
.equipment-slot.config-mode {
    border: 2px solid #ff6b6b !important;
    background-color: rgba(255, 107, 107, 0.2) !important;
    cursor: pointer !important;
    z-index: 100;
}

.inventory-slot.config-mode:hover,
.equipment-slot.config-mode:hover {
    border-color: #ff4757 !important;
    background-color: rgba(255, 71, 87, 0.3) !important;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5) !important;
}

.inventory-wrapper.config-mode {
    user-select: none;
}

.inventory-slot {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.inventory-slot * {
    pointer-events: none;
    user-select: none;
}

.simple-inventory {
    margin-top: 15px;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
}

.simple-slot {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    border: 2px solid transparent;
}

.simple-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.simple-slot.selected-scroll {
    border-color: #ffcc00;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.6);
}

.simple-slot-title {
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 6px;
}

.simple-slot-icon {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 6px;
}

.simple-slot-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.simple-slot-footer {
    font-size: 0.8em;
    color: #666;
    text-align: center;
}

.simple-slot-scroll.blessed .simple-slot-icon {
    background: #fffbcc;
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.6);
}

.simple-slot-equipment .simple-slot-icon {
    background: linear-gradient(135deg, #f5f5f5, #e0f7fa);
}

.simple-equipment-preview span {
    font-size: 28px;
}

.simple-equipment-preview-level {
    margin-top: 4px;
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
}

.upgrade-info {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.upgrade-info p {
    margin: 8px 0;
    color: #666;
    font-size: 0.95em;
}

.upgrade-info strong {
    color: #333;
}

#selectedScrollInfo {
    color: #333;
}

/* Анимация улучшения */
@keyframes upgradeAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    100% {
        transform: scale(1);
    }
}

.upgrading {
    animation: upgradeAnimation 0.6s ease;
}

/* Скроллбар */
.history-list::-webkit-scrollbar {
    width: 8px;
}

.history-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.history-list::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.history-list::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* Скроллбар для списка лавки */
.shop-list::-webkit-scrollbar {
    width: 6px;
}

.shop-list::-webkit-scrollbar-track {
    background: #eef1ff;
    border-radius: 10px;
}

.shop-list::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.shop-list::-webkit-scrollbar-thumb:hover {
    background: #764ba2;
}

/* Модальное окно входа / выбора персонажа */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    background-color: #0a0810;
    background-image: url('images/ui/auth-menu-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.login-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(8, 6, 14, 0.55) 0%,
        rgba(8, 6, 14, 0.72) 50%,
        rgba(8, 6, 14, 0.82) 100%
    );
    pointer-events: none;
}

.login-content {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.97);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
    max-width: 400px;
    width: 90%;
    text-align: center;
    backdrop-filter: blur(4px);
}

/* REGRESSION: v996 — landscape: кнопки «Войти»/«Создать» не должны уезжать за край. */
@media (max-width: 1100px) and (orientation: landscape),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
    .login-modal {
        align-items: center;
        justify-content: center;
        padding: max(4px, env(safe-area-inset-top, 0px)) 8px max(4px, env(safe-area-inset-bottom, 0px));
        overflow: hidden;
        box-sizing: border-box;
    }
    .login-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
        margin: 0;
        padding: 10px 12px;
        max-width: min(640px, 96vw);
        width: 96%;
        max-height: calc(100svh - 10px);
        max-height: calc(100dvh - 10px);
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
        box-sizing: border-box;
    }
    .login-content h2 {
        grid-column: 1 / -1;
        font-size: 1.05em;
        margin: 0;
        line-height: 1.15;
    }
    /* Длинный текст съедал высоту — кнопки уезжали вниз. */
    .login-content > .login-subtitle {
        display: none !important;
    }
    .login-hint {
        display: none !important;
    }
    .login-content > input#usernameInput,
    .login-content > input#userPasswordInput,
    .login-content > input#createCharNickInput {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        font-size: 0.9em !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    .login-content > input#usernameInput {
        grid-column: 1;
    }
    .login-content > input#userPasswordInput {
        grid-column: 2;
    }
    .login-content > input#createCharNickInput {
        grid-column: 1 / -1;
    }
    .login-remember {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 0.8em;
        gap: 6px;
        justify-content: flex-start;
    }
    #adminPasswordContainer {
        grid-column: 1 / -1;
        margin: 0 !important;
    }
    #adminPasswordContainer input {
        margin: 0 !important;
        padding: 8px 10px !important;
        font-size: 0.9em !important;
    }
    .login-buttons {
        grid-column: 1 / -1;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        flex-shrink: 0;
    }
    .login-btn {
        flex: 1 1 0;
        min-height: 36px;
        padding: 8px 10px;
        font-size: 0.88em;
        border-radius: 8px;
        white-space: nowrap;
    }
    .login-error {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 0.78em;
        min-height: 0;
    }
    .create-char-content,
    .character-picker-content {
        max-width: min(680px, 96vw);
        grid-template-columns: 1fr;
    }
    .create-char-classes {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0;
        justify-content: center;
        max-height: 72px;
        overflow-y: auto;
    }
    .create-char-option {
        padding: 4px 7px;
        font-size: 0.75em;
    }
    .character-picker-list {
        grid-column: 1 / -1;
        max-height: min(42svh, 42vh, 160px);
        gap: 4px;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .character-picker-row {
        padding: 6px 8px;
        gap: 6px;
        border-radius: 8px;
        font-size: 0.85em;
    }
}

.login-content h2 {
    color: #667eea;
    margin-bottom: 10px;
    font-size: 2em;
}

.login-subtitle {
    color: #666;
    margin-bottom: 25px;
    font-size: 0.95em;
}

.login-content input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 1em;
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

.login-content input:focus {
    outline: none;
    border-color: #667eea;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 4px;
    color: #d8ccb0;
    font-size: 0.92em;
    cursor: pointer;
    user-select: none;
}

.login-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #8b7355;
}

.login-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.login-btn {
    flex: 1;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.login-btn:active {
    transform: translateY(0);
}

.register-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.create-char-content {
    max-width: 440px;
}

.create-char-classes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 0 16px;
}

.create-char-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92em;
    color: #333;
    background: #fafafa;
    user-select: none;
}

.create-char-option:has(input:checked) {
    border-color: #667eea;
    background: #eef1ff;
}

.create-char-option input {
    margin: 0;
    width: auto;
}

.character-picker-content {
    max-width: 480px;
}

.character-picker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 4px;
    max-height: min(62vh, 420px);
    overflow-y: auto;
}

.character-picker-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #333;
    transition: border-color 0.15s, background 0.15s;
}

.character-picker-row:hover {
    border-color: #667eea;
    background: #eef1ff;
}

.character-picker-row.is-empty {
    border-style: dashed;
    opacity: 0.92;
}

.character-picker-class {
    font-weight: 700;
}

.character-picker-nick {
    color: #444;
}

.character-picker-lvl {
    font-size: 0.9em;
    color: #666;
    white-space: nowrap;
}

.active-character-summary {
    margin-left: 8px;
    font-size: 0.92em;
    color: #555;
    white-space: nowrap;
}

.user-panel #menuBtn {
    margin-left: 4px;
}

.login-error {
    color: #dc3545;
    font-size: 0.9em;
    min-height: 20px;
    margin-top: 10px;
}

/* Панель пользователя */
.user-panel {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 15px 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    border: 2px solid rgba(102, 126, 234, 0.3);
}

.user-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.user-panel-class-label {
    font-size: 0.95em;
    color: #555;
    font-weight: 600;
}

.user-panel .class-selector--compact {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
}

.user-panel .class-selector--compact::-webkit-scrollbar {
    display: none;
}

.user-panel .class-selector--compact .class-option {
    padding: 4px 10px;
    font-size: 0.85em;
}

.user-name {
    color: #333;
    font-size: 1.1em;
}

.user-name strong {
    color: #667eea;
}

.logout-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

.logout-btn:active {
    transform: translateY(0);
}

/* Значок администратора */
.admin-badge {
    color: #ffd700;
    font-size: 0.9em;
    margin-left: 8px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Надпись уровня игрока */
.player-level-display {
    margin-left: 10px;
    font-size: 1.05em;
    font-weight: 700;
    color: #1b5e20;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.player-silver-display {
    margin-left: 12px;
    font-size: 1.05em;
    font-weight: 700;
    color: #546e7a;
    letter-spacing: 0.02em;
}

/* Уровень и Серебро убираем из пользовательской шапки */
.user-panel .player-level-display,
.user-panel .player-silver-display {
    display: none !important;
}

/* Кнопка управления бэкапами */
.backup-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-right: 10px;
}

.backup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

.backup-btn:active {
    transform: translateY(0);
}

/* Стили для кнопки синхронизации удалены - синхронизация теперь полностью автоматическая */

/* Модальное окно бэкапов */
.backup-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.backup-modal-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.98) 100%);
    margin: 50px auto;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.backup-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0 0;
}

.backup-modal-header h2 {
    margin: 0;
    font-size: 1.5em;
}

.backup-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.backup-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.backup-modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.backup-actions {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.backup-action-btn {
    padding: 12px 25px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.backup-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
}

.backup-action-btn:active {
    transform: translateY(0);
}

.backup-list-container h3 {
    margin-bottom: 15px;
    color: #667eea;
}

.backup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.backup-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s, transform 0.2s;
}

.backup-item:hover {
    border-color: #667eea;
    transform: translateX(5px);
}

.backup-item-info {
    flex: 1;
}

.backup-item-date {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.backup-item-id {
    font-size: 0.85em;
    color: #666;
}

.backup-item-actions {
    display: flex;
    gap: 10px;
}

.backup-restore-btn {
    padding: 8px 20px;
    background: linear-gradient(135deg, #ffb347 0%, #ff8c42 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.backup-restore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(255, 179, 71, 0.4);
}

.backup-restore-btn:active {
    transform: translateY(0);
}

.backup-loading {
    text-align: center;
    padding: 30px;
    color: #666;
}

.backup-empty {
    text-align: center;
    padding: 30px;
    color: #999;
    font-style: italic;
}

/* Панель онлайна и чата */
.online-panel {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.online-chat-container {
    display: flex;
    gap: 20px;
    flex-direction: row;
}

.online-users-section {
    flex: 0 0 250px;
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-height: 500px;
    display: flex;
    flex-direction: column;
}

.online-users-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #667eea;
}

.online-users-header h3 {
    color: #667eea;
    font-size: 1.1em;
    margin: 0;
}

.online-users-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.online-user-item {
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease;
}

.online-user-item:hover {
    background: #e9ecef;
}

.online-user-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #28a745;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

.online-user-device {
    flex-shrink: 0;
    font-size: 1em;
    line-height: 1;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.online-user-name {
    flex: 1;
    font-size: 0.9em;
    color: #333;
    font-weight: 500;
}

.online-user-admin {
    color: #ffd700;
    font-size: 0.85em;
}

.global-chat-section {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 500px;
}

.global-chat-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #667eea;
}

.global-chat-header h3 {
    color: #667eea;
    font-size: 1.1em;
    margin: 0;
}

.global-chat-pinned {
    padding: 8px 12px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
    border-radius: 8px;
    border-left: 4px solid #667eea;
    font-size: 0.9em;
    color: #333;
    flex-shrink: 0;
}

.global-chat-pinned a {
    color: #3949ab;
    font-weight: 600;
    text-decoration: none;
}

.global-chat-pinned a:hover {
    text-decoration: underline;
}

.global-chat-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
}

.global-chat-tab {
    padding: 8px 16px;
    border: none;
    background: #f0f0f0;
    color: #666;
    font-size: 0.95em;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    margin-bottom: -2px;
}

.global-chat-tab:hover {
    background: #e8e8e8;
    color: #333;
}

.global-chat-tab.global-chat-tab--active {
    background: #667eea;
    color: #fff;
    border-bottom: 2px solid #667eea;
}

.global-chat-tab-content {
    min-height: 120px;
}

.global-chat-ranking-list {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 6px;
}

.global-chat-ranking-empty {
    padding: 16px;
    text-align: center;
    color: #666;
    font-size: 0.95em;
}

.global-chat-ranking-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.global-chat-ranking-item.rank-1 { border-left-color: #ffd700; }
.global-chat-ranking-item.rank-2 { border-left-color: #c0c0c0; }
.global-chat-ranking-item.rank-3 { border-left-color: #cd7f32; }

.global-chat-ranking-item .rank-num {
    font-weight: 700;
    color: #667eea;
    min-width: 24px;
}

.global-chat-ranking-item .rank-username {
    flex: 1;
    margin: 0 10px;
    font-weight: 600;
}

.global-chat-ranking-item .rank-level {
    font-size: 0.95em;
    color: #1b5e20;
    font-weight: 600;
}

.global-chat-ranking-refresh {
    padding: 8px 16px;
    background: #667eea;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
}

.global-chat-ranking-refresh:hover {
    background: #5a6fd6;
}

.global-chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
    padding-right: 5px;
    min-height: 200px;
}

.global-chat-message {
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fadeIn 0.3s ease;
}

.global-chat-message.own-message {
    background: #e3f2fd;
    align-self: flex-end;
    max-width: 80%;
}

.global-chat-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
}

.global-chat-message-author {
    font-weight: 600;
    color: #667eea;
}

.global-chat-message-author.admin {
    color: #ffd700;
}

.global-chat-message-time {
    color: #999;
    font-size: 0.8em;
}

.global-chat-message-text {
    color: #333;
    font-size: 0.9em;
    word-wrap: break-word;
}

.global-chat-input-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.global-chat-input {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9em;
    transition: border-color 0.2s ease;
}

.global-chat-input:focus {
    outline: none;
    border-color: #667eea;
}

.global-chat-send-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.global-chat-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.global-chat-send-btn:active {
    transform: translateY(0);
}

.global-chat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .online-chat-container {
        flex-direction: column;
    }
    
    .online-users-section {
        flex: 0 0 auto;
        max-height: 200px;
    }
    
    .global-chat-section {
        max-height: 400px;
    }
    
    .global-chat-messages {
        min-height: 150px;
    }
}

@media (max-width: 480px) {
    .online-panel {
        padding: 12px;
    }
    
    .online-users-section,
    .global-chat-section {
        padding: 12px;
    }
    
    .online-users-header h3,
    .global-chat-header h3 {
        font-size: 1em;
    }
    
    .online-user-item {
        padding: 6px 10px;
    }
    
    .global-chat-message {
        padding: 6px 10px;
    }
    
    .global-chat-input {
        padding: 8px 12px;
        font-size: 0.85em;
    }
    
    .global-chat-send-btn {
        padding: 8px 15px;
        font-size: 0.85em;
    }
}

/* Стили для админ-панели: выпадающий список предложений экипировки */
#adminEquipmentSuggestions {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    max-height: 200px;
    overflow-y: auto;
}

.equipment-suggestion-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.equipment-suggestion-item:hover {
    background: #f0f0f0;
}

.equipment-suggestion-item:last-child {
    border-bottom: none;
}

/* Стили для сообщений в админ-панели */
#adminPanelMessage {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    display: none;
}

/* Стили для вкладок админ-панели */
.admin-tab-btn {
    transition: all 0.3s ease;
    opacity: 0.7;
}

.admin-tab-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.admin-tab-btn--active {
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.admin-tab-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Admin: Статы экипировки — sticky заголовки + фиксированная кнопка сохранения */
.admin-stats-panel {
    display: flex;
    flex-direction: column;
    max-height: 75vh;
    min-height: 0;
    padding-right: 6px;
}

.admin-stats-intro,
.admin-stats-kind-tabs,
.admin-stats-filters {
    flex: 0 0 auto;
}

.admin-stats-kind-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.admin-stats-kind-tab {
    border: 1px solid #c5c9d1;
    background: #fff;
    color: #333;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1.2;
}

.admin-stats-kind-tab:hover {
    border-color: #90a4ae;
    background: #f4f7f8;
}

.admin-stats-kind-tab.is-on {
    background: #455A64;
    color: #fff;
    border-color: #455A64;
}

.admin-stats-kind-count {
    opacity: 0.75;
    font-weight: normal;
    font-size: 0.85em;
}

.admin-stats-body {
    display: flex;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
}

.admin-stats-item-list {
    flex: 0 0 280px;
    max-width: 40%;
    min-height: 0;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f7f8fa;
    padding: 6px;
}

.admin-stats-list-empty {
    margin: 16px 8px;
    color: #777;
    font-size: 0.9em;
    text-align: center;
}

.admin-stats-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    margin: 0 0 4px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.admin-stats-item:hover {
    border-color: #c5d0da;
    background: #f0f5f9;
}

.admin-stats-item.is-active {
    border-color: #5b8fb8;
    background: #e8f2fa;
    box-shadow: inset 3px 0 0 #3d7ea6;
}

.admin-stats-item-name {
    font-weight: 600;
    font-size: 0.9em;
    line-height: 1.25;
}

.admin-stats-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78em;
}

.admin-stats-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.admin-stats-item.status-empty .admin-stats-badge {
    background: #fde8e8;
    color: #a33;
}

.admin-stats-item.status-partial .admin-stats-badge {
    background: #fff3cd;
    color: #856404;
}

.admin-stats-item.status-done .admin-stats-badge {
    background: #d4edda;
    color: #155724;
}

.admin-stats-item.status-pending .admin-stats-badge {
    background: #e8eaf6;
    color: #3949ab;
}

.admin-stats-progress {
    color: #666;
    font-variant-numeric: tabular-nums;
}

.admin-stats-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.admin-stats-chip {
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.82em;
    cursor: pointer;
    color: #444;
}

.admin-stats-chip.is-on {
    border-color: #3d7ea6;
    background: #e8f2fa;
    color: #1f4e6b;
    font-weight: 600;
}

.admin-stats-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0;
    background: #fafafa;
}

.admin-stats-editor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.admin-stats-editor-key {
    font-family: monospace;
    font-size: 0.8em;
    color: #777;
}

.admin-stats-next-empty {
    margin-left: auto;
    border: 1px solid #3d7ea6;
    background: #fff;
    color: #1f4e6b;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.85em;
}

.admin-stats-next-empty:hover {
    background: #e8f2fa;
}

.admin-stats-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.admin-stats-filter-label {
    font-weight: 600;
    color: #444;
}

.admin-stats-search {
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95em;
}

.admin-stats-filter-hint {
    font-size: 0.85em;
    color: #777;
}

@media (max-width: 900px) {
    .admin-stats-body {
        flex-direction: column;
    }
    .admin-stats-item-list {
        flex: 0 0 auto;
        max-width: none;
        max-height: 220px;
    }
}

.admin-stats-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9em;
}

.admin-stats-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e8eef2;
    border: 1px solid #ddd;
    padding: 6px;
    box-shadow: 0 1px 0 #ccc;
}

.admin-stats-th-shared {
    opacity: 0.7;
    font-weight: normal;
}

.admin-stats-th-level-range {
    opacity: 0.75;
    font-weight: normal;
    white-space: nowrap;
}

.admin-stats-table td {
    border: 1px solid #ddd;
    padding: 4px 6px;
    background: #fafafa;
    vertical-align: middle;
}

.admin-stats-table td.admin-stats-name-cell {
    font-weight: 600;
    vertical-align: top;
    background: #f5f7f9;
}

.admin-stats-table td.admin-stats-key-cell {
    font-family: monospace;
    font-size: 0.8em;
    vertical-align: top;
    background: #f5f7f9;
}

.admin-stats-table td.admin-stats-level-cell {
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.admin-stats-table td.admin-stats-shared-cell {
    vertical-align: middle;
    background: #eef5fa;
}

.admin-stats-table input {
    width: 100%;
    box-sizing: border-box;
    padding: 3px;
    font-size: 0.85em;
}

.admin-stats-table input.admin-stats-shared-input {
    background: #f3f8fc;
    border: 1px solid #b8c9d9;
}

.admin-stats-save-bar {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 8px;
    padding: 10px 0 4px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
}

.admin-stats-save-bar:empty {
    display: none;
    margin: 0;
    padding: 0;
    border: none;
}

.admin-stats-save-bar .backup-action-btn,
.admin-stats-save-bar #adminStatsSaveBtn {
    margin-top: 0;
    padding: 10px 16px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
}


.auction-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.auction-lot-timer {
    margin-top: 4px;
    font-size: 0.78em;
    color: #ef6c00;
    font-weight: 600;
}

/* Desktop: ник/цена в desc; meta-колонка только для landscape-аукциона */
.auction-lot-meta {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 140px;
    max-width: 42%;
    text-align: right;
    padding: 0 8px;
}
.auction-lot-seller {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auction-lot-price {
    font-size: 12px;
    font-weight: 700;
    color: #0f766e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auction-lot--mine {
    border-color: rgba(239, 108, 0, 0.35);
}

.auction-lot--blessed .shop-item-icon.is-blessed,
.shop-item-icon.is-blessed {
    /* как inventory-slot.blessed-slot — только жёлтая заливка */
    background: #ff0 !important;
    background-image: none !important;
    position: relative;
}

.auction-lot--blessed .shop-item-icon.is-blessed img,
.shop-item-icon.is-blessed img {
    mix-blend-mode: multiply;
    position: relative;
    z-index: 1;
}

.auction-pick-item.is-blessed {
    background: #ff0 !important;
    background-image: none !important;
}

.auction-pick-item.is-blessed img {
    mix-blend-mode: multiply;
}

.auction-list-btn {
    background: linear-gradient(135deg, #4CAF50 0%, #2e7d32 100%);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.auction-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200120;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auction-confirm-box {
    background: #fff;
    border-radius: 12px;
    padding: 18px 16px 14px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.auction-confirm-text {
    font-size: 1rem;
    line-height: 1.4;
    color: #333;
    margin-bottom: 14px;
}
.auction-confirm-actions {
    display: flex;
    gap: 10px;
}
.auction-confirm-actions .shop-buy-btn {
    flex: 1;
    min-height: 44px;
    touch-action: manipulation;
}
.shop-buy-btn.auction-action-btn {
    touch-action: manipulation;
    min-height: 44px;
}

.auction-empty {
    padding: 18px 12px;
    color: #666;
    text-align: center;
}

.shop-buy-btn--cancel {
    background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.auction-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.auction-list-pick-col,
.auction-list-side-col {
    min-width: 0;
}
.auction-list-pick-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.auction-list-side-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}
.auction-list-side-actions {
    margin-top: auto;
}

.auction-pick-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.auction-pick-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.auction-pick-item.is-selected {
    border-color: #4CAF50;
    background: #e8f5e9;
}

.auction-modal-label {
    font-weight: 600;
    margin: 8px 0 6px;
}

.auction-want-suggestions {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    position: absolute;
    z-index: 20;
    width: 100%;
    left: 0;
    top: 42px;
}

.auction-suggest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.auction-suggest-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.auction-suggest-icon--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.auction-suggest-row:hover {
    background: #f0f0f0;
}

.admin-manage-filters {
    margin-bottom: 10px;
}

.admin-manage-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 4px;
}

.admin-manage-catalog-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.admin-manage-catalog-item.is-selected {
    border-color: #E91E63;
    background: #fce4ec;
}

.admin-manage-catalog-item img,
.admin-manage-catalog-ph {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.admin-manage-catalog-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-manage-catalog-meta small {
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stats-empty {
    text-align: center;
    color: #555;
    padding: 28px 16px;
}
.admin-stats-empty-sub,
.admin-stats-cap-note {
    font-size: 0.9em;
    color: #777;
    margin-top: 8px;
}
.admin-stats-cap-note {
    text-align: center;
    padding: 8px;
}

/* Админ: окно персонажа (просмотр инвентаря) */
.admin-char-panel {
    background: linear-gradient(180deg, #3a4658 0%, #2a3340 100%);
    border: 2px solid #1a2030;
    border-radius: 10px;
    padding: 14px;
    color: #e8eef6;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.admin-char-top {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.admin-char-stats {
    flex: 1 1 200px;
    min-width: 180px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 14px;
}
.admin-char-stats .acs-nick {
    font-size: 1.15em;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
}
.admin-char-stats .acs-guild {
    font-size: 0.85em;
    color: #9eb0c8;
    margin-bottom: 10px;
    min-height: 1.2em;
}
.admin-char-stats .acs-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
    font-size: 0.92em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-char-stats .acs-row span:last-child {
    font-weight: 700;
    color: #ffe08a;
}
.admin-char-paperdoll {
    flex: 1 1 260px;
    display: grid;
    grid-template-columns: repeat(3, 64px);
    gap: 8px;
    justify-content: center;
    align-content: start;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}
.admin-char-slot {
    width: 64px;
    height: 64px;
    background: rgba(20,28,40,0.9);
    border: 1px solid #5a6a80;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.admin-char-slot.is-empty {
    opacity: 0.55;
}
.admin-char-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.admin-char-slot .acs-slot-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 0.58em;
    text-align: center;
    background: rgba(0,0,0,0.65);
    color: #bcd;
    padding: 1px 2px;
    pointer-events: none;
}
.admin-char-slot .acs-plus {
    position: absolute;
    right: 2px;
    bottom: 12px;
    font-size: 0.72em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 1px 2px #000;
    pointer-events: none;
}
.admin-char-bag-wrap {
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px;
}
.admin-char-bag-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.admin-char-bag-tab {
    background: #4a5d78;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px 4px 0 0;
    font-size: 0.85em;
    font-weight: 700;
}
.admin-char-bag-tab.is-active {
    background: #6b82a3;
}
.admin-char-bag-meta {
    margin-left: auto;
    font-size: 0.85em;
    color: #9eb0c8;
}
.admin-char-bag {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}
.admin-char-bag-slot {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(20,28,40,0.95);
    border: 1px solid #556780;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.admin-char-bag-slot.is-empty {
    opacity: 0.35;
}
.admin-char-bag-slot.is-equipped {
    box-shadow: inset 0 0 0 2px #3ddc84;
}
.admin-char-bag-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.admin-char-bag-slot .acs-check {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    font-weight: 800;
}
.admin-char-bag-slot .acs-plus {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 0.72em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 1px 2px #000;
}
.admin-char-bag-slot .acs-qty {
    position: absolute;
    left: 2px;
    bottom: 2px;
    font-size: 0.68em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2px #000;
}
.admin-char-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9em;
    color: #d7e2ef;
}
.admin-char-footer strong {
    color: #ffe08a;
}

/* Просмотр инвентаря: тот же UI, что в игре */
.admin-view-game-inventory-host {
    max-width: 560px;
    margin: 0 auto 20px;
}
.admin-view-game-inventory-host .image-inventory-wrapper {
    width: 100%;
    max-width: 100%;
}
.admin-view-game-inventory-host.is-readonly .image-inventory-overlay,
.admin-view-game-inventory-host.is-readonly .trash-area,
.admin-view-game-inventory-host.is-readonly .inventory-sort-hit,
.admin-view-game-inventory-host.is-readonly .q-button-area {
    pointer-events: none;
}
.admin-view-game-inventory-host.is-readonly .inventory-tab-hit {
    pointer-events: auto;
}
.admin-view-game-inventory-host.is-readonly .image-inventory-grid {
    pointer-events: auto;
    overflow-y: auto;
}
.admin-view-game-inventory-host.is-readonly .inventory-cell,
.admin-view-game-inventory-host.is-readonly .equipment-slot {
    pointer-events: none;
}

/* Оверлей инвентаря на странице локаций (Tab) — поверх боя, перетаскивается */
.loc-inventory-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: block;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    pointer-events: none;
}
.loc-inventory-overlay[hidden] {
    display: none !important;
}
.loc-inventory-overlay__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: default;
    pointer-events: none;
}
.loc-inventory-overlay__frame {
    position: fixed;
    z-index: 1;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 auto;
    width: 400px;
    height: 598px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    display: block;
    pointer-events: auto;
}
.loc-inventory-overlay__panel {
    position: fixed;
    z-index: 1;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
}
.loc-inventory-overlay__panel.is-drag-positioned,
.loc-inventory-overlay__frame.is-drag-positioned {
    right: auto;
    transform: none;
}
.loc-inventory-overlay__panel.is-dragging,
.loc-inventory-overlay__frame.is-dragging {
    user-select: none;
    -webkit-user-select: none;
}
.loc-inventory-drag-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12%;
    min-height: 36px;
    max-height: 72px;
    z-index: 400;
    cursor: grab;
    touch-action: none;
    background: transparent;
}
.loc-inventory-overlay__panel.is-dragging .loc-inventory-drag-bar {
    cursor: grabbing;
}
body.loc-inventory-dragging {
    cursor: grabbing;
    touch-action: none;
}

/* iframe-оверлей инвентаря на локациях: только PNG-окно «Персонаж», без белых панелей */
body.inventory-overlay-mode {
    padding: 0 !important;
    background: transparent !important;
}
body.inventory-overlay-mode #mainContent,
body.inventory-overlay-mode .equipment-section,
body.inventory-overlay-mode .inventory-panel,
body.inventory-overlay-mode .inventory-view {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.inventory-overlay-mode #mainContent {
    display: block !important;
}
body.inventory-overlay-mode .equipment-section,
body.inventory-overlay-mode #equipmentSection {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
}
body.inventory-overlay-mode .equipment-section > h2,
body.inventory-overlay-mode .equipment-selector,
body.inventory-overlay-mode .equipment-card,
body.inventory-overlay-mode .inventory-panel > div:first-child {
    display: none !important;
}
body.inventory-overlay-mode .image-inventory-wrapper {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.inventory-overlay-mode .image-inventory-wrapper.is-sphere .inventory-char-overlays {
    display: none !important;
}
@media (max-width: 768px) {
    body.inventory-overlay-mode .image-inventory-wrapper {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
}