/* =============================================================================
   ГЛАВНАЯ СТРАНИЦА - СТИЛИ
   =============================================================================
   Использует дизайн-токены из tokens.css
   ============================================================================= */

/* Стили для прелоадера */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;  /* Above everything including nav */
    z-index: 9999;
    transition: opacity 0.4s var(--transition-normal);
}

.dice-loader {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Дополнительное центрирование для страниц без полосы загрузки */
.preloader:not(:has(.preloader-progress)) .dice-loader {
    width: 80px;
    height: 80px;
}

.logo-animation {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Стили для полоски загрузки прелоадера (только для главной страницы) */
.preloader-progress {
    margin-top: var(--space-5);
    width: 120px;
    height: 5px;
    background-color: var(--color-surface-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.preloader-progress-bar {
    height: 100%;
    background: var(--gradient-button);
    border-radius: var(--radius-full);
    width: 0%;
    transition: width 0.3s ease;
    animation: preloader-pulse 1.5s ease-in-out infinite;
}

/* @keyframes preloader-pulse - определён в foundations/_animations.css */

.dice {
    font-size: 48px;
    animation: dice-bounce 1.5s infinite;
}

.loader-text {
    margin-top: var(--space-5);
    font-size: var(--text-lg);
    color: var(--color-text);
    font-weight: var(--weight-medium);
}

.preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* CSS спиннер для страниц без TGS (profile, tasks, leaderboard, events) */
.preloader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-surface-secondary);
    border-top-color: var(--color-selected-border);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* @keyframes dice-bounce, logo-shine - определены в foundations/_animations.css */

/* =============================================================================
   CSS ПЕРЕМЕННЫЕ ПЕРЕНЕСЕНЫ В foundations/_variables.css
   СТИЛИ СКРОЛЛБАРОВ ПЕРЕНЕСЕНЫ В foundations/_reset.css
   ============================================================================= */

/* Стили для экрана загрузки */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.4s ease-out;
    pointer-events: auto;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
}

/* .loading-spinner ПЕРЕНЕСЕН В components/buttons.css */

.loading-text {
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
}

/* @keyframes spin ОПРЕДЕЛЁН В foundations/_animations.css */

/* Глобальные reset стили * и body перенесены в foundations/_reset.css */
/* .container ПЕРЕНЕСЕН В foundations/_reset.css */

/* Добавляем стили для отображения баланса */
.balance-display {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    flex-shrink: 0;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-s);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.balance-display:hover {
    background-color: var(--color-surface-secondary);
    transform: scale(1.05);
}

.balance-display:active {
    transform: scale(0.98);
}


/* .cost-tag ПЕРЕНЕСЕН В components/buttons.css */



/* Стили для иконки кристалла в уведомлениях */
.giftgo-notification {
    display: flex;
    align-items: center;
}



/* Контейнер для слайдера ставок (layout) */
.bet-options-container {
    width: 100%;
    margin-bottom: var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
}

.bet-options-container::-webkit-scrollbar {
    display: none;
}

.bet-options {
    display: flex;
    gap: var(--space-2);
    padding: 0;
    width: max-content;
    margin: 0;
    justify-content: flex-start;
}

.bet-options.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

/* Стили для кнопок ставок во время прокрутки */
.bet-options.disabled .bet-option {
    pointer-events: none;
    cursor: not-allowed;
}

/* .bet-option стили ПЕРЕНЕСЕНЫ В components/buttons.css */



/* Стили для окна лотереи */
.lottery-container {
    position: relative;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: none;
    max-width: 757px;
    margin-left: auto;
    margin-right: auto;
}

.lottery-window {
    position: relative;
    height: 196px;
    overflow: hidden;
    border-radius: var(--radius-l);
    background-color: var(--color-bg);
    padding: 3px 0;
}

/* Затемнение по бокам барабана - мягкий fade */
.lottery-window:before, 
.lottery-window:after {
    content: '';
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.lottery-window:before {
    left: 0;
    background: linear-gradient(
        to right, 
        var(--lottery-fade-start), 
        var(--lottery-fade-mid) 40%, 
        var(--lottery-fade-end)
    );
}

.lottery-window:after {
    right: 0;
    background: linear-gradient(
        to left, 
        var(--lottery-fade-start), 
        var(--lottery-fade-mid) 40%, 
        var(--lottery-fade-end)
    );
}

.lottery-items {
    display: flex;
    position: absolute;
    left: 0;
    top: 3px;
    height: calc(100% - 6px);
    align-items: center;
    /* Базовый transition установлен в JavaScript динамически */
    
    /* 🚀 GPU-оптимизация для плавных анимаций без подергиваний */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Медленная анимация прокрутки для режима ожидания */
.lottery-items.idle-animation {
    animation: lottery-idle-scroll 60s linear infinite;
}

/* @keyframes lottery-idle-scroll - определён в foundations/_animations.css */

.lottery-item {
    width: 150px;
    height: 186px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
    position: relative;
    overflow: hidden;
    pointer-events: auto !important;
    border: 1px solid transparent;
    background: 
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(to bottom left, var(--border-gradient-start), var(--border-gradient-end)) border-box;
}

/* Улучшенная анимация блеска */
.lottery-item:before {
    display: none; /* Полностью убираем отблеск */
}

/* Стиль для выигрышного предмета */
.lottery-item.highlight {
    background-color: var(--color-surface);
    transform: scale(1);
    border-color: var(--color-selected-border);
    z-index: 5;
}

.lottery-item.winning-item.highlight:before {
    display: none;
}

/* @keyframes winner-pulse - удалён (был пустым, определён в _animations.css) */

/* @keyframes winner-shine, shine - определены в foundations/_animations.css */

.lottery-item-icon {
    font-size: 65px /* Очень большие элементы */;
    margin-bottom: 10px;
    animation: pulse 1.5s infinite;
    position: relative;
    width: 95px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Увеличиваем анимацию для выигрышного предмета */
.lottery-item.highlight .lottery-item-icon {
    animation: winner-icon-pulse 1s infinite;
    font-size: 65px /* Очень большие элементы */; /* Возвращаем к обычному размеру */
}

/* @keyframes winner-icon-pulse, pulse - определены в foundations/_animations.css */

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

.gift-price-tag,
.lottery-item-price,
.gift-price {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    background-color: var(--color-price-bg);
    color: var(--color-price-text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    box-shadow: none;
    margin: var(--space-1) auto 0;
    width: fit-content;
}

/* Удалены дублирующие определения .lottery-item-price и .gift-price -
   теперь все используют единый стиль выше */





.gift-price-value {
    font-size: var(--text-md);
}

.indicator {
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--gradient-button);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: none;
    border-radius: 0;
}

/* Удаляем стрелки и анимацию пульсации */
.indicator:before,
.indicator:after {
    display: none;
}

/* Стили для нижнего инфо-блока */
.info-section {
    margin-bottom: var(--space-3);
    position: relative;
}

/* .demo-mode, .switch, .slider, .spin-button, .free-tag ПЕРЕНЕСЕНЫ В components/buttons.css */

.history-bet {
    display: flex;
    align-items: center;
}

/* Секция с возможными выигрышами */
.chances-section {
    margin-top: var(--space-4);
}

.chances-section h3 {
    margin-bottom: var(--space-2);
    text-align: center;
    font-size: var(--text-md);
    font-weight: var(--weight-normal);
    color: var(--color-text-secondary);
    position: relative;
    display: inline-block;
    width: 100%;
}

.chances-section h3:after {
    content: none;
}

.gifts-container {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    padding: 10px var(--space-2) var(--space-2) var(--space-2);
    gap: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    transition: scroll-left 2s cubic-bezier(0.2, 0.0, 0.1, 1.0);
    pointer-events: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gifts-container::-webkit-scrollbar {
    display: none;
}

.gift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--radius-m);
    padding: var(--space-4);
    min-width: 90px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    box-shadow: var(--shadow-sm);
    pointer-events: auto !important;
    position: relative;
    scroll-snap-align: start;
    border: 1px solid transparent;
    background: 
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(to bottom left, var(--border-gradient-start), var(--border-gradient-end)) border-box;
    overflow: visible;
}

.gift-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.gift-item:active {
    transform: scale(0.98);
}

.gift-icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.gift-chance {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* =============================================================================
   МОДАЛЬНЫЕ ОКНА - ОСНОВНЫЕ СТИЛИ ПЕРЕНЕСЕНЫ В components/modals.css
   Здесь остаются только специфичные стили для tgs-player
   ============================================================================= */

/* Стили для tgs-player в окне подарка (глобальный стиль для компонента) */
tgs-player {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
}

/* Стили для анимации обновления баланса */
.balance-update {
    position: fixed;
    top: 0;
    right: 0;
    font-size: var(--font-size-large);
    font-weight: normal;
    z-index: 1100;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    text-align: right;
    display: flex;
    align-items: center;
}

/* Цвета для положительных и отрицательных значений */
.balance-update.positive-value {
    color: var(--color-success);
    font-weight: var(--weight-medium);
}

.balance-update.negative-value {
    color: var(--color-error);
    font-weight: var(--weight-medium);
}



/* Стили для информации о пользователе */
.user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    width: 100%;
    border-radius: var(--radius-l);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
    background: 
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(to bottom left, var(--border-gradient-start), var(--border-gradient-end)) border-box;
}

.user-info .user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: var(--space-3);
    background-color: var(--color-surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-info .user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info .user-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text-inverse);
    background: var(--gradient-button);
}

.user-details {
    flex-grow: 1;
    margin-right: var(--space-3);
}

.user-info .user-name {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.user-info .user-stats {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

/* .bet-option.disabled, .spin-button.disabled, .demo-mode.disabled ПЕРЕНЕСЕНЫ В components/buttons.css */
.bet-options.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

/* Анимация подсветки кнопки профиля */
.profile-highlight {
    animation: profile-pulse 0.5s ease-out;
    position: relative;
    z-index: 10;
}

/* @keyframes profile-pulse - определён в foundations/_animations.css */

/* Стиль для анимируемого подарка */
.animated-gift {
    animation: gift-rotate 0.8s ease-in;
}

/* @keyframes gift-rotate - определён в foundations/_animations.css */

lottie-player {
    width: 100%;
    height: 100%;
}

#giftModalGift {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

/* Стили для модального окна пополнения баланса */
.top-up-animation {
    margin: 10px auto 15px;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* #topUpModal стили ПЕРЕНЕСЕНЫ В components/modals.css */

.terms-text {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    margin: var(--space-4) 0 var(--space-1);
    line-height: 1.4;
    max-width: 300px;
    text-align: center;
    padding-bottom: var(--space-3);
}

.terms-text a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: var(--weight-medium);
}

.top-up-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    max-width: 340px;
    width: 100%;
}

.top-up-option {
    background: var(--gradient-button);
    color: #FFFFFF;
    border-radius: var(--radius-m);
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform var(--transition-fast);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

.top-up-option:active {
    transform: scale(0.98);
}

.top-up-option:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.stars-option {
    display: flex;
    align-items: center;
    font-size: var(--font-size-medium);
    font-weight: 500;
    gap: 6px;
}

.stars-icon {
    font-size: var(--font-size-large);
}

.coins-value {
    font-weight: 600;
    font-size: var(--font-size-large);
    display: flex;
    align-items: center;
}

/* @keyframes option-pulse ОПРЕДЕЛЁН В foundations/_animations.css */

/* .loading-spinner-small ПЕРЕНЕСЁН В components/buttons.css */

.top-up-option.loading {
    justify-content: center;
    align-items: center;
    height: 48px;
    pointer-events: none;
}

/* =============================================================================
   СТИЛИ ДЛЯ TIER-ОБВОДОК И ИНДИКАТОРОВ ПЕРЕНЕСЕНЫ В components/labels.css
   =============================================================================
   .gift-price-tier-*, .gift-limited, .gift-upgradable, .gift-indicator,
   .limited-indicator, .upgrade-indicator, .premium-indicator
   ============================================================================= */

.gift-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Стили для миниатюр и индикаторов в барабане лотереи */
.lottery-item-icon img.gift-thumbnail {
    max-width: 100%;
    max-height: 100%;
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.lottery-item.highlight .lottery-item-icon img.gift-thumbnail {
    transform: scale(1.05);
}

/* Стили для выигрышного элемента в барабане */
.lottery-item.winning {
    position: relative;
    z-index: 2;
}

/* Уменьшенная миниатюра для профиля */
.gift-thumbnail-small {
    max-width: 100%;
    max-height: 100%;
}

.lottery-item-icon .gift-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: var(--font-size-body);
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: none; /* Скрываем все индикаторы */
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 1;
}

.lottery-item-icon .limited-indicator {
    background: linear-gradient(135deg, #FF5722, #FF9800);
}

.lottery-item-icon .upgrade-indicator {
    background: linear-gradient(135deg, #2196F3, #03A9F4);
}

.lottery-item-icon .premium-indicator {
    background: linear-gradient(135deg, #9E9E9E, #BDBDBD);
}

/* Позиционирование индикатора */
.lottery-item-icon {
    position: relative;
}

/* .confirmation-dialog, .win-modal-content, #modalGift ПЕРЕНЕСЕНЫ В components/modals.css */

/* =============================================================================
   СТИЛИ ДЛЯ ЛЕЙБЛОВ ПЕРЕНЕСЕНЫ В components/labels.css
   =============================================================================
   Все стили для .limited-label, .exclusive-label, .nft-label, .crystals-label
   и их tier-вариантов теперь находятся в ОДНОМ месте: components/labels.css
   ============================================================================= */

/* .skip-button ПЕРЕНЕСЕН В components/buttons.css */

/* Стили для .gift-info-icon и tier-specific лейблов перенесены в components/labels.css */

/* Стили для шкалы прогресса опыта */
.exp-progress-container {
    width: 100%;
    height: 6px;
    background-color: var(--color-surface-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-1);
}

.exp-progress-container.header {
    height: 4px;
    margin-top: 0;
    margin-bottom: 0;
    width: 90px;
    background-color: var(--color-surface-secondary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.exp-progress-bar {
    height: 100%;
    background: var(--gradient-button);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.exp-level-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-base);
    color: var(--color-text-tertiary);
}

.exp-level-info.header {
    justify-content: flex-start;
    font-size: var(--text-xs);
    margin-top: 2px;
    display: flex;
    align-items: baseline;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}

.exp-level-info.header .exp-level-text {
    margin-right: 0;
    min-width: 40px;
    text-align: left;
}

.exp-progress-text {
    font-weight: var(--weight-normal);
    text-align: right;
}

.exp-level-text {
    font-weight: var(--weight-medium);
    text-align: left;
}

/* Контейнер для опыта на странице профиля */
.experience-container {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 0px;
}

/* Стиль для контейнера опыта на главной странице */
.user-exp-container {
    margin-top: 2px;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative; /* Добавляем позиционирование */
    height: 16px; /* Задаем фиксированную высоту */
}

/* Стили для balance-display на главной странице */
.user-info .balance-display {
    display: flex;
    align-items: center; /* Улучшаем выравнивание */
}





/* .bet-option span ПЕРЕНЕСЕН В components/buttons.css */

/* Улучшаем выравнивание в кнопке продажи */
#sellGift, #sellModalGift {
    display: flex;
    align-items: center;
    justify-content: center;
}





/* Стили для анимации обновления баланса */
.balance-update.animate {
    opacity: 1;
    animation: balance-fade 1s forwards;
}

.balance-update.animate-up {
    opacity: 1;
    animation: balance-fade-up 1s forwards;
}

/* @keyframes balance-fade, balance-fade-up - определены в foundations/_animations.css */

/* 
 * НАВИГАЦИЯ: Стили перенесены в navigation.css
 * Удалены дубликаты: .bottom-nav, .nav-item, .nav-icon, .notification-dot
 * @see /static/css/navigation.css
 */

/* Адаптация модального окна для мобильных устройств */
@media (max-height: 700px) {
    .top-up-animation {
        margin: 5px auto 10px;
        width: 100px;
        height: 100px;
    }
    
    #topUpModal h2 {
        font-size: var(--font-size-xlarge);
        margin-top: 5px;
    }
    
    #topUpModal p {
        margin-bottom: 10px;
        font-size: var(--font-size-body);
    }
    
    .top-up-option {
        padding: 10px 15px;
    }
    
    .terms-text {
        margin-top: 10px;
        font-size: var(--font-size-tiny);
    }
}

@media (max-width: 340px) {
    .top-up-options {
        width: 95%;
    }
}

/* Модальные кнопки и .send-options-container, .question-container ПЕРЕНЕСЕНЫ В components/modals.css */

/* Специальный стиль для цен в блоке возможных выигрышей */
.gifts-container .gift-item .gift-price {
    /* Уменьшенные размеры для компактных карточек */
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    background-color: var(--color-price-bg);
    color: var(--color-price-text);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    box-shadow: none;
    margin: var(--space-1) auto 0;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Позиционирование внизу карточки */
    position: absolute;
    bottom: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
}

.gifts-container .gift-item .gift-price-value {
    font-size: var(--text-sm);
    color: var(--color-price-text);
}

/* Обеспечиваем правильную высоту для карточек подарков в блоке выигрышей */
.gifts-container .gift-item {
    position: relative;
    padding-bottom: 36px; /* Добавляем отступ снизу для размещения цены */
}

/* ============================================================================
   УТИЛИТАРНЫЕ КЛАССЫ - ОСНОВНЫЕ ПЕРЕНЕСЕНЫ В foundations/_reset.css
   Здесь остаются только специфичные для style.css классы
   ============================================================================ */

/* Стили для таймеров */
.timer-value-text {
    font-family: monospace;
    min-width: 60px;
    display: inline-block;
    text-align: center;
}

/* Размеры для tgs-player (специфичны для компонентов с анимацией) */
.tgs-small {
    width: 80px;
    height: 80px;
}

.tgs-medium {
    width: 120px;
    height: 120px;
}

.tgs-large {
    width: 150px;
    height: 150px;
}

.tgs-position-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
}

/* Утилитарные классы .js-hidden, .js-visible, .js-flex, .loading-disabled, 
   .fully-disabled, .fixed-position, .large-emoji, .high-z-index, .no-pointer-events
   ПЕРЕНЕСЕНЫ В foundations/_reset.css */

/* ============================================================================
   АНИМАЦИЯ КОНФЕТИ
   ============================================================================ */

/* Контейнер для анимации конфети */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

/* Основные стили для частиц конфети */
.confetti-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.9;
    animation: confetti-fall linear infinite;
}

/* Прямоугольные частицы конфети */
.confetti-particle.rect {
    border-radius: 2px;
    width: 8px;
    height: 12px;
}

/* Треугольные частицы конфети */
.confetti-particle.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 12px 6px;
    border-color: transparent transparent #ff6b6b transparent;
    background: transparent;
}

/* @keyframes confetti-fall, confetti-fall-left, confetti-fall-right - определены в foundations/_animations.css */

/* Стили для частиц с разными направлениями движения */
.confetti-particle:nth-child(odd) {
    animation-name: confetti-fall-left;
}

.confetti-particle:nth-child(even) {
    animation-name: confetti-fall-right;
}

/* Стили для частиц с разными цветами */
.confetti-particle.color-1 {
    background-color: #ff6b6b;
}

.confetti-particle.color-2 {
    background-color: #4ecdc4;
}

.confetti-particle.color-3 {
    background-color: #45b7d1;
}

.confetti-particle.color-4 {
    background-color: #f9ca24;
}

.confetti-particle.color-5 {
    background-color: #6c5ce7;
}

.confetti-particle.color-6 {
    background-color: #a29bfe;
}

.confetti-particle.color-7 {
    background-color: #fd79a8;
}

.confetti-particle.color-8 {
    background-color: #00b894;
}

.confetti-particle.color-9 {
    background-color: #e17055;
}

.confetti-particle.color-10 {
    background-color: #0984e3;
}

/* @keyframes confetti-burst - определён в foundations/_animations.css */

/* Класс для эффекта взрыва */
.confetti-burst {
    animation: confetti-burst 0.6s ease-out;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 480px) {
    .confetti-particle {
        width: 8px;
        height: 8px;
    }
    
    .confetti-particle.rect {
        width: 6px;
        height: 10px;
    }
    
    .confetti-particle.triangle {
        border-width: 0 4px 8px 4px;
    }
}

/* .win-actions.two-buttons, .sell-button-main ПЕРЕНЕСЕНЫ В components/modals.css */