/**
 * Version: 2.7.3 | Brand: 易流 HexaFlow
 * Fix: Animation Keyframes & Performance [cite: 2026-01-24]
 * Logic: GPU Accelerated 3D Rotation [cite: 2025-12-28]
 */

:root {
  --gradient-start: #f5f5f4;
  --gradient-end: #e7e5e4;
  --accent-color: #44403c;
  --coin-size: 160px;
  --bronze-dark: #2a241a;
  --bronze-mid: #5c4e36;
  --bronze-highlight: #8a7551;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  transition: background 2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: "Noto Serif TC", serif;
}

#main-card {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-top-color: var(--accent-color);
  transition: border-color 1.5s ease;
}

/* --- 乾隆通寶實物造型 [cite: 2026-01-20] --- */
.coin {
  position: relative;
  width: var(--coin-size);
  height: var(--coin-size);
  border-radius: 50%;
  background: radial-gradient(circle, var(--bronze-mid), var(--bronze-dark));
  background-image:
    conic-gradient(
      from 0deg,
      var(--bronze-dark) 0%,
      var(--bronze-mid) 25%,
      var(--bronze-highlight) 50%,
      var(--bronze-mid) 75%,
      var(--bronze-dark) 100%
    ),
    radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
  background-blend-mode: multiply;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 6px var(--bronze-dark),
    inset 0 0 15px rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--bronze-dark);

  /* 3D 旋轉必備屬性 [cite: 2025-12-28] */
  transform-style: preserve-3d;
  will-change: transform; /* 預告瀏覽器開啟 GPU 加速 */
}

/* 包漿質感層 */
.coin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    url("https://www.transparenttextures.com/patterns/stardust.png"),
    radial-gradient(circle at 50% 50%, transparent 60%, var(--bronze-dark) 100%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 4;
}

.hole {
  width: 33%;
  height: 33%;
  background: #f5f5f4;
  border: 4px solid var(--bronze-dark);
  box-shadow:
    inset 3px 3px 10px rgba(0, 0, 0, 0.8),
    0 0 0 8px var(--bronze-mid);
  z-index: 2;
}

.char {
  position: absolute;
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(20, 15, 10, 0.95);
  text-shadow:
    1px 1px 0px rgba(255, 255, 255, 0.1),
    -1px -1px 2px rgba(0, 0, 0, 0.9);
  z-index: 3;
}

/* 文字位置對齊 */
.top {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}
.bottom {
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}
.right {
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
}
.left {
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
}

/* --- 核心旋轉動畫：coin-flip-smooth [cite: 2025-12-28] --- */
@keyframes coin-flip-smooth {
  0% {
    transform: rotateY(0) scale(1);
    filter: brightness(1);
  }
  40% {
    transform: rotateY(1080deg) scale(1.2);
    filter: brightness(1.3);
  }
  100% {
    transform: rotateY(2160deg) scale(1);
    filter: brightness(1);
  }
}

.coin-animating {
  animation: coin-flip-smooth 1.2s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* 卦象結果彈出 */
.hex-show {
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}