body {
    margin: 0;
    line-height: 0;
    font-family: Oswald, monospace;
    line-height: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: visibility 1.5s, opacity 1.5s linear;
    
  /*   background-image: url('../content/fon.png'); 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; */

    
}

body.visible {
    visibility: visible;
    opacity: 1;
}

footer {
    position: absolute;
    bottom: 20px; /* Отступ снизу */
    width: 95%; /* Уменьшаем ширину (было 100%) */
   /* height: 20%;*/
    left: 2%;     /* Сдвигаем на 2% вправо, чтобы было ровно по центру */
    display: flex;
    justify-content: center;
}

/* --- сила размытия backdrop-filter --- */
.player {
margin: 0 0.625vw;
    width: 8.6vw;
    height: 8.6vw;
    position: relative;
    overflow: visible !important;
    border-radius: 12px;
    
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* ИСПРАВЛЕНО: Прижимаем к левому нижнему углу */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Вниз */
    align-items: flex-start;    /* Влево */
    padding: 0 0 10px 15px;     /* Отступ снизу и слева */
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    transition: all 0.5s ease;
    z-index: 5    
   }

/* Блик/развод (для эффекта стекла) */
.player::before {
content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    z-index: 6;
    pointer-events: none;
    
    /* Блик идет из левого нижнего угла (45 градусов) */
    background: linear-gradient(45deg, 
    		rgba(139, 0, 0, 0.95) 0%, 
    		rgba(139, 0, 0, 0.3) 30%, 
    		rgba(139, 0, 0, 0) 50%);
    		rgba(139, 0, 0, 0) 50%);
    transition: background 0.5s ease;    
}
/* Смена цвета блика для ролей */
.show-roles .mafia.player::before,
.show-roles .don.player::before {
    background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 50%);
}

.show-roles .sheriff.player::before {
    background: linear-gradient(45deg, rgba(20, 80, 20, 0.95) 0%, rgba(20, 80, 20, 0.5) 30%, rgba(20, 80, 20, 0) 50%);
}


/* --- ИЗМЕНЕННЫЙ СТИЛЬ .speaker (Говорящий - ОРАНЖЕВО-КРАСНЫЙ) --- */
.speaker {
    /* ОРАНЖЕВАЯ/КРАСНАЯ ТЕНЬ для говорящего */
    box-shadow: 0 4px 30px rgba(255, 69, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.7) inset;
    border: 2px solid #FF4500; /* Ярко-красно-оранжевая рамка */
    
}

/* --- ИСПРАВЛЕННЫЙ СТИЛЬ .player.dead (Мертвый - ЧЕРНЫЙ) --- */
.player.dead {
    margin-top: 0.5%; 
    background: rgba(0, 0, 0, 0.8); /* Черный и очень прозрачный при смерти */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.9); /* Очень темная тень */
    border: 1px solid rgba(255, 69, 0, 0.4); /* Почти невидимая рамка */
}

.photo {
    /* ФОТОГРАФИЯ - ВЫХОДИТ ЗА ПРЕДЕЛЫ */
position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    height: 110%;
    width: 100%;
    z-index: 5; /* Под бликом */
    background-size: cover;
    background-position: center top;
    border-radius: 15px;
    transition: all 1s; 
}

