@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Outfit:wght@400;600;800;900&display=swap');

:root {
    --bg-dark: #0F172A;
    --jungle-green: #10B981;
    --jungle-dark: #047857;
    --amber-warning: #F59E0B;
    --dino-red: #EF4444;
    --blue-racing: #3B82F6;
    --purple-spark: #8B5CF6;
}

body {
    font-family: 'Fredoka', 'Outfit', sans-serif;
    background-color: var(--bg-dark);
    color: #F8FAFC;
    overflow-x: hidden;
    touch-action: manipulation;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #1E293B;
}
::-webkit-scrollbar-thumb {
    background: var(--jungle-green);
    border-radius: 5px;
}

/* 3D Toy Button effect for 4yo kids */
.btn-toy {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 0 rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.4);
    transform: translateY(0);
}
.btn-toy:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 0 rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.4);
}
.btn-toy:active {
    transform: translateY(5px);
    box-shadow: 0 3px 0 rgba(0,0,0,0.3), inset 0 1px 1px rgba(0,0,0,0.4);
}

/* Onomatopoeia Floating Bubbles */
.pop-bubble {
    position: absolute;
    pointer-events: none;
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: #FACC15;
    color: #000;
    border: 4px solid #000;
    box-shadow: 4px 4px 0 #000;
    z-index: 100;
    animation: popAndFade 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popAndFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -20%) scale(0.3) rotate(-10deg);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -80%) scale(1.3) rotate(5deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(1) rotate(15deg);
    }
}

/* Screen Shake effect on Big Roar/Vrum */
.shake-screen {
    animation: screenShake 0.4s ease-in-out;
}
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-6px, 4px) rotate(-1deg); }
    40% { transform: translate(6px, -4px) rotate(1deg); }
    60% { transform: translate(-4px, -2px) rotate(-0.5deg); }
    80% { transform: translate(4px, 2px) rotate(0.5deg); }
}

/* Glowing Jungle background particles */
.leaf-particle {
    position: fixed;
    pointer-events: none;
    opacity: 0.6;
    animation: leafFloat 8s linear infinite;
    z-index: 0;
}

@keyframes leafFloat {
    0% {
        transform: translateY(105vh) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% {
        transform: translateY(-10vh) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}

/* Vehicle Icon facing forward (right) */
.vehicle-icon {
    transform: scaleX(-1);
    display: inline-block;
}

/* Headlight Beams for Jipe Safari */
.headlight-beam {
    transform: translateY(-50%);
    filter: drop-shadow(0 0 15px #FACC15);
}

.headlights-on .headlight-beam {
    opacity: 1 !important;
    animation: headlightPulse 0.5s ease-in-out infinite alternate;
}

@keyframes headlightPulse {
    from { opacity: 0.8; filter: drop-shadow(0 0 12px #FACC15); }
    to { opacity: 1; filter: drop-shadow(0 0 28px #FCD34D); }
}

/* Vehicle Wheel Spinning Animation */
.spin-wheel {
    animation: spinWheel 0.6s linear infinite;
}
@keyframes spinWheel {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Dino Tail Wiggle */
.wiggle-tail {
    transform-origin: bottom left;
    animation: tailWiggle 1.5s ease-in-out infinite alternate;
}
@keyframes tailWiggle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(12deg); }
}

/* Pulse Glow for Interactive Cards */
.glow-card {
    position: relative;
    overflow: hidden;
}
.glow-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.glow-card:hover::before {
    opacity: 1;
}

/* Glassmorphism Panels */
.glass-panel {
    background: rgba(30, 41, 59, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Road stripe animation */
.road-stripes {
    background: repeating-linear-gradient(
        90deg,
        #FACC15,
        #FACC15 30px,
        transparent 30px,
        transparent 60px
    );
    animation: moveRoad 0.6s linear infinite;
}
@keyframes moveRoad {
    0% { background-position: 0 0; }
    100% { background-position: -60px 0; }
}

/* Fast road animation during turbo */
.road-fast {
    animation-duration: 0.2s !important;
}

/* Runner Vehicle Jump Animation */
.runner-jump {
    animation: vehicleJump 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes vehicleJump {
    0% { transform: translateY(0) rotate(0deg); }
    40% { transform: translateY(-75px) rotate(-6deg); }
    70% { transform: translateY(-65px) rotate(3deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Turbo Flame Pulse */
.turbo-glow {
    filter: drop-shadow(0 0 15px #EF4444) drop-shadow(0 0 25px #F59E0B);
}