/* ============================================================
   辉天神谕 —— 塔罗占卜
   神秘学风:黑金 + 紫水晶,承接站点的红金点缀
   ============================================================ */

.tarot-page {
  --t-purple:   #8b6fb5;
  --t-purple-lt:#b9a3e0;
  --t-veil:     rgba(20, 15, 32, 0.86);
  /* ⭐ 两个尺寸:
       --t-card-w  扇面/牌堆(盲抽区)—— 保持小,40 张排开不挤
       --t-slot-w  台面上的牌(抽出来的)—— 大,要让玩家看清画面 */
  --t-card-w:   clamp(84px, 11.5vw, 140px);
  --t-card-h:   calc(var(--t-card-w) * 1.5);
  --t-slot-w:   clamp(140px, 18vw, 240px);
  --t-slot-h:   calc(var(--t-slot-w) * 1.5);
}

/* ── 页面骨架 ─────────────────────────────────────── */
.tarot-hero {
  position: relative;
  min-height: 46vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + 40px) 20px 48px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(139, 111, 181, .22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 95%, rgba(212, 162, 74, .12), transparent 70%),
    var(--c-bg);
  overflow: hidden;
}
.tarot-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(212,162,74,.55), transparent),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(212,162,74,.45), transparent),
    radial-gradient(1px 1px at 32% 68%, rgba(185,163,224,.5), transparent),
    radial-gradient(1px 1px at 66% 74%, rgba(185,163,224,.42), transparent),
    radial-gradient(1.5px 1.5px at 48% 34%, rgba(212,162,74,.35), transparent),
    radial-gradient(1px 1px at 88% 48%, rgba(185,163,224,.4), transparent);
  pointer-events: none;
}
.tarot-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.tarot-kicker {
  font-size: 12px; letter-spacing: .42em; color: var(--t-purple-lt);
  text-transform: uppercase; margin-bottom: 14px;
}
.tarot-title {
  font-size: clamp(34px, 7vw, 64px);
  font-weight: 700; letter-spacing: .1em;
  color: var(--c-text);
  text-shadow: 0 0 28px rgba(139, 111, 181, .45);
}
.tarot-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--c-gold-lt), var(--t-purple-lt), var(--c-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tarot-sub {
  margin-top: 14px; color: var(--c-text-dim);
  font-size: clamp(13px, 2.2vw, 15px);
}

/* 免责声明 —— 进页面就显示一次 */
.tarot-disclaimer {
  margin: 20px auto 0;
  max-width: 620px;
  padding: 16px 20px;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--t-purple);
  border-radius: 3px;
  background: rgba(139, 111, 181, .07);
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-text-dim);
  text-align: left;
}
.tarot-disclaimer strong { color: var(--c-gold-lt); font-weight: 600; }
.tarot-disclaimer .dis-close {
  float: right; margin-left: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--c-text-mute); font-size: 18px; line-height: 1;
  padding: 2px 6px; transition: color .2s;
}
.tarot-disclaimer .dis-close:hover { color: var(--c-crimson-lt); }

/* ── 主区 ─────────────────────────────────────────── */
.tarot-main { padding: 0 0 90px; }
.tarot-step { margin: 52px auto 0; max-width: 1160px; padding: 0 20px; }
.tarot-step-head { text-align: center; margin-bottom: 22px; }
.tarot-step-no {
  display: inline-block;
  font-size: 11px; letter-spacing: .3em;
  color: var(--t-purple-lt); margin-bottom: 8px;
}
.tarot-step-title {
  font-size: clamp(19px, 3vw, 25px); font-weight: 600; color: var(--c-text);
}
.tarot-step-desc {
  margin-top: 8px; font-size: 13px; color: var(--c-text-mute);
}

/* ── 牌阵选择 ─────────────────────────────────────── */
.tarot-spreads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.tarot-spread {
  position: relative;
  padding: 20px 16px 18px;
  border: 1px solid var(--c-line-soft);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(28, 24, 40, .8), rgba(16, 19, 26, .8));
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.tarot-spread::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(139,111,181,.18), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.tarot-spread:hover { border-color: rgba(212,162,74,.4); transform: translateY(-3px); }
.tarot-spread:hover::before { opacity: 1; }
.tarot-spread.active {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 1px rgba(212,162,74,.28), 0 8px 30px rgba(139,111,181,.18);
}
.tarot-spread.active::before { opacity: 1; }

