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

/* ------------------------------------------------------------
   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.72s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--zw-fd, 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);
}
/* 入阵散开：每张牌自「扇心一叠」处荡开至扇位（--zw-fx 为各自起点偏移）——
   与洗牌关卡收场「万牌归一」之叠无缝相接：叠牌散作扇阵，完美对齐 */
@keyframes zwFanDeal {
    0% {
        opacity: 0;
        transform: translate(var(--zw-fx, 0px), 0px) rotate(0deg) scale(0.96);
    }
    16% { opacity: 1; }
    100% { opacity: 1; }
}

/* 洗牌关卡持场期间注入的扇阵：入场动画整体跳过——
   「一叠滑至扇心、整叠展开作一扇」已在洗牌台上全程演毕（zw-stage-glide/bloom），
   幕布撤去时扇阵须静止就位于同款形态，不得再自行散开一遍 */
.zw-fan-instant .zw-fan-card { animation: none !important; }

/* 两侧渐隐遮罩与滑动提示 */
.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); }
}

/* ------------------------------------------------------------
   6. 洗牌前置关卡 · 天光注灵（2026-10 重制）
   —— 「开始洗牌」提交前置仪式：长按牌堆引天光注入 → 整副牌背铺开 →
      自由滑动洗牌（牌缘随次数渐亮）→ 移交 AJAX 提交链进入抽牌界面
   （z-index 低于 .cast-overlay 的 9998：关卡收场提交时由抽牌动画接管）
   ------------------------------------------------------------ */
.zw-shuffle-stage {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.32s ease;
    touch-action: none;            /* 长按 / 滑动期间锁死页面滚动手势 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;   /* iOS 长按不弹系统菜单 */
    font-family: var(--font-body);
    --zw-dw: min(30vw, 138px);     /* 注灵牌堆宽度（高度按牌面比例推导） */
}
.zw-shuffle-stage.zw-stage-enter { opacity: 1; }
/* 撤幕入阵：抽牌之阵已就，幕布纯淡出徐徐隐去——
   展成之扇与幕后扇阵像素级同位，无缩放方免同位双影 */
.zw-shuffle-stage.zw-stage-leave {
    opacity: 0;
    transition: opacity 0.46s ease;
}

/* 幕布：随充能微微透亮，如夜幕初染晨曦 */
.zw-shuffle-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 34%,
            rgba(var(--accent-rgb), calc(0.06 + var(--zw-charge, 0) * 0.12)), transparent 62%),
        radial-gradient(ellipse at 50% 108%,
            rgba(var(--accent-rgb), 0.07), transparent 55%),
        rgba(var(--bg-deep-rgb), 0.985);
}

/* 拂尘微光：自底部缓缓上浮的暗金微尘 */
.zw-motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zw-motes i {
    position: absolute;
    bottom: -8px;
    left: var(--zw-ml, 50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--accent-light-rgb), 0.55);
    opacity: 0;
    animation: zwMoteRise var(--zw-ms, 10s) linear infinite;
    animation-delay: var(--zw-md, 0s);
}
@keyframes zwMoteRise {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: calc(0.16 + var(--zw-charge, 0) * 0.5); }
    82%  { opacity: calc(0.09 + var(--zw-charge, 0) * 0.34); }
    100% { transform: translate(16px, -72vh); opacity: 0; }
}

/* 顶栏：题名 + 返回 */
.zw-shuffle-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem 0.4rem;
}
.zw-shuffle-title {
    font-family: var(--font-display);
    color: var(--color-gold-light);
    font-size: 1.02rem;
    letter-spacing: 0.22em;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.zw-shuffle-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--border-rgb), 0.7);
    background: rgba(var(--surface-rgb), 0.4);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.zw-shuffle-close:hover,
.zw-shuffle-close:focus-visible {
    color: var(--color-gold-light);
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
    outline: none;
}

/* 中部：洗牌牌桌（注灵法域已提升至舞台层整屏铺展） */
.zw-shuffle-body { position: relative; flex: 1; min-height: 0; }
/* 注灵法域：铺满整屏，牌堆正落于屏幕正中（读数/提示悬挂牌下，不入居中排布） */
.zw-shuffle-energy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    pointer-events: none;   /* 点击透传：不挡顶栏返回钮（牌堆自身恢复可点） */
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.zw-shuffle-stage.zw-phase-b .zw-shuffle-energy {
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
}
/* 入阵后注灵法域整体退隐：压掉牌堆自身的 pointer-events:auto——
   法域绘制于牌桌之上，隐形的牌堆若仍可命中，会盖在牌桌中央吞掉滑动洗牌手势 */
