/* =====================================================================
   Платформа «Ясновидение» — v4: Игры ботов (соревнования)
   3 разные игры с уникальным визуалом:
   - Бот-Гонка 🏁 (трек)
   - Бот-Схватка ⚔️ (ринг)
   - Бот-Кубки 🏆 (арена со звёздами)
   ===================================================================== */

/* === Общий контейнер === */
.bot-battle-stage {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    min-height: 480px;
}
.bot-battle-stage::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-purple), var(--accent-cyan));
}

/* === Ставка === */
.bet-section {
    text-align: center;
    margin-bottom: 28px;
}
.bet-section .bet-title {
    font-size: 18px;
    color: var(--accent-gold);
    margin-bottom: 16px;
}
.bet-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    max-width: 600px;
    margin: 0 auto;
}
@media (max-width: 540px) {
    .bet-options { grid-template-columns: 1fr; }
}
.bet-option {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 18px 12px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    position: relative;
}
.bet-option:hover {
    border-color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212,175,55,0.2);
}
.bet-option.selected {
    border-color: var(--accent-purple);
    background: rgba(155,89,182,0.15);
    box-shadow: 0 0 20px rgba(155,89,182,0.4);
}
.bet-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.bet-option .bo-bot-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}
.bet-option .bo-bot-icon {
    font-size: 32px;
    margin-bottom: 6px;
}
.bet-option .bo-bet-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bet-confirm {
    margin-top: 20px;
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-indigo));
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(155,89,182,0.5);
}
.bet-confirm:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(155,89,182,0.7);
}
.bet-confirm:disabled {
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* === Таймер === */
.battle-timer {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-gold);
    z-index: 5;
}
.battle-timer.warning { color: var(--warning); }
.battle-timer.critical { color: var(--danger); animation: pulse 0.5s ease-in-out infinite; }

/* === ИГРА 1: Бот-Гонка === */
.race-track {
    position: relative;
    height: 380px;
    background: linear-gradient(180deg, #1a1d35 0%, #14162a 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}
.race-lane {
    position: relative;
    height: 50%;
    border-bottom: 2px dashed var(--border);
    overflow: hidden;
}
.race-lane:last-child { border-bottom: none; }
.race-lane-label {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 2;
}
.race-bot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 0;
    font-size: 32px;
    transition: left 0.1s linear;
    filter: drop-shadow(0 0 8px currentColor);
    z-index: 3;
}
.race-bot .bot-emoji {
    display: inline-block;
    animation: raceBob 0.3s ease-in-out infinite;
}
@keyframes raceBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.race-finish-line {
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: repeating-linear-gradient(
        0deg,
        var(--accent-gold) 0,
        var(--accent-gold) 8px,
        transparent 8px,
        transparent 16px
    );
    z-index: 2;
}
.race-obstacle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--danger);
    font-size: 20px;
    opacity: 0.4;
    z-index: 1;
}
.race-distance {
    position: absolute;
    bottom: 4px;
    right: 8px;
    color: var(--text-muted);
    font-size: 10px;
    z-index: 2;
}

/* === ИГРА 2: Бот-Схватка === */
.brawl-arena {
    position: relative;
    height: 380px;
    background:
        radial-gradient(ellipse at center, rgba(155,89,182,0.15), transparent 70%),
        linear-gradient(180deg, #1a0f2e 0%, #0d0e1a 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--accent-purple);
    margin-bottom: 20px;
}
.brawl-arena::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 2px solid rgba(212,175,55,0.3);
    border-radius: 50%;
    pointer-events: none;
}
.brawl-bot {
    position: absolute;
    top: 55%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    transition: transform 0.2s ease, filter 0.2s ease;
    filter: drop-shadow(0 0 12px currentColor);
    z-index: 4;
    width: 90px;
    height: 126px;
}
.brawl-bot.bot1 { left: 28%; }
.brawl-bot.bot2 { left: 72%; }
.brawl-bot.attacking { animation: attackLunge 0.4s ease; }
.brawl-bot.hit { animation: hitShake 0.3s ease; }
@keyframes attackLunge {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2) translateX(15px); }
}
@keyframes hitShake {
    0%, 100% { transform: translate(-50%, -50%); }
    25% { transform: translate(-55%, -50%); }
    75% { transform: translate(-45%, -50%); }
}
.brawl-hp-bar {
    position: absolute;
    top: 16px;
    width: 200px;
    height: 24px;
    background: var(--bg-primary);
    border-radius: 12px;
    border: 2px solid var(--border);
    overflow: hidden;
    z-index: 3;
}
.brawl-hp-bar.bot1 { left: 16px; }
.brawl-hp-bar.bot2 { right: 16px; }
.brawl-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #27ae60);
    transition: width 0.3s ease;
}
.brawl-hp-fill.low { background: linear-gradient(90deg, var(--danger), #c0392b); }
.brawl-hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.brawl-name {
    position: absolute;
    top: 44px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    z-index: 3;
}
.brawl-name.bot1 { left: 16px; }
.brawl-name.bot2 { right: 16px; }
.brawl-effect {
    position: absolute;
    font-size: 28px;
    pointer-events: none;
    animation: effectPop 0.5s ease-out forwards;
    z-index: 4;
}
@keyframes effectPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -150%) scale(1.5); opacity: 0; }
}

