/* 驱影人（第一人称幸存者）—— 页面样式。画面是低分辨率 canvas 整数倍放大（最近邻），HUD 图层叠在上面。 */
html, body { margin: 0; height: 100%; background: #090705; overflow: hidden; color: #e8dfcf;
  font-family: "FusionPixel", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; overflow: hidden; background: #090705; cursor: none; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
#view { position: absolute; left: 0; top: 0; }
#vig { position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(5,4,3,.55) 80%, rgba(5,4,3,.9) 100%),
              radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(120,0,20,var(--low, 0)) 100%); }
#weapon { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); pointer-events: none; }
#hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,20,40,0) 40%, rgba(255,20,40,.55) 100%); }
#pickflash { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
#fx { position: absolute; left: 0; top: 0; pointer-events: none; }
#hudc { position: absolute; left: 0; top: 0; pointer-events: none; display: none; }
/* 四角 HUD（高清模式，美术 v3 E，stage 上有 .cm）：没有底部状态栏；经验条变细、等级数字在条下面的左端；强化只放图标不放底板、缩小；计时的大数字画在 #hudc 里（#survive 只留下面一行） */
#stage.cm #hudc { display: block; }
#stage.cm #bar, #stage.cm #barbg { display: none; }
#stage.cm #xpbar { height: 8px; background: rgba(9,7,5,.8); border-bottom: 1px solid #2a4a6a; box-shadow: none; overflow: visible; }
#stage.cm #xpbar .lv { top: calc(var(--hk, 2) * 5.5px); line-height: 1.2; font-size: calc(var(--hk, 2) * 6.5px); color: #cfeaff; }
#stage.cm #xpbar .num { display: none; }
#stage.cm #floorlabel { top: calc(var(--hk, 2) * 15px); left: 8px; font-size: calc(var(--hk, 2) * 6.5px); }
#stage.cm #perks { left: 8px; top: calc(var(--hk, 2) * 26px); gap: 2px; }
#stage.cm #perks .perk { width: calc(var(--hk, 2) * 12px); height: calc(var(--hk, 2) * 12px); background: none; border: none; }
#stage.cm #perks .perk canvas { width: 100%; height: 100%; }
#stage.cm #perks .perk span { font-size: calc(var(--hk, 2) * 5px); }
#stage.cm #survive b, #stage.cm #survive > span { display: none; }
#stage.cm #survive { top: 40px; }
#stage.cm #survive em { font-size: calc(var(--hk, 2) * 6.5px); margin-top: 0; }
#barbg { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #0f0c09; border-top: 2px solid #2e251c; pointer-events: none; }
#bar { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); pointer-events: none; }
#toast { position: absolute; left: 50%; top: 19%; transform: translateX(-50%); text-align: center; pointer-events: none; font-size: 18px; letter-spacing: 2px;
  text-shadow: 0 0 6px #000, 2px 2px 0 #000; }
#toast div { margin: 3px 0; }
/* 局内成就横幅：拿到成就时从上方滑下来，解锁英雄带头像 */
/* 2026-10-07 自动试玩：横幅原来在屏幕正中偏上（top 25%），战斗里一弹就挡住瞄准的地方，最多叠 4 条；挪到右上角雷达下面（top 由 hud.js 按雷达大小设）、缩小一点 */
#achbanner { position: absolute; right: 12px; top: 190px; pointer-events: none; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
#achbanner .ab { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 360px; padding: 6px 12px 6px 8px; background: linear-gradient(90deg, rgba(40,30,16,.95), rgba(14,11,8,.94) 60%);
  border: 1px solid #6a5530; border-left: 4px solid #ffd060; box-shadow: 0 0 18px rgba(255,190,80,.22), inset 0 0 14px rgba(0,0,0,.5); text-align: left; animation: abIn .35s ease-out; }
#achbanner .ab.combo { border-color: #8a5420; border-left-color: #ff9a40; background: linear-gradient(90deg, rgba(70,34,10,.95), rgba(16,10,6,.94) 60%); box-shadow: 0 0 28px rgba(255,150,60,.55), inset 0 0 14px rgba(0,0,0,.5); }
#achbanner .ab.combo b { color: #ffc070; }
#achbanner .ab.hero { border-color: #b88a2e; border-left-color: #fff0b0; box-shadow: 0 0 34px rgba(255,208,96,.6), inset 0 0 14px rgba(0,0,0,.5); }
#achbanner .ab img { width: 48px; height: 52px; image-rendering: auto; flex: none; }
#achbanner .ab canvas { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
#achbanner .ab b { display: block; font-size: 12px; letter-spacing: 2px; color: #ffe066; text-shadow: 1px 1px 0 #000; }
#achbanner .ab span { display: block; font-size: 12px; color: #d6cab2; margin-top: 2px; }
#achbanner .ab em { display: block; font-style: normal; font-size: 12px; color: #ffe9a8; margin-top: 3px; letter-spacing: 1px; }
@keyframes abIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
/* 天赋状态（状态栏左上方）：圣盾层数、血怒加成、还能复活几次、下一枪必暴 */
#trait { position: absolute; bottom: 0; pointer-events: none; display: flex; gap: 6px; font-size: 12px; letter-spacing: 1px; text-shadow: 1px 1px 0 #000, 0 0 6px #000; white-space: nowrap; }
#trait span { padding: 1px 8px; background: rgba(14,11,8,.78); border: 1px solid #4d4033; color: #e0d4bc; }
#trait span.gold { color: #ffe9a8; border-color: #b88a2e; }
#trait span.red { color: #ff8a78; border-color: #8a2a24; }
#trait span.blue { color: #a8c4d0; border-color: #3e5a70; }
#trait span.vio { color: #ffc070; border-color: #a0601e; }
#trait span.dim { color: #6e6252; }
#trait span.cb { color: #ffc070; border-color: #c07a2a; background: rgba(64,34,10,.85); }
#hint { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); font-size: 18px; letter-spacing: 3px; pointer-events: none; opacity: 0;
  text-shadow: 0 0 8px #000, 2px 2px 0 #000; white-space: nowrap; }
#fps { position: absolute; left: 6px; top: 4px; font: 11px/1.3 ui-monospace, Menlo, monospace; color: #8f8; pointer-events: none; white-space: pre; text-shadow: 1px 1px 0 #000; }

/* 标题、暂停、死亡、通关 */
#screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; cursor: default;
  background: rgba(8,6,4,.78); backdrop-filter: blur(2px); }
