/* -------------------- Wrapper -------------------- */
.divine-dashboard-wrapper {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap;
    margin: 10px 0 !important;
}

/* -------------------- Individual Box -------------------- */
.divine-counter-box {
    display: inline-block !important;
    font-family: 'Roboto', 'Lora', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    background: linear-gradient(90deg, #1E88E5, #FFEB3B) !important; /* rainbow style */
    padding: 8px 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 10px rgba(30,136,229,0.4), 0 0 10px rgba(255,235,59,0.4) !important;
    animation: subtlePulse 2.5s infinite alternate !important;
    text-align: center !important;
}

/* -------------------- Force text color inside counters -------------------- */
.divine-counter-box span {
    color: #121212 !important; /* guaranteed dark text for pop */
}

/* -------------------- Hover glow effect -------------------- */
.divine-counter-box:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.7), 0 0 12px rgba(30,136,229,0.5), 0 0 12px rgba(255,235,59,0.5) !important;
}

/* -------------------- Glow animation -------------------- */
@keyframes subtlePulse {
    0% {
        box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 8px rgba(30,136,229,0.35), 0 0 8px rgba(255,235,59,0.35);
    }
    50% {
        box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 12px rgba(30,136,229,0.5), 0 0 12px rgba(255,235,59,0.5);
    }
    100% {
        box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 0 8px rgba(30,136,229,0.35), 0 0 8px rgba(255,235,59,0.35);
    }
}

/* -------------------- Responsive adjustments -------------------- */
@media (max-width: 768px) {
    .divine-counter-box {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }
}