/* ============================================================
   css/chat/chat-game-tarot.css — 塔罗牌样式
   仪式感六步：问题 → 选牌阵(翻页+大桌子摆阵) → 洗牌(手指交错) → 摊牌抽牌(扇形coverflow+飞入牌位) → 全屏翻牌(摆阵+固定解析区) → 解牌/离开
   全程只 transform/opacity（防闪），入场类 animationend 卸除
   ★ 进塔罗强制暗黑（作用域 .game-tarot，比 data-theme-mode 优先；离开游戏自动恢复）
   韩系法式花艺 · 神秘典雅 · 深色基调 · ≤370px 窄屏适配 · iOS 安全区
   ============================================================ */

/* ===== 强制暗黑作用域（进塔罗即暗，不随系统主题）=====
   .game-tarot 渲染在 #game-container 内（游戏中心 overlay）；
   .tarot-topbar 是塔罗自己的暗色顶栏（与 .game-tarot 平级，需单独纳入暗色作用域）；
   塔罗顶栏原本落在暗色内容盒外面 → 回退到全局亮色主题而发白（甲方实锤），故必须单独套暗色变量。
   .tarot-choice / .tarot-fly-clone 挂 #app 下（确认弹窗、飞牌克隆），
   四个作用域共用同一套暗色变量，只对塔罗相关元素生效，退出游戏中心即恢复。 */
.game-tarot,
.tarot-topbar,
.tarot-choice,
.tarot-fly-clone,
.reveal-drawer,
.reveal-drawer-handle,
.reveal-drawer-body,
.tarot-result-card {
  --bg-primary:        #14101E;
  --bg-chat:           #1C1728;
  --surface:           rgba(28,23,40,0.90);
  --surface-solid:     #241D33;
  --text-primary:      #EFE7F2;
  --text-secondary:    #C3B8CE;
  --text-muted:        #837A8E;
  --border:            rgba(200,175,220,0.14);
  --border-faint:      rgba(200,175,220,0.07);
  --divider:           rgba(255,255,255,0.05);
  --rose:              #D8B8E8;
  --rose-dark:         #C29CD9;
  --rose-light:        rgba(216,184,232,0.12);
  --gold:              #C8A87C;
  --gold-light:        rgba(200,168,124,0.22);
  --lavender:          #C8B5D8;
  --lavender-light:    rgba(196,180,212,0.14);
  --shadow-xs:         0 1px 3px rgba(0,0,0,0.20);
  --shadow-sm:         0 2px 8px rgba(0,0,0,0.28);
  --shadow-md:         0 8px 28px rgba(0,0,0,0.40);
  --shadow-lg:         0 4px 18px rgba(0,0,0,0.45);
  --shadow-glow:       0 0 24px rgba(200,168,124,0.18);
}

.game-tarot {
  flex: 1; display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 12px calc(16px + var(--safe-bottom, 0px)); gap: 10px;
  height: 100%; box-sizing: border-box;
  background:
    radial-gradient(130% 60% at 50% 0%, rgba(150,120,180,0.16), transparent 55%),
    radial-gradient(100% 100% at 50% 100%, rgba(120,100,150,0.12), transparent 50%),
    radial-gradient(ellipse 60% 30% at 30% 60%, rgba(200,168,124,0.07), transparent 55%),
    linear-gradient(180deg, var(--bg-primary), var(--bg-chat));
  font-family: var(--font-reading); color: var(--text-primary);
  position: relative;
}

