/* =========================================
   1. ОСНОВНЫЕ СТИЛИ (BASE)
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

   body {
    background-color: #202020;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    margin: 0;
    /* УБИРАЕМ display: flex отсюда, чтобы футер не лез в бок */
    display: block; 
    height: auto; /* Разрешаем высоте расти */
    overflow-y: auto; /* Включаем общий скролл страницы */
}

/* Новая обертка, которая держит колонки в ряд */
.main-content-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh; /* Чтобы колонки были на весь экран */
}

/* Убедитесь, что колонки не ломаются */
.side-column {
    width: 320px;
    flex-shrink: 0;
    background: #3b3b3b;
    /* ... остальные ваши стили ... */
}

.col-center {
    flex-grow: 1;
    /* ... остальные ваши стили ... */
}
   
   /* Скроллбары */
   ::-webkit-scrollbar { width: 8px; }
   ::-webkit-scrollbar-track { background: #333; }
   ::-webkit-scrollbar-thumb { background: #555; border: 1px solid #000; }
   
   /* =========================================
      2. БОКОВЫЕ КОЛОНКИ (SIDEBARS)
      ========================================= */
   .side-column {
       width: 320px;
       background: #3b3b3b;
       padding: 20px;
       overflow-y: auto;
       border-right: 4px solid #000;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
       pointer-events: auto; /* Важно для скролла */
       z-index: 10;
   }
   
   .col-right {
       border-right: none;
       border-left: 4px solid #000;
   }
   
   /* ЗАГОЛОВКИ РЕЙТИНГОВ */
   .rating-header {
       text-align: center;
       margin-bottom: 20px;
       text-shadow: 2px 2px #000;
       border-bottom: 2px solid #555;
       padding-bottom: 15px;
       line-height: 1.5;
   }
   
   .rating-title { font-size: 16px; display: block; margin-bottom: 10px; }
   .total-score { font-size: 10px; color: #aaa; display: block; }
   .title-w { color: #ff9f43; }
   .title-m { color: #54a0ff; }
   
   /* СПИСОК ИГРОКОВ */
   .player-row {
       background: #555;
       padding: 10px;
       margin-bottom: 8px;
       border: 4px solid #000;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 10px;
       position: relative;
       transition: transform 0.1s;
       cursor: default;
   }
   
   .player-row:hover {
       transform: scale(1.02);
       background: #666;
       border-color: #fff;
   }
   
   .player-left {
       display: flex;
       align-items: center;
   }
   
   .rank-num { margin-right: 10px; color: #888; width: 20px; }
   
   .mini-head {
       width: 24px; height: 24px;
       margin-right: 10px;
       border: 2px solid #000;
       background-color: #222;
       background-repeat: no-repeat;
       background-size: 192px; /* 64 * 3 */
       background-position: -24px -24px; /* 8 * 3 */
       image-rendering: pixelated; 
   }
   
   /* Цвета топ-3 */
   .rank-0 { border-color: #ffd700; color: #ffd700; }
   .rank-1 { border-color: #c0c0c0; color: #c0c0c0; }
   .rank-2 { border-color: #cd7f32; color: #cd7f32; }
   
   
   /* =========================================
      3. ЦЕНТРАЛЬНАЯ ЧАСТЬ (MAIN CONTENT)
      ========================================= */
   .col-center {
       flex-grow: 1;
       background-image: linear-gradient(#202020 1px, transparent 1px), linear-gradient(90deg, #202020 1px, transparent 1px);
       background-size: 40px 40px;
       background-color: #2a2a2a;
       padding: 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       overflow-y: auto;
       position: relative;
       z-index: 1;
   }
   
   .center-title {
       margin-top: 20px; margin-bottom: 30px;
       font-size: 16px; color: #ffd700;
       text-shadow: 3px 3px 0 #000;
       background: #202020;
       padding: 15px 30px;
       border: 4px solid #000;
   }
   
   /* Сетка голов */
   .heads-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
       gap: 15px;
       width: 100%;
       margin-bottom: 20px;
       max-width: 900px;
   }
   
   .grid-link { text-decoration: none; min-width: 0; }
   
   .grid-item {
       background: #444; border: 4px solid #000;
       height: 140px; width: 100%;
       display: flex; flex-direction: column;
       align-items: center; justify-content: center;
       padding: 10px; transition: transform 0.1s;
       box-sizing: border-box;
   }
   
   .grid-item:hover {
       transform: scale(1.05);
       background: #555;
       border-color: #fff;
       z-index: 10;
   }
   
   .grid-head {
       width: 64px; height: 64px;
       margin-bottom: 10px;
       border: 2px solid #000;
       background-color: #222;
       flex-shrink: 0;
       background-repeat: no-repeat;
       background-size: 512px;
       background-position: -64px -64px;
       image-rendering: pixelated;
   }
   
   .grid-name {
       font-size: 10px; text-align: center; color: #fff;
       text-shadow: 1px 1px 0 #000;
       width: 100%; white-space: nowrap;
       overflow: hidden; text-overflow: ellipsis; display: block;
   }
   
   
   /* =========================================
      4. СТИЛИ ДЛЯ СТРАНИЦЫ ГОЛОСОВАНИЯ (/vote)
      ========================================= */
   
   /* Контейнер страницы голосования */
   #voting-screen {
       display: flex; /* Для десктопа в ряд */
       flex-direction: row; 
       align-items: flex-start;
       justify-content: center;
       gap: 40px;
       margin-top: 20px;
       flex-wrap: wrap;
       width: 100%;
   }
   
   /* Контейнер для скина и соцсетей */
   .socials-container {
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 300px;
   }
   
   /* Окно 3D скина */
   #skin-container { 
       width: 300px; 
       height: 400px; 
       border: 4px solid #000; 
       background: rgba(0,0,0,0.3); 
       margin-bottom: 20px; 
   }
   
   /* Панель управления (справа) */
   .controls-box { 
       background: #2b2b2b; 
       padding: 20px;
       border: 4px solid #000; 
       display: flex; 
       flex-direction: column; 
       align-items: center; 
       width: 320px; 
       box-sizing: border-box;
   }
   
   .panel-title { 
       color: #fff; margin-bottom: 20px; font-size: 14px;
       text-transform: uppercase; text-align: center; 
   }
   
   /* Кнопки действий (Поднять/Опустить) */
   .buttons-row { display: flex; gap: 10px; width: 100%; margin-bottom: 20px; }
   
   .btn-action { 
       flex: 1; height: 50px; 
       font-family: inherit; font-size: 12px; font-weight: bold; 
       cursor: pointer; border: 2px solid #000; color: #fff;
       display: flex; align-items: center; justify-content: center; 
       text-transform: uppercase; transition: 0.2s;
       background: #444;
   }
   
   .btn-action.active {
       opacity: 1; transform: scale(1.05);
       border-color: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
       z-index: 2;
   }
   
   .btn-action.inactive {
       opacity: 0.5; filter: grayscale(80%);
       transform: scale(0.95); border-color: #000;
   }
   
   #btn-increase { background: #2ecc71; }
   #btn-increase:hover { background: #27ae60; }
   
   #btn-decrease { background: #e74c3c; }
   #btn-decrease:hover { background: #c0392b; }
   
   
   .btn-da { display: none; }
   
   /* Кнопка Крипты */
   .btn-crypto { background: #3498db !important; } /* Синий цвет вместо фиолетового */
   
   .rate-info { font-size: 8px; color: #777; margin-top: 15px; text-align: center; }
   
   /* Кнопка копирования Ника */
   .copy-btn-wrapper {
       background: #111; border: 2px dashed #555; border-radius: 8px;
       padding: 15px 10px; cursor: pointer; margin-bottom: 20px;
       transition: all 0.2s; display: flex; flex-direction: column;
       align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
   }
   .copy-btn-wrapper:hover {
       background: #222; border-color: #fff;
       transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.5);
   }
   .copy-text { font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
   .copy-label { font-size: 8px; color: #777; background: #2b2b2b; padding: 4px 8px; border-radius: 4px; }
   
   
   /* Социальные кнопки */
   #social-buttons-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
   .social-btn {
       display: block; width: 100%; padding: 10px 5px;
       background: #555; border: 3px solid #000; color: #fff;
       text-decoration: none; font-size: 10px; text-align: center;
       font-family: 'Press Start 2P', cursive; text-transform: uppercase;
       box-shadow: inset -3px -3px rgba(0,0,0,0.3);
       cursor: pointer; transition: transform 0.1s; box-sizing: border-box;
   }
   .social-btn:hover { background: #666; transform: scale(1.05); border-color: #fff; }
   .soc-twitch { background: #6441a5; }
   .soc-youtube { background: #ff0000; }
   .soc-telegram { background: #0088cc; }
   
   
   /* =========================================
      5. МОДАЛЬНЫЕ ОКНА И АНИМАЦИИ
      ========================================= */
   
   /* Модалка предупреждения (Донат) */
   #warning-modal {
       display: none; position: fixed;
       top: 0; left: 0; width: 100%; height: 100%;
       background: rgba(0,0,0,0.8); z-index: 15000;
       align-items: center; justify-content: center;
   }
   .warning-box {
       background: #202020; border: 4px solid #ff5555;
       padding: 30px; width: 300px; text-align: center;
       box-shadow: 0 0 50px rgba(255, 85, 85, 0.3);
       animation: popIn 0.3s;
   }
   .warning-box .btn { 
       border: 2px solid #000; padding: 10px; cursor: pointer; font-family: inherit; font-size: 10px; 
   }
   
   /* Оверлей успеха (салют) */
   #success-overlay {
       display: none; position: fixed;
       top: 0; left: 0; width: 100vw; height: 100vh;
       background: rgba(0,0,0,0.95); z-index: 9999;
       flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
   }
   #anim-skin-container { width: 300px; height: 400px; margin-bottom: 30px; position: relative; z-index: 10001; }
   #success-title { 
       font-size: 30px; text-align: center; line-height: 1.5;
       text-shadow: 4px 4px #000; margin-bottom: 20px; z-index: 10001; animation: popIn 0.5s; color: #ffd700;
   }
   .close-anim-btn {
       background: transparent; border: 2px solid #fff; color: #fff; 
       padding: 10px 30px; font-family: inherit; cursor: pointer;
       z-index: 10001; transition: 0.2s;
   }
   .close-anim-btn:hover { background: #fff; color: #000; }
   
   @keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
   
   
   /* =========================================
      6. МОБИЛЬНАЯ АДАПТАЦИЯ (COMPLEX)
      ========================================= */
   @media only screen and (max-width: 900px) {
       
       body {
           flex-direction: column;
           height: auto;
           overflow-x: hidden;
       }
   
       /* Скрываем боковые колонки на мобиле, если не нужны (или настраиваем их показ) */
       .side-column { 
           width: 100%; height: auto; border: none; 
           border-bottom: 4px solid #000; 
           display: none; /* Скрываем по умолчанию на главной */
       }
       
       .col-center { 
           height: auto; min-height: 500px; 
           min-height: 100vh;
           width: 100% !important; padding: 10px;
       }
   
       .rating-header { margin-top: 10px; }
   
       /* --- АДАПТАЦИЯ СТРАНИЦЫ ГОЛОСОВАНИЯ --- */
       #voting-screen {
           flex-direction: column;
           align-items: center;
           gap: 20px;
       }
   
       .socials-container {
           width: 100%;
           order: 2; /* Кнопки соцсетей под управлением */
       }
   
       #social-buttons-list {
           flex-direction: row; /* На мобилках в ряд */
           flex-wrap: wrap;
           justify-content: center;
       }
   
       .social-btn { width: auto !important; padding: 10px 15px !important; }
   
       .controls-box {
           width: 100%; max-width: 400px;
           order: 1; /* Управление сверху */
       }
   
       #skin-container {
           /* Скин можно уменьшить или скрыть на очень маленьких экранах */
           width: 200px !important;
           height: 300px !important;
           margin: 0 auto 20px auto;
       }
   
       /* Сетка голов на главной */
       .heads-grid {
           grid-template-columns: repeat(3, 1fr) !important;
       }
   }

   /* --- КНОПКА НАЗАД (СТРАНИЦА ГОЛОСОВАНИЯ) --- */
.btn-back-link {
    background: #7f8c8d; 
    color: white; 
    font-family: inherit;
    border: 4px solid #000; 
    padding: 15px 30px; 
    font-size: 14px; 
    cursor: pointer; 
    text-transform: uppercase; 
    text-decoration: none;
    display: inline-block;
    margin-bottom: 30px;
    box-shadow: 4px 4px 0px #000;
}
.btn-back-link:hover { 
    background: #95a5a6; 
    transform: translate(-2px, -2px); 
    box-shadow: 6px 6px 0px #000; 
}
.btn-back-link:active { 
    transform: translate(2px, 2px); 
    box-shadow: 2px 2px 0px #000; 
}

#copy-notification {
    position: fixed;
    left: 50%;
    transform: translateX(-50%); /* Центровка по горизонтали */
    background: #2ecc71; /* Ярко-зеленый */
    color: #fff;
    padding: 15px 30px;
    border: 4px solid #000;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    z-index: 20000;
    box-shadow: 6px 6px 0 #000;
    text-transform: uppercase;
    
    /* Начальное состояние: скрыто */
    display: none;
    opacity: 0;
    top: 20px;
}

/* Ключевые кадры анимации "Полет вверх" */
@keyframes flyUpDissolve {
    0% {
        opacity: 0;
        top: 30px; /* Выезжает снизу */
        transform: translateX(-50%) scale(0.9);
    }
    10% {
        opacity: 1;
        top: 20px; /* Встает на место */
        transform: translateX(-50%) scale(1);
    }
    70% {
        opacity: 1;
        top: 20px; /* Висит неподвижно */
    }
    100% {
        opacity: 0;
        top: -50px; /* Улетает вверх */
    }
}

/* Класс, который мы будем добавлять через JS */
.notification-fly {
    display: block !important;
    animation: flyUpDissolve 2.5s ease-in-out forwards;
}

/* =========================================
   7. АНИМАЦИИ И ЧАСТИЦЫ (НОВОЕ)
   ========================================= */

/* Фоновые эффекты для оверлея */
.gold-bg {
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(0,0,0,0.95) 90%) !important;
}

.fire-bg {
    background: radial-gradient(circle, rgba(255, 69, 0, 0.2) 0%, rgba(0,0,0,0.95) 90%) !important;
}

/* Частицы (+ или -) */
.particle {
    position: absolute;
    font-family: 'Press Start 2P', cursive;
    font-weight: bold;
    user-select: none;
    pointer-events: none;
    z-index: 9998; /* Позади заголовка, но поверх фона */
    opacity: 0;
}

/* Анимация полета вверх (для +) */
@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-100vh) scale(1.5); opacity: 0; }
}

/* Анимация падения вниз (для -) */
@keyframes fallDown {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(100vh) scale(1.5); opacity: 0; }
}

/* Принудительно скрываем мобильный оверлей на экранах шире 900px */
@media screen and (min-width: 901px) {
    #mobile-overlay {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        z-index: -999 !important;
    }
}