.dead .photo {
    /* Фото при смерти */
    top: 0%; 
    height: 100%;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.status {
    height: 26px;
    width: 26px;
    position: absolute;
    top: -10px;
    left: 5px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 1.5s, opacity 1.5s linear;
    z-index: 10; 
}

.dead .status {
    visibility: visible;
    opacity: 1;
    
    /* СТИЛИ СТЕКЛА */
    background: rgba(255, 255, 255, 0.1); /* Слегка прозрачный фон */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3); /* Легкая рамка */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Легкая тень */
    /* КОНЕЦ СТИЛЕЙ СТЕКЛА */
    
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.killed .status {
    background-image: url("../content/icon/killed.png");
}

.voted .status {
    background-image: url("../content/icon/voted.png");
}

.deleted .status {
    background-image: url("../content/icon/deleted.png");
}

/* --- ИСПРАВЛЕННЫЙ СТИЛЬ .role (Теперь текстовый индикатор с эффектом стекла) --- */
.role {
   height: 35px; 
    width: 35px;
    position: absolute;
    top: -12px; /* Вынос за верхнюю границу */
    right: 5px;
    border-radius: 4px;
    
    /* Логика отображения */
    display: none; /* Скрыто по умолчанию для мирных */
    opacity: 0;
    visibility: hidden;
    
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    z-index: 50;
    transition: all 0.5s ease;   
   }
   /* Общий стиль для букв внутри роли */
.role::before {
    font-family: "а", Tahoma, sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: white;
    line-height: 1;
    margin-bottom: 2px;
}
/* --- ИЗМЕНЕННЫЕ СТИЛИ ДЛЯ ШЕРИФА --- */
/* Общий эффект свечения букв внутри ролей */
/* Показываем карточку роли ТОЛЬКО при вскрытии ролей */
.show-roles .sheriff .role,
.show-roles .don .role,
.show-roles .mafia .role {
    display: flex;
    visibility: visible;
    opacity: 1;
}

/* Шериф: Зеленый неон ч*/
.show-roles .sheriff.player {
  /* Возвращаем стандартный цвет мирных (красное матовое стекло) 
    background: rgba(139, 0, 0, 0.65) !important; */
    /* Мягкое внешнее свечение для идентификации в OBS */
    filter: drop-shadow(0 0 15px rgba(30, 132, 73, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

.show-roles .sheriff .role {
 display: flex;
    visibility: visible;
    opacity: 1;
    /* УБРАЛИ БЕЛЫЙ: теперь здесь зеленый градиент под стиль Шерифа */
    background: linear-gradient(135deg, #147514 0%, #004524 100%);
    border: 1px solid rgba(52, 201, 36, 0.5);
    text-shadow: 0 0 8px #fff;
        }
    
 .show-roles .sheriff .role::before {
    content: "Ш";
    color:#ffffff;
 }   


/* Дон: Синий неон */
.show-roles .don.player {
   background: rgba(10, 10, 10, 0.95) !important; /* Черное стекло */
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
}
.show-roles .don .role {
 background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    border: 1px solid rgba(255,255,255,0.1);
        }
        
.show-roles .don .role::before {
    content: "Д";
    color: white;
}
/* --- МАФИЯ (Красное свечение, вариация Дона) --- */
.show-roles .mafia.player {
    background: rgba(15, 15, 15, 0.9) !important; /* Черное стекло */
    }

.show-roles .mafia .role {
    background: linear-gradient(135deg, #2b0000 0%, #000000 100%);
    
}

.show-roles .mafia .role::before {
    content: "М";
    color: white;
}


.number {
position: relative !important;
    z-index: 10 !important;
    font-size: 44px !important;
    font-weight: 950;
    line-height: 0.8;
    color: #fff;
    background: none !important;
    border: none !important;
    margin: 0;
            }

/* ---
 .show-roles .don .number,
.show-roles .mafia .number {
    box-shadow: 0 0 8px rgba(60, 65, 172, 0.8);
}

.show-roles .sheriff .number {
   box-shadow: 0 0 8px rgba(52, 201, 36, 0.8);
   } --- */
.nick {
position: relative !important;
    z-index: 10 !important;
    color: #fff;
    font-size: 20px !important;
    font-weight: 700;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Линия будет начинаться слева под ником */
    }
    
    .nick::after {
    content: "";
    display: block;
    width: 45px;
    height: 4px;
    background-color: #fff;
    margin-top: 6px;
}

/* --- ИСПРАВЛЕННЫЙ СТИЛЬ .player.speaking и @keyframes pulse (ОРАНЖЕВО-КРАСНЫЙ ПУЛЬС) --- */
/* Контейнер для анимации рамки */
.player.speaking {
   /* box-shadow: 0 0 20px rgba(255, 69, 0, 0.4); /* Мягкое внешнее свечение */
    border: 1px solid rgba(255, 69, 0, 0.5);   /* Оставляем базовую грань */
    filter: drop-shadow(0 0 10px rgba(255, 69, 0, 0.8)); /* Свечение всей формы */
    z-index: 100; /* Поднимаем говорящего выше остальных */
    
    }
    
    /* Создаем переливающийся слой под карточкой */
.player.speaking::after {
    content: "";
    position: absolute;
    top: -3px;    /* Рамка чуть шире самой карточки */
    left: -3px;
    right: -3px;
    bottom: -3px;
    z-index: -1;   /* Слой находится за фото и фоном */
    
    /* Градиент с цветами Spin & Play (Оранжевый, Красный, Золотой) */
    background: linear-gradient(60deg, #ff4500, #ff8c00, #ffd700, #ff4500);
    background-size: 300% 300%;
    
    border-radius: 18px; /* Чуть больше, чем у .player (15px + отступы) */
    animation: border-flow 2s linear infinite;
}

/* Анимация перелива */
@keyframes border-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse {
    0% { box-shadow: 0 0 30px 10px rgba(255, 69, 0, 0.8), 0 0 10px rgba(255, 165, 0, 0.5) inset; }
    50% { box-shadow: 0 0 15px 5px rgba(255, 140, 0, 0.6), 0 0 10px rgba(255, 165, 0, 0.5) inset; }
    100% { box-shadow: 0 0 30px 10px rgba(255, 69, 0, 0.8), 0 0 10px rgba(255, 165, 0, 0.5) inset; }
}


.speech-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background-image: url('content/icons/microphone.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 20;
}

.foul-label {
    position: absolute !important;
    bottom: 59px; 
    right: 8px;
    color: yellow;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    z-index: 30;
}

/* === ДОБАВЛЕНО/ИСПРАВЛЕНО: Стили для Ж.К. === */
.zhk-label {
    position: absolute;
    bottom: 37px !important;
    right: 5px;
    background-color: #ffd700; /* Золотой */
    color: black;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 5px;
    /* Добавим небольшую тень, чтобы метка не сливалась с фото */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 25; /* Высокий z-index */
}
.zhk .zhk-label {
    display: block;
}
/* ============================================== */

/* ===== top-left compact banners ===== */
#top-banner {
  position: fixed;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 9999;
  max-width: calc(100vw - 24px);
  pointer-events: none;
  font-family: Andale Mono, monospace;
}

#top-banner .banner {
  display:flex;
  align-items:center;
  gap:8px;
  background: rgba(50,50,50,0.56);
  padding:6px 10px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.04);
  min-height:36px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  pointer-events: auto;
  white-space: nowrap;
}

#top-banner .icon { width:20px; height:20px; display:block; }

#top-banner .values { display:flex; gap:6px; align-items:center; }

.chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:28px;
  padding:0 8px;
  border-radius:8px;
  font-size:20px;
  font-weight:800;
  color:#fff;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  white-space: nowrap;
}
#best-move-banner .title {
    font-weight: bold;
    color: white;
    margin-bottom: 4px;
}

#tournament-info-banner {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 15px;
    background: rgba(0,0,0,0.55);
    padding: 10px 20px;
    border-radius: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase !important;
    letter-spacing: 0.5px; /* Небольшой красивый отступ между буквами */
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);
    z-index: 9999;
    white-space: nowrap;
}
#tournament-name {
    border-right: 2px solid rgba(255,255,255,0.3);
    padding-right: 12px;
}

