/* =============================================================================
   石蟾引脉 · 静态构图与素材
   ⚠️ 本文件**没有任何 CSS 补间声明**：补间式切换与关键帧动画，一句都没有。
      所有会随时间变化的东西（不透明度、位移、缩放、高光扫过、进度条宽度）
      都由 70-boot.js 的常驻主循环逐帧写进 style。
      这里只负责：排版、配色、圆角、层次、指针热区。
   ========================================================================== */
:root{
  --ink: #eaf2ff;
  --dim: rgba(190,215,255,.62);
  --dim2: rgba(160,190,235,.40);
  --gold: #ffd479;
  --cyan: #5ce6ff;
  --stone: rgba(14,24,42,.72);
  --stone2: rgba(10,18,32,.86);
  --edge: rgba(140,185,255,.20);
  --edge2: rgba(140,185,255,.36);
  --serif: "Songti SC", "STSong", "KaiTi", "STKaiti", "SimSun", serif;
  --sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; }
body{
  background: #05080f;
  color: var(--ink);
  font-family: var(--sans);
  display: flex; align-items: center; justify-content: center;
  user-select: none; touch-action: none;
}
/* 舞台壳铺满视口：画布要比「中列」更宽，宽屏时两侧才继续铺景。
   界面层 #ui 收成一条中列，HUD 与页面框都只在这条列里排版。 */
#stageWrap{
  position: relative; overflow: hidden;
  width: 100vw; height: 100vh; height: 100dvh;
  background: #05080f;
}
#world, #post{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
#post{ pointer-events:none; }
#ui{
  position:absolute; top:0; height:100%; z-index:10; pointer-events:none;
  left: 50%; transform: translateX(-50%);
  width: min(100vw, 560px);
}

/* ---------- 首屏骨架（HTML 一解析出来就在，所以首帧不是白的） ---------- */
#boot{
  position:absolute; left:0; top:0; width:100%; height:100%; z-index:60;
  background:
    radial-gradient(120% 70% at 50% 24%, #16223c 0%, #0a1120 46%, #05080f 100%),
    #05080f;
  display:flex; align-items:center; justify-content:center;
}
.bootInner{ width: 76%; max-width: 340px; text-align:center; }
.bootTitle{
  font-family: var(--serif); font-size: 40px; letter-spacing: .16em;
  color: #dfe9ff; text-shadow: 0 0 26px rgba(92,230,255,.35), 0 2px 0 rgba(0,0,0,.5);
}
.bootSub{ font-size: 11px; letter-spacing: .42em; color: var(--dim2); margin-top: 8px; }
.bootTrack{
  margin: 26px auto 10px; height: 3px; width: 100%; border-radius: 3px;
  background: rgba(120,160,220,.16); overflow: hidden;
}
#bootBar{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, rgba(92,230,255,.2), var(--cyan));
  box-shadow: 0 0 12px rgba(92,230,255,.6);
}
.bootTxt{ font-size: 11px; letter-spacing: .22em; color: var(--dim2); }

/* ---------- 跨页面持续的顶栏 ---------- */
#topbar{
  position:absolute; left:0; top:0; width:100%; z-index:30;
  display:flex; align-items:center; gap:8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 8px 12px;
  pointer-events:none;
}
#chips{ display:flex; align-items:center; gap:7px; flex:1; min-width:0; }
.chip{
  display:flex; align-items:baseline; gap:3px; padding:5px 9px 4px;
  background: var(--stone); border:1px solid var(--edge); border-radius: 9px;
  backdrop-filter: blur(6px);
}
.chip b{ font-size:14px; font-weight:800; letter-spacing:.02em; font-variant-numeric: tabular-nums; }
.chip span{ font-size:9px; color:var(--dim2); }
.chip.crit{ border-color: rgba(255,110,70,.7); }
.chip.crit b{ color:#ff9a6a; }
#chipLevel b{ color: var(--gold); }
#chipLeft b{ color: var(--cyan); }
.tool{
  pointer-events:auto; width:32px; height:32px; flex:0 0 32px;
  display:flex; align-items:center; justify-content:center;
  background: var(--stone); border:1px solid var(--edge); border-radius:9px;
  color: var(--dim); font-size:13px; font-family: var(--sans);
  cursor:pointer; padding:0;
}
.tool:active{ color: var(--gold); border-color: var(--edge2); }
#pauseBtn{ opacity:0; }

#resoBar{
  position:absolute; left:12px; right:12px; top: calc(50px + env(safe-area-inset-top)); height: 4px; z-index:29;
  background: rgba(10,18,34,.62); border-radius:3px; overflow:visible;
  border:1px solid rgba(140,185,255,.12);
}
#resoFill{ display:block; height:100%; width:0%; border-radius:3px; background: var(--cyan); }
#resoMark{
  position:absolute; top:-3px; width:2px; height:10px; border-radius:2px;
  background: rgba(255,255,255,.85); left:0%;
}
#resoBar em{
  position:absolute; right:0; top:7px; font-style:normal; font-size:9px;
  letter-spacing:.18em; color: var(--dim2);
}

