.font-ruin {
    font-family: 'Germania One', system-ui;
    letter-spacing: 0.05em;
}

.font-stone {
    font-family: 'Caudex', serif;
}

.temple-bg {
    background-color: #0c0a09;
    background-image:
        radial-gradient(circle at 50% 0%, #78350f 0%, transparent 60%),
        repeating-linear-gradient(45deg, #1c1917 0, #1c1917 2px, #0c0a09 2px, #0c0a09 10px);
}

/* Torch Flicker */
@keyframes flicker {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.95);
    }

    25% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

.torch-glow {
    animation: flicker 0.2s infinite alternate;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.6) 0%, rgba(245, 158, 11, 0) 70%);
}

/* Stone Panel */
.panel-stone {
    background-color: #292524;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20L0 20z' fill='%231c1917' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    border: 4px solid #57534e;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Door Animation */
@keyframes slideOpen {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

.door-open {
    animation: slideOpen 1.5s forwards ease-in-out;
}

.btn-gold {
    background: linear-gradient(to bottom, #f59e0b, #b45309);
    border: 2px solid #78350f;
    box-shadow: 0 4px 0 #451a03;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.1s;
}

.btn-gold:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #451a03;
}

.btn-stone {
    background: #44403c;
    border: 2px solid #292524;
    box-shadow: 0 4px 0 #1c1917;
    transition: all 0.1s;
}

.btn-stone:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #1c1917;
}

.rune-text {
    text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}

/* 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;
}