/* ============================================================
   灰烬牌 · PVP 哥特卡牌对战 UI
   画布基准 1920×1080，全部数值为设计像素，由 JS 等比缩放
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg-deep: #14110F;
  --marble-base: #211D19;
  --marble-vein: #3A332C;
  --gold: #C9A24B;
  --gold-hi: #E8C976;
  --gold-shadow: #8A6D2E;
  --oxblood: #7A1E1E;
  --oxblood-hi: #A83232;
  --energy: #4FA3D1;
  --energy-glow: #7FD0F5;
  --parchment: #E8DCC0;
  --text-dim: #9A8F7A;
  --hp-player: #C44A4A;
  --hp-enemy: #B23A3A;
  --font-title: "Cinzel", "ZCOOL XiaoWei", "Songti SC", "SimSun", serif;
  --font-body: "Noto Serif SC", "EB Garamond", "Songti SC", "SimSun", serif;
  --font-num: "Cinzel", "Times New Roman", serif;
}
html { width: 100%; height: 100%; overflow: hidden; background: #000; }
body {
  width: 1920px; height: 1080px; overflow: hidden; position: relative;
  transform-origin: 0 0;
  font-family: var(--font-body); color: var(--parchment);
  -webkit-font-smoothing: antialiased; user-select: none;
}
button { font-family: inherit; }

#app { position: relative; width: 1920px; height: 1080px; background: var(--bg-deep); }
/* 16:9 设计画布，等比缩放居中 */
#stage {
  position: relative; width: 1920px; height: 1080px;
  /* clip 而不是 hidden：hidden 的容器仍会被「聚焦滚动」，点按钮时整个画布会被滚偏 */
  overflow: clip;
}

/* ---------- 背景 ---------- */
.bg {
  position: absolute; inset: 0;
  background-image: url(../assets/table-ref.png);
  background-size: 369.23% 249.3%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
}
.bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(0,0,0,.34) 18%, rgba(0,0,0,.9) 100%);
}

/* ---------- 桌面 ---------- */
.table {
  position: absolute; inset: 40px; border-radius: 18px;
  background-image:
    linear-gradient(180deg, rgba(10,9,14,.46) 0%, rgba(4,3,6,.6) 55%, rgba(8,6,10,.54) 100%),
    url(../assets/card-ref.png);
  background-size: cover, 274.29% 155.36%;
  background-position: center, 0% 99.48%;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    0 0 0 2px #0d0a07, 0 0 0 6px var(--gold), 0 0 0 8px #241a0c,
    0 0 0 11px rgba(201,162,75,.26), 0 0 0 14px rgba(8,6,4,.92),
    0 40px 100px rgba(0,0,0,.95), inset 0 0 180px rgba(0,0,0,.86);
}

/* ---------- 区域 ---------- */
.zone { position: absolute; }

/* ---------- 回合指示：中间的阶段轨道发光（自己=黄，对方=蓝） ---------- */
.track { transition: filter .35s ease; }
.track::after {
  content: ''; position: absolute; left: -80px; right: -80px; top: -26px; height: 128px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.track.mine::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(255,214,120,.34), rgba(255,214,120,.08) 55%, rgba(255,214,120,0) 76%);
  opacity: 1; animation: trackPulse 3s ease-in-out infinite;
}
.track.foe::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(96,178,255,.32), rgba(96,178,255,.08) 55%, rgba(96,178,255,0) 76%);
  opacity: 1; animation: trackPulse 3s ease-in-out infinite;
}
/* 对方回合：整条轨道偏冷蓝（金饰、节点、文字一起变） */
.track.foe { filter: hue-rotate(158deg) brightness(1.12) saturate(1.15); }
@keyframes trackPulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}
.round.mine { color: transparent; background: linear-gradient(180deg, #fff3c8, var(--gold) 45%, #8a6320);
  -webkit-background-clip: text; background-clip: text; }
.round.foe { color: transparent; background: linear-gradient(180deg, #e8f6ff, #6fb4ff 45%, #1e4f8a);
  -webkit-background-clip: text; background-clip: text; }
/* 轮到对方时把自己的手牌压暗 */
.hand.idle { filter: brightness(.58) saturate(.7); transition: filter .25s ease; }
.hand.idle .ocard { cursor: default; }
.avatar.on { animation: avatarPulse 2.2s ease-in-out infinite; }
@keyframes avatarPulse {
  0%, 100% { box-shadow: 0 0 0 3px #150f08, 0 0 26px rgba(232,201,118,.4); }
  50% { box-shadow: 0 0 0 3px #150f08, 0 0 46px rgba(232,201,118,.85); }
}
.zone.enemy { left: 40px; top: 40px; width: 1840px; height: 320px; }
.zone.mine { left: 40px; top: 620px; width: 1840px; height: 420px; pointer-events: none; }
.zone.mine > * { pointer-events: auto; }

.avatar {
  position: absolute; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 40% 30%, #3a2f46, #0d0810 70%);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 3px #150f08, 0 0 30px rgba(0,0,0,.9), inset 0 0 40px rgba(0,0,0,.8);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.avatar.on { border-color: var(--gold-hi); box-shadow: 0 0 0 3px #150f08, 0 0 40px rgba(232,201,118,.55); }
#ava1 { left: 30px; top: 30px; width: 150px; height: 150px; }
#ava0 { left: 30px; top: 230px; width: 150px; height: 150px; }

/* 血量球 */
.orb-wrap { position: absolute; }
#hp1 { left: 205px; top: 45px; width: 140px; height: 140px; }
#hp0 { left: 205px; top: 245px; width: 140px; height: 140px; }
.orb {
  position: absolute; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 42px; font-weight: 600; color: #fff2f0;
  text-shadow: 0 3px 10px #000, 0 0 18px rgba(0,0,0,.9);
  background-image: url(../assets/table-ref.png);
  background-size: 1600% 893.33%; background-repeat: no-repeat;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.85));
}
.orb.hp { background-position: 80.83% 72.48%; }
.orb.pulse { animation: orbPulse .5s ease; }
@keyframes orbPulse { 40% { filter: drop-shadow(0 0 34px rgba(255,80,80,.95)); transform: scale(1.08); } }
.orb-label {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -26px;
  font-family: var(--font-num); font-size: 13px; letter-spacing: 4px; color: var(--text-dim);
}

/* 能量钻 */
.crystals { position: absolute; display: flex; gap: 6px; }

/* ---------- 状态图标（buff / debuff） ----------
   位置：血量球旁边、能量钻一侧的空档。正面蓝色，负面红色。
   图标上写的是「给这个状态的牌名」，鼠标移上去出具体效果。 */
.buffs { position: absolute; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
/* 注意：这两个是相对 .zone 定位的（.zone.enemy 在画布 40,40；.zone.mine 在 40,620） */
#buffs1 { left: 205px; top: 196px; max-width: 360px; }   /* 对方：血量球（zone y 45–185）正下方 */
#buffs0 { left: 205px; top: 180px; max-width: 250px; }   /* 我方：能量钻之下、血量球（zone y 245–385）之上 */
.buffchip {
  position: relative; padding: 4px 9px; border-radius: 3px; cursor: help;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 1px; white-space: nowrap;
  border: 1px solid; background: rgba(8, 12, 18, .78);
  text-shadow: 0 1px 3px #000;
}
.buffchip.good { color: #a8d8ff; border-color: rgba(90, 160, 235, .75);
  box-shadow: 0 0 12px rgba(79, 163, 209, .35), inset 0 0 10px rgba(79, 163, 209, .18); }
.buffchip.bad { color: #ffb0a8; border-color: rgba(200, 80, 70, .75);
  box-shadow: 0 0 12px rgba(192, 82, 74, .35), inset 0 0 10px rgba(192, 82, 74, .18); }
.buffchip:first-child { margin-left: 0; }
/* 悬浮提示：挂在图标条上，横向对准被指的图标 */
.bufftip {
  position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%);
  display: none; padding: 8px 12px; border-radius: 4px; white-space: nowrap;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 1px; color: var(--parchment);
  background: rgba(10, 8, 6, .96); border: 1px solid rgba(201, 162, 75, .6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .8); z-index: 60; pointer-events: none;
}
.bufftip.show { display: block; }
#en1 { left: 380px; top: 90px; }
/* 自己的能量条放在「阶段轨道下方、手牌上沿之上」的空档里：
   手牌是中间高两边下垂的扇形，牌一多最左边那张会垂到原位置，把能量挡住 */
#en0 { left: 200px; top: -6px; }
.crystal {
  /* 从参考图抠出来的菱形蓝钻（已按菱形蒙版切掉周围桌面），见 tools/make-gem.ps1 */
  width: 34px; height: 64px;
  background-image: url(../assets/energy-gem.png);
  background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 0 12px rgba(79,163,209,.75));
}
.crystal.off { filter: grayscale(1) brightness(.32); opacity: .5; }
.crystal.ext { filter: drop-shadow(0 0 16px rgba(127,208,245,.95)) brightness(1.18) saturate(1.1); }

/* 牌堆 */
.pile {
  position: absolute; width: 112px; height: 152px;
}
/* 单张牌背（取自参考图的实体牌背），堆叠成自然的一摞 */
.pile .pcard, .flyer {
  position: absolute; left: 0; top: 0; width: 96px; height: 134px;
  background-image: url(../assets/card-back.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.75));
}
.pile.empty .pcard { display: none; }
.pile .pempty {
  position: absolute; left: 0; top: 0; width: 96px; height: 134px; display: none;
  align-items: center; justify-content: center; border-radius: 6px;
  border: 2px dashed rgba(201,162,75,.28); color: #6b5f45;
  font-size: 14px; letter-spacing: 4px; text-shadow: 0 2px 4px #000;
}
.pile.empty .pempty { display: flex; }
.pile.disc .pcard { filter: drop-shadow(0 6px 10px rgba(0,0,0,.75)) saturate(.9) brightness(.9); }
#edeck { left: 1500px; top: 70px; }
#edisc { left: 1690px; top: 96px; }
#pdeck { left: 30px; top: 30px; }
#pdisc { left: 1660px; top: 30px; }
.pile .num {
  position: absolute; right: -12px; bottom: 6px; min-width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 19px; font-weight: 600; color: var(--gold-hi);
  background: radial-gradient(circle at 35% 30%, #3b2f18, #120d06);
  border: 2px solid var(--gold-shadow); box-shadow: 0 4px 12px rgba(0,0,0,.85);
}
.pile .cap {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap;
  font-size: 13px; letter-spacing: 3px; color: var(--text-dim); text-shadow: 0 2px 5px #000;
}
.pile.shuffle .pcard { animation: shuffleSpin .7s ease; }
@keyframes shuffleSpin {
  40% { filter: drop-shadow(0 0 26px rgba(127,208,245,.9)); }
}

/* 飞牌动画层 */
.flyers { position: absolute; inset: 0; pointer-events: none; z-index: 96; }

/* 对手手牌（背面朝上牌列） */
.opphand { position: absolute; left: 600px; top: 40px; width: 840px; height: 210px; }
.opphand .cb {
  position: absolute; top: 0; width: 96px; height: 140px;
  background-image: url(../assets/card-back.png);
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.85));
}