/* ===== 容器（顶部导航 / 标题）===== */
.tarot-topbar {
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
  /* ★ 滚动容器内禁 backdrop-filter（合成层重栅格整层重绘闪没一瞬，案例库血泪）；tab 内改用不透明表面 */
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.tarot-topbar .game-back { color: var(--text-primary); }
.tarot-topbar .game-title-cn { color: var(--text-primary); }

/* ===== 首页：问题 + 张数 ===== */
.tarot-home .tarot-hero {
  text-align: center; padding: 14px 8px 6px;
  background: var(--surface-solid);
  border: 1px solid var(--gold-light);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-sm);
  position: relative; overflow: hidden;
}
.tarot-hero::before {
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 0.5px solid rgba(200,168,124,0.18); border-radius: 12px;
}
.tarot-deco-en {
  font-family: var(--font-decorative); font-size: 19px; font-style: italic;
  color: var(--rose); letter-spacing: 2px;
  background: linear-gradient(160deg, var(--rose) 20%, var(--gold) 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 6px;
}
.tarot-deco-cn { font-size: 12px; color: var(--text-muted); letter-spacing: 2px; }

/* 首屏：分区卡片化（问题 / 先选择张数），整体靠左对齐不散乱 */
.tarot-home { align-items: stretch; }
.tarot-sec {
  padding: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--border); border-radius: 16px;
  width: 100%; box-sizing: border-box;
}
.tarot-sec-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  color: var(--text-secondary); margin-bottom: 10px;
}
.tarot-sec-title::before {
  content: ''; width: 14px; height: 1px; flex-shrink: 0;
  background: var(--gold); opacity: 0.55;
}
.tarot-q-input {
  width: 100%; box-sizing: border-box; resize: none;
  min-height: 62px; max-height: 120px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--bg-chat); border: 1.5px solid var(--border);
  font-family: var(--font-reading); font-size: 14px; line-height: 1.6;
  color: var(--text-primary); outline: none;
  transition: border-color 0.25s ease;
}
.tarot-q-input::placeholder { color: var(--text-muted); }
.tarot-q-input:focus { border-color: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 14%, transparent); }
.tarot-q-hint {
  font-size: 11px; color: var(--text-muted); letter-spacing: 1px;
  margin-top: 8px; line-height: 1.5; opacity: 0.9;
}

.tarot-count-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tarot-count-pill {
  flex: 1; min-width: 54px; padding: 12px 6px; border-radius: 12px;
  background: var(--surface-solid); border: 1.5px solid var(--border);
  font-family: var(--font-reading); font-size: 13px; color: var(--text-secondary);
  cursor: pointer; transition: all 0.25s ease;
}
.tarot-count-pill:hover { border-color: var(--rose); color: var(--text-primary); }
.tarot-count-pill.active {
  border-color: var(--rose); background: var(--rose-light);
  color: var(--rose); font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, var(--shadow-sm), var(--shadow-glow);
}
.tarot-start-btn { margin-top: 16px; align-self: center; width: 100%; max-width: 360px; }
.tarot-start-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ===== 操作按钮 ===== */
.tarot-action-btn {
  padding: 10px 24px; border-radius: 20px; cursor: pointer;
  font-family: var(--font-reading); font-size: 12px; letter-spacing: 1px;
  transition: all 0.2s ease; border: none;
}
.tarot-action-btn.primary { background: var(--rose); color: #1A1424; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, var(--shadow-sm); }
.tarot-action-btn.primary:hover { background: var(--rose-dark); transform: translateY(-1px); }
.tarot-action-btn.rose { border: 1px solid var(--rose); background: transparent; color: var(--rose); }
.tarot-action-btn.rose:hover { background: var(--rose-light); }
.tarot-action-btn.rose.ready { background: var(--rose); color: #1A1424; }
.tarot-action-btn.ghost { border: 1px solid var(--border); background: transparent; color: var(--text-secondary); }
.tarot-action-btn.ghost:hover { border-color: var(--text-muted); color: var(--text-primary); }

/* ===== 粒子（神秘尘埃）===== */
.tarot-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tarot-particle {
  position: absolute; opacity: 0.5; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,124,0.6), transparent 70%);
  animation: trParticleFloat 9s linear infinite;
}
.tarot-particle:nth-child(1) { width: 5px; height: 5px; left: 8%; top: 22%; animation-delay: 0s; }
.tarot-particle:nth-child(2) { width: 3px; height: 3px; left: 78%; top: 34%; animation-delay: 1.2s; }
.tarot-particle:nth-child(3) { width: 4px; height: 4px; left: 48%; top: 12%; animation-delay: 2.4s; }
.tarot-particle:nth-child(4) { width: 3px; height: 3px; left: 22%; top: 56%; animation-delay: 3.1s; }
.tarot-particle:nth-child(5) { width: 5px; height: 5px; left: 62%; top: 62%; animation-delay: 4s; }
.tarot-particle:nth-child(6) { width: 3px; height: 3px; left: 88%; top: 18%; animation-delay: 5s; }
.tarot-particle:nth-child(7) { width: 4px; height: 4px; left: 14%; top: 74%; animation-delay: 6s; }
.tarot-particle:nth-child(8) { width: 3px; height: 3px; left: 72%; top: 48%; animation-delay: 7s; }
@keyframes trParticleFloat {
  0% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-14px); opacity: 0.75; }
  100% { transform: translateY(0); opacity: 0.5; }
}