#screen.hidden { display: none; }
#screen.title { background-color: #080604; background-size: cover; background-position: center; image-rendering: pixelated; backdrop-filter: none; }
#screen.title .box { image-rendering: auto; }
#screen.title h2 { color: #cdbfa4; text-shadow: 0 0 8px #000, 2px 2px 0 #000; }
/* 标题画面下半截压在主视觉上：给说明文字垫一块半透明的暗底，保证读得清 */
#screen.title .desc, #screen.title .diff, #screen.title table, #screen.title .quote, #screen.title .meta, #screen.title .small, #screen.title .keys { background: rgba(8,6,4,.66); }
#screen .keys { display: inline-block; margin: 8px 0 0; padding: 4px 12px; font-size: 12px; line-height: 1.7; color: #978a72; }
#screen .keys b { color: #ffd060; font-weight: 400; }
#screen .slot { padding: 1px 10px; font-size: 12px; letter-spacing: 2px; color: #ffe9a8; background: rgba(60,44,16,.85); border: 1px solid #b88a2e; }      /* 测试存档的标签：暗底金字（以前是一块荧光绿） */
#screen.title h1 { font-size: 48px; }
#screen.title.art { image-rendering: auto; }
#screen.meta { background-color: #060403; background-size: cover; background-position: 50% 50%; image-rendering: pixelated; backdrop-filter: none; }
#screen.meta.art { image-rendering: auto; }
#screen.meta .box { image-rendering: auto; }
/* 自家符号（提灯里的眼睛）：局外界面的标题两边各一个；经验条的等级字前面一个（美术 v3 收尾；图在 js/cover-art.js 的 emblems，启动时塞进 --emb-eye） */
#screen.meta h1 img.emb { height: 46px; width: auto; margin: 0 18px; vertical-align: -12px; }
#stage.cm #xpbar .lv::before { content: ''; display: inline-block; width: calc(var(--hk, 2) * 4px); height: calc(var(--hk, 2) * 6px); margin-right: 6px; vertical-align: -2px; background: var(--emb-eye) center / contain no-repeat; }
#screen h1.logo { margin: 0 auto; line-height: 0; background: none; -webkit-text-fill-color: initial; animation: none; filter: none; }
#screen h1.logo img { height: 92px; width: auto; display: block; margin: 0 auto; filter: drop-shadow(0 3px 10px rgba(0,0,0,.85)); }
#screen.title h2 { margin-bottom: 12px; }
#screen.title .box { padding-top: 14px; }
#screen.title .desc { padding: 6px 12px; max-width: 780px; }
#screen.title .quote { padding: 6px 12px; }
#screen.title table { padding: 4px 8px; }
#screen.title .meta, #screen.title .small { display: inline-block; padding: 3px 12px; }
#screen.dead { background: radial-gradient(ellipse at center, rgba(60,0,10,.7), rgba(8,3,3,.95)); }
#screen.win { background: radial-gradient(ellipse at center, rgba(64,44,12,.72), rgba(8,6,4,.95)); }
#screen .box { max-width: 720px; padding: 28px 36px; max-height: 100vh; overflow-y: auto; box-sizing: border-box; }
/* 大标题：金属金字（渐变只铺一行高、竖着重复，标题折行也对；阴影用 filter——渐变字上 text-shadow 会盖住字面）；倒下的结算标题是血红（.blood） */
#screen h1 { margin: 0 0 6px; font-size: 54px; line-height: 1.25; letter-spacing: 10px; font-weight: 700; color: #ffd98a; text-shadow: none;
  background: linear-gradient(#fff6d6 6%, #ffd76a 40%, #a86c1a 56%, #e8b450 78%, #fff0b8 96%) 0 0 / 100% 1.25em repeat-y;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 4px rgba(0,0,0,.8)) drop-shadow(0 0 16px rgba(255,150,40,.35)); }
#screen h1.blood { background-image: linear-gradient(#ffc8b8 6%, #ff5a46 40%, #8a1010 58%, #d0342a 80%, #ff9a80 96%); color: #e04030; }
#screen h2 { margin: 0 0 22px; font-size: 18px; letter-spacing: 8px; font-weight: 400; color: #978a72; }
#screen .quote { margin: 18px 0 26px; font-size: 18px; letter-spacing: 3px; color: #cdbfa4; line-height: 1.7; }
#screen .go { margin-top: 26px; font-size: 18px; letter-spacing: 4px; color: #ffd060; animation: blink 1.4s infinite; cursor: pointer; }
@keyframes blink { 50% { opacity: .45; } }
#screen table { margin: 0 auto; border-collapse: collapse; font-size: 12px; text-align: left; color: #b4a68c; }
#screen td { padding: 3px 14px; }
#screen td:first-child { color: #ffd060; text-align: right; letter-spacing: 1px; white-space: nowrap; }
#screen .stats { display: inline-grid; grid-template-columns: auto auto; gap: 6px 26px; margin: 8px 0; font-size: 18px; text-align: left; color: #d6cab2; }
#screen .stats b { color: #ffd060; text-align: right; font-weight: 600; }
#screen .small { margin-top: 18px; font-size: 12px; color: #6e6252; letter-spacing: 1px; }
#screen .box.codex .small { color: #978a72; }                                      /* 图鉴的按键提示提亮（审核：3.3:1 太暗） */
#screen .sliders { margin-top: 18px; font-size: 12px; color: #978a72; display: grid; grid-template-columns: auto 160px; gap: 8px 12px; justify-content: center; align-items: center; }
/* 滑块：暗槽 + 金色的已填部分（--p 由 game.js 的 paintRanges 按当前值设）+ 金色的拨块 */
#screen input[type=range] { -webkit-appearance: none; appearance: none; width: 160px; height: 18px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
#screen input[type=range]::-webkit-slider-runnable-track { height: 6px; border: 1px solid #000; box-shadow: 0 0 0 1px #4d4033; background: linear-gradient(90deg, #7a4c14 0, #ffd060 var(--p), #1a1510 var(--p)); }
#screen input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 18px; margin-top: -7px; border: 1px solid #000; background: linear-gradient(90deg, #fff0b8, #d8a040 55%, #7a4c14); box-shadow: 0 0 6px rgba(255,200,80,.5); }
#screen input[type=range]::-moz-range-track { height: 6px; border: 1px solid #000; box-shadow: 0 0 0 1px #4d4033; background: #1a1510; }
#screen input[type=range]::-moz-range-progress { height: 6px; background: linear-gradient(90deg, #7a4c14, #ffd060); }
#screen input[type=range]::-moz-range-thumb { width: 10px; height: 18px; border-radius: 0; border: 1px solid #000; background: linear-gradient(90deg, #fff0b8, #d8a040 55%, #7a4c14); }
#screen input[type=range]:hover::-webkit-slider-thumb { filter: brightness(1.15); }

/* HUD：地图和角色标签、已有强化、倒计时、雷达、首领血条 */
/* 经验条：屏幕最上方一整条（像《吸血鬼幸存者》），升级是这个游戏最重要的节奏——2026-10-01 用户反馈“状态栏里的经验条太不显眼”。
   吃到结晶闪一下，快满了发光脉动，升级时整条闪金色 */
#xpbar { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: rgba(9,7,5,.88); border-bottom: 2px solid #2a4a6a; box-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; overflow: hidden; }
#xpbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0); }
#xpbar .fill { background: linear-gradient(#9ff0ff, #3ab0ff 45%, #1a6ad8); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
#xpbar .gain { background: #ffffff; opacity: .85; }
#xpbar .lv { position: absolute; left: 8px; top: 0; line-height: 16px; font-size: 12px; letter-spacing: 2px; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 4px #000; font-weight: 700; }
#xpbar .num { position: absolute; right: 10px; top: 0; line-height: 16px; font-size: 12px; color: #cfeaff; text-shadow: 1px 1px 0 #000; }
#xpbar.near { border-bottom-color: #9ff0ff; animation: xpNear .7s ease-in-out infinite alternate; }
#xpbar.up { border-bottom-color: #ffd060; }
#xpbar.up .fill { background: linear-gradient(#fff3b0, #ffd060 45%, #d89a20); }
@keyframes xpNear { from { box-shadow: 0 2px 8px rgba(0,0,0,.6); } to { box-shadow: 0 2px 16px rgba(120,220,255,.85); } }
#floorlabel.fade { animation: infoFade 7s forwards; }
@keyframes infoFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
#floorlabel { position: absolute; left: 12px; top: 24px; font-size: 12px; letter-spacing: 2px; color: #978a72; text-shadow: 1px 1px 0 #000, 0 0 6px #000; pointer-events: none; }
#survive { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); text-align: center; font-size: 12px; letter-spacing: 3px; color: #cdbfa4; text-shadow: 1px 1px 0 #000, 0 0 8px #000; pointer-events: none; white-space: nowrap; }
#survive b { font-size: 30px; letter-spacing: 4px; color: #ffd060; font-weight: 600; line-height: 1.1; margin-right: 6px; }
#survive em { display: block; font-style: normal; font-size: 12px; letter-spacing: 2px; color: #ff8a78; }
#survive.warn b { color: #ff8a6a; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .55; } }
#radar { position: absolute; right: 10px; top: 26px; pointer-events: none; display: none; }
#bossbar { position: absolute; left: 50%; top: 88px; transform: translateX(-50%); width: min(520px, 50vw); text-align: center; display: none; pointer-events: none; }
#bossbar span { display: block; font-size: 18px; letter-spacing: 6px; color: #ff8a7a; text-shadow: 1px 1px 0 #000, 0 0 8px #000; margin-bottom: 3px; }
#bossbar i { display: block; height: 12px; background: rgba(14,11,8,.8); border: 2px solid #5a2424; }
#bossbar u { display: block; height: 100%; background: linear-gradient(#ff5a78, #b01830); }
/* 首领战（2026-10-03）：血条带“掉血残影”、第二形态换首领的颜色、踉跄时发金光；下面一条细的护甲条；名字后面是形态和状态标签 */
#bossbar span b { font-weight: 600; color: #ffb4a0; }
#bossbar span small { margin-left: 10px; font-size: 12px; letter-spacing: 3px; color: #cdbfa4; }
#bossbar span em { font-style: normal; }
#bossbar span em i { display: inline-block; margin-left: 8px; padding: 0 6px; font-style: normal; font-size: 12px; letter-spacing: 2px; border: 1px solid; background: rgba(9,6,4,.7); animation: blink 0.9s infinite; }
#bossbar .hp { position: relative; height: 14px; }
#bossbar .hp .in { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }          /* 填充那块（换皮后挪到原画框里面空心的地方，js/uiskin.js） */
#bossbar .hp u, #bossbar .hp s { position: absolute; left: 0; top: 0; height: 100%; }
#bossbar .hp s { display: block; background: rgba(255,240,240,.75); text-decoration: none; }
#bossbar .hp.f2 { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.35); }
#bossbar .hp.weak { box-shadow: 0 0 14px rgba(255,208,96,.85); border-color: #ffd060; }
#bossbar .ar { position: relative; height: 5px; margin-top: 3px; border: 1px solid #4a5068; background: rgba(14,11,8,.8); }
#bossbar .ar u { background: linear-gradient(#e8f0ff, #8a96b8); }
#bossbar .ar small { position: absolute; left: 0; right: 0; top: 6px; font-size: 12px; letter-spacing: 2px; color: #b8c4e0; text-shadow: 1px 1px 0 #000; }
#survive em.bt { color: #ff8a7a; }
#survive em.md { display: none; }                                                    /* 模式名（试验房间 / 首领练习）：复古模式已经在 span 里写了 */
#stage.cm #survive em.md { display: block; color: #b4a68c; letter-spacing: 3px; }
#survive.boss b { color: #b4a68c; }
/* 正中的大字：首领出场前的倒计时、首领场的 3-2-1、打完后回荒原的提示、破甲 / 破防 / 变身…… */
#bosswarn { position: absolute; left: 50%; top: 35%; transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 2px 2px 0 #000, 0 0 14px #000; white-space: nowrap; }
#bosswarn small { display: block; font-size: 18px; letter-spacing: 6px; color: #e8cfc4; }
#bosswarn b { display: block; font-size: 30px; letter-spacing: 8px; color: #ff6a5a; font-weight: 700; }
#bosswarn b.sm { font-size: 18px; letter-spacing: 3px; color: #e8dcc8; font-weight: 400; }
#bosswarn big { display: block; font-size: 84px; line-height: 1.05; font-weight: 700; color: #fff0e6; }
#bosswarn big.pulse { animation: bwPulse 1s infinite; }
#bosswarn big.go { font-size: 66px; letter-spacing: 16px; color: #ffd060; animation: bwGo .9s ease-out; }
#bosswarn.clear b.sm { margin-top: 4px; }
#bosswarn .co { margin-top: 10px; }
#bosswarn .co b { font-size: 48px; letter-spacing: 12px; color: inherit; }
#bosswarn .co small { color: inherit; opacity: .8; font-size: 12px; }
#bosswarn .co.small b { font-size: 24px; letter-spacing: 8px; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 10px #000; }
#bosswarn .co.small small { font-size: 12px; }
@keyframes bwPulse { 0% { transform: scale(1.35); opacity: .4; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.94); opacity: .85; } }
@keyframes bwGo { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
/* 换场地：先黑下去（带一圈首领颜色的光），换完再亮起来 */
#loading { position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: #0c0a08; color: #e8dcc0; font-size: 18px; letter-spacing: 0.3em; text-align: center; padding: 24px; }
#fade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at center, var(--fc, #6a1a14) 0%, rgba(8,6,4,.96) 55%, #000 100%); }
/* 首领练习：选首领的格子（7 张图 × 5 / 10 / 15 分钟） */
#screen .bossgrid { display: grid; grid-template-columns: 120px repeat(3, 1fr); gap: 4px 6px; margin: 8px 0; text-align: left; }      /* 2026-10-07 十张图 30 个首领：一行一张图，名字和等级排在同一行 */
#screen .bossgrid > span { align-self: center; font-size: 12px; color: #a8c4d0; letter-spacing: 2px; }
#screen .bossgrid > span.hd { color: #8c806a; font-size: 12px; text-align: center; }
#screen .bossgrid > span.alt { display: flex; gap: 4px; align-self: stretch; }        /* 每局轮流的两个首领（bossAlt）挤在同一格（2026-10-13） */
#screen .bossgrid > span.alt button { flex: 1; min-width: 0; }
#screen .bossgrid button { padding: 3px 8px; background: rgba(20,15,11,.92); border: 2px solid #4d4033; color: #efe3cb; font: inherit; font-size: 12px; letter-spacing: 1px; cursor: pointer; text-align: left; }
#screen .bossgrid button small { float: right; margin-top: 2px; font-size: 12px; color: #8c806a; letter-spacing: 0; }
#screen .bossgrid button:hover { background: rgba(52,38,26,.95); border-color: var(--bc, #ffd060); }
#screen .bossgrid button.on { border-color: var(--bc, #ffd060); box-shadow: 0 0 12px var(--bc, #ffd060); }
#screen .lvpick { margin: 6px 0; font-size: 12px; color: #b4a68c; }
#screen .lvpick button { margin: 0 3px; padding: 2px 10px; background: rgba(20,15,11,.92); border: 1px solid #4d4033; color: #cbbea6; font: inherit; cursor: pointer; }
#screen .lvpick button.on { border-color: #ffd060; color: #ffd060; }
#botflag { position: absolute; left: 12px; bottom: 58px; display: none; padding: 4px 12px; font-size: 12px; letter-spacing: 2px; color: #a8c4d0; background: rgba(14,11,8,.72); border: 1px solid #3e5560; pointer-events: none; text-shadow: 1px 1px 0 #000; }
#perks { position: absolute; left: 10px; top: 46px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 34vw; pointer-events: none; }
#perks .perk { position: relative; width: 36px; height: 36px; background: rgba(14,11,8,.72); border: 1px solid #4d4033; }
#perks .perk canvas { width: 34px; height: 34px; image-rendering: pixelated; }
#perks .perk span { position: absolute; right: 1px; bottom: 0; font-size: 12px; color: #ffd060; text-shadow: 1px 1px 0 #000; }
#perks .perk.pulse { animation: pulse .55s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #ffd060; transform: scale(1.35); border-color: #ffd060; } 100% { box-shadow: 0 0 0 10px rgba(255,208,96,0); transform: scale(1); } }

/* 升级三选一、选角色、成就 */
#screen.pick { background: radial-gradient(ellipse at center, rgba(30,22,15,.88), rgba(8,6,4,.96)); }
#screen .box.wide { max-width: 1040px; }
#screen h1.mid { font-size: 36px; letter-spacing: 8px; margin: 10px 0 22px; }
#screen .cards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 6px 0 22px; }
#screen .card { width: 230px; padding: 16px 14px 12px; background: rgba(20,15,11,.92); border: 2px solid var(--c, #8a7c66); text-align: center; cursor: pointer;
  box-shadow: 0 0 18px rgba(0,0,0,.6), inset 0 0 22px rgba(0,0,0,.5); transition: transform .12s, box-shadow .12s; }