/* 牌阵迷你图 —— 动画
   ⭐ 布局:用绝对定位画牌位,坐标从 spreads.json 来(0-100)
      但要留出上下空间,不然顶部/底部的牌位会被裁 */
.spread-mini {
  position: relative;
  height: 88px;
  margin-bottom: 12px;
  /* ⭐ 关键:牌位坐标是百分比,直接用会让牌位溢出 */
  --mini-pad: 14px;
}
.spread-mini i {
  position: absolute;
  display: block;
  width: 15px; height: 22px;
  border: 1px solid rgba(212,162,74,.45);
  border-radius: 2px;
  background: rgba(139,111,181,.12);
  transition: transform .35s var(--ease), border-color .35s, background .35s;
  /* ⭐ 用 inset 定位,不依赖 transform,不会被裁 */
  left: calc(var(--mx) * 1% );
  top:  calc(var(--my) * 1% );
  transform: translate(-50%, -50%) rotate(var(--rot));
}
.spread-mini i.hov {
  border-color: var(--c-gold);
  background: rgba(212,162,74,.2);
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.18);
}
.tarot-spread-name {
  font-size: 16px; font-weight: 600; color: var(--c-text);
  position: relative;
}
.tarot-spread-count {
  display: inline-block; margin-top: 5px;
  font-size: 11px; padding: 1px 9px; border-radius: 20px;
  color: var(--t-purple-lt); border: 1px solid rgba(139,111,181,.35);
  position: relative;
}
.tarot-spread-purpose {
  margin-top: 11px;
  font-size: 12.5px; line-height: 1.75;
  color: var(--c-text-dim);
  position: relative;
}
/* ⭐ 选中时说明文字提亮 —— 未选中时太暗读不清 */
.tarot-spread:hover .tarot-spread-purpose,
.tarot-spread.active .tarot-spread-purpose { color: var(--c-text-dim); }
.tarot-step-desc { color: var(--c-text-dim); }
.tarot-deck-d { color: var(--c-text-dim); }

