body {
    font-family: 'Young Serif', serif;
    background-color: #38bdf8;
    /* Fallback Sky Blue */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    /* Create the Clay Sky */
    background: linear-gradient(180deg, #0ea5e9 0%, #7dd3fc 100%);
}

/* 
 * Claymation Background
 */
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::after {
    content: '';
    position: absolute;
    bottom: -20vh;
    right: -20%;
    width: 120%;
    height: 60vh;
    background: #4d7c0f;
    /* Darker Green Clay */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow:
        inset 0 20px 40px rgba(255, 255, 255, 0.2),
        0 -10px 20px rgba(0, 0, 0, 0.1);
    z-index: 0;
}

/* Clouds using CSS shadows/shapes could be added, but let's keep it clean */

.font-west {
    font-family: 'Rye', serif;
    color: #fef3c7;
    text-shadow:
        3px 3px 0px #78350f,
        6px 6px 0px rgba(0, 0, 0, 0.2);
}

/* Clay Card Style */
.clay-card {
    background-color: #fef3c7;
    /* amber-100 */
    border-radius: 30px;
    /* More rounded */
    box-shadow:
        12px 12px 24px rgba(0, 0, 0, 0.15),
        -12px -12px 24px rgba(255, 255, 255, 0.4),
        inset 4px 4px 12px rgba(255, 255, 255, 0.6),
        /* Inner Highlight */
        inset -4px -4px 12px rgba(0, 0, 0, 0.05);
    /* Inner Shadow */
    border: 4px solid rgba(255, 255, 255, 0.2);
    padding: 2rem;
    color: #78350f;
    position: relative;
    z-index: 10;
    /* Above landscape */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /* Slight glass for blending */
}

/* Clay Button Style */
.clay-btn {
    background-color: #f59e0b;
    /* amber-500 */
    color: #fffbeb;
    font-family: 'Rye', serif;
    border-radius: 20px;
    border: none;
    padding: 1.25rem 2rem;
    font-size: 1.75rem;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy */

    /* Strong Clay Effect */
    box-shadow:
        0 10px 0 #b45309,
        /* Deep 3D edge */
        0 10px 20px rgba(0, 0, 0, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);

    position: relative;
    z-index: 10;
}

.clay-btn:hover {
    transform: translateY(-4px);
    background-color: #fbbf24;
    box-shadow:
        0 14px 0 #b45309,
        0 20px 30px rgba(0, 0, 0, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.clay-btn:active {
    transform: translateY(6px);
    /* Press down */
    box-shadow:
        0 0 0 #b45309,
        /* No edge */
        inset 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Wooden Sign */
.wooden-sign {
    background: #78350f;
    /* Wood texture pattern */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;

    color: #fef3c7;
    border: 6px solid #451a03;
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    font-family: 'Young Serif', serif;
    border-radius: 12px;
    position: relative;
    z-index: 10;
}

/* Nails */
.wooden-sign::before,
.wooden-sign::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #525252;
    border-radius: 50%;
    top: 10px;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.wooden-sign::before {
    left: 10px;
}

.wooden-sign::after {
    right: 10px;
}

/* Modal Styling */
.modal-clay {
    background-color: #fffbeb;
    border-radius: 30px;
    border: 8px solid #78350f;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    z-index: 100;
}