:root {
  --coral: #FF7F50;
  --coral-dark: #E8653B;
  --bg1: #FFE9DC;
  --bg2: #FFD8C2;
  --card-bg: #fff;
  --text: #3A2A22;
  --hp: #E74C3C;
  --energy: #F1C40F;
  --block: #5DADE2;
}

/* 通用隐藏：所有元素加 .hidden 即隐藏（!important 保证不被后续同类规则覆盖） */
.hidden { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, "Noto Sans CJK SC", "Noto Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app {
  width: 100%;
  max-width: 680px;
  padding: 12px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--coral-dark);
}

.top-right { display: flex; align-items: center; gap: 8px; }
.floor-info, .best-info, .gold-info, .net-stat { white-space: nowrap; }
.btn-restart {
  background: #fff;
  color: var(--coral-dark);
  border: 2px solid var(--coral);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 18px; font-weight: bold;
  cursor: pointer; line-height: 1;
  box-shadow: 0 2px 0 var(--coral-dark);
}
.btn-restart:active { transform: translateY(2px); }

.btn-sound {
  background: #fff;
  color: var(--coral-dark);
  border: 2px solid var(--coral);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--coral-dark);
  padding: 0;
}
.btn-sound:active { transform: translateY(2px); }

.enemy-area {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}
/* 多敌人：卡片收窄，随从略小以突出主敌 */
.enemy-area.multi .enemy { min-width: 0; flex: 1 1 0; max-width: 210px; padding: 10px 12px; }
.enemy-area.multi .enemy.minion { transform: scale(.94); opacity: .96; }
.enemy.targeted {
  border-color: var(--coral-dark);
  box-shadow: 0 4px 0 var(--coral-dark), 0 0 0 3px rgba(232, 101, 59, .28);
}
.enemy.targeted .foe-target {
  margin-top: 6px; font-size: 11px; font-weight: bold;
  color: #fff; background: var(--coral-dark);
  border-radius: 999px; padding: 2px 0;
}
.enemy.minion .enemy-name { font-size: 14px; }
.foe-min {
  font-size: 10px; font-weight: normal; color: #8a7a6e;
  background: #f1e4dc; border-radius: 6px; padding: 1px 5px; vertical-align: middle;
}
.enemy.dead { opacity: .4; filter: grayscale(1); }
.enemy.dead .enemy-intent { color: #9b8873; }
/* R54：蓄力中 —— 金色脉冲光晕，提示下回合有大招（可攒伤害打断） */
.enemy.charging { animation: chargingGlow 1.1s ease-in-out infinite; }
@keyframes chargingGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(241,196,15,.5), 0 0 10px rgba(241,196,15,.3); }
  50%      { box-shadow: 0 0 0 3px rgba(241,196,15,.95), 0 0 22px rgba(241,196,15,.65); }
}
/* R54：斩杀线（≤25%）—— 红边提示「可一波带走」 */
.enemy.low { border-color: #C0392B; }
.enemy.low .enemy-hp { color: #C0392B; }
.ctag-aoe { background: #fdf6dd; color: #8C7414; border-color: #C9A227; }

.enemy {
  background: #fff;
  border: 3px solid var(--coral);
  border-radius: 18px;
  padding: 14px 22px;
  text-align: center;
  min-width: 220px;
  box-shadow: 0 4px 0 var(--coral-dark);
  position: relative;
}

.enemy-name { font-size: 22px; font-weight: bold; }
.enemy-hp { margin: 6px 0; font-weight: bold; }

.hp-bar {
  height: 12px;
  background: #eee;
  border-radius: 8px;
  overflow: hidden;
}

.hp-fill {
  height: 100%;
  background: var(--hp);
  transition: width .3s;
}

.enemy-intent {
  margin-top: 6px;
  color: var(--coral-dark);
  font-weight: bold;
}
.enemy-intent.enraged { color: #C0392B; text-shadow: 0 0 6px rgba(192,57,43,.4); }
.enemy-block { color: #2E86C1; font-weight: bold; margin-left: 8px; }

.player-area {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 12px 0;
  font-size: 18px;
  font-weight: bold;
  position: relative;
}

/* R57：玩家属性改为圆角胶囊，与珊瑚橙主题统一 */
.player-area .stat {
  background: #fff;
  border: 2px solid var(--coral);
  border-radius: 14px;
  padding: 4px 12px;
  box-shadow: 0 2px 0 var(--coral-dark);
  font-size: 16px;
  white-space: nowrap;
}

.hand-area {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 150px;
  margin: 14px 0;
}

.card {
  width: 100px;
  background: var(--card-bg);
  border: 3px solid var(--coral);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--coral-dark);
  transition: transform .14s ease, filter .14s ease;
  user-select: none;
  position: relative;
  overflow: hidden;
}

/* R57：悬停抬升 + 珊瑚橙光晕（用 filter 避免与稀有度 box-shadow 优先级冲突） */
.card:hover { transform: translateY(-8px) scale(1.04); filter: drop-shadow(0 8px 10px rgba(232, 101, 59, .42)); z-index: 4; }
.card:active { transform: translateY(-3px) scale(1.02); }

/* 出牌飞出动画：卡牌上浮、放大并淡出 */
.card.playing {
  transition: transform .2s ease-in, opacity .2s ease-in;
  transform: translateY(-110px) scale(1.18) rotate(-3deg);
  opacity: 0;
  z-index: 5;
}

/* 抽牌弹入动画（回合开始触发一次） */
.hand-area.drawing .card { animation: cardPop .3s ease both; }
@keyframes cardPop {
  from { opacity: 0; transform: translateY(22px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* 敌人受击闪光 */
.enemy.flash { animation: hitFlash .22s; }
@keyframes hitFlash {
  0%, 100% { background: #fff; }
  40%      { background: #ffd6cc; box-shadow: 0 0 0 3px #E74C3C, 0 4px 0 var(--coral-dark); }
}

.card.attack {
  border-color: #E74C3C;
  box-shadow: 0 4px 0 #b03a2e;
}

/* R57：卡牌稀有度可视化 —— 顶部品质色条 + 非攻击卡按稀有度上色边框。
   攻击卡保持红边以区分类型；升级卡(.up)保留金色提示。颜色对应 README：
   普通灰 / 进阶蓝 / 稀有金 / 专属紫 / 诅咒褐。复用 game.js 已有的 r-* class，零逻辑改动。 */
.card.r-common   { --rc: #AAB2BD; }
.card.r-uncommon { --rc: #3FA7E0; }
.card.r-rare     { --rc: #F2B705; }
.card.r-special  { --rc: #A55ABF; }
.card.r-curse    { --rc: #6B3FA0; }
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--rc, transparent);
  border-radius: 11px 11px 0 0;
}
.card.r-common:not(.attack):not(.up)   { border-color: #AAB2BD; box-shadow: 0 4px 0 #7E8893; }
.card.r-uncommon:not(.attack):not(.up) { border-color: #3FA7E0; box-shadow: 0 4px 0 #2C7DB0; }
.card.r-rare:not(.attack):not(.up)     { border-color: #F2B705; box-shadow: 0 4px 0 #C28E04; }
.card.r-special:not(.attack):not(.up)  { border-color: #A55ABF; box-shadow: 0 4px 0 #7A3F91; }
/* 诅咒卡沿用既有 .card.r-curse 暗紫描边 + 暗色主题，不在此上棕色边框（顶条已改为紫色呼应） */

.card .cost {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 34% 28%, #FFE89A, #F1C40F 62%, #D4A017);
  color: #6b4e00;
  border: 2px solid #FFF3C4;
  border-radius: 50%;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .22);
  z-index: 2;
}

/* R57+ 卡片插画：卡片顶部展示精美插画，费用徽标浮于插画左上角 */
.card .card-art {
  width: calc(100% + 16px);
  height: 80px;
  margin: -8px -8px 6px;
  background: #faf0e6 center/cover no-repeat;
  border-radius: 11px 11px 0 0;
  position: relative;
  overflow: hidden;
}
.card .card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 55%, rgba(255,255,255,0.9));
}

.card .cname { font-weight: bold; margin: 2px 0 4px; font-size: 15px; }
.card .cdesc { font-size: 11px; color: #777; line-height: 1.3; }

.controls { text-align: center; margin: 10px 0; }

.piles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pile {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: bold;
  color: #555;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 14px;
  padding: 3px 10px;
  box-shadow: 0 2px 0 #e2e2e2;
}

/* 药水栏（战斗中显示，玩家回合可点击使用） */
.potion-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 2px;
  flex-wrap: wrap;
}
.potion-bar.hidden { display: none; }
.potion-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 22px;
  line-height: 1;
  background: linear-gradient(160deg, #fff7fb, #ffe6f2);
  border: 2px solid var(--coral);
  border-radius: 50%;
  box-shadow: 0 3px 0 #e98aa6;
  cursor: pointer;
  transition: transform .1s ease;
}
.potion-chip:hover:not(:disabled) { transform: translateY(-2px); }
.potion-chip:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #e98aa6; }
.potion-chip:disabled { opacity: .45; cursor: not-allowed; box-shadow: 0 3px 0 #f0c4d3; }
.pc-emoji { pointer-events: none; }
.pile-exhaust { color: #c0392b; border-color: #f3c4bd; box-shadow: 0 2px 0 #e8b7ae; }

.btn-end {
  background: var(--coral);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--coral-dark);
}

/* 本局结算面板 */
.summary {
  background: #fff7f2;
  border: 2px solid var(--coral);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 10px 0;
  text-align: left;
}
.sum-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed #f0c9b6;
  font-size: 14px;
}
.sum-row:last-child { border-bottom: none; }
.sum-row b { color: var(--coral-dark); }
.sum-deck-label { font-weight: bold; color: var(--coral-dark); margin: 8px 0 6px; text-align: left; }
.sum-deck { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sum-card {
  background: var(--card-bg);
  border: 2px solid var(--coral);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
}
.sum-card.attack { border-color: #E74C3C; }
.sum-card.up { border-color: #F1C40F; background: #fff8e1; }

.btn-end:active { transform: translateY(2px); }
.btn-end:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.log {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  max-height: 130px;
  overflow: auto;
  margin-top: 8px;
  line-height: 1.5;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  /* flex-start + 子项 margin:auto：内容超高时不会把顶部裁掉，且能正常滚动 */
  align-items: flex-start;
  justify-content: center;
  z-index: 10;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 12px;
}

.overlay.hidden { display: none; }

.modal {
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  max-width: 92%;
  text-align: center;
  box-shadow: 0 8px 0 var(--coral-dark);
  margin: auto;
  flex: 0 0 auto;
}

.modal h2 { color: var(--coral-dark); margin-top: 0; }

/* 开始页面 */
.start-modal { max-width: 480px; }
.game-title { font-size: 30px; color: var(--coral-dark); margin: 0 0 4px; }
.game-sub { color: #999; margin: 0 0 6px; letter-spacing: 1px; }
.start-asc {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 14px;
  border-radius: 16px;
  font-size: 13px; font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #FF7F50, #E8653B);
  box-shadow: 0 3px 0 #C0532A;
}
.start-rules {
  text-align: left;
  background: #FFF6F0;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.9;
}
.start-rules p { margin: 0; }
.start-best { color: var(--coral-dark); font-weight: bold; margin: 0 0 14px; }
.btn-start {
  background: var(--coral); color: #fff; border: none;
  padding: 14px 40px; border-radius: 26px;
  font-size: 18px; font-weight: bold; cursor: pointer;
  box-shadow: 0 4px 0 var(--coral-dark);
}
.btn-start:active { transform: translateY(2px); }

/* 结算页按钮行：再来一局 / 分享战绩 并排 */
.modal-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.modal-btns .btn { flex: 1 1 auto; min-width: 130px; }
.btn-share {
  background: #fff; color: var(--coral-dark);
  border: 2px solid var(--coral);
  padding: 12px 22px; border-radius: 22px;
  font-size: 15px; font-weight: bold; cursor: pointer;
  box-shadow: 0 4px 0 var(--coral-dark);
}
.btn-share:hover { background: #FFF3EC; }
.btn-share:active { transform: translateY(2px); }

/* 开始页「继续游戏」：描边样式，置于开始按钮下方 */
.btn-continue {
  background: #fff; color: var(--coral-dark);
  border: 2px solid var(--coral);
  padding: 12px 36px; border-radius: 26px;
  font-size: 16px; font-weight: bold; cursor: pointer;
  box-shadow: 0 4px 0 var(--coral-dark);
  margin-top: 10px;
}
.btn-continue:active { transform: translateY(2px); }
.btn-continue.hidden { display: none; }

/* 开始页战绩榜 */
.start-board {
  background: #FFF6F0;
  border: 2px solid var(--coral);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
}
.board-title { font-weight: bold; color: var(--coral-dark); margin-bottom: 4px; }
.board-empty { color: #999; text-align: center; }
.board-row { padding: 2px 0; border-bottom: 1px dashed #f0c9b6; }
.board-row:last-child { border-bottom: none; }
.board-win { color: #fff; background: #27AE60; border-radius: 8px; padding: 1px 6px; font-size: 11px; }
.board-date { color: #aaa; font-size: 11px; margin-left: 4px; }

/* 锻造升级：每条路线二选一 */
.forge-item {
  display: flex; align-items: center; gap: 10px;
  background: #fff7f2; border: 2px solid var(--coral);
  border-radius: 14px; padding: 8px 10px; margin: 8px 0;
  text-align: left;
}
.forge-item .card { cursor: default; flex: 0 0 auto; }
.forge-paths { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.forge-btn {
  margin: 0; padding: 8px 10px; font-size: 13px; text-align: left;
  line-height: 1.3;
}
.forge-btn .fp-desc { font-weight: normal; opacity: .9; }
.forge-btn.forge-refine {
  background: linear-gradient(180deg, #fff0d6, #ffe0b0);
  border-color: #E8A33D; box-shadow: 0 4px 0 #C9872C; color: #8a5a14;
}
.forge-btn.forge-refine:hover { background: linear-gradient(180deg, #ffe6bd, #ffd495); }

/* 战斗飘字与受击动画 */
.float-text {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  font-weight: bold; font-size: 24px;
  pointer-events: none; z-index: 5;
  animation: floatUp .8s ease-out forwards;
}
.float-text.dmg { color: var(--hp); }
.float-text.heal { color: #2ECC71; }
.float-text.block { color: var(--block); }
/* R54：大伤害飘字分级 —— 数值越大越醒目，让「重击」一眼可辨 */
.float-text.crit {
  font-size: 34px;
  color: #FF3B30;
  text-shadow: 0 0 6px rgba(255,59,48,.9), 0 2px 0 #7B241C, 0 0 14px rgba(255,59,48,.5);
  animation: floatCrit .8s ease-out forwards;
}
.float-text.crit-big {
  font-size: 44px;
  color: #FFE066;
  text-shadow: 0 0 8px rgba(255,224,102,.95), 0 3px 0 #B7950B, 0 0 20px rgba(255,59,48,.6);
}
@keyframes floatCrit {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(.6); }
  35%  { opacity: 1; transform: translate(-50%, -14px) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}
/* R54：玩家低血量警告（≤25%）—— 红色脉冲描边 */
.player-area.low-hp { animation: lowHpPulse 1.1s ease-in-out infinite; }
@keyframes lowHpPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,59,48,.35), 0 0 10px rgba(255,59,48,.25); }
  50%      { box-shadow: 0 0 0 3px rgba(255,59,48,.85), 0 0 22px rgba(255,59,48,.6); }
}
@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -42px); }
}
.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* 状态图标 */
.status-row {
  display: flex; gap: 6px; justify-content: center;
  flex-wrap: wrap; margin-top: 8px; min-height: 22px;
}
.status {
  font-size: 13px; font-weight: bold;
  padding: 3px 9px; border-radius: 11px;
  border: 1.5px solid rgba(0, 0, 0, .10);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}
.status.str  { background: linear-gradient(180deg, #FDEBD0, #F6D29C); color: #B5601A; border-color: #E8C27E; }
.status.vul  { background: linear-gradient(180deg, #FADBD8, #F2B6AE); color: #C0392B; border-color: #EFA49C; }
.status.weak { background: linear-gradient(180deg, #EBDEF0, #D9C2E4); color: #7D3C98; border-color: #C9A8D8; }
.status.psn  { background: linear-gradient(180deg, #D5F5E3, #AEEBC6); color: #1E8449; border-color: #9BD9B2; }

/* R58：激活能力牌（Power）展示条 —— 珊瑚橙药丸，与状态药丸风格一致 */
.player-powers {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 6px 0 2px; font-size: 12px; min-height: 0;
}
.player-powers.hidden { display: none; }
.pw-pill {
  display: inline-block; padding: 2px 9px; border-radius: 11px;
  background: linear-gradient(180deg, #FFE3C9, #FFD0A8);
  color: #C2410C; border: 1.5px solid #FFB37A;
  font-weight: bold; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}

.reward-cards {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 16px 0;
  flex-wrap: wrap;
}

.btn {
  background: var(--coral);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  margin: 6px;
  font-size: 15px;
}

/* 遗物栏：常驻显示已获得遗物 */
.relic-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 26px;
  margin-bottom: 6px;
}
.relic-chip {
  font-size: 18px;
  background: #fff;
  border: 2px solid var(--coral);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 var(--coral-dark);
  cursor: help;
  position: relative;
  font-family: inherit;
  padding: 0;
}

/* 主动遗物：可点击发动，右下角显示充能进度 */
.relic-chip.act {
  border-style: solid;
  border-color: #C9A227;
  box-shadow: 0 2px 0 #8C7414;
  cursor: pointer;
}
.relic-chip.act .rc-charge {
  position: absolute;
  right: -6px; bottom: -7px;
  min-width: 22px; padding: 0 3px;
  font-size: 9px; line-height: 13px; font-weight: bold; font-style: normal;
  color: #fff; background: #9b8873;
  border-radius: 8px; border: 1px solid #fff;
}
.relic-chip.act:disabled { cursor: help; opacity: 1; filter: grayscale(.45); }
.relic-chip.act.ready { animation: relicReady 1.4s ease-in-out infinite; }
.relic-chip.act.ready .rc-charge { background: var(--coral-dark); }
.relic-chip.act.ready:hover:not(:disabled) { transform: translateY(-2px); }
.relic-chip.act:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #8C7414; }
@keyframes relicReady {
  0%, 100% { box-shadow: 0 2px 0 #8C7414, 0 0 0 0 rgba(255, 165, 0, .55); }
  50%      { box-shadow: 0 2px 0 #8C7414, 0 0 0 5px rgba(255, 165, 0, 0); }
}

/* 遗物主动技能提示（图鉴 / 奖励卡） */
.relic-act {
  margin-top: 6px; padding: 4px 6px;
  font-size: 11px; line-height: 1.4; text-align: left;
  color: #7a5a12; background: #fdf6dd;
  border: 1px dashed #C9A227; border-radius: 6px;
}
.relic-act b { color: #8C7414; }

/* SW 新版本提示条 */
.update-bar {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--coral-dark); color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  font-size: 13px; font-weight: bold;
  cursor: pointer;
  animation: updateIn .35s ease both;
}
.update-bar:hover { background: var(--coral); }
@keyframes updateIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 奖励界面：分区标签与遗物卡 */
.reward-label {
  text-align: left;
  font-weight: bold;
  color: var(--coral-dark);
  margin: 12px 0 4px;
  font-size: 14px;
}
.card.relic {
  border-color: #C9A227;
  box-shadow: 0 4px 0 #8C7414;
}
.card.relic .remoji { font-size: 28px; margin: 4px 0; }

/* 药水卡（掉落弹窗展示） */
.card.potion {
  border-color: var(--coral);
  box-shadow: 0 4px 0 #e98aa6;
  background: linear-gradient(165deg, #fff, #fff1f6);
}
.card.potion .pemoji { font-size: 30px; margin: 4px 0; }
.pot-full { color: #c0392b; font-size: 13px; margin: 10px 0 4px; }

/* 地图分支界面 */
.map-modal { max-width: 440px; }
.map-tip { color: #999; font-size: 13px; margin: 0 0 12px; }
.map-row { display: flex; gap: 14px; justify-content: center; margin: 10px 0; }
.map-node {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid #ccc; background: #f4f4f4; color: #aaa;
  font-size: 22px; cursor: not-allowed;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.map-node.active {
  border-color: var(--coral); background: #fff; color: var(--coral-dark);
  cursor: pointer; box-shadow: 0 0 0 3px var(--coral), 0 4px 0 var(--coral-dark);
  animation: pulse 1.2s infinite;
}
.map-node.boss.active { border-color: #C0392B; color: #C0392B; box-shadow: 0 0 0 3px #C0392B, 0 4px 0 #7B241C; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 金币与事件 / 商店 / 休息按钮 */
.gold-info { color: #CA6F1E; font-weight: bold; }

/* 离线状态徽章（PWA） */
.net-stat {
  padding: 3px 8px; border-radius: 999px;
  background: #6b5b4f; color: #fff; font-size: 12px; font-weight: bold;
  letter-spacing: .5px; white-space: nowrap;
  animation: netBlink 2s ease-in-out infinite;
}
@keyframes netBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.event-opt, .rest-opt {
  display: block; width: 100%; margin: 8px 0; padding: 12px;
  line-height: 1.4; text-align: center;
}
.ev-desc { font-size: 13px; font-weight: normal; }
.ev-story { color: #6b5b4f; font-size: 14px; line-height: 1.6; margin: 6px 0 10px; font-style: italic; }
.ev-tip { color: var(--coral-dark); font-weight: bold; margin: 4px 0 2px; }
.event-danger { background: linear-gradient(180deg, #ffe3e0, #ffc9c2); border-color: #e07a6f; box-shadow: 0 4px 0 #c75e52; color: #9c3b30; }
.rest-disabled { opacity: .5; filter: grayscale(.4); cursor: not-allowed; }
.event-danger:hover { background: linear-gradient(180deg, #ffd0cb, #ffb3aa); }
.event-danger .ev-desc { color: #b14a3d; }
.price { margin-top: 6px; color: #CA6F1E; font-weight: bold; font-size: 13px; }

/* 升级卡：金色描边高亮 */
.card.up { border-color: #F1C40F; box-shadow: 0 4px 0 #B9970B; }
.card.up .cname { color: #B9770E; }
/* 消耗卡：左下角火焰角标，提示本场战斗仅一次 */
.card.exh { border-color: #c0392b; }
.card.exh .cname::after {
  content: ' 🔥';
  font-size: 11px;
}

/* 卡牌稀有度品质边框已在 R57 统一为「顶部品质色条 + 非攻击卡按稀有度上色边框」（见 .card.r-* 区），此处不再用 outline 叠加 */

/* 地图新增节点配色 */
.map-node.chest.active { border-color: #C9A227; color: #8C7414; box-shadow: 0 0 0 3px #C9A227, 0 4px 0 #8C7414; }
.map-node.curse.active { border-color: #8E44AD; color: #8E44AD; box-shadow: 0 0 0 3px #8E44AD, 0 4px 0 #5B2C6F; }
.map-node.secret.active { border-color: #17A589; color: #117864; animation: pulse 1.2s infinite, glow 1.6s ease-in-out infinite; box-shadow: 0 0 0 3px #1ABC9C, 0 0 12px rgba(26,188,156,.7), 0 4px 0 #0E6655; }
/* 隐藏宝箱：抵达该行才被发现，金色高亮 + 脉冲提醒 */
.map-node.hidden.active { border-color: #C9A227; color: #8C7414; animation: pulse 1.2s infinite, glow 1.6s ease-in-out infinite; box-shadow: 0 0 0 3px #F1C40F, 0 0 12px rgba(241,196,15,.8), 0 4px 0 #8C7414; }
/* R52 连战：连续两场硬仗，深红高亮 + 脉冲，提示高风险高回报 */
.map-node.gauntlet.active { border-color: #B03A2E; color: #922B21; animation: pulse 1.2s infinite, glow 1.6s ease-in-out infinite; box-shadow: 0 0 0 3px #E74C3C, 0 0 12px rgba(231,76,60,.7), 0 4px 0 #7B241C; }
@keyframes glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

/* 成就系统：开始页面板 */
.start-ach {
  background: #FFF6F0;
  border: 2px solid var(--coral);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-top: 6px;
  text-align: center;
}
.ach-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #f0c9b6;
}
.ach-row.got {
  background: #FFF3D6;
  border-color: #C9A227;
  box-shadow: 0 2px 0 #8C7414;
}
.ach-row.locked { opacity: .6; }
.ach-emoji { font-size: 20px; }
.ach-name { font-size: 12px; font-weight: bold; color: var(--coral-dark); }
.ach-row.locked .ach-name { color: #aaa; font-weight: normal; }

/* 成就解锁提示 toast（固定在屏幕底部，非阻塞） */
#achToast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.ach-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #FF7F50, #E8653B);
  color: #fff;
  border-radius: 16px;
  padding: 10px 18px;
  box-shadow: 0 6px 0 #C0532A, 0 8px 18px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(20px) scale(.9);
  transition: opacity .35s ease, transform .35s ease;
  text-align: left;
}
.ach-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.ach-toast .at-emoji { font-size: 34px; line-height: 1; }
.ach-toast .at-title { font-size: 11px; opacity: .9; letter-spacing: 1px; }
.ach-toast .at-name { font-size: 17px; font-weight: bold; }
.ach-toast .at-desc { font-size: 12px; opacity: .92; }
.toast-msg { background: linear-gradient(135deg, #4A3FA0, #6B3FA0); box-shadow: 0 6px 0 #3D2459, 0 8px 18px rgba(0,0,0,.25); }
.toast-msg .at-name { font-size: 15px; }

/* ===== 图鉴系统（Codex） ===== */
.btn-codex {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 11px;
  font-size: 15px;
  font-weight: bold;
  color: var(--coral-dark);
  background: #fff;
  border: 2px solid var(--coral);
  border-radius: 14px;
  box-shadow: 0 4px 0 #e0a892;
  cursor: pointer;
}
.btn-codex:hover { background: #FFF3EC; }
.btn-codex:active { transform: translateY(2px); }
.btn-codex-top {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 10px;
  width: 34px; height: 34px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 0 #e2e2e2;
}
.seed-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
}
.seed-input {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
  border: 2px solid #e0a892;
  border-radius: 12px;
  outline: none;
  color: var(--coral-dark);
}
.seed-input:focus { border-color: var(--coral); }
.btn-daily {
  flex: 0 0 auto;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, #FFB37A, #FF7F50);
  border: 2px solid var(--coral-dark);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--coral-dark);
  cursor: pointer;
}
.btn-daily:hover { background: linear-gradient(180deg, #FF9E5C, #F06F3E); }
.btn-daily:active { transform: translateY(2px); }
.codex-modal { max-width: 760px; }

.codex-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 6px 0 14px;
}
.codex-tab {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: bold;
  color: #6b5b4f;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 12px;
  cursor: pointer;
}
.codex-tab.active {
  color: #fff;
  background: var(--coral);
  border-color: var(--coral-dark);
  box-shadow: 0 3px 0 var(--coral-dark);
}

.codex-body { max-height: 56vh; overflow-y: auto; padding: 4px 2px; }
.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  justify-items: center;
}
.codex-grid .card { width: 132px; min-height: 96px; }
.codex-grid .card .cdesc { font-size: 11px; }
.upg-paths {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #e8c9b8;
  font-size: 10.5px;
  line-height: 1.45;
  color: #8a5a3a;
  text-align: left;
}

.codex-enemy {
  width: 132px;
  background: #fff;
  border: 2px solid #cfe3ef;
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
  box-shadow: 0 3px 0 #b3d2e2;
}
.codex-enemy.elite { border-color: #d9b3e6; box-shadow: 0 3px 0 #c08fd6; }
.codex-enemy.boss { border-color: #C9A227; box-shadow: 0 3px 0 #8C7414; }
.cemoji { font-size: 30px; line-height: 1; }
.cename { font-size: 13px; font-weight: bold; color: #444; margin-top: 2px; }
.ckind {
  font-size: 10px;
  font-weight: normal;
  color: #fff;
  background: #7f9bb0;
  border-radius: 8px;
  padding: 1px 6px;
}
.codex-enemy.elite .ckind { background: #b07fc6; }
.codex-enemy.boss .ckind { background: #C9A227; }
.cemeta { font-size: 12px; color: #c0392b; font-weight: bold; margin: 3px 0; }
.cedesc { font-size: 11px; color: #6b5b4f; line-height: 1.4; text-align: left; }

.codex-status { display: flex; flex-direction: column; gap: 8px; }
.status-row-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 12px;
  padding: 10px 12px;
}
.semoji { font-size: 24px; line-height: 1; }
.sname { font-size: 14px; font-weight: bold; color: var(--coral-dark); min-width: 36px; }
.sdesc { font-size: 13px; color: #6b5b4f; line-height: 1.5; }

/* ===== 商店增强（多卡 / 遗物 / 药水 / 升级 / 移除 / 刷新） ===== */
.shop-label {
  text-align: left;
  font-weight: bold;
  color: var(--coral-dark);
  margin: 12px 0 4px;
  font-size: 14px;
}
.shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 6px;
}
.shop-actions .btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 10px;
  font-size: 13px;
}
.shop-note {
  color: #c0392b;
  font-size: 12px;
  margin: 4px 0 0;
  text-align: center;
}

/* ===== 职业系统（开始页三选一 · 顶栏徽章 · 图鉴职业页） ===== */
.section-title {
  font-weight: bold;
  color: var(--coral-dark);
  margin: 8px 0 8px;
  font-size: 15px;
}
.class-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.class-card {
  width: 138px;
  background: #fff;
  border: 3px solid #eee;
  border-radius: 14px;
  padding: 8px 9px 10px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 3px 0 #e0d3cb;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.class-card:hover { transform: translateY(-4px); }
.class-card.selected {
  border-color: var(--coral);
  box-shadow: 0 4px 0 var(--coral-dark), 0 0 10px rgba(255, 127, 80, .35);
  background: linear-gradient(170deg, #fff, #fff3ee);
}
.cls-head { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cls-emoji { font-size: 26px; line-height: 1; }
.cls-name { font-size: 16px; font-weight: bold; color: var(--coral-dark); }
.cls-won { font-size: 13px; }
.cls-tag {
  font-size: 11px;
  color: #fff;
  background: var(--coral);
  border-radius: 10px;
  display: inline-block;
  padding: 1px 8px;
  margin: 4px 0 6px;
}
.cls-desc { font-size: 11.5px; color: #6b5b4f; line-height: 1.45; text-align: left; min-height: 50px; }
.cls-stat { font-size: 12.5px; font-weight: bold; color: #c0392b; margin: 6px 0 2px; }
.cls-relic { font-size: 11px; color: #8a5a3a; text-align: left; }
.cls-deck { font-size: 10.5px; color: #999; text-align: left; margin-top: 4px; line-height: 1.4; }

/* 顶栏职业徽章（金色圆标，区别于遗物） */
.cls-chip { border-color: #C9A227; box-shadow: 0 2px 0 #8C7414; }

/* 图鉴 · 职业页 */
.codex-class { display: flex; flex-direction: column; gap: 10px; }
.cls-panel {
  background: #fff;
  border: 2px solid #f0d8c8;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  box-shadow: 0 3px 0 #e8c9b8;
}
.cls-panel .cls-head { justify-content: flex-start; }
.cls-panel .cls-desc { min-height: 0; font-size: 12.5px; }
.cls-lock { font-size: 11px; color: #aaa; margin-left: 6px; }
.codex-note { font-size: 12px; color: #999; line-height: 1.5; margin-top: 6px; text-align: left; }
.cls-only {
  margin-top: 5px;
  font-size: 10.5px;
  color: #B9770E;
  background: #fff8e1;
  border-radius: 8px;
  padding: 2px 6px;
}

/* 职业专属卡品质边框已在 R57 统一处理（见 .card.r-special 区），此处不再用 outline 叠加 */
.sum-card.cls { border-color: #8E44AD; background: #f6efff; }

/* 诅咒卡品质边框（暗紫黑） */
.card.r-curse {
  outline: 3px solid #6B3FA0;
  outline-offset: -1px;
  box-shadow: 0 0 10px rgba(107, 63, 160, .55), 0 4px 0 #3D2459;
}
/* 诅咒卡：灰暗、不可打出 */
.card.curse {
  background: linear-gradient(160deg, #2b2440, #1c1830);
  color: #d9cdf0;
  border-color: #4a3a66;
  filter: saturate(.7);
}
.card.curse .cost {
  background: #4a1f2e;
  color: #ff9aa6;
  border-color: #7a2d44;
}
.card.curse .cname { color: #ffb3c1; }
.card.curse .cdesc { color: #c9b8e6; }
.card.curse:hover { transform: none; cursor: not-allowed; box-shadow: 0 0 10px rgba(107, 63, 160, .55), 0 4px 0 #3D2459; }

/* ===== 卡组检视器 + 出牌预览 ===== */
.btn-deck {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
}
.deck-modal { max-width: 520px; }
.deck-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
}
.deck-tab {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
}
.deck-tab.active {
  color: #fff;
  background: var(--coral);
  border-color: var(--coral-dark);
  box-shadow: 0 3px 0 var(--coral-dark);
}
.deck-body { max-height: 52vh; overflow-y: auto; padding: 4px 2px; }
/* 卡组检视工具条：搜索 / 筛选 / 排序 */
.deck-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.deck-search {
  flex: 1 1 150px;
  min-width: 130px;
  border: 2px solid #f0ded3;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 13px;
  color: #5c4a41;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.deck-search::placeholder { color: #c3b3a8; }
.deck-search:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 127, 80, .18);
}
.deck-sel {
  border: 2px solid #f0ded3;
  border-radius: 14px;
  padding: 5px 8px;
  font-size: 12px;
  color: #6b5b4f;
  background: #fff;
  cursor: pointer;
  outline: none;
  max-width: 120px;
}
.deck-sel:focus { border-color: var(--coral); }
.deck-reset {
  border: 2px solid #eee;
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12px;
  color: #999;
  background: #fff;
  cursor: pointer;
}
.deck-reset:hover { color: var(--coral-dark); border-color: var(--coral); }
.deck-note {
  font-size: 12px;
  color: #9c8b80;
  text-align: center;
  margin: 2px 0 8px;
}
.deck-note b { color: var(--coral-dark); }
.deck-chip-btn {
  border: none;
  background: #fff1e9;
  color: var(--coral-dark);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 4px;
}
.deck-chip-btn:hover { background: var(--coral); color: #fff; }
.deck-meta {
  margin-top: 4px;
  font-size: 10px;
  color: #b4a498;
  letter-spacing: .3px;
}
.deck-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  font-size: 12px;
  color: #6b5b4f;
  background: #fff8f4;
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.deck-stats b { color: var(--coral-dark); }
/* 第 41 轮：构筑分析面板（分布条 + 流派徽章） */
.deck-bars { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.dbar-group { flex: 1; min-width: 220px; background: rgba(255,255,255,.55); border: 1px solid #f0d9cc; border-radius: 10px; padding: 8px 10px; }
.dbar-title { font-size: 12px; color: var(--coral-dark); margin-bottom: 4px; font-weight: 700; }
.dbar-row { display: flex; align-items: center; gap: 7px; margin: 4px 0; font-size: 11px; }
.dbar-row.dbar-empty { color: #aaa; }
.dbar-k { width: 52px; flex: none; text-align: right; color: #6b5b4f; }
.dbar-track { flex: 1; height: 11px; background: rgba(0,0,0,.07); border-radius: 6px; overflow: hidden; }
.dbar-fill { display: block; height: 100%; border-radius: 6px; transition: width .2s; }
.dbar-v { width: 26px; flex: none; text-align: left; color: #6b5b4f; font-weight: 700; }
.dbar-atk { background: linear-gradient(90deg,#ff9f6b,#ff5e3a); }
.dbar-skill { background: linear-gradient(90deg,#7fd0ff,#3a8dff); }
.dbar-power { background: linear-gradient(90deg,#ffd166,#ff9f1c); }
.dbar-curse { background: linear-gradient(90deg,#b3a4ff,#6c5ce7); }
.dbar-c0 { background: #8de969; }
.dbar-c1 { background: #ffd166; }
.dbar-c2 { background: #ff9f1c; }
.dbar-c3 { background: #ff5e3a; }
.arch-badge { background: linear-gradient(90deg,#ff7f50,#ff9f1c); color: #2a160a; font-weight: 800; padding: 2px 10px; border-radius: 12px; box-shadow: 0 1px 4px rgba(255,127,80,.4); }
/* 构筑模板对比（R45）：Top3 成型进度条 + 可执行建议 */
.deck-tpl { background: rgba(255,255,255,.55); border: 1px solid #f0d9cc; border-radius: 10px; padding: 8px 10px; margin: 0 0 6px; }
.tpl-row { display: flex; align-items: center; gap: 7px; margin: 4px 0; font-size: 11px; }
.tpl-row.done .tpl-k { color: #8C7414; font-weight: 800; }
.tpl-k { width: 76px; flex: none; text-align: right; color: #6b5b4f; font-weight: 700; }
.dbar-done { background: linear-gradient(90deg,#ffe08a,#f1c40f); box-shadow: 0 0 6px rgba(241,196,15,.7); }
.deck-advice { font-size: 12px; color: #5a4a3f; background: rgba(255,127,80,.1); border-left: 3px solid var(--coral); border-radius: 6px; padding: 5px 9px; margin: 0 0 8px; }
.deck-piles {
  display: flex;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.deck-empty { color: #bbb; font-size: 13px; padding: 20px 0; }

/* 牌堆计数可点击查看 */
.pile.clickable { cursor: pointer; }
.pile.clickable:hover { background: #fff1ea; }

/* 手牌出牌预览（实际结算值） */
.cpreview {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px dashed #e8c9b8;
  font-size: 11px;
  font-weight: bold;
  color: #c0392b;
  line-height: 1.35;
}

/* ===== 连锁（Chain）徽章 ===== */
.chain-stat {
  color: #8E44AD;
  border-color: #e4d3f0;
  background: #faf5ff;
}
.chain-stat.hot {
  color: #fff;
  background: linear-gradient(160deg, #a569bd, #8E44AD);
  border-color: #6C3483;
  animation: chainPulse 1s ease-in-out infinite;
}
@keyframes chainPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ===== 敌人词缀（Affix） ===== */
.enemy-affix { margin: 2px 0 4px; }
.enemy-affix.hidden { display: none; }
.affix-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: bold;
  color: #6C3483;
  background: #f6efff;
  border: 2px solid #c8b0e0;
  border-radius: 12px;
  padding: 1px 9px;
  cursor: help;
}
/* 随从特质：青绿色调，与紫色词缀区分 */
.trait-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: bold;
  color: #0e6b5c;
  background: #e8faf5;
  border: 2px solid #9ad9c9;
  border-radius: 12px;
  padding: 1px 9px;
  cursor: help;
}
/* 站位标记：后排（被掩护时显示 🔒） */
.foe-pos {
  font-size: 10.5px;
  font-weight: bold;
  color: #8a7f78;
  background: #f0eae6;
  border-radius: 10px;
  padding: 0 6px;
  margin-left: 3px;
}
/* 后排被前排掩护：半透明 + 去饱和，提示单体打不到 */
.enemy.back { opacity: .96; }
.enemy.guarded {
  opacity: .62;
  filter: saturate(.55);
  border-style: dashed;
  cursor: not-allowed;
}
.enemy.guarded .foe-pos { color: #b03a2e; background: #fdecea; }
.affix-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.affix-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 5px 9px;
  text-align: left;
}
.affix-desc { font-size: 11.5px; color: #6b5b4f; line-height: 1.4; }

/* ===== 卡牌关键词标记：⚡起手 / ✋保留 ===== */
.ctags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
}
.ctag {
  font-size: 9.5px;
  font-weight: bold;
  border-radius: 8px;
  padding: 1px 6px;
  line-height: 1.5;
  cursor: help;
}
.ctag-innate { color: #1F618D; background: #eaf2fb; border: 1px solid #a9c9e8; }
.ctag-retain { color: #7D6608; background: #fdf6e0; border: 1px solid #e0cf9a; }