/* =====================================================================
   星语塔罗 — Black · Gold · Silver
   Palette: near-black base, gold as primary accent, silver as secondary.
   Aesthetic: luxury tarot parlour — restrained, mystical, refined.
   ===================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Backgrounds — layered near-blacks with a warm undertone */
  --bg:            #070605;              /* base — nearly pure black, warm */
  --bg-soft:       #100e0a;              /* raised surfaces (modals, cards) */
  --bg-elev:       #1a1712;              /* inputs, hover states */
  --bg-blur:       rgba(7,6,5,.88);      /* overlay backdrops */

  /* Gold — primary accent (titles, key borders, primary buttons) */
  --gold:          #d4af37;              /* classic tarot gold */
  --gold-bright:   #f0d78a;              /* highlights, glow center */
  --gold-dim:      #8a7328;              /* dim borders, subtle outlines */
  --gold-glow:     rgba(212,175,55,.35); /* soft gold shadow */
  --gold-faint:    rgba(212,175,55,.10); /* wash tints */

  /* Silver — co-star with gold. Metallic, not dead grey.
     Semantics: silver = 神秘/氛围/瞄准; gold = 尊贵/行动/完成. */
  --silver-bright: #eae4d0;              /* warm platinum — subtitles, decorative highlights */
  --silver:        #cec8b6;              /* main silver — body borders, secondary text */
  --silver-dim:    #8a8674;              /* dim silver — tertiary info */
  --silver-glow:   rgba(234,228,208,.32);/* silver aura — hover/aiming state */
  --silver-line:   rgba(206,200,182,.22);/* silver hairline — inset decoration */
  --silver-faint:  rgba(206,200,182,.08);/* silver wash */

  /* Text */
  --text:          #ece7d6;              /* warm off-white */
  --text-mid:      #b8b19e;              /* mid-tone (body reading) */
  --text-dim:      #8f8b7c;              /* hints, meta */

  /* Semantic */
  --danger:        #a24545;              /* reversed badge */
  --line:          rgba(212,175,55,.18); /* faint gold rule */

  /* Type ramp */
  --serif:         'Noto Serif SC', serif;
  --display:       'Cinzel', serif;

  /* Spacing / radius */
  --radius-sm:     6px;
  --radius:        12px;
  --radius-lg:     18px;
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 阻止 Chrome/Safari 移动端下拉刷新 & 触底 rubber-band。
     转盘在手机端锁死一屏,不需要 overscroll 行为。 */
  overscroll-behavior:none;
  overscroll-behavior-y:none;
}
body{overflow-y:auto}

/* Subtle vignette so pure black gets depth */
body::before{
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.06), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(212,175,55,.04), transparent 55%);
  pointer-events:none;z-index:0;
}

/* =====================================================================
   STARFIELD
   ===================================================================== */
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none}
canvas#stars{position:absolute;inset:0;width:100%;height:100%}

/* =====================================================================
   PAGE SHELL
   ===================================================================== */
.page{min-height:100vh;position:relative;z-index:1;display:none}
.page.active{display:flex;flex-direction:column}

/* =====================================================================
   PAGE 1 — LANDING
   ===================================================================== */
#page1{align-items:center;justify-content:center;text-align:center;padding:2.5rem 1.25rem}

.hero-title{
  font-family:var(--display);
  font-size:clamp(2.4rem, 6.5vw, 4.8rem);
  color:var(--gold);
  letter-spacing:.18em;
  line-height:1.1;
  margin-bottom:.6rem;
  text-shadow:0 0 24px rgba(212,175,55,.18);
  animation:fadeUp 1.2s ease both;
}

.hero-sub{
  font-size:clamp(.78rem, 2vw, 1rem);
  color:var(--silver-bright);
  letter-spacing:.42em;
  font-weight:300;
  margin-bottom:2.6rem;
  animation:fadeUp 1.2s .3s ease both;
  text-shadow:0 0 12px rgba(234,228,208,.15);
}

/* Silver→gold→silver divider — both metals equally visible */
.hero-divider{
  width:160px;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--silver) 22%,
    var(--gold-bright) 50%,
    var(--silver) 78%,
    transparent 100%);
  margin:0 auto 2.6rem;
  animation:expand 1.5s .5s ease both;
  transform:scaleX(0);
  box-shadow:0 0 8px rgba(234,228,208,.15);
}

/* Floating cards preview */
.float-cards{position:relative;width:320px;height:200px;margin:0 auto 2.4rem;animation:fadeUp 1s .6s both}
.demo-card{
  position:absolute;width:74px;height:118px;border-radius:8px;
  background:linear-gradient(135deg,#12100b, #1a1712);
  border:1px solid var(--gold-dim);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.5rem;color:var(--gold);
  box-shadow:
    0 12px 28px rgba(0,0,0,.55),
    inset 0 0 0 1px var(--silver-faint);
}
.demo-card::before{
  content:'';position:absolute;inset:4px;
  border:1px solid var(--silver-line);border-radius:5px;pointer-events:none;
}
.demo-card:nth-child(1){left:28px;top:22px;transform:rotate(-16deg);animation:float1 4s ease-in-out infinite}
.demo-card:nth-child(2){left:50%;transform:translateX(-50%) rotate(0);top:0;animation:float2 4.5s .5s ease-in-out infinite}
.demo-card:nth-child(3){right:28px;top:22px;transform:rotate(16deg);animation:float3 4s 1s ease-in-out infinite}
.demo-card:nth-child(4){left:50%;transform:translateX(-50%) rotate(-5deg);top:52px;animation:float2 5s .8s ease-in-out infinite;opacity:.55}

.spread-title{
  font-size:.8rem;letter-spacing:.32em;color:var(--silver-bright);
  margin-bottom:1.4rem;text-transform:uppercase;
  animation:fadeUp 1s .8s both;opacity:0;animation-fill-mode:both;
  text-shadow:0 0 8px rgba(234,228,208,.18);
}

/* 具名牌阵网格:桌面 auto-fill(≈160px 起),手机自动 1–2 列。每张卡片带
   一个 SVG 小概览图 + 名字 + 张数徽章 + 用处 + 讲解,沿用暗金主题:双边框
   (外金 + 内银细线),hover 时轻抬 + 金光。 */
.spreads-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:.85rem;
  width:100%;max-width:820px;margin:0 auto;
  animation:fadeUp 1s 1s both;opacity:0;animation-fill-mode:both;
}
.spread-card{
  background:linear-gradient(180deg, rgba(26,23,18,.6), rgba(16,14,10,.6));
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  padding:.85rem .75rem 1rem;
  color:var(--text);
  cursor:pointer;
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease;
  font-family:var(--serif);
  position:relative;overflow:hidden;text-align:center;
  outline:1px solid var(--silver-line);
  outline-offset:-5px;
  display:flex;flex-direction:column;gap:.45rem;
}
.spread-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, var(--gold-faint), transparent 70%);
  opacity:0;transition:.3s;pointer-events:none;
}
.spread-card:hover::before{opacity:1}
.spread-card:hover{
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.6), 0 0 0 1px var(--gold-faint);
}
.spread-card:focus-visible{
  outline:1px solid var(--gold);outline-offset:2px;
}
.sc-preview{
  height:80px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center, rgba(212,175,55,.06), transparent 70%);
  border-radius:6px;
  border:1px solid var(--silver-line);
}
.sc-preview svg.spread-overview{width:100%;height:100%;display:block}
.spread-overview .ov-card{
  fill:rgba(26,23,18,.9);
  stroke:var(--gold-dim);
  stroke-width:.6;
}
.spread-overview .ov-mark{
  fill:var(--gold);
  font-family:var(--display);
  opacity:.75;
}
.sc-head{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.2rem;
}
.sc-name{
  font-size:.95rem;color:var(--text);letter-spacing:.14em;
}
.sc-badge{
  font-size:.62rem;color:var(--gold);
  border:1px solid var(--gold-dim);border-radius:10px;
  padding:.08rem .45rem;letter-spacing:.08em;
  background:rgba(212,175,55,.06);
  font-family:var(--display);
}
.sc-use{
  font-size:.74rem;color:var(--silver-bright);letter-spacing:.06em;
}
.sc-blurb{
  font-size:.7rem;color:var(--silver-dim);letter-spacing:.04em;line-height:1.55;
}

