.font-steampunk {
    font-family: 'Rye', serif;
}

.font-tech {
    font-family: 'Roboto Mono', monospace;
}

.workshop-bg {
    background-color: #2a1b12;
    background-image:
        repeating-linear-gradient(45deg, #3d2b1f 25%, transparent 25%, transparent 75%, #3d2b1f 75%, #3d2b1f),
        repeating-linear-gradient(45deg, #3d2b1f 25%, #2a1b12 25%, #2a1b12 75%, #3d2b1f 75%, #3d2b1f);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.brass-panel {
    background: linear-gradient(to bottom, #d4a055, #a37332);
    border: 4px solid #78481c;
    box-shadow:
        inset 2px 2px 5px rgba(255, 255, 255, 0.3),
        inset -2px -2px 5px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.5);
}

.copper-text {
    color: #ffcc80;
    text-shadow: 1px 1px 0 #5d3309, 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.gear {
    animation: spin 10s linear infinite;
}

.gear-reverse {
    animation: spin 10s linear infinite reverse;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.steam-gauge {
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center bottom;
}

.valve-btn {
    background: radial-gradient(circle, #b87333 0%, #8b4513 100%);
    border: 4px solid #5d3309;
    box-shadow: 0 4px 0 #3e2206;
    transition: all 0.1s;
}

.valve-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #3e2206;
}

/* Steam particles */
@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }

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

.steam {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    filter: blur(5px);
    animation: rise 2s ease-out forwards;
    pointer-events: none;
}

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