/* ============================================================
   塔罗 PWA · 样式表
   设计基调：炼金术式的深紫底色 + 金箔细线 + 衬线字体 + 静态星空
   ============================================================ */

/* ---------- 主题变量 ---------- */
:root {
  /* 深色（默认，神秘紫金） */
  --bg-deep:      #0a0418;
  --bg-mid:       #150a2e;
  --bg-soft:      #1f1340;
  --surface:      rgba(40, 22, 80, 0.55);
  --surface-strong: rgba(60, 35, 110, 0.7);
  --border:       rgba(201, 169, 97, 0.22);
  --border-strong:rgba(201, 169, 97, 0.45);
  --gold:         #c9a961;
  --gold-soft:    #d9bc7a;
  --gold-deep:    #8a6f3d;
  --text:         #e8dcc4;
  --text-soft:    #b9a98a;
  --text-mute:    #8a7c63;
  --accent:       #b885ff;
  --danger:       #d36b6b;
  --card-back-1:  #2a1554;
  --card-back-2:  #4a2780;
  --shadow:       0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-card:  0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201,169,97,0.18) inset;

  --font-display: 'Cinzel', 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-body:    'Noto Serif SC', 'Songti SC', 'STSong', Georgia, serif;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-card: 10px;

  --safe-top:    env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left:   env(safe-area-inset-left);
  --safe-right:  env(safe-area-inset-right);

  /* iOS standalone PWA 下 fixed/layout viewport 可能被 home indicator 高度截短 */
  --viewport-bottom-fix: 0px;
}

:root.ios-standalone {
  --viewport-bottom-fix: var(--safe-bottom);
}


/* 浅色（羊皮纸古典，沉稳一点的烧色） */
:root[data-theme="light"] {
  --bg-deep:      #efe2c0;
  --bg-mid:       #e6d5a8;
  --bg-soft:      #d7c189;
  --surface:      rgba(255, 248, 226, 0.78);
  --surface-strong: rgba(252, 243, 215, 0.95);
  --border:       rgba(110, 75, 30, 0.28);
  --border-strong:rgba(110, 75, 30, 0.55);
  --gold:         #855f1c;
  --gold-soft:    #a87a2a;
  --gold-deep:    #4d340c;
  --text:         #3a2412;
  --text-soft:    #6b4715;
  --text-mute:    #9b7836;
  /* 逆位/强调：暖色烧赭，跟羊皮纸更搭，不再用紫色 */
  --accent:       #9c4a24;
  --danger:       #a93a3a;
  --card-back-1:  #c9a653;
  --card-back-2:  #7a541a;
  --shadow:       0 8px 30px rgba(80, 50, 10, 0.18);
  --shadow-card:  0 6px 18px rgba(80, 50, 10, 0.22), 0 0 0 1px rgba(110,75,30,0.3) inset;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  background-color: var(--bg-deep);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-deep);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  /* iOS standalone 模式下背景渐变 */
  background-image:
    radial-gradient(ellipse at 30% 10%, rgba(74, 39, 128, 0.35), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(40, 80, 130, 0.25), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 50%, var(--bg-deep) 100%);
  background-attachment: fixed;
}

:root[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse at 30% 10%, rgba(200, 160, 90, 0.3), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(180, 140, 70, 0.2), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 50%, var(--bg-deep) 100%);
}

button, input, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* ---------- 星空背景 (深色独有) ---------- */
.starfield {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--viewport-bottom-fix));
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.6s;
}
:root[data-theme="light"] .starfield { opacity: 0; }

.starfield svg { width: 100%; height: 100%; }
.starfield .star { fill: var(--gold-soft); }
.starfield .star.dim { opacity: 0.4; }
.starfield .star.bright { opacity: 0.9; }

/* ---------- 应用容器 ---------- */
.app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--viewport-bottom-fix));
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  /* 底部由 nav 自己处理 safe-area */
  z-index: 1;
}

/* ---------- 顶栏 ---------- */
.topbar {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: relative;
}

.topbar::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

.topbar .title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
}

