/* ============================================
   MEDIEVAL THEME — Свитки, кожа, дерево
   Чистый CSS, без изображений
   ============================================ */

/* === Базовые переопределения === */
:root {
    --parchment-light: #3d3425;
    --parchment-dark: #2a2118;
    --parchment-edge: #4a3d2e;
    --leather-dark: #231c14;
    --leather-mid: #2e2418;
    --wood-light: #3a3020;
    --wood-dark: #2a2318;
    --wood-grain: rgba(60, 48, 30, 0.3);
    --stitch-color: #6a5a40;
    --nail-color: #8a7a60;
    --ink-color: #d8ccb4;
    --ink-dim: #a89878;
    --seal-red: #8b2020;
    --parchment-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 60px rgba(0,0,0,0.2);
}

/* === GAME WINDOWS — Свиток (Scroll/Parchment) === */
.game-window {
    background:
        linear-gradient(180deg,
            #3a3025 0%,
            #342a1f 3%,
            #2e2418 15%,
            #2c2216 50%,
            #2e2418 85%,
            #342a1f 97%,
            #3a3025 100%
        );
    border: none;
    border-radius: 2px;
    box-shadow:
        0 0 0 1px #5a4a35,
        0 0 0 3px #1a1510,
        0 0 0 4px #4a3d2e,
        0 12px 48px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,230,180,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* Верхний «рулон» свитка */
.game-window::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -4px;
    right: -4px;
    height: 12px;
    background:
        linear-gradient(180deg,
            #4a3d2e 0%,
            #3a3025 40%,
            #2a2118 70%,
            rgba(0,0,0,0.4) 100%
        );
    border-radius: 6px 6px 0 0;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,230,180,0.08);
    z-index: 1;
}

/* Нижний «рулон» свитка */
.game-window::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -4px;
    right: -4px;
    height: 12px;
    background:
        linear-gradient(0deg,
            #4a3d2e 0%,
            #3a3025 40%,
            #2a2118 70%,
            rgba(0,0,0,0.4) 100%
        );
    border-radius: 0 0 6px 6px;
    box-shadow:
        0 -2px 6px rgba(0,0,0,0.5),
        inset 0 -1px 0 rgba(255,230,180,0.08);
    z-index: 1;
}

/* Заголовок окна — деревянная планка */
.gw-header {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(80, 60, 35, 0.08) 2px,
            transparent 4px
        ),
        linear-gradient(180deg, #3a3025 0%, #2e2518 50%, #282015 100%);
    border-bottom: 2px solid #4a3d2e;
    box-shadow:
        inset 0 1px 0 rgba(255,230,180,0.06),
        0 2px 4px rgba(0,0,0,0.3);
    padding: 10px 16px;
    position: relative;
}

/* Декоративные «гвозди» на заголовке */
.gw-header::before,
.gw-header::after {
    content: '●';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 6px;
    color: var(--nail-color);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.1);
}
.gw-header::before { left: 8px; }
.gw-header::after { right: 36px; }

.gw-title {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--ink-color);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.gw-close {
    color: var(--ink-dim);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}
.gw-close:hover {
    color: #c53030;
    text-shadow: 0 0 8px rgba(197,48,48,0.4);
}

.gw-body {
    background: transparent;
    color: var(--ink-color);
}

/* === INVENTORY WINDOW — Кожаная сумка === */
#inventory-window {
    background:
        linear-gradient(180deg,
            #2e2418 0%,
            #28201a 20%,
            #231c14 50%,
            #28201a 80%,
            #2e2418 100%
        );
    box-shadow:
        0 0 0 2px #5a4530,
        0 0 0 4px #1a1510,
        0 0 0 5px rgba(90,69,48,0.5),
        inset 0 0 30px rgba(0,0,0,0.3),
        0 12px 48px rgba(0,0,0,0.7);
}

#inventory-window::before,
#inventory-window::after {
    display: none; /* Убираем «рулоны» свитка — это сумка */
}

