/* ============================================================
 * 宝可梦大乱斗模拟器 · 样式（移动优先，兼容电脑 480px 容器）
 * 主题：宝可梦世界（精灵球红白）—— 深蓝黑底 + 精灵球红描边 + 皮卡丘黄 / 精灵球蓝点缀
 * 背景为纯色底（长列表滚动不出现上下分层）；网格与辉光是 fixed，不参与滚动
 * ============================================================ */
[hidden] { display: none !important; }

:root {
  --bg:          #0c1020;
  --bg-deep:     #060912;
  --panel:       #161d31;
  --panel-2:     #1f2742;
  --panel-3:     #2b3557;
  --line:        #ee1515;
  --line-soft:   #6f2424;
  --gold:        #ffcb05;
  --gold-dim:    #b08c00;
  --gold-bright: #ffea9a;
  --teal:        #3b9ede;
  --teal-dim:    #23608a;
  --danger:      #ff4d4d;
  --danger-text: #ffb3ae;
  --text:        #f2f5fa;
  --text-dim:    #a9b4c9;
  --text-mute:   #6d7891;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;
}

* { 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(59,158,222,.10), transparent 62%),
    radial-gradient(120% 70% at 50% 110%, rgba(255,203,5,.09), transparent 66%),
    repeating-linear-gradient(0deg, rgba(238,21,21,.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(238,21,21,.045) 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, #ff5f5f, #cc1a1a);
  border-color: var(--gold-bright);
  color: #fff6f2;
  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(255,203,5,.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(59,158,222,.07);
  border: 1px solid rgba(59,158,222,.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(255,203,5,.07);
  border-color: rgba(255,203,5,.26);
}
.home-tianli b { color: var(--gold-bright); }

.home-lv {
  width: 100%; margin-top: 14px;
  background: linear-gradient(180deg, rgba(31,39,66,.9), rgba(22,29,49,.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(238,21,21,.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(22,29,49,.6);
  padding: 10px 10px 8px;
}
.home-team-title { display: flex; align-items: center; font-size: 12px; color: var(--text-mute); margin-bottom: 8px; }
.home-team-3d { margin-left: auto; color: var(--teal); font-weight: 700; }
/* 当前队伍 6 只：1 行 3 个（两行） */
.home-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-team .mini-card {
  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;
}
/* 属性徽标：宝可梦 18 属性（配色取自官方属性色系，暗底上调亮以保可读） */
.e-normal   { background: rgba(168,168,120,.22); color: #d8d8ac; border: 1px solid rgba(168,168,120,.55); }
.e-fire     { background: rgba(240,128,48,.22);  color: #ffb478; border: 1px solid rgba(240,128,48,.55); }
.e-water    { background: rgba(104,144,240,.22); color: #a4c0ff; border: 1px solid rgba(104,144,240,.55); }
.e-grass    { background: rgba(120,200,80,.22);  color: #aae87e; border: 1px solid rgba(120,200,80,.55); }
.e-electric { background: rgba(248,208,48,.22);  color: #ffe476; border: 1px solid rgba(248,208,48,.55); }
.e-ice      { background: rgba(152,216,216,.22); color: #aef2ee; border: 1px solid rgba(152,216,216,.55); }
.e-fighting { background: rgba(192,48,40,.26);   color: #ff9086; border: 1px solid rgba(192,48,40,.65); }
.e-poison   { background: rgba(160,64,160,.24);  color: #dd92e4; border: 1px solid rgba(160,64,160,.6); }
.e-ground   { background: rgba(224,192,104,.22); color: #f0d590; border: 1px solid rgba(224,192,104,.55); }
.e-flying   { background: rgba(168,144,240,.22); color: #c8b6ff; border: 1px solid rgba(168,144,240,.55); }
.e-psychic  { background: rgba(248,88,136,.22);  color: #ffa0bd; border: 1px solid rgba(248,88,136,.55); }
.e-bug      { background: rgba(168,184,32,.22);  color: #d6e464; border: 1px solid rgba(168,184,32,.55); }
.e-rock     { background: rgba(184,160,56,.22);  color: #e0cc80; border: 1px solid rgba(184,160,56,.55); }
.e-ghost    { background: rgba(112,88,152,.26);  color: #b8a0dc; border: 1px solid rgba(112,88,152,.65); }
.e-dragon   { background: rgba(112,56,248,.24);  color: #ae94ff; border: 1px solid rgba(112,56,248,.6); }
.e-dark     { background: rgba(112,88,72,.26);   color: #c2ab95; border: 1px solid rgba(112,88,72,.65); }
.e-steel    { background: rgba(184,184,208,.22); color: #d6d6ec; border: 1px solid rgba(184,184,208,.55); }
.e-fairy    { background: rgba(238,153,172,.22); color: #ffbfce; border: 1px solid rgba(238,153,172,.55); }

.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(255,203,5,.16), rgba(255,203,5,.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(22,29,49,.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-row4 { display: flex; gap: 6px; }
.attr-card {
  flex: 1 1 0; min-width: 0;
  background: rgba(22,29,49,.75); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 9px 4px; text-align: center;
}
/* 团队配合加成（倍率标识，如 ×1.08）：用皮卡丘黄突出 */
.attr-syn { color: var(--gold); }
.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(22,29,49,.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,18,.7);
  border: 1px solid rgba(238,21,21,.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(22,29,49,.4); color: #cbd5ea;
}
/* 日常特训行：几乎不显底色，读起来就是面板里的一行字 */
.log-item.year { background: rgba(22,29,49,.18); color: #93a0ba; font-size: 12.5px; }
.log-item.brk { background: rgba(79,214,168,.14); border: 1px solid rgba(79,214,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(255,203,5,.14); border: 1px solid rgba(255,203,5,.4); color: #ffea9a; }
.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(59,158,222,.18); border: 1px solid rgba(59,158,222,.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(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(40,26,50,.94), rgba(18,11,24,.94));
  border: 1px solid rgba(238,21,21,.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(255,203,5,.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(238,21,21,.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; }
/* 七彩（关键节点）文案：流光底 + 白字 */
.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(59,158,222,.08);
  border: 1px solid rgba(59,158,222,.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(238,21,21,.25);
  background: rgba(255,255,255,.04);
  color: var(--text-dim); font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.tab.active { background: rgba(255,203,5,.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(22,29,49,.7); border: 1px solid rgba(238,21,21,.18);
  border-radius: 10px; font-size: 13px;
}
.lb-row.me { border-color: var(--gold); background: rgba(255,203,5,.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: #dfe6f0; } .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(255,203,5,.08);
  border: 1px solid rgba(255,203,5,.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(238,21,21,.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, #332e15, #221f0e);
  box-shadow: 0 2px 14px rgba(59,158,222,.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(22,29,49,.75); border: 1px solid rgba(238,21,21,.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 里的强调色 = #ffcb05） */
.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(12,16,32,.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(22,29,49,.75); border: 1px solid rgba(238,21,21,.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(22,29,49,.6); border: 1px solid rgba(238,21,21,.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,9,18,.72); padding: 20px;
}
.mask-box {
  width: 300px; max-width: 86vw;
  background: linear-gradient(180deg, #232c48, #121829);
  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,18,.7); border: 1px solid rgba(238,21,21,.18);
  border-radius: 10px; padding: 10px;
}
.review-log .log-item { font-size: 12.5px; }


.ach-toast {
  position: fixed; left: 50%; top: 24px; transform: translateX(-50%);
  z-index: 90; max-width: 90vw;
  background: rgba(12,16,32,.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(238,21,21,.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(238,21,21,.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(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(238,21,21,.28);
  background: linear-gradient(180deg, rgba(31,39,66,.9), rgba(12,16,32,.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(255,203,5,.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(22,29,49,.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(238,21,21,.3);
  background: linear-gradient(180deg, rgba(31,39,66,.95), rgba(12,16,32,.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: #fff6f2;
  background: linear-gradient(180deg, #ffcb05, #ee1515);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
/* 高阶（A 档及以上）：金边 + 光晕 */
.gacha-card.t-hi { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,203,5,.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,30,48,.96), rgba(12,16,32,.96)) padding-box,
              linear-gradient(135deg,#ff5f6d,#ffc93b,#6fd0ff,#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(22,29,49,.7); border: 1px solid rgba(238,21,21,.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(255,203,5,.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(238,21,21,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(238,21,21,.6); }
html { scrollbar-width: thin; scrollbar-color: rgba(238,21,21,.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(22,29,49,.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: #a8cfe8; 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: #a8cfe8; } .nt6  { color: #6aa9e0; }
.nt7  { color: #b48ce0; } .nt8  { color: #ffcb05; } .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: 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: 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(31,39,66,.92), rgba(12,16,32,.92));
  border: 1px solid rgba(238,21,21,.28);
}
.pool-card.locked { opacity: .38; }
.pool-card.picked { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,203,5,.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(31,39,66,.95), rgba(12,16,32,.95));
  border: 1px solid rgba(238,21,21,.3);
}
.gacha-card.t-hi { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,203,5,.35); }
.gacha-card.t-top {
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(18,30,48,.96), rgba(12,16,32,.96)) padding-box,
              linear-gradient(135deg,#ff5f6d,#ffc93b,#6fd0ff,#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: #fff6f2;
  background: linear-gradient(180deg, #ffcb05, #ee1515);
  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(238,21,21,.16);
  background: rgba(22,29,49,.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(255,203,5,.28), rgba(255,203,5,.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(59,158,222,.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(255,203,5,.6); animation: none; }
@keyframes sgPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(59,158,222,.35); }
  50%      { box-shadow: 0 0 16px rgba(59,158,222,.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(238,21,21,.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; }


/* ---------- 捕捉页（筛选仅保留品级一行） ---------- */
.gacha-pos { width: 100%; display: flex; gap: 8px; margin-top: 10px; }
.gacha-pos .tab { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 12.5px; text-align: center; }
/* ============================================================
 * 匹配中遮罩（伪装「正在随机匹配」的转圈黑屏）
 * ============================================================ */
.match-mask {
  position: fixed; inset: 0; z-index: 100;
  background: #060912;
  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(238,21,21,.22);
  border-top-color: var(--line);
  border-right-color: var(--gold);
  animation: matchSpin .9s linear infinite;
}
@keyframes matchSpin { to { transform: rotate(360deg); } }
.match-text { font-size: 16px; font-weight: 700; color: var(--gold-bright); letter-spacing: 1px; }
.match-sub { font-size: 12px; color: var(--text-mute); }

/* ============================================================
 * 对手信息块（游戏页 · 我方三张卡下方，简略展示）
 * ============================================================ */
.foe-box {
  width: 100%; margin-top: 8px;
  background: rgba(22,29,49,.78);
  border: 1px solid rgba(255,59,48,.35);
  border-radius: 12px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 5px;
}
.foe-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-dim); white-space: nowrap;
}
.foe-head .foe-title { color: var(--danger); font-weight: 800; }
.foe-head b { color: var(--danger-text); font-weight: 700; }
/* 对手的团队配合加成：与我方同一个倍率标识，用皮卡丘黄区分 */
.foe-head .foe-syn { color: var(--gold); }
/* 六只对手战力：允许换行（不再压字号，一行放不下就换到下一行） */
.foe-line { font-size: 11.5px; color: var(--text-mute); display: flex; flex-wrap: wrap; gap: 3px 10px; }
.foe-line .foe-item { white-space: nowrap; }
.foe-line b { color: var(--text-dim); font-weight: 600; }

/* ---------- 友谊赛：分享队伍 / 好友 PK 弹窗 ---------- */
.share-text {
  width: 100%; box-sizing: border-box;
  background: rgba(12,16,32,.82); color: var(--text-dim);
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 9px 10px; font-size: 12px; line-height: 1.55;
  font-family: var(--mono);
  resize: none; outline: none; word-break: break-all;
}
.share-text:focus { border-color: var(--gold); color: var(--text); }
.share-text::placeholder { color: var(--text-mute); }
.share-btns { display: flex; gap: 8px; }
.share-btns .btn { flex: 1 1 0; min-width: 0; }
.mask-warn { color: var(--danger-text); }

/* ============================================================
 * 结算页 · 双方属性对比 / 出战阵容对比
 * ============================================================ */
.settle-cmp { display: flex; flex-direction: column; }
.cmp-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(238,21,21,.22);
  font-size: 14px;
}
.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; }
.cmp-row .cmp-foe { flex: 0 0 auto; color: var(--danger-text); font-weight: 700; white-space: nowrap; }
.cmp-head .cmp-me, .cmp-head .cmp-foe { color: var(--text-dim); font-size: 12px; font-weight: 700; }

.settle-versus-title {
  margin-top: 4px; text-align: center;
  font-size: 12.5px; color: var(--teal); font-weight: 700;
}
.settle-versus {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(6,9,18,.5); border: 1px solid rgba(238,21,21,.2);
  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: 12px; 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: 2px; margin: 3px 0; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--danger), transparent);
}

/* ---------- 高光条目：双方对比（PK 格式，与结算页同一套） ---------- */
.hl-cmp { display: flex; flex-direction: column; margin-top: 2px; }
.hl-cmp .cmp-row { padding: 3px 0; font-size: 12.5px; border-bottom: none; }
.hl-cmp .cmp-row .cmp-k { font-size: 11.5px; }
.hl-cmp .cmp-row .cmp-me, .hl-cmp .cmp-row .cmp-foe { font-size: 12.5px; }
.hl-vs { margin-top: 3px; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.hl-side-me { color: var(--gold-bright); font-weight: 700; }
.hl-side-foe { color: var(--danger-text); font-weight: 700; }