/* style.css - ВИПРАВЛЕНА КОЛЬОРОВА ГАМА */

/* 1. Підключаємо шрифт Russo One та Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Russo+One&display=swap');

:root {
    --color-bg-main: #0a0a12;
    --color-bg-secondary: #12121a;
    --color-text-primary: #ffffff;
    --color-text-secondary: #cccccc;
    --color-accent-orange: #ff5500;
    --color-accent-yellow: #ffcc00;
    --color-ru-white: #ffffff;
    --color-ru-blue: #0039a6;
    --color-ru-red: #d52b1e;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--color-bg-main);
    color: var(--color-text-primary);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.text-center { text-align: center; letter-spacing: 3px; }
.highlight { color: var(--color-accent-orange); }

/* --- ХЕДЕР --- */
header {
    display: flex; justify-content: space-between; align-items: center; padding: 15px 40px;
    background: rgba(10, 10, 18, 0.8); 
    backdrop-filter: blur(10px); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky; top: 0; z-index: 100;
}

/* ЛОГОТИП - ПРИБРАЛИ СВІТІННЯ */
.logo { 
    font-family: 'Russo One', sans-serif;
    font-weight: 400;
    font-size: 2rem; 
    display: flex; 
    align-items: center;
    color: #fff; /* Просто білий колір */
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: none; /* Жодних ефектів */
}

/* Іконка вогню біля лого - залишаємо помаранчевою, але без сильного сяйва */
.fire-icon { 
    font-size: 2rem; 
    margin-right: 10px; 
    filter: drop-shadow(0 0 2px #ff5500); 
}

/* Меню */
nav a { 
    color: var(--color-text-secondary); 
    text-decoration: none; 
    margin: 0 30px; 
    font-family: 'Russo One', sans-serif;
    
    /* ДОДАЛИ ІНТЕРВАЛ МІЖ БУКВАМИ */
    letter-spacing: 3px; /* Було 0, стало 2px */
    text-transform: uppercase; /* (Опціонально) Робить всі букви великими, як у заголовках */
    
    transition: color 0.3s; 
}

nav a:hover, nav a.active { 
    color: var(--color-accent-orange); 
}nav a:hover, nav a.active { color: var(--color-accent-orange); }

/* КНОПКА - підігнав під стиль заголовка (тепла гама) */
.cta-button {
    font-family: 'Russo One', sans-serif;
    background: transparent;
    border: 2px solid #ff8800; /* Більш жовто-гарячий контур */
    padding: 10px 30px; 
    color: #fff; 
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px; 
    cursor: pointer;
    
    /* Тепле світіння */
    box-shadow: 0 0 10px #ff8800, inset 0 0 5px rgba(255, 136, 0, 0.3);
    text-shadow: 0 0 5px #ff8800;
    
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #ff5500;
    box-shadow: 0 0 20px #ff5500, 0 0 30px #ff0000;
    color: #000;
    transform: scale(1.05);
}

/* --- ГЕРОЙ --- */
.hero { padding: 60px 20px 40px 20px; }







/* style.css - МОНОЛІТНИЙ 3D ЕФЕКТ + РІВНОМІРНЕ СВІТІННЯ */

.hero h1 {
    font-family: 'Russo One', sans-serif;
    font-weight: 400; 
    font-size: 3.5rem; 
    margin-bottom: 20px; 
    text-transform: uppercase;
    color: #ffdba6;
    letter-spacing: 3px;

    /* 2. 3D + СВІТІННЯ */
    filter: 
        /* --- 3D ЕФЕКТ (ОДИН СУЦІЛЬНИЙ ШАР) --- */
        /* Використовуємо ОДИН колір (#993300) для всіх кроків. 
           Це прибирає ефект "шаруватості" і робить твердий блок. */
        drop-shadow(0px 1px 0px #993300)
        drop-shadow(0px 2px 0px #993300)
        drop-shadow(0px 3px 0px #993300)
     

        /* --- РІВНОМІРНЕ СВІТІННЯ --- */
        /* Нульові координати (0 0) гарантують рівність з усіх боків */
        drop-shadow(0 0 5px #ff8800)  /* Насичене помаранчеве ядро */
        drop-shadow(0 0 10px #ff4500)  /* Червона аура */
        
}







.hero .subtitle { font-size: 1.2rem; color: var(--color-text-secondary); }

/* --- КАРТА --- */
.map-section {
    display: flex; justify-content: center; padding: 20px; margin-bottom: 40px;
    overflow-x: auto;
}

.map-wrapper { padding: 20px; background-color: transparent; }

.pixel-map-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--pixel-size));
    gap: 1px;
    background-color: transparent;
    justify-content: center;
}

.pixel {
    width: var(--pixel-size);
    height: var(--pixel-size);
    background-color: transparent;
    border-radius: 2px;
    transition: all 0.1s ease-out;
    position: relative;
}

.pixel.is-land { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.pixel.white { background-color: var(--color-ru-white); }
.pixel.blue { background-color: var(--color-ru-blue); }
.pixel.red { background-color: var(--color-ru-red); }

/* Спалений піксель */
.pixel.burned {
    background-color: #222 !important;
    box-shadow: 0 0 5px #ff5500 !important;
    animation: none;
}
.pixel.burned::after {
    content: '🔥';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
}

.pixel.is-land:hover {
    background-color: var(--color-accent-orange) !important;
    transform: scale(1.4);
    box-shadow: 0 0 10px var(--color-accent-orange), 0 0 20px var(--color-accent-yellow);
    z-index: 100;
    border-radius: 3px;
}

/* --- ПІДВАЛ --- */
.progress-section { padding: 20px; }
.progress-bar-container { width: 80%; max-width: 600px; height: 15px; background: var(--color-bg-secondary); border-radius: 10px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.progress-bar-fill { height: 100%; background: linear-gradient(to right, var(--color-accent-orange), var(--color-accent-yellow)); }
footer { background: var(--color-bg-secondary); padding: 30px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.feed-container { max-width: 800px; margin: 0 auto 30px auto; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; max-height: 150px; overflow-y: auto; }
.feed-item { font-size: 0.9rem; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.donor { color: var(--color-accent-orange); font-weight: 700; }
.amount { color: var(--color-accent-yellow); font-weight: 700; }