/* ---------- 中央对战区 ---------- */
.battle {
  position: absolute; left: 260px; top: 356px; width: 1400px; height: 232px;
  display: flex; align-items: center; justify-content: center; gap: 26px; z-index: 25;
}
.battle .ocard { width: 156px; height: 218px; }
/* 守明灯：牌堆顶那张单独摆出来给玩家看清楚 */
.battle .ocard.peekcard { filter: drop-shadow(0 0 26px rgba(232,201,118,.85)); }
.battle .ocard .cname { font-size: 13.5px; }
.battle .ocard .ctype { font-size: 10.5px; }
.battle .ocard .ctext { font-size: 11px; }
/* 长描述（例如「巫蛊」）先按字数降一档，渲染后 fitCardText 还会继续自适应 */
.ocard .ctext.fit1 { font-size: 10.6px; line-height: 1.28; }
.ocard .ctext.fit2 { font-size: 9.6px; line-height: 1.24; }
.battle .ocard .ctext.fit1 { font-size: 10.2px; line-height: 1.28; }
.battle .ocard .ctext.fit2 { font-size: 9.2px; line-height: 1.24; }
.eqcell .ocard .ctext.fit1 { font-size: 8.2px; }
.eqcell .ocard .ctext.fit2 { font-size: 7.2px; }
.dpbody .ocard .ctext.fit1 { font-size: 7.8px; }
.dpbody .ocard .ctext.fit2 { font-size: 7px; }
.battle .ocard .cost { font-size: 12px; }
.battle .ocard .badge { font-size: 10px; }
.playCard { animation: flyIn .3s ease; }
@keyframes flyIn { from { transform: translateY(70px) scale(.82); opacity: 0; } }
.playCard.done { opacity: .5; }
.playCard.dead { opacity: .28; filter: grayscale(1); }
.playCard.justdone .frame { animation: flash .6s ease; }
@keyframes flash { 45% { filter: drop-shadow(0 0 40px rgba(232,201,118,.98)) drop-shadow(0 0 16px rgba(201,162,75,.9)); } }
.playArrow { color: var(--gold-shadow); font-size: 26px; }

