/* ============================================================
   进攻1002！ v2.1.0 — 样式（蛋壳特工队美术风 · 高端商务质感）
   鲜艳光泽 · 圆润玻璃 · 金色稀有度。所有可点击元素高度 >= 48px。
   ============================================================ */

:root {
  --bg: #1b1436;
  --bg-deep: #120e28;
  --panel: rgba(38, 28, 74, 0.92);
  --panel-2: rgba(52, 38, 96, 0.95);
  --panel-3: #4a3789;
  --text: #f5f2ff;
  --muted: #a79cd0;
  --accent: #7c5cff;
  --accent-2: #ff5db1;
  --gold: #ffd54f;
  --hp: #ff4d6a;
  --xp: #38c6ff;

  --r-common: #8be0a4;
  --r-rare: #4fc3f7;
  --r-epic: #c77dff;
  --r-legend: #ffb300;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  /* v3.4 BUG FIX：旧值 touch-action:none 虽不继承，但祖先为 none 时
     后代的触摸滚动会被浏览器拒绝 → 手机端除个别显式 pan-y 的容器外全部滑不动。
     改 pan-y：允许页面垂直滚动，同时保留禁缩放/禁横向平移。 */
  touch-action: pan-y;
  overscroll-behavior: none;
}

/* v3.4：#game-root 不再设 touch-action:none（会波及 UI 页面滚动）；
   游戏画布与触摸层已各自设置 none，游戏中交互不受影响。 */
#game-root { position: fixed; inset: 0; overflow: hidden; height: 100dvh; touch-action: pan-y; }

#game-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
}

/* 触摸层：捕获移动手势（王者荣耀式仅显示摇杆） */
#touch-layer {
  position: absolute; inset: 0;
  z-index: 10;
  touch-action: none;
}
#game-root.modal-open #touch-layer { pointer-events: none; }
#game-root.no-touch #touch-layer { pointer-events: none; }

/* 虚拟摇杆：默认隐藏，触摸时出现在手指位置 */
#joy-base {
  position: absolute;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.22), rgba(124, 92, 255, 0.08) 70%, transparent);
  border: 2px solid rgba(190, 170, 255, 0.55);
  box-shadow: 0 0 24px rgba(124, 92, 255, 0.25), inset 0 0 30px rgba(124, 92, 255, 0.12);
  display: none;
  z-index: 12;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
#joy-base.show { display: block; animation: joy-in .12s ease; }
@keyframes joy-in { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #b79bff, #7c5cff 60%, #5a3fd6);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 16px rgba(90, 63, 214, 0.55), inset 0 2px 6px rgba(255,255,255,.35);
}

.hidden { display: none !important; }

