@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");
/* For Tally Marks */

body {
    font-family: "Fredoka", sans-serif;
    touch-action: none;
    /* Prevent scroll on mobile */
}

.font-handwriting {
    font-family: "Patrick Hand", cursive;
}

/* Animations */
@keyframes float {

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

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes bounce-slow {

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

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

.animate-bounce-slow {
    animation: bounce-slow 4s ease-in-out infinite;
}

@keyframes shake {

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

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.animate-shake {
    animation: shake 0.4s ease-in-out;
}

/* Gems */
.gem {
    position: absolute;
    width: 60px;
    height: 60px;
    cursor: grab;
    transition: transform 0.1s;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    touch-action: none;
}

.gem:active {
    cursor: grabbing;
    transform: scale(1.1);
    z-index: 50;
}

/* Specific Gem Styles (Simple CSS shapes or Emojis?) 
   Using nice glowing CSS shapes for "Premium" feel 
*/

.gem-red {
    background: radial-gradient(circle at 30% 30%, #ff9a9e, #ff0000);
    border-radius: 50%;
    /* Ruby/Circle-ish or use clip-path for Diamond */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.4);
}

.gem-green {
    background: radial-gradient(circle at 30% 30%, #a8e063, #0ba360);
    /* Emerald Cut (Roughly rect with cut corners) but for simplicity, Hexagon? */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.gem-blue {
    background: radial-gradient(circle at 30% 30%, #4facfe, #00509e);
    border-radius: 10% 50% 50% 50%;
    /* Teardrop */
    transform: rotate(45deg);
}

/* Chests */
.chest {
    transition: transform 0.2s;
}

.chest-hover {
    transform: scale(1.1) translateY(-10px);
    filter: brightness(1.2);
}

/* Tally Marks */
.tally-mark {
    display: inline-block;
    letter-spacing: 2px;
}

.tally-group {
    display: inline-flex;
    position: relative;
    margin-right: 10px;
}

.tally-group.five::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #1e293b;
    transform: rotate(-15deg);
}

/* High-quality claymation background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('clay_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
}