/* m/style.css — 塔罗秘境 · 前台（暗夜紫金 / 手机端优先）
 * 设计系统：三层表面 · 六档字阶（最小 12px）· 8pt 间距 · 金色只给主 CTA
 * 结构：token → 基础 → 组件（顶栏/首页/洗牌/结果/解读/留资/底栏/历史/toast）
 */

/* ============ 1. 设计 token ============ */
:root{
    /* 表面：三层拉开层次（页面底 / 卡片 / 浮起） */
    --surface-0:#14101f;
    --surface-1:#1c1630;
    --surface-2:#261d40;
    --line:#3a2f5c;
    --line-soft:rgba(232,200,119,.14);

    /* 主色：金 */
    --gold:#e8c877;
    --gold-dim:#c9a24b;
    --glow:rgba(232,200,119,.28);
    --gold-grad:linear-gradient(135deg,#f0d494,#c9a24b);

    /* 文字：三级 */
    --text:#efeaf9;
    --text-2:#a9a0c6;
    --text-3:#6f6790;

    /* 语义色（降饱和，避免报错感） */
    --ok:#6fd39a;
    --ok-bg:rgba(111,211,154,.16);
    --rev:#f0a89a;
    --rev-bg:rgba(224,91,91,.22);

    /* 字阶：六档，最小 12 */
    --fs-xs:12px; --fs-sm:13px; --fs-md:15px;
    --fs-lg:17px; --fs-xl:20px; --fs-2xl:25px;

    /* 间距 8pt */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

    /* 圆角 / 阴影 */
    --r-sm:8px; --r-md:14px; --r-lg:20px;
    --sh-card:0 2px 10px rgba(0,0,0,.35);
    --sh-cta:0 8px 22px var(--glow);

    --font-sans:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    --font-serif:"Songti SC","Noto Serif SC","Source Han Serif SC",SimSun,serif;

    /* 材质噪点：一张 150×150 的 SVG 噪声，平铺出来就是绒布/纸的颗粒 */
    --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ============ 2. 基础 ============ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--surface-0);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.6}
.wrap{max-width:480px;margin:0 auto;padding:0 18px calc(32px + env(safe-area-inset-bottom));min-height:100vh}
.wrap.has-actbar{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
[hidden]{display:none!important}
a{color:var(--gold)}
.serif{font-family:var(--font-serif);font-weight:600}
h1,h2,h3{font-weight:600}

/* ============ 3. 顶栏 ============ */
.top{display:flex;justify-content:space-between;align-items:center;padding:var(--s4) 0 var(--s3)}
.logo{display:flex;align-items:center;gap:var(--s2);color:var(--gold);font-size:var(--fs-md);letter-spacing:1px}
.logo svg{width:20px;height:20px;display:block;flex:0 0 20px}
.his{color:var(--text-2);text-decoration:none;font-size:var(--fs-xs);
    min-height:44px;display:flex;align-items:center;padding:0 var(--s1)}
.tnav{display:flex;align-items:center;gap:var(--s3)}
.tnav .his{padding:0}

/* ============ 4. 首页 hero ============ */
.hero{padding:var(--s4) 0 var(--s5);text-align:center}
.hero h1{font-family:var(--font-serif);font-size:var(--fs-2xl);color:var(--gold);
    letter-spacing:2px;line-height:1.4;font-weight:600}
.hero .sub{color:var(--text-2);font-size:var(--fs-sm);margin-top:var(--s3)}
.chips{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s3);flex-wrap:wrap}
.chip{font-size:var(--fs-xs);color:var(--text-2);border:1px solid var(--line);
    border-radius:20px;padding:var(--s1) 11px}
.chip b{color:var(--text);font-weight:600}

/* 今日一牌卡 */
.today{position:relative;overflow:hidden;display:flex;gap:var(--s3);align-items:center;background:
        linear-gradient(150deg,rgba(232,200,119,.14),rgba(232,200,119,0) 60%),var(--surface-1);
    border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s3);
    box-shadow:var(--sh-card);margin-bottom:var(--s5);cursor:pointer;transition:transform .16s}
/* 纸纹：给这张卡一层纤维质感，和桌布同一套材质语言 */
.today::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:var(--noise);background-size:150px 150px;opacity:.34;mix-blend-mode:overlay}
.today:active{transform:scale(.985)}
.today .face{flex:0 0 74px;width:74px;aspect-ratio:5/8;border-radius:6px;overflow:hidden;
    border:1px solid var(--gold-dim);box-shadow:0 0 14px var(--glow)}
