body {
    font-family: "Fredoka", sans-serif;
    background:
        radial-gradient(circle at top, rgba(255, 236, 214, 0.95), rgba(255, 249, 245, 0.85) 38%),
        linear-gradient(180deg, #fff8ef 0%, #fff9f5 42%, #f7fbff 100%);
    color: #243145;
}

.rat-card {
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s ease;
}

.rat-card:hover {
    transform: translateY(-12px) rotate(1deg);
    box-shadow: 0 20px 35px -10px rgb(32 54 87 / 0.18);
}

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(8px, -12px, 0) scale(1.03); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

.floating {
    animation: float 4s ease-in-out infinite;
}

.tap-effect:active {
    transform: scale(0.96);
}

.story-cloud {
    animation: drift 8s ease-in-out infinite;
}

.sparkle-bg::before,
.sparkle-bg::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    filter: blur(18px);
    opacity: 0.35;
    pointer-events: none;
}

.sparkle-bg::before {
    width: 8rem;
    height: 8rem;
    top: -1.25rem;
    right: -1.25rem;
    background: rgba(255, 196, 113, 0.75);
}

.sparkle-bg::after {
    width: 6rem;
    height: 6rem;
    bottom: -1rem;
    left: -1rem;
    background: rgba(129, 197, 255, 0.65);
}