#screen .card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 0 26px var(--c), inset 0 0 22px rgba(0,0,0,.4); }
#screen .card canvas { width: 72px; height: 72px; image-rendering: pixelated; display: block; margin: 0 auto 8px; }
#screen .card b { display: block; font-size: 24px; letter-spacing: 3px; color: #f3e9d6; }
#screen .card i { display: block; font-style: normal; font-size: 12px; letter-spacing: 3px; color: var(--c); margin: 2px 0 8px; }
#screen .card p { margin: 6px 0; font-size: 12px; line-height: 1.6; color: #cbbea6; min-height: 4.8em; text-align: left; }
#screen .card small { display: block; margin-top: 8px; color: #6e6252; letter-spacing: 2px; }
/* 卡片左上角的按键（1～4）：2026-10-08 减字，代替卡片底下的“按 1”和画面底下的“按 1 2 3 选择” */
#screen .card { position: relative; }
#screen .card .key { position: absolute; left: 6px; top: 4px; width: 18px; line-height: 18px; font-style: normal; font-size: 12px; font-weight: 700; text-align: center; color: #ffd060; background: rgba(0,0,0,.45); border: 1px solid #6a5530; }
#screen .card .pips { letter-spacing: 3px; color: #ffd060; font-size: 12px; }
#screen .card .pips .off { color: #3a3128; }
/* 组合技：升级卡片上的提示、暂停画面和成就页的一览 */
#screen .card .cb { display: block; margin: 4px 0 0; font-style: normal; font-size: 12px; line-height: 1.5; color: #d8bc94; text-align: left; }
#screen .card .cb.done { color: #ffe066; font-size: 12px; }
#screen .card.combo { box-shadow: 0 0 22px rgba(255,208,96,.45), inset 0 0 22px rgba(0,0,0,.4); border-color: #ffd060; }
#screen .perks .pk.cbk { color: #ffc070; border-color: #c07a2a; background: rgba(64,34,10,.6); }
#screen .combos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 980px; margin: 8px auto; text-align: left; }
#screen .combos > div { padding: 6px 10px; background: rgba(20,15,11,.92); border: 1px solid #3a3128; font-size: 12px; line-height: 1.5; color: #8c806a; }
#screen .combos > div.on { border-color: #c07a2a; box-shadow: 0 0 12px rgba(255,150,60,.35); color: #e0d4bc; }
#screen .combos b { display: block; font-size: 12px; letter-spacing: 2px; color: #ffc070; }
#screen .combos small { display: block; color: #978a72; }
#screen .combos small .ok { color: #ffe9a8; }
#screen .combos p { margin: 2px 0 0; }
#screen .perks { margin-top: 14px; font-size: 12px; line-height: 1.9; }
#screen .perks .pk { display: inline-block; margin: 0 6px; padding: 0 8px; border: 1px solid currentColor; letter-spacing: 1px; cursor: default; color: #b8ad98; }
#screen .perks .pk.dim { color: #6e6252; border-color: #3a3128; }
#screen .meta { margin: 14px 0 4px; font-size: 12px; color: #b4a68c; letter-spacing: 1px; }
#screen .meta b { color: #ffd060; }
#screen .meta a { color: #a8c4d0; cursor: pointer; text-decoration: underline; }