.today .face img{width:100%;height:100%;object-fit:cover;display:block}
.today .body{flex:1;min-width:0}
.today .t1{font-size:var(--fs-md);color:var(--gold);font-weight:600}
.today .t2{font-size:var(--fs-xs);color:var(--text-2);margin:var(--s1) 0 var(--s2);line-height:1.55}
.today .go{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;
    color:#221a33;background:var(--gold-grad);padding:7px 14px;border-radius:20px;box-shadow:0 4px 12px var(--glow)}

/* 分区标题 */
/* 一分钟问事入口：一条窄带。今日一牌是「日课」，这条是「急事」，两者不能长得一样 */
.quickbar{display:flex;align-items:center;gap:var(--s3);margin:calc(var(--s5) * -1 + var(--s2)) 0 var(--s5);
    padding:11px var(--s3);border-radius:var(--r-md);text-decoration:none;
    background:linear-gradient(100deg,rgba(122,96,190,.26),rgba(232,200,119,.10)),var(--surface-1);
    border:1px solid var(--line);transition:transform .16s}
.quickbar:active{transform:scale(.985)}
.qb-ic{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#1a1428;background:linear-gradient(140deg,#f0d68c,#c9a55c);
    box-shadow:0 0 14px rgba(232,200,119,.35)}
/* 闪电用内联 SVG 而不是 emoji：emoji 在安卓/微信里会渲成彩色方块，和站点这套单色符号不是一回事 */
.qb-ic svg{width:16px;height:16px;display:block}
.qb-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qb-tx b{font-size:var(--fs-sm);color:var(--text);font-weight:600}
.qb-tx i{font-style:normal;font-size:var(--fs-xs);color:var(--text-3)}
.qb-go{font-size:var(--fs-xs);color:var(--gold);font-weight:700;white-space:nowrap}

/* 一分钟问事页：标题比首页收一档，把注意力留给方向按钮 */
.hero.quick{padding-bottom:var(--s4)}
.hero.quick h1{font-size:var(--fs-xl)}
.qhint{margin-top:var(--s4);font-size:var(--fs-xs);color:var(--text-3);text-align:center;line-height:1.7}
.qhint a{color:var(--gold-dim);text-decoration:none}

.sec{margin-bottom:var(--s5)}
.sec > .h{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3)}
/* 标题不折行（320 宽下「切牌」曾被拆成两行），说明文字让出空间自己换行 */
.sec > .h b{font-size:var(--fs-lg);color:var(--text);font-weight:600;white-space:nowrap}
.sec > .h i{font-style:normal;font-size:var(--fs-xs);color:var(--text-3);flex:1;min-width:0}

/* 步骤卡（兼容旧结构，用于历史页等） */
.step{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-md);
    padding:var(--s4);margin-bottom:var(--s4)}
.step h2{font-size:var(--fs-md);color:var(--gold-dim);margin-bottom:var(--s3)}
.hint{color:var(--text-2);font-size:var(--fs-sm);text-align:center;padding:var(--s2) 0}

/* 问题类型：两列药丸 */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.qopt{min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--surface-1);
    color:var(--text);font-size:var(--fs-sm);cursor:pointer;transition:.15s;
    display:flex;align-items:center;justify-content:space-between;padding:0 var(--s3);font-family:inherit}
.qopt:active{transform:scale(.98)}
.qopt .ic{color:var(--text-3);font-size:var(--fs-xs)}
.qopt.on{border-color:var(--gold);color:var(--gold);background:var(--surface-2);
    box-shadow:0 0 0 1px var(--glow) inset}
.qopt.on .ic{color:var(--gold)}

/* 输入 */
textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
    color:var(--text);padding:var(--s3);font-size:var(--fs-sm);font-family:inherit;resize:none;min-height:76px}
textarea::placeholder{color:var(--text-3)}
textarea:focus{outline:none;border-color:var(--gold)}

/* ============ 5. 按钮 ============ */
.btnrow{display:flex;gap:var(--s2);margin-top:var(--s3)}
.btn{flex:1;min-height:48px;border:none;border-radius:var(--r-md);background:var(--gold-grad);
    color:#221a33;font-size:var(--fs-md);font-weight:700;cursor:pointer;text-decoration:none;
    text-align:center;display:flex;align-items:center;justify-content:center;
    box-shadow:var(--sh-cta);transition:transform .14s,box-shadow .14s;font-family:inherit}
.btn:active{transform:scale(.975);box-shadow:0 3px 10px var(--glow)}
.btn.ghost{background:var(--surface-2);border:1px solid var(--line);color:var(--text);
    box-shadow:none;font-weight:500}
.btn.ghost:active{transform:scale(.975);background:var(--surface-1)}
.btn:disabled{opacity:.55}
.btn.sm{min-height:44px;font-size:var(--fs-sm)}

/* ============ 6. 牌阵列表 ============ */
.spreads{display:flex;flex-direction:column;gap:9px}
.sp{background:var(--surface-1);border:1px solid var(--line);border-radius:12px;
    padding:var(--s3) var(--s4);cursor:pointer;display:flex;justify-content:space-between;
    align-items:center;gap:var(--s3);transition:.15s}
.sp:active{transform:scale(.99)}
.sp.on{border-color:var(--gold);background:var(--surface-2)}
.sp .l b{font-size:var(--fs-md);color:var(--text);font-weight:600;display:block}
.sp .l p{font-size:var(--fs-xs);color:var(--text-2);margin-top:3px}
.sp .n{color:var(--gold-dim);font-size:var(--fs-xs);white-space:nowrap}

/* ============ 7. 牌桌：铺布 · 洗牌 · 摊牌 · 自己抽 ============ */
/* 桌布：深紫绒布（柔光 + 颗粒 + 内阴影 + 四角金线），牌落在上面像落在真桌上 */
.felt{position:relative;height:330px;margin-top:var(--s2);
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-lg);overflow:hidden;
    background:
        radial-gradient(86% 62% at 50% 16%,rgba(232,200,119,.12),transparent 62%),
        linear-gradient(170deg,#2b2049 0%,#1b1532 58%,#140f25 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -22px 34px rgba(0,0,0,.36),
        0 10px 26px rgba(0,0,0,.36)}
