/* ИМПОРТ ТАКТИЧЕСКОГО И МЯГКОГО ШРИФТОВ */
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@500;700;800&family=Nunito:wght@400;600;700;800&display=swap');
/* ================================================== */
/* 1. БАЗОВАЯ ТЕМА: TARKOV MILITARY (ПРЕМИУМ) */
/* ================================================== */
:root, [data-theme="tarkov"] {
    --bg-base: radial-gradient(circle at top center, #17191c 0%, #0b0c0d 100%);
    --bg-panel: rgba(8, 8, 9, 0.85);
    --bg-elem: linear-gradient(180deg, #16171a 0%, #121315 100%);
    --border-def: #1c1d1f;
    --border-hlt: #3b3c36;
    --text-main: #c2c0b8;
    --text-dim: #73756b;
    --acc-gold: #9a8a66;
    --acc-red: #8b2b2b;
    --acc-green: #7d875a;
    --acc-blue: #6c809a;
    --radius-main: 4px;
    --panel-blur: blur(10px);
    --font-main: 'Jura', sans-serif;
    --shadow-main: 0 10px 30px -10px rgba(0,0,0,0.8);
    --glow-gold: 0 0 15px rgba(154, 138, 102, 0.25);
}

/* ================================================== */
/* 2. ТЕМА: DARK GLASS OS (СТИЛЬ APPLE) */
/* ================================================== */
[data-theme="glass"] {
    --bg-base: linear-gradient(135deg, #0f172a 0%, #020617 100%);
    --bg-panel: rgba(30, 41, 59, 0.45);
    --bg-elem: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    --border-def: rgba(255, 255, 255, 0.08);
    --border-hlt: rgba(255, 255, 255, 0.2);
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
    --acc-gold: #38bdf8;
    --acc-red: #f87171;
    --acc-green: #34d399;
    --acc-blue: #818cf8;
    --radius-main: 16px;
    --panel-blur: blur(24px);
    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --shadow-main: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --glow-gold: 0 0 20px rgba(56, 189, 248, 0.3);
}

/* ================================================== */
/* 3. ТЕМА: SOFT PASTEL (ПРИГЛУШЕННАЯ) */
/* ================================================== */
[data-theme="pastel"] {
    --bg-base: linear-gradient(135deg, #1e1a2b 0%, #121018 100%);
    --bg-panel: rgba(45, 38, 55, 0.6);
    --bg-elem: rgba(255, 255, 255, 0.04);
    --border-def: rgba(200, 160, 220, 0.1);
    --border-hlt: rgba(200, 160, 220, 0.3);
    --text-main: #e9e3f4;
    --text-dim: #9b8ba9;
    --acc-gold: #d8b4e2;
    --acc-red: #e5989b;
    --acc-green: #99f6e4;
    --acc-blue: #a78bfa;
    --radius-main: 24px;
    --panel-blur: blur(12px);
    --font-main: 'Nunito', sans-serif;
    --shadow-main: 0 4px 20px rgba(0, 0, 0, 0.2);
    --glow-gold: 0 0 20px rgba(216, 180, 226, 0.3);
}

/* ================================================== */
/* ГЛОБАЛЬНЫЕ НАСТРОЙКИ И АНТИАЛИАСИНГ */
/* ================================================== */

html, html[data-theme="tarkov"] { font-size: 17.5px !important; }
html[data-theme="glass"], html[data-theme="pastel"] { font-size: 16px !important; }

body {
    font-family: var(--font-main) !important;
    background: var(--bg-base) !important;
    background-attachment: fixed !important; 
    background-size: cover !important; 
    background-repeat: no-repeat !important; 
    min-height: 100vh;
    color: var(--text-main) !important;
    margin: 0;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, button, input, select { 
    font-family: var(--font-main) !important;
    text-transform: uppercase; 
}

/* Повышение резкости и читаемости микро-шрифтов */
.text-\[9px\], .text-\[10px\], .text-\[11px\], .text-xs {
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8), 0px 0px 1px rgba(0, 0, 0, 0.5) !important;
    letter-spacing: 0.08em;
}

/* ================================================== */
/* CSS-ПЕРЕХВАТЧИК: ДИНАМИЧЕСКАЯ ЗАМЕНА ЦВЕТОВ TAILWIND */
/* ================================================== */

.bg-\[\#0b0c0d\] { background: var(--bg-base) !important; }
.bg-\[\#080809\], .bg-\[\#0c0d0a\], .bg-\[\#0f0909\], .bg-\[\#1a1105\] { 
    background: var(--bg-panel) !important; 
    backdrop-filter: var(--panel-blur) !important; 
    border-radius: var(--radius-main) !important; 
}
.bg-\[\#1c1d1f\], .bg-\[\#2d2e29\], .bg-\[\#121315\], .bg-\[\#1a0f0f\], .bg-\[\#1a0f2e\], .bg-\[\#0d1b2a\] { 
    background: var(--bg-elem) !important; 
    border-radius: var(--radius-main) !important; 
}

.border-\[\#1c1d1f\], .border-\[\#4c2b5e\], .border-\[\#205b63\], .border-gray-800 { border-color: var(--border-def) !important; }
.border-\[\#2d2e29\], .border-\[\#3b3c36\], .border-\[\#92400e\] { border-color: var(--border-hlt) !important; }
.border-\[\#9a8a66\] { border-color: var(--acc-gold) !important; }
.border-\[\#4a1c1c\], .border-\[\#8b2b2b\] { border-color: var(--acc-red) !important; } 

.text-\[\#c2c0b8\], .text-white, .text-gray-300 { color: var(--text-main) !important; }
.text-\[\#73756b\], .text-gray-500, .text-gray-600 { color: var(--text-dim) !important; }
.text-\[\#9a8a66\] { color: var(--acc-gold) !important; }
.text-\[\#8b2b2b\], .text-red-500 { color: var(--acc-red) !important; }
.text-\[\#6c809a\], .text-blue-400, .text-\[\#388e99\] { color: var(--acc-blue) !important; }
.text-\[\#7d875a\], .text-emerald-400, .text-emerald-500 { color: var(--acc-green) !important; }
.text-\[\#d97706\], .text-yellow-500 { color: var(--acc-gold) !important; }

/* ================================================== */
/* КОМПОНЕНТЫ ИНТЕРФЕЙСА (ПРЕМИУМ ФИЛЬТРЫ) */
/* ================================================== */

.tactical-panel {
    background: var(--bg-panel) !important;
    backdrop-filter: var(--panel-blur) !important;
    border: 1px solid var(--border-def) !important;
    box-shadow: var(--shadow-main), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--radius-main) !important;
}

.tactical-input {
    background: var(--bg-elem) !important;
    border: 1px solid var(--border-def) !important;
    color: var(--text-main) !important;
    border-radius: calc(var(--radius-main) / 2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.tactical-input:focus { 
    border-color: var(--acc-gold) !important; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), var(--glow-gold) !important;
    outline: none; 
}

.btn-tarkov {
    background: var(--bg-elem) !important;
    border: 1px solid var(--border-def) !important;
    color: var(--acc-gold) !important;
    border-radius: calc(var(--radius-main) / 2) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.btn-tarkov:hover:not(:disabled) { 
    background: linear-gradient(180deg, rgba(154, 138, 102, 0.1) 0%, transparent 100%) !important;
    border-color: var(--acc-gold) !important;
    color: #fff !important; 
    box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
}

/* ЗАЩИТА ВКЛАДОК */
.tab-btn {
    padding: 0.75rem 1.5rem !important;
    color: var(--text-dim) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    position: relative;
}
.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; width: 0; height: 2px;
    background: var(--acc-gold);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.tab-btn:hover { color: var(--text-main) !important; }
.tab-btn.active { color: var(--acc-gold) !important; text-shadow: 0 0 10px rgba(154, 138, 102, 0.4); }
.tab-btn.active::after { width: 100%; }

/* Анимации */
.animate-fade { 
    animation: fastFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
    will-change: opacity, transform, filter;
}
@keyframes fastFadeIn { 
    from { opacity: 0; transform: translateY(6px) scale(0.99); filter: blur(2px); } 
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } 
}

/* Премиальный Скроллбар */
.custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: var(--radius-main); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border-hlt); border-radius: var(--radius-main); transition: background 0.3s; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--acc-gold); }

.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-full { border-radius: var(--radius-main) !important; }

/* ================================================== */
/* === LOADOUT BUILDER SLOTS (ЧИСТЫЙ АДАПТИВНЫЙ ДИЗАЙН) === */
/* ================================================== */
.loadout-slot, .loadout-slot-small {
    background-color: rgba(0, 0, 0, 0.2) !important; /* ФИКС: Используем только background-color */
    border: 1px solid var(--border-def) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2) !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: calc(var(--radius-main) / 2);
}

.loadout-slot { width: 64px; height: 64px; }
.loadout-slot-small { width: 48px; height: 48px; }

/* Свечение при наведении */
.loadout-slot:hover, .loadout-slot-small:hover {
    border-color: var(--acc-gold) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2), var(--glow-gold) !important;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3) !important; /* ФИКС */
}

/* Слот с надетым предметом */
.loadout-slot.has-item, .loadout-slot-small.has-item {
    border-color: var(--border-hlt) !important;
    background-color: rgba(0, 0, 0, 0.4) !important; /* ФИКС */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); 
}

/* Смягченная штриховка для заблокированных слотов */
.loadout-slot.blocked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.15) 4px,
        rgba(0, 0, 0, 0.15) 8px
    );
    pointer-events: none;
    border-radius: inherit;
}

.loadout-slot-small.locked { 
    opacity: 0.15; 
    pointer-events: none; 
    border-color: var(--acc-red) !important; 
}

/* === PROGRESSION STEPPERS === */
.progress-track {
    background-color: #050506 !important;
    border: 1px solid var(--border-def) !important;
    border-radius: calc(var(--radius-main) / 2) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    overflow: hidden;
}
.progress-fill {
    background: linear-gradient(90deg, var(--text-dim) 0%, var(--text-main) 100%) !important;
    box-shadow: 0 0 10px rgba(194, 192, 184, 0.3);
}

.prog-step {
    flex: 1;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-def);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 2px;
}
.prog-step:hover { border-color: var(--text-dim); }
.prog-step.active {
    background: linear-gradient(90deg, #205b63, #388e99);
    border-color: #388e99;
    box-shadow: 0 0 10px rgba(56, 142, 153, 0.5);
}
.prog-step.filled {
    background-color: #205b63;
    border-color: #1a4950;
}

select.tactical-input option {
    background-color: #0b0c0d !important;
    color: #c2c0b8 !important;
}

/* ================================================== */
/* ИКОНКИ-СИЛУЭТЫ ДЛЯ ПУСТЫХ СЛОТОВ ЭКИПИРОВКИ */
/* ================================================== */

/* Рисуем иконку-подсказку ПОВЕРХ слота, не ломая прозрачность самого слота */
.loadout-slot:not(.has-item)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: 70% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.2; /* Иконка полупрозрачная */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Чтобы иконка не мешала кликать */
}

.loadout-slot:not(.has-item):hover::before {
    opacity: 0.6;
}

/* --- ССЫЛКИ НА ТВОИ ИКОНКИ --- */

/* Голова */
.loadout-slot:not(.has-item)[data-slot="helmet"]::before  { 
    background-image: url('img/helmet.png'); 
    background-size: 65% !important; /* Делаем шлем чуть крупнее базовых 55% */
}
.loadout-slot:not(.has-item)[data-slot="glasses"]::before { background-image: url('img/glass.png'); }
.loadout-slot:not(.has-item)[data-slot="mask"]::before    { background-image: url('img/gas.png'); }
.loadout-slot:not(.has-item)[data-slot="hat"]::before     { background-image: url('img/hat.png'); }
.loadout-slot:not(.has-item)[data-slot="headset"]::before { background-image: url('img/headset.png'); }

/* Тело / Броня */
.loadout-slot:not(.has-item)[data-slot="armor_top"]::before    { background-image: url('img/armor.png'); }
.loadout-slot:not(.has-item)[data-slot="armor_bottom"]::before { background-image: url('img/armor.png'); }
.loadout-slot:not(.has-item)[data-slot="vest"]::before         { background-image: url('img/layout.png'); }
.loadout-slot:not(.has-item)[data-slot="backpack"]::before     { background-image: url('img/backpack.png'); }

/* Оружие */
.loadout-slot:not(.has-item)[data-slot="weapon_1"]::before { 
    background-image: url('img/weapon_1.png'); 
    background-size: 80% !important; /* Оружие длинное, даем ему больше ширины */
}
.loadout-slot:not(.has-item)[data-slot="weapon_2"]::before { 
    background-image: url('img/weapon_2.png'); 
    background-size: 80% !important; 
}
.loadout-slot:not(.has-item)[data-slot="pistol"]::before   { background-image: url('img/pistol.png'); }

/* Одежда */
.loadout-slot:not(.has-item)[data-slot="jacket"]::before { background-image: url('img/jacket.png'); }
.loadout-slot:not(.has-item)[data-slot="pants"]::before { 
    background-image: url('img/pants.png'); 
    background-size: 45% !important; 
    background-position: center 60% !important; /* Сдвигаем штаны чуть ниже центра */
}
.loadout-slot:not(.has-item)[data-slot="gloves"]::before { background-image: url('img/gloves.png'); }
.loadout-slot:not(.has-item)[data-slot="boots"]::before  { background-image: url('img/boots.png'); }

/* Костюмы (Единая иконка для всех 5 слотов) */
.loadout-slot:not(.has-item)[data-slot="suit_hat"]::before,
.loadout-slot:not(.has-item)[data-slot="suit_jacket"]::before,
.loadout-slot:not(.has-item)[data-slot="suit_pants"]::before,
.loadout-slot:not(.has-item)[data-slot="suit_gloves"]::before,
.loadout-slot:not(.has-item)[data-slot="suit_boots"]::before { 
    background-image: url('img/suit.png'); 
    background-size: 50% !important; 
}

/* Белье */
.loadout-slot:not(.has-item)[data-slot="shirt"]::before            { background-image: url('img/shirt.png'); }
.loadout-slot:not(.has-item)[data-slot="underwear_bottom"]::before { background-image: url('img/pants_other.png'); }
.loadout-slot:not(.has-item)[data-slot="socks"]::before            { background-image: url('img/socks.png'); }

/* Устройства */
.loadout-slot:not(.has-item)[data-slot="device"]::before { background-image: url('img/device.png'); }

/* ================================================== */
/* ВСПЛЫВАЮЩЕЕ ОКНО ДЕТАЛИЗАЦИИ СТАТОВ (TOOLTIP) */
/* ================================================== */
#statTooltip {
    position: fixed;
    background: rgba(8, 8, 9, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-hlt);
    box-shadow: 0 10px 30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-main);
    padding: 12px;
    z-index: 9999;
    pointer-events: none;
    min-width: 200px;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
#statTooltip.visible {
    opacity: 1;
}
.cursor-help {
    cursor: help !important;
}
    
/* ========================================== */
/* СТИЛИ ДЛЯ ЛЕНДИНГА (PROMO SCREEN)          */
/* ========================================== */
.promo-bg-topo {
    background-color: #050506;
    background-image: 
        radial-gradient(circle at 100% 50%, rgba(154, 138, 102, 0.08) 0%, transparent 60%),
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    animation: promoBgShift 30s linear infinite alternate;
}
@keyframes promoBgShift { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 0 0, 40px 40px, 40px 40px; } }

.promo-scanlines {
    position: absolute; inset: 0; z-index: 40; pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
    background-size: 100% 4px; opacity: 0.4;
}

#promoBootScreen {
    position: fixed; inset: 0; background: #050506; z-index: 9999;
    display: flex; flex-direction: column; padding: 2rem; font-family: monospace;
    color: #9a8a66; font-size: 14px; line-height: 1.6;
}
.promo-boot-line { opacity: 0; transform: translateY(5px); }
.promo-boot-anim { animation: promoLineIn 0.1s forwards; }
@keyframes promoLineIn { to { opacity: 1; transform: translateY(0); } }

.promo-tactical-panel { 
    position: relative; background: #080809; border: 1px solid #1c1d1f; 
    overflow: hidden; transition: border-color 0.2s;
}
.promo-blueprint {
    position: absolute; inset: 0; z-index: 1;
    background-repeat: no-repeat; background-position: center; pointer-events: none;
    filter: sepia(1) saturate(5) hue-rotate(10deg);
}
@media (hover: hover) {
    .promo-tactical-panel:hover { border-color: #9a8a66; }
    .promo-tactical-panel::before {
        content: ''; position: absolute;
        top: var(--y, -1000px); left: var(--x, -1000px);
        transform: translate(-50%, -50%); width: 450px; height: 450px;
        background: radial-gradient(circle, rgba(154, 138, 102, 0.12) 0%, transparent 75%);
        opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2;
    }
    .promo-tactical-panel:hover::before { opacity: 1; }
    .promo-blueprint { opacity: 0.03; transition: opacity 0.4s; }
    .promo-tactical-panel:hover .promo-blueprint { opacity: 0.15; }
}
@media (hover: none) { .promo-blueprint { opacity: 0.1; } }

.promo-btn-tarkov { background: linear-gradient(180deg, #16171a 0%, #121315 100%); border: 1px solid #1c1d1f; color: #9a8a66; position: relative; z-index: 10; cursor: pointer; }
.promo-btn-tarkov:hover { border-color: #9a8a66; color: #fff; box-shadow: 0 0 15px rgba(154, 138, 102, 0.15); }
.promo-bolt { position: absolute; width: 4px; height: 4px; background: #121315; border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8), 0.5px 0.5px 0 rgba(255,255,255,0.05); z-index: 5; }
.promo-bolt.tl { top: 6px; left: 6px; } .promo-bolt.tr { top: 6px; right: 6px; }
.promo-bolt.bl { bottom: 6px; left: 6px; } .promo-bolt.br { bottom: 6px; right: 6px; }
.promo-warning-stripes { background: repeating-linear-gradient(45deg, #1c1d1f, #1c1d1f 10px, #080809 10px, #080809 20px); }
}