/* ================================================================== */
/* ==       CSS ĐỒNG BỘ CHO BỐ CỤC 78 LÁ (GIỐNG HỆT 22 LÁ)       == */
/* ================================================================== */

/* Phần 1: Định dạng cho Lưới chứa các lá bài.
  Đây là phần quan trọng nhất để tạo ra layout flexbox co giãn.
*/
.tarot-grid-container-56 {
  display: flex;
  flex-wrap: wrap; /* Cho phép các lá bài tự động xuống dòng khi không đủ không gian */
  justify-content: center; /* Căn giữa các lá bài theo chiều ngang */
  align-items: center; /* Căn giữa các lá bài theo chiều dọc */
  gap: 20px; /* Khoảng cách giữa các lá bài */
  width: 100%;
  height: 100%;
  padding: 1em; /* Thêm khoảng đệm để lá bài không bị dính vào cạnh */
}

/* Phần 2: Định dạng cho Kích thước mỗi ô bài.
  Kích thước này được lấy từ file tarot_22.css để đảm bảo sự đồng nhất.
*/
.tarot-grid-container-56 .tarot-grid-item {
  width: 100px;
  height: 150px;
  perspective: 1000px; /* Thêm chiều sâu cho hiệu ứng lật 3D */
}

/* Phần 3: Định dạng cho Lá bài và Hiệu ứng Lật.
  Sao chép nguyên bản từ file tarot_22.css để đảm bảo hiệu ứng hoạt động chính xác.
*/
.tarot-grid-container-56 .tarot-card {
  position: relative;
  width: 100%;
  height: 100%; /* Thay đổi từ 163px thành 100% để vừa khít với .tarot-grid-item */
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.tarot-grid-container-56 .tarot-card.flipped {
  transform: rotateY(180deg);
}

.tarot-grid-container-56 .tarot-front, 
.tarot-grid-container-56 .tarot-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Dành cho Safari */
  backface-visibility: hidden;
  border-radius: 4px; /* Bo góc cho lá bài */
  overflow: hidden;
}

.tarot-grid-container-56 .tarot-front {
  transform: rotateY(180deg);
}

.tarot-grid-container-56 .tarot-back {
  transform: rotateY(0deg);
}

.tarot-grid-container-56 .tarot-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh vừa vặn trong lá bài */
    border: 1px solid #ad27e3;
}

/* ========================================================= */
/* ==   BỔ SUNG CSS CHO GIAO DIỆN MOBILE (DƯỚI 767px)    == */
/* ========================================================= */
@media (max-width: 767px) {
    /*
      Mục tiêu: Làm cho layout 78 lá trên mobile giống hệt layout 22 lá,
      tức là có 4 cột với các lá bài nhỏ, hình chữ nhật.
    */

    /* 1. Tinh chỉnh layout của container trên mobile */
    .tarot-grid-container-78 {
      gap: 10px;       /* Giảm khoảng cách để vừa 4 cột */
      padding: 10px;
    }

    /* 2. Đặt kích thước cố định cho mỗi lá bài trên mobile */
    /* Đây là quy tắc quan trọng nhất để sửa lỗi */
    .tarot-grid-container-78 .tarot-grid-item {
      width: 65px;                /* Chiều rộng nhỏ, cố định */
      height: 100px !important;     /* Chiều cao cố định, hình chữ nhật */
    }

    /* 3. Đồng bộ chiều cao của thẻ lật bên trong */
    .tarot-grid-container-78 .tarot-card {
        height: 100px;
    }
}
/* ===================================== */
/* ==      CSS CHO NÚT BACK TAROT     == */
/* ===================================== */
.tarot-back-button {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 100; /* Đảm bảo nút luôn nằm trên cùng */
  
  width: 44px;
  height: 44px;
  
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%; /* Bo tròn thành hình tròn */
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer;
  transition: background-color 0.3s;
}

.tarot-back-button:hover {
  background: rgba(0, 0, 0, 0.7);
}

.tarot-back-button svg {
  fill: #ffffff; /* Màu của icon mũi tên */
  width: 24px;
  height: 24px;
}