.spread-credit{
  margin-top:1.8rem;font-size:.68rem;color:var(--text-dim);
  letter-spacing:.12em;line-height:1.9;text-align:center;
  animation:fadeUp 1s 1.2s both;opacity:0;animation-fill-mode:both;
}
.spread-credit .sc-sub{
  display:block;font-size:.62rem;color:var(--silver-dim);letter-spacing:.08em;
}

.history-entry{
  margin-top:2.4rem;background:transparent;
  border:1px solid var(--silver-line);border-radius:24px;
  padding:.7rem 1.9rem;color:var(--silver);
  font-family:var(--serif);font-size:.82rem;letter-spacing:.14em;
  cursor:pointer;transition:.28s;
}
.history-entry:hover{border-color:var(--gold);color:var(--gold)}

/* =====================================================================
   PAGE 2 — QUESTION
   ===================================================================== */
#page2{align-items:center;justify-content:center;text-align:center;padding:2.5rem 1.25rem}

.breathe-ring{
  width:140px;height:140px;border-radius:50%;
  border:1px solid rgba(212,175,55,.32);
  margin:0 auto 2rem;
  display:flex;align-items:center;justify-content:center;
  position:relative;animation:breathe 4s ease-in-out infinite;
}
/* Layered rings: inner gold, outer silver — metallic depth */
.breathe-ring::before,.breathe-ring::after{
  content:'';position:absolute;border-radius:50%;
}
.breathe-ring::before{
  inset:-15px;
  border:1px solid rgba(212,175,55,.15);
  animation:breathe 4s ease-in-out infinite;
}
.breathe-ring::after{
  inset:-32px;
  border:1px solid rgba(234,228,208,.20);
  animation:breathe 4s 1s ease-in-out infinite;
}
.breathe-inner{
  width:82px;height:82px;border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.28), rgba(7,6,5,.9));
  border:1px solid var(--gold-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--gold-bright);
}

.q-hint{
  font-size:.78rem;letter-spacing:.32em;color:var(--silver-bright);
  margin-bottom:1rem;text-transform:uppercase;
  text-shadow:0 0 8px rgba(234,228,208,.15);
}
.q-spread-tag{
  display:inline-block;
  background:rgba(212,175,55,.06);
  border:1px solid var(--gold-dim);
  box-shadow:inset 0 0 0 1px var(--silver-faint);
  border-radius:20px;padding:.35rem 1.2rem;
  font-size:.78rem;color:var(--gold);
  letter-spacing:.16em;margin:1rem 0 2rem;
}
.q-input-wrap{width:100%;max-width:520px;margin:0 auto 1.8rem;position:relative}
.q-input{
  width:100%;
  background:rgba(16,14,10,.85);
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  padding:1.2rem 1.5rem;
  color:var(--text);
  font-family:var(--serif);
  font-size:1rem;resize:none;min-height:110px;
  transition:.3s;line-height:1.7;
  scrollbar-width:none;-ms-overflow-style:none;
}
.q-input::-webkit-scrollbar{display:none}
.q-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 24px rgba(212,175,55,.14)}
.q-input::placeholder{color:var(--text-dim)}

/* Primary / secondary buttons (shared across pages) */
.q-btn, .action-btn.primary, .modal-btn{
  background:transparent;
  border:1px solid var(--gold);
  border-radius:30px;
  padding:.95rem 3rem;
  color:var(--gold);
  font-family:var(--display);
  font-size:1rem;letter-spacing:.18em;
  cursor:pointer;transition:all .3s ease;
  position:relative;overflow:hidden;min-height:48px;
}
.q-btn::before, .action-btn.primary::before, .modal-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent, var(--gold-faint), transparent);
  transform:translateX(-100%);transition:transform .55s ease;
}
.q-btn:hover::before, .action-btn.primary:hover::before, .modal-btn:hover::before{transform:translateX(100%)}
.q-btn:hover, .action-btn.primary:hover, .modal-btn:hover{
  background:rgba(212,175,55,.08);
  box-shadow:0 6px 22px var(--gold-glow);
  transform:translateY(-1px);
}

.back-btn{
  background:none;border:none;color:var(--silver);cursor:pointer;
  font-family:var(--serif);font-size:.85rem;letter-spacing:.12em;
  margin-top:1.5rem;transition:.3s;padding:.5rem 1rem;
  min-height:44px;
}
.back-btn:hover{color:var(--gold)}

/* =====================================================================
   PAGE 3 — DRAW  (锁一屏 · 桌面 & 手机同一套 flex 骨架)
   ===================================================================== */
/* 抽牌页永远只占一屏,不允许纵向滚动。dvh 应对手机地址栏浮动;overflow:hidden
   兜底防止 arc/wheel 在窄屏溢出。三段布局:头部(step-indicator + draw-header)
   自然高;中段 .draw-body 吃剩余;底部 #drawActionsRow(含 readBtn)固定高、
   始终可见可点。 */
#page3{
  padding:1.2rem 1rem 1rem;
  align-items:center;
  height:100dvh;min-height:0;
  overflow:hidden;
  box-sizing:border-box;
  /* display:flex + flex-direction:column 从 .page.active 继承 */
}
#page3 > .step-indicator,
#page3 > .draw-header,
#page3 > #drawActionsRow{ flex:0 0 auto; }
#page3 > .draw-body{
  flex:1 1 auto; min-height:0;
  width:100%;
  /* overflow 保持默认 visible。整页兜底在 #page3 的 overflow:hidden;
     draw-body 层不再裁牌,散牌堆边缘不会被切成直线。 */
}
/* readBtn 出现(display:none→inline-block)时 drawActionsRow 不能被挤没,
   给个稳定的最小高度托底,永远在屏内 */
#page3 > #drawActionsRow{ min-height:56px; }

/* 洗/切阶段(step 1-2):牌台垂直居中在 draw-body 剩余空间里,
   不要让内容挤在顶部、下方大片空白。切牌步 deck 因此在视口中间。
   同时隐藏 slots-row —— 洗牌/切牌时用户注意力在牌台,空 slots 反而分神,
   还会挤占垂直空间导致 deck 被向下推、小屏被 overflow 裁到牌底。
   进入 step 3(shuffle-stage.done)后,该选择器不匹配,布局回落成默认 flow。 */
#page3:has(.shuffle-stage:not(.done)) > .draw-body{
  display:flex;flex-direction:column;
  justify-content:center;align-items:stretch;
}
#page3:has(.shuffle-stage:not(.done)) > .draw-body > .slots-row{
  display:none;
}

