/* 主样式表（游戏名见 js/brand.js） */
:root {
  --bg: #08060d;
  --bg2: #0d0a15;
  --panel: #120e1c;
  --panel2: #191324;
  --line: #2a2138;
  --line2: #3a2f4f;
  --text: #e9e3f2;
  --muted: #8e85a3;
  --gold: #e9c27b;
  --gold-d: #a8843f;
  --soul: #8ad7ff;
  --red: #e2564f;
  --green: #6fce8e;
  --c-common: #6f7a8c;
  --c-rare: #4a9de8;
  --c-epic: #a86bff;
  --c-legend: #ffb545;
  --radius: 10px;
  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --serif: "Songti SC", "SimSun", Georgia, serif;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  overflow: hidden;
  user-select: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 600px at 22% 8%, rgba(96, 52, 158, .28), transparent 62%),
    radial-gradient(700px 500px at 88% 92%, rgba(160, 96, 40, .16), transparent 65%),
    linear-gradient(180deg, #0a0712, #07050c 60%, #050409);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- 顶栏 ---------- */
#topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(24, 17, 36, .92), rgba(13, 10, 21, .85));
  backdrop-filter: blur(8px);
}

.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 4px;
  font-weight: 700;
  background: linear-gradient(180deg, #ffe9b8, #c99a45 65%, #8a6425);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(233, 194, 123, .25);
}
.brand span {
  font-size: 9px;
  letter-spacing: 3px;
  color: #6b5f84;
}

.res { display: flex; gap: 26px; }
.res-item { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.res-item .lbl { font-size: 10px; color: var(--muted); letter-spacing: .5px; }
.res-item b { font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600; }
.res-item b.gold { color: var(--gold); }
.res-item b.soul { color: var(--soul); }

/* ---------- 布局 ---------- */
main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 428px;
  min-height: 0;
}

/* ---------- 战场 ---------- */
#stage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 22px 18px;
  min-height: 0;
  overflow: hidden;
}

.stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.zone-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 2px;
  color: #d8cfe9;
}
.zone-title .progress {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.retreat {
  font-size: 11px;
  color: #ffb3ac;
  border: 1px solid rgba(226, 86, 79, .4);
  background: rgba(226, 86, 79, .1);
  padding: 3px 10px;
  border-radius: 20px;
  animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%, 100% { opacity: .65 } 50% { opacity: 1 } }

.click-stat {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .5px;
}
.click-stat b { color: #d9c9a0; font-size: 13px; font-variant-numeric: tabular-nums; margin-left: 2px; }

.enemy {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(58, 47, 79, .6);
  background:
    radial-gradient(60% 55% at 50% 62%, rgba(88, 44, 130, .30), transparent 70%),
    linear-gradient(180deg, #100b1a 0%, #0a0712 70%, #07050c 100%);
}

.enemy::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
  pointer-events: none;
}

.enemy-glow {
  position: absolute;
  width: 62%;
  height: 68%;
  bottom: 12%;
  border-radius: 50%;
  filter: blur(70px);
  background: radial-gradient(circle, rgba(150, 80, 220, .45), transparent 68%);
  transition: background .4s;
  pointer-events: none;
}
.enemy.boss .enemy-glow { background: radial-gradient(circle, rgba(220, 70, 60, .5), transparent 68%); }

#ui-enemy-img {
  position: relative;
  height: 84%;
  width: auto;
  max-width: 72%;
  object-fit: contain;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .65));
  transition: filter .12s;
  animation: breathe 4.2s ease-in-out infinite;
  pointer-events: none;
}
.enemy.boss #ui-enemy-img { filter: drop-shadow(0 0 22px rgba(226, 86, 79, .55)) drop-shadow(0 18px 26px rgba(0,0,0,.6)); }
@keyframes breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.018) translateY(-3px) } }

.enemy.hit #ui-enemy-img { filter: brightness(2.2) saturate(.4); animation: none; transform: scale(.985) translateX(3px); }
.enemy.dead #ui-enemy-img { animation: die .32s ease-in forwards; }
@keyframes die {
  0% { opacity: 1; transform: scale(1) }
  100% { opacity: 0; transform: scale(1.16) rotate(4deg) }
}

.enemy-plate {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(460px, 78%);
  padding: 9px 14px 11px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 13, 30, .88), rgba(10, 7, 17, .94));
  border: 1px solid rgba(78, 60, 104, .7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
}

.enemy-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #ded4ef;
  margin-bottom: 7px;
  text-shadow: 0 2px 8px #000;
}
.boss-tag {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 1px;
  color: #ffd9d5;
  background: rgba(226, 86, 79, .85);
  padding: 1px 6px;
  border-radius: 3px;
}

/* 区域词缀 */
.affix-tag {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 1px;
  color: #ffe6a8;
  background: linear-gradient(180deg, rgba(180, 130, 40, .9), rgba(120, 80, 20, .9));
  padding: 1px 6px;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(233, 194, 123, .35);
}
.affix-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid rgba(233, 194, 123, .38);
  background: rgba(60, 44, 14, .55);
  color: #d9cba8;
  animation: pulse 3s ease-in-out infinite;
}
.affix-bar b { color: #ffd784; letter-spacing: 1px; }
.affix-bar span { color: #b9a988; }

.hpbar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: #1a1224;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
  overflow: hidden;
  border: 1px solid rgba(90, 70, 120, .35);
}
#ui-hpfill {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, #e0605a, #9c2b2b);
  box-shadow: 0 0 14px rgba(226, 86, 79, .5);
  transition: width .13s linear;
}
.hpbar span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
}

.boss-timer {
  margin-top: 7px;
  height: 4px;
  border-radius: 2px;
  background: #2a1e18;
  overflow: hidden;
}
.boss-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffb545, #e2564f); transition: width .2s linear; }

.click-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(180, 160, 210, .35);
  pointer-events: none;
}

#fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ---------- 伤害飘字：Balatro 式弹跳上浮 + RO 式暴击 + 粒子/震屏光污染 ---------- */
.dmg {
  position: absolute;
  font-size: 22px;
  font-weight: 800;
  color: #fff8ec;
  -webkit-text-stroke: 1.2px rgba(30, 10, 0, .55);
  text-shadow: 0 2px 4px #000, 0 0 10px rgba(255, 170, 60, .95), 0 0 22px rgba(255, 120, 30, .6);
  animation: dmgFloat .95s cubic-bezier(.18, .85, .3, 1) forwards;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(12, 5, 18, .34);
  z-index: 3;
  will-change: transform, opacity;
}
/* 弹跳上浮 + 弧形漂移 + 轻微旋转 */
@keyframes dmgFloat {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.45) rotate(calc(var(--rot) * 2)) }
    12% { opacity: 1; transform: translate(-50%, -12px) scale(1.22) rotate(var(--rot)) }
  22%  { transform: translate(-50%, -18px) scale(.96) rotate(var(--rot)) }
  32%  { transform: translate(-50%, -22px) scale(1.04) rotate(var(--rot)) }
  55%  { transform: translate(calc(-50% + var(--dx) * .75), -48px) scale(1) rotate(var(--rot)) }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -86px) scale(.92) rotate(var(--rot)) }
}