.felt::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background-image:var(--noise);background-size:150px 150px;opacity:.52;mix-blend-mode:overlay}
.felt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    border-radius:inherit;border:1px solid rgba(232,200,119,.10)}
/* 铺开：自上而下展开，前面一道卷轴压过 */
.felt.unrolling{animation:clothOpen 1.05s cubic-bezier(.4,0,.2,1) both}
@keyframes clothOpen{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.felt-roll{position:absolute;left:-2px;right:-2px;height:16px;top:0;z-index:9;
    pointer-events:none;opacity:0;border-radius:4px;
    transform:translateY(-16px);
    background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(150,128,210,.44) 36%,rgba(10,5,18,.78));
    box-shadow:0 5px 14px rgba(0,0,0,.6),0 16px 30px rgba(0,0,0,.38)}
.felt.unrolling .felt-roll{animation:rollDown 1.05s cubic-bezier(.4,0,.2,1) both}
@keyframes rollDown{0%{top:0;opacity:1}72%{opacity:.92}100%{top:100%;opacity:0}}
/* 四角金线：铺好后浮出 */
.felt-mark{position:absolute;width:16px;height:16px;opacity:0;z-index:3;
    border:0 solid rgba(232,200,119,.30);transition:opacity .7s .32s}
.felt.ready .felt-mark{opacity:1}
.felt-mark.tl{left:10px;top:10px;border-left-width:1px;border-top-width:1px}
.felt-mark.tr{right:10px;top:10px;border-right-width:1px;border-top-width:1px}
.felt-mark.bl{left:10px;bottom:10px;border-left-width:1px;border-bottom-width:1px}
.felt-mark.br{right:10px;bottom:10px;border-right-width:1px;border-bottom-width:1px}

/* 牌堆 */
.deckbox{position:relative;z-index:3;width:180px;height:288px;cursor:pointer;perspective:900px;
    transition:opacity .3s,transform .3s}
.deckbox.gone{opacity:0;transform:scale(.94);pointer-events:none}
.deckbox::after{content:"";position:absolute;inset:-16px;border-radius:24px;pointer-events:none;
    background:radial-gradient(circle,rgba(232,200,119,.16),transparent 68%);
    animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.4;transform:scale(.97)}50%{opacity:1;transform:scale(1.02)}}
/* 铺好布，牌堆才出现 */
.deckbox.in{animation:deckIn .45s cubic-bezier(.3,1.15,.5,1) both}
@keyframes deckIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.deckcard{position:absolute;inset:0;border-radius:10px;
    border:1px solid rgba(232,200,119,.55);
    background:
        radial-gradient(circle at 50% 34%,rgba(232,200,119,.18),transparent 60%),
        repeating-linear-gradient(45deg,rgba(232,200,119,.055) 0 1px,transparent 1px 8px),
        repeating-linear-gradient(-45deg,rgba(232,200,119,.055) 0 1px,transparent 1px 8px),
        linear-gradient(160deg,#2c2152,#191330);
    box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 20px rgba(232,200,119,.10);
    transition:transform .42s cubic-bezier(.3,.8,.4,1)}
.deckcard::after{content:"✧";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;color:rgba(232,200,119,.72);font-size:26px}
/* 7 张扇形叠放 */
.deckcard.d1{transform:translate(-9px,4px) rotate(-3.2deg)}
.deckcard.d2{transform:translate(-6px,3px) rotate(-2.4deg)}
.deckcard.d3{transform:translate(-3px,2px) rotate(-1.5deg)}
.deckcard.d4{transform:translate(0,0) rotate(0)}
.deckcard.d5{transform:translate(3px,2px) rotate(1.5deg)}
.deckcard.d6{transform:translate(6px,3px) rotate(2.4deg)}
.deckcard.d7{transform:translate(9px,4px) rotate(3.2deg)}
/* 洗牌：左右两半各自抬起、交错落下（错峰 40ms，看得出是一张张压回去的） */
.deckbox.riffle .deckcard{animation:rifA 1.15s cubic-bezier(.36,.02,.3,1) both}
.deckbox.riffle .d2,.deckbox.riffle .d4,.deckbox.riffle .d6{animation-name:rifB}
.deckbox.riffle .d1{animation-delay:.00s}
.deckbox.riffle .d2{animation-delay:.05s}
.deckbox.riffle .d3{animation-delay:.10s}
.deckbox.riffle .d4{animation-delay:.15s}
.deckbox.riffle .d5{animation-delay:.20s}
.deckbox.riffle .d6{animation-delay:.25s}
.deckbox.riffle .d7{animation-delay:.30s}
@keyframes rifA{
    0%{transform:translate(-46px,6px) rotate(-5deg)}
    22%{transform:translate(-62px,-16px) rotate(-7deg)}
    46%{transform:translate(6px,2px) rotate(1.5deg)}
    62%{transform:translate(-60px,-12px) rotate(-6deg)}
    82%{transform:translate(-8px,3px) rotate(-2deg)}
    100%{transform:translate(0,0) rotate(0)}}
@keyframes rifB{
    0%{transform:translate(46px,6px) rotate(5deg)}
    22%{transform:translate(62px,-14px) rotate(7deg)}
    46%{transform:translate(-5px,3px) rotate(-1.5deg)}
    62%{transform:translate(58px,-10px) rotate(6deg)}
    82%{transform:translate(7px,4px) rotate(2deg)}
    100%{transform:translate(0,0) rotate(0)}}
/* 洗完后合拢的轻微回弹 */
.deckbox.settle{animation:settleBump .34s ease-out both}
@keyframes settleBump{0%{transform:scale(1)}42%{transform:scale(1.05,.95)}72%{transform:scale(.985,1.015)}100%{transform:scale(1)}}
.decklabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--gold);font-size:var(--fs-sm);letter-spacing:2px;pointer-events:none;z-index:3}