/* ===== 选牌阵：翻页 + 大桌子 ===== */
.tarot-spread { align-items: stretch; }
.spread-count-line {
  text-align: center; font-size: 12px; color: var(--text-primary);
  letter-spacing: 1px; margin-bottom: 10px; padding: 10px 12px;
  border-radius: 12px; background: var(--surface-solid);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.spread-count-line::before,
.spread-count-line::after {
  content: ''; width: 16px; height: 1px; flex-shrink: 0;
  background: var(--gold); opacity: 0.5;
}
.spread-stage {
  position: relative; width: 100%; overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  border-radius: 18px;
}
.spread-table {
  position: relative; height: 100%; will-change: transform;
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
}
.spread-page {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  box-sizing: border-box; overflow: hidden;
}
/* 大桌子：深色木纹 + 绒布底 + 边缘光圈（每页一张桌）*/
.spread-page::before {
  content: ''; position: absolute; inset: 8px; border-radius: 18px; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(150,120,180,0.12), transparent 60%),
    linear-gradient(160deg, #2A2138 0%, #1E1628 60%, #180F22 100%);
  box-shadow: inset 0 0 0 1px rgba(200,175,220,0.10), inset 0 0 40px rgba(0,0,0,0.35);
}
.spread-grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1;
}
.spread-slot {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  width: auto; height: auto;
}
.spread-card {
  transform-origin: center; display: flex; align-items: center; justify-content: center;
}
.spread-card .tarot-card-front {
  width: calc(var(--cardS, 0.86) * 56px); height: calc(var(--cardS, 0.86) * 92px);
}
.spread-card .tarot-card-front-inner { width: 60%; height: 60%; }
.spread-pos {
  margin-top: 4px; font-size: 9px; color: var(--text-muted);
  text-align: center; line-height: 1.2; max-width: 62px; overflow: hidden; text-overflow: ellipsis;
}

/* 牌阵信息条 */
.spread-info {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 12px 12px; margin-top: 10px;
  background: var(--surface-solid); border: 1px solid var(--gold-light);
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
.si-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.si-en { font-family: var(--font-decorative); font-style: italic; font-size: 10px; color: var(--gold); opacity: 0.75; margin-top: 2px; letter-spacing: 2px; }
.si-desc { font-size: 11px; color: var(--text-muted); line-height: 1.6; margin-top: 8px; }
.si-pick { margin-top: 12px; min-width: 160px; }

/* 翻页圆点 */
.spread-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.spread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all 0.25s ease; }
.spread-dot.on { background: var(--rose); width: 16px; border-radius: 4px; }

/* ===== 洗牌：一圈牌围圆，按住往指定方向画圈搓 ===== */
.tarot-shuffle { align-items: center; }
.shuffle-hint {
  font-size: 13px; color: var(--text-primary); letter-spacing: 1px;
  text-align: center; margin-top: 6px; max-width: 300px; line-height: 1.6;
  padding: 10px 12px; border-radius: 12px; background: var(--surface-solid);
  border: 1px solid var(--border);
}
.shuffle-deck-wrap {
  position: relative; width: min(60vw, 248px); height: min(60vw, 248px);
  margin: 14px auto 8px; touch-action: none; user-select: none; -webkit-user-select: none;
}
/* 一圈散开的牌背容器（整体随手指旋转） */
.shuffle-cards {
  position: absolute; inset: 0; cursor: grab;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.5));
}
.shuffle-deck-wrap.grabbing .shuffle-cards { cursor: grabbing; }
.shuffle-card {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 76px;
  transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px))) rotate(var(--sr, 0deg));
}
.shuffle-card .tarot-card-front { width: 100%; height: 100%; }
.shuffle-card .tarot-card-front-inner { width: 60%; height: 60%; }
.shuffle-percent {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-decorative); font-style: italic; font-size: 17px;
  color: var(--gold); letter-spacing: 2px; z-index: 4;
}
.shuffle-ring {
  position: absolute; top: 50%; left: 50%; width: min(64vw, 252px); height: min(64vw, 252px);
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--rose) calc(var(--p, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  transition: filter 0.2s ease;
}
.shuffle-tip {
  font-size: 11px; color: var(--text-muted); letter-spacing: 1px; text-align: center;
  margin-top: 12px; max-width: 300px; line-height: 1.6;
}
.shuffle-draw-btn { margin-top: 14px; min-width: 160px; }
.shuffle-draw-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ===== 抽牌：牌阵(桌面姿态) + 扇形牌堆 ===== */
.tarot-draw { min-height: 0; }
.tarot-draw-hint {
  font-size: 12px; color: var(--text-primary); letter-spacing: 1px;
  text-align: center; margin-top: 4px; padding: 10px 12px;
  border-radius: 12px; background: var(--surface-solid);
  border: 1px solid var(--border);
}
.tarot-board-wrap { margin-top: 8px; position: relative; }
/* 牌阵用桌面姿态（按牌阵坐标 absolute 摆位） */
.tarot-board.table-pos {
  position: relative; z-index: 1; padding: 8px;
  height: 300px; /* JS 会按牌张数覆盖成实际高度 */
}
.tarot-board.table-pos > .slot {
  position: absolute; transform-origin: center; left: auto; top: auto;
}
/* 桌面背景（抽牌页的牌桌，与选牌阵预览一致） */
.tarot-board-wrap::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(150,120,180,0.10), transparent 60%),
    linear-gradient(160deg, #2A2138 0%, #1E1628 60%, #180F22 100%);
  box-shadow: inset 0 0 0 1px rgba(200,175,220,0.10), inset 0 0 30px rgba(0,0,0,0.30);
}