.zw-shuffle-stage.zw-phase-b .zw-shuffle-energy .zw-energy-deck { pointer-events: none; }

/* 天光光柱：自穹顶垂落的锥形光幕（高度/落点由 JS 量测写入） */
.zw-beam {
    position: absolute;
    left: 50%;
    top: -2%;
    width: calc(var(--zw-dw) * 1.7);
    height: var(--zw-beam-h, 34%);
    transform: translateX(-50%);
    clip-path: polygon(40% 0, 60% 0, 88% 100%, 12% 100%);
    /* 六级渐变衰减：消除低透明度区的色带断层，光柱如纱如雾 */
    background: linear-gradient(to bottom,
        rgba(var(--accent-light-rgb), 0) 0%,
        rgba(var(--accent-light-rgb), calc(0.018 + var(--zw-charge, 0) * 0.055)) 12%,
        rgba(var(--accent-light-rgb), calc(0.05 + var(--zw-charge, 0) * 0.115)) 32%,
        rgba(var(--accent-light-rgb), calc(0.08 + var(--zw-charge, 0) * 0.165)) 56%,
        rgba(var(--accent-light-rgb), calc(0.06 + var(--zw-charge, 0) * 0.125)) 78%,
        rgba(var(--accent-light-rgb), 0) 100%);
    filter: blur(9px);
    opacity: calc(0.35 + var(--zw-charge, 0) * 0.65);
    pointer-events: none;
}
.zw-beam::before {  /* 光柱内芯亮线 */
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(45.5% 0, 54.5% 0, 70% 100%, 30% 100%);
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, calc(0.03 + var(--zw-charge, 0) * 0.1)) 55%,
        rgba(255, 255, 255, 0));
    filter: blur(3px);
}
.zw-shuffle-stage.zw-charging .zw-beam { animation: zwBeamBreath 1.7s ease-in-out infinite; }
@keyframes zwBeamBreath {
    0%, 100% { opacity: calc(0.52 + var(--zw-charge, 0) * 0.42); }
    50%      { opacity: calc(0.78 + var(--zw-charge, 0) * 0.22); }
}

/* 天光流华：光柱中坠向牌堆的细碎光屑 */
.zw-stream {
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--zw-dw) * 0.85);
    height: var(--zw-beam-h, 34%);
    transform: translateX(-50%);
    overflow: hidden;
    opacity: var(--zw-charge, 0);
    pointer-events: none;
}
.zw-stream i {
    position: absolute;
    top: -12px;
    left: calc(50% + var(--zw-sx, 0px));
    width: 2.5px;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(to bottom,
        rgba(var(--accent-light-rgb), 0),
        rgba(var(--accent-light-rgb), 0.95));
    opacity: 0;
    animation: zwSparkFall var(--zw-ss, 2s) linear infinite;
    animation-delay: var(--zw-sd, 0s);
}
@keyframes zwSparkFall {
    0%   { transform: translateY(0) scaleY(0.6); opacity: 0; }
    12%  { opacity: calc(0.35 + var(--zw-charge, 0) * 0.6); }
    78%  { opacity: calc(0.22 + var(--zw-charge, 0) * 0.42); }
    100% { transform: translateY(var(--zw-fall, 180px)) scaleY(1); opacity: 0; }
}

/* 注灵法域：牌堆居中，四隅界印拱卫 */
/* ============================================================
   万牌归宗：入场过渡——点击"开始洗牌"后，十二道牌影自屏外
   四面八方旋飞而来，于能量法域中央叠成一堆；随后牌堆弹出、
   灵波扩散，长按注灵随之启幕（纯视觉叠加层，不拦任何手势）
   ============================================================ */
