/* Moon Carrot: Bunny Jump app page (children's game). Loaded after app.css. */
.app-page-hero--moon-carrot {
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 236, 170, 0.55), transparent 28%),
        linear-gradient(180deg, #7EC3EF 0%, #A9DAF6 55%, #D7F0FB 82%, #BFE8CF 100%);
    color: #2A1635;
}

.app-category-badge--kids {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.app-page-hero--moon-carrot .coming-soon-badge {
    background: #FDFCFE;
    border-color: transparent;
    color: #C9302C;
    box-shadow: 0 6px 18px rgba(42, 22, 53, 0.12);
}

.app-page-hero--moon-carrot .coming-soon-desc {
    opacity: 0.85;
    font-weight: 500;
}

.app-features-grid--kids {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.app-feature-card--kids:hover::after {
    box-shadow: inset 0 0 0 2px #7EC3EF;
}

.app-feature-number--kids {
    background: #E53935;
    color: #FDFCFE;
}

/* The ID selector beats app.css's light background for sections after the hero. */
#mainContent > .app-page-final-cta--moon-carrot {
    color: #FFFFFF;
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 236, 170, 0.35), transparent 30%),
        linear-gradient(135deg, #1E3A64 0%, #3E6FA8 100%);
}

.app-final-contact {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem !important;
    margin-top: 0 !important;
}

.app-final-contact a {
    color: #FFFFFF !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.app-final-contact-email {
    font-size: 1.2rem;
}

@media (max-width: 860px) {
    .app-page-hero--moon-carrot .app-coming-soon {
        align-items: center;
    }
}