/* === ИГРА 3: Бот-Кубки === */
.stars-arena {
    position: relative;
    height: 380px;
    background:
        radial-gradient(circle at 30% 30%, rgba(212,175,55,0.1), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(78,201,176,0.1), transparent 50%),
        linear-gradient(180deg, #14162a 0%, #0d0e1a 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--accent-gold);
    margin-bottom: 20px;
}
.stars-bot {
    position: absolute;
    font-size: 36px;
    transition: left 0.3s ease, top 0.3s ease;
    filter: drop-shadow(0 0 8px currentColor);
    transform: translate(-50%, -50%);
    z-index: 3;
}
.stars-star {
    position: absolute;
    font-size: 22px;
    color: var(--accent-gold);
    transform: translate(-50%, -50%);
    animation: starSpin 1s linear infinite, starCollect 0.4s ease-out forwards;
    z-index: 2;
    text-shadow: 0 0 8px var(--accent-gold);
}
@keyframes starSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes starCollect {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) translateY(-30px); }
}
.stars-scores {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 24px;
    background: var(--bg-primary);
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid var(--border);
    z-index: 4;
}
.stars-score-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--text-primary);
}
.stars-score-item .ssi-icon {
    font-size: 18px;
}

/* === Результат боя === */
.battle-result {
    text-align: center;
    padding: 32px 20px;
    animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.battle-result.win {
    background: linear-gradient(135deg, rgba(46,204,113,0.15), rgba(212,175,55,0.1));
    border-radius: 16px;
    border: 2px solid var(--success);
}
.battle-result.lose {
    background: linear-gradient(135deg, rgba(231,76,60,0.15), rgba(142,144,168,0.1));
    border-radius: 16px;
    border: 2px solid var(--danger);
}
.battle-result.draw {
    background: linear-gradient(135deg, rgba(243,156,18,0.15), rgba(78,201,176,0.1));
    border-radius: 16px;
    border: 2px solid var(--warning);
}
.battle-result .br-icon {
    font-size: 80px;
    margin-bottom: 12px;
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.battle-result .br-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 0 16px currentColor;
}
.battle-result.win .br-title { color: var(--success); }
.battle-result.lose .br-title { color: var(--danger); }
.battle-result.draw .br-title { color: var(--warning); }
.battle-result .br-detail {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 16px;
}
.battle-result .br-scores {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 20px 0;
    flex-wrap: wrap;
}
.battle-result .br-score-card {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 14px 20px;
    min-width: 140px;
    border: 1px solid var(--border);
}
.battle-result .br-score-card.winner {
    border-color: var(--success);
    box-shadow: 0 0 16px rgba(46,204,113,0.3);
}
.battle-result .br-score-card .brsc-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}
.battle-result .br-score-card .brsc-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-gold);
}
.battle-result .br-score-card .brsc-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}
.battle-result .br-xp {
    margin-top: 12px;
    font-size: 16px;
    color: var(--accent-cyan);
    font-weight: 600;
}
.battle-result .br-actions {
    margin-top: 24px;
}
.battle-result .br-actions .btn-play-again {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-indigo));
    color: #fff;
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(155,89,182,0.4);
}
.battle-result .br-actions .btn-play-again:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(155,89,182,0.6);
}

/* === Список игр ботов === */
.bot-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.bot-game-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.bot-game-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-purple));
}
.bot-game-card:hover {
    border-color: var(--accent-purple);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.bot-game-card .bgc-icon {
    font-size: 56px;
    margin-bottom: 12px;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}
.bot-game-card .bgc-title {
    font-size: 20px;
    color: var(--accent-gold);
    margin-bottom: 8px;
    font-weight: 700;
}
.bot-game-card .bgc-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 16px;
    min-height: 40px;
}
.bot-game-card .bgc-duration {
    display: inline-block;
    background: var(--bg-primary);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: var(--accent-cyan);
    margin-bottom: 12px;
}
.bot-game-card .bgc-play {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-indigo));
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}
.bot-game-card .bgc-play:hover {
    transform: scale(1.05);
}

