@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Unbounded', sans-serif;
    /* Квадратный клеточный фон - 6 клеток по ширине на всю страницу */
    background: #ffffff;
    /* 100vw / 6 = размер одной клетки по ширине */
    /* Линия 3px (сделали толще) */
    background-image: 
        repeating-linear-gradient(
            0deg, 
            transparent, 
            transparent calc((100vw / 6) - 3px), 
            rgba(208, 224, 255, 0.3) calc((100vw / 6) - 3px), 
            rgba(208, 224, 255, 0.3) calc(100vw / 6)
        ),
        repeating-linear-gradient(
            90deg, 
            transparent, 
            transparent calc((100vw / 6) - 3px), 
            rgba(208, 224, 255, 0.3) calc((100vw / 6) - 3px), 
            rgba(208, 224, 255, 0.3) calc(100vw / 6)
        );
    /* Убираем fixed, чтобы фон двигался со страницей */
    background-attachment: scroll;
    background-size: 100vw 100vh;
    color: #333;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Загрузочный экран */
.loader-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    max-width: 200px;
    margin-bottom: 30px;
    animation: fadeInLogo 1s ease-in;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4a90e2;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Баннер тестового режима */
.test-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ff9800;
    color: white;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    z-index: 10000;
}

/* Hero секция без собственного фона */
.hero {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* Убираем отдельный фон - используем общий фон body */
    background: transparent;
}

/* Уменьшенные овальные градиентные лучи */
.hero-decoration {
    position: absolute;
    /* Узкие и высокие овалы (примерно 1/5 ширины экрана) */
    width: 25vw;
    height: 90vh;
    border-radius: 50%;
    filter: blur(70px); /* Чуть мягче */
    opacity: 0.75; /* Средняя яркость (между 0.6 и 0.9) */
    pointer-events: none;
}

.hero-decoration.left {
    left: -12vw; /* Сдвигаем наполовину за экран */
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(60, 130, 255, 1) 0%, /* Более яркий голубой */
        rgba(60, 130, 255, 0.8) 30%,
        rgba(60, 130, 255, 0.4) 60%,
        transparent 80%
    );
}

.hero-decoration.right {
    right: -12vw; /* Сдвигаем наполовину за экран */
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(30, 100, 255, 1) 0%, /* Более яркий синий */
        rgba(30, 100, 255, 0.8) 30%,
        rgba(30, 100, 255, 0.4) 60%,
        transparent 80%
    );
}

.hero-content {
    text-align: center;
    z-index: 10;
}

.logo {
    max-width: 300px;
    margin-bottom: 30px;
    animation: fadeIn 1s ease-in;
}

.statue {
    max-width: 400px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.btn-vote-start {
    margin-top: 40px;
    padding: 0;
    width: 300px;
    height: 50px;
    font-size: 18px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-vote-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.6);
}

/* Основные номинации - убрали окошки, оставили только видео */
.nominations-main {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background: transparent;
}

.nominations-main h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    color: #357abd;
}

.nomination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.nomination-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    text-align: center;
    box-shadow: none;
    transition: none;
    border: none;
}

/* Убрали hover эффект подпрыгивания */
.nomination-card:hover {
    transform: none;
}

/* Квадратное видео 1:1 с прозрачным фоном и радиальным градиентом */
.nomination-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: transparent !important;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    overflow: visible;
    position: relative;
    /* Убираем любой фон */
    background-color: transparent !important;
    background-image: none !important;
    /* Важно для chroma key */
    isolation: isolate;
}

/* Радиальный градиент сзади основных номинаций */
.nomination-image-placeholder::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(41, 98, 255, 0.4) 0%,
        rgba(0, 71, 171, 0.3) 30%,
        rgba(41, 98, 255, 0.17) 50%,
        transparent 70%
    );
    z-index: -1;
    border-radius: 50%;
    filter: blur(30px);
}

/* Настройки для видео с прозрачностью */
.nomination-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0;
}

/* Убираем все возможные фоны у video */
video {
    background: transparent !important;
    background-color: transparent !important;
}

/* Поддержка APNG (animated PNG) */
.nomination-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent !important;
}

/* Поддержка анимированных WebP */
.nomination-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent !important;
}

.nomination-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #357abd;
}

.btn-vote {
    padding: 0;
    width: 200px;
    height: 50px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-vote:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.5);
}

