/* 字体优化：标题增强层级，正文提升可读性 */
:root{
  --gold:#f0cf82; --gold-dim:#c2a25e; --ivory:#f4ecdd;
  --stroke:rgba(240,207,130,.30);
  --r-lg:26px; --r-md:18px;
  --cw:126px; --ch:212px; --sw:158px;
  /* spring physics 参数 */
  --spring-fast: cubic-bezier(.34,1.56,.64,1);
  --spring-medium: cubic-bezier(.24,.85,.28,1.04);
  --spring-slow: cubic-bezier(.3,1.4,.45,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:"Ma Shan Zheng","Xingkai SC","STXingkai","Kaiti SC","STKaiti","KaiTi","楷体",serif;
  color:var(--ivory);
  background:
    radial-gradient(1200px 700px at 80% -14%, rgba(108,76,208,.20), transparent 60%),
    radial-gradient(900px 560px at -8% 110%, rgba(50,146,190,.10), transparent 58%),
    radial-gradient(1000px 820px at 50% 60%, rgba(26,14,66,.55), transparent 74%),
    linear-gradient(168deg,#04020e 0%,#0a0524 44%,#110a36 72%,#050214 100%);
  background-attachment:fixed;
  min-height:100vh; min-height:100svh; overflow-x:hidden;
  touch-action:manipulation;
}
/* ---------- Aurora 流光背景（移除 mix-blend 提升性能） ---------- */
.aurora{position:fixed;inset:-22%;z-index:0;pointer-events:none;filter:blur(50px);transform:translateZ(0)}
.aurora i{position:absolute;border-radius:50%;display:block;will-change:transform}
.aurora i:nth-child(1){width:58vmax;height:58vmax;left:-14%;top:-24%;
  background:radial-gradient(circle at 42% 42%,rgba(146,102,255,.12),transparent 62%);
  animation:drift1 28s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:50vmax;height:50vmax;right:-18%;top:22%;
  background:radial-gradient(circle at 50% 50%,rgba(94,214,255,.08),transparent 60%);
  animation:drift2 34s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:44vmax;height:44vmax;left:20%;bottom:-28%;
  background:radial-gradient(circle at 50% 50%,rgba(255,188,118,.05),transparent 58%);
  animation:drift3 39s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.13) rotate(24deg)}}
@keyframes drift2{to{transform:translate3d(-8vw,-6vh,0) scale(1.08) rotate(-18deg)}}
@keyframes drift3{to{transform:translate3d(6vw,-5vh,0) scale(1.14)}}

canvas#stars{position:fixed;inset:0;z-index:1;pointer-events:none}
/* 指针跟随光晕（全端） */
.halo{position:fixed;z-index:2;width:min(480px,80vw);aspect-ratio:1;border-radius:50%;
  pointer-events:none;left:0;top:0;opacity:0;transition:opacity .5s;will-change:transform;
  background:radial-gradient(circle, rgba(240,207,130,.10), rgba(240,207,130,.04) 44%, transparent 70%);
  mix-blend-mode:screen;transform:translateZ(0)}
.halo.on{opacity:1}

.wrap{position:relative;z-index:3;max-width:1180px;margin:0 auto;
  padding:calc(76px + env(safe-area-inset-top)) 20px calc(72px + env(safe-area-inset-bottom));text-align:center}
/* 排版层级：标题更强对比，字距更精细 */
.kicker{letter-spacing:.5em;padding-left:.5em;font-size:.7rem;color:rgba(240,207,130,.6);text-transform:uppercase;font-weight:500}
h1.title{
  font-size:clamp(2.4rem,6vw,3.8rem);
  font-weight:700;
  margin:.28em 0 .1em;
  letter-spacing:.14em;
  color:#f6ecd4;
  text-shadow:
    0 1px 0 rgba(120,90,30,.35),
    0 0 26px rgba(240,207,130,.28);
  line-height:1.2;
}
.subtitle{color:rgba(236,226,246,.85);font-style:italic;font-size:clamp(.88rem,2.2vw,1.02rem);line-height:1.9;margin-bottom:.2em}

/* ---------- 玻璃面板（降低 blur 至 12px，提升性能） ---------- */
.panel{
  position:relative;margin-top:clamp(24px,4vh,36px);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025) 38%,rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 24px 64px rgba(4,2,18,.50), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -16px 32px rgba(255,255,255,.03);
  padding:clamp(22px,3.2vw,32px);overflow:hidden;transform:translateZ(0)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(720px 190px at 50% -70px, rgba(255,246,210,.10), transparent 70%)}
.panel::after{content:none}

.q-label{font-size:.86rem;color:var(--gold);letter-spacing:.22em}
textarea#question{
  width:100%;max-width:660px;display:block;margin:12px auto 0;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r-md);
  color:var(--ivory);padding:13px 16px;font-size:.94rem;line-height:1.72;font-family:inherit;
  resize:none;height:78px;outline:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s, box-shadow .3s, background .3s}