/* ---------- 桌面/平板抽牌页布局(≥500px)· 散牌 ---------- */
/* draw-body 是 flex 列:
     slots-row  → 指引展示位,顶部居中,flex:0 auto(自然高)
     shuffle-stage → 洗/切阶段用,step 3+ display:none 让位散牌
     arc-scroll → 散牌区,尺寸=arc-stage(由 JS 定高),让整页自然长
     arc-hint / slots-hint → 底部提示行,flex:0 auto
   桌面 draw 阶段整页允许纵向滚动(#page3 覆盖在下面),让 pile × 2 的
   垂直摊开能被滚动看到,而不是被裁掉。 */
@media (min-width:500px){
  /* 全局方针:牌阵 / 散牌等内容一屏放不下时,一律允许页面上下滚动看全,
     不再为「固定一屏」牺牲内容完整性。仅洗牌 / 切牌两步(shuffle-stage
     未 .done、内容极少)才锁一屏,避免空白滚动条。展开 + 抽牌步(.done)
     内容可能超一屏 → 整页可滚。 */
  #page3{
    min-height:100dvh;height:auto;
    overflow-y:auto;overflow-x:hidden;
    box-sizing:border-box;
  }
  /* 洗牌 / 切牌步:内容极少,专锁一屏 */
  #page3:has(.shuffle-stage:not(.done)){
    height:100dvh;min-height:0;
    overflow:hidden;
  }
  #page3 > .draw-body{
    display:flex;flex-direction:column;
    align-items:stretch;
    width:100%;
  }
  #page3 > .draw-body > .arc-hint,
  #page3 > .draw-body > .slots-hint,
  #page3 > .draw-body > .shuffle-stage{
    flex:0 0 auto;
  }
  /* 洗 / 切阶段(shuffle-stage:not(.done)):slots-row display:none(base 规则),
     arc-scroll flex:1 撑起中段让 shuffle-stage 被 :has 规则垂直居中 */
  #page3 > .draw-body > .arc-scroll{
    flex:1 1 auto;min-height:0;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  /* draw 阶段 = shuffle-stage.done:上下两分块 · 各拿够自己需要的高度
       上:slots-row 牌阵区 —— flex:0 0 auto、高度 30vh(200–280 clamp)
       下:arc-scroll 散牌区 —— flex:0 0 auto、min-height:65vh,牌堆按此
                                 高度自然铺开,不再被上区挤扁
     总高可超过 100vh,#page3 overflow-y:auto 让整页可滚。 */
  #page3:has(.shuffle-stage.done) > .draw-body > .slots-row{
    flex:0 0 auto;
    height:30vh;min-height:200px;max-height:280px;
    max-width:min(680px, 82vw);
    margin:.3rem auto .3rem;
  }
  #page3:has(.shuffle-stage.done) > .draw-body > .arc-scroll{
    flex:0 0 auto;
    min-height:65vh;
    display:block;
    overflow:hidden;
  }
  #page3:has(.shuffle-stage.done) > .draw-body > .arc-hint{
    margin:.15rem 0 0;
  }
  #page3:has(.shuffle-stage.done) > #drawActionsRow{
    margin-top:.35rem !important;
  }
}
.draw-header{text-align:center;margin-bottom:1.5rem;width:100%}
.draw-title{
  font-family:var(--display);font-size:1.5rem;color:var(--gold);
  letter-spacing:.14em;text-shadow:0 0 18px rgba(212,175,55,.15);
}
.draw-hint{
  font-size:.82rem;color:var(--silver-bright);margin-top:.5rem;
  letter-spacing:.1em;min-height:1.2em;
}
.draw-progress{display:flex;gap:.5rem;justify-content:center;margin-top:.9rem}
/* Empty slot = dim silver (waiting), filled = bright gold (done). */
.prog-dot{
  width:9px;height:9px;border-radius:50%;
  border:1px solid var(--silver-dim);transition:.4s;
}
.prog-dot.filled{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 8px var(--gold-glow);
}

