/* Memory game styles and flip animation */
.memory-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.memory-board {
     /* Use flexbox with wrapping so each row centers when items don't fill the row.
         A CSS variable --card-width controls card width; max-width is set per difficulty
         so the container doesn't stretch wider than the intended columns. */
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin: 0 auto;
     justify-content: center;
     align-items: flex-start;
    --card-width: 160px;
}

/* Fixed column presets to match difficulty broad levels. max-width uses the
    card width variable so it stays consistent if --card-width is changed. */
.memory-board.cols-2 { max-width: calc(var(--card-width, 140px) * 2 + 12px * (2 - 1)); }
.memory-board.cols-3 { max-width: calc(var(--card-width, 140px) * 3 + 12px * (3 - 1)); }
.memory-board.cols-4 { max-width: calc(var(--card-width, 140px) * 4 + 12px * (4 - 1)); }
.memory-board.cols-5 { max-width: calc(var(--card-width, 140px) * 5 + 12px * (5 - 1)); }
.memory-board.cols-6 { max-width: calc(var(--card-width, 140px) * 6 + 12px * (6 - 1)); }
.memory-board.cols-7 { max-width: calc(var(--card-width, 140px) * 7 + 12px * (7 - 1)); }
.memory-board.cols-8 { max-width: calc(var(--card-width, 140px) * 8 + 12px * (8 - 1)); }

.memory-card {
     perspective: 800px;
     /* width is controlled by the board's --card-width variable so cards stay consistent
         whether the board is a grid or flex container. */
     width: var(--card-width, 140px);
    /* desktop-only default height */
    height: 200px;
     cursor: pointer;
    /* no absolute positioning — use grid inside card-inner to stack faces */
    /* keep perspective for 3D flip */
}

.memory-card .card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    /* use grid so .card-front and .card-back can overlap without absolute positioning */
    display: grid;
}

.memory-card .card-front,
.memory-card .card-back {
    /* stacked in the same grid cell */
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
}

.memory-card .card-front img,
.memory-card .card-back img {
    max-width: 100%;
    max-height: 100%;
}

.memory-card .card-front {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.memory-card .card-back {
    transform: rotateY(180deg);
    background: #f8f9fa;
}

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

.win-message, .game-over-message {
    max-width: 700px;
    margin: 0 auto 12px auto;
}

.controls .level-buttons .active {
    box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
}

/* Desktop-only: no responsive media query; design targets desktop screens only. */