/* ============================================================
   塔罗 v1 · 暗黑神秘金 视觉系统(精致化升级)
   克制神秘:鎏金流光 · 雾散显影 · 缓慢揭示 · 星辰缓流
   ============================================================ */
:root{
  --bg:#070617; --bg2:#0C0A24; --panel:#15112E;
  --gold:#D4B05A; --gold-deep:#A8842E; --gold-soft:#8C6E2E;
  --purple:#7B66B5; --purple-deep:#5A4790;
  --rev:#BE4A60; --rev-soft:#7C2F40;
  --text:#EDE6D6; --muted:#9A90B8; --faint:#5E5680;
  --line:rgba(212,176,90,.22);
  --glass:rgba(18,14,38,.62);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",Georgia,serif;
  --sans:"Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --card-w:120px; --card-h:208px;
  --glow:0 0 40px rgba(212,176,90,.20);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--sans); color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(90,71,144,.22), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(168,132,46,.05), transparent 55%),
    radial-gradient(700px 500px at 0% 30%, rgba(123,102,181,.08), transparent 60%),
    linear-gradient(180deg,#070617,#0A0820 60%,#070617);
  background-attachment:fixed; min-height:100vh; min-height:100dvh; line-height:1.6; overflow-x:hidden; overscroll-behavior:none; -webkit-text-size-adjust:100%;
}

/* —— 星空 + 星云 + 流星 —— */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.stars__layer{position:absolute;inset:-50%;}
.stars__layer::before{content:"";position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 20% 30%,#fff,transparent),
  radial-gradient(1px 1px at 70% 60%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 40% 80%,rgba(232,199,106,.9),transparent),
  radial-gradient(1px 1px at 85% 15%,#fff,transparent),
  radial-gradient(1px 1px at 55% 45%,rgba(157,127,224,.9),transparent),
  radial-gradient(1px 1px at 10% 70%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 90% 90%,#fff,transparent);
  background-size:300px 300px;animation:drift 140s linear infinite;}
.stars__layer--2::before{background-size:220px 220px;animation-duration:200s;opacity:.6;}
.stars__layer--3::before{background-size:380px 380px;animation:drift 180s linear infinite,twinkle 5s ease-in-out infinite alternate;}
/* 星云雾气层(v1) */
.nebula{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(40% 30% at 22% 28%,rgba(90,71,144,.11),transparent 70%),
    radial-gradient(36% 28% at 78% 62%,rgba(168,132,46,.06),transparent 70%),
    radial-gradient(32% 26% at 50% 88%,rgba(123,102,181,.08),transparent 70%);
  animation:nebula 70s ease-in-out infinite alternate;}
/* 流星(v1,低频克制) */
.meteor{position:fixed;top:-5%;width:2px;height:2px;background:#fff;border-radius:50%;
  box-shadow:0 0 6px 1px rgba(255,255,255,.9);z-index:0;opacity:0;pointer-events:none;}
.meteor::after{content:"";position:absolute;top:1px;left:1px;width:110px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.85),transparent);}
.meteor--1{left:65%;animation:meteor 11s linear infinite;animation-delay:4s;}
.meteor--2{left:35%;animation:meteor 17s linear infinite;animation-delay:9s;}
@keyframes meteor{0%{transform:translate(0,0) rotate(-54deg);opacity:0}2%{opacity:1}8%{opacity:1;transform:translate(-360px,500px) rotate(-54deg)}9%,100%{opacity:0;transform:translate(-360px,500px) rotate(-54deg)}}
@keyframes nebula{from{transform:scale(1) translate(0,0);opacity:.75}to{transform:scale(1.12) translate(-2%,1%);opacity:1}}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-300px)}}
@keyframes twinkle{from{opacity:.4}to{opacity:1}}

#app{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));}

/* —— 视图/步骤切换:雾散显影 —— */
.view,.step{display:none;animation:mistReveal .7s cubic-bezier(.2,.75,.2,1);}
.view.is-active{display:block;}
.step.is-active{display:block;}
@keyframes mistReveal{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* —— 玻璃拟态(加微光内描边) —— */
.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 8px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 30px rgba(232,199,106,.03);}

/* —— 首页 hero —— */
.hero{text-align:center;padding:44px 0 30px;}
.hero__mark{letter-spacing:.5em;font-size:12px;color:var(--gold);opacity:.85;animation:auraBreathe 4.5s ease-in-out infinite alternate;}
.hero__title{font-family:var(--serif);font-size:clamp(40px,13vw,66px);font-weight:600;letter-spacing:.25em;margin:6px 0;
  background:linear-gradient(120deg,var(--gold-deep),#F5E6B8,var(--gold),var(--gold-deep));
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(232,199,106,.18);
  animation:heroShine 9s linear infinite;}
.hero__sub{color:var(--muted);font-size:13.5px;letter-spacing:.12em;animation:mistReveal .9s ease .25s both;}
@keyframes heroShine{from{background-position:0% 0}to{background-position:200% 0}}
@keyframes auraBreathe{from{opacity:.55;text-shadow:0 0 8px rgba(232,199,106,.3)}to{opacity:1;text-shadow:0 0 18px rgba(232,199,106,.6)}}

/* —— 入口卡片(鎏金脉动) —— */
.entry-grid{display:flex;flex-direction:column;gap:12px;margin:18px 0;}
.entry-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:20px 16px;
  border:1px solid var(--line);border-radius:18px;background:var(--glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text);cursor:pointer;transition:.35s;font-family:inherit;overflow:hidden;}
.entry-card::before{content:"";position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(135deg,transparent 30%,rgba(232,199,106,.18),transparent 70%);
  opacity:0;transition:.4s;pointer-events:none;}
.entry-card__icon{font-size:34px;width:58px;height:58px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(212,176,90,.24),rgba(212,176,90,.05) 62%,transparent 78%);filter:drop-shadow(0 0 10px rgba(232,199,106,.42));transition:.35s;}
.entry-card__name{font-family:var(--serif);font-size:19px;color:var(--gold);letter-spacing:.1em;}
.entry-card__desc{font-size:12px;color:var(--muted);letter-spacing:.04em;}
.entry-card:hover,.entry-card:active{transform:translateY(-3px);border-color:rgba(232,199,106,.5);box-shadow:0 14px 44px rgba(123,95,199,.3),var(--glow);}
.entry-card:hover::before{opacity:1;}
.entry-card:hover .entry-card__icon{transform:scale(1.08);}

.home-intro{padding:18px;font-size:13.5px;color:var(--muted);margin-top:6px;letter-spacing:.03em;}
.home-intro strong{color:var(--gold-soft);}
.muted{color:var(--faint);font-size:12px;}

/* —— 顶栏/步骤指示 —— */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--gold);font-size:22px;cursor:pointer;line-height:1;transition:.25s;}
.icon-btn:hover{box-shadow:var(--glow);}
.stepper{display:flex;gap:8px;justify-content:center;flex:1;}
.stepper__dot{width:8px;height:8px;border-radius:50%;background:rgba(232,199,106,.2);transition:.3s;}
.stepper__dot.is-done{background:var(--gold-deep);}
.stepper__dot.is-active{background:var(--gold);box-shadow:0 0 12px var(--gold);transform:scale(1.3);animation:auraBreathe 2.4s ease-in-out infinite alternate;}
.topbar__title{font-family:var(--serif);color:var(--gold);letter-spacing:.1em;font-size:17px;}
.topbar__spacer{width:36px;}

/* —— 步骤通用 —— */
.step__title{font-family:var(--serif);font-size:24px;color:var(--gold);text-align:center;letter-spacing:.08em;text-shadow:0 0 24px rgba(232,199,106,.15);}
.step__hint{text-align:center;color:var(--muted);font-size:13px;margin:6px 0 20px;letter-spacing:.04em;}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.opt-card{position:relative;padding:22px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--line);
  color:var(--text);cursor:pointer;text-align:center;font-family:inherit;transition:.3s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;}