/* ── 牌库选择 ─────────────────────────────────────── */
.tarot-decks {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.tarot-deck {
  padding: 11px 22px;
  border: 1px solid var(--c-line-soft);
  border-radius: 3px;
  background: rgba(22,26,34,.7);
  cursor: pointer; text-align: center;
  transition: border-color .25s, background .25s;
}
.tarot-deck:hover { border-color: rgba(212,162,74,.45); }
.tarot-deck.active {
  border-color: var(--c-gold);
  background: rgba(212,162,74,.1);
}
.tarot-deck-n { font-size: 14px; color: var(--c-text); font-weight: 500; }
.tarot-deck.active .tarot-deck-n { color: var(--c-gold-lt); }
.tarot-deck-d { font-size: 11.5px; color: var(--c-text-mute); margin-top: 3px; }

/* ⭐ 导航里的 AI Chat 按钮 —— 页面主体是紫金系,红色 CTA 有点割裂 */
body.tarot-page .nav-cta {
  background: rgba(139, 111, 181, .16);
  border-color: rgba(185, 163, 224, .5);
  color: var(--t-purple-lt);
}
body.tarot-page .nav-cta:hover {
  background: rgba(139, 111, 181, .28);
  border-color: var(--t-purple-lt);
}
body.tarot-page .nav-link.active::after { background: var(--t-purple-lt); }
.tarot-deck-note {
  text-align: center; margin-top: 14px;
  font-size: 12.5px; color: var(--c-text-mute); min-height: 20px;
}

/* ── 洗牌区 ───────────────────────────────────────── */
.tarot-table {
  position: relative;
  margin: 0 auto;
  max-width: 1160px;
  padding: 0 20px;
}
.tarot-prompt {
  text-align: center;
  font-size: 15px;
  color: var(--c-gold-lt);
  letter-spacing: .06em;
  margin-bottom: 26px;
  min-height: 24px;
}
.tarot-prompt .blink {
  display: inline-block; width: 7px; height: 15px;
  background: var(--c-gold); margin-left: 4px; vertical-align: -2px;
  animation: tBlink 1s steps(2) infinite;
}
@keyframes tBlink { 50% { opacity: 0; } }

.tarot-deck-area {
  position: relative;
  height: 300px;
  display: grid;
  place-items: center;
}
.tarot-stack {
  position: relative;
  width: var(--t-card-w);
  height: var(--t-card-h);
  cursor: pointer;
  transition: transform .5s var(--ease);
}
.tarot-stack:hover { transform: translateY(-6px); }
.tarot-stack .tarot-card {
  position: absolute; inset: 0;
  transition: transform .12s linear, opacity .2s;
}
.tarot-stack .tarot-card:nth-child(1) { transform: translate(-3px, 3px); }
.tarot-stack .tarot-card:nth-child(2) { transform: translate(2px, -2px); }
.tarot-stack .tarot-card:nth-child(3) { transform: translate(0, 0); }

.tarot-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 13px 40px;
  border: 1px solid var(--c-gold);
  border-radius: 3px;
  background: rgba(212,162,74,.08);
  color: var(--c-gold-lt);
  font-size: 15px; letter-spacing: .18em;
  cursor: pointer;
  transition: background .25s, box-shadow .25s, opacity .25s;
}
.tarot-btn:hover {
  background: rgba(212,162,74,.18);
  box-shadow: 0 0 26px rgba(212,162,74,.25);
}
.tarot-btn:disabled { opacity: .32; cursor: not-allowed; box-shadow: none; }
.tarot-btn.ghost {
  border-color: var(--c-line-soft); background: transparent;
  color: var(--c-text-dim); font-size: 13px; letter-spacing: .1em;
  padding: 9px 22px;
}
.tarot-btn.ghost:hover { border-color: var(--c-line); color: var(--c-text); box-shadow: none; }

/* 洗牌中 */
.tarot-deck-area.shuffling .tarot-stack { animation: tShake .42s infinite; }
@keyframes tShake {
  0%,100% { transform: translateX(-7px) rotate(-1.4deg); }
  50%     { transform: translateX(7px)  rotate(1.4deg); }
}
.tarot-shuffle-tip {
  text-align: center; margin-top: 14px;
  font-size: 13px; color: var(--t-purple-lt); min-height: 20px;
}

/* ── 抽牌扇面 ─────────────────────────────────────── */
.tarot-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  padding: 30px 8px 10px;
  min-height: var(--t-card-h);
  /* ⭐ 牌大了,扇面也要更大 */
  max-width: 1240px;
  margin: 0 auto;
}
.tarot-fan .tarot-card {
  cursor: pointer;
  transition: transform .35s var(--ease), opacity .35s;
  transform-origin: 50% 130%;
}
.tarot-fan .tarot-card:hover { transform: translateY(-14px) scale(1.05); }
.tarot-fan .tarot-card.picked { opacity: 0; transform: translateY(-90px) scale(.7); pointer-events: none; }