.topbar .icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-soft);
  transition: color 0.2s, background 0.2s;
}
.topbar .icon-btn:active { background: var(--surface); color: var(--gold); }
.topbar .icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ---------- 主视图区域 ---------- */
.views {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: none;
  flex-direction: column;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.view.active { display: flex; }

/* ---------- 视图标题 ---------- */
.view-header {
  padding: 24px 20px 16px;
  text-align: center;
}
.view-header .ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.4em;
  margin-bottom: 8px;
  font-family: var(--font-display);
}
.view-header .ornament::before,
.view-header .ornament::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.view-header h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.view-header p {
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
}

/* ---------- 分类筛选 ---------- */
.category-bar {
  display: flex;
  gap: 8px;
  padding: 0 20px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  flex-shrink: 0;
}
.category-bar::-webkit-scrollbar { display: none; }
.category-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-soft);
  background: var(--surface);
  transition: all 0.25s;
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.category-chip.active {
  color: var(--bg-deep);
  background: var(--gold);
  border-color: var(--gold);
}
.category-chip .cat-icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.5;
}
.category-chip.fav .cat-icon { fill: currentColor; }
.category-chip.hot .cat-icon {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

/* ---------- 搜索 + 张数筛选 ---------- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 14px;
  flex-shrink: 0;
}
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
  user-select: text;
  -webkit-user-select: text;
}
.search-input::placeholder { color: var(--text-mute); }
.search-input:focus {
  border-color: var(--border-strong);
  background: var(--surface-strong);
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--gold);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  pointer-events: none;
  opacity: 0.85;
}
.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1;
  border: 1px solid var(--border);
}
.search-clear:active { background: var(--gold); color: var(--bg-deep); }

.count-chip-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.count-chip-row::-webkit-scrollbar { display: none; }
.count-chip {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-mute);
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  transition: all 0.2s;
}
.count-chip.active {
  color: var(--gold);
  border-color: var(--gold);
  background: var(--surface-strong);
}

/* ---------- 牌阵列表 ---------- */
.spread-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.spread-card {
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  width: 100%;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.spread-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at top right, rgba(201,169,97,0.15), transparent 70%);
  pointer-events: none;
}
.spread-card:active {
  transform: scale(0.98);
  border-color: var(--border-strong);
  background: var(--surface-strong);
}
.spread-card .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.spread-card .name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.05em;
}
.spread-card .meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.spread-card .meta .count::before { content: '◆ '; opacity: 0.6; }
.spread-card .desc {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  padding-right: 36px; /* 给收藏按钮留位置 */
}

/* 收藏按钮 */
.spread-card .fav-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mute);
  transition: color 0.2s, background 0.2s, transform 0.2s;
  z-index: 2;
}
.spread-card .fav-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: fill 0.25s;
}
.spread-card .fav-btn.on { color: var(--gold); }
.spread-card .fav-btn.on svg { fill: var(--gold); }
.spread-card .fav-btn:active { transform: scale(0.85); background: var(--surface-strong); }

/* 热门徽章 */
.spread-card .badge.popular {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-family: var(--font-display);
  letter-spacing: 0.15em;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--bg-deep);
  vertical-align: middle;
  font-weight: 600;
  transform: translateY(-2px);
}

/* 自由抽牌卡片 (特殊样式) */
.spread-card.free {
  background: linear-gradient(135deg, var(--surface-strong), var(--surface));
  border-color: var(--border-strong);
}
.spread-card.free .name { color: var(--gold-soft); }

/* ---------- 自由抽牌输入 ---------- */
.free-draw-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 12px 16px;
  display: none;
  flex-direction: column;
  gap: 14px;
}
.free-draw-panel.show { display: flex; }
.free-draw-panel label {
  font-size: 13px;
  color: var(--text-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.free-draw-panel .count-control {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.count-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--gold);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.count-btn:active { background: var(--gold); color: var(--bg-deep); }
.count-display {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--text);
  min-width: 80px;
  text-align: center;
  letter-spacing: 0.1em;
}
.count-display small {
  display: block;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.3em;
  margin-top: 2px;
}

/* ---------- 主要按钮 ---------- */
.primary-btn {
  margin: 0 16px;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--bg-deep);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: transform 0.15s, opacity 0.2s;
  border: 1px solid var(--gold);
  box-shadow: 0 4px 16px rgba(201, 169, 97, 0.25);
}
.primary-btn:active { transform: scale(0.97); opacity: 0.9; }
.primary-btn[disabled] { opacity: 0.4; pointer-events: none; }

