/* ===== 物理对撞机 · 像素复古风 ===== */
@font-face {
  font-family: 'Zpix';
  src: url('https://cdn.jsdelivr.net/gh/SolidZORO/zpix-pixel-font/dist/zpix.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg: #12142a;
  --panel: #232b57;
  --panel2: #1b2145;
  --ink: #0f0f1b;
  --text: #e8ecff;
  --dim: #aab4d4;
  --yellow: #ffcd75;
  --gold: #ffd93c;
  --red: #ff3355;
  --orange: #ff5a3c;
  --blue: #3ca6ff;
  --purple: #b06cff;
  --green: #2fbf71;
  --confusion: #d36cff;
  --wave: #3fd8c2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden 属性必须赢过组件自带的 display 规则（如 .pixel-btn 的 inline-block） */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text);
  font-family: 'Zpix', 'Microsoft YaHei', sans-serif;
}

/* 扫描线 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.14) 3px 4px);
  z-index: 99;
}

#app { width: min(1560px, 100%); margin: 0 auto; }

.screen { display: none; }
.screen.active { display: block; animation: screenIn .25s steps(3); }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel {
  background: var(--panel);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}

/* ===== 按钮 ===== */
.pixel-btn {
  display: inline-block; /* <a> 也能当按钮用：inline 元素不吃 transform */
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  padding: 10px 22px;
  cursor: pointer;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
.pixel-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.pixel-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.pixel-btn:disabled { background: #565c80; color: #9aa0c0; cursor: not-allowed; box-shadow: 0 5px 0 #2a2d4a; }
.pixel-btn.big { font-size: 20px; padding: 14px 34px; }
.pixel-btn.ghost { background: var(--panel); color: var(--text); }

/* ===== 开始页 ===== */
#screen-start { text-align: center; padding-top: 26px; }

.game-title {
  font-size: 48px;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--ink);
  letter-spacing: 6px;
}
.subtitle { color: var(--dim); font-size: 14px; margin: 10px 0 20px; }

.rules-box {
  display: inline-block;
  text-align: left;
  padding: 14px 20px;
  margin-bottom: 24px;
}
.rules-box p { font-size: 14px; line-height: 2; color: var(--text); }

.pick-title { font-size: 20px; margin-bottom: 14px; color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); }

.char-list { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }

.char-card {
  width: 264px;
  padding: 16px 14px 14px;
  cursor: pointer;
  position: relative;
  transition: transform .1s steps(2);
  border-bottom: 6px solid var(--char-color, var(--yellow));
}
.char-card:hover { transform: translateY(-4px); }
.char-card.selected { outline: 3px solid var(--char-color); outline-offset: 2px; }
.char-card.selected::after {
  content: '已选择';
  position: absolute;
  top: -3px; right: -3px;
  background: var(--char-color);
  color: var(--ink);
  font-size: 12px;
  padding: 2px 8px;
  border: 2px solid var(--ink);
}
.char-sprite { line-height: 0; margin-bottom: 8px; }
.char-name { font-size: 20px; }
.school-tag {
  font-size: 12px;
  background: var(--char-color);
  color: var(--ink);
  padding: 1px 6px;
  border: 2px solid var(--ink);
  margin-left: 8px;
  vertical-align: 2px;
}
.char-role { font-size: 12px; color: var(--dim); margin: 6px 0; }
.char-passive { font-size: 12px; color: var(--gold); line-height: 1.8; }
.char-cards { font-size: 12px; color: var(--dim); line-height: 1.8; margin: 6px 0; text-align: left; }
.char-desc { font-size: 12px; color: var(--dim); }

.opponent-hint { margin-top: 14px; font-size: 14px; min-height: 20px; opacity: 0; transition: opacity .2s; }
.opponent-hint.show { opacity: 1; }

.share-tip { margin-top: 16px; font-size: 12px; color: var(--dim); padding: 0 12px; }

/* ===== 对战页 ===== */
.battle-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  padding: 8px 4px;
  color: var(--yellow);
}
#phase-label { color: var(--dim); font-size: 14px; }
.battle-top-right { display: flex; align-items: center; gap: 14px; }
.quit-btn { font-size: 13px; padding: 6px 12px; color: var(--dim); }

.arena {
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  align-items: center;
  gap: 8px;
  background: var(--panel2);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  padding: 18px 14px;
  margin-bottom: 12px;
}
.arena.shake { animation: shakeA .4s steps(4); }
@keyframes shakeA {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 3px); }
}