/* 牌扇：摊开在桌布上的一条，左右拖动浏览，点一张抽出来 */
.fan{position:absolute;inset:0;z-index:4;overflow:hidden;
    touch-action:pan-y;opacity:0;transition:opacity .45s,transform .45s;
    -webkit-user-select:none;user-select:none}
.fan.show{opacity:1}
.fan.settled{opacity:.55;pointer-events:none}
.fan.settled .fcard.up{transform:translateY(var(--ty,0px)) rotate(var(--r,0deg))}.fan.done{opacity:0;transform:translateY(-16px) scale(.985);pointer-events:none}
.fanrow{position:absolute;top:50%;left:50%;width:0;height:154px;margin-top:-77px;
    transform:translateX(var(--x,0px));will-change:transform}
.fcard{position:absolute;top:0;left:calc(var(--i) * var(--ex,18px));width:96px;height:154px;
    border-radius:8px;
    border:1px solid rgba(232,200,119,.40);
    background:
        radial-gradient(circle at 50% 26%,rgba(232,200,119,.14),transparent 60%),
        repeating-linear-gradient(45deg,rgba(232,200,119,.07) 0 1px,transparent 1px 7px),
        repeating-linear-gradient(-45deg,rgba(232,200,119,.07) 0 1px,transparent 1px 7px),
        linear-gradient(158deg,#30245a,#191330);
    box-shadow:-1px 1px 3px rgba(0,0,0,.5),0 6px 14px rgba(0,0,0,.30);
    z-index:calc(var(--i) + 1);
    transform:translateY(var(--ty,0px)) rotate(var(--r,0deg));
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,opacity .18s}
.fcard::before{content:"";position:absolute;inset:4px;border-radius:5px;
    border:1px solid rgba(232,200,119,.20);
    background-image:var(--noise);background-size:60px 60px;opacity:.5;mix-blend-mode:overlay}
.fcard::after{content:"✧";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;font-size:15px;color:rgba(232,200,119,.55)}
.fcard.up{transform:translateY(calc(var(--ty,0px) - 16px)) rotate(var(--r,0deg));
    border-color:rgba(232,200,119,.85);
    box-shadow:-1px 1px 3px rgba(0,0,0,.5),0 16px 26px rgba(0,0,0,.45),0 0 18px rgba(232,200,119,.22)}
.fcard.taken{opacity:0;pointer-events:none}
/* 鼠标端悬停也抬起来，先看清要抽哪张 */
@media(hover:hover){
    .fcard:hover{transform:translateY(calc(var(--ty,0px) - 14px)) rotate(var(--r,0deg));
        border-color:rgba(232,200,119,.72);
        box-shadow:-1px 1px 3px rgba(0,0,0,.5),0 14px 22px rgba(0,0,0,.42),0 0 14px rgba(232,200,119,.18)}
}
/* 飞牌：从牌扇飞到槽位 */
.flycard{position:fixed;z-index:9999;border-radius:8px;pointer-events:none;
    border:1px solid rgba(232,200,119,.6);
    background:radial-gradient(circle at 50% 28%,rgba(232,200,119,.20),transparent 62%),
        linear-gradient(158deg,#322661,#191330);
    box-shadow:0 16px 34px rgba(0,0,0,.55),0 0 20px rgba(232,200,119,.18);
    transform-origin:50% 50%;
    transition:transform .52s cubic-bezier(.3,.85,.28,1),opacity .52s}
.flycard::after{content:"✧";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;font-size:15px;color:rgba(232,200,119,.7)}
.fanhint{position:absolute;left:0;right:0;bottom:9px;z-index:5;pointer-events:none;
    text-align:center;font-size:var(--fs-xs);color:var(--text-2);letter-spacing:.6px}

/* 槽位：抽到的牌按位置落位 */
.slots{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.slot{width:58px;aspect-ratio:5/8;border-radius:var(--r-sm);border:1px dashed rgba(232,200,119,.38);
    display:flex;align-items:center;justify-content:center;color:rgba(232,200,119,.45);
    font-size:var(--fs-xs);background:rgba(232,200,119,.04);transition:.25s}
.slot.got{border-style:solid;border-color:rgba(232,200,119,.55);
    background:radial-gradient(circle at 50% 30%,rgba(232,200,119,.16),transparent 62%),
        linear-gradient(158deg,#2c2152,#191330);
    box-shadow:0 0 16px var(--glow),0 6px 14px rgba(0,0,0,.38);transform:translateY(-2px)}
.slot.got::before{content:"✧";font-size:15px;color:rgba(232,200,119,.75)}
.slot.pop{animation:slotPop .36s cubic-bezier(.3,1.4,.5,1)}
@keyframes slotPop{0%{transform:translateY(2px) scale(.92)}60%{transform:translateY(-4px) scale(1.04)}100%{transform:translateY(-2px) scale(1)}}
.cta{margin-top:var(--s5);display:flex;gap:var(--s2)}

/* ============ 8. 结果页 ============ */
.rmeta{text-align:center;padding:var(--s2) 0 2px}
.rmeta h1{font-family:var(--font-serif);font-size:var(--fs-xl);color:var(--gold);letter-spacing:1px}
.rmeta .q{font-size:var(--fs-sm);color:var(--text);margin-top:7px;line-height:1.5}
.rmeta .time{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--s1)}
/* 自己抽的那几张：把「你抽的牌」写明，仪式才闭环 */
.rmeta .picks{font-size:var(--fs-xs);color:var(--gold-dim);margin-top:var(--s1);
    letter-spacing:.4px;opacity:.9}

/* 牌桌：结果页的牌不再浮在纯色背景上，而是摆在一块绒布桌面上 */
.table{
    position:relative;margin:var(--s4) 0 var(--s2);
    padding:var(--s4) var(--s2) var(--s3);
    border-radius:var(--r-lg);
    background:
        radial-gradient(120% 86% at 24% 4%,rgba(232,200,119,.10),transparent 56%),
        radial-gradient(96% 76% at 84% 100%,rgba(122,96,190,.20),transparent 62%),
        linear-gradient(168deg,#261c41 0%,#1c1531 54%,#150f27 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -22px 34px rgba(0,0,0,.38),
        0 12px 28px rgba(0,0,0,.4);
    animation:clothOpen .8s cubic-bezier(.22,.72,.2,1) both;
}
.table::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background-image:var(--noise);background-size:150px 150px;opacity:.52;mix-blend-mode:overlay}
.table::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    border:1px solid rgba(232,200,119,.10)}
.table .board{margin:0}

/* 牌阵画布：flex 卡片流，固定 8px 间距 → 任意牌数都不重叠 */
.board{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
    align-items:flex-start;margin:var(--s4) 0 var(--s2);position:relative;z-index:1}
.pc{flex:0 0 calc((100% - (var(--cols,3) - 1) * var(--s2)) / var(--cols,3));
    max-width:120px;text-align:center}
.pc .pf{position:relative;width:100%;aspect-ratio:5/8;border-radius:var(--r-sm);overflow:hidden;
    border:1px solid var(--gold-dim);background:var(--surface-1);
    box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 16px rgba(232,200,119,.12);
    cursor:pointer;transition:transform .2s}
.pc .pf:active{transform:scale(.97)}
.pc .inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
    transition:transform .55s cubic-bezier(.3,.8,.4,1)}
.pc.flip .inner{transform:rotateY(180deg)}
.pc .back,.pc .front{position:absolute;inset:0;overflow:hidden;
    -webkit-backface-visibility:hidden;backface-visibility:hidden}
.pc .back{display:flex;align-items:center;justify-content:center;color:rgba(232,200,119,.7);
    font-size:22px;
    background:radial-gradient(circle at 50% 34%,rgba(232,200,119,.20),transparent 62%),
        linear-gradient(160deg,#2c2152,#191330)}
.pc .front{transform:rotateY(180deg);background:var(--surface-1)}
.pc .front img{width:100%;height:100%;object-fit:cover;display:block}
.pc.revpic .front img{transform:rotate(180deg)}
.pc .front .noimg{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:var(--s1);text-align:center;color:var(--gold);
    font-size:var(--fs-xs);gap:var(--s1)}
.pc.revpic .front .noimg{transform:rotate(180deg)}
.pc .badge{position:absolute;left:4px;top:4px;background:var(--rev-bg);color:var(--rev);
    font-size:var(--fs-xs);font-weight:600;padding:1px 6px;border-radius:6px;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pc .pos{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--s2)}
.pc .nm{font-size:var(--fs-xs);color:var(--gold);margin-top:2px}
.pc.hl .pf{box-shadow:0 0 0 2px var(--gold),0 0 22px var(--glow)}

/* 位置导航条 */
.navbar{display:flex;justify-content:center;gap:var(--s5);margin:var(--s3) 0 var(--s4);
    padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    flex-wrap:wrap}
.navbar i{font-style:normal;font-size:var(--fs-xs);color:var(--text-3);position:relative;
    padding-top:11px;cursor:pointer;transition:color .2s}
.navbar i::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:6px;height:6px;border-radius:50%;background:var(--line);transition:.2s}
.navbar i.on{color:var(--gold)}
.navbar i.on::before{background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* 真人入口条：牌阵下方、解读之前 —— 看完牌面那一屏就是咨询意愿最高的时刻 */
.proline{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);
    padding:var(--s3);border-radius:var(--r-md);
    background:linear-gradient(100deg,rgba(232,200,119,.12),rgba(232,200,119,.02) 70%),var(--surface-1);
    border:1px solid var(--line-soft)}
.proline .pl-ic{flex:0 0 auto;color:var(--gold);font-size:var(--fs-sm);line-height:1}
.proline .pl-tx{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--text-2);line-height:1.5}
.proline .pl-btn{flex:0 0 auto;min-height:40px;padding:0 15px;border:none;border-radius:20px;
    background:var(--gold-grad);color:#221a33;font-size:var(--fs-xs);font-weight:700;
    font-family:inherit;cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px var(--glow);
    transition:transform .14s}
.proline .pl-btn:active{transform:scale(.97)}

/* ============ 9. 解读区 ============ */
.reading h2{font-size:var(--fs-lg);color:var(--gold);margin:var(--s4) 0 var(--s3)}
.summary{background:var(--surface-1);border-radius:var(--r-md);padding:var(--s4);
    font-size:var(--fs-sm);line-height:1.8;color:var(--text);margin-bottom:var(--s2);
    display:block;border:none}
.cr{background:var(--surface-1);border-radius:var(--r-md);padding:var(--s4);
    margin-top:var(--s2);border-left:2px solid var(--gold-dim)}
.cr b{color:var(--gold);font-size:var(--fs-md);font-weight:600}
.cr .kw{color:var(--text-2);font-size:var(--fs-xs);margin:5px 0 var(--s2);line-height:1.6}
.cr .mv{font-size:var(--fs-sm);line-height:1.75}
.cr .hint{text-align:left;padding:0}
.tag{display:inline-block;font-size:var(--fs-xs);font-weight:600;padding:1px 7px;
    border-radius:6px;margin-left:6px;vertical-align:1px}
.tag.up{background:var(--ok-bg);color:var(--ok)}
.tag.rev{background:var(--rev-bg);color:var(--rev)}

.advice{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s4);
    margin-top:var(--s3)}
