/* --- Thiết lập cơ bản --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0; /* Xóa margin mặc định */
    padding: 15px;
    background-color: #eef1f5; /* Màu nền nhẹ nhàng hơn */
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa nội dung theo chiều ngang */
    min-height: 100vh;
}

h1 {
    color: #2c3e50; /* Màu tiêu đề đậm */
    margin-bottom: 15px;
    font-size: 1.8em; /* Cỡ chữ lớn hơn */
    text-align: center;
}

#game-info {
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: 500;
    color: #34495e;
}
#attempts {
    font-weight: bold;
    color: #e74c3c; /* Màu đỏ cho số lần sai */
}

/* --- Container chính của game --- */
.memory-game-container {
    width: 90%;
    max-width: 650px; /* Giới hạn chiều rộng */
    aspect-ratio: 5 / 2; /* Tỷ lệ khung hình cho lưới 5x2 */
    display: grid;
    /* Tạo lưới 5 cột, 2 hàng */
    grid-template-columns: repeat(5, 1fr); /* 5 cột bằng nhau */
    grid-template-rows: repeat(2, 1fr);    /* 2 hàng bằng nhau */
    gap: 10px; /* Khoảng cách giữa các thẻ */
    margin-bottom: 20px;
    perspective: 1000px; /* Tạo chiều sâu cho hiệu ứng 3D */
}

/* --- Thẻ bài --- */
.memory-card {
    background-color: #fdfdfd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    transform-style: preserve-3d; /* Cho phép xoay 3D */
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); /* Hiệu ứng lật mượt */
    cursor: pointer;
}

/* Trạng thái thẻ bị lật */
.memory-card.flip {
    transform: rotateY(180deg); /* Lật thẻ 180 độ */
}




/* --- Mặt thẻ (trước và sau) --- */
.card-face {
    width: 100%;
    height: 100%;
    padding: 10px; /* Padding để công thức không sát viền */
    position: absolute; /* Để xếp chồng lên nhau */
    top: 0;
    left: 0;
    backface-visibility: hidden; /* Ẩn mặt sau khi quay */
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* padding không làm tăng kích thước */
    overflow: hidden; /* Ngăn nội dung tràn */
}

/* Mặt sau (úp xuống) */
.card-back {
    background: linear-gradient(135deg, #3498db, #2980b9); /* Gradient xanh */
    color: white;
    font-size: 2em; /* Kích thước dấu '?' */
    font-weight: bold;
}

/* Mặt trước (ngửa lên, chứa công thức) */
.card-front {
    color: #2c3e50; /* Giữ màu chữ */
    transform: rotateY(180deg);
    font-size: 0.9em;
    overflow-x: auto;
    overflow-y: hidden;
    /* Các thuộc tính khác giữ nguyên */
    width: 100%;
    height: 100%;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* CSS cho MathJax bên trong card */
.card-front mjx-container {
    margin: 0 !important;
    text-align: center !important;
    max-width: 100%;
    /* Có thể cần !important để ghi đè cỡ chữ mặc định */
    /* font-size: 1em !important; */
}
.card-front mjx-container svg{
     max-height: 90%; /* Giới hạn chiều cao SVG */
}


/* --- Nút chơi lại và Kết quả --- */
#reset-button {
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
#reset-button:hover {
    background-color: #2980b9;
}
#reset-button:active {
     transform: scale(0.98);
}

#result {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
    color: #27ae60; /* Màu xanh lá cho kết quả */
    padding: 15px;
    background-color: #dff0d8; /* Nền xanh lá nhạt */
    border: 1px solid #b2dba1;
    border-radius: 6px;
    text-align: center;
}
#result.hidden {
    display: none; /* Ẩn đi khi chưa có kết quả */
}

/* --- Responsive --- */
@media (max-width: 600px) {
    h1 { font-size: 1.5em; }
    .memory-game-container {
        max-width: 95%;
        aspect-ratio: 2 / 5; /* Đổi tỷ lệ cho layout 2x5 */
        grid-template-columns: repeat(2, 1fr); /* 2 cột */
        grid-template-rows: repeat(5, 1fr);    /* 5 hàng */
        gap: 8px;
    }
     .card-face { padding: 5px;}
     .card-front { font-size: 0.8em;} /* Giảm font trên mobile */
}
@media (max-width: 400px) {
     h1 { font-size: 1.3em; }
     #game-info { font-size: 1em; }
      .card-face { padding: 4px;}
      .card-front { font-size: 0.75em;}
      #reset-button { padding: 10px 20px; font-size: 1em;}
      #result { font-size: 1.1em; padding: 12px;}
}