/* Карусель дополнительных номинаций */
.nominations-extra {
    padding: 50px 0;
    background: transparent;
    overflow: hidden; /* Важно! Предотвращает горизонтальный скролл */
    width: 100%;
    max-width: 100vw;
}

.nominations-extra h2 {
    text-align: center;
    font-size: 36px; /* Увеличили с 32px до 36px */
    margin-bottom: 30px;
    color: #357abd;
    padding: 0 20px;
    font-weight: 700;
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden; /* Скрываем выходящие элементы */
    padding: 20px 0;
}

.carousel-wrapper {
    display: flex;
    justify-content: flex-start; /* Изменено с center на flex-start для корректной работы JS */
    align-items: center;
    position: relative;
    width: 100%;
    overflow: visible;
    min-height: 600px; /* Увеличили высоту (было 450px) чтобы влезали 2 строки и масштаб */
}

.carousel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0px; /* Убрали отступы (было 10px) */
    transition: transform 0.4s ease-out;
    will-change: transform;
    cursor: grab;
    user-select: none;
    flex-shrink: 0; /* Добавлено: предотвращает сжатие ленты карусели */
}

/* Класс для отключения анимаций при телепортации карусели */
.carousel.no-transition,
.carousel.no-transition .carousel-item,
.carousel.no-transition .item-vote-btn { /* Добавили кнопку, чтобы она не прыгала */
    transition: none !important;
}

.carousel:active {
    cursor: grabbing;
}

.carousel-item {
    flex: 0 0 auto;
    width: 260px;
    text-align: center;
    transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
    opacity: 0.4;
    transform: scale(0.8);
    filter: brightness(0.6);
    
    /* Запрещаем выделение текста и картинок для удобного свайпа */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    /* Для правильного позиционирования кнопки внутри */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-item.center {
    opacity: 1;
    transform: scale(1.5); /* Увеличили масштаб (было 1.25) */
    filter: brightness(1);
    z-index: 10;
}

.carousel-item.neighbor {
    opacity: 0.6;
    transform: scale(0.9); /* Соседи тоже чуть больше */
    filter: brightness(0.75);
    z-index: 5;
}

.carousel-image-placeholder {
    width: 260px;
    height: 260px;
    /* Убираем фон и тень */
    background: transparent !important;
    box-shadow: none;
    
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Изменено с cover на contain, чтобы картинка влезала целиком */
    user-select: none;
    pointer-events: none;
    border-radius: 20px;
}

.carousel-item h4 {
    margin-top: 15px;
    font-size: 24px; /* Увеличили с 20px до 24px */
    color: #357abd;
    font-weight: 600;
    word-break: break-word;
    padding: 0 10px;
    white-space: pre-line; /* Поддержка переноса строк через \n */
    line-height: 1.2; /* Компактный интервал для многострочного текста */
}

/* Новая кнопка внутри карточки */
.item-vote-btn {
    margin-top: 15px;
    width: 180px;
    height: 45px;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
    
    /* Скрыта по умолчанию */
    opacity: 0;
    /* Уменьшили смещение (было 20px) для более спокойного появления */
    transform: translateY(10px); 
    pointer-events: none;
    /* Заменили резкую пружину на плавный ease */
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Показываем кнопку только у центрального элемента */
.carousel-item.center .item-vote-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Включаем клики */
}

/* Добавляем эффект при наведении */
.item-vote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.6);
}

.item-vote-btn:active {
    transform: scale(0.95);
}

/* Старую обертку кнопки скрываем/удаляем стили */
.carousel-vote-wrapper {
    display: none;
}

/* Улучшенные стрелки карусели */
.carousel-btn {
    width: 50px;
    height: 50px;
    /* Синий градиент как у остальных кнопок */
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    font-weight: 300;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
    z-index: 30;
    
    /* Убираем старые эффекты стекла */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* Визуальная коррекция положения стрелки (поднимаем чуть выше) */
    padding-bottom: 4px;
}

.carousel-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.6);
}

.carousel-btn:active {
    transform: scale(0.95);
}

.carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%; /* Добавлено: гарантирует растягивание на всю ширину */
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    pointer-events: none;
    z-index: 20;
}

.carousel-counter {
    text-align: center;
    margin-top: 15px;
    font-size: 15px;
    color: #357abd;
    font-weight: 600;
    width: 100%; /* Добавлено: гарантирует центрирование текста */
}

/* Модальное окно */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

.modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 20px; /* Уменьшили padding с 30px для большей вместимости */
    border-radius: 15px;
    width: 95%; /* Увеличили ширину с 90% */
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
}

