body { background-color: #050a0b; }

.grid-overlay {
    background-image: linear-gradient(to right, rgba(37, 209, 244, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(37, 209, 244, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
}
.bg-glow-cyan { background: radial-gradient(circle at 0% 0%, rgba(37, 209, 244, 0.15) 0%, transparent 60%); }
.bg-glow-magenta { background: radial-gradient(circle at 100% 100%, rgba(244, 37, 209, 0.12) 0%, transparent 60%); }

.glass-panel { background: rgba(13, 25, 28, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(37, 209, 244, 0.2); }
.neon-text-cyan { text-shadow: 0 0 10px rgba(37, 209, 244, 0.8); }

@keyframes shimmer { 100% { transform: translateX(100%); } }
.animate-shimmer { animation: shimmer 1.5s infinite; }

#attack-arrow-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
@keyframes attack-flow-anim { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.attack-flow { animation: attack-flow-anim 0.3s linear infinite; }

@keyframes blade-pulse { 0%, 100% { filter: brightness(1) drop-shadow(0 0 6px #25d1f4); } 50% { filter: brightness(1.3) drop-shadow(0 0 12px #25d1f4); } }
.energy-blade { animation: blade-pulse 1.5s ease-in-out infinite; }
.core-glow { filter: drop-shadow(0 0 4px #ffffff); }

.base-ring-dynamic { border-color: var(--f-color); background-color: color-mix(in srgb, var(--f-color) 10%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--f-color) 40%, transparent); }
.base-core-dynamic { background-color: var(--f-color); box-shadow: 0 0 15px var(--f-color); }
.base-text-dynamic { color: var(--f-color); }
.base-border-dynamic { border-color: color-mix(in srgb, var(--f-color) 30%, transparent); }

/* ИДЕАЛЬНЫЙ МЯГКИЙ И РАВНОМЕРНЫЙ КОНТУР ДЛЯ ЦИФР ВОЙСК */
.game-base .js-troop-count {
    z-index: 100 !important;
    text-shadow: 
        0 0 2px rgba(0,0,0,0.8),
        -1px -1px 1px rgba(0,0,0,0.5),
         1px -1px 1px rgba(0,0,0,0.5),
        -1px  1px 1px rgba(0,0,0,0.5),
         1px  1px 1px rgba(0,0,0,0.5),
         0 2px 4px rgba(0,0,0,0.4) !important;
}

/* Медленное вращение для зон эффектов */
@keyframes spin-slow { 
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); } 
}

/* Боссы */
.boss-radar {
    position: absolute; top: 50%; left: 50%; width: 432px; height: 432px; 
    border: 2px dashed color-mix(in srgb, var(--f-color) 30%, transparent); border-radius: 50%; 
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--f-color) 2%, transparent) 0%, transparent 70%);
    animation: spin-slow 15s linear infinite;
}
.boss-radar-gatling {
    position: absolute; top: 50%; left: 50%; width: 540px; height: 540px; 
    border: 2px dashed color-mix(in srgb, var(--f-color) 35%, transparent); border-radius: 50%; 
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 0;
    background: radial-gradient(circle, color-mix(in srgb, var(--f-color) 4%, transparent) 0%, transparent 70%);
    animation: spin-slow 15s linear infinite;
}
.boss-turret { position: absolute; width: 16px; height: 16px; background: #0a0f12; border: 2px solid var(--f-color); border-radius: 50%; z-index: 15; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px var(--f-color), inset 0 0 4px #fff; }
.turret-barrel { position: absolute; width: 4px; height: 14px; background: #ffffff; top: -10px; border-radius: 2px; box-shadow: 0 0 8px var(--f-color); z-index: -1; }
.turret-top { top: -8px; left: calc(50% - 8px); transform: rotate(0deg); }
.turret-bottom { bottom: -8px; left: calc(50% - 8px); transform: rotate(180deg); }
.turret-left { left: -8px; top: calc(50% - 8px); transform: rotate(-90deg); }
.turret-right { right: -8px; top: calc(50% - 8px); transform: rotate(90deg); }

.gatling-wrapper { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 15; }
.gatling-gun { width: 48px; height: 48px; background: #0a0f12; border: 3px solid var(--f-color); border-radius: 50%; position: absolute; box-shadow: 0 0 20px var(--f-color), inset 0 0 10px #000; }
.gatling-barrels {
    position: absolute; top: -28px; left: calc(50% - 10px); width: 20px; height: 32px;
    background: repeating-linear-gradient(90deg, #d1d5db, #d1d5db 3px, #1f2937 4px, #1f2937 6px);
    border-radius: 4px; border: 2px solid var(--f-color); box-shadow: 0 0 15px var(--f-color); z-index: -1;
}
.gatling-core-display { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(10,15,18,0.95) 0%, rgba(10,15,18,0.7) 100%); display: flex; justify-content: center; align-items: center; border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 0 8px var(--f-color); z-index: 20; pointer-events: none; }

.homing-missile { 
    position: absolute; width: 4px; height: 4px; background: #ffffff; border-radius: 50%; 
    transform: translate(-50%, -50%); pointer-events: none; z-index: 35; 
    box-shadow: 0 0 6px var(--f-color), 0 0 10px var(--f-color); 
    will-change: transform;
}

.upg-base {
    position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #080c0e; border: 2px solid color-mix(in srgb, var(--f-color) 60%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--f-color) 40%, transparent); 
    display: flex; justify-content: center; align-items: center; z-index: 10; overflow: hidden;
}

@keyframes spin-radar { 100% { transform: rotate(360deg); } }

.aa-radar-zone {
    position: absolute; top: 50%; left: 50%; width: 270px; height: 270px;
    border: 2px dashed color-mix(in srgb, var(--f-color) 35%, transparent); border-radius: 50%; 
    transform: translate(-50%, -50%); pointer-events: none; z-index: -1; 
    background: radial-gradient(circle, color-mix(in srgb, var(--f-color) 8%, transparent) 0%, transparent 70%);
    transition: width 0.3s, height 0.3s;
    animation: spin-slow 15s linear infinite;
}
.aa-radar-zone.t2, .aa-radar-zone.t3 { width: 405px; height: 405px; }

.aa-radar-sweep { 
    position:absolute; width:200%; height:200%; 
    background: conic-gradient(from 0deg, transparent 70%, color-mix(in srgb, var(--f-color) 50%, transparent) 100%); 
    pointer-events: none;
    animation: spin-radar 2s linear infinite; 
}
.aa-turret-ring { position:absolute; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; display:flex; justify-content:center; transition: all 0.3s; }

.aa-turret-ring.t3 { border-style: dashed; }

.aa-barrel { position:absolute; width:3px; height:10px; background:#fff; top:-6px; box-shadow: 0 0 6px var(--f-color); border-radius: 1.5px; }
.aa-barrel.left { left: 8px; }
.aa-barrel.right { right: 8px; }

.bunker-shield {
    position: absolute; top: 50%; left: 50%; width: 110px; height: 110px;
    transform: translate(-50%, -50%); border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--f-color) 40%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--f-color) 15%, transparent) 0%, transparent 60%);
    pointer-events: none; z-index: -1;
    box-shadow: 0 0 15px color-mix(in srgb, var(--f-color) 30%, transparent), inset 0 0 15px color-mix(in srgb, var(--f-color) 30%, transparent);
    opacity: 0;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
}
.bunker-shield.t2 { width: 160px; height: 160px; opacity: 1; }
.bunker-shield.t3 { width: 200px; height: 200px; opacity: 1; }

.bunker-gear-container {
    position: absolute; width: 44px; height: 44px;
    display: flex; justify-content: center; align-items: center;
    animation: spin-radar 15s linear infinite;
}
.gear-tooth {
    position: absolute;
    width: 12px; height: 42px; 
    background: var(--f-color);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--f-color);
}
.gear-tooth.t1 { transform: rotate(0deg); }
.gear-tooth.t2 { transform: rotate(45deg); }
.gear-tooth.t3 { transform: rotate(90deg); }
.gear-tooth.t4 { transform: rotate(135deg); }

.gear-ring {
    position: absolute;
    width: 36px; height: 36px;
    background: var(--f-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--f-color);
}
.gear-center-hole {
    position: absolute;
    width: 28px; height: 28px; 
    background: #080c0e; 
    border-radius: 50%;
    box-shadow: inset 0 0 8px #000;
    z-index: 2; 
}

.barracks-minimal-svg {
    position: absolute; width: 44px; height: 44px;
    pointer-events: none;
}
.b-ring-1 {
    transform-origin: 22px 22px;
    filter: drop-shadow(0 0 2px var(--f-color));
    animation: spin-radar 6s linear infinite;
}

.barracks-poison-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none; z-index: -1;
    border: 2px dashed color-mix(in srgb, var(--f-color) 50%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--f-color) 10%, transparent) 0%, transparent 65%);
    opacity: 0;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    animation: spin-slow 15s linear infinite;
}
.barracks-poison-ring.t2 { width: 160px; height: 160px; opacity: 1; }
.barracks-poison-ring.t3 { width: 200px; height: 200px; opacity: 1; }

.radial-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    background: rgba(10, 15, 18, 0.95);
    border: 2px solid color-mix(in srgb, var(--f-color) 50%, transparent);
    color: var(--f-color);
    box-shadow: 0 0 15px color-mix(in srgb, var(--f-color) 40%, transparent);
    cursor: pointer; outline: none;
    transform: translate(-50%, -50%) scale(0);
    animation: radial-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
@keyframes radial-pop {
    to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
}
.radial-btn:hover {
    background: color-mix(in srgb, var(--f-color) 30%, transparent);
    box-shadow: 0 0 20px var(--f-color);
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.15);
}
.radial-btn-inner span { font-size: 20px; font-variation-settings: 'FILL' 1; pointer-events: none; }
.radial-tooltip {
    position: absolute; top: -28px;
    white-space: nowrap; font-size: 10px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase;
    background: rgba(5,10,11,0.9); padding: 4px 8px; border-radius: 4px;
    color: #fff; pointer-events: none; border: 1px solid var(--f-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.spaceship {
    position: absolute; top: 0; left: 0; width: 14px; height: 24px; color: var(--f-color); 
    filter: drop-shadow(0 0 4px var(--f-color));
    transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(var(--s, 1)); opacity: var(--op, 1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; 
    z-index: 10;
}
.spaceship svg { width: 100%; height: 100%; display: block; }
.engine-flame { transform-origin: top; animation: engine-flicker 0.15s infinite alternate ease-in-out; }
@keyframes engine-flicker { 0% { opacity: 0.6; transform: scaleY(0.8); } 100% { opacity: 1; transform: scaleY(1.2); } }

@keyframes capture-wave-anim { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; border-width: 4px; } 100% { transform: translate(-50%, -50%) scale(4); opacity: 0; border-width: 1px; } }
.capture-wave {
    position: absolute; width: 30px; height: 30px; border-radius: 50%; pointer-events: none; z-index: 10;
    animation: capture-wave-anim 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    border: 2px solid var(--f-color); background-color: color-mix(in srgb, var(--f-color) 10%, transparent); box-shadow: 0 0 15px var(--f-color), inset 0 0 8px var(--f-color);
    will-change: transform, opacity;
}

