/* V3 Creative style.css */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700;900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: #87ceeb; /* Sky blue */
    overflow: hidden;
    font-family: 'Nunito', sans-serif;
    width: 100vw;
    height: 100vh;
}

/* --- Animated Background --- */
.bg-animations {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.cloud {
    position: absolute;
    background: white;
    border-radius: 50px;
    opacity: 0.8;
    animation: drift linear infinite;
}

.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud1 {
    width: 150px; height: 50px;
    top: 10%; left: -200px;
    animation-duration: 40s;
}
.cloud1::before { width: 70px; height: 70px; top: -35px; left: 20px; }
.cloud1::after { width: 50px; height: 50px; top: -25px; right: 20px; }

.cloud2 {
    width: 100px; height: 35px;
    top: 40%; left: -150px;
    animation-duration: 30s;
    animation-delay: -10s;
    opacity: 0.6;
}
.cloud2::before { width: 50px; height: 50px; top: -25px; left: 15px; }
.cloud2::after { width: 35px; height: 35px; top: -15px; right: 15px; }

.cloud3 {
    width: 200px; height: 60px;
    top: 70%; left: -250px;
    animation-duration: 50s;
    animation-delay: -25s;
}
.cloud3::before { width: 90px; height: 90px; top: -45px; left: 30px; }
.cloud3::after { width: 70px; height: 70px; top: -30px; right: 30px; }

@keyframes drift {
    from { transform: translateX(-200px); }
    to { transform: translateX(120vw); }
}

/* --- Typography --- */
.bubbly-text {
    font-family: 'Fredoka One', cursive;
    color: white;
    -webkit-text-stroke: 3px #ff4081;
    text-shadow: 
        4px 4px 0px #ff4081,
        8px 8px 15px rgba(0,0,0,0.3);
    animation: floating 3s ease-in-out infinite alternate;
}

.mode-title-text {
    font-family: 'Fredoka One', cursive;
    color: white;
    -webkit-text-stroke: 2px rgba(0,0,0,0.2);
    text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

@keyframes floating {
    0% { transform: translateY(0px) rotate(-2deg); }
    100% { transform: translateY(-15px) rotate(2deg); }
}

/* --- Screen Transitions --- */
.screen {
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    transition: opacity 0.5s ease-in-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.view-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85) translateY(50px);
    z-index: 1 !important;
}

.view-active {
    opacity: 1;
    pointer-events: all;
    transform: scale(1) translateY(0);
    z-index: 10 !important;
}

/* --- 3D Jelly Buttons --- */
.jelly-btn {
    position: relative;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: 'Fredoka One', cursive;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    /* Organic starting shape */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.jelly-btn::before {
    content: '';
    position: absolute;
    top: 5px; left: 10%;
    width: 80%; height: 30%;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0));
    border-radius: 50%;
    pointer-events: none;
}

.jelly-btn:hover {
    border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
    transform: translateY(-5px) scale(1.05);
}

.jelly-btn:active {
    transform: translateY(8px) scale(0.95);
    border-radius: 60% 40% 50% 50% / 40% 60% 70% 30%;
}

/* Jelly Button Colors */
.jelly-pink {
    background: #ff4081;
    box-shadow: inset -5px -10px 20px rgba(0,0,0,0.2), 0 15px 0 #c2185b, 0 20px 20px rgba(0,0,0,0.3);
}
.jelly-pink:active { box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2), 0 5px 0 #c2185b, 0 5px 10px rgba(0,0,0,0.3); }

.jelly-green {
    background: #00e676;
    box-shadow: inset -5px -10px 20px rgba(0,0,0,0.2), 0 15px 0 #00b0ff, 0 20px 20px rgba(0,0,0,0.3);
}
.jelly-green:active { box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2), 0 5px 0 #00b0ff, 0 5px 10px rgba(0,0,0,0.3); }

.jelly-blue {
    background: #29b6f6;
    box-shadow: inset -5px -10px 20px rgba(0,0,0,0.2), 0 15px 0 #0288d1, 0 20px 20px rgba(0,0,0,0.3);
}
.jelly-blue:active { box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2), 0 5px 0 #0288d1, 0 5px 10px rgba(0,0,0,0.3); }

