* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  position:fixed; inset:0; overflow:hidden;
  background:#0d0b14; color:#e8e2d0;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  touch-action:none; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
}
#game { position:fixed; inset:0; display:block; image-rendering:pixelated; image-rendering:crisp-edges; }
html[data-art-mode="illustrated"][data-art-state="ready"] #game { image-rendering:auto; }

.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; pointer-events:none; z-index:5; }
#xpwrap {
  position:absolute; top:env(safe-area-inset-top, 0px); left:0; right:0; height:18px;
  background:rgba(10,8,18,.85); border-bottom:2px solid #2a2440;
}
#xpfill { height:100%; width:0%; background:linear-gradient(90deg,#3aa0ff,#6ee7ff); transition:width .15s; }
#lvltext {
  position:absolute; top:0; right:6px; line-height:18px; font-size:12px; font-weight:700;
  color:#fff; text-shadow:0 1px 2px #000;
}
#topbar {
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 22px);
  left:8px; right:8px; display:flex; align-items:flex-start; justify-content:space-between;
}
#timer { font-size:22px; font-weight:800; color:#fff; text-shadow:0 2px 3px #000; letter-spacing:1px; }
#rightcol { min-width:64px; text-align:right; }
#kills { font-size:14px; font-weight:700; color:#ffd866; text-shadow:0 1px 2px #000; }
#goldhud { font-size:13px; font-weight:700; color:#ffe94a; text-shadow:0 1px 2px #000; margin-top:2px; }
#summonbar { display:flex; gap:4px; flex-wrap:wrap; max-width:40%; }
.sicon {
  width:30px; height:30px; background:rgba(20,16,34,.8); border:1px solid #3c3560; border-radius:5px;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.sicon img { width:24px; height:24px; image-rendering:pixelated; }
.sicon .slv {
  position:absolute; bottom:-1px; right:0px; font-size:9px; font-weight:800; color:#ffd866;
  text-shadow:0 1px 1px #000; line-height:1;
}
.sicon .cxlv {
  position:absolute; top:-1px; left:1px; font-size:9px; font-weight:800; color:#7dff9a;
  text-shadow:0 1px 1px #000; line-height:1;
}
.sicon .cxlv.max { color:#ffd866; text-shadow:0 0 4px rgba(255,216,102,.8); }
.sicon.evolved { border-color:#ffd866; box-shadow:0 0 6px rgba(255,216,102,.5); }
.sicon.sacready { cursor:pointer; box-shadow:0 0 8px rgba(255,100,100,.4); }
.sicon.sacready::after {
  content:''; position:absolute; top:-2px; right:-2px; width:8px; height:8px;
  border-radius:50%; background:#ff6060; box-shadow:0 0 4px rgba(255,80,80,.8);
}
#hudbtns {
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 56px); right:8px;
  display:flex; flex-direction:column; gap:8px; pointer-events:auto;
}
.iconbtn {
  width:40px; height:40px; border-radius:8px; border:1px solid #4a4170;
  background:rgba(22,18,38,.8); color:#cfc6ff; font-size:15px; font-weight:700;
}
.iconbtn:active { background:#3a3160; }
/* P2.7 随从指令按钮档位配色 */
#stancebtn[data-stance="aggressive"] { border-color:#ff6a4a; color:#ff8a6a; }
#stancebtn[data-stance="guard"] { border-color:#6ee7ff; color:#6ee7ff; }

/* ---------- 大招按钮 ---------- */
#ultbtn {
  position:absolute; right:16px; bottom:calc(env(safe-area-inset-bottom, 0px) + 26px);
  width:66px; height:66px; border-radius:50%; pointer-events:auto;
  border:3px solid #554d7d; background:rgba(28,23,48,.85); color:#8d83b8;
  font-size:15px; font-weight:900; font-family:inherit; z-index:6;
}
#ultbtn.ready {
  border-color:#ffd866; color:#ffd866; font-size:24px;
  background:radial-gradient(circle, #3a2f14, #1f1908);
  box-shadow:0 0 20px rgba(255,216,102,.75);
  animation:ultpulse 0.9s ease-in-out infinite;
}
#ultbtn:active { transform:scale(.92); }
@keyframes ultpulse {
  0%, 100% { transform:scale(1); box-shadow:0 0 14px rgba(255,216,102,.5); }
  50% { transform:scale(1.1); box-shadow:0 0 26px rgba(255,216,102,.95); }
}

/* ---------- 横幅 ---------- */
#banner {
  position:fixed; top:30%; left:0; right:0; text-align:center; z-index:8; pointer-events:none;
  font-size:26px; font-weight:900; color:#ffd866; text-shadow:0 0 12px #b8860b,0 2px 4px #000;
  animation:bannerpop 2.4s ease forwards;
}
@keyframes bannerpop {
  0% { transform:scale(.3); opacity:0; }
  12% { transform:scale(1.15); opacity:1; }
  20% { transform:scale(1); }
  80% { opacity:1; }
  100% { opacity:0; }
}