/* =====================================================================
   v4.1: Улучшенная Бот-Схватка — зрелищные эффекты
   ===================================================================== */

/* === Аура бота (позиционирование уже задано в .brawl-bot выше) === */
.brawl-bot .brawl-bot-emoji {
    position: relative;
    z-index: 2;
}
.brawl-bot .brawl-bot-aura {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    border-radius: 50%;
    opacity: 0.6;
    animation: auraPulse 2s ease-in-out infinite;
    z-index: 1;
}
@keyframes auraPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.7; }
}

/* === Заряд спецприёма === */
.brawl-special-bar {
    position: absolute;
    width: 160px;
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    border: 1px solid var(--border);
    overflow: hidden;
    z-index: 3;
}
.brawl-special-bar.bot1 { top: 48px; left: 16px; }
.brawl-special-bar.bot2 { top: 48px; right: 16px; }
.brawl-special-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-gold));
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

/* === Индикатор комбо === */
.brawl-combo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -150%);
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-gold));
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 18px;
    z-index: 10;
    box-shadow: 0 0 20px rgba(212,175,55,0.6);
    text-shadow: 0 0 8px rgba(0,0,0,0.8);
}
.brawl-combo.pop {
    animation: comboPop 0.3s ease;
}
@keyframes comboPop {
    0% { transform: translate(-50%, -150%) scale(0.5); }
    50% { transform: translate(-50%, -150%) scale(1.3); }
    100% { transform: translate(-50%, -150%) scale(1); }
}

/* === Лог действий === */
.brawl-action-log {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
    white-space: nowrap;
    border: 1px solid var(--border);
}
.brawl-action-log.show {
    opacity: 1;
    animation: logFade 2s ease;
}
@keyframes logFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

/* === Полноэкранный эффект === */
.brawl-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 8;
    mix-blend-mode: screen;
}

/* === График HP === */
.brawl-graph {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 400px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--border);
    opacity: 0.8;
    z-index: 2;
}

/* === Числа урона === */
.brawl-damage-number {
    position: absolute;
    font-size: 22px;
    font-weight: 900;
    pointer-events: none;
    animation: dmgFloat 1.2s ease-out forwards;
    z-index: 7;
    text-shadow: 0 0 8px currentColor, 0 2px 4px rgba(0,0,0,0.8);
}
.brawl-damage-number.big {
    font-size: 32px;
}
@keyframes dmgFloat {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateY(-20px) scale(1.3); opacity: 1; }
    100% { transform: translateY(-60px) scale(1); opacity: 0; }
}

/* === Тряска арены === */
.brawl-arena.shake {
    animation: arenaShake 0.3s ease;
}
@keyframes arenaShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(calc(var(--shake-intensity, 5px) * -1), 2px); }
    40% { transform: translate(var(--shake-intensity, 5px), -2px); }
    60% { transform: translate(calc(var(--shake-intensity, 5px) * -1), 2px); }
    80% { transform: translate(var(--shake-intensity, 5px), -1px); }
}