#inventory-window .gw-header {
    background:
        linear-gradient(180deg, #352a20 0%, #2a2118 100%);
    border-bottom: 3px solid #5a4530;
    box-shadow:
        inset 0 -1px 0 rgba(255,230,180,0.05),
        0 2px 6px rgba(0,0,0,0.4);
}

/* «Стежки» по бокам инвентаря */
#inventory-window .gw-body {
    position: relative;
}
#inventory-window .gw-body::before,
#inventory-window .gw-body::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background:
        repeating-linear-gradient(
            180deg,
            transparent 0px,
            transparent 6px,
            var(--stitch-color) 6px,
            var(--stitch-color) 10px
        );
    opacity: 0.3;
}
#inventory-window .gw-body::before { left: 4px; }
#inventory-window .gw-body::after { right: 4px; }

/* Слоты инвентаря — вдавленные */
.inventory-cell {
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        inset 0 -1px 0 rgba(255,230,180,0.03);
    border-color: #4a3d2e;
}
.inventory-cell:hover {
    border-color: var(--color-accent);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        0 0 8px rgba(155,44,44,0.2);
}

/* === SIDE PANELS — Деревянные доски === */
.side-panel {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(80, 60, 35, 0.06) 1px,
            transparent 3px
        ),
        linear-gradient(180deg, #302820 0%, #2a2318 50%, #282015 100%);
    border: 1px solid #4a3d2e;
    border-radius: 3px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.3),
        0 3px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,230,180,0.04);
    position: relative;
}

/* «Гвозди» по углам досок */
.side-panel::before,
.side-panel::after {
    content: '•';
    position: absolute;
    font-size: 8px;
    color: var(--nail-color);
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    z-index: 2;
    line-height: 1;
}
.side-panel::before { top: 4px; left: 5px; }
.side-panel::after { top: 4px; right: 5px; }

.side-panel-header {
    background:
        linear-gradient(180deg, rgba(60,48,30,0.2) 0%, transparent 100%);
    border-bottom: 1px solid rgba(74,61,46,0.6);
}