/* ---------- 覆盖层 ---------- */
.overlay {
  position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 38%, rgba(24,16,44,.78), rgba(4,2,10,.90));
  backdrop-filter:blur(4px);
  padding:calc(env(safe-area-inset-top,0px) + 10px) 10px calc(env(safe-area-inset-bottom,0px) + 10px);
}
.panel { width:100%; max-width:420px; max-height:100%; overflow-y:auto; text-align:center; padding:10px 4px; }
.title {
  font-size:34px; font-weight:900; letter-spacing:6px; color:#ffd866;
  text-shadow:0 0 16px rgba(255,180,40,.45), 0 3px 0 #6b4400;
}
.subtitle { font-size:11px; letter-spacing:4px; color:#8d83b8; margin:6px 0 14px; }
.artmodebadge {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:24px; margin:-4px 0 10px; padding:4px 10px;
  border:1px solid rgba(115,221,205,.48); border-radius:999px;
  background:rgba(31,91,89,.34); color:#baf6e9;
  font-size:11px; font-weight:800; letter-spacing:1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px rgba(85,205,188,.12);
}
.artmodebadge[data-state="loading"] { color:#f7dda0; border-color:rgba(239,195,103,.48); }
.artmodebadge[data-state="failed"] { color:#ffb5ad; border-color:rgba(235,111,97,.5); }
.hint { font-size:13px; color:#b9b0d8; line-height:1.7; margin-bottom:10px; }
.hint.small { font-size:11px; color:#776e9e; margin-top:12px; }
.choose { font-size:15px; font-weight:700; color:#fff; margin:10px 0 10px; }
h2 { font-size:24px; font-weight:900; color:#fff; margin-bottom:14px; }
.lvuptitle { color:#6ee7ff; text-shadow:0 0 14px rgba(60,170,255,.6); letter-spacing:8px; }
.sptitle { color:#ffd866; text-shadow:0 0 14px rgba(255,216,102,.55); letter-spacing:2px; }

/* ---------- 卡片 ---------- */
.cards { display:flex; flex-direction:column; gap:10px; }
.card {
  display:flex; align-items:center; gap:12px; text-align:left;
  background:linear-gradient(180deg,#221c3a,#171228); border:2px solid #4a4170; border-radius:12px;
  padding:12px 14px; min-height:72px; cursor:pointer; width:100%;
  color:#e8e2d0; font:inherit;
}
.card:active { transform:scale(.97); border-color:#8d7fff; }
.card img { width:44px; height:44px; image-rendering:pixelated; flex-shrink:0; }
.card .cname { font-size:16px; font-weight:800; color:#fff; }
.card .ctag { font-size:10px; color:#0d0b14; background:#8d7fff; border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:2px; font-weight:700; }
.card .cdesc { font-size:12px; color:#aaa0cf; margin-top:4px; line-height:1.5; }
.card.gold { border-color:#ffd866; background:linear-gradient(180deg,#3a2f14,#1f1908); box-shadow:0 0 14px rgba(255,216,102,.35); }
.card.gold .ctag { background:#ffd866; }
.card.gold .cname { color:#ffd866; }
/* ---------- 升级稀有度 ---------- */
.card.rarity-rare { border-color:#6ea8ff; background:linear-gradient(180deg,#162648,#0c1428); box-shadow:0 0 14px rgba(110,168,255,.4); }
.card.rarity-rare .ctag { background:#6ea8ff; }
.card.rarity-rare .cname { color:#cfe6ff; }
.card.rarity-epic { border-color:#b08aff; background:linear-gradient(180deg,#2a1a4a,#160c2a); box-shadow:0 0 16px rgba(176,138,255,.5); }
.card.rarity-epic .ctag { background:#b08aff; }
.card.rarity-epic .cname { color:#e0cfff; }
.card.rarity-legendary { border-color:#ffb347; background:linear-gradient(180deg,#3a2a0e,#1f1608); box-shadow:0 0 18px rgba(255,179,71,.55); }
.card.rarity-legendary .ctag { background:#ffb347; }
.card.rarity-legendary .cname { color:#ffd9a0; }
.crarity { font-size:10px; font-weight:800; margin-left:6px; vertical-align:2px; text-shadow:0 0 6px currentColor; }

/* ---------- 按钮 ---------- */
.bigbtn {
  display:block; width:100%; margin-top:12px; padding:14px; font-size:17px; font-weight:800;
  border-radius:12px; border:2px solid #6ee7ff; background:#16304a; color:#bfeeff; font-family:inherit;
}
.bigbtn:active { transform:scale(.97); }
.bigbtn.dim { border-color:#554d7d; background:#1c1730; color:#9a90c2; font-size:14px; padding:10px; }

/* ---------- 结算 ---------- */
#overstats, #pausestats { margin:8px 0 6px; }
.statrow {
  display:flex; justify-content:space-between; padding:7px 14px; font-size:14px;
  background:rgba(255,255,255,.05); border-radius:8px; margin-bottom:6px;
}
.statrow b { color:#ffd866; }
#overtitle.win { color:#ffd866; text-shadow:0 0 16px rgba(255,200,60,.6); }

/* ---------- 伤害统计 ---------- */
.dmgtitle { font-size:13px; font-weight:700; color:#8d83b8; margin:12px 0 6px; }
.dmgrow { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.dmgname { width:64px; font-size:12px; text-align:right; color:#cfc6ee; flex-shrink:0; }
.dmgbar { flex:1; height:10px; background:rgba(255,255,255,.06); border-radius:5px; overflow:hidden; }
.dmgbar i { display:block; height:100%; border-radius:5px; }
.dmgval { width:48px; font-size:11px; text-align:left; color:#ffd866; flex-shrink:0; }

/* ---------- 主菜单附加 ---------- */
#menutop {
  display:flex; justify-content:space-between; align-items:center;
  margin:0 0 10px; padding:8px 12px;
  background:rgba(255,255,255,.05); border-radius:10px;
}
#menugold { font-size:15px; font-weight:800; color:#ffe94a; }
#bestline { font-size:11px; color:#8d83b8; }
/* ---------- 关卡选择 ---------- */
#stagerow { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.stagecard {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:linear-gradient(180deg,#221c3a,#171228); border:2px solid #4a4170; border-radius:12px;
  padding:10px 4px 8px; cursor:pointer; color:#e8e2d0; font:inherit;
}
.stagecard img { width:34px; height:34px; image-rendering:pixelated; }
.stagecard .stname { font-size:13px; font-weight:800; color:#fff; }
.stagecard .stsub { font-size:10px; color:#8d83b8; }
.stagecard .stbest { font-size:9px; color:#7dff9a; }
.stagecard.sel { border-color:#ffd866; box-shadow:0 0 12px rgba(255,216,102,.35); background:linear-gradient(180deg,#3a2f14,#1f1908); }
.stagecard.sel .stname { color:#ffd866; }
.stagecard.locked { opacity:.45; filter:grayscale(.8); }
.stagecard.locked .stname { color:#9a93b8; }
.stagecard:active { transform:scale(.96); }
.endlessbtn {
  display:block; width:100%; margin:0 0 6px; padding:9px; font-size:13px; font-weight:800; font-family:inherit;
  border-radius:10px; border:2px solid #554d7d; background:#1c1730; color:#cfc6ee;
}
.endlessbtn.on { border-color:#ff5fa0; color:#ff9ad5; background:#2e1224; box-shadow:0 0 12px rgba(255,95,160,.3); }
.endlessbtn:active { transform:scale(.97); }

/* P4.2 Hyper 档按钮 */
.hyperbtn {
  display:block; width:100%; margin:0 0 6px; padding:9px; font-size:13px; font-weight:800; font-family:inherit;
  border-radius:10px; border:2px solid #554d7d; background:#1c1730; color:#cfc6ee;
}
.hyperbtn.on { border-color:#ffd866; color:#ffe899; background:#2e2410; box-shadow:0 0 12px rgba(255,216,102,.3); }
.hyperbtn:active { transform:scale(.97); }

/* P4.0 诅咒选择条 */
.cursebar { display:flex; align-items:center; gap:4px; margin:0 0 10px; flex-wrap:wrap; }
.curselabel { font-size:12px; font-weight:700; color:#ff5fa0; margin-right:4px; white-space:nowrap; }
.cursebtn {
  min-width:30px; padding:5px 6px; font-size:12px; font-weight:800; font-family:inherit;
  border-radius:8px; border:2px solid #554d7d; background:#1c1730; color:#cfc6ee;
}
.cursebtn.sel { border-color:#ff5fa0; color:#ff9ad5; background:#2e1224; box-shadow:0 0 8px rgba(255,95,160,.3); }
.cursebtn.locked { opacity:.4; filter:grayscale(.8); border-style:dashed; }
.cursebtn:active { transform:scale(.92); }

/* P4.0/P4.2 HUD 标记 */
.hudmark { font-size:11px; font-weight:800; margin-top:2px; white-space:nowrap; }
#cursemark { color:#ff5fa0; }
#hypermark { color:#ffd866; }

/* P4.1 死神覆盖层 */
.deathbtns { display:flex; flex-direction:column; gap:10px; margin-top:8px; }

#menubtns { display:flex; gap:10px; margin-top:12px; }
.menubtn {
  flex:1; padding:12px; font-size:15px; font-weight:700; font-family:inherit;
  border-radius:12px; border:2px solid #554d7d; background:#1c1730; color:#cfc6ee;
}
.menubtn:active { transform:scale(.97); border-color:#8d7fff; }

/* ---------- 宝箱 ---------- */
.chesttitle { color:#ffd866; text-shadow:0 0 14px rgba(255,200,60,.55); letter-spacing:6px; }
#chestgoldtxt { font-size:17px; font-weight:800; color:#ffe94a; margin:12px 0 2px; }
.card.reveal { animation:cardin .45s ease backwards; }
.card.reveal:nth-child(2) { animation-delay:.18s; }
.card.reveal:nth-child(3) { animation-delay:.36s; }
@keyframes cardin {
  from { transform:translateY(16px) scale(.85); opacity:0; }
  to { transform:none; opacity:1; }
}

/* ---------- 商店 ---------- */
#shopgold { font-size:17px; font-weight:800; color:#ffe94a; margin-bottom:4px; }
.shoprow {
  display:flex; align-items:center; gap:10px; text-align:left;
  background:rgba(255,255,255,.05); border-radius:10px; padding:9px 10px; margin-bottom:8px;
}
.shoprow > img { width:30px; height:30px; image-rendering:pixelated; flex-shrink:0; }
.shopbody { flex:1; min-width:0; }
.shopname { font-size:14px; font-weight:800; color:#fff; }
.shopdesc { font-size:11px; color:#aaa0cf; margin-top:2px; }
.pips i {
  display:inline-block; width:8px; height:8px; border-radius:2px;
  background:#3a3358; margin-left:3px; vertical-align:1px;
}
.pips i.on { background:#ffd866; }
.buybtn {
  padding:8px 10px; min-width:64px; font-size:13px; font-weight:800; font-family:inherit;
  border-radius:8px; border:2px solid #ffd866; background:#3a2f14; color:#ffe94a; flex-shrink:0;
}
.buybtn:disabled { border-color:#444; background:#1c1928; color:#666; }
.buybtn:active:not(:disabled) { transform:scale(.95); }

/* ---------- 成就 ---------- */
.achrow {
  display:flex; align-items:center; gap:10px; text-align:left;
  background:rgba(255,255,255,.05); border-radius:10px; padding:9px 10px; margin-bottom:8px;
}
.achrow.locked { opacity:.5; }
.achrow.unlocked { background:rgba(255,216,102,.12); border:1px solid rgba(255,216,102,.4); }
.achicon { font-size:22px; width:30px; text-align:center; flex-shrink:0; }
.achbody { flex:1; min-width:0; }
.achname { font-size:14px; font-weight:800; color:#fff; }
.achrow.unlocked .achname { color:#ffe94a; }
.achdesc { font-size:11px; color:#aaa0cf; margin-top:2px; }
.achreward { font-size:13px; font-weight:800; color:#ffd866; flex-shrink:0; }

/* ---------- 图鉴 ---------- */
.codexbox { background:rgba(255,255,255,.05); border-radius:10px; padding:8px 10px; margin-bottom:8px; }
.codexrow { display:flex; align-items:center; justify-content:space-around; }
.codexcell { text-align:center; width:40%; }
.codexcell img { width:36px; height:36px; image-rendering:pixelated; }
.codexcell .cxname { font-size:11px; color:#cfc6ee; margin-top:2px; }
.codexcell .cxname.gold { color:#ffd866; font-weight:700; }
.codexcell.locked { opacity:.55; }
.cxq {
  width:36px; height:36px; margin:0 auto; border-radius:8px;
  background:#221c3a; color:#554d7d; font-size:22px; font-weight:900; line-height:36px;
}
.codexarrow { color:#554d7d; font-size:14px; }
.codextip { font-size:10px; color:#776e9e; text-align:center; margin-top:5px; line-height:1.5; }
.codextip.mastery { color:#9a91c4; }
.mtitle { font-weight:800; padding:0 4px; border-radius:4px; }
.mtitle.t1 { color:#7dff9a; }
.mtitle.t2 { color:#6ee7ff; }
.mtitle.t3 { color:#ffd866; text-shadow:0 0 6px rgba(255,216,102,.6); }

/* ---------- 初始随从网格 ---------- */
.startergrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.scard {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:linear-gradient(180deg,#221c3a,#171228); border:2px solid #4a4170; border-radius:10px;
  padding:9px 4px 7px; cursor:pointer; color:#e8e2d0; font:inherit;
}
.scard img { width:34px; height:34px; image-rendering:pixelated; }
.scard .scname { font-size:11px; font-weight:700; color:#fff; }
.scard:active { transform:scale(.96); border-color:#8d7fff; }
.scard.locked { opacity:.5; filter:grayscale(.7); border-color:#3a3358; }
.scard.locked .scname { color:#9a93b8; }
.scard .sclock { position:absolute; top:3px; right:5px; font-size:11px; }

/* ---------- 升级面板操作栏（洗牌/跳过/封禁）---------- */
.lvactions { display:flex; gap:8px; margin-top:12px; }
.lvact {
  flex:1; padding:10px 4px; font-size:13px; font-weight:800; font-family:inherit;
  border-radius:10px; border:2px solid #554d7d; background:#1c1730; color:#cfc6ee;
}
.lvact:active { transform:scale(.96); }
.lvact.disabled { opacity:.4; pointer-events:none; }
.lvact.on { border-color:#ff5fa0; color:#ff9ad5; background:#2e1224; box-shadow:0 0 10px rgba(255,95,160,.35); }
.lvtip { font-size:11px; color:#ff9ad5; margin-top:10px; line-height:1.5; }
.card.banishable { border-color:#ff5fa0; box-shadow:0 0 10px rgba(255,95,160,.3); }

/* ---------- 召唤师法术选择 ---------- */
#spellrow { display:flex; gap:8px; margin-bottom:10px; }
.spellcard {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  background:linear-gradient(180deg,#221c3a,#171228); border:2px solid #4a4170; border-radius:10px;
  padding:9px 5px; cursor:pointer; color:#e8e2d0; font:inherit;
}
.spellcard img { width:28px; height:28px; image-rendering:pixelated; }
.spellcard .spname { font-size:12px; font-weight:800; color:#fff; }
.spellcard .spdesc { font-size:9.5px; color:#9a91c4; line-height:1.4; }
.spellcard.sel { border-color:#9fdcff; box-shadow:0 0 12px rgba(110,200,255,.35); background:linear-gradient(180deg,#1a2a3a,#0f1822); }
.spellcard.sel .spname { color:#9fdcff; }
.spellcard:active { transform:scale(.96); }

/* ---------- 主动技按钮（HUD 左下）---------- */
#spellbtn {
  position:absolute; left:16px; bottom:calc(env(safe-area-inset-bottom, 0px) + 30px);
  width:58px; height:58px; border-radius:50%; pointer-events:auto; z-index:6; padding:0;
  border:3px solid #554d7d; background:rgba(28,23,48,.85);
  display:flex; align-items:center; justify-content:center;
}
#spellbtn img { width:30px; height:30px; image-rendering:pixelated; }
#spellbtn .cd {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:900; color:#fff; text-shadow:0 1px 3px #000;
  background:rgba(8,6,16,.55); border-radius:50%;
}
#spellbtn .cd:empty { display:none; }
#spellbtn.ready { border-color:#9fdcff; box-shadow:0 0 14px rgba(110,200,255,.55); }
#spellbtn:active { transform:scale(.92); }

/* ---------- 神秘商人 ---------- */
.merttitle { color:#ffd866; text-shadow:0 0 14px rgba(255,200,60,.55); letter-spacing:4px; }
#mertgold { font-size:17px; font-weight:800; color:#ffe94a; margin-bottom:4px; }
.mertcard .mprice { background:#ffd866; color:#1a1208; }
.mertcard.cannotafford { opacity:.5; }
.mertcard.sold { opacity:.4; border-style:dashed; }
.mertcard.sold .cname { text-decoration:line-through; }
.pacthead { font-size:16px; font-weight:900; color:#ff5fa0; text-shadow:0 0 10px rgba(255,95,160,.5); margin:16px 0 10px; letter-spacing:2px; }
.pactcard {
  border-color:#ff5fa0; background:linear-gradient(180deg,#2e1224,#160a14);
  box-shadow:0 0 14px rgba(255,95,160,.35);
}
.pactcard .pacttag { background:#ff5fa0; color:#1a0810; }
.pactcard .pactname { color:#ff9ad5; }
.pactdetail { font-size:11px; margin-top:6px; line-height:1.6; }
.pactboon { color:#7dff9a; font-weight:700; }
.pactcost { color:#ff7070; font-weight:700; }
.pactdone { font-size:12px; color:#776e9e; text-align:center; padding:10px; background:rgba(255,255,255,.04); border-radius:8px; }

/* ---------- 恶魔契约 HUD ---------- */
#pactbar {
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 92px); left:8px;
  display:flex; gap:6px; flex-wrap:wrap; pointer-events:none; z-index:5;
}
.pactic {
  display:flex; align-items:center; gap:3px;
  background:rgba(46,18,36,.85); border:1px solid #ff5fa0; border-radius:6px;
  padding:2px 5px 2px 3px; box-shadow:0 0 6px rgba(255,95,160,.3);
}
.pactic img { width:18px; height:18px; image-rendering:pixelated; }
.pactic .pactlbl { font-size:10px; font-weight:800; color:#ff9ad5; text-shadow:0 1px 1px #000; }

/* ---------- 无尽变异因子 HUD ---------- */
#mutationbar {
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 120px); left:8px;
  display:flex; gap:6px; flex-wrap:wrap; pointer-events:none; z-index:5;
}
.mutic {
  display:flex; align-items:center; gap:3px;
  background:rgba(34,16,40,.85); border:1px solid #b08aff; border-radius:6px;
  padding:2px 5px 2px 3px; box-shadow:0 0 6px rgba(176,138,255,.3);
}
.mutic .muticon { font-size:13px; line-height:1; }
.mutic .mutlbl { font-size:10px; font-weight:800; color:#d8c8ff; text-shadow:0 1px 1px #000; }

/* ---------- P2.9 奥义卡 HUD ---------- */
#arcanabar {
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 148px); left:8px;
  display:flex; gap:4px; flex-wrap:wrap; pointer-events:none; z-index:5;
}
.arcanahud {
  display:flex; align-items:center;
  background:rgba(20,12,30,.88); border:1px solid #ffd866; border-radius:5px;
  padding:2px; box-shadow:0 0 6px rgba(255,216,102,.3);
}
.arcanahud img { width:22px; height:22px; image-rendering:pixelated; }

/* ---------- P2.9 奥义卡选择 ---------- */
.arcanacard {
  border:2px solid #ffd866 !important;
  box-shadow:0 0 12px rgba(255,216,102,.25) !important;
  background:linear-gradient(135deg, rgba(40,30,16,.9), rgba(20,15,30,.9)) !important;
}
.arcanacard .cname { color:#ffd866; }
.arcanacard .ctag { color:#b8860b; background:rgba(255,216,102,.12); }

/* ---------- 任务板 ---------- */
#questtabs { display:flex; gap:6px; margin-bottom:10px; }
.questtab {
  flex:1; padding:8px 2px; font-size:12px; font-weight:800; font-family:inherit;
  border-radius:8px; border:2px solid #554d7d; background:#1c1730; color:#9a90c2;
}
.questtab:active { transform:scale(.96); }
.questtab.sel { border-color:#6ee7ff; color:#bfeeff; background:#16304a; box-shadow:0 0 10px rgba(110,231,255,.3); }
.questtab .qbadge {
  display:inline-block; min-width:16px; padding:0 4px; margin-left:3px; border-radius:8px;
  background:#3a3358; color:#cfc6ee; font-size:10px; vertical-align:1px;
}
.questtab.sel .qbadge { background:#1a4a6a; color:#bfeeff; }
.questrow {
  display:flex; align-items:center; gap:10px; text-align:left;
  background:rgba(255,255,255,.05); border-radius:10px; padding:8px 10px; margin-bottom:7px;
}
.questrow.done { background:rgba(125,255,154,.10); border:1px solid rgba(125,255,154,.35); }
.questrow.locked { opacity:.55; }
.qicon { width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.qicon img { width:26px; height:26px; image-rendering:pixelated; }
.qbody { flex:1; min-width:0; }
.qname { font-size:13px; font-weight:800; color:#fff; }
.questrow.done .qname { color:#7dff9a; }
.qdesc { font-size:10.5px; color:#aaa0cf; margin-top:2px; line-height:1.4; }
.qbar { height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; margin-top:4px; }
.qbar i { display:block; height:100%; background:linear-gradient(90deg,#3aa0ff,#6ee7ff); border-radius:3px; }
.questrow.done .qbar i { background:#7dff9a; }
.qreward { font-size:12px; font-weight:800; color:#ffd866; flex-shrink:0; white-space:nowrap; }
.questrow.done .qreward { color:#7dff9a; }
.qcheck { font-size:14px; color:#7dff9a; flex-shrink:0; font-weight:900; }

/* ---------- 结算：本局解锁 + 进度推进 ---------- */
#overunlocks { margin:4px 0 4px; }
.unlocktitle { font-size:13px; font-weight:800; color:#ffd866; margin:10px 0 6px; text-shadow:0 0 8px rgba(255,216,102,.4); }
.unlockcard {
  display:flex; align-items:center; gap:10px; text-align:left;
  background:linear-gradient(180deg,#3a2f14,#1f1908); border:2px solid #ffd866; border-radius:10px;
  padding:9px 12px; margin-bottom:7px; box-shadow:0 0 12px rgba(255,216,102,.3);
  animation:unlockpop .5s ease backwards;
}
.unlockcard:nth-child(2) { animation-delay:.12s; }
.unlockcard:nth-child(3) { animation-delay:.24s; }
.unlockcard:nth-child(4) { animation-delay:.36s; }
.unlockcard:nth-child(5) { animation-delay:.48s; }
@keyframes unlockpop { from { transform:translateY(14px) scale(.9); opacity:0; } to { transform:none; opacity:1; } }
.unlockcard img { width:36px; height:36px; image-rendering:pixelated; flex-shrink:0; }
.unlockcard .ubody { flex:1; min-width:0; }
.unlockcard .uname { font-size:14px; font-weight:800; color:#ffd866; }
.unlockcard .udesc { font-size:11px; color:#e8d8a0; margin-top:2px; }
.unlockcard .utag { font-size:10px; color:#1a1208; background:#ffd866; border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:2px; font-weight:700; }
.progtitle { font-size:12px; font-weight:700; color:#8d83b8; margin:10px 0 5px; }
.progrow { margin-bottom:5px; }
.progrow .prhead { display:flex; justify-content:space-between; font-size:11px; color:#cfc6ee; margin-bottom:2px; }
.progrow .prbar { height:7px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.progrow .prbar i { display:block; height:100%; background:linear-gradient(90deg,#6ee7ff,#b08aff); border-radius:4px; }
.nothingrow { font-size:11px; color:#776e9e; text-align:center; padding:6px; }

/* ---------- 门控：未解锁锁定态（???）---------- */
.scard.gated, .spellcard.gated, .stagecard.gated { opacity:.5; filter:grayscale(.85); border-style:dashed; border-color:#3a3358; }
.scard.gated .scname, .spellcard.gated .spname { color:#7a73a0; }
.gateq {
  width:34px; height:34px; margin:0 auto; border-radius:8px;
  background:#221c3a; color:#554d7d; font-size:20px; font-weight:900; line-height:34px; text-align:center;
}
.gatehint { font-size:9px; color:#8d7fff; line-height:1.4; margin-top:2px; text-align:center; padding:0 2px; }

/* ---------- 双维标签：系别徽标 ---------- */
.clanbadge {
  display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700;
  border:1px solid; border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:2px;
  background:rgba(0,0,0,.25);
}
.clanbadge i { display:inline-block; width:7px; height:7px; border-radius:50%; }
.scard .scclan { display:flex; justify-content:center; width:100%; }
.scard .scclan .clanbadge { margin-left:0; }
/* 随从条系别小圆点 */
.sicon .sclandot {
  position:absolute; bottom:-1px; left:1px; width:7px; height:7px; border-radius:50%;
  border:1px solid rgba(0,0,0,.5); box-shadow:0 0 4px currentColor;
}
/* 升级卡羁绊提示角标 */
.bondhint { color:#ffd866; font-weight:700; font-size:11px; text-shadow:0 0 6px rgba(255,216,102,.4); }

/* ---------- P2.3 天赋树三选一卡片 ---------- */
.card.talentcard { flex-direction:row; }
.card.talentcard .tbranch {
  font-size:11px; font-weight:800; border:1px solid; border-radius:4px;
  padding:1px 6px; margin-right:8px; vertical-align:2px; background:rgba(0,0,0,.25);
  text-shadow:0 0 6px currentColor;
}
.tdots { margin-top:5px; font-size:11px; }
.tdots-dots { font-size:13px; letter-spacing:2px; font-weight:700; text-shadow:0 0 4px currentColor; }
.tdots-hint { color:#aaa0cf; font-size:10px; margin-left:4px; }

/* ---------- 羁绊面板（P2.2）---------- */
#bondspanel {
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 148px); left:8px;
  display:flex; flex-direction:column; gap:4px; flex-wrap:wrap; pointer-events:none; z-index:5;
  max-height:40vh; overflow:hidden;
}
.bondic {
  display:flex; align-items:center; gap:3px;
  background:rgba(22,18,38,.85); border:1px solid #554d7d; border-radius:6px;
  padding:2px 6px 2px 4px; box-shadow:0 0 6px rgba(80,70,120,.3);
}
.bondic .bondicon { font-size:12px; line-height:1; }
.bondic .bondlbl { font-size:10px; font-weight:800; color:#cfc6ee; text-shadow:0 1px 1px #000; }
.bondic .bondtier { font-size:9px; font-weight:800; color:#ffd866; text-shadow:0 1px 1px #000; margin-left:2px; }
.bondic.clanbond.fresh {
  animation:bondfresh 0.6s ease-in-out 3;
}
@keyframes bondfresh {
  0%, 100% { box-shadow:0 0 6px rgba(255,216,102,.3); }
  50% { box-shadow:0 0 14px rgba(255,216,102,.9); background:rgba(58,47,20,.9); }
}

/* ---------- P2.4 进化二选一 ---------- */
.evotitle { color:#ffd866; text-shadow:0 0 18px rgba(255,216,102,.7), 0 0 30px rgba(255,216,102,.3); letter-spacing:6px; font-size:26px; font-weight:900; animation:evoGlow 2s ease-in-out infinite; }
@keyframes evoGlow {
  0%, 100% { text-shadow:0 0 18px rgba(255,216,102,.7), 0 0 30px rgba(255,216,102,.3); }
  50% { text-shadow:0 0 24px rgba(255,216,102,.9), 0 0 40px rgba(255,216,102,.5); }
}
.card.evocard { flex-direction:row; align-items:center; min-height:90px; }
.card.evocard img { width:64px; height:64px; }
.card.evocard .evoname { font-size:18px; font-weight:900; }
.card.evocard .evotag { font-size:10px; color:#0d0b14; border-radius:4px; padding:1px 6px; margin-left:8px; vertical-align:2px; font-weight:700; }
.card.evocard.formA { border-color:#ffd866; background:linear-gradient(180deg,#3a2f14,#1f1908); box-shadow:0 0 14px rgba(255,216,102,.35); }
.card.evocard.formA .evotag { background:#ffd866; }
.card.evocard.formA .evoname { color:#ffd866; }
.card.evocard.formB { border-color:#b06eff; background:linear-gradient(180deg,#2a1a4a,#160c2a); box-shadow:0 0 14px rgba(176,110,255,.4); }
.card.evocard.formB .evotag { background:#b06eff; }
.card.evocard.formB .evoname { color:#d8b0ff; }
.evorec { font-size:9px; font-weight:800; color:#0d0b14; background:#7dff9a; border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:2px; text-shadow:none; animation:recPulse 1.5s ease-in-out infinite; }
@keyframes recPulse {
  0%, 100% { box-shadow:0 0 4px rgba(125,255,154,.4); }
  50% { box-shadow:0 0 10px rgba(125,255,154,.8); }
}

/* 图鉴 B 形态名称配色 */
.codexcell .cxname.evoB { color:#d8b0ff; font-weight:700; }

/* ---------- P2.6 献祭面板 ---------- */
.card.saccard { flex-direction:column; text-align:center; min-height:80px; }
.sacicon { font-size:28px; margin-bottom:4px; }
.cardtitle { font-size:15px; font-weight:800; color:#fff; }
.carddesc { font-size:11px; color:#aaa0cf; margin-top:4px; line-height:1.5; }

/* ---------- P2.8 独宠选择 ---------- */
.card.solocard { flex-direction:column; text-align:center; min-height:90px; }
.card.solocard img { width:48px; height:48px; }

/* ---------- P2.5 Union 合体 ---------- */
.card.unioncard { flex-direction:column; text-align:center; min-height:120px; border-color:#ffd866; background:linear-gradient(180deg,#3a2f14,#1f1908); box-shadow:0 0 16px rgba(255,216,102,.4); }
.unionrow { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.unionrow img { image-rendering:pixelated; }
.unionplus { font-size:20px; font-weight:900; color:#ffd866; }
.unionbtns { display:flex; gap:12px; justify-content:center; margin-top:10px; }

/* 图鉴 Union 配方区 */
.codexunionheader { font-size:16px; font-weight:900; color:#ffd866; text-align:center; margin:16px 0 8px; padding:8px 0; border-top:1px solid rgba(255,216,102,.2); border-bottom:1px solid rgba(255,216,102,.2); }
.codexbox.unionrecipe { border:1px solid rgba(255,216,102,.15); }
.codexbox.unionrecipe.unlocked { border-color:rgba(255,216,102,.4); box-shadow:0 0 8px rgba(255,216,102,.15); }

/* ---------- P3.2/P3.3 资质晋升 + 觉醒 ---------- */
.codextip.promo { color:#6ea8ff; }
.codextip.awaken { color:#b08aff; }
.awakenbtn { display:block; margin:8px auto 2px; padding:6px 18px; font-size:13px; font-weight:700; border:1px solid #b08aff; background:linear-gradient(180deg,#2a1840,#1a0f2a); color:#d8b0ff; border-radius:8px; cursor:pointer; box-shadow:0 0 10px rgba(176,138,255,.3); }
.awakenbtn:active { transform:scale(.96); }
.card.awakencard { border-color:#b08aff; background:linear-gradient(180deg,#2a1840,#1a0f2a); box-shadow:0 0 10px rgba(176,138,255,.2); }
.card.awakencard .cname { color:#d8b0ff; }
.card.awakencard .ctag { color:#b08aff; background:rgba(176,138,255,.12); }
#awakenov .panel { max-width:520px; }
#awakentitle { color:#d8b0ff; }

/* ---------- P3.4 魂印 ---------- */
#soulmarkov .panel { max-width:520px; }
#soulmarktitle { color:#c8a0ff; }
.card.soulmarkcard { border-color:#b06eff; background:linear-gradient(180deg,#2a1a4a,#160c2a); box-shadow:0 0 10px rgba(176,110,255,.2); }
.card.soulmarkcard .cname { color:#d8b0ff; }
.card.soulmarkcard .ctag.soulmarktag { color:#b06eff; background:rgba(176,110,255,.15); }
.card.soulmarkcard.equipped { border-color:#6ea8ff; }
.card.soulmarkcard.equipped .ctag.soulmarktag { background:#6ea8ff; color:#0d0b14; }

/* ---------- P3.6 随从档案馆 ---------- */
#archiveov .panel { max-width:480px; }
.archive-panel { padding:12px 8px; }
#archivecontent { text-align:center; }
.archheader { display:flex; align-items:center; gap:12px; margin-bottom:12px; justify-content:center; }
.archportrait { position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.archportrait img { width:64px; height:64px; image-rendering:pixelated; }
.archportrait.pettable { cursor:pointer; }
.archportrait.pettable:active { transform:scale(.95); }
.archportrait.pettable::after { content:'❤'; position:absolute; bottom:-2px; right:-2px; font-size:14px; color:#ff6a8a; text-shadow:0 0 4px rgba(255,100,140,.6); }
.heart-particle { position:absolute; font-size:16px; color:#ff6a8a; pointer-events:none; animation:heartfloat 1.4s ease-out forwards; }
@keyframes heartfloat { 0% { opacity:1; transform:translateY(0) scale(.6); } 100% { opacity:0; transform:translateY(-40px) scale(1.2); } }
.archtitlebox { text-align:left; }
.archname { font-size:20px; font-weight:900; color:#fff; }
.archtags { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.rolebadge { font-size:10px; font-weight:700; color:#ffd866; border:1px solid #ffd866; border-radius:4px; padding:1px 6px; }
.archsilhouette { font-size:48px; font-weight:900; color:#554d7d; text-align:center; padding:20px; }
.archtip { margin:16px 0; }
.archsection { background:rgba(255,255,255,.04); border-radius:10px; padding:10px 12px; margin-bottom:10px; text-align:left; }
.archsection-title { font-size:14px; font-weight:800; color:#cfc6ee; margin-bottom:8px; text-align:center; }
.radar-canvas { display:block; margin:0 auto; image-rendering:pixelated; }
.archbranch { display:flex; align-items:center; gap:8px; padding:4px 0 4px 8px; border-left:3px solid #554d7d; margin-bottom:4px; }
.archbranch-name { font-size:13px; font-weight:700; color:#fff; }
.archbranch-tag { font-size:11px; color:#aaa0cf; flex:1; }
.archbranch-dots { font-size:12px; color:#ffd866; letter-spacing:2px; }
.archpromo { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.archpromo-lvl { font-size:14px; font-weight:800; color:#6ea8ff; white-space:nowrap; }
.archpromo-bar { flex:1; }
.archpromo-txt { font-size:11px; color:#776e9e; white-space:nowrap; }
.archawaken-row { display:flex; gap:6px; justify-content:center; }
.archawaken-slot { width:44px; min-height:44px; border:1px dashed #4a4170; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#776e9e; text-align:center; padding:2px; line-height:1.3; }
.archawaken-slot.filled { border:1px solid #b08aff; background:rgba(176,138,255,.12); color:#d8b0ff; font-weight:700; }
.archsoul-row { display:flex; gap:8px; justify-content:center; }
.archsoul-slot { width:80px; min-height:56px; border:1px dashed #4a4170; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:18px; color:#776e9e; cursor:pointer; padding:4px; }
.archsoul-slot img { width:28px; height:28px; image-rendering:pixelated; }
.archsoul-slot.filled { border:1px solid #b06eff; background:rgba(176,110,255,.12); color:#d8b0ff; }
.archsoul-slot.locked { cursor:default; opacity:.5; }
.archsoul-name { font-size:9px; color:#d8b0ff; margin-top:2px; text-align:center; line-height:1.2; }
.archsoul-slot:active { transform:scale(.95); }
.archbond-bar { display:flex; gap:4px; justify-content:center; margin-bottom:4px; }
.bond-heart { font-size:20px; color:#3a3358; }
.bond-heart.filled { color:#ff6a8a; text-shadow:0 0 6px rgba(255,100,140,.4); }
.archquote { font-size:13px; color:#ffd6ee; font-style:italic; margin:6px 0; line-height:1.6; padding:4px 0; }
.archlore { font-size:12px; color:#c8b0e8; line-height:1.7; margin:6px 0; padding:4px 0; border-top:1px solid rgba(200,176,232,.15); }
.codexbox.archivable { cursor:pointer; transition:border-color .15s; }
.codexbox.archivable:hover { border-color:#8d7fff; }
.codexbox.archivable:active { transform:scale(.99); }
/* P3.5 bond≥2 待机小动画（立绘轻微跳动） */
.bond-idle-anim { animation:bondIdle 2.5s ease-in-out infinite; }
@keyframes bondIdle { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }

/* ===================== P5.1 金蛋 / P5.2 突破 / P5.3 变异三选一 ===================== */
/* P5.2 突破层数角标 */
.sicon .slb-badge {
  position:absolute; top:-2px; right:-2px; font-size:8px; font-weight:800; color:#ff6a8a;
  background:rgba(60,20,40,.85); border-radius:4px; padding:0 3px; line-height:1.2;
  text-shadow:0 0 4px rgba(255,100,140,.6); border:1px solid rgba(255,100,140,.5);
}
/* P5.1 档案馆金蛋分布 */
.archegg-section { margin-bottom:6px; }
.archegg-row { display:flex; flex-wrap:wrap; gap:4px; }
.archegg-chip {
  font-size:10px; font-weight:700; color:#776e9e; background:rgba(30,24,50,.6);
  border:1px solid #3c3560; border-radius:4px; padding:2px 6px;
}
.archegg-chip.has { color:#ffd866; border-color:rgba(255,216,102,.4); background:rgba(50,40,20,.6); }
/* P5.3 变异因子三选一卡片 */
.card.mutpickcard { flex-direction:row; align-items:center; min-height:70px; }
.mutpick-icon { font-size:28px; width:44px; text-align:center; flex-shrink:0; text-shadow:0 0 8px currentColor; }
/* P5.3 无尽成绩导出按钮 */
.endless-export-btn { background:linear-gradient(180deg,#2a1a4a,#160c2a); border-color:#b08aff; color:#d8b0ff; margin:8px 0; }
.endless-export-btn:active { transform:scale(.97); }
/* P5.4 冒险模式 */
.adventurecard { flex-direction:column; text-align:center; min-height:auto; }
.adventurecard.gated { min-height:120px; justify-content:center; }
.adventure-next-btn { background:linear-gradient(180deg,#1a3a2a,#0c1a14); border-color:#7ec850; color:#9fffc0; margin:8px 0; font-weight:800; }
.adventure-next-btn:active { transform:scale(.97); }
/* P5.5 每日挑战 */
.daily-info { background:rgba(255,255,255,.04); border-radius:10px; padding:10px 12px; margin:8px 0; text-align:left; }
.daily-info .statrow { display:flex; justify-content:space-between; padding:3px 0; }
.daily-note { color:#ffd866; font-weight:700; margin-top:6px; }

/* ===================== P6 手感与"赌场感"打磨 ===================== */

/* P6.2 reel-spin 卡片 */
.reel-spin-card { opacity:.7; filter:blur(.5px); }
.reel-spin-card .cname { font-size:14px; }

/* P6.2 金币喷泉粒子 */
.coin-fountain-particle {
  position:fixed; z-index:20; width:16px; height:16px; image-rendering:pixelated;
  pointer-events:none;
  animation:coin-fountain .9s ease-out forwards;
}
@keyframes coin-fountain {
  0% { transform:translate(0,0) scale(1); opacity:1; }
  40% { transform:translate(var(--vx,0), var(--vy,-80px)) scale(1.2); opacity:1; }
  100% { transform:translate(calc(var(--vx,0) * 1.5), 60px) scale(.6); opacity:0; }
}

/* P6.5 色弱友好：系别角标文字 */
.sclandot { font-size:7px; font-weight:800; color:#fff; text-shadow:0 0 2px rgba(0,0,0,.8);
  display:flex; align-items:center; justify-content:center; line-height:1; }

/* P6.6 新手引导半透明提示框 */
.guide-overlay {
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 80px);
  transform:translateX(-50%); z-index:8; pointer-events:none;
  max-width:320px; width:90%;
}
.guide-box {
  background:rgba(20,16,40,.88); border:2px solid #6ea8ff; border-radius:12px;
  padding:10px 14px; text-align:center;
  box-shadow:0 0 16px rgba(110,168,255,.35);
  animation:guide-pulse 2s ease-in-out infinite;
}
@keyframes guide-pulse {
  0%,100% { box-shadow:0 0 12px rgba(110,168,255,.3); }
  50% { box-shadow:0 0 20px rgba(110,168,255,.5); }
}
.guide-step { font-size:13px; color:#cfe6ff; font-weight:600; line-height:1.5; }
.guide-dots { display:flex; gap:6px; justify-content:center; margin-top:8px; }
.guide-dot { width:8px; height:8px; border-radius:50%; background:#3a3358; }
.guide-dot.done { background:#6ea8ff; }

/* P6.6 死亡建议 */
.death-tip {
  background:rgba(110,168,255,.12); border:1px solid rgba(110,168,255,.4);
  border-radius:10px; padding:8px 12px; margin:8px 0;
  font-size:13px; color:#cfe6ff; font-weight:600; text-align:center;
}

/* P6.7 统计页签 */
.stat-row {
  display:flex; align-items:center; gap:10px; text-align:left;
  background:rgba(255,255,255,.05); border-radius:10px; padding:10px 12px; margin-bottom:8px;
}
.stat-icon { font-size:20px; flex-shrink:0; }
.stat-label { font-size:14px; color:#cfc6ee; flex:1; }
.stat-value { font-size:16px; font-weight:800; color:#ffd866; flex-shrink:0; }

/* ===================== 画质提升：UI 皮肤打磨 ===================== */

/* 主标题：金色渐变字 */
.title {
  background:linear-gradient(180deg, #fff2c0 0%, #ffd866 45%, #e09a2a 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,190,60,.4)) drop-shadow(0 3px 0 rgba(107,68,0,.8));
  text-shadow:none;
}

/* 卡片质感：过渡 + 顶部高光 + 桌面悬浮反馈 */
.card, .scard, .stagecard, .spellcard, .menubtn, .bigbtn, .iconbtn {
  transition:transform .12s ease, border-color .15s ease, box-shadow .2s ease;
}
.card { position:relative; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 3px 8px rgba(0,0,0,.35); }
@media (hover:hover) {
  .card:hover { transform:translateY(-2px); border-color:#8d7fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 6px 16px rgba(0,0,0,.5), 0 0 12px rgba(141,127,255,.25); }
  .card.gold:hover, .card.rarity-legendary:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 6px 16px rgba(0,0,0,.5), 0 0 18px rgba(255,200,80,.45); }
  .menubtn:hover, .bigbtn:hover { border-color:#8d7fff; }
  .stagecard:hover:not(.locked):not(.gated), .scard:hover:not(.locked):not(.gated), .spellcard:hover:not(.gated) { transform:translateY(-2px); border-color:#8d7fff; }
}

/* 高稀有卡片：流光扫过 */
.card.gold::after, .card.rarity-epic::after, .card.rarity-legendary::after, .card.evocard::after, .card.unioncard::after {
  content:''; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:cardsheen 3.2s ease-in-out infinite;
}
.card.rarity-legendary::after, .card.unioncard::after { animation-duration:2.2s; background:linear-gradient(105deg, transparent, rgba(255,235,180,.2), transparent); }
@keyframes cardsheen {
  0%, 55% { left:-70%; }
  85%, 100% { left:130%; }
}

/* 面板滚动条 */
.panel::-webkit-scrollbar { width:6px; }
.panel::-webkit-scrollbar-track { background:transparent; }
.panel::-webkit-scrollbar-thumb { background:#3c3560; border-radius:3px; }
.panel::-webkit-scrollbar-thumb:hover { background:#554d7d; }

/* HUD 细节：计时器呼吸光、经验条流光 */
#timer { text-shadow:0 2px 3px #000, 0 0 12px rgba(255,255,255,.18); }
#xpfill {
  background:linear-gradient(90deg,#3aa0ff,#6ee7ff 60%,#b5f3ff);
  box-shadow:0 0 8px rgba(110,231,255,.5);
  position:relative; overflow:hidden;
}
#xpfill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  background-size:200% 100%;
  animation:xpsheen 2.4s linear infinite;
}
@keyframes xpsheen { from { background-position:200% 0; } to { background-position:-100% 0; } }

/* 图标按钮玻璃质感 */
.iconbtn { backdrop-filter:blur(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.4); }

/* 绘本墓园：手机战斗 HUD 与画面使用同一套暖墨、骨色和青绿层级。 */
@media (max-width:480px) {
  html[data-art-mode="illustrated"][data-art-state="ready"] #xpwrap {
    height:4px; background:rgba(21,22,17,.76); border-bottom:1px solid rgba(203,185,144,.5);
    box-shadow:0 2px 7px rgba(0,0,0,.34);
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #xpfill {
    background:linear-gradient(90deg,#285f5b,#64d7bd 72%,#baf5df);
    box-shadow:0 1px 2px rgba(100,215,189,.28);
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #lvltext,
  html[data-art-mode="illustrated"][data-art-state="ready"] #timer,
  html[data-art-mode="illustrated"][data-art-state="ready"] #kills,
  html[data-art-mode="illustrated"][data-art-state="ready"] #goldhud {
    color:#e4d5ab; text-shadow:0 2px 3px #151611;
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #lvltext { top:3px; }
  html[data-art-mode="illustrated"][data-art-state="ready"] #timer {
    padding:3px 10px 4px; border:1px solid rgba(203,185,144,.66); border-radius:7px;
    background:linear-gradient(180deg,rgba(43,45,32,.92),rgba(21,22,17,.9));
    box-shadow:inset 0 1px rgba(228,213,171,.16),0 3px 10px rgba(0,0,0,.38);
    font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #rightcol {
    min-width:70px; padding:4px 7px; border-left:2px solid rgba(100,215,189,.7);
    background:linear-gradient(90deg,transparent,rgba(21,22,17,.76));
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] .sicon,
  html[data-art-mode="illustrated"][data-art-state="ready"] .iconbtn,
  html[data-art-mode="illustrated"][data-art-state="ready"] #spellbtn,
  html[data-art-mode="illustrated"][data-art-state="ready"] #ultbtn,
  html[data-art-mode="illustrated"][data-art-state="ready"] .bondic,
  html[data-art-mode="illustrated"][data-art-state="ready"] .arcanahud,
  html[data-art-mode="illustrated"][data-art-state="ready"] .pactic,
  html[data-art-mode="illustrated"][data-art-state="ready"] .mutic {
    border-color:rgba(203,185,144,.78); background:linear-gradient(145deg,rgba(59,59,41,.94),rgba(21,22,17,.94));
    color:#e4d5ab; box-shadow:inset 0 1px rgba(228,213,171,.16),0 3px 10px rgba(0,0,0,.42);
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] .bondic .bondlbl,
  html[data-art-mode="illustrated"][data-art-state="ready"] .pactic .pactlbl,
  html[data-art-mode="illustrated"][data-art-state="ready"] .mutic .mutlbl { color:#e4d5ab !important; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .bondic .bondtier { color:#64d7bd; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .iconbtn { width:44px; height:44px; border-radius:8px; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .sicon img,
  html[data-art-mode="illustrated"][data-art-state="ready"] #spellbtn img { image-rendering:auto; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .card img,
  html[data-art-mode="illustrated"][data-art-state="ready"] .stagecard img,
  html[data-art-mode="illustrated"][data-art-state="ready"] .scard img,
  html[data-art-mode="illustrated"][data-art-state="ready"] .spellcard img,
  html[data-art-mode="illustrated"][data-art-state="ready"] .codexcell img { image-rendering:auto; object-fit:contain; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .sicon {
    width:34px; height:34px; overflow:hidden; border-radius:4px;
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] .sicon img {
    width:31px; height:31px; object-fit:contain;
    filter:drop-shadow(0 2px 2px rgba(11,12,9,.7));
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #spellbtn img { display:none; }
  html[data-art-mode="illustrated"][data-art-state="ready"] #spellbtn::before {
    content:''; width:22px; height:22px; border:2px solid #b9f5df;
    transform:rotate(45deg); box-shadow:inset 0 0 0 4px #20231a,0 0 8px rgba(95,215,194,.5);
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #spellbtn::after {
    content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:#e3a83c;
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #spellbtn .cd { z-index:1; }
  html[data-art-mode="illustrated"][data-art-state="ready"] #spellbtn.ready,
  html[data-art-mode="illustrated"][data-art-state="ready"] #stancebtn[data-stance="guard"] {
    border-color:#64d7bd; color:#baf5df; box-shadow:0 0 12px rgba(100,215,189,.42);
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #stancebtn[data-stance="aggressive"] {
    border-color:#e65b20; color:#ffd06a;
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #ultbtn.ready {
    border-color:#eaa42b; color:#ffd06a; background:radial-gradient(circle,#59401d,#191914 72%);
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #banner {
    top:27%; padding:0 24px; font-size:20px; line-height:1.35; text-wrap:balance;
    color:#e4d5ab; font-family:Georgia,"Songti SC","Noto Serif SC",serif;
    text-shadow:0 2px 0 #151611,0 0 12px rgba(234,164,43,.48);
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] .bondic,
  html[data-art-mode="illustrated"][data-art-state="ready"] .pactic,
  html[data-art-mode="illustrated"][data-art-state="ready"] .mutic { box-shadow:none; backdrop-filter:blur(2px); }
  html[data-art-mode="illustrated"][data-art-state="ready"] #bondspanel {
    top:calc(env(safe-area-inset-top, 0px) + 136px); max-width:76px;
    display:grid; grid-template-columns:repeat(2,30px); gap:4px;
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #bondspanel .bondic {
    width:30px; height:28px; padding:0; justify-content:center;
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] #bondspanel .bondlbl,
  html[data-art-mode="illustrated"][data-art-state="ready"] #bondspanel .bondtier { display:none; }
  html[data-art-mode="illustrated"][data-art-state="ready"] #hudbtns { gap:6px; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .iconbtn { width:40px; height:40px; opacity:.9; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .guide-box {
    background:rgba(21,22,17,.92); border-color:#64d7bd; color:#e4d5ab;
    box-shadow:0 0 16px rgba(100,215,189,.26);
  }
  html[data-art-mode="illustrated"][data-art-state="ready"] .guide-step { color:#e4d5ab; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .guide-dot { background:#53503a; }
  html[data-art-mode="illustrated"][data-art-state="ready"] .guide-dot.done { background:#64d7bd; }
}