/* ═══════════ 配色变量（映射到全局 --color-*）═══════════ */
:root {
  --c-bg:        var(--color-page);
  --c-panel:     var(--color-panel);
  --c-border:    var(--color-border);
  --c-text:      var(--color-text);
  --c-text2:     var(--color-text-sec);
  --c-text3:     var(--color-text-muted);
  --c-accent:    var(--color-brand);
  --c-accent-hover: var(--color-subtle);
  --c-accent-dim: rgba(26,61,99,.04);
  --c-soft:      var(--color-fire);
  --c-green:     #4caf50;
  --c-card-a:    var(--color-brand);

  --c-card-star: rgba(179,207,229,.12);
  --c-card-texel: rgba(0,0,0,.02);
  --c-card-border: transparent;
  --c-btn-bg:    var(--color-btn-dark);
  --c-btn-text:  #fff;
  --c-btn-hover: var(--color-star);
  --c-nav-cn:    var(--color-text);
  --c-nav-en:    var(--color-text-sec);
  --c-nav-active: var(--color-brand);
  --c-subnav:    var(--color-text-muted);
  --c-subnav-hover: var(--color-text);
  --c-subnav-active: var(--color-brand);
  --c-subnav-sep: var(--color-border);
  --c-tab-bg:    var(--color-panel);
  --c-tab-hover: var(--color-brand);
  --c-shadow:    rgba(0,0,0,.04);
  --c-user-hover: var(--color-subtle);
  --c-read-card-bg: var(--color-subtle);
  --c-theme-tab-border: var(--color-border);
}

html[data-theme="dark"] {
  --c-accent-dim: rgba(184,148,216,.08);
  --c-card-star: rgba(184,148,216,.12);
  --c-card-texel: rgba(255,255,255,.02);
  --c-card-border: rgba(184,148,216,.15);
  --c-shadow: rgba(0,0,0,.25);
  --c-subnav-sep: var(--color-border);
}