.close:hover {
    color: #333;
}

#modal-title {
    margin-bottom: 30px;
    color: #357abd;
    font-size: 18px; /* Уменьшили шрифт с 24px */
    text-align: center;
}

.nominees-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Два столбца */
    gap: 20px; /* Увеличили отступы для 3D эффекта */
    margin-bottom: 20px;
    padding: 10px;
    padding-bottom: 80px;
}

.nominee-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: transparent;
    border: none !important;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
    perspective: 1000px;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
    /* Плавное увеличение масштаба (отдельно от 3D вращения) */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}

/* Внутренний контейнер для трансформаций */
.nominee-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* Быстрая реакция для 3D поворота */
    transition: transform 0.1s ease-out;
    border-radius: 20px;
    overflow: hidden;
}

/* Статичный блик в углу */
.nominee-card-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Градиент в правом нижнем углу - делаем мягче и прозрачнее */
    background: radial-gradient(
        circle at 100% 100%, 
        rgba(255, 255, 255, 0.5) 0%, 
        rgba(255, 255, 255, 0.2) 30%, 
        rgba(255, 255, 255, 0) 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5; /* Поверх картинки */
}

/* Показываем блик при наведении и выборе */
.nominee-card:hover .nominee-card-inner::after,
.nominee-card.selected .nominee-card-inner::after {
    opacity: 1;
}

.nominee-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
    pointer-events: none;
}

/* Состояние выбора */
.nominee-card.selected .nominee-card-inner {
    /* Уменьшение внутренней части при выборе */
    transform: scale(0.95) !important; 
    box-shadow: none;
    border-radius: 20px;
    border: 3px solid #357abd;
}

/* Увеличение карточки при наведении (обрабатывается CSS для плавности) */
.nominee-card:hover {
    transform: scale(1.05); /* Увеличиваем при наведении */
    z-index: 100; /* Поверх остальных */
}

/* Если карточка выбрана, убираем увеличение от hover, чтобы не было конфликтов */
.nominee-card.selected:hover {
    transform: none;
    z-index: 1;
}

/* Фиксированный футер модального окна */
.modal-footer {
    position: absolute; /* Позиционируем относительно модального окна */
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.05);
    
    /* Скрыт по умолчанию (уехал вниз) */
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    z-index: 1010;
    display: flex;
    justify-content: center;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
}

.modal-footer.visible {
    /* Выезжает вверх */
    transform: translateY(0);
}

.btn-confirm {
    width: 100%;
    max-width: 350px;
    height: 50px;
    margin: 0; /* Убираем margin, так как центрирует flex */
    padding: 0;
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Убираем старую анимацию, теперь анимируется футер */
    animation: none;
}

.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
}

.hidden {
    display: none !important;
}

/* Футер */
footer {
    text-align: center;
    padding: 10px 5px; /* Еще уменьшили отступы */
    background: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(240, 240, 240, 0.5);
}

.footer-logo {
    max-width: 60px; /* Еще уменьшили логотип */
    margin-bottom: 5px;
}

footer p {
    color: #666;
    font-size: 10px; /* Уменьшили шрифт (было 12px) */
}

footer a {
    color: #aaa; /* Очень бледный серый */
    font-size: 9px; /* Меньше основного текста */
    text-decoration: none;
    display: inline-block;
    margin-top: 3px;
    transition: color 0.3s;
}

footer a:hover {
    color: #888;
}

