:root {
    --primary-color: #ff4081;
    --secondary-color: #9c27b0;
    --bg-gradient: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    --card-bg: #fff;
    --text-color: #fff;
    --modal-bg: rgba(255, 255, 255, 0.95);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-gradient);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center vertically */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    padding: 20px 0;
    /* Add vertical padding */
}

/* Floating Hearts Background Animation */
body::before {
    content: "❤️ 💖 ✨ 💕";
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    animation: floatHearts 20s linear infinite;
    z-index: -1;
    word-spacing: 50vw;
    line-height: 20vh;
    opacity: 0.5;
}

@keyframes floatHearts {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}

.game-container {
    text-align: center;
    width: 95%;
    max-width: 1200px;
    /* Slightly wider for desktop */
    margin: 0 auto;
}

header {
    margin-bottom: 10px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.title {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* Responsive font size */
    margin-bottom: 5px;
}

.stats {
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
}

/* Grid Layout - Forced 12 Columns */
.grid-container {
    display: grid;
    gap: 3px;
    /* Minimal gap for high density */
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    /* Updated for 40 cards (8x5 grid) */
    grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 768px) {
    .grid-container {
        /* On mobile, 5x8 grid */
        grid-template-columns: repeat(5, 1fr);
    }
}

/* On very small screens (mobile), 12 columns will be microscopic.
   But user explicitly requested "in mobile view also use 12x12". 
   So we keep it, but maybe ensure the container is full width. */

/* Card Styling */
.card {
    background-color: transparent;
    aspect-ratio: 3/4;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 100%;
    min-width: 0;
    /* Allow shrinking below min-content */
}

/* Adjust font size for the tiny cards */
.front {
    font-size: 0.8rem;
    /* Smaller heart icon */
    border: 1px solid white;
    /* Thinner border */
}

.back {
    border: 1px solid #ff4081;
}

.card:hover {
    transform: scale(1.02);
}

.card.flip {
    transform: rotateY(180deg);
}

.card.matched {
    cursor: default;
    animation: pulse 1s ease-in-out;
}

@keyframes pulse {
    0% {
        transform: rotateY(180deg) scale(1);
    }

    50% {
        transform: rotateY(180deg) scale(1.1);
        box-shadow: 0 0 15px #ff4081;
    }

    100% {
        transform: rotateY(180deg) scale(1);
    }
}

.front,
.back {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 8px;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Front Face (Face Down) */
.front {
    background: linear-gradient(135deg, #ff9a9e, #ff6a88);
    font-size: 1.5rem;
    /* Slightly smaller icon */
    color: white;
    transform: rotateY(0deg);
    border: 2px solid white;
}

/* Back Face (Face Up/Image) */
.back {
    background: white;
    transform: rotateY(180deg);
    overflow: hidden;
    border: 2px solid #ff4081;
}

.back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s;
}

.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    width: 400px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-content h2 {
    color: #d81b60;
    margin-bottom: 15px;
    font-family: 'Dancing Script', cursive;
    font-size: 2.2rem;
}

.modal-content p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

.fun-effects {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.btn-primary {
    background: linear-gradient(45deg, #ff4081, #f50057);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 0, 87, 0.4);
}