/* === Критическое свечение === */
.brawl-bot.crit-glow {
    animation: critGlow 0.5s ease;
}
@keyframes critGlow {
    0%, 100% { filter: drop-shadow(0 0 8px currentColor); }
    50% { filter: drop-shadow(0 0 24px #ff0) drop-shadow(0 0 40px #f39c12); transform: translate(-50%, -50%) scale(1.2); }
}
.brawl-bot.crit-shake {
    animation: critShake 0.4s ease;
}
@keyframes critShake {
    0%, 100% { transform: translate(-50%, -50%); }
    10% { transform: translate(-50%, -50%) translate(-10px, -5px) rotate(-5deg); }
    30% { transform: translate(-50%, -50%) translate(10px, 5px) rotate(5deg); }
    50% { transform: translate(-50%, -50%) translate(-8px, 3px) rotate(-3deg); }
    70% { transform: translate(-50%, -50%) translate(8px, -3px) rotate(3deg); }
    90% { transform: translate(-50%, -50%) translate(-4px, 0) rotate(0); }
}

/* === Спецприём === */
.brawl-bot.special-attack {
    animation: specialAttack 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes specialAttack {
    0% { transform: translate(-50%, -50%) scale(1); }
    30% { transform: translate(-50%, -50%) scale(0.8) translateX(-30px); filter: brightness(2); }
    60% { transform: translate(-50%, -50%) scale(1.5) translateX(40px); filter: brightness(3) hue-rotate(30deg); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* === Комбо-атака === */
.brawl-bot.combo-attack {
    animation: comboAttack 0.6s ease;
}
@keyframes comboAttack {
    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
    25% { transform: translate(-50%, -50%) translateX(15px) scale(1.1); }
    50% { transform: translate(-50%, -50%) translateX(-5px) scale(1); }
    75% { transform: translate(-50%, -50%) translateX(15px) scale(1.1); }
}

/* === Уклонение === */
.brawl-bot.dodge-anim {
    animation: dodgeAnim 0.4s ease;
}
@keyframes dodgeAnim {
    0%, 100% { transform: translate(-50%, -50%); opacity: 1; }
    50% { transform: translateY(-80%) translateX(20px); opacity: 0.5; }
}

/* =====================================================================
   v4.2: Сцена файтинга + концовки FATALITY/BRUTALITY/FRIENDSHIP
   ===================================================================== */

/* === АДСКИЙ ФОН === */
.brawl-arena.hell-stage {
    background: #1a0000 !important;
    border-color: #4a0000 !important;
}

.hell-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* Лава внизу */
.hell-lava {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 40%;
    background:
        radial-gradient(ellipse at 20% 100%, #ff3300 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, #ff6600 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, #ff3300 0%, transparent 50%),
        linear-gradient(180deg, transparent 0%, #cc1100 40%, #8b0000 100%);
    animation: lavaBubble 3s ease-in-out infinite;
    filter: blur(2px);
}
@keyframes lavaBubble {
    0%, 100% { transform: scaleY(1); opacity: 0.8; }
    50% { transform: scaleY(1.05); opacity: 1; }
}

/* Свечение от лавы */
.hell-glow {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 60%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255,80,0,0.4) 0%, transparent 70%);
    animation: glowFlicker 2s ease-in-out infinite;
}
@keyframes glowFlicker {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* Угли (частицы) */
.hell-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hell-ember {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #ffaa00, #ff3300);
    box-shadow: 0 0 6px #ff6600, 0 0 12px #ff3300;
    animation: emberRise linear infinite;
}
@keyframes emberRise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-400px) translateX(var(--drift, 30px)); opacity: 0; }
}

/* Дым */
.hell-smoke {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(40,0,0,0.6), transparent 50%),
        radial-gradient(ellipse at 70% 10%, rgba(60,10,0,0.5), transparent 60%);
    animation: smokeDrift 8s ease-in-out infinite;
}
@keyframes smokeDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

/* === SVG-бойцы === */
.fighter-svg {
    width: 90px;
    height: 126px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
    transition: filter 0.2s;
}
.brawl-bot .fighter-svg {
    position: relative;
    z-index: 2;
}

/* Состояние удара — краснеет */
.brawl-bot.hit .fighter-svg {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)) hue-rotate(-20deg) brightness(1.3) saturate(1.5);
}

/* Критическое свечение */
.brawl-bot.crit-glow .fighter-svg {
    filter: drop-shadow(0 0 16px #ff0) drop-shadow(0 0 32px #f39c12) brightness(1.4);
}

/* Спецприём */
.brawl-bot.special-attack .fighter-svg {
    filter: drop-shadow(0 0 24px currentColor) brightness(1.6) hue-rotate(30deg);
}

/* Низкий HP — мерцание */
.brawl-bot .fighter-svg .fs-damage {
    transition: opacity 0.3s;
}

/* === Сцена как в Street Fighter === */
.brawl-arena.fighting-stage {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(212,175,55,0.1), transparent 60%),
        linear-gradient(180deg, #0a0a1a 0%, #14142a 60%, #1a1a3a 100%);
    perspective: 600px;
}

/* Прожекторы */
.stage-lights {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.spotlight {
    position: absolute;
    top: -20%;
    width: 50%;
    height: 120%;
    opacity: 0.3;
    filter: blur(40px);
    animation: spotlightSwing 4s ease-in-out infinite;
}
.spotlight-left { left: 0; transform-origin: top center; }
.spotlight-right { right: 0; transform-origin: top center; animation-delay: -2s; }
@keyframes spotlightSwing {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Пол сцены */
.stage-floor {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 100px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
    border-top: 2px solid rgba(212,175,55,0.2);
    z-index: 1;
}
.stage-floor::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 40px,
        rgba(212,175,55,0.05) 40px,
        rgba(212,175,55,0.05) 42px
    );
}

/* === HP-бары как в файтинге === */
.fighter-hp-container {
    position: absolute;
    top: 16px;
    width: 45%;
    max-width: 280px;
    z-index: 5;
}
.fighter-hp-container.left { left: 16px; }
.fighter-hp-container.right { right: 16px; text-align: right; }

.fighter-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.fighter-hp-bar {
    position: relative;
    height: 22px;
    background: rgba(0,0,0,0.7);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.fighter-hp-bar.reversed { direction: rtl; }
.fighter-hp-fill {
    height: 100%;
    transition: width 0.3s ease;
    box-shadow: inset 0 0 8px rgba(255,255,255,0.2);
}
.fighter-hp-fill.low {
    animation: hpLowPulse 0.5s ease-in-out infinite;
}
@keyframes hpLowPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
}
.fighter-hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0,0,0,1);
    z-index: 2;
}