/* ============ 通用按钮（>=48px） ============ */
.big-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  min-width: 200px;
  padding: 12px 34px;
  border: none;
  border-radius: 26px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(180deg, #9b7dff 0%, #7c5cff 45%, #5f3fd6 100%);
  box-shadow: 0 5px 0 #4a2fb0, 0 10px 24px rgba(124, 92, 255, .45),
    inset 0 2px 0 rgba(255, 255, 255, .35);
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, filter .15s ease;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #4a2fb0, 0 4px 10px rgba(124,92,255,.4); filter: brightness(1.08); }
.btn-secondary {
  background: linear-gradient(180deg, #ff8ad0 0%, #ff5db1 45%, #d63384 100%);
  box-shadow: 0 5px 0 #a3225f, 0 10px 24px rgba(255, 93, 177, .4), inset 0 2px 0 rgba(255,255,255,.35);
}
.btn-secondary:active { box-shadow: 0 1px 0 #a3225f; }

.text-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 10px 26px;
  border: none;
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
.text-btn:active { color: var(--text); background: rgba(255,255,255,.14); }

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.menu-btn:active { background: rgba(255, 255, 255, .16); transform: scale(.97); }

.icon-btn {
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(38, 28, 74, .85);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.icon-btn:active { background: var(--panel-3); }

/* ============ 全屏界面 ============ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center;
  /* v3.3：auto margin 居中技巧 —— 内容超高时自动改为顶部对齐并可完整滑动，
     修复旧版 justify-content:center 在长内容页面"上方被裁切且滑不上去"的问题 */
  justify-content: flex-start;
  gap: 16px;
  padding: 20px 16px calc(20px + var(--safe-b));
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(124, 92, 255, .28), transparent 60%),
    radial-gradient(80% 50% at 50% 100%, rgba(255, 93, 177, .16), transparent 60%),
    linear-gradient(180deg, #241a4d 0%, var(--bg) 40%, var(--bg-deep) 100%);
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
/* v3.3：长内容页面滑动适配（首尾 auto margin：有空间时居中，超高时贴顶完整滑动） */
.screen > :first-child { margin-top: auto; }
.screen > :last-child { margin-bottom: auto; }
/* v3.4：列表容器子项禁止被 flex 压缩 —— 否则内容超高时卡片被压扁、
   文字溢出卡片边界（角色卡片在手机端文字重叠的真因）。 */
#char-list > *, #ach-list > *, #meta-list > *, #codex-grid > *,
#result-body > *, .guide-body > * { flex-shrink: 0; }

.screen-title { font-size: 22px; font-weight: 900; letter-spacing: 3px; text-shadow: 0 2px 12px rgba(124, 92, 255, .5); }

/* ---- 标题界面 ---- */
.title-logo { text-align: center; }
.title-main {
  font-size: clamp(46px, 16vw, 76px);
  font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(180deg, #ffffff 20%, #d9c9ff 60%, #b79bff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(124, 92, 255, .55));
}
.title-num {
  background: linear-gradient(180deg, #ffe98a, #ffb300 70%, #ff8a00);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(255, 179, 0, .5));
}
.title-sub { margin-top: 10px; color: var(--muted); font-size: 13.5px; letter-spacing: 4px; }
.title-menu {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 10px;
  justify-content: center;
}
#version-badge {
  padding: 3px 12px;
  border-radius: 10px;
  background: rgba(255, 213, 79, .14);
  border: 1px solid rgba(255, 213, 79, .35);
  color: var(--gold);
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
}
.title-tip { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.8; }

/* ---- 剧情界面 ---- */
.story-card {
  width: 100%; max-width: 420px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 26px 22px 18px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  backdrop-filter: blur(10px);
}
.story-art { font-size: 54px; filter: drop-shadow(0 8px 18px rgba(124,92,255,.5)); }
.story-title { font-size: 20px; font-weight: 900; margin: 12px 0 10px; letter-spacing: 2px; }
.story-text { font-size: 14.5px; color: #d8cff5; line-height: 2; text-align: justify; min-height: 120px; }
.story-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
#story-page { font-size: 12px; color: var(--muted); }
.story-btns { display: flex; align-items: center; gap: 8px; }

/* ---- 模式选择 ---- */
.mode-list { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.mode-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: transform .1s ease, border-color .15s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.mode-card:active { transform: scale(.97); border-color: var(--accent); }
.mode-icon { font-size: 40px; filter: drop-shadow(0 4px 10px rgba(124,92,255,.5)); }
.mode-name { font-size: 18px; font-weight: 900; letter-spacing: 1px; }
.mode-desc { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; }

/* ---- 关卡选择 ---- */
#stage-progress { font-size: 13px; color: var(--muted); }
#stage-grid {
  width: 100%; max-width: 440px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  max-height: 56vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: 4px;
}
.stage-cell {
  aspect-ratio: 1;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-weight: 800;
  transition: transform .08s ease;
}
.stage-cell:active { transform: scale(.93); }
.stage-cell .num { font-size: 16px; }
.stage-cell .stars { font-size: 9px; color: var(--gold); letter-spacing: 1px; height: 12px; }
.stage-cell.locked { opacity: .38; cursor: not-allowed; }
.stage-cell.locked .num::after { content: '🔒'; font-size: 13px; }
.stage-cell.boss { border-color: rgba(255, 93, 177, .55); box-shadow: 0 0 12px rgba(255, 93, 177, .25); }
.stage-cell.cleared { background: linear-gradient(180deg, #3f8f5f, #2c6b47); }

/* ---- 角色选择 ---- */
.char-hint { font-size: 12.5px; color: var(--gold); letter-spacing: 1px; }
#char-list {
  width: 100%; max-width: 460px;
  max-height: 58vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 11px;
  padding: 4px;
}
.char-card {
  display: flex; align-items: center; gap: 12px;
  min-height: 108px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border: 2px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  transition: border-color .15s ease, transform .08s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.char-card:active { transform: scale(.98); }
.char-card.selected { border-color: var(--accent-2); box-shadow: 0 0 18px rgba(255, 93, 177, .3); }
.char-card canvas { flex: 0 0 auto; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.char-info { flex: 1; min-width: 0; text-align: left; }
.char-name { font-size: 17px; font-weight: 900; letter-spacing: 1px; }
.char-role { font-size: 12px; color: var(--gold); margin: 2px 0 4px; }
.char-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.char-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11px; color: #cfc6f2; }
.char-stats b { color: var(--text); font-weight: 700; }

/* ============ HUD ============ */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#hud-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(10px + var(--safe-t)) 12px 0 12px;
}
#hud-left { display: flex; align-items: center; gap: 8px; }
#hud-level-badge {
  width: 46px; height: 46px; border-radius: 14px;
  background: linear-gradient(180deg, #9b7dff, #5f3fd6);
  border: 1px solid rgba(255, 255, 255, .3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 12px rgba(95, 63, 214, .5), inset 0 2px 0 rgba(255,255,255,.3);
}
#hud-bars { display: flex; flex-direction: column; gap: 4px; }
#hp-bar-wrap {
  position: relative; width: 150px; height: 17px;
  background: rgba(10, 6, 26, .7);
  border-radius: 9px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
}
#hp-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff8a5c, #ff4d6a);
  border-radius: 8px;
  transition: width .12s linear;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25);
}
#hp-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
/* v3.3 护盾数值条 */
#shield-bar-wrap {
  position: relative;
  width: 130px; height: 13px; border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(79, 195, 247, .55);
  overflow: hidden;
  box-shadow: 0 0 10px rgba(79, 195, 247, .25);
}
#shield-bar-wrap.hidden { display: none; }
#shield-bar-fill {
  position: absolute; inset: 0; width: 100%;
  background: linear-gradient(90deg, #29b6f6, #81d4fa);
  border-radius: 99px;
  transition: width .18s ease;
}
#shield-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: #062a3a;
  letter-spacing: .5px;
}
#xp-bar-wrap {
  width: 150px; height: 9px;
  background: rgba(10, 6, 26, .7);
  border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}
#xp-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #38c6ff, #b388ff);
  border-radius: 4px;
  transition: width .12s linear;
  box-shadow: 0 0 8px rgba(56, 198, 255, .6);
}
#hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#hud-timer { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
#hud-kills { font-size: 12px; color: #d8cff5; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
#btn-pause { pointer-events: auto; }

/* 关卡模式目标条 */
#stage-info {
  position: absolute; top: calc(70px + var(--safe-t)); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 14px; align-items: center;
  padding: 7px 16px;
  border-radius: 12px;
  background: rgba(18, 12, 40, .82);
  border: 1px solid rgba(255, 213, 79, .35);
  font-size: 13px; font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  white-space: nowrap;
}
#stage-goal { color: var(--gold); }
#stage-time { color: #ff9db1; font-variant-numeric: tabular-nums; }
#stage-time.urgent { color: #ff4d6a; animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }

/* Boss 血条 */
#boss-bar-wrap {
  position: absolute; top: calc(104px + var(--safe-t)); left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 330px);
  text-align: center;
}
#boss-name { font-size: 12px; font-weight: 800; color: #ffd7f2; text-shadow: 0 1px 3px #000; letter-spacing: 2px; }
#boss-bar {
  margin-top: 3px; height: 11px;
  background: rgba(10, 6, 26, .75);
  border: 1px solid rgba(255, 93, 177, .5);
  border-radius: 6px; overflow: hidden;
}
#boss-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #b388ff, #ff5db1);
  box-shadow: 0 0 10px rgba(255, 93, 177, .6);
}

