/* ============================================================
   塔罗应用样式 · 重构 v2
   设计语言：占星夜空（Astro Night）
   - 主色：金（神秘智慧）
   - 辅色：靛青（洞察）/ 紫罗兰（灵性）/ 玫瑰（情感）/ 薄荷（清明）/ 琥珀（警觉）
   - 节奏：8px 基准；section 间距 32px；内 padding 24-32px
   - 桌面端 reading page：双栏（牌阵 sticky + 解读滚动）
============================================================ */

/* ===== 设计 token（塔罗专属，不污染全局） ===== */
:root {
    --tarot-indigo: #818cf8;
    --tarot-violet: #c4b5fd;
    --tarot-rose:   #f9a8d4;
    --tarot-mint:   #6ee7b7;
    --tarot-amber:  #fcd34d;

    --tarot-text:       #f1ead6;
    --tarot-text-soft:  rgba(241, 234, 214, 0.78);
    --tarot-text-dim:   rgba(241, 234, 214, 0.48);
    --tarot-text-faint: rgba(241, 234, 214, 0.24);

    --tarot-bg-l1: rgba(30, 22, 60, 0.42);
    --tarot-bg-l2: rgba(18, 13, 42, 0.58);
    --tarot-bg-l3: rgba(8, 6, 24, 0.85);

    --tarot-border:       rgba(212, 175, 55, 0.14);
    --tarot-border-mid:   rgba(212, 175, 55, 0.30);
    --tarot-border-strong:rgba(212, 175, 55, 0.55);

    --tarot-r-sm: 8px;
    --tarot-r-md: 14px;
    --tarot-r-lg: 22px;

    --tarot-shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --tarot-shadow-glow: 0 0 32px rgba(212, 175, 55, 0.25);
    --tarot-shadow-violet: 0 0 32px rgba(167, 139, 250, 0.25);

    --tarot-ease:        cubic-bezier(.22, .61, .36, 1);
    --tarot-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --tarot-font-serif: 'Noto Serif SC', 'STSong', serif;
}

/* 空牌槽：占位形态、当前态、占位序号 */
.tarot-slot-empty {
    position: absolute;
    width: var(--board-card-w, 92px);
    height: var(--board-card-h, 130px);
    transform: translate(-50%, -50%);
    border-radius: var(--tarot-r-sm);
    border: 1.5px dashed rgba(212, 175, 55, 0.25);
    background:
        radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.05) 0%, transparent 70%),
        rgba(8, 6, 24, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s var(--tarot-ease);
    pointer-events: none;
}
.tarot-slot-empty-glyph {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.25);
    color: var(--tarot-text-faint);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    transition: all .3s;
}
.tarot-slot-empty .position-label {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--tarot-text-faint);
    font-size: 10px;
    letter-spacing: 1.5px;
    white-space: nowrap;
    pointer-events: none;
    transition: color .3s;
}
.tarot-spread-board.empty .tarot-slot-empty {
    /* 在抽牌页 board 内的 rotate 容器没有，所以保留居中变换 */
}
[data-rotate="90"].tarot-slot-empty { transform: translate(-50%, -50%) rotate(90deg); }
[data-rotate="-90"].tarot-slot-empty { transform: translate(-50%, -50%) rotate(-90deg); }

/* ============ 侧栏 ============ */
#tarotSidebar {
    width: 280px;
    background:
        radial-gradient(ellipse at top, rgba(167, 139, 250, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(8, 6, 20, 0.98) 0%, rgba(15, 10, 35, 0.98) 100%);
    border-right: 1px solid var(--tarot-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.tarot-sidebar-header {
    padding: 24px 18px 18px;
    border-bottom: 1px solid var(--tarot-border);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tarot-sidebar-header-text { min-width: 0; }
.tarot-sidebar-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 22px;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.tarot-sidebar-header h3 {
    color: var(--gold);
    font-size: 20px;
    letter-spacing: 6px;
    margin: 0 0 4px;
    font-weight: 400;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.3);
    text-indent: 6px;
}
.tarot-sidebar-header .subtitle {
    color: var(--tarot-text-faint);
    font-size: 10px;
    letter-spacing: 4px;
    font-weight: 300;
}
.tarot-new-btn {
    margin: 20px 18px 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(167, 139, 250, 0.1) 100%);
    border: 1px solid var(--tarot-border-mid);
    color: var(--gold);
    border-radius: var(--tarot-r-md);
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    transition: all .25s;
    position: relative;
    overflow: hidden;
    text-indent: 3px;
}
.tarot-new-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.18) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform .6s;
}
.tarot-new-btn:hover {
    border-color: var(--tarot-border-strong);
    box-shadow: var(--tarot-shadow-glow);
    color: var(--gold-light);
}
.tarot-new-btn:hover::before {
    transform: translateX(100%);
}
.tarot-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px 20px;
}
.tarot-history-item {
    padding: 12px 14px 12px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: var(--tarot-r-md);
    cursor: pointer;
    transition: all .2s;
    position: relative;
}
.tarot-history-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    color: var(--tarot-text-dim);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: all .2s;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tarot-history-item:hover .tarot-history-delete { opacity: 1; }
.tarot-history-delete:hover {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}
.tarot-history-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--gold), var(--tarot-violet));
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    transition: height .25s;
}
.tarot-history-item:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.18);
}
.tarot-history-item:hover::before { height: 60%; }
.tarot-history-item.active {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
}
.tarot-history-item.active::before { height: 70%; }
.tarot-history-spread {
    color: var(--gold);
    font-size: 13px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
}
.tarot-history-spread i {
    color: var(--tarot-violet);
    font-size: 11px;
}
.tarot-history-question {
    color: var(--tarot-text-soft);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.6;
}
.tarot-history-date {
    color: var(--tarot-text-faint);
    font-size: 10px;
    margin-top: 4px;
    letter-spacing: 0.5px;
}
.tarot-history-meta {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.tarot-history-meta .tarot-history-date { margin-top: 0; }
.tarot-history-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    white-space: nowrap;
}
.tarot-history-badge.interpreted {
    background: rgba(110, 231, 183, 0.12);
    color: var(--tarot-mint);
    border: 1px solid rgba(110, 231, 183, 0.3);
}
.tarot-history-badge.interpreted i { font-size: 8px; }
.tarot-history-badge.pending {
    background: rgba(212, 175, 55, 0.08);
    color: var(--tarot-text-soft);
    border: 1px dashed rgba(212, 175, 55, 0.3);
}

