.memory-game-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

/* Dashboard */

.game-dashboard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.stat-box {
    flex: 1;
    min-width: 120px;
    text-align: center;
    background: rgba(61, 37, 25, 0.85);
    border: 1px solid rgba(210,125,45,.35);
    border-radius: 12px;
    padding: .75rem;
}

.stat-box .label {
    display: block;
    font-size: .8rem;
    color: #d97706;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-box span:last-child {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fef3c7;
}

#reset-btn {
    background: #d97706;
    border: none;
    color: #23120b;
    font-weight: bold;
    border-radius: 12px;
    padding: .9rem 1.2rem;
    cursor: pointer;
    transition: .25s ease;
}

#reset-btn:hover {
    transform: translateY(-2px);
}

/* Grid */

#game-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

/* Card */

.memory-card {
    aspect-ratio: 1;
    cursor: pointer;
    perspective: 1000px;
}

.memory-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s;
    transform-style: preserve-3d;
}

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

.memory-card-front,
.memory-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 14px;
}

/* Back */

.memory-card-back {
    background: #3D2218;
    border: 3px solid #D27D2D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow:
        0 4px 12px rgba(0,0,0,.35),
        inset 0 0 20px rgba(210,125,45,.15);
}

/* Front */

.memory-card-front {
    background: rgba(61,37,25,.95);
    border: 3px solid #D27D2D;
    transform: rotateY(180deg);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(2rem, 6vw, 3rem);
}

.memory-card.matched {
    pointer-events: none;
}

.memory-card.matched .memory-card-front {
    box-shadow:
        0 0 18px rgba(210,125,45,.5);
}

#win-message {
    text-align: center;
    margin-top: 1.5rem;
    color: #fef3c7;
    font-size: 1.25rem;
    font-weight: bold;
}

.hidden {
    display: none;
}

@media (max-width: 500px) {

    #game-grid {
        gap: .5rem;
    }

    .memory-card-back {
        font-size: 1.5rem;
    }
}