#game-info {
    padding-left: 12px;
    color: #ffff;
}

.chip.mafia { background-color: black; color: white; }
.chip.civil { background-color: red; color: white; }
.chip.sheriff { background-color: green; color: white; }
#top-banner .banner:hover { transform: translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,0.65); transition: all .12s ease; }

/* --- СМЕНА ЦВЕТА ПЛАШКИ ДЛЯ МАФИИ И ДОНА --- */

/* Когда открываются роли, меняем фон плашки игрока-мафии на черный */
.show-roles .mafia.player, 
.show-roles .don.player {
    background: rgba(0, 0, 0, 0.7) !important; /* Черный полупрозрачный */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Светлая рамка, чтобы не сливалось с фоном */
    box-shadow: 0 0px 30px rgba(0, 0, 0, 0.9); /* Более глубокая тень */
}

    
/* Цвет номера меняется только в режиме просмотра ролей
.show-roles .mafia .number,
.show-roles .don .number {
    color: #e63946 !important;
}

.show-roles .sheriff .number {
    color: #34C924 !important;
} */

/* Основной контейнер */
#nominated-banner {
    position: fixed;
    /* Поднимаем под ЛХ (настрой top под высоту своего ЛХ) */
    top: 75px; 
    left: 20px;
    width: 120px; /* Сделали уже */
    background: rgba(0, 0, 0, 0.9);
    border-radius: 10px; /* Скругление всего банера */
    overflow: hidden;
    display: none;
    flex-direction: column !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 999;
    transform: scale(0.9); /* Уменьшение масштаба всей панели */
    transform-origin: top left;
}