/* 解读未开始时的提问入口 */
.tarot-interpret-prompt {
    text-align: center;
    padding: 36px 8px 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.tarot-interpret-prompt-title {
    color: var(--gold);
    font-size: 14px;
    letter-spacing: 4px;
    text-indent: 4px;
    margin-bottom: 4px;
    font-weight: 400;
    text-align: center;
}
.tarot-interpret-prompt-title::before,
.tarot-interpret-prompt-title::after {
    content: '✦';
    color: var(--tarot-violet);
    margin: 0 10px;
    font-size: 11px;
    opacity: 0.7;
}
.tarot-interpret-prompt-tip {
    color: var(--tarot-text-soft);
    font-size: 12px;
    line-height: 1.85;
    letter-spacing: 1px;
    font-family: var(--tarot-font-serif);
    font-style: italic;
    text-align: center;
}
.tarot-interpret-prompt-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--tarot-border);
    border-radius: var(--tarot-r-md);
    padding: 12px 14px;
    color: var(--tarot-text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.8;
    resize: vertical;
    min-height: 72px;
    transition: all .25s var(--tarot-ease);
}
.tarot-interpret-prompt-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.tarot-interpret-prompt-input::placeholder { color: var(--tarot-text-faint); font-style: italic; }
.tarot-interpret-prompt-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}
.tarot-interpret-prompt-btn {
    padding: 12px 36px;
    background: linear-gradient(135deg, var(--gold) 0%, #b8941f 100%);
    color: #1a1410;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 4px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    text-indent: 4px;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3), 0 1px 0 rgba(255,255,255,0.18) inset;
    transition: all .25s var(--tarot-ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tarot-interpret-prompt-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.45);
}
.tarot-interpret-prompt-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.tarot-history-empty {
    text-align: center;
    color: var(--tarot-text-faint);
    font-size: 13px;
    padding: 60px 20px;
    line-height: 2;
    letter-spacing: 1px;
}

/* ============ 欢迎页 ============ */
.tarot-welcome {
    max-width: 720px;
    margin: 0 auto;
    padding: 96px 24px 80px;
    text-align: center;
    position: relative;
    isolation: isolate;
}
.tarot-welcome::before {
    content: '';
    position: absolute;
    inset: -120px -260px -80px;
    background:
        radial-gradient(ellipse at 50% 24%, rgba(167, 139, 250, 0.12) 0%, rgba(167, 139, 250, 0.05) 26%, transparent 62%),
        radial-gradient(ellipse at 50% 74%, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.03) 28%, transparent 66%);
    pointer-events: none;
    filter: blur(24px);
    opacity: 0.8;
    z-index: -1;
}
.tarot-welcome-logo-wrap {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 180px;
    margin-bottom: 18px;
}
.tarot-welcome-logo-wrap::before,
.tarot-welcome-logo-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.18);
    pointer-events: none;
}
.tarot-welcome-logo-wrap::before {
    inset: 6px;
    border-style: dashed;
    border-color: rgba(212, 175, 55, 0.22);
    animation: tarot-orbit 28s linear infinite;
}
.tarot-welcome-logo-wrap::after {
    inset: 22px;
    border-color: rgba(167, 139, 250, 0.22);
    animation: tarot-orbit-rev 38s linear infinite;
}
.tarot-welcome-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    color: var(--gold);
    text-shadow:
        0 0 30px rgba(212, 175, 55, 0.5),
        0 0 60px rgba(167, 139, 250, 0.3);
    animation: tarot-float 5.5s ease-in-out infinite;
}
.tarot-welcome-logo::before,
.tarot-welcome-logo::after {
    content: '✦';
    position: absolute;
    color: var(--tarot-violet);
    font-size: 14px;
    opacity: 0.7;
    animation: tarot-twinkle 3s ease-in-out infinite;
}
.tarot-welcome-logo::before { top: 4px; left: 50%; transform: translateX(-50%); }
.tarot-welcome-logo::after  { bottom: 4px; left: 50%; transform: translateX(-50%); animation-delay: 1.5s; }
@keyframes tarot-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes tarot-orbit-rev {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}
@keyframes tarot-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes tarot-twinkle {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.95; }
}
.tarot-welcome h1 {
    color: var(--gold);
    font-size: 36px;
    letter-spacing: 14px;
    margin: 12px 0 0;
    font-weight: 300;
    text-shadow: 0 0 24px rgba(212, 175, 55, 0.3);
    text-indent: 14px;
    position: relative;
}
.tarot-welcome h1::after {
    content: '';
    display: block;
    width: 72px;
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.tarot-welcome p {
    color: var(--tarot-text-soft);
    font-size: 14px;
    line-height: 2.2;
    letter-spacing: 2px;
    margin: 18px 0 44px;
    font-family: var(--tarot-font-serif);
}
.tarot-welcome-btn {
    padding: 16px 52px;
    background: linear-gradient(135deg, var(--gold) 0%, #b8941f 100%);
    color: #1a1410;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    letter-spacing: 5px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    box-shadow:
        0 6px 24px rgba(212, 175, 55, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset;
    transition: all .3s var(--tarot-ease);
    text-indent: 5px;
    position: relative;
    overflow: hidden;
}
.tarot-welcome-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform .9s ease;
}
.tarot-welcome-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 36px rgba(212, 175, 55, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.tarot-welcome-btn:hover::after { transform: translateX(100%); }
.tarot-welcome-btn:active { transform: translateY(0); }
.tarot-welcome-extras {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.tarot-welcome-extras a {
    color: var(--tarot-text-soft);
    font-size: 12px;
    letter-spacing: 2px;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--tarot-border);
    background: rgba(255, 255, 255, 0.02);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .25s;
}
.tarot-welcome-extras a:hover {
    color: var(--gold);
    border-color: var(--tarot-border-mid);
    background: rgba(212, 175, 55, 0.06);
}

/* ============ 页面通用：标题栏 ============ */
.tarot-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--tarot-border);
    position: relative;
}
.tarot-page-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.8;
}
.tarot-page-header h2 {
    color: var(--gold);
    font-size: 22px;
    letter-spacing: 8px;
    margin: 0;
    font-weight: 400;
    text-indent: 8px;
    text-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
}
.tarot-back-btn {
    background: transparent;
    border: 1px solid var(--tarot-border-mid);
    color: var(--gold);
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 2px;
    transition: all .25s var(--tarot-ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tarot-back-btn:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: var(--tarot-border-strong);
    transform: translateX(-2px);
}
.tarot-back-btn:active { transform: translateX(0); }

/* ============ 牌阵选择页 ============ */
.tarot-spread-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
    box-sizing: border-box;
}
.tarot-spreads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.tarot-spread-card {
    background:
        linear-gradient(160deg, rgba(30, 22, 60, 0.55) 0%, rgba(15, 10, 35, 0.7) 100%);
    border: 1px solid var(--tarot-border);
    border-radius: var(--tarot-r-md);
    padding: 28px 24px 24px;
    cursor: pointer;
    transition: transform .35s var(--tarot-ease), border-color .25s, box-shadow .35s;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tarot-spread-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.5;
    transition: opacity .3s, left .35s, right .35s;
}
.tarot-spread-card::after {
    content: '';
    position: absolute;
    top: -60%;
    right: -40%;
    width: 90%;
    height: 220%;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.22) 0%, transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s;
}
.tarot-spread-card:hover {
    border-color: var(--tarot-border-strong);
    transform: translateY(-6px);
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(212, 175, 55, 0.12),
        var(--tarot-shadow-glow);
}
.tarot-spread-card:hover::before { left: 6%; right: 6%; opacity: 0.9; }
.tarot-spread-card:hover::after { opacity: 1; }
.tarot-spread-card:hover .tarot-spread-icon {
    transform: scale(1.08) rotate(-4deg);
    text-shadow: 0 0 28px rgba(212, 175, 55, 0.75);
}
.tarot-spread-card:hover .tarot-spread-name { letter-spacing: 4px; }
.tarot-spread-icon {
    font-size: 38px;
    color: var(--gold);
    margin-bottom: 16px;
    transition: all .35s var(--tarot-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
}
.tarot-spread-name {
    color: var(--gold);
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 8px;
    font-weight: 500;
    transition: letter-spacing .3s;
}
.tarot-spread-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tarot-violet);
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 14px;
    padding: 3px 12px;
    border: 1px solid rgba(167, 139, 250, 0.32);
    border-radius: 999px;
    background: rgba(167, 139, 250, 0.06);
}
.tarot-spread-count::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tarot-violet);
    box-shadow: 0 0 6px var(--tarot-violet);
}
.tarot-spread-desc {
    color: var(--tarot-text-soft);
    font-size: 13px;
    line-height: 1.95;
    font-family: var(--tarot-font-serif);
}

/* ============ 抽牌页 ============ */
.tarot-draw-page {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    text-align: center;
    box-sizing: border-box;
    overflow-x: hidden;
}
.tarot-question-box {
    background:
        linear-gradient(180deg, rgba(30, 22, 60, 0.45) 0%, rgba(15, 10, 35, 0.55) 100%);
    border: 1px solid var(--tarot-border);
    border-radius: var(--tarot-r-lg);
    padding: 22px 24px 20px;
    margin-bottom: 28px;
    text-align: left;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tarot-question-box::before {
    content: '✦';
    position: absolute;
    top: 16px;
    right: 18px;
    color: rgba(212, 175, 55, 0.35);
    font-size: 14px;
    pointer-events: none;
}
.tarot-question-box label {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 500;
    text-indent: 5px;
}
.tarot-question-box label::before {
    content: '';
    width: 14px;
    height: 1px;
    background: var(--gold);
    opacity: 0.6;
}
.tarot-question-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--tarot-border);
    border-radius: var(--tarot-r-md);
    padding: 14px 16px;
    color: var(--tarot-text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.85;
    resize: vertical;
    min-height: 76px;
    transition: all .25s var(--tarot-ease);
}
.tarot-question-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(0, 0, 0, 0.4);
    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.12),
        0 0 24px rgba(212, 175, 55, 0.1) inset;
}
.tarot-question-input::placeholder { color: var(--tarot-text-faint); font-style: italic; }
.tarot-question-hint {
    color: var(--tarot-text-dim);
    font-size: 12px;
    margin-top: 10px;
    letter-spacing: 1.5px;
    font-style: italic;
    line-height: 1.7;
}