.zw-converge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--zw-dw);
    height: calc(var(--zw-dw) / var(--zw-aspect, 0.6));
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
}
.zw-converge i {
    position: absolute;
    inset: 0;
    border-radius: 9px;
    background-image:
        var(--zw-back, none),
        radial-gradient(circle at 50% 38%,
            rgba(var(--accent-rgb), 0.28),
            rgba(var(--bg-deep-rgb), 0.92) 82%);
    background-size: cover;
    border: 1.5px solid rgba(var(--gold-dark-rgb), 0.9);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    opacity: 0;
    /* 静置态：屏外起点悬停（zw-converge-run 后由动画接管） */
    transform: translate(var(--zw-cx, 0px), var(--zw-cy, 0px))
        rotate(var(--zw-crot, 0deg)) scale(var(--zw-cs, 1));
    will-change: transform, opacity;
}
.zw-shuffle-stage.zw-converge-run .zw-converge i {
    animation: zwConverge 0.72s cubic-bezier(0.3, 0.66, 0.28, 1) var(--zw-cd, 0ms) both;
}
@keyframes zwConverge {
    0% {
        transform: translate(var(--zw-cx, 0px), var(--zw-cy, 0px))
            rotate(var(--zw-crot, 0deg)) scale(var(--zw-cs, 1));
        opacity: 0;
    }
    12%  { opacity: 0.92; }
    68%  { opacity: 0.92; }
    100% {
        /* 归位入叠：微偏角收势，最后淡出融入牌堆 */
        transform: translate(0, 0) rotate(var(--zw-crot2, 0deg)) scale(0.98);
        opacity: 0;
    }
}
/* 汇聚既成：两道灵波自牌堆荡开 */
.zw-converge-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--zw-dw) * 1.3);
    height: calc(var(--zw-dw) * 1.3);
    margin: calc(var(--zw-dw) * -0.65) 0 0 calc(var(--zw-dw) * -0.65);
    border-radius: 50%;
    border: 1.5px solid rgba(var(--accent-light-rgb), 0.55);
    opacity: 0;
    pointer-events: none;
}
.zw-shuffle-stage.zw-converge-run .zw-converge-ring {
    animation: zwConvergeRing 0.9s ease-out 0.66s both;
}
.zw-shuffle-stage.zw-converge-run .zw-converge-ring.zw-ring-2 {
    animation-delay: 0.84s;
}
@keyframes zwConvergeRing {
    0%   { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2.7); opacity: 0; }
}
/* 汇聚期间牌堆隐匿，灵波荡开之际弹出（both 回填 0% 帧：先隐后现） */
.zw-shuffle-stage.zw-converge-run .zw-energy-stagebox {
    animation:
        zwDeckIn 0.5s cubic-bezier(0.34, 1.45, 0.64, 1) 0.56s both,
        zwDeckFloat 5.6s ease-in-out 1.4s infinite;
}
@keyframes zwDeckIn {
    0%   { opacity: 0; transform: translateY(12px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.zw-energy-stagebox {
    position: relative;
    width: calc(var(--zw-dw) * 1.62);
    height: calc(var(--zw-dw) / var(--zw-aspect, 0.6) + 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zwDeckFloat 5.6s ease-in-out infinite;
}
/* 结界环：一环细线自四隅界印间穿行而过，随充能渐显——
   界印不再是孤立的角饰，环印相扣自成法阵 */
.zw-energy-stagebox::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), calc(0.09 + var(--zw-charge, 0) * 0.30));
    box-shadow:
        0 0 12px rgba(var(--accent-rgb), calc(var(--zw-charge, 0) * 0.10)),
        inset 0 0 12px rgba(var(--accent-rgb), calc(var(--zw-charge, 0) * 0.08));
    pointer-events: none;
}
@keyframes zwDeckFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* 伪触觉微震：Safari 全系无 Vibration API，界印点亮/注满时能量区轻颤一记，
   与 WebAudio 低频脉冲（zw-cards.js zwHaptic）合成"落印"触感 */
.zw-shuffle-energy.zw-haptic { animation: zwHapticShake 0.15s linear; }
@keyframes zwHapticShake {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-1.5px, 0.9px); }
    50%      { transform: translate(1.3px, -0.7px); }
    80%      { transform: translate(-0.7px, 0.4px); }
}

/* 牌堆：三张牌背错叠，随充能增辉、微胀（法域透传点击后，牌堆恢复可按） */
.zw-energy-deck {
    position: relative;
    width: var(--zw-dw);
    height: calc(var(--zw-dw) / var(--zw-aspect, 0.6));
    cursor: pointer;
    outline: none;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transform: scale(calc(0.97 + var(--zw-charge, 0) * 0.06));
    transition: transform 0.18s ease;
}
.zw-energy-deck:focus-visible {
    outline: 2px solid rgba(var(--accent-light-rgb), 0.55);
    outline-offset: 7px;
    border-radius: 12px;
}
/* 牌堆辉光：多级径向光晕（纯渐变自带抖动渐变，无 GPU 大模糊的锯齿/色带之忧）。
   旧法 42~48px 大半径 box-shadow 在移动端近似渲染，边缘崩坏如廉价贴图；
   新法五级衰减模拟真实光衰曲线：近处炽亮、远处绵长，随充能徐徐增辉 */
