.memory-board {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4, clamp(60px, calc(25% - 6px), 120px));
    gap: 8px;
    touch-action: manipulation;
    user-select: none;
    perspective: 1000px;
}

.memory-board button {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    background: transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    position: relative;
    border: none;
    text-shadow: 0 0 20px rgba(255, 255, 255, .9);
    transform-style: preserve-3d;
    transition: transform 0.6s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.memory-board button.revealed,
.memory-board button.matched {
    transform: rotateY(180deg);
}

.memory-board button.matched {
    cursor: default;
}

.memory-board button::before,
.memory-board button::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 10vw, 4rem);
    backface-visibility: hidden;
    border-radius: 1rem;
}

.memory-board button::before {
    color: #c0c0c0;
    content: "?";
    background: linear-gradient(135deg, #fffaec 0%, #fffaec 50%, #fff8f0 100%);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, .7);
    border: 2px solid #f6f0d6;
    border-bottom-width: 8px;
}

.memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #f9f6dd, #e6daa9);
    color: #fff;
    content: attr(data-value);
    transform: rotateY(180deg);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, .7);
    border: solid 2px #e6daa9;
    border-bottom-width: 5px;
    z-index: 1;
}

.memory-board button:focus-visible {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .6);
}

/* Tenger - kékeslila árnyalatok */
.sea .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #e6f3ff, #b3d9ff);
    box-shadow: inset 0 0 10px rgba(173, 216, 230, .7);
    border-color: #87ceeb;
}

/* Űr - sötét kék-lila árnyalatok */
.space .memory-board button::after {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='296' height='299' viewBox='0 0 296 299'><g transform='matrix(1,0,0,1,-2582.99,-7472.7)'><path d='M2871.2,7756.37C2875.31,7756.57 2878.47,7760.07 2878.27,7764.17C2878.06,7768.27 2874.57,7771.44 2870.46,7771.23C2866.36,7771.03 2863.2,7767.53 2863.4,7763.43C2863.61,7759.33 2867.1,7756.16 2871.2,7756.37ZM2608.03,7749.51C2613,7749.75 2616.83,7753.99 2616.58,7758.95C2616.33,7763.92 2612.1,7767.75 2607.13,7767.5C2602.17,7767.25 2598.34,7763.02 2598.59,7758.05C2598.83,7753.09 2603.07,7749.26 2608.03,7749.51ZM2642.84,7712.03C2645.22,7712.15 2647.05,7714.17 2646.93,7716.55C2646.81,7718.92 2644.79,7720.75 2642.41,7720.64C2640.04,7720.52 2638.2,7718.49 2638.32,7716.12C2638.44,7713.74 2640.47,7711.91 2642.84,7712.03ZM2799.07,7701C2804.25,7701.26 2808.25,7705.68 2807.99,7710.86C2807.73,7716.04 2803.31,7720.04 2798.13,7719.78C2792.95,7719.52 2788.95,7715.11 2789.21,7709.92C2789.47,7704.74 2793.89,7700.75 2799.07,7701ZM2720.99,7701.81C2724.66,7702 2727.49,7705.12 2727.31,7708.8C2727.13,7712.47 2724,7715.3 2720.33,7715.11C2716.66,7714.93 2713.83,7711.8 2714.01,7708.13C2714.2,7704.46 2717.32,7701.63 2720.99,7701.81ZM2867.12,7664.74C2869.71,7664.74 2871.82,7666.85 2871.82,7669.44C2871.82,7672.04 2869.71,7674.14 2867.12,7674.14C2864.52,7674.14 2862.41,7672.04 2862.41,7669.44C2862.41,7666.85 2864.52,7664.74 2867.12,7664.74ZM2644.79,7618.01C2649.97,7618.27 2653.97,7622.69 2653.71,7627.87C2653.45,7633.05 2649.03,7637.05 2643.85,7636.79C2638.67,7636.53 2634.67,7632.11 2634.93,7626.93C2635.19,7621.75 2639.61,7617.76 2644.79,7618.01ZM2589.16,7593.28C2592.4,7593.44 2594.9,7596.2 2594.74,7599.44C2594.58,7602.68 2591.82,7605.18 2588.58,7605.01C2585.34,7604.85 2582.84,7602.09 2583,7598.85C2583.16,7595.61 2585.92,7593.12 2589.16,7593.28ZM2860.47,7562.9C2867.16,7563.23 2872.32,7568.94 2871.99,7575.63C2871.66,7582.32 2865.95,7587.49 2859.26,7587.15C2852.57,7586.82 2847.4,7581.11 2847.74,7574.42C2848.07,7567.73 2853.78,7562.57 2860.47,7562.9ZM2693.21,7543.57C2697.09,7543.77 2700.09,7547.08 2699.9,7550.96C2699.7,7554.85 2696.39,7557.85 2692.5,7557.65C2688.62,7557.46 2685.62,7554.15 2685.81,7550.26C2686.01,7546.38 2689.32,7543.38 2693.21,7543.57ZM2860.46,7500.16C2863.7,7500.32 2866.2,7503.08 2866.04,7506.32C2865.88,7509.56 2863.12,7512.05 2859.88,7511.89C2856.64,7511.73 2854.14,7508.97 2854.3,7505.73C2854.46,7502.49 2857.22,7499.99 2860.46,7500.16ZM2640.16,7475.05C2643.18,7475.2 2645.51,7477.77 2645.36,7480.8C2645.21,7483.82 2642.63,7486.15 2639.61,7486C2636.59,7485.85 2634.26,7483.27 2634.41,7480.25C2634.56,7477.23 2637.14,7474.89 2640.16,7475.05ZM2750.47,7472.71C2752.84,7472.83 2754.67,7474.85 2754.55,7477.23C2754.43,7479.6 2752.41,7481.43 2750.04,7481.31C2747.66,7481.19 2745.83,7479.17 2745.95,7476.8C2746.07,7474.42 2748.09,7472.59 2750.47,7472.71Z' fill='white' fill-opacity='.5'/></g></svg>"), radial-gradient(circle at 30% 30%, #212170, #232339);




    background-repeat: repeat;
    background-size: 100% auto;

    box-shadow: inset 0 0 10px rgba(147, 112, 219, .6);
    border-color: #28243d;
}