/* 抽牌区域容器 */
.tarot-deck-area {
    position: relative;
    min-height: 80px;
    padding: 8px 0;
}
.tarot-shuffle-hint {
    color: var(--gold);
    margin: 18px auto 14px;
    font-size: 13px;
    letter-spacing: 5px;
    text-indent: 5px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 22px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.15);
    text-align: center;
    transition: opacity .3s, transform .3s;
}
.tarot-shuffle-hint::before,
.tarot-shuffle-hint::after {
    content: '';
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
    opacity: 0.7;
}
.tarot-shuffle-hint::after {
    background: linear-gradient(90deg, var(--gold), transparent);
}
.tarot-shuffle-hint-wrap {
    text-align: center;
    margin: 18px 0 14px;
    animation: tarot-hint-fade .4s var(--tarot-ease);
}
@keyframes tarot-hint-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 进度条 */
.tarot-flip-progress {
    max-width: 480px;
    margin: 4px auto 16px;
    padding: 0 16px;
}
.tarot-flip-progress-text {
    text-align: center;
    color: var(--tarot-text-soft);
    font-size: 11px;
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-indent: 4px;
    font-weight: 400;
}
.tarot-flip-progress-text span {
    font-weight: 600;
    color: var(--gold-light);
    font-size: 13px;
    letter-spacing: 1px;
}
.tarot-flip-progress-bar {
    height: 3px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.tarot-flip-progress-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent 24px, rgba(212, 175, 55, 0.08) 24px, rgba(212, 175, 55, 0.08) 25px);
    pointer-events: none;
}
.tarot-flip-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--tarot-violet) 100%);
    border-radius: 2px;
    width: 0;
    transition: width .55s var(--tarot-ease);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
    position: relative;
}
.tarot-flip-progress-fill::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 8px var(--gold), 0 0 16px rgba(212, 175, 55, 0.6);
}

/* 抽牌完成的牌位 */
.tarot-drawn-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}
.tarot-spread-board-wrap {
    width: 100%;
    margin-bottom: 12px;
}

/* === 抽牌页：顶部牌阵占位 === */
.tarot-draw-board-section {
    margin-bottom: 10px;
}
.tarot-draw-board-section .tarot-spread-board-wrap {
    overflow: visible;
    padding: 52px 0 72px;
    margin-bottom: 0;
}
.tarot-draw-board-section .tarot-spread-board {
    margin: 0 auto;
}
/* 当前待抽位置的高亮 */
.tarot-slot-empty.current {
    border-color: rgba(212, 175, 55, 0.55);
    background:
        radial-gradient(ellipse at 50% 40%, rgba(212, 175, 55, 0.18) 0%, transparent 70%),
        rgba(20, 14, 45, 0.45);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18), 0 8px 28px rgba(212, 175, 55, 0.18);
    animation: tarot-slot-pulse 2.2s ease-in-out infinite;
}
.tarot-slot-empty.current .tarot-slot-empty-glyph {
    color: #1a1410;
    background: linear-gradient(135deg, var(--gold) 0%, #c89e2c 100%);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.tarot-slot-empty.current .position-label {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}
@keyframes tarot-slot-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18), 0 0 0 rgba(212,175,55,0); }
    50%      { box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.4), 0 0 26px rgba(212,175,55,0.3); }
}

/* === 抽牌页：底部 78 张可选牌（散开扇形 · 可横向滑动） ===
   性能策略：
   1. 容器 overflow-x:auto + scroll-snap，超出宽度时左右滑动浏览
   2. 扇形通过 inner 包裹层 + 拉长虚拟枢轴(--pivot)实现"宽缓弧线"，相邻牌有空隙
   3. 牌位禁用 perspective/3D（选牌时卡背朝上，无需翻转空间），避免 78 个独立合成层
   4. 入场动画只 fade，不搞 scale；hover 不再叠双 drop-shadow
   5. 卡背单层渐变（覆写本节内卡背伪元素），减少栅格化成本 */
.tarot-pick-deck {
    --pick-card-w: 70px;
    --pick-card-h: 105px;
    --pick-fan-h: 260px;
    --pick-inner-w: 1700px;       /* JS 根据弧形参数算出真实宽度并覆盖 */
    /* 让 deck 突破父容器 padding，占满整页宽度 */
    width: calc(100% + 48px);
    margin: 16px -24px 8px;
    box-sizing: border-box;
    padding: 0;
    background:
        radial-gradient(ellipse at 50% 82%, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.06) 30%, transparent 64%);
    border: none;
    border-radius: 0;
    height: var(--pick-fan-h);
    max-height: 44vh;
    position: relative;
    isolation: isolate;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.tarot-pick-deck::-webkit-scrollbar { display: none; }
.tarot-pick-deck-inner {
    position: relative;
    width: var(--pick-inner-w);
    height: 100%;
    margin: 0 auto;
}
.tarot-pick-card {
    position: absolute;
    bottom: 28px;
    left: 50%;
    width: var(--pick-card-w);
    height: var(--pick-card-h);
    cursor: pointer;
    transform-origin: 50% 100%;
    transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-1 * var(--dy, 0px)), 0) rotate(var(--rot, 0deg));
    transition: transform .22s var(--tarot-ease), opacity .25s;
    animation: tarot-pick-enter .42s var(--tarot-ease) backwards;
    animation-delay: calc(var(--enter-i, 0) * 6ms);
    z-index: var(--z, 1);
    will-change: transform;
}
@keyframes tarot-pick-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.tarot-pick-card:hover:not(.picked) {
    z-index: 200;
    transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-1 * var(--dy, 0px) - 16px), 0) rotate(var(--rot, 0deg)) scale(1.18);
}
.tarot-pick-card .tarot-card-slot {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform .22s var(--tarot-ease-spring);
    perspective: none;
    animation: none !important;
    filter: none;
}
.tarot-pick-card .tarot-card-slot.flipped {
    perspective: 1000px;
    transform: scale(1.06);
    z-index: 10;
}
.tarot-pick-card.picked {
    opacity: 0.18;
    pointer-events: none;
}
.tarot-pick-card.picked .tarot-card-slot {
    transform: scale(0.86);
}
.tarot-pick-card .tarot-card-slot .position-label { display: none; }
.tarot-pick-card .tarot-card-slot:not(.flipped) {
    animation: none !important;
    filter: none !important;
}
.tarot-pick-card .tarot-card-slot:not(.flipped):hover::after { display: none !important; }
.tarot-pick-card .tarot-card-back {
    background:
        linear-gradient(135deg, #1a0d2e 0%, #2d1b4e 50%, #1a0d2e 100%);
    border: 1.5px solid var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tarot-pick-card .tarot-card-back::before,
.tarot-pick-card .tarot-card-back::after { display: none; }
.tarot-pick-card .tarot-card-back-pattern {
    font-size: 28px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
    transition: none;
}

/* 牌阵占位被填入新牌时的入场动画 */
.tarot-card-slot.dealt-just-now {
    animation: tarot-deal-in 0.28s var(--tarot-ease) backwards;
}
.tarot-spread-name-line {
    text-align: center;
    color: var(--gold);
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 4px;
}
.tarot-spread-name-line i {
    margin-right: 6px;
    color: var(--tarot-violet);
}
.tarot-draw-complete {
    margin-top: 36px;
    text-align: center;
    animation: tarot-fade-up .5s var(--tarot-ease) backwards;
}
@keyframes tarot-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tarot-interpret-btn {
    padding: 16px 48px;
    background: linear-gradient(135deg, var(--gold) 0%, #b8941f 100%);
    color: #1a1410;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: 5px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    box-shadow:
        0 6px 22px rgba(212, 175, 55, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;
    transition: all .25s var(--tarot-ease);
    text-indent: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.tarot-interpret-btn i { font-size: 13px; }
.tarot-interpret-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
    transform: translateX(-100%);
    transition: transform .9s ease;
}
.tarot-interpret-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    background: rgba(212, 175, 55, 0.4);
    color: rgba(26, 20, 16, 0.6);
}
.tarot-interpret-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(212, 175, 55, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.tarot-interpret-btn:not(:disabled):hover::after { transform: translateX(100%); }
.tarot-interpret-btn:not(:disabled):active { transform: translateY(0); }

/* ============ 卡牌（3D 翻转 · 升级版） ============ */
.tarot-card-slot {
    width: 120px;
    height: 180px;
    perspective: 1200px;
    cursor: pointer;
    position: relative;
}
.tarot-card-slot .position-label {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.tarot-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .7s cubic-bezier(.4,.2,.2,1);
    transform-style: preserve-3d;
}
.tarot-card-slot.flipped .tarot-card-inner {
    transform: rotateY(180deg);
}
.tarot-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--tarot-r-sm);
    overflow: hidden;
}

/* 卡背：深紫蓝底 + SVG 神秘几何 */
.tarot-card-back {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(167, 139, 250, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, #1a0d2e 0%, #2d1b4e 50%, #1a0d2e 100%);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(212, 175, 55, 0.15),
        inset 0 0 18px rgba(0, 0, 0, 0.4);
    position: absolute;
}
.tarot-card-back::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    pointer-events: none;
}
.tarot-card-back::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 3px;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.15) 0%, transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(167, 139, 250, 0.15) 0%, transparent 25%),
        repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(212, 175, 55, 0.04) 6px, rgba(212, 175, 55, 0.04) 7px);
    pointer-events: none;
    opacity: 0.7;
}
.tarot-card-back-pattern {
    font-size: 38px;
    color: var(--gold);
    opacity: 0.85;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.55);
    position: relative;
    z-index: 1;
    transition: transform .4s var(--tarot-ease);
}
.tarot-card-slot:not(.flipped):hover .tarot-card-back-pattern {
    transform: scale(1.1);
}