/* 自动点击/剑雨：小号 */
.dmg.auto { font-size: 15px; opacity: .88; -webkit-text-stroke-width: 1px; }

/* 英雄出手伤害：冷蓝青色，从英雄位置朝敌人方向飘出（字号由伤害量级动态设定） */
.dmg.hero {
  font-weight: 700;
  color: #bfe9ff;
  -webkit-text-stroke: .8px rgba(6, 30, 56, .78);
  text-shadow: 0 2px 5px #000, 0 0 9px rgba(110, 200, 255, .95), 0 0 22px rgba(60, 150, 255, .6);
  background: rgba(10, 26, 44, .28);
  padding: 0 5px;
  letter-spacing: 0;
  animation: dmgHero .9s cubic-bezier(.2, .9, .3, 1) forwards;
}
@keyframes dmgHero {
  0%   { opacity: 0; transform: translate(-50%, 4px) scale(.45) rotate(var(--rot)) }
  14%  { opacity: 1; transform: translate(-50%, -6px) scale(1.14) rotate(var(--rot)) }
  30%  { opacity: .96; transform: translate(-50%, -10px) scale(1) rotate(var(--rot)) }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -40px)) scale(.86) rotate(var(--rot)) }
}

/* 暴击：大号金橙 + 旋转光芒 + 扩散圆环 */
.dmg.crit {
  font-size: 34px;
  color: #ffeaa8;
  -webkit-text-stroke: 1.6px rgba(88, 22, 0, .75);
  text-shadow: 0 3px 8px #000, 0 0 16px rgba(255, 205, 70, 1), 0 0 38px rgba(255, 130, 20, .9), 0 0 70px rgba(255, 80, 0, .55);
  animation: dmgCrit 1.1s cubic-bezier(.14, .9, .3, 1) forwards;
  z-index: 5;
}
@keyframes dmgCrit {
  0%   { opacity: 0; transform: translate(-50%, 4px) scale(.3) rotate(-6deg) }
  10%  { opacity: 1; transform: translate(-50%, -10px) scale(1.5) rotate(2deg) }
  20%  { transform: translate(-50%, -18px) scale(1.06) rotate(-1deg) }
  30%  { transform: translate(-50%, -22px) scale(1.12) rotate(0deg) }
  55%  { transform: translate(calc(-50% + var(--dx) * .7), -52px) scale(1) }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -92px) scale(.94) }
}
/* 暴击光芒（旋转星芒） */
.dmg.crit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 224, 130, .5) 0deg 9deg, transparent 9deg 26deg);
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 34%, transparent 62%);
  mask: radial-gradient(circle, transparent 26%, #000 34%, transparent 62%);
  animation: critRays .7s ease-out forwards;
  pointer-events: none;
}
@keyframes critRays {
  0% { opacity: .9; transform: translate(-50%, -50%) rotate(0deg) scale(.4) }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(48deg) scale(1.25) }
}
/* 暴击圆环 */
.dmg.crit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255, 226, 140, .95);
  box-shadow: 0 0 18px rgba(255, 200, 90, .8), inset 0 0 12px rgba(255, 200, 90, .5);
  transform: translate(-50%, -50%);
  animation: critRing .5s cubic-bezier(.1, .7, .3, 1) forwards;
  pointer-events: none;
}
@keyframes critRing {
  0% { opacity: 1; width: 26px; height: 26px; border-width: 4px }
  100% { opacity: 0; width: 150px; height: 150px; border-width: 1px }
}

/* 击杀：红橙巨型 */
.dmg.kill {
  font-size: 40px;
  color: #ffd2b0;
  -webkit-text-stroke: 1.8px rgba(90, 12, 0, .8);
  text-shadow: 0 3px 10px #000, 0 0 18px rgba(255, 120, 40, 1), 0 0 44px rgba(255, 60, 10, .9), 0 0 90px rgba(255, 40, 0, .5);
  animation: dmgKill 1s cubic-bezier(.14, .9, .3, 1) forwards;
  z-index: 6;
}
@keyframes dmgKill {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.4) }
  10%  { opacity: 1; transform: translate(-50%, -14px) scale(1.6) }
  22%  { transform: translate(-50%, -24px) scale(1.05) }
  34%  { transform: translate(-50%, -28px) scale(1.14) }
  60%  { transform: translate(calc(-50% + var(--dx) * .6), -56px) scale(1) }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -96px) scale(.9) }
}
.dmg.kill::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 4px solid rgba(255, 150, 90, .95);
  box-shadow: 0 0 26px rgba(255, 110, 40, .9), inset 0 0 16px rgba(255, 110, 40, .6);
  transform: translate(-50%, -50%);
  animation: critRing .62s cubic-bezier(.1, .7, .3, 1) forwards;
  pointer-events: none;
}

/* 粒子爆发 */
.burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 4; }
.burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sz, 4px);
  height: var(--sz, 4px);
  margin-left: calc(var(--sz, 4px) / -2);
  margin-top: calc(var(--sz, 4px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 15%, rgba(255, 198, 90, .95) 45%, rgba(255, 120, 30, 0) 72%);
  box-shadow: 0 0 10px rgba(255, 190, 90, .95);
  animation: sparkFly .6s ease-out forwards;
}
.burst.big i {
  background: radial-gradient(circle, #fff 15%, rgba(255, 150, 70, .95) 45%, rgba(255, 60, 20, 0) 74%);
  box-shadow: 0 0 14px rgba(255, 130, 50, .95);
}
@keyframes sparkFly {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.15) }
  70% { opacity: .9 }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.25) }
}

/* 震屏 */
#enemy.shake { animation: shakeX .22s linear; }
#enemy.shake-hard { animation: shakeHard .36s cubic-bezier(.36, .07, .19, .97); }
@keyframes shakeX {
  0%, 100% { transform: translate(0, 0) }
  25% { transform: translate(-3px, 1px) }
  50% { transform: translate(2px, -2px) }
  75% { transform: translate(-2px, -1px) }
}
@keyframes shakeHard {
  0%, 100% { transform: translate(0, 0) scale(1) }
  15% { transform: translate(-7px, 4px) scale(1.012) }
  30% { transform: translate(6px, -5px) scale(.99) }
  45% { transform: translate(-5px, -3px) scale(1.008) }
  60% { transform: translate(4px, 3px) scale(.995) }
  80% { transform: translate(-2px, -1px) scale(1.003) }
}

/* ---------- 出战阵型（散布在 BOSS 周边） ---------- */
.stage-stats { display: flex; align-items: center; gap: 14px; }
.party-count { font-size: 11px; color: var(--muted); letter-spacing: .5px; }
.party-count b { color: var(--gold); font-variant-numeric: tabular-nums; }