.zw-energy-deck::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 236%;
    height: 204%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(var(--accent-light-rgb), calc(0.15 + var(--zw-charge, 0) * 0.34)) 0%,
        rgba(var(--accent-light-rgb), calc(0.095 + var(--zw-charge, 0) * 0.235)) 22%,
        rgba(var(--accent-light-rgb), calc(0.05 + var(--zw-charge, 0) * 0.155)) 40%,
        rgba(var(--accent-rgb), calc(0.026 + var(--zw-charge, 0) * 0.085)) 57%,
        rgba(var(--accent-rgb), calc(0.011 + var(--zw-charge, 0) * 0.037)) 73%,
        rgba(var(--accent-rgb), 0) 86%);
    z-index: -1;
    pointer-events: none;
}
/* 天光落于牌上：牌顶受光的白炽洗光——光柱有了落点，光与牌不再是两层皮 */
.zw-energy-deck::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -16px;
    width: 152%;
    height: 58px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 44%,
        rgba(255, 255, 255, calc(0.045 + var(--zw-charge, 0) * 0.13)) 0%,
        rgba(var(--accent-light-rgb), calc(0.075 + var(--zw-charge, 0) * 0.24)) 32%,
        rgba(var(--accent-light-rgb), calc(0.028 + var(--zw-charge, 0) * 0.095)) 56%,
        rgba(var(--accent-rgb), 0) 76%);
    filter: blur(3px);
    z-index: 3;
    pointer-events: none;
}
.zw-deck-card {
    position: absolute;
    inset: 0;
    border-radius: 9px;
    background-image:
        var(--zw-back, none),
        radial-gradient(circle at 50% 38%,
            rgba(var(--accent-rgb), 0.28),
            rgba(var(--bg-deep-rgb), 0.92) 82%);
    background-size: cover;
    border: 1.5px solid rgba(var(--gold-dark-rgb), 0.9);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.zw-deck-c2 { transform: translate(-8px, 5px) rotate(-4.5deg); }
.zw-deck-c3 { transform: translate(9px, 7px) rotate(5deg); }
.zw-deck-c1 {
    z-index: 2;
    filter: brightness(calc(0.92 + var(--zw-charge, 0) * 0.42));
    /* 辉光主体已移至牌堆 ::before 径向光晕（大半径阴影移动端锯齿崩坏）；
       此处仅留小半径投影 + 贴牌灵光 + 高能时的内透辉——小模糊渲染干净利落 */
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.55),
        0 0 12px rgba(var(--accent-light-rgb), calc(0.08 + var(--zw-charge, 0) * 0.30)),
        inset 0 0 10px rgba(var(--accent-light-rgb), calc(var(--zw-charge, 0) * 0.16));
    transition: filter 0.2s linear, box-shadow 0.2s linear;
}

/* 四隅界印：菱形印玺，每满四分之一点亮一枚 */
.zw-seal {
    position: absolute;
    width: 17px;
    height: 17px;
    transform: rotate(45deg);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.zw-seal::after {
    content: '';
    position: absolute;
    inset: 4.5px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.25);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.zw-seal-tl { top: 0; left: 0; }
.zw-seal-tr { top: 0; right: 0; }
.zw-seal-bl { bottom: 0; left: 0; }
.zw-seal-br { bottom: 0; right: 0; }
.zw-seal.zw-seal-on {
    border-color: rgba(var(--accent-light-rgb), 0.9);
    box-shadow:
        0 0 12px rgba(var(--accent-rgb), 0.45),
        inset 0 0 6px rgba(var(--accent-rgb), 0.25);
}
.zw-seal.zw-seal-on::after {
    background: var(--color-gold-light);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.75);
}
.zw-seal.zw-seal-pop { animation: zwSealPop 0.42s ease; }
@keyframes zwSealPop {
    0%   { transform: rotate(45deg) scale(0.7); }
    55%  { transform: rotate(45deg) scale(1.35); }
    100% { transform: rotate(45deg) scale(1); }
}

/* 牌下灵光：牌堆脚下的椭圆光池——多级衰减 + 轻雾化，光随充能涨起 */
.zw-deck-halo {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: calc(var(--zw-dw) * 2.15);
    height: 48px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 50%,
        rgba(var(--accent-light-rgb), calc(0.15 + var(--zw-charge, 0) * 0.32)) 0%,
        rgba(var(--accent-light-rgb), calc(0.085 + var(--zw-charge, 0) * 0.21)) 32%,
        rgba(var(--accent-rgb), calc(0.038 + var(--zw-charge, 0) * 0.10)) 56%,
        rgba(var(--accent-rgb), 0) 76%);
    filter: blur(4px);
    pointer-events: none;
}