/* 卡面：米白底 + 双层装饰边 */
.tarot-card-front {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, #f8f4e8 0%, #efe5cd 100%);
    border: 2px solid var(--gold);
    display: flex;
    flex-direction: column;
    box-shadow:
        0 4px 18px rgba(212, 175, 55, 0.32),
        inset 0 0 0 1px rgba(212, 175, 55, 0.25);
}
.tarot-card-front.reversed {
    transform: rotateY(180deg) rotate(180deg);
}
.tarot-card-front img {
    width: 100%;
    flex: 1;
    object-fit: cover;
    background: #d4c5a0;
}
.tarot-card-front .card-fallback {
    width: 100%;
    flex: 1;
    background:
        radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
        linear-gradient(135deg, #f8f4e8, #d4c5a0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: relative;
}
.tarot-card-front .card-fallback::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(90, 58, 26, 0.2);
    border-radius: 3px;
    pointer-events: none;
}
.tarot-card-front .card-fallback-symbol {
    font-size: 32px;
    color: #5a3a1a;
    filter: drop-shadow(0 1px 2px rgba(90, 58, 26, 0.2));
}
.tarot-card-front .card-fallback-name {
    color: #5a3a1a;
    font-size: 12px;
    margin-top: 6px;
    text-align: center;
    letter-spacing: 1px;
    font-family: var(--tarot-font-serif);
}
.tarot-card-front .card-name-bar {
    background: linear-gradient(180deg, var(--gold) 0%, #b8941f 100%);
    color: #1a1410;
    padding: 5px 6px;
    font-size: 11px;
    text-align: center;
    letter-spacing: 1.5px;
    font-weight: 600;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    font-family: var(--tarot-font-serif);
}
.tarot-card-front .card-name-bar.reversed-mark {
    background: linear-gradient(180deg, #a04545 0%, #6e2c2c 100%);
    color: #fff5e8;
}

/* 翻牌提示气泡 + beckon 动画 */
.tarot-card-slot:not(.flipped):hover::after {
    content: '点击翻开';
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--gold), #b8941f);
    color: #1a1410;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.5);
    font-weight: 600;
    text-indent: 2px;
    animation: tarot-tooltip-in .25s var(--tarot-ease-spring);
}
@keyframes tarot-tooltip-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tarot-card-slot:not(.flipped) {
    animation: tarot-card-beckon 2.6s ease-in-out infinite;
    animation-delay: calc(var(--deal-idx, 0) * 120ms);
}
@keyframes tarot-card-beckon {
    0%, 100% { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)); }
    50%      { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); }
}
.tarot-card-slot:not(.flipped):hover {
    animation: none;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(212, 175, 55, 0.7));
}
.tarot-card-slot.flipped {
    animation: none;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4));
}

/* ============ 牌阵布局板 ============ */
.tarot-spread-board {
    position: relative;
    width: 100%;
    margin: 24px auto 8px;
    aspect-ratio: 5 / 4;
    max-width: 720px;
    --board-card-w: 92px;
    --board-card-h: 130px;
}
.tarot-spread-board::before {
    content: '';
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    border: 1px dashed rgba(212, 175, 55, 0.12);
    background:
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.04) 0%, transparent 70%);
    pointer-events: none;
}
.tarot-spread-board::after {
    content: '';
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px dotted rgba(212, 175, 55, 0.06);
    pointer-events: none;
}
.tarot-spread-board .tarot-card-slot {
    position: absolute;
    width: var(--board-card-w);
    height: var(--board-card-h);
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 1;
}
.tarot-spread-board > .tarot-slot-empty,
.tarot-spread-board > .tarot-card-slot {
    transform: translate(-50%, -50%) !important;
}
.tarot-spread-board > .tarot-slot-empty[data-rotate="90"] {
    transform: translate(-50%, -50%) rotate(90deg) !important;
}
.tarot-spread-board > .tarot-slot-empty[data-rotate="-90"] {
    transform: translate(-50%, -50%) rotate(-90deg) !important;
}
.tarot-spread-board .tarot-card-slot:hover { z-index: 10; }
.tarot-spread-board .tarot-card-slot .tarot-card-rotate {
    position: absolute;
    inset: 0;
    transition: transform .4s cubic-bezier(.4,.2,.2,1);
}
.tarot-spread-board .tarot-card-slot[data-rotate="90"] .tarot-card-rotate { transform: rotate(90deg); }
.tarot-spread-board .tarot-card-slot[data-rotate="-90"] .tarot-card-rotate { transform: rotate(-90deg); }
.tarot-spread-board .tarot-card-slot .position-label {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(30, 22, 60, 0.95), rgba(15, 10, 35, 0.95));
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
    text-indent: 1.5px;
}
.tarot-spread-board .tarot-card-slot[data-rotate="90"] .position-label,
.tarot-spread-board .tarot-card-slot[data-rotate="-90"] .position-label {
    top: calc(100% - 16px);
}

/* 每个 layout：比例 + 最大宽度 + 牌尺寸（桌面端基准） */
.tarot-spread-board.layout-single     { aspect-ratio: 3 / 4;    max-width: 280px; --board-card-w: 140px; --board-card-h: 210px; }
.tarot-spread-board.layout-horizontal { aspect-ratio: 16 / 6;   max-width: 760px; --board-card-w: 110px; --board-card-h: 165px; }
.tarot-spread-board.layout-vertical   { aspect-ratio: 3 / 7.5;  max-width: 300px; --board-card-w: 100px; --board-card-h: 122px; }
.tarot-spread-board.layout-cross      { aspect-ratio: 1 / 1;    max-width: 600px; --board-card-w: 100px; --board-card-h: 140px; }
.tarot-spread-board.layout-hexfan     { aspect-ratio: 5 / 4;    max-width: 760px; --board-card-w: 92px;  --board-card-h: 130px; }
.tarot-spread-board.layout-fork       { aspect-ratio: 4 / 5;    max-width: 580px; --board-card-w: 84px;  --board-card-h: 118px; }
.tarot-spread-board.layout-star       { aspect-ratio: 1 / 1;    max-width: 600px; --board-card-w: 92px;  --board-card-h: 130px; }
.tarot-spread-board.layout-celtic     { aspect-ratio: 4 / 3;    max-width: 720px; --board-card-w: 82px;  --board-card-h: 116px; }
.tarot-spread-board.layout-arc        { aspect-ratio: 5 / 4;    max-width: 760px; --board-card-w: 86px;  --board-card-h: 122px; }
.tarot-spread-board.layout-circle     { aspect-ratio: 1 / 1;    max-width: 680px; --board-card-w: 68px;  --board-card-h: 96px;  }