.opt-card__icon{font-size:34px;display:block;margin-bottom:6px;filter:drop-shadow(0 0 6px rgba(232,199,106,.35));transition:.3s;}
.opt-card__name{color:var(--gold);font-family:var(--serif);font-size:18px;display:block;letter-spacing:.06em;}
.opt-card__desc{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;}
.opt-card:hover{transform:translateY(-2px);border-color:rgba(232,199,106,.55);box-shadow:0 8px 30px rgba(123,95,199,.3);}
.opt-card:hover .opt-card__icon{transform:scale(1.12);}
.opt-card.is-selected{border-color:var(--gold);background:rgba(232,199,106,.1);box-shadow:var(--glow);}
/* —— 牌阵三选:竖直单列排布(icon 居左跨两行,name/desc 居右上下) —— */
.grid--stack{grid-template-columns:1fr;gap:12px;}
.grid--stack .opt-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon name" "icon desc";align-items:center;gap:4px 16px;text-align:left;padding:16px 20px;}
.grid--stack .opt-card__icon{grid-area:icon;font-size:38px;margin-bottom:0;}
.grid--stack .opt-card__name{grid-area:name;font-size:17px;}
.grid--stack .opt-card__desc{grid-area:desc;margin-top:0;}

/* —— 按钮 —— */
.btn-row{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.btn{padding:13px 22px;border-radius:30px;font-family:var(--serif);letter-spacing:.12em;font-size:15px;
  cursor:pointer;border:1px solid var(--gold);color:var(--gold);background:transparent;transition:.3s;}
.btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1430;border-color:transparent;
  font-weight:600;box-shadow:0 6px 24px rgba(232,199,106,.3);}
.btn:hover{transform:translateY(-2px);}
.btn--gold:hover{box-shadow:0 10px 30px rgba(232,199,106,.5);}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}

/* —— 洗牌牌堆(riffle 交错) —— */
.shuffle-stage{display:flex;justify-content:center;align-items:center;min-height:260px;position:relative;margin:10px 0;}
.shuffle-stage>[hidden]{display:none!important;}
.deck-pile{position:relative;width:var(--card-w);height:var(--card-h);}
.deck-pile .tarot-card{position:absolute;top:0;left:0;}
/* riffle:奇数牌往左、偶数往右,再交错落回,模拟两手洗牌 */
.deck-pile.shuffling .tarot-card{animation:riffle .6s ease-in-out both;}
.deck-pile.shuffling .tarot-card:nth-child(odd){--fx:-46px;--r:-14deg;}
.deck-pile.shuffling .tarot-card:nth-child(even){--fx:46px;--r:14deg;}
@keyframes riffle{
  0%{transform:translate(0,0) rotate(0);}
  35%{transform:translate(var(--fx,40px),-26px) rotate(var(--r,12deg));}
  65%{transform:translate(calc(var(--fx,40px) * -1),-26px) rotate(calc(var(--r,12deg) * -1));}
  100%{transform:translate(0,0) rotate(0);}
}
/* 洗牌时的金光残影,叠加质感 */
.deck-pile.shuffling::after{content:"";position:absolute;inset:-8px;border-radius:16px;pointer-events:none;
  background:radial-gradient(circle,rgba(232,199,106,.14),transparent 70%);animation:shimmer .6s ease-in-out;}
@keyframes shimmer{0%,100%{opacity:0;}50%{opacity:1;}}

/* —— 切牌(3 叠选一) —— */
.cut-stage{display:flex;justify-content:center;align-items:flex-end;gap:30px;min-height:var(--card-h);width:100%;animation:mistReveal .4s ease;}
.cut-stack{position:relative;width:var(--card-w);height:var(--card-h);cursor:pointer;transition:transform .3s;animation:cutDeal .4s ease both;}
.cut-stack:nth-child(2){animation-delay:.1s;}
.cut-stack:nth-child(3){animation-delay:.2s;}
.cut-stack .tarot-card{position:absolute;top:0;left:0;}
.cut-stack:hover{transform:translateY(-12px);}
.cut-stack:hover .tarot-card__back{border-color:var(--gold);}
.cut-stack.is-chosen{transform:translateY(-18px);}
.cut-stack.is-chosen .tarot-card__back{box-shadow:0 0 28px rgba(232,199,106,.7);border-color:var(--gold);}
.cut-stack__label{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:11px;color:var(--muted);font-family:var(--serif);letter-spacing:.12em;}
@keyframes cutDeal{from{transform:translateY(20px);opacity:0;}}

/* —— 已选区(抽牌时下方,选中牌落入) —— */
.picked-label{text-align:center;font-size:11px;color:var(--gold-soft);letter-spacing:.2em;margin:4px 0 6px;font-family:var(--serif);}
.picked-area{display:flex;justify-content:center;gap:14px;min-height:150px;margin:0 0 6px;flex-wrap:wrap;}
.picked-slot{display:flex;flex-direction:column;align-items:center;gap:7px;}
.picked-slot__pos{font-size:16px;font-weight:500;color:var(--gold);font-family:var(--serif);letter-spacing:.1em;text-shadow:0 0 10px rgba(212,176,90,.55),0 0 3px rgba(212,176,90,.4);}
/* —— v4 抽牌大星座图:横跨已选区上方,开屏即显,填补画面中部空白(替代旧每槽小星座) —— */
.picked-zodiac-band{display:none;}  /* 默认隐藏,仅全屏抽牌(draw-fullscreen)时显示 */
#view-reading.draw-fullscreen .picked-zodiac-band{
  display:block;position:absolute;left:50%;bottom:100%;margin-bottom:12px;
  transform:translateX(-50%);width:min(520px,90vw);pointer-events:none;
  opacity:0;animation:zodiacBandIn 1.1s ease .15s forwards;z-index:6;}
#view-reading.draw-fullscreen .picked-zodiac-band .zodiac-svg{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 5px rgba(212,176,90,.5));animation:zodiacBreath 4.5s ease-in-out 1.3s infinite;}
@keyframes zodiacBandIn{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.95);}
  to{opacity:.96;transform:translateX(-50%) translateY(0) scale(1);}}
@keyframes zodiacBreath{0%,100%{filter:drop-shadow(0 0 4px rgba(212,176,90,.35));}
  50%{filter:drop-shadow(0 0 8px rgba(212,176,90,.7));}}
.picked-slot__card{width:92px;height:161px;border-radius:11px;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.22);overflow:hidden;transition:.3s;}
.picked-slot__num{font-size:15px;color:var(--faint);font-family:var(--serif);}
.picked-slot.is-filled .picked-slot__card{border-style:solid;border-color:transparent;background:transparent;animation:dealIn .45s cubic-bezier(.2,1.4,.4,1) both;box-shadow:0 0 18px rgba(212,176,90,.35);}
.picked-slot.is-filled .tarot-card{width:100%;height:100%;}
@keyframes dealIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}

/* —— v4 1.5.3:抽牌阶段全屏沉浸 —— wheel-stage fixed 占满整个视口(突破 #app 520 窄栏),标题/提示/已选区浮层叠加 —— */
#view-reading.draw-fullscreen .wheel-stage{position:fixed;inset:0;height:100vh;height:100dvh;max-height:none;z-index:1;}
#view-reading.draw-fullscreen .topbar{position:fixed;top:0;left:0;right:0;z-index:6;padding:8px 14px;background:linear-gradient(180deg,rgba(11,10,31,.72),transparent);}
#view-reading.draw-fullscreen #draw-hint{position:fixed;top:50px;left:0;right:0;z-index:6;margin:0;pointer-events:none;}
#view-reading.draw-fullscreen .picked-area{position:fixed;bottom:12vh;left:0;right:0;z-index:6;margin:0;}/* 加星座图槽位变高·下移避免挡牌环 */
#view-reading.draw-fullscreen .step__title,
#view-reading.draw-fullscreen .picked-label{display:none;}
/* 抽牌全屏:免责声明浮到已选牌下方(视口最底),不被 3D 牌环盖住 */
body.draw-active footer.disclaimer{position:fixed;bottom:6px;left:0;right:0;z-index:6;max-width:none;margin:0;padding:0 16px;font-size:9px;line-height:1.5;color:var(--faint);opacity:.62;text-align:center;}
body.draw-active footer.disclaimer a{color:var(--faint);}
/* 默认(非全屏)wheel-stage 兜底 */
.wheel-stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:4px 0;min-height:300px;}
.draw3d-mount{position:absolute;inset:0;}
.draw3d-canvas{width:100%!important;height:100%!important;display:block;touch-action:manipulation;}
.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:26px;color:var(--gold);opacity:.3;pointer-events:none;z-index:2;}
/* —— 降级:WebGL 不可用时,13 张静态牌背网格 —— */
.draw3d-fallback{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;align-content:center;overflow-y:auto;}
/* 窄屏网格平铺(抽牌全屏沉浸下):避开顶部提示栏(topbar+hint)与底部已选区(picked-area),
   牌从上往下排、多了可滚动,每张牌清晰可点 —— 替代竖屏下只能看到 3 张的 3D 环 */
