body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: #f5f5dc;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c-13.8 0-25 11.2-25 25s11.2 25 25 25 25-11.2 25-25S43.8 5 30 5zm0 45c-11 0-20-9-20-20S19 10 30 10s20 9 20 20-9 20-20 20z' fill='%23c41e3a' fill-opacity='0.03'/%3E%3Cpath d='M15 20c5 10 5 20 0 30M45 20c-5 10-5 20 0 30' stroke='%23c41e3a' stroke-width='1' fill='none' opacity='0.05'/%3E%3C/svg%3E");
}

h1, h2, h3, .serif {
    font-family: 'Noto Serif SC', serif;
}

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

.ink-border {
    border: 3px solid #8b4513;
    box-shadow: 4px 4px 0px rgba(139,69,19,0.2);
}

.card-flip {
    perspective: 1000px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card-flip.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
}

.card-back {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .card-inner {
        transition: none;
    }
}