/* ---------- SHARED: card back visual ---------- */
/* Reused inside .arc-card, .slot-face-back, .shuffle-card */
.card-back{
  width:100%;height:100%;
  background:linear-gradient(135deg, #1a1712 0%, #0f0d09 100%);
  border-radius:inherit;position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.card-back::before{
  content:'';position:absolute;inset:4px;
  border:1px solid rgba(212,175,55,.35);
  border-radius:calc(var(--radius-sm) - 2px);
  background:radial-gradient(ellipse at center, rgba(212,175,55,.06) 0%, transparent 70%);
}
/* Inner silver hairline — metallic depth inside the gold frame */
.card-back::after{
  content:'';position:absolute;inset:8px;
  border:1px solid rgba(234,228,208,.22);
  border-radius:2px;
}
.card-back .cb-mark{
  position:relative;z-index:1;
  font-family:var(--display);font-size:1rem;color:var(--gold);
  text-shadow:0 0 10px var(--gold-glow), 0 0 4px rgba(234,228,208,.4);
  letter-spacing:.05em;
}

/* ---------- STEP INDICATOR (4 步流程:洗牌→切牌→展开→抽牌) ---------- */
.step-indicator{
  display:flex;align-items:center;justify-content:center;
  gap:.5rem;
  padding:.9rem .6rem 1.2rem;
  max-width:640px;margin:0 auto;
  user-select:none;
}
.step-item{
  display:flex;align-items:center;gap:.42rem;
  font-family:var(--display);font-size:.7rem;
  letter-spacing:.24em;color:var(--silver-dim);
  transition:color .35s ease;
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--silver-dim);
  font-size:.7rem;font-weight:500;
  transition:all .35s ease;
  background:transparent;
}
.step-label{
  font-size:.72rem;letter-spacing:.28em;
  transition:color .35s ease;
}
.step-line{
  flex:0 0 auto;width:14px;height:1px;
  background:var(--silver-dim);opacity:.5;
  transition:background .35s ease, opacity .35s ease;
}
/* 当前步骤:金色高亮 + 微微发光 */
.step-item.active{color:var(--gold)}
.step-item.active .step-num{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(212,175,55,.10);
  box-shadow:0 0 12px var(--gold-glow), inset 0 0 6px rgba(212,175,55,.28);
}
.step-item.active .step-label{color:var(--gold)}
/* 已完成:低调金 */
.step-item.done{color:var(--silver-bright)}
.step-item.done .step-num{
  border-color:var(--gold-dim);
  color:var(--gold-dim);
  background:rgba(212,175,55,.04);
}
.step-item.done + .step-line{
  background:var(--gold-dim);opacity:.75;
}
/* 手机上标签太密就藏起来,只留数字圆点 */
@media (max-width:500px){
  .step-indicator{gap:.36rem;padding:.7rem .3rem 1rem}
  .step-label{display:none}
  .step-line{width:18px}
  .step-num{width:24px;height:24px;font-size:.78rem}
}

/* ---------- SHUFFLE STAGE (plays before arc appears) ---------- */
/* 洗/切阶段的牌台。deck → label → cut-btn-group 纵排,统一走 flex 列。
   以前 label / cut-btn-group 用 position:absolute + bottom:-2/-5rem 悬挂到
   stage 外,再靠 margin-bottom:6.2rem 硬撑空间,小屏会被 draw-body 的
   overflow:hidden 切掉牌底或按钮。改成 flow 之后,尺寸完全由内容决定,
   在 flex 列的 draw-body 里自然居中。 */
.shuffle-stage{
  position:relative;
  margin:0 auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:1.4rem;
  width:100%;max-width:500px;
  /* min-height 给洗牌/切牌动画的 ±70px 位移留够垂直空间,cards fly 不会撞天花板 */
  min-height:220px;
  perspective:1200px;
}
.shuffle-stage.done{display:none}

.shuffle-deck{
  position:relative;width:80px;height:126px;
}
.shuffle-card{
  position:absolute;top:0;left:0;
  width:80px;height:126px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#1a1712 0%,#0f0d09 100%);
  border:1px solid var(--gold-dim);
  box-shadow:0 8px 22px rgba(0,0,0,.55);
  transform-origin:center bottom;
  will-change:transform;
}
.shuffle-card::before{
  content:'';position:absolute;inset:4px;
  border:1px solid rgba(212,175,55,.32);
  border-radius:calc(var(--radius-sm) - 2px);
}
.shuffle-card::after{
  content:'✦';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-family:var(--display);font-size:.95rem;
  text-shadow:0 0 10px var(--gold-glow);
}
/* Riffle shuffle:transform 由 app.js 直接控制(inline transition),
   这里只留基础样式;不再用 keyframe 是因为每张牌需要动态的 transition
   时间 + z-index 变化,keyframe 硬编码不够灵活。 */

.shuffle-label{
  /* 从 absolute + bottom:-2rem 悬挂改成 flow —— 属于 stage 内正常一行 */
  position:static;
  font-family:var(--display);font-size:.88rem;color:var(--gold);
  letter-spacing:.42em;text-shadow:0 0 12px var(--gold-glow);
  white-space:nowrap;
  animation:shuffleLabelPulse 1.6s ease-in-out infinite;
  transition:opacity .3s ease;
}
@keyframes shuffleLabelPulse{
  0%,100% { opacity:.45; }
  50%     { opacity:1; }
}

/* 切牌 / 继续 按钮组:洗牌结束后显示,位于文字下方,不与 .shuffle-label 重叠。
   两颗按钮并排,label 上方留一行提示文案。 */
.cut-btn-group{
  /* 从 absolute + bottom:-5rem 悬挂改成 flow —— 属于 stage 内正常一行 */
  position:static;
  display:flex;gap:.7rem;align-items:center;
  opacity:0;pointer-events:none;
  transform:translateY(6px);
  transition:opacity .38s ease, transform .38s ease;
  /* 洗牌阶段 opacity:0 也占位,避免切牌阶段出现时挤压 label */
  min-height:44px;
}
.cut-btn-group.show{
  opacity:1;pointer-events:auto;
  transform:translateY(0);
}
.cut-btn{
  padding:.66rem 1.4rem;border-radius:999px;
  background:linear-gradient(135deg,rgba(212,175,55,.14) 0%,rgba(212,175,55,.06) 100%);
  border:1px solid var(--gold);
  color:var(--gold);font-family:var(--display);
  font-size:.86rem;letter-spacing:.32em;
  text-shadow:0 0 10px var(--gold-glow);
  box-shadow:0 8px 26px rgba(0,0,0,.45),
             0 0 22px rgba(212,175,55,.18) inset;
  cursor:pointer;white-space:nowrap;
  transition:background .2s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
  animation:cutBtnBreath 2.4s ease-in-out infinite;
}
.cut-btn:hover,.cut-btn:active{
  background:linear-gradient(135deg,rgba(212,175,55,.22) 0%,rgba(212,175,55,.10) 100%);
  transform:translateY(-1px);
}
.cut-btn.secondary{
  /* "继续"按钮:低对比,不喧宾夺主(切牌才是重点操作) */
  border-color:var(--silver-dim);
  color:var(--silver-bright);
  background:linear-gradient(135deg,rgba(234,228,208,.08) 0%,rgba(234,228,208,.03) 100%);
  text-shadow:0 0 8px rgba(234,228,208,.28);
  box-shadow:0 6px 22px rgba(0,0,0,.4);
  animation:none;
}
.cut-btn.secondary:hover,.cut-btn.secondary:active{
  background:linear-gradient(135deg,rgba(234,228,208,.14) 0%,rgba(234,228,208,.06) 100%);
  border-color:var(--silver-bright);
}
@keyframes cutBtnBreath{
  0%,100% { box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 22px rgba(212,175,55,.18) inset; }
  50%     { box-shadow:0 8px 32px rgba(0,0,0,.55), 0 0 30px rgba(212,175,55,.32) inset; }
}

/* ---------- SIDE WHEEL (mobile only 侧边转盘) ---------- */
/* 手机端把 78 张牌铺成大圆盘,盘子中心在屏幕右侧外,只有左半可见。
   手指横向滑动 → 圆盘旋转 → 浏览各张牌 → 点选抽出。
   桌面/平板保持 .arc-scroll 半圆扇形,不动。 */
.wheel-viewport{
  position:relative;width:100%;
  height:62vh;min-height:380px;
  overflow:hidden;
  /* 纵向手势也交给 JS 拦下:touch-action:none 让浏览器不再拦截做 scroll/下拉刷新,
     touchmove 里 e.preventDefault() 兜底。 */
  touch-action:none;
  overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;
  display:none; /* 默认桌面不显示,mobile 断点里开 */
}
.wheel-hub{
  position:absolute;width:0;height:0;
  /* left/top 由 JS 按视口动态设定,这里不写死 */
}
.wheel-card{
  position:absolute;top:0;left:0;
  border-radius:var(--radius-sm);
  transform-origin:center center;
  will-change:transform;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* card-back 尺寸继承父元素 */
}
.wheel-card .card-back{
  width:100%;height:100%;
  border:1px solid var(--gold-dim);
}
.wheel-card.entering{
  animation:wheelCardFadeIn .6s var(--enter-delay,0s) ease-out both;
}
.wheel-card.entered{
  transition:filter .25s ease, opacity .3s ease;
}
@keyframes wheelCardFadeIn{
  0%   { opacity:0; }
  60%  { opacity:1; }
  100% { opacity:1; }
}
/* 触摸/hover 时抬起 + 银色光晕(即将选择) */
.wheel-card.entered:active:not(.picked),
.wheel-card.entered:focus-visible:not(.picked){
  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.65))
    drop-shadow(0 0 22px var(--silver-glow));
  outline:none;
}
.wheel-card.entered:active .card-back,
.wheel-card.entered:focus-visible .card-back{
  border-color:var(--silver-bright);
}
/* 选中后:金色闪一下再消失 */
.wheel-card.picked{
  opacity:0 !important;
  pointer-events:none;
  filter:
    blur(2px)
    drop-shadow(0 0 22px var(--gold-glow))
    drop-shadow(0 0 8px var(--gold));
  transition:opacity .5s ease, filter .5s ease;
}

/* 「当前对准正中」的那张牌:金框更亮、星星更亮,scale 由 JS 直接叠在 transform 上
   (drag 时逐帧写 transform,加 transition 会拖累旋转手感,故不加)。
   card-back 的 border/glow 走 CSS 过渡,视觉上"高亮"是连续的。 */