#view-reading.draw-fullscreen .draw3d-fallback{
  grid-template-columns:repeat(4,1fr);gap:13px 10px;align-content:start;
  padding:88px 14px calc(12vh + 28px);
  -webkit-overflow-scrolling:touch;}
#view-reading.draw-fullscreen .fb-card .tarot-card{box-shadow:0 3px 10px rgba(0,0,0,.45);}
#view-reading.draw-fullscreen .fb-card:not(:disabled):active .tarot-card__back{border-color:var(--gold);box-shadow:0 0 18px rgba(232,199,106,.7);}
.fb-card{background:transparent;border:none;cursor:pointer;padding:0;font-family:inherit;}
.fb-card .tarot-card{width:100%;height:auto;aspect-ratio:5/9;}
.fb-card:disabled{opacity:.25;pointer-events:none;}
.fb-card:not(:disabled):hover .tarot-card__back{border-color:var(--gold);box-shadow:0 0 16px rgba(232,199,106,.6);}
@keyframes cardBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* v3 优化:飞牌改纯 transform 动画(left/top 仅静态设起点),避免动画 layout 属性,60fps 友好 */
.flying-card{position:fixed;left:var(--sx);top:var(--sy);width:34px;height:52px;pointer-events:none;z-index:200;border-radius:5px;background:linear-gradient(135deg,#1a1030,#2d1b4e 50%,#1a1030);border:1px solid rgba(232,199,106,.75);box-shadow:0 0 12px rgba(232,199,106,.65),0 0 24px rgba(139,92,246,.25);animation:cardFly .72s cubic-bezier(.22,.61,.36,1) forwards;will-change:transform,opacity;}
.flying-card::before{content:"✦";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gold);}
@keyframes cardFly{0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}45%{transform:translate(calc(-50% + (var(--ex) - var(--sx))/2),calc(-50% + (var(--ey) - var(--sy))/2 - 90px)) scale(.85) rotate(220deg);opacity:1}100%{transform:translate(calc(-50% + (var(--ex) - var(--sx))),calc(-50% + (var(--ey) - var(--sy)))) scale(.35) rotate(420deg);opacity:0}}

/* —— 牌阵揭示 —— */
.spread-board{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 16px;padding:14px 0;}
.spread-slot{display:flex;flex-direction:column;align-items:center;gap:8px;}
.spread-slot__label{font-size:12px;color:var(--muted);letter-spacing:.12em;font-family:var(--serif);}
.spread-board.is-dense{gap:16px 10px;}
.spread-board.is-dense .tarot-card{width:88px;height:152px;}
.spread-board.is-dense .face__center{font-size:22px;}
.spread-board.is-dense .face__bottom{font-size:11px;}
.spread-board.is-dense .spread-slot__label{font-size:10.5px;}