/* 紧凑模式（保留：解牌页/历史页用） */
.tarot-spread-board.compact { margin: 18px auto 12px; --board-card-w: 74px; --board-card-h: 104px; }
.tarot-spread-board.compact .tarot-card-slot .position-label { font-size: 9px; padding: 1px 6px; }
.tarot-spread-board.compact.layout-single     { max-width: 220px; --board-card-w: 104px; --board-card-h: 156px; }
.tarot-spread-board.compact.layout-horizontal { --board-card-w: 86px; --board-card-h: 128px; }
.tarot-spread-board.compact.layout-vertical   { max-width: 240px; --board-card-w: 80px;  --board-card-h: 108px; }
.tarot-spread-board.compact.layout-cross      { --board-card-w: 76px; --board-card-h: 108px; }
.tarot-spread-board.compact.layout-hexfan     { --board-card-w: 72px; --board-card-h: 102px; }
.tarot-spread-board.compact.layout-fork       { --board-card-w: 64px; --board-card-h: 90px;  }
.tarot-spread-board.compact.layout-star       { max-width: 500px; --board-card-w: 72px; --board-card-h: 102px; }
.tarot-spread-board.compact.layout-celtic     { --board-card-w: 64px; --board-card-h: 90px;  }
.tarot-spread-board.compact.layout-arc        { --board-card-w: 70px; --board-card-h: 100px; }
.tarot-spread-board.compact.layout-circle     { max-width: 580px; --board-card-w: 56px; --board-card-h: 78px;  }

/* 发牌动画 */
.tarot-spread-board.dealing .tarot-card-slot {
    animation: tarot-deal-in 0.65s var(--tarot-ease-spring) backwards;
    animation-delay: calc(var(--deal-idx, 0) * 95ms);
}
@keyframes tarot-deal-in {
    0%   { opacity: 0; filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0)); }
    100% { opacity: 1; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4)); }
}

/* ============ 解牌页 · 桌面双栏 ============ */
.tarot-reading-page {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    box-sizing: border-box;
}

.tarot-reading-spread-display {
    position: relative;
    background:
        radial-gradient(circle at 18% 22%, rgba(212, 175, 55, 0.10) 0%, transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(167, 139, 250, 0.08) 0%, transparent 32%),
        linear-gradient(160deg, rgba(30, 22, 60, 0.55) 0%, rgba(15, 10, 35, 0.65) 100%);
    border: 1px solid var(--tarot-border-mid);
    border-radius: var(--tarot-r-lg);
    padding: 40px 28px 30px;
    margin-bottom: 28px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tarot-shadow-card);
}
.tarot-reading-spread-display::before {
    content: '✦ · ✧ · ✦ · ✧ · ✦ · ✧ · ✦ · ✧ · ✦ · ✧ · ✦';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(212, 175, 55, 0.28);
    font-size: 10px;
    letter-spacing: 5px;
    pointer-events: none;
    white-space: nowrap;
}
.tarot-reading-spread-display::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 80%;
    max-width: 360px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
    transform: translateX(-50%);
}
.tarot-reading-spread-title {
    color: var(--gold);
    font-size: 18px;
    letter-spacing: 6px;
    margin: 28px 0 6px;
    text-align: center;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
    text-indent: 6px;
    font-weight: 400;
    position: relative;
}
.tarot-reading-spread-title::before,
.tarot-reading-spread-title::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--gold);
    opacity: 0.5;
    vertical-align: middle;
    margin: 0 14px;
}
.tarot-reading-question {
    color: var(--tarot-text-soft);
    font-size: 13px;
    text-align: center;
    margin: 0 0 28px;
    font-style: italic;
    line-height: 1.85;
    font-family: var(--tarot-font-serif);
    letter-spacing: 1px;
}
.tarot-reading-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
}
.tarot-reading-card-item {
    width: 110px;
    text-align: center;
}
.tarot-reading-card-item .tarot-card-slot {
    width: 110px;
    height: 165px;
    margin: 0 auto;
}
.tarot-reading-card-item .position-label {
    position: static;
    transform: none;
    margin-top: 10px;
    display: inline-block;
    color: var(--tarot-text-soft);
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 3px 10px;
    background: rgba(212, 175, 55, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 999px;
}

/* === 解牌页：牌阵可拖拽 + 缩放视口 === */
.tarot-reading-spread-display .tarot-spread-board-wrap {
    position: relative;
    overflow: auto;
    margin: 0 -10px;
    padding: 18px 10px;
    height: clamp(360px, 56vh, 560px);
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    overscroll-behavior: contain;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(167, 139, 250, 0.04) 0%, transparent 70%);
    border-radius: var(--tarot-r-md);
}
.tarot-reading-spread-display .tarot-spread-board-wrap::-webkit-scrollbar { display: none; }
.tarot-reading-spread-display .tarot-spread-board-wrap.is-dragging { cursor: grabbing; }
.tarot-reading-spread-display .tarot-spread-board-wrap .tarot-spread-board {
    margin: 0 auto;
    transform-origin: 50% 50%;
    transition: none;
}
.tarot-reading-spread-display .tarot-spread-board-wrap.is-zooming .tarot-spread-board {
    transition: none;
}

/* 控件：缩放指示 + 操作提示 */
.tarot-board-controls {
    position: absolute;
    top: 14px;
    right: 18px;
    display: flex;
    gap: 6px;
    z-index: 5;
    pointer-events: auto;
}
.tarot-board-ctrl-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(8, 6, 24, 0.7);
    border: 1px solid var(--tarot-border-mid);
    color: var(--gold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: inherit;
    transition: all .2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tarot-board-ctrl-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--tarot-border-strong);
    transform: scale(1.05);
}
.tarot-board-ctrl-btn:active { transform: scale(0.95); }
.tarot-board-zoom-label {
    min-width: 44px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(8, 6, 24, 0.7);
    border: 1px solid var(--tarot-border);
    color: var(--tarot-text-soft);
    font-size: 11px;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}
.tarot-spread-board-pan-hint {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin: 10px auto 0;
    color: var(--tarot-text-faint);
    font-size: 10px;
    letter-spacing: 2px;
    pointer-events: none;
    opacity: 0.75;
    transition: opacity .4s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(8, 6, 24, 0.65);
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid var(--tarot-border);
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tarot-spread-board-pan-hint i { color: var(--gold); opacity: 0.7; }
.tarot-reading-spread-display .tarot-spread-board-wrap.has-interacted ~ .tarot-spread-board-pan-hint {
    opacity: 0;
}

/* 解牌输出 */
.tarot-reading-content {
    width: 100%;
    min-width: 0;
}
.tarot-interpret-output {
    background:
        linear-gradient(180deg, rgba(30, 22, 60, 0.55) 0%, rgba(15, 10, 35, 0.65) 100%);
    border: 1px solid var(--tarot-border);
    border-radius: var(--tarot-r-lg);
    padding: 36px 32px 32px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 28px;
    min-height: 240px;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tarot-shadow-card);
}
.tarot-interpret-output::before {
    content: '解 读';
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(30, 22, 60, 0.98) 0%, rgba(15, 10, 35, 0.98) 100%);
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 6px;
    padding: 4px 18px;
    border: 1px solid var(--tarot-border-mid);
    border-radius: 999px;
    text-indent: 6px;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.tarot-interpret-output::after { display: none; }
.tarot-interpret-output .section-card {
    margin-bottom: 18px;
    padding: 20px 24px;
    border-radius: var(--tarot-r-md);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-left: 3px solid;
    transition: all .3s var(--tarot-ease);
    position: relative;
    overflow: hidden;
}
.tarot-interpret-output .section-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 1px;
    opacity: 0.5;
    background: linear-gradient(90deg, currentColor, transparent);
    color: inherit;
}
.tarot-interpret-output .section-card:last-child { margin-bottom: 0; }
.tarot-interpret-output .section-card:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    transform: translateX(3px);
    border-color: rgba(255, 255, 255, 0.08);
}
.tarot-interpret-output .section-card.section-overall { border-left-color: var(--gold);          color: var(--gold); }
.tarot-interpret-output .section-card.section-cards   { border-left-color: var(--tarot-indigo);  color: var(--tarot-indigo); }
.tarot-interpret-output .section-card.section-insight { border-left-color: var(--tarot-violet);  color: var(--tarot-violet); }
.tarot-interpret-output .section-card.section-action  { border-left-color: var(--tarot-mint);    color: var(--tarot-mint); }
.tarot-interpret-output .section-card.section-reflect { border-left-color: var(--tarot-amber);   color: var(--tarot-amber); }