/* 注满瞬间：光柱迸发 + 冲击灵波 + 牌堆绽光 */
.zw-shuffle-stage.zw-stage-charged .zw-beam { animation: zwBeamSurge 0.72s ease-out; }
@keyframes zwBeamSurge {
    0%   { opacity: 1; filter: blur(10px) brightness(1); }
    35%  { filter: blur(8px) brightness(2.1); }
    100% { opacity: 0; filter: blur(12px) brightness(1); }
}
.zw-shuffle-stage.zw-stage-charged .zw-energy-stagebox::after {
    content: '';
    position: absolute;
    inset: 4%;
    border: 1.5px solid rgba(var(--accent-light-rgb), 0.85);
    border-radius: 50%;
    opacity: 0;
    animation: zwShockwave 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
@keyframes zwShockwave {
    0%   { transform: scale(0.7); opacity: 0.95; }
    100% { transform: scale(2.35); opacity: 0; }
}
.zw-shuffle-stage.zw-stage-charged .zw-energy-deck {
    animation: zwDeckFlare 0.66s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zwDeckFlare {
    0%   { transform: scale(1.03); }
    45%  { transform: scale(1.12); }
    100% { transform: scale(1.03); }
}

/* 灵光读数：两侧饰线夹注灵百分比（悬挂牌堆正下方，不挤占居中位） */
.zw-charge-readout {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--zw-dw) / var(--zw-aspect, 0.6) / 2 + 20px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-display);
}
.zw-charge-readout::before,
.zw-charge-readout::after {
    content: '';
    width: 34px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(var(--accent-rgb), 0.55));
}
.zw-charge-readout::after {
    background: linear-gradient(to left, transparent, rgba(var(--accent-rgb), 0.55));
}
.zw-charge-readout b {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-gold-light);
    text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.55);
    min-width: 3.4rem;
    text-align: center;
}
.zw-energy-hint {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--zw-dw) / var(--zw-aspect, 0.6) / 2 + 66px);
    transform: translateX(-50%);
    margin: 0;
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    text-align: center;
    white-space: nowrap;
    min-height: 1.4em;
}
.zw-energy-hint.zw-pulse,
.zw-shuffle-hint.zw-pulse { animation: zwHintPulse 0.5s ease; }

/* 洗牌牌桌：整副牌背自由滑动 */
.zw-shuffle-board {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    transition: opacity 0.4s ease 0.1s;
}
.zw-shuffle-stage.zw-phase-b .zw-shuffle-board {
    opacity: 1;
    pointer-events: auto;
}
.zw-shuffle-board:active { cursor: grabbing; }
.zw-shuffle-board:focus-visible {
    outline: 1px dashed rgba(var(--accent-rgb), 0.45);
    outline-offset: -6px;
}
/* 牌桌灵光：随滑动次数渐盛的中央光域 */
.zw-shuffle-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 44%,
        rgba(var(--accent-rgb), calc(0.05 + var(--zw-glow, 0) * 0.13)), transparent 62%);
    pointer-events: none;
}

/* 牌背：位置/旋转全部由 JS 写入 CSS 变量驱动（牌堆原位不动，滑动只计次重散） */
.zw-shuffle-card {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--zw-cw, 60px);
    height: var(--zw-ch, 100px);
    opacity: 0;
    transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    transition-delay: var(--d, 0ms);
    pointer-events: none;
    will-change: transform;
}
.zw-shuffle-stage.zw-phase-b .zw-shuffle-card { opacity: 1; }
/* 无动画快照（初始中央牌堆落位） */
.zw-shuffle-stage.zw-no-anim .zw-shuffle-card { transition: none !important; }
.zw-shuffle-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    border: 1.5px solid rgba(var(--accent-light-rgb), calc(0.34 + var(--zw-glow, 0) * 0.6));
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.55),
        0 0 calc(5px + var(--zw-glow, 0) * 20px)
            rgba(var(--accent-light-rgb), calc(0.08 + var(--zw-glow, 0) * 0.55));
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
/* 计入一次洗牌：全场牌缘闪光波，依入场时序荡漾开 */
.zw-shuffle-board.zw-flash .zw-shuffle-card img {
    animation: zwEdgeFlash 0.6s ease;
    animation-delay: var(--d, 0ms);
}
@keyframes zwEdgeFlash {
    0%   { filter: brightness(1); }
    28%  { filter: brightness(1.9) saturate(1.35); }
    100% { filter: brightness(1); }
}
/* 洗牌完成：满桌之牌归拢成一叠（万牌归一，静候入阵） */
.zw-shuffle-stage.zw-stage-done .zw-shuffle-card {
    transition-duration: 0.8s;
}
/* 归一熄散光：78 张牌各自的缘光/投影在归拢途中缓缓熄灭——
   归拢后 78 层 box-shadow 完全重叠，alpha 叠至近实心（1-0.45^78≈1），
   会在牌叠四周糊出一圈深黑硬晕，切进法光如崩边；
   故归一之叠尽数熄灭，改由下方 ::after 单层柔和深影托底 */
