@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel:wght@400;700&display=swap');

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('clay_background.png') no-repeat center center fixed;
    background-size: cover;
    opacity: 0.6;
    z-index: -1;
    filter: blur(1px);
}

body {
    font-family: 'Cinzel', serif;
    /* background: linear-gradient(180deg, #2d1810 0%, #1a0f08 50%, #0a0503 100%); */
    min-height: 100vh;
    position: relative;
}

.forge-bg {
    min-height: 100vh;
}

.anvil {
    background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    border: 3px solid #666;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 2px 10px rgba(255, 255, 255, 0.1)
}

.flame {
    animation: flicker 1.5s ease-in-out infinite
}

@keyframes flicker {

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

    50% {
        opacity: 1;
        transform: scale(1.1)
    }
}

.font-medieval {
    font-family: 'MedievalSharp', cursive
}

.metal-text {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8)
}

.fraction-bar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 12px;
    font-size: 2rem;
    font-weight: bold
}

.fraction-line {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #d4af37, #f4e4a6, #d4af37);
    margin: 4px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5)
}

.material-slot {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.3), rgba(101, 67, 33, 0.3));
    border: 3px solid #8b4513;
    transition: all 0.3s ease
}

.material-slot:hover {
    border-color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5)
}

.hammer {
    animation: hammer 0.5s ease-in-out
}

@keyframes hammer {

    0%,
    100% {
        transform: rotate(0deg) translateY(0)
    }

    50% {
        transform: rotate(-20deg) translateY(-10px)
    }
}

.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ff6600;
    border-radius: 50%;
    animation: spark 0.5s ease-out forwards
}

@keyframes spark {
    0% {
        opacity: 1;
        transform: translate(0, 0)
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty))
    }
}