.ghost-btn {
  padding: 10px 16px;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.ghost-btn:active { color: var(--gold); border-color: var(--border-strong); }

/* ---------- 抽牌视图：牌阵布局 ---------- */
.draw-view { position: relative; }
.draw-info {
  padding: 16px 20px 8px;
  text-align: center;
}
.draw-info .spread-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}
.draw-info .position-hint {
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
  min-height: 18px;
}

/* 牌阵展示区
 * 关键点：绝对定位的 slot 以 .spread-board 的 padding-box 为定位基准，
 * 所以给 board 加 padding 并不会把 slot 推到内侧（这是之前两次"修边距"
 * 都没真正解决问题的原因）。
 * 真正的修法：限制 slot 的宽度，使其不超过两倍的最近边距离。
 *   - JS 计算当前牌阵中 min(x, 1-x)，写入 --safe-card-w（百分比，已留 5% 余量）。
 *   - CSS 用 min(默认宽度, var(--safe-card-w)) 来约束 slot 宽度。
 *   于是不管 3 张/5 张/7 张的牌阵，也不管屏幕是 320px 还是 480px，
 *   边缘牌永远不会被截断。
 */
.spread-board {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 380px;
  margin: 16px 0;
  /* 横向 padding 不再用于"防截断"（那已交给 --safe-card-w 解决），
     只是为了视觉上不要贴边。竖向保留 40px 给位置标签留位。 */
  padding: 40px 8px;
}
.spread-card-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  /* 双向约束：
     --safe-card-w    （%）由 JS 按横向最近边距 min(x, 1-x) 算出
     --safe-card-w-px （px）由 JS 按纵向最近边距 min(y, 1-y) 和 board
                            实际高度算出，避免短屏上 y=0.1/0.18 的卡片
                            溢出 board 顶/底挡住"共 X 张"提示和进度。 */
  width: min(22%, var(--safe-card-w, 100%), var(--safe-card-w-px, 100vw));
  max-width: 110px;
  aspect-ratio: 5 / 8;
  transition: transform 0.4s cubic-bezier(.5,.2,.2,1);
}
.spread-card-slot .card {
  width: 100%;
  height: 100%;
}
.spread-card-slot.label-only {
  pointer-events: none;
  background: none;
  border: none;
  box-shadow: none;
}
.spread-card-slot .slot-label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--gold);
  background: rgba(10, 4, 24, 0.85);
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  letter-spacing: 0.1em;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.4s 0.3s;
}
.spread-card-slot.flipped .slot-label {
  opacity: 1;
}
:root[data-theme="light"] .spread-card-slot .slot-label {
  background: rgba(255, 250, 235, 0.9);
  color: var(--gold-deep);
  border-color: rgba(138, 99, 32, 0.5);
}

/* 当牌阵很大时缩小卡片（同样要通过 --safe-card-w / --safe-card-w-px 封顶） */
.spread-board[data-count="7"] .spread-card-slot,
.spread-board[data-count="8"] .spread-card-slot,
.spread-board[data-count="9"] .spread-card-slot {
  width: min(18%, var(--safe-card-w, 100%), var(--safe-card-w-px, 100vw));
  max-width: 90px;
}
.spread-board[data-count="10"] .spread-card-slot {
  width: min(16%, var(--safe-card-w, 100%), var(--safe-card-w-px, 100vw));
  max-width: 80px;
}

/* 单张牌阵放大 */
.spread-board[data-count="1"] .spread-card-slot {
  width: min(50%, var(--safe-card-w, 100%), var(--safe-card-w-px, 100vw));
  max-width: 220px;
}
/* 三张：默认值（22%）已经够窄；保留稍大的 max-width 给宽屏。
   3-card 牌阵中常见 x=0.12/0.88，--safe-card-w 会自动算成约 22.8%
   并最终封顶 width，避免出现以前 26% 把边缘牌挤出去的问题。 */