.wheel-card.current .card-back{
  border-color:var(--gold);
  box-shadow:0 0 22px var(--gold-glow), inset 0 0 14px rgba(212,175,55,.28);
}
.wheel-card.current .card-back::before{
  border-color:var(--gold-bright);
}
.wheel-card.current .cb-mark{
  color:var(--gold-bright);
  text-shadow:0 0 14px var(--gold), 0 0 26px var(--gold-glow);
  transform:scale(1.15);
}
.wheel-card .card-back{
  transition:border-color .18s ease, box-shadow .18s ease;
}
.wheel-card .cb-mark{
  transition:color .18s ease, text-shadow .18s ease, transform .18s ease;
}

/* 手机断点:显示圆盘,隐藏扇形。
   步骤 3+(.mode-split)进入左右分屏:slots-row 在左半屏居中展示抽到
   的牌,wheel-viewport 在右半屏做转盘选牌。 */
@media (max-width:499px){
  .arc-scroll{display:none !important}
  .wheel-viewport{display:block}

  /* 手机端:抽牌页锁一屏 flex 骨架由 base #page3 提供,这里只做手机专用微调:
     更紧的 padding、按钮行更近、drawHeader 更近、阻拦下拉刷新。 */
  #page3{
    padding:.7rem .5rem .6rem;
    overscroll-behavior:none;
  }
  #page3 #drawActionsRow{ margin-top:.5rem !important; }
  #page3 .draw-header{ margin-bottom:.6rem; }

  /* 分屏模式(用户可视化调定的比例):左 46vw 展示抽到的牌,
     右 54vw 转盘。转盘 hub 推到屏幕外远处,只露最左边缘一小段弧。
     draw-body 高度靠 base 的 flex:1 撑起,这里只给一个 positioning context;
     绝不再写 height:100% —— 那会让 flex 算错 basis,把 drawActionsRow 挤出屏。 */
  #page3.mode-split .draw-body{
    position:relative;
  }
  #page3.mode-split .slots-row{
    position:absolute;left:0;top:0;
    width:46vw;height:100%;min-height:0;
    margin:0;max-width:none;padding:0;
    z-index:10;
  }
  #page3.mode-split .wheel-viewport{
    position:absolute;right:0;top:0;
    width:54vw;height:100%;min-height:0;
    /* overflow:hidden 继承基础样式,超出屏幕右边的牌自然裁掉 */
  }
  /* arc-hint 提示行:落回顶部(在 slots/wheel 上方),z-index 高于牌保底不被盖 */
  #page3.mode-split .arc-hint{
    position:absolute;left:0;right:0;top:.2rem;
    margin:0;padding:0 .5rem;
    z-index:20;pointer-events:none;
  }
  /* 撤销提示:钉在左半屏 slots 区域底部,不与转盘/其他文字冲突 */
  #page3.mode-split .slots-hint{
    position:absolute;left:0;bottom:.4rem;
    width:46vw;margin:0;padding:0 .3rem;
    z-index:15;font-size:.62rem;letter-spacing:.12em;
  }
  /* mode-split 下牌位由 JS layoutSlots 计算,尺寸让 layoutSpreadCards
     的 cardMin/Max 决定,不再硬写 width/height。 */
}

/* ---------- SCATTER PILE (桌面 ≥500px)/ Wheel container(手机继承) ---------- */
/* arc-scroll 是散牌区容器。桌面靠 SCATTER_CONFIG 的椭圆半径把牌堆约束
   在可视区内;这里不用 overflow:hidden / clip 兜底,不然牌堆边缘会被
   切成直线。整页滚动的兜底在 #page3 那层,与此无关。
   手机端整个 .arc-scroll 通过 max-width:499 媒体查询 display:none。 */
.arc-scroll{
  width:100%;overflow:visible;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:0;
}
.arc-scroll::-webkit-scrollbar{display:none}
.arc-stage{
  position:relative;margin:0 auto;
  /* width/height 由 JS 按 arc-scroll 可视尺寸设定 */
}
.arc-hint{
  text-align:center;font-size:.74rem;color:var(--silver-bright);
  letter-spacing:.22em;margin-top:.4rem;opacity:.72;
}

