/* ============================================================
 * 蛊道模拟器 · 样式（移动优先，兼容电脑 480px 容器）
 * 主题：蛊道 —— 墨黑底（#0a0c0b）+ 青碧蛊光（#6fd6b4）+ 暗金（#d8b45a）+ 血红（#a8302b）
 * 背景为纯色底（长列表滚动不出现上下分层）；网格与辉光是 fixed，不参与滚动
 * ============================================================ */
[hidden] { display: none !important; }

:root {
  --bg:          #0a0c0b;
  --bg-deep:     #050706;
  --panel:       #121714;
  --panel-2:     #1a221e;
  --panel-3:     #232d27;
  --line:        #4fa88c;
  --line-soft:   #2b5c4c;
  --gold:        #6fd6b4;
  --gold-dim:    #3d8068;
  --gold-bright: #a8f0d4;
  --teal:        #d8b45a;
  --teal-dim:    #7a6630;
  --danger:      #a8302b;
  --danger-text: #ff9a9a;
  --text:        #f2f5f8;
  --text-dim:    #b9c6d0;
  --text-mute:   #7a8b98;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;

  /* —— 四种蛊类色（攻击 / 防御 / 辅助 / 综合） —— */
  --g-atk:       #e8624a;
  --g-def:       #5f9fd8;
  --g-aux:       #8fd0b6;
  --g-all:       #d8b45a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ============================================================
 * 全局：**永远不出现横向滚动**
 *   html/body 关掉横向溢出 → 任何元素超宽都只会被裁掉，不会撑出左右滑动
 * ============================================================ */
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100%;
  /* ⚠ `width:100%` 必须写：`overflow-x:hidden` 只裁剪显示，**不阻止元素被内容撑宽**
   *   （html 的宽度锚在视口上，从它开始卡死，下面的 100% 才有意义） */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;   /* iOS 横屏不放大字号，避免撑破 */
}
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}
/* 多媒体/表格永不超宽 */
img, canvas, video, table { max-width: 100%; }
/* 长串（URL / 连续英文数字）强制换行，避免撑破容器 */
.log-item, .about-text, .hist-item, .settle-note, .sign-note,
.review-log .log-item, .mask-info, .lb-name { overflow-wrap: anywhere; word-break: break-word; }
/* 夜空网格 + 上下辉光：fixed 定位，滚动时不动，底色保持纯色不分层 */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 50%;
  width: 480px; max-width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(111,214,180,.12), transparent 62%),
    radial-gradient(120% 70% at 50% 110%, rgba(111,214,180,.09), transparent 66%),
    repeating-linear-gradient(0deg, rgba(111,214,180,.04) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(111,214,180,.04) 0 1px, transparent 1px 34px);
  pointer-events: none;
  z-index: 0;
}

.view {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ⚠ 页面在顶栏之下：扣掉 52px，否则每页都会多出 52px 空白滚动 */
  min-height: calc(100vh - 52px);
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom));
}

/* ---------- 按钮 ---------- */
.btn {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text);
  border-radius: 12px;
  padding: 10px 17px;
  font-size: 14.5px;
  cursor: pointer;
  user-select: none;
  transition: transform .1s, filter .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); filter: brightness(1.15); }
.btn-primary {
  background: linear-gradient(180deg, #a8f0d4, #6fd6b4);
  border-color: var(--gold-bright);
  color: #062018;
  font-weight: 700;
}
.btn-big { width: 100%; padding: 12px 14px; font-size: 14.5px; border-radius: 13px; }
.btn-danger { border-color: var(--danger); color: var(--danger-text); }
.btn.gray, .btn:disabled { opacity: .45; cursor: default; }
.btn-pause {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  width: 38px; height: 38px; border-radius: 50%; font-size: 15px; cursor: pointer;
  flex: 0 0 auto;
}
.btn-pill {
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.04); color: var(--text-dim);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer;
}
.btn-pill:active { color: var(--gold-bright); border-color: var(--gold); }

/* ⚠⚠ 宽度屏障：凡是「用 fitOneLine / fitHomeLine 缩字号」的单行文本元素，
 *   都必须有**宽度上限**（以及从 #app 一路下来的 width:100% 约束）——
 *   否则元素会被自身内容撑宽，clientWidth 跟着一起变大 → `naturalWidth <= avail`
 *   恒成立 → 缩字号一次都不触发，长标题直接被裁掉右半截。
 *   （用户把首页标题改成「原神模拟器2.0(材料版)」后暴露：标题撑到 401px > 视口 390px） */
#app, .view, .home-hero, .page-head { width: 100%; max-width: 100%; }
.home-title, .game-title, .page-title, .home-count, .home-tianli { max-width: 100%; overflow: hidden; }