/* Адаптив */
@media (max-width: 768px) {
    body {
        /* На мобильных тоже 6 клеток с толстыми линиями */
        background-image: 
            repeating-linear-gradient(
                0deg, 
                transparent, 
                transparent calc((100vw / 6) - 3px), 
                rgba(208, 224, 255, 0.3) calc((100vw / 6) - 3px), 
                rgba(208, 224, 255, 0.3) calc(100vw / 6)
            ),
            repeating-linear-gradient(
                90deg, 
                transparent, 
                transparent calc((100vw / 6) - 3px), 
                rgba(208, 224, 255, 0.3) calc((100vw / 6) - 3px), 
                rgba(208, 224, 255, 0.3) calc(100vw / 6)
            );
        background-attachment: scroll;
    }

    
    .hero-decoration {
        width: 40vw; /* На мобильных делаем чуть шире, чтобы было видно */
        height: 70vh;
    }
    
    .hero-decoration.left {
        left: -20vw;
    }
    
    .hero-decoration.right {
        right: -20vw;
    }
    
    .nomination-image-placeholder {
        aspect-ratio: 1 / 1;
    }
    
    .nominations-extra {
        padding: 40px 0;
    }
    
    .nominations-extra h2 {
        font-size: 30px; /* Увеличили для планшетов */
        margin-bottom: 25px;
    }
    
    .carousel-wrapper {
        min-height: 600px; /* Увеличили высоту (было 550px) */
    }
    
    .carousel {
        gap: 0px; /* Убрали отступы */
    }
    
    .carousel-item {
        width: 240px;
    }
    
    .carousel-item.center {
        transform: scale(1.5) !important; /* Увеличили масштаб */
    }
    
    .carousel-image-placeholder {
        width: 240px;
        height: 240px;
    }
    
    .carousel-item h4 {
        font-size: 22px; /* Увеличили для планшетов (было 18px) */
        margin-top: 8px;
    }
    
    .carousel-item.neighbor {
        transform: scale(0.85) !important;
    }
    
    #extra-vote-btn {
        width: 180px;
        height: 46px;
        font-size: 15px;
    }
    
    .carousel {
        gap: 30px;
        padding: 50px 0;
    }
    
    .carousel-item {
        flex: 0 0 auto;
        width: 280px;
    }
    
    .carousel-item,
    .carousel-image-placeholder {
        width: 280px;
        height: 280px;
    }
    
    .carousel-item h4 {
        font-size: 15px;
    }
    
    .carousel-item.center {
        transform: scale(1.15) !important;
    }
    
    .carousel-item.neighbor {
        transform: scale(0.8);
    }
    
    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .item-vote-btn {
        width: 160px;
        height: 40px;
        font-size: 14px;
        margin-top: 10px;
    }
    
    .nominees-grid {
        /* Исправляем на 2 колонки на мобильных */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .loader-logo {
        max-width: 150px;
    }
    
    .loader-spinner {
        width: 50px;
        height: 50px;
    }

    .nominations-extra {
        padding: 30px 5px;
    }
    
    .nominations-extra h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .carousel-wrapper {
        min-height: 280px;
    }
    
    .carousel {
        gap: 12px;
        padding: 10px 0;
    }
    
    .carousel-item {
        width: 180px;
    }
    
    .carousel-image-placeholder {
        width: 180px;
        height: 180px;
    }
    
    .carousel-item h4 {
        font-size: 12px;
        margin-top: 8px;
    }
    
    .carousel-item.center {
        transform: scale(1) !important;
    }
    
    .carousel-item.neighbor {
        transform: scale(0.75) !important;
    }
    
    .carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .carousel-counter {
        font-size: 13px;
        margin-top: 12px;
    }
    
    #extra-vote-btn {
        width: 160px;
        height: 42px;
        font-size: 14px;
    }
    
    .item-vote-btn {
        width: 160px;
        height: 40px;
        font-size: 14px;
        margin-top: 10px;
    }
}

/* Для очень узких экранов (Telegram WebApp 400px) */
@media (max-width: 500px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .nominations-extra {
        padding: 30px 0;
    }
    
    .nominations-extra h2 {
        font-size: 26px; /* Увеличили для мобильных */
        margin-bottom: 20px;
    }

    .carousel-container {
        padding: 15px 0;
    }

    .carousel-wrapper {
        min-height: 550px; /* Увеличили высоту (было 480px) */
    }

    .carousel {
        gap: 0px;
    }
    
    .carousel-item {
        width: 200px;
    }
    
    .carousel-item.center {
        transform: scale(1.4); /* Увеличили масштаб */
    }
    
    .carousel-item.neighbor {
        transform: scale(0.85);
        opacity: 0.5;
    }

    .carousel-image-placeholder {
        width: 200px;
        height: 200px;
        border-radius: 15px;
    }

    .carousel-item h4 {
        font-size: 20px; /* Увеличили для мобильных (было 16px) */
        margin-top: 10px;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .carousel-controls {
        padding: 0 5px;
    }

    .carousel-counter {
        font-size: 13px;
        margin-top: 12px;
    }

    .carousel-vote-wrapper {
        margin-top: 15px;
        min-height: 50px;
    }

    #extra-vote-btn {
        width: 170px;
        height: 44px;
        font-size: 14px;
    }
    
    .item-vote-btn {
        width: 150px;
        height: 38px;
        font-size: 13px;
        margin-top: 8px;
    }
}

/* Убираем старые стили extra-vote-container */
.extra-vote-container {
    display: none;
}