:root {
            --bg-color: #121212;
            --panel-bg: #1e1e1e;
            --text-color: #e0e0e0;
            --border-color: #333;
            --group-border: #FBC02D; 
            --group-bg: rgba(251, 192, 45, 0.05);
        }
        
        * { box-sizing: border-box; -webkit-touch-callout: none; }
        
        body {
            font-family: Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
            user-select: none;
        }

        /* --- ВЕРХНЯ ПАНЕЛЬ --- */
        .top-bar {
            background: var(--panel-bg);
            padding: 10px 5px;
            display: flex;
            justify-content: space-evenly; 
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
            z-index: 100;
        }
        .top-btn {
            background: #333; color: white; border: 1px solid #555;
            padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 16px;
        }

        /* --- ГОЛОВНИЙ СКРОЛ --- */
        #main-scroll-area {
            flex-grow: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        /* --- КНОПКИ --- */
.item-btn {
    background: #252525;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px;
    position: relative;
    transition: transform 0.1s;
    overflow: hidden; /* ДОДАНО: Забороняє кнопці розтягуватися за свої межі */
}

.item-name {
    font-size: 10px; 
    text-align: center; 
    margin-top: 4px;
    line-height: 1.1; 
    width: 100%;
    pointer-events: none;
    
    /* ДОЗВОЛЯЄМО ПЕРЕНОС НА 2 РЯДКИ */
    white-space: normal; 
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Максимум 2 рядки */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.no-labels .loc-item .item-name,
body.no-labels .anim-item .item-name { 
    display: none; 
}

        /* СТАНИ */
        .item-btn.selected { border: 2px solid #fff; background-color: #0d47a1; z-index: 10; opacity: 1; }
        .item-btn.highlight { border: 2px solid #4CAF50; background-color: rgba(76, 175, 80, 0.3); opacity: 1; }
        .item-btn.dimmed { opacity: 1; filter: grayscale(100%); }

        /* --- 1. ЛОКАЦІЇ --- */
        #locations-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
        .location-item { width: calc((100% - 25px) / 6); aspect-ratio: 1 / 1; padding: 2px; }
        
        /* Вирівнювання іконок локацій */
.location-item img { 
    width: 100%;
    height: 60%; /* Жорстко фіксуємо висоту картинки */
    object-fit: contain; /* Завжди ідеально вписує картинку без спотворень */
    margin-bottom: 2px; 
}
        .location-item .item-name { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* --- ГРУПУВАННЯ (РАМКИ) --- */
        .group-frame {
            border: 1px solid var(--group-border); background: var(--group-bg);
            border-radius: 3px; padding: 2px; display: flex; flex-wrap: wrap; gap: 2px;
            position: relative; align-items: center; justify-content: center;
        }

        /* --- 2. ТВАРИНИ --- */
        #animals-container { display: flex; gap: 9px; }
        
        /* Вигляд: 7 рядків */
        #animals-container.view-grouped { flex-direction: column; }
        .class-row {
            border: 1px solid var(--border-color); border-left: 3px solid transparent;
            border-radius: 2px; padding: 3px; background: #181818;
            display: flex; flex-wrap: wrap; gap: 3px;
        }

        /* Вигляд: В один рядок */
        #animals-container.view-inline { flex-wrap: wrap; justify-content: flex-start; }
        #animals-container.view-inline .class-row { display: none; }

        .animal-item { width: 50px; height: 50px; }
        .animal-item img { max-height: 32px; }
/* На всякий випадок, переконайтесь, що текст теж компактний */
.item-name {
    font-size: 9px; /* Було 10px. 9px ідеально для 5 колонок */
    text-align: center;
    margin-top: 2px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
        /* --- 3. КАЛІБРИ --- */
        #calibers-container {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
            padding-bottom: 30px; border-top: 1px solid #333; padding-top: 20px;
        }
        .caliber-item { width: 80px; height: 50px; }
        .caliber-item img { max-height: 30px; }

        /* --- МЕДІА (ПК) --- */
        @media (min-width: 768px) {
            #main-scroll-area { padding: 20px; gap: 40px; }
            .location-item { width: 90px; height: 90px; }
            .animal-item { width: 70px; height: 70px; }
            .animal-item img { max-height: 52px; }
            .item-name { font-size: 11px; }
            .caliber-item { width: 100px; height: 60px; }
            .caliber-item img { max-height: 40px; }
        }

/* --- МОДАЛЬНІ ВІКНА --- */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 2000; flex-direction: column; }
.modal.active { display: flex; }

.modal-header { 
    display: flex; 
    justify-content: center; /* Центруємо назву */
    align-items: center; 
    padding: 15px; 
    background: #000; 
    z-index: 2001; 
    position: relative; /* Дозволяє позиціонувати кнопку "Закрити" відносно цієї шапки */
}

/* Назва по центру */
.modal-header span {
    text-align: center;
    max-width: 70%; /* Щоб дуже довга назва локації не залізла на кнопку "Закрити" */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Кнопка "Закрити" жорстко прибита до правого краю */
.modal-header .top-btn,
.modal-header .close-btn { 
    position: absolute; 
    right: 15px; 
}

.modal-content { flex-grow: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; align-items: center; }
        
        /* Зображення в модалці (Зум) */
        #info-img { 
            max-width: 100%; 
            max-height: 50vh; 
            border: 1px solid #555; 
            object-fit: contain; 
            border-radius: 4px; 
            cursor: zoom-in; 
            transition: max-width 0.2s, max-height 0.2s; 
        }
        /* Клас для збільшеної карти */
        #info-img.zoomed { 
            max-width: none; 
            max-height: none; 
            width: auto; 
            height: auto; 
            cursor: zoom-out; 
        }
/* Картинки всередині текстових описів */
.zoomable-img {
    width: 100%; /* На всю ширину тексту */
    max-height: 250px; /* Щоб не займала весь екран до кліку */
    object-fit: contain; /* Щоб зброя не обрізалася */
    background: #181818; /* Темний фон для контрасту */
    border: 1px solid #444;
    border-radius: 4px;
    cursor: zoom-in;
    margin-top: 10px;
    transition: all 0.2s ease-in-out;
}

/* Стан після кліку (Збільшено) */
.zoomable-img.custom-zoomed {
    max-width: none;
    width: auto;
    max-height: none;
    cursor: zoom-out;
}
        /* Прапорці мов */
        .lang-flag { width: 80px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: transform 0.1s; }
        .lang-flag:active { transform: scale(0.9); }
        .lang-flag.active { border-color: #FFD700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }

        /* Місії */
        .mission-box { width: 100%; max-width: 500px; background: #222; border-radius: 8px; padding: 15px; margin-top: 15px; border: 1px solid #444; }
        .mission-step { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px; }
        .mission-step input { width: 20px; height: 20px; flex-shrink: 0; }
        .mission-text { font-size: 14px; line-height: 1.4; color: #ccc; }
        .mission-text.req-weapon { color: #ff5252; }
        
        .track-btn { width: 100%; padding: 10px; background: #333; color: #FFD700; border: 1px solid #FFD700; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 15px; }
        .track-btn.active { background: #FFD700; color: #000; }
        
        .html-notes { width: 100%; max-width: 500px; margin-top: 20px; color: #aaa; line-height: 1.5; font-size: 14px; }
        .quick-link { color: #FFD700; cursor: pointer; text-decoration: underline; }
		
/* --- СВІТЛОФОР МІСІЙ --- */
.diff-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    margin-right: 8px;
    margin-top: 3px;
    flex-shrink: 0;
    border: 1px solid #555;
    transition: background-color 0.2s;
}

/* Стани світлофора */
.diff-none { background-color: #333; }
.diff-easy { background-color: #4CAF50; border-color: #2E7D32; }
.diff-med  { background-color: #FFC107; border-color: #F39C12; }
.diff-hard { background-color: #F44336; border-color: #C62828; }	
/* Кольори тексту для місій на карті (перебивають інші кольори) */
.text-diff-none { color: #ccc; }
.text-diff-easy { color: #4CAF50 !important; }
.text-diff-med  { color: #FFC107 !important; }
.text-diff-hard { color: #F44336 !important; }