/* ==========================================================================
   06_CHEST_ROULETTE.CSS — Анимации, открытие сундука, рулетка дропа
   Зависит от переменных из 00_global.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAMES — единственное место объявления анимаций
   -------------------------------------------------------------------------- */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-5deg); }
    75%      { transform: rotate(5deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
@keyframes zoomIn {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. АНИМАЦИЯ ОТКРЫТИЯ СУНДУКА
   -------------------------------------------------------------------------- */
.chest-shake-box {
    font-size: 5rem;
    display: inline-block;
    animation: shake 0.5s infinite;
}

.chest-reward-emoji {
    font-size: 5rem;
}

.chest-reward-zoom {
    animation: zoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chest-reward-img {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px var(--overlay-strong));
}

.chest-loading-label {
    animation: pulse 1s infinite;
}

/* Цвета текста наград */
.reward-diamonds { color: var(--rarity-legendary); font-weight: bold; }
.reward-pro      { color: var(--violet-2);          font-weight: bold; }
.reward-rating   { color: var(--rarity-rare);       font-weight: bold; }
.reward-item     { color: var(--green);             font-weight: bold; }

/* --------------------------------------------------------------------------
   3. РУЛЕТКА (единый блок — без дублей)
   -------------------------------------------------------------------------- */
.roulette-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    padding: 2px;
}

.roulette-container {
    width: 100%;
    max-width: 500px;
    height: 120px;
    margin: 0 auto;
    position: relative;
    background: var(--bg-card);
    border: 2px solid rgba(var(--primary-rgb), 0.4);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(var(--black-rgb), 0.9);
}

/* Центральный указатель (единственный — через .roulette-pointer, без ::before) */
.roulette-pointer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: var(--rose);
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 12px var(--rose);
    border-radius: var(--radius-sm);
}

/* Лента рулетки */
.roulette-track {
    display: flex;
    height: 100%;
    align-items: center;
    width: max-content;
    will-change: transform;
}

/* Ячейка рулетки */
.roulette-item {
    width: 110px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-right: 1px solid var(--border-color);
    background: var(--bg-panel);
    transition: background 0.3s ease, border 0.3s ease;
    box-sizing: border-box;
}

/* Победная ячейка (базовый вид) */
.roulette-item--winning {
    border-radius: var(--radius-xl);
}

/* Победная ячейка после остановки (зелёная вспышка) */
.roulette-item--win-flash {
    background: rgba(var(--rarity-immortal-rgb), 0.4);
    border: 1px solid var(--green);
}

/* Картинка внутри ячейки */
.roulette-item-img {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px var(--overlay-soft));
    margin-bottom: 5px;
}

/* Эмодзи внутри ячейки */
.roulette-item-emoji {
    font-size: 2.2rem;
    margin-bottom: 5px;
    filter: drop-shadow(0 4px 8px var(--overlay-soft));
}

/* Подпись ячейки (обычная) */
.roulette-item-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-weight: 600;
}

/* Подпись победной ячейки */
.roulette-item-label--winning {
    color: var(--text-main);
    font-weight: 700;
}