/* ============================================================
   styles.css — 占星圣所 · 舞台版 v2
   占星师立于中央，星环绕转；选项卡嵌于腹部；由她发牌。
   换主题只改 :root 变量。
   ============================================================ */
:root{
  --bg-0:#07061a;
  --bg-1:#12102e;
  --gold:#e9c46a;
  --gold-soft:#f6dfae;
  --purple:#8f6bff;
  --ink:#efeaff;
  --ink-dim:#a79dd8;
  --line:rgba(233,196,106,.30);
  --glass:rgba(18,14,46,.66);
  --cw:clamp(96px, 11.5vmin, 136px);   /* 牌宽 */
  --font-title:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STZhongsong","SimSun",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(143,107,255,.16), transparent 60%),
    radial-gradient(900px 540px at -8% 24%, rgba(233,196,106,.08), transparent 55%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1) 60%,var(--bg-0));
  overflow-x:hidden;
  min-height:100vh;
}
.hidden{display:none!important}
.dim{color:var(--ink-dim);font-size:13px}

/* ---------- 画布层 ---------- */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
#fx {position:fixed;inset:0;z-index:8;pointer-events:none}

/* ---------- 星空氛围层：动态星云 + 银河纱（110s 极慢漂移） ---------- */
#cosmos{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
/* 星云团 + 银河：整层缓慢流动（GPU transform，只露 inset 余量不露边） */
#cosmos::before{
  content:"";position:absolute;inset:-9%;
  background:
    radial-gradient(34% 24% at 22% 24%, rgba(143,107,255,.16), transparent 68%),
    radial-gradient(26% 20% at 80% 16%, rgba(92,126,255,.13), transparent 70%),
    radial-gradient(30% 22% at 12% 84%, rgba(233,196,106,.09), transparent 72%),
    radial-gradient(22% 17% at 76% 82%, rgba(143,107,255,.12), transparent 70%),
    radial-gradient(16% 13% at 44% 4%,  rgba(255,255,255,.06), transparent 70%),
    linear-gradient(115deg,
      transparent 30%,
      rgba(200,205,255,.07) 42%,
      rgba(255,240,210,.10) 50%,
      rgba(170,190,255,.06) 58%,
      transparent 72%);
  filter:blur(6px);
  animation:cosmoFlow 110s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cosmoFlow{
  from{transform:translate(-1.2%,-.8%) scale(1)}
  to  {transform:translate(1.4%,1.1%) scale(1.045)}
}
/* 银河上细碎的小星尘：缓慢呼吸 */
#cosmos::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1.2px 1.2px at 22% 34%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 38% 62%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.6px 1.6px at 55% 28%, rgba(255,244,214,.55), transparent 100%),
    radial-gradient(1px 1px at 70% 46%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.4px 1.4px at 84% 66%, rgba(255,244,214,.45), transparent 100%),
    radial-gradient(1px 1px at 12% 70%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(1.2px 1.2px at 92% 88%, rgba(255,255,255,.30), transparent 100%),
    radial-gradient(1px 1px at 60% 90%, rgba(255,255,255,.30), transparent 100%);
  animation:dustPulse 14s ease-in-out infinite alternate;
}
@keyframes dustPulse{from{opacity:.45} to{opacity:.8}}

/* ---------- 舞台 ---------- */
#stage{position:relative;z-index:1;height:100dvh;min-height:640px;overflow:hidden}

/* 圣光光柱（已删 —— 太生硬，乙游感是"角色自己发光"） */

/* 舞台四周极轻微暗角：保留纵深但极不显眼（0.18 alpha、宽过渡） */
#stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(125% 95% at 50% 42%,
    transparent 58%,
    rgba(3,2,12,.18) 100%);
}
/* 身后光晕（柔化、稍大、稍淡 —— 乙游感是"光从人物身上散出来"） */
.halo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:110vmin;height:110vmin;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle, rgba(233,196,106,.16) 0%, rgba(143,107,255,.20) 30%, transparent 68%),
    radial-gradient(circle, transparent 60%, rgba(233,196,106,.12) 76%, rgba(233,196,106,.28) 88%, transparent 97%);
  animation:breath 6s ease-in-out infinite;opacity:.8;transition:opacity .6s;
}
#stage.divining .halo{opacity:.9;animation-duration:1.6s}
@keyframes breath{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}