.spread-board[data-count="3"] .spread-card-slot {
  width: min(24%, var(--safe-card-w, 100%), var(--safe-card-w-px, 100vw));
  max-width: 120px;
}

/* ---------- 卡片本体 ---------- */
.card {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
  container-type: inline-size;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
/* 翻牌：仅由下方 flip-lift 动画驱动；动画的 forwards 保留最终态。
   不再叠加 transition: transform，避免 transition 与 animation 在
   iOS Safari 上同时作用而出现「翻两次」的视觉冲突。 */
.card.reversed .card-inner { /* 逆位通过 .card-face 处理 */ }

.card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.card-face.back {
  background:
    radial-gradient(circle at 50% 50%, var(--card-back-2) 0%, var(--card-back-1) 70%),
    var(--card-back-1);
  border: 1px solid var(--border-strong);
}
.card-face.front {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #1a0f30, #2d1a4d);
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6% 5% 5%;
  text-align: center;
}
:root[data-theme="light"] .card-face.front {
  background: linear-gradient(180deg, #f7efd8, #e6d7a8);
}
.card.reversed .card-face.front { transform: rotateY(180deg) rotate(180deg); }

/* 牌面：有图片版
   旧实现依赖 onload 添加 .has-img 类，但 index.html 的 CSP（script-src 'self'）
   禁止内联事件处理器，导致 onload 不触发——图片永远 display:none。
   改为：仅凭祖先的 .image-mode 类来切换，更直接也对 CSP 友好。 */
.card-face.front .card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01) translate(0.5%, 0.2%);
}
.card.image-mode .card-face.front .card-text { display: none; }
.card.image-mode .card-face.front::after {
  /* 图片版加金色细边内框 */
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--gold-deep);
  opacity: 0.5;
  pointer-events: none;
}