.zw-shuffle-stage.zw-stage-done .zw-shuffle-card img {
    box-shadow: none;
}
/* 万牌归一法光：满桌灵光敛作一环，拢于牌叠之后徐徐绽放——
   遮罩由 JS 开阵时以「设备物理像素」现烘（--zw-glow-mask：Bayer 抖动光衰图），
   mask-size:100% 与屏幕像素严格 1:1：零重采样，色带无从成环，任何 DPR 皆如雾细腻；
   烘焙未竟 / 失败时回退多层径向渐变（保呈现）；
   遮罩只含 alpha 通道，光色随主题变量填充，一炉热烘通吃所有主题 */
.zw-shuffle-stage.zw-stage-done .zw-shuffle-board::before {
    background: rgba(var(--accent-light-rgb), calc(0.55 + var(--zw-glow, 0) * 0.3));
    -webkit-mask-image: var(--zw-glow-mask, radial-gradient(ellipse 47% 46% at 50% 50%,
        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.62) 28%, rgba(0, 0, 0, 0.30) 52%,
        rgba(0, 0, 0, 0.10) 76%, rgba(0, 0, 0, 0) 100%));
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--zw-glow-mask, radial-gradient(ellipse 47% 46% at 50% 50%,
        rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.62) 28%, rgba(0, 0, 0, 0.30) 52%,
        rgba(0, 0, 0, 0.10) 76%, rgba(0, 0, 0, 0) 100%));
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    animation: zwGlowIn 0.55s ease 0.12s both, zwHoldBreath 2s ease-in-out 0.9s infinite;
}
/* 归一叠深影：整叠牌落于法光之上的唯一投影（柔和一大片，替 78 层重叠阴影），
   绘于法光(::before)之上、牌背(子元素)之下，随法光同步淡入 */
.zw-shuffle-stage.zw-stage-done .zw-shuffle-board::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--zw-cw, 60px);
    height: var(--zw-ch, 100px);
    transform: translate(-50%, -50%);
    border-radius: 7px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.62);
    pointer-events: none;
    animation: zwGlowIn 0.55s ease 0.3s both;
}
@keyframes zwGlowIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* ============ 万牌归一后 · 滑至扇心 → 整叠展开 ============
 * ① 滑至扇心：整张牌桌（一叠牌背 + 法光 + 叠影）一体滑移至幕后抽牌扇阵
 *    的中央牌位（--zw-gx/--zw-gy 由 JS 量取写入）——归一叠与扇位不同
 *    所致的割裂感，于此一步消弭；随后展开时中央牌原地不动即为扇轴 */
.zw-shuffle-stage.zw-stage-glide .zw-shuffle-board {
    transform: translate(var(--zw-gx, 0px), var(--zw-gy, 0px));
    transition: opacity 0.4s ease 0.1s, transform 0.62s cubic-bezier(0.3, 0, 0.16, 1);
    will-change: transform;
}
/* 滑移之际法光屏息（呼吸动画暂停）：遮罩层不与滑移逐帧重复合成；
   展开时 bloom 规则的 animation 简写会重置 play-state，熄散照常 */
.zw-shuffle-stage.zw-stage-glide .zw-shuffle-board::before {
    animation-play-state: paused;
}
/* ② 整叠展开：全员同时起势（--d 距中愈远愈晚一息，总幅仅 0.17s），
 *    是「展开」而非「发牌」——无逐张轮候，一息之间整叠尽展成扇；
 *    每牌之位逐张量取幕后抽牌扇阵的真实落位（JS 像素级对齐）——
 *    性能要旨：只过渡 transform（牌张保持洗牌布局尺寸，以 scale(sx, sy)
 *    渡为抽牌之尺寸）；width/height 过渡会令 78 张牌逐帧重排+重绘（卡顿根源），
 *    纯 transform 全程 GPU 合成。展开既成，幕布「纯淡出」撤去（无缩放，
 *    免同位双影），与幕后早已静止就位的扇阵（zw-fan-instant 跳过其入场动画）
 *    交叉相融，零跳变入阵 */
