/* ==================================== */
/* 1. Reset and Base Styles */
/* ==================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', monospace, Tahoma, 'MS Sans Serif', Geneva, sans-serif; 
}

body {
    cursor: url(https://cur.cursors-4u.net/cursors/cur-7/cur610.cur), auto; 
    color: #f0f0f0; 
    background-color: #333; 
    line-height: 1.5;
    position: relative; 
    overflow-x: hidden; 
    padding-bottom: 80px; /* ОТСТУП СНИЗУ ДЛЯ ФИКСИРОВАННОГО ФУТЕРА */
}

a {
    text-decoration: none;
    color: #ff3333; 
}
a:hover {
    color: #ff9999;
}

/* General Content Styles */
h2, h3 {
    color: #ff3333; 
    margin-bottom: 10px;
    text-transform: uppercase;
}
p {
    color: #eee;
}

/* ==================================== */
/* 2. Layout Structure */
/* ==================================== */
header {
    background-color: #111;
    text-align: center;
    padding: 0; 
    border-bottom: 3px double #ff3333;
}
/* Центрирование бегущей строки */
.banner-strip-container {
    text-align: center;
    padding: 5px 0;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}
.banner-strip {
    display: inline-block; 
    background-color: #222;
    white-space: nowrap; 
}
.banner-strip img {
    vertical-align: middle;
    margin: 0 5px;
}
#container {
    width: 90%; 
    max-width: 1200px; 
    margin: 30px auto; 
    display: flex; 
    gap: 20px;
}

/* СТИЛИ ДЛЯ ВСЕХ БЛОКОВ (NAV, MAIN, ASIDE) */
.content-box {
    border: 2px solid #ff3333; /* Красная рамка */
    background-color: #1a1a1a; /* Темный фон */
    padding: 0;
}
.box-title {
    background: linear-gradient(180deg, #ff3333, #880000); 
    color: #fff ; 
    padding: 5px 10px;
    margin: 0;
    font-weight: bold;
    font-size: 1em;
}
.box-body {
    padding: 10px;
    background-color: #1a1a1a; /* Внутренний фон */
    min-height: 100px; 
}
.content-box main h2 { 
    color: #ff3333;
}
.content-box main p { 
    color: #eee;
}

/* Фиксированные размеры колонок */
nav {
    width: 250px; 
    flex-shrink: 0; 
}
main {
    flex-grow: 1; 
}
aside {
    width: 200px; 
    flex-shrink: 0;
}

/* --- ФИКСИРОВАННЫЙ FOOTER --- */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; 
    z-index: 100; 
    
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center; 
    padding: 10px 0 5px 0; 
    background-color: #111;
    border-top: 3px double #ff3333;
    margin-top: 0; 
    font-size: 0.8em;
    color: #666;
}
footer p {
    margin-top: 5px;
    padding: 0;
    color: #666 ; 
}

/* ==================================== */
/* 3. DRAGGABLE WINDOW STYLES */
/* ==================================== */
.draggable-window {
    position: absolute; 
    z-index: 50; 
    cursor: default;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Область, за которую мы хватаемся для перетаскивания */
.draggable-window .handle {
    cursor: grab;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.draggable-window .handle:active {
    cursor: grabbing;
}

/* Кнопки сворачивания/закрытия */
.window-controls button {
    background: #555;
    color: #fff;
    border: 1px solid #ff3333;
    padding: 2px 5px;
    margin-left: 2px;
    cursor: pointer;
    font-size: 0.8em;
    font-family: 'Courier New', monospace;
}
.window-controls button:hover {
    background: #ff3333;
    color: #000;
}

/* Стили для свернутого окна */
.minimized {
    height: auto ;
    width: 250px;
    bottom: 5px; 
    position: fixed ;
    top: auto ;
    left: auto ;
    z-index: 1000; 
}
.minimized .draggable-content {
    display: none;
}


/* ==================================== */
/* 4. SPLASH SCREEN STYLES (ORIGINAL STYLE) */
/* ==================================== */
#splash-screen {
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #000; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; 
    color: #f0f0f0; 
    font-family: 'Courier New', monospace;
}
.warning-box {
    width: 450px;
    text-align: center;
    padding: 30px;
    background-color: #000; 
    border: 3px solid #ff3333; 
    box-shadow: 0 0 10px #ff3333, 0 0 20px #880000 inset;
}
.warning-box h2 {
    color: #ff3333;
    margin-bottom: 10px;
}
.logo-placeholder {
    font-size: 2.5em;
    color: #ff3333;
    margin: 15px auto 20px;
    padding: 5px 10px;
    border: 1px dashed #ff3333; 
    text-shadow: 0 0 5px #ff3333;
    display: inline-block;
}
#enter-button {
    background-color: #ff3333;
    color: #000;
    border: 2px solid #fff;
    padding: 10px 20px;
    margin: 20px 0;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.1s;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}
#enter-button:hover {
    background-color: #fff;
    color: #ff3333;
    border-color: #ff3333;
}
.content-icons span {
    display: inline-block;
    background-color: #333;
    color: #ff3333;
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #ff3333;
    font-size: 0.8em;
    font-family: 'Courier New', monospace;
}
.splash-badges {
    min-height: 50px; 
    margin: 20px 0;
}