/* ---------- 星环（法阵级：实线+光晕三层 + 刻度 + 能量珠） ---------- */
.ring{
  position:absolute;left:50%;top:42vh;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  border:1.5px solid rgba(233,196,106,.55);
  box-shadow:0 0 14px rgba(233,196,106,.16), inset 0 0 18px rgba(143,107,255,.08);
}
.ring span{
  position:absolute;left:50%;top:50%;
  color:var(--gold-soft);font-size:17px;line-height:1;
  text-shadow:0 0 10px rgba(233,196,106,.8);
}
/* 外环 · 金色（占星符号）：放大 1100px 让环盖住立绘矩形边缘，消除"图=矩形"感 */
.ring-outer{width:min(120vmin, 1100px);height:min(120vmin, 1100px);
  border-color:rgba(233,196,106,.55);
  box-shadow:0 0 22px rgba(233,196,106,.20), inset 0 0 26px rgba(143,107,255,.08);}
.ring-outer span{font-size:20px;text-shadow:0 0 10px rgba(233,196,106,.9),0 0 18px rgba(233,196,106,.45);}
/* 中环 · 紫色（混合符）：比 img 大，让环在矩形边外 */
.ring-mid{width:min(86vmin, 800px);height:min(86vmin, 800px);
  border-color:rgba(143,107,255,.55);
  box-shadow:0 0 18px rgba(143,107,255,.22), inset 0 0 22px rgba(143,107,255,.12);}