.tarot-interpret-output .section-title {
    font-size: 13px;
    letter-spacing: 5px;
    margin-bottom: 14px;
    font-weight: 500;
    text-indent: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tarot-interpret-output .section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, currentColor, transparent);
    opacity: 0.3;
}
.tarot-interpret-output .section-card.section-overall .section-title { color: var(--gold); }
.tarot-interpret-output .section-card.section-cards   .section-title { color: var(--tarot-indigo); }
.tarot-interpret-output .section-card.section-insight .section-title { color: var(--tarot-violet); }
.tarot-interpret-output .section-card.section-action  .section-title { color: var(--tarot-mint); }
.tarot-interpret-output .section-card.section-reflect .section-title { color: var(--tarot-amber); }

.tarot-interpret-output .section-body {
    color: var(--tarot-text);
    font-size: 14px;
    line-height: 2.05;
    font-family: var(--tarot-font-serif);
    letter-spacing: 0.3px;
}
.tarot-interpret-output .section-body p { margin: 0 0 12px; }
.tarot-interpret-output .section-body p:last-child { margin-bottom: 0; }
.tarot-interpret-output .section-body strong {
    color: var(--gold-light);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(232, 213, 163, 0.25);
}
.tarot-interpret-output .streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: var(--gold);
    vertical-align: text-bottom;
    animation: blink 1s steps(2) infinite;
    margin-left: 3px;
    box-shadow: 0 0 6px var(--gold);
}
@keyframes blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}
.tarot-interpret-empty {
    color: var(--tarot-text-dim);
    text-align: center;
    font-size: 13px;
    padding: 60px 0 40px;
    letter-spacing: 3px;
    text-indent: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.tarot-interpret-empty::before {
    content: '✦';
    font-size: 28px;
    color: var(--gold);
    opacity: 0.5;
    animation: tarot-twinkle 2s ease-in-out infinite;
}

/* 追问对话 */
.tarot-followup-section {
    background:
        linear-gradient(180deg, rgba(30, 22, 60, 0.5) 0%, rgba(15, 10, 35, 0.6) 100%);
    border: 1px solid var(--tarot-border);
    border-radius: var(--tarot-r-lg);
    padding: 30px 24px 22px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 28px;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--tarot-shadow-card);
}
.tarot-followup-section::before {
    content: '追 问';
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(30, 22, 60, 0.98) 0%, rgba(15, 10, 35, 0.98) 100%);
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 6px;
    padding: 4px 18px;
    border: 1px solid var(--tarot-border-mid);
    border-radius: 999px;
    text-indent: 6px;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.tarot-followup-section::after { display: none; }
.tarot-followup-title {
    color: var(--tarot-text-soft);
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 18px;
    font-weight: 400;
    text-indent: 2px;
    text-align: center;
    font-style: italic;
    font-family: var(--tarot-font-serif);
}
.tarot-followup-messages {
    max-height: 480px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 6px;
}
.tarot-followup-messages::-webkit-scrollbar { width: 4px; }
.tarot-followup-messages::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.2);
    border-radius: 2px;
}
.tarot-followup-msg {
    margin-bottom: 14px;
    line-height: 1.85;
    font-size: 14px;
    display: flex;
    animation: tarot-msg-in .3s var(--tarot-ease) backwards;
}
@keyframes tarot-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tarot-followup-msg:last-child { margin-bottom: 0; }
.tarot-followup-msg.user      { justify-content: flex-end; }
.tarot-followup-msg.assistant { justify-content: flex-start; }
.tarot-followup-msg .bubble {
    display: inline-block;
    max-width: 82%;
    padding: 12px 18px;
    border-radius: 18px;
    text-align: left;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--tarot-font-serif);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.tarot-followup-msg.user .bubble {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.18) 0%, rgba(212, 175, 55, 0.12) 100%);
    border: 1px solid rgba(244, 114, 182, 0.32);
    color: var(--tarot-text);
    border-bottom-right-radius: 6px;
}
.tarot-followup-msg.assistant .bubble {
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.22);
    color: var(--tarot-text);
    border-bottom-left-radius: 6px;
}
/* 追问气泡内 Markdown 渲染样式（标题/列表/加粗/表格/代码块） */
.tarot-followup-msg .bubble.is-markdown {
    white-space: normal;
}
.tarot-followup-msg .bubble.is-markdown p {
    margin: 4px 0;
    line-height: 1.8;
}
.tarot-followup-msg .bubble.is-markdown p:first-child { margin-top: 0; }
.tarot-followup-msg .bubble.is-markdown p:last-child { margin-bottom: 0; }
.tarot-followup-msg .bubble.is-markdown strong {
    color: var(--gold);
    font-weight: 600;
}
.tarot-followup-msg .bubble.is-markdown em {
    color: var(--cyan);
    font-style: italic;
}
.tarot-followup-msg .bubble.is-markdown h2,
.tarot-followup-msg .bubble.is-markdown h3,
.tarot-followup-msg .bubble.is-markdown h4 {
    margin: 10px 0 5px;
    font-weight: 600;
    line-height: 1.4;
}
.tarot-followup-msg .bubble.is-markdown h2 { font-size: 16px; color: var(--gold); }
.tarot-followup-msg .bubble.is-markdown h3 { font-size: 15px; color: var(--gold); }
.tarot-followup-msg .bubble.is-markdown h4 { font-size: 14px; color: var(--cyan); }
.tarot-followup-msg .bubble.is-markdown ul,
.tarot-followup-msg .bubble.is-markdown ol {
    margin: 4px 0;
    padding-left: 20px;
}
.tarot-followup-msg .bubble.is-markdown li {
    margin: 3px 0;
    line-height: 1.7;
}
.tarot-followup-msg .bubble.is-markdown hr {
    border: none;
    border-top: 1px solid var(--gold-dim);
    margin: 10px 0;
}
.tarot-followup-msg .bubble.is-markdown blockquote {
    margin: 6px 0;
    padding: 4px 12px;
    border-left: 3px solid var(--gold);
    color: var(--gold-light);
    font-style: italic;
}
.tarot-followup-msg .bubble.is-markdown code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 13px;
    color: var(--cyan);
}
.tarot-followup-msg .bubble.is-markdown pre {
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 10px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 6px 0;
}
.tarot-followup-msg .bubble.is-markdown pre code {
    background: transparent;
    padding: 0;
}
.tarot-followup-msg .bubble.is-markdown table {
    width: auto;
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 13px;
}
.tarot-followup-msg .bubble.is-markdown th,
.tarot-followup-msg .bubble.is-markdown td {
    border: 1px solid var(--gold-dim);
    padding: 4px 8px;
}
.tarot-followup-msg .bubble.is-markdown th {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
}
.tarot-followup-msg .bubble.is-markdown a {
    color: var(--cyan);
    text-decoration: underline;
    word-break: break-all;
}
.tarot-followup-input-row {
    display: flex;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px dashed var(--tarot-border);
    align-items: center;
}
.tarot-followup-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--tarot-border);
    border-radius: 999px;
    padding: 12px 18px;
    color: var(--tarot-text);
    font-size: 14px;
    font-family: inherit;
    transition: all .25s var(--tarot-ease);
}
.tarot-followup-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.tarot-followup-input::placeholder { color: var(--tarot-text-faint); }
.tarot-followup-send {
    padding: 12px 22px;
    background: linear-gradient(135deg, var(--gold) 0%, #b8941f 100%);
    color: #1a1410;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 3px;
    font-family: inherit;
    transition: all .25s var(--tarot-ease);
    text-indent: 3px;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tarot-followup-send:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
    transform: translateY(-1px);
}
.tarot-followup-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============ 桌面双栏布局（≥1024px） ============ */
@media (min-width: 1024px) {
    .tarot-reading-page {
        display: grid;
        grid-template-columns: minmax(360px, 400px) minmax(0, 1fr);
        gap: 28px 32px;
        align-items: start;
        max-width: 1480px;
    }
    .tarot-reading-page > .tarot-page-header {
        grid-column: 1 / -1;
    }
    .tarot-reading-page > .tarot-reading-spread-display {
        grid-column: 1;
        grid-row: 2;
        position: sticky;
        top: 24px;
        margin-bottom: 0;
        padding: 32px 18px 22px;
    }
    .tarot-reading-content {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-width: 0;
    }
    .tarot-reading-content > .tarot-interpret-output,
    .tarot-reading-content > .tarot-followup-section {
        margin-bottom: 0;
    }
}

/* ============ 历史弹窗（移动端入口） ============ */
.tarot-history-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}
.tarot-history-modal.show { display: block; }
.tarot-history-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}
.tarot-history-modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 460px);
    max-height: 80vh;
    background: linear-gradient(180deg, #1a1530 0%, #0f0c1f 100%);
    border: 1px solid var(--tarot-border-mid);
    border-radius: var(--tarot-r-md);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tarot-history-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--tarot-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tarot-history-modal-header h3 {
    margin: 0;
    color: var(--gold);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 4px;
    text-indent: 4px;
}
.tarot-history-modal-close {
    background: none;
    border: none;
    color: var(--tarot-text-soft);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
}
.tarot-history-modal-close:hover { color: var(--gold); }
.tarot-history-modal-body {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

/* ============ 主题选择器 ============ */
.tarot-theme-card {
    display: flex;
    gap: 14px;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tarot-border);
    border-radius: var(--tarot-r-md);
    align-items: center;
    transition: border-color .2s;
}
.tarot-theme-card.active {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.08);
}
.tarot-theme-thumb {
    position: relative;
    flex-shrink: 0;
}
.tarot-theme-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.tarot-theme-badge.default { background: rgba(212, 175, 55, 0.2); color: var(--gold); }
.tarot-theme-badge.lock {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--gold);
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 11px;
}
.tarot-theme-info { flex: 1; min-width: 0; }
.tarot-theme-name {
    color: var(--gold);
    font-size: 14px;
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.tarot-theme-desc {
    color: var(--tarot-text-soft);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.tarot-theme-btn {
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--gold), #b8962e);
    color: #1a1530;
    border: none;
    border-radius: var(--tarot-r-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
}
.tarot-theme-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold);
    cursor: default;
}

