/* ============================================================
   知微阁 · 塔罗 / 雷诺曼 卡牌增强样式
   —— 卡面图片 / 卡背图片 / 选牌界面 / 专业牌阵布局
   （新增模块：不改动任何既有样式与算法）
   ============================================================ */

/* ------------------------------------------------------------
   1. 卡背图片（webp 加载失败时自动回落到原有 CSS 纹样）
   ------------------------------------------------------------ */
.tarot-card-face.tarot-card-back.zw-back-tarot {
    background-image:
        url('cards/tarot/back.webp'),
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.18), transparent 65%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(var(--accent-rgb), 0.05) 10px, rgba(var(--accent-rgb), 0.05) 20px);
    background-size: cover, 100% 100%, 100% 100%;
    background-position: center, center, center;
}
.tarot-card-face.tarot-card-back.zw-back-lenormand {
    background-image:
        url('cards/lenormand/back.webp'),
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.18), transparent 65%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(var(--accent-rgb), 0.05) 10px, rgba(var(--accent-rgb), 0.05) 20px);
    background-size: cover, 100% 100%, 100% 100%;
    background-position: center, center, center;
}
/* 有真实卡背图时隐藏原有的月亮符号，避免叠加杂讯 */
.tarot-card-back.zw-back-tarot .card-back-symbol,
.tarot-card-back.zw-back-lenormand .card-back-symbol {
    display: none;
}

/* ------------------------------------------------------------
   2. 结果页卡面图片版式（v2：完整卡面 · 不与文字重叠）
   — 卡体按牌面真实比例撑高（塔罗 3:5 · 雷诺曼 40:63）
   — 翻面后整张卡面完整呈现，不再裁切、不再叠名称文字
   ------------------------------------------------------------ */
.tarot-card.zw-img-card {
    height: auto;
    aspect-ratio: 3 / 5;
    position: relative;
    z-index: 1;
}
.lenormand-card.zw-img-card {
    height: auto;
    aspect-ratio: 40 / 63;
    position: relative;
    z-index: 1;
}
/* 翻面中的卡浮于同排元素之上，避免被邻近文字压住 */
.tarot-card.flipped,
.lenormand-card.flipped { z-index: 6; }

.tarot-card-face.zw-img-front {
    padding: 3px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}