.zw-shuffle-stage.zw-stage-bloom .zw-shuffle-card {
    transition:
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
    transition-delay: var(--d, 0ms);
}
/* 展开之际：归一法光与叠影随势徐徐熄灭——随整叠荡开渐渐让位 */
.zw-shuffle-stage.zw-stage-bloom .zw-shuffle-board::before {
    animation: zwBloomFade 0.9s ease 0.2s forwards;
}
.zw-shuffle-stage.zw-stage-bloom .zw-shuffle-board::after {
    animation: zwBloomFade 0.9s ease 0.2s forwards;
}
@keyframes zwBloomFade {
    to { opacity: 0; }
}
/* 动效克制（prefers-reduced-motion）：归拢收为短促淡变——JS 侧 gathered
   计时器在 RM 下仅候 240ms 即放行，CSS 0.8s 归拢未半即撤幕会露牌乱势；
   撤幕 0.06s 与 JS 销毁计时（RM 60ms）同步，免截断突兀 */
@media (prefers-reduced-motion: reduce) {
    .zw-shuffle-stage.zw-stage-done .zw-shuffle-card { transition-duration: 0.15s; }
    .zw-shuffle-stage.zw-stage-done .zw-shuffle-foot { transition-delay: 0.05s; }
    .zw-shuffle-stage.zw-stage-done .zw-shuffle-board::before {
        animation-duration: 0.2s, 3s;
        animation-delay: 0.05s, 0.3s;
    }
    .zw-shuffle-stage.zw-stage-done .zw-shuffle-board::after {
        animation-duration: 0.2s;
        animation-delay: 0.1s;
    }
    .zw-shuffle-stage.zw-stage-glide .zw-shuffle-board { transition-duration: 0.4s, 0.12s; }
    .zw-shuffle-stage.zw-stage-bloom .zw-shuffle-card { transition-duration: 0.15s; }
    .zw-shuffle-stage.zw-stage-bloom .zw-shuffle-board::before,
    .zw-shuffle-stage.zw-stage-bloom .zw-shuffle-board::after {
        animation-duration: 0.2s;
        animation-delay: 0s;
    }
    .zw-shuffle-stage.zw-stage-leave { transition-duration: 0.06s; }
}
@keyframes zwHoldBreath {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

/* 底栏：滑动计数 + 进度印点 + 提示 */
.zw-shuffle-foot {
    position: relative;
    padding: 0.4rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.zw-shuffle-stage.zw-phase-b .zw-shuffle-foot { opacity: 1; }
/* 展扇入阵时底栏随之隐去（置于 phase-b 之后以取得优先） */
.zw-shuffle-stage.zw-stage-done .zw-shuffle-foot {
    opacity: 0;
    transition-delay: 0.3s;
}
.zw-swipe-count {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.34rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
}
.zw-swipe-count .zw-swipe-done {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    color: var(--color-muted);
}
.zw-swipe-count b {
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 600;
    color: var(--color-gold-light);
    text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.6);
    display: inline-block;
    min-width: 1.1em;
    text-align: center;
}
.zw-swipe-count b.zw-pop { animation: zwNumPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes zwNumPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.6); }
    100% { transform: scale(1); }
}
.zw-swipe-count i {
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--color-muted);
}
.zw-shuffle-hint {
    margin: 0;
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    min-height: 1.3em;
}

/* ============================================================
   下一步 · 金棕令牌（参考样式：两端斜切六边形 + 对称金棕渐变
   + 细浅金描边 + 白字 + 双四芒星点缀；首洗前完全隐匿）
   ============================================================ */