.arc-card{
  position:absolute;top:0;left:0;
  /* 尺寸由 JS 按断点动态注入(手机 80x128 / 平板 72x116 / 桌面 68x108),
     这里的初值只是没跑 JS 时的兜底 */
  width:68px;height:108px;
  border-radius:var(--radius-sm);
  transform:var(--arc-transform, translate3d(0,0,0));
  transform-origin:center center;
  will-change:transform;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.arc-card.entering{
  animation:arcCardEnter .75s var(--enter-delay,0s) cubic-bezier(.34,1.4,.55,1) both;
}
.arc-card.entered{
  transition:transform .28s ease, opacity .35s ease, filter .28s ease;
}
@keyframes arcCardEnter{
  /* 从"自己的散牌位置"缩小 .32 淡入,像 78 张牌一张张显形聚成堆,
     比统一从原点飞出去更贴合"洒在桌上"的画面 */
  0%   { transform:var(--arc-transform) scale(.32); opacity:0; }
  55%  { opacity:1; }
  100% { transform:var(--arc-transform); opacity:1; }
}
.arc-card .card-back{
  border:1px solid var(--gold-dim);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.arc-card .cb-mark{
  transition:color .15s ease, text-shadow .15s ease;
}

/* 散牌 hover / focus / touch-active:轻抬起 + 金光,z-index 拔到最上层,
   点击/瞄准判定永远命中「最上面的那张」。translateY 特意不加,不然
   会与随机散乱的位置脱节;只 scale + z-index 就够看出「这张要抽」。 */
.arc-card.entered:hover:not(.picked),
.arc-card.entered:focus-visible:not(.picked),
.arc-card.entered:active:not(.picked){
  transform:var(--arc-transform) scale(1.12);
  z-index:9999 !important;outline:none;
  filter:
    drop-shadow(0 14px 24px rgba(0,0,0,.6))
    drop-shadow(0 0 18px var(--gold-glow))
    drop-shadow(0 0 6px rgba(212,175,55,.45));
}
.arc-card.entered:hover .card-back,
.arc-card.entered:focus-visible .card-back,
.arc-card.entered:active .card-back{
  border-color:var(--gold-bright);
  box-shadow:0 0 18px var(--gold-glow), inset 0 0 12px rgba(212,175,55,.28);
}
.arc-card.entered:hover .cb-mark,
.arc-card.entered:focus-visible .cb-mark{
  color:var(--gold-bright);
  text-shadow:0 0 14px var(--gold), 0 0 24px var(--gold-glow);
}
/* Once picked: gold flash on liftoff, then fade. Gold = "selected/committed". */
.arc-card.picked{
  opacity:0 !important;
  transform:var(--arc-transform) translateY(-46px) scale(.6);
  pointer-events:none;
  filter:
    blur(2px)
    drop-shadow(0 0 22px var(--gold-glow))
    drop-shadow(0 0 8px var(--gold));
}

/* ---------- SLOTS STAGE + 3D FLIP ---------- */
/* .slots-row 从 flex-wrap 行改成绝对定位的舞台:每张 .drawn-slot 由 JS 按
   SPREADS.layout 的归一化坐标算出 left/top/width/height 摆位,任何牌阵形状
   都不变形。stage 的 min-height 给 layoutSlots 一个可测量的高度。 */
.slots-row{
  position:relative;
  width:100%;max-width:900px;
  min-height:320px;
  margin:0 auto 1.2rem;
}
/* 撤销提示:与 arc-hint 一致的小字低调金色,只有 drawnCount > 0 才显现 */
.slots-hint{
  text-align:center;
  font-size:.72rem;color:var(--silver-bright);
  letter-spacing:.16em;
  margin:.3rem 0 1.1rem;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.slots-hint.visible{opacity:.6;}
/* 单个牌位:JS 用绝对定位 + 内联 left/top/width/height 覆盖默认尺寸,
   十字横叠通过 --slot-rot 变量注入到 transform,不干扰其它 transform。
   .waiting = 空位虚线框(尚未选择);有 flipper 时虚线自然被 flipper 盖住。 */
.drawn-slot{
  width:82px;height:128px;border-radius:9px;
  border:1px dashed rgba(212,175,55,.24);
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:transform .3s ease;
  perspective:1400px;
  transform:rotate(var(--slot-rot, 0deg));
  box-sizing:border-box;
}

/* Flipper — holds both faces, rotates on reveal */
.slot-flipper{
  position:absolute;inset:0;border-radius:9px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.4,.05,.2,1);
  will-change:transform;
  animation:cardLand .45s cubic-bezier(.34,1.56,.64,1) both;
}
.slot-flipper.flipped{transform:rotateY(180deg)}
.slot-flipper.flipped.reversed{transform:rotateY(180deg) rotate(180deg)}

.slot-face{
  position:absolute;inset:0;border-radius:inherit;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.slot-face-back{
  background:linear-gradient(135deg,#1a1712,#0f0d09);
  border:1px solid var(--gold-dim);
}
.slot-face-back::before{
  content:'';position:absolute;inset:4px;
  border:1px solid rgba(212,175,55,.32);
  border-radius:5px;
}
.slot-face-back .cb-mark{
  position:relative;z-index:1;
  font-family:var(--display);font-size:1rem;color:var(--gold);
  text-shadow:0 0 10px var(--gold-glow);
}
.slot-face-front{
  transform:rotateY(180deg);
  background:var(--bg-soft);
  border:1px solid var(--gold);
  box-shadow:0 0 22px var(--gold-glow);
}
.slot-face-front img.card-img{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}
.slot-face-front .fallback-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.3rem;
}
.slot-face-front .card-symbol{font-size:1.6rem;margin-bottom:.2rem;color:var(--gold)}
.slot-face-front .card-name{
  font-family:var(--display);font-size:.55rem;text-align:center;
  color:var(--gold);letter-spacing:.05em;line-height:1.3;
}
.slot-face-front .card-num{
  font-family:var(--display);font-size:.6rem;color:rgba(212,175,55,.55);
}

/* Gold shimmer sweep after flip lands */
.slot-flipper.flipped .slot-face-front::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(240,215,138,.55) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:shimmerSweep .95s .55s ease-out forwards;
  pointer-events:none;mix-blend-mode:screen;z-index:5;
}
@keyframes shimmerSweep{
  0%   { transform:translateX(-100%); opacity:0; }
  25%  { opacity:1; }
  100% { transform:translateX(100%); opacity:0; }
}

.reversed-badge{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  background:rgba(120,45,45,.85);border:1px solid #a05555;
  border-radius:20px;padding:.12rem .5rem;font-size:.58rem;
  color:#f0c8c8;white-space:nowrap;z-index:10;pointer-events:none;
  letter-spacing:.06em;
}

/* =====================================================================
   PAGE 4 — READING
   ===================================================================== */
#page4{padding:2.5rem 1.25rem;align-items:center}
.reading-container{max-width:1100px;width:100%;margin:0 auto}
.reading-header{text-align:center;margin-bottom:1.6rem}
.reading-title{
  font-family:var(--display);font-size:1.7rem;color:var(--gold);
  letter-spacing:.14em;text-shadow:0 0 20px rgba(212,175,55,.18);
}

/* Page 4 两段式布局:手机(<900px)牌阵在上、解读在下(整页可滚动);
   桌面(≥900px)左右分栏。 */
.reading-layout{
  display:flex;flex-direction:column;gap:1.6rem;
  align-items:stretch;
}
@media (min-width:900px){
  .reading-layout{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:2.4rem;align-items:stretch;
  }
}
.reading-side{
  display:flex;flex-direction:column;gap:1.2rem;
}

/* 牌阵大图舞台:relative container,JS layoutReadingSpread 按 SPREADS.layout
   摆位。给 stage 一个可测量的高度,layoutSpreadCards 用得着。 */
.reading-spread{
  position:relative;
  width:100%;
  min-height:340px;
  background:radial-gradient(ellipse at center, rgba(212,175,55,.05), transparent 70%);
  border:1px solid var(--silver-line);
  border-radius:var(--radius-lg);
  padding:.6rem;
  box-sizing:border-box;
  box-shadow:inset 0 0 40px rgba(0,0,0,.35);
}
@media (min-width:900px){
  .reading-spread{
    min-height:520px;
    align-self:stretch;
  }
}

/* 单张翻开的牌 —— 点它可放大。逆位+crossing 通过 --card-rot 变量注入,
   hover:scale 干净叠加不冲突。 */
.reading-card{
  position:absolute;
  background:var(--bg-soft);
  border:1px solid var(--gold-dim);
  border-radius:8px;
  overflow:hidden;padding:0;margin:0;
  cursor:pointer;
  transform:rotate(var(--card-rot, 0deg));
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.55), inset 0 0 0 1px var(--silver-faint);
  outline:none;
  font-family:var(--serif);
  -webkit-tap-highlight-color:transparent;
}
.reading-card:hover,
.reading-card:focus-visible{
  transform:rotate(var(--card-rot, 0deg)) scale(1.08);
  z-index:30;
  border-color:var(--gold);
  box-shadow:0 12px 30px rgba(0,0,0,.7), 0 0 22px var(--gold-glow), inset 0 0 0 1px var(--gold-faint);
}
.reading-card .rc-img{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}
.reading-card .rc-fallback{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.3rem;box-sizing:border-box;
}
.reading-card .rc-fallback .rc-sym{font-size:1.4rem;color:var(--gold);margin-bottom:.15rem}
.reading-card .rc-fallback .rc-name{
  font-family:var(--display);font-size:.55rem;color:var(--gold);
  letter-spacing:.05em;text-align:center;line-height:1.3;
}
/* 顺序编号(1..N)—— 小角标,不显示位置名 */
.reading-card .rc-num{
  position:absolute;top:2px;left:2px;
  font-family:var(--display);font-size:.6rem;line-height:1;
  color:var(--gold-bright);
  background:rgba(7,6,5,.78);
  border:1px solid var(--gold-dim);
  border-radius:50%;
  width:1.35rem;height:1.35rem;
  display:flex;align-items:center;justify-content:center;
  z-index:5;pointer-events:none;
  text-shadow:0 0 6px var(--gold-glow);
}

.reading-body{
  background:linear-gradient(180deg, rgba(16,14,10,.7), rgba(7,6,5,.75));
  border:1px solid var(--gold-dim);
  border-radius:var(--radius-lg);
  padding:1.8rem 2rem;margin-bottom:2rem;position:relative;
  box-shadow:inset 0 0 40px rgba(0,0,0,.4);
  outline:1px solid var(--silver-line);
  outline-offset:-6px;
}
.reading-body::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius-lg);
  padding:1px;pointer-events:none;
  background:linear-gradient(135deg, transparent 30%, var(--gold-faint), transparent 70%);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.reading-body .loading-dots{display:flex;gap:.6rem;justify-content:center;padding:2rem 0}