/* ============ 响应式 ============ */
@media (max-width: 768px) {
    #tarotSidebar { display: none; }
    .tarot-welcome { padding: 64px 18px 56px; }
    .tarot-welcome-logo-wrap { width: 140px; height: 140px; margin-bottom: 14px; }
    .tarot-welcome-logo { font-size: 60px; }
    .tarot-welcome h1 { font-size: 26px; letter-spacing: 10px; text-indent: 10px; }
    .tarot-welcome p { font-size: 13px; line-height: 2; letter-spacing: 1.5px; }
    .tarot-welcome-btn { padding: 14px 40px; letter-spacing: 4px; text-indent: 4px; }
    .tarot-welcome-extras { gap: 14px; }
    .tarot-spread-page,
    .tarot-draw-page,
    .tarot-reading-page {
        padding: 20px 14px;
    }
    /* 移动端关闭双栏 */
    .tarot-reading-page {
        display: block;
        max-width: 100%;
    }
    .tarot-spreads-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .tarot-card-slot {
        width: 80px;
        height: 120px;
    }
    .tarot-spread-board {
        margin: 20px auto 12px;
    }
    /* 移动端 board 用固定宽度，横向滚动承载 */
    .tarot-spread-board.layout-single     { width: 200px; max-width: none; }
    .tarot-spread-board.layout-horizontal { width: 480px; max-width: none; }
    .tarot-spread-board.layout-vertical   { width: 240px; max-width: none; }
    .tarot-spread-board.layout-cross      { width: 480px; max-width: none; }
    .tarot-spread-board.layout-hexfan     { width: 480px; max-width: none; }
    .tarot-spread-board.layout-fork       { width: 380px; max-width: none; }
    .tarot-spread-board.layout-star       { width: 400px; max-width: none; }
    .tarot-spread-board.layout-celtic     { width: 380px; max-width: none; }
    .tarot-spread-board.layout-arc        { width: 480px; max-width: none; }
    .tarot-spread-board.layout-circle     { width: 440px; max-width: none; }
    .tarot-spread-board-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin: 0 -14px;
        padding: 0 14px;
    }
    .tarot-draw-board-section .tarot-spread-board-wrap {
        overflow-x: auto;
        overflow-y: visible;
        padding: 42px 14px 58px;
        margin: 0 -14px;
    }
    .tarot-spread-board .tarot-card-slot .position-label {
        font-size: 8px;
        padding: 1px 4px;
        letter-spacing: 0.5px;
    }
    .tarot-spread-board.layout-single     { --board-card-w: 100px; --board-card-h: 150px; }
    .tarot-spread-board.layout-horizontal { --board-card-w: 70px;  --board-card-h: 105px; }
    .tarot-spread-board.layout-vertical   { --board-card-w: 76px;  --board-card-h: 102px; }
    .tarot-spread-board.layout-cross      { --board-card-w: 66px;  --board-card-h: 92px;  }
    .tarot-spread-board.layout-hexfan     { --board-card-w: 60px;  --board-card-h: 84px;  }
    .tarot-spread-board.layout-fork       { --board-card-w: 54px;  --board-card-h: 76px;  }
    .tarot-spread-board.layout-star       { --board-card-w: 60px;  --board-card-h: 84px;  }
    .tarot-spread-board.layout-celtic     { --board-card-w: 52px;  --board-card-h: 72px;  }
    .tarot-spread-board.layout-arc        { --board-card-w: 56px;  --board-card-h: 78px;  }
    .tarot-spread-board.layout-circle     { --board-card-w: 44px;  --board-card-h: 62px;  }
    /* compact 移动端进一步缩 */
    .tarot-spread-board.compact                       { --board-card-w: 50px; --board-card-h: 70px; }
    .tarot-spread-board.compact.layout-single         { --board-card-w: 84px; --board-card-h: 126px; }
    .tarot-spread-board.compact.layout-horizontal     { --board-card-w: 58px; --board-card-h: 86px;  }
    .tarot-spread-board.compact.layout-vertical       { --board-card-w: 60px; --board-card-h: 80px;  }
    .tarot-spread-board.compact.layout-cross          { --board-card-w: 54px; --board-card-h: 76px;  }
    .tarot-spread-board.compact.layout-hexfan         { --board-card-w: 48px; --board-card-h: 68px;  }
    .tarot-spread-board.compact.layout-fork           { --board-card-w: 44px; --board-card-h: 62px;  }
    .tarot-spread-board.compact.layout-star           { --board-card-w: 48px; --board-card-h: 68px;  }
    .tarot-spread-board.compact.layout-celtic         { --board-card-w: 42px; --board-card-h: 60px;  }
    .tarot-spread-board.compact.layout-arc            { --board-card-w: 46px; --board-card-h: 64px;  }
    .tarot-spread-board.compact.layout-circle         { --board-card-w: 36px; --board-card-h: 52px;  }
    .tarot-card-back-pattern { font-size: 26px; }
    .tarot-card-front .card-name-bar { font-size: 9px; padding: 2px 4px; }
    .tarot-card-front .card-fallback-symbol { font-size: 22px; }
    .tarot-card-front .card-fallback-name { font-size: 10px; }
    .tarot-card-slot:not(.flipped):hover::after { display: none; }
    .tarot-flip-progress { max-width: 100%; padding: 0 8px; }
    .tarot-reading-card-item { width: 86px; }
    .tarot-reading-card-item .tarot-card-slot { width: 86px; height: 128px; }
    .tarot-reading-spread-title { font-size: 16px; letter-spacing: 4px; text-indent: 4px; margin: 22px 0 6px; }
    .tarot-reading-spread-title::before,
    .tarot-reading-spread-title::after { width: 14px; margin: 0 8px; }
    .tarot-page-header { margin-bottom: 24px; padding-bottom: 16px; }
    .tarot-page-header h2 { font-size: 17px; letter-spacing: 5px; text-indent: 5px; }
    .tarot-back-btn { padding: 6px 12px; font-size: 12px; letter-spacing: 1.5px; }
    .tarot-question-box { padding: 18px 18px 16px; margin-bottom: 22px; }
    .tarot-pick-deck {
        --pick-card-w: 50px;
        --pick-card-h: 75px;
        --pick-fan-h: 200px;
        max-height: 42vh;
        margin: 12px -14px 8px;
        width: calc(100% + 28px);
    }
    .tarot-pick-card { bottom: 18px; }

    /* Draw page mobile fit */
    .tarot-draw-page {
        padding: 14px 10px calc(24px + env(safe-area-inset-bottom));
        overflow-x: clip;
    }
    .tarot-draw-page .tarot-page-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 40px;
        gap: 8px;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
    .tarot-draw-page .tarot-page-header h2 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        letter-spacing: 2px;
        text-indent: 0;
    }
    .tarot-draw-page .tarot-page-header > span {
        width: 40px !important;
    }
    .tarot-draw-page .tarot-back-btn {
        min-height: 34px;
        padding: 6px 10px;
    }
    .tarot-draw-page .tarot-question-box {
        padding: 14px;
        margin-bottom: 12px;
        border-radius: var(--tarot-r-md);
    }
    .tarot-draw-page .tarot-question-box::before {
        top: 12px;
        right: 14px;
    }
    .tarot-draw-page .tarot-question-box label {
        margin-bottom: 8px;
        font-size: 11px;
        letter-spacing: 2px;
        text-indent: 2px;
    }
    .tarot-draw-page .tarot-question-box label::before {
        width: 10px;
    }
    .tarot-draw-page .tarot-question-input {
        min-height: 58px;
        max-height: 120px;
        padding: 10px 12px;
        font-size: 13px;
        line-height: 1.55;
    }
    .tarot-draw-page .tarot-question-hint {
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.5;
        letter-spacing: 0.5px;
    }
    .tarot-draw-page .tarot-flip-progress {
        margin: 0 auto 10px;
        padding: 0 2px;
    }
    .tarot-draw-page .tarot-flip-progress-text {
        margin-bottom: 7px;
        font-size: 10px;
        letter-spacing: 2px;
        text-indent: 2px;
    }
    .tarot-draw-board-section {
        margin-bottom: 4px;
    }
    .tarot-draw-board-section .tarot-spread-board-wrap {
        overflow: visible;
        margin: 0;
        padding: 20px 0 32px;
    }
    .tarot-draw-page.is-draw-complete .tarot-draw-board-section .tarot-spread-board-wrap {
        padding-bottom: 108px;
    }
    .tarot-draw-board-section .tarot-spread-board {
        width: min(100%, 420px);
        max-width: 100%;
        margin: 0 auto;
        --board-card-w: clamp(40px, 13.5vw, 58px);
        --board-card-h: calc(var(--board-card-w) * 1.42);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-single {
        width: min(68vw, 220px);
        --board-card-w: clamp(90px, 30vw, 112px);
        --board-card-h: calc(var(--board-card-w) * 1.5);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-horizontal {
        --board-card-w: clamp(54px, 17vw, 66px);
        --board-card-h: calc(var(--board-card-w) * 1.5);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-vertical {
        width: min(78vw, 260px);
        --board-card-w: clamp(48px, 15vw, 62px);
        --board-card-h: calc(var(--board-card-w) * 1.34);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-cross,
    .tarot-draw-board-section .tarot-spread-board.layout-star {
        width: min(100%, 300px);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-hexfan,
    .tarot-draw-board-section .tarot-spread-board.layout-fork,
    .tarot-draw-board-section .tarot-spread-board.layout-celtic,
    .tarot-draw-board-section .tarot-spread-board.layout-arc {
        width: min(100%, 340px);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-celtic {
        --board-card-w: clamp(38px, 12vw, 50px);
        --board-card-h: calc(var(--board-card-w) * 1.42);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-circle {
        width: min(86vw, 280px);
        --board-card-w: clamp(32px, 10vw, 42px);
        --board-card-h: calc(var(--board-card-w) * 1.42);
    }
    .tarot-draw-board-section .tarot-slot-empty .position-label,
    .tarot-draw-board-section .tarot-spread-board .tarot-card-slot .position-label {
        max-width: calc(var(--board-card-w) * 1.8);
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
        font-size: 8px;
        line-height: 1.15;
        letter-spacing: 0;
        text-indent: 0;
        padding: 1px 3px;
    }
    .tarot-draw-page .tarot-shuffle-hint {
        max-width: 100%;
        margin: 8px auto 6px;
        padding: 6px 10px;
        gap: 8px;
        justify-content: center;
        white-space: normal;
        font-size: 11px;
        line-height: 1.45;
        letter-spacing: 1px;
        text-indent: 0;
    }
    .tarot-draw-page .tarot-shuffle-hint.is-complete {
        margin-top: 0;
        margin-bottom: 18px;
        position: relative;
        z-index: 0;
    }
    .tarot-draw-page .tarot-shuffle-hint::before,
    .tarot-draw-page .tarot-shuffle-hint::after {
        width: 10px;
        flex: 0 0 10px;
    }
    .tarot-draw-page .tarot-pick-deck {
        --pick-card-w: 46px;
        --pick-card-h: 69px;
        --pick-fan-h: 172px;
        height: var(--pick-fan-h);
        max-height: 32vh;
        margin: 6px -10px 4px;
        width: calc(100% + 20px);
        touch-action: pan-x pan-y;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
    }
    .tarot-draw-page .tarot-pick-card {
        bottom: 52px;
    }
    .tarot-draw-complete {
        position: sticky;
        bottom: calc(10px + env(safe-area-inset-bottom));
        z-index: 5;
        padding-top: 4px;
    }
    .tarot-interpret-btn { padding: 14px 36px; letter-spacing: 4px; text-indent: 4px; font-size: 13px; }
    .tarot-interpret-output,
    .tarot-reading-spread-display,
    .tarot-followup-section {
        padding: 24px 16px 20px;
    }
    .tarot-interpret-output .section-card {
        padding: 14px 16px;
    }
    .tarot-followup-msg .bubble { max-width: 92%; padding: 10px 14px; }
    .tarot-followup-input-row { flex-wrap: wrap; gap: 8px; }
    .tarot-followup-send { padding: 10px 18px; }
}

@media (hover: none) and (pointer: coarse) {
    .tarot-pick-card:hover:not(.picked) {
        transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-1 * var(--dy, 0px)), 0) rotate(var(--rot, 0deg));
    }
}

@media (max-width: 380px) {
    .tarot-draw-page {
        padding-left: 8px;
        padding-right: 8px;
    }
    .tarot-draw-page .tarot-page-header {
        grid-template-columns: auto minmax(0, 1fr) 34px;
        gap: 6px;
    }
    .tarot-draw-page .tarot-page-header > span {
        width: 34px !important;
    }
    .tarot-draw-page .tarot-page-header h2 {
        font-size: 15px;
        letter-spacing: 1px;
    }
    .tarot-draw-page .tarot-question-box {
        padding: 12px;
    }
    .tarot-draw-board-section .tarot-spread-board-wrap {
        padding-top: 16px;
        padding-bottom: 28px;
    }
    .tarot-draw-board-section .tarot-spread-board {
        --board-card-w: clamp(36px, 12.5vw, 50px);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-single {
        --board-card-w: clamp(82px, 28vw, 100px);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-horizontal {
        --board-card-w: clamp(48px, 16vw, 58px);
    }
    .tarot-draw-board-section .tarot-spread-board.layout-circle {
        --board-card-w: clamp(28px, 9vw, 38px);
        width: min(84vw, 260px);
    }
    .tarot-draw-page .tarot-pick-deck {
        margin-left: -8px;
        margin-right: -8px;
        width: calc(100% + 16px);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tarot-card-slot {
        width: 100px;
        height: 150px;
    }
    .tarot-pick-deck {
        --pick-card-w: 60px;
        --pick-card-h: 90px;
        --pick-fan-h: 230px;
    }
}