#party-layer { position: absolute; inset: 0; pointer-events: none; }

.pcard {
  --sc: 1;
  position: absolute;
  width: 52px;
  text-align: center;
  transform: translateX(-50%) scale(var(--sc));
  transition: transform .13s ease-out;
  animation: dealIn .35s ease-out;
}
@keyframes dealIn { from { opacity: 0; transform: translateX(-50%) scale(.6) } to { opacity: 1; transform: translateX(-50%) scale(var(--sc)) } }
.pcard img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
  transition: filter .13s;
  pointer-events: none;
}
.pcard.flip img { transform: scaleX(-1); }
.pcard .plv {
  position: absolute;
  top: 0;
  left: -2px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  background: rgba(10, 6, 16, .88);
  border: 1px solid rgba(233, 194, 123, .45);
  border-radius: 4px;
  padding: 0 3px;
  line-height: 14px;
}

/* 攻击：按站位朝 BOSS 突进 */
.pcard.attack.sd-l { transform: translateX(-50%) scale(var(--sc)) translateX(13px); }
.pcard.attack.sd-r { transform: translateX(-50%) scale(var(--sc)) translateX(-13px); }
.pcard.attack.sd-t { transform: translateX(-50%) scale(var(--sc)) translateY(11px); }
.pcard.attack img { filter: drop-shadow(0 0 10px rgba(255, 210, 130, .85)); }

/* 飞行的攻击弹 */
.slash {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 10%, rgba(255, 196, 110, .75) 45%, rgba(255, 140, 40, 0) 72%);
  box-shadow: 0 0 12px rgba(255, 200, 120, .9);
  pointer-events: none;
  animation: slashFly .45s cubic-bezier(.4, 0, .7, 1) forwards;
}
@keyframes slashFly {
  0% { transform: translate(0, 0) scale(.4); opacity: 1; }
  70% { opacity: .85; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0; }
}