.slot {
  width: auto; height: auto; display: flex; flex-direction: column; align-items: center;
  transition: border-color 0.3s ease;
}
.slot-card {
  width: calc(var(--cardS, 0.82) * 54px); height: calc(var(--cardS, 0.82) * 86px);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.slot .tarot-card-front { width: 100%; height: 100%; }
.slot .tarot-card-front-inner { width: 60%; height: 60%; }
.slot-empty-mark {
  font-size: 18px; color: color-mix(in srgb, var(--border) 80%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--gold) 30%, transparent);
}
.slot-pos {
  font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; text-align: center;
  line-height: 1.25; max-width: 64px; overflow: hidden; text-overflow: ellipsis;
}
/* 空牌位：给 slot-card 一个虚线占位框 */
.slot.empty .slot-card { border: 1.5px dashed var(--border); border-radius: 8px; }
/* 下一个目标牌位：一灭一闪发光 */
.slot.empty.target .slot-card {
  animation: tarot-slot-glow 1.4s ease-in-out infinite;
}
@keyframes tarot-slot-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(200,168,124,0.2) inset; border-color: rgba(200,168,124,0.4); }
  50% { box-shadow: 0 0 0 1px rgba(200,168,124,0.7) inset, 0 0 16px rgba(200,168,124,0.5); border-color: rgba(200,168,124,0.9); }
}
.slot.empty.target .slot-empty-mark { color: var(--gold); }