.reading-body .loading-dots span{
  width:8px;height:8px;border-radius:50%;
  background:var(--gold);animation:dotPulse 1.4s ease-in-out infinite;
}
.reading-body .loading-dots span:nth-child(2){animation-delay:.2s}
.reading-body .loading-dots span:nth-child(3){animation-delay:.4s}
.reading-text{
  font-size:.98rem;line-height:2;color:var(--text-mid);
  white-space:pre-wrap;font-family:var(--serif);
}
@media (max-width:499px){
  .reading-text{font-size:.94rem;line-height:1.9}
}

/* Disclaimer = advisory / neutral, so silver (not gold's "importance" tone) */
.disclaimer{
  background:rgba(206,200,182,.04);
  border:1px solid var(--silver-line);
  border-radius:10px;padding:.9rem 1.4rem;
  font-size:.8rem;color:var(--silver-bright);
  text-align:center;line-height:1.7;letter-spacing:.06em;
  margin-bottom:1.5rem;
}

.reading-actions{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
}
.action-btn{
  background:transparent;
  border:1px solid var(--silver-line);
  border-radius:24px;padding:.75rem 1.8rem;
  color:var(--silver);
  font-family:var(--serif);font-size:.88rem;
  cursor:pointer;transition:.3s;letter-spacing:.06em;
  min-height:44px;
}
.action-btn:hover{border-color:var(--gold);color:var(--gold)}
.action-btn.primary{border-color:var(--gold);color:var(--gold);letter-spacing:.14em;font-family:var(--display);padding:.75rem 2rem}

/* Section headers inside reading */
.section-head{
  font-family:var(--display);font-size:.9rem;color:var(--gold);
  letter-spacing:.16em;margin:1.5rem 0 .5rem;
  border-bottom:1px solid rgba(212,175,55,.22);padding-bottom:.4rem;
}

/* =====================================================================
   AUTH BAR + MODAL
   ===================================================================== */