/* 技能图标 */
#skill-icons {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px;
}
.skill-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(30, 22, 60, .9);
  border: 1px solid rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.skill-icon .lv {
  position: absolute; right: -5px; bottom: -5px;
  min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.35);
}
.skill-icon.evolved { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 213, 79, .55); }
.skill-icon.evolved .lv { background: var(--gold); color: #3a2c00; }
.skill-icon.equip { border-color: #8be0a4; }

/* 事件增益图标 */
#event-buffs {
  position: absolute; left: 10px; top: 58%;
  display: flex; flex-direction: column; gap: 5px;
}
.buff-icon {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 9px;
  background: rgba(18, 12, 40, .82);
  border: 1px solid rgba(255, 213, 79, .4);
  font-size: 11px; font-weight: 700; color: var(--gold);
}

/* 顶部横幅 */
#banner {
  position: absolute; top: 24%; left: 50%;
  transform: translateX(-50%);
  padding: 11px 24px;
  border-radius: 14px;
  background: rgba(18, 12, 40, .9);
  border: 1px solid var(--accent-2);
  color: #ffd7f2;
  font-size: 16px; font-weight: 900; letter-spacing: 2px;
  white-space: nowrap;
  animation: banner-pop .3s ease;
  box-shadow: 0 8px 30px rgba(255, 93, 177, .3);
}
@keyframes banner-pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ============ 弹窗 ============ */
.modal {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 13px;
  padding: 20px 14px calc(20px + var(--safe-b));
  background: rgba(12, 8, 28, .86);
  backdrop-filter: blur(4px);
  z-index: 50;
}
.modal-title { font-size: 24px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 20px rgba(124, 92, 255, .6); }
.modal-sub { font-size: 13px; color: var(--muted); margin-top: -6px; }
#levelup-cards, #event-cards {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 11px;
  margin-top: 4px;
}