.zw-card-img {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: calc(var(--radius-sm) - 3px);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    background: var(--color-surface);
    user-select: none;
    -webkit-user-drag: none;
}
/* 牌阵区卡面上不再呈现名称/关键词（名称移至下方解读行） */
.zw-img-card .zw-card-caption { display: none; }
/* 逆位牌图片倒置 —— 如实呈现牌面颠倒之象 */
.tarot-card.zw-reversed .zw-card-img,
.lenormand-card.zw-reversed .zw-card-img {
    transform: rotate(180deg);
}
.zw-card-caption {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 1px 0 0;
    text-align: center;
}
.zw-card-caption .card-name {
    font-family: var(--font-display);
    color: var(--color-gold);
    font-size: 0.76rem;
    line-height: 1.15;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.zw-card-caption .card-keyword {
    font-size: 0.56rem;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.zw-card-caption .card-reversed {
    color: var(--color-red-light);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
}
.zw-card-caption .zw-cap-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
}

/* ------------------------------------------------------------
   2b. 牌阵单元与位置标签（防重叠）
   — 卡与位置标签竖排分离，标签带底色胶囊，杜绝文字压牌
   ------------------------------------------------------------ */
.zw-spread-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
/* 发牌入场依次延迟（外层单元计数，馈入卡牌动画） */
.card-spread .zw-spread-cell:nth-child(2)  { --zw-deal-delay: 0.15s; }
.card-spread .zw-spread-cell:nth-child(3)  { --zw-deal-delay: 0.30s; }
.card-spread .zw-spread-cell:nth-child(4)  { --zw-deal-delay: 0.45s; }
.card-spread .zw-spread-cell:nth-child(5)  { --zw-deal-delay: 0.60s; }
.card-spread .zw-spread-cell:nth-child(6)  { --zw-deal-delay: 0.75s; }
.card-spread .zw-spread-cell:nth-child(7)  { --zw-deal-delay: 0.90s; }
.card-spread .zw-spread-cell:nth-child(8)  { --zw-deal-delay: 1.05s; }
.card-spread .zw-spread-cell:nth-child(9)  { --zw-deal-delay: 1.20s; }
.lenormand-grid-3x3 .zw-spread-cell:nth-child(2) { --zw-deal-delay: 0.15s; }
.lenormand-grid-3x3 .zw-spread-cell:nth-child(3) { --zw-deal-delay: 0.30s; }
.lenormand-grid-3x3 .zw-spread-cell:nth-child(4) { --zw-deal-delay: 0.45s; }
.lenormand-grid-3x3 .zw-spread-cell:nth-child(5) { --zw-deal-delay: 0.60s; }
.lenormand-grid-3x3 .zw-spread-cell:nth-child(6) { --zw-deal-delay: 0.75s; }
.lenormand-grid-3x3 .zw-spread-cell:nth-child(7) { --zw-deal-delay: 0.90s; }
.lenormand-grid-3x3 .zw-spread-cell:nth-child(8) { --zw-deal-delay: 1.05s; }
.lenormand-grid-3x3 .zw-spread-cell:nth-child(9) { --zw-deal-delay: 1.20s; }
.card-spread .tarot-card,
.card-spread .lenormand-card,
.lenormand-grid-3x3 .lenormand-card {
    animation-delay: var(--zw-deal-delay, 0.15s);
}
.zw-pos-tag {
    display: inline-block;
    padding: 0.16rem 0.62rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--color-gold-light);
    letter-spacing: 0.08em;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ------------------------------------------------------------
   2c. 逐牌解读行（左图右文）
   — 一行一牌：左侧卡面小图，右侧该牌全部解析
   — v2：图按桌面 96px 恰当呈现牌面细节；位置标签金调胶囊；
        正逆位/元素徽章体系；行距放宽利于长文阅读
   ------------------------------------------------------------ */
.interpretation-block.zw-interp-row {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
}
.zw-interp-figure {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 96px;
}
.zw-interp-figure img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    background: var(--color-surface);
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}
/* 逆位：解读区卡面与牌阵一致倒转，并加角标明示 */
.zw-interp-figure.zw-fig-rev { position: relative; }
.zw-interp-figure.zw-fig-rev img { transform: rotate(180deg); }
.zw-interp-figure.zw-fig-rev::after {
    content: '逆位';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.06rem 0.34rem;
    border-radius: 3px;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    color: #fff;
    background: rgba(var(--gold-dark-rgb, 138, 116, 64), 0.88);
    border: 1px solid rgba(var(--accent-rgb), 0.55);
    line-height: 1.5;
    white-space: nowrap;
}
.zw-interp-pos {
    font-size: 0.62rem;
    color: var(--color-gold-light);
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.zw-interp-body {
    flex: 1 1 auto;
    min-width: 0;
}
.zw-interp-body h4 { margin-top: 0; }
.zw-interp-body p {
    line-height: 1.75;
    margin-bottom: 0.45rem;
}
/* 解读行内的正逆位 / 元素徽章 */
.zw-orient-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.06rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    vertical-align: 1px;
    line-height: 1.55;
}
.zw-orient-up {
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.zw-orient-rev {
    color: #fff;
    background: rgba(176, 69, 69, 0.28);
    border: 1px solid rgba(176, 69, 69, 0.6);
}
.zw-elem-badge {
    display: inline-block;
    margin-left: 0.55rem;
    padding: 0.05rem 0.42rem;
    border-radius: 4px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    vertical-align: 1px;
    line-height: 1.55;
    color: var(--color-muted);
    background: rgba(var(--overlay-rgb), 0.06);
    border: 1px solid rgba(var(--overlay-rgb), 0.14);
}
.zw-elem-火 { color: #E09A6A; border-color: rgba(224, 154, 106, 0.4); background: rgba(224, 154, 106, 0.10); }
.zw-elem-水 { color: #7FB6E0; border-color: rgba(127, 182, 224, 0.4); background: rgba(127, 182, 224, 0.10); }
.zw-elem-风 { color: #B8CFE8; border-color: rgba(184, 207, 232, 0.4); background: rgba(184, 207, 232, 0.10); }
.zw-elem-土 { color: #D9C48A; border-color: rgba(217, 196, 138, 0.4); background: rgba(217, 196, 138, 0.10); }
.zw-elem-灵性 { color: var(--color-gold-light); border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.10); }
@media (max-width: 480px) {
    .zw-interp-figure { width: 58px; }
    .zw-interp-figure.zw-fig-rev::after { font-size: 0.5rem; padding: 0.04rem 0.26rem; }
    .zw-interp-pos { font-size: 0.56rem; }
    .interpretation-block.zw-interp-row { gap: 0.75rem; }
    .zw-orient-badge, .zw-elem-badge { font-size: 0.62rem; }
}

/* ------------------------------------------------------------
   3. 选牌界面（抽牌桌面）
   ------------------------------------------------------------ */
.zw-pick-section { overflow: hidden; }

/* 顶部信息条 */
.zw-pick-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.4rem;
}
.zw-pick-head h2 { margin: 0; }
.zw-pick-counter {
    font-family: var(--font-display);
    color: var(--color-gold-light);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.zw-pick-counter b {
    color: var(--color-gold);
    font-size: 1.25rem;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4);
}
.zw-pick-question {
    margin: 0 0 0.8rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 已选牌位托盘 */
.zw-pick-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    padding: 0.7rem 0.4rem 0.9rem;
    margin-bottom: 0.6rem;
    border-block: 1px solid rgba(var(--border-rgb), 0.7);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.05), transparent 70%);
}
.zw-pick-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 60px;
}
.zw-pick-slot-box {
    position: relative;
    width: 48px;
    height: 74px;
    border-radius: 6px;
    border: 1.5px dashed rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--surface-rgb), 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.zw-pick-slot-box .zw-slot-num {
    font-family: var(--font-display);
    color: rgba(var(--accent-rgb), 0.45);
    font-size: 0.95rem;
}
.zw-pick-slot-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    border-radius: 5px;
    user-select: none;
    -webkit-user-drag: none;
}
.zw-pick-slot.zw-filled .zw-pick-slot-box {
    border-style: solid;
    border-color: rgba(var(--accent-light-rgb), 0.65);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.28);
    cursor: pointer;
    animation: zwSlotPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zw-pick-slot.zw-filled .zw-pick-slot-box img { display: block; }