/* ── 牌阵台面 ─────────────────────────────────────── */
.tarot-spread-board {
  position: relative;
  margin: 30px auto 0;
  max-width: 1100px;
  /* ⭐ 高度要够 —— 恋人牌阵第 5 张在 y=92%,不能被解读区压住 */
  min-height: 620px;
}
/* ⭐ 台面牌大了,台面要更宽更高 */
@media (min-width: 1100px) {
  .tarot-spread-board { max-width: 1380px; min-height: 900px; }
}
@media (min-width: 1500px) {
  .tarot-spread-board { max-width: 1480px; min-height: 980px; }
}
.tarot-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--t-slot-w);
  text-align: center;
  transition: transform .5s var(--ease);
}
/* ⭐ 台面上的牌用大尺寸 */
.tarot-slot .tarot-card {
  width: var(--t-slot-w);
  height: var(--t-slot-h);
}
.tarot-slot-label {
  font-size: 12.5px;
  color: var(--t-purple-lt);
  margin-bottom: 8px;
  letter-spacing: .08em;
  min-height: 18px;
  /* ⭐ 牌位名要有底衬,压到别的牌上也能看清 */
  text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.9);
}
.tarot-slot-en {
  display: block;
  font-size: 10px; color: var(--c-text-dim);
  letter-spacing: .12em; margin-top: 7px; min-height: 14px;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.tarot-slot.empty .tarot-slot-label { opacity: .45; }

/* ── 牌 ───────────────────────────────────────────── */
.tarot-card {
  position: relative;
  width: var(--t-card-w);
  height: var(--t-card-h);
  border-radius: 5px;
  perspective: 1000px;
  background: none;
}
.tarot-card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .75s var(--ease);
}
.tarot-card.flipped .tarot-card-inner { transform: rotateY(180deg); }
.tarot-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden;
}
/* 牌背 */
.tarot-back {
  background:
    linear-gradient(150deg, rgba(139,111,181,.3), rgba(30,22,48,.9)),
    repeating-linear-gradient(45deg, rgba(212,162,74,.1) 0 6px, transparent 6px 12px),
    #1a1428;
  border: 1px solid rgba(212,162,74,.42);
  display: grid; place-items: center;
  box-shadow: inset 0 0 24px rgba(0,0,0,.55);
  overflow: hidden;
}
/* ⭐ 有真牌背图时铺满 */
.tarot-back.has-img { background: none; border-color: rgba(212,162,74,.5); }
.tarot-back.has-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.tarot-back::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgba(212,162,74,.3);
  border-radius: 3px;
  pointer-events: none;
}
/* ⭐ 有真图时不要画内框 */
.tarot-back.has-img::before { display: none; }
.tarot-back-mark {
  width: 42%; height: 42%;
  border: 1px solid rgba(212,162,74,.55);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-gold-lt);
  font-size: 15px; letter-spacing: .1em;
  box-shadow: 0 0 18px rgba(139,111,181,.4);
}
/* 牌面 */
.tarot-front {
  transform: rotateY(180deg);
  border: 1px solid rgba(212,162,74,.5);
  background: #141020;
  box-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.tarot-front img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* 占位符(图片还没生出来时) */
.tarot-front.placeholder {
  display: grid; place-items: center;
  padding: 8px;
  background:
    linear-gradient(160deg, rgba(139,111,181,.2), rgba(18,15,30,.95));
  text-align: center;
}
.tarot-ph-num {
  font-size: 20px; color: var(--c-gold-lt);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .08em;
}
.tarot-ph-name {
  margin-top: 5px; font-size: 11.5px; color: var(--c-text-dim);
  line-height: 1.5;
}
.tarot-ph-tag {
  margin-top: 7px; font-size: 9.5px;
  color: var(--c-text-mute); letter-spacing: .16em;
}
/* 逆位 */
.tarot-card.reversed .tarot-front { transform: rotateY(180deg) rotate(180deg); }
.tarot-card.reversed .tarot-front img { transform: rotate(180deg); }
.tarot-card.reversed .tarot-front.placeholder > * { transform: rotate(180deg); }

/* ── 解读 ─────────────────────────────────────────── */
.tarot-readings {
  margin: 54px auto 0; max-width: 900px; padding: 0 20px;
  /* ⭐ 牌阵台面是 position:relative + 绝对定位,
     高度不够的话最后一排牌会压到解读区 */
  position: relative; z-index: 2;
}
.tarot-reading {
  padding: 22px 24px;
  margin-bottom: 14px;
  border: 1px solid var(--c-line-soft);
  border-left: 3px solid var(--c-gold);
  border-radius: 3px;
  background: linear-gradient(140deg, rgba(26,22,38,.82), rgba(16,19,26,.82));
}
.tarot-reading.rev { border-left-color: var(--t-purple); }
.tarot-rd-head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.tarot-rd-thumb {
  width: 76px; height: 114px; border-radius: 3px;
  overflow: hidden; flex: 0 0 auto;
  border: 1px solid rgba(212,162,74,.4);
  background: #141020;
}
.tarot-rd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tarot-rd-thumb.rev img { transform: rotate(180deg); }
.tarot-rd-thumb.placeholder {
  display: grid; place-items: center;
  font-size: 9px; color: var(--c-text-mute);
}
.tarot-rd-titles { flex: 1 1 220px; min-width: 0; }
.tarot-rd-pos {
  font-size: 11px; color: var(--t-purple-lt); letter-spacing: .14em;
  margin-bottom: 3px;
}
.tarot-rd-name { font-size: 18px; color: var(--c-text); font-weight: 600; }
.tarot-rd-name-en { font-size: 12px; color: var(--c-text-mute); margin-left: 8px; font-weight: 400; }
.tarot-rd-dir {
  font-size: 11px; padding: 2px 10px; border-radius: 20px;
  border: 1px solid rgba(212,162,74,.4); color: var(--c-gold-lt);
  flex: 0 0 auto;
}
.tarot-rd-dir.rev { border-color: rgba(139,111,181,.45); color: var(--t-purple-lt); }
.tarot-rd-kw {
  display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px;
}
.tarot-rd-kw span {
  font-size: 11.5px; padding: 2px 11px; border-radius: 20px;
  background: rgba(212,162,74,.1); color: var(--c-gold-lt);
  border: 1px solid rgba(212,162,74,.24);
}
.tarot-rd-kw.rev span {
  background: rgba(139,111,181,.12); color: var(--t-purple-lt);
  border-color: rgba(139,111,181,.3);
}
.tarot-rd-text {
  font-size: 14.5px; line-height: 1.95; color: var(--c-text);
  white-space: pre-line;
}
.tarot-rd-en {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed rgba(255,255,255,.09);
  font-size: 12.5px; line-height: 1.85; color: var(--c-text-mute);
  white-space: pre-line;
  font-style: italic;
}

/* ── 历史 ─────────────────────────────────────────── */
.tarot-history { margin: 46px auto 0; max-width: 900px; padding: 0 20px; }
.tarot-hist-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.tarot-hist-title { font-size: 17px; color: var(--c-text); }
.tarot-hist-list { display: flex; flex-direction: column; gap: 8px; }
.tarot-hist-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 15px;
  border: 1px solid var(--c-line-soft); border-radius: 3px;
  background: rgba(22,26,34,.55);
  font-size: 13px; color: var(--c-text-dim);
}
.tarot-hist-time { color: var(--c-text-mute); font-size: 11.5px; flex: 0 0 auto; }
.tarot-hist-cards { flex: 1 1 auto; display: flex; gap: 6px; flex-wrap: wrap; }
.tarot-hist-cards b {
  font-weight: 500; color: var(--c-gold-lt); font-size: 12.5px;
}
.tarot-hist-cards b.rev { color: var(--t-purple-lt); }
.tarot-hist-empty {
  padding: 26px; text-align: center;
  font-size: 13px; color: var(--c-text-mute);
  border: 1px dashed var(--c-line-soft); border-radius: 3px;
}

/* ── 移动端 ───────────────────────────────────────── */
@media (max-width: 700px) {
  .tarot-page {
    --t-card-w: clamp(60px, 19vw, 92px);
    --t-slot-w: clamp(104px, 27vw, 150px);
  }
  .tarot-spreads { grid-template-columns: 1fr 1fr; }
  .tarot-spread { padding: 15px 11px 13px; }
  .tarot-spread-purpose { font-size: 11.5px; }
  .tarot-deck-area { height: 250px; }
  .tarot-fan { gap: 2px; padding: 24px 4px 8px; }
  .tarot-reading { padding: 17px 15px; }
  .tarot-rd-name { font-size: 16px; }
  .tarot-rd-name-en { display: block; margin-left: 0; margin-top: 2px; }
  .tarot-rd-thumb { width: 56px; height: 84px; }
  .tarot-hero { min-height: 38vh; }
}
@media (max-width: 420px) {
  .tarot-spreads { grid-template-columns: 1fr; }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  .tarot-deck-area.shuffling .tarot-stack { animation: none; }
  .tarot-prompt .blink { animation: none; }
  .tarot-card-inner { transition-duration: .01s; }
}