/* styles.css — art v3 (Clean Flat Modern) verbatim :root + implementation */
:root{
  /* 基础（纯扁平 / 浅色） */
  --bg-page:#FAFAFA; --surface:#FFFFFF; --surface-raised:#FFFFFF;
  --border:#E5E7EB;
  --text-primary:#1F2328; --text-secondary:#6B7280; --text-hint:#9CA3AF;
  --primary:#5A4632; --primary-hover:#6E563E; --accent:#64748B;
  --focus-ring:#C9A227; --overlay:rgba(17,24,39,.45);
  /* 稀有度 主色 / tint / 深字（保持不动） */
  --r-white:#9C958A; --r-white-tint:#F3F4F6;
  --r-green:#3DA35D; --r-green-tint:#EAF5EE; --r-green-text:#1E7A3E;
  --r-blue:#2F7BE0;  --r-blue-tint:#E8F0FC;  --r-blue-text:#1F5FB8;
  --r-purple:#8B5CF6;--r-purple-tint:#F1EAFC; --r-purple-text:#6D28D9;
  --r-orange:#E8821E;--r-orange-tint:#FDF0E1; --r-orange-text:#B45309;
  --r-red:#E5484D;   --r-red-tint:#FCEAEA;   --r-red-text:#C12A2F;
  /* 属性条 */
  --bar-hp:#E5484D; --bar-mp:#2F7BE0; --bar-exp:#E0A526; --bar-track:#EDE6D8;
  /* 间距/圆角/阴影（扁平） */
  --radius-card:10px; --radius-btn:8px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(17,24,39,.04);
  /* 扁平优先用描边分层，阴影仅极淡兜底，无 --shadow-md 柔光 */
  /* 风格 A（紧凑扁平）按钮设计令牌：尺寸收紧 + 字小 + hover 浮起 / active 按下反馈 */
  --btn-h:34px; --btn-py:7px; --btn-px:14px; --btn-fs:0.85rem; --btn-weight:600;
  --btn-hover-bg:#F1ECE6; --btn-hover-border:#D8CFC4; --btn-hover-shadow:0 1px 2px rgba(17,24,39,.06);   --btn-hover-tf:translateY(-1px);
  --btn-active-tf:translateY(0) scale(.97); --btn-active-shadow:none;
  /* 装备名字体：LJR 同款 Tahoma/Verdana/Arial 系（中文回落系统黑体），加粗即 LJR 表达 */
  --font-item:"PingFang SC","Microsoft YaHei","Noto Sans SC",Tahoma,Verdana,Arial,sans-serif;
}

* { box-sizing: border-box; }
html { font-size: clamp(15px, 0.9rem + 0.3vw, 17px); }
body {
  margin: 0;
  font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: clamp(1.5rem,1.2rem + 1.5vw,2rem); font-weight:700; line-height:1.3; margin:0; }
h2 { font-size: clamp(1.25rem,1.1rem + 0.8vw,1.5rem); font-weight:700; line-height:1.35; margin:0; }
h3 { font-size:1.125rem; font-weight:600; }
.value { font-size:1rem; font-weight:600; font-variant-numeric: tabular-nums; }
.tiny { font-size:0.875rem; color:var(--text-secondary); }
/* small gray text per art v3 §3.2 (0.75–0.875rem) */
.hint { font-size:0.8125rem; color:var(--text-hint); margin:8px 0 0; }

/* Status head: refined compact level badge + survival bars */
.status-head { display:flex; gap:14px; align-items:center; }
.lv-badge {
  flex: 0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:56px; padding:7px 10px;
  border-radius:12px;
  background: linear-gradient(135deg, #FBF8F2, #F1E9DC);
  border:1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.16);
  line-height:1;
}
.lv-cap { font-size:0.58rem; letter-spacing:0.22em; color:var(--text-secondary); font-weight:700; margin-bottom:2px; }
.lv-badge .value { font-size:1.4rem; font-weight:800; color:var(--primary); line-height:1; }
.bars-col { flex:1; min-width:0; }
/* 状态头左侧：玩家昵称（注册用户名，位于等级上方）+ 等级徽章 纵向堆叠 */
.status-id { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
/* 等级徽章 + 紧凑经验条 同行，避免首页经验条过长 */
.lv-exp { display:flex; align-items:center; gap:8px; width:230px; }
.lv-exp .lv-badge { flex:0 0 auto; }
.lv-exp-track { flex:1; min-width:0; height:8px; border-radius:var(--radius-pill); background:var(--bar-track); overflow:hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); }
.lv-exp-track > span { display:block; height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg, #F4CB63, var(--bar-exp)); transition:width .35s ease; }
.lv-exp-num { flex:0 0 auto; font-size:0.68rem; color:var(--text-hint); font-variant-numeric:tabular-nums; white-space:nowrap; }
.player-name { display:inline-flex; align-items:center; gap:6px; max-width:100%; }
.pn-label { font-size:0.6rem; letter-spacing:0.18em; color:var(--text-hint); font-weight:700; }
.pn-value {
  font-size:0.95rem; font-weight:800; color:var(--primary);
  max-width:116px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pn-edit {
  flex:0 0 auto; width:22px; height:22px; padding:0; border-radius:6px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-secondary);
  font-size:0.8rem; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pn-edit:hover { background:var(--btn-hover-bg); border-color:var(--btn-hover-border); color:var(--primary); }
.pn-input {
  font:inherit; font-size:0.92rem; font-weight:700; color:var(--primary);
  width:116px; padding:2px 6px; border:1px solid var(--primary); border-radius:6px;
  background:var(--surface); outline:none;
}
.pn-input:focus { box-shadow:0 0 0 2px var(--focus-ring); }
/* 收紧状态头内的条标签字号与间距，整体更精巧 */
.status-head .bar-label { font-size:0.78rem; margin-bottom:3px; }
.status-head .bar-label .value { font-size:0.78rem; }
.status-head .bar { height:9px; }
.status-head .bar-label.mt { margin-top:7px; }
.status-head .tiny { font-size:0.72rem; }

/* Attribute detail: 三组（一维/二维/战斗属性）垂直堆叠 (req: 区分) */
.attr-grid { display:flex; flex-direction:column; gap:14px; }
.attr-group { border:1px solid var(--border); border-radius:10px; padding:8px 12px; background:var(--surface); }
.attr-group-title { font-size:0.75rem; font-weight:700; color:var(--text-secondary); letter-spacing:0.04em; margin-bottom:4px; padding-bottom:4px; border-bottom:1px dashed var(--border); }
/* 战斗属性：名称 + 数值（含括号拆解）同行左对齐，数值不右对齐（参考 LJR 怀旧版） */
.attr-pair { display:flex; align-items:baseline; justify-content:flex-start; gap:6px; padding:2px 0; flex-wrap:wrap; }
.attr-name { font-size:0.8125rem; color:var(--text-secondary); }
.attr-val { font-size:0.875rem; font-weight:600; font-variant-numeric: tabular-nums; display:inline; }
.attr-sub { font-size:0.7rem; font-weight:500; color:var(--text-hint); }

/* Equipment card typography (req 3): icon focus, name 1.125rem, sub small */
.eq-name { font-size:1.125rem; font-weight:600; display:flex; align-items:center; gap:6px; }
.eq-sub { font-size:0.8125rem; color:var(--text-secondary); margin-top:2px; }
.eq-card .icon svg { display:block; }
.eq-card .icon { flex:0 0 auto; align-self:flex-start; }

/* Layout: mobile-first single column; desktop wide (nav top-right, main full width) */
.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 32px;
  min-height: 100vh;
}
@media (min-width: 768px) {
  .app {
    max-width: 1100px;
    padding: 20px 24px 32px;
  }
}

/* 站点标题横幅（高大上）：徽记 + 主标题 + 副标题；扁平现代、暖墨棕 + 金色点缀 */
.site-header {
  display:flex; align-items:center; gap:14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #FBF8F2, #F2EADE);
  border:1px solid var(--border);
  border-top:3px solid var(--focus-ring);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.site-emblem { width:46px; height:46px; flex:0 0 auto; color: var(--focus-ring); }
.site-emblem svg { width:100%; height:100%; display:block; }
.site-titles { display:flex; flex-direction:column; gap:3px; min-width:0; }
.site-title {
  margin:0; line-height:1.05;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2rem);
  font-weight:800; letter-spacing:0.04em; color:var(--primary);
}
.site-title-accent { color: var(--focus-ring); letter-spacing:0.08em; }
.site-subtitle {
  margin:0;
  font-size:0.7rem; font-weight:700; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--text-secondary);
}
@media (min-width: 768px) {
  .site-header { padding: 16px 20px; gap:16px; }
  .site-emblem { width:52px; height:52px; }
}