.zw-pick-slot.zw-filled .zw-slot-num { display: none; }
.zw-pick-slot.zw-filled .zw-pick-slot-box::after {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(var(--bg-rgb), 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
    font-size: 1rem;
    z-index: 2;
}
.zw-pick-slot.zw-filled .zw-pick-slot-box:hover::after { opacity: 1; }
.zw-pick-slot-label {
    font-size: 0.64rem;
    color: var(--color-gold-light);
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
@keyframes zwSlotPop {
    0% { transform: scale(0.55) translateY(10px); opacity: 0; }
    60% { transform: scale(1.08) translateY(-2px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 扇形牌堆（横向滚动条带 + 堆叠重叠） */
.zw-fan-wrap {
    position: relative;
    margin: 0 -0.3rem;
}
.zw-fan-scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    /* 底部留足"弧线下沉 + 滚动条"空间：外缘牌角不被裁切，也不侵入下方提示行 */
    padding: 1.6rem 1.1rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
    -webkit-overflow-scrolling: touch;
}
.zw-fan-scroll::-webkit-scrollbar { height: 5px; }
.zw-fan-scroll::-webkit-scrollbar-track { background: rgba(var(--border-rgb), 0.4); border-radius: 3px; }
.zw-fan-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 3px;
}
.zw-fan {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: max-content;
    padding: 0 2.2rem;
}
.zw-fan-card {
    position: relative;
    flex: 0 0 auto;
    width: 74px;
    height: 118px;
    margin-left: -38px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform:
        rotate(var(--zw-rot, 0deg))
        translateY(var(--zw-ty, 0px))
        scale(var(--zw-sc, 1));
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.28s ease, opacity 0.3s ease;
    animation: zwFanDeal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: min(calc(var(--zw-i, 0) * 14ms), 950ms);
    z-index: 1;
}
.zw-fan-card:first-child { margin-left: 0; }
.zw-fan-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1.5px solid rgba(var(--gold-dark-rgb), 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
}
.zw-fan-card:hover,
.zw-fan-card:focus-visible {
    transform:
        rotate(var(--zw-rot, 0deg))
        translateY(var(--zw-ty, 0px))
        translateY(-16px)
        scale(calc(var(--zw-sc, 1) * 1.07));
    filter: brightness(1.18) drop-shadow(0 8px 16px rgba(var(--accent-rgb), 0.3));
    z-index: 40;
    outline: none;
}
.zw-fan-card.zw-picked {
    transform:
        rotate(var(--zw-rot, 0deg))
        translateY(var(--zw-ty, 0px))
        translateY(-7px)
        scale(calc(var(--zw-sc, 1) * 1.02));
    z-index: 20;
}
.zw-fan-card.zw-picked img {
    border-color: var(--color-gold-light);
    box-shadow:
        0 0 0 2px rgba(var(--accent-light-rgb), 0.5),
        0 0 20px rgba(var(--accent-rgb), 0.45);
}
.zw-fan-card.zw-picked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(var(--bg-rgb), 0.42);
    z-index: 1;
}
.zw-fan-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
    color: var(--color-bg);
    font-size: 0.66rem;
    font-weight: 700;
    font-family: var(--font-display);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.zw-fan-card.zw-picked .zw-fan-badge { display: flex; }
/* 抽满后未选之牌退隐 */
.zw-fan.zw-fan-done .zw-fan-card:not(.zw-picked) {
    opacity: 0.32;
    pointer-events: none;
    filter: grayscale(0.55) brightness(0.75);
}
@keyframes zwFanDeal {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(0.72);
    }
    100% { opacity: 1; }
}

/* 两侧渐隐遮罩与滑动提示 */
.zw-fan-fade {
    position: absolute;
    top: 0;
    bottom: 14px;
    width: 3.2rem;
    pointer-events: none;
    z-index: 50;
}
.zw-fan-fade-l {
    left: 0;
    background: linear-gradient(90deg, var(--color-bg) 12%, transparent);
}
.zw-fan-fade-r {
    right: 0;
    background: linear-gradient(270deg, var(--color-bg) 12%, transparent);
}
.zw-fan-hint {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* 不再上提（原 margin-top:-0.5rem 会压进滑动条带底部，与下沉的外缘牌角/滚动条重合） */
    margin-top: 0;
    padding-bottom: 0.2rem;
    font-size: 0.74rem;
    color: var(--color-muted);
    letter-spacing: 0.15em;
}
.zw-fan-hint i {
    flex: none;
    color: rgba(var(--accent-rgb), 0.55);
    animation: zwHintNudge 1.8s ease-in-out infinite;
}
.zw-fan-hint .zw-fan-hint-r { animation-delay: 0.9s; }
@keyframes zwHintNudge {
    0%, 100% { transform: translateX(0); opacity: 0.45; }
    50% { transform: translateX(4px); opacity: 1; }
}

/* 底部操作区 */
.zw-pick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.9rem;
}
.zw-pick-go.zw-ready {
    box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb), 0.5), 0 0 22px rgba(var(--accent-rgb), 0.5);
    animation: zwGoPulse 2.2s ease-in-out infinite;
}
@keyframes zwGoPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb), 0.5), 0 0 14px rgba(var(--accent-rgb), 0.35); }
    50% { box-shadow: 0 0 0 1px rgba(var(--accent-light-rgb), 0.7), 0 0 30px rgba(var(--accent-rgb), 0.6); }
}
.zw-pick-tip {
    margin: 0.8rem auto 0;
    max-width: 34rem;
    text-align: center;
    font-size: 0.74rem;
    color: var(--color-muted);
    line-height: 1.7;
}
.zw-pick-back {
    display: block;
    text-align: center;
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}
.zw-pick-back:hover { color: var(--color-gold-light); }