/* ---------- 首页 ---------- */
.home-hero { text-align: center; margin-top: 6px; }
.home-title {
  margin: 0; font-size: 34px; font-weight: 800; letter-spacing: 2px;
  /* 鎏金标题：金色纵向渐变 + 顶部白高光 + 深金投影 —— 浅金底上也能"金光闪闪" */
  color: transparent;
  background: linear-gradient(180deg, #e9fff7 0%, #a8f0d4 38%, #6fd6b4 60%, #3d8068 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 2px 5px rgba(105,75,12,.55));
  white-space: nowrap;
}
.home-sub {
  margin-top: 4px; font-size: 12.5px; color: var(--text-dim);
  line-height: 1.6; padding: 0 6px;
}
.home-count {
  margin-top: 10px; font-size: 12.5px; color: var(--text-dim);
  background: rgba(140,180,162,.07);
  border: 1px solid rgba(140,180,162,.22);
  border-radius: 999px; padding: 7px 14px;
  white-space: nowrap;
  /* ⚠ 必须给宽度上限：这行是 flex 列的居中子项（align-items:center），
   *   不加 max-width 时元素宽度永远跟着内容走 → scrollWidth 恒等于 clientWidth，
   *   溢出根本测不出来，缩字号逻辑（fitHomeCount/fitTianli）就是摆设。 */
  max-width: 100%;
  overflow: hidden;          /* 兜底：真缩到最小还放不下就裁掉，绝不撑破整页 */
}
/* ⚠ 这里**不能写死 px**：外层整行会按需缩字号，写死会让 <b> 不跟着缩、整行照样溢出。
 *   用 em 跟随外层（略大一点点保持强调）。 */
.home-count b { color: var(--teal); font-size: 1.04em; }
.home-tianli {
  margin-top: 8px;
  background: rgba(111,214,180,.07);
  border-color: rgba(111,214,180,.26);
}
.home-tianli b { color: var(--gold-bright); }

.home-lv {
  width: 100%; margin-top: 10px;
  background: linear-gradient(180deg, rgba(18,23,20,.92), rgba(8,14,11,.92));
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 12px 14px 10px;
}
.lv-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.lv-name { color: var(--teal); font-weight: 700; }
.lv-lv { color: var(--gold-bright); font-size: 14px; }
.lv-bonus { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
/* 模拟点提示：独占一行、居中（与「经验数在标题行右侧」互不干扰） */
.lv-bonus-line { margin-top: 5px; text-align: center; }
.lv-bar {
  height: 7px; border-radius: 999px; margin-top: 8px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.lv-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width .3s;
}
/* 经验数：挪到标题行右侧（margin-left:auto 把它顶到最右） */
.lv-head .lv-exp-line { margin-top: 0; margin-left: auto; font-size: 11.5px; color: var(--text-mute); text-align: right; }
/* 等级框：红线（分隔线，压在「升级蛊虫」按钮上方） */
.lv-gap-line { margin-top: 8px; border-top: 1px dashed rgba(111,214,180,.35); }
/* 等级框底部：圣晶石行（左标签 / 右数值） */
.lv-gem-line {
  margin-top: 8px;
  display: flex; align-items: center;
}
.lv-gem-name { font-size: 12.5px; color: var(--text-dim); }
.lv-gem-val { margin-left: auto; font-size: 15px; color: var(--teal); font-weight: 700; }

.home-btns { width: 100%; margin-top: 14px; }
.home-team-wrap {
  width: 100%; margin-top: 12px;
  border: 1px solid var(--line-soft); border-radius: 14px;
  background: rgba(8,14,11,.6);
  padding: 10px 10px 8px;
}
.home-team-title { font-size: 12px; color: var(--text-mute); margin-bottom: 8px; }
.home-team { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.home-team .mini-card {
  flex: 1 1 0; min-width: 0;
  /* ⚠ 必须 relative：卡里的「外援」角标是 absolute 定位，否则会飞到整页右上角 */
  position: relative;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 8px 6px; text-align: center;
  display: flex; flex-direction: column; gap: 3px;
}
.mini-card .mc-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; }
.mini-card .mc-sub { font-size: 10.5px; color: var(--text-mute); white-space: nowrap; }
.mini-card.empty { opacity: .45; }
/* 职阶标签（14 种）—— 基础版式 + 配色 */
.spec-tag {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; padding: 0 5px; height: 17px;
  font-size: 10px; font-weight: 700; line-height: 1;
  vertical-align: middle; flex: 0 0 auto;
}
.g-atk       { background: rgba(232,98,74,.16);  color: #ff9c88; border: 1px solid rgba(232,98,74,.42); }
.g-def       { background: rgba(95,159,216,.16); color: #9ccbf2; border: 1px solid rgba(95,159,216,.42); }
.g-aux       { background: rgba(143,208,182,.16); color: #a9ecd2; border: 1px solid rgba(143,208,182,.42); }
.g-all       { background: rgba(216,180,90,.16); color: #ecd08a; border: 1px solid rgba(216,180,90,.42); }

.home-row { width: 100%; display: flex; gap: 10px; margin-top: 10px; }
.home-row2 .btn {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 10px 8px;
}
.home-row3 .btn {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: 10px 6px; font-size: 14px;
}
/* 按钮主文字与副标题（与成就按钮同一套结构，视觉统一） */
.home-row .btn > span:first-child { font-size: 15px; line-height: 1.3; white-space: nowrap; }
.ach-btn-tip {
  font-size: 10.5px; color: var(--gold); font-weight: 400;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

.btn-follow {
  margin-top: 12px; border-color: var(--gold);
  background: linear-gradient(180deg, rgba(111,214,180,.16), rgba(111,214,180,.06));
  color: var(--gold-bright); font-size: 12.5px; white-space: normal;
}
.qr-area { margin-top: 14px; text-align: center; }
.qr-text { font-size: 12px; color: var(--text-mute); margin-bottom: 6px; }
.qr-img { width: 150px; height: 150px; border-radius: 10px; background: #fff; padding: 6px; }

/* ---------- 游戏页 ---------- */
.game-top { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.game-title {
  flex: 1; text-align: center; font-size: 16px; font-weight: 700; white-space: nowrap;
  /* 同首页标题：鎏金渐变 */
  color: transparent;
  background: linear-gradient(180deg, #e9fff7 0%, #a8f0d4 38%, #6fd6b4 60%, #3d8068 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 1px 3px rgba(105,75,12,.5));
}
.attr-grid { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.stamina-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(8,14,11,.75); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 10px 12px;
}
.stamina-name { font-size: 12.5px; font-weight: 700; color: var(--teal); flex: 0 0 auto; }
.stamina-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.stamina-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .25s; }
.stamina-val { font-size: 13px; color: var(--gold-bright); flex: 0 0 auto; }
.attr-row3 { display: flex; gap: 8px; }
.attr-card {
  flex: 1; min-width: 0;
  background: rgba(8,14,11,.75); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 9px 6px; text-align: center;
}
.attr-name { font-size: 11px; color: var(--text-mute); white-space: nowrap; }
.attr-val { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; }

.team-box {
  width: 100%; margin-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.team-box.scroll { max-height: 240px; overflow-y: auto; }
.team-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(8,14,11,.75); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 8px 10px;
  font-size: 12.5px; white-space: nowrap;
}
/* ⚠ 行内每一段都必须 flex:0 0 auto（不许收缩）：
 *   一旦被压扁，fitOneLine 量到的就是「压扁后的宽度」→ 误判成放得下而不缩字号，
 *   名字会直接溢出压到 Lv./元素上（结算页与游戏页的从者行都是这套版式）。
 *   保证不收缩后，fitOneLine 才能量到真实所需宽度并逐级缩字号，永远一行放下。 */
.team-row > * { flex: 0 0 auto; }
.team-name {
  display: flex; align-items: center; gap: 5px;
  color: var(--text); font-weight: 700;
}
.team-lv { color: var(--teal); }
.team-attr { color: var(--text-dim); }
.team-power { margin-left: auto; color: var(--gold-bright); font-weight: 700; }
.team-row.team-empty { justify-content: center; color: var(--text-mute); }

.manual-tip { margin-top: 10px; font-size: 12px; color: var(--gold); }
/* ---------- 日志面板（参考龙族：一整块带框面板，条目在里面只是淡淡分行） ----------
 * ⚠ **不要**给它 overflow-y:auto / 固定高度：那样会把日志锁成"内部滚动的小框"。
 *   龙族能滚动是因为父级是 min-height（高度自适应），所以这里不锁高度、跟随整页滚动。 */
.log-box {
  width: 100%;
  margin-top: 10px;
  background: rgba(6,9,11,.7);
  border: 1px solid rgba(111,214,180,.22);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.log-item {
  font-size: 13px; line-height: 1.55;
  padding: 6px 9px; border-radius: 8px;
  background: rgba(20,29,46,.4); color: #cbd5ea;
}
/* 日常历练行：几乎不显底色，读起来就是面板里的一行字 */
/* ⚠ 文字色只**压深明度**（色相不变）—— 页面底色换成浅金后，原来的浅色字看不清 */
.log-item.year { background: rgba(20,29,46,.18); color: #93a0ba; font-size: 12.5px; }
.log-item.brk { background: rgba(116,194,168,.14); border: 1px solid rgba(116,194,168,.4); color: #a9e3cd; }
.log-item.ev1 { background: rgba(110,150,220,.12); border: 1px solid rgba(110,150,220,.3); color: #c9d7f0; }
.log-item.ev2 { background: rgba(180,120,220,.12); border: 1px solid rgba(180,120,220,.35); color: #e0c9f5; }
.log-item.ev3 { background: rgba(111,214,180,.14); border: 1px solid rgba(111,214,180,.4); color: #ffd0a0; }
.log-item.ev4 { background: rgba(230,80,80,.16); border: 1px solid rgba(230,80,80,.45); color: #ffb3b3; }
.log-item.red { background: rgba(255,60,60,.16); border: 1px solid rgba(255,60,60,.5); color: #ff9a9a; font-weight: 700; }
.log-item.dead { background: rgba(180,60,60,.15); border: 1px solid rgba(180,60,60,.4); color: #ffb3b3; }
.log-item.god { background: rgba(140,180,162,.18); border: 1px solid rgba(140,180,162,.5); color: #eafcff; font-weight: 700; }
.log-item.rainbow {
  background: linear-gradient(90deg, rgba(255,90,90,.26), rgba(255,200,80,.26), rgba(110,220,120,.26), rgba(111,214,180,.26), rgba(180,120,255,.26));
  background-size: 400% 100%;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff; font-weight: 700;
  animation: rainbowShift 1.2s linear infinite;
}
.log-item.plot {
  background: linear-gradient(90deg, rgba(255,90,90,.26), rgba(255,200,80,.26), rgba(110,220,120,.26), rgba(111,214,180,.26), rgba(180,120,255,.26));
  background-size: 400% 100%;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff; font-weight: 700;
  animation: rainbowShift 1.6s linear infinite;
}
.log-item.plotmiss { background: rgba(120,128,140,.12); border: 1px solid rgba(120,128,140,.3); color: #98a1ad; }
@keyframes rainbowShift { 0% { background-position: 0% 0; } 100% { background-position: 400% 0; } }

/* ---------- 结算（参考龙族：整块居中、数据行带分隔虚线、按钮两列） ---------- */
#view-settle {
  justify-content: center;
  align-items: center;
  padding-top: 8px; padding-bottom: 8px;
  min-height: 100vh;
}
.settle-box {
  width: 100%; max-width: 440px;
  background: linear-gradient(180deg, rgba(22,33,63,.92), rgba(13,21,38,.92));
  border: 1px solid rgba(111,214,180,.35);
  border-radius: 16px;
  padding: 18px 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.settle-title {
  text-align: center; font-size: 22px; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.settle-title.god {
  color: transparent;
  background: linear-gradient(90deg,#c8322b,#e07a1f,#a8f0d4,#4f8fd6,#b07cff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(168,48,43,.5));
}
.settle-title.died { color: var(--danger-text); }
/* 数据行：左右分布 + 虚线下边框，最后一行不要线 */
.settle-rows { display: flex; flex-direction: column; }
.s-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(111,214,180,.30);
  font-size: 14px;
}
.s-row:last-child { border-bottom: none; }
.s-row span { color: var(--text-mute); }
.s-row b { color: var(--text); }
.settle-team { margin-top: 2px; }
.settle-note { font-size: 12.5px; color: var(--gold); text-align: center; }
/* 全球冠军赛被削弱的七彩文案（沿用日志的 rainbow 观感：流光底 + 白字） */
.settle-note.rainbow {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,90,90,.26), rgba(255,200,80,.26), rgba(110,220,120,.26), rgba(111,214,180,.26), rgba(180,120,255,.26));
  background-size: 400% 100%;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff; font-weight: 700; line-height: 1.6;
  animation: rainbowShift 1.2s linear infinite;
}
.settle-rank {
  background: rgba(140,180,162,.08);
  border: 1px solid rgba(140,180,162,.25);
  border-radius: 10px;
  padding: 8px;
  color: var(--gold);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
/* 结算按钮：两列网格（2×2） */
.settle-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 2px; }
.settle-btns .btn-big { padding: 11px 6px; font-size: 14.5px; border-radius: 11px; }
.settle-box .qr-area { margin-top: 4px; }

/* ---------- 子页通用 ---------- */
.page-view { align-items: stretch; }
.page-head {
  width: 100%; position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 36px; margin-bottom: 8px;
}
.page-title {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0; font-size: 18px; font-weight: 800; color: var(--gold-bright);
  white-space: nowrap;
}
.btn-close {
  margin-left: auto; position: relative; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text-dim); font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.btn-close:active { transform: scale(.92); color: var(--gold-bright); border-color: var(--gold); }

/* ---------- Tabs / 筛选 ---------- */
.tabs { width: 100%; display: flex; gap: 6px; margin-bottom: 8px; }
.tabs-wrap { flex-wrap: wrap; }
.tabs-small .tab { font-size: 12px; padding: 6px 4px; }
.tab {
  flex: 1; padding: 8px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(111,214,180,.25);
  background: rgba(255,255,255,.04);
  color: var(--text-dim); font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.tab.active { background: rgba(111,214,180,.18); color: var(--gold-bright); border-color: var(--gold); }

/* ---------- 排行榜 ---------- */
.lb-note { width: 100%; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.rank-fate-note { width: 100%; font-size: 12px; color: var(--gold); margin-bottom: 8px; }
.lb-body { width: 100%; max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.lb-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(8,14,11,.7); border: 1px solid rgba(111,214,180,.18);
  border-radius: 10px; font-size: 13px;
}
.lb-row.me { border-color: var(--gold); background: rgba(111,214,180,.1); }
.lb-rank { flex: 0 0 30px; text-align: center; font-weight: 800; color: var(--text-mute); }
.lb-rank.top { color: var(--gold-bright); }
.lb-rank.r1 { color: #a8f0d4; } .lb-rank.r2 { color: #dfe6f0; } .lb-rank.r3 { color: #e0b64a; }
.lb-user { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.lb-avatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.lb-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-time { font-size: 11px; color: var(--text-mute); white-space: nowrap; }
.lb-score { margin-left: auto; color: var(--gold-bright); font-weight: 700; white-space: nowrap; }
.lb-tip { text-align: center; color: var(--text-mute); font-size: 13px; padding: 22px 0; }

/* ---------- 成就（参考龙族模拟器的卡片式排版） ---------- */
.ach-total {
  width: 100%; text-align: center;
  color: var(--gold); font-size: 16px; font-weight: 700;
  margin-bottom: 12px; padding: 10px 9px;
  background: rgba(111,214,180,.08);
  border: 1px solid rgba(111,214,180,.25);
  border-radius: 12px;
}
.ach-list {
  width: 100%; display: flex; flex-direction: column; gap: 10px;
  padding: 2px 0 8px;
}
.ach-list::-webkit-scrollbar { width: 6px; }
.ach-list::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }
.ach-list::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 3px; }
.ach-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid rgba(111,214,180,.22); border-radius: 14px;
  padding: 12px 15px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.ach-item.done {
  border-color: var(--gold);
  background: linear-gradient(180deg, #1c2a24, #16211c);
  box-shadow: 0 2px 14px rgba(140,180,162,.18);
}
.ach-name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.ach-item.done .ach-name { color: var(--teal); }
.ach-item.todo .ach-name { color: #8b9096; }
.ach-bonus { font-size: 13px; white-space: nowrap; }
.ach-item.done .ach-bonus { color: #6cdb8a; }
.ach-item.todo .ach-bonus { color: #5c6882; }

/* ---------- 高光 ---------- */
.hl-note { width: 100%; font-size: 12px; color: var(--text-dim); margin-bottom: 10px; text-align: center; }
.hl-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.hl-list-page { max-height: 70vh; overflow-y: auto; }
.hl-item {
  background: rgba(8,14,11,.75); border: 1px solid rgba(111,214,180,.28);
  border-radius: 12px; padding: 10px 12px; cursor: pointer;
}
.hl-item:active { filter: brightness(1.15); }
.hl-top { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.hl-top b { color: var(--gold-bright); }
.hl-end { margin-left: auto; font-size: 11.5px; color: var(--text-mute); }
.hl-innate { font-size: 11px; color: var(--teal); }
/* 夺冠全球冠军赛：与画布里的强调色一致（HL_END_COLOR['夺冠全球冠军赛'] = #ff4655） */
.hl-innate.hl-slain { color: var(--gold-bright); font-weight: 700; }
.hl-mid { margin-top: 5px; font-size: 12px; color: var(--text-dim); }
.hl-mid b { color: var(--text); }
.hl-weak { font-size: 11.5px; color: var(--text-dim); }
/* 圣杯争夺战高光：双方出战各一行（我方米白 / 对手战术红） */
.hl-vs { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; }
.hl-vs.hl-side-me { color: var(--text); }
.hl-vs.hl-side-foe { color: #ff8b95; }
.hl-weak b { color: var(--teal); }
.hl-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(10,16,36,.95); border: 1px solid var(--gold);
  color: var(--gold-bright); border-radius: 999px; padding: 9px 18px;
  font-size: 13px; z-index: 80;
}
.hl-img-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
.hl-img { max-width: 88vw; max-height: 70vh; border-radius: 10px; }
.hl-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- 设置 ---------- */
.settings-body { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.set-card {
  background: rgba(8,14,11,.75); border: 1px solid rgba(111,214,180,.24);
  border-radius: 12px; padding: 12px;
}
.set-row { display: flex; align-items: center; }
.set-label { font-size: 14px; color: var(--text); }
.set-switch { margin-left: auto; position: relative; width: 46px; height: 26px; }
.set-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.set-switch .track {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); transition: background .2s;
}
.set-switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #cfd8ea; transition: transform .2s;
}
.set-switch input:checked + .track { background: linear-gradient(90deg, var(--teal), var(--gold)); }
.set-switch input:checked + .track::after { transform: translateX(20px); background: #fff; }
.set-tip { margin-top: 7px; font-size: 11.5px; color: var(--text-mute); line-height: 1.5; }
.set-label2 { font-size: 13.5px; color: var(--teal); font-weight: 700; margin-bottom: 8px; }
.set-select {
  width: 100%; padding: 9px 10px; border-radius: 10px; font-size: 13px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line-soft);
}
.speed-label { display: flex; align-items: center; font-size: 13px; color: var(--text-dim); }
.speed-label b { margin-left: auto; color: var(--gold-bright); }
.speed-range { width: 100%; margin-top: 8px; accent-color: var(--gold); }

/* ---------- 说明 ---------- */
.about-body { width: 100%; }
.about-text {
  font-size: 13.5px; line-height: 1.95; color: var(--text-dim);
  background: rgba(8,14,11,.6); border: 1px solid rgba(111,214,180,.22);
  border-radius: 12px; padding: 14px;
}
.about-text b { color: var(--gold-bright); }

/* ---------- 遮罩 / 弹窗 ---------- */
/* ---------- 遮罩 / 弹层（参考龙族模拟器：flex + gap 排版，标题居中金色） ---------- */
.mask {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,24,.72); padding: 20px;
}
.mask-box {
  width: 300px; max-width: 86vw;
  background: linear-gradient(180deg, #17241f, #0e1712);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  position: relative;
}
.mask-title {
  text-align: center; font-size: 20px; font-weight: 700;
  color: var(--gold); letter-spacing: 2px;
}
.mask-info { text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.fb-total { text-align: center; color: var(--gold); }
.follow-rows { display: flex; flex-direction: column; gap: 8px; }
.follow-action { display: flex; align-items: center; font-size: 13px; }
.fb-state { margin-left: auto; font-size: 11.5px; }
.fb-state.done { color: #7fdc9a; }
.fb-state.todo { color: var(--text-mute); }

.review-box { width: 320px; max-width: 88vw; max-height: 80vh; overflow: hidden; }
.review-log {
  flex: 1; min-height: 180px; max-height: 55vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(6,9,11,.7); border: 1px solid rgba(111,214,180,.18);
  border-radius: 10px; padding: 10px;
}
.review-log .log-item { font-size: 12.5px; }

/* ---------- 决战弹窗 ---------- */
.finale-box { width: 340px; max-width: 90vw; }
.finale-title { font-size: 17px; letter-spacing: 1px; }
.decision-x {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.06);
  color: var(--text-dim); font-size: 13px; cursor: pointer; line-height: 1;
}
.finale-opts { display: flex; flex-direction: column; gap: 8px; }
.finale-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; font-size: 13.5px; text-align: left;
}
.finale-opt .fo-key { color: var(--gold-bright); font-weight: 800; }
.finale-opt .fo-label { font-weight: 700; }
.finale-opt .fo-effect { margin-left: auto; font-size: 11px; color: var(--text-mute); }
.decision-tip { font-size: 11px; color: var(--text-mute); text-align: center; }
.choice-float {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 60;
  max-width: 90vw; padding: 11px 18px; border-radius: 999px;
  background: linear-gradient(180deg, #a8f0d4, #6fd6b4);
  color: #062018; font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 22px rgba(0,0,0,.5); cursor: pointer; white-space: nowrap;
  animation: floatPulse 1.4s ease-in-out infinite;
}
@keyframes floatPulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.04); } }
.revive-box { text-align: center; }
.ach-toast {
  position: fixed; left: 50%; top: 24px; transform: translateX(-50%);
  z-index: 90; max-width: 90vw;
  background: rgba(10,16,36,.96); border: 1px solid var(--gold);
  color: var(--gold-bright); border-radius: 999px; padding: 9px 18px;
  font-size: 13px; white-space: nowrap;
}

/* ---------- 蛊虫 / 牌库 ---------- */
.team-tabs { width: 100%; display: flex; gap: 8px; margin-bottom: 10px; }
.deck-title {
  width: 100%; display: flex; align-items: center;
  font-size: 13px; color: var(--teal); font-weight: 700; margin-bottom: 8px;
}
.deck-sub { margin-left: auto; font-size: 11.5px; color: var(--text-mute); font-weight: 400; }
.deck-current { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.deck-slot {
  position: relative; border-radius: 12px; padding: 10px 6px; min-height: 84px;
  border: 2px solid rgba(111,214,180,.3);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; cursor: pointer;
}
.deck-slot.empty { border-style: dashed; border-color: rgba(111,214,180,.2); background: rgba(255,255,255,.03); }
.deck-slot .plus { font-size: 20px; color: var(--text-mute); }
.deck-slot .cs-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.deck-slot .cs-sub { font-size: 10.5px; color: var(--text-mute); white-space: nowrap; }
.slot-x {
  position: absolute; top: -7px; right: -7px; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(217,72,74,.95); color: #fff; font-size: 12px; font-weight: 800;
  line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.slot-x:active { transform: scale(.9); }
.deck-info { width: 100%; margin-top: 8px; font-size: 11.5px; color: var(--text-mute); }
.deck-filter { width: 100%; display: flex; gap: 6px; margin: 12px 0 8px; flex-wrap: wrap; }
.deck-filter .tab { flex: 0 0 auto; padding: 7px 12px; font-size: 12px; }
.deck-pool-title {
  width: 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
  font-size: 13px; color: var(--teal); font-weight: 700; margin-bottom: 8px;
}
/* 页面标题里的「[圣晶石:N]」（版式照抄联盟PK模拟器的 .title-gem） */
.title-gem { color: var(--teal); font-size: .82em; margin-left: 2px; }
.deck-pool {
  width: 100%; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 7px; padding-bottom: 16px;
}
.pool-card {
  position: relative; border-radius: 10px; padding: 10px 4px 8px; min-height: 78px; min-width: 0;
  border: 2px solid rgba(168,48,43,.28);
  background: linear-gradient(180deg, rgba(18,23,20,.92), rgba(6,10,8,.92));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; cursor: pointer; transition: transform .1s;
}
.pool-card:active { transform: scale(.95); }
.pool-card.locked { opacity: .34; cursor: default; }
/* 选中态：金色外描边 + 金光晕（**不再提亮底色** —— 深色主题下浅金底会刺眼） */
.pool-card.picked {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(111,214,180,.35);
}
/* ⚠ 这里**绝对不能写 color**：`.pool-card .pc-name`（0,2,0）的特异性高于名字档位色 `.ntN`（0,1,0），
 *   一旦写 color 就会把「从者名按档位染色」整个盖掉 → 250 张牌库卡的名字全变成米白。
 *   （2026-10-13 报障：从者页牌库里的从者名颜色全没了。实测 color=var(--text)，而首页/槽位/招募卡都是档位色） */
.pool-card .pc-name { font-size: 12px; font-weight: 700; white-space: nowrap; }
.pool-card .pc-sub { font-size: 10px; color: var(--text-mute); white-space: nowrap; }
.pool-card .pc-star { font-size: 10px; color: var(--gold); letter-spacing: -.5px; white-space: nowrap; }
.pool-card .pc-leaf {
  position: absolute; left: 4px; top: 3px;
  font-size: 9px; font-weight: 800; color: var(--text-dim);
  background: rgba(0,0,0,.35); border-radius: 4px; padding: 0 4px;
}

/* ---------- 招募 ---------- */
.gacha-top { width: 100%; display: flex; align-items: center; margin-bottom: 10px; }
.gacha-gem { font-size: 13px; color: var(--text-dim); }
.gacha-gem b { color: var(--teal); font-size: 16px; }
.gacha-top .btn-pill { margin-left: auto; }
.gacha-pity {
  width: 100%; background: rgba(8,14,11,.75);
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px;
}
.pity-head { display: flex; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.pity-head b { margin-left: auto; color: var(--gold-bright); }
.pity-tip { margin-top: 6px; font-size: 11px; color: var(--text-mute); }
.gacha-result {
  width: 100%; min-height: 150px; margin-top: 14px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px;
  align-content: start;
}
.gacha-result.single { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gacha-empty {
  grid-column: 1 / -1; text-align: center; color: var(--text-mute);
  font-size: 13px; padding: 46px 0;
}
.gacha-card {
  position: relative; border-radius: 10px; padding: 10px 4px 8px; min-height: 76px;
  border: 2px solid rgba(168,48,43,.3);
  background: linear-gradient(180deg, rgba(18,23,20,.95), rgba(6,10,8,.95));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center;
  opacity: 0;
  animation: gachaIn .5s ease forwards;
}
.gacha-card .gc-name { font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.gacha-card .gc-sub { font-size: 10px; color: var(--text-mute); white-space: nowrap; }
.gacha-card .gc-new {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; color: #062018;
  background: linear-gradient(180deg, #a8f0d4, #6fd6b4);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
/* 高阶（A 档及以上）：金边 + 光晕 */
.gacha-card.t-hi { border-color: var(--gold); box-shadow: 0 0 12px rgba(111,214,180,.35); }
.gacha-card.t-hi .gc-name { color: var(--gold-bright); }
/* 顶阶（EX）：七彩描边 */
.gacha-card.t-top {
  border: 2px solid transparent;
  background: linear-gradient(180deg, rgba(18,23,20,.96), rgba(6,10,8,.96)) padding-box,
              linear-gradient(135deg,#ff5f6d,#ffc93b,#9fb4c7,#9c27b0) border-box;
  animation: gachaIn .5s ease forwards, topGlow 1.1s ease-in-out infinite alternate .55s;
}
@keyframes gachaIn {
  0%   { opacity: 0; transform: translateY(26px) rotateY(88deg) scale(.82); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}
@keyframes topGlow {
  from { box-shadow: 0 0 12px rgba(255,201,59,.4); }
  to   { box-shadow: 0 0 26px rgba(255,201,59,.85); }
}
/* 三个按钮（单次 / 十连 / 百连）并排：flex:1 1 0 + min-width:0 才不会被内容顶宽 */
.gacha-btns { width: 100%; display: flex; gap: 8px; margin-top: 16px; }
.gacha-btns .gacha-btn {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  align-items: center; padding: 10px 3px; font-size: 13.5px;
}
.gacha-btn small { font-size: 10px; color: var(--text-mute); font-weight: 400; white-space: nowrap; }
.btn-primary.gacha-btn small { color: rgba(42,29,0,.7); }

/* ---------- 招募历史 ---------- */
.hist-list { width: 100%; max-height: 64vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.hist-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(8,14,11,.7); border: 1px solid rgba(111,214,180,.16);
  border-radius: 9px; font-size: 12.5px;
}
.hist-id { color: var(--text-mute); font-size: 11px; font-family: var(--mono); }
.hist-name { color: var(--text); font-weight: 700; }
.hist-tier { color: var(--gold); }
.hist-new { margin-left: auto; font-size: 10.5px; color: #7fdc9a; }
.hist-old { margin-left: auto; font-size: 10.5px; color: var(--text-mute); }
.pager { width: 100%; display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.pager .pg {
  min-width: 30px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.04); color: var(--text-dim);
}
.pager .pg.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(111,214,180,.16); }
.pager .pg-input {
  width: 54px; padding: 6px; border-radius: 8px; text-align: center; font-size: 12.5px;
  border: 1px solid var(--line-soft); background: var(--panel-2); color: var(--text);
}

/* ---------- 桌面端 ---------- */
@media (min-width: 700px) {
  #app { max-width: 520px; }
  body::before { width: 520px; }
}

/* ---------- 滚动条美化（全局） ---------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(111,214,180,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(111,214,180,.6); }
html { scrollbar-width: thin; scrollbar-color: rgba(168,48,43,.4) transparent; }

/* ---------- 列表型子页：高度自适应，跟随整页滚动（不做内部滚动框） ---------- */
#view-ach, #view-rank, #view-hl, #view-history {
  min-height: 100vh;
}
#view-ach .ach-list,
#view-rank .lb-body,
#view-hl .hl-list-page,
#view-history .hist-list {
  max-height: none; overflow: visible;
  padding-bottom: 20px;
}
/* 蛊虫 / 设置 / 说明：内容较长，保持整页滚动 */
#view-team, #view-settings, #view-about { overflow-y: auto; }


/* ============================================================
 * 招募页：**高度固定为一屏**，结果框撑满剩余高度、**内部滚动**，
 *          单抽/十连按钮固定在最底部（不随内容移动）
 *   ⚠ 卡片保持原有大小（2 列），出得多就在结果框里滚动 —— 不压缩卡片、页面也不变高
 * ============================================================ */

/* ⚠ 页面在顶栏之下，高度必须扣掉顶栏 52px —— 否则整页 100vh + 52px 会**默认出现页面滚动条** */
#view-gacha { height: calc(100vh - 52px); max-height: calc(100vh - 52px); min-height: 0; overflow: hidden; padding-top: 8px; }
@supports (height: 100dvh) {
  #view-gacha { height: calc(100dvh - 52px); max-height: calc(100dvh - 52px); min-height: 0; }
}
#view-gacha > * { flex: none; min-height: 0; }
#view-gacha .gacha-result {
  flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
  grid-auto-rows: max-content;      /* 行高按卡片内容撑开，绝不压缩卡片 */
  align-content: start;
  margin-top: 12px; padding: 10px 10px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(8,14,11,.45);
}
#view-gacha .gacha-btns { margin-top: 12px; }

/* ============================================================
 * 档位胶囊（配色参考综武模拟器：浅灰 → 深灰 → 绿 → 蓝 → 紫 → 金 → 红 → 七彩）
 * ============================================================ */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 17px; border-radius: 9px; padding: 0 6px;
  font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap;
  flex: 0 0 auto;
  vertical-align: middle;      /* ⚠ inline-flex 默认按基线对齐，会被顶下去 */
}
.chip-t1  { background: #6b7b86; color: #eef4f8; }
.chip-t2  { background: #4f7186; color: #eaf6ff; }
.chip-t3  { background: #3f8f8a; color: #eafffb; }
.chip-t4  { background: #4f9e6e; color: #eafff2; }
.chip-t5  { background: #4f8fd6; color: #eef7ff; }
.chip-t6  { background: #7b5aa6; color: #f6efff; }
.chip-t7  { background: #6fd6b4; color: #2a1c00; }
.chip-t8  { background: #e07a1f; color: #fff4e6; }
.chip-t9  { background: #c8322b; color: #ffe9e7; }
.chip-t10 {
  background: linear-gradient(90deg,#ff4d4f,#ff9800,#ffeb3b,#4caf50,#00bcd4,#3f51b5,#9c27b0);
  background-size: 300% 100%; color: #fff;
  box-shadow: 0 0 6px rgba(160,80,200,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  animation: rainbowShift 2.6s linear infinite;
}
/* 从者名按档位染色（与胶囊同一套稀有度语言） */
.nt1  { color: #aebcc6; } .nt2  { color: #8fb0c6; } .nt3  { color: #6fd0c8; }
.nt4  { color: #6fc98a; } .nt5  { color: #7fb8ef; } .nt6  { color: #b48ce0; }
.nt7  { color: #a8f0d4; } .nt8  { color: #ff9a4a; } .nt9  { color: #ff7a72; }
.nt10 { color: #a8f0d4; }

/* ============================================================
 * 从者卡统一版式（1 行 3 张）：
 *   ① [EX] 导电 卡卡罗
 *   ② ★1 星 · 进度 0/1
 *   ③ 灵基强度 50（+5）
 *   ④ 宝具威力 30（+3）
 * ============================================================ */
.pc-head { display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden; line-height: 1; min-width: 0; }
/* 卡面第二行：人物卡（从者名）单独占一行，居中；
 * ⚠ 必须是 flex 容器：.pc-name 靠 flex 子项身份才有确定的 clientWidth，
 *   否则 span 退化成 inline，overflow/text-overflow 失效、fitCardNames 也量不准 */
.pc-name-row { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; line-height: 1; }
.pc-name {
  font-size: 12.5px; font-weight: 700;
  flex: 0 1 auto; min-width: 0;        /* 占剩余空间；放不下由 fitCardText 缩字号 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-line2, .pc-line3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-line2 { font-size: 10.5px; color: var(--gold); white-space: nowrap; }
.pc-line3 { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.pc-line3 b { color: var(--text); font-weight: 700; }

/* 牌库网格：1 行 3 张 */
.deck-pool { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.pool-card {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px; padding: 9px 8px; min-height: 0; text-align: left;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18,23,20,.92), rgba(6,10,8,.92));
  border: 1px solid rgba(111,214,180,.28);
}
.pool-card.locked { opacity: .38; }
/* 选中态：金色外描边 + 金光晕（同牌库页，保持一致） */
.pool-card.picked {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(111,214,180,.35);
}
/* 蛊虫槽位（同一套版式） */
.deck-slot {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 4px; padding: 9px 8px; min-height: 0; text-align: left;
  border-radius: 12px; cursor: pointer;
}
.deck-slot.empty { align-items: center; justify-content: center; min-height: 82px; }
/* 首页出战卡 */
.home-team .mini-card {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px; padding: 9px 8px; text-align: left;
}
.home-team .mini-card.empty { align-items: center; justify-content: center; min-height: 76px; }

/* 蛊虫页二阶筛选（参考 CSGO 模拟器）：两行**都常驻、同时生效（AND 联动）**
 *   ① 元素行（在上）：全部 + 14 元素 = 15 个 → 一行放不下，排 **8 列 → 2 行**（8+7）
 *   ② 品级行（在下）：全部 + 10 档位 = 11 个 → **1 行等分**    */
.deck-filter { display: flex; flex-direction: column; gap: 6px; }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-row .tab { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
#lib-cls { flex-wrap: wrap; }
#lib-cls .tab { flex: 0 0 calc((100% - 24px) / 5); font-size: 12px; padding: 7px 0; }   /* 5 列 → 全部 + 4 类正好一行 */
#lib-tier .tab { flex: 1 1 0; min-width: 0; font-size: 12px; padding: 7px 0; }         /* 11 个等分一行 */

/* 招募结果卡沿用同一套版式 */
.gacha-card {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 4px; padding: 9px 8px; min-height: 76px; text-align: left;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(18,23,20,.95), rgba(6,10,8,.95));
  border: 1px solid rgba(111,214,180,.3);
}
.gacha-card.t-hi { border-color: var(--gold); box-shadow: 0 0 12px rgba(111,214,180,.35); }
.gacha-card.t-top {
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(18,23,20,.96), rgba(6,10,8,.96)) padding-box,
              linear-gradient(135deg,#ff5f6d,#ffc93b,#9fb4c7,#9c27b0) border-box;
  animation: gachaIn .5s ease forwards, topGlow 1.1s ease-in-out infinite alternate .55s;
}
.gacha-card .gc-new {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; color: #062018;
  background: linear-gradient(180deg, #a8f0d4, #6fd6b4);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; z-index: 2;
}
/* ⚠ 卡片是 flex 纵向容器：子项必须 flex:none，否则结果框装不下时
 *   四行文字会被 flex-shrink 压扁（挤成一团），而不是撑出滚动条 */
.gacha-card > * { flex: none; }


/* ============================================================
 * 卡片内容居中（所有从者卡统一：品级 / 元素 / 名字 / 星级 / 元素都居中）
 * ============================================================ */
.pool-card, .gacha-card, .deck-slot, .home-team .mini-card { align-items: center; text-align: center; }
.pc-head { justify-content: center; }
.pc-line2, .pc-line3 { text-align: center; }
/* 未获得的卡：仍然完整显示元素，只是整体压暗 */
.pool-card.locked { opacity: .5; }

/* 蛊虫页两行筛选：每个 tab 等分整行，不留空 */
.filter-row .tab { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 12px; }


/* ---------- 模拟暂停弹层 ---------- */
#pause-mask .mask-box .btn { width: 100%; }
#pause-mask .mask-title { font-size: 20px; }
#pause-mask .mask-info { line-height: 1.8; }


/* ============================================================
 * 游戏页：高度自适应（min-height），内容长了就整页滚动 —— 不做内部滚动框
 * ============================================================ */
#view-game {
  min-height: 100vh;
  padding-top: 8px; padding-bottom: 14px;
}
#view-game > * { flex: none; }


/* ============================================================
 * 每日签到（日历）
 * ============================================================ */
#view-sign .sign-head {
  width: 100%; display: flex; align-items: baseline;
  margin-bottom: 10px;
}
.sign-ym { font-size: 15px; font-weight: 700; color: var(--gold-bright); }
.sign-stat { margin-left: auto; font-size: 12.5px; color: var(--teal); }

.sign-week {
  width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px; margin-bottom: 5px;
}
.sign-week span {
  text-align: center; font-size: 11.5px; color: var(--text-mute);
}

.sign-grid {
  width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.sg {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  border: 1px solid rgba(111,214,180,.16);
  background: rgba(8,14,11,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--text-mute);
}
.sg.blank { border: none; background: none; }
/* 未来的日子：压暗 */
.sg.future { opacity: .35; }
/* 过去漏签：红字 */
.sg.miss { color: #a33; border-color: rgba(217,72,74,.25); }
/* 已签到：金色底 */
.sg.done {
  background: linear-gradient(180deg, rgba(111,214,180,.28), rgba(111,214,180,.12));
  border-color: var(--gold); color: var(--gold-bright); font-weight: 700;
}
.sg.done::after {
  content: ''; position: absolute; right: 3px; bottom: 3px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright);
}
/* 今天：呼吸高亮 */
.sg.today {
  border-color: var(--teal);
  box-shadow: 0 0 10px rgba(140,180,162,.55);
  color: var(--text); font-weight: 700;
  animation: sgPulse 1.4s ease-in-out infinite;
}
.sg.today.done { border-color: var(--gold); box-shadow: 0 0 10px rgba(111,214,180,.6); animation: none; }
@keyframes sgPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(140,180,162,.35); }
  50%      { box-shadow: 0 0 16px rgba(140,180,162,.8); }
}

.sign-btns { width: 100%; margin-top: 14px; }
.sign-note {
  width: 100%; margin-top: 10px;
  font-size: 11.5px; line-height: 1.7; color: var(--text-mute);
  text-align: center;
}
.sign-note b { color: var(--gold); }


/* 等级框内：总圣晶石那一行（圣晶石下面，虚线分隔） */
.lv-gem-line.lv-gem-total { border-top: 1px dashed rgba(168,48,43,.14); margin-top: 5px; padding-top: 5px; }
.lv-gem-line.lv-gem-total .lv-gem-name { font-size: 11.5px; color: var(--text-mute); }
.lv-gem-line.lv-gem-total .lv-gem-val { font-size: 13px; color: var(--text-dim); }


/* 招募历史：顶部计数居中 */
.hist-note { text-align: center; }


/* 顶部「全站最多夺冠全球冠军赛…」那行：初始字号再小 1px（放不下继续由 fitOneLine 缩） */
.home-tianli { font-size: 11.5px; }


/* ---------- 招募 · 卡池选择行已移除（只有一个「招募」池，不分池） ---------- */


/* ============================================================
 * 无畏契约新增：元素标签 / 从者牌库分组 / 培养按钮 / 外援标识 / 玩家特训 / 分享
 * ============================================================ */

/* ---------- 4 种元素标签配色（CN 中国 / AS 亚洲 / US 北美 / EU 欧洲） ---------- */
.sp-cn { background: rgba(168,48,43,.18);   color: #ff8b95; border: 1px solid rgba(168,48,43,.48); }
.sp-as { background: rgba(255,180,80,.18);  color: #ffcf95; border: 1px solid rgba(255,180,80,.48); }
.sp-us { background: rgba(90,180,255,.18);  color: #8fc9ff; border: 1px solid rgba(90,180,255,.48); }
.sp-eu { background: rgba(123,211,200,.18); color: #9fe4da; border: 1px solid rgba(123,211,200,.48); }

/* ---------- 从者牌库：不分页，平铺（与母本同一套版式） ---------- */

/* ---------- 从者培养按钮（卡内） ---------- */
.pc-train {
  margin-top: 2px; width: 100%;
  border: 1px solid rgba(123,211,200,.55); background: rgba(123,211,200,.12);
  color: var(--teal); border-radius: 7px; padding: 3px 4px;
  font-size: 10px; font-weight: 700; line-height: 1.25;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap;
}
.pc-train:active { transform: scale(.96); }
.pc-train .pc-train-cost { font-weight: 400; color: var(--text-mute); }
.pc-train[disabled] { opacity: .4; cursor: default; }

/* ---------- 外援从者标识 ---------- */
.pc-sup {
  position: absolute; right: 4px; top: 3px;
  font-size: 9px; font-weight: 800; color: #241a00;
  background: linear-gradient(180deg, #ffe4a8, #6fd6b4);
  border-radius: 4px; padding: 0 4px; line-height: 1.5;
}
.pc-train.is-sup { border-color: rgba(154,167,189,.4); color: var(--text-mute); background: rgba(154,167,189,.10); }

/* ---------- 玩家特训（= 教练） ---------- */
.coach-row { width: 100%; margin-bottom: 8px; }
.btn-coach {
  width: 100%; padding: 8px 10px; font-size: 12.5px; border-radius: 10px;
  border-color: var(--gold); color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(168,48,43,.16), rgba(168,48,43,.05));
  white-space: normal;
}
.btn-coach .coach-cost { color: var(--gold); font-weight: 700; }

/* ---------- 分享从者 / 输入加密码 ---------- */
.share-text {
  width: 100%; min-height: 96px; resize: none;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--panel-2); color: var(--text);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  padding: 9px 10px; overflow-wrap: anywhere; word-break: break-all;
}
.share-btns { display: flex; gap: 8px; }
.share-btns .btn { flex: 1; }
.mask-warn { color: var(--danger-text); }
.home-team-3d { margin-left: auto; font-size: 11.5px; color: var(--gold); font-weight: 400; }
.home-team-title { display: flex; align-items: baseline; }
/* ============================================================
 * 无畏契约模拟器 新增：匹配界面 · 首页 2 列 3 行 · 蛊虫 3+2 · PK 对手面板
 * ============================================================ */

/* ---------- 匹配中（伪装随机匹配） ---------- */
.match-mask {
  position: fixed; inset: 0; z-index: 100;
  background: #0a1119;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.match-spinner {
  width: 52px; height: 52px; border-radius: 50%;
  border: 4px solid rgba(123,211,200,.22);
  border-top-color: var(--teal);
  border-right-color: var(--gold);
  animation: matchSpin .9s linear infinite;
}
@keyframes matchSpin { to { transform: rotate(360deg); } }
.match-text { font-size: 15px; font-weight: 700; color: var(--text); }
.match-sub { font-size: 12px; color: var(--text-mute); }

/* ---------- 首页主按钮：2 列 3 行（左列 歌会 / 右列 PK） ---------- */
.home-grid2 {
  width: 100%; margin-top: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.home-grid2 .btn {
  width: 100%; min-width: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 4px; white-space: nowrap;
}
.home-grid2 .btn > span:first-child { font-size: 13px; line-height: 1.25; white-space: nowrap; }
/* 副提示与主文字同一行：更小的红色字 */
.home-grid2 .btn .ach-btn-tip {
  font-size: 9.5px; font-weight: 400; color: var(--danger-text);
  white-space: nowrap; max-width: none; overflow: visible; text-overflow: clip;
}

/* ---------- 首页蛊虫：两行 3 + 2（第二行居中） ---------- */
.home-team5 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.home-team5 .mini-card { grid-column: span 2; flex: none; }
.home-team5 .mini-card:nth-child(4) { grid-column: 2 / span 2; }
.home-team5 .mini-card:nth-child(5) { grid-column: 4 / span 2; }

/* ---------- 蛊虫页槽位：两行 3 + 2（第二行居中） ---------- */
.deck-current5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.deck-current5 .deck-slot { grid-column: span 2; }
.deck-current5 .deck-slot:nth-child(4) { grid-column: 2 / span 2; }
.deck-current5 .deck-slot:nth-child(5) { grid-column: 4 / span 2; }

/* ---------- PK 对手面板 ---------- */
.foe-box {
  width: 100%; margin-top: 8px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: linear-gradient(180deg, rgba(111,214,180,.12), rgba(8,14,11,.75));
  padding: 8px 10px;
  flex: none;
}
.foe-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.foe-title { font-size: 12.5px; font-weight: 800; color: var(--gold-bright); }
.foe-syn { font-size: 11px; color: var(--text-mute); }
.foe-line { display: flex; gap: 12px; font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.foe-line b { color: var(--text); }
.foe-pows { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.foe-item { display: flex; align-items: baseline; gap: 4px; font-size: 11px; }
.foe-name { color: var(--text-dim); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foe-pow { color: var(--teal); font-weight: 700; }

/* ---------- PK 日志区与从者行（与游戏页同一套） ---------- */
#view-pk .log-box { flex: 1 1 auto; min-height: 120px; }

/* ---------- 从者牌库职阶筛选：全部 + 14 职阶 = 15 项，每行 8 个、排两行 ----------
 * ⚠ 14 职阶比原来的 7 元素多一倍，**不能再压成一行**（nowrap 会把每个 tab 挤到 6% 宽）。
 *   flex-wrap: wrap + 定宽 1/8 才是两行的正确写法。 */
#lib-cls { flex-wrap: wrap; gap: 4px; }
#lib-cls .tab { flex: 0 0 calc((100% - 16px) / 5); min-width: 0; padding: 5px 1px; font-size: 11px; white-space: nowrap; overflow: hidden; }

/* ---------- 卡面名字行前的等级 ---------- */
.pc-lv { font-size: 11px; font-weight: 800; color: var(--teal); margin-right: 4px; flex: 0 0 auto; }

/* ============================================================
 * PK 结算：双方关键数据对比 + 阵容对比（照联盟PK）
 * ============================================================ */
.settle-cmp { display: flex; flex-direction: column; width: 100%; }
.cmp-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 6px 4px; font-size: 13.5px;
  border-bottom: 1px dashed rgba(123,211,200,.22);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-row .cmp-k { flex: 0 0 auto; margin-right: auto; color: var(--text-mute); font-size: 12.5px; }
.cmp-row .cmp-me { flex: 0 0 auto; color: var(--gold-bright); font-weight: 700; white-space: nowrap; }
.cmp-row .cmp-vs { flex: 0 0 auto; color: var(--text-mute); font-size: 11px; font-style: normal; }
.cmp-row .cmp-foe { flex: 0 0 auto; color: var(--danger-text); font-weight: 700; white-space: nowrap; }

.settle-versus-title {
  margin-top: 6px; text-align: center;
  font-size: 12.5px; color: var(--teal); font-weight: 700;
}
.settle-versus {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  background: rgba(8,14,11,.55); border: 1px solid rgba(111,214,180,.28);
  border-radius: 12px; padding: 9px 10px;
}
.vs-side { display: flex; flex-direction: column; gap: 3px; }
.vs-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; }
.vs-row > * { flex: 0 0 auto; }
.vs-row .vs-name { color: var(--text); font-weight: 700; min-width: 0; }
.vs-row .vs-pow { margin-left: auto; font-weight: 700; }
.vs-side.me .vs-pow { color: var(--gold-bright); }
.vs-side.foe .vs-pow { color: var(--danger-text); }
.vs-label { font-size: 11px; color: var(--text-mute); }
.vs-divider { height: 1px; margin: 3px 0; background: linear-gradient(90deg, transparent, var(--danger), transparent); }

/* ============================================================
 * 特异点改造新增的组件样式（属于「游戏改造」，必须保留）
 * ⚠ 配色一律沿用原版：深蓝黑底 + 红 / 青，不用任何金色。
 * ============================================================ */

/* ---------- 6 种职业标签（配色沿用原版 .sp-cn/.sp-as/.sp-us/.sp-eu 那套） ---------- */






/* ---------- 天选从者弹层 ---------- */
.pick-box { width: 340px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; }
.pick-list {
  margin-top: 10px; min-height: 0; max-height: 56vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line-soft); padding-top: 10px;
}
.pick-item {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 10px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line-soft);
  cursor: pointer; font-size: 13px; color: var(--text);
}
.pick-item:active { transform: scale(.985); }
.pick-item.on { border-color: var(--gold); background: rgba(255,255,255,.06); }
.pick-item.on .pi-name { color: var(--gold-bright); }
.pick-item .pi-name { flex: 1 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; }
.pick-item .pi-mark { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--gold); }
.pick-item .pi-own {
  flex: 0 0 auto; min-width: 36px; text-align: right;
  font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums;
}
.pick-item .pi-own.has { color: var(--text-dim); font-weight: 700; }
.pick-item .pi-none { color: var(--text-dim); }

/* ---------- 决战特异点结算的「获得特异点 +1 把」行 ---------- */
.s-row-kill b { color: var(--gold-bright); font-weight: 800; }
.s-row-kill span { color: var(--teal); }

/* ---------- 「天选-从者名」按钮：太长时省略，不撑破那一行 ---------- */
#btn-gacha-pick { flex: 0 1 auto; min-width: 0; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
 * 特异点改造 · 新增组件样式（配色沿用原版：深蓝黑底 + 红/青描边）
 * ============================================================ */

/* ---------- 6 种职业标签（战士 / 法师 / 刺客 / 坦克 / 射手 / 辅助） ---------- */






/* ---------- 天选从者弹层 ---------- */
.pick-box { width: 340px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; }
.pick-list {
  margin-top: 10px; min-height: 0; max-height: 56vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line-soft); padding-top: 10px;
}
.pick-item {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 10px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line-soft);
  cursor: pointer; font-size: 13px; color: var(--text);
}
.pick-item:active { transform: scale(.985); }
.pick-item.on { border-color: var(--gold); background: rgba(168,48,43,.12); }
.pick-item .pi-name { flex: 1 1 auto; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; }
.pick-item .pi-mark { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--gold); }
.pick-item .pi-own {
  flex: 0 0 auto; min-width: 36px; text-align: right;
  font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums;
}
.pick-item .pi-own.has { color: var(--text-dim); font-weight: 700; }
.pick-item .pi-none { color: var(--text-dim); }

/* 「天选-从者名」可能很长：放不下时省略，不撑破那一行 */
#btn-gacha-pick { flex: 0 1 auto; min-width: 0; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 决战特异点结算：「获得特异点 +1 把」行 ---------- */
.s-row-kill b { color: var(--gold-bright); font-weight: 800; }
.s-row-kill span { color: var(--teal); }


/* ============================================================
 * 材料（2.0 新增组件）
 * ============================================================ */
/* 圣晶石那一行右侧的小号「签到」按钮 */
.btn-mini {
  margin-left: 10px; padding: 3px 10px; font-size: 11.5px; font-family: inherit;
  color: var(--gold); background: rgba(111,214,180,.12);
  border: 1px solid var(--gold-dim); border-radius: 10px; cursor: pointer;
}
.btn-mini:active { background: rgba(111,214,180,.26); }
/* 人物卡下面的【礼】加成行（首页「当前蛊虫」+ 英雄页「出战阵容」共用）
 * ⚠ 挂在**每一张人物卡**下面，不是页脚汇总；文字允许换行、不截断 */
.card-holy {
  margin-top: 5px; font-size: 10.5px; line-height: 1.45; font-weight: 700;
  color: var(--gold); text-align: center;
  white-space: normal; overflow-wrap: anywhere;
}
/* 出战槽位：卡面 + 【礼】行 在上、材料按钮在下 */
.deck-slot { flex-direction: column; }
.slot-relic {
  display: block; width: 100%; margin-top: 6px; padding: 5px 6px; font-size: 11px;
  font-family: inherit; color: var(--text-dim); background: rgba(8,14,11,.86);
  border: 1px dashed var(--line-soft); border-radius: 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-relic.has { color: var(--gold); border-style: solid; border-color: var(--gold-dim); background: rgba(111,214,180,.12); }
/* 图鉴页 */
.relic-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-dim); margin: 2px 0 8px; }
.relic-note { font-size: 11.5px; color: var(--text-mute); line-height: 1.6; margin-bottom: 10px; }
.relic-list { display: flex; flex-direction: column; gap: 6px; }
/* 一件材料**两行**：
 *   ① 品级胶囊 + 名称（+ 标记） ……………… 右对齐 ★N a/b
 *   ② 灵基强度+6、宝具威力+14
 * （原来星级与进度各占一行、共三行，太占地方；**只把星级合并进名称行**，加成行保持独立） */
.relic-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.relic-top { display: flex; align-items: center; gap: 6px; }
/* ⚠ 品级胶囊必须同时带 `.chip`（外形：高度/圆角/内边距/字号）+ `.chip-tN`（配色）。
 *   只写 .chip-tN 会得到一块没有圆角的色块 —— 就是「材料页的胶囊跟别处不一样」的原因。
 *   这里只补 flex 收缩控制（材料行是 flex 容器）。 */
.relic-chip { flex: 0 0 auto; }
.relic-name {
  flex: 0 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 星级 + 升级进度：靠右对齐，多行之间才对得齐 */
.relic-lv {
  flex: 0 0 auto; margin-left: auto;
  font-size: 11px; color: var(--text-mute); white-space: nowrap;
}
.relic-stats { font-size: 11.5px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relic-row.relic-used { border-color: var(--gold-dim); background: rgba(217,180,90,.10); }
.relic-row.relic-dim { opacity: .55; }
/* 图鉴里**未获得**的材料：整行压暗 + 虚线边（仍展示品级与初始加成，让玩家看得到目标） */
.relic-row.relic-locked { opacity: .45; border-style: dashed; }
.relic-tag-lock { background: rgba(255,255,255,.10); color: var(--text-mute); }
.relic-tag { margin-left: 6px; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: rgba(217,180,90,.18); color: var(--gold); }
.relic-tag-warn { background: rgba(110,198,255,.18); color: var(--teal); }
.relic-empty { text-align: center; color: var(--text-mute); font-size: 12.5px; padding: 24px 0; }
/* ⚠ 图鉴 / 装备弹层一律**单列**：宽屏也不分栏（一行一件，加成行才展得开） */

/* 结算页：获得材料 —— **独立一框**（七彩流光 · 允许换行）
 * 位置在「出战蛊虫卡」与「四个按钮」之间（不是数据行里的一条）
 * ⚠ 决战与圣杯争夺战共用，每次开新局/结算都要复位（见 game.js 的 finishGameResetRows） */
.settle-relic-box {
  width: 100%; margin: 12px 0 2px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(90deg, rgba(255,90,90,.26), rgba(255,200,80,.26), rgba(110,220,120,.26), rgba(111,214,180,.26), rgba(180,120,255,.26));
  background-size: 400% 100%;
  animation: rainbowShift 1.6s linear infinite;
  text-align: center;
}
.settle-relic-box .srb-title { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .6px; }
.settle-relic-box .srb-body {
  margin-top: 5px; font-size: 12.5px; font-weight: 700; color: #fff;
  line-height: 1.55; white-space: normal; overflow-wrap: anywhere;
}

/* 装备弹层 / 二次确认 / 令咒复活 */
.relic-pick-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.relic-pick-btns, .confirm-btns { display: flex; gap: 10px; margin-top: 4px; }
.relic-pick-btns .btn, .confirm-btns .btn { flex: 1 1 0; }
.relic-pick-box, .confirm-box, .revive-box { max-width: 400px; }
.revive-box .mask-info { line-height: 1.8; margin-bottom: 14px; }
.confirm-box .mask-info { white-space: pre-line; line-height: 1.7; margin-bottom: 14px; }

/* ============================================================
 * 劫掠
 * ============================================================ */
.dispatch-head {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 6px;
}
.dispatch-cap { font-size: 13px; font-weight: 700; color: var(--gold); }
.dispatch-rate { font-size: 12px; color: var(--teal); }
.dispatch-tip { width: 100%; font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 10px; }
.dispatch-list {
  width: 100%; display: flex; flex-direction: column; gap: 6px;
  max-height: 58vh; overflow-y: auto;
}
.dispatch-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid rgba(111,214,180,.22);
  background: rgba(21,26,30,.85); cursor: pointer;
}
.dispatch-row.picked { border-color: var(--gold); background: rgba(111,214,180,.12); }
.dispatch-row.locked { opacity: .45; cursor: not-allowed; }
.dispatch-row .dr-name {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dispatch-row .dr-rate { flex: 0 0 auto; font-size: 12px; color: var(--gold-bright); }
.dispatch-row .dr-meta { flex: 0 0 auto; font-size: 10.5px; color: var(--text-mute); }
.dispatch-sum {
  width: 100%; display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--text-dim); margin-top: 10px;
}
.dispatch-sum b { color: var(--gold-bright); }
.dispatch-btns { width: 100%; display: flex; gap: 10px; margin-top: 12px; }
.dispatch-btns .btn { flex: 1 1 0; }
.dispatch-empty { width: 100%; text-align: center; font-size: 12.5px; color: var(--text-mute); padding: 20px 0; }
.pool-card.dispatch-locked { opacity: .55; }
.pool-card.dispatch-locked .pc-name { text-decoration: line-through; }

/* ============================================================
 * 道途王扩展组件：征服列 / 果实羁绊
 * ============================================================ */
.conquer-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(111,214,180,.07), rgba(7,16,24,.35));
}
.conquer-label {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--gold-bright);
  padding-top: 3px;
  white-space: nowrap;
}
.conquer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.conquer-chip {
  font-size: 10px !important;
  padding: 2px 7px !important;
  height: auto !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conquer-empty { font-size: 10.5px; color: var(--text-mute); padding-top: 2px; }

/* 蛊类羁绊标注 */
.relic-bond {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--gold-bright);
  border: 1px solid rgba(111,214,180,.45);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
  vertical-align: middle;
}
.relic-bond.on {
  color: #9ff5d0;
  border-color: rgba(110,240,190,.65);
  background: rgba(50,180,140,.12);
}
.settle-crew-line { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.settle-crew-line b { color: var(--gold-bright); }

/* ============================================================
 * 顶栏 / 底栏（版式照抄《咒回宿傩模拟器》）
 * ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 14px;
  background: rgba(10,12,11,.90);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: baseline; gap: 2px; font-weight: 900; }
.brand .b1 { color: var(--gold); font-size: 19px; }
.brand .b2 { color: #e8e4d8; font-size: 19px; }
.brand .b3 { color: var(--text-mute); font-size: 9px; margin-left: 6px; letter-spacing: .5px; }
.top-btn {
  flex: 0 0 auto; height: 30px; padding: 0 10px; margin-left: auto;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text-dim); font-size: 12px;
}
.top-btn:active { transform: scale(.97); }
body.in-game .topbar { display: none; }
body.in-game .view { min-height: 100vh; }   /* 顶栏隐藏时页面重新占满整屏 */

.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 45;
  display: flex; padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
  background: rgba(10,12,11,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; color: var(--text-mute);
  font-size: 10.5px; padding: 4px 0; font-family: inherit;
}
.tabbar .tab .ti { font-size: 16px; opacity: .8; }
.tabbar .tab.on { color: var(--gold); }
body.hide-tabbar .tabbar { display: none; }
#view-home, #view-rank, #view-ach, #view-hl, #view-about {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* ============================================================
 * 合成页（成品 → 蛊方 → 炼制 → 目标列表）
 * ============================================================ */
.craft-result {
  width: 100%; border: 1px solid rgba(111,214,180,.28); border-radius: 14px;
  padding: 12px; min-height: 96px;
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(111,214,180,.10), transparent 65%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}
.craft-result.dim { border-color: rgba(168,48,43,.35); opacity: .9; }
.craft-result.ready { border-color: rgba(111,214,180,.55); box-shadow: 0 0 14px rgba(111,214,180,.10); }
.craft-result.t-hi { border-color: var(--gold); box-shadow: 0 0 16px rgba(111,214,180,.28); }
.craft-result.t-top {
  border: 1px solid transparent;
  background-image: linear-gradient(180deg, var(--panel-2), var(--panel)),
    linear-gradient(90deg, #ff6b4a, #d8b45a, #6fd6b4, #5f9fd8, #b07cff, #ff6b4a);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 0 18px rgba(216,180,90,.22);
  animation: topGlow 3.2s ease-in-out infinite;
}
.craft-empty { color: var(--text-mute); font-size: 11.5px; text-align: center; padding: 18px 0; line-height: 1.7; }
.craft-result.empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 110px;
}
.craft-result.empty > .craft-empty {
  padding: 0; font-size: 15px; font-weight: 800; letter-spacing: 3px;
  color: var(--text-dim);
}
.cr-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-tag {
  display: inline-flex; align-items: center; border-radius: 6px; padding: 0 5px; height: 17px;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.cr-rate { margin-left: auto; font-size: 10.5px; color: var(--teal); }
.cr-name { font-size: 15px; font-weight: 800; margin-top: 6px; line-height: 1.3; }
.cr-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--text-dim); }
.cr-stats b { color: var(--text); font-family: var(--mono); }

.craft-recipe {
  width: 100%; margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 10px; background: rgba(255,255,255,.02);
}
.rx-title { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; margin-bottom: 6px; }
.rx-sub { font-size: 10px; color: var(--text-mute); font-weight: 400; }
.rx-title .btn-mini { margin-left: auto; }
.rx-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 2px; border-top: 1px dashed rgba(111,214,180,.10);
  font-size: 11.5px;
}
.rx-row:first-of-type { border-top: 0; }
.rx-row.miss { opacity: .55; }
.rx-row.miss .rx-own { color: var(--danger-text); font-weight: 700; }
.rx-tier { flex: 0 0 auto; }
.rx-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.rx-own { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

.craft-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.craft-skip-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 7px 10px; border-radius: 9px;
  background: rgba(255,255,255,.02); border: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text-dim);
}
.craft-skip-row input { width: 15px; height: 15px; accent-color: var(--gold); }
.craft-count-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 12px; border-radius: 9px;
  border: 1px solid var(--line-soft); background: rgba(255,255,255,.02);
}
.craft-count-label { flex: 0 0 auto; font-size: 11.5px; color: var(--text-dim); }
.craft-count-row input[type=range] {
  flex: 1 1 auto; min-width: 0; height: 20px; margin: 0;
  -webkit-appearance: none; appearance: none; outline: none; accent-color: var(--gold);
  background-color: transparent;
  /* 轨道只画中间 4px：已滑过青→金，未滑过灰色；滑块垂直居中 */
  background-image: linear-gradient(90deg,
    var(--teal) 0%, var(--gold) var(--fill, 0%),
    rgba(255,255,255,.16) var(--fill, 0%), rgba(255,255,255,.16) 100%);
  background-size: 100% 4px;
  background-position: center;
  background-repeat: no-repeat;
}
.craft-count-row input[type=range]::-moz-range-track {
  height: 4px; border-radius: 999px; background: transparent;
}
.craft-count-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-bright); border: 2px solid var(--gold);
  box-shadow: 0 0 8px rgba(111,214,180,.5); cursor: pointer;
}
.craft-count-row input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-bright); border: 2px solid var(--gold); cursor: pointer;
}
.craft-count-row input[type=range]:disabled { opacity: .35; }
.craft-count-val {
  flex: 0 0 auto; min-width: 22px; text-align: right;
  font-family: var(--mono); font-size: 13px; color: var(--gold-bright);
}
.craft-btn-row { display: flex; gap: 8px; width: 100%; }
.craft-btn-row .btn { flex: 1 1 0; min-width: 0; }
.craft-btn-row #btn-craft-batch { flex: 1.15 1 0; }

/* 目标信息（蛊方区顶部） */
.rx-goal {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px dashed rgba(111,214,180,.16);
}
.rx-goal-name { font-size: 13px; font-weight: 800; }
.rx-goal-cls { font-size: 10.5px; color: var(--text-mute); }
.rx-goal-stat { font-size: 10.5px; color: var(--text-dim); }
.rx-goal-stat b { font-family: var(--mono); color: var(--text); }
.rx-goal-rate { margin-left: auto; font-size: 10.5px; color: var(--teal); }
.rx-cap { margin-left: 2px; }
.rx-cap.rx-short { color: var(--danger-text); font-weight: 800; }

/* ---------- 合成动画 / 结果 ---------- */
.craft-result { position: relative; overflow: hidden; }
.craft-result.rolling {
  border-color: rgba(216,180,90,.55);
  box-shadow: 0 0 20px rgba(216,180,90,.22);
}
.craft-result.rolling::before {
  content: ''; position: absolute; inset: -60%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(168,240,212,.22) 72%, transparent 82% 100%);
  animation: craftSwirl 1.6s linear infinite;
}
.craft-result.rolling::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 100%, rgba(216,180,90,.18), transparent 70%);
  animation: craftPulse 1.1s ease-in-out infinite;
}
.craft-result.rolling > * { position: relative; z-index: 1; }
@keyframes craftSwirl { to { transform: rotate(360deg); } }
@keyframes craftPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.craft-spin {
  width: 44px; height: 44px; margin: 4px auto 6px; border-radius: 50%;
  border: 3px solid rgba(111,214,180,.18); border-top-color: var(--gold-bright);
  animation: craftSpin .8s linear infinite;
}
.craft-roll-title { text-align: center; font-size: 13px; font-weight: 800; color: var(--gold-bright); }
.craft-roll-sub { text-align: center; font-size: 10.5px; color: var(--text-mute); margin-top: 4px; }
@keyframes craftSpin { to { transform: rotate(360deg); } }

.craft-result.success { animation: craftPop .45s ease-out; }
@keyframes craftPop {
  0% { transform: scale(.94); box-shadow: 0 0 0 rgba(111,214,180,0); }
  55% { transform: scale(1.02); box-shadow: 0 0 30px rgba(111,214,180,.55); }
  100% { transform: scale(1); box-shadow: 0 0 14px rgba(111,214,180,.18); }
}
.cr-burst {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(168,240,212,.85), rgba(111,214,180,.25) 45%, transparent 70%);
  animation: craftBurst .7s ease-out forwards;
}
@keyframes craftBurst {
  0% { transform: scale(1); opacity: .95; }
  100% { transform: scale(28); opacity: 0; }
}
.cr-ok { color: var(--gold-bright) !important; }
.cr-bad { color: var(--danger-text) !important; }
.cr-gain-line { margin-top: 6px; font-size: 10.5px; color: var(--text-mute); font-family: var(--mono); }
.cr-gain-line.up { color: var(--gold-bright); font-weight: 700; font-family: inherit; }

.craft-result.fail {
  border-color: rgba(168,48,43,.6);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(168,48,43,.16), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  animation: craftShake .45s ease-in-out;
}
@keyframes craftShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.cr-fail-mark {
  text-align: center; font-size: 30px; line-height: 1; color: var(--danger-text);
  text-shadow: 0 0 16px rgba(168,48,43,.55);
}
.cr-fail-title { text-align: center; font-size: 15px; font-weight: 800; color: var(--danger-text); margin-top: 4px; }
.cr-fail-sub { text-align: center; font-size: 10.5px; color: var(--text-mute); margin-top: 6px; }

.craft-result.batch.success { border-color: rgba(111,214,180,.55); }
.craft-result.batch.fail { border-color: rgba(168,48,43,.5); }
.cr-n { font-family: var(--mono); color: var(--gold-bright); }
.cr-batch-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cr-batch-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 7px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
  font-size: 11px;
}
.cr-batch-item b { font-weight: 700; }
.cr-batch-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 7px; padding-top: 6px; border-top: 1px dashed rgba(111,214,180,.12);
  font-size: 10px; color: var(--text-mute); font-family: var(--mono);
}
.cr-batch-line i { font-style: normal; opacity: .45; }
.cr-batch-status.up { color: var(--gold-bright); font-weight: 700; font-family: inherit; }

.craft-list-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  margin: 12px 0 6px; padding: 0 2px;
}
.craft-list-head .deck-sub { margin-left: auto; }
.craft-list { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.craft-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  font-size: 12px; cursor: pointer;
}
.craft-row.ready { border-color: rgba(111,214,180,.45); }
.craft-row.dim { opacity: .5; }
.craft-row.on { box-shadow: inset 0 0 0 1px var(--gold), 0 0 12px rgba(111,214,180,.14); }
.cgr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cgr-cls { flex: 0 0 auto; font-size: 10.5px; color: var(--text-mute); }
.cgr-state { flex: 0 0 auto; font-size: 10.5px; color: var(--text-mute); }
.craft-row.ready .cgr-state { color: var(--gold); font-weight: 700; }

/* 结算页「获得材料」逐条 */
.settle-mat-line {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 3px 6px 3px 0; font-size: 11.5px; color: var(--text-dim);
}
.settle-mat-line .chip { transform: scale(.92); }

/* 采蛊结果卡：材料没有星级，卡片压矮一点 */
.gacha-card.mat-card { min-height: 66px; justify-content: center; }

/* ---------- 首页第二行：四个分享入口挤成一行（无副标题） ---------- */
.home-grid4 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; margin-top: 8px;
}
.home-grid4 .btn {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 2px; font-size: 11.5px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; min-width: 0;
}

/* ============================================================
 * 分享按钮（副标题右侧圆钮，参考《斩妖除魔模拟器》）
 * ============================================================ */
.hero-sub-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 6px;
}
.hero-sub-row .home-sub { margin-top: 0; }
.btn-share {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text-mute);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-share:active { transform: scale(.94); color: var(--gold); border-color: var(--gold); }

/* 分享弹窗 */
.share-box { text-align: center; }
.share-tip { font-size: 12.5px; color: var(--text-dim); margin: 2px 0 10px; line-height: 1.6; }
.share-qr {
  width: 190px; height: 190px; margin: 0 auto 10px; display: block;
  border-radius: 10px; background: #fff; padding: 8px;
}
.share-link {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-mute);
  word-break: break-all; margin: 0 0 12px; line-height: 1.5;
}
.share-box .btn { width: 100%; margin-top: 6px; }