/* Основной контейнер (без фона, чтобы плашки были раздельными) */
#nominated-banner {
    position: fixed;
    top: 75px; /* Позиция под ЛХ */
    left: 20px;
    display: none;
    flex-direction: column !important;
    gap: 5px; /* Отступ между плашками */
    z-index: 999;
}

/* Белая шапка "ГОЛОСОВАНИЕ" */
#nominated-banner .title {
  /*   background: rgba(224, 224, 224, 0.9) !important; Полупрозрачный белый */
    color: #fff !important;
    padding: 2px 10px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    border-radius: 4px;
    text-transform: uppercase;
    width: fit-content;
    backdrop-filter: blur(4px); /* Эффект стекла для шапки */
    -webkit-backdrop-filter: blur(4px);
    margin-bottom: 4px;
}

/* Общий контейнер для строк */
#nominated-values {
    display: flex;
    flex-direction: column !important;
    gap: 2px;
    align-items: flex-start;
    
}

/* Плашка игрока в стиле ЛХ */
.nominee-row {
    display: flex;
    align-items: center;
    padding: 0px 15px 0px 3px;
    
    /* ЭФФЕКТ СТЕКЛА КАК У РОЛЕЙ/ЛХ */
    background: rgba(0, 0, 0, 0.7) !important; 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    
    border-radius: 10px; /* Скругление как у карточек */
    width: fit-content; /* Ширина по длине контента */
    box-sizing: border-box;
}

/* Кружок номера */
.nominee-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Цвета кружков */
.nominee-circle.civil { background: rgba(178, 34, 34, 0.85); }
.nominee-circle.mafia { background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.3); }
.nominee-circle.sheriff { background: rgba(178, 34, 34, 0.85); }

/* Никнейм */
.nominee-name {
    color: white;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.phase-banner {
   position: fixed;
    top: -60px; /* Скрытое состояние */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    opacity: 0;
    
    /* Темное стекло как у ЛХ */
    background: rgba(0, 0, 0, 0.55) !important; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Тонкая рамка и глубокая тень */
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); 
    
    padding: 5px 22px;
    border-radius: 8px; /* Умеренное скругление */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Анимация */
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);}

#game-phase-text {
   color: #fff; /* Мягкий белый */
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px; 
    font-weight: 500; 
    letter-spacing: 0.3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }


/* ================================================= */
/* === Настройки для КВАДРАТНЫХ ПЛАШЕК на 1920x1080 === */
/* ================================================= */
@media (min-width: 1920px) and (min-height: 1080px) {
    
    /* 1. Уменьшаем высоту footer, чтобы высота плашки (100%) стала равна ее новой ширине */
    footer {
        height: 168px; /* 15.6% ~168px от 1080px. Предыдущее значение было 20% (~216px) */
    	bottom: 30px !important;  /* Отступ от нижнего края экрана */
    	width: 94% !important;   /* Еще немного уже для больших отступов по бокам */
      left: 3% !important;
	}

    /* 2. Корректируем ширину плашки, чтобы 10 штук + маржины идеально заполнили 100% */
    .player {
       /* width: 8.75%;  */
	   width: 160px !important; 
        height: 160px !important;
        margin: 0 10px !important; /* Уменьшил расстояние между ними */
        position: relative;
        /* УБИРАЕМ overflow: hidden; чтобы голова могла выходить за рамки */
        overflow: visible !important; /* Чтобы фото не вылезало за границы */
    }
    
    /* 3. Корректируем фото, чтобы оно не уезжало вверх на более короткой плашке */
    .photo {
  	  position: absolute;
  	  /* Поднимаем фото выше, чтобы оно вылезало за верхний край */
        top: -65% !important;      /* Поднимаем меньше, чем -15% */
        height:225px !important;  /* 120%;  Немного уменьшаем высоту фото */
	   /* top: 0 !important;       Прижимаем к самому верху плашки */
        left: 0 !important;
        width:200px !important; /* 100% !important;*/
        /* Делаем высоту фото больше высоты плашки 
        height: 200% !important;*/
        transform: translateX(-50%); /* Центрируем фото по горизонтали */
        background-size: contain !important;
    	  background-repeat: no-repeat !important;
  	  background-position: bottom center !important;
  	  z-index: 5; /* Чтобы фото было над фоном плашки */
  	  box-shadow: none; /* Убираем тень, чтобы не было квадрата вокруг вылетающей головы */
        border-radius: 0; /* Убираем скругление у самого файла фото */
       /*  background-position: center top !important; Центрируем по горизонтали, прижимаем по вертикали */
      /*   background-size: cover !important;          Растягиваем фото без искажений */
    }
    /* ОЖИВЛЯЕМ НАСТОЯЩИЙ БЛОК ТУМАНА ИЗ HTML */
    .photo-fog {
        display: block !important; /* Принудительно показываем физический тег */
        position: absolute !important;
        
        /* Привязываем строго к координатам фотки, чтобы они идеально совпадали */
        top: -65% !important; 
        left: 0 !important;
        width: 160px !important; 
        height: 225px !important; 
        
        /* КРАСИВЫЙ ЧЕРНЫЙ МАТОВЫЙ ТУМАН */
        /* До половины (50%) фотография полностью прозрачная, чтобы лица игроков оставались четкими.
           От груди и ниже (50% -> 100%) градиент уходит в плотный черный цвет, плавно растворяя плечи в плашке */
        background: linear-gradient(to bottom, 
            rgba(0, 0, 0, 0) 0%, 
            rgba(0, 0, 0, 0) 50%, 
            rgba(0, 0, 0, 0.85) 100%
        ) !important;
        
        pointer-events: none !important;
        z-index: 9999 !important; /* Выбиваем на самый верхний слой, чтобы перекрыть все стыки */
    }
    
    /* 4. Корректируем положение иконок статуса и роли на более короткой плашке */
    .role {
        top: 5px;
        right: 5px;
    }
    
    
    .status {
        top: 5px;
        left: 5px;
    }
}

/* === Стили отображения Серых Карт (СК) на сцене === */
.gray-cards-container {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: none; /* Включается через JS */
    gap: 3px;
    z-index: 20;
    height: 24px;
}

