/* === 整體背景 === */
body {
  font-family: "Microsoft JhengHei", sans-serif;
  text-align: center;
  background: radial-gradient(circle at center, #f0f0f0, #dcdcdc);
  color: #333;
}

/* 卡片容器 */
#card-container {
  display: grid;
  grid-template-columns: repeat(10, 100px); /* 每行 10 張 */
  grid-auto-rows: 150px;                    /* 每行高度 */
  grid-gap: 10px;                            /* 卡片間距 */
  justify-content: center;
  margin-top: 20px;
}

/* #card-container {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-gap: 15px;
  justify-content: center;
  margin-top: 20px;
} */

/* 卡片外框 */
.card {
  width: 100px;
  height: 150px;
  perspective: 1000px; /* 3D 深度感 */
  cursor: pointer;
  position: relative;
}

/* 卡片內部 (3D翻轉核心) */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* 翻轉後 */
.card.flipped .card-inner {
  transform: rotateY(180deg);
}

/* 正反面共同樣式 */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.2), 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* 正面 */
.card-front {
  background: linear-gradient(145deg, #fff, #eee);
  color: #333;
  font-size: 18px;
}

/* 背面 */
.card-back {
  background: linear-gradient(145deg, #ffd700, #ffc000);
  color: #000;
  transform: rotateY(180deg);
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 0 5px #fff, 0 0 10px gold;
}

/* 卡片圖片 */
.card-front img, .card-back img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* 中獎文字浮層 */
.prize-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px #000, 0 0 20px gold;
  pointer-events: none;
  z-index: 10;
}

/* 卡片翻牌動畫：微跳 + 光暈閃爍 */
.card.flipping {
  animation: flip-bounce 0.6s ease forwards, glow 0.6s ease-in-out infinite alternate;
}

@keyframes flip-bounce {
  0% { transform: rotateY(0deg) translateY(0); }
  40% { transform: rotateY(90deg) translateY(-10px); }
  60% { transform: rotateY(150deg) translateY(5px); }
  100% { transform: rotateY(180deg) translateY(0); }
}

@keyframes glow {
  0% { box-shadow: 0 0 8px rgba(255,255,200,0.3); }
  50% { box-shadow: 0 0 20px rgba(255,255,200,0.6); }
  100% { box-shadow: 0 0 8px rgba(255,255,200,0.3); }
}

/* 背景閃爍特效 */
.flash-bg {
  animation: flash 0.15s alternate infinite;
}

@keyframes flash {
  from { background-color: #f0f0f0; }
  to { background-color: #ffe5e5; }
}