/* ============================================================
 * DOTA战队模拟器 · 样式（移动优先，兼容电脑 480px 容器）
 * 主题：不朽盾之夜 —— 夜魇深红黑底 + 古铜金描边 + 天辉绿点缀
 * 背景为纯色底（长列表滚动不出现上下分层）；网格与辉光是 fixed，不参与滚动
 * ============================================================ */
[hidden] { display: none !important; }

:root {
  --bg:          #0b0709;
  --bg-deep:     #060405;
  --panel:       #1a1116;
  --panel-2:     #241821;
  --panel-3:     #33222c;
  --line:        #b8873a;
  --line-soft:   #6f5220;
  --gold:        #e0a94f;
  --gold-dim:    #a87c2c;
  --gold-bright: #ffdda0;
  --teal:        #4fc79a;
  --teal-dim:    #2c8a68;
  --danger:      #c8302a;
  --danger-text: #ff9aa2;
  --text:        #ece5e2;
  --text-dim:    #a89a9d;
  --text-mute:   #6b5d62;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;

  /* 属性点缀色（保留的装饰色板） */
  --e-fire:  #ef7938;
  --e-water: #4cc2f1;
  --e-wind:  #74c2a8;
  --e-elec:  #b08fc7;
  --e-grass: #a5c83b;
  --e-ice:   #9fe8ff;
  --e-rock:  #ffb13f;

  /* 五类国籍（卡面胶囊 / 筛选行配色） */
  --r-cn:  #d94a4a;
  --r-as:  #5ec88a;
  --r-eu:  #e0a03c;
  --r-us:  #b06ad9;
  --r-oth: #8a95a8;
}

* { 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%;
  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(79,199,154,.11), transparent 62%),
    radial-gradient(120% 70% at 50% 110%, rgba(232,196,106,.10), transparent 66%),
    repeating-linear-gradient(0deg, rgba(201,162,39,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(201,162,39,.05) 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;
  min-height: 100vh;
  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: 11px 20px;
  font-size: 15px;
  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, #f6d98a, #d8ab4e);
  border-color: var(--gold-bright);
  color: #2a1d00;
  font-weight: 700;
}
.btn-big { width: 100%; padding: 13px 16px; font-size: 15px; border-radius: 14px; }
.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); }