/* —— 塔罗牌(3D翻转 + 翻牌显影) —— */
.tarot-card{width:var(--card-w);height:var(--card-h);perspective:1000px;cursor:pointer;flex:0 0 auto;position:relative;}
.tarot-card__inner{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.75,.2,1);transform-style:preserve-3d;}
.tarot-card.is-flipped .tarot-card__inner{transform:rotateY(180deg);}
.tarot-card__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:11px;overflow:hidden;}
.tarot-card__back{
  background:
    radial-gradient(circle at 50% 42%, rgba(212,176,90,.18), transparent 60%),
    repeating-conic-gradient(from 0deg at 50% 42%, rgba(212,176,90,.07) 0deg, transparent 11deg, rgba(123,102,181,.06) 22deg, transparent 33deg),
    linear-gradient(150deg,#1A0F3A,#0A0620);
  border:1.5px solid var(--gold-soft);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 34px rgba(0,0,0,.62),inset 0 0 10px rgba(212,176,90,.08);}
.tarot-card__back::before{content:"✦";font-size:40px;color:var(--gold);text-shadow:0 0 18px rgba(212,176,90,.55);}
.tarot-card__back::after{content:"";position:absolute;inset:6px;border:1px solid rgba(212,176,90,.3);border-radius:7px;}
/* fix(2026-07-29):position 必须是 absolute —— front 的子元素(.card-art 图片层、
   .card-art-fallback 兜底层)全是 absolute,若 front 用 relative 会无内容撑高 →
   高度塌缩为 0 → 正面图片 height:0 不显示 → 翻牌后整张空白。与 .tarot-card__back
   一致用 absolute inset:0(继承自 .tarot-card__face)撑满 inner,标准翻牌结构。 */
.tarot-card__front{transform:rotateY(180deg);position:absolute;overflow:hidden;
  background:linear-gradient(160deg,#160E34,#0E0A24);border:1.5px solid var(--gold);}
.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.tarot-card.is-flipped .card-art{animation:cardDevelop .9s ease .35s both;}
@keyframes cardDevelop{from{filter:blur(10px) brightness(.4) saturate(.6)}to{filter:blur(0) brightness(1) saturate(1)}}
.card-art-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 6px;text-align:center;}
.tarot-card.is-reversed .tarot-card__front{transform:rotateY(180deg) rotate(180deg);}
.face__top{font-family:var(--serif);color:var(--gold);font-size:14px;letter-spacing:.05em;}
.face__center{font-size:30px;line-height:1.15;flex:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1px;padding:4px 0;}
.face__bottom{font-family:var(--serif);color:var(--text);font-size:13px;line-height:1.25;}
.face__bottom small{color:var(--muted);font-size:9px;letter-spacing:.04em;font-family:var(--sans);}
.rev-mark{position:absolute;top:5px;right:5px;z-index:6;background:var(--rev);color:#fff;font-size:10px;
  padding:2px 7px;border-radius:10px;letter-spacing:.05em;box-shadow:0 2px 8px rgba(0,0,0,.4);}

/* mini 牌 */
.tarot-card.mini{width:56px;height:96px;cursor:default;}
.tarot-card.mini .face__top{font-size:9px;}
.tarot-card.mini .face__center{font-size:15px;padding:0;}
.tarot-card.mini .face__bottom{font-size:8px;line-height:1.1;}
.tarot-card.mini .face__bottom small{font-size:6px;}
.tarot-card.mini .rev-mark{font-size:7px;padding:1px 4px;top:2px;right:2px;}
.lib-card .tarot-card.mini{width:84px;height:146px;}
.lib-card .tarot-card.mini .face__top{font-size:11px;}
.lib-card .tarot-card.mini .face__center{font-size:22px;}
.lib-card .tarot-card.mini .face__bottom{font-size:10px;}
.lib-card .tarot-card.mini .face__bottom small{font-size:7px;}

/* —— 解读(stagger 渐入) —— */
.reading-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.reading-head .step__title{text-align:left;margin:0;}
.persona-switch{display:flex;gap:4px;background:rgba(0,0,0,.22);padding:4px;border-radius:24px;border:1px solid var(--line);}
.persona{padding:7px 11px;border-radius:20px;border:none;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;font-family:inherit;transition:.2s;}
.persona--active{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1430;font-weight:600;}
.reading-card{margin-bottom:16px;padding:18px;animation:staggerFade .6s ease both;}
@keyframes staggerFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reading-card:nth-child(1){animation-delay:.05s}
.reading-card:nth-child(2){animation-delay:.18s}
.reading-card:nth-child(3){animation-delay:.31s}
.reading-card:nth-child(4){animation-delay:.44s}
.reading-card:nth-child(5){animation-delay:.57s}
.reading-card:nth-child(6){animation-delay:.70s}
.reading-card:nth-child(7){animation-delay:.83s}
.reading-card:nth-child(8){animation-delay:.96s}
.reading-card:nth-child(9){animation-delay:1.09s}
.reading-card:nth-child(10){animation-delay:1.22s}
.reading-card__pos{display:inline-block;font-size:11px;color:var(--gold-soft);letter-spacing:.1em;margin-bottom:10px;}
.reading-card__head{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.reading-card__title{font-family:var(--serif);font-size:18px;color:var(--gold);}
.reading-card__title .rev{font-size:13px;margin-left:6px;}
.reading-card__sub{font-size:11px;color:var(--faint);margin-top:2px;}
.keywords{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.keyword-tag{font-size:11px;padding:3px 10px;border-radius:12px;background:rgba(232,199,106,.12);color:var(--gold);border:1px solid rgba(232,199,106,.25);}
.reading-card__summary{color:var(--text);font-size:14px;margin:6px 0 10px;}
.persona-voice-prefix{color:var(--purple);font-size:13px;}
.reading-card__detail{font-size:13px;color:var(--muted);margin:8px 0;}
.reading-card__detail summary{cursor:pointer;color:var(--gold-soft);font-size:12px;list-style:none;}
.reading-card__detail summary::before{content:"▸ ";}
.reading-card__detail[open] summary::before{content:"▾ ";}
.reading-card__detail p{margin-top:8px;}
.reading-card__advice{margin-top:12px;padding:10px 12px;border-left:2px solid var(--gold);background:rgba(232,199,106,.06);font-size:13px;border-radius:0 8px 8px 0;color:var(--text);}
.reading-card__advice strong{color:var(--gold);}
.spooky-note{font-size:12px;color:var(--rev);margin-top:12px;font-style:italic;}
.locked-hint{margin-top:10px;padding:12px;border:1px dashed var(--line);border-radius:10px;font-size:12px;color:var(--faint);text-align:center;background:rgba(0,0,0,.18);}
.locked-hint span{color:var(--gold-soft);}
.paid-block{animation:mistReveal .5s ease;}
.persona-voice{font-size:13.5px;color:var(--text);margin:10px 0;padding:10px 12px;background:rgba(157,127,224,.08);border-left:2px solid var(--purple);border-radius:0 8px 8px 0;line-height:1.6;}
.pv-tag{display:inline-block;font-family:var(--serif);color:var(--purple);font-size:11px;margin-right:6px;padding:1px 8px;border:1px solid rgba(157,127,224,.4);border-radius:10px;}
.paywall{display:flex;align-items:center;gap:14px;padding:16px;margin:6px 0 18px;border-color:var(--gold);}
.paywall__icon{font-size:28px;}
.paywall__text{flex:1;}
.paywall__title{font-family:var(--serif);color:var(--gold);font-size:16px;}
.paywall__desc{font-size:11.5px;color:var(--muted);margin-top:2px;}
.paywall__btn{padding:11px 18px;font-size:14px;flex:0 0 auto;}
/* v3:付费键置顶 —— 整行醒目大按钮 + 呼吸光效,便于支付 */
.paywall--topbtn{flex-direction:column;align-items:stretch;gap:12px;}
.paywall__btn--top{width:100%;padding:14px 18px;font-size:15px;letter-spacing:.06em;animation:auraBreathe 2.6s ease-in-out infinite alternate;}
.paywall__body{display:flex;align-items:center;gap:14px;}
.paywall--done{text-align:center;color:var(--gold-soft);padding:12px;border-color:var(--line);font-size:13px;}

/* —— 图鉴 —— */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.chip{padding:7px 13px;border-radius:18px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12.5px;cursor:pointer;font-family:inherit;transition:.2s;}
.chip--active{background:rgba(232,199,106,.15);color:var(--gold);border-color:var(--gold);box-shadow:var(--glow);}
.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;}
.lib-card{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.25s;}
.lib-card:hover{transform:translateY(-3px);}
.lib-card:hover .tarot-card__front{border-color:var(--gold);box-shadow:0 0 18px rgba(232,199,106,.4);}
.lib-card__name{font-family:var(--serif);font-size:12px;color:var(--text);text-align:center;}

/* —— 弹层(浮现) —— */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;}
.modal.is-open{display:flex;animation:mistReveal .4s ease;}
.modal__backdrop{position:absolute;inset:0;background:rgba(5,4,15,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.modal__panel{position:relative;max-width:460px;width:100%;max-height:86vh;overflow-y:auto;padding:22px;animation:floatUp .5s cubic-bezier(.2,.75,.2,1);}
@keyframes floatUp{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}
.modal__panel::-webkit-scrollbar{width:6px;}
.modal__panel::-webkit-scrollbar-thumb{background:var(--gold-soft);border-radius:3px;}
.modal__close{position:absolute;top:10px;right:14px;border:none;background:transparent;color:var(--gold);font-size:26px;cursor:pointer;line-height:1;z-index:2;transition:.2s;}
.modal__close:hover{transform:rotate(90deg);text-shadow:0 0 16px rgba(232,199,106,.5);}

/* —— 免责声明 —— */
.disclaimer{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:24px 18px 36px;text-align:center;font-size:11px;color:var(--faint);line-height:1.8;}
.disclaimer strong{color:var(--muted);}

/* —— 翻牌增强:脉冲提示 + 金色扫光 + 逆位两段过渡 —— */
/* 未翻开的牌柔和脉冲,提示「点我」 */
.reveal-card:not(.is-flipped){animation:beckon 1.9s ease-in-out infinite;}
@keyframes beckon{0%,100%{filter:drop-shadow(0 0 0 rgba(232,199,106,0));}50%{filter:drop-shadow(0 0 16px rgba(232,199,106,.5));}}
/* 翻牌瞬间掠过一道金光 */
.reveal-card{position:relative;}
.reveal-card::after{content:"";position:absolute;inset:0;border-radius:11px;pointer-events:none;z-index:7;
  background:linear-gradient(110deg,transparent 32%,rgba(255,246,210,.6) 50%,transparent 68%);
  background-size:260% 100%;background-position:200% 0;opacity:0;}
.reveal-card.is-flipping::after{animation:sweep .75s ease;}
@keyframes sweep{0%{background-position:200% 0;opacity:0;}25%{opacity:1;}100%{background-position:-90% 0;opacity:0;}}
/* 逆位:先 rotateY 翻正,再延迟 0.45s 柔和倒置(带 .spread-board 前缀提升特异性,不污染图鉴 mini 牌) */
.spread-board .reveal-card .tarot-card__front{transition:transform .5s ease;}
.spread-board .reveal-card.is-reversed .tarot-card__front{transform:rotateY(180deg) rotate(180deg);transition-delay:.45s;}

/* —— 响应式 —— */
@media (min-width:520px){:root{--card-w:128px;--card-h:222px;}}
@media (min-width:768px){.library-grid{grid-template-columns:repeat(4,1fr);}}
/* —— v8 窄屏(手机,≤760px):解除抽牌全屏的 fixed 浮层,让牌堆区与已选区回文档流
      垂直排列、页面可滚动加长(治选中牌与未选牌重叠);星座图隐藏不挡牌 —— */
@media (max-width:760px){
  #view-reading.draw-fullscreen .wheel-stage{ position:relative; inset:auto; height:auto; min-height:0; max-height:none; z-index:auto; overflow:visible; }
  #view-reading.draw-fullscreen .draw3d-mount{ position:relative; inset:auto; }   /* 关键:原 absolute inset:0 在 auto 高父级里会塌成 0 → 牌堆消失 */
  #view-reading.draw-fullscreen .topbar{ position:relative; top:auto; left:auto; right:auto; z-index:auto; padding:max(8px,env(safe-area-inset-top)) 0; background:none; }
  #view-reading.draw-fullscreen #draw-hint{ position:relative; top:auto; left:auto; right:auto; margin:6px 0 14px; pointer-events:auto; }
  #view-reading.draw-fullscreen .step__title,
  #view-reading.draw-fullscreen .picked-label{ display:block; }            /* v8:长页面需要标题/标签(原 draw-fullscreen 隐藏了) */
  #view-reading.draw-fullscreen .wheel-center{ display:none; }             /* 装饰 ✦ 与牌堆重叠,窄屏隐藏 */
  /* 已选区:回文档流、换行铺开(不再 fixed 单行横滚),页面变长可上下滚;slot 保持小尺寸省空间 */
  #view-reading.draw-fullscreen .picked-area{ position:relative; bottom:auto; left:auto; right:auto; z-index:auto; margin:0 0 10px; flex-wrap:wrap; overflow:visible; padding:0; gap:12px; min-height:auto; }
  #view-reading.draw-fullscreen .picked-slot{ gap:5px;flex:0 0 auto; }
  #view-reading.draw-fullscreen .picked-slot__pos{ font-size:12px;letter-spacing:.06em; }
  #view-reading.draw-fullscreen .picked-slot__card{ width:62px;height:108px; }
  #view-reading.draw-fullscreen .picked-slot__num{ font-size:13px; }
  body.draw-active footer.disclaimer{ position:relative; bottom:auto; max-width:520px; margin:0 auto; padding:18px; font-size:11px; line-height:1.8; opacity:1; text-align:center; }
  #view-reading.draw-fullscreen .picked-zodiac-band{ display:none; }       /* 星座图窄屏不挡牌 */
}
/* —— v8:手机端牌堆抽牌(shake-draw.js 渲染;.deck-draw__pile 随 --tilt 倾斜摆动)—— */
.deck-draw{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 0 8px; }
.deck-draw__pile{ position:relative; width:var(--card-w); height:var(--card-h);
  transform:rotate(var(--tilt,0deg)); transition:transform .1s linear;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.deck-draw__card{ position:absolute; inset:0; }                  /* 7 层错位叠放(translate/rotate 由行内 style 给) */
.deck-draw__card .tarot-card{ width:100%; height:100%; }
.deck-draw__pile:active .deck-draw__card:first-child .tarot-card__back,
.deck-draw__pile:focus-visible .deck-draw__card:first-child .tarot-card__back{ border-color:var(--gold); box-shadow:0 0 22px rgba(232,199,106,.7); }
/* 抽牌时顶部牌飞出(瞬态节点,animationend 自删) */
.deck-draw__fly{ position:absolute; inset:0; pointer-events:none; animation:deckFly .6s ease-in forwards; }
@keyframes deckFly{ 0%{ transform:translate(0,0) scale(1); opacity:1; } 60%{ opacity:1; } 100%{ transform:translate(0,-150px) scale(.78) rotate(10deg); opacity:0; } }
.deck-draw__pile.is-empty{ opacity:.25; pointer-events:none; }
.deck-draw__count{ font-size:13px; color:var(--gold-soft); font-family:var(--serif); letter-spacing:.1em; }
.deck-draw__count strong{ color:var(--gold); font-size:17px; }
.deck-draw__hint{ font-size:12px; color:var(--muted); letter-spacing:.05em; text-align:center; }
.deck-draw__perm{ font-size:12px; color:var(--gold); letter-spacing:.05em; text-align:center; animation:auraBreathe 3s ease-in-out infinite alternate; }

/* ============================================================
   v9 新增:摇一摇双层动画 + 抽牌涟漪 + 手势提示 + 已选区下移 + 收费条
   ============================================================ */
/* 摇晃层:包裹 .deck-draw__pile,承担待机轻摇/触发爆发;
   与 pile 的 --tilt 旋转分层(transform 各管各,不互相抢占) */
.deck-draw__shake{ position:relative; display:inline-block; will-change:transform; }
.deck-draw__shake.is-sway{ animation:deckSway 4.6s ease-in-out infinite; transform-origin:50% 92%; }
.deck-draw__shake.is-burst{ animation:shakeBurst .5s cubic-bezier(.36,.07,.19,.97) both; transform-origin:50% 50%; }
/* 待机轻摇:牌堆像在轻轻呼吸、邀请你摇它(幅度小、缓慢) */
@keyframes deckSway{
  0%,100%{ transform:rotate(-1.6deg) translateY(0); }
  25%{ transform:rotate(1.3deg) translateY(-3px); }
  50%{ transform:rotate(-1deg) translateY(0); }
  75%{ transform:rotate(1.7deg) translateY(-2px); }
}
/* 触发爆发:摇到峰值时牌堆猛烈左右甩(微信摇一摇式,一下抽一张) */
@keyframes shakeBurst{
  0%{ transform:translateX(0) rotate(0); }
  12%{ transform:translateX(-9px) rotate(-7deg); }
  26%{ transform:translateX(9px) rotate(6deg); }
  40%{ transform:translateX(-7px) rotate(-5deg); }
  54%{ transform:translateX(6px) rotate(4deg); }
  68%{ transform:translateX(-4px) rotate(-3deg); }
  82%{ transform:translateX(3px) rotate(2deg); }
  100%{ transform:translateX(0) rotate(0); }
}
/* 抽牌金色涟漪:从牌堆中心向外扩散(瞬态,animationend 自删) */
.deck-draw__ripple{ position:absolute; left:50%; top:50%; width:var(--card-w); height:var(--card-h);
  margin-left:calc(var(--card-w) / -2); margin-top:calc(var(--card-h) / -2); border-radius:14px; pointer-events:none;
  border:2px solid rgba(232,199,106,.6); box-shadow:0 0 20px rgba(232,199,106,.35) inset,0 0 16px rgba(232,199,106,.25);
  animation:drawRipple .85s ease-out forwards; }
@keyframes drawRipple{ 0%{ transform:scale(.5); opacity:.8; } 100%{ transform:scale(2.4); opacity:0; } }
/* 抽中瞬间金色光晕脉冲(v9.4 强化:补偿微信无震感,比 ripple 更显眼的径向爆发,瞬态自删) */
.deck-draw__hit{ position:absolute; left:50%; top:50%; width:calc(var(--card-w) * 1.7); height:calc(var(--card-w) * 1.7);
  margin-left:calc(var(--card-w) * -0.85); margin-top:calc(var(--card-w) * -0.85); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(232,199,106,.55), rgba(232,199,106,.14) 42%, rgba(232,199,106,0) 72%);
  animation:drawHit .5s ease-out forwards; }
@keyframes drawHit{ 0%{ transform:scale(.4); opacity:.9; } 35%{ opacity:.85; } 100%{ transform:scale(1.5); opacity:0; } }
/* 摇一摇手势提示:手机图标间歇甩动(像在演示)+ 下滑看牌引导 */
.deck-draw__cue{ margin-top:2px; text-align:center; }
.deck-draw__cue-icon{ font-size:17px; display:inline-block; vertical-align:middle; animation:cueShake 2.6s ease-in-out infinite; }
.deck-draw__cue-text{ font-size:12px; color:var(--gold-soft); font-family:var(--serif); letter-spacing:.08em; vertical-align:middle; margin-left:6px; }
.deck-draw__cue::after{ content:"↓  下滑查看已抽到的牌"; display:block; margin-top:18px;
  font-size:11px; color:var(--muted); letter-spacing:.06em; animation:scrollCue 2s ease-in-out infinite; }
@keyframes cueShake{
  0%,70%,100%{ transform:rotate(0); }
  75%{ transform:rotate(-18deg); }
  82%{ transform:rotate(15deg); }
  89%{ transform:rotate(-11deg); }
  95%{ transform:rotate(7deg); }
}
@keyframes scrollCue{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(5px); opacity:.95; } }
/* 窄屏抽牌:已选区(picked-label/area)推到首屏视口下方,需下滑才见——治与牌堆重叠 */
@media (max-width:760px){
  #view-reading.draw-fullscreen .picked-label{ margin-top:58vh; }
}
/* v9:首页收费醒目条(标题正下方,金色胶囊) */
.hero__price{ display:inline-block; margin:15px auto 0; padding:9px 22px; border:1px solid rgba(232,199,106,.5);
  border-radius:999px; background:linear-gradient(135deg,rgba(232,199,106,.14),rgba(232,199,106,.04));
  font-family:var(--serif); box-shadow:0 0 22px rgba(232,199,106,.12); }
.hero__price b{ color:var(--gold); font-size:15px; letter-spacing:.04em; }
.hero__price span{ color:var(--gold-soft); font-size:12px; margin-left:7px; }
/* v9:首页摇一摇功能提示徽章 */
.home-shake-tip{ display:flex; align-items:center; justify-content:center; gap:7px; margin:12px 0 0;
  font-size:12px; color:var(--muted); letter-spacing:.05em; }
.home-shake-tip .shake-ico{ display:inline-block; font-size:15px; animation:cueShake 2.6s ease-in-out infinite; }
/* —— 手机优化(旋转环尺寸由 JS layoutWheelSize 自适应,这里处理其余) —— */
.btn,.icon-btn,.opt-card,.entry-card,.chip,.persona,.cut-stack,.lib-card,.reveal-card{touch-action:manipulation;}
.icon-btn{width:40px;height:40px;}
.topbar__spacer{width:40px;}
@media (max-width:420px){
  .hero{padding:30px 0 22px;}
  .step__title{font-size:21px;}
  .reading-head .step__title{font-size:19px;}
  .reading-card{padding:14px;}
  .cut-stage{gap:10px;}
  .cut-stack,.cut-stack .tarot-card{width:92px;height:160px;}
  .persona{padding:6px 9px;font-size:11px;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ============================================================
   v3 新增样式 · 会讲故事的塔罗
   ============================================================ */

/* —— 问题输入框(step-topic) —— */
.question-box{padding:16px 18px;margin:14px 0 18px;}
.question-box__label{display:block;font-size:13px;color:var(--gold-soft);letter-spacing:.05em;margin-bottom:10px;}
.question-box__input{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.28);color:var(--text);font-family:var(--sans);font-size:16px;outline:none;transition:.25s;-webkit-appearance:none;}
.question-box__input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,199,106,.12);}
.question-box__input::placeholder{color:var(--faint);}

/* v4:抽牌三模式切换器已移除(聚焦公转轨道,不再多模式) */

/* v4:ring/fan 模式已移除,仅保留公转轨道(3D 实现见 draw3d.js) */

/* —— 综合断语块 —— */
.narrative-summary{padding:18px;margin-bottom:16px;}
.ns-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.ns-mood{font-family:var(--serif);font-size:13px;letter-spacing:.06em;}
.ns-mood i{font-style:normal;color:var(--gold);padding:3px 12px;border:1px solid var(--gold-soft);border-radius:14px;background:rgba(232,199,106,.08);}
.ns-dominant{font-size:12px;color:var(--gold-soft);letter-spacing:.03em;}
.ns-text{color:var(--text);font-size:14.5px;line-height:1.85;}
.ns-q{margin-top:10px;font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;}

/* —— 逐张叙事段落 + 内联语义 span 配色 —— */
.narrative-text{color:var(--text);font-size:14px;line-height:1.85;margin:8px 0 4px;letter-spacing:.01em;}
.narrative-text .narr-open{color:var(--gold);font-family:var(--serif);}
.narrative-text .narr-pos{display:block;margin:3px 0;color:var(--gold-soft);font-size:12.5px;letter-spacing:.03em;}
.narrative-text .narr-core{color:var(--text);}
.narrative-text .narr-lens{display:block;margin-top:5px;color:var(--purple);font-size:13px;}
.narrative-text .narr-spooky{display:block;margin-top:5px;color:var(--rev-soft);font-size:12.5px;font-style:italic;}

/* —— 牌阵整体脉络 —— */
.spread-story{padding:16px 18px;margin-bottom:16px;border-left:3px solid var(--gold);background:rgba(232,199,106,.05);}
.spread-story p{color:var(--text);font-size:14px;line-height:1.85;margin-top:8px;}

/* —— 牌际关系块 —— */
.relations,.celtic-pairs,.reading-closing{padding:16px 18px;margin-bottom:16px;}
.block-title{font-family:var(--serif);color:var(--gold);font-size:15px;letter-spacing:.08em;margin-bottom:12px;}
.rel-item{font-size:13px;color:var(--text);line-height:1.75;margin:8px 0;}
.rel-tag{display:inline-block;font-size:10.5px;color:var(--gold-soft);border:1px solid rgba(232,199,106,.3);border-radius:10px;padding:1px 8px;margin-right:8px;letter-spacing:.05em;vertical-align:middle;}
.rel-transition .rel-tag{color:var(--rev);border-color:var(--rev-soft);background:rgba(210,84,106,.1);}
.rel-clash .rel-tag{color:var(--purple);border-color:rgba(157,127,224,.4);background:rgba(157,127,224,.1);}

/* —— 凯尔特位置对照 —— */
.cpair{margin:10px 0;font-size:13px;line-height:1.7;border-left:2px solid var(--purple);padding:4px 0 4px 12px;}
.cpair-label{display:block;font-family:var(--serif);color:var(--gold);font-size:13px;margin-bottom:2px;}
.cpair-text{color:var(--text);}
.cpair small{display:block;color:var(--muted);font-size:12px;margin-top:3px;}

/* —— 回扣问题 / 综合建议 —— */
.reading-closing{border-color:var(--gold);}
.rc-answer{color:var(--text);font-size:15px;line-height:1.9;font-family:var(--serif);letter-spacing:.02em;}
.rc-sign{margin-top:12px;font-size:12px;color:var(--gold-soft);text-align:right;font-style:italic;}
.paywall-cta{font-size:13.5px;color:var(--text);line-height:1.7;text-align:center;padding:6px 0;}
.paywall-cta strong{color:var(--gold);}

/* —— 卦象历史 —— */
.history-list{display:flex;flex-direction:column;gap:14px;}
.his-item{padding:14px 16px;cursor:pointer;transition:.25s;animation:staggerFade .5s ease both;}
.his-item:hover{transform:translateY(-2px);border-color:rgba(232,199,106,.4);}
.his-item__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:6px;}
.his-item__time{font-size:12px;color:var(--gold-soft);font-family:var(--serif);}
.his-item__tag{font-size:11px;color:var(--muted);padding:2px 9px;border:1px solid var(--line);border-radius:10px;}
.his-item__q{font-family:var(--serif);color:var(--text);font-size:14px;margin-bottom:10px;line-height:1.5;}
.his-item__q.muted{font-style:italic;}
.his-item__cards{display:flex;gap:6px;flex-wrap:wrap;}
.his-item__cards .tarot-card.mini{width:42px;height:70px;}
.his-item__cards .tarot-card.mini .face__center{font-size:13px;}
.his-item__cards .tarot-card.mini .face__bottom{font-size:7px;line-height:1.05;}
.his-item__open{font-size:11px;color:var(--gold-soft);margin-top:10px;text-align:right;letter-spacing:.05em;}

/* —— 分享弹层 —— */
.share-text{width:100%;min-height:220px;padding:14px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--text);font-family:var(--sans);font-size:13px;line-height:1.8;resize:vertical;outline:none;}
.share-text:focus{border-color:var(--gold);}