.space .memory-board button {
    text-shadow: 0 0 20px rgba(179, 52, 255, .9);
}

/* Hercegnő - rózsaszín árnyalatok */
.princess .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #ffe6f0, #ffb3d9);
    box-shadow: inset 0 0 10px rgba(255, 192, 203, .7);
    border-color: #ff69b4;
}

/* Divat - lila-rózsaszín elegáns */
.fashion .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #f5e6ff, #e6b3ff);
    box-shadow: inset 0 0 10px rgba(221, 160, 221, .7);
    border-color: #da70d6;
}

/* Virágok - lágy zöld-rózsaszín */
.flowers .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #f0fff0, #e6ffe6);
    box-shadow: inset 0 0 10px rgba(144, 238, 144, .7);
    border-color: #98fb98;
}

/* Tündérek - pasztell lila-rózsaszín */
.fairies .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #fff0ff, #ffe6ff);
    box-shadow: inset 0 0 10px rgba(238, 130, 238, .6);
    border-color: #ee82ee;
}

/* Unikornisok - pasztell szivárvány */
.unicorns .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #fff5ff, #f0e6ff);
    box-shadow: inset 0 0 10px rgba(230, 190, 255, .7);
    border-color: #dda0dd;
}

/* Álomszínek - lágy többszínű */
.dream_colors .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #fff8e7, #ffe6f0);
    box-shadow: inset 0 0 10px rgba(255, 228, 225, .7);
    border-color: #ffe4e1;
}

/* Fantasy - misztikus lila-kék */
.fantasy .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #f8f0ff, #e6d9ff);
    box-shadow: inset 0 0 10px rgba(186, 85, 211, .6);
    border-color: #ba55d3;
}

/* Halloween - narancsos-fekete */
.halloween .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #fff8dc, #ffd4a3);
    box-shadow: inset 0 0 10px rgba(255, 165, 0, .6);
    border-color: #ff8c00;
}

/* Karácsony - zöld-arany */
.christmas .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #f0fff0, #e6f7e6);
    box-shadow: inset 0 0 10px rgba(34, 139, 34, .6);
    border-color: #228b22;
}

/* Húsvét - lágy sárga-zöld */
.easter .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #fffacd, #f0fff0);
    box-shadow: inset 0 0 10px rgba(154, 205, 50, .6);
    border-color: #9acd32;
}

/* Dinoszauruszok - földes zöld-barna */
.dinosaurs .memory-board button::after {
    background: radial-gradient(circle at 30% 30%, #f5fffa, #e6ffe6);
    box-shadow: inset 0 0 10px rgba(107, 142, 35, .6);
    border-color: #6b8e23;
}

.game-instructions {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 1px 1px 5px rgba(0, 0, 0, 0.1), 0 0px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
}