/* ---------- 页面框 ---------- */
.pageBox{
  position:absolute; left:0; top:0; width:100%; height:100%;
  display:flex; flex-direction:column; z-index:20;
  padding: calc(66px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom)) 20px;
  opacity:0;
}
#homeBox{ justify-content:space-between; }
.homeTop{ text-align:center; }
.homeTop .title{
  font-family: var(--serif); font-size: 44px; letter-spacing:.14em; line-height:1.04;
  color:#f2f7ff; text-shadow: 0 0 30px rgba(92,230,255,.34), 0 0 70px rgba(92,230,255,.16), 0 2px 0 rgba(0,0,0,.6);
}
.homeTop .sub{ font-size:10px; letter-spacing:.46em; color: var(--dim2); margin-top:7px; }
.homeStats{ display:flex; justify-content:center; gap:10px; margin-top:16px; }
.hs{
  min-width:74px; padding:7px 10px 6px; border-radius:11px;
  background: rgba(10,18,34,.56); border:1px solid var(--edge);
}
.hs b{ display:block; font-size:15px; font-weight:800; color:#eaf2ff; font-variant-numeric: tabular-nums; }
.hs b i{ font-style:normal; font-size:9px; color:var(--dim2); }
.hs span{ display:block; font-size:9px; letter-spacing:.14em; color:var(--dim2); margin-top:2px; }

.homeBottom{ display:flex; flex-direction:column; gap:11px; align-items:center; }
.ctaWrap{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
/* 主行动：明显比其它入口大（三种视觉层级） */
.cta{
  position:relative; width:100%; max-width:330px; padding:15px 20px 14px;
  border-radius:16px; cursor:pointer; overflow:hidden; text-align:center;
  background:
    linear-gradient(180deg, rgba(28,52,86,.92), rgba(14,26,48,.96));
  border:1.5px solid rgba(255,212,121,.44);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset, 0 10px 34px rgba(0,0,0,.55), 0 0 30px rgba(255,212,121,.10);
}
.cta::after{           /* 悬停高光扫过：位置由主循环逐帧写 --sweep */
  content:''; position:absolute; inset:0;
  background: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,240,200,.22) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(calc(var(--sweep, -120%) ));
}
.cta b{ display:block; font-family: var(--serif); font-size:27px; letter-spacing:.20em; color:#fff4d8; }
.cta i{ display:block; font-style:normal; font-size:11px; color: rgba(255,222,160,.72); margin-top:5px; letter-spacing:.04em; }
.badge{
  position:absolute; right:10px; top:9px; font-size:9px; letter-spacing:.1em;
  padding:2px 7px; border-radius:20px; border:1px solid transparent;
}
.badge.none{ opacity:0; }
.badge.on{ color:#0a1120; background:var(--cyan); border-color: rgba(255,255,255,.5); }
.badge.gold{ color:#20160a; background:var(--gold); border-color: rgba(255,255,255,.5); }
.refill{
  font-size:11px; padding:6px 14px; border-radius:20px;
  background: rgba(255,212,121,.14); border:1px solid rgba(255,212,121,.5); color: var(--gold);
}
.mrow{ display:flex; gap:10px; justify-content:center; width:100%; }
.mbtn{
  font-family: var(--sans); cursor:pointer; color: var(--ink);
  background: linear-gradient(180deg, rgba(24,38,62,.86), rgba(12,22,40,.92));
  border:1px solid var(--edge); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.mbtn.mid{ flex:1; max-width:158px; padding:10px 8px; font-size:13px; letter-spacing:.10em; }
.mbtn.small{ padding:8px 15px; font-size:11px; letter-spacing:.10em; color: var(--dim); border-radius:10px; }
.mbtn.refill{ flex:0 0 auto; }
.mbtn:active{ border-color: var(--edge2); color:#fff; }
.mrow2{ margin-top:2px; }

/* ---------- 游戏说明 ---------- */
.rulesHead{ display:flex; flex-direction:column; gap:12px; }
.rulesTitle{ font-family: var(--serif); font-size:23px; letter-spacing:.16em; color:#eaf2ff; }
.chaps{ display:flex; gap:7px; }
.chap{
  flex:1; position:relative; padding:9px 4px 8px; text-align:center; cursor:pointer;
  border-radius:11px; background: rgba(10,18,34,.6); border:1px solid var(--edge);
  font-size:12px; color: var(--dim);
}
.chap b{ display:block; font-weight:700; }
.chap i{ display:block; font-style:normal; font-size:8px; color:var(--dim2); margin-top:2px; letter-spacing:.1em; }
.chap.on{ color:#fff; }
.chap u{ position:absolute; left:9px; right:9px; bottom:-1px; height:2px; border-radius:2px; background:transparent; }
.rulesLines{
  margin-top:auto; display:flex; flex-direction:column; gap:8px; min-height:118px; justify-content:flex-end;
}
.rline{
  position:relative; padding:9px 12px 9px 30px; border-radius:10px;
  background: rgba(10,18,34,.66); border:1px solid var(--edge);
  font-size:12.5px; line-height:1.5; color:#dfe9ff;
}
.rline s{ position:absolute; left:10px; top:9px; width:13px; height:13px; border-radius:50%;
  font-size:9px; line-height:13px; text-align:center; text-decoration:none; color:#0a1120; font-weight:800; }
.rulesFoot{ display:flex; gap:10px; justify-content:center; margin-top:12px; }

/* ---------- 战果 ---------- */
.statsRows{ margin-top:14px; overflow:hidden; display:flex; flex-direction:column; gap:7px; }
.stSum{ display:flex; gap:8px; margin-bottom:6px; }
.ss{ flex:1; padding:8px 6px; border-radius:11px; background: rgba(8,15,28,.86); border:1px solid var(--edge); text-align:center; backdrop-filter: blur(9px); }
.ss b{ display:block; font-size:14px; font-weight:800; font-variant-numeric: tabular-nums; }
.ss b i{ font-style:normal; font-size:9px; color:var(--dim2); }
.ss span{ display:block; font-size:8.5px; color:var(--dim2); letter-spacing:.1em; margin-top:2px; }
.stRow{
  display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:10px;
  background: rgba(8,15,28,.88); border:1px solid rgba(140,185,255,.13);
  backdrop-filter: blur(9px);   /* 记录压在半透明脉景上，不给它一层底就读不清（3.4 可读性优先） */
}
.stRow b{ font-size:12px; font-weight:700; flex:1; }
.stRow b i{ font-style:normal; font-size:9px; color:var(--dim2); margin-left:6px; }
.stRow u{ text-decoration:none; letter-spacing:1px; font-size:11px; color: rgba(150,180,220,.30); }
.stRow u em{ font-style:normal; }
.stRow u em.on{ color: var(--gold); }
.stRow s{ text-decoration:none; font-size:9px; color:var(--dim2); }
.stRow.done{ border-color: rgba(255,212,121,.30); }

/* ---------- 灵符槽 ---------- */
#charmSlot{
  position:absolute; right:14px; bottom: calc(22px + env(safe-area-inset-bottom));
  width:62px; height:62px; z-index:24; cursor:pointer;
  border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(60% 60% at 50% 34%, rgba(60,44,16,.9), rgba(12,18,32,.94));
  border:1.5px solid rgba(255,212,121,.6);
  box-shadow: 0 0 22px rgba(255,200,90,.20), 0 8px 20px rgba(0,0,0,.5);
  opacity:0;
}
#charmSlot.off{ border-color: rgba(140,185,255,.20); box-shadow:none; }
#charmSlot.off b, #charmSlot.off span{ color: rgba(160,190,235,.44); }
#charmSlot b{ font-size:21px; color: var(--gold); line-height:1; }
#charmSlot span{ font-size:11px; font-weight:800; color:#ffe9a8; }
#charmSlot em{ font-style:normal; font-size:8px; color: var(--dim2); letter-spacing:.06em; }

/* ---------- 提示队列（叠在左下，排队而不是层层叠加） ---------- */
#tips{
  position:absolute; left:14px; bottom: calc(24px + env(safe-area-inset-bottom));
  z-index:23; display:flex; flex-direction:column; gap:6px; pointer-events:auto; cursor:pointer;
  max-width: 62%;
}
.tip{
  padding:6px 11px; border-radius:9px; font-size:11px; color:#dfe9ff;
  background: rgba(8,16,30,.78); border:1px solid var(--edge); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
#toastBox{
  position:absolute; left:0; right:0; top: calc(74px + env(safe-area-inset-top));
  z-index:31; display:flex; flex-direction:column; align-items:center; gap:5px; pointer-events:none;
}
.toast{
  padding:6px 13px; border-radius:20px; background: rgba(8,16,30,.86);
  border:1px solid rgba(255,212,121,.34); text-align:center;
}
.toast b{ display:block; font-size:12px; }
.toast i{ display:block; font-style:normal; font-size:9px; color:var(--dim2); margin-top:2px; }

/* ---------- 引导 ---------- */
#guideBox{
  position:absolute; left:20px; right:20px; bottom: calc(30px + env(safe-area-inset-bottom));
  z-index:32; display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-radius:13px; background: rgba(8,16,30,.9); border:1px solid rgba(255,212,121,.4);
  box-shadow: 0 0 26px rgba(255,200,90,.14); pointer-events:auto; opacity:0;
}
#guideTxt{ flex:1; font-size:12px; line-height:1.45; color:#f0f6ff; }
#guideSkip{
  pointer-events:auto; cursor:pointer; font-size:10px; padding:5px 11px; border-radius:20px;
  background: rgba(255,212,121,.14); border:1px solid rgba(255,212,121,.44); color: var(--gold);
}

/* ---------- 浮层 ---------- */
#dim{
  position:absolute; inset:0; background:#03060e; opacity:0; z-index:40; pointer-events:none;
}
#ovl{ position:absolute; inset:0; z-index:45; pointer-events:none; }
.ov{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none;
}
.ovCard{
  width:100%; max-width:330px; padding:20px 18px 16px; border-radius:18px; text-align:center;
  background: linear-gradient(180deg, rgba(20,34,58,.95), rgba(9,16,30,.97));
  border:1.5px solid var(--edge2);
  box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 40px rgba(92,230,255,.08);
  display:flex; flex-direction:column; gap:9px; align-items:center;
}
.ovCard h3{ margin:0 0 2px; font-family: var(--serif); font-size:22px; letter-spacing:.14em; color:#f2f7ff; }
.ovCard h3.win{ color: var(--gold); text-shadow: 0 0 22px rgba(255,212,121,.4); }
.ovCard h3.lose{ color:#ff8a5c; text-shadow: 0 0 22px rgba(255,120,60,.4); }
.ovCard p{ margin:0; font-size:11px; color: var(--dim); letter-spacing:.06em; }
.ovCard .mbtn.mid, .ovCard .mbtn.small{ width:100%; max-width:none; }
.stars{ display:flex; gap:12px; margin:2px 0 4px; }
.star{
  font-size:29px; font-style:normal; color: rgba(150,180,220,.22);
  text-shadow: none; transform: scale(.86);
}
.star.on{ color: var(--gold); text-shadow: 0 0 20px rgba(255,212,121,.7); }
.resRows{ width:100%; display:flex; flex-direction:column; gap:5px; margin:4px 0 6px; }
.rrow{ display:flex; justify-content:space-between; align-items:baseline; padding:6px 10px; border-radius:9px;
  background: rgba(8,14,28,.6); border:1px solid rgba(140,185,255,.14); }
.rrow b{ font-size:11px; color: var(--dim); font-weight:400; }
.rrow i{ font-style:normal; font-size:13px; font-weight:800; color:#eaf2ff; font-variant-numeric: tabular-nums; }
.rrow i.good{ color:#7cf0c0; }
.setRow{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 4px; }
.setL{ flex:1; text-align:left; }
.setL b{ display:block; font-size:12px; }
.setL i{ display:block; font-style:normal; font-size:9px; color:var(--dim2); margin-top:2px; }
.sw{
  flex:0 0 42px; height:23px; border-radius:20px; cursor:pointer; position:relative;
  background: rgba(8,14,28,.9); border:1px solid var(--edge);
}
.sw u{ position:absolute; left:2px; top:2px; width:17px; height:17px; border-radius:50%;
  background: rgba(160,190,235,.5); text-decoration:none; }
.sw.on{ background: rgba(92,230,255,.22); border-color: rgba(92,230,255,.6); }
.sw.on u{ background: var(--cyan); box-shadow: 0 0 12px rgba(92,230,255,.7); }
.qRow{ align-items:center; }
.qs{ display:flex; gap:1px; }
.qb{
  cursor:pointer; font-family:var(--sans); font-size:11px; padding:5px 10px; color: var(--dim);
  background: rgba(8,14,28,.9); border:1px solid var(--edge);
}
.qb:first-child{ border-radius:8px 0 0 8px; }
.qb:last-child{ border-radius:0 8px 8px 0; }
.qb.on{ color:#0a1120; background: var(--cyan); border-color: var(--cyan); font-weight:800; }

/* 宽屏：舞台两侧留出的部分由画布自铺，不需要额外样式 */
@media (min-width: 561px){
  #stageWrap{ box-shadow: 0 0 0 1px rgba(140,185,255,.10), 0 30px 90px rgba(0,0,0,.7); }
}

/* =============================================================================
   广告（AdsGram 激励视频）
   全部是静态构图：按钮的三态文案、显隐、进度条宽度都由主循环逐帧写入。
   这里没有一条补间声明。
   ========================================================================== */
/* fail-loud 红条：blockId 未配置 / debug 未关时出现，绝不静默 */
#adWarn{
  position:absolute; left:0; right:0; top: calc(6px + env(safe-area-inset-top)); z-index:34;
  margin: 0 12px; padding:6px 10px; border-radius:9px;
  background: rgba(120,18,18,.92); border:1px solid rgba(255,120,110,.7);
  color:#ffd9d4; font-size:10.5px; line-height:1.45; text-align:center;
  opacity:0; pointer-events:none;
  box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
#adWarn b{ color:#fff; }
.mbtn.adBtn{
  border-color: rgba(120,230,255,.5);
  background: linear-gradient(180deg, rgba(20,58,84,.9), rgba(10,26,44,.94));
  color:#dff4ff;
}
.mbtn.adBtn.hold{ border-color: rgba(160,190,235,.28); color: var(--dim2); }
.mbtn.adBtn .sub{ display:block; font-size:9px; color: rgba(190,225,255,.7); margin-top:3px; letter-spacing:.04em; }
.adMode{
  font-size:9.5px; letter-spacing:.06em; padding:2px 9px; border-radius:20px;
  border:1px solid rgba(140,185,255,.3); color: var(--dim2);
}
.adMode.none{ display:none; }
.adMode.real{ color:#0a1120; background:#7cf0c0; border-color:#7cf0c0; }
.adMode.hold{ color:#ffd9d4; background: rgba(120,18,18,.7); border-color: rgba(255,120,110,.6); }
.adMode.demo{ color:#ffe9a8; background: rgba(120,84,10,.75); border-color: rgba(255,212,121,.6); }
/* 自检面板 */
.adPanel{ width:100%; text-align:left; display:flex; flex-direction:column; gap:3px; margin-top:2px; }
.adPanel .ar{ display:flex; justify-content:space-between; gap:8px; font-size:10px; padding:3px 7px;
  border-radius:7px; background: rgba(8,14,28,.66); border:1px solid rgba(140,185,255,.12); }
.adPanel .ar b{ color: var(--dim); font-weight:400; }
.adPanel .ar i{ font-style:normal; color:#dfe9ff; font-variant-numeric: tabular-nums; }
.adPanel .ar i.warn{ color:#ff9a8a; }
.adPanel .ar i.ok{ color:#7cf0c0; }
.adPanel .ah{ font-size:10px; color: var(--gold); letter-spacing:.08em; margin-top:6px; }
.adPanel .led{ font-size:9px; color: var(--dim2); display:block; line-height:1.5; }
.adPanel .led s{ text-decoration:none; color:#7cf0c0; }
.adPanel .led u{ text-decoration:none; color:#ff9a8a; }
/* 占位演示面板 */
.ovCard.demo{ border-color: rgba(255,120,110,.5); }
.ovCard.demo h3{ color:#ffb3a8; }
.demoRed{ color:#ff9a8a !important; font-weight:700; }
.demoTrack{ width:100%; height:4px; border-radius:3px; background: rgba(120,160,220,.18); overflow:hidden; margin:6px 0 2px; }
#demoBar{ display:block; height:100%; width:0%; background: linear-gradient(90deg, rgba(255,150,120,.4), #ff7a5c); }
#demoLeft{ font-variant-numeric: tabular-nums; }