/* Полоска SUPER */
.fighter-super-bar {
    height: 5px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 3px;
}
.fighter-super-bar.reversed { direction: rtl; }
.fighter-super-fill {
    height: 100%;
    transition: width 0.3s ease;
    box-shadow: 0 0 6px rgba(255,140,0,0.6);
}

/* === VS индикатор === */
.vs-indicator {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 0 0 12px var(--accent-gold), 0 2px 4px rgba(0,0,0,0.8);
    z-index: 5;
    animation: vsPulse 2s ease-in-out infinite;
}
@keyframes vsPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.1); }
}

/* === Тень бота === */
.brawl-bot-shadow {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 12px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.6), transparent 70%);
    z-index: 0;
}

/* === Крупный баннер действия === */
.action-banner {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 4px;
    opacity: 0;
    pointer-events: none;
    z-index: 15;
    text-transform: uppercase;
    white-space: nowrap;
}
.action-banner.show {
    animation: bannerPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bannerPop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.3) rotate(2deg); opacity: 1; }
    60% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.2) rotate(0); opacity: 0; }
}

/* === Слой для финиша === */
.finish-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    overflow: hidden;
}

/* === Оверлей концовки === */
.finish-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: finishAppear 0.5s ease;
}
.finish-overlay.finish-fatality {
    background: radial-gradient(circle at center, rgba(231,76,60,0.3), rgba(0,0,0,0.8));
}
.finish-overlay.finish-brutality {
    background: radial-gradient(circle at center, rgba(243,156,18,0.3), rgba(0,0,0,0.8));
}
.finish-overlay.finish-friendship {
    background: radial-gradient(circle at center, rgba(46,204,113,0.3), rgba(0,0,0,0.8));
}
@keyframes finishAppear {
    from { opacity: 0; }
    to { opacity: 1; }
}
.finish-emoji {
    font-size: 80px;
    margin-bottom: 12px;
    animation: finishEmojiBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes finishEmojiBounce {
    0% { transform: scale(0) rotate(-180deg); }
    100% { transform: scale(1) rotate(0); }
}
.finish-title {
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-shadow: 0 0 30px currentColor, 0 4px 8px rgba(0,0,0,1);
    animation: finishTitleGlitch 0.3s ease;
}
.finish-fatality .finish-title { color: #e74c3c; }
.finish-brutality .finish-title { color: #f39c12; }
.finish-friendship .finish-title { color: #2ecc71; }
@keyframes finishTitleGlitch {
    0% { transform: translate(-20px, 0) skewX(20deg); opacity: 0; }
    25% { transform: translate(10px, 0) skewX(-10deg); opacity: 1; }
    50% { transform: translate(-5px, 0) skewX(5deg); }
    100% { transform: translate(0, 0) skewX(0); }
}
.finish-subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* === Частицы крови (FATALITY) === */
.blood-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #c0392b, #8b0000);
    border-radius: 50%;
    pointer-events: none;
    animation: bloodFly 1.5s ease-out forwards;
    box-shadow: 0 0 6px #c0392b;
}
@keyframes bloodFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx, 100px), var(--ty, 100px)) scale(0.3); opacity: 0; }
}

/* === Части тела при FATALITY === */
.body-part {
    position: absolute;
    pointer-events: none;
    animation: bodyPartFly 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 25;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}