.ring-mid span{font-size:14px;color:#d9b8ff;text-shadow:0 0 8px rgba(217,184,255,.7);}
/* 内环 · 金色（刻度盘）：居中在人物脸/胸部 */
.ring-inner{width:min(50vmin, 450px);height:min(50vmin, 450px);
  border-color:rgba(233,196,106,.7);
  box-shadow:0 0 18px rgba(233,196,106,.30), inset 0 0 20px rgba(233,196,106,.14);}
/* 刻度（占星仪盘面） */
.ring-tick{position:absolute;left:50%;top:50%;width:5px;height:1.4px;border-radius:1px;
  background:rgba(233,196,106,.5);box-shadow:0 0 4px rgba(233,196,106,.4);pointer-events:none;}
.ring-tick-big{width:8px;height:1.8px;background:rgba(233,196,106,.85);box-shadow:0 0 6px rgba(233,196,106,.6);}
/* 能量珠：每环 12 点钟位置的亮点（随环旋转） */
.ring-orb{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle,#fff6dd 0%,#f6dfae 36%,#e9c46a 72%,transparent 100%);
  box-shadow:0 0 8px #f6dfae, 0 0 18px rgba(246,223,174,.5), 0 0 3px #fff;
  pointer-events:none;z-index:3;}

/* ---------- 占星师 ---------- */
#astrologer{
  position:absolute;inset:0;margin:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#astrologer{pointer-events:auto}
#astroImg{cursor:pointer}
#astroImg{
  height:auto;width:auto;max-width:94%;max-height:88dvh;display:block;
  object-fit:contain;position:relative;z-index:4;
  filter:drop-shadow(0 0 46px rgba(143,107,255,.28)) saturate(1.04) brightness(1.03);
  animation:float 7s ease-in-out infinite;
  /* 边缘 mask 椭圆羽化（对真透明 PNG 有用，对 RGB 图几乎无效——只能依赖外环盖住矩形） */
  -webkit-mask-image:radial-gradient(ellipse 105% 105% at 50% 50%, #000 55%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.1) 85%, transparent 95%);
          mask-image:radial-gradient(ellipse 105% 105% at 50% 50%, #000 55%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.1) 85%, transparent 95%);
}
/* 撤掉 #astrologer::after 色调统一层：之前为"带矩形底图的 v2"做色差过渡，真透明 PNG 上
   反而成多余色块（用户看到的"边框"是这层在 figure 矩形范围留下的渐变暗角）。 */
#stage.divining #astroImg{filter:drop-shadow(0 0 46px rgba(233,196,106,.55)) saturate(1.12) brightness(1.06)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* 祭台地面：脚下宽光带 + 亮弧线，让她"站在光台上" */
.floor-glow{
  position:absolute;bottom:-1vh;left:50%;transform:translateX(-50%);
  width:66vmin;height:11vmin;border-radius:50%;
  background:radial-gradient(ellipse,
    rgba(233,196,106,.45),
    rgba(233,196,106,.12) 52%,
    transparent 74%);
}
.floor-glow::after{
  content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:36vmin;height:2.4vmin;border-radius:50%;filter:blur(1px);
  background:radial-gradient(ellipse,rgba(246,223,174,.8),transparent 72%);
}

/* ---------- 腹部选项区（HUD） ---------- */
#hud{
  position:absolute;left:50%;top:58vh;transform:translateX(-50%);
  z-index:5;width:min(760px,94vw);text-align:center;
}
.whisper{
  margin:0 0 12px;color:var(--gold-soft);font-size:14px;letter-spacing:4px;
  text-shadow:0 0 12px rgba(233,196,106,.5);
}
/* 等级称呼：她现在叫你的名字 */
.greet-title{font-family:var(--font-title);font-size:13px;color:var(--purple);
  letter-spacing:2px;margin-left:6px;opacity:.85;font-weight:500;
  text-shadow:0 0 10px rgba(143,107,255,.4)}
.gold-btn{
  cursor:pointer;border:none;border-radius:999px;
  padding:13px 34px;font-size:15px;font-weight:600;color:#221a05;font-family:inherit;
  background:linear-gradient(135deg,#f6dfae,#e9c46a 55%,#c99a3f);
  box-shadow:0 6px 26px rgba(233,196,106,.45),inset 0 0 0 1px rgba(255,255,255,.35);
  transition:.2s;letter-spacing:2px;
}
.gold-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(233,196,106,.6)}
.gold-btn.small{padding:10px 22px;font-size:13px}

/* —— 提问咒文面板 —— */
.q-panel{
  position:relative;max-width:560px;margin:0 auto;padding:24px 28px 20px;
  background:linear-gradient(165deg,rgba(32,25,76,.88),rgba(13,10,36,.94));
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 1px rgba(233,196,106,.08) inset,0 0 34px rgba(143,107,255,.20);
  backdrop-filter:blur(12px);
  animation:qIn .5s cubic-bezier(.3,.8,.3,1);
}
@keyframes qIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
.q-panel::before,.q-panel::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border:1px solid var(--gold);opacity:.85;
}
.q-panel::before{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.q-panel::after{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 8px 0}
.q-title{margin:0 0 4px;color:var(--gold-soft);font-size:16px;letter-spacing:5px;text-shadow:0 0 14px rgba(233,196,106,.55)}
.q-sub{margin:0 0 16px;color:var(--ink-dim);font-size:12px;letter-spacing:2px}
#question{
  width:100%;padding:14px 16px;font-size:15px;font-family:inherit;color:var(--ink);
  background:rgba(0,0,0,.30);border:1px solid rgba(233,196,106,.25);border-radius:12px;outline:none;
  transition:.25s;
}
#question::placeholder{color:var(--ink-dim)}
#question:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(233,196,106,.12),0 0 26px rgba(233,196,106,.22);
  background:rgba(0,0,0,.38);
}
.q-actions{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:16px}
.back-row{margin-top:14px}
.ghost-btn.mini{padding:7px 14px;font-size:12px;border-radius:8px}