/* 牌面：极简文字版 */
.card-face.front .card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 4%;
}
.card-text .arcana-mark {
  font-family: var(--font-display);
  font-size: clamp(6px, 10cqw, 11px);
  color: var(--gold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.card-text .num {
  font-family: var(--font-display);
  font-size: clamp(14px, 25cqw, 28px);
  color: var(--gold);
  letter-spacing: 0.05em;
}
/* 极简模式的装饰符（替代曾经的罗马数字） */
.card-text .card-glyph {
  font-family: var(--font-display);
  font-size: clamp(14px, 22cqw, 26px);
  color: var(--gold);
  opacity: 0.7;
  line-height: 1;
  text-shadow: 0 0 8px rgba(201, 169, 97, 0.35);
}
.card-text .name-zh {
  font-family: var(--font-display);
  font-size: clamp(10px, 16cqw, 18px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.card-text .name-en {
  font-family: var(--font-display);
  font-size: clamp(6px, 9cqw, 10px);
  color: var(--text-soft);
  letter-spacing: 0.2em;
  font-style: italic;
}
.card-text .suit-symbol {
  font-size: clamp(14px, 25cqw, 28px);
  color: var(--gold);
  line-height: 1;
}

/* 牌底图案 (SVG inline 已在 HTML 中) */
.back-pattern {
  position: absolute;
  inset: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.back-pattern svg {
  width: 100%;
  height: 100%;
}
.back-number {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
  opacity: 0.7;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 2;
  transition: opacity 0.18s ease-out;
}
/* 翻牌时立刻淡出阿拉伯顺序数字：
   既避免翻牌过程中 0~90° 仍可见，也兜底 iOS Safari 有时
   backface-visibility 渗透的 bug。 */
.card.flipped .back-number,
.spread-card-slot.flipped .back-number {
  opacity: 0;
}

/* 逆位标记（适配浅色 / 深色） */
.spread-card-slot.is-reversed::before {
  content: '逆';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  font-size: 11px;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s 0.7s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
:root[data-theme="light"] .spread-card-slot.is-reversed::before {
  background: var(--accent);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 2px 6px rgba(80, 50, 10, 0.25);
}
.spread-card-slot.flipped.is-reversed::before { opacity: 1; }

/* ---------- 结果视图 ---------- */
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 16px 12px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.result-left {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px dashed var(--border-strong);
  padding-right: 16px;
  text-align: center;
}
.result-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* 解读视图的小卡：与翻牌界面正面保持一致；极简模式不倒转，图片模式可倒转 */
.result-card .mini-card {
  width: 100%;
  max-width: 72px;
  aspect-ratio: 5 / 8;
  flex-shrink: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #1a0f30, #2d1a4d);
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  box-shadow: var(--shadow-card);
}
:root[data-theme="light"] .result-card .mini-card {
  background: linear-gradient(180deg, #f7efd8, #e6d7a8);
}
.result-card .mini-card.image-mode.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transform: scale(1.01) translate(0.5%, 0.2%);
}
.result-card .mini-card.image-mode.has-img::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--gold-deep);
  opacity: 0.5;
  pointer-events: none;
  border-radius: 4px;
}
.result-card .mini-card.image-mode.reversed img { transform: scale(1.01) rotate(180deg); }
.result-card .mini-card .mini-card-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8% 5%;
  gap: 4%;
}
/* 解读视图的极简模式小牌：把 .card-face.front 的 3D / 翻面变换重置，
   让它在非翻面场景下平铺显示，并继承字号变量 */
.result-card .mini-card .card-face.front.mini-front {
  position: absolute;
  inset: 0;
  transform: none;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  background: transparent;
  border: none;
  padding: 8% 6% 7%;
}
.result-card .mini-card .card-face.front.mini-front .card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
}
/* 「逆」徽章——极简和图片模式都用同一种气泡 */
.result-card .mini-card .rev-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
:root[data-theme="light"] .result-card .mini-card .rev-badge {
  color: #fff;
  background: var(--accent);
}

.result-card .pos {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.result-card .card-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  margin-top: 8px;
}
.result-card .orient {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  letter-spacing: 0.15em;
}
.result-card .orient.up { background: rgba(201,169,97,0.15); color: var(--gold); }
.result-card .orient.rev { background: rgba(184,133,255,0.15); color: var(--accent); }
.result-card .keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.keyword-chip {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-soft);
  white-space: nowrap;
}
:root[data-theme="light"] .keyword-chip {
  background: rgba(255, 250, 235, 0.9);
}

.result-actions {
  display: flex;
  gap: 10px;
  padding: 8px 16px 16px;
}
.result-actions button { flex: 1; }

/* ---------- 历史列表 ---------- */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
.history-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: background 0.2s;
}
.history-item:active { background: var(--surface-strong); }
.history-item .info { min-width: 0; flex: 1; }
.history-item .name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.history-item .meta {
  font-size: 11px;
  color: var(--text-soft);
  font-family: var(--font-display);
  letter-spacing: 0.1em;
}
.history-item .arrow {
  color: var(--gold);
  font-size: 18px;
  opacity: 0.6;
  flex-shrink: 0;
}

.empty-state {
  text-align: center;
  padding: 80px 30px;
  color: var(--text-mute);
}
.empty-state .symbol {
  font-size: 40px;
  color: var(--gold);
  opacity: 0.4;
  margin-bottom: 16px;
  font-family: var(--font-display);
  letter-spacing: 0.3em;
}
.empty-state p { font-size: 14px; line-height: 1.7; }

/* ---------- 冥想视图 ---------- */
.meditation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  text-align: center;
}
.meditation-circle {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 外圈光雾 */
  background: radial-gradient(circle, rgba(201,169,97,0.18) 0%, rgba(201,169,97,0.05) 55%, transparent 75%);
  box-shadow: 0 0 80px rgba(201, 169, 97, 0.18);
  animation: med-aura 6s ease-in-out infinite;
}
@keyframes med-aura {
  0%, 100% { box-shadow: 0 0 60px  rgba(201, 169, 97, 0.12); }
  50%      { box-shadow: 0 0 110px rgba(201, 169, 97, 0.32), 0 0 30px rgba(184,133,255,0.18); }
}