@keyframes bodyPartFly {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }
    30% {
        transform: translate(calc(-50% + var(--tx, 0px) * 0.6), calc(-50% + var(--ty, 0px) * 0.5)) rotate(calc(var(--rot, 0deg) * 0.3)) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + 200px)) rotate(var(--rot, 0deg)) scale(0.7);
        opacity: 0.4;
    }
}

/* === Кровавые брызги (FATALITY) === */
.blood-splash {
    position: absolute;
    background: radial-gradient(circle, #ff0000, #8b0000);
    border-radius: 50%;
    pointer-events: none;
    animation: bloodSplashFly 1.8s ease-out forwards;
    box-shadow: 0 0 8px #ff0000;
    z-index: 24;
}
@keyframes bloodSplashFly {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    20% {
        transform: translate(calc(-50% + var(--tx, 0px) * 0.4), calc(-50% + var(--ty, 0px) * 0.4)) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + 80px)) scale(0.3);
        opacity: 0;
    }
}

/* === Кровавая лужа === */
.blood-pool {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(139,0,0,0.8), rgba(139,0,0,0.3) 70%, transparent);
    pointer-events: none;
    animation: poolSpread 1s ease-out forwards;
    transform: translate(-50%, -50%);
    z-index: 22;
}
@keyframes poolSpread {
    0% { width: 0; height: 0; opacity: 0; }
    100% { width: 100px; height: 30px; opacity: 0.8; }
}

/* === Взрывы (BRUTALITY) === */
.brutality-explosion {
    position: absolute;
    font-size: 36px;
    pointer-events: none;
    animation: brutalityPop 0.6s ease-out forwards;
    filter: drop-shadow(0 0 12px currentColor);
}
@keyframes brutalityPop {
    0% { transform: scale(0) rotate(0); opacity: 1; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 1; }
    100% { transform: scale(0.5) rotate(360deg); opacity: 0; }
}

/* === Сердечки (FRIENDSHIP) === */
.friendship-particle {
    position: absolute;
    font-size: 24px;
    pointer-events: none;
    animation: friendshipFloat 2s ease-out forwards;
}
@keyframes friendshipFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { transform: translateY(-20px) scale(1.2); opacity: 1; }
    100% { transform: translateY(-120px) scale(0.8) rotate(360deg); opacity: 0; }
}

/* =====================================================================
   v4.3: Бот-Кубки — космос, галактика, чёрные дыры, планеты
   ===================================================================== */

/* === Космическая арена === */
.stars-arena.space-stage {
    background: #000011 !important;
    border-color: #4a4aff !important;
    overflow: hidden;
}

.space-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* Центр галактики */
.galaxy-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(200,150,255,0.4) 20%, rgba(100,50,200,0.2) 50%, transparent 80%);
    animation: galaxyPulse 4s ease-in-out infinite;
    filter: blur(8px);
}
@keyframes galaxyPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.9; }
}