/* —— 图鉴搜索框 —— */
.lib-search{margin-left:auto;padding:7px 13px;border-radius:18px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--text);font-family:inherit;font-size:12.5px;outline:none;min-width:130px;transition:.2s;-webkit-appearance:none;}
.lib-search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,199,106,.1);}
.lib-search::placeholder{color:var(--faint);}

/* —— v3 响应式微调 —— */
@media (max-width:420px){
  /* v4:draw-mode-switch 已移除 */
  .narrative-summary,.relations,.celtic-pairs,.reading-closing{padding:14px;}
  .ns-text,.rc-answer{font-size:13.5px;}
  .his-item__cards .tarot-card.mini{width:38px;height:64px;}
}

/* ============================================================
   v4 1.5.4 · 桌面端优化(≥768 起逐步利用宽屏,不再只是手机窄栏)
   ============================================================ */
@media (min-width:768px){
  #app{max-width:min(92vw,760px);}
  .hero{padding:56px 0 36px;}
  .hero__title{font-size:clamp(48px,7vw,76px);}
  .hero__sub{font-size:14.5px;}
  .home-intro{font-size:14.5px;}
  /* 首页入口:手机单列 → 桌面 2 列 */
  .entry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  /* 问题方向:5 维度,桌面 3 列 */
  #topic-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
  .library-grid{grid-template-columns:repeat(4,1fr);}
  .reading-card,.narrative-summary,.relations,.celtic-pairs,.reading-closing{padding:22px;}
  .ns-text,.rc-answer{font-size:15px;line-height:1.9;}
}
@media (min-width:1024px){
  #app{max-width:min(90vw,1000px);}
  .hero{padding:52px 0 28px;}
  .hero__title{font-size:clamp(52px,6vw,84px);}
  /* 入口 4 列横排(开始占卜 / 今日牌运 / 牌义图鉴 / 我的卦象) */
  .entry-grid{grid-template-columns:repeat(4,1fr);}
  /* 问题方向 5 列一行 */
  #topic-grid{grid-template-columns:repeat(5,1fr);}
  .opt-card{padding:20px 10px;}
  .library-grid{grid-template-columns:repeat(5,1fr);gap:18px 12px;}
  .spread-board{gap:30px 22px;}
}
@media (min-width:1440px){
  #app{max-width:min(88vw,1240px);}
  .hero{padding:60px 0 34px;}
  .library-grid{grid-template-columns:repeat(6,1fr);}
}