.swarm-hitbox { position: absolute; top: 0; left: 0; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; z-index: 20; pointer-events: auto; display: flex; justify-content: center; align-items: center; }
.swarm-tooltip { opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; background: rgba(10, 15, 15, 0.85); backdrop-filter: blur(2px); padding: 3px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; pointer-events: none; transform: translateY(0) scale(0.8); display: flex; align-items: center; gap: 4px; border: 1px solid; color: var(--f-color); border-color: color-mix(in srgb, var(--f-color) 40%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--f-color) 20%, transparent); }
.swarm-hitbox:hover .swarm-tooltip { opacity: 1; transform: translateY(-30px) scale(1); }

.collision-explosion { 
    position: absolute; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); 
    pointer-events: none; z-index: 25; 
    animation: explode-anim 0.3s ease-out forwards; 
    will-change: transform, opacity;
}
@keyframes explode-anim { 
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; background: #fff; box-shadow: 0 0 10px #fff; } 
    50% { background: var(--f-color, #ffaa00); box-shadow: 0 0 20px var(--f-color, #ffaa00), inset 0 0 10px #fff; opacity: 1; } 
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; box-shadow: 0 0 30px transparent; } 
}

@keyframes fade-in-up-chat { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.animate-fade-in-up { animation: fade-in-up-chat 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fade-in-right-dropdown { 0% { transform: translateX(-10px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

.diplomacy-row { box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.diplomacy-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--f-color); cursor: pointer; background-color: color-mix(in srgb, var(--f-color) 20%, transparent); display: flex; justify-content: center; align-items: center; transition: transform 0.2s, box-shadow 0.2s, border-color 0.3s; position: relative; }
.diplomacy-avatar:hover { transform: scale(1.1); box-shadow: 0 0 12px var(--f-color); }
.diplomacy-avatar.is-player { cursor: default; }
.diplomacy-avatar.is-player:hover { transform: none; box-shadow: none; }
.diplomacy-avatar.is-boss { cursor: default; }
.diplomacy-avatar.is-boss:hover { transform: none; box-shadow: none; }

.diplomacy-avatar.is-coalition { border-color: #fbbf24 !important; box-shadow: 0 0 12px rgba(251, 191, 36, 0.6) !important; }
.diplomacy-avatar.is-coalition::after { content: 'shield'; font-family: 'Material Symbols Outlined'; position: absolute; bottom: -6px; right: -6px; background: #fbbf24; color: #050a0b; font-size: 11px; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 2px solid #050a0b; font-variation-settings: 'FILL' 1; box-shadow: 0 0 8px #fbbf24; z-index: 20; }

.diplomacy-avatar.is-threat { border-color: #ef4444 !important; box-shadow: 0 0 12px rgba(239, 68, 68, 0.8) !important; }
.diplomacy-avatar.is-threat::after { content: 'warning'; font-family: 'Material Symbols Outlined'; position: absolute; bottom: -6px; right: -6px; background: #ef4444; color: #050a0b; font-size: 11px; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 2px solid #050a0b; font-variation-settings: 'FILL' 1; box-shadow: 0 0 8px #ef4444; z-index: 20; }

.diplomacy-avatar.is-allied { border-color: #00ffaa !important; box-shadow: 0 0 12px rgba(0, 255, 170, 0.6) !important; }
.diplomacy-avatar.is-allied::after { content: 'handshake'; font-family: 'Material Symbols Outlined'; position: absolute; bottom: -6px; right: -6px; background: #00ffaa; color: #050a0b; font-size: 11px; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 2px solid #050a0b; font-variation-settings: 'FILL' 1; box-shadow: 0 0 8px #00ffaa; z-index: 20; }

.diplomacy-dropdown { position: fixed; background: rgba(8, 13, 16, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(37, 209, 244, 0.2); border-left: 3px solid var(--f-color); border-radius: 6px; padding: 10px; z-index: 999; min-width: 170px; box-shadow: 0 10px 30px rgba(0,0,0,0.9), 0 0 20px color-mix(in srgb, var(--f-color) 15%, transparent); animation: fade-in-right-dropdown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.diplomacy-dropdown::before { content: ''; position: absolute; top: 14px; left: -9px; border-width: 6px 6px 6px 0; border-style: solid; border-color: transparent var(--f-color) transparent transparent; }
.diplo-btn { width: 100%; text-align: left; padding: 6px 10px; font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.05em; }
.diplo-btn-propose { color: #25d1f4; background: rgba(37, 209, 244, 0.1); border: 1px solid rgba(37, 209, 244, 0.2); }
.diplo-btn-propose:hover { background: rgba(37, 209, 244, 0.2); box-shadow: 0 0 10px rgba(37, 209, 244, 0.4); }
.diplo-btn-break { color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
.diplo-btn-break:hover { background: rgba(239, 68, 68, 0.2); box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(37, 209, 244, 0.5); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #25d1f4; }
.glow-text { text-shadow: 0 0 10px rgba(37, 209, 244, 0.7); }
.status-active { text-shadow: 0 0 8px rgba(37, 209, 244, 0.6); }

/* --- Супер Солдаты --- */
.main-center-hole {
    width: 65px;
    height: 65px;
    background: #080c0e;
    border-radius: 50%;
    box-shadow: inset 0 0 10px #000;
    z-index: 5;
}

.super-soldiers-indicator {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    z-index: 25;
    pointer-events: none;
}

.super-dot {
    position: absolute;
    bottom: 4px; 
    left: 50%;
    margin-left: -2px; 
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px var(--f-color);
    opacity: 0.15;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, background 0.3s ease;
}

.super-dot.active {
    opacity: 1;
    transform: scale(1.2);
    background: color-mix(in srgb, var(--f-color) 80%, white);
    box-shadow: 0 0 6px var(--f-color), 0 0 12px var(--f-color), inset 0 0 2px #fff;
}

/* --- Силовое поле (Уровень 2) --- */
.force-field-zone {
    position: absolute; top: 50%; left: 50%; width: 270px; height: 270px;
    border: 2px solid color-mix(in srgb, var(--f-color) 40%, transparent); border-radius: 50%; 
    transform: translate(-50%, -50%); pointer-events: none; z-index: -1; 
    background: radial-gradient(circle, color-mix(in srgb, var(--f-color) 15%, transparent) 0%, transparent 60%);
    box-shadow: 0 0 20px color-mix(in srgb, var(--f-color) 30%, transparent), inset 0 0 20px color-mix(in srgb, var(--f-color) 30%, transparent);
}

/* --- Охрана Базы (Уровень 3) --- */
.guard-ship {
    position: absolute; top: 0; left: 0; width: 16px; height: 26px; color: var(--f-color); 
    filter: drop-shadow(0 0 6px var(--f-color));
    z-index: 15; pointer-events: none;
}
.guard-ship svg { width: 100%; height: 100%; display: block; }
.guard-engine-flame { transform-origin: top; animation: engine-flicker 0.1s infinite alternate ease-in-out; }

/* ========================================================================= */
/* --- КОСМИЧЕСКИЙ ДЕКОР (РЕДАКТОР И ИГРА) - КОРАБЛИ И СУПЕР-КОРАБЛЬ --- */
/* ========================================================================= */
.decor-element {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

.decor-spaceship .engine-flame {
    animation: engine-flicker 0.15s infinite alternate ease-in-out;
}
.decor-spaceship .guard-engine-flame {
    animation: engine-flicker 0.1s infinite alternate ease-in-out;
}

/* ========================================================================= */
/* --- АНИМАЦИЯ ПАДЕНИЯ КОРАБЛЯ --- */
/* ========================================================================= */
.spaceship-crashing {
    transition: none !important; /* Отключаем стандартные переходы, чтобы анимация была мгновенной */
    animation: ship-crash-anim 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    pointer-events: none;
    z-index: 5; /* Корабль уходит под живые корабли */
}

/* Кабина становится темной */
.spaceship-crashing path:nth-child(2) {
    fill: rgba(0,0,0,0.8) !important; 
}

/* Корпус становится обгоревшим (серым) */
.spaceship-crashing path:first-child {
    fill: #4b5563 !important; 
}

/* Отключаем пламя двигателя */
.spaceship-crashing .engine-flame {
    display: none !important; 
}

@keyframes ship-crash-anim {
    0% {
        transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(var(--s, 1)) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 10px #ef4444) brightness(2); /* Короткая яркая вспышка при попадании */
    }
    15% {
        filter: drop-shadow(0 0 4px #ef4444) brightness(0.6); /* Корабль "тухнет" */
    }
    100% {
        /* Отлетает в стороны (--crash-dx) и всегда назад (--crash-dy) с вращением (--crash-rot) */
        transform: translate(calc(var(--tx, -50%) + var(--crash-dx)), calc(var(--ty, -50%) + var(--crash-dy))) scale(0.3) rotate(var(--crash-rot));
        opacity: 0;
        filter: drop-shadow(0 0 0px transparent) brightness(0.3);
    }
}