*, *::before, *::after {
    box-sizing: border-box;
}

/* ---------- Theme Tokens ---------- */
:root {
    /* Sizing */
    --card-size: clamp(90px, 18vw, 160px);
    --card-radius: 16px;
    --grid-gap: clamp(8px, 2vw, 16px);

    /* Motion */
    --dur-fast: .18s;
    --dur-base: .4s;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Grid ---------- */
.grid {
    max-width: min(1100px, 96vw);
    margin: min(4vh, 32px) auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-size), 1fr));
    gap: var(--grid-gap);
    align-items: center;
    justify-items: center;
    padding: clamp(8px, 2vw, 20px);
}

/* ---------- Cards ---------- */
.card {
    position: relative;
    width: var(--card-size);
    height: var(--card-size);
    perspective: 1200px;
    transition: transform var(--dur-fast) var(--ease);
}

.card:focus-within,
.card:hover {
    transform: translateY(-2px);
}

/* The flipping inner element */
.card .front,
.card .back {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    box-shadow: var(--pc-shadow);
    overflow: hidden;
}

/* Front side (question) */
.front {

    background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)),
    var(--pc-card);
    display: grid;
    place-items: center;
    border: 7px solid rgba(255, 255, 255, .05);
}


.front::after {
    content: "";
    width: 62%;
    height: 62%;
    background: url('../img/Backside-Memory/BacksideChristmas.png') no-repeat center / contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
    opacity: .9;
}

/* Back side (image) */
.back {
    transform: rotateY(180deg);
    background: radial-gradient(140% 140% at 80% 0%, rgba(199, 154, 46, .16), rgba(199, 154, 46, 0) 50%),
    var(--pc-card);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78% 78%;
    border: 1px solid rgba(199, 154, 46, .28);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset,
    var(--pc-shadow);
}

/* Flip on selection */
.card.selected .front {
    transform: rotateY(180deg);
}

.card.selected .back {
    transform: rotateY(0deg);
}

/* Match state */
.card.match .front {
    background: radial-gradient(120% 120% at 50% 0%, rgba(217, 172, 55, .25), rgba(217, 172, 55, 0) 50%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)),
    var(--pc-card) !important;
    border-color: rgba(217, 172, 55, .45);
    box-shadow: 0 0 24px 6px rgba(217, 172, 55, .22),
    var(--pc-shadow);
}

.card.match .back {
    filter: saturate(1.06) contrast(1.02);
    box-shadow: 0 0 26px 10px rgba(240, 183, 24, .18),
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    var(--pc-shadow);
}

.card .front, .card .back {
    outline: none;
}

.card:focus-within .front,
.card:focus-within .back {
    box-shadow: 0 0 0 2px rgba(247, 246, 243, .85),
    0 0 0 6px rgba(199, 154, 46, .35),
    var(--pc-shadow);
}

@media (max-width: 420px) {
    :root {
        --card-radius: 14px;
    }

    .grid {
        gap: 10px;
    }

    .back {
        background-size: 80% 80%;
    }
}

@media (hover: hover) {
    .card:not(.selected):hover .front {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset,
        0 12px 28px rgba(0, 0, 0, .45);
    }
}

#game {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Snowflakes */

.snowflake {
    position: fixed;
    top: -50px;
    z-index: 9999;
    user-select: none;
    pointer-events: none;
    color: #fff;
    font-family: Arial, sans-serif;
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) translateX(var(--drift)) rotate(360deg);
        opacity: 0.5;
    }
}