/* 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;
    /* Do not force a card width here; allow SVG intrinsic sizes to control the card box. */
     /* Base card size (should match your SVG default card dimensions).
         You can tweak these if your SVG default differs. */
     --card-base-width: 160px;
     --card-base-height: 200px;
     /* Scale multiplier for cards on this board. Default 1 = 100%. Use helper
         classes (scale-90, scale-80, ...) on the .memory-board element to adjust. */
     --card-scale: 1;
}

/* 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-base-width) * var(--card-scale) * 2 + 12px * 1); }
.memory-board.cols-3 { max-width: calc(var(--card-base-width) * var(--card-scale) * 3 + 12px * 2); }
.memory-board.cols-4 { max-width: calc(var(--card-base-width) * var(--card-scale) * 4 + 12px * 3); }
.memory-board.cols-5 { max-width: calc(var(--card-base-width) * var(--card-scale) * 5 + 12px * 4); }
.memory-board.cols-6 { max-width: calc(var(--card-base-width) * var(--card-scale) * 6 + 12px * 5); }
.memory-board.cols-7 { max-width: calc(var(--card-base-width) * var(--card-scale) * 7 + 12px * 6); }
.memory-board.cols-8 { max-width: calc(var(--card-base-width) * var(--card-scale) * 8 + 12px * 7); }

.memory-card {
    perspective: 800px;
    /* Use base size * scale for layout so grid columns shrink when scale < 1 */
    width: calc(var(--card-base-width) * var(--card-scale));
    height: calc(var(--card-base-height) * var(--card-scale));
    box-sizing: border-box;
    cursor: pointer;
    display: block;
}

.memory-card .card-inner {
    /* Inner fills the card box so flip transforms operate on the full area */
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    display: grid;
}

/* Apply visual scaling without changing intrinsic layout: scale the inner
   content but keep the card box sized to the intrinsic image so grid stays
   stable. Using transform preserves crisp SVG rendering. */
.memory-board { --card-scale: 1; }
.memory-board.scale-90 { --card-scale: 0.9; }
.memory-board.scale-80 { --card-scale: 0.8; }
.memory-board.scale-70 { --card-scale: 0.7; }
.memory-board.scale-120 { --card-scale: 1.2; }

.memory-card .card-inner {
    transform-origin: center center;
}

.memory-card .card-front,
.memory-card .card-back {
    /* stacked in the same grid cell; size comes from the content (image/SVG) */
    grid-area: 1 / 1;
    backface-visibility: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
}

.memory-card .card-front img,
.memory-card .card-back img,
.memory-card .card-front svg,
.memory-card .card-back svg {
    /* Make artwork fill the card box (which is now width/height based on base*scale) */
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
}

.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. */