.side-panel-title {
    color: var(--ink-dim);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* === NAV PANEL — Указатели / Деревянные таблички === */
.nav-panel .nav-link,
.nav-panel a,
.nav-panel [onclick] {
    display: block;
    padding: 7px 12px;
    margin: 3px 0;
    background:
        linear-gradient(180deg, #352c22 0%, #2a2318 100%);
    border: 1px solid #4a3d2e;
    border-radius: 3px;
    color: var(--ink-color);
    text-decoration: none;
    text-align: center;
    font-size: 0.82em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,230,180,0.05);
    position: relative;
}

.nav-panel .nav-link:hover,
.nav-panel a:hover,
.nav-panel [onclick]:hover {
    background:
        linear-gradient(180deg, #3e3328 0%, #332a20 100%);
    border-color: var(--color-accent);
    color: var(--color-accent-bright, #e8d5b5);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.4),
        0 0 10px rgba(155,44,44,0.1),
        inset 0 1px 0 rgba(255,230,180,0.08);
}

/* === CHAT PANEL — Доска объявлений === */
.chat-panel {
    background:
        linear-gradient(180deg, #2e2518 0%, #282015 50%, #2a2218 100%);
    border: 1px solid #4a3d2e;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.2),
        0 3px 10px rgba(0,0,0,0.3),
        inset 0 0 20px rgba(0,0,0,0.15);
}

.chat-channels {
    background:
        linear-gradient(180deg, #352c22 0%, #2e2518 100%);
    border-bottom: 2px solid #4a3d2e;
}

.chat-channel {
    color: var(--ink-dim);
    border-bottom: 2px solid transparent;
    letter-spacing: 0.5px;
}
.chat-channel:hover {
    color: var(--ink-color);
    background: rgba(255,230,180,0.03);
}
.chat-channel.active {
    color: #d4a830;
    border-bottom-color: #d4a830;
    background: rgba(212,168,48,0.06);
}

.chat-input-container {
    background:
        linear-gradient(0deg, #2a2218 0%, #2e2518 100%);
    border-top: 2px solid #4a3d2e;
}

#chat-input {
    background: #1e1a14;
    border-color: #3a3025;
}
#chat-input:focus {
    border-color: #6a5a40;
    box-shadow: 0 0 8px rgba(106,90,64,0.2);
}

/* === PLAYERS PANEL — Пергамент со списком === */
.players-panel {
    background:
        linear-gradient(180deg, #302820 0%, #2a2318 100%);
    border: 1px solid #4a3d2e;
    box-shadow:
        0 3px 10px rgba(0,0,0,0.3),
        inset 0 0 15px rgba(0,0,0,0.1);
}

.players-panel-header {
    background:
        linear-gradient(180deg, rgba(60,48,30,0.2) 0%, transparent 100%);
    border-bottom: 1px solid #4a3d2e;
}

.catalog-player:hover {
    background: rgba(212,168,48,0.08);
}

/* === STATS PANEL / EQUIPMENT === */
.stats-panel-compact,
.equipment-panel-compact,
.effects-panel {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(80, 60, 35, 0.05) 1px,
            transparent 3px
        ),
        linear-gradient(180deg, #302820 0%, #282015 100%);
    border: 1px solid #4a3d2e;
    border-radius: 3px;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,230,180,0.03);
}

/* === CHARACTER TOP BANNER (в окне Героя) === */
.char-top-banner {
    background:
        linear-gradient(180deg,
            rgba(60,48,30,0.15) 0%,
            transparent 100%
        );
    border-bottom: 1px solid rgba(74,61,46,0.5);
}

/* === ATTACKS WINDOW — Свиток боевых приёмов === */
.equipped-attacks-panel {
    background: rgba(0,0,0,0.2);
    border: 1px solid #4a3d2e;
    border-radius: 4px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

.equipped-slot {
    background: var(--parchment-dark);
    border: 2px dashed rgba(106,90,64,0.3);
}
.equipped-slot:hover {
    border-color: var(--seal-red);
    border-style: solid;
}
.equipped-slot.filled {
    border-style: solid;
    border-color: var(--seal-red);
    background: rgba(139,32,32,0.1);
    box-shadow: inset 0 0 10px rgba(139,32,32,0.1);
}

/* Attack cells — пергаментные карточки */
.attack-cell {
    background:
        linear-gradient(180deg, #332a20 0%, #2a2318 100%);
    border: 1px solid #4a3d2e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.attack-cell:hover {
    border-color: var(--seal-red);
    background:
        linear-gradient(180deg, #3a3025 0%, #302820 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 6px rgba(139,32,32,0.1);
}

/* === QUEST CELLS === */
.quest-cell {
    background:
        linear-gradient(180deg, #302820 0%, #282015 100%);
    border: 1px solid #4a3d2e;
    box-shadow: inset 0 1px 0 rgba(255,230,180,0.03);
}

/* === HEADER — Верхняя панель === */
.game-header {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(80, 60, 35, 0.06) 2px,
            transparent 4px
        ),
        linear-gradient(180deg, #2e2518 0%, #262015 100%);
    border-bottom: 2px solid #4a3d2e;
    box-shadow:
        0 3px 12px rgba(0,0,0,0.5),
        inset 0 -1px 0 rgba(255,230,180,0.03);
}

/* Header tabs (Герой, Инвентарь, Атаки) */
.header-tab {
    transition: all 0.2s ease;
    border-radius: 3px;
    position: relative;
}
.header-tab:hover {
    background: rgba(255,230,180,0.05);
}
.header-tab.active,
.header-tab[aria-expanded="true"] {
    background: rgba(139,32,32,0.15);
    box-shadow: inset 0 -2px 0 var(--seal-red);
}

/* === MODAL OVERRIDES === */
.modal-content {
    background:
        linear-gradient(180deg,
            #3a3025 0%,
            #2e2418 15%,
            #2c2216 50%,
            #2e2418 85%,
            #3a3025 100%
        );
    border: 2px solid #5a4a35;
    box-shadow:
        0 0 0 1px #1a1510,
        0 12px 48px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,230,180,0.04);
    border-radius: 4px;
}

/* === LOCATION IMAGE AREA === */
.location-image,
#location-image {
    border: 2px solid #4a3d2e;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.4),
        0 3px 10px rgba(0,0,0,0.3);
    border-radius: 3px;
}

/* Location title */
#location-title,
.location-title {
    color: var(--ink-color);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* === TOOLTIPS — Печать на пергаменте === */
.attack-tooltip,
.quest-tooltip {
    background:
        linear-gradient(135deg, #352c22 0%, #2a2218 100%);
    border: 1px solid #5a4a35;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.3),
        0 8px 24px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,230,180,0.04);
    border-radius: 4px;
}

/* === NPC INTERACTION WINDOW === */
.npc-dialogue-overlay .npc-dialogue-window,
.npc-trade-window,
.npc-heal-window {
    background:
        linear-gradient(180deg, #352c22 0%, #2a2218 50%, #2e2518 100%);
    border: 2px solid #5a4a35;
    box-shadow:
        0 0 0 1px #1a1510,
        0 12px 48px rgba(0,0,0,0.7);
}

/* === TOAST NOTIFICATIONS === */
.toast {
    background:
        linear-gradient(135deg, #352c22 0%, #2a2218 100%);
    border: 1px solid #5a4a35;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* Admin command toast — исчезающее уведомление */
.admin-cmd-toast {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 100000;
    max-width: 400px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #1a2636 0%, #0d1b2a 100%);
    border: 1px solid #2d6da8;
    border-radius: 8px;
    color: #b0d4f1;
    font-size: 13px;
    line-height: 1.5;
    font-family: 'Courier New', monospace;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 12px rgba(45,109,168,0.3);
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.3s, transform 0.3s;
    cursor: pointer;
    white-space: pre-wrap;
    word-break: break-word;
}
.admin-cmd-toast.visible {
    opacity: 1;
    transform: translateX(0);
}
.admin-cmd-toast::before {
    content: '⌘ ';
    color: #5ba3d9;
}

/* === SCROLLBARS — Тонкие, в стиле дерева === */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: #4a3d2e;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover {
    background: #5a4d3e;
}

/* === BUTTONS — Деревянные кнопки === */
.gw-body button:not(.gw-close):not(.equipped-slot):not(.attack-tab):not(.chat-channel):not(.quest-tab),
.side-panel button:not(.ach-arrow):not(.quest-arrow) {
    background:
        linear-gradient(180deg, #3a3025 0%, #2e2518 100%);
    border: 1px solid #5a4a35;
    color: var(--ink-color);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,230,180,0.06);
    border-radius: 3px;
    transition: all 0.2s ease;
}

.gw-body button:not(.gw-close):not(.equipped-slot):not(.attack-tab):not(.chat-channel):not(.quest-tab):hover,
.side-panel button:not(.ach-arrow):not(.quest-arrow):hover {
    background:
        linear-gradient(180deg, #443828 0%, #382e22 100%);
    border-color: #6a5a40;
    box-shadow:
        0 3px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,230,180,0.08);
}

/* PvE Toggle — красивый переключатель */
#pve-toggle {
    accent-color: var(--seal-red);
}

/* === HP/MP/EXP BARS — Вставки с рамкой === */
.hp-bar-outer,
.mp-bar-outer,
.exp-bar-outer,
[class*="bar-outer"] {
    border: 1px solid #4a3d2e;
    border-radius: 2px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    background: rgba(0,0,0,0.3);
}

/* === COMBAT PANEL === */
#combat {
    border: 2px solid #4a3d2e;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.3),
        0 4px 20px rgba(0,0,0,0.4),
        inset 0 0 30px rgba(0,0,0,0.15);
}

/* === ACHIEVEMENT POPUP — Сургучная печать === */
.achievement-popup {
    background:
        linear-gradient(135deg, #352c22 0%, #2a2218 100%);
    border: 1px solid #5a4a35;
    border-left: 4px solid var(--seal-red);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* === INTRO MODAL (for consistency) === */
.intro-overlay .intro-modal {
    background:
        linear-gradient(180deg,
            #3a3025 0%,
            #2e2418 15%,
            #2c2216 50%,
            #2e2418 85%,
            #3a3025 100%
        );
    border: 2px solid #5a4a35;
    box-shadow:
        0 0 0 1px #1a1510,
        0 12px 48px rgba(0,0,0,0.7);
}

/* === HEADER DROPDOWNS (Quests, etc.) === */
.header-dropdown-inner {
    background:
        linear-gradient(180deg, #332a20 0%, #2a2218 100%);
    border: 1px solid #5a4a35;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.3),
        0 8px 32px rgba(0,0,0,0.6);
}

/* === CHAR TABS (inside Hero window) === */
.char-tabs .char-tab,
.char-tab {
    color: var(--ink-dim);
    border-bottom: 2px solid transparent;
}
.char-tabs .char-tab:hover,
.char-tab:hover {
    color: var(--ink-color);
    background: rgba(255,230,180,0.03);
}
.char-tabs .char-tab.active,
.char-tab.active {
    color: #d4a830;
    border-bottom-color: #d4a830;
    background: rgba(212,168,48,0.06);
}

/* === STAT ALLOCATION BUTTONS === */
.stat-plus-btn {
    background: linear-gradient(180deg, #4a3d2e 0%, #3a3025 100%) !important;
    border: 1px solid #5a4a35 !important;
    color: #d4a830 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
.stat-plus-btn:hover {
    background: linear-gradient(180deg, #5a4d3e 0%, #4a3d2e 100%) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(212,168,48,0.2) !important;
}

/* === Wear / aging effects on edges === */
.game-window .gw-body {
    position: relative;
}
.game-window .gw-body::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 4px 0 15px -8px rgba(0,0,0,0.3),
        inset -4px 0 15px -8px rgba(0,0,0,0.3),
        inset 0 4px 15px -8px rgba(0,0,0,0.2),
        inset 0 -4px 15px -8px rgba(0,0,0,0.2);
    z-index: 0;
}

/* === BATTLE ATTACKS (in combat) === */
.battle-attacks .battle-attack-btn {
    background: linear-gradient(180deg, #3a3025 0%, #2e2518 100%);
    border: 1px solid #4a3d2e;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}
.battle-attacks .battle-attack-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #443828 0%, #382e22 100%);
    border-color: var(--seal-red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 6px rgba(139,32,32,0.15);
}
.battle-attacks .battle-attack-btn:disabled {
    opacity: 0.4;
    filter: grayscale(30%);
}

/* === SURRENDER BUTTON === */
.surrender-btn,
[class*="surrender"] {
    background: linear-gradient(180deg, #4a2020 0%, #3a1818 100%) !important;
    border: 1px solid #6a3030 !important;
    color: #e0a0a0 !important;
}

/* === PLAYER PROFILE WINDOW === */
.player-profile-overlay .player-profile-content {
    background:
        linear-gradient(180deg, #352c22 0%, #2a2218 100%);
    border: 2px solid #5a4a35;
    box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}

/* === TRADE WINDOW === */
#trade-window {
    background:
        linear-gradient(180deg, #352c22 0%, #2a2218 100%);
    border: 2px solid #5a4a35;
    box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}

/* === SELECTION/FOCUS states === */
::selection {
    background: rgba(139,32,32,0.4);
    color: #fff;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #6a5a40 !important;
    box-shadow: 0 0 0 2px rgba(106,90,64,0.2);
}

/* === LOOT POPUP === */
.loot-popup,
.battle-loot-popup {
    background:
        linear-gradient(180deg, #352c22 0%, #2a2218 100%);
    border: 2px solid #5a4a35;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

/* === Warm ambient glow on main container === */
.game-body {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(80,60,30,0.06) 0%, transparent 60%),
        #1e1a14;
}