/* ---------- 首页 ---------- */
.home-hero { text-align: center; margin-top: 6px; }
.home-title {
  margin: 0; font-size: 34px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(240,201,106,.45);
  white-space: nowrap;
}
.home-sub {
  margin-top: 8px; font-size: 12.5px; color: var(--text-dim);
  line-height: 1.6; padding: 0 6px;
}
.home-count {
  margin-top: 14px; font-size: 12.5px; color: var(--text-dim);
  background: rgba(120,215,180,.07);
  border: 1px solid rgba(120,215,180,.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(240,201,106,.07);
  border-color: rgba(240,201,106,.26);
}
.home-tianli b { color: var(--gold-bright); }

.home-lv {
  width: 100%; margin-top: 14px;
  background: linear-gradient(180deg, rgba(36,24,33,.9), rgba(26,17,22,.9));
  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 { margin-left: auto; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.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;
}
.lv-exp-line { margin-top: 5px; font-size: 11.5px; color: var(--text-mute); text-align: right; }
/* 等级框底部：预算行（左标签 / 右数值） */
.lv-gem-line {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(200,164,92,.28);
  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(26,17,22,.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;
  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; }
.elem-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;
}
.e-fire  { background: rgba(239,121,56,.18); color: var(--e-fire);  border: 1px solid rgba(239,121,56,.45); }
.e-water { background: rgba(76,194,241,.18); color: var(--e-water); border: 1px solid rgba(76,194,241,.45); }
.e-wind  { background: rgba(116,194,168,.18); color: var(--e-wind); border: 1px solid rgba(116,194,168,.45); }
.e-elec  { background: rgba(176,143,199,.18); color: var(--e-elec); border: 1px solid rgba(176,143,199,.45); }
.e-grass { background: rgba(165,200,59,.18); color: var(--e-grass); border: 1px solid rgba(165,200,59,.45); }
.e-ice   { background: rgba(159,232,255,.18); color: var(--e-ice);  border: 1px solid rgba(159,232,255,.45); }
.e-rock  { background: rgba(255,177,63,.18); color: var(--e-rock); border: 1px solid rgba(255,177,63,.45); }

.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(240,201,106,.16), rgba(240,201,106,.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; color: var(--gold-bright); white-space: nowrap; }
.attr-grid { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.stamina-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(26,17,22,.75); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 10px 12px;
}
.stamina-name { font-size: 12.5px; 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(26,17,22,.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(26,17,22,.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(8,5,6,.7);
  border: 1px solid rgba(200,164,92,.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(28,19,24,.4); color: #d8cfd2;
}
/* 日常历练行：几乎不显底色，读起来就是面板里的一行字 */
.log-item.year { background: rgba(28,19,24,.18); color: #a89a9d; 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(120,180,150,.12); border: 1px solid rgba(120,180,150,.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(240,201,106,.14); border: 1px solid rgba(240,201,106,.4); color: #ffe9a8; }
.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(120,215,180,.18); border: 1px solid rgba(120,215,180,.5); color: #eafff5; 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(90,160,255,.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(90,160,255,.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(36,24,33,.92), rgba(18,11,15,.92));
  border: 1px solid rgba(200,164,92,.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,#ff5f5f,#ffd75e,#6fdc8c,#6fb0ff,#c78cff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(240,201,106,.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(200,164,92,.22);
  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; }
/* TI 失利被削弱的七彩文案（沿用日志的 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(90,160,255,.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(120,215,180,.08);
  border: 1px solid rgba(120,215,180,.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: 40px; margin-bottom: 12px;
}
.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(200,164,92,.25);
  background: rgba(255,255,255,.04);
  color: var(--text-dim); font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.tab.active { background: rgba(240,201,106,.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(26,17,22,.7); border: 1px solid rgba(200,164,92,.18);
  border-radius: 10px; font-size: 13px;
}
.lb-row.me { border-color: var(--gold); background: rgba(240,201,106,.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: #ffd75e; } .lb-rank.r2 { color: #e6dfe2; } .lb-rank.r3 { color: #e6a877; }
.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(240,201,106,.08);
  border: 1px solid rgba(240,201,106,.25);
  border-radius: 12px;
}
.ach-list {
  width: 100%; display: flex; flex-direction: column; gap: 14px;
  padding: 2px 0 10px;
}
.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(200,164,92,.22); border-radius: 14px;
  padding: 15px 17px;
  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, #33301f, #26241a);
  box-shadow: 0 2px 14px rgba(120,215,180,.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: #6b5d62; }

/* ---------- 高光 ---------- */
.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(26,17,22,.75); border: 1px solid rgba(200,164,92,.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); }
/* TI 冠军：与画布里的金色一致（HL_END_COLOR['TI 冠军'] = #f0c96a） */
.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-weak b { color: var(--teal); }
.hl-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(14,8,11,.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(26,17,22,.75); border: 1px solid rgba(200,164,92,.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: #ded5d8; 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(26,17,22,.6); border: 1px solid rgba(200,164,92,.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(8,5,7,.72); padding: 20px;
}
.mask-box {
  width: 300px; max-width: 86vw;
  background: linear-gradient(180deg, #241821, #1a1116);
  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(8,5,6,.7); border: 1px solid rgba(200,164,92,.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, #f0c96a, #c8a45c);
  color: #2a1d00; 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(14,8,11,.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(200,164,92,.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(200,164,92,.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: center;
  font-size: 13px; color: var(--teal); font-weight: 700; margin-bottom: 8px;
}
.deck-pool {
  width: 100%; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 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(200,164,92,.28);
  background: linear-gradient(180deg, rgba(36,24,33,.9), rgba(26,17,22,.9));
  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(240,201,106,.35); }
.pool-card .pc-name { font-size: 12px; font-weight: 700; color: var(--text); 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(26,17,22,.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(200,164,92,.3);
  background: linear-gradient(180deg, rgba(36,24,33,.95), rgba(26,17,22,.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: #2a1d00;
  background: linear-gradient(180deg, #f0c96a, #c8a45c);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
/* 高阶（A 档及以上）：金边 + 光晕 */
.gacha-card.t-hi { border-color: var(--gold); box-shadow: 0 0 12px rgba(240,201,106,.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(36,24,33,.96), rgba(26,17,22,.96)) padding-box,
              linear-gradient(135deg,#ff5f6d,#ffc93b,#6fd0a8,#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); }
}
.gacha-btns { width: 100%; display: flex; gap: 10px; margin-top: 16px; }
.gacha-btns .gacha-btn { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.gacha-btn small { font-size: 10.5px; color: var(--text-mute); font-weight: 400; }
.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(26,17,22,.7); border: 1px solid rgba(200,164,92,.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(240,201,106,.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(200,164,92,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(200,164,92,.6); }
html { scrollbar-width: thin; scrollbar-color: rgba(200,164,92,.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 列），出得多就在结果框里滚动 —— 不压缩卡片、页面也不变高
 * ============================================================ */
#view-gacha { height: 100vh; max-height: 100vh; overflow: hidden; padding-top: 8px; }
#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(26,17,22,.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: #d8d8d8; color: #3a3a3a; }
.chip-t2  { background: #6b6b6b; color: #f2f2f2; }
.chip-t3  { background: #a8d8b0; color: #1f4a28; }
.chip-t4  { background: #3d7a4a; color: #eaf7ee; }
.chip-t5  { background: #a8e0c8; color: #1a3c55; }
.chip-t6  { background: #2f5f8a; color: #eaf3fb; }
.chip-t7  { background: #7b5aa6; color: #f4eefc; }
.chip-t8  { background: #d4a72c; color: #3a2a00; }
.chip-t9  { background: #a8322a; color: #fdeeed; }
.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: #c9c9c9; } .nt2  { color: #9aa0a6; } .nt3  { color: #a8d8b0; }
.nt4  { color: #6fc98a; } .nt5  { color: #a8e0c8; } .nt6  { color: #6aa9e0; }
.nt7  { color: #b48ce0; } .nt8  { color: #f0c96a; } .nt9  { color: #ff7a72; }
.nt10 { color: #ffd75e; }

/* ============================================================
 * 伙伴卡统一版式（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: block; text-align: center; width: 100%; min-width: 0; line-height: 1; white-space: nowrap; overflow: hidden; }
.pc-name {
  font-size: 12.5px; font-weight: 700;
  flex: 1 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(36,24,33,.92), rgba(26,17,22,.92));
  border: 1px solid rgba(200,164,92,.28);
}
.pool-card.locked { opacity: .38; }
.pool-card.picked { border-color: var(--gold); box-shadow: 0 0 10px rgba(240,201,106,.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; }

/* 组队页筛选：第一行「全部 + 七元素」，第二行「十档品级」 */
.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; }

/* 抽卡结果卡沿用同一套版式 */
.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(36,24,33,.95), rgba(26,17,22,.95));
  border: 1px solid rgba(200,164,92,.3);
}
.gacha-card.t-hi { border-color: var(--gold); box-shadow: 0 0 12px rgba(240,201,106,.35); }
.gacha-card.t-top {
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(36,24,33,.96), rgba(26,17,22,.96)) padding-box,
              linear-gradient(135deg,#ff5f6d,#ffc93b,#6fd0a8,#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: #2a1d00;
  background: linear-gradient(180deg, #f0c96a, #c8a45c);
  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(200,164,92,.16);
  background: rgba(26,17,22,.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(240,201,106,.28), rgba(240,201,106,.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(120,215,180,.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(240,201,106,.6); animation: none; }
@keyframes sgPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(120,215,180,.35); }
  50%      { box-shadow: 0 0 16px rgba(120,215,180,.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(200,164,92,.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; }

/* ============================================================
 * DOTA战队模拟器 · 新增组件
 * ============================================================ */

/* ---------- 国籍胶囊（卡面第一行第三格）---------- */
.region-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; letter-spacing: .3px;
  vertical-align: middle; flex: 0 0 auto;
}
.r-cn  { background: rgba(217,74,74,.18); color: #ff9090; border: 1px solid rgba(217,74,74,.5); }
.r-as  { background: rgba(94,200,138,.18); color: #93e2b4; border: 1px solid rgba(94,200,138,.5); }
.r-eu  { background: rgba(224,160,60,.18); color: #f2c586; border: 1px solid rgba(224,160,60,.5); }
.r-us  { background: rgba(176,106,217,.18); color: #d3a6f2; border: 1px solid rgba(176,106,217,.5); }
.r-oth { background: rgba(138,149,168,.18); color: #b4c0d4; border: 1px solid rgba(138,149,168,.5); }

/* ---------- 位置胶囊（卡面第一行第二格）---------- */
.pos-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;
  background: rgba(79,199,154,.14); color: #9fe0c4; border: 1px solid rgba(79,199,154,.42);
}
.pc-head { display: flex; align-items: center; gap: 4px; justify-content: center; flex-wrap: nowrap; }

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

/* ---------- 首发页槽位：两行 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; }

/* ---------- 选秀页：位置筛选行 ---------- */
.gacha-pos { width: 100%; display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.gacha-pos .tab { flex: 0 0 auto; padding: 6px 11px; font-size: 12px; }
.gacha-pos .tab .gp-cn { font-size: 10px; opacity: .7; margin-left: 3px; }

/* ---------- 首发页筛选：三行 ---------- */
.deck-filter .filter-row { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.deck-filter .filter-row + .filter-row { margin-top: 6px; }

/* 卡面第二行：国籍胶囊 + 选手名（同一行，靠 fitCardNames 缩字号防溢出） */
.pc-name-row .region-tag { display: inline-flex; vertical-align: middle; margin-right: 4px; }