/* 扇形牌堆（选牌区整体下移留出头部空间，抬起高亮的牌不再被显示框上边缘切掉） */
.tarot-fan-clip {
  position: relative; overflow: hidden; height: 212px; margin-top: 22px; padding-top: 22px;
  box-sizing: border-box;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.tarot-fan-clip.dragging { cursor: grabbing; }
.tarot-fan { position: relative; height: 190px; will-change: transform; box-sizing: border-box; }
/* 牌背下移 34px，给「抬起高亮」的牌留出上方空间，不再被显示区切掉 */
.fan-card {
  position: absolute; top: 34px; left: 0; width: 58px; height: 94px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.fan-card .tarot-card-front { width: 100%; height: 100%; }
.fan-card .tarot-card-front-inner { width: 60%; height: 60%; }
.fan-card.front { cursor: pointer; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
.fan-card.active { filter: drop-shadow(0 10px 26px rgba(200,168,124,0.7)); z-index: 300; }
.tarot-draw-tip {
  font-size: 11px; color: var(--text-muted); letter-spacing: 1px; text-align: center;
  margin-top: 14px; padding: 9px 12px; border-radius: 10px;
  background: var(--surface-solid); border: 1px solid var(--border);
}

/* 抽走的牌飞向牌位 */
.tarot-fly-clone { z-index: 3000; pointer-events: none; }
.tarot-fly-clone .tarot-card-front { width: 100%; height: 100%; }
.tarot-fly-clone .tarot-card-front-inner { width: 60%; height: 60%; }
/* ===== 离开动画（摊牌 → 全屏翻牌 过渡）===== */
.game-tarot.tarot-leaving {
  opacity: 0; transform: translateY(18px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ===== 全屏翻牌 ===== */
.tarot-reveal { padding: 8px 12px calc(16px + var(--safe-bottom, 0px)); }
/* 结尾页：整页从上到下可平滑滚动（不再中间挤一块固定小滚动窗），并隐藏滚动条 */
.tarot-reveal { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tarot-reveal::-webkit-scrollbar { display: none; }
.game-tarot.tarot-enter { animation: tarot-reveal-in 0.4s cubic-bezier(0.22,0.61,0.36,1) both; }
/* 抽牌页单独用更缓慢的入场（比普通 0.4s 慢），配合 whisper 音效营造进入摊牌的仪式感 */
.game-tarot.draw-enter { animation: tarot-reveal-in 0.62s cubic-bezier(0.22,0.61,0.36,1) both; }
@keyframes tarot-reveal-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
.reveal-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; font-size: 12px; color: var(--text-primary);
  letter-spacing: 1px; margin-top: 4px; padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-solid);
  border: 1px solid var(--gold-light);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-xs);
}
.reveal-hint-star {
  font-size: 13px; color: var(--gold); text-shadow: 0 0 10px color-mix(in srgb, var(--gold) 40%, transparent);
}
/* 结尾：摆阵桌面（放大一档，多张牌也不再顶到边/超出框）+ 固定在桌面内滚动 */
.reveal-board-wrap { position: relative; margin-top: 10px; flex-shrink: 0; }
.reveal-board-wrap::before {
  content: ''; position: absolute; inset: 0; border-radius: 16px; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(150,120,180,0.10), transparent 60%),
    linear-gradient(160deg, #2A2138 0%, #1E1628 60%, #180F22 100%);
  box-shadow: inset 0 0 0 1px rgba(200,175,220,0.10), inset 0 0 30px rgba(0,0,0,0.30);
}
.reveal-board-wrap { padding: 12px; }
.tarot-board.board-reveal.table-pos {
  position: relative; z-index: 1; padding: 14px; height: 300px; box-sizing: border-box;
}
.tarot-board.board-reveal.table-pos > .reveal-slot { position: absolute; transform-origin: center; }
.reveal-slot {
  position: absolute; width: auto; height: auto; display: flex; flex-direction: column; align-items: center;
}
.reveal-slot-pos {
  font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; text-align: center;
  line-height: 1.25; max-width: 64px; overflow: hidden; text-overflow: ellipsis;
}
.reveal-card { perspective: 900px; cursor: pointer; }
.reveal-card-inner {
  position: relative; width: calc(var(--cardS, 0.82) * 104px); height: calc(var(--cardS, 0.82) * 168px);
  transition: transform 0.65s cubic-bezier(0.22,0.61,0.36,1);
  transform-style: preserve-3d;
}
.reveal-card-inner.flipped { transform: rotateY(180deg); }
.reveal-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* ★ 牌背(未翻开)必须完整撑满整个牌面盒子：否则回退成偏方又偏小，翻开后却是一张长卡比例对不上（甲方 #12） */
.reveal-face .tarot-card-front { width: 100%; height: 100%; }
.reveal-face .tarot-card-front-inner { width: 60%; height: 60%; }
.reveal-face.back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column; padding: 6px; box-sizing: border-box;
  border: 1.5px solid var(--gold-light); border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-solid), var(--bg-chat) 60%, var(--bg-primary));
}
.reveal-face.back .tc-face-img { flex: 1; min-height: 0; position: relative; border-radius: 6px; overflow: hidden; }
.tc-face-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.tc-face-fallback {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 6px;
}
.tc-name-zh { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.15; word-break: break-word; }
.tc-name-en { font-family: var(--font-decorative); font-size: 9px; font-style: italic; color: var(--gold); opacity: 0.75; margin-top: 3px; letter-spacing: 1px; word-break: break-word; }
.tc-orientation { font-size: 10px; margin-top: 5px; letter-spacing: 1px; font-family: var(--font-decorative); font-style: italic; }
.tc-orientation.upright { color: var(--rose); }
.tc-orientation.reversed { color: var(--lavender); transform: rotate(180deg); }
.tc-keywords { flex: 0 0 auto; margin-top: 5px; font-size: 9px; color: var(--text-muted); text-align: center; line-height: 1.3; word-break: break-word; }