#screen .diff { margin: 10px 0 2px; font-size: 12px; color: #b4a68c; letter-spacing: 1px; }
#screen .diff .df { margin: 0 4px; padding: 3px 16px; background: rgba(20,15,11,.92); border: 1px solid #4d4033; color: #cbbea6; font: inherit; font-size: 12px; letter-spacing: 2px; cursor: pointer; }
#screen .diff .df.on { border-color: #ffd060; color: #ffd060; background: rgba(30,22,12,.6); }
#screen .diff .df:hover { background: rgba(52,38,26,.95); }
#screen .diff .dn { margin-left: 10px; font-size: 12px; color: #6e6252; }

/* 选角色、选地图 */
#screen .pick-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
#screen #maps { max-width: 600px; margin-left: auto; margin-right: auto; }                       /* 12 张图排成 6 + 6，不再是 10 + 2 */
#screen .ch { width: 138px; padding: 10px 8px 8px; background: rgba(20,15,11,.92); border: 2px solid #4d4033; color: #e0d4bc; text-align: center; cursor: pointer; font: inherit; }
#screen .ch canvas { width: 64px; height: 64px; image-rendering: pixelated; display: block; margin: 0 auto 4px; }
#screen .ch b { display: block; font-size: 18px; letter-spacing: 2px; color: #f3e9d6; }
#screen .ch small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: #8c806a; }
#screen .ch.on { border-color: #ffd060; box-shadow: 0 0 14px rgba(255,208,96,.35); }
#screen .ch.locked { opacity: .5; }
#screen .ch.locked canvas { filter: grayscale(1); }
#screen .ch { position: relative; }
#screen .ch.pt { width: 88px; padding: 3px 2px 5px; background: linear-gradient(rgba(36,27,18,.55), rgba(11,8,6,.95)); }      /* 12 位英雄一排放下（标题的盒子放宽到 1200） */
#screen .ch.pt b { font-size: 12px; letter-spacing: 1px; }
#screen .ch.pt small { font-size: 12px; letter-spacing: 0; white-space: nowrap; overflow: hidden; }
#screen #chars { gap: 6px; }
#screen.title .box.wide { max-width: 1200px; }
#screen .ch.pt img { width: 80px; height: 88px; image-rendering: auto; display: block; margin: 0 auto 2px; }
#screen .ch.peek { border-color: #e0d4bc; box-shadow: 0 0 14px rgba(230,215,190,.45); }
#screen .ch .pbar { margin: 4px auto 0; width: 86%; }
#screen .ch .star { position: absolute; right: 6px; top: 4px; font-style: normal; color: #ffd060; font-size: 12px; text-shadow: 1px 1px 0 #000, 0 0 6px rgba(255,208,96,.7); }
#screen .ch.pt.locked { opacity: .75; }
#screen .ch.pt.locked img { filter: grayscale(1) brightness(.3) contrast(1.2); }
#screen .ch.pt.on { background: radial-gradient(ellipse at 50% 100%, rgba(255,190,80,.3), rgba(255,190,80,0) 72%), rgba(22,16,10,.96); }
#screen .ch:not(.locked):hover { background: rgba(52,38,26,.95); }
#screen .desc { min-height: 2.6em; margin: 6px auto 4px; max-width: 640px; font-size: 12px; line-height: 1.6; color: #b4a68c; }
#screen .mp { width: 96px; padding: 4px 2px; }                      /* 10 张图一排放得下（1200 宽的盒子） */
#screen .mp canvas { width: 36px; height: 36px; }
#screen .mp b { font-size: 12px; letter-spacing: 1px; }
/* 进度条 */
#screen .pbar { display: inline-block; vertical-align: middle; width: 120px; height: 6px; background: #1a1510; border: 1px solid #3a3128; }
#screen .pbar i { display: block; height: 100%; background: linear-gradient(#ffe066, #c8902e); }
#screen .pbar.wide { width: 220px; }
#screen .prog { display: block; margin-top: 3px; font-size: 12px; color: #978a72; letter-spacing: 0; }
#screen .prog .pbar { margin-right: 8px; }
/* 进度条 + 进度文字排一行、不换行（2026-10-13 审核：成就页的英雄卡窄，“0:00 / 6:00”被挤到下一行、条后面只剩半截）：条可以缩（最短 36px），字不缩 */
#screen .prog { display: flex; align-items: center; white-space: nowrap; }
#screen .prog .pbar { flex: 0 1 auto; min-width: 36px; }
#screen .desc .prog, #screen .meta .prog { display: inline-flex; margin: 0 0 0 10px; }
#screen .trait { color: #ffb870; }
#screen .dim { color: #8c806a; }
#screen .meta.next { font-size: 12px; color: #978a72; margin-top: 2px; }
#screen.title .meta.next { display: inline-block; padding: 3px 12px; }
/* 成就页：分页、英雄解锁一览 */
#screen .tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0 6px; }
#screen .tabs .tb { padding: 4px 12px; background: rgba(20,15,11,.92); border: 1px solid #4d4033; color: #cbbea6; font: inherit; font-size: 12px; letter-spacing: 1px; cursor: pointer; }
#screen .tabs .tb.on { border-color: #ffd060; color: #ffd060; background: rgba(30,22,12,.6); }
#screen .tabs .tb:hover { background: rgba(52,38,26,.95); }
#screen h3 { margin: 16px 0 4px; font-size: 12px; letter-spacing: 4px; font-weight: 400; color: #978a72; }
#screen .heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 980px; margin: 10px auto; text-align: left; }
#screen .ht { position: relative; display: flex; gap: 10px; align-items: center; padding: 6px 10px 6px 4px; background: rgba(20,15,11,.92); border: 1px solid #3a3128; font-size: 12px; line-height: 1.5; color: #8c806a; }
#screen .ht.got { border-color: #b88a2e; }
#screen .ht img { width: 64px; height: 70px; flex: none; image-rendering: auto; }
#screen .ht.locked img { filter: grayscale(1) brightness(.35) contrast(1.2); }
#screen .ht b { font-size: 12px; letter-spacing: 2px; color: #f3e9d6; margin-right: 6px; }
#screen .ht .trait { display: block; font-size: 12px; }
#screen .ht small { display: block; color: #b4a68c; }
#screen .ht .star { font-style: normal; color: #ffd060; }
#screen .ach img { width: 40px; height: 44px; flex: none; image-rendering: auto; }
#screen .ach div.hero:not(.got) img { filter: grayscale(1) brightness(.4); }
#screen .ach .rw { color: #ffe9a8; }
#screen .ach .rw b { color: #ffe9a8; }
/* 结算：新解锁的英雄、离下一位英雄最近的 */
#screen .newheroes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0 0; }
#screen .newhero { display: flex; gap: 10px; align-items: center; padding: 6px 14px 6px 6px; border: 2px solid #ffd060; background: rgba(30,22,12,.6); box-shadow: 0 0 24px rgba(255,208,96,.35); text-align: left; }
#screen .newhero img { width: 80px; height: 88px; image-rendering: auto; }
#screen .newhero i { display: block; font-style: normal; font-size: 12px; letter-spacing: 3px; color: #ffe066; }
#screen .newhero b { display: block; font-size: 24px; letter-spacing: 4px; color: #fff3c8; }
#screen .newhero .trait { display: block; font-size: 12px; max-width: 260px; }
#screen .nexts { margin: 12px auto 0; max-width: 560px; font-size: 12px; color: #b4a68c; text-align: left; line-height: 1.6; }
#screen .nexts i { display: block; font-style: normal; color: #6e6252; letter-spacing: 2px; }
#screen .nexts .prog { display: inline-flex; margin-left: 10px; }
#screen .ach { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 760px; margin: 10px auto; text-align: left; }
#screen .ach > div { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(20,15,11,.92); border: 1px solid #3a3128; font-size: 12px; line-height: 1.5; color: #8c806a; }
#screen .ach > div.got { border-color: #b88a2e; color: #e8dcc0; }
#screen .ach canvas { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
#screen .ach b { color: #ffd060; }
#screen .ach small { display: block; color: #8c806a; }
#screen .newach { margin: 14px auto 0; max-width: 560px; padding: 10px 14px; border: 1px solid #b88a2e; background: rgba(30,22,12,.5); color: #ffe9a8; font-size: 12px; line-height: 1.7; text-align: left; }
#screen .btns { margin-top: 18px; display: flex; gap: 12px; justify-content: center; }
#screen .btns button { padding: 6px 22px; background: rgba(20,15,11,.92); border: 1px solid #4d4033; color: #cbbea6; font: inherit; font-size: 12px; letter-spacing: 2px; cursor: pointer; }
#screen .btns button:hover { background: rgba(52,38,26,.95); }
#screen .card.picked { transform: translateY(-8px) scale(1.05); box-shadow: 0 0 34px var(--c), inset 0 0 22px rgba(0,0,0,.4); background: rgba(52,40,24,.96); }
#screen .card .pickedtag { margin-top: 6px; padding: 1px 0; font-size: 12px; letter-spacing: 3px; color: #16110a; background: var(--c); }
/* 图鉴（2026-10-07，js/codex.js）：左边按地图 / 种类分组的格子，右边是详情（放大图循环播放动作、数值、介绍、打法） */
#screen.panel { background: radial-gradient(ellipse at 50% 30%, rgba(36,26,16,.94), rgba(8,6,4,.98) 70%); }
#screen .box.codex { max-width: 1180px; width: 96vw; }
#screen .cx-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; text-align: left; height: max(340px, min(640px, calc(100vh - 396px))); }          /* 2026-10-13：-380 时盒子高出 12 像素，底下的按键提示被裁掉半行 */
#screen .cx-grid { overflow-y: auto; padding-right: 6px; }
#screen .cx-group h4 { margin: 8px 0 4px; font-size: 12px; font-weight: 400; letter-spacing: 3px; color: #978a72; }
#screen .cx-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
#screen .cx-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; background: rgba(20,15,11,.92); border: 1px solid #3a3128; color: #efe3cb; font: inherit; font-size: 12px; cursor: pointer; }
#screen .cx-cell canvas { width: 64px; height: 64px; image-rendering: pixelated; }
#screen .cx-cell canvas[data-cxicon] { width: 48px; height: 48px; margin: 8px 0; }
#screen .cx-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen .cx-cell.lock { color: #594f42; }
#screen .cx-cell:hover { background: rgba(52,38,26,.95); border-color: #8a7048; }
#screen .cx-cell.on { border-color: #ffd060; box-shadow: 0 0 10px rgba(255,208,96,.45); background: rgba(30,22,12,.55); }
#screen .cx-detail { overflow-y: auto; padding: 10px 14px; background: rgba(13,10,7,.92); border: 1px solid #3a3128; font-size: 12px; line-height: 1.7; color: #d6cab2; }
#screen .cx-empty { margin-top: 40%; text-align: center; color: #6e6252; }
#screen .cx-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 230px; margin: -10px -14px 6px; background: radial-gradient(ellipse at 50% 92%, rgba(200,130,60,.35), rgba(13,10,7,0) 62%), linear-gradient(rgba(8,6,4,.0), rgba(30,22,15,.6)); border-bottom: 1px solid #2a231c; }
#screen .cx-stage.elite { background: radial-gradient(ellipse at 50% 92%, rgba(255,200,80,.35), rgba(13,10,7,0) 62%), linear-gradient(rgba(8,6,4,.0), rgba(50,34,10,.6)); }
#screen .cx-stage canvas { image-rendering: pixelated; }
#screen .cx-stage.icon { align-items: center; height: 180px; }
#screen .cx-stage.icon canvas { width: 144px; height: 144px; }
#screen .cx-stage.combo { gap: 10px; font-size: 12px; color: #efe3cb; }
#screen .cx-stage.combo i { font-style: normal; font-size: 24px; color: #ffd060; }
#screen .cx-need { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#screen .cx-need canvas { width: 72px; height: 72px; }
#screen #cx-pose { position: absolute; right: 10px; top: 8px; font-style: normal; font-size: 12px; letter-spacing: 3px; color: #8c806a; }
#screen .cx-detail h3 { margin: 6px 0 4px; font-size: 24px; letter-spacing: 4px; color: #f3e9d6; }
#screen .cx-detail h3 em { margin-left: 10px; padding: 0 8px; font-style: normal; font-size: 12px; letter-spacing: 2px; color: #16110a; background: #ffd060; vertical-align: middle; }
#screen .cx-detail h5 { margin: 10px 0 4px; font-size: 12px; font-weight: 400; letter-spacing: 3px; color: #978a72; }
#screen .cx-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#screen .cx-tags span { padding: 0 8px; font-size: 12px; border: 1px solid #4d4033; color: #b4a68c; }
#screen .cx-tags span.lockt { border-color: #6a2a24; color: #ff8a78; }
#screen .cx-lore { margin: 6px 0; color: #e6dac4; }
#screen .cx-lore.dim { color: #7a6e5c; }
#screen .cx-num b, #screen .cx-count b { color: #ffd060; font-weight: 600; }
#screen .cx-num .gold { color: #ffe066; }
#screen .cx-traits { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
#screen .cx-traits span { padding: 0 8px; font-size: 12px; background: rgba(120,36,30,.35); border: 1px solid #7a3028; color: #f0b8a8; }
#screen .cx-tip { margin: 8px 0; padding: 6px 10px; background: rgba(30,22,12,.35); border-left: 3px solid #ffd060; }
#screen .cx-tip b { margin-right: 8px; color: #ffd060; font-weight: 400; letter-spacing: 2px; }
#screen .cx-count { margin-top: 6px; color: #978a72; }
#screen .cx-lv div { margin: 2px 0; } #screen .cx-lv b { margin-right: 8px; color: #a8c4d0; font-weight: 400; }
#screen .cx-switch { display: flex; gap: 6px; margin-top: 8px; }
#screen .cx-switch button, #screen .cx-mini { background: rgba(20,15,11,.92); border: 1px solid #4d4033; color: #cbbea6; font: inherit; font-size: 12px; padding: 3px 14px; cursor: pointer; }
#screen .cx-switch button.on { border-color: #ffd060; color: #ffd060; }
#screen .cx-switch button:disabled { opacity: .45; cursor: default; }
#screen .cx-minis { display: flex; flex-wrap: wrap; gap: 4px; }
#screen .cx-mini { padding: 2px; } #screen .cx-mini canvas { width: 48px; height: 48px; image-rendering: pixelated; display: block; }
#screen .cx-mini:hover { border-color: #ffd060; }
/* 魔物 / 首领页按地图分开（2026-10-13，用户：“小怪好几十只放在一起，按照地图归类”）：左边一列地图（发现了几只），右边只放这张图的（大格子） */
#screen .cx-grid.bymap { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 12px; overflow: hidden; padding-right: 0; }
#screen .cx-maps { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding-right: 2px; }
#screen .cx-map { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; flex: none; padding: 3px 8px 3px 5px; background: rgba(20,15,11,.92); border: 1px solid #3a3128; color: #cbbea6; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
#screen .cx-map canvas { width: 24px; height: 24px; image-rendering: pixelated; }
#screen .cx-map span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen .cx-map small { font-size: 12px; color: #a89a80; }
#screen .cx-map:hover { background: rgba(52,38,26,.95); }
#screen .cx-map.on { border-color: #ffd060; color: #ffe9a8; background: rgba(30,22,12,.6); }
#screen .cx-map.on small { color: #ffd060; }
#screen .cx-map.lock { color: #6e6252; }
#screen .cx-mapview { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-right: 6px; }
#screen .cx-mapview > * { flex: none; }
#screen .cx-mapview > .cx-bmoves { flex: 1 1 auto; min-height: 120px; overflow-y: auto; margin-top: 10px; padding: 4px 12px 6px; background: rgba(13,10,7,.92); border: 1px solid #3a3128; font-size: 12px; line-height: 1.7; color: #d6cab2; }
#screen .cx-mapview.boss { overflow: hidden; }                                       /* 首领页：招式表正好填满格子下面剩的高度，外层不再滚（审核第 2 轮：矮屏幕下面板底边被外层裁掉） */
#screen .cx-mapview.boss > .cx-bmoves { flex: 1 1 0; min-height: 0; }
#screen .cx-bmoves h5 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 4px 0 2px; background: #0b0806; font-size: 12px; font-weight: 400; letter-spacing: 3px; color: #e6dac4; }      /* 滚下去也看得到是谁的招式 */
/* 滚动区（2026-10-13 审核）：细滚动条（Windows 上不出默认的亮灰条）；还能往下滚就在底边画 ▼ + 渐隐，地图列表上下渐隐 */
#screen .cx-grid, #screen .cx-maps, #screen .cx-mapview, #screen .cx-detail, #screen .cx-bmoves { scrollbar-width: thin; scrollbar-color: #8a7048 #140f0b; }
#screen .cx-bmoves.more::after, #screen .cx-detail.more::after { content: '▼'; position: sticky; bottom: 0; display: block; margin-top: -30px; padding-top: 24px; text-align: center; font-size: 12px; line-height: 1.5; color: #b48a48; background: linear-gradient(rgba(11,8,6,0), #0b0806 75%); pointer-events: none; }
#screen .cx-maps.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
#screen .cx-maps.less { -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px); }
#screen .cx-maps.more.less { -webkit-mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent); }
#screen .nw { white-space: nowrap; }
#screen .cx-mapview h4 { margin: 2px 0 2px; font-size: 18px; font-weight: 400; letter-spacing: 6px; color: #f3e9d6; }
#screen .cx-mapview h4 small { margin-left: 12px; font-size: 12px; letter-spacing: 1px; color: #978a72; }
#screen .cx-mapview p { margin: 0 0 10px; font-size: 12px; color: #a89a80; }
#screen .cx-row.big { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; }
#screen .cx-row.big .cx-cell { padding: 6px 2px; }
#screen .cx-row.big .cx-cell canvas { width: 96px; height: 96px; }
#screen .cx-cell small { font-size: 12px; color: #a89a80; }
#screen .cx-cell.on small { color: #d9b878; }
/* 首领的招式表：每招一行，第二形态的变化另起一行（红），专属招 / 第二形态才有的标出来 */
#screen .cx-moves { margin: 0; padding: 0; list-style: none; }
#screen .cx-moves li { margin: 4px 0; padding: 1px 0 1px 10px; border-left: 2px solid #4d4033; }
#screen .cx-moves li.f2 { border-left-color: #8a3a2a; }
#screen .cx-moves b { margin-right: 6px; color: #ffd060; font-weight: 400; letter-spacing: 1px; }
#screen .cx-moves em { margin-right: 6px; padding: 0 5px; font-style: normal; font-size: 12px; color: #16110a; background: #b48a48; }
#screen .cx-moves em.f2 { background: #b8483a; color: #fff0e8; }
#screen .cx-moves i { display: block; font-style: normal; color: #e09078; }
#screen .cx-moves i.inl { display: inline; margin-left: 8px; }
#screen .cx-how { margin: 6px 0; color: #a89a80; }
#screen .cx-how b { margin-right: 8px; color: #978a72; font-weight: 400; letter-spacing: 2px; }
#screen .cx-rules { margin: 6px 0; color: #a89a80; }
#screen .cx-rules summary { cursor: pointer; color: #978a72; letter-spacing: 1px; }
#screen .cx-rules ul { margin: 4px 0 0; padding-left: 18px; }
/* ===== 换皮（2026-10-07，哥特金属石质）：边框图在 js/uiskin.js 里按切片生成（html.fx 时才有）；这里是布局和动效 ===== */
#screen [hidden] { display: none !important; }
#screen .box { position: relative; z-index: 1; }
#screen canvas.embers { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; z-index: 0; }
#screen.title { animation: titleDrift 40s ease-in-out infinite alternate; }
@keyframes titleDrift { from { background-position: 50% 45%; } to { background-position: 50% 58%; } }
/* 标题画面：开始游戏单独一行（大按钮），其余入口一排小按钮；操作说明默认收起 */
#screen .btns.main { margin-top: 12px; }
#screen .btns.sub { margin-top: 8px; flex-wrap: wrap; gap: 8px; }
#screen .btns.sub button { font-size: 12px; }
.fx #screen .ch.pt { width: 84px; padding: 0 0 3px; }
.fx #screen .ch.pt img { width: 68px; height: 75px; }
.fx #screen #chars { gap: 4px; }
.fx #screen .mp { width: 94px; padding: 0 0 2px; }
.fx #screen .cx-cell { padding: 0 0 2px; }
.fx #screen .cx-cell canvas { width: 60px; height: 60px; }
.fx #screen .cx-cell canvas[data-cxicon] { width: 48px; height: 48px; margin: 6px 0; }
.fx #screen .cx-row.big .cx-cell { padding: 4px 0; }
/* 拿到的强化：图标槽 + 右下角等级 */
#screen .perks .pk.ic { position: relative; display: inline-block; width: 48px; height: 48px; margin: 2px; padding: 0; vertical-align: middle; cursor: help; }
#screen .perks .pk.ic canvas { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
#screen .perks .pk.ic em { position: absolute; right: -2px; bottom: -4px; font-style: normal; font-size: 12px; font-weight: 700; color: #ffd060; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 0 0 4px #000; }
#screen .perks .pk.ic:hover { filter: drop-shadow(0 0 6px var(--c)) brightness(1.2); }
/* 转场：盒子淡入、微微上浮；升级卡片像发牌一样一张张落下 */
#screen:not(.hidden) .box { animation: boxIn .26s ease-out both; }
@keyframes boxIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
#screen .cards .card { animation: dealIn .42s cubic-bezier(.2, .8, .3, 1.15) both; }
#screen .cards .card:nth-child(2) { animation-delay: .08s; }
#screen .cards .card:nth-child(3) { animation-delay: .16s; }
#screen .cards .card:nth-child(4) { animation-delay: .24s; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-46px) rotate(-5deg) scale(.92); } to { opacity: 1; transform: none; } }
#screen .card { transition: transform .14s ease-out, filter .14s; }
#screen .card:hover { transform: translateY(-8px); }
#screen .stats b { font-variant-numeric: tabular-nums; }
#screen .newhero { animation: heroIn .5s .5s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes heroIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
#screen h1 { animation: h1Glow 3.2s ease-in-out infinite alternate; }
@keyframes h1Glow { from { filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 4px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(255,150,40,.22)); }
  to { filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 4px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,170,60,.5)); } }