/* ---------- 回合阶段轨道 ---------- */
.track {
  position: absolute; left: 300px; top: 432px; width: 1320px; height: 76px;
  display: flex; align-items: center; justify-content: space-between; z-index: 20;
}
.track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 22px; height: 32px;
  background: url(divider.svg) center/100% 100% no-repeat; opacity: .8;
}
.node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 190px; }
.node i {
  width: 26px; height: 26px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 35% 30%, #4a3c1e, #171008);
  border: 2px solid var(--gold-shadow); box-shadow: 0 0 10px rgba(0,0,0,.9);
  transition: all .25s;
}
.node span {
  font-size: 13px; letter-spacing: 2px; color: #6f6656; white-space: nowrap;
  text-shadow: 0 2px 5px #000; transition: color .25s;
}
.node.on i {
  background: radial-gradient(circle at 35% 30%, #fff3c8, var(--gold) 55%, #6d5115);
  border-color: var(--gold-hi);
  box-shadow: 0 0 24px rgba(232,201,118,.95), 0 0 60px rgba(201,162,75,.5);
  transform: scale(1.25);
}
.node.on span { color: var(--gold-hi); }
.node.past i { background: radial-gradient(circle at 35% 30%, #6a5a2e, #2a2010); border-color: #5a4a22; }

/* ---------- 卡牌 ---------- */
.ocard {
  position: relative; width: 180px; height: 252px; flex: none;
  transition: transform .16s ease, filter .16s ease;
}
.ocard .frame {
  position: absolute; inset: 0;
  /* 正视角的空卡框模板：顶部绶带（卡名）+ 拱形画窗 + 羊皮纸文字区都在图里 */
  background-image: url(../assets/card-template.png);
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.85));
}
.ocard.atk .frame { filter: drop-shadow(0 0 14px rgba(168,50,50,.45)) drop-shadow(0 14px 22px rgba(0,0,0,.85)); }
.ocard.def .frame { filter: drop-shadow(0 0 14px rgba(79,163,209,.4)) drop-shadow(0 14px 22px rgba(0,0,0,.85)); }
.ocard.fun .frame { filter: drop-shadow(0 0 12px rgba(201,162,75,.4)) drop-shadow(0 14px 22px rgba(0,0,0,.85)); }
.ocard .art {
  position: absolute; left: 24.4%; top: 16.3%; width: 53.2%; height: 42.3%;
  display: flex; align-items: center; justify-content: center; font-size: 44px;
  border-radius: 50% 50% 2px 2px / 34% 34% 2px 2px; overflow: hidden;
  background-image: radial-gradient(ellipse at 50% 40%, #1b1620, #08060a 78%);
  box-shadow: inset 0 -14px 22px rgba(0,0,0,.7);
}
.ocard .art::before {
  content: ''; position: absolute; inset: 0; background: var(--tint, #8d8578);
  mix-blend-mode: color; opacity: .6;
}
.ocard .art.real::before { opacity: 0; }
.ocard .art.real .glyph { display: none; }
.ocard .art.real {
  filter: brightness(1.18) contrast(1.04) saturate(1.05);
  background-position: center 28%;      /* 竖长拱窗 + 4:3 横图：取景上移，别把主体头部切掉 */
}
.ocard .art.real::after {
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), rgba(0,0,0,.32) 88%);
}
.ocard .art::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.14), rgba(0,0,0,.72) 78%);
}
.ocard .art .glyph { position: relative; z-index: 2; filter: drop-shadow(0 4px 8px rgba(0,0,0,.95)); }
.ocard .cname {
  position: absolute; left: 13%; top: 5.1%; width: 74%; height: 8.4%;
  display: flex; align-items: center; justify-content: center;
  /* 名字直接写在卡框自带的绶带上，不再另贴一块牌子 */
  font-family: var(--font-title); font-size: 15px; letter-spacing: 1px; color: #f6e2b0;
  text-shadow: 0 1px 0 rgba(0,0,0,.75), 0 0 8px rgba(0,0,0,.9), 0 2px 5px rgba(0,0,0,.95);
}
.ocard .ctype {
  position: absolute; left: 14%; top: 63.8%; width: 72%; text-align: center;
  font-size: 10px; letter-spacing: 3px; color: #6d4b1c; text-shadow: 0 1px 0 rgba(255,248,222,.5);
}
.ocard .ctext {
  position: absolute; left: 13%; top: 65%; width: 74%; height: 26%;
  display: flex; align-items: flex-start; justify-content: center; text-align: center;
  font-size: 12px; line-height: 1.3; color: #2f2109; overflow: hidden; padding: 2px 3px 0;
}
.ocard .cost {
  position: absolute; left: 2.4%; top: 2.2%; width: 10%; height: 13.4%; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 14px; font-weight: 600; color: #eaf6ff;
  text-shadow: 0 1px 4px #000, 0 0 10px rgba(79,163,209,.95);
  background-image: url(../assets/energy-gem.png);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.ocard .cost.grey { filter: grayscale(1) brightness(.45); color: #b9b9b9; text-shadow: 0 2px 5px #000; }
.ocard .badge {
  position: absolute; right: 2%; top: 16.5%; padding: 2px 7px;
  font-size: 10px; letter-spacing: 1px; color: #f0e2b8;
  background: linear-gradient(180deg, rgba(38,28,14,.95), rgba(12,8,4,.95));
  border: 1px solid var(--gold-shadow); border-radius: 2px;
}
.badge.quick { border-color: var(--energy); color: #bcdcff; }
.badge.trap { border-color: #8a52b8; color: #ddbdf7; }
.badge.equip { border-color: #6f9a4a; color: #cbe8b0; }
.badge.ash { border-color: #b8542a; color: #f0c0a0; }
.badge.enemy-turn { border-color: var(--oxblood-hi); color: #ffc0c0; background: linear-gradient(180deg, rgba(70,10,10,.95), rgba(24,3,3,.95)); }
.ocard .check {
  position: absolute; right: 6%; top: 4%; width: 30px; height: 30px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 20px; color: #12210a;
  background: radial-gradient(circle at 35% 30%, #d8f0b0, #6aa03a);
  border: 2px solid var(--gold-hi); box-shadow: 0 0 16px rgba(140,200,90,.8);
}

/* 状态 */
.ocard.disabled { filter: grayscale(.85) brightness(.48); cursor: not-allowed; }
.ocard.disabled:hover { transform: none !important; }
.hand .ocard.picked {
  transform: translate(-50%, -34px) scale(1.09) rotate(0deg) !important;
  z-index: 220 !important;
  filter: drop-shadow(0 0 24px rgba(232,201,118,.95)) drop-shadow(0 16px 26px rgba(0,0,0,.85));
}
.ocard.selected { filter: drop-shadow(0 0 22px rgba(232,201,118,.9)); }
.ocard.selected .check { display: flex; }
.ocard.dragging { opacity: .45; }

/* ---------- 手牌 ---------- */
.hand { position: absolute; left: 0; top: 686px; width: 1920px; height: 400px; pointer-events: none; }
.hand .ocard { position: absolute; left: 50%; top: 0; transform-origin: 50% 140%; cursor: pointer; pointer-events: auto; }
.hand .ocard:hover {
  /* 手牌悬停 = 大幅放大：新玩家不用凑近屏幕就能读清效果（放太大会挡住旁边的牌，1.45 是试出来的平衡点） */
  transform: translate(-50%, -34px) scale(1.45) rotate(0deg) !important;
  z-index: 200 !important;
}
.hand .ocard.playable:hover .ctext { height: auto; min-height: 31%; }

/* ---------- 顶栏 / 提示 ---------- */
.topbar {
  position: absolute; left: 0; right: 0; top: 0; height: 40px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 48px;
  pointer-events: none; z-index: 30;
}
.topbar > * { pointer-events: auto; }
.round {
  font-family: var(--font-title); font-size: 20px; letter-spacing: 8px;
  background: linear-gradient(180deg, #fff3c8, var(--gold) 45%, #8a6320);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.95));
}
.prompt {
  position: absolute; left: 50%; transform: translateX(-50%); top: 592px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 40;
}
/* 回合中：选中手牌会抬起来 34px，这里把提示和「结束回合」一起上移让开 */
.prompt.main { top: 536px; }
.hint { font-size: 18px; letter-spacing: 2px; color: #d9cba6; text-shadow: 0 2px 8px #000; }
.hint.dim { color: #8e8a7c; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

button {
  cursor: pointer; font-family: var(--font-title); font-size: 16px; letter-spacing: 3px;
  padding: 10px 24px; border-radius: 3px; color: var(--gold-hi);
  background: linear-gradient(180deg, #3a2f1a 0%, #1b150a 55%, #0d0a05 100%);
  border: 1px solid var(--gold-shadow);
  box-shadow: inset 0 1px 0 rgba(255,235,180,.18), inset 0 0 20px rgba(0,0,0,.75), 0 6px 14px rgba(0,0,0,.7);
}
button:hover { border-color: var(--gold); color: #fff6d8; box-shadow: inset 0 0 22px rgba(201,162,75,.25), 0 0 22px rgba(201,162,75,.45); }
button.mini { font-size: 13px; padding: 5px 12px; letter-spacing: 1px; }
button.ghost { color: var(--text-dim); border-color: rgba(201,162,75,.25); }
button.endturn {
  font-size: 20px; padding: 14px 46px; color: #1a1206;
  background: linear-gradient(180deg, #ffeeb8 0%, #d3a83a 45%, #8e6a1c 100%);
  border: 1px solid #5e4410;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 28px rgba(201,162,75,.5), 0 8px 18px rgba(0,0,0,.8);
}

/* 提示条 */
.toast {
  position: absolute; left: 50%; transform: translateX(-50%); top: 120px;
  padding: 12px 36px; font-family: var(--font-title); font-size: 22px; letter-spacing: 6px;
  color: var(--gold-hi); background: linear-gradient(180deg, rgba(24,18,10,.96), rgba(8,6,4,.96));
  border: 1px solid var(--gold-shadow); border-radius: 3px; opacity: 0; transition: opacity .25s;
  box-shadow: 0 12px 40px rgba(0,0,0,.9); pointer-events: none; z-index: 70;
}
.toast.on { opacity: 1; }
.toast.foe { color: #cfe8ff; border-color: #3f6f9c; }

/* ---------- 装备区面板 ---------- */
.equippanel {
  position: absolute; left: 40px; bottom: 40px; width: 1290px; z-index: 300;
  transform: translateY(130%); transition: transform .24s ease, opacity .24s; opacity: 0;
  background-image: linear-gradient(180deg, rgba(12,10,16,.97), rgba(4,3,6,.98)), url(../assets/card-ref.png);
  background-size: cover, 274.29% 155.36%; background-position: center, 0% 99.48%;
  border: 2px solid var(--gold-shadow); border-radius: 6px;
  box-shadow: 0 0 0 5px rgba(8,6,4,.9), 0 30px 70px rgba(0,0,0,.95);
  padding: 22px 26px 24px;
}
.equippanel.show { transform: translateY(0); opacity: 1; }
.ephead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ephead span { font-family: var(--font-title); font-size: 20px; letter-spacing: 10px; color: var(--gold-hi); }
.eprow { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.eprow .who { width: 90px; font-size: 15px; letter-spacing: 3px; color: var(--text-dim); flex: none; }
.epslots { display: flex; gap: 10px; flex: 1; }
.eqcell {
  position: relative; width: 156px; height: 226px; flex: none; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(201,162,75,.18);
}
.eqcell .ocard { width: 156px; height: 218px; }
.eqcell .ocard .cname { font-size: 13px; }
.eqcell .ocard .ctype { font-size: 9.5px; }
.eqcell .ocard .ctext { font-size: 9px; }
.eqcell .ocard .cost { font-size: 12px; }
.eqcell .ocard .badge { font-size: 9.5px; }
.eqcell .eqcard.unarmed { filter: opacity(.72) saturate(.7); }
.eqcell.ready { cursor: pointer; border-color: var(--gold-hi); box-shadow: 0 0 26px rgba(232,201,118,.75); }
.eqcell.picked { border-color: var(--gold-hi); box-shadow: 0 0 32px rgba(232,201,118,.95); }
.eqcell.drop { border-color: var(--gold-hi); background: rgba(232,201,118,.12); }
.eqcell.ready::after {
  content: '可发动'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 1px; color: #12210a; white-space: nowrap; z-index: 6;
  background: linear-gradient(180deg, #d8f0b0, #6aa03a);
  border: 1px solid var(--gold-hi); border-radius: 3px; padding: 0 5px;
}
.eqempty { font-size: 12px; letter-spacing: 3px; color: #5c5446; }
.eqback {
  width: 156px; height: 218px; background: url(../assets/card-back.png) center/100% 100% no-repeat;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px;
}
.eqback .eqcap { font-size: 11px; color: #cbbf9f; letter-spacing: 2px; text-shadow: 0 2px 5px #000; }
.eqactions {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -46px; z-index: 8;
  display: flex; gap: 8px; white-space: nowrap;
}
.eptip { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; margin-top: 6px; }

/* ---------- 弃牌堆查看面板 ---------- */
#discardpanel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); z-index: 320;
  width: 1560px; max-height: 880px; display: none; flex-direction: column;
  background-image: linear-gradient(180deg, rgba(12,10,16,.98), rgba(4,3,6,.99)), url(../assets/card-ref.png);
  background-size: cover, 274.29% 155.36%; background-position: center, 0% 99.48%;
  border: 2px solid var(--gold-shadow); border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(8,6,4,.92), 0 40px 90px rgba(0,0,0,.95);
  padding: 22px 26px 24px;
}
#discardpanel.show { display: flex; }
.dpbody {
  display: flex; flex-wrap: wrap; gap: 10px; overflow-y: auto; padding: 6px 2px 10px;
  max-height: 700px;
}
.dpbody .ocard { width: 132px; height: 185px; flex: none; }
.dpbody .ocard .cname { font-size: 12px; }
.dpbody .ocard .ctype { font-size: 9px; }
.dpbody .ocard .ctext { font-size: 8.5px; }
.dpbody .ocard .cost { font-size: 10px; }
.dpbody .ocard .badge { font-size: 9px; }
.dpbody::-webkit-scrollbar { width: 9px; }
.dpbody::-webkit-scrollbar-thumb { background: rgba(201,162,75,.4); border-radius: 4px; }
.pile { cursor: pointer; }

/* ---------- 暂停菜单 ----------
   刻意不用 backdrop-filter：那个滤镜在弱机器上会掉帧，改成纯渐变压暗 */
.pausepanel {
  position: absolute; inset: 0; z-index: 400; display: none;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 44%, rgba(7,5,10,.78), rgba(2,1,3,.93));
}
.pausepanel.show { display: flex; }
.pausebox {
  width: 760px; padding: 24px 36px 28px;
  background-image: linear-gradient(180deg, rgba(14,11,17,.98), rgba(5,4,7,.99)), url(../assets/card-ref.png);
  background-size: cover, 274.29% 155.36%; background-position: center, 0% 99.48%;
  border: 2px solid var(--gold-shadow); border-radius: 6px;
  box-shadow: 0 0 0 5px rgba(8,6,4,.9), 0 40px 80px rgba(0,0,0,.95);
}
.pausetip { font-size: 14px; letter-spacing: 2px; color: var(--text-dim); margin-top: -4px; }
.pausepanel .setlabel { margin: 20px 0 10px; }
.pauseacts { margin-top: 28px; display: flex; justify-content: center; }
.pauseacts .mainbtn { min-width: 340px; }
.pauseacts .mainbtn.arm {
  color: #ffd9c0; border-color: #a4523a;
  box-shadow: inset 0 0 22px rgba(180,70,40,.35), 0 0 22px rgba(180,70,40,.4);
}

/* ---------- 浮动数字 ---------- */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 90; }
.floater {
  position: absolute; font-family: var(--font-num); font-size: 46px; font-weight: 600;
  color: #ff9a9a; text-shadow: 0 0 18px rgba(200,20,20,.95), 0 4px 10px #000;
  animation: floatUp 1.15s ease-out forwards;
}
.floater.heal { color: #a8e88a; text-shadow: 0 0 18px rgba(60,180,60,.95), 0 4px 10px #000; }
@keyframes floatUp {
  0% { transform: translate(-50%, 0) scale(.7); opacity: 0; }
  18% { transform: translate(-50%, -18px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -110px) scale(1); opacity: 0; }
}

/* ---------- 战报抽屉 ---------- */
.drawer {
  position: absolute; right: 0; top: 0; width: 460px; height: 1080px; z-index: 85;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .24s ease;
  background-image: linear-gradient(180deg, rgba(10,8,12,.98), rgba(3,3,5,.99)), url(../assets/card-ref.png);
  background-size: cover, 274.29% 155.36%; background-position: center, 0% 99.48%;
  border-left: 2px solid rgba(201,162,75,.4); box-shadow: -20px 0 60px rgba(0,0,0,.9);
}
.drawer.show { transform: translateX(0); }
.loghead { padding: 24px 26px 16px; font-family: var(--font-title); font-size: 20px; letter-spacing: 10px;
  color: var(--gold-hi); border-bottom: 1px solid rgba(201,162,75,.28); }
#log { flex: 1; overflow-y: auto; padding: 16px 24px; font-size: 15px; line-height: 1.9;
  white-space: pre-wrap; color: var(--text-dim); }
#log::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-thumb { background: rgba(201,162,75,.35); }

/* ---------- 开始界面 ---------- */
.overlay {
  /* 必须高过战场里所有元素：手牌是 100+序号，装备区面板 300，弃牌堆面板 320 */
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 42%, rgba(30,22,30,.86), rgba(2,2,4,.97)),
    url(../assets/table-ref.png) 0% 0%/369.23% 249.3% no-repeat;
  opacity: 1; visibility: visible;
  transition: opacity .3s ease, visibility .3s ease;
}
.overlay.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.dialog {
  text-align: center; padding: 60px 90px; border-radius: 6px; border: 2px solid var(--gold-shadow);
  background: linear-gradient(180deg, rgba(18,14,20,.96), rgba(6,5,8,.98));
  /* 阴影只用小半径：大半径模糊的首次光栅化很贵，换屏时会明显顿一下 */
  box-shadow: inset 0 0 0 1px rgba(255,235,180,.08), 0 18px 42px rgba(0,0,0,.92);
}
/* 换屏转场 */
.dialog.in {
  animation: panelIn .26s cubic-bezier(.22,.9,.28,1) both;
  will-change: transform, opacity; backface-visibility: hidden;
}
.dialog.out {
  /* 主界面自己带了 position:relative，会盖掉这里的 absolute（同权重、位置更靠后），
     于是淡出期间它还占着流，把新面板挤窄——用 .dialog.mainmenu.out 提权重压回去 */
  position: absolute; pointer-events: none; animation: panelOut .16s ease forwards;
  will-change: transform, opacity; backface-visibility: hidden;
}
.dialog.mainmenu.out { position: absolute; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes panelOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-10px); }
}
.dialog h1 {
  font-family: var(--font-title); font-size: 52px; letter-spacing: 30px; text-indent: 30px; margin-bottom: 12px;
  background: linear-gradient(180deg, #fff6d4, var(--gold) 45%, #7d5915);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.95));
}
.dialog .muted { color: var(--text-dim); font-size: 16px; letter-spacing: 8px; }
.dialog .muted.tip { letter-spacing: 1px; font-size: 14px; margin-top: 10px; color: var(--text-dim); opacity: .85; }

/* ---------- 主界面 / 模式 / 卡组编辑 ---------- */
.dialog.mainmenu {
  position: relative; overflow: hidden; padding: 40px 120px 34px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(96,66,32,.3), transparent 60%),
    linear-gradient(180deg, rgba(20,15,20,.97), rgba(5,4,7,.99));
}
/* 内描边 + 四角起线 */
.dialog.mainmenu::before {
  content: ''; position: absolute; inset: 11px; pointer-events: none; border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(201,162,75,.55), transparent 14%) 0 0/100% 1px no-repeat,
    linear-gradient(270deg, rgba(201,162,75,.55), transparent 14%) 0 100%/100% 1px no-repeat,
    linear-gradient(180deg, rgba(201,162,75,.55), transparent 14%) 0 0/1px 100% no-repeat,
    linear-gradient(0deg, rgba(201,162,75,.55), transparent 14%) 100% 0/1px 100% no-repeat;
}
.crest {
  width: 188px; height: 188px; margin: 0 auto 16px; border-radius: 50%;
  background-repeat: no-repeat; background-color: rgba(6,5,8,.9);
  border: 2px solid rgba(201,162,75,.7);
  box-shadow: 0 0 0 6px rgba(4,3,6,.85), 0 0 22px rgba(201,162,75,.3);
}
.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 28px; }
.ornament .orl { display: block; width: 190px; height: 9px; background: url(divider.svg) center/100% 100% no-repeat; opacity: .7; }
.ornament .orl.r { transform: scaleX(-1); }
.ornament b { color: var(--gold); font-size: 12px; text-shadow: 0 0 12px rgba(201,162,75,.9); }
.menubtns { display: flex; flex-direction: column; gap: 14px; }
.bigbtn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font-title); font-size: 25px; letter-spacing: 10px;
  padding: 16px 70px 14px; cursor: pointer; color: var(--gold-hi); border-radius: 4px;
  background: linear-gradient(180deg, #2b2114, #130e09 55%, #0a0705);
  border: 1px solid var(--gold-shadow);
  box-shadow: inset 0 1px 0 rgba(255,236,180,.14), inset 0 0 34px rgba(0,0,0,.92), 0 10px 26px rgba(0,0,0,.8);
  transition: transform .16s, border-color .16s, box-shadow .16s, color .16s, letter-spacing .16s;
}
.bigbtn::before, .bigbtn::after {
  content: '◆'; position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: rgba(201,162,75,.4); transition: color .16s, transform .16s;
}
.bigbtn::before { left: 24px; }
.bigbtn::after { right: 24px; }
.bigbtn:hover { transform: translateY(-3px); color: #fff6d4; border-color: var(--gold); letter-spacing: 12px;
  box-shadow: inset 0 1px 0 rgba(255,236,180,.22), inset 0 0 42px rgba(96,66,24,.35),
    0 0 36px rgba(201,162,75,.42), 0 14px 30px rgba(0,0,0,.85); }
.bigbtn:hover::before { color: var(--gold-hi); transform: translate(-3px, -50%); }
.bigbtn:hover::after { color: var(--gold-hi); transform: translate(3px, -50%); }
.bigbtn .btnsub { font-family: var(--font-body); font-size: 12px; letter-spacing: 3px; color: rgba(214,201,168,.55); }
.bigbtn.minor { font-size: 19px; letter-spacing: 8px; padding: 12px 60px 11px; color: var(--text-dim); }
.bigbtn.minor:hover { letter-spacing: 9px; }
/* 余烬粒子 */
.ember {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,216,148,.95), rgba(201,120,50,.32) 58%, transparent 72%);
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  14% { opacity: .85; }
  70% { opacity: .32; }
  100% { transform: translateY(-460px) scale(1.15); opacity: 0; }
}
.dialog.mainmenu > *:not(.ember) { position: relative; z-index: 2; }
.ver { margin-top: 26px; font-size: 13px; color: var(--text-dim); opacity: .8; letter-spacing: 1px; line-height: 1.9; }

.dialog.modepanel, .dialog.packpanel, .dialog.setpanel {
  width: 1420px; height: 840px; padding: 34px 46px 40px; display: flex; flex-direction: column; text-align: left;
}
.dialog.deckpanel { width: 1760px; height: 960px; padding: 30px 44px 34px; display: flex; flex-direction: column; text-align: left; }
.modehead { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px;
  border-bottom: 1px solid rgba(201,162,75,.28); margin-bottom: 22px; }
.modehead h2 { font-family: var(--font-title); font-size: 30px; letter-spacing: 12px; color: var(--gold-hi); font-weight: 500; }
.modebody { flex: 1; display: flex; gap: 30px; min-height: 0; }
.modeleft { width: 260px; display: flex; flex-direction: column; gap: 14px; }
.moderight { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.navbtn {
  font-family: var(--font-title); font-size: 22px; letter-spacing: 10px; text-indent: 10px; padding: 26px 0; cursor: pointer;
  color: var(--gold-hi); border-radius: 4px; background: linear-gradient(180deg, #201a12, #0d0a07);
  border: 1px solid var(--gold-shadow); box-shadow: inset 0 0 24px rgba(0,0,0,.85);
  transition: border-color .14s, color .14s, box-shadow .14s;
}
.navbtn:hover { border-color: var(--gold); color: #fff6d4; box-shadow: inset 0 0 24px rgba(0,0,0,.8), 0 0 26px rgba(201,162,75,.35); }
.startcard { width: 100%; padding: 30px 36px; border-radius: 5px; background: linear-gradient(180deg, rgba(24,19,14,.9), rgba(8,7,6,.95));
  border: 1px solid rgba(201,162,75,.3); box-shadow: inset 0 0 22px rgba(0,0,0,.7); }
.startrow { margin-bottom: 22px; }
.startlabel { font-size: 14px; letter-spacing: 6px; color: var(--text-dim); margin-bottom: 12px; }
.pickrow { display: flex; gap: 12px; flex-wrap: wrap; }
.pickbtn {
  flex: 1; min-width: 150px; padding: 16px 10px; cursor: pointer; font-size: 16px; letter-spacing: 2px;
  font-family: var(--font-body); color: var(--parchment); border-radius: 4px;
  background: linear-gradient(180deg, #1b1610, #0b0907); border: 1px solid rgba(201,162,75,.25);
  transition: border-color .14s, color .14s, box-shadow .14s;
}
.pickbtn:hover { border-color: var(--gold); }
.pickbtn.on { color: #fff6d4; border-color: var(--gold); background: linear-gradient(180deg, #33261a, #16100a);
  box-shadow: inset 0 0 22px rgba(201,162,75,.22), 0 0 22px rgba(201,162,75,.28); }
.deckline { display: flex; align-items: center; gap: 16px; margin-top: 6px; padding-top: 20px; border-top: 1px solid rgba(201,162,75,.2); }
.deckline-name { font-size: 17px; color: var(--parchment); letter-spacing: 2px; }
.deckline-num { font-family: var(--font-num); font-size: 22px; color: var(--gold-hi); }
.deckline-num.warn, .decknum.warn { color: #e08a6a; }
.startbtn {
  margin-top: 6px; font-family: var(--font-title); font-size: 30px; letter-spacing: 14px; text-indent: 14px;
  padding: 26px 90px; cursor: pointer; color: #1b1206; border-radius: 4px; border: 1px solid #e8cf8a;
  background: linear-gradient(180deg, #f0d78f, #a9812c 60%, #6d4d16);
  box-shadow: 0 0 40px rgba(201,162,75,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .14s, box-shadow .14s;
}
.startbtn:hover { transform: translateY(-3px); box-shadow: 0 0 56px rgba(222,190,110,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.note { font-size: 14px; color: var(--text-dim); letter-spacing: 1px; line-height: 1.9; max-width: 760px; text-align: center; }
.note.leftnote { text-align: left; max-width: none; white-space: pre-wrap; margin-bottom: 18px; }

.decktabs { display: flex; gap: 10px; margin-bottom: 18px; }
.tabbtn { padding: 12px 34px; cursor: pointer; font-size: 17px; letter-spacing: 4px; color: var(--parchment);
  font-family: var(--font-body); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #16120d, #0a0806);
  border: 1px solid rgba(201,162,75,.25); border-bottom: none; }
.tabbtn.on { color: #fff6d4; border-color: var(--gold); background: linear-gradient(180deg, #2c2114, #140f0a); }
.deckbody { flex: 1; display: flex; gap: 24px; min-height: 0; }
.deckpool { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.poolhint { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; letter-spacing: 1px; }
.cardgrid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  padding-right: 10px; align-content: start; }
.cardgrid.three { grid-template-columns: repeat(3, 1fr); flex: none; overflow: visible; max-width: 720px; }
.cardgrid::-webkit-scrollbar, .decklist::-webkit-scrollbar, .packbody::-webkit-scrollbar { width: 8px; }
.cardgrid::-webkit-scrollbar-thumb, .decklist::-webkit-scrollbar-thumb, .packbody::-webkit-scrollbar-thumb {
  background: rgba(201,162,75,.35); border-radius: 4px; }
.mtile { position: relative; height: 208px; cursor: pointer; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #1a1410, #0a0806); border: 1px solid rgba(201,162,75,.28);
  box-shadow: inset 0 0 24px rgba(0,0,0,.85); transition: transform .12s, border-color .12s, box-shadow .12s; }
.mtile:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 0 22px rgba(201,162,75,.3); }
.mtile.has { border-color: rgba(201,162,75,.7); }
.mtile.full { border-color: #e0a15c; }
.mtile-art { position: absolute; inset: 0 0 40% 0; background-size: cover; background-position: center; opacity: .92; }
.mtile-glyph { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font-size: 30px; opacity: .5; }
.mtile-cost { position: absolute; left: 5px; top: 5px; width: 26px; height: 26px; line-height: 26px; text-align: center;
  font-family: var(--font-num); font-size: 16px; color: #fff2d0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a7bd0, #16233f); border: 1px solid #9fc0ff; }
.mtile-name { position: absolute; left: 0; right: 0; top: 55%; text-align: center; font-size: 15px; letter-spacing: 2px; color: #f1e2bd; }
.mtile-type { position: absolute; left: 0; right: 0; top: 66%; text-align: center; font-size: 11px; color: var(--text-dim); letter-spacing: 3px; }
.mtile-text { position: absolute; left: 6px; right: 6px; bottom: 22px; font-size: 11px; line-height: 1.5; color: #cfc3a8; text-align: center;
  max-height: 46px; overflow: hidden; }
.mtile-cnt { position: absolute; right: 5px; bottom: 3px; font-family: var(--font-num); font-size: 15px; color: var(--gold-hi); }
.deckside { width: 420px; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid rgba(201,162,75,.2); padding-left: 20px; }
.decknum { font-family: var(--font-title); font-size: 34px; color: var(--gold-hi); }
.decknumtip { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.decklist { flex: 1; overflow-y: auto; padding-right: 8px; }
.deckgroup { font-size: 12px; letter-spacing: 5px; color: var(--text-dim); margin: 12px 0 6px; }
.deckrow { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 3px; background: rgba(255,255,255,.02); margin-bottom: 3px; }
.deckrow:hover { background: rgba(201,162,75,.08); }
.dr-cost { width: 22px; text-align: center; font-family: var(--font-num); color: #9fc0ff; }
.dr-name { flex: 1; font-size: 15px; color: var(--parchment); }
.dr-cnt { font-family: var(--font-num); color: var(--gold-hi); }
.mini.ghost.dq { padding: 2px 9px; font-size: 13px; }
.deckacts { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(201,162,75,.2); }

.packbody { flex: 1; overflow-y: auto; padding-right: 10px; }
.packsec { margin-bottom: 24px; }
.packtitle { display: flex; justify-content: space-between; align-items: center; font-size: 18px; letter-spacing: 4px;
  color: var(--gold-hi); padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid rgba(201,162,75,.2); }
.packcount { font-size: 13px; color: var(--text-dim); letter-spacing: 2px; }
.packrow { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.ptile { position: relative; height: 150px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #1a1410, #0a0806); border: 1px solid rgba(201,162,75,.28); }
.ptile .mtile-name { top: 62%; font-size: 13px; }
.setlabel { font-size: 15px; letter-spacing: 5px; color: var(--text-dim); margin: 22px 0 12px; }
.setpanel .pickrow { max-width: 700px; }

/* ---------- 角色选人栏（可横向滚动，方便以后加角色） ---------- */
.rowhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.rowhint { font-size: 11px; color: var(--text-dim); letter-spacing: 2px; opacity: .8; }
.roster { display: flex; align-items: center; gap: 10px; }
.rollbtn {
  flex: none; width: 38px; height: 74px; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--gold-hi); border-radius: 4px; background: linear-gradient(180deg, #1e1811, #0b0906);
  border: 1px solid var(--gold-shadow); transition: border-color .14s, color .14s;
}
.rollbtn:hover { border-color: var(--gold); color: #fff6d4; }
.rosterscroll {
  flex: 1; display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
  padding: 4px 2px 8px; scrollbar-width: thin;
}
.rosterscroll::-webkit-scrollbar { height: 7px; }
.rosterscroll::-webkit-scrollbar-thumb { background: rgba(201,162,75,.35); border-radius: 4px; }
.herocard {
  flex: none; width: 132px; padding: 8px 8px 10px; cursor: pointer; border-radius: 5px; text-align: center;
  background: linear-gradient(180deg, #1d1710, #0a0806); border: 1px solid rgba(201,162,75,.28);
  box-shadow: inset 0 0 24px rgba(0,0,0,.85); transition: transform .14s, border-color .14s, box-shadow .14s;
}
.herocard:hover { transform: translateY(-4px); border-color: var(--gold); }
.herocard.on { border-color: var(--gold); background: linear-gradient(180deg, #32261a, #15100a);
  box-shadow: inset 0 0 26px rgba(201,162,75,.22), 0 0 26px rgba(201,162,75,.3); }
.hpic {
  width: 100%; height: 116px; border-radius: 4px; background-size: cover; background-position: 50% 12%;
  background-color: #0b0910; border: 1px solid rgba(0,0,0,.6);
}
.hpic.sm { width: 40px; height: 46px; flex: none; }
.hpic.big { width: 96px; height: 128px; flex: none; }
.hname { margin-top: 7px; font-size: 15px; letter-spacing: 2px; color: #f1e2bd; }
.herocard.on .hname { color: #fff6d4; }
.hspeed { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; margin-top: 2px; }
.herochip {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; cursor: pointer;
  border-radius: 4px; background: linear-gradient(180deg, #1b1610, #0a0807);
  border: 1px solid rgba(201,162,75,.22); transition: border-color .14s;
}
.herochip:hover { border-color: var(--gold); }
.herochip.on { border-color: var(--gold); box-shadow: 0 0 18px rgba(201,162,75,.3); }
.hcinfo { text-align: left; }
.herochip .hname { margin: 0; font-size: 13px; letter-spacing: 1px; }
.herochip .hspeed { margin: 0; font-size: 10px; }
.herodetail {
  display: flex; gap: 16px; align-items: center; margin-top: 14px; padding: 12px 16px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(30,23,16,.6), rgba(8,7,6,.7)); border: 1px solid rgba(201,162,75,.22);
}
.hdtext { text-align: left; }
.hdname { font-size: 19px; letter-spacing: 3px; color: #f1e2bd; }
.hdtag { display: inline-block; margin: 7px 0 6px; padding: 2px 10px; font-size: 12px; letter-spacing: 2px;
  color: #f0d79a; border: 1px solid rgba(201,162,75,.45); border-radius: 2px; }
.hddesc { font-size: 12.5px; color: var(--text-dim); letter-spacing: 1px; }

/* ---------- 新手引导面板 ---------- */
.coach {
  position: absolute; left: 56px; top: 246px; width: 470px; z-index: 60;
  padding: 18px 22px 16px; border-radius: 5px; text-align: left;
  background: linear-gradient(180deg, rgba(26,20,14,.97), rgba(8,6,5,.98));
  border: 1px solid var(--gold); box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 0 34px rgba(201,162,75,.28);
}
.coach .chead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.coach .ctitle { font-family: var(--font-title); font-size: 19px; letter-spacing: 5px; color: var(--gold-hi); }
.coach .ccount { font-family: var(--font-num); font-size: 12px; color: var(--text-dim); letter-spacing: 2px; }
.coach .ctext { font-size: 13.5px; line-height: 1.75; color: var(--parchment); white-space: pre-line; }
.coach .cbtns { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.coach .cwait { flex: 1; font-size: 12px; color: var(--text-dim); letter-spacing: 1px; }
.coach .cbtn {
  margin-left: auto; padding: 8px 20px; cursor: pointer; font-family: var(--font-body); font-size: 14px;
  letter-spacing: 3px; color: #1b1206; border-radius: 3px; border: 1px solid #e8cf8a;
  background: linear-gradient(180deg, #f0d78f, #a9812c 60%, #6d4d16);
}
.coach .cbtn.ghost { margin-left: 0; color: var(--text-dim); background: transparent; border-color: rgba(201,162,75,.35); }
.coach .cbtn:hover { filter: brightness(1.1); }
/* 被指到的元素 */
.coachhi {
  outline: 3px solid rgba(232,201,118,.85); outline-offset: 5px; border-radius: 6px;
  animation: coachPulse 1.5s ease-in-out infinite;
}
@keyframes coachPulse {
  0%, 100% { outline-color: rgba(232,201,118,.35); }
  50% { outline-color: rgba(255,236,180,.95); }
}
.heroes { display: flex; gap: 40px; margin-top: 50px; justify-content: center; }
.heroCard {
  width: 300px; padding: 24px 18px 26px; cursor: pointer; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: linear-gradient(180deg, #1d1710, #0a0806); border: 1px solid var(--gold-shadow);
  box-shadow: inset 0 0 40px rgba(0,0,0,.9), 0 12px 30px rgba(0,0,0,.85);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.heroCard:hover { transform: translateY(-8px); border-color: var(--gold);
  box-shadow: inset 0 0 40px rgba(0,0,0,.85), 0 0 40px rgba(201,162,75,.45), 0 16px 34px rgba(0,0,0,.9); }
.heroCard .pic {
  width: 200px; height: 260px; overflow: hidden; border-radius: 4px;
  border: 1px solid rgba(201,162,75,.4); background: radial-gradient(circle at 50% 25%, #32263a, #08060b 75%);
}
.heroCard .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.heroCard .n { font-family: var(--font-title); font-size: 28px; letter-spacing: 12px; color: var(--gold-hi); }
.heroCard .sp { font-size: 15px; letter-spacing: 3px; color: var(--text-dim); }
.heroCard .sp b { font-family: var(--font-num); font-size: 20px; color: var(--gold-hi); }

/* ---------- 联机大厅 / 房间面板 ---------- */
.netbox { width: 100%; padding: 24px 30px; border-radius: 5px; display: flex; flex-direction: column;
  align-items: center; gap: 14px; background: linear-gradient(180deg, rgba(24,19,14,.9), rgba(8,7,6,.95));
  border: 1px solid rgba(201,162,75,.3); box-shadow: inset 0 0 22px rgba(0,0,0,.7); }
.netbox .startbtn { padding: 20px 64px; font-size: 26px; letter-spacing: 12px; text-indent: 12px; }
.startbtn.dim { filter: grayscale(.7) brightness(.72); cursor: default; }
.startbtn.dim:hover { transform: none; box-shadow: 0 0 40px rgba(201,162,75,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.netjoin { display: flex; gap: 10px; align-items: center; width: 100%; max-width: 560px; }
.netinput { flex: 1; min-width: 0; padding: 12px 14px; font-family: var(--font-body); font-size: 16px; letter-spacing: 3px;
  color: var(--parchment); background: linear-gradient(180deg, #14100c, #0a0806);
  border: 1px solid rgba(201,162,75,.3); border-radius: 4px; }
.netinput:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 18px rgba(201,162,75,.25); }
.netinput.srv { max-width: 560px; font-size: 13px; letter-spacing: 1px; }
.netcoderow { display: flex; align-items: center; gap: 18px; }
.netcode { font-family: var(--font-title); font-size: 50px; letter-spacing: 16px; text-indent: 16px;
  color: #fff2cf; text-shadow: 0 0 34px rgba(201,162,75,.55); }
.netseats { display: flex; gap: 16px; width: 100%; }
.netseat { flex: 1; padding: 14px 16px; border-radius: 4px; background: rgba(255,255,255,.02);
  border: 1px solid rgba(201,162,75,.2); }
.netseat.me { border-color: rgba(201,162,75,.55); }
.netseat.on { border-color: rgba(120,190,120,.55); background: rgba(120,190,120,.06); }
.nseat-tag { font-size: 12px; letter-spacing: 4px; color: var(--text-dim); margin-bottom: 6px; }
.nseat-hero { font-family: var(--font-title); font-size: 24px; color: var(--gold-hi); letter-spacing: 4px; }
.nseat-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.note.small { font-size: 12px; opacity: .85; }
.note.warn2 { color: #e0a15c; }

/* ---------- 卡牌悬停说明 / 能量读数 ---------- */
.cardtip {
  position: absolute; display: none; z-index: 999; pointer-events: none;
  width: 420px; padding: 12px 16px 14px;
  border-radius: 5px; background: rgba(10, 8, 6, .97);
  border: 1px solid rgba(201, 162, 75, .65);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .9);
  font-family: var(--font-body); text-align: left;
}
.cardtip.show { display: block; }
.cardtip .tiphead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(201, 162, 75, .28); }
.cardtip .tiphead b { font-family: var(--font-title); font-size: 20px; letter-spacing: 4px; color: var(--gold-hi); }
.cardtip .tipcost { font-size: 13px; color: #9fc0ff; white-space: nowrap; }
.cardtip .tipkw { font-size: 13px; line-height: 1.7; color: #cfc3a8; }
.cardtip .tipkw b { display: inline-block; min-width: 58px; margin-right: 8px; color: #f0d9a0; letter-spacing: 2px; }
.cardtip .tipnote { font-size: 13px; line-height: 1.7; color: var(--text-dim); }
.cardtip .tipwarn { font-size: 13px; line-height: 1.7; color: #ff9a72; }

/* 能量读数：贴在钻石条右边，数字单独拎出来 */
.enlabel { display: flex; align-items: center; gap: 6px; margin-left: 12px; white-space: nowrap;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 2px; color: var(--text-dim); }
.enlabel b { font-family: var(--font-num); font-size: 24px; color: #9fd8f5; letter-spacing: 0; }
.enlabel.zero b { color: #6b7480; }
.crystals.short .crystal { filter: brightness(1.5) saturate(2.2); }
.crystals.short .enlabel b { color: #ff8f6a; }
.toast.warn { color: #ffb08a; }

/* ============================================================
   闯关模式
   ============================================================ */
.dialog.campaignpanel { width: 1180px; max-width: 92vw; max-height: 92vh; overflow-y: auto; padding: 30px 44px 34px; }

/* 顶部状态条 */
.runbar { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 4px 0 20px; font-size: 15px; letter-spacing: 1px; }
.rbdot { color: var(--text-dim); }
.rbdot.hero { color: var(--gold-hi); font-family: var(--font-title); font-size: 19px; letter-spacing: 4px; }
.rbdot.theme { color: #cfc3a8; }
.rbdot.hp { color: #e08a8a; }
.rbdot.hp.low { color: #ff6b6b; text-shadow: 0 0 12px rgba(255,80,80,.6); }
.rbdot.deck { color: var(--energy-glow); }

.runhint { text-align: center; font-size: 15px; letter-spacing: 2px; color: var(--parchment); margin: 6px 0 20px; }
.runhint.unlock { color: var(--gold-hi); font-size: 17px; letter-spacing: 3px;
  text-shadow: 0 0 16px rgba(232,201,118,.5); }

/* 继续上一局 */
.runresume { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px; margin-bottom: 6px; border: 1px solid rgba(201,162,75,.4); border-radius: 6px;
  background: linear-gradient(180deg, rgba(44,33,20,.55), rgba(12,9,6,.55)); }
.rrname { font-family: var(--font-title); font-size: 24px; letter-spacing: 5px; color: var(--gold-hi); }

/* 选角色 */
.runheros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
.runhero-card { position: relative; border: 1px solid rgba(201,162,75,.3); border-radius: 6px;
  background: linear-gradient(180deg, #1a1410, #0a0806); overflow: hidden; cursor: pointer;
  transition: transform .14s, border-color .14s, box-shadow .14s; }
.runhero-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 0 22px rgba(201,162,75,.3); }
.runhero-card .hpic { height: 150px; border-radius: 0; }
.rhinfo { padding: 10px 10px 14px; text-align: center; }
.rhname { font-family: var(--font-title); font-size: 20px; letter-spacing: 4px; color: var(--gold-hi); }
.rhtag { font-size: 12px; color: #cfc3a8; margin-top: 4px; }
.rhsub { font-size: 12px; color: var(--text-dim); margin-top: 8px; letter-spacing: 1px; }
.runhero-card.locked { cursor: not-allowed; filter: grayscale(1) brightness(.5); }
.runhero-card.locked:hover { transform: none; border-color: rgba(201,162,75,.3); box-shadow: none; }

/* 路线图 */
.runtrack { display: flex; align-items: stretch; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 6px 0 26px; }
.runnode { position: relative; width: 118px; padding: 13px 6px 11px; text-align: center; border-radius: 6px;
  border: 1px solid rgba(201,162,75,.22); background: linear-gradient(180deg, #16120d, #0a0806);
  transition: border-color .14s, box-shadow .14s, transform .14s; }
.rnicon { font-size: 26px; line-height: 1.1; color: var(--text-dim); }
.rnname { margin-top: 6px; font-size: 15px; letter-spacing: 2px; color: #cfc3a8; }
.rnsub { margin-top: 4px; font-size: 11px; color: var(--text-dim); }
.runnode.done { opacity: .5; }
.runnode.done .rnicon { color: #6d9b3e; }
.runnode.now { border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 0 26px rgba(201,162,75,.35); background: linear-gradient(180deg, #2c2114, #120d08); }
.runnode.now .rnicon { color: var(--gold-hi); }
.runnode.now .rnname { color: #fff6d4; }
.runnode.todo { opacity: .72; }
.runnode.elite .rnicon { color: #b07ce0; }
.runnode.boss { border-color: rgba(168,50,50,.5); }
.runnode.boss .rnicon { color: #e07070; }
.runnode.boss.now { border-color: #c0524a; box-shadow: 0 0 30px rgba(192,82,74,.45); }
.rndone { position: absolute; right: 6px; top: 4px; font-size: 13px; color: #6d9b3e; }

/* 休息处 */
.restopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.restopt { padding: 26px 18px; text-align: center; cursor: pointer; border-radius: 6px;
  border: 1px solid rgba(201,162,75,.3); background: linear-gradient(180deg, #1a1410, #0a0806);
  transition: transform .14s, border-color .14s, box-shadow .14s; }
.restopt:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 0 24px rgba(201,162,75,.3); }
.roicon { font-size: 34px; color: var(--gold-hi); }
.roname { margin-top: 12px; font-family: var(--font-title); font-size: 22px; letter-spacing: 4px; color: #fff6d4; }
.rodesc { margin-top: 8px; font-size: 13px; color: var(--text-dim); line-height: 1.7; }

/* 结算 */
.runend { text-align: center; padding: 26px 0 10px; }
.rebanner { font-family: var(--font-title); font-size: 84px; letter-spacing: 20px; line-height: 1; }
.runend.win .rebanner { color: var(--gold-hi); text-shadow: 0 0 40px rgba(232,201,118,.6); }
.runend.lose .rebanner { color: #8a4a4a; text-shadow: 0 0 30px rgba(120,40,40,.5); }
.retext { margin-top: 16px; font-size: 16px; letter-spacing: 2px; color: var(--parchment); }
.retext.small { margin-top: 6px; font-size: 13px; color: var(--text-dim); }