/* =========================
   GLOBAL BACKGROUND
========================= */
body {
    background-image: url("../images/background-images/image4.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* =========================
   GAME TITLE
========================= */
header h1 {
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    text-align: center;
    background: linear-gradient(45deg, #2c2f5a, #3a3e70);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
    margin: 2rem 0 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
}

/* =========================
   CARD LAYOUT
========================= */
.card {
    background: transparent;
    border: none;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    perspective: 1000px;
}

/* =========================
   CARD IMAGE
========================= */
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* BIG FIX */
    background: white;
    border-radius: 18px;
    padding: 0.35rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition:
        transform 0.35s ease,
        box-shadow 0.3s ease;
}

/* =========================
   FRONT IMAGE PER DIFFICULTY
========================= */
#game-area-0 .card img.front {
    padding: 0.6rem;
}

#game-area-1 .card img.front,
#game-area-2 .card img.front,
#game-area-3 .card img.front {
    padding: 0.45rem;
}

/* HARD / IMPOSSIBLE */
#game-area-4 .card img,
#game-area-4 .card img.front {
    padding: 0.2rem;
}

/* =========================
   HOVER & MATCHED STATES
========================= */
.card img:not(.matched):not(.flipping):hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.card img.matched {
    box-shadow:
        0 0 0 4px #ffb6c1,
        0 12px 30px rgba(255, 182, 193, 0.5);
    cursor: default;
    transform: scale(0.95);
}

/* =========================
   FLIP EFFECT
========================= */
.card img.flipping {
    transform: rotateY(90deg);
}

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

/* =========================
   DIFFICULTY BUTTONS
========================= */
#difficulty .btn {
    background-color: #f3f4ff;
    color: #2c2f5a;
    border: 2px solid #dcdfff;
    font-weight: 600;
    border-radius: 30px;
    padding: 0.5rem 1.3rem;
    margin: 0 0.3rem;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

#difficulty .btn:hover {
    background-color: #e4e7ff;
}

.btn-check:checked + .btn {
    background-color: #ff6f91;
    color: white;
    border-color: #ff6f91;
    box-shadow:
        inset 0 0 0 2px white,
        0 0 0 3px white,
        0 0 12px 4px rgba(255, 111, 145, 0.8);
}

.btn-primary:active {
    background-color: inherit !important;
    border-color: inherit !important;
}

/* =========================
   RESTART BUTTON
========================= */
#restart {
    background-color: #f3f4ff;
    color: #2c2f5a;
    border: 2px solid #dcdfff;
    border-radius: 30px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

#restart:hover {
    background-color: #e4e7ff;
    transform: translateY(-2px);
}

/* =========================
   MODAL STYLING
========================= */
.modal-content {
    background: white;
    border-radius: 18px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.modal-header {
    border-bottom: 2px solid #dcdfff;
    background-color: #f3f4ff;
    padding: 1.5rem;
}

.modal-title {
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    background: linear-gradient(45deg, #2c2f5a, #3a3e70);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    width: 100%;
}

.modal-body {
    padding: 2rem;
    color: #2c2f5a;
    font-size: 1.1rem;
    text-align: center;
}

.modal-body span {
    font-weight: 700;
    color: #ff6f91;
}

/* =========================
   MOBILE TWEAKS
========================= */
@media (max-width: 768px) {
    .card img {
        padding: 0.25rem;
    }

    #game-area-4 .card img {
        padding: 0.15rem;
    }
}
/* =========================
   MOBILE: DIFFICULTY BUTTON FIX
========================= */
@media (max-width: 768px) {
    #difficulty {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem;
    }

    #difficulty .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        min-width: 110px; /* prevents squashing */
        text-align: center;
    }
}