/* 牌阵选项卡（扇形排布感） */
#spreadTabs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tab{
  cursor:pointer;font-family:inherit;color:var(--ink);text-align:left;
  width:150px;padding:12px 14px;border-radius:14px;
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(10px);transition:.2s;position:relative;
}
.tab::before{
  content:"";position:absolute;top:8px;right:10px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px var(--gold);opacity:.7;
}
.tab:hover{transform:translateY(-4px);border-color:var(--gold)}
.tab.active{border-color:var(--gold);background:rgba(233,196,106,.14);box-shadow:0 0 0 1px var(--gold) inset,0 8px 24px rgba(233,196,106,.25)}
.tab-glyph{color:var(--gold);font-size:13px}
.tab-name{display:block;font-size:15px;font-weight:600;margin:2px 0 4px;letter-spacing:1px}
.tab-sub{display:block;font-size:11px;color:var(--ink-dim);line-height:1.5}

/* ---------- 牌桌（发牌落点，悬浮于舞台下方） ---------- */
#table{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:13vh;z-index:6;width:min(1120px,96vw);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  transition:bottom .65s cubic-bezier(.3,.8,.3,1);pointer-events:none;
}
#table.lifted{bottom:44vh}
#table:empty{display:none}

/* 卡牌 */
.card{
  width:var(--cw);height:calc(var(--cw)*1.66);position:relative;perspective:1100px;
  opacity:0;
}
.card:not(.dealt){
  transform:translate(var(--fx,0),var(--fy,0)) scale(.3) rotate(-14deg);
}
.card.dealt{
  opacity:1;transform:none;pointer-events:auto;
  transition:transform .9s cubic-bezier(.22,.9,.3,1) var(--d,0s),opacity .35s linear var(--d,0s);
}
.card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.3,.7,.3,1) var(--fd,0s);
}
.card.flipped .card-inner{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  overflow:hidden;border:1px solid var(--line);
}
.face.back{
  background:
    radial-gradient(circle at 50% 50%,rgba(233,196,106,.16),transparent 60%),
    repeating-linear-gradient(45deg,rgba(143,107,255,.14) 0 7px,transparent 7px 14px),
    linear-gradient(160deg,#251d5e,#0e0b28);
  justify-content:center;
}
.face.back span{font-size:calc(var(--cw)*.34);color:var(--gold);text-shadow:0 0 16px rgba(233,196,106,.9)}
.face.front{
  transform:rotateY(180deg);padding:9px 7px;justify-content:flex-start;
  background:linear-gradient(165deg,#221b56 0%,#141034 70%,#1b1440 100%);
  box-shadow:inset 0 0 0 1px rgba(233,196,106,.35),inset 0 0 22px rgba(143,107,255,.25);
}
.face.front.reversed{box-shadow:inset 0 0 0 1px rgba(255,130,130,.45),inset 0 0 22px rgba(143,107,255,.25)}
.c-pos{font-size:10px;color:var(--gold-soft);letter-spacing:2px}
.c-glyph{font-size:calc(var(--cw)*.26);margin:5px 0 2px}
.c-name{font-size:calc(var(--cw)*.115);font-weight:600;line-height:1.25}
.c-name small{display:block;font-size:9px;color:var(--ink-dim);font-weight:400}
.c-orient{font-size:10px;color:#c9b2ff;margin:4px 0}
.c-mean{
  font-size:calc(var(--cw)*.068);color:var(--ink-dim);line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
}
/* 翻牌瞬间：一道金光斜扫过牌面 */
.face.front::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,242,204,.5) 45%,
             rgba(255,255,255,.8) 50%,rgba(255,242,204,.5) 55%,transparent);
  transform:translateX(-220%) skewX(-16deg);pointer-events:none;
}
.card.flipped .face.front::after{animation:sheen 1.15s cubic-bezier(.4,0,.3,1) .3s both}
@keyframes sheen{to{transform:translateX(320%) skewX(-16deg)}}