textarea#question::placeholder{color:#8d86b5;font-style:italic}
textarea#question:focus{border-color:var(--gold);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(240,207,130,.10), 0 10px 32px rgba(240,207,130,.06)}
.count{font-size:.72rem;color:#a49cc9;margin-top:7px}
/* ---------- 性别选择 ---------- */
.gender-sel{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.gender-sel span{font-size:.78rem;color:#a79ecf;letter-spacing:.1em}
.gender-btn{cursor:pointer;border-radius:999px;padding:7px 18px;font-family:inherit;font-size:.82rem;letter-spacing:.1em;
  border:1px solid rgba(240,207,130,.24);color:#b9b1dd;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:all .28s var(--spring-fast);transform:translateZ(0)}
.gender-btn:hover{border-color:rgba(240,207,130,.5);color:var(--gold);background:rgba(240,207,130,.08);transform:translateY(-1px)}
.gender-btn:active{transform:translateY(0) scale(.96)}
.gender-btn.on{border-color:var(--gold);color:var(--gold);
  background:linear-gradient(135deg,rgba(240,207,130,.18),rgba(240,207,130,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 16px rgba(240,207,130,.12)}
.auto-note{min-height:1.5em;margin-top:14px;font-size:.8rem;line-height:1.7;
  color:var(--gold);letter-spacing:.06em;opacity:0;transform:translateY(4px);
  transition:opacity .5s,transform .5s;pointer-events:none}
.auto-note.show{opacity:1;transform:none}

.spreads{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.spread-chip{
  cursor:pointer;user-select:none;padding:11px 18px;border-radius:999px;
  border:1px solid rgba(240,207,130,.24);color:#f0ead8;font-size:.84rem;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 5px 18px rgba(6,3,22,.30);
  transition:transform .35s var(--spring-fast), border-color .3s, box-shadow .3s, background .3s;
  transform:translateZ(0)}
.spread-chip small{display:block;font-size:.62rem;color:#a79ecf;margin-top:3px;letter-spacing:.08em}
.spread-chip:hover{transform:translateY(-2px);border-color:rgba(240,207,130,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px rgba(6,3,22,.35)}
.spread-chip:active{transform:translateY(0) scale(.97)}
.spread-chip.active{
  border-color:var(--gold);color:#fff;
  background:linear-gradient(135deg,rgba(240,207,130,.18),rgba(240,207,130,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 8px 28px rgba(240,207,130,.18)}
.spread-chip.sp-auto{border-color:rgba(194,162,94,.40)}
.spread-chip.sp-auto:hover{border-color:rgba(240,207,130,.65)}
.spread-chip.sp-auto.active{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(240,207,130,.20),rgba(194,162,94,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 8px 28px rgba(240,207,130,.20)}

.btn-gold{
  margin-top:28px;cursor:pointer;border-radius:999px;
  padding:16px 48px;font-size:1.08rem;letter-spacing:.32em;text-indent:.3em;
  font-family:inherit;font-weight:600;color:#fffbef;position:relative;overflow:hidden;isolation:isolate;
  background:
    linear-gradient(165deg,rgba(255,238,196,.32),rgba(240,207,130,.08) 44%,rgba(198,150,74,.18)),
    linear-gradient(#160c33,#160c33);
  border:1px solid rgba(255,240,205,.34);
  backdrop-filter:blur(12px) saturate(160%) brightness(1.04);
  -webkit-backdrop-filter:blur(12px) saturate(160%) brightness(1.04);
  box-shadow:
    inset 0 1.5px 0 rgba(255,253,240,.45),
    inset 0 -10px 22px rgba(120,78,20,.18),
    inset 12px 0 24px rgba(255,255,255,.05),
    inset -12px 0 24px rgba(255,255,255,.03),
    0 16px 40px rgba(240,207,130,.18),
    0 6px 14px rgba(5,2,20,.45);
  text-shadow:0 1px 6px rgba(255,220,140,.40);
  transition:transform .4s var(--spring-slow), box-shadow .4s, border-color .35s, filter .35s;
  transform:translateZ(0)}
.btn-gold::before{content:"";position:absolute;left:8%;right:8%;top:0;height:46%;z-index:-1;
  border-radius:999px 999px 44% 44%/74% 74% 10% 10%;
  background:linear-gradient(180deg,rgba(255,251,232,.32),transparent 80%);filter:blur(2px)}
.btn-gold::after{content:"";position:absolute;top:-40%;left:14%;width:72%;height:106%;z-index:-1;
  border-radius:50%;filter:blur(10px);
  background:radial-gradient(closest-side,rgba(255,248,222,.24),transparent 72%)}
.btn-gold:hover{transform:translateY(-2px) scale(1.015);border-color:rgba(255,244,215,.58);
  box-shadow:
    inset 0 1.5px 0 rgba(255,253,240,.55),
    inset 0 -10px 22px rgba(120,78,20,.16),
    0 20px 52px rgba(240,207,130,.26),
    0 8px 18px rgba(5,2,20,.40)}
.btn-gold:active{transform:translateY(0) scale(.97);filter:brightness(.93);
  box-shadow:
    inset 0 2px 6px rgba(40,20,0,.30),
    inset 0 -4px 10px rgba(255,250,225,.15),
    0 6px 18px rgba(240,207,130,.15)}
.btn-gold:disabled{opacity:.38;pointer-events:none}
.btn-glass{
  cursor:pointer;border-radius:999px;padding:10px 24px;font-family:inherit;font-size:.84rem;letter-spacing:.16em;
  border:1px solid rgba(240,207,130,.32);color:var(--gold);margin:0 5px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 20px rgba(6,3,22,.30);
  transition:all .3s var(--spring-fast);transform:translateZ(0)}
.btn-glass:hover{background:rgba(240,207,130,.12);transform:translateY(-2px) scale(1.02);border-color:rgba(240,207,130,.50)}
.btn-glass:active{transform:translateY(0) scale(.98)}

/* ---------- 抽牌舞台 ---------- */
.stage{margin-top:clamp(16px,2.6vh,30px)}
.deck-zone{position:relative;height:clamp(205px,27vh,265px);perspective:1150px}
.deck{position:absolute;left:50%;top:clamp(20px,4.4vh,40px);transform:translateX(-50%);
  width:var(--cw);height:var(--ch);transform-style:preserve-3d}
.dcard{position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(148deg,#2c2164 0%,#1a1344 47%,#342573 100%);
  border:1.5px solid rgba(240,207,130,.5);
  box-shadow:0 10px 30px rgba(4,2,18,.55), inset 0 0 26px rgba(240,207,130,.06);
  will-change:transform}
.dcard .pat,.face.back .pat{position:absolute;inset:7px;border-radius:10px;border:1px solid rgba(240,207,130,.32);
  background-image:radial-gradient(rgba(240,207,130,.30) 1px,transparent 1.7px),
                   radial-gradient(rgba(240,207,130,.17) 1px,transparent 1.7px);
  background-size:15px 15px,15px 15px;background-position:0 0,7.5px 7.5px}
.dcard .em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(240,207,130,.9);font-size:calc(var(--cw)*.21);text-shadow:0 0 16px rgba(240,207,130,.55)}
.deck-floor{position:absolute;left:50%;top:calc(clamp(20px,4.4vh,40px) + var(--ch) - 4px);
  width:calc(var(--cw)*2.3);height:26px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(240,207,130,.22),rgba(240,207,130,.08) 52%,transparent 74%);
  filter:blur(7px);transition:.5s}

.slots{display:flex;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap;
  margin-top:clamp(6px,1.6vh,18px);perspective:1500px}
.slot{width:var(--sw);display:flex;flex-direction:column;align-items:center}
.pos-tag{font-size:.70rem;letter-spacing:.28em;color:var(--gold);padding:4px 12px;margin-bottom:10px;
  border-radius:999px;border:1px solid rgba(240,207,130,.32);white-space:nowrap;
  background:linear-gradient(160deg,rgba(240,207,130,.10),rgba(240,207,130,.025));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateZ(0)}
.fly-wrap{width:var(--cw);height:var(--ch);will-change:transform;transform-style:preserve-3d}
.card{position:relative;width:100%;height:100%;border-radius:14px;cursor:pointer;
  transform-style:preserve-3d;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:transform .9s cubic-bezier(.24,.85,.28,1.04)}
.card.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 18px 44px rgba(4,2,18,.55), inset 0 1px 0 rgba(255,250,230,.2)}
.face.back{background:linear-gradient(148deg,#2c2164,#1a1344 47%,#342573);border:1.5px solid rgba(240,207,130,.5)}
.face.back .em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(240,207,130,.92);font-size:calc(var(--cw)*.23);text-shadow:0 0 18px rgba(240,207,130,.55)}
.face.front{transform:rotateY(180deg);background:#efe4cc;border:1.5px solid var(--gold-dim)}
.face.front img{width:100%;height:100%;object-fit:cover;display:block}
.slot.reversed .face.front img{transform:rotate(180deg)}
.rev-badge{position:absolute;top:7px;left:50%;transform:translateX(-50%) rotateY(180deg);
  font-size:.66rem;letter-spacing:.2em;color:#ffd98a;padding:2.5px 11px;border-radius:999px;z-index:2;
  background:rgba(24,12,4,.8);border:1px solid rgba(240,207,130,.6)}
.card-name{margin-top:13px;font-size:.93rem;color:var(--ivory);letter-spacing:.12em;
  opacity:0;transform:translateY(5px);transition:opacity .55s ease, transform .55s ease}
.card-en{font-size:.67rem;color:#b0a6d8;margin-top:3px;font-style:italic;
  opacity:0;transform:translateY(5px);transition:opacity .55s ease .08s, transform .55s ease .08s}
.slot.revealed .card-name,.slot.revealed .card-en{opacity:1;transform:none}
.tapped-hint{font-size:.78rem;color:#a49cc9;margin-top:24px;letter-spacing:.18em;animation:breathe 2.8s ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
/* ---------- 手动抽牌：选牌区（洗牌后扇形摊牌，凭直觉选牌背） ---------- */
.pick-zone{margin-top:clamp(8px,1.8vh,16px);text-align:center}
.pick-hint{font-size:.8rem;color:#a49cc9;letter-spacing:.14em;line-height:1.9;margin-bottom:12px}
.pick-hint b{color:var(--gold)}
.pick-swipe{display:inline-block;font-size:.68rem;color:#7d74ad;letter-spacing:.08em;margin-left:8px;animation:breathe 3s ease-in-out infinite}
.pick-fan{position:relative;height:calc(var(--ch) + 130px);margin:0 auto;width:100%;max-width:720px;
  transform-origin:50% 100%;transform:rotate(var(--fanRot,0deg));
  transition:transform .12s ease-out;touch-action:pan-y;cursor:grab}
.pick-fan:active{cursor:grabbing}
.pick-card{position:absolute;left:50%;bottom:0;width:var(--cw);height:var(--ch);border-radius:14px;cursor:pointer;
  background:linear-gradient(148deg,#2c2164 0%,#1a1344 47%,#342573 100%);
  border:1.5px solid rgba(240,207,130,.5);
  box-shadow:0 10px 30px rgba(4,2,18,.55), inset 0 0 26px rgba(240,207,130,.06);
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(var(--ang)) translateY(calc(-1*var(--spread)));
  z-index:var(--z);
  transition:transform .3s var(--spring-fast), border-color .3s, box-shadow .3s, z-index .3s;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
.pick-card .pat{position:absolute;inset:7px;border-radius:10px;border:1px solid rgba(240,207,130,.32);
  background-image:radial-gradient(rgba(240,207,130,.30) 1px,transparent 1.7px),
                   radial-gradient(rgba(240,207,130,.17) 1px,transparent 1.7px);
  background-size:15px 15px,15px 15px;background-position:0 0,7.5px 7.5px}
.pick-card .em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(240,207,130,.92);font-size:calc(var(--cw)*.21);text-shadow:0 0 16px rgba(240,207,130,.55)}
.pick-card:hover{transform:translateX(-50%) rotate(var(--ang)) translateY(calc(-1*var(--spread))) translateY(-4px);
  border-color:rgba(240,207,130,.85);z-index:9990}
.pick-card:active{transform:translateX(-50%) rotate(var(--ang)) translateY(calc(-1*var(--spread))) scale(.97)}
.pick-card.picked{border-color:#ffd98a;box-shadow:0 0 0 2px rgba(255,217,138,.75), 0 10px 30px rgba(4,2,18,.55);
  transform:translateX(-50%) rotate(var(--ang)) translateY(calc(-1*var(--spread))) translateY(-8px);
  z-index:9999}
.pick-no{position:absolute;top:-9px;right:-9px;min-width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#1a1020;
  background:linear-gradient(160deg,#ffe6a8,#f0cf82);box-shadow:0 4px 12px rgba(240,207,130,.45);
  opacity:0;transform:scale(.4);transition:all .3s var(--spring-fast);z-index:3}
.pick-card.picked .pick-no{opacity:1;transform:scale(1)}
.pick-bar{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px;flex-wrap:wrap}
.pick-progress{font-size:.82rem;color:#a49cc9;letter-spacing:.12em}
.pick-progress b{color:var(--gold);font-size:.95rem}
.pick-bar .btn-glass:disabled{opacity:.35;pointer-events:none}
/* ---------- 抽牌模式切换（手动/自动） ---------- */
.mode-sel{display:flex;justify-content:center;gap:12px;margin-top:18px}
.mode-btn{cursor:pointer;border-radius:999px;padding:9px 26px;font-family:inherit;font-size:.84rem;
  letter-spacing:.2em;text-indent:.1em;color:#b9aedf;background:rgba(255,255,255,.03);
  border:1px solid rgba(240,207,130,.28);transition:all .3s var(--spring-fast);transform:translateZ(0)}
.mode-btn:hover{border-color:rgba(240,207,130,.55);color:var(--gold)}
.mode-btn.active{color:#1a1020;background:linear-gradient(160deg,#ffe6a8,#f0cf82);
  border-color:transparent;box-shadow:0 8px 24px rgba(240,207,130,.28)}
.mode-btn:active{transform:translateY(0) scale(.97)}
.btn-quick{cursor:pointer;border-radius:999px;padding:6px 16px;font-family:inherit;font-size:.74rem;
  letter-spacing:.14em;color:var(--gold);border:1px solid rgba(240,207,130,.35);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(6,3,22,.28);
  transition:all .3s var(--spring-fast);transform:translateZ(0);white-space:nowrap}
.btn-quick:hover{border-color:rgba(240,207,130,.6);background:rgba(240,207,130,.12);transform:translateY(-1px) scale(1.02)}
.btn-quick:active{transform:translateY(0) scale(.97)}
.btn-quick:disabled{opacity:.35;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.draw-actions{margin-top:22px;opacity:0;transition:.45s;pointer-events:none}
.draw-actions.on{opacity:1;pointer-events:auto}

/* ---------- 追问区（解读完成后，基于牌面最多 3 次） ---------- */
.followup{margin-top:16px;background:rgba(255,255,255,.045);border:1px solid rgba(240,207,130,.2);
  border-radius:14px;padding:14px}
.fu-head{font-size:.8rem;color:#cfc0a0;letter-spacing:.06em;margin-bottom:10px;text-align:center}
.fu-head b{color:var(--gold)}
.fu-row{display:flex;gap:8px}
.fu-row input{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(240,207,130,.25);
  border-radius:10px;padding:10px 12px;color:#f2ede0;font-family:inherit;font-size:.86rem;outline:none;min-width:0}
.fu-row input::placeholder{color:#7d74a8}
.fu-row input:focus{border-color:rgba(240,207,130,.5)}
.fu-row .btn-glass{padding:10px 18px;flex:none}
.fu-note{font-size:.74rem;color:#a79ade;margin-top:8px;text-align:center;min-height:1em}
/* 每次追问生成一个独立问答框 */
.fu-box{margin-top:14px;background:rgba(255,255,255,.045);border:1px solid rgba(240,207,130,.22);
  border-radius:14px;padding:14px 16px;animation:fuIn .45s ease}
@keyframes fuIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fu-box .fu-q{color:#cfc0a0;font-size:.86rem;margin-bottom:8px;line-height:1.6}
.fu-box .fu-q b{color:var(--gold)}
.fu-box .fu-a{color:#e6e0f4;line-height:1.85;font-size:.88rem}
/* 分享按钮：独占一行，与追问区/其他按钮拉开距离 */
.share-row{margin-top:22px;margin-bottom:14px;text-align:center}
.share-row .btn-share{padding:12px 34px;font-size:.88rem;letter-spacing:.1em}

/* ---------- 解读区 ---------- */
.reading{margin-top:clamp(36px,6vh,52px);text-align:left;display:none}
.reading-head{position:relative;text-align:center;margin-bottom:20px}
.btn-back-small{position:absolute;top:2px;left:0;z-index:2;background:rgba(255,255,255,.05);border:1px solid rgba(240,207,130,.28);
  color:var(--gold-dim);font-size:.8rem;letter-spacing:.1em;padding:6px 13px;border-radius:99px;
  cursor:pointer;transition:.2s;
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.btn-back-small:hover,.btn-back-small:active{border-color:var(--gold);color:var(--gold);background:rgba(240,207,130,.12)}
.reading-head h2{font-size:1.28rem;letter-spacing:.32em;text-indent:.32em;color:var(--gold);font-weight:600}
.divider{width:min(200px,48vw);height:1px;margin:16px auto;position:relative;
  background:linear-gradient(90deg,transparent,rgba(194,162,94,.55),transparent)}
.divider::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-53%);
  color:var(--gold);font-size:.68rem;background:#0a0620;padding:0 10px}
.ai-status{text-align:center;font-size:.82rem;color:#c4b8e8;letter-spacing:.14em;min-height:1.7em;margin-bottom:16px}
/* AI 思考中：月环旋转 + 文字渐隐 */
.ai-status.thinking{display:flex;align-items:center;justify-content:center;gap:12px}
.ai-status.thinking .status-word{animation:statusFade 3.2s ease-in-out infinite}
@keyframes statusFade{0%{opacity:.35}18%{opacity:1}82%{opacity:1}100%{opacity:.35}}
.orb-ring{position:relative;width:20px;height:20px;flex:none}
.orb-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(240,207,130,.25);border-top-color:var(--gold);
  animation:orbSpin 1.1s linear infinite}
.orb-ring::after{content:"✦";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.5rem;color:var(--gold);animation:orbGlow 2.2s ease-in-out infinite}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbGlow{0%,100%{opacity:.4;text-shadow:0 0 4px rgba(240,207,130,.3)}50%{opacity:1;text-shadow:0 0 10px rgba(240,207,130,.8)}}
@media (prefers-reduced-motion: reduce){.orb-ring::before,.orb-ring::after,.ai-status.thinking .status-word{animation:none}}
/* 解读区玻璃面板（降低 blur，保持质感） */
.parchment{
  background:linear-gradient(155deg,rgba(255,255,255,.065),rgba(255,255,255,.02));
  border:1px solid rgba(240,207,130,.24);border-radius:var(--r-lg);
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 22px 56px rgba(4,2,18,.45), inset 0 1px 0 rgba(255,255,255,.10);
  padding:clamp(22px,3.4vw,34px);line-height:2.05;font-size:.93rem;color:#ede6fa;
  transform:translateZ(0)}
.parchment h3{color:var(--gold);font-size:.98rem;letter-spacing:.16em;margin:1.4em 0 .5em;font-weight:600}
.parchment h3:first-child{margin-top:0}
.parchment ul{padding-left:1.4em;margin:.5em 0}
.parchment li{margin:.3em 0}
.parchment p{margin:.65em 0}
.parchment strong{color:#ffe4ab;font-weight:600}
.caret{display:inline-block;width:9px;height:1.05em;background:var(--gold);vertical-align:-2px;margin-left:4px;
  box-shadow:0 0 10px rgba(240,207,130,.85);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.reading-actions{text-align:center;margin-top:24px}

/* ---------- 图标按钮 / 弹窗 / 页脚 ---------- */
.icon-btn{position:fixed;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:6;
  width:42px;height:42px;border-radius:50%;font-size:1.04rem;cursor:pointer;
  border:1px solid rgba(240,207,130,.32);color:var(--gold);
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 20px rgba(4,2,18,.40);
  transition:all .3s var(--spring-fast);transform:translateZ(0)}
.icon-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px rgba(240,207,130,.22);transform:translateY(-2px) scale(1.04);border-color:rgba(240,207,130,.50)}
.icon-btn:active{transform:translateY(0) scale(.96)}
.modal-mask{position:fixed;inset:0;z-index:60;background:rgba(5,3,16,.58);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s ease, visibility 0s linear .38s}
.modal-mask.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .38s ease}
.modal-mask .modal{opacity:0;transform:scale(.92) translateY(16px);
  transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1)}
.modal-mask.open .modal{opacity:1;transform:none}
@keyframes pop{from{opacity:0;transform:scale(.90) translateY(12px)}to{opacity:1;transform:none}}
.modal{width:min(620px,96%);max-height:min(78vh,740px);overflow:auto;
  border-radius:var(--r-lg);padding:clamp(20px,3vw,26px);text-align:left;
  background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border:1px solid rgba(240,207,130,.28);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 28px 72px rgba(4,2,18,.55), inset 0 1px 0 rgba(255,255,255,.12);
  transform:translateZ(0)}
@keyframes pop{from{opacity:0;transform:scale(.90) translateY(12px)}to{opacity:1;transform:none}}
.modal h3{color:var(--gold);letter-spacing:.20em;text-align:center;margin-bottom:16px;font-size:1.08rem}
/* ---------- 公告 / 使用说明 ---------- */
.icon-btn--notice{top:calc(16px + env(safe-area-inset-top));right:66px}
.btn-quote{width:100%;margin-top:12px;font-size:.9rem}

/* ---------- 文案签 ---------- */
.modal--quote{width:min(460px,94%);max-height:min(86vh,720px);display:flex;flex-direction:column}
.quote-card{flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(240,207,130,.20);padding:14px}
.quote-img-wrap{border-radius:calc(var(--r-md) - 4px);overflow:hidden;aspect-ratio:3/2;background:#0a0720;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.quote-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) brightness(.88) contrast(1.02);transition:opacity .7s ease}
.quote-img-wrap img:hover{filter:saturate(1) brightness(.95)}
.quote-line{margin-top:16px;text-align:center;font-size:.98rem;line-height:1.9;letter-spacing:.08em;
  font-style:italic;color:#ece6ff;opacity:0;transform:translateY(8px);transition:opacity .8s ease,transform .8s ease}
.quote-line.show{opacity:1;transform:none}
.quote-no{margin-top:10px;text-align:center;font-size:.68rem;letter-spacing:.3em;color:rgba(240,207,130,.5)}
.modal--notice{width:min(520px,96%);max-height:min(92vh,820px);display:flex;flex-direction:column}
.notice-body{flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
/* ---------- 历史：与公告同款布局（内容滚动，按钮固定底部） ---------- */
.modal--hist{width:min(560px,96%);max-height:min(80vh,680px);display:flex;flex-direction:column}
.hist-body{flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
.notice-body{text-align:left;font-size:.86rem;line-height:1.9;color:#d8d0ef}
.notice-steps{padding-left:1.35em;margin:0 0 14px}
.notice-steps li{margin:.45em 0}
.notice-steps b{color:var(--gold);font-weight:600;letter-spacing:.05em}
.notice-tips{border-top:1px solid rgba(240,207,130,.18);padding-top:12px}
.notice-tips p{margin:.4em 0;font-size:.8rem;color:#b5abd8}
.notice-changelog{border-top:1px dashed rgba(240,207,130,.22);margin-top:12px;padding-top:10px}
.notice-changelog .chg-title{font-size:.74rem;color:var(--gold);letter-spacing:.12em;margin-bottom:6px;font-weight:600}
.notice-changelog ul{margin:0;padding-left:1.1em;list-style:none}
.notice-changelog li{margin:.32em 0;font-size:.72rem;line-height:1.55;color:#9b91bd;position:relative}
.notice-changelog li::before{content:"·";position:absolute;left:-1em;color:rgba(240,207,130,.55)}
.notice-changelog b{color:#c9bfe8;font-weight:600}
.btn-notice-ok{margin-top:0;padding:13px 40px;font-size:.94rem}
.icon-btn--music{top:calc(16px + env(safe-area-inset-top));right:116px}
.icon-btn--home{top:calc(16px + env(safe-area-inset-top));left:18px;right:auto;
  width:auto;height:auto;padding:8px 20px;border-radius:999px;
  font-family:inherit;font-size:.76rem;letter-spacing:.2em;text-indent:.1em;
  color:var(--gold);border:1px solid rgba(240,207,130,.32);
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:all .3s var(--spring-fast);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -6px 12px rgba(255,255,255,.06), 0 6px 20px rgba(4,2,18,.40)}
.icon-btn--home:hover,.icon-btn--home:active{background:rgba(240,207,130,.14);border-color:rgba(240,207,130,.6)}
/* ---------- 音乐播放器 ---------- */
.modal--music{width:min(480px,94%);max-height:min(84vh,700px);display:flex;flex-direction:column}
.modal--music-ask{width:min(380px,92%)}
.music-ask-text{text-align:center;color:#d8d0ef;font-size:.92rem;line-height:1.9}
.music-body{flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
.music-now{text-align:center;font-size:.95rem;color:var(--gold);letter-spacing:.08em;margin:6px 0 14px;
  text-shadow:0 0 14px rgba(240,207,130,.25);min-height:1.4em}
.music-ctl{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:12px}
.music-btn{width:46px;height:46px;border-radius:50%;font-size:1rem;cursor:pointer;color:var(--gold);
  border:1px solid rgba(240,207,130,.32);background:rgba(255,255,255,.06);
  transition:all .25s var(--spring-fast)}
.music-btn:active{transform:scale(.92)}
.music-btn--main{width:62px;height:62px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(240,207,130,.22),rgba(240,207,130,.08));
  border-color:rgba(240,207,130,.55);box-shadow:0 6px 20px rgba(240,207,130,.18)}
.music-bar{position:relative;height:18px;cursor:pointer;display:flex;align-items:center}
.music-bar::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:5px;border-radius:99px;background:rgba(255,255,255,.08)}
.music-bar-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:5px;width:0%;border-radius:99px;pointer-events:none;
  background:linear-gradient(90deg,rgba(240,207,130,.5),rgba(240,207,130,.9));transition:width .15s linear}
.music-time{display:flex;justify-content:space-between;font-size:.68rem;color:#8f86b8;margin:6px 2px 12px}
.music-list{border-top:1px solid rgba(240,207,130,.15);padding-top:8px}
.music-efx{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:14px 2px 4px}
.music-efx .efx-label{font-size:.78rem;color:#8b82b0;letter-spacing:1px;margin-right:2px}
.efx-chip{padding:6px 13px;font-size:.78rem;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);color:#b9b1dd;border:1px solid rgba(255,255,255,.12);
  transition:.25s;white-space:nowrap}
.efx-chip:hover{background:rgba(255,255,255,.12)}
.efx-chip.on{background:rgba(180,150,255,.26);color:#fff;border-color:rgba(180,150,255,.7);
  box-shadow:0 0 12px rgba(180,150,255,.35)}
.music-item{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:10px;
  font-size:.86rem;color:#d8d0ef;cursor:pointer;transition:background .2s}
.music-item:hover{background:rgba(240,207,130,.08)}
.music-item.playing{color:var(--gold);background:rgba(240,207,130,.12)}
.music-item .mi-idx{opacity:.45;font-size:.75rem;margin-right:8px}
.hist-item{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;margin-bottom:10px;
  font-size:.82rem;color:#cfc6ea;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.hist-item:active{border-color:rgba(240,207,130,.4);background:rgba(240,207,130,.05)}
.hist-item b{color:var(--gold);-webkit-user-select:text;user-select:text}
.hist-item .hist-cards,.hist-item div:last-child{-webkit-user-select:text;user-select:text}
.hist-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hist-fav{background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;padding:2px 4px;color:#7d74a8;transition:.2s}
.hist-fav:hover{color:var(--gold);transform:scale(1.15)}
.hist-item.fav{border-color:rgba(240,207,130,.5);background:rgba(240,207,130,.06)}
.hist-item.fav .hist-fav{color:var(--gold)}
.hist-cards{margin:5px 0;color:#b5abd8;font-size:.8rem}
footer{margin-top:clamp(48px,8vh,72px);font-size:.7rem;color:#948cbf;line-height:2.15;letter-spacing:.05em}
.sleep-note{
  margin-top:16px;font-size:.98rem;letter-spacing:.6em;text-indent:.6em;font-style:italic;font-weight:500;
  background:linear-gradient(120deg,#a79ade,#efe3ff 32%,#7f74c8 58%,#b9aef0 82%,#a79ade);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sleepBreath 5s ease-in-out infinite,sleepFlow 7s linear infinite;
}
@keyframes sleepBreath{
  0%,100%{opacity:.55;filter:drop-shadow(0 0 8px rgba(167,154,222,.20))}
  50%{opacity:1;filter:drop-shadow(0 0 18px rgba(190,168,255,.55))}
}
@keyframes sleepFlow{0%{background-position:0% 50%}100%{background-position:220% 50%}}

/* ---------- 深空彩蛋 ---------- */
.void{position:relative;height:100svh;z-index:3;
  background:linear-gradient(180deg,rgba(4,2,14,0) 0%,#030112 12%,#01000a 55%,#000005 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.void-hint{font-size:.74rem;letter-spacing:.5em;text-indent:.5em;color:rgba(240,207,130,.35);
  animation:voidBreathe 4s ease-in-out infinite;pointer-events:none;text-align:center;padding:0 20px}
@keyframes voidBreathe{0%,100%{opacity:.2;transform:translateY(6px)}50%{opacity:.75;transform:none}}
.void-escaped{position:fixed;inset:0;z-index:70;background:#010006;
  opacity:0;pointer-events:none;transition:opacity .8s ease;touch-action:none;overscroll-behavior:contain}
.void-escaped.on{opacity:1;pointer-events:auto;cursor:crosshair}
.void-escaped .esc-hint{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;font-size:.72rem;letter-spacing:.4em;color:rgba(240,207,130,.4);
  animation:voidBreathe 4s ease-in-out infinite;pointer-events:none}
.void-escaped .esc-mood{position:absolute;bottom:calc(72px + env(safe-area-inset-bottom));left:50%;
  transform:translate(-50%,10px);max-width:min(78vw,460px);text-align:center;
  font-size:.92rem;line-height:1.9;letter-spacing:.12em;font-style:italic;
  color:rgba(232,226,255,.78);text-shadow:0 1px 12px rgba(10,6,30,.9);
  opacity:0;transition:opacity 1.1s ease,transform 1.1s ease;pointer-events:none}
.void-escaped .esc-mood.on{opacity:1;transform:translate(-50%,0)}
.void-escaped .esc-back{position:absolute;top:calc(18px + env(safe-area-inset-top));left:18px;z-index:5;
  cursor:pointer;border-radius:999px;padding:8px 20px;font-family:inherit;font-size:.76rem;
  letter-spacing:.2em;color:var(--gold);border:1px solid rgba(240,207,130,.35);
  background:rgba(255,255,255,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .3s var(--spring-fast)}
.void-escaped .esc-back:hover{background:rgba(240,207,130,.12);border-color:rgba(240,207,130,.6)}
.void-escaped canvas{position:absolute;inset:0}

/* ---------- 自适应 ---------- */
/* ---------- 入场编排（MOTION shown, not just claimed） ---------- */
@media (prefers-reduced-motion: no-preference){
  .kicker,.title,.subtitle,#setupPanel{opacity:0;animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards}
  .kicker{animation-delay:.05s}
  .title{animation-delay:.16s}
  .subtitle{animation-delay:.3s}
  #setupPanel{animation-delay:.44s;transform:translateY(22px)}
}
@keyframes riseIn{to{opacity:1;transform:none}}
/* ---------- Reduced motion：全部退化为静态 ---------- */
@media (prefers-reduced-motion: reduce){
  .aurora i,.tapped-hint,.caret,.sleep-note{animation:none !important}
  .halo{display:none}
  *{transition-duration:.01ms !important}
}
@media(max-width:420px){:root{--cw:104px;--ch:176px;--sw:132px}}
@media(min-width:900px){:root{--cw:142px;--ch:238px;--sw:178px}}
@media(max-width:340px){.subtitle br{display:none}}
/* 横屏（含手机横屏）：压缩垂直空间 */
body.is-landscape :root{}
body.is-landscape{--cw:96px;--ch:162px;--sw:122px}
body.is-landscape .deck-zone{height:clamp(158px,26vh,196px)}
body.is-landscape h1.title{font-size:clamp(1.5rem,4.2vw,2.2rem)}
body.is-landscape .subtitle{font-size:.84rem;line-height:1.7}
body.is-landscape .card-name{font-size:.82rem}
body.is-landscape .tapped-hint{margin-top:12px}

/* ---------- 今日星座运势（全屏新界面） ---------- */

/* 主界面星座按钮 · 高级金调 */