.zw-next-step {
    --ns-cut: 16px;   /* 两端斜切深度 */
    --ns-h: 47px;     /* 令牌高度 */
    position: relative;
    display: block;
    width: min(320px, 74vw);
    height: var(--ns-h);
    margin: 0.9rem auto 0.1rem;
    padding: 0;
    border: 0;
    /* 外层即"描边"：浅金竖向渐变，被 clip-path 裁出斜切轮廓 */
    background: linear-gradient(180deg,
        rgba(243, 226, 189, 0.98),
        rgba(196, 165, 116, 0.55) 48%,
        rgba(243, 226, 189, 0.94));
    clip-path: polygon(var(--ns-cut) 0, calc(100% - var(--ns-cut)) 0,
        100% 50%, calc(100% - var(--ns-cut)) 100%,
        var(--ns-cut) 100%, 0 50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.42));
    transition: filter 0.22s ease, transform 0.22s ease, opacity 0.45s ease;
}
/* 内芯：内缩 1.5px 承接描边，同形裁切；上光 + 中心深两侧浅对称金棕 */
.zw-next-in {
    position: absolute;
    inset: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.68rem;
    background:
        radial-gradient(130% 170% at 50% -20%, rgba(255, 241, 212, 0.32), transparent 52%),
        linear-gradient(90deg,
            #c9a76b 0%, #93743c 22%, #63491f 50%,
            #93743c 78%, #c9a76b 100%);
    clip-path: polygon(var(--ns-cut) 0, calc(100% - var(--ns-cut)) 0,
        100% 50%, calc(100% - var(--ns-cut)) 100%,
        var(--ns-cut) 100%, 0 50%);
}
.zw-ns-txt {
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-indent: 0.32em; /* 抵消末字距，视觉居中 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}
.zw-ns-star {
    color: #f3e2bd;
    font-size: 0.72rem;
    font-style: normal;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 231, 184, 0.6);
}
/* 首洗前：完全隐匿（不占布局心智，浮现时自下方升起） */
.zw-next-step.zw-next-hidden {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}
.zw-next-step.zw-next-show {
    animation: zwNextIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes zwNextIn {
    0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.zw-next-step:hover {
    filter: drop-shadow(0 4px 13px rgba(0, 0, 0, 0.5)) brightness(1.08);
}
.zw-next-step:active { transform: translateY(1px) scale(0.985); }
.zw-next-step:disabled {
    pointer-events: none;
    filter: saturate(0.55) brightness(0.78);
}

@keyframes zwHintPulse {
    0% { opacity: 0.2; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 窄屏：法域与读数随视口收缩 */
@media (max-width: 480px) {
    .zw-shuffle-title { font-size: 0.92rem; letter-spacing: 0.16em; }
    .zw-energy-hint { font-size: 0.76rem; }
    .zw-shuffle-hint { font-size: 0.75rem; }
    .zw-charge-readout b { font-size: 1.3rem; }
    .zw-swipe-count b { font-size: 1.35rem; }
    .zw-next-step { --ns-cut: 12px; --ns-h: 42px; width: min(280px, 76vw); }
    .zw-ns-txt { font-size: 0.92rem; letter-spacing: 0.26em; text-indent: 0.26em; }
    .zw-ns-star { font-size: 0.64rem; }
    .zw-shuffle-stage { --zw-dw: min(34vw, 118px); }
}

/* 减少动态效果偏好：去掉流转与闪烁，交互保留 */
@media (prefers-reduced-motion: reduce) {
    .zw-motes i,
    .zw-stream i { animation: none !important; opacity: 0 !important; }
    .zw-energy-stagebox,
    .zw-shuffle-stage.zw-charging .zw-beam { animation: none; }
    .zw-shuffle-card { transition-duration: 0.01s !important; transition-delay: 0ms !important; }
    .zw-shuffle-card img { transition-duration: 0.01s !important; }
    .zw-shuffle-board.zw-flash .zw-shuffle-card img { animation: none; }
    .zw-shuffle-stage.zw-stage-charged .zw-energy-deck,
    .zw-shuffle-stage.zw-stage-charged .zw-beam,
    .zw-shuffle-stage.zw-stage-charged .zw-energy-stagebox::after { animation: none; }
    .zw-energy-hint.zw-pulse,
    .zw-shuffle-hint.zw-pulse { animation: none; }
    .zw-seal.zw-seal-pop,
    .zw-shuffle-energy.zw-haptic,
    .zw-swipe-count b.zw-pop { animation: none; }
    /* 万牌归宗过渡：汇聚牌影直接就位（JS 亦不生成），牌堆与灵波静默 */
    .zw-converge,
    .zw-converge-ring { display: none !important; }
    .zw-shuffle-stage.zw-converge-run .zw-energy-stagebox { animation: none; }
    /* 万牌归一法光：静态呈现，不绽放不呼吸 */
    .zw-shuffle-stage.zw-stage-done .zw-shuffle-board::before { animation: none; }
    .zw-next-step.zw-next-show { animation: none; }
}