/* ---------- 解读卷轴 ---------- */
#reading{
  position:fixed;left:50%;bottom:0;z-index:7;
  width:min(940px,96vw);max-height:46vh;overflow:auto;
  transform:translate(-50%,108%);transition:transform .7s cubic-bezier(.3,.8,.3,1);
  background:linear-gradient(180deg,rgba(26,21,64,.94),rgba(11,9,30,.97));
  border:1px solid var(--line);border-bottom:none;
  border-radius:22px 22px 0 0;backdrop-filter:blur(12px);
  padding:16px 24px 14px;box-shadow:0 -18px 60px rgba(0,0,0,.55);
}
#reading.show{transform:translate(-50%,0)}
.scroll-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.astro-mark{color:var(--gold);text-shadow:0 0 10px rgba(233,196,106,.8)}
.scroll-head h3{margin:0;font-size:15px;letter-spacing:1px;color:var(--gold-soft);font-weight:500}
#readingBody{font-size:14px;line-height:1.95;color:var(--ink)}
.caret{display:inline-block;width:2px;height:15px;background:var(--gold);margin-left:2px;vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.scroll-foot{display:flex;justify-content:center;margin-top:12px}

/* ---------- 历史 ---------- */
#historyBtn,#muteBtn{
  position:fixed;top:18px;z-index:11;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:19px;color:var(--gold-soft);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);transition:.2s;
}
#historyBtn{right:18px}
#muteBtn{right:74px}
#muteBtn.off{opacity:.42;text-decoration:line-through}
#muteBtn.live{box-shadow:0 0 0 2px rgba(233,196,106,.35)}
#historyBtn:hover{border-color:var(--gold);transform:rotate(-12deg)}
#historyPanel{
  position:fixed;top:0;right:0;height:100vh;z-index:10;
  width:min(340px,88vw);padding:20px;
  background:linear-gradient(180deg,rgba(24,19,58,.96),rgba(10,8,28,.98));
  border-left:1px solid var(--line);backdrop-filter:blur(14px);
  transform:translateX(105%);transition:transform .5s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;gap:12px;
}
#historyPanel.open{transform:translateX(0)}
#historyPanel h3{margin:0;font-size:15px;color:var(--gold-soft);letter-spacing:2px;font-weight:500}
#historyList{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px}
.h-item{cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.22);transition:.15s}
.h-item:hover{border-color:var(--purple);background:rgba(143,107,255,.12)}
.h-item b{color:var(--gold-soft);font-size:13px}
.h-item span{float:right;color:var(--ink-dim);font-size:11px}
.h-item p{margin:5px 0 0;font-size:12px;color:var(--ink)}
.ghost-btn{
  cursor:pointer;border-radius:10px;padding:9px 18px;font-size:13px;font-family:inherit;
  color:var(--ink-dim);background:transparent;border:1px solid var(--line);transition:.2s;
}
.ghost-btn:hover{color:var(--ink);border-color:var(--gold)}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:rgba(233,196,106,.25);border-radius:4px}

/* ---------- 乙游化：角色回应 / 稀有度演出 ---------- */
/* 点击立绘：她轻轻一颤 */
@keyframes react{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  25%    {transform:translateY(-7px) rotate(-1deg) scale(1.015)}
  60%    {transform:translateY(3px) rotate(.8deg) scale(.995)}
}
#astroImg.react{animation:react .62s ease}

/* 她的低语气泡 */
#astroLine{
  position:fixed;left:50%;top:23vh;transform:translateX(-50%);z-index:12;
  padding:10px 22px;border-radius:999px;pointer-events:none;
  background:linear-gradient(135deg,rgba(38,29,88,.92),rgba(16,12,42,.94));
  border:1px solid var(--line);color:var(--gold-soft);
  font-size:14px;letter-spacing:2px;white-space:nowrap;
  box-shadow:0 0 30px rgba(233,196,106,.25),0 10px 34px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);animation:lineIn .45s cubic-bezier(.3,.8,.3,1);
}
@keyframes lineIn{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.94)}}