/* 双层环：外圈实线慢转，内圈虚线反转 */
.meditation-circle::before,
.meditation-circle::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.meditation-circle::before {
  inset: -10px;
  border: 1px solid var(--gold);
  opacity: 0.45;
  animation: med-rotate 26s linear infinite, med-breathe 6s ease-in-out infinite;
}
.meditation-circle::after {
  inset: 10px;
  border: 1px dashed var(--gold);
  opacity: 0.7;
  animation: med-rotate-rev 14s linear infinite, med-breathe 6s ease-in-out infinite 0.6s;
}

/* 中心呼吸光 */
.meditation-circle .inner {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft) 0%, rgba(201,169,97,0.22) 55%, transparent 80%);
  opacity: 0.55;
  animation: med-pulse 6s ease-in-out infinite;
}

@keyframes med-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.45; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes med-rotate     { to { transform: rotate(360deg); } }
@keyframes med-rotate-rev { to { transform: rotate(-360deg); } }
@keyframes med-pulse {
  0%, 100% { transform: scale(0.78); opacity: 0.3; filter: blur(2px); }
  50%      { transform: scale(1.3);  opacity: 0.85; filter: blur(0); }
}

/* 漂浮金光：四颗围绕中心圆缓慢绕轨道运行，营造星辰流转感 */
.meditation-circle .inner::before,
.meditation-circle .inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold), 0 0 18px rgba(201,169,97,0.6);
}
.meditation-circle .inner::before {
  animation: med-orbit-1 9s linear infinite;
}
.meditation-circle .inner::after {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent), 0 0 14px rgba(184,133,255,0.5);
  animation: med-orbit-2 13s linear infinite;
}
@keyframes med-orbit-1 {
  from { transform: rotate(0deg)   translateX(56px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(56px) rotate(-360deg); }
}
@keyframes med-orbit-2 {
  from { transform: rotate(180deg) translateX(70px) rotate(-180deg); }
  to   { transform: rotate(-180deg) translateX(70px) rotate(180deg); }
}

/* 静止星点闪烁（在外侧零散分布） */
.meditation-container::before {
  content: '✦ · · ✧ · ✦ · ✧';
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2em;
  opacity: 0.18;
  text-align: center;
  padding-top: 20%;
  animation: med-twinkle 4s ease-in-out infinite alternate;
}
.meditation-container { position: relative; }
@keyframes med-twinkle {
  from { opacity: 0.12; }
  to   { opacity: 0.32; }
}
.meditation-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  margin-bottom: 16px;
  letter-spacing: 0.15em;
}
.meditation-desc {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.8;
  margin-bottom: 20px;
}
.meditation-focus-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 0.1em;
}
.meditation-focus-ul {
  list-style: none;
  text-align: left;
  margin: 0 auto 30px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 100%;
}
.meditation-focus-ul li {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 12px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
}
.meditation-focus-ul li:last-child { margin-bottom: 0; }
.meditation-focus-ul li b { color: var(--gold); font-weight: normal; }
.meditation-focus-ul .num {
  font-family: var(--font-display);
  color: var(--gold);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
  background: rgba(201, 169, 97, 0.1);
}

/* ---------- 设置 ---------- */
.settings-section {
  margin: 0 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.settings-section .section-title {
  padding: 12px 16px;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.25em;
  font-family: var(--font-display);
  border-bottom: 1px solid var(--border);
}
.settings-row {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .label { font-size: 14px; color: var(--text); }
.settings-row .sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

/* 切换开关 */
.switch {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-soft);
  transition: transform 0.25s, background 0.25s;
}
.switch.on { background: var(--gold); border-color: var(--gold); }
.switch.on::after { transform: translateX(18px); background: var(--bg-deep); }

/* 主题选项 */
.theme-options { display: flex; gap: 8px; padding: 12px 16px; }
.theme-option {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
  background: var(--surface);
}
.theme-option.active {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--surface-strong);
}

/* ---------- 底部导航 ---------- */
.bottom-nav {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  padding: 8px 0 calc(8px + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, var(--bg-deep) 30%);
  position: relative;
}
.bottom-nav::before {
  content: '';
  position: absolute;
  left: 20%; right: 20%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  color: var(--text-mute);
  transition: color 0.2s;
}
.nav-item.active { color: var(--gold); }
.nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.nav-item span {
  font-size: 10px;
  letter-spacing: 0.15em;
  font-family: var(--font-display);
}