/* 升级 / 事件卡片 */
.lv-card {
  position: relative;
  min-height: 102px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border-left: 5px solid var(--r-common);
  cursor: pointer;
  overflow: hidden;
  transition: transform .08s ease;
  animation: card-in .25s ease backwards;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.lv-card:active { transform: scale(.97); }
.lv-card:nth-child(2) { animation-delay: .05s; }
.lv-card:nth-child(3) { animation-delay: .1s; }
@keyframes card-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.lv-card.rarity-common { border-left-color: var(--r-common); }
.lv-card.rarity-rare { border-left-color: var(--r-rare); }
.lv-card.rarity-epic { border-left-color: var(--r-epic); }
.lv-card.rarity-legend { border-left-color: var(--r-legend); box-shadow: 0 0 20px rgba(255, 179, 0, .25); }

.lv-card-head { display: flex; align-items: center; gap: 9px; }
.lv-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; flex: 0 0 auto;
}
.lv-name { font-size: 16.5px; font-weight: 900; flex: 1; letter-spacing: 1px; }
.lv-rarity {
  font-size: 11px; font-weight: 800;
  padding: 2px 9px; border-radius: 8px;
  color: #1b1436; letter-spacing: 1px;
}
.rarity-common .lv-rarity { background: var(--r-common); }
.rarity-rare .lv-rarity { background: var(--r-rare); }
.rarity-epic .lv-rarity { background: var(--r-epic); }
.rarity-legend .lv-rarity { background: var(--r-legend); }
.lv-stars { font-size: 12.5px; letter-spacing: 2px; color: var(--gold); margin-top: 4px; }
.lv-stars .dim { color: rgba(255, 255, 255, .22); }
.lv-meta { display: flex; gap: 7px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.lv-tag { padding: 1px 8px; border-radius: 7px; background: rgba(124, 92, 255, .3); color: #d9ccff; font-weight: 700; }
.lv-tag.evo { background: rgba(255, 179, 0, .28); color: #ffe9b3; }
.lv-tag.new { background: rgba(56, 198, 255, .25); color: #cdeeff; }
.lv-tag.supply { background: rgba(139, 224, 164, .25); color: #d6f5e0; }
.lv-desc { margin-top: 5px; font-size: 12.5px; color: #cfc6f2; line-height: 1.55; }
.lv-evolve-hint { color: var(--gold); font-size: 11.5px; margin-top: 3px; }

/* 特殊事件 */
.event-badge {
  padding: 4px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffb300, #ff5db1);
  color: #fff;
  font-size: 13px; font-weight: 900; letter-spacing: 2px;
  box-shadow: 0 4px 16px rgba(255, 93, 177, .4);
  animation: badge-pulse 1s ease-in-out infinite alternate;
}
@keyframes badge-pulse { from { transform: scale(1); } to { transform: scale(1.07); } }

/* 暂停菜单 */
.pause-menu { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* 存档弹窗 */
#save-textarea {
  width: 100%; max-width: 460px; height: 110px;
  border-radius: 12px;
  background: rgba(10, 6, 26, .8);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--text);
  padding: 12px;
  font-size: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  resize: none;
  -webkit-user-select: text; user-select: text;
}
.save-msg { font-size: 12.5px; min-height: 18px; color: var(--gold); }
.save-msg.err { color: #ff8a9b; }
.save-btns { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ============ 结算 ============ */
#result-screen { justify-content: flex-start; padding-top: calc(18px + var(--safe-t)); gap: 11px; }
#result-body {
  width: 100%; max-width: 460px;
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 14px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .45);
}
.result-eval {
  text-align: center;
  padding: 10px 10px 13px;
  border-bottom: 1px dashed rgba(255, 255, 255, .16);
  margin-bottom: 10px;
}
.result-eval .eval-title {
  font-size: 25px; font-weight: 900;
  letter-spacing: 3px;
  background: linear-gradient(90deg, #ffe98a, #ffb300);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 179, 0, .35));
}
.result-eval .eval-desc { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.result-cell {
  background: rgba(10, 6, 26, .35);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: 8px 10px;
}
.result-cell .k { font-size: 11px; color: var(--muted); }
.result-cell .v { font-size: 17px; font-weight: 900; margin-top: 2px; }
.result-cell .v small { font-size: 11px; color: var(--muted); font-weight: 400; }
.result-section-title { font-size: 13px; font-weight: 800; color: #d9ccff; margin: 10px 0 7px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 9px;
  background: rgba(124, 92, 255, .2);
  border: 1px solid rgba(124, 92, 255, .45);
  font-size: 12.5px; font-weight: 700;
}
.chip .stars { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.chip.evo-chip {
  background: rgba(255, 179, 0, .16);
  border-color: rgba(255, 179, 0, .55);
  color: #ffe9b3;
}
.chip.equip-chip {
  background: rgba(139, 224, 164, .14);
  border-color: rgba(139, 224, 164, .5);
  color: #d6f5e0;
}
.result-empty { font-size: 12px; color: var(--muted); }
.result-btns { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.author-link {
  font-size: 12px; color: var(--gold);
  text-decoration: none; letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 9px;
  background: rgba(255, 213, 79, .1);
  border: 1px solid rgba(255, 213, 79, .3);
}
.author-link:active { background: rgba(255, 213, 79, .2); }

/* ============ 图鉴 ============ */
#codex-screen { justify-content: flex-start; padding-top: calc(16px + var(--safe-t)); gap: 10px; }
#codex-tabs {
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 480px;
}
.codex-tab {
  min-height: 40px; padding: 6px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: var(--muted);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.codex-tab.active { background: var(--accent); color: #fff; border-color: transparent; }
#codex-grid {
  width: 100%; max-width: 480px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 62vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: 4px;
}
.codex-cell {
  border-radius: 13px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 4px solid var(--r-common);
  padding: 11px 12px;
  cursor: pointer;
  transition: transform .08s ease;
  min-height: 76px;
}
.codex-cell:active { transform: scale(.96); }
.codex-cell.rarity-rare { border-left-color: var(--r-rare); }
.codex-cell.rarity-epic { border-left-color: var(--r-epic); }
.codex-cell.rarity-legend { border-left-color: var(--r-legend); }
.codex-cell .c-head { display: flex; align-items: center; gap: 7px; }
.codex-cell .c-icon { font-size: 21px; }
.codex-cell .c-name { font-size: 14px; font-weight: 800; flex: 1; }
.codex-cell .c-rarity { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 6px; color: #1b1436; }
.codex-cell .c-type { font-size: 11px; color: var(--muted); margin-top: 4px; }
.codex-cell .c-desc {
  font-size: 11.5px; color: #bdb2dd; margin-top: 4px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#codex-detail-body {
  width: 100%; max-width: 440px;
  max-height: 66vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 18px;
}
.cd-head { display: flex; align-items: center; gap: 12px; }
.cd-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.cd-name { font-size: 19px; font-weight: 900; }
.cd-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cd-rarity { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 8px; color: #1b1436; }
.cd-desc { font-size: 13px; color: #d8cff5; line-height: 1.8; margin-top: 12px; }
.cd-stats { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.cd-stat-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.cd-stat-row .k { width: 76px; color: var(--muted); flex: 0 0 auto; }
.cd-stat-row .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(10, 6, 26, .7); overflow: hidden; }
.cd-stat-row .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #38c6ff, #7c5cff); }
.cd-stat-row .v { width: 44px; text-align: right; font-weight: 800; flex: 0 0 auto; }
.cd-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12px; }
.cd-table th, .cd-table td { padding: 5px 7px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.cd-table th { color: var(--muted); font-weight: 700; }
.cd-table td { font-weight: 700; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* 合成路径可视化 */
.evo-path {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; margin-top: 14px; padding: 12px 8px;
  border-radius: 12px;
  background: rgba(10, 6, 26, .45);
  border: 1px dashed rgba(255, 179, 0, .35);
}
.evo-node {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 74px; padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid rgba(255, 255, 255, .12);
}
.evo-node .en-icon { font-size: 20px; }
.evo-node .en-name { font-size: 11.5px; font-weight: 800; }
.evo-node .en-tag { font-size: 10px; font-weight: 700; color: var(--muted); }
.evo-node.node-base { border-color: rgba(139, 224, 164, .5); }
.evo-node.node-base .en-tag { color: var(--r-common); }
.evo-node.node-req { border-color: rgba(79, 195, 247, .5); }
.evo-node.node-req .en-tag { color: var(--r-rare); }
.evo-node.node-final {
  border-color: rgba(255, 179, 0, .7);
  box-shadow: 0 0 14px rgba(255, 179, 0, .3);
}
.evo-node.node-final .en-tag { color: var(--gold); }
.evo-arrow { font-size: 14px; font-weight: 900; color: var(--gold); padding: 0 2px; }
.cd-canvas { display: block; margin: 12px auto 0; border-radius: 12px; background: rgba(0,0,0,.25); }

/* ============ 成就 ============ */
#ach-screen { justify-content: flex-start; padding-top: calc(16px + var(--safe-t)); gap: 9px; }
#ach-progress { font-size: 13px; color: var(--gold); font-weight: 700; }
#ach-list {
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 9px;
  max-height: 64vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: 4px;
}
.ach-cell {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255, 255, 255, .09);
}
.ach-cell.locked { opacity: .45; }
.ach-icon { font-size: 26px; filter: grayscale(1); }
.ach-cell.unlocked .ach-icon { filter: none; }
.ach-name { font-size: 14.5px; font-weight: 800; }
.ach-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ach-state { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--gold); }
.ach-cell.locked .ach-state { color: var(--muted); }

/* ============ 更新日志 ============ */
#changelog-screen { justify-content: flex-start; padding-top: calc(16px + var(--safe-t)); gap: 10px; }
#changelog-body {
  width: 100%; max-width: 460px;
  max-height: 66vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px;
}
.cl-entry {
  border-radius: 14px;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 14px;
}
.cl-ver { display: flex; align-items: center; gap: 9px; }
.cl-ver b { font-size: 16px; }
.cl-ver .cur { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 7px; background: var(--accent); color: #fff; }
.cl-date { font-size: 11px; color: var(--muted); margin-left: auto; }
.cl-list { margin-top: 9px; padding-left: 18px; font-size: 12.5px; color: #cfc6f2; line-height: 1.9; }

/* ============ 反馈 / 关于 ============ */
.feedback-card, .about-card {
  width: 100%; max-width: 420px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 18px;
  text-align: center;
  display: flex; flex-direction: column; gap: 13px; align-items: center;
  font-size: 13.5px; color: #d8cff5; line-height: 1.9;
}
.mail-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(10, 6, 26, .6);
  border: 1px dashed rgba(255, 213, 79, .45);
}
#mail-addr { font-size: 16px; font-weight: 800; color: var(--gold); font-family: ui-monospace, Menlo, Consolas, monospace; }
.feedback-tip { font-size: 12px; color: var(--muted); }
.about-logo { font-size: 34px; font-weight: 900; letter-spacing: 2px; }
.about-ver { font-size: 12px; color: var(--muted); }

/* ============ Toast ============ */
#toast-wrap {
  z-index: 320;
  position: absolute; top: calc(16px + var(--safe-t)); left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex; flex-direction: column; gap: 7px;
  align-items: center;
  pointer-events: none;
}
.toast {
  padding: 9px 18px;
  border-radius: 11px;
  background: rgba(18, 12, 40, .92);
  border: 1px solid rgba(255, 213, 79, .5);
  color: #ffe9b3;
  font-size: 13px; font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
  animation: toast-in .25s ease, toast-out .3s ease 2.2s forwards;
  max-width: 86vw;
}
.toast.ach { border-color: rgba(255, 213, 79, .8); color: var(--gold); }
.toast.warn { border-color: rgba(255, 138, 91, .8); color: #ffc9a8; }
@keyframes toast-in { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }

/* ============ 小屏微调 ============ */
@media (max-height: 660px) {
  .title-main { font-size: clamp(38px, 13vw, 58px); }
  .char-card { min-height: 92px; }
  .lv-card { min-height: 86px; padding: 10px 12px; }
  #joy-base { width: 112px; height: 112px; }
  #joy-knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  #stage-grid { max-height: 48vh; }
}

/* ============================================================
   v2.1.0 新增样式：加载进度 / 作者署名 / 大招按钮 / 背包 / 设置
   / buff 详情浮层 / 天赋合成路径提示 / 昵称输入
   ============================================================ */

/* ---------- 启动加载 ---------- */
#boot-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(circle at 50% 38%, #2b2060 0%, #120e28 72%);
  transition: opacity .3s ease;
}
#boot-overlay.done { opacity: 0; pointer-events: none; }
#boot-overlay.hidden { display: none; }
/* v3.3：加载过渡动画 —— Logo 呼吸 + 能量环旋转 + 进度条流光 */
.boot-logo { animation: boot-breathe 1.6s ease-in-out infinite; }
@keyframes boot-breathe {
  0%, 100% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.045); opacity: 1; }
}
.boot-ring {
  position: relative; width: 54px; height: 54px;
}
.boot-ring i {
  position: absolute; inset: 0;
  border: 2.5px solid transparent;
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: boot-spin 1.1s linear infinite;
}
.boot-ring i:nth-child(2) {
  inset: 8px;
  border-top-color: #7c5cff;
  animation-duration: .85s;
  animation-direction: reverse;
}
.boot-ring i:nth-child(3) {
  inset: 16px;
  border-top-color: #ff5db1;
  animation-duration: .65s;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
.boot-bar i {
  background-image: linear-gradient(90deg, #7c5cff, #ff5db1 60%, #ffd54f);
  background-size: 200% 100%;
  animation: boot-flow 1.2s ease-in-out infinite;
}
@keyframes boot-flow {
  0% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
#boot-overlay.done .boot-logo,
#boot-overlay.done .boot-ring,
#boot-overlay.done .boot-bar { animation: none; }
.boot-logo {
  font-size: clamp(34px, 11vw, 52px); font-weight: 900; letter-spacing: 2px;
  color: #fff; text-shadow: 0 4px 18px rgba(124, 92, 255, .6);
}
.boot-logo .title-num { color: var(--gold); }
.boot-bar {
  width: min(64vw, 260px); height: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}
.boot-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #7c5cff, #ff5db1 60%, #ffd54f);
  border-radius: 99px; transition: width .25s ease;
}
#boot-text { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.boot-author { font-size: 11px; color: rgba(255, 213, 79, .8); letter-spacing: 2px; margin-top: 4px; }

/* ---------- 作者署名 ---------- */
.author-badge {
  margin-top: 10px; font-size: 12px; color: rgba(255, 213, 79, .92);
  letter-spacing: 1px; text-align: center;
}
.author-badge.small { font-size: 11px; opacity: .8; margin-top: 6px; }
.author-badge .author-link { color: var(--gold); }
.about-author { color: var(--gold); margin: 8px 0; font-size: 14px; }
.pause-tip { font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; line-height: 1.6; }

/* ---------- 大招按钮 ---------- */
.ult-btn {
  position: absolute; right: 14px; bottom: calc(18px + var(--safe-b));
  width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid rgba(255, 213, 79, .45);
  background: radial-gradient(circle at 50% 35%, rgba(124, 92, 255, .55), rgba(20, 14, 44, .92));
  color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; z-index: 12; box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  pointer-events: auto;   /* HUD 整体 pointer-events:none，按钮需单独开启 */
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.ult-btn .ult-icon { font-size: 22px; line-height: 1; }
.ult-btn .ult-name { font-size: 10px; font-weight: 800; letter-spacing: 1px; opacity: .9; }
.ult-btn .ult-energy {
  position: absolute; left: 8px; right: 8px; bottom: 6px; height: 4px;
  border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden;
}
.ult-btn .ult-energy i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #ffd54f, #ff5db1); transition: width .18s ease; }
.ult-btn.ready { border-color: var(--gold); box-shadow: 0 0 20px rgba(255, 213, 79, .55), 0 8px 22px rgba(0, 0, 0, .45); animation: ult-pulse 1.2s ease-in-out infinite; }
.ult-btn.cooling { opacity: .55; animation: none; }
@keyframes ult-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- 状态栏 buff 图标 ---------- */
#event-buffs {
  position: absolute; left: 12px; bottom: calc(14px + var(--safe-b));
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 62vw; z-index: 10;
}
#event-buffs .buff-icon {
  width: 30px; height: 30px; padding: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 22, 62, .82); border: 1px solid rgba(255, 213, 79, .35);
  font-size: 15px; color: var(--text); font-weight: 700; white-space: nowrap;
  cursor: pointer; transition: transform .12s ease; pointer-events: auto;
}
#event-buffs .buff-icon:active { transform: scale(.92); }

/* ---------- buff 详情浮层 ---------- */
#buff-popover {
  position: fixed; z-index: 400; width: 200px;
  background: var(--panel-2); border: 1px solid rgba(255, 213, 79, .38);
  border-radius: 14px; padding: 10px 12px; font-size: 12px; line-height: 1.6;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55); pointer-events: none;
}
#buff-popover.hidden { display: none; }
.pop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pop-icon { font-size: 17px; }
.pop-name { font-weight: 900; color: var(--gold); font-size: 13px; }
.pop-row { display: flex; gap: 8px; color: var(--muted); }
.pop-row b { color: var(--text); font-weight: 700; flex: 1; }

/* ---------- 背包 / 设置 ---------- */
#backpack-body { max-height: 58vh; overflow-y: auto; text-align: left; padding: 0 2px; }
#backpack-body .result-section-title { text-align: left; }
.settings-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  font-size: 13px; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.settings-row label { width: 76px; text-align: left; color: var(--muted); flex: none; }
.settings-row input[type=range] { flex: 1; accent-color: var(--accent-2); }
.settings-row select {
  flex: 1; background: rgba(20, 14, 44, .9); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; padding: 7px 8px; font-size: 13px;
}
.settings-row span { width: 34px; text-align: right; color: var(--gold); font-weight: 700; font-size: 12px; }
.settings-tip { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.6; }

/* ---------- 天赋合成路径提示 ---------- */
.merge-box { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.merge-row {
  font-size: 11px; line-height: 1.5; padding: 4px 7px; border-radius: 8px;
  background: rgba(255, 255, 255, .05); border-left: 3px solid rgba(255, 255, 255, .18);
  color: rgba(200, 192, 232, .78);
}
.merge-row.locked { opacity: .68; }
.merge-row.ready {
  background: rgba(255, 213, 79, .16); border-left-color: var(--gold);
  color: #ffe9b3; font-weight: 700;
}
.lv-card.talent-card { box-shadow: 0 0 0 1px rgba(255, 213, 79, .45), 0 10px 26px rgba(0, 0, 0, .4); }

/* ---------- v3.2 轻量动画（纯 CSS，无 JS 定时器，稳定） ---------- */
@keyframes card-gain {
  0% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(255, 213, 79, .0); }
  45% { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(255, 213, 79, .55); }
  100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(255, 213, 79, .3); }
}
.lv-card.gain { animation: card-gain .42s ease-out; }
@keyframes buff-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
#event-buffs .buff-icon.pulse { animation: buff-pop .4s ease-out; }
@keyframes coin-pop {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-10px) scale(1.15); opacity: .4; }
}
#hud-coins.bump { animation: coin-pop .4s ease-out; }
.loop-info { font-size: 12px; color: var(--gold); font-weight: 700; }
#btn-reroll { align-self: center; }
#btn-revive { align-self: center; margin-bottom: 8px; }
.lv-tag.talent { background: rgba(255, 213, 79, .2); color: var(--gold); }
.chip.temp-chip { border-style: dashed; opacity: .88; }

/* ---------- 昵称输入 ---------- */
.nickname-row {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  background: rgba(30, 22, 62, .6); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px; padding: 8px 12px;
}
.nickname-row label { font-size: 12px; color: var(--muted); flex: none; }
.nickname-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: 16px; font-weight: 700; text-align: left;
  border-bottom: 1px dashed rgba(255, 213, 79, .35); padding: 2px 0;
}
.nickname-row .text-btn { flex: none; font-size: 12px; padding: 4px 8px; }
.result-save-tip { margin-top: 12px; font-size: 11px; color: var(--muted); line-height: 1.6; text-align: center; }

/* ============================================================
   v2.2.0 新增样式：局外成长 / 账号 / 登录教程 / 局内佩戴展示
   ============================================================ */

/* ---------- HUD 佩戴徽标 ---------- */
#hud-meta { display: flex; flex-direction: column; gap: 3px; }
.hud-meta-chip {
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  background: rgba(30, 22, 62, .82); border: 1px solid rgba(255, 213, 79, .35);
  color: var(--gold); border-radius: 8px; padding: 2px 6px; white-space: nowrap;
}
.hud-meta-chip.title { color: #ffd7f0; border-color: rgba(255, 93, 177, .4); }
.hud-meta-chip.hidden { display: none; }

/* ---------- 局外成长 ---------- */
.meta-head {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  background: rgba(30, 22, 62, .6); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; padding: 10px 14px; margin-bottom: 10px;
}
.meta-coins { font-size: 15px; font-weight: 800; color: var(--text); }
.meta-coins b { color: var(--gold); font-size: 20px; }
.meta-rule { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.6; }
.meta-rule b { color: var(--gold); }
.meta-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.meta-tab {
  flex: 1; max-width: 160px; padding: 9px 0; border-radius: 12px; font-size: 13px; font-weight: 800;
  background: rgba(30, 22, 62, .7); color: var(--muted); border: 1px solid rgba(255, 255, 255, .12);
}
.meta-tab.active { background: rgba(124, 92, 255, .3); color: #fff; border-color: rgba(255, 213, 79, .5); }
#meta-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto; padding: 0 2px;
}
.meta-card {
  text-align: left; background: rgba(30, 22, 62, .72);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 10px 12px;
}
.meta-card.equipped { border-color: rgba(255, 213, 79, .6); box-shadow: 0 0 0 1px rgba(255, 213, 79, .25) inset; }
.meta-card-head { display: flex; align-items: center; gap: 8px; }
.meta-icon { font-size: 20px; }
.meta-name { font-size: 14px; font-weight: 800; flex: 1; }
.meta-on { font-size: 10px; font-weight: 800; color: #1b1436; background: var(--gold); border-radius: 6px; padding: 2px 6px; }
.meta-desc { font-size: 11.5px; color: var(--muted); margin: 5px 0 8px; line-height: 1.5; }
.meta-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meta-lock { font-size: 11px; color: #ff9a8b; }
.meta-btn {
  padding: 7px 14px; border-radius: 10px; font-size: 12px; font-weight: 800; min-height: 34px;
  background: linear-gradient(180deg, #8a6bff, #5f3fd6); color: #fff; border: 1px solid rgba(255, 255, 255, .2);
}
.meta-btn:disabled { opacity: .45; }
.meta-btn.on { background: linear-gradient(180deg, #ffd54f, #ffab00); color: #2a1f00; }
.title-edit {
  display: none; align-items: center; gap: 8px; margin-top: 10px;
  background: rgba(30, 22, 62, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 8px 10px;
}
.title-edit label { font-size: 11px; color: var(--muted); flex: none; }
.title-edit input {
  flex: 1; background: rgba(20, 14, 44, .8); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px; color: var(--text); font-size: 16px; padding: 8px 10px; min-height: 36px;
}
.title-edit .menu-btn { min-height: 36px; }
.meta-tip { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 10px; text-align: center; }

/* ---------- 账号 ---------- */
.acc-card {
  background: rgba(30, 22, 62, .66); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
}
.acc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.acc-row label { font-size: 13px; color: var(--muted); flex: none; }
.acc-row input {
  flex: 1; background: rgba(20, 14, 44, .8); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px; color: var(--text); font-size: 16px; font-weight: 700; padding: 9px 10px; min-height: 40px;
}
.acc-stat { font-size: 12px; color: var(--muted); line-height: 1.9; }
.acc-stat b { color: var(--gold); }
.acc-btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.acc-io {
  background: rgba(30, 22, 62, .66); border: 1px solid rgba(255, 213, 79, .3);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; text-align: left;
}
.acc-io.hidden { display: none; }
.acc-io label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.acc-io textarea {
  width: 100%; min-height: 84px; background: rgba(20, 14, 44, .9); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: 8px; font-size: 16px;
  font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all;
}
.acc-io-btns { display: flex; gap: 8px; margin-top: 8px; }
.acc-note {
  font-size: 11px; color: #ffc9a8; background: rgba(255, 93, 107, .1);
  border: 1px solid rgba(255, 138, 91, .35); border-radius: 12px; padding: 9px 11px; line-height: 1.7;
  text-align: left; margin-bottom: 10px;
}

/* ---------- 登录教程 ---------- */
.guide-body { max-height: 60vh; overflow-y: auto; text-align: left; font-size: 12.5px; line-height: 1.75; color: var(--text); }
.guide-body h3 { font-size: 13.5px; color: var(--gold); margin: 12px 0 6px; }
.guide-body h3:first-child { margin-top: 0; }
.guide-body p, .guide-body li { color: var(--muted); }
.guide-body b { color: var(--text); }
.guide-body code { background: rgba(124, 92, 255, .22); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.guide-body ol, .guide-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- v2.2.1 未解锁技能锁定态 ---------- */
.skill-icon.locked { opacity: .5; filter: grayscale(.7); border-color: rgba(255, 138, 91, .5); }
.skill-icon.locked .lv { background: rgba(255, 138, 91, .85); color: #2a1000; }

/* ============================================================
   v3.0 新增：天赋侧边栏 / 屏幕方向提示 / 横屏适配
   ============================================================ */

/* ---------- 天赋侧边栏 ---------- */
#talent-panel {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 14; display: flex; align-items: center; pointer-events: none;
  transition: transform .22s ease;
}
#talent-panel .talent-tab-btn {
  pointer-events: auto;
  width: 30px; height: 46px; border-radius: 0 12px 12px 0;
  background: rgba(30, 22, 62, .9); border: 1px solid rgba(255, 213, 79, .4);
  border-left: none; color: #ffe9b3; font-size: 15px;
}
#talent-panel .talent-body {
  pointer-events: auto;
  width: 0; overflow: hidden; transition: width .22s ease;
  background: rgba(18, 12, 40, .88); border: 1px solid rgba(255, 255, 255, .12);
  border-left: none; border-radius: 0 14px 14px 0;
  max-height: 62vh; overflow-y: auto;
}
#talent-panel:not(.collapsed) .talent-body { width: 176px; }
#talent-panel .talent-head {
  font-size: 11px; font-weight: 800; color: var(--gold);
  padding: 9px 10px 4px; letter-spacing: 1px;
}
#talent-list { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 9px; }
.talent-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: 9px; background: rgba(255, 255, 255, .05);
  cursor: pointer; font-size: 11px;
}
.talent-item:active { background: rgba(124, 92, 255, .25); }
.talent-item .ti-icon { font-size: 14px; }
.talent-item .ti-name { flex: 1; color: #f5f2ff; font-weight: 700; }
.talent-item .ti-stack { color: var(--gold); font-weight: 800; font-size: 10px; }
.talent-item.talent-final { background: rgba(255, 213, 79, .16); border: 1px solid rgba(255, 213, 79, .35); }
#talent-panel .talent-empty { font-size: 10.5px; color: var(--muted); padding: 4px 2px 8px; line-height: 1.6; }

/* ---------- 屏幕方向提示 ---------- */
#rotate-hint {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(12, 9, 26, .96); color: #ffe9b3; font-size: 15px; font-weight: 800; letter-spacing: 1px;
}
#rotate-hint.hidden { display: none; }
.rotate-icon { font-size: 52px; animation: rotate-hint 1.6s ease-in-out infinite; }
@keyframes rotate-hint { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }

/* ---------- 横屏适配 ---------- */
#game-root.landscape #hud-top { padding: calc(6px + var(--safe-t)) 14px 0 14px; }
#game-root.landscape #hud-bars { flex-direction: row; gap: 8px; }
#game-root.landscape #hp-bar-wrap { width: 130px; height: 15px; }
#game-root.landscape #skill-icons { top: 8px; right: 8px; transform: none; flex-direction: row; flex-wrap: wrap; max-width: 46vw; justify-content: flex-end; }
#game-root.landscape .skill-icon { width: 34px; height: 34px; font-size: 17px; }
#game-root.landscape #event-buffs { left: 10px; bottom: 10px; max-width: 30vw; }
#game-root.landscape .ult-btn { width: 64px; height: 64px; right: 12px; bottom: 12px; }
#game-root.landscape #talent-panel { top: 58%; }
#game-root.landscape .buff-icon { width: 26px; height: 26px; font-size: 13px; }

/* ---------- v3.0 输入保护：禁止长按选中 / 放大 ---------- */
#game-root { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#game-root input, #game-root textarea {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  /* v3.4：iOS Safari 聚焦 font-size<16px 的输入框会自动放大页面，导致布局错位；
     统一兜底为 16px（各输入框样式也已单独设置） */
  font-size: 16px;
}
#game-root textarea { pointer-events: auto; }


/* ============================================================
   v3.2 自适应布局（内容显示不全修复）
   · 屏幕与弹窗统一用 flex + min-height:0，内容区可滚动
   · 标题/正文用 clamp() 随视口收缩，避免小屏截断
   · 安全区（刘海/home 条）纳入 padding
   ============================================================ */
.screen, .modal {
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;   /* v3.4：显式允许垂直滚动（双保险） */
}
.screen > *, .modal > * { flex-shrink: 0; }
.screen-title { font-size: clamp(18px, 5.4vw, 24px); }
.modal-title { font-size: clamp(19px, 5.6vw, 24px); }
.modal-sub { font-size: clamp(11px, 3.2vw, 13px); }
#result-body, #backpack-body, #codex-grid, #meta-list, .guide-body {
  max-height: min(52vh, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;   /* v3.4：补上缺失的 pan-y（此前这些容器在手机端滑不动） */
}
.result-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.result-cell .k { font-size: clamp(10px, 2.9vw, 12px); }
.result-cell .v { font-size: clamp(12px, 3.4vw, 14px); }
.lv-card { padding: clamp(9px, 2.6vw, 13px); }
.lv-desc, .meta-desc { font-size: clamp(10.5px, 2.9vw, 12.5px); }
.chip { font-size: clamp(10px, 2.8vw, 12px); }
.chip-wrap { max-height: 30vh; overflow-y: auto; }
#title-tip, .title-tip { font-size: clamp(10px, 2.9vw, 12px); }
.title-logo { max-width: 92vw; }
.title-main { font-size: clamp(38px, 12vw, 76px); }
.big-btn { min-height: 46px; font-size: clamp(13px, 3.6vw, 15px); }
.menu-btn { min-height: 44px; font-size: clamp(12px, 3.3vw, 14px); }

/* 矮屏（横屏手机 / 小窗口）：进一步压缩留白 */
@media (max-height: 520px) {
  .screen { gap: 8px; padding: 10px 12px calc(10px + var(--safe-b)); }
  .screen-title { font-size: 18px; }
  #result-body, #backpack-body, #codex-grid, #meta-list { max-height: 42vh; }
  .title-menu { gap: 6px; }
  .modal { gap: 8px; padding: 10px 12px calc(10px + var(--safe-b)); }
}

/* 宽屏（电脑）：限制内容宽度，避免超宽拉伸 */
@media (min-width: 720px) {
  .screen > *, .modal > * { max-width: 560px; width: 100%; }
  #result-body, #backpack-body, #codex-grid, #meta-list { max-height: 56vh; }
}

/* ============================================================
   v4.0 局域网联机界面
   ============================================================ */
.net-mode-row { display: flex; gap: 10px; width: 100%; max-width: 420px; }
.net-mode-btn {
  flex: 1; padding: 12px 0; border-radius: 14px; font-size: 14px; font-weight: 800;
  background: rgba(30, 22, 62, .72); color: var(--muted);
  border: 1px solid rgba(255, 255, 255, .12);
}
.net-mode-btn.active {
  background: linear-gradient(135deg, rgba(124, 92, 255, .45), rgba(64, 196, 255, .3));
  color: #fff; border-color: rgba(255, 213, 79, .5);
}
.net-row {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px;
}
.net-row label { font-size: 12px; color: var(--muted); flex: none; }
.net-row input, .net-row select {
  flex: 1; background: rgba(20, 14, 44, .8); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px; color: var(--text); font-size: 16px; padding: 9px 10px; min-height: 40px;
}
.net-panel {
  width: 100%; max-width: 460px; text-align: left;
  background: rgba(30, 22, 62, .6); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.net-panel.hidden { display: none; }
.net-panel-title { font-size: 12px; font-weight: 800; color: var(--gold); letter-spacing: .5px; }
.net-panel textarea {
  width: 100%; min-height: 66px; background: rgba(12, 8, 28, .9); color: #cfe8ff;
  border: 1px solid rgba(124, 92, 255, .35); border-radius: 10px; padding: 8px;
  font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all; resize: vertical;
}
.net-qr-row { display: flex; align-items: center; gap: 10px; justify-content: center; }
.net-qr-row canvas {
  background: #fff; border-radius: 8px; padding: 4px; max-width: 190px; max-height: 190px;
  image-rendering: pixelated;
}
.net-hint { font-size: 11px; color: var(--muted); text-align: center; }
.net-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.net-btns .big-btn { flex: 1 1 150px; }
.net-status { font-size: 12px; color: var(--gold); min-height: 18px; text-align: center; line-height: 1.6; }
.net-note {
  font-size: 11px; color: var(--muted); line-height: 1.7; text-align: left;
  background: rgba(255, 255, 255, .05); border-radius: 10px; padding: 8px 10px; max-width: 460px;
}
.net-member {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 7px 9px; border-radius: 10px; background: rgba(255, 255, 255, .05); margin-bottom: 6px;
}
.net-member .nm { flex: 1; font-weight: 700; }
.net-member .tm { font-size: 11px; font-weight: 800; }
.net-member .rd { font-size: 11px; color: #8be0a4; }
.net-member .off { font-size: 11px; color: #ff8a80; }

/* 对局内联机 HUD */
#net-hud {
  position: absolute; top: calc(52px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  z-index: 22; display: flex; gap: 12px; align-items: center;
  background: rgba(18, 12, 40, .78); border: 1px solid rgba(124, 92, 255, .45);
  border-radius: 99px; padding: 5px 14px; font-size: 11.5px; font-weight: 700; color: #d9e4ff;
  pointer-events: none;
}
#net-hud.hidden { display: none; }
#net-hud span { white-space: nowrap; }

/* v4.2：联机对局提示浮层（全局暂停 / 倒下观战） */
#net-tip {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  z-index: 21; max-width: 82%; text-align: center;
  background: rgba(18, 12, 40, .88); border: 1px solid rgba(124, 92, 255, .55);
  border-radius: 14px; padding: 12px 20px;
  font-size: 14px; font-weight: 800; color: #d9e4ff; line-height: 1.6;
  pointer-events: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
#net-tip.hidden { display: none; }

/* 联机结算 */
#net-result-body { width: 100%; max-width: 460px; }
.net-result-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 7px;
  border-radius: 12px; background: rgba(30, 22, 62, .7); border: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
}
.net-result-row .rk { font-weight: 800; flex: 1; }
.net-result-row .rt { font-size: 11px; font-weight: 800; }
.net-result-row .rs { font-size: 12px; color: var(--muted); }
.net-result-win { color: #8be0a4; font-weight: 800; font-size: 14px; text-align: center; margin-bottom: 8px; }

/* ============================================================
   v4.0 短屏 / 横屏适配（标题页按钮数增加后需要更紧凑）
   ============================================================ */
@media (max-height: 480px) {
  .screen { gap: 8px; padding-top: 10px; }
  .title-main { font-size: clamp(28px, 7vh, 44px); }
  .title-sub { font-size: 11px; }
  .big-btn { min-height: 38px; padding: 8px 14px; }
  .menu-btn { min-height: 36px; padding: 6px 12px; font-size: 12.5px; border-radius: 11px; }
  .title-menu { gap: 6px; }
  .title-tip { display: none; }
  .author-badge { display: none; }
  #version-badge { padding: 2px 9px; font-size: 10.5px; }
  .screen-title { font-size: 17px; }
  .net-mode-btn { padding: 8px 0; }
  .net-panel textarea { min-height: 50px; }
}
@media (max-height: 380px) {
  .title-logo { display: none; }      /* 极矮屏：标题让位给功能按钮 */
  .menu-btn { min-height: 32px; font-size: 12px; }
  .title-menu { gap: 5px; }
}