/* 顶部导航：所有导航按钮放网页上方；电脑端右上堆叠 */
.topnav { margin-bottom: 14px; }
@media (min-width: 768px) {
  .topnav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
}
@media (max-width: 767px) {
  .topnav { display: block; }
}

/* Panels / cards */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 13px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* 面板标题：精炼化 —— 缩小字号、暖墨棕、左侧色条，比默认 h2 更克制美观 */
.panel h2 {
  font-size:1.05rem; font-weight:700; color:var(--primary);
  margin-bottom:10px; padding-left:9px; line-height:1.3;
  border-left:3px solid var(--primary);
}

/* Buttons — 风格 A：紧凑 + 小字 + hover 浮起/提亮 + active 按下回弹 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--btn-h);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--btn-fs);
  font-weight: var(--btn-weight);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  box-shadow: var(--btn-hover-shadow);
  transform: var(--btn-hover-tf);
}
.btn:active {
  transform: var(--btn-active-tf);
  box-shadow: var(--btn-active-shadow);
}
.btn-primary { background: var(--primary); color:#fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: #C0453B; color:#fff; border-color:#C0453B; }
.btn-ghost { background: transparent; }
.btn:disabled { background:#EDE6D8; color:var(--text-hint); cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Combat action buttons — rendered INLINE at the bottom of the combat screen,
   directly under the battle log, so they stay close to their context instead of a
   far-away pinned bar. Attack is the primary action: full-width on phones, inline on desktop. */
.combat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.combat-actions .act-attack { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .combat-actions { grid-template-columns: repeat(4, 1fr); }
  .combat-actions .act-attack { grid-column: auto; }
}

/* Tabs (top nav, mobile & desktop share) — 风格 A：紧凑胶囊 + hover/active 反馈 */
.tabs { display:flex; gap:6px; overflow-x:auto; padding-top:4px; padding-bottom:8px; margin-bottom:0; -webkit-overflow-scrolling:touch; }
.tab {
  flex: 0 0 auto;
  min-height: var(--btn-h);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.tab:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  box-shadow: var(--btn-hover-shadow);
  transform: var(--btn-hover-tf);
}
.tab:active { transform: scale(.96); }
.tab.active { background: var(--primary); color:#fff; border-color: var(--primary); }
.tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset:2px; }
.tab:disabled { opacity:0.4; cursor:not-allowed; transform:none !important; }

/* 布告栏滚动播报条：单行横向循环滚动；两端方形小圆角（用户 2026-08-28 定，不用胶囊） */
.ticker {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 0;
  white-space: nowrap;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}
@media (min-width: 768px) {
  /* 桌面端：滚动条占主内容宽度的 100%（与页面同宽），避免长公告撑破版面 */
  .ticker { width: 100%; }
}
.ticker:empty { display: none; }
.ticker-inner { display: inline-block; padding: 5px 14px; animation: ticker-scroll 45s linear infinite; }
/* 鼠标悬停时暂停轮动，方便阅读 */
.ticker:hover .ticker-inner { animation-play-state: paused; }
.ticker-text { font-size: 0.8rem; color: var(--text-secondary); }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 767px) { .ticker { margin-top: 6px; } }

/* Small button variant (combat banner) — 风格 A 紧凑 */
.btn-sm { min-height:32px; padding:6px 12px; font-size:0.82rem; line-height:1.2; }

/* Combat-in-progress banner (shown when battle is paused to view other screens) */
.combat-banner {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; margin-bottom:14px;
  background: var(--r-red-tint); border:1px solid var(--r-red); border-radius: var(--radius-card);
  font-size:0.9rem; font-weight:600; color: var(--r-red-text);
}
.combat-banner .cb-text { min-width:0; }
@media (max-width:480px){ .combat-banner { flex-direction:column; align-items:stretch; gap:8px; } }

/* Settlement 条形（战斗结算：经验/银币进度条 + 装备行列表） */
.settle-bars { display:flex; flex-direction:column; gap:14px; margin:6px 0 4px; }
.settle-bar .sb-head { display:flex; justify-content:space-between; align-items:baseline; font-size:0.95rem; font-weight:600; margin-bottom:6px; }
.settle-bar .sb-val { font-size:1.1rem; font-weight:800; color:var(--primary); }
.settle-bar .bar { height:14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.settle-bar .sb-sub { font-size:0.72rem; color:var(--text-hint); margin-top:5px; }
.bar-gold > span { background: linear-gradient(90deg, #F3C969, #E0A93B); }
.settle-eq-wrap { margin-top:14px; }
.settle-eq-title { font-size:0.85rem; font-weight:700; color:var(--text-secondary); margin-bottom:8px; }
.settle-eq { display:flex; flex-direction:column; gap:6px; }
.settle-eq-item {
  display:flex; align-items:center; gap:10px; padding:6px 10px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-card);
}

/* Stat bars */
.bar { height: 12px; border-radius: var(--radius-pill); background: var(--bar-track); overflow: hidden; position: relative; }
.bar > span { display:block; height:100%; border-radius: var(--radius-pill); transition: width .35s ease; }
.bar-hp > span { background: var(--bar-hp); }
.bar-mp > span { background: var(--bar-mp); }
.bar-exp > span { background: var(--bar-exp); }
.bar-label { display:flex; justify-content:space-between; font-size:0.875rem; margin-bottom:4px; }
@media (prefers-reduced-motion: reduce){ .bar > span { transition:none; } }

/* Rarity card (fourfold encoding) */
.eq-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 12px;
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
}
.eq-card .topbar { position:absolute; top:0; left:0; right:0; height: var(--tb,3px); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.eq-card .icon { flex: 0 0 auto; }
.eq-card .meta { flex:1; min-width:0; }
.eq-card .name { font-weight:600; display:flex; align-items:center; gap:6px; }
.eq-card .rar-tag {
  font-size:0.75rem; font-weight:700; padding: 1px 6px; border-radius: var(--radius-pill);
  color: #fff; flex: 0 0 auto;
}
.eq-card .stat { font-size:0.9rem; color: var(--text-secondary); }
.eq-card .chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.chip { font-size:0.75rem; padding: 2px 8px; border-radius: 6px; background: var(--r-white-tint); color: var(--text-secondary); border:1px solid var(--border); }
.grid-items { display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width:480px){ .grid-items { grid-template-columns: 1fr 1fr; } }

/* Attribute allocation (req 1/7: card-like, 8pt grid, soft, aligned) */
.attr-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px; margin-bottom:8px; border:1px solid var(--border); border-radius:var(--radius-card);
  background:var(--surface); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.attr-row:last-child { margin-bottom:0; }
.attr-row .label { font-weight:600; min-width: 92px; }
.attr-row .val { font-variant-numeric: tabular-nums; font-weight:600; font-size:1.05rem; }
.attr-row .plus { width:34px; height:34px; border-radius:var(--radius-btn); border:1px solid var(--primary); background:var(--surface); color:var(--primary); font-size:1.1rem; font-weight:700; cursor:pointer; transition: background .15s ease, border-color .15s ease, transform .08s ease; }
.attr-row .plus:hover:not(:disabled) { background: var(--primary); color:#fff; }
.attr-row .plus:active:not(:disabled) { transform: scale(.92); }
.attr-row .plus:disabled { color:var(--text-hint); border-color:var(--border); cursor:not-allowed; }
.attr-row .plus:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }

/* Equipped section on status page: grouped by 部位(武器/护盾/头盔/护甲/饰品), 图标缩小 */
.eq-list { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:480px){ .eq-list { grid-template-columns:1fr 1fr; } }
.eq-cat-tag { font-size:0.72rem; font-weight:700; color:var(--text-secondary); letter-spacing:0.04em; margin-bottom:5px; }

/* 状态页：上下堆叠（合并角色面板 / 世界地图） */
.status-stack { display:flex; flex-direction:column; gap:12px; }
.status-col { display:flex; flex-direction:column; gap:12px; min-width:0; }

/* 角色合并面板：等级/经验/属性点 + 属性·战斗 + 已装备 + 出战宠物 合一，减少留白 */
.char-panel .status-head { margin-bottom:10px; }
.char-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(232px, 1fr)); gap:14px; margin-top:12px; }
.char-col { min-width:0; }
.char-sub { font-size:0.72rem; font-weight:700; color:var(--text-secondary); letter-spacing:0.04em; margin-bottom:7px; padding-bottom:4px; border-bottom:1px dashed var(--border); }
.char-equip .eq-equipped { display:flex; flex-direction:column; gap:8px; }

