/* ─────────── Reset & nền ─────────── */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Canh giữa mọi thứ */
  display: grid;
  place-content: center;
  min-height: 100vh;

  /* Nền gradient dịu mắt */
  background: linear-gradient(45deg, hsl(203 7% 89%), hsl(198 13% 71%));
  overflow-x: clip;
}

/* Ẩn phần tử khi cần (dùng cho .card-stack ban đầu) */
.is-hidden {
  display: none !important;
}

/* ─────────── Jigsaw Puzzle ─────────── */
.puzzle {
  width: 570px;
  height: 400px;
  max-width: 100%;
  max-height: 100%;
  overflow:visible!important;
}

/* Mobile – puzzle luôn nằm gọn màn hình */
@media (max-width: 600px) {
  .puzzle {
    width: 98vw;
    height: auto;           /* height tự co theo viewBox SVG */
    max-height: 80vh;
  }
}

/* ─────────── Card-Stack (swipe) ─────────── */
:root {
  --card-perspective : 700px;
  --card-z-offset    : 12px;
  --card-y-offset    : 7px;
  --card-max-z-index : 100;
  --card-swap-duration: 0.3s;

  /* giá trị mặc định; JS sẽ override khi vuốt */
  --swipe-x     : 0px;
  --swipe-rotate: 0deg;
}

.card-stack {
  width: 16rem;
  height: 22rem;
  position: relative;
  display: grid;
  place-content: center;
  user-select: none;
  touch-action: none;
  transform-style: preserve-3d;
}

/* ─────────── Card ─────────── */
.card {
  cursor: grab;
  position: absolute;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  display: grid;
  place-content: center;
  place-self: center;

  background-color: #eee;
  background-size: cover!important;
  background-repeat:no-repeat;
  border: 1px solid #99a;
  border-radius: 0.75rem;
  box-shadow: 0 2px 2px #0003;

  /* Sắp lớp + hiệu ứng 3D */
  z-index: calc(var(--card-max-z-index) - var(--i));
  transform: perspective(var(--card-perspective))
             translateZ(calc(-1 * var(--card-z-offset) * var(--i)))
             translateY(calc(var(--card-y-offset) * var(--i)))
             translateX(var(--swipe-x))
             rotateY(var(--swipe-rotate));
  transition: transform var(--card-swap-duration) ease;
  will-change: transform;
}

.card:active {
  cursor: grabbing;
}

/* ─────────── Icon trong card ─────────── */
.icon {
  aspect-ratio: 1 / 1;
  height: 6em; /* block-size */
  place-self: center;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: #fff;
  filter: drop-shadow(0 2px 3px #0007);
}

/* ─────────── Gradient từng card (có thể chỉnh) ─────────── */
.a { background: linear-gradient(45deg, #32de84, #deebbb);}
.b { background: linear-gradient(45deg, #cf8bf3, #fdb99b);}
.c { background: linear-gradient(45deg, #ea52ca, #8ed5f0);}
.d { background: linear-gradient(45deg, #967edf, #89ffe3);}