/* ✨ ATLAS-CIV-CLICKER | FX & ANIMATION SYSTEM (v7.9.12) */
/* @ui-render @visual-effects @animations @v3.8-premium */

/* --- 1. Floating Texts (Cyber-Reward v1.4.7) --- */
/* --- 1. Imperial Floating Texts (Modular Core v2.0) --- */

.floating-text {
    position: fixed !important;
    /* MENSCH: left/top werden jetzt dynamisch via JS gesetzt (Klick-Punkt) */
    pointer-events: none !important;
    z-index: 100000 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: auto !important;
    max-width: 90vw !important;
    font-family: 'Cinzel', serif !important;
    animation: floatingFadeUp 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* MODUL: Spezial-Feedback (Screenshot-Sync) */
.muskel-pop {
    color: #60a5fa !important; /* Wissen-Blau */
    font-size: 1.4rem !important;
    text-shadow: 0 0 15px rgba(96, 165, 250, 0.8), 0 2px 4px rgba(0,0,0,0.9) !important;
}

.fx-mega-crit {
    color: var(--color-gold) !important;
    font-size: 1.8rem !important;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 2px 5px rgba(0,0,0,1) !important;
    z-index: 100001 !important;
}

/* MODUL: Gold & Ausbau */
.fx-elite-gold {
    color: var(--color-gold-elite) !important;
    font-size: 1.5rem !important;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.6), 0 2px 4px rgba(0,0,0,0.8) !important;
    letter-spacing: 2px !important;
}

/* MODUL: Wissenschaft & Forschung */
.fx-elite-science {
    color: var(--color-wissen) !important;
    font-size: 1.4rem !important;
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 0 2px 4px rgba(0,0,0,0.8) !important;
}

/* MODUL: Rubin & Dekrete */
.fx-elite-ruby {
    color: var(--color-rubine) !important;
    font-size: 1.6rem !important;
    text-shadow: 0 0 20px rgba(217, 70, 239, 0.7), 0 2px 4px rgba(0,0,0,0.8) !important;
}

/* MODUL: Ressourcen-Spezifisch */
.fx-elite-wood {
    color: #10b981 !important; /* Emerald */
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 1px 2px rgba(0,0,0,0.8) !important;
}

.fx-elite-stone {
    color: #94a3b8 !important; /* Slate */
    text-shadow: 0 0 10px rgba(148, 163, 184, 0.5), 0 1px 2px rgba(0,0,0,0.8) !important;
}

/* MODUL: Klick-Feedback (Sammeln) */
.fx-click-pop {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
    animation: clickRise 1.8s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;
}

@keyframes clickRise {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -40px) scale(1.5); opacity: 1; }
    100% { transform: translate(-50%, -180px) scale(1); opacity: 0; }
}

@keyframes floatingFadeUp {
    0% { transform: translate(-50%, 0) scale(0.8); opacity: 0; }
    20% { transform: translate(-50%, -40px) scale(1.1); opacity: 1; }
    80% { transform: translate(-50%, -120px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -160px) scale(0.9); opacity: 0; }
}

/* --- 2. Keyframes (Zentral) --- */
@keyframes floatUp {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-100px); opacity: 0; }
}

@keyframes megaPop {
    0% { transform: translate(-50%, -40px) scale(0) rotate(-15deg); opacity: 0; }
    25% { transform: translate(-50%, -120px) scale(1.8) rotate(10deg); opacity: 1; }
    50% { transform: translate(-50%, -160px) scale(1.6) rotate(-5deg); opacity: 1; }
    85% { transform: translate(-50%, -220px) scale(1.4) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -280px) scale(1.2) rotate(0deg); opacity: 0; }
}

@keyframes boostPop {
    0% { transform: translate(-50%, -40px) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -100px) scale(1.4); opacity: 1; }
    80% { transform: translate(-50%, -180px) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -240px) scale(1); opacity: 0; }
}

@keyframes researchPop {
    0% { transform: translate(-50%, -40px) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -90px) scale(1.3); opacity: 1; }
    80% { transform: translate(-50%, -160px) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -210px) scale(1); opacity: 0; }
}

@keyframes decreeFloat {
    0% { transform: translate(-50%, 0) scale(0.8); opacity: 0; }
    10% { transform: translate(-50%, -20px) scale(1.1); opacity: 1; }
    90% { transform: translate(-50%, -100px) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -120px) scale(0.9); opacity: 0; }
}

@keyframes gemPop {
    0% { transform: translate(-50%, -40px) scale(0) rotate(-45deg); opacity: 0; filter: hue-rotate(0deg); }
    15% { transform: translate(-50%, -80px) scale(1.4) rotate(20deg); opacity: 1; filter: hue-rotate(90deg); }
    40% { transform: translate(-50%, -100px) scale(1.3) rotate(-10deg); opacity: 1; }
    80% { transform: translate(-50%, -120px) scale(1.2) rotate(0deg); opacity: 1; filter: hue-rotate(360deg); }
    100% { transform: translate(-50%, -150px) scale(1) rotate(0deg); opacity: 0; }
}

/* --- 3. Gebäude & UI Effekte --- */
.boost-active {
    position: relative;
    border-color: #f472b6 !important;
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.5) !important;
}

.boost-active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 70px rgba(217, 70, 239, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.4); 
    pointer-events: none;
    animation: auraPulseSmooth 1.5s infinite alternate ease-in-out;
    opacity: 0.3; 
}

@keyframes auraPulseSmooth {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

.card-shake {
    animation: cardShakeAnim 0.4s ease-in-out !important;
}

@keyframes cardShakeAnim {
    0% { transform: scale(1); }
    25% { transform: scale(0.95) rotate(-1deg); }
    50% { transform: scale(1.05) rotate(1deg); }
    75% { transform: scale(0.95) rotate(-1deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes spotPulse {
    0% { transform: scale(1); box-shadow: 0 0 5px var(--color-gold); }
    50% { transform: scale(1.2); box-shadow: 0 0 15px var(--color-gold); }
    100% { transform: scale(1); box-shadow: 0 0 5px var(--color-gold); }
}

@keyframes imperialPulse {
    0% { filter: contrast(1) brightness(1); }
    100% { filter: contrast(1.1) brightness(1.1); box-shadow: inset 0 0 100px rgba(245, 158, 11, 0.1); }
}

@keyframes card-event-pulse {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.01); box-shadow: 0 15px 30px rgba(245, 158, 11, 0.3), inset 0 0 20px rgba(245, 158, 11, 0.1); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes screenShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes pulse-gold {
    0% { opacity: 0.1; }
    50% { opacity: 0.3; }
    100% { opacity: 0.1; }
}

/* --- 4. BUILDING LEVEL-UP FEEDBACK (Nova v4.0 Elite) --- */

.lvl-up-shimmer {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: translateX(-100%) !important;
    pointer-events: none !important;
    z-index: 50 !important;
    mix-blend-mode: overlay !important;
}

.lvl-up-shimmer.active {
    animation: imperialShimmer 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes imperialShimmer {
    0% { transform: translateX(-100%) skewX(-25deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(100%) skewX(-25deg); opacity: 0; }
}

/* Kaiserlicher Atmen-Effekt für die gesamte Karte */
.card-level-up {
    animation: cardLevelUpPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes cardLevelUpPop {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.03); filter: brightness(1.3) contrast(1.1); box-shadow: 0 0 40px rgba(245, 158, 11, 0.5); }
    100% { transform: scale(1); filter: brightness(1); }
}