/* ═══════════ 基础 ═══════════ */
* { margin:0; padding:0; box-sizing:border-box; font-family:"MiSans",sans-serif; font-weight:300; }
@font-face { font-family:"MiSans"; src:url('../../font/MiSans-Light.woff2') format('woff2'), url('../../font/MiSans-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"MiSans"; src:url('../../font/MiSans-Bold.woff2') format('woff2'), url('../../font/MiSans-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"ZhankuWenyi"; src:url('../../font/zhanku-wenyi.woff2') format('woff2'), url('../../font/zhanku-wenyi.ttf') format('truetype'); font-weight:normal; font-style:normal; font-display:swap; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes cardFlyIn { from{opacity:0;transform:translateY(-80px) scale(0.5) rotate(15deg)} to{opacity:1;transform:translateY(0) scale(1) rotate(0deg)} }

body { background:var(--c-bg); min-height:100vh; overflow-x:hidden; color:var(--c-text); }
.container { max-width:1600px; margin:0 auto; background:var(--c-bg); padding:0 8px; }

/* ═══════════ 顶部导航 ═══════════ */
.header { display:flex; align-items:center; gap:6px; min-height:46px; flex-wrap:nowrap; margin-bottom:4px; }
.logo { width:48px; height:48px; background:url('../../logo/logo.png') no-repeat center; background-size:contain; transition:transform .5s ease; flex-shrink:0; cursor:pointer; text-decoration:none; display:block; }
.nav { display:flex; flex-direction:row; align-items:center; gap:8px; height:46px; flex-shrink:0; }
.nav-item { display:flex; flex-direction:row; align-items:center; gap:4px; cursor:pointer; height:100%; transition:all .3s ease; position:relative; text-decoration:none; }
.nav-item::after { content:''; position:absolute; bottom:5px; left:50%; width:0; height:2px; background:var(--c-accent); transition:all .3s ease; transform:translateX(-50%); }
.nav-item:hover { transform:translateY(-2px); }
.nav-item:hover::after { width:80%; }
.nav-item .cn { color:var(--c-nav-cn); font-size:14px; font-weight:normal; font-family:"ZhankuWenyi",sans-serif; writing-mode:vertical-rl; letter-spacing:3px; line-height:1.2; }
.nav-item .en { font-size:6px; color:var(--c-nav-en); writing-mode:vertical-rl; font-family:"MiSans",sans-serif; letter-spacing:1px; line-height:1.2; }
.nav-item.active .cn { color:var(--c-nav-active); text-shadow:0 0 10px rgba(74,127,167,.15); }
.user-actions { display:flex; align-items:center; font-size:12px; margin-left:auto; flex-shrink:0; }
.user-actions span { cursor:pointer; padding:3px 8px; border-radius:4px; font-family:"MiSans",sans-serif; font-weight:400; transition:all .2s ease; color:var(--c-nav-cn); }
@media (hover: hover) { .user-actions span:hover { background:var(--c-user-hover); transform:translateY(-2px); } }

/* ═══════════ 次级导航 ═══════════ */
.chart-subnav { display: flex; align-items: center; flex-wrap: wrap; padding: 2px 0; margin-bottom: 12px; font-size: 12px; }
.chart-subnav a { color:var(--c-subnav); text-decoration:none; padding:2px 7px; border-radius:3px; transition:color .2s; white-space:nowrap; }
.chart-subnav a:first-child { padding-left:0; }
.chart-subnav a.active { color:var(--c-subnav-active); font-weight:bold; }
.chart-subnav a:hover { color:var(--c-subnav-hover); }
.chart-subnav .sep { color:var(--c-subnav-sep); font-size:11px; user-select:none; }

/* ═══════════ 右侧信息栏 ═══════════ */
.tarot-sidebar {
  flex:0 0 400px; width:400px;
  background:var(--c-panel);
  border:1px solid var(--color-border-warm);
  border-radius:10px;
  font-size:13px;
  animation:fadeInUp .6s ease .3s both;
  display:flex; flex-direction:column;
  box-shadow:0 2px 16px var(--c-shadow);
}
.tarot-sidebar-inner {
  padding:16px 20px 16px 16px;
  overflow-y:auto;
  flex:1 1 auto; min-height:100px;
}
.tarot-sidebar .sb-section { margin-bottom:14px; }
.tarot-sidebar .sb-section:last-child { margin-bottom:0; }
.tarot-sidebar .sb-title {
  font-size:18px; font-weight:700; color:var(--c-text);
  padding:6px 0; margin-bottom:8px;
}
.tarot-sidebar .sb-badge {
  font-size:11px; color:var(--c-text2); margin-left:4px;
  background:var(--c-bg); padding:2px 8px; border-radius:10px;
}
.tarot-sidebar .sb-label {
  font-size:11px; font-weight:700; color:var(--color-text-muted);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:6px;
  background:transparent; display:inline-block; padding:2px 0; border-radius:0;
  border-bottom:1px solid var(--color-border);
}
.tarot-sidebar p {
  font-size:13px; line-height:1.6; color:var(--c-text2);
  margin:0;
}
/* 牌位说明 */
.sb-pos-label { color:var(--color-brand); font-weight:700; font-size:12px; }
.sb-pos-ctx { font-size:11px; color:var(--c-text2); }
/* 解读区标题 */
.sb-section-title {
  font-size:12px; font-weight:700; color:var(--c-accent);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;
  background:var(--c-bg); display:inline-block; padding:3px 10px; border-radius:4px;
}
.sb-read-card {
  background:var(--c-read-card-bg); border-radius:6px;
  padding:10px; margin-top:8px;
  border-left:2px solid var(--c-accent);
}
.sb-read-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.sb-read-name { font-size:13px; color:var(--c-text); font-weight:700; }
.sb-read-pos { font-size:11px; color:var(--c-text2); }
.sb-read-text { font-size:12px; color:var(--c-text); line-height:1.5; margin-top:4px; white-space:pre-wrap; }
.sb-disclaimer { font-size:10px; color:var(--c-text2); margin-top:16px; line-height:1.4; }

/* ═══════════ 提示消息 ═══════════ */
.tarot-msg-error { padding:20px; color:var(--c-soft); text-align:center; }
.tarot-msg-empty { padding:20px; color:var(--c-text2); text-align:center; }

/* ═══════════ 牌阵布局 ═══════════ */
.tarot-wrap { max-width:1100px; margin:0 auto; padding:20px; position:relative; animation:fadeInUp .8s ease both; }
.tarot-header { text-align:center; margin-bottom:16px; }
.tarot-header h1 { font-family:"ZhankuWenyi",sans-serif; font-size:28px; color:var(--c-text); letter-spacing:8px; margin-bottom:6px; text-shadow:0 0 30px var(--c-shadow); }
.tarot-header p { font-size:13px; color:var(--c-text2); letter-spacing:2px; }
.sidebar-header-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 0 16px;
}
.tarot-sidebar .tarot-subtitle { font-size:9px; color:var(--c-text2); letter-spacing:1px; margin:0; }

.control-bar { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.spread-btn { padding:7px 18px; border:1px solid var(--c-border); background:var(--c-panel); color:var(--c-text2); border-radius:6px; cursor:pointer; font-size:13px; font-family:"MiSans",sans-serif; transition:all .3s ease; }
@media (hover: hover) { .spread-btn:hover { border-color:var(--c-accent); color:var(--c-accent); background:var(--c-accent-dim); } }
.spread-btn.active { border-color:var(--c-accent); color:#fff; background:var(--c-accent); font-weight:700; }

/* ═══════════ 牌阵选择器（左侧） ═══════════ */
.spread-selector { border-radius:10px; overflow:hidden; animation:fadeInUp .5s ease both; }
.tarot-body { display:flex; gap:8px; align-items:stretch; margin-left:-170px; margin-right:-170px; margin-top:-20px; position:relative; }
.tarot-left { flex:0 0 400px; min-width:300px; border:1px solid var(--color-border-warm); background:var(--c-panel); border-radius:10px; padding:12px; position:relative; box-shadow:0 2px 16px var(--c-shadow); }
.traditional-note { position:absolute; bottom:6px; right:10px; font-size:10px; color:var(--c-soft); }
.tarot-left .spread-selector { margin-bottom:0; }
.tarot-right { flex:0 0 auto; padding-right:0; }


/* ═══════════ 主题标签 ═══════════ */
.theme-tabs {
  display:flex; gap:0; flex-wrap:wrap; align-items:center;
}
.theme-tab {
  padding:4px 10px; cursor:pointer; font-size:13px; color:var(--c-text2);
  font-family:"MiSans",sans-serif;
  transition:all .25s ease; position:relative;
  border:1px solid var(--color-gold); border-radius:4px;
  margin:2px 1px; white-space:nowrap;
  background:var(--c-tab-bg);
}
@media (hover: hover) { .theme-tab:hover { color:var(--c-tab-hover); border-color:var(--c-tab-hover); } }
.theme-tab.active { color:#fff; background:var(--c-accent); border-color:var(--c-accent); }

/* ═══════════ 牌阵浏览器 ═══════════ */
.spread-browser { display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
.spread-card {
  flex:0 0 auto; padding:3px 8px; border-radius:4px; cursor:pointer;
  border:1px solid var(--color-border-warm);
  transition:all .25s ease; text-align:center;
  background:var(--c-tab-bg); font-size:12px;
}
@media (hover: hover) { .spread-card:hover { border-color:var(--c-accent); background:var(--c-accent-dim); } }
.spread-card.selected { border-color:var(--c-accent); background:var(--c-accent-hover); }
.spread-card.traditional { border-color:var(--color-border-warm); }
.spread-card .sc-name { font-size:12px; color:var(--c-text); font-family:"MiSans",sans-serif; font-weight:300; letter-spacing:0; margin-bottom:2px; }
.spread-card .sc-meta { font-size:10px; color:var(--c-text2); }
.spread-card.selected .sc-name { font-weight:700; }
.spread-card .sc-meta span { margin:0 3px; }
.spread-card.locked {
  opacity:0.45; cursor:not-allowed; filter:grayscale(0.6);
  border-style:dashed; border-color:var(--color-border);
}
@media (hover: hover) { .spread-card.locked:hover { border-color:var(--color-border); background:var(--c-tab-bg); } }
.spread-card.locked .sc-name { color:var(--color-text-muted); }
.sc-group-label { font-size:10px; color:var(--c-text2); padding:6px 4px 2px; width:100%; letter-spacing:1px; }
.sc-diff-easy { color:var(--c-green); }
.sc-diff-mid { color:var(--c-accent); }
.sc-diff-hard { color:var(--c-soft); }

/* ═══════════ 牌阵详情面板 ═══════════ */
.spread-detail {
  padding:12px 16px; border-top:1px solid var(--c-border);
  animation:fadeInUp .3s ease both;
}
.detail-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.detail-name { font-size:16px; color:var(--c-text); font-family:"ZhankuWenyi",sans-serif; letter-spacing:2px; }
.detail-badge { font-size:11px; padding:2px 8px; border-radius:10px; border:1px solid var(--c-accent); color:var(--c-accent); }
.detail-summary { font-size:13px; color:var(--c-text2); line-height:1.6; margin-bottom:10px; }
.detail-pros-cons { display:flex; gap:8px; margin-bottom:10px; }
.detail-pro,.detail-con { flex:1; }
.detail-pro span,.detail-con span,.detail-when span { font-size:11px; color:var(--c-text2); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:1px; }
.detail-pro span { color:var(--c-green); }
.detail-con span { color:var(--c-soft); }
.detail-pro p,.detail-con p,.detail-when p { font-size:12px; color:var(--c-text); line-height:1.5; }
.detail-when { margin-bottom:0; }
.selected-spread-label {
  font-size:13px; color:var(--c-accent); font-family:"ZhankuWenyi",sans-serif;
  letter-spacing:2px; padding:7px 18px;
  border:1px solid var(--c-accent);
  border-radius:6px; background:var(--c-accent-dim);
}


/* ═══════════ 按钮 ═══════════ */
.btn-tarot-reset { padding:3px 12px !important; background:var(--c-tab-bg) !important; border:1px solid var(--c-border) !important; border-radius:4px; color:var(--c-text) !important; font-size:13px !important; font-family:"MiSans",sans-serif; font-weight:400; cursor:pointer; margin-left:6px; }
@media (hover: hover) { .btn-tarot-reset:hover { background:var(--c-accent-dim) !important; border-color:var(--c-accent) !important; } }
.btn-tarot-shuffle, #btnShuffle { padding:3px 12px !important; background:var(--c-btn-bg) !important; border:none !important; border-radius:4px; color:var(--c-btn-text) !important; font-size:13px !important; font-family:"MiSans",sans-serif; font-weight:400; cursor:pointer; margin-left:6px; transition: background .3s ease, opacity .3s ease; }
@media (hover: hover) { .btn-tarot-shuffle:hover, #btnShuffle:hover { opacity:0.9; background:var(--c-btn-hover) !important; } }
.btn-tarot-shuffle:disabled, #btnShuffle:disabled { cursor:not-allowed; opacity: 1; background:var(--c-btn-bg) !important; }
@media (hover: hover) { .btn-tarot-shuffle:disabled:hover, #btnShuffle:disabled:hover { background:var(--c-btn-bg) !important; } }
#btnShuffle.dealing::after { content: ''; animation: dealDots 1.2s infinite; }
@keyframes dealDots { 0%,24% { content: ''; } 25%,49% { content: '.'; } 50%,74% { content: '..'; } 75%,100% { content: '...'; } }
.hint-bar { text-align:center; font-size:13px; color:var(--c-text2); margin-bottom:12px; letter-spacing:1px; min-height:24px; }

/* ═══════════ 卡牌网格 ═══════════ */
.card-grid { padding:4px 0; min-height:140px; margin-bottom:120px; }
.card-row { display:flex; justify-content:center; width:100%; }
.card-row .card-slot {
  flex:0 0 auto; width:75px; height:130px;
  margin-right:-35px; margin-bottom:-105px;
  cursor:pointer; position:relative; z-index:1;
  perspective:600px; transform:translateZ(0);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s, z-index .2s;
  border-radius:5px;
}
.card-row .card-inner { position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; border-radius:5px; }
.card-row .card-back,.card-row .card-front { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:5px; overflow:hidden; }
.card-row .card-back { background:url('../img/card-back.png') center/cover; border:1px solid var(--c-card-border); }
.card-row .card-front { background:var(--c-panel); transform:rotateY(180deg); border:1px solid var(--c-border); }
.card-row .card-front img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.card-row .card-front .card-label { position:absolute; top:0; left:0; right:0; padding:2px 4px; background:linear-gradient(rgba(29,40,70,.7),transparent); color:var(--c-btn-text); font-size:9px; text-align:center; font-family:"MiSans",sans-serif; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
.card-row .card-slot:not(.picking):hover { z-index:20; transform:translateY(-8px) scale(1.04); }
.card-row .card-slot:not(.picking):hover .card-back { border-color:var(--c-accent); box-shadow:0 8px 25px rgba(74,127,167,.2); }
.card-row .card-slot.picking { z-index:50; pointer-events:none; }

/* ═══════════ 牌阵待选框 ═══════════ */
.slot-wrapper { display:flex; flex-direction:column; align-items:center; }
.slot-label-below { font-size:11px; color:var(--c-text2); text-align:center; white-space:nowrap; margin-top:2px; }
.slot-label-below.current-label { color:var(--c-accent); font-weight:700; }
.spread-area { margin:16px 0 20px 40px; min-width:440px; height:700px; display:flex; align-items:center; justify-content:center; overflow:auto; }
.spread-slots { max-width:100%; max-height:100%; justify-content:center; align-items:flex-start; }

.spread-slot {
  width:75px; height:115px;
  border:1px solid var(--c-card-border);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:all .4s ease;
  background: url('../img/card-back.png') center/contain no-repeat;
  overflow:hidden;
}
.spread-slot::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 7px, var(--c-card-texel) 7px, var(--c-card-texel) 8px),
    repeating-linear-gradient(-45deg, transparent, transparent 7px, var(--c-card-texel) 7px, var(--c-card-texel) 8px);
  border-radius:8px; pointer-events:none;
}
.spread-slot::after {
  content:'\2726'; font-size:26px; color:var(--c-card-star);
  pointer-events:none;
}
.spread-slot .slot-icon { font-size:32px; color:var(--c-card-star); opacity:.5; pointer-events:none; }
.spread-slot.current { box-shadow:0 0 16px rgba(74,127,167,.2); animation:pulseGlow 2s ease-in-out infinite; border-color:var(--c-accent); }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 8px rgba(74,127,167,.1)} 50%{box-shadow:0 0 20px rgba(74,127,167,.25)} }

.spread-slot.filled { border:none; background:transparent; overflow:hidden; }
.spread-slot.filled::before { display:none; }
.spread-slot.filled::after { display:none; }
.spread-slot.filled .slot-icon { display:none; }
.spread-slot.filled img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; border-radius:6px; }
.spread-slot.filled img.reversed { transform:rotate(180deg); }

/* ═══════════ 飞行动画 ═══════════ */
.card-deck { margin-top:4px; margin-bottom:8px; width:75px; height:130px; cursor:pointer; z-index:100; transition:transform .35s ease, opacity .3s; position:relative; }
.card-deck:hover { transform:translateY(-4px); }
.deck-card {
  position:absolute; width:75px; height:130px; border-radius:5px;
  background:url('../img/card-back.png') center/cover;
  border:1px solid var(--c-card-border);
  pointer-events:none;
}
.deck-top { display:flex; align-items:center; justify-content:center; z-index:10; }
.deck-top .deck-back-mark { font-size:28px; color:var(--c-card-star); }
.deck-count { position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--c-text2); text-align:center; white-space:nowrap; }
@keyframes shuffleShake {
  0%{transform:translateX(0) rotate(0deg)} 10%{transform:translateX(-4px) rotate(-2deg)}
  20%{transform:translateX(4px) rotate(2deg)} 30%{transform:translateX(-3px) rotate(-1.5deg)}
  40%{transform:translateX(3px) rotate(1.5deg)} 50%{transform:translateX(-5px) rotate(-3deg)}
  60%{transform:translateX(5px) rotate(3deg)} 70%{transform:translateX(-3px) rotate(-1.5deg)}
  80%{transform:translateX(3px) rotate(1.5deg)} 90%{transform:translateX(-2px) rotate(-1deg)}
  100%{transform:translateX(0) rotate(0deg)}
}
.card-deck.shuffling { animation:shuffleShake .6s ease-in-out; }

.card-flyer {
  position:fixed; z-index:9999; border-radius:5px; overflow:hidden;
  pointer-events:none; transform:translateZ(0);
  transition:all .55s cubic-bezier(.34,1.2,.64,1);
}
.card-flyer .card-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.card-flyer .card-back,.card-flyer .card-front { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:5px; overflow:hidden; }
.card-flyer .card-back { background:url('../img/card-back.png') center/cover; border:1px solid var(--c-card-border); }
.card-flyer .card-front { background:var(--c-panel); transform:rotateY(180deg); }
.card-flyer .card-front img { width:100%; height:100%; object-fit:cover; display:block; }
.card-flyer .card-front img.reversed { transform:rotate(180deg); }
.card-flyer2 {
  position:fixed; z-index:9999; border-radius:3px;
  pointer-events:none;
  background:url('../img/card-back.png') center/cover;
  border:1px solid var(--c-card-border);
  animation:flyToDeck .45s ease-out forwards;
}
@keyframes flyToDeck {
  0% { transform:translate(0,0) scale(1); opacity:1; }
  100% { transform:translate(var(--tx),var(--ty)) scale(0.5); opacity:0; }
}

/* ═══════════ 计数器 & 解读区 ═══════════ */
.pick-counter { text-align:center; font-size:12px; color:var(--c-text2); margin-bottom:8px; }
.pick-counter span { color:var(--c-accent); font-weight:700; }

.reading-area { margin-top:20px; padding:20px 24px; background:var(--c-panel); border-radius:10px; border:1px solid var(--c-border); display:none; }
.reading-area.show { display:block; animation:fadeInUp .5s ease both; }
.reading-area h3 { font-size:16px; color:var(--c-text); margin-bottom:14px; font-family:"ZhankuWenyi",sans-serif; letter-spacing:2px; padding-bottom:10px; border-bottom:1px solid var(--c-border); }
.reading-area .card-detail { display:flex; gap:14px; align-items:flex-start; padding:6px 0; border-bottom:1px solid var(--c-border); }
.reading-area .card-detail:last-child { border-bottom:none; }
.reading-area .card-detail .mini-img { width:50px; height:85px; flex-shrink:0; overflow:hidden; border-radius:4px; border:1px solid var(--c-border); }
.reading-area .card-detail .mini-img img { width:100%; height:100%; object-fit:cover; }
.reading-area .card-detail .mini-text { flex:1; }
.reading-area .card-detail .mini-text .mini-title { font-size:14px; font-weight:700; color:var(--c-text); }
.reading-area .card-detail .mini-title .rev { color:var(--c-soft); }
.reading-area .card-detail .mini-text .mini-suit { font-size:11px; color:var(--c-accent); margin-top:2px; }
.reading-area .card-detail .mini-text .mini-meaning { font-size:12px; color:var(--c-text2); margin-top:4px; line-height:1.6; }

#btnAgain { display:none; margin:20px auto 0; padding:10px 32px; background:transparent; border:1px solid var(--c-accent); border-radius:6px; color:var(--c-accent); font-size:14px; font-family:"MiSans",sans-serif; cursor:pointer; transition:all .3s ease; letter-spacing:2px; }
@media (hover: hover) { #btnAgain:hover { background:var(--c-accent-hover); } }

/* ═══════════ 底部 ═══════════ */
.beian { position:fixed; bottom:8px; right:16px; font-size:12px; z-index:9999; }
.beian a { color:var(--c-text2); text-decoration:none; }

.hidden { display: none; }
.sb-label-adv { color: var(--color-star); }
.sb-label-disadv { color: var(--color-star-aux); }
.tarot-topic-bar { text-align: center; margin-bottom: 6px; }
.tarot-topic-inp { width: 80%; max-width: 340px; padding: 4px 10px; font-size: 13px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-subtle); color: var(--color-text); font-family: "MiSans", sans-serif; outline: none; }
.tarot-topic-inp:focus { border-color: var(--color-brand); }
.tarot-btn-bar { text-align: center; margin-bottom: 8px; }
.pick-counter { display: none; }

/* 牌阵 grid（JS 设 --grid-cols/--grid-rows/--spread-scale） */
.spread-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), 80px); grid-template-rows: repeat(var(--grid-rows, 2), 120px); gap: 16px 6px; padding: 4px 0; justify-content: center; transform: scale(var(--spread-scale, 1)); transform-origin: center top; }