/* ============================================================
   v6 · 一屏化布局 + 配色修补 + 手机端加固 + 星座/字体精致化
   (基于 v5 复制;文件名沿用 style-v4.css。主逻辑见 app-v4.js / draw3d.js)
   ============================================================ */

/* —— P0-1 一屏化:消除上下留白(标题顶 / 内容居中 / 按钮底)—— */
#app{min-height:100dvh;display:flex;flex-direction:column;}
.view.is-active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.step.is-active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
/* 首页:顶对齐——hero 在上、入口紧贴标题下方、卡片放大填空间(用户要选项靠近标题) */
#view-home{justify-content:flex-start;}
#view-home .hero{flex:0 0 auto;}
#view-home .entry-grid{margin:6px 0 4px;}
#view-home .home-intro{flex:0 0 auto;}
/* topic / spread:标题顶、网格垂直居中撑开 */
#step-topic .step__title,#step-spread .step__title,#step-shuffle .step__title,#step-reveal .step__title{flex:0 0 auto;}
#step-topic .question-box,#step-topic .step__hint,#step-spread .step__hint{flex:0 0 auto;}
/* step-topic:整组垂直居中、放大;输入框与选项卡之间留一点点空隙(用户要集体居中+变大) */
#step-topic{justify-content:center;}
#step-topic .question-box{margin:10px 0 4px;}
#step-topic .step__hint{margin:4px 0 8px;}
#topic-grid{flex:0 0 auto;}
#spread-grid{flex:1 1 auto;align-content:center;}
/* shuffle / reveal:主区撑开、按钮贴底 */
#step-shuffle .shuffle-stage{flex:1 1 auto;}
#step-shuffle #shuffle-actions{margin-top:auto;}
#step-reveal .spread-board{flex:1 1 auto;align-content:center;}
#step-reveal>.btn-row{margin-top:auto;}
/* reading:长内容顶部起、自然滚动;draw:全屏 fixed,保险不收缩 */
#step-reading{justify-content:flex-start;}
#step-draw .wheel-stage{flex-shrink:0;}