/* 状态头：等级 / 经验 / 属性点 归在一起（去除行动体力条） */
.profile-stats { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ps-row { display:flex; align-items:center; gap:8px; }
.ps-key { flex:0 0 auto; width:46px; font-size:0.78rem; color:var(--text-secondary); font-weight:600; }
.ps-bar { flex:1; min-width:0; height:9px; }
.ps-val { flex:0 0 auto; font-size:0.78rem; }
.ps-points { font-size:1rem; font-weight:800; color:var(--primary); }
.ps-tag { font-size:0.7rem; color:var(--text-hint); }
.status-col .pet-slot { display:flex; align-items:center; gap:12px; }
.status-col .pet-slot .info { flex:1; min-width:0; }
.status-col .pet-slot .name { font-weight:600; display:flex; align-items:center; gap:6px; }
/* 双栏下探索地图缩小（地图 viewBox 640x400 会随容器缩放），并让前进按钮更醒目 */
.status-col .map-wrap svg { width:100%; height:auto; }

/* 左栏 1/3 下：装备区每行一个装备（图标 + 名字 + 主属性 + 全部附加属性） */
.eq-equipped { display:flex; flex-direction:column; gap:8px; }
.eq-equipped-block .eq-card { padding:6px 8px; gap:8px; }
.eq-equipped-block .eq-card .icon svg { display:block; }
.eq-equipped-block .eq-cat-tag { font-size:0.68rem; margin-bottom:3px; }
.eq-equipped-block .eq-card .eq-name { font-size:0.85rem; }
.eq-equipped-block .eq-card .eq-sub { font-size:0.72rem; }
.eq-equipped-block.empty { opacity:0.75; }
.eq-slot-empty {
  display:flex; align-items:center; justify-content:center;
  min-height:44px; border:1px dashed var(--border);
  border-radius: var(--radius-card);
  color: var(--text-hint); font-size:0.8rem;
  background: var(--surface);
}

/* 可分配属性（状态页内联加点）：未分配点数 + 每行 +/- 按钮 + 确定/撤销 */
/* 三栏网格：标签 | 数值 | 控件 —— 未分配点数与四项数值列对齐 */
.alloc-remain, .alloc-row {
  display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:10px;
  padding:3px 0;
}
.alloc-remain { padding-bottom:4px; border-bottom:1px dashed var(--border); margin-bottom:2px; }
.alloc-val { font-size:0.9rem; font-weight:700; font-variant-numeric: tabular-nums; min-width:26px; text-align:right; }
.alloc-ctrl { display:flex; gap:5px; justify-content:flex-end; }
.alloc-row .plus, .alloc-row .plus.minus {
  width:26px; height:26px; border-radius:var(--radius-btn);
  border:1px solid var(--primary); background:var(--surface); color:var(--primary);
  font-size:1rem; font-weight:700; line-height:1; cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.alloc-row .plus:hover:not(:disabled) { background: var(--primary); color:#fff; }
.alloc-row .plus:active:not(:disabled) { transform: scale(.92); }
.alloc-row .plus:disabled { color:var(--text-hint); border-color:var(--border); cursor:not-allowed; }
.alloc-row .plus:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.alloc-row .plus.minus { border-color:var(--accent); color:var(--accent); }
.alloc-row .plus.minus:hover:not(:disabled) { background:var(--accent); color:#fff; }
.alloc-actions { display:flex; gap:8px; margin-top:8px; }

/* 已装备紧凑卡片（1/3 栏两列）：品质左侧色条 + 图标 + 名称/属性单行 */
.eq-equipped-block .eq-mini {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px 6px 5px;
  border:1px solid var(--border);
  border-left:3px solid var(--tier, var(--primary));
  border-radius: var(--radius-card);
  background: var(--surface);
  min-width:0;
  cursor: default;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.eq-equipped-block .eq-mini:hover, .eq-equipped-block .eq-mini:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.eq-equipped-block .eq-mini-icon { flex:0 0 auto; }
.eq-equipped-block .eq-mini-meta { flex:1; min-width:0; }
.eq-equipped-block .eq-mini-name {
  font-size:0.8rem; font-weight:700; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--font-item); letter-spacing:0.01em;
}
.eq-equipped-block .eq-mini-stat { font-size:0.68rem; color:var(--text-hint); white-space:normal; overflow:hidden; }
.eq-equipped-block .eq-mini-stat .eq-main { font-weight:400; color:var(--text-primary); }
.eq-equipped-block .eq-mini-stat .eq-affix { font-weight:400; color:var(--text-hint); margin-left:6px; }

/* Shop screen */
.shop-sec { margin-top:14px; border-top:1px dashed var(--border); padding-top:12px; }
.shop-h { font-size:0.95rem; margin-bottom:8px; }
.shop-flash {
  min-height: 0; margin: 4px 0 2px; padding: 0; font-size: 0.875rem; color: var(--r-green-text, #1E7A3E);
  font-weight: 600;
}
.shop-flash:not(:empty) {
  min-height: 22px; padding: 6px 10px; border-radius: var(--radius-btn, 8px);
  background: var(--r-green-bg, #EAF5EE); border: 1px solid var(--r-green, #3DA35D);
}

/* Hover/select feedback (req 7): 1px primary stroke + faint shadow, no lift */
.eq-card { transition: border-color .15s ease, box-shadow .15s ease; cursor: default; }
.eq-card.hoverable:hover, .eq-card.hoverable:focus-within {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-sm);
}
.eq-card.hoverable { cursor: pointer; }


/* Combat log */
.log {
  max-height: 240px; overflow-y:auto; border:1px solid var(--border); border-radius: var(--radius-card);
  padding: 8px 12px; background: var(--surface); font-size:0.875rem; line-height:1.6;
}
@media (min-width:768px){ .log { max-height: 320px; } }
.log .line { display:flex; gap:8px; padding:2px 0; border-bottom:1px solid var(--border); }
.log .line:last-child { border-bottom:none; }
.log .ts { color: var(--text-hint); font-variant-numeric: tabular-nums; flex:0 0 auto; }
.log .ic { flex:0 0 auto; }
.log .t-system { color: var(--text-secondary); }
.log .t-player { color: var(--r-green-text); }
.log .t-enemy { color: var(--r-red-text); }
.log .t-reward { color: var(--r-orange-text); }
.log .t-levelup { color: var(--r-purple-text); }

/* Dialog (掉落 / 升级) */
dialog {
  border: none; padding: 0; background: transparent; max-width: 420px; width: calc(100% - 32px);
  overflow-x: hidden; /* 结算弹窗弹出动画期间避免左右滑块一闪而过；纵向按需保留 */
}
dialog::backdrop { background: var(--overlay); }
.modal {
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-card);
  padding: 24px; box-shadow: var(--shadow-sm);
  overflow-x: hidden; /* 与 dialog 一致：杜绝水平滑块（内容宽度足够，无需横向滚动） */
}
.modal .close {
  position:absolute; top:8px; right:8px; width:44px; height:44px; border:none; background:transparent;
  font-size:1.4rem; cursor:pointer; color:var(--text-secondary); border-radius: var(--radius-btn);
}
.modal .close:focus-visible { outline:3px solid var(--focus-ring); }
.modal-wrap { position:relative; }
.modal .rar-title { font-weight:700; padding:8px 12px; border-radius: var(--radius-card) var(--radius-card) 0 0; color:#fff; text-align:center; margin:-24px -24px 16px; }
/* 战斗结算弹出动画：PPT 式「缩放进入」（由小放大 + 淡入上浮） */
.settle-pop { animation: settlePopIn .45s cubic-bezier(.2,.9,.3,1.18) both; }
@keyframes settlePopIn {
  0% { opacity: 0; transform: scale(.72) translateY(16px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 排行榜（本地最佳记录占位） */
.rank-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.rank-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border:1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface);
}
.rank-row .rk-name { font-size:0.9rem; color: var(--text-secondary); }
.rank-row .rk-val { color: var(--primary); }

/* ---- Kingdom map (province picker) ---- */
.map-wrap { width:100%; margin-top:8px; }
.kingdom-map { width:100%; height:auto; display:block; border-radius:14px; background:#EAF1F5;
  box-shadow: inset 0 0 0 1px var(--border); touch-action: manipulation; }
.kingdom-map .province { stroke:#fff; stroke-width:2.5; cursor:pointer;
  transition: filter .12s ease, opacity .12s ease; }
.kingdom-map .province:hover { filter: brightness(1.07) saturate(1.06); }
.kingdom-map .province:focus { outline: none; filter: brightness(1.07); }
.kingdom-map .province.selected { stroke:#C9A24B; stroke-width:4.5; }
.kingdom-map .province.locked { cursor: not-allowed; opacity:.5; filter: grayscale(.75); }
.kingdom-map .pv-label { pointer-events: none; }
.kingdom-map .pv-emoji { font-size:26px; }
.kingdom-map .pv-name { font-size:15px; font-weight:700; fill:#2B2620; }
.kingdom-map .pv-sub { font-size:11px; font-weight:600; fill:#4A4036; }
.kingdom-map .pv-label.locked .pv-name,
.kingdom-map .pv-label.locked .pv-sub { fill:#6B6258; }
.kingdom-map .map-caption { font-size:12px; fill:#7A7066; font-weight:600; letter-spacing:.04em; }


/* Pet slot */
.pet-slot { display:flex; align-items:center; gap:12px; }
.pet-slot .info { flex:1; }
.pet-slot .name { font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pet-list { display:flex; flex-direction:column; gap:10px; }
.pet-row { display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--radius-card); background:var(--surface); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; flex-wrap:wrap; }
.pet-row:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-1px); }
.pet-row.bound { border-left-color:var(--primary); background:linear-gradient(90deg, rgba(90,70,50,.07), var(--surface) 45%); }
.pet-ava { flex:0 0 auto; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:var(--bar-track); border-radius:12px; overflow:hidden; }
.pet-ava img, .pet-ava svg { width:52px; height:52px; object-fit:contain; }
.pet-row .info { flex:1; min-width:170px; }
.pet-row .name { font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pet-attrs { display:flex; gap:12px; margin-top:4px; font-size:.74rem; color:var(--text-hint); flex-wrap:wrap; }
.pet-stat { display:inline-flex; align-items:center; gap:3px; font-variant-numeric:tabular-nums; }
.pet-fam { color:var(--text-hint); }
.pet-actions { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; align-items:center; }
.pet-actions .btn { min-height:36px; padding:6px 12px; }
.warn { color:#c0392b; font-weight:600; }

/* 宠物经验条（宠物页 / 状态页出战宠物） */
.pet-exp { display:flex; align-items:center; gap:8px; margin-top:6px; }
.pet-exp-bar { flex:1; min-width:0; height:8px; border-radius:var(--radius-pill); background:var(--bar-track); overflow:hidden; }
.pet-exp-bar > span { display:block; height:100%; border-radius:var(--radius-pill); background:var(--bar-exp); transition:width .35s ease; }
.pet-exp-bar.full > span { background:linear-gradient(90deg,#E0A526,#B45309); }
.pet-exp-val { flex:0 0 auto; font-size:0.68rem; color:var(--text-hint); font-variant-numeric:tabular-nums; }
/* 出战宠物攻防一行紧凑展示（替代冗长括号说明） */
.pet-atkdef { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:3px; }
.pet-atkdef span { font-size:0.72rem; color:var(--text-secondary); }
.pet-atkdef b { color:var(--text-primary); font-variant-numeric:tabular-nums; }
.pet-atkdef .pet-aux { font-size:0.64rem; font-weight:600; padding:1px 7px; border-radius:6px; background:rgba(90,70,50,0.1); color:#5A4632; }
.pet-row .pet-exp { width:100%; }
.pet-list .pet-exp { margin-top:4px; }

/* 宠物品质徽章：C 白 / B 绿 / A 蓝 / S 紫 / SS 橙（与装备稀有度色阶一致，低→高） */
.q-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px; padding:0 5px; border-radius:6px; font-size:0.7rem; font-weight:800; line-height:1; color:#fff; vertical-align:middle; }
.q-SS { background:linear-gradient(135deg,#ffb04d,#ef7d1a); box-shadow:0 1px 4px rgba(239,125,26,.45); }
.q-S  { background:#8B5CF6; }
.q-A  { background:#2F7BE0; }
.q-B  { background:#3DA35D; }
.q-C  { background:#F3EFE7; color:#6B5B45; border:1px solid #D9D0C2; box-shadow:none; }
/* 文字型按钮（如「购买宠物蛋 →」跨页跳转） */
.btn-link { background:transparent; border-color:transparent; color:var(--primary); box-shadow:none; padding-left:4px; padding-right:4px; font-weight:600; }
.btn-link:hover { text-decoration:underline; background:transparent; }

/* 孵化面板：品质概率 / 初始属性 / 每级成长 说明（数据由 PET_QUALITY 推导） */
.hatch-info { margin-top:10px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-card); background:var(--r-white-tint); display:flex; flex-direction:column; gap:5px; }
.hatch-info > div { font-size:0.74rem; color:var(--text-secondary); line-height:1.6; }
.hatch-info b { color:var(--text-primary); font-weight:700; }
.hatch-info .q-badge { margin-right:3px; vertical-align:middle; }
.hatch-info .hatch-note { margin-top:2px; color:var(--text-hint); font-size:0.72rem; }

/* helpers */
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.map-actions { margin: 4px 0 2px; }
/* 世界地图排版宽松化：按钮行与上方血条/体力条、下方区域地图的间距加大（用户 2026-08-28 定） */
.explore-map .map-actions { margin: 18px 0 16px; }
.explore-map .map-wrap { margin-top: 16px; }
/* 探索页六个操作按钮等宽：flex 均分 + 文案不换行，排版整齐（用户 2026-08-28 定） */
.map-actions .btn { flex: 1 1 0; min-width: 104px; }
@media (max-width: 767px) {
  .map-actions .btn { flex: 1 1 calc(50% - 8px); min-width: 0; }
}
/* 世界地图：生命条 + 行动体力条 */
.map-bars { display:flex; gap:14px; margin:8px 0; flex-wrap:wrap; }
.map-bar { flex:1; min-width:200px; }
.attr-group .map-bar { margin-bottom:8px; }
.shop-hp-row { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }

/* 背包页签 + 其他物品行 */
.bag-tabs { margin-bottom:12px; }
/* 一键出售工具栏：白装 / 绿装 快捷出售；按钮更高更醒目（用户 2026-08-28 定） */
.bag-quick { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.bag-quick .btn { min-height:38px; padding:8px 16px; font-size:0.85rem; }
.other-list { display:flex; flex-direction:column; gap:8px; }
.other-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface);
}
.other-row .other-info { flex:1; min-width:0; }
.other-row .other-name { font-weight:600; }
.other-row .other-price { flex:0 0 auto; align-self:center; }

/* 方案A 怀旧表格行（背包/商店共用）：形象 | 名称(品质色) | 类型 | 售价 | 操作 */
.eq-table { display:flex; flex-direction:column; }
.eq-table > .eq-row:nth-child(odd) { background: var(--r-white-tint); }
.eq-row {
  display:grid;
  grid-template-columns: 34px minmax(0,1fr) 56px 56px auto;
  align-items:center; gap:10px;
  padding:8px 10px; border-bottom:1px solid var(--border);
  background: var(--surface);
  min-width:0;
  transition: background .12s ease;
}
.eq-row:hover { background: var(--surface-hover, #F4EDE4); }
.eq-ic { flex:0 0 auto; }
.eq-info { min-width:0; }
.eq-rowname { font-size:0.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-item); }
.eq-tier { font-size:0.7rem; font-weight:600; color:var(--text-hint); }
.eq-attrs { display:flex; align-items:center; gap:10px; white-space:nowrap; overflow:hidden; margin-top:1px; }
/* 主属性：加粗主色作为首要信息；附加值：小一号+浅灰+细分隔线，弱化但可辨 */
.eq-main { font-size:0.82rem; font-weight:700; color:var(--text-primary); }
.eq-affix { font-size:0.76rem; font-weight:500; color:var(--text-hint); padding-left:10px; border-left:1px solid var(--border); }
.eq-type { font-size:0.78rem; color:var(--text-secondary); white-space:nowrap; }
.eq-price { font-size:0.82rem; font-weight:700; color:var(--text-primary); white-space:nowrap; }
.eq-price-u { font-size:0.68rem; font-weight:600; color:var(--text-hint); margin-left:1px; }
/* 操作区：按钮等宽，售价独立成列 → 金额不同也不会挤歪按钮 */
.eq-ops { display:flex; gap:6px; flex:0 0 auto; width:120px; }
.eq-ops .btn { flex:1 1 0; min-width:0; padding:4px 2px; min-height:30px; white-space:nowrap; }
@media (max-width: 520px) {
  .eq-row { grid-template-columns: 30px minmax(0,1fr) 50px; grid-template-areas: "ic info info" "ic type price" "ops ops ops"; }
  .eq-ic { grid-area: ic; }
  .eq-info { grid-area: info; }
  .eq-type { grid-area: type; }
  .eq-price { grid-area: price; text-align:right; }
  .eq-ops { grid-area: ops; width:100%; }
}
.spread { display:flex; justify-content:space-between; align-items:center; }
.hidden { display:none !important; }
.muted { color: var(--text-hint); }
.center { text-align:center; }
.mt { margin-top:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ===== 宠物页子页签 + 进化图鉴 ===== */
.subtabs { display:flex; gap:8px; margin-bottom:12px; }
.subtab { flex:1; padding:8px 10px; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); border-radius:var(--radius-btn); font-weight:600; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.subtab:hover { border-color:var(--primary); }
.subtab.active { background:var(--primary); color:#fff; border-color:var(--primary); }

.dex-intro { margin-bottom:14px; }
.dex-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.dex-card { margin-bottom:0; padding:12px 14px; border-radius:14px; transition:box-shadow .15s ease, transform .15s ease; }
.dex-card:hover { box-shadow:0 4px 14px rgba(90,70,50,.12); transform:translateY(-1px); }
.dex-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; }
.dex-base { font-weight:700; font-size:0.98rem; }
.dex-series { font-size:0.72rem; color:var(--text-hint); background:var(--r-white-tint); padding:2px 8px; border-radius:6px; border:1px solid var(--border); white-space:nowrap; }
.dex-chain { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.dmon-node { display:flex; flex-direction:column; align-items:center; gap:3px; width:auto; flex:0 0 auto; }
.dmon-por-wrap { position:relative; display:inline-block; }
.dmon-por { position:relative; width:58px; height:58px; border-radius:12px; overflow:hidden; background:#fff; border:2px solid var(--border); flex:0 0 auto; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.dmon-por.stage-ultimate { border-color:#ff9a45; }
.dmon-por.stage-perfect { border-color:#5b9bff; }
.dmon-por.stage-adult   { border-color:#5fbf7a; }
.dmon-por.stage-child   { border-color:#9aa0a6; }
.dmon-fb { width:100%; height:100%; display:block; }
.dmon-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; image-rendering: pixelated; image-rendering: crisp-edges; }
.dmon-name { font-size:0.8rem; text-align:center; line-height:1.12; min-height:1.12em; }
/* 图鉴每只需编号：小字角标，置于立绘右上角，不喧宾夺主 */
.dmon-no { position:absolute; top:2px; right:3px; font-size:0.6rem; font-weight:800; line-height:1; color:#fff; background:rgba(90,70,50,.80); padding:1px 4px; border-radius:6px; letter-spacing:0.02em; pointer-events:none; }
.dmon-stage { font-size:0.68rem; padding:1px 6px; border-radius:6px; border:1px solid var(--border); color:var(--text-secondary); background:var(--surface); }
/* 分支路线（伊布一族）节点：基础 → 随机成年形态们 */
.dmon-node.branch { max-width:100%; }
.dmon-branch-row { display:flex; gap:6px; align-items:flex-end; }
.dmon-por-wrap.sm .dmon-por { width:46px; height:46px; }
.dmon-por-wrap.sm .dmon-img { background:#fff; }
.chip-egg,.chip-baby   { background:#f1eee9; }
.chip-child            { background:var(--r-white-tint); }
.chip-adult            { background:#e3f5e8; color:#2f7a45; border-color:#bfe6cb; }
.chip-perfect          { background:#e3eefe; color:#2f5fae; border-color:#bcd4f6; }
.chip-ultimate         { background:#ffeede; color:#b5611f; border-color:#ffd2ad; }
.dmon-arrow { align-self:center; color:var(--text-hint); font-size:1.15rem; padding:0 1px; }

/* ===================== 属性区：战斗属性 / 可分配属性 换位与间距 ===================== */
.attr-grid { display:flex; flex-direction:column; gap:18px; }
/* 减号按钮：只有本等级被加点（draft>0）才可用；可用=强调色，不可用=灰禁（颜色区分） */
.alloc-row .plus.minus:disabled { color:var(--text-hint); border-color:var(--border); background:var(--surface); opacity:.5; cursor:not-allowed; }
.alloc-row .plus.minus:not(:disabled) { color:var(--accent); border-color:var(--accent); background:var(--accent-tint, #fbeef0); }

/* ===================== 商店：消耗品卡片（与装备一致排版） ===================== */
.shop-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; }
.potion-card { align-items:flex-start; }
.potion-card .icon { font-size:1.7rem; line-height:1; }
.potion-card .eq-ops { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.potion-card .eq-price { margin-bottom:0; }

/* ===================== 探索日志 ===================== */
.exp-log { display:flex; flex-direction:column; gap:4px; max-height:320px; overflow:auto; }
.exp-log-line { display:flex; gap:8px; font-size:0.82rem; padding:4px 8px; border-radius:6px; background:var(--surface); border-left:3px solid var(--border); }
.exp-log-line .ts { color:var(--text-hint); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.exp-log-line .txt { min-width:0; }
.exp-log-line.t-combat { border-left-color:#c0392b; } .exp-log-line.t-combat .txt { color:#c0392b; }
.exp-log-line.t-treasure { border-left-color:#b8860b; } .exp-log-line.t-treasure .txt { color:#9a6a00; }
.exp-log-line.t-trap { border-left-color:#d35400; } .exp-log-line.t-trap .txt { color:#b34700; }
.exp-log-line.t-ambush { border-left-color:#8e2de2; } .exp-log-line.t-ambush .txt { color:#7a1fb8; }
.exp-log-line.t-safe { border-left-color:var(--border); } .exp-log-line.t-safe .txt { color:var(--text-secondary); }

/* ===================== 战斗属性：生命/体力紧凑内联迷你条 ===================== */
/* 复用 .attr-pair 布局，数值字体与攻击/防御 .value 一致；条内联在数值右侧，整体更紧凑 */
.attr-pair.hp-stam-row { align-items:center; gap:8px; padding:2px 0; }
.attr-pair.hp-stam-row .mini-bar { flex:1 1 64px; min-width:64px; height:7px; border-radius:5px; background:var(--surface-2, #ece6df); overflow:hidden; }
.attr-pair.hp-stam-row .mini-bar .fill { display:block; height:100%; }
.attr-pair.hp-stam-row .mini-bar .fill.bar-hp { background:var(--bar-hp); }
.attr-pair.hp-stam-row .mini-bar .fill.bar-mp { background:var(--bar-mp); }

/* 战斗属性：公式说明（可折叠） */
.attr-formulas { margin-top:8px; border-top:1px dashed var(--border); padding-top:6px; }
.attr-formulas summary { cursor:pointer; font-size:0.75rem; font-weight:700; color:var(--text-secondary); }
.attr-formulas ul { margin:6px 0 0; padding-left:1.1em; }
.attr-formulas li { font-size:0.72rem; color:var(--text-secondary); line-height:1.55; }

/* ===================== 结算：经验/银币改为简洁文字行（去条形图） ===================== */
.settle-rewards { display:flex; flex-direction:column; gap:8px; margin:6px 0 4px; }
.settle-rewards .sr-row { font-size:0.92rem; }
.settle-rewards .sr-row .value { font-size:1.05rem; color:var(--primary); margin:0 2px; }

/* ===================== 首页：双货币（银币/金币）显示 ===================== */
.coin-line { display:flex; flex-wrap:wrap; gap:14px; margin-top:2px; font-size:0.74rem; color:var(--text-secondary); }
/* 数值与「银币/金币」标签同字号，不放大（用户 2026-08-28 定） */
.coin-line .value { font-size:0.74rem; color:var(--text-primary); font-weight:700; font-variant-numeric:tabular-nums; margin-left:2px; }
.coin-ic { display:inline-block; vertical-align:middle; flex:0 0 auto; }
.coin-line .coin-ic { width:15px; height:15px; margin-right:3px; }
.eq-price .coin-ic { width:13px; height:13px; margin-right:1px; }

/* ===================== 首页出战宠物：等级/攻击/防御/经验（布局见下方统一 .pet-rows/.pet-row2 左对齐规则） ===================== */

/* ===================== 探索：世界地图（左） + 战斗日志（右） 并排 ===================== */
.explore-layout { display:flex; gap:16px; align-items:stretch; }
.explore-map { flex:1 1 360px; min-width:0; }
.explore-log-panel { flex:0 0 320px; overflow:auto; }
.explore-log-panel > .exp-log { max-height:none; }
@media (max-width: 900px) {
  .explore-layout { flex-direction:column; }
  .explore-log-panel { flex:1 1 auto; max-height:300px; width:100%; }
}

/* ===================== 探索页子页签：世界地图 / 怪物图鉴 ===================== */
.explore-tabs { margin-bottom: 14px; }
/* 选项卡更宽更高、字号更大（用户 2026-08-28 定） */
.explore-tabs .subtab { padding: 12px 16px; font-size: 0.98rem; }
/* 怪物图鉴（类名 mdex-*，与宠物页「进化图鉴」dex-* 区分）：按 9 区域分组卡片，网格展示怪物 */
.monster-dex { display: flex; flex-direction: column; gap: 14px; }
.mdex-region { padding: 16px 18px; }
.mdex-region.locked { opacity: .6; }
.mdex-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mdex-head-name { font-size: 1.06rem; font-weight: 800; letter-spacing: 1px; color: var(--primary); }
.mdex-head-sub { font-size: 0.76rem; color: var(--text-secondary); }
.mdex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.mdex-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px 9px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--r-white-tint);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mdex-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(227,168,59,.5); }
.mdex-art {
  position: relative; width: 66px; height: 66px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--border);
  background: linear-gradient(160deg, #FBF8F2, #F1E9DC);
}
.mdex-art img { width: 100%; height: 100%; object-fit: contain; }
.mdex-art.big { width: 82px; height: 82px; border-color: rgba(227,168,59,.65); box-shadow: 0 0 0 1px rgba(227,168,59,.32), 0 6px 14px rgba(227,168,59,.18); }
.mdex-elite {
  position: absolute; top: -7px; right: -7px;
  font-size: 0.56rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #E8821E, #C96A10);
  padding: 1px 7px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.mdex-name { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); text-align: center; line-height: 1.25; max-width: 100%; }
.mdex-lv { font-size: 0.66rem; color: var(--text-hint); font-variant-numeric: tabular-nums; }

/* ===================== 商店：药水行式（与装备一致） ===================== */
.eq-ic.potion-ico { width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }

/* ===================== 战斗属性：7 项统一网格对齐（图标/名称/数值/条状） ===================== */
.battle-attr {
  display: grid;
  grid-template-columns: 20px 44px minmax(60px, 1fr) 132px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.battle-attr .ba-ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; line-height: 1; }
.battle-attr .attr-name, .battle-attr .ba-name { font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.battle-attr .ba-val { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.battle-attr .ba-val.ba-val--wide { grid-column: 3 / span 2; }
/* 战斗属性数值列：定宽右对齐（ba-num），使「（基础…）」左括号跨行对齐（用户 2026-08-28 定） */
.battle-attr .ba-val--wide { display: flex; align-items: baseline; gap: 3px; }
.battle-attr .ba-val--wide .ba-num { flex: 0 0 auto; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.battle-attr .ba-val .attr-sub { font-weight: 500; color: var(--text-tertiary, #9aa1ac); font-size: 0.72rem; }
.battle-attr .ba-bar { height: 8px; border-radius: var(--radius-pill); background: var(--bar-track); overflow: hidden; }
.battle-attr .ba-bar .fill { display: block; height: 100%; border-radius: var(--radius-pill); }
.battle-attr .ba-bar .fill.bar-hp { background: var(--bar-hp); }
.battle-attr .ba-bar .fill.bar-mp { background: var(--bar-mp); }

/* 出战宠物 / 宠物列表：图标列 + 标签列 + 数值列 三列对齐，数值紧跟标签（与战斗属性一致） */
.pet-rows { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.pet-row2 { display: flex; gap: 6px; align-items: center; font-size: 0.8rem; padding: 0; }
.pet-row2 .pr-ic { width: 16px; text-align: center; font-size: 0.78rem; flex: 0 0 auto; }
.pet-row2 .pr-label { color: var(--text-secondary); min-width: 30px; text-align: left; }
.pet-row2 .pr-val { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.pet-chip-line { margin-top: 4px; }
/* 宠物经验行：进度条与玩家同款（金色渐变），数值在条右侧，行内弹性收缩 */
/* margin-top:0 覆盖 584 行旧 .pet-exp 的 margin-top:6px——否则经验行与上一行间距比其他两行大 */
.pet-exp { display: flex; align-items: center; gap: 6px; margin-top: 0; }
.pet-exp .pet-exp-track {
  flex: 1; min-width: 0; height: 8px; border-radius: var(--radius-pill);
  background: var(--bar-track); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.pet-exp .pet-exp-track > span {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #F4CB63, var(--bar-exp));
  transition: width .35s ease;
}
.pet-exp .pr-val { flex: 0 0 auto; font-size: 0.72rem; white-space: nowrap; }
/* 迷你等级徽章：宠物 LV——紧凑横排胶囊（「LV」在数字左侧，用户 2026-08-28 定），不做长条/竖排 */
.lv-badge-sm {
  display: inline-flex; flex-direction: row; align-items: center; gap: 3px;
  width: auto; height: auto; min-width: 0; padding: 2px 8px; border-radius: 8px;
  line-height: 1; white-space: nowrap; box-sizing: border-box;
}
.lv-badge-sm .lv-cap { margin-bottom: 0; font-size: 0.46rem; }
.lv-badge-sm .value { font-size: 0.92rem; }

/* ===================== 个人中心：美化 ===================== */
.me-hero { position: relative; overflow: hidden; color: #fff; border: none; }
.me-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #5A4632 0%, #7a5d3f 45%, #B07A18 120%); }
.me-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; }
.me-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.me-avatar.guest { font-size: 1.6rem; }
.me-title { font-size: 1.15rem; margin: 0; color: #fff; letter-spacing: 0.02em; }
.me-sub { margin: 0; font-size: 0.78rem; color: rgba(255,255,255,.85); }

.auth-head { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.auth-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.center { text-align: center; margin-top: 10px; }
.me-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.me-stat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.me-stat-ic { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.me-stat-k { font-size: 0.72rem; color: var(--text-secondary); }
.me-stat-v { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.me-actions { margin-top: 10px; }
.recharge-pkg { font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .auth-forms { grid-template-columns: 1fr; }
  .me-stats { grid-template-columns: 1fr; }
  .battle-attr { grid-template-columns: 18px 40px minmax(50px, 1fr) 100px; gap: 6px; }
}

/* ===================== 首页落地页（Landing） ===================== */
.home-hero {
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 16px 22px;
  background: linear-gradient(135deg, #FBF8F2, #F2EADE);
  border: 1px solid var(--border);
  border-top: 3px solid var(--focus-ring);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.home-title-bar { display: flex; flex-direction: column; gap: 6px; }
.home-site-title {
  margin: 0; line-height: 1.1;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 800; letter-spacing: 0.04em; color: var(--primary);
}
.home-site-accent { color: var(--focus-ring); letter-spacing: 0.06em; }
.home-tagline {
  margin: 0;
  font-size: 0.92rem; font-weight: 500; color: var(--text-secondary);
}

.home-poster-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(90, 70, 50, 0.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-poster-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(90, 70, 50, 0.16);
}
.home-poster-wrap:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.home-poster {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .35s ease;
}
.home-poster-wrap:hover .home-poster { transform: scale(1.03); }

.home-actions {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.home-cta {
  width: 100%;
  max-width: 320px;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 1rem;
  border-radius: var(--radius-btn);
}
.home-hint {
  margin: 0;
  font-size: 0.8125rem; color: var(--text-hint); line-height: 1.5;
  max-width: 420px;
}

@media (min-width: 768px) {
  .home-hero { padding: 24px 28px 30px; gap: 22px; }
  .home-poster-wrap { max-width: 720px; margin: 0 auto; }
  .home-cta { max-width: 280px; }
}

/* ===================== 进入战斗：拨开白云过场（COC 风） ===================== */
.cloud-reveal {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden;
}
/* 柔和天幕：浅灰蓝阴云底色，随云散整体缓缓淡出（比风暴黑云更柔和） */
.cloud-reveal .cloud-sky {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 28%, #8a92a3 0%, #626b7c 55%, #454d5c 100%);
  opacity: 1; transition: opacity 1.5s ease;
}
.cloud-reveal.play .cloud-sky { opacity: 0; }
/* 云团：多个圆形云朵聚拢覆盖屏幕，play 时各自向四外缓缓飘散并淡出（云散而非左右开幕） */
.cloud-reveal .cloud-puffs { position: absolute; inset: 0; }
.cloud-reveal .cp {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(158,166,180,.95) 0%, rgba(120,130,146,.88) 45%, rgba(110,120,138,0) 72%);
  filter: blur(4px); opacity: 1;
  transition: transform 1.5s cubic-bezier(.2,.7,.3,1), opacity 1.5s ease;
  will-change: transform, opacity;
}
.cloud-reveal .cp1 { width: 46%; height: 60%; left: -8%;  top: -12%; }
.cloud-reveal .cp2 { width: 50%; height: 64%; right: -10%; top: -16%; }
.cloud-reveal .cp3 { width: 54%; height: 60%; left: 8%;   bottom: -18%; }
.cloud-reveal .cp4 { width: 52%; height: 62%; right: 4%;  bottom: -20%; }
.cloud-reveal .cp5 { width: 62%; height: 56%; left: 18%;  top: 16%; }
.cloud-reveal.play .cp1 { transform: translate(-60%, -40%) scale(1.25); opacity: 0; }
.cloud-reveal.play .cp2 { transform: translate(60%, -45%)  scale(1.25); opacity: 0; }
.cloud-reveal.play .cp3 { transform: translate(-55%, 45%)  scale(1.25); opacity: 0; }
.cloud-reveal.play .cp4 { transform: translate(55%, 50%)   scale(1.25); opacity: 0; }
.cloud-reveal.play .cp5 { transform: translate(0, -32%)    scale(1.35); opacity: 0; }
/* 云开瞬间的柔和闪光（单次轻闪，不再强闪电双闪） */
.cloud-reveal .cloud-flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.9) 0%, rgba(214,224,245,.5) 34%, rgba(255,255,255,0) 70%);
}
.cloud-reveal.play .cloud-flash { animation: cloudFlash .6s ease-out forwards; }
@keyframes cloudFlash {
  0% { opacity: 0; }
  20% { opacity: .42; }
  55% { opacity: .16; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-reveal .cloud-sky, .cloud-reveal .cp { transition-duration: .001s; }
  .cloud-reveal.play .cloud-flash { animation-duration: .001s; }
}

/* ===================== 探索过场：事件动画提示 / 木质宝箱 / 敌人雾入 ===================== */
/* 事件提示（遭遇战斗 / 遇到陷阱 / 平安前进）—— 非纯文字，带动画图标，约 1.5s 自动消失 */
.reveal-prompt {
  position: fixed; left: 50%; top: 36%; transform: translate(-50%, -50%) scale(.8);
  z-index: 9998; pointer-events: none; text-align: center;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  padding: 18px 34px; border-radius: 18px;
  background: rgba(24,22,18,.82); box-shadow: 0 12px 36px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.reveal-prompt.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.reveal-prompt .rp-icon { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
/* 文字不再用纯白：落在白色探索页也清晰，同时按事件着色（战斗红 / 陷阱金 / 平安绿），并配深色卡片背景 */
.reveal-prompt .rp-text { margin-top: 8px; font-size: 1.2rem; font-weight: 700; color: #f4ecdd; text-shadow: 0 2px 6px rgba(0,0,0,.5); letter-spacing: 1px; }
.reveal-prompt.ev-combat { border-top: 3px solid #ff6b6b; }
.reveal-prompt.ev-trap   { border-top: 3px solid #ffd23f; }
.reveal-prompt.ev-safe   { border-top: 3px solid #6fcf97; }
.reveal-prompt.ev-combat .rp-icon { animation: rpShake .5s ease-in-out 2; color: #ff8a8a; }
.reveal-prompt.ev-combat .rp-text { color: #ff9d9d; }
.reveal-prompt.ev-trap   .rp-icon { animation: rpWobble .5s ease-in-out 2; color: #ffd23f; }
.reveal-prompt.ev-trap   .rp-text { color: #ffd23f; }
.reveal-prompt.ev-safe   .rp-icon { animation: rpPop .45s ease-out 1; color: #9fe6bd; }
.reveal-prompt.ev-safe   .rp-text { color: #9fe6bd; }
@keyframes rpShake  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-13deg) scale(1.05)} 75%{transform:rotate(13deg) scale(1.05)} }
@keyframes rpWobble { 0%,100%{transform:rotate(0)} 20%{transform:rotate(15deg)} 40%{transform:rotate(-12deg)} 60%{transform:rotate(8deg)} 80%{transform:rotate(-4deg)} }
@keyframes rpPop    { 0%{transform:scale(.6);opacity:.4} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }

/* 木质宝箱（探索宝箱事件）：可点击/自动开箱，开箱动画后显示战利品 */
.treasure-chest-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  pointer-events: none; /* 不拦截底层 UI：玩家可自由点击导航 / 前进等，离场即视同丢弃 */
}
.treasure-chest-overlay .chest-stage {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  pointer-events: auto; /* 仅宝箱面板本身可交互 */
  background: linear-gradient(180deg, #FFF9F0 0%, #F7EFE2 100%); /* 浅暖米色，贴合木箱氛围且与浅色主题协调 */
  border: 2px solid rgba(227,168,59,.72); /* 橙黄描边，突出「宝藏」氛围 */
  border-radius: var(--radius-card);
  padding: 26px 40px; /* 上下对称留白 */
  box-shadow: 0 12px 32px rgba(17,24,39,.14), 0 0 0 1px rgba(227,168,59,.18);
  animation: chestPopIn .5s cubic-bezier(.3,1.5,.5,1) both; /* 宝箱立即弹出亮相，无需等待云散 */
}
@keyframes chestPopIn { 0%{transform:scale(.55);opacity:0} 100%{transform:scale(1);opacity:1} }
/* 宝箱面板页头：圆角胶囊标题（面板内居中，不贴边），与面板上下沿对称、宽度统一 */
.chest-stage .chest-title {
  font-weight: 700; font-size: 1rem; letter-spacing: 2px; color: #fff; text-align: center;
  padding: 8px 22px; margin: 0 0 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--primary-hover) 0%, var(--primary) 100%);
  box-shadow: 0 2px 6px rgba(90,70,50,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
/* 木质宝箱：更大更精致（200×148）——竖向木纹 + 金属包箍 + 精制金锁 */
.wood-chest { position: relative; width: 200px; height: 148px; cursor: pointer; outline: none; transform-origin: center bottom; }
.wood-chest .chest-body {
  position: absolute; bottom: 0; left: 0; width: 200px; height: 100px; border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(90,58,28,.28) 0 3px, rgba(255,255,255,0) 3px 30px),
    linear-gradient(180deg, #c0874a 0%, #a05f2e 45%, #7d4518 100%);
  border: 3px solid #5a3a1c;
  box-shadow: inset 0 8px 0 rgba(255,255,255,.16), inset 0 -8px 0 rgba(0,0,0,.18), 0 14px 26px rgba(0,0,0,.45);
}
/* 左侧金属箍 */
.wood-chest .chest-body::before {
  content: ''; position: absolute; top: -5px; bottom: -5px; left: 26px; width: 16px;
  background: linear-gradient(180deg, #e8c98a 0%, #b08a4e 50%, #7c5c2c 100%);
  border: 2px solid #5a3a1c; border-radius: 4px; z-index: 3; box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
/* 底部金属饰条 */
.wood-chest .chest-body::after {
  content: ''; position: absolute; bottom: 9px; left: 18px; right: 18px; height: 5px;
  background: linear-gradient(180deg, #d9b878, #a8813f); border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,.25);
}
/* 右侧金属箍（wood-chest::before 用于开箱闪光，箍用 ::after） */
.wood-chest::after {
  content: ''; position: absolute; top: 43px; bottom: -5px; right: 26px; width: 16px;
  background: linear-gradient(180deg, #e8c98a 0%, #b08a4e 50%, #7c5c2c 100%);
  border: 2px solid #5a3a1c; border-radius: 4px; z-index: 3; box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.wood-chest .chest-lid {
  position: absolute; top: 0; left: 0; width: 200px; height: 58px; border-radius: 18px 18px 6px 6px;
  background:
    repeating-linear-gradient(90deg, rgba(90,58,28,.22) 0 3px, rgba(255,255,255,0) 3px 30px),
    linear-gradient(180deg, #d99a58 0%, #b06a34 55%, #8a4f1f 100%);
  border: 3px solid #5a3a1c;
  box-shadow: inset 0 6px 0 rgba(255,255,255,.22), 0 4px 8px rgba(0,0,0,.25);
  transform-origin: center bottom; transform: rotateX(0deg);
  transition: transform .55s cubic-bezier(.3, 1.5, .5, 1); z-index: 2;
}
/* 盖顶高光弧 */
.wood-chest .chest-lid::after {
  content: ''; position: absolute; top: 7px; left: 12px; right: 12px; height: 15px;
  background: rgba(255,235,200,.42); border-radius: 12px 12px 0 0; filter: blur(1px);
}
/* 盖底金属饰条 */
.wood-chest .chest-lid::before {
  content: ''; position: absolute; bottom: 7px; left: 14px; right: 14px; height: 4px;
  background: linear-gradient(90deg, rgba(122,74,30,.5), rgba(255,235,200,.55), rgba(122,74,30,.5));
  border-radius: 2px;
}
.wood-chest .chest-lock {
  position: absolute; left: 50%; top: 46px; transform: translateX(-50%); width: 30px; height: 26px;
  background: linear-gradient(180deg, #ffe9a8 0%, #f2c94c 45%, #c99a24 100%);
  border: 3px solid #8a6a1c; border-radius: 6px; z-index: 3;
  box-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.5);
}
/* 钥匙孔 */
.wood-chest .chest-lock::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 11px; border-radius: 4px 4px 5px 5px; background: #4a3410;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.wood-chest.open .chest-lid { transform: rotateX(-115deg); }
.wood-chest.open { animation: chestBounce .5s ease; }
/* 开箱暖光闪光：箱盖打开瞬间一道暖白光闪过并扩散（不拦截点击，pointer-events:none） */
.wood-chest::before {
  content: ''; position: absolute; inset: -22px; border-radius: 18px; pointer-events: none; opacity: 0; z-index: 4;
  background: radial-gradient(circle at 50% 42%, rgba(255,242,200,.95), rgba(255,214,128,.45) 42%, transparent 70%);
}
.wood-chest.open::before { animation: chestFlash .55s ease-out forwards; }
@keyframes chestBounce { 0%{transform:translateY(0)} 40%{transform:translateY(-12px)} 100%{transform:translateY(0)} }
@keyframes chestFlash { 0%{opacity:0; transform:scale(.55)} 28%{opacity:1} 100%{opacity:0; transform:scale(1.25)} }
.chest-loot {
  color: var(--text-primary); font-weight: 700; font-size: 1rem; text-align: center;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
  /* 宝箱开启结算卡片：浅色底 + 描边，与浅色面板统一（原深色底+白字随面板改浅色同步调整） */
  background: var(--r-white-tint); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 18px; min-width: 230px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.chest-loot.show { opacity: 1; transform: translateY(0); }
.chest-loot .chest-loot-title {
  font-size: .95rem; letter-spacing: 1px; margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border); color: var(--r-orange);
}
/* 木质宝箱按钮区：打开 / 丢弃 */
.chest-actions { display: flex; gap: 14px; margin-top: 4px; }
.chest-actions .btn { min-width: 100px; }
.chest-loot .settle-eq { margin-top: 8px; text-align: left; }

/* 陷阱·遇伏提示弹窗：醒目警示 + 怪物图标 + 红色警告条 */
.ambush-pop { text-align: center; }
.ambush-pop .ambush-icon { font-size: 3rem; line-height: 1.2; margin: 8px 0 2px; filter: drop-shadow(0 4px 10px rgba(229,72,77,.45)); animation: ambushShake .5s ease-in-out 2; }
.ambush-pop .ambush-warn {
  margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: .95rem;
  background: var(--r-red-tint); border: 1px solid var(--r-red); color: var(--r-red-text);
}
@keyframes ambushShake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg) scale(1.06)} 75%{transform:rotate(12deg) scale(1.06)} }

/* 敌人从雾中淡入（仅战斗首次渲染） */
.enemy-fog.fog-in { animation: fogIn .55s ease both; }
@keyframes fogIn { 0% { opacity: 0; filter: blur(6px); transform: translateY(8px); } 100% { opacity: 1; filter: blur(0); transform: translateY(0); } }

/* 敌人怪物图鉴图片（替代旧 emoji 头像） */
.enemy-art {
  flex: 0 0 auto; align-self: flex-start;
  width: 72px; height: 72px; object-fit: contain;
  background: linear-gradient(180deg, #FAF6EE, #F1EADC);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 3px; box-sizing: border-box; background-clip: padding-box;
}
.enemy-art.big {
  width: 96px; height: 96px; /* 大怪/精英更大 */
  border-color: var(--r-orange);
  box-shadow: 0 0 0 2px rgba(232,130,30,.18);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-prompt .rp-icon, .wood-chest.open, .wood-chest.open::before { animation-duration: .001s; }
  .treasure-chest-overlay .chest-stage { animation-duration: .001s; }
  .settle-pop { animation-duration: .001s; }
  .ambush-pop .ambush-icon { animation-duration: .001s; }
  .enemy-fog.fog-in { animation-duration: .001s; }
}

/* ===================== 管理员面板：参数配置 + 玩家管理表格 ===================== */
.admin-params { display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin-bottom: 10px; }
.admin-params label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.admin-params .inp { width: 100%; box-sizing: border-box; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.admin-table thead th { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-hint); font-weight: 700; background: var(--r-white-tint); }
.admin-table tbody tr:hover { background: var(--r-white-tint); }
.admin-table td.num { font-variant-numeric: tabular-nums; }
.admin-table .btn { min-height: 26px; padding: 3px 10px; font-size: 0.74rem; margin-right: 6px; }