/* 翻牌解析区：随内容自然增高（整页滚动），不再自身滚动 */
.reveal-interp {
  flex: 0 0 auto; margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px;
}
.interp-empty {
  text-align: center; font-size: 12px; color: var(--text-muted);
  letter-spacing: 1px; padding: 18px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid) 60%, transparent);
  border: 1px dashed var(--border);
}
.interp-box {
  border-radius: 12px; padding: 10px 12px;
  background: var(--surface-solid); border: 1px solid var(--gold-light);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, var(--shadow-xs);
  animation: interp-pop 0.4s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes interp-pop { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.ib-pos { font-size: 10px; color: var(--gold); letter-spacing: 1px; margin-bottom: 3px; }
.ib-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.ib-name span { font-family: var(--font-decorative); font-style: italic; font-size: 10px; color: var(--text-muted); margin-left: 6px; }
.ib-orient { font-size: 11px; margin-top: 2px; font-family: var(--font-decorative); font-style: italic; }
.ib-orient.upright { color: var(--rose); }
.ib-orient.reversed { color: var(--lavender); }
.ib-keywords { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.ib-meaning { font-size: 12px; line-height: 1.8; color: var(--text-primary); margin-top: 6px; letter-spacing: 0.3px; }

.reveal-progress { text-align: center; font-size: 11px; color: var(--text-muted); letter-spacing: 1px; margin: 10px 0 4px; flex-shrink: 0; }
.reveal-actions { text-align: center; margin-bottom: 6px; flex-shrink: 0; }
.reveal-actions.pop { animation: interp-pop 0.4s cubic-bezier(0.22,0.61,0.36,1) both; }
.reveal-note {
  font-size: 11px; color: var(--rose); line-height: 1.7; letter-spacing: 0.5px;
  padding: 12px 14px; margin: 4px 0 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--rose) 8%, var(--surface-solid));
  border: 1px solid color-mix(in srgb, var(--rose) 22%, transparent);
}
.reveal-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== 解牌右侧抽屉：平时只露一个小把手，点开滑出全部牌义（只装每张牌解牌文字）===== */
.reveal-drawer {
  position: fixed; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  pointer-events: none;
  z-index: 2200;   /* ★ 挂 body 后需在 body 层压过游戏中心 overlay(z-400) 与确认弹窗(z-2100) */
}
.reveal-drawer-handle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 3; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 16px 8px; min-width: 30px;
  border: 1px solid var(--gold-light); border-right: none;
  border-radius: 14px 0 0 14px;
  background: var(--surface-solid);
  color: var(--rose);
  cursor: pointer; box-shadow: var(--shadow-md);
  font-family: var(--font-reading); letter-spacing: 1px;
  transition: background 0.2s ease, color 0.2s ease;
}
.reveal-drawer-handle:hover { background: var(--rose-light); }
/* ★ 2027 修「点一下牌意按钮会下移一下再上来」：全局 button:active{transform:scale(0.97)} 会盖掉手柄的
   translateY(-50%) 居中 → 按下瞬间失去垂直居中而跳下、松开弹回。这里保留居中 transform，只做轻微缩放，不再上下移动。 */
.reveal-drawer-handle:active { transform: translateY(-50%) scale(0.97); }
.reveal-drawer-handle .rdh-label { writing-mode: vertical-rl; font-size: 11px; }
.reveal-drawer-handle .rdh-count {
  writing-mode: horizontal-tb; font-size: 10px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-radius: 8px; padding: 1px 5px; line-height: 1.2;
}
.reveal-drawer-body {
  position: absolute; right: 0;
  top: calc(var(--safe-top, 0px) + 12px);
  bottom: calc(var(--safe-bottom, 0px) + 12px);
  width: min(82%, 320px);
  z-index: 2; pointer-events: auto;
  display: flex; flex-direction: column;
  background: var(--surface-solid);
  border: 1px solid var(--gold-light); border-right: none;
  border-radius: 16px 0 0 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* 隐藏态：整块推到屏幕外（translateZ(0) 预提升合成层，减少手机上层重建竞态） */
  transform: translateX(calc(100% + 10px)) translateZ(0);
  transition: transform 0.34s cubic-bezier(0.22,0.61,0.36,1);   /* close 路径 */
  will-change: transform;
}
/* ★ 2028-09 修「点『牌意』抽屉先出现→消失→再出现」：
   根因 = open 方向用了补间（transition）驱动一个**在屏幕外的**元素——手机会先把合成层销毁，
   加 .open 时浏览器现场重建层、第一帧直接画终点、再回起点重跑 → 看起来就是闪一下。
   口径（案例库「UI 闪烁防错指南」第 1、3 条 + 已修好的参考案例 .bg-cp-overlay）：
   **进去用 @keyframes（起点写死在规则里，免疫层重建），出来才用 transition。**
   base 的 transform 仍是隐藏态，动画 to 与它一致，所以动画结束后状态不变、不会有第二段跳。 */