.jelly-purple {
    background: #ab47bc;
    box-shadow: inset -5px -10px 20px rgba(0,0,0,0.2), 0 15px 0 #7b1fa2, 0 20px 20px rgba(0,0,0,0.3);
}
.jelly-purple:active { box-shadow: inset -5px -5px 10px rgba(0,0,0,0.2), 0 5px 0 #7b1fa2, 0 5px 10px rgba(0,0,0,0.3); }

.jelly-yellow {
    background: #ffca28;
    color: #d84315;
    box-shadow: inset -5px -10px 20px rgba(0,0,0,0.1), 0 15px 0 #ff8f00, 0 20px 20px rgba(0,0,0,0.3);
}
.jelly-yellow:active { box-shadow: inset -5px -5px 10px rgba(0,0,0,0.1), 0 5px 0 #ff8f00, 0 5px 10px rgba(0,0,0,0.3); }


/* --- Staggered Grid Content (Alphabets/Numbers/etc) --- */
.item-card {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    backdrop-filter: blur(5px);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 4.5rem;
    font-family: 'Fredoka One', cursive;
    color: #37474f;
    box-shadow: inset -3px -5px 10px rgba(0,0,0,0.1), 0 8px 0px rgba(0,0,0,0.1), 0 15px 20px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    text-align: center;
    line-height: 1;
    border: 3px solid white;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid white;
}

/* --- Hint Hand Animation --- */
@keyframes hintSwipe {
    0%, 100% {
        transform: translate(0px, -20px) scale(1);
        opacity: 0;
    }
    15% {
        transform: translate(0px, 0px) scale(0.9);
        opacity: 1; /* Tap down */
    }
    60% {
        transform: translate(15px, 80px) scale(0.9);
        opacity: 1; /* Swipe down */
    }
    75% {
        transform: translate(20px, 100px) scale(1);
        opacity: 0; /* Lift up */
    }
}
.animate-hint {
    animation: hintSwipe 2.5s infinite ease-in-out;
    transform-origin: top left;
}

.item-card:nth-child(even) {
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    transform: translateY(10px);
}

.item-card:hover {
    transform: translateY(-5px) scale(1.1) rotate(5deg);
}
.item-card:nth-child(even):hover {
    transform: translateY(5px) scale(1.1) rotate(-5deg);
}

.item-card:active {
    transform: translateY(8px) scale(0.9);
    box-shadow: inset -3px -3px 5px rgba(0,0,0,0.1), 0 0px 0px rgba(0,0,0,0.1), 0 5px 10px rgba(0,0,0,0.1);
}

.item-card .subtitle {
    font-size: 1.3rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    color: #555;
    margin-top: -5px;
}
.item-card .icon-word {
    font-size: 3.5rem;
}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 15px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.2); border-radius: 20px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ff4081; 
    border-radius: 20px;
    border: 4px solid rgba(255,255,255,0.8);
}

/* Range input */
input[type="range"] {
    -webkit-appearance: none;
    height: 16px;
    border-radius: 8px;  
    background: #e2e8f0;
    outline: none;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 34px;
    border-radius: 50%; 
    background: #ff4081;
    cursor: pointer;
    border: 4px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Color input */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
	border: 3px solid white;
	border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* FX Canvas */
#fx-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

/* Celebration Animations */
@keyframes popIn {
    0% { transform: translate(-50%, -50%) scale(0.5) rotate(-20deg); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.3) rotate(10deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes floatUp {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -150%) scale(1.2) rotate(20deg); opacity: 0; }
}

@media (max-width: 768px) {
    .bubbly-text { font-size: 3rem; -webkit-text-stroke: 2px #ff4081; text-shadow: 2px 2px 0px #ff4081, 4px 4px 10px rgba(0,0,0,0.3); }
    .jelly-btn { font-size: 1.5rem; padding: 15px; }
    .item-card { width: 100px; height: 100px; font-size: 3rem; }
}