.advice h3{font-size:var(--fs-md);color:var(--gold);margin-bottom:var(--s2);font-weight:600}
.advice p{font-size:var(--fs-sm);white-space:pre-line;line-height:1.8}
.oprow{margin-top:var(--s4)}

/* AI */
.ai-box{margin-top:var(--s5);text-align:center}
.ai-note{font-size:var(--fs-xs);color:var(--text-2);margin-top:var(--s2)}
.ai-text{text-align:left;background:var(--surface-1);border:1px solid var(--line);
    border-radius:var(--r-md);padding:var(--s4);font-size:var(--fs-sm);
    margin-top:var(--s3);white-space:pre-line;line-height:1.8}

/* 留资 */
.lead{margin-top:var(--s4);background:var(--surface-2);border:1px solid var(--line-soft);
    border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--sh-card);
    animation:leadIn .3s ease-out}
@keyframes leadIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lead h3{font-size:var(--fs-md);color:var(--gold);font-weight:600}
.lead p{font-size:var(--fs-sm);color:var(--text);margin:var(--s2) 0 var(--s3);line-height:1.7}
.lead input{width:100%;min-height:46px;background:var(--surface-1);border:1px solid var(--line);
    border-radius:12px;color:var(--text);padding:var(--s2) var(--s3);font-size:var(--fs-sm);
    font-family:inherit}