/* 卡牌稀有度：普通 / 闪耀 / 传说（对应乙游 SSR 演出） */
.c-rar{position:absolute;top:7px;right:9px;font-size:10px;letter-spacing:1px}
.card.r-rare   .face.front{box-shadow:inset 0 0 0 1px rgba(155,107,255,.7),inset 0 0 26px rgba(143,107,255,.38)}
.card.r-rare   .c-rar{color:#c9b2ff;text-shadow:0 0 8px rgba(143,107,255,.8)}
.card.r-legend .face.front{animation:legendGlow 2.4s ease-in-out infinite}
.card.r-legend .c-rar{color:#ffe9b8;text-shadow:0 0 10px rgba(233,196,106,.95)}
@keyframes legendGlow{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(233,196,106,.85),inset 0 0 30px rgba(233,196,106,.32)}
  50%    {box-shadow:inset 0 0 0 2px rgba(255,238,190,1),  inset 0 0 48px rgba(233,196,106,.55)}
}

/* ---------- 乙游化：她亲口念（语音朗读 · voice.js） ---------- */
.scroll-foot{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
/* 按句高亮：文字跟着声音走，像视觉小说的字幕同步 */
.vseg{display:block;transition:color .35s,text-shadow .35s}
.vseg + .vseg{margin-top:.45em}
.vseg.speaking{
  color:#fff6dd;
  text-shadow:0 0 14px rgba(233,196,106,.75),0 0 32px rgba(233,196,106,.35);
}
/* 说话中的按钮：金色脉动 */
#speakBtn.speaking{
  background:linear-gradient(135deg,#fff3d0,#f0d089 55%,#d8ae5a);
  animation:speakPulse 1.7s ease-in-out infinite;
}
@keyframes speakPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(233,196,106,.35),0 8px 26px rgba(233,196,106,.45)}
  50%    {box-shadow:0 0 0 6px rgba(233,196,106,.16),0 8px 32px rgba(233,196,106,.62)}
}
/* 她开口时：脚下光晕与立绘呼吸随之加快，像真的在说话 */
#astrologer.speaking .floor-glow{animation:speakGlow 1.5s ease-in-out infinite}
@keyframes speakGlow{
  0%,100%{opacity:.55;transform:translateX(-50%) scale(.94)}
  50%    {opacity:1;  transform:translateX(-50%) scale(1.07)}
}
#astrologer.speaking #astroImg{animation-duration:3.2s}
#autoSpeakBtn.off{opacity:.45;text-decoration:line-through}

/* ---------- 乙游化：标题衬线（与 CG 标题呼应） ---------- */
.q-title,.scroll-head h3,#historyPanel h3{font-family:var(--font-title);font-weight:500}