/* —— P0-2 底部蓝链接改金(消除出戏)—— */
.disclaimer a{color:var(--gold-soft);opacity:.55;text-decoration:none;transition:opacity .2s,color .2s;}
.disclaimer a:hover{opacity:1;color:var(--gold);}

/* —— P0-3 手机端加固 —— */
/* 抽牌阶段禁长按选区/系统菜单,防触摸干扰 */
body.draw-active{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
/* 触摸目标加大到 44px(iOS HIG),仅小屏;桌面保持原样 */
@media (max-width:768px){
  .icon-btn{width:44px;height:44px;}
  .topbar__spacer{width:44px;}
  .persona{padding:9px 12px;}
  .chip{padding:9px 14px;}
}
/* 抽牌全屏:已选区/顶栏用安全区兜底,不挡刘海与手势条 */
#view-reading.draw-fullscreen .picked-area{bottom:max(12vh,env(safe-area-inset-bottom));}
#view-reading.draw-fullscreen .topbar{padding-top:max(8px,env(safe-area-inset-top));}

/* —— P1-1 星座星点闪烁(连线/星点金色化在 app-v4.js zodiacBandSVG)—— */
.zodiac-svg .zodiastar{animation:zodiacTwinkle 4s ease-in-out infinite alternate;}
@keyframes zodiacTwinkle{from{opacity:.5;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.zodiac-svg .zodiastar{animation:none;}}

/* —— P1-2 字体衬线精致化(中文;不引入联网字体,保 file:// 离线)—— */
.step__title{letter-spacing:.14em;}
.hero__title{letter-spacing:.3em;}

/* —— v9.1 近期征兆卡(治笼统:未来 2–4 周可感知的具体信号)—— */
.near-term{padding:16px 18px;margin-bottom:16px;border-left:2px solid var(--rev);}
.near-term .block-title{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.near-term .block-title small{font-size:11px;color:var(--gold-soft);letter-spacing:.06em;font-family:var(--sans);font-weight:400;}
.nt-intro{font-size:13px;color:var(--muted);margin:0 0 12px;line-height:1.7;}
.nt-items{display:flex;flex-direction:column;gap:10px;}
.nt-item{padding:10px 12px;border-radius:10px;background:rgba(190,74,96,.07);border:1px solid rgba(190,74,96,.18);}
.nt-item__name{display:inline-block;font-family:var(--serif);color:var(--gold);font-size:13.5px;margin-right:6px;}
.nt-item__text{font-size:13px;color:var(--text);line-height:1.75;}

/* —— v9.1 牌运图谱(卦象历史统计)—— */
.history-stats{margin-bottom:18px;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.stat-cell{padding:14px 6px;border-radius:14px;background:var(--glass);border:1px solid var(--line);text-align:center;animation:staggerFade .5s ease both;}
.stat-num{font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1;text-shadow:0 0 16px rgba(212,176,90,.3);}
.stat-num small{font-size:14px;}
.stat-label{font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:6px;}
.stats-block{padding:14px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--line);margin-bottom:12px;}
.stats-h{font-family:var(--serif);color:var(--gold);font-size:13px;letter-spacing:.08em;margin-bottom:12px;}
.stats-top3{display:flex;gap:8px;flex-wrap:wrap;}
.top3-item{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04);}
.top3-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.top3-name{font-size:12px;color:var(--text);}
.top3-n{font-size:11px;color:var(--gold-soft);margin-left:auto;}
.stats-suits{display:flex;flex-direction:column;gap:7px;}
.suit-bar{display:flex;align-items:center;gap:8px;font-size:12px;}
.suit-bar__label{width:68px;color:var(--muted);flex-shrink:0;}
.suit-bar__track{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden;}
.suit-bar__fill{height:100%;border-radius:4px;transition:width .6s ease;}
.suit-bar__n{width:22px;text-align:right;color:var(--text);flex-shrink:0;}
.stats-foot{font-size:11px;text-align:center;margin:8px 0 0;}

/* —— v9.1 逆位开关(洗牌步)—— */
.rev-toggle{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px auto 14px;padding:8px 14px;width:fit-content;max-width:90%;border-radius:20px;background:var(--glass);border:1px solid var(--line);cursor:pointer;font-size:13px;color:var(--muted);transition:.25s;}
.rev-toggle:hover{border-color:rgba(232,199,106,.4);}
.rev-toggle input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;flex-shrink:0;}
.rev-toggle__text{display:flex;flex-direction:column;line-height:1.3;}
.rev-toggle__text small{font-size:10.5px;color:var(--faint);}

@media (max-width:768px){
  .stat-num{font-size:22px;}
  .suit-bar__label{width:60px;}
}

/* —— v9.1 去AI味(make-interfaces-feel-better):精致度与按压手感细节 —— */
/* 字体平滑:中文笔画更利落,消除"AI 默认渲染"的毛糙感 */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* 标题 balance / 正文 pretty:消除孤行,排版更像人手排而非机器堆 */
.hero__title,.step__title,.block-title,.stats-h,.reading-card__title{text-wrap:balance;}
.narrative-text,.nt-item__text,.nt-intro,.reading-card__advice,.ns-text{text-wrap:pretty;}
/* 动态数字 tabular-nums:统计/抽牌计数变化时不跳宽 */
.stat-num,.deck-draw__remain,#draw-hint,.top3-n,.suit-bar__n{font-variant-numeric:tabular-nums;}
/* 按压触感 scale(0.96):按钮有"被按下"的回弹,而非死板的颜色变化 */
.btn:active,.opt-card:active,.persona:active,.chip:active,.lib-card:active,.his-item:active{transform:scale(.96);}
.entry-card:active{transform:translateY(-3px) scale(.98);}

/* ============ v9.4 · 个性化问题入口卡 + 输入弹层 ============ */
.opt-card--custom{border:1px dashed rgba(232,199,106,.55);background:linear-gradient(180deg,rgba(232,199,106,.06),var(--glass));}
.opt-card--custom .opt-card__icon{filter:drop-shadow(0 0 6px rgba(232,199,106,.5));}
.opt-card--custom .opt-card__name{color:var(--gold);}
.custom-q-panel{max-width:460px;display:flex;flex-direction:column;gap:14px;}
.custom-q-head{text-align:center;}
.custom-q-icon{font-size:30px;display:block;margin-bottom:2px;}
.custom-q-title{font-family:var(--serif);color:var(--gold);font-size:19px;letter-spacing:.06em;margin:2px 0;}
.custom-q-sub{font-size:12.5px;color:var(--muted);margin:0;}
.custom-q-form{display:flex;flex-direction:column;gap:10px;}
.custom-q-input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--text);font-size:14px;font-family:inherit;line-height:1.6;resize:none;outline:none;transition:border-color .2s;min-height:40px;}
.custom-q-input:focus{border-color:var(--gold-soft);}
.custom-q-meta{display:flex;justify-content:space-between;align-items:center;min-height:18px;font-size:12px;}
.custom-q-err{color:var(--rev-soft);font-size:12px;}
.custom-q-go{margin-top:4px;}
.custom-q-foot{text-align:center;font-size:11px;margin:0;}

