/* ==========================================
   KidZaps - Ad Slot & Hint Animations
   Loaded on public pages alongside main.css
   ========================================== */

/* Ad Slot Wrapper (kid-safe, COPPA compliant) */
.ad-container {
    margin: 1.5rem auto;
    text-align: center;
}

.ad-slot {
    display: inline-block;
    max-width: 100%;
    padding: 0.5rem 0;
}

.ad-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9CA3AF;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.ad-content {
    min-height: 20px;
}

.ad-slot-header,
.ad-slot-footer {
    padding: 1rem 0;
}

/* Hint pulse animation for interactive worksheets */
@keyframes hint-pulse-anim {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 12px rgba(245, 158, 11, 0);
    }
}

.hint-pulse {
    animation: hint-pulse-anim 1.5s infinite;
}

/* Reward overlay: elevated stacking + soft dim (activated via .active class) */
.reward-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: reward-fade-in 0.25s ease;
}

.reward-overlay.active {
    display: flex;
}

.reward-popup {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 420px;
    width: 90%;
    animation: reward-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reward-emoji {
    font-size: 4.5rem;
    margin-bottom: 0.5rem;
    animation: reward-bounce 1s ease infinite;
}

.reward-message {
    font-family: 'Fredoka', sans-serif;
    color: #4F46E5;
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
}

.reward-stars {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.15em;
}

@keyframes reward-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes reward-pop-in {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes reward-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}