.reveal-drawer.open .reveal-drawer-body {
  animation: trDrawerIn 0.34s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes trDrawerIn {
  from { transform: translateX(calc(100% + 10px)); opacity: 0.6; }
  to   { transform: translateX(0); opacity: 1; }
}
.reveal-drawer-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* ★ 关闭时不再靠 .open 回退 transform：动画带 both 已把终点写死；移除 .open 后动画消失、
   基类隐藏态 + transition 接住淡出（open 只由 keyframes 驱动，两条路不重叠 → 不再闪）。 */
.reveal-drawer-body .interp-box {
  /* ★ 抽屉内的牌意块不再自重播入场动画：翻牌时它是在**已经滑开的抽屉里**插进来的，
     动画会让整块抖一下（甲方「点牌意面板先出现再消失再出现」的另一半原因）；滚到底部已经足够醒目。 */
  animation: none;
  margin: 10px 12px 0; padding: 12px 13px;
}
.reveal-drawer-body .interp-box:last-child { margin-bottom: 12px; }
.reveal-drawer-body .interp-empty { margin: 12px; }

.rdh-label { color: var(--text-secondary); }
.reveal-drawer-handle:hover .rdh-label { color: var(--rose); }

/* ===== 选择是否给他看问题（居中可点弹窗）===== */
.tarot-choice {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 2300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 6, 18, 0.55); padding: 24px; box-sizing: border-box;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.tarot-choice.show { opacity: 1; pointer-events: auto; }
.tarot-choice-panel {
  width: 100%; max-width: 300px; border-radius: 16px; padding: 22px 18px;
  background: var(--surface-solid); border: 1px solid var(--gold-light);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, var(--shadow-lg), 0 0 40px rgba(160,130,180,0.14);
  opacity: 0; transform: translateY(10px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tarot-choice.show .tarot-choice-panel { opacity: 1; transform: none; }
.tarot-choice-title { font-size: 15px; font-weight: 600; color: var(--text-primary); text-align: center; }
.tarot-choice-sub { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 8px; text-align: center; }
.tarot-choice-btns { display: flex; gap: 12px; margin-top: 18px; }
.tarot-choice-btn {
  flex: 1; padding: 11px 8px; border-radius: 12px; cursor: pointer;
  font-family: var(--font-reading); font-size: 13px; letter-spacing: 1px; transition: all 0.2s ease;
}
.tarot-choice-btn.ok { border: none; background: var(--rose); color: #1A1424; box-shadow: var(--shadow-sm); }
.tarot-choice-btn.ok:hover { background: var(--rose-dark); transform: translateY(-1px); }
.tarot-choice-btn.no { border: 1px solid var(--border); background: transparent; color: var(--text-secondary); }
.tarot-choice-btn.no:hover { border-color: var(--text-muted); color: var(--text-primary); }

/* ===== 牌背（复用，搓牌/摊牌/飞牌/翻牌背面）===== */
.tarot-card-front {
  border: 1.5px solid var(--gold-light); border-radius: 8px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--rose) 16%, #2A1F38) 0%, color-mix(in srgb, var(--rose) 7%, #1E1330) 40%, color-mix(in srgb, var(--rose) 11%, #241838) 60%, color-mix(in srgb, var(--rose) 4%, #150A24) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, var(--shadow-md);
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.tarot-card-front::before {
  content: ''; position: absolute; inset: 5px; z-index: 2;
  border: 0.5px solid rgba(200,168,124,0.35); border-radius: 5px;
}
.tarot-card-front::after {
  content: '✦'; position: absolute; font-size: 15px; color: rgba(200,168,124,0.5); z-index: 2;
  text-shadow: 0 0 12px rgba(200,168,124,0.4);
}
.tarot-card-front-inner {
  width: 50px; height: 80px; border: 1px solid rgba(200,168,124,0.25); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-decorative); font-size: 14px; color: rgba(200,168,124,0.4); font-style: italic;
  position: relative; z-index: 3;
}

/* ===== 窄屏适配 ===== */
@media (max-width: 370px) {
  .game-tarot { padding: 6px 8px calc(12px + var(--safe-bottom, 0px)); gap: 8px; }
  .tarot-q-input { font-size: 13px; min-height: 54px; }
  .tarot-count-pill { min-width: 44px; padding: 10px 4px; font-size: 12px; }
  .spread-card .tarot-card-front { width: clamp(36px, 11vw, 52px); height: clamp(60px, 18vw, 88px); }
  .shuffle-card { width: 42px; height: 66px; }
  .shuffle-deck-wrap { width: min(62vw, 216px); height: min(62vw, 216px); }
  .shuffle-ring { width: min(66vw, 220px); height: min(66vw, 220px); }
  .tarot-fan-clip { height: 192px; padding-top: 20px; margin-top: 16px; }
  .tarot-fan { height: 172px; }
  .fan-card { top: 30px; width: 48px; height: 78px; }
  .reveal-card-inner { width: calc(var(--cardS, 0.82) * 88px); height: calc(var(--cardS, 0.82) * 142px); }
  .reveal-drawer-body { width: min(86%, 300px); }
  .reveal-drawer-handle { padding: 14px 7px; }
  .tarot-result-card { max-width: 240px; }
}

/* ===== 减弱动效 ===== */
@media (prefers-reduced-motion: reduce) {
  .game-tarot.tarot-enter, .game-tarot.draw-enter, .interp-box, .reveal-actions.pop { animation: none; }
  .reveal-card-inner { transition: none; }
  .slot.empty.target .slot-card { animation: none; }
  .game-tarot.tarot-leaving { transition: none; }
  .tarot-particle { animation: none; }
}

/* ===== 塔罗结果泡泡卡（深色适配）===== */
.bubble.tarot-result-bubble { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; max-width: 300px !important; }
.tarot-result-card {
  max-width: 280px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-solid), var(--bg-chat) 60%, var(--bg-primary));
  border: 1.5px solid var(--gold-light);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, var(--shadow-sm), var(--shadow-md), 0 0 40px rgba(160,130,180,0.08);
  position: relative;
}
.tarot-result-card::before { content: ''; position: absolute; inset: 6px; border: 0.5px solid rgba(200,168,124,0.18); border-radius: 12px; pointer-events: none; }
.trc-header { text-align: center; padding: 16px 16px 8px; }
.trc-title {
  font-family: var(--font-decorative); font-size: 18px; font-style: italic; font-weight: 500; letter-spacing: 2.5px;
  background: linear-gradient(160deg, var(--rose) 20%, var(--gold) 70%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.trc-sub { font-family: var(--font-reading); font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.trc-divider { height: 1px; margin: 4px 20px; background: linear-gradient(90deg, transparent, rgba(200,168,124,0.3), transparent); }
.trc-cards { padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.trc-card-line { display: flex; align-items: center; gap: 8px; }
.trc-card-thumb { width: 30px; height: 48px; border-radius: 5px; overflow: hidden; flex: 0 0 auto; position: relative; border: 1px solid var(--gold-light); }
.trc-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trc-card-thumb .tc-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-decorative); font-style: italic; font-size: 12px; color: var(--gold); }
.trc-card-info { flex: 1; min-width: 0; }
.trc-card-pos { font-size: 10px; color: var(--gold); letter-spacing: 0.5px; }
.trc-card-name { font-size: 12px; color: var(--text-primary); }
.trc-card-orient { font-size: 10px; font-family: var(--font-decorative); font-style: italic; }
.trc-card-orient.upright { color: var(--rose); }
.trc-card-orient.reversed { color: var(--lavender); }
.trc-interp { padding: 8px 16px; font-size: 12px; color: var(--text-secondary); line-height: 1.8; max-height: 120px; overflow: hidden; }
.trc-footer { text-align: center; padding: 6px 16px 14px; }
.trc-signature { font-family: var(--font-handwriting, 'Great Vibes', cursive); font-size: 17px; color: var(--rose); transform: rotate(-2deg); display: inline-block; letter-spacing: 1px; }