/* 连击指示 */
.combo {
  position: absolute;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffd9a0;
  text-shadow: 0 2px 6px #000, 0 0 14px rgba(255, 170, 60, .8);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.combo.pop { animation: comboPop .18s ease-out; }
@keyframes comboPop { 0% { transform: translateX(-50%) scale(1.35) } 100% { transform: translateX(-50%) scale(1) } }

/* ---------- 技能 ---------- */
.skills {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.skill {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: linear-gradient(180deg, #1b1428, #120d1c);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, transform .1s;
}
.skill:hover { border-color: #6b52a0; }
.skill:active { transform: scale(.985); }
.skill .ico { font-size: 19px; width: 26px; text-align: center; filter: saturate(1.2); }
.skill .txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.skill .nm { font-size: 13px; letter-spacing: 1px; color: #e4d9f7; }
.skill .ds { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill .cd-mask {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 10, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #cfc4e4;
  letter-spacing: .5px;
}
.skill.active { border-color: #ffb545; box-shadow: 0 0 18px rgba(255, 181, 69, .25) inset; }
.skill.locked { opacity: .38; cursor: not-allowed; }
.skill.locked .ds { color: #ff9d92; }
.skill.flash { animation: skillFlash .6s ease-out; }
@keyframes skillFlash {
  0% { box-shadow: 0 0 0 2px rgba(255, 181, 69, .9), 0 0 26px rgba(255, 181, 69, .5); }
  100% { box-shadow: 0 0 0 0 rgba(255, 181, 69, 0), 0 0 0 rgba(255, 181, 69, 0); }
}

/* ---------- 卡组（槽位提示） ---------- */
.deck-hint {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--soul);
  letter-spacing: .5px;
  padding: 5px 9px;
  margin-bottom: 8px;
  border-radius: 7px;
  border: 1px solid rgba(138, 215, 255, .25);
  background: rgba(138, 215, 255, .07);
}
.hero.slot-locked { opacity: .38; }
.hero.slot-locked .buy .cost { color: var(--soul); }

/* ---------- 叙事横幅（不遮挡、不拦截点击） ---------- */.lore-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;          /* 绝不阻拦点击打怪 */
  text-align: center;
  padding: 10px 22px 11px;
  border-radius: 10px;
  border: 1px solid rgba(168, 140, 220, .28);
  background: linear-gradient(180deg, rgba(18, 12, 30, .82), rgba(12, 8, 22, .55));
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .45s ease;
  max-width: 74%;
}
.lore-banner.show { opacity: 1; }
.lb-name {
  font-size: 17px;
  letter-spacing: 5px;
  color: #e9c27b;
  text-shadow: 0 0 16px rgba(233, 194, 123, .45), 0 2px 6px #000;
}
.lb-verse {
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: #a89ec0;
}
.lb-boss {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(226, 86, 79, .25);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-boss b { font-size: 12.5px; letter-spacing: 2px; color: #ff9d94; font-weight: 600; }
.lb-boss i { font-style: normal; font-size: 10.5px; color: #b08c98; letter-spacing: .6px; }

/* ---------- 英雄羁绊 ---------- */
.bond-box, .oath-box {
  flex: 0 0 auto;
  margin-bottom: 8px;
  padding: 8px 10px 9px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, #171122, #110d1a);
}
.oath-box { border-color: rgba(168, 107, 255, .28); background: linear-gradient(100deg, #1b1329, #110d1a); }

.bond-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #cbbde1;
  margin-bottom: 7px;
}
.bond-head b { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 12px; }
.bond-head i { font-style: normal; font-size: 9.5px; color: var(--muted); margin-left: 5px; }

.bond-list { display: flex; flex-direction: column; gap: 3px; }
.bond-row {
  display: grid;
  grid-template-columns: 34px auto 1fr auto;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: #b6a8cf;
}
.bond-row .bn { color: #ddd2ee; }
.bond-row .bdots { display: flex; gap: 2px; }
.bond-row .bdots i {
  width: 7px; height: 7px; border-radius: 2px;
  background: #2a2138; display: block;
}
.bond-row .bdots i.on { background: var(--bc, #6f7a8c); box-shadow: 0 0 6px var(--bc, #6f7a8c); }
.bond-row .bcnt { color: var(--muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.bond-row .bmult { color: #8ad7ff; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.bond-row.dim { opacity: .45; }
.bond-row.halved .bmult { color: #7a6a8f; text-decoration: line-through; }

/* ---------- 阵营誓约 ---------- */
.oath-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.oath-empty { grid-column: 1 / -1; font-size: 10px; color: var(--muted); text-align: center; padding: 4px; }
.oath-btn {
  --oc: #8e85a3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px;
  border-radius: 7px;
  border: 1px solid var(--line2);
  background: #1a1426;
  color: #cbbde1;
  font-family: var(--font);
  font-size: 10.5px;
  cursor: pointer;
  transition: all .13s;
}
.oath-btn .on { color: #e4d9f7; }
.oath-btn .ob { font-size: 11.5px; color: var(--oc); font-weight: 700; font-variant-numeric: tabular-nums; }
.oath-btn .oc { font-size: 9px; color: var(--muted); }
.oath-btn:hover { border-color: var(--oc); }
.oath-btn.active {
  border-color: var(--oc);
  background: linear-gradient(180deg, #241a38, #161022);
  box-shadow: 0 0 14px color-mix(in srgb, var(--oc) 35%, transparent), inset 0 0 12px rgba(0,0,0,.4);
}
.oath-btn.active .on { color: var(--oc); }
.oath-btn.active .ob { color: #fff; }

/* ---------- 强化工坊 ---------- */
.boost-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.boost-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, #171122, #110d1a);
}
.boost-stats span { font-size: 10px; color: var(--muted); }
.boost-stats b { font-size: 13px; color: #e4d6f7; font-variant-numeric: tabular-nums; }

.sec-title {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 2px;
  color: #b9a9d4;
  margin: 12px 0 7px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sec-title i { font-style: normal; font-family: var(--font); font-size: 10px; color: var(--muted); letter-spacing: 0; }
.sec-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

#lab-list, #boost-list { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }

.up-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, #171122, #110d1a);
  transition: border-color .15s, background .15s;
}
.up-row.affordable { border-color: rgba(233, 194, 123, .38); background: linear-gradient(100deg, #1d1529, #130e1e); }
.up-row.maxed { opacity: .55; }
.u-info { min-width: 0; }
.u-name { font-size: 12.5px; color: #ddd2ee; margin-bottom: 2px; }
.u-name .lv { font-style: normal; font-size: 10px; color: var(--gold); margin-left: 4px; font-variant-numeric: tabular-nums; }
.u-desc { font-size: 10.5px; color: var(--muted); }
.u-buy {
  min-width: 88px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid #4b3a68;
  background: linear-gradient(180deg, #2a2040, #1a1330);
  color: #d8c8f2;
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: all .13s;
}
.u-buy small { font-size: 9px; color: #9a8cb5; letter-spacing: .5px; }
.u-buy .cost { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.u-buy:hover:not(:disabled) { border-color: var(--gold-d); box-shadow: 0 0 14px rgba(233, 194, 123, .18); }
.u-buy:disabled { opacity: .42; cursor: not-allowed; }
.up-row.maxed .u-buy .cost { color: #8ad7ff; }

/* 成就 */
.achv-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.achv {
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #120d1c;
  opacity: .5;
}
.achv.done { opacity: 1; border-color: rgba(233, 194, 123, .45); background: linear-gradient(100deg, #241a30, #150f22); }
.achv .an { display: block; font-size: 11.5px; color: #cfc2e6; margin-bottom: 1px; }
.achv.done .an { color: var(--gold); }
.achv .ad { display: block; font-size: 9.5px; color: var(--muted); }

/* ---------- 侧栏 ---------- */
#panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20, 14, 30, .96), rgba(10, 7, 17, .98));
}

#tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
}
#tabs button {
  position: relative;
  padding: 12px 4px;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color .15s;
}
#tabs button:hover { color: #c8b9e2; }
#tabs button.active { color: var(--gold); }
/* 渐进披露：未解锁页签压暗且不可点 */
#tabs button.tab-locked {
  color: #4a415c;
  cursor: not-allowed;
  opacity: .45;
}
#tabs button.tab-locked::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: #4a415c;
  vertical-align: middle;
}

/* 本局契约卡片 */
.contract-list { display: flex; flex-direction: column; gap: 8px; }
.contract-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--line2);
  background: linear-gradient(100deg, #1d1529, #130e1e);
  color: #ddd2ee;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: all .14s;
}
.contract-card .cn { font-size: 13px; color: var(--gold); letter-spacing: 1px; }
.contract-card .cd { font-size: 11px; color: var(--muted); }
.contract-card:hover { border-color: var(--gold-d); box-shadow: 0 0 16px rgba(233, 194, 123, .18); }
.contract-card.active { border-color: var(--gold); box-shadow: 0 0 18px rgba(233, 194, 123, .25); }

/* 祭坛页：当前契约 */
.contract-cur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(168, 107, 255, .3);
  background: rgba(70, 36, 110, .22);
  font-size: 10.5px;
}
.contract-cur span { color: var(--muted); }
.contract-cur b { color: #d8b8ff; font-weight: 600; text-align: right; }
#tabs button.active::after {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
#tabs button i {
  font-style: normal;
  font-size: 9px;
  color: var(--muted);
  margin-left: 3px;
}

.tab-pane { display: none; flex-direction: column; min-height: 0; flex: 1 1 auto; padding: 12px 14px 14px; }
.tab-pane.active { display: flex; }
/* 强化页内容较长：整页滚动 */
#tab-boost { overflow-y: auto; overflow-x: hidden; }
#tab-boost > .pane-head {
  position: sticky;
  top: -12px;
  z-index: 2;
  margin: -12px -14px 0;
  padding: 12px 14px 10px;
  background: linear-gradient(180deg, #140e1e 72%, rgba(20, 14, 30, 0));
}

.pane-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
}
.pane-title { font-family: var(--serif); font-size: 14px; letter-spacing: 1.5px; color: #cdc0e2; }
.pane-title i { font-style: normal; font-family: var(--font); font-size: 11px; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.hint { font-size: 10px; color: var(--muted); }

.seg { display: flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; }
.seg button {
  padding: 4px 10px;
  font-size: 11px;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
}
.seg button + button { border-left: 1px solid var(--line2); }
.seg button.active { background: rgba(233, 194, 123, .14); color: var(--gold); }

/* ---------- 卡组 ---------- */
.roster { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 7px; padding-right: 4px; }

.hero {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, #171122, #110d1a);
  transition: border-color .15s, background .15s;
}
.hero.affordable { border-color: rgba(233, 194, 123, .38); background: linear-gradient(100deg, #1d1529, #130e1e); }
.hero.locked { opacity: .45; }
.hero.maxlevel { border-color: rgba(138, 215, 255, .25); }

.hero .pic {
  width: 44px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at 50% 30%, #241a38, #0d0916);
  border: 1px solid var(--line2);
}
.hero .pic img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.hero .pic::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .6);
}

.hero .info { min-width: 0; }
.hero .nm {
  font-size: 12.5px;
  color: #ddd2ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.hero .meta { display: flex; gap: 10px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero .meta b { color: #b6a8cf; font-weight: 600; }
.hero .meta .lv { color: var(--gold); }

.buy {
  min-width: 96px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid #4b3a68;
  background: linear-gradient(180deg, #2a2040, #1a1330);
  color: #d8c8f2;
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all .13s;
}
.buy small { font-size: 9px; color: #9a8cb5; letter-spacing: .5px; }
.buy .cost { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.buy:hover:not(:disabled) { border-color: var(--gold-d); box-shadow: 0 0 14px rgba(233, 194, 123, .18); }
.buy:disabled { opacity: .42; cursor: not-allowed; border-color: var(--line2); }
.buy:disabled .cost { color: #8d7f9c; }
.buy.unlock .cost { color: #8ad7ff; }

/* 稀有度描边（仅卡组行与图鉴格） */
.hero.r-common, .cx.r-common { border-left: 2px solid var(--c-common) !important; }
.hero.r-rare, .cx.r-rare { border-left: 2px solid var(--c-rare) !important; }
.hero.r-epic, .cx.r-epic { border-left: 2px solid var(--c-epic) !important; }
.hero.r-legend, .cx.r-legend { border-left: 2px solid var(--c-legend) !important; box-shadow: inset 0 0 24px rgba(255, 181, 69, .06); }

/* ---------- 图鉴 ---------- */
.progress-line { height: 3px; background: #1d1529; border-radius: 2px; overflow: hidden; margin-bottom: 10px; flex: 0 0 auto; }
#ui-codex-bar { height: 100%; width: 0; background: linear-gradient(90deg, #a86bff, var(--gold)); transition: width .3s; }

.codex {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  padding-right: 4px;
  align-content: start;
}
.cx {
  position: relative;
  padding-top: 133.33%;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(180deg, #191226, #0c0914);
  border: 1px solid var(--line);
}
.cx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.cx .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 4px 3px;
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
  color: #d7cbe8;
  background: linear-gradient(180deg, transparent, rgba(6, 4, 10, .92));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx.locked img { filter: brightness(0) opacity(.55); }
.cx.locked .cap { color: #5c5270; }
.cx.locked::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-family: var(--serif);
  color: rgba(140, 120, 180, .5);
  padding-bottom: 16px;
}
.cx.new { animation: popIn .4s ease-out; }
@keyframes popIn { 0% { transform: scale(.86); filter: brightness(2) } 100% { transform: scale(1); filter: none } }

/* ---------- 祭坛 ---------- */
#altar-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.altar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, #171122, #110d1a);
}
.altar .an { font-size: 12.5px; color: #ddd2ee; margin-bottom: 3px; }
.altar .ad { font-size: 10.5px; color: var(--muted); }
.altar .al { font-size: 10px; color: var(--soul); margin-top: 3px; }

.btn-soul {
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid #3f6b86;
  background: linear-gradient(180deg, #14303f, #0d2130);
  color: #b9e8ff;
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
}
.btn-soul small { font-size: 9px; color: #6fa3bd; }
.btn-soul:disabled { opacity: .4; cursor: not-allowed; }
.btn-soul:hover:not(:disabled) { box-shadow: 0 0 14px rgba(138, 215, 255, .25); }

.prestige-card {
  flex: 0 0 auto;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(168, 107, 255, .3);
  background: linear-gradient(160deg, rgba(70, 36, 110, .3), rgba(14, 10, 22, .9));
}
.prestige-head { font-family: var(--serif); font-size: 14px; letter-spacing: 2px; color: #e3d5f8; margin-bottom: 10px; }
.prestige-head span { font-family: var(--font); font-size: 10px; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.prestige-body { display: flex; gap: 22px; margin-bottom: 12px; }
.prestige-body div { display: flex; flex-direction: column; gap: 3px; }
.prestige-body span { font-size: 10px; color: var(--muted); }
.prestige-body b { font-size: 16px; font-variant-numeric: tabular-nums; }

.btn-prestige {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(168, 107, 255, .55);
  background: linear-gradient(180deg, #4a2a75, #2b1747);
  color: #f0e4ff;
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all .15s;
}
.btn-prestige:hover:not(:disabled) { box-shadow: 0 0 22px rgba(168, 107, 255, .38); }
.btn-prestige:disabled { opacity: .4; cursor: not-allowed; }
.prestige-tip { margin-top: 9px; font-size: 10px; color: var(--muted); line-height: 1.5; }

/* ---------- 设置 ---------- */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(42, 33, 56, .7);
  font-size: 12px;
  color: #c0b3d6;
}
.setting-row b { color: var(--gold); font-variant-numeric: tabular-nums; }
.btn-mini {
  padding: 6px 12px;
  margin-left: 6px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: #1a1426;
  color: #cbbde1;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font);
}
.btn-mini:hover { border-color: #6b52a0; }
.btn-mini.danger { color: #ff9d92; border-color: rgba(226, 86, 79, .4); }
.foot { margin-top: 18px; font-size: 10px; line-height: 1.7; color: #5f5573; }

/* ---------- 提示浮层 ---------- */
#toasts {
  position: fixed;
  left: 22px;
  bottom: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 9px;
  border: 1px solid rgba(233, 194, 123, .45);
  background: linear-gradient(100deg, rgba(38, 26, 58, .97), rgba(16, 11, 26, .97));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  animation: slideIn .35s ease-out, fadeOut .5s ease-in 2.6s forwards;
  max-width: 300px;
}
.toast img { width: 34px; height: 44px; object-fit: cover; object-position: 50% 10%; border-radius: 4px; }
.toast .tt { font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.toast .tn { font-size: 12px; color: #e6dcf5; }
@keyframes slideIn { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes fadeOut { to { opacity: 0; transform: translateX(20px) } }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 3, 8, .76);
  backdrop-filter: blur(4px);
  animation: fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal.hidden, .hidden { display: none !important; }
.modal-box {
  width: min(420px, 88vw);
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: linear-gradient(170deg, #1c142c, #0e0a17);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.modal-box h2 { font-family: var(--serif); font-size: 17px; letter-spacing: 2px; color: var(--gold); margin-bottom: 12px; }
.modal-box p { font-size: 12.5px; line-height: 1.75; color: #c8bcdd; }
.modal-box p b { color: var(--gold); font-variant-numeric: tabular-nums; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-actions button {
  padding: 8px 18px;
  border-radius: 7px;
  border: 1px solid var(--line2);
  background: #221a34;
  color: #d3c6e8;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
}
.modal-actions button.primary { border-color: var(--gold-d); background: linear-gradient(180deg, #4a3a1c, #2c2210); color: #ffe4b0; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c2340; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3f3159; }

/* ---------- 响应式 ---------- */
@media (max-width: 1320px) {
  main { grid-template-columns: minmax(0, 1fr) 392px; }
  .res { gap: 16px; }
}

@media (max-width: 1100px) {
  main { grid-template-columns: minmax(0, 1fr) 344px; }
  .res-item b { font-size: 15px; }
  .buy { min-width: 84px; }
}

@media (max-width: 860px) {
  html, body { overflow: auto; }
  #app { height: auto; min-height: 100%; }
  main { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  #stage { height: 62vh; padding: 10px 12px; }
  #panel { border-left: 0; border-top: 1px solid var(--line); height: 78vh; }
  .res { gap: 12px; }
  .res-item b { font-size: 14px; }
  .brand h1 { font-size: 17px; letter-spacing: 3px; }
  .brand span { display: none; }
  .skill .ds { display: none; }
}

/* ---------- 深渊试炼 ---------- */
.trial-hint {
  flex: 0 0 auto;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--muted);
  padding: 6px 9px;
  margin-bottom: 8px;
  border-radius: 7px;
  border: 1px solid rgba(168, 140, 220, .2);
  background: rgba(120, 90, 180, .08);
}
.trial-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.trial-card {
  flex: 0 0 auto;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, #181123, #110c1a);
}
.trial-card.done { border-color: rgba(233, 194, 123, .42); }
.tc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.tc-name { font-size: 13px; color: var(--gold); letter-spacing: 1.5px; font-weight: 600; }
.tc-tag {
  font-size: 9px; padding: 0 5px; border-radius: 3px;
  color: #c6b3e8; background: rgba(140, 110, 200, .22);
  border: 1px solid rgba(140, 110, 200, .3);
}
.tc-stars { margin-left: auto; font-size: 11px; color: var(--gold); letter-spacing: 1px; }
.tc-desc { font-size: 10.5px; color: #cfc2e2; line-height: 1.5; }
.tc-tip { margin-top: 3px; font-size: 9.5px; color: #8a7fa3; line-height: 1.45; }
.btn-trial {
  width: 100%; margin-top: 7px; padding: 6px;
  border-radius: 6px; cursor: pointer;
  border: 1px solid var(--gold-d);
  background: linear-gradient(180deg, #3a2c1a, #241a10);
  color: var(--gold); font-family: var(--font); font-size: 11px;
  letter-spacing: 1.5px; transition: all .13s;
}
.btn-trial:hover { background: linear-gradient(180deg, #4a3822, #2c2014); box-shadow: 0 0 12px rgba(233,194,123,.22); }

.trial-running {
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid rgba(233, 194, 123, .4);
  background: linear-gradient(160deg, #251a33, #140e1e);
  text-align: center;
}
.tr-name { font-size: 14px; color: var(--gold); letter-spacing: 2px; margin-bottom: 7px; }
.tr-desc { font-size: 11px; color: #cfc2e2; line-height: 1.5; }
.tr-tip { margin-top: 6px; font-size: 10px; color: #8a7fa3; }
.btn-trial-quit {
  margin-top: 12px; padding: 6px 18px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line2); background: #1c1528; color: #c9bcdd;
  font-family: var(--font); font-size: 11px;
}
.btn-trial-quit:hover { border-color: #e2564f; color: #ff9d94; }

/* 试炼进行中的 HUD（战场右上，极小、不遮挡） */
.trial-hud {
  position: absolute;
  top: 12px; right: 16px; z-index: 7;
  width: 186px; padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(233, 194, 123, .38);
  background: linear-gradient(180deg, rgba(30, 20, 12, .9), rgba(18, 12, 10, .78));
  backdrop-filter: blur(3px);
}
.th-row { display: flex; align-items: center; gap: 6px; }
.th-name { font-size: 11px; color: var(--gold); letter-spacing: 1px; }
.th-time { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; }
.th-quit {
  border: none; background: transparent; color: #7a6d8c;
  font-size: 9.5px; cursor: pointer; font-family: var(--font); padding: 0 0 0 4px;
}
.th-quit:hover { color: #ff8b82; }
.th-bar { margin-top: 6px; height: 4px; border-radius: 3px; background: #2a2136; overflow: hidden; }
.th-bar i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #e9c27b, #ffd76e); transition: width .12s linear; }
.th-goal { margin-top: 4px; font-size: 9.5px; color: #a89ec0; font-variant-numeric: tabular-nums; }

.tr-res-stars { text-align: center; font-size: 30px; letter-spacing: 6px; color: var(--gold); margin: 4px 0 10px; text-shadow: 0 0 20px rgba(233,194,123,.5); }
.tr-res-stars.fail { color: #6b5f7d; text-shadow: none; }

/* ---------- 深渊纪录 ---------- */
.rec-hint {
  flex: 0 0 auto;
  font-size: 10px; line-height: 1.55; color: var(--muted);
  padding: 6px 9px; margin-bottom: 9px; border-radius: 7px;
  border: 1px solid rgba(168, 140, 220, .18);
  background: rgba(120, 90, 180, .07);
}
.rec-sec-title {
  flex: 0 0 auto;
  font-size: 10px; letter-spacing: 2px; color: #8a7fa3;
  margin: 4px 0 6px; padding-left: 2px;
  border-left: 2px solid var(--gold-d); padding-left: 7px;
}
.rec-best, .rec-run {
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, #181123, #110c1a);
}
.rb-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 3px 0; font-size: 10.5px; color: #b6a8cf;
}
.rb-row b { color: #e6d9f7; font-variant-numeric: tabular-nums; font-weight: 600; }
.rb-row .rb-big { font-size: 17px; color: var(--gold); letter-spacing: 1px; text-shadow: 0 0 14px rgba(233,194,123,.35); }

.rec-pace { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.pace-row {
  display: grid; grid-template-columns: 52px 1fr auto;
  align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--line);
  background: #16101f;
  font-size: 10.5px;
}
.pace-row .pr-t { color: #8a7fa3; }
.pace-row .pr-z { color: #cfc2e2; }
.pace-row .pr-m { color: #5d5470; font-size: 9.5px; }
.pace-row.beat { border-color: rgba(110, 206, 142, .32); background: rgba(60, 120, 80, .1); }
.pace-row.beat .pr-m { color: #6fce8e; }
.pace-row.beat .pr-z { color: #cfeedd; }
.rec-empty { font-size: 10px; color: var(--muted); text-align: center; padding: 8px; }

/* ---------- 卡牌档案弹窗 ---------- */
.modal-box.wide { max-width: 620px; }
.cf { display: flex; gap: 16px; align-items: flex-start; }
.cf-art {
  position: relative;
  flex: 0 0 168px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(233, 194, 123, .28);
  background: radial-gradient(circle at 50% 38%, #2a2038, #120d1c);
  box-shadow: 0 0 26px rgba(0, 0, 0, .6);
}
.cf-art img { display: block; width: 100%; height: auto; }
.cf-art img.silhouette { filter: brightness(0) opacity(.55); }
.cf-lock {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: 10px; letter-spacing: 3px;
  padding: 5px 0; color: #8a7fa3;
  background: linear-gradient(180deg, transparent, rgba(10, 6, 16, .92));
}
.cf-info { flex: 1 1 auto; min-width: 0; }
.cf-name {
  font-family: var(--serif); font-size: 19px; letter-spacing: 2px;
  color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.cf-rar {
  display: inline-block; margin-top: 5px;
  font-size: 9.5px; letter-spacing: 2px;
  padding: 1px 7px; border-radius: 3px;
  border: 1px solid currentColor;
}
.cf-epi { margin-top: 7px; font-size: 11px; color: #a89ec0; letter-spacing: .5px; }
.cf-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cf-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: #8a7fa3;
  border-bottom: 1px dashed rgba(120, 105, 150, .22); padding-bottom: 3px;
}
.cf-row b { color: #d6c9ea; font-weight: 600; }

.cf-story {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 12px; line-height: 1.9; color: #c3b6d8;
  border-left: 2px solid rgba(233, 194, 123, .5);
  background: rgba(30, 22, 44, .6);
}
.cf-story.locked { border-left-color: #4a415c; color: #7a6f8e; font-style: normal; }

.cf-bond {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(168, 107, 255, .32);
  background: linear-gradient(100deg, rgba(70, 40, 110, .3), rgba(24, 16, 36, .5));
  cursor: pointer;
  transition: all .14s;
}
.cf-bond:hover { border-color: rgba(200, 150, 255, .6); box-shadow: 0 0 16px rgba(168, 107, 255, .22); }
.cf-bond .cb-label {
  font-size: 9px; letter-spacing: 2px; color: #b98cff;
  border: 1px solid rgba(168, 107, 255, .4);
  padding: 0 5px; border-radius: 3px; margin-right: 7px;
}
.cf-bond .cb-name { font-size: 12px; color: #e0d0ff; }
.cf-bond .cb-text { display: block; margin-top: 4px; font-size: 10.5px; color: #9a8cb2; line-height: 1.6; }

/* ---------- 战绩卡 / 称号 ---------- */
.rec-card-box {
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, #181123, #110c1a);
}
.rec-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 10.5px; color: var(--muted); margin-bottom: 7px;
}
.rec-title-row b { color: #c8a8ff; font-weight: 600; }
.rec-title-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.title-chip {
  padding: 3px 9px; border-radius: 12px;
  border: 1px solid var(--line2); background: #1c1528;
  color: #b6a8cf; font-family: var(--font); font-size: 10px; cursor: pointer;
  transition: all .12s;
}
.title-chip:hover { border-color: rgba(200,168,255,.5); color: #d8c8ff; }
.title-chip.active {
  border-color: rgba(200,168,255,.75);
  background: rgba(90,60,140,.35); color: #e6d8ff;
  box-shadow: 0 0 12px rgba(168,107,255,.25);
}
.title-empty { font-size: 10px; color: #5d5470; }
.btn-share {
  width: 100%; padding: 8px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--gold-d);
  background: linear-gradient(180deg, #3a2c1a, #241a10);
  color: var(--gold); font-family: var(--font); font-size: 11.5px; letter-spacing: 2px;
  transition: all .14s;
}
.btn-share:hover { background: linear-gradient(180deg, #4a3822, #2c2014); box-shadow: 0 0 14px rgba(233,194,123,.25); }
.rec-share-tip { margin-top: 6px; font-size: 9.5px; color: #6d6383; line-height: 1.55; }
.share-preview {
  width: 100%; margin-top: 10px; border-radius: 9px;
  border: 1px solid rgba(233,194,123,.25);
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}

/* 卡牌类型标记（英雄 / 深渊生物） */
.cf-kind {
  display: inline-block; margin-top: 5px; margin-left: 6px;
  font-size: 9px; letter-spacing: 1.5px; padding: 1px 6px; border-radius: 3px;
}
.cf-kind.hero { color: #9fd8b0; border: 1px solid rgba(110,206,142,.42); background: rgba(40,90,60,.22); }
.cf-kind.mon  { color: #d8a0a0; border: 1px solid rgba(200,110,110,.42); background: rgba(90,40,40,.22); }

/* 怪物档案式描述 */
.cf-story.mon {
  border-left-color: rgba(200, 110, 110, .5);
  color: #c0aeb8;
  font-size: 11.5px;
  line-height: 1.8;
}

/* 审核视图 */
.cf-audit { display: flex; flex-direction: column; gap: 5px; }
.cf-audit .cf-row { font-size: 12px; }

/* 第三种态：深渊来客（人形但敌对） */
.cf-kind.rival { color: #e8c98a; border: 1px solid rgba(232,201,138,.42); background: rgba(90,72,30,.22); }

/* ---------- 榜单 ---------- */
.board-week {
  font-size: 10px; color: var(--muted); letter-spacing: 1px;
  border: 1px solid var(--line2); padding: 1px 7px; border-radius: 10px;
}
.board-cats { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 7px; }
.board-cats button {
  padding: 6px 0; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: #17111f;
  color: #9a8cb2; font-family: var(--font); font-size: 11px; letter-spacing: 1.5px;
  transition: all .13s;
}
.board-cats button.active {
  color: var(--gold); border-color: var(--gold-d);
  background: linear-gradient(180deg, #2e2416, #1a1410);
}
.board-tabs { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.board-tab {
  padding: 3px 9px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: #8a7fa3; font-family: var(--font); font-size: 10px;
}
.board-tab.active { color: #e6d9f7; border-color: rgba(200,168,255,.55); background: rgba(90,60,140,.28); }

.board-my {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 8px; border-radius: 9px;
  border: 1px solid rgba(233,194,123,.36);
  background: linear-gradient(100deg, rgba(70,54,28,.45), rgba(24,18,30,.6));
}
.bm-rank { font-size: 20px; font-weight: 700; color: var(--gold); min-width: 40px; }
.bm-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.bm-info b { font-size: 11.5px; color: #e6d9f7; }
.bm-info span { font-size: 9.5px; color: #8a7fa3; }
.bm-arrow { color: #5d5470; font-size: 9px; }

.board-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.board-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: 7px;
  background: rgba(30,22,42,.5);
  font-size: 11px;
}
.board-row.top1 { background: linear-gradient(90deg, rgba(233,194,123,.16), rgba(30,22,42,.5)); border: 1px solid rgba(233,194,123,.4); }
.board-row.top2 { background: linear-gradient(90deg, rgba(200,200,215,.11), rgba(30,22,42,.5)); border: 1px solid rgba(200,200,215,.28); }
.board-row.top3 { background: linear-gradient(90deg, rgba(200,140,90,.13), rgba(30,22,42,.5)); border: 1px solid rgba(200,140,90,.3); }
.board-row.me { border: 1px solid rgba(138,215,255,.5); background: rgba(40,70,95,.32); }
.br-rank { min-width: 22px; text-align: center; color: #6d6383; font-variant-numeric: tabular-nums; }
.board-row.top1 .br-rank { color: #e9c27b; font-weight: 700; }
.board-row.top2 .br-rank { color: #c8c8d7; font-weight: 700; }
.board-row.top3 .br-rank { color: #c88c5a; font-weight: 700; }
.br-deco { width: 4px; height: 22px; border-radius: 2px; background: #2a2138; }
.br-deco.deco-1 { background: linear-gradient(180deg, #4a6f8c, #2a3f52); }
.br-deco.deco-2 { background: linear-gradient(180deg, #8a6fd0, #4a3a75); box-shadow: 0 0 6px rgba(168,107,255,.5); }
.br-deco.deco-3 { background: linear-gradient(180deg, #e9c27b, #8a6a2a); box-shadow: 0 0 8px rgba(233,194,123,.6); }
.br-mid { flex: 1 1 auto; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.br-name { color: #ddd2ee; font-weight: 500; }
.board-row.me .br-name { color: #a8dcff; }
.br-title {
  font-style: normal; font-size: 9px; color: #b98cff;
  border: 1px solid rgba(168,107,255,.35); padding: 0 4px; border-radius: 3px;
}
.br-val { color: #cfc2e2; font-variant-numeric: tabular-nums; font-size: 11px; }
.board-tip { flex: 0 0 auto; margin-top: 7px; font-size: 9.5px; color: #5d5470; text-align: center; }

/* 称号稀有度着色 */
.title-chip { --tc: #8a8a99; display: inline-flex; align-items: center; gap: 5px; }
.title-chip .tc-name { color: var(--tc); }
.title-chip .tc-bonus { font-size: 8.5px; opacity: .8; color: #8ad7ff; }
.title-chip.active { border-color: var(--tc); box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 40%, transparent); }

/* ---------- 账号 / 云存档 ---------- */
.account-box {
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding: 10px 11px;
  border-radius: 9px;
  border: 1px solid rgba(233, 194, 123, .3);
  background: linear-gradient(120deg, rgba(46, 36, 22, .55), rgba(22, 16, 30, .7));
}
.ab-title { font-size: 12px; color: var(--gold); letter-spacing: 1.5px; margin-bottom: 5px; }
.ab-desc { font-size: 10px; line-height: 1.6; color: #9a8cb2; margin-bottom: 9px; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.ab-name { font-size: 13px; color: #e6d9f7; font-weight: 600; letter-spacing: .5px; }
.ab-badge {
  font-size: 9px; padding: 1px 6px; border-radius: 3px;
  color: #9a8cb2; border: 1px solid var(--line2); background: rgba(60, 50, 80, .4);
}
.ab-badge.bound { color: #9fd8b0; border-color: rgba(110, 206, 142, .45); background: rgba(40, 90, 60, .28); }
.ab-status { font-size: 10px; margin-bottom: 8px; color: #7a6f8e; }
.ab-status.ok { color: #6fce8e; }
.ab-status.busy { color: #e9c27b; }
.ab-status.off { color: #c88c5a; }

.btn-mini.primary {
  border-color: var(--gold-d);
  background: linear-gradient(180deg, #4a3822, #2c2014);
  color: #ffe4b0;
}

/* 登录表单 */
.auth-form { display: flex; flex-direction: column; gap: 9px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; color: #9a8cb2; }
.auth-form input {
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid var(--line2); background: #140f1e; color: #e6d9f7;
  font-family: var(--font); font-size: 12px; outline: none;
}
.auth-form input:focus { border-color: var(--gold-d); box-shadow: 0 0 0 2px rgba(233, 194, 123, .12); }
.af-err { min-height: 14px; font-size: 10.5px; color: #ff9d94; }
.af-switch { font-size: 10.5px; color: #8a7fa3; }
.af-switch a { color: var(--gold); text-decoration: none; border-bottom: 1px dashed rgba(233, 194, 123, .5); }

/* 存档冲突选择 */
.cf-conflict { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cc-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line2); background: #17111f;
  color: #cfc2e2; font-family: var(--font);
  transition: all .13s;
}
.cc-item b { font-size: 12.5px; color: var(--gold); }
.cc-item span { font-size: 10.5px; color: #9a8cb2; }
.cc-item:hover { border-color: var(--gold-d); box-shadow: 0 0 14px rgba(233, 194, 123, .16); }

/* 下一个解锁目标提示（放在强化页顶部，避免玩家不知道往哪走） */
.boost-next-tip {
  flex: 0 0 auto;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px dashed rgba(233, 194, 123, .38);
  background: rgba(70, 54, 28, .22);
  font-size: 10px;
  line-height: 1.55;
  color: #c8b59a;
}

/* 解锁按钮里的「≈ 升 N 级」对比，让解锁 vs 升级的取舍看得见 */
.buy .cmp {
  display: block;
  margin-top: 1px;
  font-size: 8.5px;
  letter-spacing: 0;
  color: #8a7fa3;
  opacity: .85;
}
.buy.unlock .cmp { color: #a08cc0; }

/* 榜单：空状态与离线提示 */
.board-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.7;
  color: #7a6f8e;
  border: 1px dashed var(--line2);
  border-radius: 8px;
}
.board-tip.warn { color: #c88c5a; }

/* ---------- 装扮商店 ---------- */
.shop-balance {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #c8a8ff;
  border: 1px solid rgba(168,107,255,.35);
  background: rgba(70,40,110,.25);
  padding: 1px 8px; border-radius: 10px;
}
.shop-balance i { font-style: normal; font-size: 10px; }
.shop-hint {
  flex: 0 0 auto;
  font-size: 10px; line-height: 1.6; color: var(--muted);
  padding: 6px 9px; margin-bottom: 8px; border-radius: 7px;
  border: 1px solid rgba(168,140,220,.18); background: rgba(120,90,180,.07);
}
.shop-sec-title {
  flex: 0 0 auto; font-size: 10px; letter-spacing: 2px; color: #8a7fa3;
  margin: 4px 0 6px; padding-left: 7px; border-left: 2px solid var(--gold-d);
}
.shop-owned { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.shop-chip {
  font-size: 9.5px; padding: 2px 8px; border-radius: 10px;
  color: #b6a8cf; border: 1px solid var(--line2); background: rgba(50,40,70,.4);
}
.shop-chip.none { color: #5d5470; }
.shop-list {
  flex: 1 1 auto; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px;
}
.shop-card {
  flex: 0 0 auto; padding: 9px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: linear-gradient(100deg, #181123, #110c1a);
}
.shop-card.owned { border-color: rgba(110,206,142,.3); background: rgba(30,55,42,.3); }
.sc-head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.sc-head b { font-size: 12.5px; color: var(--gold); letter-spacing: 1px; }
.sc-type {
  font-size: 9px; padding: 0 5px; border-radius: 3px;
  color: #c6b3e8; background: rgba(140,110,200,.22); border: 1px solid rgba(140,110,200,.3);
}
.sc-desc { font-size: 10px; color: #9a8cb2; line-height: 1.55; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.sc-price { font-size: 11.5px; color: #c8a8ff; font-variant-numeric: tabular-nums; }
.sc-price i { font-style: normal; font-size: 10px; margin-right: 2px; }
.sc-owned { font-size: 10.5px; color: #6fce8e; }
.sc-buy {
  padding: 4px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--gold-d); background: linear-gradient(180deg, #3a2c1a, #241a10);
  color: var(--gold); font-family: var(--font); font-size: 10.5px; letter-spacing: 1px;
  transition: all .13s;
}
.sc-buy:hover:not(:disabled) { box-shadow: 0 0 12px rgba(233,194,123,.22); }
.sc-buy:disabled { opacity: .4; cursor: not-allowed; }
.shop-tip { flex: 0 0 auto; margin-top: 7px; font-size: 9.5px; color: #5d5470; text-align: center; }