.gray-card-item {
    width: 14px;
    height: 22px;
    background: linear-gradient(135deg, #555555 0%, #2b2b2b 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* === ТОЧЕЧНАЯ НАСТРОЙКА ВЫСТАВЛЕНИЙ: В СТРОКУ, БЕЗ ФОНА, СТРОГО ПОСЛЕ ЛХ === */

/* 1. Находим общий контейнер, где лежат все баннеры, и включаем в нём порядок (flex) */
body > div[style*="position: absolute; top: 20px;"] {
    display: flex !important;
    flex-direction: column !important; /* Строки выстраиваются сверху вниз */
}

/* 2. Задаем принудительный порядок отображения блоков (кто за кем идет) */
#best-move-banner {
    order: 1 !important; /* Лучший ход будет ВСЕГДА самым первым (наверху) */
}

#nominated-banner {
    order: 2 !important; /* Выставления встанут СТРОГО ПОСЛЕ Лучшего хода */
    
    background: transparent !important;       /* Убираем темный фон */
    background-color: transparent !important; /* Дублируем для надежности */
    backdrop-filter: none !important;         /* Убираем размытие */
    box-shadow: none !important;              /* Убираем тени плашки */
    border: none !important;                  /* Убираем рамки */
    
    /* Выстраиваем заголовок "Выставленные:" и цифры в одну горизонтальную линию */
    display: flex !important;                 
    flex-direction: row !important;           
    align-items: center !important;           
    
    padding: 0 !important;
    margin-bottom: 12px !important;           /* Отступ снизу, чтобы не наезжать на проверки */
}

#don-checks-banner {
    order: 3 !important; /* Проверки Дона пойдут ниже Выставлений */
}

#sheriff-checks-banner {
    order: 4 !important; /* Проверки Шерифа пойдут в самом низу */
}

/* === НАСТРОЙКА ВЕРХНИХ БАННЕРОВ: РОДНОЙ ФОН, ВЫСТАВЛЕНИЯ В СТРОКУ СТРОГО ПОСЛЕ ЛХ === */

/* 1. Находим контейнер всех баннеров и управляем их автоматическим порядком */
body > div[style*="position: absolute; top: 20px;"] {
    display: flex !important;
    flex-direction: column !important; /* Строки идут одна под другой */
}

/* 2. Задаем строгий порядок отображения на экране (кто за кем) */
#best-move-banner {
    order: 1 !important; /* Лучший ход ВСЕГДА самый первый (наверху) */
    margin-bottom: 12px !important; /* Отступ до следующей строки */
}

#nominated-banner {
    order: 2 !important; /* Выставления встанут СТРОГО ПОСЛЕ Лучшего хода */
    margin-bottom: 12px !important; /* Отступ до проверок Дона/Шерифа */
    
    /* Сохраняем ваш ОРИГИНАЛЬНЫЙ ТЁМНЫЙ ФОН БАННЕРА */
    background: rgba(0, 0, 0, 0.6) !important; 
    backdrop-filter: blur(5px) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    padding: 10px 20px !important;
    width: fit-content !important; /* Баннер растягивается только по длине текста и цифр */
    
    /* Переключаем внутренности в режим строки: Заголовок и цифры будут в один горизонтальный ряд */
    display: flex !important;                 
    flex-direction: row !important;           
    align-items: center !important;           
}

#don-checks-banner {
    order: 3 !important; /* Проверки Дона пойдут ниже */
    margin-bottom: 12px !important;
}

#sheriff-checks-banner {
    order: 4 !important; /* Проверки Шерифа будут в самом низу */
}

/* ========================================================================= */
/* ИДЕАЛЬНОЕ ВЫРАВНИВАНИЕ И ОДИНАКОВЫЙ ЦВЕТ ДЛЯ ЛХ И ВЫСТАВЛЕНИЙ */
/* ========================================================================= */
/* ИСПРАВЛЕННЫЙ ВАРИАНТ: АВТОСКРЫТИЕ, ОДИНАКОВАЯ ВЫСОТА И ОТСТУПЫ ДЛЯ ИКОНОК */

