.font-tiki {
    font-family: 'Bangers', system-ui;
    letter-spacing: 0.05em;
}

.font-body {
    font-family: 'Quicksand', sans-serif;
}

.volcano-bg {
    background: linear-gradient(180deg, #1f1515 0%, #3f1818 60%, #7f1d1d 100%);
    position: relative;
    overflow: hidden;
}

/* Ember Particles */
.ember {
    position: absolute;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 10px #f87171;
    animation: rise 4s linear infinite;
    bottom: -10px;
}

@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) scale(0);
        opacity: 0;
    }
}

/* Tiki Panel */
.panel-tiki {
    background-color: #3f2e21;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h21.5v20H40v2H21.5v2H40v2H21.5v2H40v2H21.5v2H40v2H21.5v2H40v2H21.5V40h-3v-2.5H40v-2h-21.5V33H40v-2h-21.5V28H40v-2h-21.5V23H40v-2h-21.5V18.5z' fill='%23291d15' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
    border: 4px solid #78350f;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.5);
}

.btn-lava {
    background: linear-gradient(to bottom, #ef4444, #991b1b);
    border: 2px solid #7f1d1d;
    box-shadow: 0 6px 0 #450a0a;
    transition: all 0.1s;
}

.btn-lava:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #450a0a;
}

/* Float Animation */
@keyframes float {

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

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

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

.chest-glow {
    filter: drop-shadow(0 0 20px rgba(234, 179, 8, 0.4));
}/* 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;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}