/* ==========================================================================
   1. НАСТРОЙКИ ФОНА (БЕЗУПРЕЧНЫЙ BIOS + ПАНЕЛЬКА)
   ========================================================================== */
body {
    background-color: #0000aa; /* Синий цвет BIOS на полосах */
    background-image: url("Без названия.jpg"); 
    background-repeat: no-repeat;
    background-size: contain; 
    background-position: center center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    font-family: "Comic Sans MS", cursive, sans-serif !important;
}

/* ==========================================================================
   2. СТИЛИ ДЛЯ СТРАНИЦЫ ВХОДА (ПЛЕЕР WINAMP - ТЕПЕРЬ ОН В БЕЗОПАСНОСТИ)
   ========================================================================== */
.winamp-body {
    width: 390px; 
    background-color: #d4d0c8; 
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; 
    border-right: 2px solid #404040; border-bottom: 2px solid #404040; 
    padding: 4px; 
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8);
    margin: 0 auto;
}

.winamp-title {
    background: linear-gradient(90deg, #000080, #1084d0); 
    padding: 4px 6px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px;
}

.winamp-title span {
    font-size: 12px; font-weight: bold; color: #ffffff;
}

.close-btn {
    background-color: #d4d0c8; color: #000000; font-family: sans-serif; font-size: 10px; font-weight: bold; padding: 1px 4px; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #404040; border-bottom: 1px solid #404040; cursor: pointer;
}

.display-logo {
    background-color: #000000; padding: 8px; border-top: 2px solid #404040; border-left: 2px solid #404040; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; text-align: center; margin-bottom: 12px;
}

.display-logo img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.display-text {
    background-color: #000000; border-top: 2px solid #404040; border-left: 2px solid #404040; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; padding: 10px 5px; margin-bottom: 15px; text-align: center;
}

.welcome-msg { color: #00ff00; font-size: 14px; font-weight: bold; letter-spacing: 1px; display: block; }
.system-status { color: #008000; font-size: 11px; margin-top: 4px; }
.control-panel { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 5px; padding: 5px; border-top: 1px solid #808080; }

.panel-btn-disabled {
    width: 35px; height: 26px; background-color: #d4d0c8; font-family: 'Comic Sans MS', cursive !important; font-size: 11px; font-weight: bold; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #404040; border-bottom: 1px solid #404040; color: #808080;
}

.enter-btn-win9x {
    height: 26px; background-color: #d4d0c8; color: #000000; font-weight: bold; font-size: 12px; padding: 0 20px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #404040; border-bottom: 2px solid #404040; cursor: pointer;
}

.enter-btn-win9x:active { border-top: 2px solid #404040; border-left: 2px solid #404040; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; padding: 1px 19px 0px 21px; }

/* ==========================================================================
   3. ВЕРТИКАЛЬНЫЙ САЙДБАР (КНОПКИ)
   ========================================================================== */
.sidebar-box {
    background-color: #d4d0c8;
    padding: 15px 10px;
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff;
    border-right: 2px solid #404040; border-bottom: 2px solid #404040;
}

.tab-link {
    background-color: #d4d0c8;
    color: #000000;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 12px;
    text-align: center;
    display: block;
    margin-bottom: 8px;
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff;
    border-right: 2px solid #404040; border-bottom: 2px solid #404040;
}

.tab-link:hover { background-color: #e4e0d8; }
.tab-link.active { background-color: #dfdac2; border-top: 2px solid #404040; border-left: 2px solid #404040; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }

/* ==========================================================================
   4. ОКНО БЛОКНОТА И РЕКЛАМА
   ========================================================================== */
.notepad-window {
    background-color: #d4d0c8;
    border-top: 2px solid #ffffff; border-left: 2px solid #ffffff;
    border-right: 2px solid #404040; border-bottom: 2px solid #404040;
    padding: 4px;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.6);
}

.notepad-title { background: linear-gradient(90deg, #000080, #1084d0); padding: 4px 6px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.notepad-title span { font-size: 12px; font-weight: bold; color: #ffffff; }
.notepad-menu { font-size: 11px; color: #000000; padding: 2px 5px 6px 5px; display: flex; gap: 12px; border-bottom: 1px solid #808080; margin-bottom: 8px; }
.notepad-body { background-color: #ffffff; color: #000000; font-size: 13px; border-top: 2px solid #404040; border-left: 2px solid #404040; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; padding: 20px; min-height: 320px; }
.notepad-post { margin-bottom: 35px; padding-bottom: 20px; border-bottom: 1px dashed #808080; }
.notepad-post h3 { margin: 0 0 5px 0; font-size: 16px; }
.notepad-date { font-size: 11px; color: #555555; display: block; margin-bottom: 10px; }
.notepad-footer { margin-top: 30px; text-align: center; font-size: 12px; }
.notepad-footer a { color: #000080; text-decoration: none; font-weight: bold; border-bottom: 1px dotted #000080; }

.adv-box {
    background-color: #000000;
    border-top: 2px solid #404040; border-left: 2px solid #404040;
    border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
    min-height: 50px; display: flex; justify-content: center; align-items: center; color: #444444; font-family: monospace; font-size: 11px;
}
/* ======================================= */
/*    СТИЛИ ДЛЯ ГАЛЕРЕИ ФОТО (photo.html)  */
/* ======================================= */

/* Сетка, чтобы фотки вставали аккуратно в ряд */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 15px;
}

/* Рамка вокруг каждой фотографии в стиле ретро-карточки */
.photo-card {
    background-color: #d4d0c8;
    padding: 6px;
    border-top: 1px solid #404040; border-left: 1px solid #404040;
    border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
    width: 45%; /* Две фотки будут вставать идеально в ряд */
    min-width: 200px;
    box-sizing: border-box;
}

/* Пиксельная подпись под фотографией */
.photo-caption {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 11px;
    color: #000000;
    margin-top: 5px;
    text-align: center;
    font-weight: bold;
}
.site-body {
    display: flex;
    width: 100%;
    max-width: 880px; /* Увеличили под 5 кнопок */
    padding: 0 15px;
    box-sizing: border-box;
    align-items: flex-start;
}
.acid-blink {
    font-weight: bold;
    text-transform: uppercase;
    animation: blink-acid 0.5s linear infinite, blink-fade 0.4s steps(2, start) infinite !important;
}
@keyframes blink-acid {
    0%   { color: #ff0000; text-shadow: 0 0 8px #ff0000; }
    20%  { color: #00ff00; text-shadow: 0 0 8px #00ff00; }
    40%  { color: #00ffff; text-shadow: 0 0 8px #00ffff; }
    60%  { color: #ff00ff; text-shadow: 0 0 8px #ff00ff; }
    80%  { color: #ffff00; text-shadow: 0 0 8px #ffff00; }
    100% { color: #ff0000; text-shadow: 0 0 8px #ff0000; }
}
@keyframes blink-fade {
    to { visibility: hidden; }
}
/* Специальный безумный стиль для Блокнота в Приколах */
.shiza-body {
    /* Черный фон вместо белого */
    background-color: #000000 !important; 
    /* Текст становится ядовито-зеленым как в матрице */
    color: #00ff00 !important;
    font-family: "Comic Sans MS", cursive, sans-serif !important;
    /* Мелкая пиксельная сетка на фоне для создания эффекта старого ТВ */
    background-image: radial-gradient(rgba(0, 255, 0, 0.15) 1px, transparent 0) !important;
    background-size: 3px 3px !important;
}

/* Перекрашиваем заголовки внутри шиза-блокнота */
.shiza-body h3, .shiza-body p {
    color: #00ff00 !important;
}
.shiza-body .notepad-date {
    color: #ff00ff !important; /* Дату сделаем ядовито-розовой */
}
.retro-player {
    margin: 20px 0;
    border: 1px dashed #ffff55;
    padding: 10px;
    background: #000000; /* Черное окошко плеера внутри синего БИОСа */
}
/* Исправленный контейнер плеера — теперь он не растягивается на весь экран */
.retro-player {
    margin: 15px 0;
    border: 1px dashed #ffff55;
    padding: 10px;
    background: #000000; 
    box-sizing: border-box;
    width: 100%; /* Заставляем его быть не шире самой синей полосы */
}

.player-title {
    color: #55ffff !important;
    font-weight: bold;
    text-align: center;
    margin: 0 0 8px 0;
    font-size: 12px;
}

.track-name {
    font-size: 11px;
    color: #ffff55;
    margin: 5px 0;
    text-align: center;
    /* Эти строки не дадут тексту вылезать за края */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* Кнопки теперь будут аккуратно в один ряд или столбик, без гигантских отступов */
.player-controls {
    display: flex;
    justify-content: center;
    gap: 15px; /* Небольшой фиксированный отступ между PLAY и STOP */
    margin: 10px 0;
}

.player-controls button {
    background: #222; /* Сделаем им небольшую темную подложку, чтобы они выглядели как кнопки */
    border: 1px solid #ffffff;
    color: #ffffff;
    font-family: "Courier New", monospace;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    padding: 3px 8px;
}

.player-controls button:hover {
    color: #ff5555;
    border-color: #ff5555;
}

.volume-hint {
    font-size: 11px;
    text-align: center;
    margin: 8px 0 0 0;
    color: #55ff55;
}