/* 1. ГЛОБАЛЬНАЯ КРАСИВАЯ ПРОКРУТКА (ДЛЯ ВСЕХ БЛОКОВ) */

/* Для Chrome, Edge и Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Фон дорожки прокрутки */
::-webkit-scrollbar-track {
    background: #2d2d2d; /* Темный фон для общей панели */
}

/* Сам ползунок */
::-webkit-scrollbar-thumb {
    background-color: #555; /* Серый ползунок для темных зон */
    border-radius: 10px;
    border: 2px solid #2d2d2d;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ffeb3b; /* Желтый при наведении */
}

/* СПЕЦИАЛЬНАЯ ПРОКРУТКА ДЛЯ ПЕРГАМЕНТА (СВИТКА) */
#scroll-body {
    scrollbar-color: #8b5e34 #d9c5a3; /* Для Firefox */
}

#scroll-body::-webkit-scrollbar-track {
    background: #d9c5a3; /* Песочный фон свитка */
}

#scroll-body::-webkit-scrollbar-thumb {
    background-color: #8b5e34; /* Коричневый ползунок */
    border: 2px solid #d9c5a3;
}

/* 2. ОСНОВНЫЕ СТИЛИ */

:root {
    --grid-size: 25;
    --cell-size: 32px;
}

body {
    background: #1a1a1a;
    color: #eee;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Чтобы не было двойной прокрутки у всего окна */
}

#main-wrapper {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
}

/* ИГРОВОЕ ПОЛЕ */
#game-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1e1e1e;
    padding: 15px;
    overflow-y: auto; /* Прокрутка поля, если не влезет */
}

/* ВЕРХНЯЯ ПАНЕЛЬ */
#ui-panel {
    background: #333;
    width: 100%;
    max-width: 1150px;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #444;
    margin-bottom: 15px;
    border-radius: 8px;
    box-sizing: border-box;
}

.stats-group {
    display: flex;
    align-items: center;
    gap: 40px; 
    flex: 1;
}
.stats-group.right { justify-content: flex-end; }

#game-title {
    color: #ffeb3b;
    font-size: 1.25em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    flex: 0 0 auto;
    padding: 0 20px;
}

.stat { font-weight: bold; color: #ffeb3b; font-size: 1.1em; white-space: nowrap; }

/* СЕТКА */
#grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), var(--cell-size));
    grid-template-rows: repeat(var(--grid-size), var(--cell-size));
    gap: 1px;
    background: #444;
    border: 3px solid #000;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}
.cell:hover { filter: brightness(1.5); }

/* ЛАНДШАФТ */
.cell.revealed.grass { background: #388e3c; }
.cell.revealed.road { background: #8d6e63; }
.cell.revealed.river { background: #0288d1; }
.cell.revealed.mountain { background: #546e7a; }
.cell.revealed.forest { background: #1b5e20; }
.cell.revealed.bridge { background: #4e342e !important; border: 1px solid #fbc02d; }
.medic-cross { color: #ff0000 !important; font-weight: bold; }

/* ПРАВАЯ ПАНЕЛЬ */
#info-side {
    flex: 0 0 350px;
    background: #2d2d2d;
    border-left: 3px solid #444;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
    overflow-y: auto; /* Включаем прокрутку для всей правой панели */
}

/* СВИТОК */
#scroll-header { background: #c2a371; color: #2a1b0a; padding: 10px; cursor: pointer; font-weight: bold; text-align: center; border-radius: 5px 5px 0 0; }
#scroll-body {
    background: #e3d5b8;
    color: #332b1d;
    padding: 15px;
    overflow-y: auto;
    max-height: 40vh;
    transition: max-height 0.4s;
    border-radius: 0 0 5px 5px;
    font-size: 0.9em;
}
#scroll-body.collapsed { max-height: 0; padding: 0 15px; opacity: 0; }

/* ИНВЕНТАРЬ */
#inventory-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-btn { background: #444; color: #fff; border: 1px solid #777; padding: 8px; cursor: pointer; border-radius: 5px; font-size: 0.85em; font-weight: bold; }
.action-btn.active { background: #ffeb3b; color: #000; box-shadow: 0 0 10px #ffeb3b; }

/* ЛОГ */
#event-log {
    background: #000;
    color: #4af626;
    padding: 15px;
    flex-grow: 1;
    overflow-y: auto;
    font-family: monospace;
    font-size: 13px;
    border: 1px solid #444;
}

/* АДАПТАЦИЯ ПОД ПЛАНШЕТЫ */
@media screen and (max-width: 1250px) {
    :root { --cell-size: 26px; }
    #info-side { flex: 0 0 300px; padding: 15px; }
    .stats-group { gap: 20px; }
}

@media screen and (max-width: 950px) {
    #main-wrapper { flex-direction: column; overflow-y: auto; }
    #info-side { flex: none; width: 100%; border-left: none; border-top: 3px solid #444; height: auto; overflow: visible; }
    #game-side { flex: none; width: 100%; height: auto; }
    :root { --cell-size: 3.8vw; }
}

/* МАГАЗИН */
.hidden { display: none !important; }
#modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 2000; }
#modal-content { background: #333; padding: 25px; border: 2px solid #ffeb3b; text-align: center; border-radius: 12px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.shop-grid button { background: #444; color: #fff; border: 1px solid #c2a371; padding: 8px; cursor: pointer; }

.elite-mark {
    color: #ffeb3b !important; /* Ярко-желтый "золотой" цвет */
    font-weight: 900 !important;
    font-size: 26px !important;
    text-shadow: 2px 2px 2px #000, 0 0 10px rgba(255, 235, 59, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}