/* 1. Общий контейнер — выстраиваем строки строго друг под другом */
body > div[style*="position: absolute; top: 20px;"],
#top-banner {
    display: flex !important;
    flex-direction: column !important; 
    align-items: flex-start !important;
    gap: 10px !important;              /* Отступ между строками баннеров */
}

/* 2. ОДИНАКОВЫЙ СТИЛЬ ФОНА И СТРОГАЯ ВЫСОТА ДЛЯ ВСЕХ ЧЕТЫРЕХ БАННЕРОВ */
#best-move-banner,
#nominated-banner,
#don-checks-banner,
#sheriff-checks-banner {
    position: static !important; 
    margin: 0 !important;
    
    /* СКРЫТИЕ ПО УМОЛЧАНИЮ (Пока JS не включит display: flex, баннеры невидимы и сжаты) */
    display: none;
    opacity: 0;
    
    /* Одинаковый фирменный темный фон с эффектом стекла */
    background: rgba(0, 0, 0, 0.7) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55) !important;
    
    padding: 6px 15px !important;
    width: fit-content !important;     /* Ширина подстраивается автоматически под контент */
    
    /* СТРОГАЯ ОДИНАКОВАЯ ВЫСОТА ДЛЯ ВСЕХ */
    height: 42px !important;           
    box-sizing: border-box !important;
}

/* Когда ваш JS включает 'flex', этот CSS-селектор мгновенно делает баннер видимым */
#best-move-banner[style*="display: flex"],
#nominated-banner[style*="display: flex"],
#don-checks-banner[style*="display: flex"],
#sheriff-checks-banner[style*="display: flex"] {
    display: flex !important;
    opacity: 1 !important;
    flex-direction: row !important;           
    align-items: center !important;  
    justify-content: flex-start !important;
}

/* 3. ОТСТУП ОТ ИКОНОК В ПРОВЕРКАХ ДОНА И ШЕРИФА */
#don-checks-banner .icon,
#sheriff-checks-banner .icon {
    margin-right: 12px !important;     /* Отступ справа от круглой иконки до текста проверки */
    flex-shrink: 0 !important;
}

/* 4. ОДИНАКОВЫЙ СТИЛЬ ДЛЯ ВСЕХ ЗАГОЛОВКОВ */
#best-move-banner .title,
#best-move-banner .banner-title,
#nominated-banner .title,
#nominated-banner .banner-title,
#don-checks-banner .title,
#don-checks-banner .banner-title,
#sheriff-checks-banner .title,
#sheriff-checks-banner .banner-title {
    display: flex !important;
    align-items: center !important;       
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-right: 15px !important;     /* Отступ от текста заголовка до плашек */
    
    color: #ffffff !important;
    font-size: 15px !important; 
    font-weight: 900 !important;
    text-transform: uppercase !important;
    background: transparent !important;    
    border: none !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* 5. КОНТЕЙНЕРЫ ДЛЯ ПЛАШЕК */
#best-move-values,
#nominated-values,
#don-values,
#sheriff-values {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;   
    gap: 6px !important;               /* Расстояние между плашками с цифрами */
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

/* 6. ИДЕНТИЧНЫЕ КВАДРАТНЫЕ ПЛАШКИ С ЦИФРАМИ ДЛЯ ВСЕХ БАННЕРОВ */
#best-move-banner .chip,
#nominated-banner .chip,
#nominated-values .chip,
#nominated-banner .nominee-circle,
#don-checks-banner .chip,
#sheriff-checks-banner .chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;    
    
    /* Размеры и скругление один в один как у вашего ЛХ (.chip) */
    min-width: 22px !important;
    height: 28px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;     /* Ровные прямоугольники со скруглением */
    
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    margin: 0 !important;
    line-height: 1 !important;
}