/* Спираль галактики */
.galaxy-spiral {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 350px; height: 350px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, transparent 0%, rgba(100,100,255,0.1) 10%, transparent 20%, rgba(200,100,255,0.08) 30%, transparent 40%, rgba(100,200,255,0.06) 50%, transparent 60%, rgba(255,100,200,0.08) 70%, transparent 80%, rgba(100,255,200,0.06) 90%, transparent 100%);
    animation: galaxyRotate 20s linear infinite;
    filter: blur(4px);
}
@keyframes galaxyRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Звёздное поле */
.starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.space-star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: starTwinkle ease-in-out infinite;
    box-shadow: 0 0 4px #fff;
}
@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Туманность */
.space-nebula {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(100,0,200,0.15), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(0,100,200,0.1), transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(200,0,100,0.08), transparent 50%);
    animation: nebulaShift 10s ease-in-out infinite;
}
@keyframes nebulaShift {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* === SVG-планеты === */
.planet-svg {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 0 12px currentColor);
    animation: planetOrbit 3s ease-in-out infinite;
}
@keyframes planetOrbit {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.stars-bot.planet-bot {
    transition: left 0.3s ease, top 0.3s ease;
    z-index: 5;
}

/* === Чёрные дыры === */
.blackholes-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.blackhole {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    animation: blackholeAppear 0.5s ease;
}
.blackhole.fading {
    animation: blackholeFade 0.5s ease forwards;
}
@keyframes blackholeAppear {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes blackholeFade {
    to { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
.blackhole-core {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 0 10px #000, inset 0 0 8px #000;
    z-index: 2;
}
.blackhole-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: ringSpin 2s linear infinite;
}
.blackhole-ring.ring1 {
    border-top-color: #9b59b6;
    border-bottom-color: #9b59b6;
    animation-duration: 2s;
}
.blackhole-ring.ring2 {
    inset: 5px;
    border-left-color: #42d4f4;
    border-right-color: #42d4f4;
    animation-duration: 1.5s;
    animation-direction: reverse;
}
.blackhole-ring.ring3 {
    inset: 10px;
    border-top-color: #d4af37;
    border-bottom-color: #d4af37;
    animation-duration: 1s;
}
@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* === Эффекты телепорта === */
.teleport-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}
.teleport-flash {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, #9b59b6, transparent);
    animation: teleportFlash 0.8s ease-out forwards;
}
@keyframes teleportFlash {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(2); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
.teleport-beam {
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg, #9b59b6, #42d4f4, transparent);
    box-shadow: 0 0 8px #9b59b6;
    animation: beamFade 0.6s ease-out forwards;
    transform-origin: left center;
}
@keyframes beamFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.teleport-appear {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, #42d4f4, transparent);
    animation: teleportAppear 0.6s ease-out forwards;
}
@keyframes teleportAppear {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* =====================================================================
   v4.4: Бот-Гонка — магическая трасса
   ===================================================================== */

/* === Магическая трасса === */
.race-track.magic-track {
    background: linear-gradient(180deg, #0a0a1a 0%, #14142a 50%, #0a0a1a 100%) !important;
    border-color: #4a2a8a !important;
}

.magic-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Руны на фоне */
.magic-runes {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(155,89,182,0.06), transparent 8%),
        radial-gradient(circle at 85% 60%, rgba(212,175,55,0.06), transparent 8%),
        radial-gradient(circle at 50% 80%, rgba(78,201,176,0.05), transparent 8%),
        radial-gradient(circle at 30% 90%, rgba(155,89,182,0.05), transparent 8%);
    animation: runeGlow 4s ease-in-out infinite;
}
@keyframes runeGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Искры */
.magic-sparkles {
    position: absolute;
    inset: 0;
}
.magic-sparkle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 0 6px #d4af37;
    animation: sparkleFloat linear infinite;
}
@keyframes sparkleFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}

/* Магические дорожки */
.race-lane.magic-lane {
    background: linear-gradient(180deg, rgba(155,89,182,0.05), transparent);
    border-bottom: 1px solid rgba(155,89,182,0.2);
}

/* Магический след */
.magic-trail {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* SVG-существо */
.race-creature-svg {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 0 8px currentColor);
    animation: creatureBob 0.4s ease-in-out infinite;
}
@keyframes creatureBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* === Состояния магического существа === */
.magic-creature.magic-boost .race-creature-svg {
    filter: drop-shadow(0 0 16px #f39c12) drop-shadow(0 0 32px #ff6600);
    animation: creatureBob 0.2s ease-in-out infinite, boostGlow 0.5s ease;
}
@keyframes boostGlow {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.magic-creature.magic-portal .race-creature-svg {
    filter: drop-shadow(0 0 20px #9b59b6) brightness(1.5);
    animation: portalSpin 0.6s ease;
}
@keyframes portalSpin {
    0% { transform: scale(1) rotate(0); }
    50% { transform: scale(0.3) rotate(360deg); filter: blur(4px); }
    100% { transform: scale(1) rotate(720deg); }
}

.magic-creature.magic-trapped .race-creature-svg {
    filter: drop-shadow(0 0 12px #e74c3c) hue-rotate(-30deg) brightness(0.7);
    animation: trapShake 0.3s ease;
}
@keyframes trapShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.magic-creature.magic-shielded .race-creature-svg {
    filter: drop-shadow(0 0 16px #42d4f4) brightness(1.3);
}
.magic-creature.magic-shielded::after {
    content: '🛡️';
    position: absolute;
    top: -8px; right: -8px;
    font-size: 16px;
    animation: shieldPulse 0.5s ease;
}

.magic-creature.magic-frozen .race-creature-svg {
    filter: drop-shadow(0 0 12px #42d4f4) hue-rotate(180deg) brightness(0.6) saturate(0.3);
    animation: frozenShake 0.5s ease;
}
@keyframes frozenShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px) rotate(-2deg); }
    75% { transform: translateX(2px) rotate(2deg); }
}

.magic-creature.magic-darkness .race-creature-svg {
    filter: drop-shadow(0 0 16px #911eb4) brightness(0.4) saturate(2);
    animation: darknessPull 0.6s ease;
}
@keyframes darknessPull {
    0% { transform: scale(1); }
    50% { transform: scale(0.7) rotate(10deg); }
    100% { transform: scale(1); }
}

/* === Лог событий гонки === */
.race-event-log {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    z-index: 5;
    white-space: nowrap;
    border: 1px solid rgba(155,89,182,0.3);
}
.race-event-log.show {
    animation: logFade 2s ease;
}

/* === Слой эффектов гонки === */
.race-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}
.race-effect {
    position: absolute;
    font-size: 24px;
    pointer-events: none;
    animation: raceEffectPop 0.8s ease-out forwards;
    filter: drop-shadow(0 0 8px currentColor);
    z-index: 5;
}
@keyframes raceEffectPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    100% { transform: translate(-50%, -150%) scale(1); opacity: 0; }
}

/* === Частицы магического следа === */
.magic-trail-particle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    pointer-events: none;
    animation: trailFade 0.6s ease-out forwards;
    box-shadow: 0 0 6px currentColor;
}
@keyframes trailFade {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3) translateX(-20px); }
}

/* =====================================================================
   v4.5: BRUTALITY — алмаз → удар → голова
   ===================================================================== */

/* Алмаз */
.brutality-diamond {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 25;
    animation: diamondAppear 0.5s ease;
    filter: drop-shadow(0 0 12px #00ffff);
}
@keyframes diamondAppear {
    from { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
.brutality-diamond.raised {
    animation: diamondRaise 0.8s ease forwards;
}
@keyframes diamondRaise {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -180%) scale(1.2); filter: drop-shadow(0 0 20px #00ffff) drop-shadow(0 0 40px #00ccff); }
}
.brutality-diamond.shattered {
    animation: diamondShatter 0.3s ease forwards;
}
@keyframes diamondShatter {
    0% { transform: translate(-50%, -180%) scale(1.2); opacity: 1; }
    50% { transform: translate(-50%, -180%) scale(2); opacity: 0.8; filter: brightness(3) blur(2px); }
    100% { transform: translate(-50%, -180%) scale(0.1); opacity: 0; }
}

/* Искры от алмаза */
.brutality-spark {
    position: absolute;
    width: 4px; height: 4px;
    background: #00ffff;
    border-radius: 50%;
    pointer-events: none;
    animation: sparkFly 1s ease-out forwards;
    box-shadow: 0 0 6px #00ffff;
    z-index: 26;
}
@keyframes sparkFly {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.2); opacity: 0; }
}

/* =====================================================================
   v4.6: FRIENDSHIP — птички → сердце → птичка
   ===================================================================== */

/* Раскачивание ботов */
.brawl-bot.friendship-sway-left {
    animation: swayLeft 1.5s ease-in-out infinite;
}
.brawl-bot.friendship-sway-right {
    animation: swayRight 1.5s ease-in-out infinite;
}
@keyframes swayLeft {
    0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
    50% { transform: translate(-50%, -50%) rotate(3deg); }
}
@keyframes swayRight {
    0%, 100% { transform: translate(-50%, -50%) rotate(3deg); }
    50% { transform: translate(-50%, -50%) rotate(-3deg); }
}

/* Птички */
.friendship-bird {
    position: absolute;
    font-size: 20px;
    pointer-events: none;
    z-index: 25;
    animation: birdFly 3s ease-in-out forwards;
}
@keyframes birdFly {
    0% { transform: translate(-50%, 0) scale(0); opacity: 0; }
    20% { transform: translate(-50%, -15px) scale(1); opacity: 1; }
    50% { transform: translate(calc(-50% + 20px), -25px) scale(1); opacity: 1; }
    80% { transform: translate(calc(-50% - 10px), -35px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -60px) scale(0.5); opacity: 0; }
}

/* Большое сердце */
.friendship-heart {
    position: absolute;
    font-size: 80px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 25;
    animation: heartAppear 0.5s ease;
    filter: drop-shadow(0 0 20px #ff3366);
}
@keyframes heartAppear {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.friendship-heart.beating {
    animation: heartBeat 0.3s ease;
}
@keyframes heartBeat {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.25); filter: drop-shadow(0 0 30px #ff3366); }
}

/* Птичка вылетает из сердца */
.friendship-bird-fly-out {
    position: absolute;
    font-size: 24px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 26;
    animation: birdFlyOut 1.2s ease-out forwards;
}
@keyframes birdFlyOut {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20% { transform: translate(-50%, -60%) scale(1.5); opacity: 1; }
    100% { transform: translate(-50%, -200%) scale(0.8); opacity: 0; }
}