.lead input::placeholder{color:var(--text-3)}
.lead input:focus{outline:none;border-color:var(--gold)}
.lead-skip{display:block;text-align:center;font-size:var(--fs-xs);color:var(--text-2);
    margin-top:var(--s3);cursor:pointer;min-height:44px;line-height:44px}

/* ============ 10. 底部悬浮操作条（替代遮挡正文的 FAB） ============ */
.actbar{position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:var(--s2) 18px calc(var(--s2) + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(20,16,31,0),rgba(20,16,31,.96) 42%);
    display:flex;gap:var(--s2);max-width:480px;margin:0 auto;pointer-events:none;
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.actbar.on{opacity:1;visibility:visible}
.actbar .a{pointer-events:auto;flex:1;min-height:48px;border-radius:13px;font-size:var(--fs-sm);
    display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
    font-family:inherit;transition:transform .14s}
.actbar .a:active{transform:scale(.98)}
.actbar .a1{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.actbar .a2{border:none;color:#221a33;font-weight:700;background:var(--gold-grad);
    box-shadow:0 6px 16px var(--glow)}

/* ============ 11. 骨架屏 ============ */
.sk-card{flex:0 0 calc((100% - 2 * var(--s2)) / 3);max-width:120px;aspect-ratio:5/8;
    border-radius:var(--r-sm);background:linear-gradient(100deg,var(--surface-1) 30%,var(--surface-2) 50%,var(--surface-1) 70%);
    background-size:220% 100%;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:120% 0}100%{background-position:-20% 0}}
.sk-line{height:13px;border-radius:7px;background:var(--surface-1);margin-top:var(--s2)}

/* ============ 12. 历史 ============ */
.hist{background:var(--surface-1);border:1px solid var(--line);border-radius:12px;
    padding:var(--s3) var(--s4);margin-bottom:var(--s2);display:flex;
    justify-content:space-between;align-items:center;gap:var(--s3)}
.hist .l b{font-size:var(--fs-sm);color:var(--text);font-weight:600}
.hist .l p{font-size:var(--fs-xs);color:var(--text-2);margin-top:2px}
.hist a{font-size:var(--fs-sm);white-space:nowrap}

/* ============ 12.5 我的牌面（用户层自定义） ============ */
.dintro{font-size:var(--fs-sm);color:var(--text-2);line-height:1.75;margin-bottom:var(--s3)}
.dbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    margin-bottom:var(--s3)}
.dcount{font-size:var(--fs-xs);color:var(--gold-dim)}
.dbar .btn{flex:0 0 auto;padding:0 14px}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.dcard{display:flex;flex-direction:column;gap:5px;background:none;border:none;
    padding:0;font-family:inherit;cursor:pointer;text-align:center}