.auth-bar{
  position:fixed;top:1rem;right:1rem;z-index:200;
  display:flex;gap:.6rem;align-items:center;
}
.auth-bar .auth-email{
  font-size:.76rem;color:var(--silver);letter-spacing:.05em;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.auth-bar button{
  background:rgba(16,14,10,.85);
  border:1px solid var(--gold-dim);
  border-radius:20px;padding:.5rem 1.1rem;
  color:var(--text);font-family:var(--serif);font-size:.78rem;
  cursor:pointer;transition:.3s;letter-spacing:.04em;min-height:36px;
}
.auth-bar button:hover{border-color:var(--gold);color:var(--gold)}

/* Sound toggle — lives in the auth-bar so all top-right controls sit together.
   Selectors are prefixed with .auth-bar to beat the generic `.auth-bar button`
   rules on specificity. Circular icon-only button; gold when on, silver-dim when muted. */
.auth-bar .sound-toggle-btn{
  width:34px;height:34px;padding:0;
  background:rgba(16,14,10,.85);
  border:1px solid var(--gold-dim);
  border-radius:50%;
  color:var(--gold);
  font-size:.95rem;line-height:1;
  cursor:pointer;transition:all .3s ease;
  display:flex;align-items:center;justify-content:center;
  min-height:34px;
}
.auth-bar .sound-toggle-btn:hover{
  border-color:var(--gold);
  color:var(--gold-bright);
  box-shadow:0 0 12px var(--gold-glow);
}
.auth-bar .sound-toggle-btn.muted{
  color:var(--silver-dim);
  border-color:var(--silver-line);
}
.auth-bar .sound-toggle-btn.muted:hover{
  color:var(--silver-bright);
  border-color:var(--silver);
  box-shadow:0 0 10px var(--silver-glow);
}

.modal-overlay{
  position:fixed;inset:0;background:var(--bg-blur);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:300;display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.modal-overlay.show{display:flex}
.modal-box{
  background:linear-gradient(180deg, var(--bg-soft), var(--bg));
  border:1px solid var(--gold-dim);
  border-radius:var(--radius-lg);
  padding:2.4rem 2rem;max-width:400px;width:100%;
  text-align:center;position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.7), 0 0 0 1px var(--gold-faint);
  /* Silver hairline offset inward from the gold outer border */
  outline:1px solid var(--silver-line);
  outline-offset:-6px;
}
.modal-box h3{
  font-family:var(--display);color:var(--gold);
  font-size:1.35rem;letter-spacing:.1em;margin-bottom:.6rem;
}
.modal-box p{
  font-size:.84rem;color:var(--silver);line-height:1.75;margin-bottom:1.6rem;
}
.modal-box input{
  width:100%;background:rgba(16,14,10,.9);
  border:1px solid var(--gold-dim);
  border-radius:10px;padding:.95rem 1rem;
  color:var(--text);font-family:var(--serif);font-size:.95rem;
  margin-bottom:1rem;transition:.3s;box-sizing:border-box;
  min-height:44px;
}
.modal-box input:focus{outline:none;border-color:var(--gold)}
.modal-box .modal-btn{
  width:100%;padding:1rem;font-size:.95rem;letter-spacing:.14em;
}
.modal-box .modal-close{
  position:absolute;top:.75rem;right:1rem;background:none;border:none;
  color:var(--silver);font-size:1.6rem;cursor:pointer;line-height:1;
  padding:.25rem .5rem;transition:.3s;
}
.modal-box .modal-close:hover{color:var(--gold)}
.modal-msg{font-size:.8rem;margin-top:1rem;min-height:1.2em;letter-spacing:.03em}

/* =====================================================================
   PAGE 5 — HISTORY
   ===================================================================== */
#page5{padding:2rem 1.25rem 4rem;align-items:center}
.history-container{max-width:700px;width:100%;margin:0 auto}
.history-header{text-align:center;margin-bottom:2rem}
.history-title{
  font-family:var(--display);font-size:1.6rem;color:var(--gold);
  letter-spacing:.14em;
}
.history-list{display:flex;flex-direction:column;gap:1rem}
.history-card{
  background:linear-gradient(180deg, rgba(16,14,10,.72), rgba(7,6,5,.72));
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  padding:1.2rem 1.4rem;cursor:pointer;transition:.3s;
  box-shadow:inset 0 0 0 1px var(--silver-faint);
}
.history-card:hover{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 1px var(--gold-faint);
}
.history-card .hc-q{
  font-size:.95rem;color:var(--text);margin-bottom:.5rem;line-height:1.6;
}
.history-card .hc-meta{
  font-size:.74rem;color:var(--silver-dim);letter-spacing:.05em;
  display:flex;gap:1rem;flex-wrap:wrap;
}
.history-card .hc-cards{
  display:flex;gap:.4rem;margin-top:.75rem;flex-wrap:wrap;
}
.history-card .hc-mini{
  width:34px;height:52px;border-radius:4px;overflow:hidden;
  border:1px solid var(--gold-dim);background:var(--bg-soft);
}
.history-card .hc-mini.rev img{transform:rotate(180deg)}
.history-card .hc-mini img{width:100%;height:100%;object-fit:cover;display:block}
.history-empty{
  text-align:center;color:var(--silver-dim);
  font-size:.92rem;padding:3rem 1rem;line-height:1.8;
}
.hc-reading{
  font-size:.9rem;line-height:1.95;color:var(--text-mid);
  white-space:pre-wrap;margin-top:1rem;display:none;
  border-top:1px solid rgba(212,175,55,.18);padding-top:1rem;
}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes expand{to{transform:scaleX(1)}}
@keyframes float1{0%,100%{transform:rotate(-16deg) translateY(0)}50%{transform:rotate(-18deg) translateY(-10px)}}
@keyframes float2{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@keyframes float3{0%,100%{transform:rotate(16deg) translateY(0)}50%{transform:rotate(14deg) translateY(-8px)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@keyframes dotPulse{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
@keyframes cardLand{from{opacity:0;transform:scale(.7) translateY(-18px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* =====================================================================
   MOBILE (≤ 640px) — portrait first
   ===================================================================== */
@media (max-width: 640px){
  #page1{padding:2rem .9rem 3rem}
  .hero-title{letter-spacing:.12em}
  .hero-sub{letter-spacing:.28em;margin-bottom:2rem}
  .hero-divider{width:100px}
  .float-cards{width:260px;height:170px;margin-bottom:1.8rem}
  .demo-card{width:60px;height:96px;font-size:1.2rem}
  .demo-card:nth-child(1){left:14px;top:20px}
  .demo-card:nth-child(3){right:14px;top:20px}
  .demo-card:nth-child(4){top:44px}

  .spreads-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:.7rem;max-width:520px}
  .spread-card{padding:.7rem .55rem .85rem;gap:.35rem}
  .sc-preview{height:66px}
  .sc-name{font-size:.85rem;letter-spacing:.1em}
  .sc-badge{font-size:.58rem;padding:.06rem .38rem}
  .sc-use{font-size:.7rem}
  .sc-blurb{font-size:.66rem}

  #page2{padding:2rem .9rem}
  .breathe-ring{width:120px;height:120px}
  .breathe-inner{width:70px;height:70px;font-size:1.4rem}
  .q-input{padding:1rem 1.2rem;font-size:.95rem;min-height:100px}
  .q-btn{padding:.9rem 2.2rem;font-size:.92rem;letter-spacing:.14em;width:100%;max-width:280px}

  #page3{padding:1.5rem .5rem 2.5rem}
  .draw-title{font-size:1.3rem;letter-spacing:.1em}
  .draw-hint{font-size:.78rem;padding:0 .5rem}

  .arc-scroll{padding:.5rem 0 .3rem}
  /* Arc cards on mobile: card size is bumped in JS via computeArcGeometry
     to keep touch targets big. Active state (touch feedback) matches the
     desktop hover — same strong lift so user sees "I'm touching this one". */

  .shuffle-stage{margin:.2rem auto;max-width:none;min-height:200px;gap:1rem}
  .shuffle-deck{width:72px;height:114px}
  .shuffle-card{width:72px;height:114px}
  .shuffle-label{font-size:.8rem;letter-spacing:.36em}

  .slots-row{min-height:0;padding:0}
  /* .drawn-slot 尺寸交给 layoutSlots 内联,不再硬写 */
  .slot-face-front img.card-img{border-radius:6px}

  #page4{padding:2rem 1rem}
  .reading-title{font-size:1.4rem;letter-spacing:.1em}
  .reading-body{padding:1.4rem 1.2rem;border-radius:14px}
  .reading-text{font-size:.94rem;line-height:1.9}
  .disclaimer{font-size:.75rem;padding:.8rem 1rem}
  .reading-actions .action-btn{padding:.7rem 1.4rem;font-size:.85rem}

  .modal-box{padding:2rem 1.4rem;border-radius:14px}
  .modal-box h3{font-size:1.2rem}
  .modal-box p{font-size:.82rem}

  .auth-bar{top:.5rem;right:.5rem;gap:.4rem}
  .auth-bar .auth-email{max-width:100px;font-size:.7rem}
  .auth-bar button{padding:.4rem .8rem;font-size:.72rem;min-height:32px}
  /* Sound-toggle stays icon-square, doesn't inherit auth-bar's stretched padding */
  .auth-bar .sound-toggle-btn{padding:0;width:30px;height:30px;min-height:30px;font-size:.85rem}

  #page5{padding:1.8rem .9rem 3rem}
  .history-title{font-size:1.4rem}
  .history-card{padding:1rem 1.1rem;border-radius:10px}
  .history-card .hc-q{font-size:.9rem}
  .history-card .hc-mini{width:30px;height:46px}
}

/* Very narrow (≤ 360px) — compact further */
@media (max-width: 360px){
  .hero-title{font-size:2.2rem;letter-spacing:.1em}
  .float-cards{width:220px}
  /* .arc-card + .drawn-slot dimensions come from JS on all sizes. */
  .shuffle-deck{width:66px;height:104px}
  .shuffle-card{width:66px;height:104px}
  .spreads-grid{max-width:none;grid-template-columns:1fr 1fr;gap:.6rem}
  .sc-preview{height:60px}
}

/* =====================================================================
   CARD ENLARGE OVERLAY (解读页翻开的牌 → 点开大图)
   ===================================================================== */
.card-enlarge-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(7,6,5,.9);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1.2rem;box-sizing:border-box;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  cursor:pointer;
}
.card-enlarge-overlay.show{
  opacity:1;pointer-events:auto;
}
.card-enlarge-overlay .ce-inner{
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  max-width:min(88vw, 460px);
  animation:ceEnter .38s cubic-bezier(.34,1.32,.5,1) both;
}
@keyframes ceEnter{
  0%   { transform:translateY(12px) scale(.9); opacity:0; }
  100% { transform:translateY(0)    scale(1);  opacity:1; }
}
.card-enlarge-overlay .ce-card{
  width:min(72vw, 320px);
  aspect-ratio:1 / 1.5;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--gold);
  background:var(--bg-soft);
  box-shadow:0 30px 60px rgba(0,0,0,.75), 0 0 60px rgba(212,175,55,.25);
  outline:1px solid var(--silver-line);outline-offset:-6px;
  transition:transform .3s ease;
}
.card-enlarge-overlay .ce-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.card-enlarge-overlay .ce-meta{
  text-align:center;color:var(--text);
}
.card-enlarge-overlay .ce-position{
  font-size:.82rem;letter-spacing:.24em;
  color:var(--silver-bright);text-transform:uppercase;
  margin-bottom:.5rem;
}
.card-enlarge-overlay .ce-name{
  font-family:var(--display);font-size:1.8rem;
  color:var(--gold);letter-spacing:.16em;
  text-shadow:0 0 22px rgba(212,175,55,.28);
}
.card-enlarge-overlay .ce-reversed{
  margin-top:.6rem;
  font-size:.72rem;letter-spacing:.18em;
  color:var(--silver);
}
.card-enlarge-overlay .ce-reversed.is-reversed{
  color:#e0a8a8;
}
.card-enlarge-overlay .ce-hint{
  margin-top:1rem;font-size:.66rem;letter-spacing:.2em;color:var(--text-dim);
}
@media (max-width:499px){
  .card-enlarge-overlay .ce-card{width:min(78vw, 300px)}
  .card-enlarge-overlay .ce-name{font-size:1.5rem}
}