/* ---------- 弹层 / 抽屉 ---------- */
.sheet-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--viewport-bottom-fix));
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.sheet-backdrop.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed;
  bottom: calc(-1 * var(--viewport-bottom-fix));
  left: 0;
  right: 0;
  background: var(--bg-mid);
  border-top: 1px solid var(--border-strong);
  border-radius: 24px 24px 0 0;
  padding: 12px 0 calc(24px + var(--safe-bottom));
  z-index: 51;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.3,.1,.3,1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.sheet.show { transform: translateY(0); }
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-mute);
  opacity: 0.4;
  margin: 0 auto 8px;
}
.sheet-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.25em;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--border);
  margin: 0 16px;
}
.sheet-body { padding: 16px; overflow-y: auto; flex: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: calc(80px + var(--safe-bottom) - var(--viewport-bottom-fix));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: var(--surface-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  letter-spacing: 0.05em;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 抽牌过渡动画 ----------
 * 卡牌依次"飞"到位：透明度 + 模糊 + 内层 3D 倾斜回正，
 * 不动外层 .spread-card-slot 的 transform（因为它负责绝对定位）。
 */
@keyframes deal {
  0%   { opacity: 0; filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes deal-inner {
  0%   { transform: scale(0.4) rotate(-10deg); }
  100% { transform: scale(1)   rotate(0); }
}
.spread-card-slot.dealing {
  animation: deal 0.55s cubic-bezier(.25,.8,.3,1) backwards;
  animation-delay: var(--deal-delay, 0s);
}
.spread-card-slot.dealing .card {
  animation: deal-inner 0.55s cubic-bezier(.25,.8,.3,1) backwards;
  animation-delay: var(--deal-delay, 0s);
}

/* 等待翻牌时卡片缓慢"呼吸"（金色微光） */
.spread-card-slot:not(.flipped) .card-inner {
  animation: card-idle 5s ease-in-out infinite;
}
@keyframes card-idle {
  0%, 100% { box-shadow: var(--shadow-card); }
  50%      { box-shadow: 0 12px 28px rgba(201, 169, 97, 0.18), 0 0 0 1px rgba(201,169,97,0.32) inset; }
}

/* 翻牌动画：增加"中点"3D 抬升效果
   forwards 让动画保留终态（rotateY 180deg），就不需要再写一条同选择器的
   静态 transform 规则——避免与 animation 同时作用导致"翻两次"。 */
.card.flipped .card-inner {
  animation: flip-lift 0.75s cubic-bezier(.5,.05,.3,1) forwards;
}
@keyframes flip-lift {
  0%   { transform: rotateY(0)    translateY(0)   scale(1); box-shadow: var(--shadow-card); }
  40%  { transform: rotateY(85deg) translateY(-8px) scale(1.05); box-shadow: 0 22px 44px rgba(0,0,0,0.45), 0 0 24px rgba(201,169,97,0.35); }
  100% { transform: rotateY(180deg) translateY(0)   scale(1); box-shadow: var(--shadow-card); }
}

/* 点击未翻开卡片时的轻微下压反馈 */
.spread-card-slot:not(.flipped) .card:active .card-inner {
  transform: scale(0.95);
  transition: transform 0.12s ease-out;
}

/* ---------- 自由抽牌：手动翻牌区 ---------- */
.free-deal-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  gap: 12px;
  overflow: hidden;
}
.free-deal-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  align-content: start;
  padding-bottom: 12px;
  overflow-y: auto;
}
.free-deal-grid .card { aspect-ratio: 5/8; }

/* ---------- 滚动条隐藏 ---------- */
.view::-webkit-scrollbar,
.free-deal-grid::-webkit-scrollbar,
.sheet-body::-webkit-scrollbar { display: none; }
.view, .free-deal-grid, .sheet-body { scrollbar-width: none; }

/* ---------- 小屏与大屏适配 ---------- */
@media (max-height: 700px) {
  .view-header { padding: 16px 20px 12px; }
  .view-header h1 { font-size: 22px; }
  .spread-board { min-height: 320px; }
}

@media (min-width: 500px) {
  .app { max-width: 480px; margin: 0 auto; }
}