/* 窄屏适配 */
@media (max-width: 640px) {
    .zw-fan-card { width: 60px; height: 96px; margin-left: -31px; }
    .zw-fan { padding: 0 1.4rem; }
    /* 底部同样留足弧线下沉空间；触屏端隐藏细滚动条，杜绝滚动条与提示行/牌角相互挤压 */
    .zw-fan-scroll {
        padding: 1.3rem 0.8rem 1.9rem;
        scrollbar-width: none;
    }
    .zw-fan-scroll::-webkit-scrollbar { display: none; }
    .zw-fan-fade { width: 1.8rem; }
    .zw-pick-slot { width: 52px; }
    .zw-pick-slot-box { width: 42px; height: 64px; }
    .zw-pick-slot-label { font-size: 0.58rem; }
    .zw-pick-head h2 { font-size: 1.15rem; }
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
    .zw-fan-card,
    .zw-pick-slot.zw-filled .zw-pick-slot-box,
    .zw-fan-hint i,
    .zw-pick-go.zw-ready {
        animation: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   4. 专业牌阵布局（结果页）
   ------------------------------------------------------------ */
/* 十字牌阵：中心 + 横轴（过去-现状-未来）+ 纵轴（意识/潜意识） */
.zw-spread-cross {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.5rem;
    justify-content: center;
    align-items: start;
    padding: 1rem 0;
}
.zw-spread-cross > *:nth-child(1) { grid-area: 2 / 1; }
.zw-spread-cross > *:nth-child(2) { grid-area: 2 / 2; }
.zw-spread-cross > *:nth-child(3) { grid-area: 2 / 3; }
.zw-spread-cross > *:nth-child(4) { grid-area: 1 / 2; }
.zw-spread-cross > *:nth-child(5) { grid-area: 3 / 2; }

/* H 形牌阵：左右两列（双方）+ 中桥（关系连接） */
.zw-spread-h {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.5rem 0.9rem;
    justify-content: center;
    align-items: start;
    padding: 1rem 0;
}
.zw-spread-h > *:nth-child(1) { grid-area: 1 / 1; }
.zw-spread-h > *:nth-child(2) { grid-area: 2 / 1; }
.zw-spread-h > *:nth-child(3) { grid-area: 3 / 1; }
.zw-spread-h > *:nth-child(4) { grid-area: 2 / 2; }
.zw-spread-h > *:nth-child(5) { grid-area: 1 / 3; }
.zw-spread-h > *:nth-child(6) { grid-area: 2 / 3; }
.zw-spread-h > *:nth-child(7) { grid-area: 3 / 3; }

/* 钻石牌阵：底（现状）- 左（阻碍）- 右（助力）- 顶（结果） */
.zw-spread-diamond {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.5rem;
    justify-content: center;
    align-items: start;
    padding: 1rem 0;
}
.zw-spread-diamond > *:nth-child(1) { grid-area: 2 / 1; }
.zw-spread-diamond > *:nth-child(2) { grid-area: 3 / 2; }
.zw-spread-diamond > *:nth-child(3) { grid-area: 2 / 3; }
.zw-spread-diamond > *:nth-child(4) { grid-area: 1 / 2; }

/* 六芒星牌阵：六角环列 + 中心枢纽 */
.zw-spread-hexagram {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.5rem;
    justify-content: center;
    align-items: start;
    padding: 1rem 0;
}
.zw-spread-hexagram > *:nth-child(1) { grid-area: 1 / 2; }
.zw-spread-hexagram > *:nth-child(2) { grid-area: 1 / 3; }
.zw-spread-hexagram > *:nth-child(3) { grid-area: 3 / 3; }
.zw-spread-hexagram > *:nth-child(4) { grid-area: 3 / 2; }
.zw-spread-hexagram > *:nth-child(5) { grid-area: 3 / 1; }
.zw-spread-hexagram > *:nth-child(6) { grid-area: 1 / 1; }
.zw-spread-hexagram > *:nth-child(7) { grid-area: 2 / 2; }

/* 马蹄牌阵：U 形弧线 —— 倾角与弧沉只施于卡面（绕卡心旋转），
   各单元流式布局完全一致 → 七枚位置标签恒处同一水平基线，杜绝错位与压字 */
.zw-spread-horseshoe {
    /* 七张横排按视口自适应卡宽，杜绝中窄屏横向溢出 */
    --zw-hs-w: clamp(78px, 11vw, 140px);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.4rem;
    /* 顶部预留倾牌上扬空间（140px 卡上扬 ≈ 41px），底部只需常规留白 */
    padding: 2.75rem 0 1rem;
}
.zw-spread-horseshoe > * {
    animation: zwDealFade 0.45s ease both;
}
/* 卡面尺寸：宽度按视口取值，高度按牌面真实比例（图片卡交由 aspect-ratio 自动撑高） */
.zw-spread-horseshoe .tarot-card {
    width: var(--zw-hs-w);
    height: calc(var(--zw-hs-w) * 11 / 7);
}
.zw-spread-horseshoe .tarot-card.zw-img-card { height: auto; }
.zw-spread-horseshoe .lenormand-card {
    width: calc(var(--zw-hs-w) * 5 / 7);
    height: calc(var(--zw-hs-w) * 5 / 7 * 63 / 40);
}
.zw-spread-horseshoe .lenormand-card.zw-img-card { height: auto; }
/* 弧度双变量：rot 倾角 / ty 弧沉（U 形：两端高、中央低）—— 变量挂在单元上，由卡面消费 */
.zw-spread-horseshoe > *:nth-child(1) { --zw-hs-rot: -32deg; --zw-hs-ty: -22px; }
.zw-spread-horseshoe > *:nth-child(2) { --zw-hs-rot: -21deg; --zw-hs-ty: -12px; }
.zw-spread-horseshoe > *:nth-child(3) { --zw-hs-rot: -11deg; --zw-hs-ty: -4px; }
.zw-spread-horseshoe > *:nth-child(4) { --zw-hs-rot: 0deg;   --zw-hs-ty: 6px; }
.zw-spread-horseshoe > *:nth-child(5) { --zw-hs-rot: 11deg;  --zw-hs-ty: -4px; }
.zw-spread-horseshoe > *:nth-child(6) { --zw-hs-rot: 21deg;  --zw-hs-ty: -12px; }
.zw-spread-horseshoe > *:nth-child(7) { --zw-hs-rot: 32deg;  --zw-hs-ty: -22px; }
/* 卡面变换：弧沉 + 绕自身中心旋转（中心原点的下探量 (W/2)sin|θ|−(H/2)(1−cosθ)，
   远小于绕底心旋转，且卡面视觉中心沿 U 形弧线排布） */
.zw-spread-horseshoe .tarot-card,
.zw-spread-horseshoe .lenormand-card {
    animation: none;
    opacity: 1;
    transform: translateY(var(--zw-hs-ty, 0px)) rotate(var(--zw-hs-rot, 0deg));
    transform-origin: 50% 50%;
}
/* 标签统一让位：覆盖最大倾角下探（140px 卡 ≈ 7px）+ 视觉间距，
   七个标签严丝合缝落在同一水平线上，永不被倾牌下角压住 */
.zw-spread-horseshoe .zw-pos-tag {
    margin-top: 13px;
}

/* 镜像牌阵：两牌左右对照，微微相向倾斜 */
.zw-spread-pair {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 1.1rem 0 1.4rem;
}
.zw-spread-pair > *:nth-child(1) { transform: rotate(-4deg) translateY(6px); }
.zw-spread-pair > *:nth-child(2) { transform: rotate(4deg) translateY(6px); }

/* 抉择牌阵：顶部现况为体，左右两列各陈一条路径 */
.zw-spread-choice {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.5rem 1.1rem;
    justify-content: center;
    align-items: start;
    padding: 1rem 0;
}
.zw-spread-choice > *:nth-child(1) { grid-area: 1 / 2; }
.zw-spread-choice > *:nth-child(2) { grid-area: 2 / 1; }
.zw-spread-choice > *:nth-child(3) { grid-area: 3 / 1; }
.zw-spread-choice > *:nth-child(4) { grid-area: 2 / 3; }
.zw-spread-choice > *:nth-child(5) { grid-area: 3 / 3; }

/* 牌阵布局窄屏回落：马蹄收拢换行、取消弧线旋转，网格自动缩牌 */
@media (max-width: 640px) {
    .zw-spread-horseshoe {
        flex-wrap: wrap;
        gap: 0.4rem 0.3rem;
        padding: 1rem 0 1.4rem;
    }
    .zw-spread-horseshoe .tarot-card,
    .zw-spread-horseshoe .lenormand-card {
        transform: none;
    }
    /* 换行布局恢复基础卡尺寸（与其它牌阵窄屏观感一致） */
    .zw-spread-horseshoe .tarot-card { width: 100px; height: 160px; }
    .zw-spread-horseshoe .lenormand-card { width: 80px; height: 124px; }
    .zw-spread-horseshoe .zw-pos-tag { margin-top: 0; }
    .zw-spread-pair {
        gap: 0.8rem;
    }
    .zw-spread-pair > * { transform: none; }
    .zw-spread-cross,
    .zw-spread-h,
    .zw-spread-diamond,
    .zw-spread-hexagram,
    .zw-spread-choice {
        gap: 0.4rem;
    }
}
@keyframes zwDealFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ------------------------------------------------------------
   5. 凯尔特十字牌阵（十张 · 经典全貌）
   — 中央十字：1当前状况居中，2障碍或挑战横置其上（旋转90°），
     3潜在影响居上，5近期未来居左，6远期未来居右，4过去的基础居下
   — 右侧权杖纵列：7你的感受 → 8对方的感受 → 9希望或恐惧 → 10最终结果
   ------------------------------------------------------------ */
.zw-spread-celtic {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 2.4rem 2rem;
    justify-content: center;
    align-items: start;
    padding: 1rem 0;
}
/* 阵位落格（nth-child 顺序 = 抽牌落位顺序，与 PDF SPREAD_GRID 一一对应） */
.zw-spread-celtic > *:nth-child(1)  { grid-area: 3 / 2; } /* 1 当前状况：十字中心 */
.zw-spread-celtic > *:nth-child(2)  { grid-area: 3 / 2; z-index: 5; } /* 2 障碍或挑战：同格横置其上 */
.zw-spread-celtic > *:nth-child(3)  { grid-area: 2 / 2; } /* 3 潜在影响：居上 */
.zw-spread-celtic > *:nth-child(4)  { grid-area: 4 / 2; } /* 4 过去的基础：居下 */
.zw-spread-celtic > *:nth-child(5)  { grid-area: 3 / 1; } /* 5 近期未来：居左 */
.zw-spread-celtic > *:nth-child(6)  { grid-area: 3 / 3; } /* 6 远期未来：居右 */
.zw-spread-celtic > *:nth-child(7)  { grid-area: 1 / 4; } /* 7 你的感受：权杖列首 */
.zw-spread-celtic > *:nth-child(8)  { grid-area: 2 / 4; }
.zw-spread-celtic > *:nth-child(9)  { grid-area: 3 / 4; }
.zw-spread-celtic > *:nth-child(10) { grid-area: 4 / 4; } /* 10 最终结果：权杖列尾 */
/* 2号牌横置：绕卡心旋转90°。
   用独立 rotate 属性而非 transform —— 它与发牌动画 cardDealIn 的 transform
   各自独立、相互复合，动画结束后仍保持横置，亦不干扰翻牌的 inner rotateY */
.zw-spread-celtic > *:nth-child(2) .tarot-card {
    rotate: 90deg;
}
/* 同格叠放的点击命中修复：2号牌的格子（cell）并未随卡旋转，仍是一个完整竖向
   矩形盖在1号牌整格之上（z-index:5）。若不处理，点击1号牌露出横置牌外的
   上下边缘时，命中的是2号牌格子的透明区域 —— closest('.tarot-card') 向上
   找不到祖先（牌是格子的子元素），返回 null，点击被吞，1号牌永远翻不开。
   修复：格子整体对指针事件透明，仅在其横置牌本体上恢复响应 ——
   横置牌的可见横带仍可点击翻牌，露出的1号牌上下部分亦恢复可点。 */
.zw-spread-celtic > *:nth-child(2) {
    pointer-events: none;
}
.zw-spread-celtic > *:nth-child(2) .tarot-card {
    pointer-events: auto;
}
/* 十字纵向居中对位：十字六牌整体上移半行距 —— 权杖列（第1-4行）较十字（第2-4行）
   上下各溢出半行，权杖列以十字为轴对称，与参考图一致。
   上移量 = -50%格高 - 半行距：各格结构一致（卡+间距+标签）格高全阵相同，
   故 -50% 对全体统一；行距为常量（2.4rem 之半 = 1.2rem），合起来恰为半行距。
   仍用独立 translate 属性，不触碰卡面自身的动画与翻牌变换 */
.zw-spread-celtic > *:nth-child(-n+6) { translate: 0 calc(-50% - 1.2rem); }
/* 权杖列与十字区拉开间距（列间距之外再让半步） */
.zw-spread-celtic > *:nth-child(n+7) { margin-left: 1.2rem; }
/* 1/2号牌同格双标注：一上一下（与参考图一致）—— 1号标签提至牌对上方
   （0.4rem 净距），2号标签留在流内正下方，恰落在本格让出的标签位，
   一上一下两不相叠，亦不与3/4号牌标注争位。
   1号标签用绝对定位而非相对定位：相对定位的百分比 top 在自动高度
   容器中解析为 0（实测不上移）；绝对定位的 bottom 百分比依“定位
   包含块”解析可靠 —— bottom: 100% 即标签底贴本格顶，随格高自适应
   各断点卡高。1号格同时改 align-self: stretch 取整行高：标签出流后
   格高不缩，与其余各格保持一致，上面 -50% 半行距上移才不偏 */
.zw-spread-celtic > *:nth-child(1) {
    position: relative;   /* 作为1号标签的定位包含块 */
    align-self: stretch;  /* 格高取整行，出流不缩格，-50% 上移量与各格一致 */
}
.zw-spread-celtic > *:nth-child(1) .zw-pos-tag {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    translate: -50% 0;    /* 水平居中，与流内各标签一致 */
}
/* 卡面尺寸：横置牌视觉溢出 = (卡高-卡宽)/2，已小于列间距，不压邻牌 */
.zw-spread-celtic .tarot-card { width: 92px; height: 153px; }
.zw-spread-celtic .tarot-card.zw-img-card { height: auto; }
/* 第十张发牌延迟补齐（基础序列只到第9格） */
.zw-spread-celtic > .zw-spread-cell:nth-child(10) { --zw-deal-delay: 1.35s; }

@media (min-width: 768px) {
    .zw-spread-celtic { gap: 2.4rem 2.75rem; }
    .zw-spread-celtic > *:nth-child(n+7) { margin-left: 2rem; }
    .zw-spread-celtic .tarot-card { width: 120px; height: 200px; }
}
@media (min-width: 992px) {
    .zw-spread-celtic .tarot-card { width: 132px; height: 220px; }
}
/* 窄屏：仍保持经典全貌（十字 + 右侧权杖纵列），卡面随视口等比缩放，
   不再把权杖四牌折成十字下方两列 —— 与参考图结构始终一致。
   列距 5.6vw ≥ 横置2号牌溢出 (卡高-卡宽)/2 = 5vw，不压邻牌；
   行距 2rem（半行距 1rem 喂给十字上移量），并为1号牌上提标签留出净距 */
@media (max-width: 640px) {
    .zw-spread-celtic {
        grid-template-columns: repeat(4, auto);
        gap: 2rem 5.6vw;
        padding: 0.7rem 0 0.9rem;
    }
    .zw-spread-celtic > *:nth-child(-n+6) { translate: 0 calc(-50% - 1rem); }
    .zw-spread-celtic .tarot-card { width: 15vw; height: 25vw; }
    .zw-spread-celtic .tarot-card.zw-img-card { height: auto; }
    .zw-spread-celtic > *:nth-child(n+7) { margin-left: 2.2vw; }
    /* 窄卡之下缩标签字号、放宽至卡宽128%居中，避免五字标签被截断 */
    .zw-spread-celtic .zw-pos-tag {
        font-size: 0.58rem;
        padding: 0.1rem 0.28rem;
        letter-spacing: 0.03em;
        max-width: 128%;
    }
}

/* ------------------------------------------------------------
   5. 数字直选（2026-09 新增）
   —— 点击未填虚线牌位 → 输入牌序号（扇形牌堆自左向右）直接选牌
   （仅交互与样式，不涉及任何占卜算法）
   ------------------------------------------------------------ */
/* 扇形牌堆右下角序号小签：与输入序号一一对应 */
.zw-fan-pos {
    position: absolute;
    right: 2px;
    bottom: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    box-sizing: border-box;
    border-radius: 8px;
    background: rgba(var(--bg-rgb), 0.78);
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    color: var(--color-gold-light);
    font-family: var(--font-display);
    font-size: 0.54rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
/* 悬停 / 选中态时序号小签随之提亮 */
.zw-fan-card:hover .zw-fan-pos,
.zw-fan-card:focus-visible .zw-fan-pos {
    background: rgba(var(--bg-rgb), 0.92);
    border-color: rgba(var(--accent-light-rgb), 0.7);
}

/* 未填牌位的输入态：虚线转为实线亮框 */
.zw-pick-slot-box.zw-slot-inputting {
    border-style: solid;
    border-color: rgba(var(--accent-light-rgb), 0.85);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.3);
    cursor: text;
}
.zw-pick-slot-box.zw-slot-inputting .zw-slot-num { display: none; }
.zw-slot-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--color-gold);
    font-family: var(--font-display);
    /* ≥16px：避免 iOS 聚焦时页面缩放 */
    font-size: 1.05rem;
    text-align: center;
    outline: none;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    z-index: 1;
}
.zw-slot-input::placeholder {
    color: rgba(var(--accent-rgb), 0.45);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
}
/* 序号无效（越界 / 已选）：红显轻晃 */
.zw-pick-slot-box.zw-slot-err {
    border-color: var(--color-red-light);
    box-shadow: 0 0 12px rgba(220, 90, 90, 0.35);
    animation: zwSlotErr 0.32s ease;
}
@keyframes zwSlotErr {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}