.dthumb{position:relative;display:block;width:100%;aspect-ratio:5/8;border-radius:6px;
    overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
    transition:transform .14s}
.dcard:active .dthumb{transform:scale(.96)}
.dthumb img{width:100%;height:100%;object-fit:cover;display:block}
.dthumb em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--gold);font-style:normal;font-size:var(--fs-sm)}
.dthumb .done{position:absolute;left:3px;top:3px;font-style:normal;font-size:var(--fs-xs);
    background:var(--gold-grad);color:#221a33;font-weight:700;padding:0 5px;border-radius:5px;
    line-height:1.7}
.dname{font-size:var(--fs-xs);color:var(--text-2);line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtip{font-size:var(--fs-xs);color:var(--text-3);line-height:1.7;margin-top:var(--s4);
    text-align:center}

/* 底部弹层：换图 / 恢复默认 */
.psheet{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:flex-end}
.ps-mask{position:absolute;inset:0;background:rgba(8,5,16,.72);animation:psFade .2s ease-out}
.ps-box{position:relative;width:100%;max-width:480px;margin:0 auto;
    background:var(--surface-1);border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:var(--s4) 18px calc(var(--s4) + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(0,0,0,.5);animation:psUp .26s cubic-bezier(.3,.9,.4,1)}
@keyframes psFade{from{opacity:0}to{opacity:1}}
@keyframes psUp{from{transform:translateY(100%)}to{transform:none}}
.ps-title{font-size:var(--fs-md);color:var(--text);font-weight:600;text-align:center;
    margin-bottom:var(--s3)}
.ps-preview{width:96px;aspect-ratio:5/8;margin:0 auto var(--s4);border-radius:var(--r-sm);
    overflow:hidden;border:1px solid var(--gold-dim);box-shadow:0 0 18px var(--glow)}
.ps-preview img{width:100%;height:100%;object-fit:cover;display:block}
.ps-btns{display:flex;flex-direction:column;gap:var(--s2)}
.ps-btns .btn{flex:0 0 auto;width:100%}
.ps-cancel{display:block;width:100%;min-height:46px;margin-top:var(--s3);background:none;
    border:none;color:var(--text-2);font-size:var(--fs-sm);font-family:inherit;cursor:pointer}

/* ============ 13. 页脚 / toast / 海报 ============ */
.foot{margin-top:var(--s6);font-size:var(--fs-xs);color:var(--text-3);
    text-align:center;line-height:1.8;border-top:1px solid var(--line);padding-top:var(--s4)}
/* 分享海报弹层：微信里只能靠长按保存图片，所以必须是 <img> 而不是下载链接 */
.psheet2{position:fixed;inset:0;z-index:82;display:flex;align-items:center;justify-content:center;padding:var(--s4)}
.psheet2[hidden]{display:none}
.ps2-mask{position:absolute;inset:0;background:rgba(8,6,16,.84);backdrop-filter:blur(3px)}
.ps2-box{position:relative;width:100%;max-width:360px;max-height:92vh;display:flex;flex-direction:column;
    background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);
    padding:var(--s3);box-shadow:0 18px 50px rgba(0,0,0,.62)}
.ps2-hd{font-size:var(--fs-sm);color:var(--text-2);text-align:center;padding:var(--s1) 0 var(--s3)}
.ps2-img{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;
    overflow:auto;overscroll-behavior:contain;border-radius:var(--r-sm);background:#0d0a16;padding:var(--s1)}
.ps2-img img{width:auto;max-width:100%;max-height:64vh;display:block;border-radius:var(--r-sm)}
.ps2-btns{display:flex;gap:var(--s2);margin-top:var(--s3)}
.ps2-btns .btn{flex:1}
body.no-scroll{overflow:hidden}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));
    transform:translateX(-50%) translateY(20px);background:rgba(0,0,0,.82);color:#fff;
    padding:10px 18px;border-radius:20px;font-size:var(--fs-sm);opacity:0;
    transition:.25s;pointer-events:none;z-index:99;max-width:80%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#poster{display:none}