#screen h1.blood { animation-name: h1Blood; }
@keyframes h1Blood { from { filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 4px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(200,20,20,.3)); }
  to { filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 4px rgba(0,0,0,.8)) drop-shadow(0 0 24px rgba(220,30,20,.6)); } }
@media (prefers-reduced-motion: reduce) {
  #screen:not(.hidden) .box, #screen .cards .card, #screen .newhero, #screen h1, #screen.title { animation: none !important; }
  #screen .card, #screen .card:hover { transition: none; transform: none; }
}
.fx #screen .ach > div.got, .fx #screen .ht.got { background-color: rgba(36,27,14,.92); }
.fx #screen .bossgrid button.on { filter: drop-shadow(0 0 6px var(--bc, #ffd060)); background-color: rgba(30,22,14,.95); }
.fx #screen .combos > div.on { background-color: rgba(64,34,10,.75); }
/* ===== 商店、天赋、结算奖励（2026-10-07，js/shopui.js） ===== */
#screen canvas[data-icon] { image-rendering: pixelated; }
#screen canvas.lockic { filter: grayscale(1) brightness(.45); }
#screen .coins { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; color: #ffe066; }
#screen .coins b { font-size: 24px; letter-spacing: 1px; }
#screen .box.shop, #screen .box.talent { max-width: 1240px; width: 96vw; }
#screen .tl-body { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left; }
#screen .tl-heroes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
#screen .tl-heroes .ch.pt { width: auto; }
#screen .tl-heroes .ch.pt img { width: 52px; height: 57px; }
#screen .tl-heroes .ch.pt b { font-size: 12px; }
#screen .tl-info { flex-wrap: wrap; margin: 8px 0 0; max-width: none; }
#screen .tl-info > div { flex: 1; min-width: 0; }
#screen .tl-pts canvas, #screen .coins canvas, #screen .sh-item button canvas, #screen .meta canvas { display: inline-block; }      /* 全局 canvas 是 block：行商那行的金币图标以前单独占一行 */
#screen .sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; text-align: left; }
#screen .sh-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: rgba(20,15,11,.92); border: 1px solid #3a3128; }
#screen .sh-item.max { background-color: rgba(36,27,14,.92); }
#screen .sh-txt { flex: 1; min-width: 0; line-height: 1.45; }
#screen .sh-txt b { font-size: 18px; letter-spacing: 3px; color: #f3e9d6; margin-right: 8px; }
#screen .pips { letter-spacing: 2px; color: #ffd060; font-size: 12px; }
#screen .pips .off { color: #3a3128; }
#screen .sh-txt small { display: block; font-size: 12px; color: #cbbea6; }
#screen .sh-txt small.nx, #screen .tn small.nx { color: #8c806a; }
#screen .sh-item button { display: inline-flex; align-items: center; gap: 3px; min-width: 92px; justify-content: center; padding: 3px 8px; font: inherit; font-size: 12px; color: #ffe066; background: rgba(20,15,11,.92); border: 1px solid #6a5020; cursor: pointer; }
#screen .sh-item button:disabled { color: #6e6252; cursor: default; filter: grayscale(.6) brightness(.8); }
#screen .sh-msg { margin: 8px auto 0; font-size: 12px; color: #ffe066; letter-spacing: 1px; }
#screen .tl-heroes .ch.pt small em { font-style: normal; color: #ffe066; }
#screen .tl-info { display: flex; gap: 12px; align-items: center; max-width: 820px; margin: 4px auto 8px; padding: 6px 12px; text-align: left; font-size: 12px; color: #cbbea6; background: rgba(20,15,11,.92); border: 1px solid #3a3128; }
#screen .tl-info img { width: 64px; height: 70px; image-rendering: auto; }
#screen .tl-info b { font-size: 18px; letter-spacing: 3px; color: #f3e9d6; }
#screen .tl-lv, #screen .tl-pts { margin-top: 3px; font-size: 12px; color: #b4a68c; }
#screen .tl-lv b, #screen .tl-pts b { font-size: 12px; color: #ffd060; letter-spacing: 0; }
/* 等级一行：等级 | 进度条（占满剩下的宽度）| 英雄经验——以前进度条定宽 220，左栏 400 宽放不下，“英雄经验”折成“英 / 雄经验” */
#screen .tl-lv { display: flex; align-items: center; gap: 10px; }
#screen .tl-lv > span:not(.pbar) { white-space: nowrap; }
#screen .tl-lv .pbar.wide { flex: 1; width: auto; min-width: 60px; }
#screen .tl-pts canvas { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
#screen .tl-tree { display: flex; flex-direction: column; gap: 6px; }
#screen .tl-head { font-size: 12px; letter-spacing: 3px; color: #978a72; text-align: left; }
#screen .tl-head em { margin-left: 12px; font-style: normal; letter-spacing: 1px; color: #ff8a78; }
#screen .tl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#screen .tn { display: flex; align-items: center; gap: 10px; padding: 6px 8px; text-align: left; font: inherit; color: #e0d4bc; background: rgba(20,15,11,.92); border: 1px solid #3a3128; cursor: pointer; }
#screen .tn-txt { line-height: 1.45; }
#screen .tn b { font-size: 12px; letter-spacing: 2px; color: #f3e9d6; margin-right: 8px; }
#screen .tn small { display: block; font-size: 12px; color: #cbbea6; }
#screen .tn.can { filter: drop-shadow(0 0 6px rgba(255,208,96,.55)); }
#screen .tn.can:hover { filter: drop-shadow(0 0 10px rgba(255,208,96,.85)) brightness(1.15); }
#screen .tn.max { background-color: rgba(36,27,14,.92); }
#screen .tl-tier.shut .tn { opacity: .55; cursor: default; }
#screen .reward { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 10px auto 0; padding: 6px 16px; max-width: 640px; font-size: 12px; color: #e0d4bc; }
#screen .reward span { display: inline-flex; align-items: center; gap: 6px; }
#screen .reward canvas { width: 24px; height: 24px; }
#screen .reward b { font-size: 18px; color: #ffe066; }
#screen .reward small { font-size: 12px; color: #8c806a; margin-left: 4px; }
#screen .reward em { margin-left: 8px; font-style: normal; color: #ffe9a8; }
#screen .btns.sub2 button { font-size: 12px; opacity: .9; }
#survive em i.coin { margin-left: 12px; font-style: normal; color: #ffd060; }
/* 行商（2026-10-07）：走近时屏幕下方的“按 E 交易”提示 */
#interact { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: none; padding: 6px 18px; font-size: 18px; letter-spacing: 2px; color: #ffe9a8; background: rgba(13,10,7,.82); border: 1px solid #c89a3a; box-shadow: 0 0 14px rgba(255,208,96,.35); text-shadow: 1px 1px 0 #000; pointer-events: none; animation: blink 1.6s infinite; }
#interact b { color: #ffd060; padding: 0 4px; border: 1px solid #ffd060; margin: 0 4px; }
#interact small { margin-left: 12px; font-size: 12px; color: #b4a68c; }
#screen .box.merchant { max-width: 1100px; }
#screen .box.merchant .sh-item button small { font-size: 12px; color: #8c806a; margin-left: 2px; }
#screen .box.merchant .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#screen .box.merchant { max-width: 960px; }
/* 手柄的菜单焦点、设置画面（2026-10-07，js/controls.js） */
#screen .gp-focus { outline: 2px solid #ffe066 !important; outline-offset: 3px; filter: brightness(1.2) drop-shadow(0 0 8px rgba(255,224,102,.7)); }
#screen .box.settings { max-width: 1060px; width: 94vw; }
#screen .st-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
#screen .st-col h3 { margin: 10px 0 6px; }
#screen .st-row, #screen .st-key { display: grid; grid-template-columns: 9.5em 1fr auto; align-items: center; gap: 10px; margin: 5px 0; font-size: 12px; color: #cbbea6; }
#screen .st-key { grid-template-columns: 1fr 13em; }
#screen .st-row em { font-style: normal; color: #ffd060; min-width: 3.5em; }
#screen .st-row input[type=range] { width: 100%; }
#screen .st-seg { display: flex; gap: 4px; }
#screen .st-seg button { white-space: nowrap; flex: none; }      /* 渲染倍率四个按钮一行放下，“自动”不折成两行 */
#screen .st-row button, #screen .st-key button, #screen .st-seg button { padding: 3px 12px; font: inherit; font-size: 12px; color: #e0d4bc; background: rgba(20,15,11,.92); border: 1px solid #4d4033; cursor: pointer; }
#screen .st-row button.on, #screen .st-key button.on, #screen .st-seg button.on { border-color: #ffd060; color: #ffe066; background: rgba(30,22,12,.6); }
#screen .st-key button.on { animation: blink 1s infinite; }
#screen .st-note, #screen .st-pad { margin-top: 8px; font-size: 12px; line-height: 1.6; color: #8c806a; }
#screen .st-pad.on { color: #ffe9a8; }

