/**
 * MikoinExplosion CSS
 * Required styles for the coin explosion effect
 */

/* Canvas overlay - must be positioned fixed to cover the viewport */
#coin-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

/* Panel glow effect when coins arrive */
.user-panel {
    transition: box-shadow 0.15s ease-out, background 0.15s ease-out, border-color 0.15s ease-out;
}

.user-panel.coin-hit {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 215, 0, 0.4), inset 0 0 15px rgba(255, 215, 0, 0.1);
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
}

/* Mikoin counter pulse effect */
.mikoin-counter {
    transition: all 0.3s ease;
}

.mikoin-counter.updated {
    transform: scale(1.2);
    color: #22c55e;
}

/* Claim button states */
.claim-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    transition: all 0.3s ease;
    animation: claim-pulse 2s infinite;
    min-width: 120px;
    text-align: center;
}

.claim-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.claim-btn.claiming {
    background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
    color: #000;
    animation: none;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.claim-btn.fade-out {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s ease-out;
}

.claimed-text {
    opacity: 0;
    animation: claimedFadeIn 0.4s ease-out forwards;
}

@keyframes claim-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

@keyframes claimedFadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}