.fighter { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.sprite-wrap { position: relative; line-height: 0; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.fighter.enemy .pixel-sprite { transform: scaleX(-1); }

/* 精灵瞬时染色特效：class 由 ui.js 挂上，约 0.5s 自动渐隐后由 JS 摘除 */
.sprite-wrap.flash { animation: hit-red .5s steps(6); }
@keyframes hit-red {
  0%, 55% { filter: brightness(1.5) sepia(1) saturate(9) hue-rotate(-45deg) drop-shadow(0 0 14px var(--red)); }
  100% { filter: none; }
}
.sprite-wrap.dead { filter: grayscale(1) brightness(.45); }
.sprite-wrap.shield-glow { animation: shield-blue .55s steps(6); }
@keyframes shield-blue {
  0%, 55% { filter: brightness(1.35) drop-shadow(0 0 12px var(--blue)); }
  100% { filter: none; }
}
.sprite-wrap.heal-glow { animation: heal-green .55s steps(6); }
@keyframes heal-green {
  0%, 55% { filter: brightness(1.3) sepia(1) saturate(4) hue-rotate(55deg) drop-shadow(0 0 12px var(--green)); }
  100% { filter: none; }
}
/* debuff：整只染灰变"弱"，灰态停留久一点让玩家读出来 */
.sprite-wrap.ash-glow { animation: ash-gray .8s steps(6); }
@keyframes ash-gray {
  0% { filter: none; }
  35%, 70% { filter: grayscale(.95) brightness(.72); }
  100% { filter: none; }
}
/* buff：圣光增亮 + 金晕 */
.sprite-wrap.holy-glow { animation: holy-gold .6s steps(6); }
@keyframes holy-gold {
  0%, 55% { filter: brightness(1.5) saturate(1.3) drop-shadow(0 0 16px var(--gold)); }
  100% { filter: none; }
}
/* 闪避（光影玄师）：闪现式瞬移——消失、青光残影两连跳、归位；steps 保像素顿挫感，全程 0.6s 保证看得清 */
.sprite-wrap.blink-dodge { animation: blink-out .6s steps(10); }
@keyframes blink-out {
  0%  { opacity: 1; transform: none; filter: none; }
  18% { opacity: 0; transform: translateX(-16px); }
  34% { opacity: 0; transform: translateX(12px); }
  52% { opacity: 1; transform: translateX(-8px); filter: brightness(1.7) drop-shadow(0 0 14px #35e0ff); }
  70% { opacity: .35; transform: translateX(5px); }
  100%{ opacity: 1; transform: none; filter: none; }
}
/* 暴击（偏科狂怒加成浮动）：受击方重红高亮+左右抖动，比普通受击 hit-red 更亮更久，明确「这一下更痛」 */
.sprite-wrap.crit-hit { animation: crit-red .7s steps(7); }
@keyframes crit-red {
  0%, 62% { filter: brightness(2.1) sepia(1) saturate(13) hue-rotate(-45deg) drop-shadow(0 0 24px var(--red)); }
  18% { transform: translateX(-6px); }
  38% { transform: translateX(6px); }
  58% { transform: translateX(-3px); }
  100% { filter: none; transform: none; }
}

.fighter.player .sprite-wrap.lunge-right { animation: lungeR .42s steps(5); }
.fighter.enemy .sprite-wrap.lunge-left { animation: lungeL .42s steps(5); }
@keyframes lungeR { 0%,100% { transform: translateX(0); } 45% { transform: translateX(52px); } }
@keyframes lungeL { 0%,100% { transform: translateX(0); } 45% { transform: translateX(-52px); } }

.fighter.player .sprite-wrap.knock { animation: knockL .45s steps(6); }
.fighter.enemy .sprite-wrap.knock { animation: knockR .45s steps(6); }
@keyframes knockL { 0%,100% { transform: translateX(0); } 30% { transform: translateX(-30px) rotate(-5deg); } 60% { transform: translateX(8px); } }
@keyframes knockR { 0%,100% { transform: translateX(0); } 30% { transform: translateX(30px) rotate(5deg); } 60% { transform: translateX(-8px); } }

.fighter-info { width: 100%; max-width: 290px; text-align: center; }
.fighter-name { font-size: 16px; margin-bottom: 6px; }
.ai-tag {
  font-size: 12px;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--ink);
  padding: 0 5px;
  margin-right: 6px;
  vertical-align: 2px;
}

.hp-bar {
  width: 100%;
  height: 16px;
  background: #3a1230;
  border: 3px solid var(--ink);
}
.hp-fill { height: 100%; background: var(--red); transition: width .25s steps(5); }
.hp-text { font-size: 12px; color: var(--dim); margin-top: 3px; }

.energy-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.energy-pips { display: inline-flex; gap: 3px; }
.energy-pips i { width: 13px; height: 13px; background: #2a2f55; border: 2px solid var(--ink); display: inline-block; }
.energy-pips i.on { background: var(--gold); }
.energy-pips i.over { background: #3fa7ff; } /* 超出 5 点上限的溢出能量，蓝色格 */
.energy-extra { font-size: 12px; color: var(--gold); }

/* 角色天赋（被动）章容器：无被动的角色/敌人由 :empty 隐藏 */
.passive-row { margin-top: 5px; display: flex; justify-content: center; }
.passive-row:empty { display: none; }

.statuses { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 22px; margin-top: 6px; }
.chip {
  font-size: 12px;
  padding: 1px 6px;
  border: 2px solid var(--ink);
  background: #3a4180;
  color: var(--text);
}
.chip-shield { background: var(--blue); color: var(--ink); }
.chip-atk { background: var(--gold); color: var(--ink); }
.chip-thorns { background: var(--orange); color: var(--ink); }
.chip-good { background: var(--green); color: var(--ink); }
.chip-bad { background: #8a93b8; color: var(--ink); }
.chip-mag { background: var(--purple); color: var(--ink); }
.chip-conf { background: var(--confusion); color: var(--ink); }
.chip-rust { background: #a0642a; color: var(--ink); }
.chip-silence { background: #7a7290; color: var(--ink); }
.chip-dodge { background: #d8dce4; color: var(--ink); }
.chip-chg-plus { background: #ff6b6b; color: var(--ink); }
.chip-chg-minus { background: #5bb8ff; color: var(--ink); }
.chip-formula { background: var(--gold); color: var(--ink); }
.chip-wave { background: var(--wave); color: var(--ink); }
.chip-heat { background: #ff9f43; color: var(--ink); } /* 热量章：琥珀橙（热学博士资源） */
/* 角色天赋（被动）章：橙色样式（放在 .chip 基类之后避免被默认底色覆盖），点击弹出效果说明 */
.chip-passive { background: var(--orange); color: var(--ink); cursor: pointer; }
.chip-passive:hover { filter: brightness(1.15); }
.statuses .chip { cursor: pointer; }
.statuses .chip:hover { filter: brightness(1.15); }

/* 卡诺循环进度条：3 格常显于状态章旁，点亮数 = 当前相位进度 */
.carnot-pips { display: inline-flex; gap: 3px; align-self: center; }
.carnot-pips i { width: 13px; height: 13px; background: #2a2f55; border: 2px solid var(--ink); display: inline-block; }
.carnot-pips i.lit.heat { background: var(--orange); }
.carnot-pips i.lit.work { background: var(--gold); }
.carnot-pips i.lit.cool { background: var(--blue); }

/* 卡诺循环相位徽章（卡面） */
.card-ph { display: inline-block; margin-top: 6px; font-size: 10px; padding: 0 5px; border: 2px solid var(--ink); color: var(--ink); }
.card-ph.ph-heat { background: var(--orange); }
.card-ph.ph-work { background: var(--gold); }
.card-ph.ph-cool { background: var(--blue); }

/* 麦克斯韦妖选择器：手牌/牌堆/弃牌堆分区标题 + 弹窗整体限高滚动 */
.pick-zone { font-size: 12px; color: var(--dim); margin: 10px 0 2px; text-align: left; }
#discard-opts { max-height: 72vh; overflow-y: auto; }

.counts { display: flex; gap: 12px; justify-content: center; font-size: 12px; color: var(--dim); margin-top: 4px; }

/* 中央舞台 */
.stage { position: relative; height: 240px; display: flex; align-items: center; justify-content: center; }
.vs {
  font-size: 44px;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--gold);
  letter-spacing: 4px;
  opacity: .9;
}

#banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--ink);
  background: rgba(10, 12, 30, .72);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
#banner.enemy { color: var(--red); }
#banner.show { animation: bannerIn .9s steps(6) forwards; }
@keyframes bannerIn {
  0% { opacity: 0; transform: scale(1.6); }
  25% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

#science-popup {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) scale(.7);
  width: 208px;
  background: var(--panel2);
  border: 3px solid var(--gold);
  box-shadow: 0 4px 0 var(--ink);
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .15s, transform .15s steps(3);
}
#science-popup.show { opacity: 1; transform: translateX(-50%) scale(1); }
.sci-name { font-size: 14px; color: var(--gold); }
.sci-formula { font-size: 18px; color: #fff; margin: 6px 0; }
.sci-text { font-size: 12px; color: var(--dim); line-height: 1.7; }

/* 状态角标点击解释 */
#status-popup {
  position: absolute;
  left: 50%;
  bottom: 63%;
  transform: translateX(-50%) scale(.7);
  width: 236px;
  background: var(--panel2);
  border: 3px solid var(--blue);
  box-shadow: 0 4px 0 var(--ink);
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 7;
  transition: opacity .15s, transform .15s steps(3);
}
#status-popup.show { opacity: 1; transform: translateX(-50%) scale(1); }
.sci-physics { color: var(--blue); margin-top: 6px; }

/* 底部：日志 + 手牌 */
.battle-bottom {
  position: relative; /* 战报栏绝对定位铺满本行，底边始终与右侧手牌区对齐 */
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 12px;
  align-items: stretch;
}

.battle-log {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  background: var(--panel2);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  overflow-y: auto; /* 高度跟随右侧手牌区，战报再长也在栏内滚动，不撑大下栏 */
  padding: 10px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--dim);
}
.battle-log p:first-child { color: var(--text); }
/* 完整战报滚轮翻看：像素风滚动条 */
.battle-log::-webkit-scrollbar { width: 10px; }
.battle-log::-webkit-scrollbar-track { background: var(--panel); border-left: 2px solid var(--ink); }
.battle-log::-webkit-scrollbar-thumb { background: #4a5280; border: 2px solid var(--ink); }
.battle-log::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.hand-wrap {
  grid-column: 2; /* 战报栏绝对定位不占流，手牌区固定坐第二列（1fr） */
  background: var(--panel2);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  padding: 18px 12px 14px;
  position: relative;
  min-height: 310px;
  display: flex;
  flex-direction: column;
}

.hand {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  /* 限宽到恰好放下 3 张（3×136+2×14=436，第 4 张需 586 放不下）：5 张手牌稳定排成上 3 下 2 */
  max-width: 460px;
  margin-inline: auto;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
  gap: 14px;
  padding-top: 26px;
}
.hand.waiting .card { cursor: default; }
.hand.waiting::before {
  content: '对手回合中…';
  position: absolute;
  top: 8px; left: 14px;
  font-size: 12px;
  color: var(--dim);
}

.card {
  width: 136px;
  min-height: 168px;
  background: #141834;
  border: 3px solid var(--ink);
  outline: 2px solid var(--type-color, var(--blue));
  outline-offset: -6px;
  position: relative;
  padding: 12px 9px 9px;
  cursor: pointer;
  transition: transform .1s steps(2);
  user-select: none;
}
.card.type-attack { --type-color: var(--orange); }
.card.type-func { --type-color: var(--blue); }
.card.type-link { --type-color: var(--purple); }

.card:hover { transform: translateY(-12px); z-index: 3; }
.card.locked { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.card.locked:hover { transform: none; }

.card-cost {
  position: absolute;
  top: -12px; left: -10px;
  width: 34px; height: 34px;
  background: var(--gold);
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ink);
}
.card-cost small { font-size: 10px; margin-left: 1px; }
.card-name { font-size: 14px; color: var(--text); margin-top: 4px; }
.card-formula { font-size: 12px; color: var(--type-color); margin: 6px 0; }
.card-desc { font-size: 12px; color: var(--dim); line-height: 1.6; }

/* 结束回合放牌堆行右侧空位：原 top 定位会被居中后的第一行手牌压住 */
#btn-endturn { position: absolute; right: 12px; bottom: 12px; }

/* ===== 牌堆 / 弃牌堆 ===== */
/* 卡背用独立类名而非复用 .card：复用会继承 .card:hover 的 translateY(-12px)，
   导致叠层互相顶开、且量到的落点矩形不稳定 */
.card-back {
  width: 48px;
  height: 62px;
  background: var(--panel);
  border: 3px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  position: relative;
  overflow: hidden;
  flex: none;
}
.card-back::before {
  content: '';
  position: absolute;
  inset: 2px;
  background-image:
    linear-gradient(rgba(255,205,117,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,205,117,.16) 1px, transparent 1px);
  background-size: 6px 6px;
}
.card-back::after {
  content: 'Σ';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--ink);
}
.pile-discard .card-back::after { color: var(--dim); }

.piles {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  padding: 10px 4px 0;
  flex: none;
}
.pile { display: flex; align-items: flex-end; gap: 7px; }
.pile-layers { position: relative; width: 66px; height: 80px; }
.pile-layers .card-back { position: absolute; bottom: 0; left: 0; }
.pile-count {
  position: absolute;
  bottom: -2px; right: -2px;
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  padding: 0 3px;
  z-index: 20;
}
.pile-label { font-size: 12px; color: var(--dim); padding-bottom: 4px; }
.pile { cursor: pointer; transition: transform .06s steps(2); }
.pile:hover { transform: translateY(-2px); }
.pile:hover .pile-label { color: var(--gold); }

.pile.pulse .pile-layers { animation: pilePulse .26s steps(3); }
@keyframes pilePulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.12); }
}
.pile.reshuffling .pile-layers { animation: reshuffleGlow .52s steps(4); }
@keyframes reshuffleGlow {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.8) drop-shadow(0 0 7px var(--gold)); }
}

/* 抽牌飞行的卡背幽灵：挂在 body 上，避免被 renderHand 的 innerHTML='' 清掉 */
.draw-ghost {
  position: fixed;
  left: 0; top: 0;
  margin: 0;
  z-index: 50;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.3,.75,.4,1), opacity .16s linear;
}
.draw-ghost.out { opacity: 0; }

/* 未揭示的手牌保留占位，让 flex 几何自第一帧固定、飞行落点不中途位移 */
.unrevealed { visibility: hidden; pointer-events: none; }

/* 浮动数字 */
.float-num {
  position: absolute;
  top: 4%;
  font-size: 20px;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
  animation: floatUp .95s steps(8) forwards;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}
.float-num.big { font-size: 34px; color: var(--red); }
.float-num.heal { color: var(--green); }
.float-num.blocked, .float-num.block { color: var(--blue); }
.float-num.confusion { color: var(--confusion); }
.float-num.dodge { color: #e8ecf4; text-shadow: 0 0 8px rgba(255,255,255,.85); }
.float-num.thorns { color: var(--orange); }
.float-num.buff { color: var(--gold); top: 30%; }
.float-num.debuff { color: var(--purple); top: 30%; }
.float-num.move { color: #ffe08a; font-size: 15px; top: 62%; } /* 敌人招式条：贴精灵下方，与伤害数字/buff 角标错开 */
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(6px) scale(.6); }
  20% { opacity: 1; transform: translateY(0) scale(1.15); }
  100% { opacity: 0; transform: translateY(-44px) scale(1); }
}

/* ===== 结算页 ===== */
#screen-result { text-align: center; padding-top: 60px; }
#result-title { font-size: 56px; text-shadow: 5px 5px 0 var(--ink); letter-spacing: 8px; }
#result-title.win { color: var(--gold); }
#result-title.lose { color: var(--red); }
#result-sub { color: var(--dim); font-size: 14px; margin: 14px 0 26px; }

.result-stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.stat-item {
  background: var(--panel);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  padding: 12px 18px;
  min-width: 110px;
}
.stat-item b { display: block; font-size: 24px; color: var(--gold); margin-bottom: 4px; }
.stat-item span { font-size: 12px; color: var(--dim); }

#result-formulas h3 { font-size: 16px; color: var(--yellow); margin-bottom: 12px; text-shadow: 2px 2px 0 var(--ink); }
.formula-list { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 640px; margin: 0 auto; }

.result-btns { margin-top: 34px; display: flex; justify-content: center; gap: 14px; }

/* ===== 小屏适配 ===== */
@media (max-width: 880px) {
  .battle-bottom { grid-template-columns: 1fr; }
  /* 小屏单列，战报栏回归常规流，不再绝对定位拉平 */
  .battle-log { position: static; width: auto; height: 120px; min-height: 0; }
  .arena { grid-template-columns: 1fr 90px 1fr; padding: 12px 6px; }
  .stage { height: 150px; }
  .vs { font-size: 28px; }
  .card { width: 112px; min-height: 150px; }
  /* 长描述卡（电偶腐蚀等最坏 203px）会撑破 min-height，手牌高低不齐——手牌统一固定高 */
  .hand .card { height: 208px; }
  .hand { max-width: 400px; } /* 小屏卡牌更窄，同步限到每行 3 张 */
  .hand-wrap { grid-column: 1; min-height: 294px; }
  .card-back { width: 42px; height: 54px; }
  .card-back::after { font-size: 19px; }
  .pile-layers { width: 58px; height: 70px; }
  .piles { gap: 14px; padding-top: 8px; }
}

/* ===== 网站外壳：导航 / Hero / 板块 ===== */
html { scroll-behavior: smooth; }
section[id], header#hero { scroll-margin-top: 70px; }

#topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: rgba(18, 20, 42, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 3px solid transparent;
  transition: background .25s, border-color .25s;
}
#topnav.solid {
  background: rgba(18, 20, 42, .96);
  border-bottom-color: var(--ink);
  box-shadow: 0 3px 0 rgba(15, 15, 27, .5);
}
.nav-logo { text-decoration: none; line-height: 1.2; }
.logo-main { font-size: 20px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.logo-sub { font-size: 12px; color: var(--dim); margin-left: 8px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-size: 14px;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 12px;
  border: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--gold); background: var(--panel); border-color: var(--ink); }
.nav-links a.nav-cta {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  margin-left: 8px;
}
.nav-links a.nav-cta:hover { color: var(--ink); filter: brightness(1.1); }

/* 音乐开关（右上角 ♪）：金色像素按钮，关闭时灰色划线 */
.music-toggle {
  flex: none;
  width: 38px; height: 38px;
  margin-left: 8px;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.music-toggle:hover { filter: brightness(1.08); }
.music-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.music-toggle.off { background: #565c80; color: var(--dim); text-decoration: line-through; }

/* Hero */
#hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 16px 70px;
  overflow: hidden;
}
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-kicker { font-size: 13px; letter-spacing: 3px; color: var(--blue); }
.hero-title {
  font-size: clamp(38px, 8vw, 72px);
  color: var(--gold);
  text-shadow: 5px 5px 0 var(--ink);
  letter-spacing: 8px;
  margin: 16px 0 10px;
}
/* Hero 标题像素切换（PixelSwap）：悬停「物理学不存在了」→ 溶解出「物理对撞机」 */
.hero-swap {
  height: clamp(80px, 12vw, 128px);
  margin: 16px 0 10px; /* 沿用原 h1 的外边距，保持版式不变 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero-swap .pixel-swap__layer { display: flex; align-items: center; justify-content: center; }
.hero-swap .hero-title { margin: 0; white-space: nowrap; }
.hero-swap-alt {
  font-size: clamp(38px, 8vw, 72px);
  color: var(--blue);
  text-shadow: 5px 5px 0 var(--ink);
  letter-spacing: 8px;
  line-height: 1.2;
  white-space: nowrap;
}
.hero-sub { font-size: 16px; color: var(--text); }
.hero-slogan { margin-top: 16px; font-size: 15px; color: var(--dim); }
.hero-btns { margin-top: 30px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-cta { animation: ctaFloat 1.6s steps(2) infinite; }
@keyframes ctaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.hero-chips { margin-top: 24px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hero-chips .chip { font-size: 12px; }

/* 通用板块 */
.section { max-width: 1080px; margin: 0 auto; padding: 70px 16px 30px; }
.sec-head { text-align: center; margin-bottom: 30px; }
.sec-kicker { font-size: 12px; letter-spacing: 4px; color: var(--blue); }
.sec-title { font-size: 30px; text-shadow: 3px 3px 0 var(--ink); margin-top: 8px; }
.sec-title::after {
  content: '';
  display: block;
  width: 60px; height: 8px;
  background: var(--gold);
  border: 2px solid var(--ink);
  margin: 12px auto 0;
}
.sec-desc { font-size: 14px; color: var(--dim); margin-top: 14px; }

/* 项目背景 */
.bg-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: stretch; }
.bg-text { padding: 22px 24px; }
.bg-text h3 { font-size: 18px; color: var(--yellow); margin-bottom: 12px; text-shadow: 2px 2px 0 var(--ink); }
.bg-text p { font-size: 14px; line-height: 2.1; margin-bottom: 8px; }
.bg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bg-stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  text-align: center;
}
.bg-stats .stat b { font-size: 34px; color: var(--gold); }
.bg-stats .stat span { font-size: 12px; color: var(--dim); margin-top: 6px; }

/* 玩法规则 */
.rules-mode { font-size: 15px; color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); margin: 26px 0 12px; }
.rules-grid + .rules-mode { margin-top: 30px; }
.rules-note { margin-top: 18px; font-size: 13px; line-height: 1.9; color: var(--dim); text-align: center; }
.rules-note b { color: var(--gold); }
.rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rule-card { padding: 22px 16px; text-align: center; transition: transform .12s steps(2); }
.rule-card:hover { transform: translateY(-5px); }
.rule-icon { display: flex; justify-content: center; margin-bottom: 12px; color: var(--gold); }
.rule-icon svg { width: 44px; height: 44px; }
.rule-card h3 { font-size: 16px; margin-bottom: 10px; }
.rule-card p { font-size: 12px; line-height: 1.9; color: var(--dim); }
.rule-card b { color: var(--gold); }

/* 项目背景 · 新增内容一览 */
.new-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.new-chips span {
  font-size: 12px; color: var(--dim); padding: 5px 12px;
  background: var(--panel); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.new-chips span:hover { color: var(--gold); border-color: var(--gold); }

/* 角色介绍 */
.char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.roster-card {
  padding: 20px 16px 16px;
  text-align: center;
  cursor: pointer;
  border-bottom: 6px solid var(--char-color, var(--yellow));
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.roster-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 0 var(--ink), 0 0 22px var(--char-color, var(--gold));
}
.roster-card.selected { outline: 3px solid var(--char-color, var(--gold)); outline-offset: 2px; }

/* 卡片像素换面（PixelSwap flow 模式）卡背 */
.rule-back, .stat-back, .roster-back {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.rule-back b {
  font-size: 34px;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--ink);
  letter-spacing: 2px;
}
.rule-back span { font-size: 13px; line-height: 1.8; color: var(--text); }
.stat-back { font-size: 15px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.roster-back b { font-size: 20px; color: var(--char-color, var(--gold)); text-shadow: 2px 2px 0 var(--ink); }
.roster-back .roster-back-tag { font-size: 12px; color: var(--dim); }
.roster-back .roster-back-cta {
  font-size: 13px;
  color: var(--ink);
  background: var(--char-color, var(--gold));
  border: 2px solid var(--ink);
  padding: 6px 10px;
  box-shadow: 3px 3px 0 var(--ink);
}
.roster-sprite { line-height: 0; margin-bottom: 10px; }
.roster-name { font-size: 19px; }
.roster-role { font-size: 12px; color: var(--dim); margin-top: 6px; }
.roster-passive { font-size: 12px; color: var(--gold); line-height: 1.9; margin: 10px 0; text-align: left; }
.roster-cards { font-size: 12px; color: var(--dim); line-height: 1.9; text-align: left; }
.roster-hint { margin-top: 12px; font-size: 12px; color: var(--blue); }
.roster-more { display: flex; justify-content: flex-end; margin-top: 14px; }

/* 游戏体验区：主页只放海报，真正的对局在 battle.html */
.game-frame {
  position: relative;
  border-radius: 14px;
  padding: 14px;
  background: rgba(27, 33, 69, .65);
  box-shadow: 0 0 0 3px var(--ink), 0 0 30px rgba(60, 166, 255, .3), 0 10px 0 rgba(15, 15, 27, .7);
}
.game-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 340px;
  padding: 34px 16px 28px;
  text-align: center;
}
.poster-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
  margin: 16px 0 26px;
  flex-wrap: wrap;
}
.poster-char { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.poster-name { font-size: 15px; color: var(--text); text-shadow: 2px 2px 0 var(--ink); }
.poster-row .vs { font-size: 26px; opacity: .85; }
#big-play {
  font-size: 22px;
  padding: 20px 44px;
  box-shadow: 0 6px 0 var(--ink), 0 0 24px rgba(255, 217, 60, .35);
}
.overlay-hint { font-size: 13px; color: var(--dim); }

/* 对战子页面：内容让开固定导航 */
.page-battle #app { padding: 84px 16px 0; }

/* 物理彩蛋 */
.egg-panel { padding: 30px 24px; text-align: center; }
.egg-status {
  display: inline-block;
  font-size: 14px;
  color: var(--yellow);
  border: 2px dashed var(--yellow);
  padding: 6px 16px;
  letter-spacing: 2px;
}
.egg-desc { font-size: 14px; line-height: 2; color: var(--text); max-width: 640px; margin: 18px auto 0; }
.egg-slots { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.egg-slot {
  width: 210px;
  padding: 18px 12px;
  font-size: 12px;
  color: var(--dim);
  background: rgba(35, 43, 87, .4);
  border: 2px dashed #4a5280;
}
.egg-slot b { display: block; font-size: 14px; color: var(--text); margin-bottom: 8px; }

/* 成就墙 */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.ach-item { padding: 18px 12px 14px; text-align: center; }
.ach-item .ach-icon { font-size: 34px; line-height: 1.2; }
.ach-item .ach-name { font-size: 15px; margin-top: 8px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.ach-item .ach-desc { font-size: 12px; line-height: 1.8; color: var(--dim); margin-top: 6px; }
.ach-tiers { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.ach-tiers .dot { width: 10px; height: 10px; border-radius: 50%; background: #262d4d; border: 1px solid #4a5280; }
.ach-tiers .dot.on { border-color: transparent; box-shadow: 0 0 5px rgba(255, 255, 255, .25); }
.ach-tiers .dot.t0.on { background: #b87333; }  /* 铜 */
.ach-tiers .dot.t1.on { background: #c8ccd8; }  /* 银 */
.ach-tiers .dot.t2.on { background: #ffd93c; }  /* 金 */
.ach-tiers .dot.t3.on { background: #7ad7ff; }  /* 钻石 */
.ach-tiers .dot.t4.on { background: linear-gradient(135deg, #ff5a3c, #ffd93c, #2fbf71, #4d9de0, #7a5cff); } /* 炫彩 */
.ach-item.locked { opacity: .55; }
.ach-item.locked .ach-icon { filter: grayscale(1); }
.ach-item.locked .ach-name { color: var(--dim); text-shadow: none; }
.ach-item.unlocked {
  border-color: var(--gold);
  box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(255, 217, 60, .35);
}
.ach-progress { text-align: center; font-size: 13px; color: var(--dim); margin: 16px 0 22px; }
.chip-ach { background: var(--gold); color: var(--ink); }
.chip-ach.tier-1 { background: #b87333; color: #fff; }
.chip-ach.tier-2 { background: #c8ccd8; color: #1a1a2e; }
.chip-ach.tier-3 { background: #ffd93c; color: #1a1a2e; }
.chip-ach.tier-4 { background: #7ad7ff; color: #1a1a2e; }
.chip-ach.tier-5 {
  background: linear-gradient(90deg, #ff5a3c, #ffd93c, #2fbf71, #4d9de0, #7a5cff);
  color: #14162b; text-shadow: 0 0 3px rgba(255, 255, 255, .8);
}
#result-ach { margin-bottom: 26px; }
#result-ach h3 { font-size: 16px; color: var(--gold); margin-bottom: 12px; text-shadow: 2px 2px 0 var(--ink); }
#result-ach:empty { display: none; }

/* 关于我们 */
.about-panel { padding: 28px 20px; text-align: center; }
.about-slots { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.about-slot {
  min-width: 190px;
  padding: 16px 18px;
  font-size: 12px;
  color: var(--dim);
  border: 2px dashed #4a5280;
  background: rgba(35, 43, 87, .4);
}
.about-slot b { display: block; font-size: 14px; color: var(--text); margin-bottom: 8px; }
.about-header { margin-bottom: 20px; }
.about-header h3 { font-size: 20px; color: var(--gold); margin-bottom: 6px; }
.about-workflow { font-size: 13px; color: var(--dim); }
.about-note { margin-top: 18px; font-size: 13px; color: var(--dim); line-height: 1.7; }
.about-repo { margin-top: 10px; font-size: 13px; }
.about-repo a { color: var(--gold); text-decoration: none; border-bottom: 1px dashed var(--gold); }
.about-repo a:hover { border-bottom-style: solid; }

/* 页脚 */
footer { margin-top: 70px; border-top: 3px solid var(--ink); background: rgba(15, 15, 27, .72); }
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--dim);
}
.footer-inner a { color: var(--dim); text-decoration: none; }
.footer-inner a:hover { color: var(--gold); }

/* 网站小屏适配 */
@media (max-width: 880px) {
  .logo-sub { display: none; }
  .nav-links a { padding: 6px 8px; font-size: 12px; }
  .rules-grid { grid-template-columns: 1fr 1fr; }
  .char-grid { grid-template-columns: 1fr; }
  .bg-grid { grid-template-columns: 1fr; }
  #hero { min-height: 78vh; }
  .hero-title, .hero-swap-alt { letter-spacing: 5px; }
}
@media (max-width: 560px) {
  .rules-grid { grid-template-columns: 1fr; }
  .nav-links { overflow-x: auto; }
}

/* ===== 身份卡收藏库 ===== */
.pixel-btn.small { font-size: 13px; padding: 7px 14px; box-shadow: 0 3px 0 var(--ink); }

.identity-zone { margin-top: 28px; text-align: left; }
.identity-zone-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.identity-zone-head .pick-title { margin-bottom: 0; }
.id-pick-empty { color: var(--dim); font-size: 13px; padding: 6px 0 2px; line-height: 1.8; }
.identity-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; justify-content: center; }
.id-slot {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); padding: 8px 12px;
  cursor: pointer; transition: transform .12s;
}
.id-slot:hover { transform: translateY(-3px); }
.id-slot.selected { outline: 3px solid var(--tier-color, var(--yellow)); outline-offset: 2px; }
.id-slot .tier-dot { width: 12px; height: 12px; flex: none; background: var(--tier-color); border: 2px solid var(--ink); }
.id-slot .id-slot-name { font-size: 14px; }
.id-slot .id-slot-effect { font-size: 11px; color: var(--dim); }
/* 选卡推荐位：三张卡面 + 一个「使用其他身份卡」空位 */
.identity-pick .idcard { width: 158px; height: 210px; flex: none; cursor: pointer; transition: transform .12s; }
.identity-pick .idcard:hover { transform: translateY(-3px); }
.idcard.pickable.picked { outline: 3px solid var(--tier-color); outline-offset: 2px; }
.id-slot.more {
  width: 158px; min-height: 210px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 3px dashed #454c72; box-shadow: none; text-align: center; padding: 10px;
}
.id-slot.more:hover { border-color: var(--gold); }
.id-slot.more .ph-title { font-size: 14px; }
.id-slot.more .ph-sub { font-size: 11px; color: var(--dim); }
.id-pick-btn {
  margin: 8px 10px 10px; font-family: inherit; font-size: 12px; padding: 4px 10px;
  background: var(--tier-color); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink); cursor: pointer; flex: none;
}
.id-pick-btn:active { transform: translateY(2px); box-shadow: none; }

/* 图鉴弹窗 */
.id-modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(6,8,20,.82); padding: 26px 14px; overflow-y: auto; }
.id-modal.open { display: block; }
.id-modal-box { width: min(980px, 100%); margin: 0 auto; padding: 20px; }
.id-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.id-modal-head h2 { font-size: 22px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.id-modal-score { color: var(--dim); font-size: 13px; margin-right: auto; }
.id-modal-tip { color: var(--dim); font-size: 12px; margin-top: 14px; line-height: 1.8; }
.id-tier-head { color: var(--tier-color); font-size: 15px; margin: 16px 0 8px; text-shadow: 1px 1px 0 var(--ink); }
.id-tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }

/* 卡组查看弹窗 */
.deck-list { max-height: 70vh; overflow-y: auto; padding: 10px 0; }
.deck-item { display: flex; gap: 16px; padding: 12px; margin-bottom: 10px; background: var(--panel2); border: 2px solid var(--ink); border-radius: 6px; }
.deck-item .card { flex: none; width: 140px; min-height: 180px; font-size: 12px; padding: 8px; }
.deck-item .card-desc-area { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.deck-item .card-name { font-size: 15px; font-weight: bold; color: var(--gold); }
.deck-item .card-formula { font-size: 13px; color: var(--cyan); font-family: 'Courier New', monospace; }
.deck-item .card-desc { font-size: 13px; color: var(--text); line-height: 1.6; }
.deck-item .card-count { font-size: 12px; color: var(--dim); }

/* 身份卡（3D 翻面） */
.idcard { perspective: 900px; height: 252px; }
.idcard.unlocked { cursor: pointer; }
.idcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s; }
.idcard.flipped .idcard-inner { transform: rotateY(180deg); }
.idface {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
}
.idface.front { background: linear-gradient(180deg, #2c3157, #232b57); }
.idface.back { transform: rotateY(180deg); background: var(--panel2); padding: 10px; }
.idcard.common .idface.front { border-color: #e8ecff; }
.idcard.rare .idface.front { background: linear-gradient(180deg, #1f3a5c, #232b57); border-color: #3ca6ff; box-shadow: 0 4px 0 var(--ink), 0 0 14px rgba(60,166,255,.35); }
.idcard.epic .idface.front { background: linear-gradient(180deg, #4d3f14, #232b57); border-color: #ffd93c; box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(255,217,60,.4); }
.idcard-portrait { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; overflow: hidden; }
.idcard-name { font-size: 15px; margin-top: 4px; text-align: center; padding: 0 4px; }
.idcard-sci { font-size: 11px; color: var(--dim); margin: 2px 0 6px; }
.idcard-tier { font-size: 11px; padding: 2px 12px; border: 2px solid var(--ink); color: var(--ink); background: var(--tier-color); margin-bottom: 8px; }
.idcard-flip-hint { font-size: 11px; color: var(--dim); padding-bottom: 8px; animation: idhint 1.2s steps(2) infinite; }
@keyframes idhint { 50% { opacity: .35; } }
.idcard.locked .idface.front { background: #262a45; border-color: #454c72; box-shadow: 0 4px 0 var(--ink); }
.idcard.locked .idcard-portrait { filter: grayscale(1) brightness(.5); }
.idcard.locked .idcard-name { color: #7d86a8; }
.idlock { position: absolute; inset: auto 0 0 0; background: rgba(10,12,26,.88); padding: 8px 6px; font-size: 11px; color: var(--dim); text-align: center; line-height: 1.6; }
.idlock span { font-size: 15px; display: block; margin-bottom: 2px; }
.idcard-bio { flex: 2; min-height: 0; font-size: 11px; line-height: 1.7; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #454c72 transparent; }
.idcard-bio::-webkit-scrollbar { width: 6px; }
.idcard-bio::-webkit-scrollbar-thumb { background: #454c72; }
.idcard-bio::-webkit-scrollbar-track { background: transparent; }
.idcard-bio b { color: var(--gold); }
.idcard-bio span { color: var(--dim); font-size: 10px; margin-left: 6px; }
.idcard-bio p { margin-top: 6px; color: var(--text); }
.idcard-effect { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: bold; border-top: 3px solid var(--ink); color: var(--tier-color); padding: 6px; line-height: 1.6; }

/* 战斗界面身份行 */
.identity-row { min-height: 24px; margin-top: 4px; }
.chip-ident { background: #2b3157; color: var(--gold); border: 2px solid var(--gold); font-size: 11px; cursor: default; }

/* 结算页战利品与抽取动画 */
#result-id { margin-bottom: 22px; text-align: center; }
#result-id h3 { color: var(--gold); margin-bottom: 8px; }
.id-new-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.id-draw { display: flex; justify-content: center; padding: 14px 0 4px; }
.id-draw-card {
  width: 150px; height: 204px; border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  background: #3a3f63; display: flex; align-items: center; justify-content: center;
  animation: idspin .9s ease-in-out; overflow: hidden;
}
.id-draw-q { font-size: 64px; color: #7d86a8; }
@keyframes idspin {
  from { transform: rotate(0) scale(1); }
  50% { transform: rotate(360deg) scale(1.15); }
  to { transform: rotate(720deg) scale(1); }
}
.id-draw-card.reveal.common { background: linear-gradient(180deg, #39406b, #232b57); box-shadow: 0 6px 0 var(--ink), 0 0 26px 8px rgba(232,236,255,.7); }
.id-draw-card.reveal.rare { background: linear-gradient(180deg, #1f3a5c, #232b57); box-shadow: 0 6px 0 var(--ink), 0 0 26px 8px rgba(60,166,255,.8); }
.id-draw-card.reveal.epic { background: linear-gradient(180deg, #4d3f14, #232b57); box-shadow: 0 6px 0 var(--ink), 0 0 30px 10px rgba(255,217,60,.9); }
.id-draw-body { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; height: 100%; box-sizing: border-box; padding: 0 6px 8px; animation: screenIn .3s steps(3); }
.id-draw-name { font-size: 15px; margin-top: 6px; }
.id-draw-effect { font-size: 11px; color: var(--dim); line-height: 1.6; }
/* 手绘立绘（图片版）：顶部裁切出半身像；像素 SVG 回退不受影响 */
.idcard-portrait img, .id-draw-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
  background: #d9dce4; user-select: none;
}
.id-draw-portrait img { object-position: 50% 30%; }
.id-draw-portrait { width: 100%; height: 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; }

@media (max-width: 640px) {
  .id-tier-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .idcard { height: 232px; }
}

/* ===== 象牙塔模式 ===== */
/* 开始页模式选择 */
.mode-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.difficulty-row { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 10px; }
.diff-label { font-size: 13px; color: var(--dim); }
.diff-btn { opacity: 0.6; }
.diff-btn.selected { opacity: 1; background: var(--yellow); color: var(--ink); }
.mode-tip { font-size: 12px; color: var(--dim); text-align: center; margin-top: 10px; }

/* ===== 主页模式选择门：点「开始游戏」先选模式，再进对战页 ===== */
.mode-gate { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(6,8,20,.85); padding: 20px; overflow-y: auto; }
.mode-gate.open { display: flex; align-items: center; justify-content: center; }
.mode-gate-box { width: min(760px, 100%); padding: 28px 22px; text-align: center; }
.mode-gate-title { font-size: 24px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); margin-bottom: 20px; }
.mode-gate-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.mode-gate-card {
  flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 24px 16px; text-decoration: none; color: var(--text);
  background: var(--panel2); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
.mode-gate-card:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.mode-gate-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.mode-gate-card .gate-icon { font-size: 40px; line-height: 1; }
.mode-gate-card .gate-name { font-size: 20px; font-weight: bold; color: var(--gold); }
.mode-gate-card .gate-desc { font-size: 13px; color: var(--dim); line-height: 1.8; }

/* 塔 HUD（战斗屏与塔各屏共用） */
.tower-hud {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 6px 0; font-size: 13px; color: var(--text);
}
.tower-hud.battle-hud { min-height: 30px; }
.hud-item {
  background: var(--panel); border: 2px solid var(--ink); padding: 3px 8px;
  box-shadow: 0 2px 0 var(--ink); font-weight: bold;
}
.hud-hp { color: #ff6b6b; }
.hud-gold { color: var(--gold); }
.hud-relic { font-size: 16px; cursor: help; position: relative; }
/* 道具行：flex-basis 100% 强制换行到 ❤血量/◎齿元 状态行的下一行 */
.hud-relic-row {
  flex-basis: 100%; display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 4px; font-size: 17px;
}
.relic-tip {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: 210px; padding: 10px 12px;
  background: var(--panel); border: 2px solid var(--gold); box-shadow: 3px 3px 0 var(--ink);
  z-index: 90; pointer-events: none; text-align: left;
}
.hud-relic:hover .relic-tip, .hud-relic.tip-open .relic-tip { display: block; }
.relic-tip b { display: block; color: var(--gold); font-size: 13px; margin-bottom: 5px; }
.relic-tip em { display: block; font-style: normal; font-size: 12px; line-height: 1.7; color: var(--text); }
.hud-deck {
  display: inline-flex; align-items: center; gap: 5px;
  background: #1b2145; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  padding: 4px 10px; font-weight: bold; color: var(--text);
  font-size: 13px; font-family: inherit; cursor: pointer; margin-left: 4px;
  transition: transform .06s steps(2), border-color .06s steps(2), color .06s steps(2);
}
.hud-deck b { color: var(--gold); }
.hud-deck:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }

/* 塔地图 */
.tower-title { font-size: 26px; text-align: center; margin: 8px 0 4px; color: var(--text); }
.tower-map {
  position: relative; width: min(980px, 96vw); height: min(82vh, 900px);
  margin: 0 auto; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  background: #10142c;
  background-image:
    linear-gradient(rgba(255,205,117,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,205,117,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}
.map-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-edge { fill: none; stroke-linecap: round; }
.map-edge.walked { stroke: #4a5480; stroke-width: 2.4; }
.map-edge.active { stroke: var(--gold); stroke-width: 3.4; }
.map-edge.far { stroke: #262d52; stroke-width: 2; }
.map-row-num {
  position: absolute; left: 12px; transform: translateY(-50%);
  font-size: 13px; font-weight: bold; color: #55608f; text-shadow: 1px 1px 0 var(--ink);
}
.map-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 84px; height: 68px; margin: 0; padding: 0;
  background: none; border: none; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.map-node .n-ico {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--ink); background: #1b2145; color: #9fb0e8;
  font-size: 20px; line-height: 40px; text-align: center; box-sizing: border-box;
}
.map-node .n-tag {
  font-size: 12px; font-weight: bold; color: #7d86a8;
  text-shadow: 1px 1px 0 var(--ink); white-space: nowrap;
}
.map-node.done { opacity: .5; }
.map-node.done .n-ico::after {
  content: '✓'; position: absolute; top: -7px; right: -7px;
  width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
  background: #14343a; color: #5eead4; border: 1px solid #5eead4;
  font-size: 11px; line-height: 14px; text-align: center;
}
.map-node.next { cursor: pointer; }
.map-node.next .n-ico { color: var(--text); border-color: var(--gold); animation: nodeGlow 1.1s steps(3) infinite alternate; }
.map-node.next .n-tag { color: var(--gold); }
.map-node.next:hover { transform: translate(-50%, -50%) scale(1.1); }
.map-node.far { opacity: .34; }
.map-node.far .n-ico { filter: grayscale(.5); }
/* 房间类型配色：一眼分清小怪/精英/BOSS/商店/锚点/事件 */
.map-node.anchor .n-ico { background: #14343a; color: #5eead4; }
.map-node.elite .n-ico { background: #3a1430; color: #ff7ab8; font-size: 22px; }
.map-node.boss .n-ico { width: 60px; height: 60px; line-height: 52px; font-size: 27px; background: #38220e; color: var(--gold); }
.map-node.shop .n-ico { background: #143a24; color: #7ee787; }
.map-node.q .n-ico { background: #2a1b45; color: #c4a7ff; }
@keyframes nodeGlow {
  from { box-shadow: 0 0 0 0 rgba(255,205,117,.0); }
  to { box-shadow: 0 0 16px 5px rgba(255,205,117,.55); }
}
.tower-floor { text-align: center; font-size: 13px; color: var(--dim); margin-top: 12px; }

/* 事件 / 锚点 */
.event-box { max-width: 560px; margin: 24px auto 0; padding: 22px 20px; text-align: center; }
.event-title { font-size: 22px; color: var(--text); margin-bottom: 10px; }
.event-text { font-size: 14px; color: var(--dim); line-height: 1.8; margin-bottom: 16px; }
.event-choices, .anchor-choices { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.event-result { margin: 14px auto 2px; color: var(--gold); font-size: 17px; font-weight: bold; text-align: center; }
/* 公式问答：答后亮出的正确项（金色描边发光） */
.event-choices .quiz-right { border-color: var(--gold); box-shadow: 0 0 10px rgba(240, 185, 61, .55); }

/* 事件结果反馈：全屏红闪 + 中央浮字 + 金币洒落 */
.event-fx-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.screen-hit {
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,64,64,.30), rgba(255,64,64,.06) 72%);
  animation: hitFade .55s steps(5) forwards;
}
@keyframes hitFade { from { opacity: 1; } to { opacity: 0; } }
.float-num.gold { color: var(--gold); top: 30%; }
.float-num.spend { color: #c9b37e; top: 30%; }

/* 卡牌变动特效：飞入/飞出卡组的漂浮卡（fixed 层，飞完由 JS 自清理） */
.fly-card { position: fixed; z-index: 250; margin: 0; pointer-events: none; }

/* 常量交易所 */
.shop-head { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.shop-gold { font-size: 18px; color: var(--gold); font-weight: bold; }
.shop-goods {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
  max-width: 760px; margin: 14px auto; align-items: flex-start;
}
.shop-card { margin-top: 12px; }
.shop-price {
  margin-top: 8px; font-weight: bold; color: var(--gold); font-size: 14px;
  border-top: 2px dashed #3a4270; padding-top: 6px;
}
.shop-price.poor { color: #b3556a; }
.relic-goods {
  width: 180px; padding: 14px 12px; text-align: center; margin-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.relic-goods.picked { outline: 2px solid var(--gold); }
.relic-goods.legendary { border-color: var(--gold); box-shadow: 0 0 16px rgba(216, 162, 58, .5); }
.relic-icon { font-size: 30px; }
.relic-name { font-size: 14px; color: var(--text); font-weight: bold; }
.relic-desc { font-size: 11px; color: var(--dim); line-height: 1.6; }
#shop-delete { display: block; }
.shop-foot { display: flex; gap: 12px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }

/* 奖励三选一 */
.reward-title { font-size: 24px; text-align: center; color: var(--text); margin: 14px 0 4px; }
.reward-sub { text-align: center; font-size: 13px; color: var(--dim); margin-bottom: 18px; }
.reward-cards {
  display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: stretch;
  max-width: 720px; margin: 0 auto; padding-bottom: 24px;
}
.reward-cards .card { margin-top: 12px; }
.tier-tag {
  position: absolute; top: -12px; right: -8px; font-size: 10px; padding: 2px 6px;
  border: 2px solid var(--ink); color: var(--ink); font-weight: bold; z-index: 1;
}
.tier-tag.tier-common { background: #9aa3c4; }
.tier-tag.tier-rare { background: #4ea6ff; }
.tier-tag.tier-epic { background: var(--gold); }
/* 机制 tag（「冲击」燃料牌）：左上角是焦耳费用块，只能挂右侧、档位角标下面一行 */
.kw-tag {
  position: absolute; top: 26px; right: -8px; font-size: 10px; padding: 2px 6px;
  border: 2px solid var(--ink); color: var(--ink); font-weight: bold; z-index: 1; background: #ff8a4c;
}
.card.upgraded { outline-color: var(--gold); }
.card.upgraded .card-name { color: var(--gold); }
.card.picked { outline: 3px solid var(--gold); outline-offset: 2px; }

/* 敌人意图章（战斗屏敌方头顶） */
.intent-slot { position: relative; height: 0; z-index: 5; display: flex; justify-content: center; }
.intent-chip {
  background: #2a1230; border: 2px solid #b3556a; color: #ffd0d8;
  font-size: 13px; font-weight: bold; padding: 3px 10px; box-shadow: 0 2px 0 var(--ink);
  transform: translateY(-14px); white-space: nowrap;
}

/* 塔弹窗底部按钮 */
.modal-foot { display: flex; justify-content: center; padding: 14px 0 4px; }
.modal-ok:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }

/* 校准弹窗：左卡单 + 右升级预览 */
.modal-body { display: flex; gap: 22px; align-items: flex-start; }
.modal-body .modal-cards { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; max-height: 62vh; overflow-y: auto; }
.modal-preview { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; position: sticky; top: 0; }
.modal-preview[hidden] { display: none; }
.preview-arrow { font-size: 34px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.preview-hint { font-size: 13px; font-weight: bold; color: var(--gold); margin-bottom: 8px; }
.preview-tip { width: 150px; min-height: 168px; border: 2px dashed var(--dim); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--dim); font-size: 12px; line-height: 1.8; padding: 10px; box-sizing: border-box; }
.preview-diff { margin-top: 10px; font-size: 13px; color: var(--gold); line-height: 1.9; text-shadow: 1px 1px 0 var(--ink); }

@media (max-width: 760px) {
  .modal-body { flex-direction: column; }
  .modal-preview { position: static; }
}

@media (max-width: 640px) {
  .tower-map { height: 56vh; }
  .map-node { width: 60px; height: 52px; }
  .map-node .n-ico { width: 34px; height: 34px; line-height: 28px; font-size: 15px; }
  .map-node.boss .n-ico { width: 42px; height: 42px; line-height: 36px; font-size: 19px; }
  .map-node .n-tag { font-size: 10px; }
  .map-row-num { display: none; }
}
/* ===== 卡牌图鉴（纯展示模块，独立于战斗系统） ===== */
.codex-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 4px;
}
.codex-entry-tip { font-size: 12px; color: var(--dim); }

.codex-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 22, .78);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.codex-modal.open { opacity: 1; visibility: visible; }
.codex-box {
  width: min(980px, 100%);
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
  transform: translateY(14px) scale(.97);
  transition: transform .22s steps(4);
}
.codex-modal.open .codex-box { transform: none; }

.codex-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel2);
  border-bottom: 3px solid var(--ink);
}
.codex-head h2 { font-size: 18px; color: var(--gold); }
.codex-count { font-size: 12px; color: var(--dim); margin-left: auto; }

.codex-body {
  display: grid;
  grid-template-columns: 1fr 292px;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.codex-grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px 10px;
  padding: 14px 10px 10px;
  align-content: start;
}
.codex-card { width: auto; min-height: 156px; }
.codex-card.selected { outline: 3px solid var(--gold); outline-offset: 2px; }
.codex-lock-tag {
  position: absolute;
  right: 4px;
  bottom: 4px;
  font-size: 10px;
  color: var(--dim);
  border: 2px solid var(--dim);
  padding: 0 4px;
}

.codex-detail {
  overflow-y: auto;
  background: var(--panel2);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  padding: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.codex-detail.show { opacity: 1; transform: none; }
.codex-detail-empty { font-size: 12px; color: var(--dim); text-align: center; line-height: 2; margin-top: 60px; }
.codex-d-name { font-size: 16px; color: var(--text); }
.codex-d-meta { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.codex-d-cost {
  width: 30px; height: 30px;
  background: var(--gold);
  border: 3px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink);
}
.codex-d-cost small { font-size: 9px; margin-left: 1px; }
.codex-d-tag {
  font-size: 11px;
  padding: 1px 6px;
  border: 2px solid var(--ink);
  background: #3a4180;
  color: var(--text);
}
.codex-d-formula { font-size: 18px; color: var(--blue); margin: 8px 0; }
.codex-d-desc { font-size: 12px; color: var(--dim); line-height: 1.8; }
.codex-d-sci {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.8;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px dashed #3a4180;
}
.codex-d-status { font-size: 11px; color: var(--green); margin-top: 10px; }
.codex-d-status.locked { color: var(--red); }

.codex-tip {
  padding: 8px 16px;
  border-top: 3px solid var(--ink);
  background: var(--panel2);
  font-size: 11px;
  color: var(--dim);
  line-height: 1.8;
}

/* buff 词条高亮：蓝色 + 下划线，悬浮轻微放大，手型光标 */
.buff-term {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  display: inline-block;
  transition: transform .12s ease;
}
.buff-term:hover { transform: scale(1.12); }

/* buff 详解小弹窗 */
.buff-popup {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 22, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.buff-popup.open { opacity: 1; visibility: visible; }
.buff-box {
  width: min(380px, 100%);
  background: var(--panel2);
  border: 3px solid var(--blue);
  box-shadow: 0 5px 0 var(--ink);
  padding: 14px;
  transform: scale(.9);
  transition: transform .2s steps(3);
}
.buff-popup.open .buff-box { transform: scale(1); }
.buff-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.buff-name { font-size: 15px; color: var(--blue); }
.buff-close {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--dim);
  padding: 2px 8px;
  cursor: pointer;
}
.buff-close:hover { color: var(--gold); border-color: var(--gold); }
.buff-sec { font-size: 12px; color: var(--dim); line-height: 1.8; margin-top: 8px; }
.buff-sec b { color: var(--gold); font-weight: normal; }

/* 图鉴提示浮条（未解锁提示 / 新收录提醒） */
.codex-toast {
  position: fixed;
  left: 50%;
  bottom: 12%;
  z-index: 230;
  transform: translateX(-50%) translateY(8px);
  background: var(--panel2);
  border: 3px solid var(--blue);
  box-shadow: 0 4px 0 var(--ink);
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.codex-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@media (max-width: 880px) {
  .codex-body { grid-template-columns: 1fr; overflow-y: auto; }
  .codex-detail { max-height: 300px; }
}

/* ===== 金币 & 道具 ===== */

/* --- 结算面板：金币入账 + 消耗品扣减 --- */
#result-coin { margin-top: 14px; }
#result-coin h3 { font-size: 15px; color: var(--gold); margin-bottom: 8px; }
.chip-coin { border-color: var(--gold); color: var(--gold); background: rgba(255, 217, 60, .08); }
.coin-used { border-color: var(--red); color: var(--red); background: rgba(255, 51, 85, .08); }

/* --- 对战页：出战道具选卡区 --- */
.item-zone { margin-top: 18px; text-align: left; }
.item-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.itemcard {
  position: relative;
  width: 150px;
  padding: 14px 10px 12px;
  background: var(--panel);
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  text-align: center;
  cursor: pointer;
  transition: transform .12s;
}
.itemcard:hover { transform: translateY(-3px); }
.itemcard.selected { outline: 3px solid var(--gold); outline-offset: 2px; }
.itemcard-icon { font-size: 32px; line-height: 1.3; }
.itemcard-name { font-size: 14px; margin-top: 6px; }
.item-badge {
  font-size: 10px;
  padding: 1px 6px;
  border: 2px solid var(--ink);
  background: var(--panel2);
  color: var(--text);
}
.itemcard .item-badge { position: absolute; top: 6px; right: 6px; }
.item-badge.perma { background: var(--gold); color: var(--ink); }
.item-badge.consum.empty { opacity: .5; }
.item-badge.banned { background: #4a4a4a; color: #fff; }
.itemcard-check {
  position: absolute;
  top: -10px; right: -8px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); border: 3px solid var(--ink);
  color: var(--ink); font-size: 13px;
}
@keyframes item-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.itemcard.shake { animation: item-shake .3s ease; }

/* --- 对战页：望远镜看穿 AI 手牌 --- */
.hand-reveal { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.hand-reveal:empty { display: none; }
.reveal-tag { font-size: 14px; }
.chip-reveal { border-color: var(--blue); color: var(--blue); background: rgba(60, 166, 255, .1); font-size: 10px; padding: 1px 5px; }

/* --- 金币账本 / 道具工坊 共用 --- */
.page-section { max-width: 1080px; margin: 0 auto; padding-top: 90px; }
.coin-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 24px;
  margin-bottom: 18px;
}
.coin-balance-box { display: flex; align-items: baseline; gap: 10px; }
.coin-balance-label { font-size: 13px; color: var(--dim); }
.coin-balance {
  font-size: 44px;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--ink);
}
.coin-unit { font-size: 16px; color: var(--gold); }
.coin-hero-tip { font-size: 12px; color: var(--dim); }
.coin-hero-tip a { color: var(--gold); text-decoration: none; }
.coin-hero-tip a:hover { text-decoration: underline; }
.coin-rules .rule-icon { font-size: 32px; height: 44px; align-items: center; }
.ledger-title { font-size: 16px; margin: 22px 0 12px; color: var(--text); }

/* 收支明细列表 */
.coin-log { padding: 6px 14px; }
.coin-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px;
  border-bottom: 2px dashed #3a4180;
  font-size: 12px;
}
.coin-row:last-child { border-bottom: none; }
.coin-kind { flex: none; color: var(--dim); }
.coin-label { flex: 1; color: var(--text); }
.coin-time { flex: none; color: var(--dim); font-size: 11px; }
.coin-amt { flex: none; min-width: 44px; text-align: right; font-size: 14px; }
.coin-amt.plus { color: var(--green); }
.coin-amt.minus { color: var(--red); }
.coin-bal { flex: none; color: var(--dim); font-size: 11px; }
.coin-log-empty { padding: 18px 0; text-align: center; color: var(--dim); font-size: 13px; line-height: 1.8; }

/* --- 道具工坊 --- */
.shop-detail {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px;
  margin-bottom: 4px;
  min-height: 96px;
}
.shop-detail-empty { width: 100%; text-align: center; color: var(--dim); font-size: 13px; }
.shop-detail-icon { font-size: 46px; flex: none; }
.shop-detail-info { flex: 1; }
.shop-detail-info h4 { font-size: 17px; color: var(--gold); display: flex; align-items: baseline; gap: 10px; }
.shop-detail-origin { font-size: 11px; color: var(--dim); font-weight: normal; }
.shop-detail-info p { font-size: 12px; color: var(--dim); line-height: 1.9; margin-top: 6px; }
.shop-detail-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.shop-price { font-size: 18px; color: var(--gold); }
.shop-price small { font-size: 11px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.shop-card { padding: 14px; cursor: pointer; transition: transform .12s; position: relative; }
.shop-card:hover { transform: translateY(-4px); }
.shop-card.selected { outline: 3px solid var(--gold); outline-offset: 2px; }
.shop-card-head { display: flex; align-items: flex-start; justify-content: space-between; }
.shop-card-tiers { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shop-card-icon { font-size: 34px; line-height: 1.2; }
.item-badge.tier { background: transparent; white-space: nowrap; }
.shop-card-name { font-size: 15px; color: var(--text); margin-top: 8px; }
.shop-card-origin { font-size: 11px; color: var(--dim); margin-top: 2px; }
.shop-card-desc { font-size: 11px; color: var(--dim); line-height: 1.8; margin-top: 8px; min-height: 60px; }
.shop-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.shop-card .shop-price { font-size: 16px; }

/* 购买反馈 toast（照 codex-toast 体系） */
.shop-toast {
  position: fixed;
  left: 50%; bottom: 12%;
  z-index: 230;
  transform: translateX(-50%) translateY(8px);
  background: var(--panel2);
  border: 3px solid var(--gold);
  box-shadow: 0 4px 0 var(--ink);
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.shop-toast.pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@media (max-width: 880px) {
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .shop-detail { flex-direction: column; text-align: center; }
  .shop-detail-info h4 { justify-content: center; }
  .coin-time, .coin-bal { display: none; }
}
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: 1fr; }
  .coin-hero { justify-content: center; text-align: center; }
}

/* --- 对战页：出战道具栏（玩家精灵左侧，悬停出说明） --- */
.fighter.player { position: relative; }
.item-bar {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 5;
}
.item-bar:empty { display: none; }
.item-icon {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font-size: 22px; line-height: 1; cursor: default;
}
.item-icon.active-item { cursor: pointer; }
.item-icon.active-item:hover { border-color: var(--gold); transform: translate(-1px, -1px); }
.item-icon.spent { filter: grayscale(1); opacity: .45; }
.item-cnt, .tel-cnt {
  position: absolute; top: -8px; right: -8px;
  min-width: 19px; height: 19px; padding: 0 3px;
  background: var(--blue); border: 2px solid var(--ink);
  color: #fff; font-size: 11px; font-weight: bold; line-height: 15px; text-align: center;
}
.item-cnt.zero, .tel-cnt.zero { background: var(--dim); }
.item-tip {
  display: none;
  position: absolute; left: 52px; top: 50%; transform: translateY(-50%);
  width: 230px; padding: 10px 12px;
  background: var(--panel); border: 2px solid var(--gold); box-shadow: 3px 3px 0 var(--ink);
  z-index: 80; pointer-events: none; text-align: left;
}
.item-icon:hover .item-tip { display: block; }
.item-tip b { display: block; color: var(--gold); font-size: 13px; margin-bottom: 5px; }
.item-tip em { display: block; font-style: normal; font-size: 12px; line-height: 1.7; color: var(--text); }
.item-tip i { display: block; font-style: normal; font-size: 11px; color: var(--yellow); margin-top: 6px; }

/* --- 储存卡槽 + 手牌拖拽 --- */
.stash-slots { display: flex; gap: 8px; justify-content: center; padding: 8px 0 4px; }
.stash-slots[hidden] { display: none; }
.stash-slot {
  width: 78px; height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px dashed var(--dim); color: var(--dim);
  background: rgba(0, 0, 0, .18); font-size: 11px; text-align: center;
}
.stash-slot.empty.droppable { border-color: var(--gold); color: var(--gold); }
.stash-slot.over { border-style: solid; border-color: var(--gold); background: rgba(255, 200, 60, .12); box-shadow: inset 0 0 0 2px var(--gold); }
.stash-slot.filled { border: 2px solid var(--green); color: var(--text); background: var(--panel); cursor: pointer; }
.stash-slot.filled:hover { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 200, 60, .35); }
.ss-cost { color: var(--yellow); font-size: 12px; font-weight: bold; }
.ss-name { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hand { touch-action: none; }
#stash-slots { touch-action: none; }
.card.dragging, .stash-slot.dragging { opacity: .35; }
.drag-ghost {
  position: fixed; left: 0; top: 0; margin: 0;
  z-index: 300; pointer-events: none; opacity: .92;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.stash-ghost {
  width: 92px; height: 62px; font-size: 13px;
  border: 2px solid var(--gold); border-style: solid; background: var(--panel2); color: var(--text);
}
#hand.stash-droppable { outline: 2px dashed var(--gold); outline-offset: -6px; background: rgba(255, 200, 60, .05); }
#hand.stash-droppable.over { outline-style: solid; background: rgba(255, 200, 60, .12); box-shadow: inset 0 0 16px rgba(255, 200, 60, .25); }

/* --- 望远镜钮（手牌区右上角）：眼睛图标控制侦察弹窗 --- */
.telescope-btn {
  position: absolute; top: 10px; right: 12px;
  width: 46px; height: 46px; font-size: 22px; line-height: 1;
  background: var(--panel); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer; z-index: 6;
}
.telescope-btn:hover { border-color: var(--blue); }
.telescope-btn.on { border-color: var(--blue); box-shadow: 0 0 10px var(--blue); }
.telescope-btn.spent { filter: grayscale(1); opacity: .45; cursor: default; }
.telescope-btn[hidden] { display: none; }
.eye { position: relative; display: inline-block; width: 24px; height: 22px; }
.eye-open::before { content: '👁'; font-size: 19px; line-height: 22px; }
.eye-closed::after {
  content: ''; position: absolute; left: 3px; right: 3px; bottom: 4px; height: 9px;
  border: 2px solid var(--text); border-top: none; border-radius: 0 0 12px 12px; opacity: .9;
}
.eye-closed::before {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 15px; height: 2px;
  background: var(--text); opacity: .55;
}

/* --- 侦察弹窗（望远镜开启后由眼睛按钮开合） --- */
.scout-popup {
  position: fixed; left: 50%; bottom: 175px; transform: translateX(-50%);
  z-index: 150; width: min(680px, 94vw);
}
.scout-popup[hidden] { display: none; }
.scout-box { padding: 12px 14px; }
.scout-head { display: flex; align-items: center; justify-content: space-between; color: var(--gold); font-weight: bold; font-size: 14px; margin-bottom: 10px; }
/* 角标悬挂在牌角外（top:-8px/left:-6px），容器留足内边距防被 overflow 裁掉 */
.scout-cards { display: flex; flex-wrap: wrap; gap: 10px; max-height: 30vh; overflow-y: auto; padding: 10px 8px 2px; }
.scout-card {
  position: relative; width: 148px; padding: 9px 8px 8px;
  background: var(--panel2); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font-size: 11px;
}
.scout-card b { display: block; font-size: 12px; color: var(--text); margin: 2px 0 4px; }
.scout-card em { display: block; font-style: normal; color: var(--dim); line-height: 1.6; }
.sc-cost {
  position: absolute; top: -8px; left: -6px;
  background: var(--ink); color: var(--yellow); font-size: 10px; font-weight: bold;
  padding: 1px 5px; border: 1px solid var(--yellow);
}
.scout-tip { font-size: 11px; color: var(--dim); margin-top: 10px; }

/* --- 复活弹窗 --- */
.revive-modal { display: none; position: fixed; inset: 0; z-index: 220; background: rgba(6, 8, 20, .85); padding: 20px; overflow-y: auto; }
.revive-modal.open { display: flex; align-items: center; justify-content: center; }
.revive-box { width: min(480px, 94vw); padding: 24px 22px; text-align: center; }
.revive-box h2 { color: var(--red); font-size: 24px; text-shadow: 2px 2px 0 var(--ink); margin-bottom: 6px; }
.revive-sub { color: var(--dim); font-size: 13px; margin-bottom: 16px; }
.revive-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.revive-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 14px; font-size: 15px; }
.revive-opt small { font-size: 12px; color: var(--dim); font-weight: normal; }
/* 弃牌/保留弹窗的真卡牌横排：padding-top 给 hover 上浮留空间（容器裁剪会切掉顶行） */
.pick-cards { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; max-height: 58vh; overflow-y: auto; padding: 14px 2px 2px; }
#discard-opts .pixel-btn.ghost { align-self: center; }

/* --- 回合倒计时（仅经典模式显示，20 秒自动结束回合）：固定在顶部导航「返回首页」下方居中 --- */
.turn-timer { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; justify-content: center; min-width: 120px; height: 46px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 8px; background: var(--gold); color: #000; font-size: 24px; font-weight: bold; box-shadow: 0 3px 0 var(--ink); }
.turn-timer.urgent { animation: timer-blink 1s steps(2) infinite; }
@keyframes timer-blink { 50% { opacity: .45; } }
.turn-timer[hidden] { display: none; }

/* --- 轻提示（对战页通用） --- */
#ui-toast {
  position: fixed; left: 50%; bottom: 130px; z-index: 400;
  transform: translateX(-50%) translateY(10px);
  background: var(--panel); border: 2px solid var(--gold); box-shadow: 3px 3px 0 var(--ink);
  color: var(--gold); font-size: 13px; padding: 8px 16px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
#ui-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- 道具工坊：页签 --- */
.shop-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.shop-tab {
  padding: 10px 22px; font-size: 15px; cursor: pointer;
  background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  color: var(--dim);
}
.shop-tab.active { color: var(--gold); border-color: var(--gold); background: var(--panel2); }
.shop-tabpanel[hidden] { display: none; }
.item-badge.gacha-badge { background: var(--red); color: #fff; }

/* --- 命运卡池 --- */
.gacha-banner { text-align: center; padding: 26px 20px; margin-bottom: 4px; }
.gacha-orb { font-size: 60px; line-height: 1.2; display: inline-block; animation: gachaFloat 2.4s ease-in-out infinite; }
.gacha-orb.glow { animation: gachaFloat 2.4s ease-in-out infinite, gachaGlow .75s ease-in; }
@keyframes gachaGlow {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 214, 110, 0)); }
  55% { filter: brightness(1.55) drop-shadow(0 0 14px rgba(255, 214, 110, .8)); }
  85% { filter: brightness(2.2) drop-shadow(0 0 30px rgba(255, 214, 110, 1)); }
  100% { filter: brightness(1.7) drop-shadow(0 0 18px rgba(255, 214, 110, .9)); }
}
@keyframes gachaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.gacha-banner h3 { font-size: 20px; color: var(--gold); margin-top: 8px; text-shadow: 2px 2px 0 var(--ink); }
.gacha-banner p { font-size: 12px; color: var(--dim); margin-top: 8px; line-height: 1.9; }
.gacha-draw-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 20px; }
.gacha-result { min-height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.gacha-result:empty { display: none; }
.gacha-card {
  width: 260px; padding: 20px 16px; text-align: center;
  border: 3px solid var(--tier-color, var(--gold));
  background: var(--panel2); box-shadow: 0 0 24px rgba(255, 200, 60, .22);
  animation: gachaPop .45s steps(6);
}
@keyframes gachaPop {
  0% { transform: scale(.5) rotate(-6deg); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.gacha-card-icon { font-size: 54px; line-height: 1.2; }
.gacha-card-tier {
  display: inline-block; font-size: 11px; padding: 2px 8px; margin-top: 8px;
  border: 1px solid var(--tier-color, var(--gold)); color: var(--tier-color, var(--gold));
}
.gacha-card-name { font-size: 17px; color: var(--text); margin-top: 8px; }
.gacha-card-origin { font-size: 11px; color: var(--dim); margin-top: 2px; }
.gacha-card-desc { font-size: 11px; color: var(--dim); line-height: 1.8; margin-top: 8px; }
.gacha-dup { font-size: 12px; color: var(--green); margin-top: 10px; }
.gacha-prob { padding: 16px 18px; }
.gacha-prob h4 { font-size: 14px; color: var(--gold); margin-bottom: 12px; }
.gacha-prob-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gacha-prob-group { padding: 10px 12px; background: rgba(0, 0, 0, .18); border: 2px solid var(--ink); }
.gacha-prob-group.limited { border-color: var(--gold); background: rgba(255, 200, 60, .07); }
.gacha-prob-group.limited .gp-name, .gacha-prob-row.gp-limited .gp-name { color: var(--gold); }
.gacha-prob-group.limited .gp-bar i { background: var(--red); }
.gacha-prob-group h5 { font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.gacha-prob-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.gacha-prob-row .gp-ico { width: 22px; text-align: center; flex: none; }
.gacha-prob-row .gp-name { flex: 1; color: var(--text); }
.gacha-prob-row .gp-bar { height: 6px; width: 72px; background: #2a3060; position: relative; flex: none; }
.gacha-prob-row .gp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }
.gacha-prob-row .gp-w { color: var(--gold); font-weight: bold; flex: none; }

/* 卡池限定道具卡：隐藏价格，徽标下方展示持有数量 */
.shop-owned { font-size: 12px; color: var(--green); text-align: right; margin-top: 2px; }
.shop-owned.big { font-size: 15px; font-weight: bold; }
.shop-card.gacha-card .shop-card-foot .pixel-btn:only-child { margin-left: auto; }
@media (max-width: 880px) {
  .gacha-prob-groups { grid-template-columns: 1fr; }
}

/* ===== 点选出牌：瞄准态（杀戮尖塔式点卡→点敌人） ===== */
.card.aiming {
  transform: translateY(-14px);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255, 200, 60, .55);
  z-index: 4;
}
.hand.aiming .card:not(.aiming) { opacity: .45; }
#f-enemy.targetable {
  cursor: crosshair;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, .55);
  animation: targetPulse 1s steps(2) infinite;
}
#f-enemy.target-hot {
  cursor: crosshair;
  box-shadow: 0 0 0 4px #ff6b6b, 0 0 22px rgba(255, 107, 107, .6);
  transform: scale(1.03);
  animation: none;
}
@keyframes targetPulse { 50% { box-shadow: 0 0 0 6px rgba(255, 107, 107, .18); } }

#aim-line { position: fixed; inset: 0; pointer-events: none; z-index: 180; }
#aim-line line {
  stroke: #ff6b6b; stroke-width: 4;
  stroke-dasharray: 10 8;
  animation: aimFlow .45s linear infinite;
}
#aim-line polygon { fill: #ff6b6b; }
@keyframes aimFlow { to { stroke-dashoffset: -18; } }

/* ===== 联机大厅（battle.html 开始页） ===== */
.net-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.pixel-btn.small { font-size: 13px; padding: 7px 14px; box-shadow: 0 4px 0 var(--ink); }
.pixel-btn.small.active { background: var(--gold); }
.pixel-btn.small.ghost.active { background: var(--panel); }
.room-input {
  font-family: inherit;
  font-size: 13px;
  width: 6.2em;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--panel2);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  padding: 7px 8px;
  outline: none;
}
.room-input:focus { border-color: var(--yellow); }
.net-status {
  display: none;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--dim);
}
.net-status.show { display: block; }
.net-status .room-code {
  font-size: 1.5em;
  letter-spacing: 5px;
  color: var(--gold);
  margin: 0 4px;
}