/* slot 格位（JS 设 --gcol/--grow/--gjustify） */
.slot-wrapper { grid-column: var(--gcol, auto); grid-row: var(--grow, auto); justify-self: var(--gjustify, center); }
.spread-slots { position:relative; }

/* ── VIP 按钮（牌阵选择器内）── */
.tarot-vip-btn { margin-left: auto; flex-shrink: 0; }

/* ── VIP 弹窗已统一到 common.css ── */

/* ── 塔罗专属 VIP 扩展 ── */
.vip-free { color: var(--c-green); }
.vip-item--combo { background: var(--color-subtle); border-radius: 8px; padding: 14px; margin: 4px -14px; border: 1px dashed var(--color-gold); }
.vip-price--highlight { color: var(--color-gold); font-size: 20px; }
.vip-buy-btn--gold { background: linear-gradient(135deg, var(--color-gold), #b8860b); color: #fff; }
.vip-buy-btn--gold:hover { background: linear-gradient(135deg, #b8860b, #8B6914); color: #fff; }

/* ── 支付宝扫码支付弹窗 ── */
.qr-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.55); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.qr-modal {
  background: var(--c-panel); border-radius: 12px; padding: 24px 32px;
  max-width: 360px; width: 90%; box-shadow: 0 8px 40px rgba(0,0,0,.25);
}