/* 封面（美术 v3 G，js/cover.js）：满屏手绘主视觉 + 标题字 + 一行提示；点一下 / 按任意键淡出，后面是原来的标题画面 */
#cover { position: absolute; inset: 0; z-index: 60; background: #050304; cursor: pointer; transition: opacity .5s; overflow: hidden; }
#cover.out { opacity: 0; pointer-events: none; }
#cover .cv-art { position: absolute; inset: -3%; background-size: cover; background-position: 50% 0%; animation: cvDrift 40s ease-in-out infinite alternate; }
#cover .cv-art.px { image-rendering: pixelated; }
@keyframes cvDrift { from { transform: scale(1.0) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -1.5%); } }
#cover .cv-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 58%, rgba(0,0,0,0) 38%, rgba(0,0,0,.6) 100%), linear-gradient(rgba(6,3,2,.62), rgba(6,3,2,0) 34%, rgba(6,3,2,0) 66%, rgba(6,3,2,.72)); }
#cover .cv-embers i { position: absolute; bottom: -10px; border-radius: 50%; background: #ffb050; box-shadow: 0 0 6px 2px rgba(255,140,40,.7); opacity: 0; animation: cvEmber 8s linear infinite; }
@keyframes cvEmber { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(28px, -105vh); opacity: 0; } }
#cover .cv-top { position: absolute; left: 0; right: 0; top: 5%; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
#cover .cv-logo { width: min(48vw, 680px); height: auto; filter: drop-shadow(0 5px 20px rgba(0,0,0,.85)); animation: cvLogo 5s ease-in-out infinite alternate; }
@keyframes cvLogo { from { filter: drop-shadow(0 5px 20px rgba(0,0,0,.85)) brightness(1); } to { filter: drop-shadow(0 5px 26px rgba(255,150,50,.5)) brightness(1.12); } }
#cover .cv-title { margin: 0; font-size: min(11vw, 120px); letter-spacing: 18px; padding-left: 18px; font-weight: 800; color: #ffd060; background: linear-gradient(#fff3c0 8%, #ffd060 38%, #b8801c 60%, #ffd060 80%, #8a5a10); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #1a0f08; filter: drop-shadow(0 4px 14px rgba(0,0,0,.9)); }
#cover .cv-sub { font-size: min(2.2vw, 22px); letter-spacing: 8px; color: #d6c8aa; text-shadow: 0 2px 0 #000, 0 0 12px #000; }
#cover .cv-seal { position: absolute; left: 50%; bottom: 1.8%; height: min(8vh, 70px); width: auto; transform: translateX(-50%); filter: drop-shadow(0 3px 8px rgba(0,0,0,.8)); pointer-events: none; }
#cover .cv-press { position: absolute; left: 0; right: 0; bottom: 11%; text-align: center; font-size: min(2.4vw, 24px); letter-spacing: 10px; color: #e8dcc0; text-shadow: 0 2px 0 #000, 0 0 14px #000; animation: cvPress 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes cvPress { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #cover .cv-art, #cover .cv-logo, #cover .cv-press, #cover .cv-embers i { animation: none !important; } #cover .cv-embers { display: none; } }

