/* ตั้งค่าพื้นฐาน */
body {
    font-family: 'Kanit', sans-serif;
    background-color: #f9f9f9;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* ป้องกันการล้นขอบแนวนอน */
}

.game-container {
    max-width: 800px; /* จำกัดความกว้างของกระดานเกม */
    margin: 20px auto;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* ป้องกันการล้นขอบ */
}

h1 {
    color: #ff6f61;
    font-size: 2rem; /* ปรับขนาดฟอนต์ตามหน้าจอ */
    margin: 10px 0;
}

h2 {
    color: #25c53a;
    font-size: 1.5rem; /* ปรับขนาดฟอนต์ตามหน้าจอ */
    margin: 10px 0;
}

p {
    color: #1a7bca;
    font-size: 1.5rem; /* ปรับขนาดฟอนต์ตามหน้าจอ */
    margin: 10px 0;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* กำหนด 5 คอลัมน์สำหรับ Desktop */
    gap: 15px; /* ระยะห่างระหว่างการ์ด */
    margin-top: 20px;
}

.card {
    position: relative;
    width: 100%; /* การ์ดปรับขนาดตามกริด */
    aspect-ratio: 1 / 1; /* รักษาอัตราส่วน 1:1 */
    perspective: 1000px;
    cursor: pointer;
    overflow: hidden; /* ป้องกันการล้นขอบ */
    border-radius: 8px; /* รักษาขอบมน */
    box-sizing: border-box; /* รวม padding และ border ในขนาดองค์ประกอบ */
}

.card .back-face,
.card .front-face {
    position: absolute;
    width: 100%; /* ครอบคลุมพื้นที่การ์ด */
    height: 100%; /* ครอบคลุมพื้นที่การ์ด */
    backface-visibility: hidden; /* ซ่อนด้านที่พลิกกลับ */
    border-radius: 8px; /* รักษาขอบมน */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s;
    overflow: hidden; /* ป้องกันการล้นขอบ */
    box-sizing: border-box; /* รวม padding และ border ในขนาดองค์ประกอบ */
}

.card .back-face {
    background-color: #ffcccb;
    color: #d1382a;
    font-size: 2rem; /* ปรับขนาดฟอนต์หมายเลข */
    font-weight: bold;
    padding: 10px; /* เพิ่มพื้นที่ภายในเพื่อป้องกันการล้นขอบ */
}

.card .front-face {
    background-color: #fff; /* เพิ่มพื้นหลังสีขาวเพื่อให้รูปภาพชัดเจน */
    transform: rotateY(180deg); /* หมุนด้านหน้าไปด้านหลัง */
    padding: 10px; /* เพิ่มพื้นที่ภายในเพื่อป้องกันการล้นขอบ */
}

.card.flipped .back-face {
    transform: rotateY(180deg); /* หมุนด้านหลังไปด้านหน้า */
}

.card.flipped .front-face {
    transform: rotateY(0deg); /* หมุนด้านหน้ากลับมา */
}

.card img {
    max-width: 100%; /* จำกัดขนาดรูปภาพไม่ให้เกินขนาดการ์ด */
    max-height: 100%; /* จำกัดขนาดรูปภาพไม่ให้เกินขนาดการ์ด */
    border-radius: 8px; /* รักษาขอบมน */
    object-fit: cover; /* ทำให้รูปภาพครอบคลุมพื้นที่และคงอัตราส่วน */
}

.card.matched {
    background-color: #c8e6c9;
    border-color: #4caf50;
    pointer-events: none;
}

#restart-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ff6f61;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem; /* ปรับขนาดฟอนต์ปุ่ม */
}

#restart-button:hover {
    background-color: #ff4d3b;
}

/* Media Queries สำหรับ Tablet */
@media (max-width: 768px) {
    #game-board {
        grid-template-columns: repeat(4, 1fr); /* ลดเหลือ 4 คอลัมน์ */
    }

    h1 {
        font-size: 1.5rem; /* ลดขนาดฟอนต์หัวข้อ */
    }

    .card .back-face {
        font-size: 1.5rem; /* ลดขนาดฟอนต์หมายเลข */
    }

    #restart-button {
        font-size: 0.9rem; /* ลดขนาดฟอนต์ปุ่ม */
    }
}

/* Media Queries สำหรับ Mobile */
@media (max-width: 480px) {
    #game-board {
        grid-template-columns: repeat(3, 1fr); /* ลดเหลือ 3 คอลัมน์ */
    }

    h1 {
        font-size: 1.2rem; /* ลดขนาดฟอนต์หัวข้อ */
    }

    .card .back-face {
        font-size: 1.2rem; /* ลดขนาดฟอนต์หมายเลข */
    }

    #restart-button {
        font-size: 0.8rem; /* ลดขนาดฟอนต์ปุ่ม */
        padding: 8px 16px; /* ลดขนาดปุ่ม */
    }
}

/* เพิ่ม Hover Effect สำหรับการ์ด */
.card {
    position: relative;
    width: 100%; /* การ์ดปรับขนาดตามกริด */
    aspect-ratio: 1 / 1; /* รักษาอัตราส่วน 1:1 */
    perspective: 1000px;
    cursor: pointer;
    overflow: hidden; /* ป้องกันการล้นขอบ */
    border-radius: 8px; /* รักษาขอบมน */
    box-sizing: border-box; /* รวม padding และ border ในขนาดองค์ประกอบ */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* เพิ่มการเปลี่ยนแปลงแบบนุ่มนวล */
}

.card:hover {
    transform: scale(1.05); /* ขยายและหมุนเล็กน้อย */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเพื่อให้ดูโดดเด่น */
}

/* สไตล์สำหรับการ์ดที่จับคู่ถูกต้องของผู้เล่น 1 */
.card.matched-player1 {
    border: 4px solid #4caf50; /* สีเขียว */
    background-color: #c8e6c9; /* พื้นหลังสีเขียวอ่อน */
    pointer-events: none; /* ปิดการคลิกเพิ่มเติม */
}

/* สไตล์สำหรับการ์ดที่จับคู่ถูกต้องของผู้เล่น 2 */
.card.matched-player2 {
    border: 4px solid #2196f3; /* สีฟ้า */
    background-color: #bbdefb; /* พื้นหลังสีฟ้าอ่อน */
    pointer-events: none; /* ปิดการคลิกเพิ่มเติม */
}

.card.matched .front-face img {
    opacity: 0.9; /* ทำให้รูปภาพจางลง 10% */
    filter: grayscale(20%); /* เพิ่มเอฟเฟกต์ grayscale ให้ดูชัดเจนยิ่งขึ้น */
}