/* ---------- 开场 CG（cg.js · 星尘汇聚成标题） ---------- */
#cg{
  position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:18vh;cursor:pointer;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(143,107,255,.22), transparent 60%),
    radial-gradient(700px 480px at 50% 60%, rgba(233,196,106,.10), transparent 65%),
    linear-gradient(180deg, rgba(7,6,26,.92), rgba(10,8,28,.96) 50%, rgba(7,6,26,.95));
  opacity:0;transition:opacity .6s ease;
}
#cg.on{opacity:1}
#cg.out{opacity:0}
/* 顶部金色圣光柱，与舞台 .beam 呼应 */
.cg-beam{position:absolute;top:-8vh;left:50%;width:60vmin;height:30vh;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,rgba(233,196,106,.30),transparent 70%);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);filter:blur(6px);}
/* 大标题「星澜」—— 金色衬线、字距拉宽（v2.5：更慢节奏，仪式感） */
.cg-name{font-family:var(--font-title);font-weight:500;font-size:64px;letter-spacing:.4em;color:transparent;
  background:linear-gradient(180deg,#fff6dd 0%,#f6dfae 50%,#e9c46a 100%);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 0 24px rgba(233,196,106,.45);
  opacity:0;transform:translateY(16px) scale(1.06);
  transition:opacity 1.3s ease,transform 1.3s cubic-bezier(.22,.61,.36,1);}
.cg-name.on{opacity:1;transform:translateY(0) scale(1)}
.cg-sub{margin-top:10px;font-family:var(--font-title);font-size:22px;letter-spacing:.5em;
  color:var(--gold-soft);text-shadow:0 0 14px rgba(233,196,106,.6);
  opacity:0;transform:translateY(12px);
  transition:opacity 1.2s ease .2s,transform 1.2s ease .2s;}
.cg-sub.on{opacity:.95;transform:translateY(0)}
.cg-tag{margin:24px 0 0;font-family:var(--font-title);font-size:14px;letter-spacing:.5em;
  color:var(--ink-dim);opacity:0;transition:opacity 1.2s ease;}
.cg-tag.on{opacity:1}
/* 跳过按钮：1.2s 后才渐入（避免一开始就显示"想点跳过"的暗示） */
#cgSkip{position:absolute;top:20px;right:22px;z-index:2;opacity:0;animation:skipIn .5s ease 1.2s forwards}
@keyframes skipIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
/* 星尘粒子 */
#cg .dust{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff6dd 0%,#f6dfae 40%,#e9c46a 70%,transparent 100%);
  box-shadow:0 0 8px rgba(233,196,106,.6);
  opacity:.9;transform:translate(var(--tx,0),var(--ty,0)) scale(1);
  transition:transform var(--ds,.9s) cubic-bezier(.2,.7,.3,1) var(--dl,0s),
             opacity var(--ds,.9s) ease var(--dl,0s);
  pointer-events:none;}
#cg.on .dust{transform:translate(0,0) scale(.25);opacity:0}

/* ---------- 响应式 & 降级 ---------- */

/* 平板（横竖屏中间档） */
@media (max-width:1024px){
  .ring-outer{width:min(94vmin, 720px);height:min(94vmin, 720px)}
  .ring-mid  {width:min(64vmin, 510px);height:min(64vmin, 510px)}
  .ring-inner{width:min(38vmin, 320px);height:min(38vmin, 320px)}
  .ring-outer span{font-size:18px}
}
/* 手机（竖屏小屏：环整体缩小、符号更小、立绘压缩） */
@media (max-width:640px){
  #astrologer{height:min(68vh, 560px);bottom:0}
  .ring-outer{width:min(96vmin, 380px);height:min(96vmin, 380px)}
  .ring-mid  {width:min(72vmin, 290px);height:min(72vmin, 290px)}
  .ring-inner{width:min(46vmin, 190px);height:min(46vmin, 190px)}
  .ring-outer span{font-size:15px}
  .ring-mid span{font-size:12px}
  .ring-orb{width:5px;height:5px}
  .ring-tick{width:4px;height:1.1px}
  .ring-tick-big{width:6px;height:1.4px}
  #hud{top:54vh;width:min(680px,96vw)}
  #table.lifted{bottom:44vh}
  #reading{max-height:56vh;padding:12px 16px 10px}
  #phase-intro .gold-btn{padding:11px 28px;font-size:14px}
  .q-panel{padding:18px 20px 16px}
  .tab{width:138px;padding:10px 12px}
  .tab-name{font-size:14px}
  .scroll-foot{gap:8px}
  .scroll-foot .gold-btn.small,
  .scroll-foot .ghost-btn.mini{padding:8px 14px;font-size:12px}
  .greet-title{font-size:12px}
}
/* 极窄屏（如 iPhone SE 1代） */
@media (max-width:380px){
  #astrologer{height:min(62vh, 480px)}
  .ring-outer{width:96vmin;height:96vmin}
  .ring-mid  {width:72vmin;height:72vmin}
  .ring-inner{width:46vmin;height:46vmin}
  .tab{width:128px}
  .ring-outer span{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .ring,#astroImg,.halo,#cosmos::before,#cosmos::after{animation:none}
}