/* 微調 Tailwind 覆蓋不到的地方 */

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
    "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  overscroll-behavior-y: none;
}

/* 錄音按鈕 pulse 動畫加強 */
.animate-pulse {
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: ring 1.2s infinite;
}

@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* 手機安全區（瀏海區） */
@supports (padding: env(safe-area-inset-top)) {
  header {
    padding-top: env(safe-area-inset-top);
  }
}

/* 3D 翻轉卡片 */
.flip-card {
  perspective: 1200px;
  cursor: pointer;
  user-select: none;
}

.flip-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  min-height: 10rem;
}

.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-front {
  position: relative; /* 用來撐開容器高度 */
}

.flip-back {
  transform: rotateY(180deg);
}

/* 避免翻轉時背面的按鈕誤觸 */
.flip-card:not(.flipped) .flip-back {
  pointer-events: none;
}
.flip-card.flipped .flip-front {
  pointer-events: none;
}