/* ==================================================
   全局变量
   ================================================== */
:root {
  --color-bg: #1a0b2e;
  --color-primary: #432c7a;
  --color-accent: #d4af37;
  --color-text-main: #f3f4f6;
  --color-text-muted: #9ca3af;

  --card-width: 120px;
  --card-height: 192px;
}

/* ==================================================
   页面基础
   ================================================== */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;

  background-color: var(--color-bg);
  color: var(--color-text-main);

  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Helvetica Neue', Helvetica, Arial, sans-serif;

  text-align: center;
  overflow-x: hidden;

  background-image:
    radial-gradient(white, rgba(255,255,255,.15) 2px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.1) 1px, transparent 2px);
  background-size: 500px 500px, 300px 300px;
  animation: starMove 180s linear infinite;
}

@keyframes starMove {
  to {
    background-position: 500px 500px, 300px 300px;
  }
}

/* ==================================================
   标题与文字
   ================================================== */
h1, h2, h3,
.tarot-font,
.spread-label,
.card-caption {
  font-family: 'KaiTi', 'STKaiTi', 'SimKai',
               Georgia, 'Times New Roman', serif;
  letter-spacing: 1px;
}

.text-muted {
  color: var(--color-text-muted);
}

header {
  padding: 1.5rem 1rem;
}

/* ==================================================
   滚动条
   ================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #2d1b4e;
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 4px;
}

/* ==================================================
   牌堆区域（缓慢循环滚动）
   ================================================== */
.deck-container {
  display: inline-flex;
  gap: 12px;
  padding: 20px 0;

  white-space: nowrap;
  overflow: hidden;

  animation: deckScroll 60s linear infinite;

  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.deck-container:hover {
  animation-play-state: paused;
}

@keyframes deckScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ==================================================
   卡牌基础结构
   ================================================== */
.card-wrapper {
  display: inline-block;
  width: var(--card-width);
  height: var(--card-height);
  margin: 0 6px;

  cursor: pointer;
  perspective: 1000px;
}

.card-wrapper:hover {
  transform: translateY(-8px);
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;

  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(.175,.885,.32,1.275);

  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,.35);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;

  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}

/* ==================================================
   牌背
   ================================================== */
.card-back {
  background: linear-gradient(135deg, #2d1b4e, #1a0b2e);
  border: 2px solid #5a3e85;

  display: flex;
  align-items: center;
  justify-content: center;
}

.card-back::after {
  content: "✦";
  font-size: 42px;
  color: rgba(212,175,55,.5);
}

/* ==================================================
   牌面（图片）
   ================================================== */
.card-front {
  background: #000;
  transform: rotateY(180deg);
}

.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 逆位 */
.card-front img.reversed {
  transform: rotate(180deg);
}

/* ==================================================
   牌阵区域
   ================================================== */
#spread-section {
  margin-top: 2rem;
  padding: 2rem;

  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;

  background: rgba(0,0,0,.25);
  border-radius: 20px;
}

/* ==================================================
   牌位容器（语义升级版）
   ================================================== */
.spread-slot {
  width: var(--card-width);

  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
}

/* 虚线框只负责“牌” */
.spread-slot > .card-wrapper {
  width: var(--card-width);
  height: var(--card-height);

  border: 2px dashed rgba(212,175,55,.4);
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.25);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.spread-slot.active > .card-wrapper {
  border-style: solid;
  border-color: var(--color-accent);
  box-shadow: 0 0 20px rgba(212,175,55,.4);
}

/* ==================================================
   位置标签（过去 / 现在 / 未来）
   ================================================== */
.spread-label {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-accent);
  white-space: nowrap;
}

/* ==================================================
   牌名文字（抽牌后）
   ================================================== */
.card-caption {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--color-accent);
  white-space: nowrap;
}

/* ==================================================
   飞牌动画（仅 JS 控制）
   ================================================== */
.flying-card {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}

/* 命运牌飞行强化 */
.flying-fate {
  filter: drop-shadow(0 0 12px rgba(212,175,55,.9));
}

/* ==================================================
   命运牌落位呼吸光效
   ================================================== */
.fate-card > .card-wrapper {
  animation: fateGlow 2.5s ease-in-out infinite;
}

@keyframes fateGlow {
  0% {
    box-shadow: 0 0 10px rgba(212,175,55,.3);
  }
  50% {
    box-shadow:
      0 0 25px rgba(212,175,55,.8),
      0 0 60px rgba(138,43,226,.6);
  }
  100% {
    box-shadow: 0 0 10px rgba(212,175,55,.3);
  }
}

/* ==================================================
   解读按钮
   ================================================== */
#btn-interpret {
  margin-top: 2rem;
  padding: .8rem 2.2rem;

  background: var(--color-accent);
  color: #1a0b2e;

  border: none;
  border-radius: 30px;

  font-size: 1rem;
  cursor: pointer;
}

#btn-interpret:hover {
  opacity: .9;
}

/* ==================================================
   解读结果
   ================================================== */
#result-section {
  margin: 3rem auto;
  max-width: 720px;
  padding: 1.5rem;
}

.interpretation-content h3 {
  color: var(--color-accent);
  margin-top: 1rem;
}

.interpretation-content p {
  line-height: 1.6;
  color: #e5e7eb;
  margin-bottom: .8rem;
}

/* ==================================================
   通用工具类
   ================================================== */
.hidden {
  display: none;
}

/* ==================================================
   响应式
   ================================================== */
@media (max-width: 1024px) {
  :root {
    --card-width: 130px;
    --card-height: 208px;
  }

  #spread-section {
    flex-direction: column;
    gap: 4rem;
  }

  .spread-label {
    font-size: 1rem;
  }

  .card-caption {
    font-size: 1rem;
  }
}