/* 桌面预览：手机壳效果 */
@media(min-width:520px){
    body{background:#0f0b1a}
    .wrap{box-shadow:0 0 40px rgba(0,0,0,.45);background:var(--surface-0)}
    .actbar{max-width:480px}
    .dgrid{grid-template-columns:repeat(6,1fr)}
}

/* ============ 14. 细节回修（v2.1） ============ */
/* 单张牌阵：牌面放大，作为视觉主体 */
.board.cols-1 .pc{max-width:164px}
/* 双人合盘两列：给牌留大一点，两个人在同一行上更好对比 */
.board.cols-2 .pc{max-width:152px}
/* AI 按钮：通宽，避免左对齐半宽 */
.ai-box .btn{width:100%}
/* 问题类型为奇数时，最后一个按钮补满整行 */
.qgrid .qopt:last-child:nth-child(odd){grid-column:span 2}
/* 切牌分离幅度加大，仪式感更明确（v2.4 起改由第 15 节的分叠动画承担） */
/* 桌面预览：居中面板加圆角，更像手机 */
@media(min-width:520px){
  .wrap{border-radius:0 0 20px 20px}
  body{padding-top:0}
}

/* ============ 15. 切牌（v2.4） ============
 * 真人洗完牌会把牌推到你面前：「你切一刀」。三段仪式到这一步才闭环 ——
 * 铺布是塔罗师的、洗牌是塔罗师的，刀必须由问卜者自己落。
 * 手势：手指在牌堆上横着划一下，刀口就停在划到的位置；
 * 松手后牌从刀口分开，压在上面那半被抬起、放到下面去，再叠回一叠。
 */
/* touch-action 必须显式声明：默认 auto 下手机把「横着划」判成页面滚动，
   浏览器只发两个 pointermove 就派 pointercancel 把指针流掐断，
   touchmove 还在、pointerup 却永远不来 —— 表现就是「按住划不动，松手什么也没发生」。
   用 pan-y 而不是 none：横向手势归这一刀，纵向仍交给页面滚动，
   用户在牌堆上想上下翻页不会被卡住（斜划被浏览器接管时，JS 有 pointercancel 兜底提交）。 */
.deckbox.cuttable{cursor:ew-resize;touch-action:pan-y;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent}
/* 刀口：一条贴着牌堆的金线，随手指横向移动。
   盒子宽度只有 180，手指容易划到边缘外，所以线只在牌堆内可见，判定用夹取后的比例 */
.cutline{position:absolute;top:-6px;bottom:-6px;left:var(--cutx,50%);width:2px;margin-left:-1px;
    z-index:8;pointer-events:none;opacity:0;border-radius:2px;
    background:linear-gradient(180deg,transparent,rgba(232,200,119,.5) 10%,#fff6dc 50%,rgba(232,200,119,.5) 90%,transparent);
    box-shadow:0 0 10px rgba(232,200,119,.75),0 0 26px rgba(232,200,119,.4);
    transition:opacity .14s ease}
.deckbox.cutting .cutline{opacity:1}
/* 刀口线从字上划过去会糊成一片，划开时先把字收掉 */
.deckbox.cutting .decklabel{opacity:0;transition:opacity .12s}
.deckbox.cut-bottom .cutline{opacity:0;transition:opacity .1s}
/* 起手提示：牌堆外圈先亮一下，告诉手指「这儿可以划」 */
.deckbox.cuttable::after{animation:cutBreathe 1.9s ease-in-out infinite}
@keyframes cutBreathe{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:1;transform:scale(1.03)}}

/* 分开再叠回：原牌堆是刀口右侧那半（下叠），克隆出来的是左侧那半（上叠）。
   两半各自位移 → 上叠抬起、绕到上方 → 落回压住 → 合拢。
   刀口处露出一道「牌口」：一叠纸被切开后，断面上是一层层纸边，这是它看起来
   像一副牌、而不是一张牌被撕开的关键。 */
.deckbox.cut-top::before,.deckbox.cut-bottom::before{content:"";position:absolute;top:1px;bottom:1px;
    width:9px;z-index:9;pointer-events:none;border-radius:2px;opacity:.92;
    background:
        linear-gradient(180deg,rgba(6,3,14,.42),transparent 20%,transparent 80%,rgba(6,3,14,.45)),
        repeating-linear-gradient(180deg,rgba(255,246,220,.44) 0 1px,rgba(12,6,22,.55) 1px 3px);
    box-shadow:0 0 12px rgba(232,200,119,.45),inset 0 0 3px rgba(255,246,220,.32)}
.deckbox.cut-top::before{right:var(--cutr,50%);margin-right:-4px}
.deckbox.cut-bottom::before{left:var(--cutl,50%);margin-left:-4px}
.deckbox.cut-bottom{animation:cutBottom .96s cubic-bezier(.4,0,.2,1) both;pointer-events:none}
@keyframes cutBottom{
    0%,10%{transform:translateX(0)}
    28%,66%{transform:translateX(18px)}
    100%{transform:translateX(0)}}
.deckbox.cut-top{animation:cutTop .96s cubic-bezier(.4,0,.2,1) both;pointer-events:none}
@keyframes cutTop{
    0%,10%{transform:translate(0,0) rotate(0deg)}
    30%{transform:translate(-26px,6px) rotate(-2.4deg)}
    56%{transform:translate(-42px,-36px) rotate(-5.5deg)}
    78%{transform:translate(-10px,-12px) rotate(-1.2deg)}
    100%{transform:translate(0,0) rotate(0deg)}}

/* 只点了一下没划：牌堆左右轻晃一下，告诉他「要横着拉」 */
.deckbox.nudge{animation:cutNudge .42s ease-out both}
@keyframes cutNudge{
    0%,100%{transform:translateX(0)}
    18%{transform:translateX(-5px) rotate(-.6deg)}
    46%{transform:translateX(5px) rotate(.6deg)}
    74%{transform:translateX(-2px)}}

/* 跳过切牌：3.6 秒还没动手才浮出来，不催人 */.cutskip{position:absolute;left:0;right:0;bottom:8px;z-index:6;margin:0 auto;
    width:max-content;max-width:86%;padding:6px 14px;border-radius:999px;
    background:rgba(20,14,38,.7);border:1px solid rgba(232,200,119,.22);
    color:var(--text-2);font-size:var(--fs-xs);letter-spacing:.5px;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cutskip:active{background:rgba(232,200,119,.14)}