/* ==================================== */
/* 5. NAVIGATION STYLES (INTERACTIVE DROPDOWN) */
/* ==================================== */

.nav-body ul li {
    position: relative; 
}
.nav-body ul {
    list-style: none;
    background-color: #000; 
    padding: 0;
    border: 1px solid #ff3333;
    margin: 0;
}
.nav-body ul li a {
    /* LEVEL 1 LINKS */
    font-family: 'Courier New', monospace; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 8px 15px; 
    color: #eee;
    font-weight: bold;
    font-size: 0.85em; 
    background-color: #333; 
    margin-bottom: 0; 
    border: 1px solid #555;
    border-top: none;
}
.nav-body ul li:first-child a {
    border-top: 1px solid #555;
}
.nav-body ul li a:hover {
    background-color: #880000; 
    color: #fff;
    padding-left: 20px;
}
.nav-body .current-page {
    background-color: #ff3333; 
    color: #000 !important;
}

/* --------------------------------------
   ЛОГИКА ВЫПАДАЮЩЕГО МЕНЮ (INTERACTIVITY)
   -------------------------------------- */

/* Скрываем подпункты по умолчанию */
.dropdown-content {
    /* Анимация и скрытие */
    display: none; /* Скрыто до клика */
    padding-left: 15px; /* Отступ для иерархии (работает вместе с JS) */
    margin: 0; 
    max-height: 0; /* Для CSS-анимации, но мы используем display: none для простоты */
    overflow: hidden;
    
    background-color: transparent; 
}

/* Показываем подпункты, когда родитель имеет класс 'active' */
.dropdown.active > .dropdown-content {
    display: block !important; 
    /* Если нужна анимация, здесь нужно добавить max-height: 500px;
       Но так как мы вернулись к display: block, анимации не будет,
       будет мгновенное открытие, что более стабильно. */
}

/* Стилизация индикаторов [+] и [-] */
.dropdown > a:after {
    content: ' [ + ]'; /* Закрыто */
    font-size: 0.9em; 
    line-height: 1; 
    margin-left: 10px; 
    transition: none; 
    flex-shrink: 0; 
    color: #ff3333; /* Красный цвет */
}
.dropdown.active > a:after {
    content: ' [ - ]'; /* Открыто */
}


/* --------------------------------------
   СТИЛИ ДЛЯ УРОВНЯ 2 (Root's, About us, Drones)
   -------------------------------------- */
.dropdown-content li a {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    padding: 5px 15px; 
    background-color: #222; /* LEVEL 2: Темнее, чем Level 1 */
    color: #ccc;
    border: none;
    
    /* Акцентная граница: Сдвиг вправо 15px уже есть, добавляем границу */
    border-left: 3px solid #ff3333; 
    border-bottom: 1px solid #111; 
    margin-bottom: 0;
}
.dropdown-content li a:hover {
    background-color: #550000;
}

/* --------------------------------------
   СТИЛИ ДЛЯ УРОВНЯ 3 (Base Models, Exclusive Models)
   -------------------------------------- */

/* Целимся на ссылки внутри второго вложенного dropdown-content */
.dropdown-content .dropdown-content {
    padding-left: 15px; /* Дополнительный отступ для глубины */
}

.dropdown-content .dropdown-content li a {
    background-color: #111; /* LEVEL 3: Самый темный фон */
    color: #bbb;
    padding-left: 20px; 
    
    /* Более толстая граница для акцента */
    border-left: 5px solid #ff3333; 
}
.dropdown-content .dropdown-content li a:hover {
    background-color: #330000;
}


/* ==================================== */
/* 6. ASIDE STYLES (UPDATES and STAMPS) */
/* ==================================== */
.aside-body h3 {
    text-align: center;
    font-size: 1.1em ; 
}
.update-log {
    list-style: none;
    padding: 10px;
    border: 1px dashed #666;
    margin-bottom: 20px;
    background-color: #000;
    max-height: 150px; 
    overflow-y: auto; 
}
.update-log li {
    margin-bottom: 5px;
    color: #f0f0f0;
    border-left: 3px solid #ff3333;
    padding-left: 8px;
}
.music-player {
    background-color: #000;
    padding: 10px;
    border: 1px solid #ff3333;
    margin-bottom: 20px;
    text-align: center;
}
.music-thumbnail {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}
.song-info {
    font-size: 0.9em;
    color: #ff3333;
    margin-bottom: 5px;
}
.player-controls {
    background-color: #333;
    color: #fff;
    padding: 5px;
    border: 1px solid #ff3333;
    font-size: 0.8em;
}
.stamp-collection {
    text-align: center;
}
.stamp-collection img {
    display: block; 
    margin: 5px auto;
    border: 1px solid #555;
}

/* ==================================== */
/* 7. BLINKIES IN FOOTER */
/* ==================================== */
.blinkies-strip {
    background-color: #222;
    padding: 3px 0;
    border-top: none;
    border-bottom: none; 
    width: 100%; 
    white-space: nowrap;
}
.blinkies-strip img {
    height: 20px; 
    vertical-align: middle;
    margin: 0 5px;
    image-rendering: pixelated;
}