/* 扫码支付弹层(非微信环境·NATIVE 扫码):后端下发二维码 SVG 直接渲染 */
.pay-qr-panel{max-width:360px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.pay-qr-head{display:flex;flex-direction:column;align-items:center;gap:3px;}
.pay-qr-icon{font-size:30px;line-height:1;}
.pay-qr-title{font-family:var(--serif);color:var(--gold);font-size:18px;letter-spacing:.05em;margin:0;}
.pay-qr-price{color:var(--gold-soft);font-size:13px;margin:0;}
.pay-qr-box{width:220px;height:220px;background:#fff;border-radius:14px;padding:10px;box-shadow:0 6px 24px rgba(0,0,0,.45);}
.pay-qr-box svg{width:100%;height:100%;display:block;}
.pay-qr-tip{font-size:13px;color:var(--text);margin:0;}
.pay-qr-tip b{color:var(--gold);}
.pay-qr-wait{font-size:12px;margin:0;}
/* 手机非微信浏览器支付提示横幅(v9.6·问题4兜底) */
.browser-pay-tip{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px auto 0;max-width:520px;padding:10px 14px;border-radius:12px;background:rgba(232,199,106,.12);border:1px solid rgba(232,199,106,.35);font-size:13px;}
.browser-pay-tip .bpt-text{color:var(--text);}
.browser-pay-tip[hidden]{display:none;}
.bpt-copy{background:var(--gold);color:#1a1a2e;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;}
.bpt-copy:active{transform:scale(.96);}
/* 扫码轮询超时重试按钮(v9.6·问题3) */
.pay-qr-retry{background:var(--gold);color:#1a1a2e;border:none;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;margin-left:4px;vertical-align:middle;}
.pay-qr-retry:active{transform:scale(.96);}

/* —— 电脑端优化:逐张解读卡双列(利用宽屏,少纵向滚动)—— */
.reading-cards{display:grid;gap:16px;}
@media (min-width:1024px){.reading-cards{grid-template-columns:1fr 1fr;align-items:start;}}

/* ============================================================
   v9.8 · 设计精修
   衬线 webfont / 线性图标 / 模糊预览锁 / 揭晓仪式 /
   全部翻开降级 / 确认弹窗 / 连续印记 / 已购恢复
   ============================================================ */

/* —— 金色线性图标(替换彩色 emoji,统一质感) —— */
.icon{width:22px;height:22px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;}
.icon--entry{width:32px;height:32px;filter:drop-shadow(0 0 8px rgba(232,199,106,.35));transition:.35s;}
.entry-card:hover .icon--entry{transform:scale(1.08);}
.blur-lock__tag .icon{width:14px;height:14px;stroke:var(--gold-soft);}

/* —— 模糊预览锁(付费墙):看得见有、看不清是什么 ——
   假文行是纯样式色块(无真实内容,不泄露付费文本),blur 后成"内容影子";
   点击锁定区 → JS 平滑滚到解锁按钮(对抗审查增强) */
.blur-lock{position:relative;padding:16px 4px 8px;border-radius:10px;overflow:hidden;user-select:none;cursor:pointer;}
.blur-lock__line{display:block;height:9px;border-radius:5px;margin:10px 4px;
  background:linear-gradient(90deg,rgba(237,230,214,.5),rgba(237,230,214,.24));}
.blur-lock__lines{filter:blur(5px);opacity:.8;}
.blur-lock__line--w1{width:88%}.blur-lock__line--w2{width:66%}
.blur-lock__line--w3{width:78%}.blur-lock__line--w4{width:44%}
.blur-lock::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 26%,rgba(7,6,23,.5) 72%,rgba(7,6,23,.82));}
.blur-lock__tag{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:1;
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;
  border:1px solid var(--line);background:rgba(18,14,38,.78);backdrop-filter:blur(4px);
  color:var(--gold-soft);font-size:12px;letter-spacing:.06em;white-space:nowrap;}

/* —— 揭晓仪式(付费成功):金雾散开 + 条目依次浮现 —— */
.just-unlocked{animation:unveilGold 1.5s cubic-bezier(.2,.75,.2,1) both;}
@keyframes unveilGold{
  0%{opacity:0;filter:blur(10px) brightness(1.9)}
  45%{opacity:1;filter:blur(3px) brightness(1.45)}
  100%{opacity:1;filter:blur(0) brightness(1)}
}
.just-unlocked .nt-item{animation:mistReveal .7s cubic-bezier(.2,.75,.2,1) both;}
.just-unlocked .nt-item:nth-child(1){animation-delay:.4s}
.just-unlocked .nt-item:nth-child(2){animation-delay:.65s}
.just-unlocked .nt-item:nth-child(3){animation-delay:.9s}
@media (prefers-reduced-motion:reduce){
  .just-unlocked,.just-unlocked .nt-item{animation:none}
}

/* —— 「全部翻开」降级:次级文字按钮(保护逐张翻开的仪式感) —— */
.btn--linkish{background:transparent;border:none;color:var(--muted);font-family:inherit;
  font-size:13px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px;
  padding:10px 6px;cursor:pointer;touch-action:manipulation;}
.btn--linkish:active{transform:scale(.96);color:var(--gold-soft);}
.btn--linkish[hidden]{display:none;}

/* —— 通用确认弹窗 —— */
.confirm-panel{max-width:340px;padding:22px 20px 18px;}
.confirm-title{font-family:var(--serif);color:var(--gold);font-size:17px;letter-spacing:.06em;text-align:center;margin-bottom:8px;}
.confirm-text{font-size:13.5px;color:var(--text);line-height:1.75;text-align:center;margin-bottom:16px;}

/* —— 今日牌运 · 连续印记徽章 —— */
.streak-badge{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:2px 8px;
  border-radius:10px;border:1px solid var(--line);background:rgba(212,176,90,.08);
  color:var(--gold);font-size:11px;letter-spacing:.04em;}

/* —— 已购恢复列表(渲染进 card-modal) —— */
.restore-list{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow-y:auto;}