/* ---------- 试验房间的控制面板（js/labui.js，2026-10-11；黑铁 + 暗金 + 血，不用紫） ---------- */
#labhint { position: absolute; left: 12px; top: 48px; font-size: 12px; letter-spacing: 1px; color: #b8a888; text-shadow: 1px 1px 0 #000, 0 0 6px #000; pointer-events: none; z-index: 5; }
#labhint b { color: #d8b060; }
#labpanel { position: absolute; top: 0; right: 0; bottom: 0; width: min(470px, 94vw); z-index: 60; display: flex; flex-direction: column; background: rgba(14, 11, 9, .95); border-left: 2px solid #5a4a30; box-shadow: -6px 0 24px rgba(0, 0, 0, .6);
  color: #e8dcc0; font-size: 12px; line-height: 1.45; user-select: none; cursor: default; }
#labpanel[hidden] { display: none; }
#labpanel button, #labpanel select, #labpanel input { font: inherit; color: inherit; }
#labpanel .head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #3a2e20; }
#labpanel .head b { font-size: 18px; letter-spacing: 3px; color: #d8b060; }
#labpanel .head span { flex: 1; color: #867a64; font-size: 12px; }
#labpanel .x { background: none; border: 1px solid #5a4a30; width: 26px; height: 26px; cursor: pointer; }
#labpanel .x:hover { border-color: #d8b060; color: #d8b060; }
#labpanel .tabs { display: flex; border-bottom: 1px solid #3a2e20; }
#labpanel .tab { flex: 1; padding: 7px 0; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; color: #978a72; letter-spacing: 2px; }
#labpanel .tab.on { color: #d8b060; border-bottom-color: #d8b060; }
#labpanel .body { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
#labpanel h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 2px; color: #c8b890; font-weight: normal; border-bottom: 1px solid #2e2418; display: flex; align-items: center; gap: 6px; }
#labpanel h3 small { color: #7a6e58; letter-spacing: 0; font-size: 12px; flex: 1; }
#labpanel h3 .gbtns { margin-left: auto; display: flex; gap: 4px; }
#labpanel .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
#labpanel .row.small { color: #978a72; font-size: 12px; }
#labpanel .row.small b { color: #d8b060; }
#labpanel .row.act button, #labpanel .mini, #labpanel .seg { background: #1c1610; border: 1px solid #4a3c28; padding: 4px 10px; cursor: pointer; }
#labpanel .mini { padding: 1px 8px; font-size: 12px; }
#labpanel .seg.on { border-color: #d8b060; color: #d8b060; background: #2a2012; }
#labpanel .row.act button:hover, #labpanel .mini:hover, #labpanel .seg:hover { border-color: #d8b060; }
#labpanel select, #labpanel input[type=text] { background: #1c1610; border: 1px solid #4a3c28; padding: 3px 6px; user-select: text; }
#labpanel input[type=text] { flex: 1; min-width: 80px; }
#labpanel .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#labpanel .grp { margin: 10px 0 0; }                                                   /* 魔物按地图分组（2026-10-13）：地图名一行，下面是这张图的怪 */
#labpanel .grp h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; padding-bottom: 2px; border-bottom: 1px solid #2e2418; font-size: 12px; font-weight: normal; letter-spacing: 2px; color: #d8b060; }
#labpanel .grp h4 small { font-size: 12px; letter-spacing: 0; color: #867a64; }
#labpanel .chip { background: #1c1610; border: 1px solid #3a2e20; padding: 2px 8px; cursor: pointer; font-size: 12px; }
#labpanel .chip sup { color: #d8b060; margin-left: 2px; font-size: 12px; }
#labpanel .chip.k-mini { border-color: #6a4a28; color: #e0b070; }
#labpanel .chip.k-boss { border-color: #7a2a2a; color: #e08a7a; }
#labpanel .chip.on { background: #3a2a14; border-color: #d8b060; color: #fff0c8; }
#labpanel .chip:hover { border-color: #d8b060; }
#labpanel .note { color: #867a64; font-size: 12px; margin: 4px 0; }
#labpanel .none { color: #6a5e48; padding: 6px 0; }
#labpanel .sl { display: grid; grid-template-columns: 130px 1fr 110px; gap: 8px; align-items: center; margin: 7px 0; }
#labpanel .sl span { color: #b8a888; }
#labpanel .sl b { text-align: right; color: #d8b060; font-weight: normal; }
#labpanel input[type=range] { width: 100%; accent-color: #d8b060; }
#labpanel .flags { display: grid; gap: 4px; margin: 10px 0; }
#labpanel .flag { display: flex; align-items: center; gap: 8px; text-align: left; background: #1c1610; border: 1px solid #3a2e20; padding: 5px 8px; cursor: pointer; }
#labpanel .flag i { width: 12px; height: 12px; border: 1px solid #7a6a4a; flex: none; }
#labpanel .flag.on { border-color: #d8b060; }
#labpanel .flag.on i { background: #d8b060; }
#labpanel .ups { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
#labpanel .up { display: flex; align-items: center; gap: 6px; background: #17120d; border: 1px solid #2e2418; padding: 2px 4px; }
#labpanel .up.on { border-color: #6a5a38; background: #231a0e; }
#labpanel .up span { flex: 1; }
#labpanel .up b { color: #d8b060; font-weight: normal; min-width: 34px; text-align: right; }
#labpanel .up small { color: #7a6e58; }
#labpanel .up button { width: 22px; height: 22px; background: #1c1610; border: 1px solid #4a3c28; cursor: pointer; padding: 0; }
#labpanel .up button:hover { border-color: #d8b060; }
#labpanel .combos { display: grid; gap: 4px; }
#labpanel .combo { display: flex; justify-content: space-between; gap: 8px; text-align: left; background: #17120d; border: 1px solid #3a2e20; padding: 4px 8px; cursor: pointer; }
#labpanel .combo small { color: #7a6e58; }
#labpanel .combo.on { border-color: #d8b060; color: #d8b060; }
#labpanel .stat { font-size: 12px; } #labpanel .stat b { color: #d8b060; margin: 0 3px 0 10px; font-size: 18px; } #labpanel .stat b:first-child { margin-left: 0; }
#labpanel .cur { display: grid; grid-template-columns: 1fr 90px 60px 60px; gap: 6px; padding: 2px 0; border-bottom: 1px solid #1e170f; color: #b8a888; }
@media (max-width: 700px) { #labpanel .ups { grid-template-columns: 1fr; } #labpanel .sl { grid-template-columns: 100px 1fr 90px; } }
/* 图鉴在矮屏幕上（放在文件最后，盖过上面 .fx 的格子尺寸）（≤ 820 像素高，比如 1280×720）：标题收小、格子缩小，给格子下面的招式表和右边的详情多留一点高度 */
@media (max-height: 820px) {
  #screen .box.codex { padding-top: 14px; padding-bottom: 10px; }
  #screen .box.codex h1.mid { font-size: 30px; margin: 0 0 6px; }
  #screen .box.codex .tabs { margin: 6px 0 2px; }
  #screen .box.codex .small { margin-top: 6px; }
  #screen .box.codex .btns { margin-top: 8px; }
  #screen .cx-body { height: max(340px, calc(100vh - 346px)); }
  #screen .cx-mapview.boss .cx-row.big .cx-cell canvas { width: 48px; height: 48px; }          /* 首领页的格子缩小（96 的一半，别用非整数倍），给下面的招式表让地方；魔物页保持 96 */
  #screen .cx-mapview p { margin-bottom: 6px; }
  #screen .cx-mapview > .cx-bmoves { margin-top: 6px; }
  #screen .cx-stage { height: 120px; }
  #screen .cx-stage canvas#cx-anim { height: 100%; width: auto; }
}