/* ============ 闁糕晞娅ｉ、?============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0f14; }
body { display: flex; align-items: center; justify-content: center; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
#game { display: block; background: #141c24; box-shadow: 0 0 60px rgba(0,0,0,.55); }

/* ============ UI 閻熸洖妫涘ú濠勪沪閸岋妇绀勯柟骞垮灱閸嬪棝寮ㄧ涵鍛闂佹彃鐭夌槐?============ */
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 50; color: #dfe7f0; }
#ui button { pointer-events: auto; cursor: pointer; }

/* 闁瑰瓨蓱閺嬬喖鎮惧畝鍕〃鐠侯垱绂嶉搹鐟扳挅濠㈣埖娼欓崕姘跺冀?*/
.player-hud {
  position: fixed;
  top: max(12px, calc(50vh - min(66.666vw, 50vh) + 12px));
  left: max(12px, calc(50vw - min(50vw, 37.5vh) + 12px));
  width: 350px;
  height: 116px;
  color: #f7ead1;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.72));
  transform: scale(.5);
  transform-origin: top left;
}
.player-hud-main {
  position: absolute; left: 84px; top: 7px; right: 0; height: 101px;
  padding: 8px 12px 7px 25px;
  clip-path: polygon(0 0, 91% 0, 100% 12%, 100% 70%, 88% 100%, 0 100%, 8% 73%, 8% 25%);
  border: 1px solid #a77a2c;
  background: linear-gradient(135deg, rgba(21,31,38,.97), rgba(8,13,18,.96) 62%, rgba(57,38,12,.96));
  box-shadow: inset 0 0 0 2px #12181d, inset 0 0 0 3px rgba(224,174,67,.65);
}
.player-portrait {
  position: absolute; z-index: 2; left: 10px; top: 17px; width: 86px; height: 86px;
  border: 4px solid #d7a62f; border-radius: 50%;
  background: url('assets/player/hero-cast-v2/frame_00.png') 70% 20% / 178px auto no-repeat,
              radial-gradient(circle at 50% 40%, #294f67, #071018 72%);
  box-shadow: 0 0 0 2px #15191d, 0 0 0 4px #735115, inset 0 0 12px rgba(0,0,0,.72);
}
.player-level {
  position: absolute; z-index: 3; left: 0; top: 4px; display: grid; place-items: center;
  width: 34px; height: 34px; border: 2px solid #b89a68; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #51303a, #17171a 70%);
  color: #fff0de; font: 700 16px/1 Georgia, serif;
  box-shadow: 0 0 0 2px #15191d, 0 2px 4px #000;
}
.player-name {
  height: 23px; padding-left: 9px; color: #d6ebe8; font-size: 16px; line-height: 20px;
  text-align: center; letter-spacing: .1em; text-shadow: 0 1px 2px #000;
}
.player-resource { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 4px; height: 23px; }
.player-resource > span { color: #f1ece4; font: 800 15px Georgia, serif; text-shadow: 1px 1px #000; }
.resource-track {
  position: relative; height: 18px; overflow: hidden; border: 2px solid #050708; border-radius: 4px;
  background: #15191c; box-shadow: 0 0 0 1px #927441, inset 0 2px 3px rgba(0,0,0,.85);
}
.resource-track i { display: block; width: 100%; height: 100%; background: linear-gradient(#e32128, #8d0006 62%, #5d0004); }
.player-resource.mp .resource-track i { background: linear-gradient(#19bfff, #087cc2 62%, #045380); }
.resource-track b {
  position: absolute; inset: 0; color: #f8f4e9; font-size: 13px; line-height: 14px; text-align: center;
  font-variant-numeric: tabular-nums; text-shadow: 1px 1px 2px #000, -1px -1px 1px #000;
}
.combat-power {
  position: absolute; left: 34px; right: 10px; bottom: -1px; display: flex; justify-content: center; gap: 10px;
  height: 24px; color: #e5ad39; font-weight: 800; line-height: 23px; letter-spacing: .08em;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255,190,48,.5);
}
.combat-power b { color: #ffd86b; font-size: 19px; font-family: Georgia, serif; letter-spacing: .12em; }
.player-hud + .yidu-timer {
  left: calc(50vw + min(50vw, 37.5vh) - 12px);
  transform: translateX(-100%);
}

#hud { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; }
#hud button { font-size: 15px; padding: 8px 16px; border-radius: 8px; background: linear-gradient(#3b4a5c,#29343f); color: #eaf2fa; border: 1px solid #5b6f85; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
#hud button:hover { filter: brightness(1.15); }
.yidu-timer {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; width: max-content; min-height: 32px; padding: 5px 10px; white-space: nowrap;
  border: 1px solid rgba(113,190,229,.68); border-radius: 18px;
  background: rgba(10,23,34,.88); color: #b8dcef; font-size: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.09);
  pointer-events: auto;
}
.yidu-timer b { color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.yidu-timer .timer-fold { color: #6fa7c5; transition: transform .18s ease; }
.yidu-timer.collapsed .timer-label { display: none; }
.yidu-timer.collapsed .timer-fold { transform: rotate(180deg); }
.game-choice-modal { z-index: 90; }
.panel.game-choice-panel {
  width: min(432px, 92vw); padding: 24px 26px 22px;
  display: flex; flex-direction: column; text-align: center; overflow: hidden;
  border: 1px solid #4d6a84; border-radius: 16px;
  background: linear-gradient(180deg, #223140 0%, #131c26 60%, #0c131a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -34px 54px rgba(0,0,0,.42), 0 18px 50px rgba(0,0,0,.72);
}
.game-choice-panel h2 { color: #eaf7ff; font-size: 23px; letter-spacing: .12em; text-indent: .12em; text-shadow: 0 2px 6px #000; }
.game-choice-panel p { margin: 10px 0 18px; color: #9db4c9; font-size: 14px; line-height: 1.6; }
.game-choice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0 auto; }
.game-choice-actions button {
  width: 100%; min-height: 70px; padding: 14px 12px; border-radius: 12px;
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -14px 24px rgba(0,0,0,.3), 0 5px 14px rgba(0,0,0,.46);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.game-choice-actions button:hover,
.game-choice-actions button:focus-visible { outline: none; transform: translateY(-2px); filter: brightness(1.1); }
.game-choice-actions .go { border: 1px solid #79d3ff; background: linear-gradient(#47a6d6,#1b5b85); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.game-choice-actions .danger { border: 1px solid #b8707a; background: linear-gradient(#8b4a53,#4a252b); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
/* 异度阵亡：点「原地复活」后的 5 秒倒数 —— 按钮置灰、去掉悬停抬起（倒计时数字带等宽数字不抖动） */
.game-choice-actions button.waiting,
.game-choice-actions button.waiting:hover { cursor: default; transform: none; filter: saturate(.45) brightness(.72); font-variant-numeric: tabular-nums; }
/* 婵繆顔婃鎼佹晬濮樺崬顒㈤悹瀣暣閻濐喗绂?+ 闂侇剦鍠氶崓鐢垫嫬閸愵喒鍋撹箛銉х闁煎磭鏅﹢鍛€掗崨顔瑰亾椤忓棗鈷栭弶鈺偯﹢顏堝礉?*/
.game-choice-modal.death { background: rgba(4,8,12,.32); }
.game-choice-modal.death .panel.game-choice-panel {
  border-color: #7c4d55;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -34px 54px rgba(0,0,0,.42), 0 0 34px rgba(158,44,56,.34), 0 18px 50px rgba(0,0,0,.72);
}
.game-choice-modal.death .game-choice-panel h2 { color: #ffdcdc; text-shadow: 0 0 20px rgba(255,86,86,.5), 0 2px 6px #000; }

/* ===== 闁圭鍊瑰┃鈧柛妤€娲ㄦ鍥晬濮樺磭绠婚幖杈鹃檮濞?+ 閻熶礁鍊垮▓顓熺▔婢舵劏鍋撴径澶岊伇 ===== */
.idle-hud {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: min(330px, 70vw); padding: 8px 14px 9px;
  border: 1px solid rgba(113,190,229,.68); border-radius: 14px;
  background: rgba(10,23,34,.88); color: #b8dcef; font-size: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.09);
}
.idle-hud[hidden] { display: none; }
.idle-line { display: flex; align-items: center; gap: 10px; }
.idle-line .idle-wave { color: #eaf7ff; font-weight: 700; }
.idle-line b { color: #fff; font-variant-numeric: tabular-nums; }
.idle-line .idle-lv { margin-left: auto; color: #ffd86b; }
.idle-line.small { margin-top: 5px; color: #8fb2c8; font-size: 12.5px; }
.idle-exp { height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.idle-exp i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg,#3f9fe0,#8ee0ff); transition: width .18s ease; }
.idle-streak { margin-left: auto; color: #8fb2c8; }
.idle-streak.on { color: #ffd86b; font-weight: 800; text-shadow: 0 0 8px rgba(255,190,48,.6); }
.idle-boons { margin-left: auto; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9fe0ff; }
body.idle-mode .yidu-timer { display: none; }

.panel.game-choice-panel.boon-panel { width: min(440px, 92vw); }
.boon-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.boon-card {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 10px; min-height: 104px;
  border: 1px solid #5faee0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(#2b4a63,#1b2f41); color: #eaf7ff; text-align: center;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 5px 12px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.boon-card:hover, .boon-card:focus-visible { outline: none; transform: translateY(-3px); border-color: #9fe0ff; box-shadow: 0 8px 18px rgba(0,89,134,.45); }
.boon-card strong { color: #ffd86b; font-size: 16px; }
.boon-card small { color: #b8dcef; font-size: 13px; line-height: 1.45; }
.boon-timer { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.boon-timer i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg,#ffcf6a,#ffe9a8); transition: width .2s linear; }
.boon-hint { margin: 10px 0 0 !important; color: #7f97a8 !important; font-size: 12.5px !important; }
@media (max-width: 520px) {
  .boon-options { grid-template-columns: 1fr; }
  .boon-card { min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}
.loot-fly {
  position: fixed;
  z-index: 70;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(130,205,255,.95));
}

.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(4,8,12,.55); pointer-events: auto; }
.modal.open { display: flex; }
.panel {
  width: min(720px, 96vw); max-height: 94vh; overflow: auto;
  background: linear-gradient(#1d2733,#141b24); border: 1px solid #3d4f63; border-radius: 12px;
  padding: 12px 14px 16px; box-shadow: 0 0 50px rgba(0,0,0,.7);
}
.panel.power { width: min(740px, 98vw); }
/* 闂佸じ鐒﹂鎾嚄鐏炶棄鐦?闁告瑦锚瀹搁亶妫冮姀鈩冪凡濡ゅ倹锚鐎规娊鏁嶅顒€鏁堕悗鍦攰缁夋挳宕欓悜妯活槯闁革负鍔戝浼村级閸喖鏁舵繝濠冭壘婵晠鏁嶅畝鍕級闁稿繐绉堕悺顐︽焻?闁瑰灝绉崇紞鏃堝级閳╁啯鏆柛娆惷ˇ璇差浖閸℃妲€閻?*/
#modal-bag .panel { height: min(656px, 94vh); display: flex; flex-direction: column; overflow: hidden; }
#modal-power .panel { height: min(846px, 94vh); }
.phead { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.phead b { color: #bfe0ff; }
.phead .x { margin-left: auto; font-size: 18px; padding: 2px 10px; border-radius: 6px; background: #333f4d; border: 1px solid #55667a; color: #fff; }
.phead .mini { margin-left: auto; font-size: 12px; padding: 4px 10px; border-radius: 6px; background: #223040; border: 1px solid #46586d; color: #d6e4f2; }
#bag-count { color: #8fa6bd; font-size: 13px; }
#bag-silver { color: #ffd76a; font-size: 13px; }

/* 闁煎啿鑻€垫ɑ銇勯悽娈垮姰 */
.pages { display: flex; gap: 8px; margin-bottom: 10px; }
.page-tab { padding: 6px 14px; border-radius: 7px; border: 1px solid #46586d; background: #1c2733; color: #aebfd1; }
.page-tab.on { background: #2f6fb0; color: #fff; border-color: #6aa8dd; }

/* 闁煎啿鑻€垫鏁崘銊ф拱闁挎稒鐭粭?= 濞存粏娅ｆ晶?閻熶礁鎳庨ˇ顒勫冀韫囥儳绀夊☉?= 闁哄秶鍘ч悺?*/
.bag-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
#avatar {
  width: 132px; height: 176px; flex: 0 0 132px; border: 1px dashed #3c5168; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: #6d8299; font-size: 12px; text-align: center;
  background: radial-gradient(circle at 50% 38%, #233142, #131b24);
}
.equip-wrap { flex: 1; min-width: 0; }
.eqrow { display: grid; grid-template-columns: repeat(8, 46px); gap: 5px; margin-bottom: 6px; }

/* 闂侇偅姘ㄩ弫銈夊冀閻撳海鎽嶉柨娑樼墛椤掓粓寮悷鎷屽煂闁?*/
.cell {
  width: 44px; height: 44px; border: 1px solid #3a4a5c; background: rgba(12,18,26,.75); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; position: relative; color: #7d92a8; font-size: 10px; text-align: center;
}
.equip-cell { width: 46px; height: 46px; }
.equip-cell.void { visibility: hidden; }
.equip-cell .elabel { font-size: 10px; color: #7d92a8; line-height: 1.1; }
.cell.has { border-color: #5d7a9a; }
.cell.has .elabel { display: none; }

.bag-grid { display: grid; grid-template-columns: repeat(7, 46px); gap: 5px; }

/* 闁绘せ鏅涢幖褔宕堕悙顒傚灱闁挎稑鐗婇婊堝棘閻熸媽鍩岄柨?*/
.it { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #cfe3f5; max-width: 100%; }
.it i { width: 20px; height: 20px; border-radius: 4px; background: var(--c); box-shadow: 0 0 6px var(--c); border: 1px solid rgba(255,255,255,.5); display: block; flex: 0 0 auto; }
.it .tier { font-size: 10px; }

/* 闁绘せ鏅涢幖褔骞欏鍕▕闁?*/
.actbar {
  display: none; margin-top: 10px; padding: 8px; border: 1px solid #4a6280; border-radius: 8px;
  background: rgba(10,18,28,.85); align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
}
.actbar.open { display: flex; }
#act-item { color: #cfe3f5; }
#act-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
#act-btns button { padding: 5px 12px; border-radius: 6px; border: 1px solid #46586d; background: #223040; color: #d6e4f2; }
#act-btns button.go { background: #2f6fb0; border-color: #6aa8dd; }

/* ===== 閻熶礁鎳庨ˇ顒勫箯閸℃鎺楁晬閸繂绻侀柛鏍ㄧ墳椤ュ﹥寰勯崶褎绀€闁衡偓鐠鸿櫣鏉洪柣顓狀劜缁?===== */
#act-btns button.salvage {
  border: 1px solid #d8a44e; color: #ffe6b0;
  background: linear-gradient(#8f5d1c,#57340f);
  box-shadow: inset 0 1px 0 rgba(255,225,170,.38), 0 2px 7px rgba(0,0,0,.45);
}
#act-btns button.salvage:hover { filter: brightness(1.15); }

.salvage-modal { z-index: 95; }
.panel.salvage-panel {
  width: min(540px, 94vw); padding: 14px 16px 18px;
  border: 1px solid #6b5a3a;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255,196,96,.13), transparent 62%),
    linear-gradient(#222b37,#131a23);
  box-shadow: 0 0 46px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,225,170,.18);
}
.salvage-panel .phead b { color: #ffd98f; }
.sv-body { display: flex; gap: 14px; align-items: stretch; }
.sv-item {
  flex: 0 0 138px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  justify-content: center;
  padding: 16px 10px; border-radius: 12px; border: 1px solid #55637a;
  background: linear-gradient(#28323f,#151d26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -16px 26px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.4);
}
.sv-item-art { display: flex; align-items: center; justify-content: center; min-height: 84px; }
.sv-item-art .it i { width: 78px !important; height: 78px !important; }
.sv-item-art .it.wicon i, .sv-item-art .it.eicon i { border-radius: 9px; }
.sv-item-name { color: #eaf5ff; font-size: 14px; font-weight: 700; text-align: center; line-height: 1.35; }
.sv-item-meta {
  padding: 2px 10px; border-radius: 10px; border: 1px solid rgba(255,196,96,.4);
  background: rgba(120,80,20,.32); color: #ffd98f; font-size: 12px;
}
.sv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sv-energy {
  padding: 10px 12px 12px; border-radius: 10px; border: 1px solid #4d5f52;
  background: linear-gradient(#1b2530,#141b22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 18px rgba(0,0,0,.3);
}
.sv-energy-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #a9c0d2; }
.sv-energy-line b { color: #ffd76a; font-size: 16px; font-family: Georgia, serif; letter-spacing: .02em; }
.sv-energy-line.sub { margin-top: 2px; }
.sv-energy-line.sub b { color: #8ef0b4; }
.sv-bar {
  position: relative; height: 11px; margin: 9px 0 8px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(#0e151d,#1a2531); border: 1px solid #3b4b5c;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.65);
}
.sv-bar i {
  display: block; height: 100%; width: 70%;
  background: linear-gradient(90deg,#8a5410,#ffc861 68%,#fff3cf);
  box-shadow: 0 0 14px rgba(255,196,96,.62); transition: width .25s ease;
}
.sv-gems {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 10px; min-height: 76px;
  border: 1px solid #4a5a6d; background: linear-gradient(#161f29,#0f161d);
  box-shadow: inset 0 2px 7px rgba(0,0,0,.55);
}
.sv-gem {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; padding: 7px 5px 5px;
  border-radius: 9px; border: 1px solid #4f6274;
  background: linear-gradient(#25313f,#131b24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 9px rgba(0,0,0,.48);
}
.sv-gem .it i { width: 34px !important; height: 34px !important; }
.sv-gem .it.gicon i { border: none; box-shadow: none; }
/* 1~2 缂佺嫏鍐澓闁活叀娅曢惀鍛村嫉婢跺﹤鏂ч柛銉︽嫕缁变即鎮介妸銉ョ€奸梻鍫涘灩閻ゅ倿鎯岄幎瑙ｅ亾閻樿尙鈧攱绂掗敐鍡樼缂佺虎鍨垫竟濠囧棘閻熺増鍋ラ柨娑樼焸娴尖晠宕楀鍡楊€曢悷娆欑秮濞间即寮堕崹顔兼瘔闁绘粎澧楁晶搴ㄧ嵁鐎圭姴顥忛柛?*/
.sv-gem .it:not(.gicon):not(.wicon):not(.eicon) i {
  width: 36px !important; height: 36px !important;
  border: none; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 44%),
    linear-gradient(158deg, rgba(255,255,255,.42), rgba(0,0,0,.42) 66%),
    var(--c);
  clip-path: polygon(50% 2%, 96% 32%, 78% 96%, 22% 96%, 4% 32%);
  filter: drop-shadow(0 0 7px var(--c));
}
.sv-gem-n { color: #fff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 3px #000; }
.sv-gem small { color: #9fc3dc; font-size: 11px; }
.sv-note { color: #c99a6a; font-size: 12px; line-height: 1.6; }
.sv-note b { color: #ffd98f; }
.sv-actions { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.sv-btn {
  min-width: 136px; padding: 11px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 700; color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 5px 13px rgba(0,0,0,.45);
}
.sv-btn.ghost { border: 1px solid #55667a; background: linear-gradient(#39485a,#242f3b); }
.sv-btn.go {
  border: 1px solid #d8a44e; color: #fff8e6;
  background: linear-gradient(#cf8f2e,#8a5410);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.sv-btn:hover { filter: brightness(1.12); }
@media (max-width: 560px) {
  .sv-body { flex-direction: column; }
  .sv-item { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
  .sv-item-art { min-height: 0; }
  .sv-item-art .it i { width: 56px !important; height: 56px !important; }
  .sv-item-name, .sv-item-meta { text-align: left; }
}

/* 闁告瑦锚瀹?*/
#power-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
#modal-power .phead { position: relative; justify-content: center; flex-wrap: nowrap; }
#modal-power .phead .x { position: absolute; right: 0; margin-left: 0; }
#power-tabs { justify-content: center; }
#power-tabs button { padding: 7px 14px; border-radius: 7px; border: 1px solid #46586d; background: #1c2733; color: #aebfd1; }
#power-tabs button.on { background: #2f6fb0; color: #fff; border-color: #6aa8dd; }
.tab-body { display: none; }
.tab-body.open { display: block; }
.sys-layout { display: flex; gap: 14px; flex-wrap: wrap; }
.sys-main { flex: 1; min-width: 320px; }
.side { width: 220px; flex: 0 0 220px; }
.stitle { font-size: 12px; color: #9db4c9; margin: 6px 0; }
.grid16 { border: 1px solid #39495c; border-radius: 8px; padding: 6px; background: rgba(8,12,18,.5); }
.grid-in { display: grid; grid-template-columns: repeat(4, 48px); gap: 5px; justify-content: start; }
.sys-cell { width: 48px; height: 48px; }
.sys-cell.has { border-color: #6b8fae; }
.sys-item { cursor: pointer; max-width: 100%; overflow: hidden; }

/* 閻熶礁鎳庨ˇ顒勫触閸喎鐏囬柨娑欑煯鐎靛矂寮堕崹顔炬狗濞?+ 闁哄鍔栭弸鈩冪▔閳ь剛鎮?*/
#synth-stage { text-align: center; padding: 8px; border: 1px solid #33445a; border-radius: 10px; background: rgba(8,12,18,.45); }
.main-slot { display: inline-flex; }
.main-cell, .main-slot .main-cell { width: 78px; height: 78px; border: 1px solid #3a4a5c; background: rgba(12,18,26,.75); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #7d92a8; font-size: 11px; }
.main-cell.has { border-color: #7ba7cc; }
.main-cell.is-result { box-shadow: 0 0 14px rgba(150,220,255,.7); border-color: #9fd0ff; }
#synth-main { text-align: center; }
#synth-subs { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.sub-cell { width: 54px; height: 54px; border: 1px solid #3a4a5c; background: rgba(12,18,26,.75); border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; color: #7d92a8; font-size: 10px; }
.sub-cell.has { border-color: #6b8fae; }
.sub-cell.has .elabel { display: none; }

.info { margin: 6px 0; color: #9fc3e6; font-size: 12px; min-height: 14px; }
#inherit-info .inh { color: #a9f0b0; }
#inherit-info .inh.no { color: #8fa6bd; }
.actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.actions button { padding: 8px 14px; border-radius: 7px; border: 1px solid #46586d; background: #223040; color: #d6e4f2; }
.actions button.go { background: #2f6fb0; border-color: #6aa8dd; }
.actions button.go:disabled { opacity: .45; cursor: not-allowed; }

.scroll { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 4px; }
.side-item { text-align: left; padding: 5px; border-radius: 6px; border: 1px solid #46586d; background: #17212c; color: #cfdde9; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.side-item:hover { background: #1e2c3a; }
.side-item .it i { width: 24px; height: 24px; }
.side-inline { display: flex; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.side-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; background: #17212c; border: 1px solid #33445a; }
.side-row .sw { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.side-row .swtxt { font-size: 12px; color: #dbe7f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-row button { font-size: 12px; padding: 3px 10px; border-radius: 5px; border: 1px solid #46586d; background: #223040; color: #d6e4f2; }
.empty { color: #5f768b; font-size: 12px; padding: 8px; }

/* 闁告艾鐗婇崹姘跺礉閵娧勬毎 + 閻庣懓鐬肩欢?濞磋偐濮鹃鈺侇嚕閻熸澘姣?*/
.fx, #synth-stage.fx { animation: fxflash .7s ease; }
@keyframes fxflash { 0% { box-shadow: 0 0 0 rgba(255,255,255,0); } 40% { box-shadow: 0 0 30px 8px rgba(160,220,255,.95); background: rgba(180,225,255,.22); } 100% { box-shadow: 0 0 0 rgba(255,255,255,0); } }
#enh-area.fail { animation: enfail .5s ease; }
@keyframes enfail { 40% { box-shadow: 0 0 22px 5px rgba(255,80,80,.85); background: rgba(255,90,90,.18); } }
/* ===== 缂備焦鎸婚悘澶愭偋鐟欏嫭娅忛柨娑欒壘瀹搁亶宕犻弽銊ョ亣闁?new_jm1003 / 鐎殿喖鎼€靛弶寰勬潏顐バ?new_jm1026 / 闁瑰嘲妫滆闁搞儳鍋為弫?new_jm1006 / 閻熶礁鎳庨ˇ顒佹姜椤掑倐?new_jm1004 =====
   闁?ui.js 闁?playResultFx() 闁革负鍔忚闁告瑦鍨瑰▓鎴︽焽閿濆嫮顏遍柛鎺曞吹閺佹捇骞嬮幇鍓佺闁圭虎鍘奸悾顒傜博鐎ｎ亜绁ù?DOM 缂佸顭峰▍搴ㄦ晬閸儰缂夐柛蹇撶Т閸ㄥ繘骞戦姀銏℃珪闂傚牄鍨哄鍌氣枔鐎ｎ剚娈岄柛鏂诲妿閺侀箖宕ｉ崼锝囩崜濞戞挴鍋撻梺顒€绋勭槐姘跺Υ?
   濞达絽绉堕悿鍡欑磼閻斿墎顏遍柛锔哄妼鐢偊寮堕妷銉ф狗濞戞搩鍘介弸鍐偓娑欘殕瑜颁胶绮堥崫鍕垫П闁挎稑鐗嗛惈鍡涚嵁閺囨俺鍘☉鎾筹攻閺?24%闁挎稑顧€缁辨繄鈧妫勭€瑰磭绱掗悢鍓侇伇 320px闁炽儲鏌￠埀顒佹煥濞叉挸顕ｉ悩鎻掓枾闁搞儵绠栭崳鐑藉棘閸パ呮憻闁告濮烽弫楣冩?
   闁汇劌瀚惁顔界瑹鐎ｂ晝顏遍柤鐤彧缁辨瑧鐥?74%闁挎稑顧€缁辨繈骞嶉埀顒佺閵夈儲鍊遍悗纭呭Г濡炲倻鈧稒顨呰ぐ鎸庣▕閻斿墎顏遍柤鐤彧缁辫鲸顨囧Ο鍝勵唺闁圭顦幃鍥嚊椤忓嫬鏂ч柛銉у亾閻︻喗绗熺€ｎ叀娉查柨娑樺缁ㄧ増绋夊鍡楊€欏ù鍏兼偠閳?*/
.fx-result {
  position: fixed; left: 50%; top: 24%; width: 320px;
  transform: translate(-50%,-50%);
  background-repeat: no-repeat; pointer-events: none; z-index: 98;
}
.fx-enhance-success {
  height: 125px; background-image: url('assets/effects/enhance-success.png'); background-size: 1800% 100%;
  animation: fx-enhance-success-frames 1.15s steps(18) 1 forwards, fx-result-fade 1.15s linear 1 forwards;
}
.fx-enhance-fail {
  width: 197px; height: 125px; background-image: url('assets/effects/enhance-fail.png'); background-size: 1100% 100%;
  animation: fx-enhance-fail-frames 0.85s steps(11) 1 forwards, fx-result-fade 0.85s linear 1 forwards;
}
.fx-salvage {
  height: 304px; background-image: url('assets/effects/salvage-success.png'); background-size: 1700% 100%;
  animation: fx-salvage-frames 1.1s steps(17) 1 forwards, fx-result-fade 1.1s linear 1 forwards;
}
.fx-transfer {
  height: 267px; background-image: url('assets/effects/transfer-success.png'); background-size: 1900% 100%;
  animation: fx-transfer-frames 1.25s steps(19) 1 forwards, fx-result-fade 1.25s linear 1 forwards;
  /* 閺夆晜鐟ョ槐鍫曞储閻旈攱绂堥柣銊ュ閳ь剙鐭佸ù鍡欑矓缂佹ê鐏囬柛鏃傚枂閳ь剙绉甸弸鍐偓娑欘殔娴滄悂宕烽妸褎鏆伴梻鍫線缁楀倿鏌堥…鎺旂闁告瑱缂氱粭浣割嚕閻樿尙鍞ㄩ柡鍫墮閻櫕绋夐銊х闁挎稑鏈弳锝嗘媴閹捐尙鐟撶紒澶庮唺缁旀挳鎮欑涵鍜佸敤闁搞儲绋愰柌婊呪偓娑欘殙閹倝宕烽妸銉﹀€卞☉鎾亾濡ゅ倹锚鐎?*/
  top: calc(24% + 60px);
}
/* 缂侇喖澧芥导鎺楀炊閸欍儳绉寸紒澶庡吹閺?N/(N-1)閼?00% 闁衡偓鐠鸿櫣鍟?+ steps(N)闁挎稑鏈惁鈥愁潰閵夈儱鐏犲┑鍌涘灊缁斿鏁?*/
@keyframes fx-enhance-success-frames { from { background-position-x: 0%; } to { background-position-x: 105.8824%; } }
@keyframes fx-enhance-fail-frames { from { background-position-x: 0%; } to { background-position-x: 110%; } }
@keyframes fx-salvage-frames { from { background-position-x: 0%; } to { background-position-x: 106.25%; } }
@keyframes fx-transfer-frames { from { background-position-x: 0%; } to { background-position-x: 105.5556%; } }
@keyframes fx-result-fade { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }
#tier-pop {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%) scale(.6);
  font-size: 72px; font-weight: 900; letter-spacing: 12px; text-shadow: 0 0 30px currentColor, 0 4px 12px #000;
  opacity: 0; pointer-events: none; z-index: 99;
}
#tier-pop.show { animation: tierIn 2.2s ease forwards; }
@keyframes tierIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); } 30% { transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.05); } }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px);
  background: rgba(8,14,22,.94); border: 1px solid #4a6a88; color: #dcebf7; padding: 9px 18px;
  border-radius: 8px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 60;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 闁哄牜鍓濋悿?UI 濞村吋锚鐎佃尙鎮伴妷銉ュ笭 ===== */
.hide { display: none !important; }
#synth-result.result { margin-top: 8px; }
.result { border: 1px solid #4a6488; border-radius: 8px; padding: 8px 10px; background: rgba(12,22,34,.8); font-size: 13px; color: #dbe9f6; }
.result .rd { margin-top: 4px; color: #cfe3f5; line-height: 1.7; }

/* 婵帒鍊诲濂告煁閹烘梹绐?*/
.info.big { font-size: 16px; color: #fff; text-align: center; padding: 6px; }
.info .bigp, .rate .bigp { color: #ffd23e; font-size: 26px; font-weight: 800; text-shadow: 0 0 12px rgba(255,200,60,.6); }
.info.hint { color: #8fa6bd; font-size: 13px; text-align: center; }

/* 闁告艾鐗婇崹姘跺闯閵娿儳婀峰☉鎿冨弿缁辨瑩宕ラ崼鐔风亣闁哄嫷鍨崇敮鍝勨枖閺囥垹娅㈤柣鎰缁?*/
#merge-area { display: flex; justify-content: center; }
.grid16 { display: flex; justify-content: center; }

/* 鐎殿喖鎼€佃尙鏁崘銊ф拱闁挎稒鐭€靛本鎷?鐎殿喖鎼€垫煡宕抽妸銉﹁含濞戞挸顭槐婵囩▔鐎ｎ偅鐓?鐎归潻缂氬Ч澶愭偋?/ 闁告瑥鍘栫粚鍫曞箲闁垮鑵归柤?*/
.enh-wrap { display: flex; flex-direction: column; gap: 14px; }
.enh-main {
  text-align: center;
  border: 1px solid #3c5470; border-radius: 14px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(10,16,24,.6), rgba(6,10,16,.5));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
}
.enh-bottom { display: flex; gap: 14px; align-items: flex-start; }
.enh-bottom .col-char { flex: 1 1 0; min-width: 240px; }
.enh-bottom .col-preview { flex: 0 0 300px; }
.avatar.mini { width: 130px; height: 130px; margin: 0 auto 8px; }
#enh-item-slot { justify-content: center; }
#enh-item-slot .main-cell { width: 96px; height: 96px; }
.rate { font-size: 18px; color: #fff; margin: 8px 0; }
.minigrid { display: grid; grid-template-columns: repeat(4, 32px); gap: 4px; justify-content: center; }
.mini-slot { width: 32px; height: 32px; border: 1px solid #3a4a5c; background: rgba(12,18,26,.7); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.mini-slot .elabel { font-size: 9px; color: #7d92a8; }
.mini-slot.has { border-color: #5d7a9a; }
.mini-slot .it i { width: 14px; height: 14px; }
.mini-slot .sys-item .it span, .mini-slot .sys-item .tier { display: none; }
.col-preview .scroll.mini-scroll, .side .scroll.mini-scroll { max-height: 150px; }

/* 鐎殿喖鎼€垫煡宕滃鍛€甸柡浣规緲閳?*/
.dlh { color: #ffd76a; margin-bottom: 4px; font-size: 13px; }
.dl { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #dfe9f2; padding: 2px 0; border-bottom: 1px dashed #33445a; }
.dl span:last-child { color: #9fe08a; white-space: nowrap; }

/* 濞撴皜鍕焿闁伙絻鍎抽悰?+ 闁搞儳鍋撻悥锝夊触瀹ュ泦鐐烘焾閼恒儲鈻旂紒鈧?*/
.side { width: 186px; flex: 0 0 186px; }
.col-preview { width: 208px; flex: 0 0 208px; }
.side-item { font-size: 11px; white-space: nowrap; }
.side-row .swtxt { font-size: 11px; }

/* 缂佹稒鐩埀顒€顦懘濠勪沪?*/
.filter-pop {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(370px, 94vw); overflow: hidden; z-index: 80;
  display: flex; flex-direction: column; pointer-events: auto;
  background: linear-gradient(#1d2733,#141b24); border: 1px solid #4a6488; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.filter-pop .fp-title {
  flex: 0 0 auto; min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px;
  color: #e6f2fc; border-bottom: 1px solid #405469; background: rgba(41,55,70,.72);
  cursor: move; user-select: none; touch-action: none;
}
.filter-pop .fp-title b { font-size: 17px; letter-spacing: 2px; }
.filter-pop .fp-title button { margin-left: auto; width: 34px; height: 34px; padding: 0; cursor: pointer; }
.fp-empty { color: #ff9e8d; font-size: 12px; }
.filter-pop .fp-body { padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; }
.fp-g { margin: 0; padding: 8px; border: 1px solid #34485b; border-radius: 10px; background: rgba(8,14,21,.46); }
.fp-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fp-group-head b { color: #bcd0e1; font-size: 13px; }
.fp-group-head span { color: #6f879c; font-size: 11px; }
.fp-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.fp-g:first-child .fp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-row label {
  position: relative; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; padding: 4px;
  border: 1px solid #3a4a5c; border-radius: 8px; font-size: 13px; color: #bdcede;
  background: rgba(18,27,37,.82); cursor: pointer;
}
.fp-row label.on {
  border-color: #9ddcff;
  color: #fff;
  background: linear-gradient(180deg, rgba(54,139,199,.58), rgba(30,91,139,.58));
  box-shadow: inset 0 0 0 2px rgba(157,220,255,.78), inset 0 1px 6px rgba(255,255,255,.3), 0 0 9px rgba(62,185,255,.48);
}
.fp-row label input { position: absolute; opacity: 0; pointer-events: none; }
.fop-label { width: 100%; overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; font-weight: 600; }
.fp-g:first-child .fop.quality {
  border-color: #3a4a5c;
  color: #bdcede;
  background: rgba(18,27,37,.82);
}
.fp-g:first-child .fop.quality.on {
  border-color: color-mix(in srgb, var(--fc) 72%, #fff);
  color: #fff;
  background: color-mix(in srgb, var(--fc) 68%, #101820);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fc) 65%, #fff), inset 0 1px 6px rgba(255,255,255,.3), 0 0 10px color-mix(in srgb, var(--fc) 62%, transparent);
}
.fp-row label:has(input:disabled) { opacity: .3; pointer-events: none; }
.fp-btns { flex: 0 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; padding: 9px 10px 10px; border-top: 1px solid #405469; background: rgba(12,19,27,.96); }
.fp-btns button { height: 42px; border-radius: 9px; font-size: 14px; }
.fp-btns #fp-clear { border: 1px solid #465b6e; color: #9fb0bf; background: #202c37; }
.fp-btns #fp-done { border: 1px solid #6cb6e8; color: #f4fbff; background: linear-gradient(#3f8bc0,#23618e); box-shadow: 0 3px 10px rgba(31,113,173,.3); }
/* 闁绘せ鏅涢幖褔骞欏鍕▕/闁稿繗娉涢悾鐘诲箰婢舵劖灏﹂悘蹇撶箲鐎垫粓鏌?*/
.mini { font-size: 12px; padding: 4px 10px; border-radius: 6px; background: #223040; border: 1px solid #46586d; color: #d6e4f2; }

.info.warn { color: #ffb0a0; }

/* ===== 闁煎啿鑻€垫﹢寮弶璺伌閻忕偐鍋撻柨娑欒壘娑斿繑绂嶉搹鐟扳挅+閻熶礁鎳庨ˇ顒勫冀?/ 闁告瑥鍘栭弲鍫曟嚄鐏炶棄鐦跺?===== */
.bag-panel { width: min(700px, 94vw); }
.bag-body { display: flex; gap: 14px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.bag-left { position: relative; width: 340px; flex: 0 0 340px; height: 430px; border-right: 1px dashed #2e3f52; }
.avatar.big {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%);
  width: 180px; height: 320px; border: 1px dashed #3c5168; border-radius: 12px; z-index: 0;
  display: flex; align-items: center; justify-content: center; color: #6d8299; font-size: 13px; text-align: center;
  background: radial-gradient(circle at 50% 34%, #233142, #121a23);
}
.eqcol { position: absolute; top: 14px; bottom: 14px; width: 52px; display: flex; flex-direction: column; gap: 6px; z-index: 1; }
.eqcol.left { left: 6px; }
.eqcol.right { right: 6px; }
.eqcol .equip-cell { width: 50px; height: 46px; }
.eqcol .equip-cell .it i { width: 16px; height: 16px; }

.bag-right { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.bag-right .pages { margin: 0 0 8px; flex-wrap: wrap; }   /* 5 濡炪倕鐏氬鍌滅玻閸曨偆娼岄柤濂変簻婵晠骞庡Ο娆炬斀闁挎稑濂旂粭澶愬箰閵堝懎绔?*/
.bag-right .bag-grid { grid-template-columns: repeat(7, 42px); }
.bag-right .bag-cell { width: 42px; height: 42px; }
#bag-filter-note { margin: 6px 0 0; }
.bag-tools { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.bag-tools .tool {
  font-size: 14px; padding: 10px 18px; border-radius: 9px;
  border: 1px solid #5d7b99; background: linear-gradient(#3b5168,#2a3a4c); color: #eaf6ff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); letter-spacing: 1px;
}
.bag-tools .tool:hover { filter: brightness(1.15); }
.bag-tools #btn-filter.cancel-filter {
  border-color: #ffd05a; background: linear-gradient(#eaa63a,#a86112); color: #fff8da;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 14px rgba(255,181,48,.68); font-weight: 700;
}
.bag-tools .silver { margin-left: auto; color: #ffd76a; font-size: 14px; }
.phead.slim { margin-bottom: 10px; }
#bag-count.muted { color: #8fa6bd; font-size: 13px; }

/* 濡炪倗鏁搁鐑芥懚瀹ュ懎寮砋I闁挎稑鐗呯粭澶岀玻娴ｇ甯庨柨?*/
.bag-right .page-tab { font-size: 12px; padding: 5px 13px; border-radius: 14px; background: rgba(30,42,56,.85); border: 1px solid #3a4e63; color: #9fb2c6; }
.bag-right .page-tab.on { background: #2f6fb0; color: #fff; border-color: #6aa8dd; }

/* ===== 闁哄牜鍓濋悿?UI 闁哄牃鍋撶紓浣哥墦閳ь剙鍊块崢?===== */
/* 闁煎啿鑻€?闁告瑦锚瀹搁亶骞愭径鎰唉闁挎稒姘ㄤ簺闁告帗澹嗛弫楣冩閵忕姷淇洪梺顔哄妼閻櫕绋?*/
#hud { top: auto; bottom: 22px; right: auto; left: 50%; transform: translateX(-50%); gap: 18px; }
#hud button { font-size: 16px; padding: 10px 26px; border-radius: 22px; white-space: nowrap; }

/* 闁瑰瓨蓱閺嬬喖鎮惧畝鍕〃鐠侯垶骞庨埀顒勬嚄閼恒儳鍩夐柨娑欒壘缁ㄦ娊鏌堥妸銉︾＝濞戞搩浜濈€垫粓鏌﹂绛嬪妧濞戞挸锕ラ弻鐔肺熼鍕€诲☉鎾卞€栭悧鎼佹晬濞戞凹鍎戝ù婊冩湰閻楀憡绋婇柆宥嗙カ缂佸矁娉曢埞鏍暜閿曗偓閸犲酣宕￠幘顔荤磿缂?*/
#skill-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px;
  display: flex; flex-direction: row; gap: 16px;
}
.skill-slot {
  position: relative; width: 56px; height: 56px; overflow: hidden; border-radius: 50%;
  border: 2px solid #c9a24a; background: radial-gradient(circle at 50% 38%, #16374d, #050a10 74%);
  box-shadow: 0 0 0 2px #12181d, 0 3px 9px rgba(0,0,0,.62), inset 0 0 10px rgba(0,0,0,.7);
}
.skill-icon { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .25s ease; }
.skill-slot.cooling .skill-icon { filter: grayscale(.62) brightness(.55); }
.skill-cd-mask { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.skill-cd-text {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  color: #fff; font: 800 19px/1 Georgia, serif; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px #000, 0 0 7px rgba(0,0,0,.9);
}
.skill-slot.ready { animation: skill-ready .7s ease-out; }
@keyframes skill-ready {
  from { box-shadow: 0 0 0 2px #12181d, 0 0 0 3px rgba(255,214,120,.95), 0 0 24px rgba(255,196,60,.9); }
  to { box-shadow: 0 0 0 2px #12181d, 0 3px 9px rgba(0,0,0,.62), inset 0 0 10px rgba(0,0,0,.7); }
}

/* 闁绘瑯鍓涢悵娑欑閾忕懓鈷栭柣锝呯焸濞间即鏁嶅顓炵樆缂佹梹鐗曢惈鍡涘几閸曨偅绂堥柨娑樺缁楀倿寮柅娑欑溄闁绘せ鏅為ˉ濠冨緞閸ャ儮鍋撴担椋庣憮闁哄倻鎳撻惈姗€骞€?*/
.character-panel {
  width: min(520px, 94vw); height: auto; max-height: min(820px, 94vh); display: flex; flex-direction: column; overflow: auto;
  background: linear-gradient(145deg, #202d3a 0%, #111923 48%, #172331 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 45px rgba(37,79,111,.16), 0 18px 55px rgba(0,0,0,.72);
}
.character-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }
.character-body .character-figure {
  width: 100%; max-width: 460px; height: 360px; min-width: 0; min-height: 240px; flex: 0 1 360px; margin: 0 auto;
  border-bottom: 1px solid rgba(99,139,170,.42);
}
.character-figure .character-avatar {
  position: absolute; inset: 4px; width: auto; height: auto; transform: none;
  /* 人物预览图：竖版 3:4，按高度 94% 缩放（宽度不会碰到左右装备栏），容器尺寸不变 */
  background-color: #16202c;
  background-image: url('assets/player/portrait.jpg'), radial-gradient(circle at 50% 48%, #263e52, #101820 74%);
  background-position: center, center; background-repeat: no-repeat, no-repeat;
  background-size: auto 94%, cover;
}
.character-body .character-figure .eqcol { top: 0; bottom: 0; gap: 4px; justify-content: center; }
.character-body .character-figure .eqcol .equip-cell { width: 38px; height: 36px; }
.character-stats {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; min-height: 0;
  padding: 6px 6px 2px; border-top: 1px solid rgba(255,255,255,.05);
}
.stat-group {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: start;
  margin: 0; padding: 0; border: 0; background: none;
}
.stat-group h3 { grid-column: 1 / -1; margin: 0; padding: 0 0 4px; border-bottom: 1px solid #5b7690; color: #e0c16d; font-size: 14px; letter-spacing: 2px; text-shadow: 0 1px 4px #000; }
/* 閻忕偟鍋為埀顑嫭鏆柟瀛樺姇閻㈩偅鎯旈弴鐘崇潖闁汇劌瀚惃顒勫础閳ヨ櫕鍋ラ柨娑樺缁楀宕樺鍡樞﹂柟鍏哥闁解晝鎮扮仦钘夌仚閻?*/
.stat-row {
  display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0;
  padding: 2px 8px 3px; border: 1px solid #33455a; border-radius: 8px;
  background: linear-gradient(180deg, rgba(33,50,66,.92), rgba(12,18,26,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -5px 10px rgba(0,0,0,.4);
  color: #c7d6e3;
}
.stat-row label { color: #8fa6bd; font-size: 10px; line-height: 1.25; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-row span {
  min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: #59e67a; font-size: 14px; line-height: 1.3; font-weight: 700; text-align: left; font-variant-numeric: tabular-nums;
}

/* 闁煎啿鑻€垫ê顔忛敂鎸庢珷濞存粏娅ｆ晶鍧楁煣閻戞ê濮?+ 閻熶礁鎳庨ˇ顒勫冀韫囨搩鍤犵紒澶嬫緲缁佸灚绺?*/
.bag-left { position: relative; flex: 1 1 0; min-width: 330px; border-right: none; height: auto; min-height: 430px; }
#avatar.big {
  position: absolute; inset: 4px; width: auto; height: auto; transform: none; z-index: 0;
  border-radius: 14px; border: 1px dashed #3c5168;
  display: flex; align-items: center; justify-content: center;
  /* 人物预览图：竖版 3:4，按高度 88% 缩放，人物主体在左右装备栏之间（法杖自然穿过栏后） */
  background-color: #16202c;
  background-image: url('assets/player/portrait.jpg'), radial-gradient(circle at 50% 36%, #24364a, #101820 78%);
  background-position: center, center; background-repeat: no-repeat, no-repeat;
  background-size: auto 88%, cover;
}
.bag-left .eqcol { top: 10px; bottom: 10px; width: 52px; z-index: 1; }
.bag-left .eqcol.left { left: 6px; }
.bag-left .eqcol.right { right: 6px; }
.bag-left .eqcol .equip-cell { width: 50px; height: 50px; background: rgba(8,14,22,.72); }
.bag-right { flex: 1 1 0; min-width: 330px; }

/* 闁煎啿鑻€垫﹢妫冮姀鈩冪凡闁衡偓閸撲胶宕曢柨娑欒壘娑斿繑绗熻濮瑰鎮ч埡浣搁殬闁搞儱鎼悾楣冩晬鐏炶棄绀佸〒姘€鍕靛妧濠靛倸鈧喎鍨遍柛?7 闁告帗顨嗛悧鍝モ偓娑欏姧缁辨繈宕㈢紒妯虹闁告瑥鍘栭弲鑸靛緞濮橆偆绋囬柣锝嗙懅濞?*/
.bag-panel .bag-left { flex: 1 1 214px; min-width: 190px; }
.bag-panel .bag-right { flex: 0 0 324px; width: 324px; min-width: 0; }   /* 324 = 7閼?2 闁?+ 6閼? 闂傚倻顥愮粣?*/
.bag-panel .bag-left .eqcol { justify-content: center; }
.bag-panel .page-tab { padding: 5px 10px; }                              /* 5 濡炪倗鏁搁鐑藉捶閵婏附鏆紒鎰閹鎯冮崟顐㈢仚閻庨€涚矙閸ｇ兘骞掗幒鎾崇亣濞戞挴鍋撻悶?*/
.bag-panel .bag-toolbar .tool { padding: 8px 12px; }                     /* 闁圭顦甸幐?闂佹崘娉涚粩鐢稿捶閵婏附鏆紒鎰閹宕ョ仦鎯х瑩闁哄嫬澧介妵?*/

/* 鐎殿喖鎼€靛弶銇勯崗鍛婄溄闁绘せ鏅犻。鈺冩喆閸剛绐楀┑鍌涱殔缁?+ 鐎归潻绠戣ぐ鎼佸礆?*/
.char-box { position: relative; width: 210px; height: 300px; margin: 0 auto; }
.char-box .avatar.enh {
  position: absolute; inset: 6px; border-radius: 12px;
  border: 1px dashed #3c5168; display: flex; align-items: center; justify-content: center;
  /* 人物立绘铺满整个预览容器（之前会为左右装备栏留 76px 白边，图缩在中间显得很小） */
  background-color: #16202c;
  background-image: url('assets/player/portrait.jpg'), radial-gradient(circle at 50% 34%, #24364a, #101820 80%);
  background-position: center, center; background-repeat: no-repeat, no-repeat;
  background-size: 100% auto, cover;
  color: #6d8299; font-size: 12px; z-index: 0;
}
.char-box .eqcol.small { width: 40px; top: 6px; bottom: 6px; z-index: 1; }
.char-box .eqcol.small.left { left: 2px; }
.char-box .eqcol.small.right { right: 2px; }
.char-box .eqcol.small .mini-slot { width: 38px; height: 38px; margin-bottom: 4px; background: rgba(8,14,22,.72); }
.col-char { width: 220px; flex: 0 0 220px; }

/* 闁煎浜滄慨鈺呭触閸喎鐏囬悶?*/
.auto-row { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; color: #bfe0f0; font-size: 13px; flex-wrap: wrap; }
.auto-row select { padding: 4px 8px; border-radius: 6px; background: #1b2531; color: #dfe9f3; border: 1px solid #46586d; }

/* 缂佹稒鐩埀顒€顧€缁辨壆绮╅弽銊ョ瑩 + 閹煎瓨娲熼崕瀛樺緞瑜庣€垫粓鏌?*/
.filter-pop .fp-row { flex-direction: column; align-items: stretch; gap: 4px; }
.filter-pop .attrs-row { max-height: 220px; overflow-x: hidden; overflow-y: auto; }
.filter-pop .fp-row label { justify-content: flex-start; }
.filter-pop .fp-row.wrap { flex-direction: row; }
.filter-pop .fp-btns { display: flex; gap: 12px; margin-top: 14px; justify-content: center; }
.filter-pop .fp-btns button { flex: 1; font-size: 15px; padding: 12px 0; border-radius: 10px; }
.filter-pop .fp-btns .go { background: linear-gradient(#3a86c8,#2b6aa3); color: #fff; border: 1px solid #6aa8dd; font-weight: 700; }
.filter-pop .fp-btns .go2 { background: #2a3744; color: #dfe9f3; border: 1px solid #55667a; }

/* 閻忓繐绻戠€垫粓鏌﹂鍓у煚濞戞挴鍋撻柧璇茬Т閸?*/
.stitle button.mini, .stitle .mini { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(38,54,74,.9); border: 1px solid #4c6684; color: #bfe0f0; }

.flt-hint { color: #ffd76a; font-size: 11px; padding: 2px 0; }

/* 缂佹稒鐩埀顒€顦板鍧楀礉閵娢愁參鐛?+ 闁哄倹婢橀幃搴ㄥ箣閹邦垼鏀?+ bank 闁圭顦甸幐?+ 闁稿繗娉涢悾?*/
.flt-banner { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 10px; border: 1px solid #b8860b; border-radius: 8px; background: rgba(120,90,20,.28); color: #ffe08a; font-size: 13px; }
.flt-banner button { margin-left: auto; }
.side-row.is-new { border-color: #ffd76a; background: rgba(160,120,30,.22); }
.flt-hint { border: 1px dashed #b8860b; color: #ffd76a; background: rgba(120,90,20,.15); border-radius: 6px; padding: 4px 8px; font-size: 12px; text-align: left; }
.bank-row { text-align: center; margin: 8px 0; }
.bank-row .bank { font-size: 15px; padding: 9px 26px; border-radius: 10px; background: linear-gradient(#e0a83a, #c07f1f); color: #1c1405; font-weight: 800; border: 1px solid #ffd76a; box-shadow: 0 0 14px rgba(255,200,60,.5); }
.actions.center { justify-content: center; }
.fp-title { display: flex; align-items: center; gap: 8px; }
.fp-title .x { margin-left: auto; }
.fp-empty.warn { color: #ffb0a0; font-size: 12px; }

/* 濡炪倕鐖奸崕?announce闁挎稒鐭懙鎴炵▔婵犲啯鐓欓悘鐐叉噸閼垫垿鏁嶇仦鐣屾綌缂佲偓閸濆嫭鍊垫繛锝傗偓鍐叉瘔 */
#announce {
  position: fixed; left: 50%; top: 24%; transform: translate(-50%, -50%);
  font-size: 26px; font-weight: 800; text-shadow: 0 0 18px currentColor, 0 3px 10px #000;
  opacity: 0; pointer-events: none; z-index: 98; text-align: center; white-space: nowrap;
}
#announce.show { animation: ann 3.2s ease forwards; }
@keyframes ann { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.85); } 8% { opacity: 1; transform: translate(-50%,-50%) scale(1.06); } 13% { transform: translate(-50%,-50%) scale(1); } 86% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.04); } }

/* 闁告繀娴囧婵嬫嚌閸欏鐎悗?闁搞儳鍋撻悥锝嗘綇鐟欏嫷鏀?*/
.it { color: var(--tc, var(--c)); }
.it b { font-weight: 600; }
.it i { border: 1px solid currentColor; background: var(--c); }
.tier { opacity: .95; }

/* 闁告帗顨夐妴鍐╃▔婵犲啯鐓欓柣銊ュ濞存劗鈧姘ㄩ悺顐︽焻婢跺绲圭紒鈧悮瀵哥濞戞挸绉瑰▓銏ゅ礆濡ゅ嫨鈧啫顭ㄥ顒€袟闁?*/
.flt-note {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 6px 8px;
  border: 1px solid #b8860b; border-radius: 6px; background: rgba(120,90,20,.28); color: #ffe08a; font-size: 12px;
}
.flt-note button { margin-left: auto; }

/* 閻忓繐绻戦弻鐔煎冀閻撳骸鏁堕柣銊ュ婢у潡宕笟濠勭獥闁搞儳鍋撻悥锝嗙▔瀹ュ牜娼堕柟鎼炲€涢摂瀣Υ娴ｈ鐎悗娑欘殙缁夋挳宕欓搹瑙勯槣闁?*/
.bag-right .bag-cell, .equip-cell, .sys-cell, .sub-cell, .main-cell { overflow: hidden; }
.it { max-width: 100%; }
.it i { flex: 0 0 auto; width: 18px; height: 18px; }
.it b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; line-height: 1.1; padding: 1px 1px 0; }
.bag-right .bag-cell .it i { width: 16px; height: 16px; }

/* 婵繐绠戝▍鎺楁偨閵娧勫焸閻庡湱鍋涘ù姗€寮介崶椋庣婵炲娲樺鐘诲炊閹惧懐绀嗛柨娑樻湰鐎垫粓宕担钘夌獩闁告梻濮剧粩鐔奉浖閸℃ê浼庨弶?*/
.it.wicon i {
  width: 26px; height: 26px;
  background: url('assets/items/weapon.png') center / cover no-repeat;
  border: 2px solid var(--c);
  border-radius: 4px;
  box-shadow: 0 0 6px var(--c);
}
.bag-right .bag-cell .it.wicon i { width: 26px; height: 26px; }

/* 閻庤绻勯悡?3/4/5 缂佺嫏鍛殢闁活亞鍠庨悿鍕偓瑙勭箘閻撳爼宕堕幘鍛濞戞挸绉撮悽顐ｅ緞閺嶎煈鏀遍柨娑樼墕椤﹁顩奸崱娆愭殸闁搞儳鍋撻悥锝夊储閻旈攱绂堥柤濂変簻閻㈩偊鏁?*/
.it.gicon i {
  width: 26px; height: 26px;
  background: var(--gi) center / cover no-repeat;
  border: none;
  box-shadow: none;
}
.bag-right .bag-cell .it.gicon i { width: 26px; height: 26px; }

/* 闁哄棙顨婇崳鍓ф啑閸涱収妲甸柛銉ュ⒔閻?*/
.it.bicon i {
  width: 26px; height: 26px;
  background: url('assets/items/blueprint.png') center / cover no-repeat;
  /* 边框与光晕都跟随图纸品质色（1 档蓝、2/3 档金），继承自 .it 的 --c */
  border: 2px solid var(--c);
  border-radius: 4px;
  box-shadow: 0 0 8px var(--c);
}
/* 图纸选择浮层（点合成面板的图纸槽弹出；挂 body 上用 fixed 定位，不被面板 overflow 裁掉） */
.bp-picker {
  position: fixed; z-index: 300; min-width: 150px; max-width: min(240px, calc(100vw - 16px));
  max-height: 240px; overflow-y: auto; padding: 4px;
  background: #16202b; border: 1px solid #46596d; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
}
.bp-picker-head { padding: 4px 6px 6px; font-size: 11px; color: #9fb3c8; }
.bp-picker-row {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 6px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  font-size: 11px; text-align: left;
}
.bp-picker-row:hover, .bp-picker-row:focus-visible { background: rgba(90,168,255,.14); border-color: #46596d; outline: none; }
.bp-picker-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-picker-count { flex: none; margin-left: auto; padding-left: 8px; color: #9fb3c8; font-variant-numeric: tabular-nums; }
.blueprint-slot.has { padding: 0; overflow: hidden; }
.blueprint-slot.has .sys-item,
.blueprint-slot.has .it,
.blueprint-slot.has .it i { width: 100% !important; height: 100% !important; }
.blueprint-summary { border-color: #8a6f28; color: #f1cf67; background: rgba(74,52,10,.34); }

/* ===== 閻熶礁鎳庨ˇ顒勫触閸喎鐏囧Δ鍌浬戠粩濠氬矗鐏炲墽鍩夐柣锝呯焸濞?===== */
.synth-hd-layout {
  display: grid;
  grid-template-columns: minmax(350px, 1.18fr) minmax(280px, .9fr);
  gap: 12px;
  min-height: 690px;
}
.equipment-synth-layout { min-height: 620px; }
.equipment-synth-layout #inherit-info { height: 300px; min-height: 300px; flex: 0 0 300px; }
.synth-compose-card,
.synth-inherit-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #52677d;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 24%),
    linear-gradient(180deg, rgba(28,38,49,.98), rgba(10,15,21,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 28px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.34);
}
.synth-compose-card::before,
.synth-inherit-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(133,160,184,.18);
  border-radius: 10px;
  pointer-events: none;
}
.synth-card-title {
  position: relative;
  z-index: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9f4ff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 7px;
  text-shadow: 0 0 14px rgba(125,198,255,.42);
  border-bottom: 1px solid #495d72;
  background: linear-gradient(180deg, rgba(64,81,99,.72), rgba(25,34,44,.82));
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.synth-compose-card #synth-stage {
  position: relative;
  margin: 8px 10px 0;
  height: 360px;
  min-height: 0;
  padding: 20px 14px 10px;
  display: flex;
  flex-direction: column;
  border-color: #46596d;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 42%, rgba(53,101,137,.18), transparent 38%),
    linear-gradient(180deg, rgba(7,11,16,.8), rgba(17,23,30,.68));
}
.synth-inputs {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.synth-core-row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.synth-link-line {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, #47677f, #7399b4, #47677f);
  box-shadow: 0 0 7px rgba(101,166,214,.6);
}
.blueprint-slot.available {
  cursor: pointer;
  border-color: #e6bf42 !important;
  box-shadow: 0 0 14px rgba(236,190,52,.38), inset 0 0 12px rgba(255,210,70,.12);
}
.blueprint-slot.active {
  cursor: pointer;
  border-color: #ffe06a !important;
  box-shadow: 0 0 18px rgba(255,205,48,.62), inset 0 0 14px rgba(255,220,90,.18);
}
.blueprint-slot.disabled { cursor: not-allowed; opacity: .42; }
.synth-branch {
  width: 170px;
  height: 34px;
  margin: 0 auto -1px;
  border-left: 1px solid #52758f;
  border-right: 1px solid #52758f;
  border-bottom: 1px solid #52758f;
  opacity: .66;
  box-shadow: 0 2px 7px rgba(76,139,185,.22);
}
.synth-compose-card #synth-subs {
  position: relative;
  margin-top: 0;
}
.synth-compose-card #synth-subs::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  width: 1px;
  height: 34px;
  background: #52758f;
}
.synth-compose-card .main-cell,
.synth-compose-card .main-slot .main-cell {
  width: 72px;
  height: 72px;
}
.synth-compose-card .sub-cell {
  width: 56px;
  height: 56px;
}
.synth-compose-card #synth-result,
.synth-compose-card #synth-tip {
  margin-left: 10px;
  margin-right: 10px;
}
.synth-stage-controls { margin-top: auto; }
.synth-stage-controls #synth-tip {
  margin: 0 0 4px;
  min-height: 18px;
  text-align: left;
}
.synth-stage-controls .synth-actions { margin: 4px 0 0; }
.synth-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 12px 16px;
}
.synth-actions #synth-go {
  grid-column: 2;
  min-width: 188px;
  padding: 13px 34px;
  border: 1px solid #78bcea;
  border-radius: 10px;
  color: #f4fbff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 8px;
  text-indent: 8px;
  background: linear-gradient(180deg, #438bc1, #205b8b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 20px rgba(53,147,216,.34), 0 5px 12px rgba(0,0,0,.38);
}
.synth-actions #synth-go:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.synth-actions #synth-go:disabled { opacity: .42; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.synth-actions #synth-clear {
  grid-column: 3;
  justify-self: start;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #596a7b;
  background: #222d38;
  color: #aebdca;
}
.synth-inherit-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}
#inherit-info {
  position: relative;
  z-index: 1;
  margin: 9px 9px 0;
  min-height: 315px;
  display: flex;
  flex-direction: column;
}
.inherit-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #394958;
  border-radius: 8px 8px 0 0;
  background: rgba(5,8,12,.66);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.5);
}
.inherit-rows { min-height: 0; overflow: hidden; }
.inherit-head,
.inherit-row {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) 66px 72px 24px;
  align-items: center;
  min-height: 31px;
  padding: 0 7px;
  border-bottom: 1px solid rgba(94,112,128,.22);
  column-gap: 3px;
}
.inherit-head {
  min-height: 34px;
  color: #d8b96b;
  font-size: 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(42,42,38,.9), rgba(23,25,27,.82));
}
.inherit-head span:first-child { text-align: left; }
.inherit-row { color: #84909b; font-size: 13px; }
.inherit-row.hit { color: #42e36a; text-shadow: 0 0 9px rgba(42,226,91,.22); }
.inherit-count,
.inherit-rate,
.inherit-mark { text-align: center; }
.inherit-mark { font-size: 18px; }
.inherit-row.miss .inherit-mark { color: #747d86; }
.inherit-empty { padding: 28px 8px; color: #687887; font-size: 12px; text-align: center; }
.inherit-summary {
  min-height: 57px;
  padding: 9px 10px;
  border: 1px solid #4e4a36;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(12,13,11,.84);
  color: #d4bb72;
  font-size: 12px;
  line-height: 1.55;
}
.synth-recommend {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  margin: 9px 9px 0;
  padding-top: 8px;
  border-top: 1px solid #415365;
}
.recommend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #dceaf6;
  font-size: 14px;
  font-weight: 700;
}
.recommend-head .mini {
  padding: 3px 10px;
  border: 1px solid #4d6881;
  border-radius: 12px;
  background: #263745;
  color: #bfe0f0;
}
.synth-recommend-list {
  max-height: 205px;
  padding-right: 3px;
}
.synth-recommend-list .side-row { padding: 4px 5px; }
.synth-recommend-list .side-row.clickable { cursor: pointer; }
.synth-recommend-list .side-row .sw { flex: 0 1 auto; min-width: 70px; }
.synth-recommend-list .side-row .swtxt { max-width: 62px; }

/* 閻庤绻勯悡鍫曞触閸喎鐏囬柨娑欑闁劑鎮介妸顭戞濠㈣泛娲ら幃搴ㄥ箣閹邦剙钃熼柡宥呯箳缁劑寮?*/
.gem-synth-layout { min-height: 620px; }
.gem-compose-card { display: flex; flex-direction: column; }
.gem-compose-card #merge-area {
  margin: 34px auto 18px;
  width: fit-content;
  padding: 18px;
  border-color: #46596d;
  background:
    radial-gradient(circle at 50% 50%, rgba(77,112,164,.22), transparent 62%),
    linear-gradient(180deg, rgba(7,11,16,.8), rgba(17,23,30,.68));
}
.gem-compose-card .grid-in { justify-content: center; }
.gem-compose-card .synth-actions { margin: 8px 12px 16px; }
.gem-compose-card .synth-actions #merge-go,
.enh-compose-card .synth-actions #enh-go {
  grid-column: 2;
  min-width: 188px;
  padding: 13px 34px;
  border: 1px solid #78bcea;
  border-radius: 10px;
  color: #f4fbff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 8px;
  text-indent: 8px;
  background: linear-gradient(180deg, #438bc1, #205b8b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 20px rgba(53,147,216,.34), 0 5px 12px rgba(0,0,0,.38);
}
.gem-compose-card .synth-actions #merge-go:disabled,
.enh-compose-card .synth-actions #enh-go:disabled { opacity: .42; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.gem-compose-card .synth-actions #merge-clear,
.enh-compose-card .synth-actions #enh-clear {
  grid-column: 3;
  justify-self: start;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #596a7b;
  background: #222d38;
  color: #aebdca;
}
/* 閻庤绻勯悡鍫曞触閸喎鐏囩紓浣规尰閻忓鏁嶅顒佺闁?+ 闁告艾绉惰ⅷ闁挎稑鑻ù姗€寮介崶锔剧憪闁衡偓閸欍儳顏辨繛鍡忊偓铏€ら柟瀛樺姉婢规帡寮崼顒傜缂佽京濮靛妤呮晬?6 173濠靛倹顣悗瑙勭箘閻撳爼宕ラ崼鐔风亣闁?0 閻?250閼?50 闁归鍘уù姗€鏁?*/
.merge-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 12px 16px;
  padding: 14px;
  border: 1px solid #394958;
  border-radius: 12px;
  background: rgba(5,8,12,.5);
}
.merge-result[hidden] { display: none; }
.merge-result-stage { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.merge-result-stage .it i { width: 72px !important; height: 72px !important; }
.merge-result-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  opacity: 0;
  pointer-events: none;
  background: url('assets/effects/gem-synth.png') 0 0 / 1700px 170px no-repeat;
}
.merge-result-fx.play { animation: gem-synth-frames .8s steps(10) 1 forwards, gem-synth-fade .8s linear 1 forwards; }
@keyframes gem-synth-frames { from { background-position: 0 0; } to { background-position: -1700px 0; } }
@keyframes gem-synth-fade { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
.merge-result-name { font-size: 17px; font-weight: 700; }
.gem-probability-card #merge-info {
  position: relative;
  z-index: 1;
  min-height: 210px;
  margin: 9px 9px 0;
}
.gem-probability-table {
  min-height: 140px;
  overflow: hidden;
  border: 1px solid #394958;
  border-radius: 8px 8px 0 0;
  background: rgba(5,8,12,.66);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.5);
}
.gem-probability-row {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(94,112,128,.28);
  color: #b8c8d7;
  font-size: 14px;
}
.gem-probability-row b { color: #ffd56a; font-size: 26px; }
.gem-probability-row strong { color: #eef7ff; font-size: 17px; }
.gem-probability-row.higher { background: linear-gradient(90deg, rgba(47,111,176,.08), rgba(71,144,198,.18)); }
.gem-probability-row.higher b { color: #64c7ff; text-shadow: 0 0 10px rgba(80,190,255,.35); }
.gem-probability-empty {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: #687887;
  font-size: 12px;
  text-align: center;
}
.gem-probability-card .synth-recommend-list { max-height: 275px; }

/* 閻熶礁鎳庨ˇ顒€顕ｉ崫鍕嚙闁挎稒淇洪ˉ濠冨緞閸パ勫€ら柟瀛樺姇閹挸鈻庨幆褍钃熼柡宥呯箰缁旈浠﹂埀?*/
.enh-hd-layout { min-height: 620px; }
.enh-compose-card { display: flex; flex-direction: column; }
.enh-stage {
  height: 560px;
  margin: 10px 10px 0;
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #46596d;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 32%, rgba(53,101,137,.18), transparent 42%),
    linear-gradient(180deg, rgba(7,11,16,.8), rgba(17,23,30,.68));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);
}
.enh-summary {
  width: 100%;
  height: 190px;
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.enh-stage #enh-item-slot { justify-content: center; }
.enh-stage #enh-item-slot .main-cell { width: 74px; height: 74px; }
.enh-stage .rate { margin: 3px 0 5px; }
.enh-stage > .stitle { margin: 5px 0; }
.enh-stage .grid16 { width: fit-content; margin: 0 auto; padding: 5px; }
.enh-stage .grid-in { grid-template-columns: repeat(4, 42px); gap: 4px; }
.enh-stage .sys-cell { width: 42px; height: 42px; }
.enh-compose-card #enh-diff {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 9px 5px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 2px 10px;
}
.enh-compose-card #enh-diff .dlh,
.enh-compose-card #enh-diff .empty { grid-column: 1 / -1; }
.enh-compose-card #enh-diff .dl { padding: 2px 4px; font-size: 12px; }
.enh-compose-card #enh-diff .activation-preview { grid-column: 1 / -1; color: #ffd76a; }
.enh-compose-card #enh-diff .activation-preview span:last-child { color: #42d9f5; }
.enh-compose-card .enh-actions { width: 100%; margin: 3px 0 4px; }
.enh-side-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 5px;
  letter-spacing: 0;
}
.enh-side-tabs button {
  height: 34px;
  border: 0;
  border-radius: 7px;
  color: #8fa5b8;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}
.enh-side-tabs button.on {
  color: #f2f9ff;
  background: linear-gradient(180deg, #3f83b7, #245d88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 10px rgba(62,158,221,.24);
}
/* 濞戞挶鍊撻柌婊堝礆閸℃稏鈧宕楁潏鈺傛殢濞戞挴鍋撳☉鎿冧簵閳ь剙鐭侀、鎴﹀Υ瀹ュ繒绐?px 濞戞挸锕ㄧ粩鐔烘崉濠靛洦鏉归柛锔哄妼椤﹁崵浠﹂崒锔剧闁告劕鎳庨惇鏉款浖閸℃浠搁柛銉ユ惈閻?289px 濡ゅ倹菧閳?
   濞寸姰鍎辨晶鐘崇閾忕懓鈷栧Λ鏉垮椤秹鎯冮崟顒夋敱闁哄娉涜ぐ褔寮?280px闁挎稑鑻崹蹇涘礆閹峰苯鍓归柛鏍ф嚀椤ュ﹥寰勯崶椋庣289px闁挎稑顦板鍌炲矗閸忓懏娅犲Δ鐘妽閻忥附瀵煎顓熸濞达絾鎸风粭鍛矓?9px闁?*/
.enh-side-view { flex: 0 0 289px; min-height: 0; margin: 9px 9px 0; }
.enh-character-panel {
  position: relative;
  z-index: 1;
  min-height: 289px;   /* 濞戞挸绨洪埀顒€鐭侀崕妤呭礌閸涢偊妫呭璺烘储閳ь剙绉甸、瀣几鐠虹儤鍊卞Δ?*/
  margin: 0;
  border: 1px solid #394958;
  border-radius: 8px;
  background: rgba(5,8,12,.66);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.5);
}
.enh-character-panel .char-box { height: 268px; }
.enh-inventory-panel {
  position: relative;
  z-index: 1;
  padding: 8px;
  border: 1px solid #394958;
  border-radius: 8px;
  background: rgba(5,8,12,.66);
}
.enh-inventory-panel .recommend-head { margin-bottom: 7px; }
.enh-bag-grid {
  max-height: 238px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  align-content: start;
}
.enh-bag-grid .empty { grid-column: 1 / -1; }   /* 缂佸苯鎼崹顏嗘偘閵婏箑绲圭紒鈧崫鍕獥婵犲ň鍓濋弳锝囨偘瀹€瀣闁告帩鍋呯亸瀣捶閵娿倗顏卞☉鎿冧簼閻楀摜鈧稒鍔欓崳?*/
.enh-recommend .enh-gem-recommend { max-height: 218px; }

/* ===== 閻熶礁鎳庨ˇ顒佹姜椤掑倐鈺呮晬濮橆厽鎷卞ù锝嗘惈缁辨瑧鏁敃鈧閬嶅礌閺嶇數绀?X 闁?闁烩晩鍠楅悥锝夋晬閸喐寮撻柡鈧ぐ鎺嗗亾閻欏懐绀嗛柨娑樼灱缁劑寮搁崟顐殸濮掔粯鍔橀ˉ濠冨緞閸パ勫€ら柟瀛樺姍閵?===== */
.transfer-compose-card { display: flex; flex-direction: column; }
.transfer-compose-card #trans-stage {
  position: relative;
  margin: 8px 10px 0;
  height: 360px;
  min-height: 0;
  padding: 20px 14px 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid #46596d;
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 42%, rgba(53,101,137,.18), transparent 38%),
    linear-gradient(180deg, rgba(7,11,16,.8), rgba(17,23,30,.68));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
}
.transfer-compose-card #trans-stage .synth-core-row { gap: 18px; }
.transfer-compose-card #trans-stage .main-slot .main-cell { position: relative; width: 88px; height: 88px; }
.transfer-compose-card #trans-stage .cell-lv { position: absolute; right: 2px; bottom: 1px; font-size: 11px; color: #ffd76a; text-shadow: 0 1px 2px #000; }
/* 濞戞挴鍋撻柛娆嶅劥閻︿粙骞撻幇顔轰粵闁挎稒宀搁悵顔芥償閿曗偓濞存劗鈧鐔槐婵堚偓娑欘殕閺嗙喖宕ｅΟ鍝勵嚙濞戞挸绉崇槐浼村箮婵犲啫鐦婚梺绛嬪枟鐏忓鎸?*/
.synth-stage-controls #trans-tip {
  height: 18px; line-height: 18px; margin: 0 0 4px;
  text-align: center; white-space: nowrap; overflow: hidden;
}
.transfer-compose-card .synth-actions { width: 100%; margin: 2px 0 4px; }
.transfer-compose-card .synth-actions #trans-go {
  grid-column: 2;
  min-width: 160px;
  padding: 12px 30px;
  border: 1px solid #78bcea;
  border-radius: 10px;
  color: #f4fbff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 6px;
  text-indent: 6px;
  background: linear-gradient(180deg, #438bc1, #205b8b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 20px rgba(53,147,216,.34), 0 5px 12px rgba(0,0,0,.38);
}
.transfer-compose-card .synth-actions #trans-go:disabled { opacity: .42; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.transfer-compose-card .synth-actions #trans-clear {
  grid-column: 3;
  justify-self: start;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #596a7b;
  background: #222d38;
  color: #aebdca;
}
/* 閻熶礁鎳庨ˇ顒佹姜椤掑倐鈺呭矗閸忓懏娅犻悗鐟拌嫰閸欏繘鎮¤婵″崬顕ｉ崫鍕嚙濡炪倗鏁稿▓鎴烆殽閵婏妇浠搁柨娑欒壘閸ㄥ孩銇勯崹顐ｈ拫 闁?289px 闁告帒妫濋妴澶婎浖閸☆厾绀勫ù婊嗘婢ф寧锛愰崟顕呮綌 / 闁煎啿鑻€垫鎲楅崨顓фУ闁挎稑鐭侀崕妤呭礌閸涢偊妫呭璺烘喘閸ｇ兘寮ㄦ穱鎵佸亾鐏炵晫鏁ㄧ€殿喖鎼€垫煡鎯冮崟顕呮濠㈣泛娲㈤埀顒€绋勭槐?
   闁?閻㈩垱鎮傞埞妤呮儍閸曗斁鍋撶仦鐐紦闁衡偓瑜版巻鍋撻悩鍨暠閻熶礁鎳庨ˇ顒勫Υ瀹ュ懎闅橀柨娑樿嫰閺勫倻鈧數顭堥顔筋瀲閹邦剙绻侀柛鏍ㄧ墵閵嗗鎯冮崟鈹惧亾鐏炶偐鈹掗柟褰掓敱鐢綊鎳￠幇鈹惧亾瀹ュ啠鍋撻崒姘€诲銈呯仛椤㈠顨囧Ο鍝勵唺闁搞儱鎼悾楣冩晬鐏炶壈鈷堝☉鎿冧簻閸ㄥ孩銇勯崹顐ｉ檷闁搞儳鍋涢崹蹇涘籍閺堢數鐟撻梻鍫涘灮濞?
   闁哄牜浜濋弫濂告焻閻樻彃鐏欓悶娑栧妺缁楀瀵煎顒€袟闁挎稑鑻畷閬嶆偋閸ャ劉鍋撴繝姘卞蒋濞寸姴绉靛Σ?620px闁?*/
.transfer-side-card #side-trans-to { max-height: 218px; }   /* 濞戞挸楠稿閬嶅礌閺嶎厹鈧?.enh-gem-recommend 闁告艾鐭傞悵?*/

.affix-badges {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.affix-badge {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e5edf4;
  border-radius: 50%;
  color: #f3f7fa;
  background: radial-gradient(circle at 35% 30%, #344553, #111820 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px rgba(220,235,245,.18);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}
.affix-badge.best {
  border-color: #ff4c57;
  color: #ff8c92;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 7px rgba(255,65,76,.48);
}
.affix-badge.good {
  border-color: #e2ae3f;
  color: #f3cb64;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 7px rgba(226,174,63,.42);
}

@media (max-width: 680px) {
  #modal-power .panel { overflow-y: auto; }
  .synth-hd-layout { grid-template-columns: 1fr; min-height: 0; }
  .synth-inherit-card { min-height: 620px; }
  .synth-actions { grid-template-columns: 1fr; }
  .synth-actions #synth-go,
  .synth-actions #synth-clear { grid-column: 1; justify-self: center; }
  .gem-compose-card .synth-actions #merge-go,
  .gem-compose-card .synth-actions #merge-clear { grid-column: 1; justify-self: center; }
  .enh-compose-card .synth-actions #enh-go,
  .enh-compose-card .synth-actions #enh-clear { grid-column: 1; justify-self: center; }
}

/* ===== 閻熶礁鎳庨ˇ顒勫箖椤掍浇鐧侀悹鍥烽檮閸?===== */
#equip-tooltip {
  position: fixed;
  z-index: 140;
  width: 310px;
  min-height: 190px;
  display: none;
  padding: 13px 14px 15px;
  overflow: hidden;
  pointer-events: none;
  color: #e8edf2;
  border: 1px solid #778797;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(84,110,132,.12), transparent 36%),
    linear-gradient(180deg, rgba(8,13,20,.97), rgba(4,8,13,.985));
  box-shadow: inset 0 0 24px rgba(22,54,78,.2), inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.72);
  font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
  text-align: left;
}
#equip-tooltip.show { display: block; }
#equip-tooltip.gem-tip {
  width: 238px;
  min-height: 0;
  padding-bottom: 13px;
}
#equip-tooltip::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(119,151,177,.18);
  border-radius: 4px;
  pointer-events: none;
}
.equip-tip-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  max-width: 248px;
  margin-bottom: 7px;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 0 9px currentColor, 0 2px 3px #000;
}
.equip-tip-name { overflow: hidden; text-overflow: ellipsis; }
.equip-tip-dot { color: #8fa1b1; }
.equip-tip-tier { flex: 0 0 auto; }
.equip-tip-mod { flex: 0 0 auto; }
.equip-tip-icon {
  position: absolute;
  z-index: 1;
  top: 44px;
  right: 14px;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #8293a5;
  border-radius: 6px;
  background: linear-gradient(145deg, #202a35, #0c1118);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 10px rgba(92,159,209,.2);
}
.equip-tip-icon .it b,
.equip-tip-icon .tier { display: none; }
.equip-tip-icon .it i,
.equip-tip-icon .it.wicon i { width: 48px; height: 48px; }
.gem-tip-head {
  max-width: none;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}
.gem-tip-body { position: relative; min-height: 58px; padding-top: 17px; }
.gem-tip .equip-tip-icon { top: 0; right: 0; }
.gem-tip .equip-tip-kind { color: #f0f3f5; }
.equip-tip-potential {
  position: relative;
  z-index: 1;
  margin-bottom: 9px;
  padding-right: 70px;
  color: #47e46b;
  font-size: 15px;
}
.equip-tip-potential b { font-weight: 700; }
.equip-tip-kind,
.equip-tip-base {
  position: relative;
  z-index: 1;
  min-height: 23px;
  padding-right: 70px;
  color: #f0f3f5;
  font-size: 14px;
}
.equip-tip-sep {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: 10px 0 8px;
  background: linear-gradient(90deg, #40576a, rgba(64,87,106,.15));
}
.equip-tip-section {
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
  color: #d8b753;
  font-size: 13px;
  font-weight: 700;
}
.equip-tip-affix {
  position: relative;
  z-index: 1;
  min-height: 24px;
  color: #36bdf2;
  font-size: 14px;
  line-height: 1.6;
  text-shadow: 0 0 7px rgba(44,177,230,.18);
}
.equip-tip-affix-arrow,
.equip-tip-affix-base {
  color: #47e46b;
  text-shadow: 0 0 7px rgba(71,228,107,.22);
}
.equip-tip-activation-title { color: #e6c63f; }
.equip-tip-activation {
  position: relative;
  z-index: 1;
  min-height: 23px;
  font-size: 14px;
  line-height: 1.55;
}
.equip-tip-activation span { display: inline-block; min-width: 42px; }
.equip-tip-activation.active { color: #42d9f5; text-shadow: 0 0 7px rgba(66,217,245,.25); }
.equip-tip-activation.locked { color: #69737d; }
.equip-tip-empty {
  position: relative;
  z-index: 1;
  color: #71808e;
  font-size: 13px;
}

/* 闁告艾鐗婇崹姘扁偓鐟版湰閸ㄦ岸宕ユ惔锝嗙暠閻熶礁鎳庨ˇ顒傛嫚閿旇棄鍓板☉鎾冲閸嬫挸霉椤旇棄绲圭紒鈧潪鎵闁归晲绀侀幃鎾寸▔閳ь剚绌遍埄鍐х礀闁哄秶鍘х槐?*/
.synth-compose-card #synth-result {
  width: calc(100% - 28px);
  height: 146px;
  margin: 10px auto 0;
  padding: 10px 14px;
  text-align: center;
}
.synth-compose-card #synth-result:not(.hide) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.synth-result-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.synth-result-icon {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}
.synth-result-icon .it,
.synth-result-icon .it i { width: 82px !important; height: 82px !important; }
.synth-result-icon .it i { border-radius: 8px !important; }
.synth-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 0 8px currentColor;
}



/* ===== 闁告瑦锚瀹歌京鍖栭懡銈囧煚 UI 缂佸鍟块悾楣冨礌?+ 闁告绮晶搴ㄧ嵁閸愭彃顕ч柨娑樼墕閹绱掗鐐茶闁轰礁鐡ㄩ宀勫箲閵忥絽浜為柨?===== */
/* 婵犲﹥鑹炬慨鈺呭级閳╁啰啸濠㈣泛褰夌粭澶嬫媴瀹ュ泦鈺呮晬濮橆剦娼楃紓浣哥墔缁绘岸鎮惧▎鎰硦闁告柣鍔嶅顖炲础閻樿京绉?*/
.scroll { overflow-y: auto; scrollbar-gutter: stable; }
.side, .col-preview { position: relative; }
.sys-layout, .enh-layout { min-width: 0; }

/* 闁告艾鐗婇崹姘跺闯閵娿儺妯嗘俊妤€妫寸槐浼村礃閸涱厼姣?*/
.grid16 {
  border: 1px solid #3c5470;
  border-radius: 12px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(10,16,24,.72), rgba(6,10,16,.55));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05);
}

/* 闁告艾鐗婇崹姘跺冀閻撳海鎽嶉柨娑欐皑閻濇稒鎷?*/
.sys-cell {
  border-radius: 8px;
  background: linear-gradient(180deg, #25323f, #17222c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 4px rgba(0,0,0,.4);
}
.sys-cell.has { border-color: #6b8fae; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 8px rgba(90,150,210,.35); }

/* 閻熶礁鎳庨ˇ顒勫触閸喎鐏囬柨娑欑煯鐎靛矂寮?+ 闁哄鍔栭弸鈥澄?*/
#synth-stage {
  text-align: center; padding: 12px 10px;
  border: 1px solid #3c5470; border-radius: 12px;
  background: linear-gradient(180deg, rgba(10,16,24,.6), rgba(6,10,16,.5));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
}
.main-cell, .main-slot .main-cell {
  border: 1px solid #4a6a8c;
  background: linear-gradient(180deg, #2c3c4e, #16202b);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.45);
}
.main-cell.has { border-color: #7ba7cc; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 10px rgba(90,150,210,.4), 0 2px 6px rgba(0,0,0,.45); }
.main-cell.is-result { box-shadow: 0 0 16px rgba(150,220,255,.75), inset 0 1px 0 rgba(255,255,255,.2); }
.sub-cell {
  border: 1px solid #4a6a8c;
  background: linear-gradient(180deg, #2c3c4e, #16202b);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.4);
}
.sub-cell.has { border-color: #6b8fae; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 8px rgba(90,150,210,.3); }

/* 濞撴皜鍕焿闁哄绱曞ú浼存晬濮橆厼袦闁告娲ゅ畷閬嶆偋?*/
.side-item {
  border: 1px solid #4a6282;
  background: linear-gradient(180deg, #243140, #17222c);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.4);
}
.side-item:hover { background: linear-gradient(180deg, #2c3c4e, #1a2632); }
.side-row {
  border: 1px solid #3c526b;
  background: linear-gradient(180deg, #243140, #17222c);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.35);
}
.side-row button { background: linear-gradient(180deg,#31425a,#1d2a39); border-color: #5b7290; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.4); }
.side-row button:hover { filter: brightness(1.12); }
.side-row.is-new { border-color: #c9a44a; background: linear-gradient(180deg,#3a3a22,#26241a); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 10px rgba(210,170,70,.35); }

/* 闁圭顦甸幐鎶芥晬濮樿京褰屽ù锝嗘尭瑜版煡骞愭径濠傜 */
.actions button, .bank-row button {
  padding: 8px 14px; border-radius: 9px;
  border: 1px solid #5b7290;
  background: linear-gradient(180deg, #31425a, #1d2a39);
  color: #d6e4f2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 5px rgba(0,0,0,.45);
}
.actions button:hover, .bank-row button:hover { filter: brightness(1.1); }
.actions button:active, .bank-row button:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.go, .actions button.go, .bank-row button.go {
  background: linear-gradient(180deg, #3f86d6, #27609b);
  border-color: #7db4e8; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(40,110,190,.55);
}
.go:disabled, .actions button.go:disabled, .bank-row button.go:disabled {
  opacity: .45; cursor: not-allowed; filter: saturate(.4); box-shadow: none;
}
#synth-bank.go:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.4); }

/* 闁告艾鐗婇崹姘辩磼閹惧浜柛妤嬬磿婢ф牠鏁嶅璺烘櫔闁烩晩鍠栭惇铏▔?*/
#synth-result.result {
  margin: 10px auto 0; max-width: 460px; text-align: center;
  border: 1px solid #5a7aa0; border-radius: 12px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(24,40,60,.95), rgba(12,22,34,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 3px 8px rgba(0,0,0,.5);
}
#synth-result.result b { font-size: 16px; }
#synth-result.result .gs { color: #ffd76a; font-size: 13px; margin-left: 6px; }
#synth-result.result .rd { margin-top: 8px; color: #cfe3f5; line-height: 1.8; font-size: 13px; }
#synth-result.result .rr { color: #ffd76a; font-size: 12px; margin-bottom: 4px; }

/* 闁煎浜滄慨鈺呭触閸喎鐏囩€殿喒鍋撻柛?*/
.auto-row { align-items: center; }
.switch {
  padding: 5px 14px; border-radius: 8px; border: 1px solid #5b7290;
  background: linear-gradient(180deg, #31425a, #1d2a39); color: #aebfd1; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 5px rgba(0,0,0,.4);
}
.switch.off { opacity: .72; }
.switch.on {
  background: linear-gradient(180deg, #3fd07a, #1f9a4d); border-color: #79e6a1; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 10px rgba(60,200,110,.5);
}
.switch:hover { filter: brightness(1.1); }

/* 鐎殿喖鎼€垫煡宕犻悮瀵哥獥闁瑰瓨鍔曟慨娑㈡偝閸ヮ剛褰ù?*/
.rate { text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.enh-main .grid16 { max-width: 240px; margin: 0 auto; }
#enh-item-slot .main-cell { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 10px rgba(90,150,210,.35), 0 2px 6px rgba(0,0,0,.45); }

/* ===== 闁哄牜鍓濋悿?UI 閻犲鍟弳?===== */

/* 闁煎啿鑻€垫﹢寮介懖鈺佲挅闁告繀绀佸ù姗€寮介崶褝缍栨繝濞惧墲閻楀摜鈧稒鍔х槐娆愮▔鎼淬垻鍩夊ù锝呯Ф閻℃垶寰勮缁?*/
.bag-right .bag-cell { display: flex; align-items: center; justify-content: center; }
.bag-right .bag-cell .it { width: 100%; height: 100%; }
.bag-right .bag-cell .it i { width: 100% !important; height: 100% !important; border-radius: 6px; }
.bag-right .bag-cell .it.wicon i,
.bag-right .bag-cell .it.eicon i { border-radius: 5px; border-width: 2px; }
.bag-right .bag-cell .it.gicon i { border: none; box-shadow: none; border-radius: 6px; }

/* 濞存粏娅ｆ晶鎸庯紣閸曨噮娼旈悷浣告噹椤︻剟寮借箛鎾寸闁哄秴娲ら敐鐐差煥闄囬ˉ濠冨緞閸ャ劎鍩?*/
.equip-cell { display: flex; align-items: center; justify-content: center; }
.eqcol .equip-cell .equip-item,
.eqcol .equip-cell .equip-item .it { width: 100%; height: 100%; }
.eqcol .equip-cell .equip-item .it i { width: 100% !important; height: 100% !important; }
.eqcol .equip-cell .equip-item .it.wicon i,
.eqcol .equip-cell .equip-item .it.eicon i { border-radius: 5px; border-width: 2px; }
.eqcol .equip-cell .equip-item .it.gicon i { border: none; box-shadow: none; }

/* 鐎殿喖鎼€靛弶銇勯崗鍛婄溄闁绘せ鏅涢惃顒傛啑閸涱収妲甸柡宥呯箰濞存﹢寮介崶锔剧槏濠靛鍋呭?*/
.char-box .mini-slot .sys-item,
.char-box .mini-slot .sys-item .it { width: 100%; height: 100%; }
.char-box .mini-slot .sys-item .it i { width: 100% !important; height: 100% !important; }

/* 閻熶礁鎳庨ˇ顒勬焾閵娿倗绉撮柣顏嗗枎閻ゅ嫰宕堕悙顒傚灱闁挎稑鐗婄换渚€鎳濋幓鎺戝耿闂傚牜婢佺槐婵嬪传娴ｈ棄绐涢柛鏃傚Ь缁旂喎顩奸崱顓犵 */
.it.eicon i {
  width: 26px; height: 26px;
  background: var(--ei) center / cover no-repeat;
  border: 2px solid var(--c);
  border-radius: 4px;
  box-shadow: 0 0 6px var(--c);
}
.equip-tip-icon .it.eicon i { width: 48px; height: 48px; }

/* 濞存粏娅ｆ晶鎸庯紣閸曨噮娼旈柡宥呯箣缂嶅懘宕橀崨顒傜闁归晲绀佸ù姗€寮介崶銊фХ濞撴艾顑戠槐婵堚偓鐟版湰閺嗭綁鏌呴崒鐐插赋婵繐绲鹃弻鐔汇亹?*/
.eqcol .it.wicon i,
.eqcol .it.eicon i { background-size: contain; background-repeat: no-repeat; }


/* ===== 强化光效挡位：图标边框PNG序列帧（10帧横向精灵图 lv1~lv8.png） =====
   挡位规则（见 ui.js chip()）：每2个强化等级共用一档 ——
   +2/+3→lv1 淡绿细光框、+4/+5→lv2 淡蓝细光框、+6/+7→lv3 绿电火花、+8/+9→lv4 蓝电火花、
   +10/+11→lv5 紫电火花、+12/+13→lv6 金电火花、+14/+15→lv7 橙电火花、+16及以上→lv8 红电火花
   透明度/辉光/播放速度逐级增强，体现强化一点点变强 */
.it.enh-icon i {
  position: relative; isolation: isolate;
  --enh-b: 1px;                    /* 图标自带1px描边，外框同步外扩贴合 */
  --enh-w: 143%;                   /* 序列帧画布宽 = 图标 × 143%（画布内孔洞约70%，恰好包住图标边缘） */
}
.it.enh-icon.wicon i,
.it.enh-icon.eicon i { --enh-b: 2px; }
.it.enh-icon i::after {
  content: ''; position: absolute;
  left: calc((100% - var(--enh-w)) / 2 - var(--enh-b));
  top: calc((100% - var(--enh-w)) / 2 - var(--enh-b));
  width: calc(var(--enh-w) + 2 * var(--enh-b));
  height: calc(var(--enh-w) + 2 * var(--enh-b));
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 1000% 100%;     /* 10 帧横向精灵图 */
  opacity: var(--enh-alpha);
  filter: drop-shadow(0 0 var(--enh-glow-blur) var(--enh-glow));
  animation: enh-icon-flow var(--enh-speed) steps(10) infinite;
}
/* lv1 (+2/+3) 淡绿细光框：最弱，微光流动 */
.it.enh-icon-lv1 i::after {
  background-image: url('assets/effects/enh-border/lv1.png');
  --enh-alpha: .70; --enh-glow: #3fe06a; --enh-glow-blur: 2px; --enh-speed: 2s;
}
.it.enh-icon-lv1 i { box-shadow: 0 0 6px var(--c), 0 0 4px rgba(63,224,106,.30); }
/* lv2 (+4/+5) 淡蓝细光框 */
.it.enh-icon-lv2 i::after {
  background-image: url('assets/effects/enh-border/lv2.png');
  --enh-alpha: .78; --enh-glow: #38c8ff; --enh-glow-blur: 2.5px; --enh-speed: 1.8s;
}
.it.enh-icon-lv2 i { box-shadow: 0 0 6px var(--c), 0 0 6px rgba(56,200,255,.38); }
/* lv3 (+6/+7) 绿色电火花 */
.it.enh-icon-lv3 i::after {
  background-image: url('assets/effects/enh-border/lv3.png');
  --enh-alpha: .85; --enh-glow: #52ff3a; --enh-glow-blur: 3px; --enh-speed: 1.6s;
}
.it.enh-icon-lv3 i { box-shadow: 0 0 6px var(--c), 0 0 8px rgba(82,255,58,.45); }
/* lv4 (+8/+9) 蓝色电火花 */
.it.enh-icon-lv4 i::after {
  background-image: url('assets/effects/enh-border/lv4.png');
  --enh-alpha: .90; --enh-glow: #2e9bff; --enh-glow-blur: 3.5px; --enh-speed: 1.5s;
}
.it.enh-icon-lv4 i { box-shadow: 0 0 6px var(--c), 0 0 10px rgba(46,155,255,.55); }
/* lv5 (+10/+11) 紫色电火花 */
.it.enh-icon-lv5 i::after {
  background-image: url('assets/effects/enh-border/lv5.png');
  --enh-alpha: .94; --enh-glow: #c74dff; --enh-glow-blur: 4px; --enh-speed: 1.4s;
}
.it.enh-icon-lv5 i { box-shadow: 0 0 6px var(--c), 0 0 12px rgba(199,77,255,.60); }
/* lv6 (+12/+13) 金色电火花 */
.it.enh-icon-lv6 i::after {
  background-image: url('assets/effects/enh-border/lv6.png');
  --enh-alpha: 1; --enh-glow: #ffd24a; --enh-glow-blur: 4.5px; --enh-speed: 1.3s;
}
.it.enh-icon-lv6 i { box-shadow: 0 0 6px var(--c), 0 0 14px rgba(255,210,74,.65); }
/* lv7 (+14/+15) 橙色电火花 */
.it.enh-icon-lv7 i::after {
  background-image: url('assets/effects/enh-border/lv7.png');
  --enh-alpha: 1; --enh-glow: #ff9a2a; --enh-glow-blur: 5px; --enh-speed: 1.15s;
}
.it.enh-icon-lv7 i { box-shadow: 0 0 6px var(--c), 0 0 16px rgba(255,154,42,.70); }
/* lv8 (+16及以上) 红色电火花：当前最高档 */
.it.enh-icon-lv8 i::after {
  background-image: url('assets/effects/enh-border/lv8.png');
  --enh-alpha: 1; --enh-glow: #ff4a3a; --enh-glow-blur: 6px; --enh-speed: 1s;
}
.it.enh-icon-lv8 i { box-shadow: 0 0 6px var(--c), 0 0 18px rgba(255,74,58,.75), 0 0 6px rgba(255,200,180,.5); }
/* 1000% 宽度配合 steps(10)：每步位移 11.1111%，10 步恰好走完 10 帧 */
@keyframes enh-icon-flow { from { background-position-x: 0%; } to { background-position-x: 111.1111%; } }
@media (prefers-reduced-motion: reduce) {
  .it.enh-icon i::after { animation: none; }
}

/* ===== 婵炴挸鎲￠崹娆愬緞瑜嶅鐑橈純閺嶎厹鈧?===== */
body.home-open { overflow: hidden; }
body.home-open #game { visibility: hidden; }
/* 濡絾鐗犻妴澶嬬┍濠靛牊娈岄柕鍡楀濮瑰鎮?闁煎啿鑻€?闁告瑦锚瀹搁亶濡村鍕憦濞戞搩浜滈崣鍡涘矗閿濆繒绀勫☉鎾崇Т閸╂盯骞€椤忓啰鐦嶉柤瀹犳閹酣骞嬮幇鍓佺闁挎稑鏈崹顒勫棘濡や焦鍩?HUD 濞寸姴绉堕崝褔鎸婅箛姘闯闁?*/
body.home-open #player-hud,
body.home-open #yidu-timer,
body.home-open #idle-hud,
body.home-open #skill-bar { visibility: hidden; }
body.home-open #ui { z-index: 210; }   /* 闂傚牄鍨哄妯兼啺娴ｇ儤纾伴柛锔哄姂椤╃粯銇勯悽闀愮磿缂傚啠鏅欑粻锝嗙▔?*/
/* 闁搞儳鍋涢悡鍕矗椤忓嫭韬弶鈺傜☉閸欏棝鎮抽埡鍌溿€婇柛姘閸ゎ參鎮崇敮顔剧濡絾鐗犻妴澶嬬▔瀹ュ棙鈻旂紒鈧?*/
body:not(.in-battle) #btn-home { display: none; }

#game-home {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; overflow: auto;
  padding: clamp(24px, 5vw, 64px);
  padding-bottom: 104px;   /* 缂備焦鐟ョ花鎶芥焾閵娧勭暠濞戞挸顦柌婊堝礂閵夈儱缍撻柟绋款樀閹告娊鎮惧▎搴ｇТ缂?*/
  background:
    radial-gradient(circle at 50% 38%, rgba(35,105,146,.22), transparent 34%),
    linear-gradient(180deg, rgba(5,11,18,.74), rgba(4,8,13,.96)),
    url('assets/map/ground.webp') center / cover no-repeat;
  color: #edf8ff;
  transition: opacity .32s ease, transform .32s ease;
}
#game-home.leaving { opacity: 0; transform: scale(1.025); pointer-events: none; }
.home-shell { width: min(940px, 100%); }
.home-title { margin-bottom: clamp(24px, 4vw, 42px); text-align: center; }
.home-kicker {
  display: block; margin-bottom: 5px;
  color: #82cbed; font-size: 14px; letter-spacing: .38em;
}
.home-title h1 {
  margin: 0; color: #fff; font-size: clamp(52px, 9vw, 92px); line-height: 1;
  letter-spacing: .16em; text-indent: .16em;
  text-shadow: 0 2px 0 #17394c, 0 0 28px rgba(79,190,239,.42);
}
.home-title p { margin: 12px 0 0; color: #91aabd; font-size: 16px; letter-spacing: .24em; text-indent: .24em; }
.home-title .home-notice {
  width: fit-content; margin: 16px auto 0; padding: 8px 14px;
  border: 1px solid rgba(103,190,230,.46); border-radius: 18px;
  background: rgba(10,31,45,.76); color: #bfeaff; font-size: 14px;
  letter-spacing: 0; text-indent: 0;
}
.mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mode-card {
  position: relative; min-width: 0; min-height: 310px; overflow: hidden;
  padding: 0; border: 1px solid rgba(123,163,190,.28); border-radius: 18px;
  background: linear-gradient(180deg, rgba(28,43,56,.94), rgba(10,17,25,.98));
  color: #d3e0e9; text-align: left; cursor: default;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.34);
}
.mode-card.available { cursor: pointer; border-color: rgba(83,191,239,.58); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mode-card.available:hover,
.mode-card.available:focus-visible {
  outline: none; transform: translateY(-5px); border-color: #79d8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 46px rgba(0,89,134,.4), 0 0 0 3px rgba(84,190,237,.14);
}
.mode-card:disabled { opacity: .68; }
.mode-art { display: block; width: 100%; height: 190px; border-bottom: 1px solid rgba(123,163,190,.16); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* 首页 4 张玩法插画（2026-09-21 重做）：统一 SVG、暗调 + 各玩法主色，玩游戏一眼就能懂 */
.art-yidu     { background-image: url('assets/modes/mode-yidu.svg'); }
.art-boss     { background-image: url('assets/modes/mode-boss.svg'); }
.art-treasure { background-image: url('assets/modes/mode-treasure.svg'); }
.art-idle     { background-image: url('assets/modes/mode-idle.svg'); }
.mode-copy { display: block; padding: 15px 16px 12px; }
.mode-copy strong { display: block; color: #f4fbff; font-size: 21px; line-height: 1.25; }
.mode-copy small { display: block; margin-top: 4px; color: #8298aa; font-size: 14px; }
.mode-enter,
.mode-lock {
  display: block; margin: 0 16px 16px; padding-top: 11px;
  border-top: 1px solid rgba(123,163,190,.14); font-size: 14px;
}
.mode-enter { color: #72d4ff; }
.mode-lock { color: #788995; }

/* ===== 登录页（2026-09-22 接入账号：进游戏先登录）===== */
body.auth-open { overflow: hidden; }
body.auth-open #game { visibility: hidden; }
body.auth-open #ui { z-index: 210; }
body.auth-open #hud { display: none; }
body.auth-open #player-hud,
body.auth-open #yidu-timer,
body.auth-open #idle-hud,
body.auth-open #skill-bar { visibility: hidden; }
body.auth-open #char-select,
body.auth-open #game-home { display: none; }
body:not(.auth-open) #auth-gate { display: none; }
#auth-gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; overflow: auto;
  padding: clamp(20px, 4vw, 46px) clamp(20px, 5vw, 64px);
  background:
    radial-gradient(circle at 50% 30%, rgba(35,105,146,.22), transparent 34%),
    linear-gradient(180deg, rgba(5,11,18,.74), rgba(4,8,13,.96)),
    url('assets/map/ground.webp') center / cover no-repeat;
  color: #edf8ff;
}
.auth-shell { width: min(430px, 100%); }
#auth-gate .home-title { margin-bottom: clamp(20px, 3.4vw, 32px); }
#auth-gate .home-title h1 { font-size: clamp(40px, 7vw, 62px); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-label { color: #91aabd; font-size: 13px; letter-spacing: .18em; }
.auth-field input {
  padding: 13px 15px; border-radius: 11px; outline: none;
  border: 1px solid rgba(123,163,190,.42); background: rgba(8,16,24,.86);
  color: #eaf6ff; font-size: 16px; letter-spacing: .04em;
}
.auth-field input::placeholder { color: #5f7486; letter-spacing: 0; }
.auth-field input:focus { border-color: #79d8ff; box-shadow: 0 0 0 3px rgba(84,190,237,.14); }
.auth-submit {
  margin-top: 6px; padding: 15px 18px; border-radius: 12px; cursor: pointer;
  border: 1px solid #7db4e8; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .2em;
  background: linear-gradient(180deg, #3f86d6, #27609b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(40,110,190,.55);
}
.auth-submit:hover:not(:disabled) { filter: brightness(1.12); }
.auth-submit:disabled { opacity: .48; cursor: not-allowed; filter: none; }
.auth-switch {
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid #55667a; background: #2a3744; color: #dfe9f3;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
}
.auth-switch:hover:not(:disabled) { filter: brightness(1.12); }
.auth-switch:disabled { opacity: .5; cursor: not-allowed; }

/* ===== 閻熸瑦甯熸竟濠囨焻婢跺顏ュ?===== */
body.char-open #game-home { display: none; }
body.char-open #hud { display: none; }
body:not(.char-open) #char-select { display: none; }
body:not(.home-open) #btn-switch { display: none; }   /* 闁告帒娲﹀畷鑼喆閹烘洖顥忛柛娆樹簻濠€顏咃純閺嶎厹鈧宕欓搹鐟扮疀闁挎稑鏈崹顒勫棘濡ゅ懎娅℃繛灞稿墲濠€?*/
/* 选角页：标题上移 + 中间竖向角色列表 + 底部统一操作栏 */
#char-select {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center;
  overflow: auto;
  padding: clamp(20px, 4vw, 46px) clamp(20px, 5vw, 64px);
  background:
    radial-gradient(circle at 50% 30%, rgba(35,105,146,.22), transparent 34%),
    linear-gradient(180deg, rgba(5,11,18,.74), rgba(4,8,13,.96)),
    url('assets/map/ground.webp') center / cover no-repeat;
  color: #edf8ff;
}
/* 整屏纵向三栏：标题（不缩）→ 角色列表（可滚动）→ 底部操作栏（不缩） */
#char-select .home-shell {
  width: min(680px, 100%);
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
#char-select .home-title { margin-bottom: clamp(14px, 2.4vw, 22px); flex: 0 0 auto; }

.char-list {
  flex: 1 1 auto; min-height: 72px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 3px 4px 3px 3px;      /* 给选中态的光晕留出空间 */
}
/* 角色少时整组垂直居中；角色多到溢出时 auto 外边距归零，不会裁掉顶部 */
.char-list::before,
.char-list::after { content: ''; flex: 0 0 auto; }
.char-list::before { margin-top: auto; }
.char-list::after { margin-bottom: auto; }
.char-empty {
  margin: 0; padding: 30px 0; text-align: center;
  color: #8298aa; font-size: 15px; letter-spacing: .12em;
}
.char-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(123,163,190,.26); border-radius: 14px;
  background: linear-gradient(180deg, rgba(24,38,50,.92), rgba(9,16,24,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.28);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
/* 左侧选中指示条 */
.char-card::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 4px; height: 62%; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #8fe0ff, #2f7fc4);
  opacity: 0; transform: translateY(-50%) scaleY(.35);
  transition: opacity .16s, transform .16s;
}
.char-card:hover {
  border-color: rgba(123,183,224,.5);
  background: linear-gradient(180deg, rgba(32,50,66,.94), rgba(11,20,30,.97));
}
.char-card.selected {
  border-color: rgba(96,203,255,.85);
  background: linear-gradient(180deg, rgba(34,74,104,.94), rgba(12,26,40,.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 2px rgba(88,196,246,.22),
    0 0 24px rgba(56,150,220,.32), 0 12px 28px rgba(0,0,0,.34);
}
.char-card.selected::before { opacity: 1; transform: translateY(-50%) scaleY(1); }
.char-card:focus-visible { outline: 2px solid rgba(121,216,255,.85); outline-offset: 2px; }
.char-card-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.char-card-name {
  display: flex; align-items: center; gap: 8px;
  color: #f4fbff; font-size: 19px; font-weight: 700; line-height: 1.3; word-break: break-all;
}
.char-card.selected .char-card-name { color: #fff; }
.char-card-tag {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; font-style: normal;
  border: 1px solid rgba(255,203,94,.48); background: rgba(120,86,20,.42);
  color: #ffd98a; font-size: 11px; font-weight: 600; letter-spacing: .06em;
}
.char-card-meta { color: #8298aa; font-size: 13px; line-height: 1.5; }
.char-card.selected .char-card-meta { color: #a8c6dc; }
.char-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.char-btns button, .char-new button, .char-actions button {
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid #55667a; background: #2a3744; color: #dfe9f3;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
}
.char-btns button:hover, .char-new button:hover, .char-actions button:hover { filter: brightness(1.12); }
.char-btns .char-mini { padding: 8px 13px; font-size: 13px; }
.char-actions .primary, .char-new .primary {
  border-color: #7db4e8; color: #fff;
  background: linear-gradient(180deg, #3f86d6, #27609b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(40,110,190,.55);
}
.char-mini.danger { border-color: #7d4046; background: #3a2a2c; color: #ffb3ae; }
.char-new { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; flex: 0 0 auto; }
.char-new[hidden] { display: none; }
.char-new input {
  width: min(320px, 62vw); padding: 11px 14px; border-radius: 10px; outline: none;
  border: 1px solid rgba(123,163,190,.42); background: rgba(8,16,24,.86);
  color: #eaf6ff; font-size: 15px; letter-spacing: .06em;
}
.char-new input:focus { border-color: #79d8ff; }

/* 底部统一操作栏：进入游戏独占一行（大触控区），新建/导入并排 */
.char-bottom { flex: 0 0 auto; margin-top: clamp(14px, 2.4vw, 22px); }
.char-picked {
  min-height: 18px; margin: 0 0 10px; text-align: center;
  color: #91aabd; font-size: 13px; letter-spacing: .08em;
}
.char-picked b { color: #cdeaff; font-weight: 700; }
.char-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.char-actions button { padding: 13px 18px; font-size: 15px; border-radius: 12px; }
.char-enter { grid-column: 1 / -1; padding: 15px 18px !important; font-size: 18px !important; letter-spacing: .2em; }
.char-enter:disabled { opacity: .42; cursor: not-allowed; filter: none; }
.char-logout { grid-column: 1 / -1; color: #9fb3c4 !important; font-size: 13px !important; padding: 10px 14px !important; }
.char-logout[hidden] { display: none; }
.char-account { color: #72d4ff !important; font-size: 14px !important; letter-spacing: .12em !important; }
.char-account[hidden] { display: none; }

@media (max-width: 760px) {
  .yidu-timer { top: max(70px, calc(50vh - min(66.666vw, 50vh) + 70px)); }
  #hud { width: calc(100vw - 20px); justify-content: center; gap: 6px; }
  #hud button { padding: 9px clamp(10px, 3vw, 18px); font-size: 14px; }
  #skill-bar { bottom: 74px; gap: 9px; }
  .skill-slot { width: 48px; height: 48px; }
  .skill-cd-text { font-size: 16px; }
  #game-home { align-items: start; padding: 28px 18px; }
  .home-title h1 { font-size: clamp(46px, 16vw, 72px); }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mode-card { min-height: 245px; }
  .mode-art { height: 132px; }
  #char-select { padding: 22px 16px; }
  .char-list { gap: 9px; }
  .char-card-name { font-size: 17px; }
}

/* 窄屏手机（≤430px，覆盖 360/375/390/414/430 这些主流宽度）：
   上面 760px 那条的 gap 6px + padding 11.7px 还是塞不下 5 个按钮，
   #hud 是 fixed + translateX(-50%) 居中的，内容超宽会**两头同时溢出**，
   表现为「商会」左边和「回城」右边各被切掉一截（390px 实测 401px 宽）。
   这里把内边距和字号线做成流式，跟着屏宽收，别写死。 */
@media (max-width: 430px) {
  #hud { width: calc(100vw - 12px); gap: clamp(3px, 1.2vw, 6px); }
  #hud button { padding: 9px clamp(5px, 2vw, 12px); font-size: 13px; }
}

@media (max-width: 520px) {
  .character-body .character-figure { height: 340px; min-height: 340px; flex-basis: 340px; }
  .character-stats { grid-template-columns: 1fr; }
}

/* 閻忕偛绻愮粻閿嬵殗濡搫顔婂☉鎾崇Х閸愬寮幆鎵濞戞挴鍋撴慨婵勫劚鐢洨绱撻埞搴撳亾鐏炲吋鐪介柣妞绘杺閳ь剙绉瑰浼村级閸栵紕绐楅悷浣告噹椤︻剟寮介懖鈺冪礆閻忓繐绻堥埀顑跨閻﹢骞€瑜嶅畷閬嶅绩閸撲焦褰涢柨娑樼焸娴尖晠宕楀鍛瘔闁绘粓顣︾粭鍛村箯婢跺钂?*/
@media (max-height: 700px) {
  .character-body .character-figure { min-height: 216px; }
  .character-body .character-figure .eqcol .equip-cell { width: 34px; height: 32px; }
  .stat-row { padding: 1px 7px 2px; }
  .stat-row span { font-size: 13px; line-height: 1.25; }
  .stat-group h3 { font-size: 13px; padding-bottom: 3px; }
  .stat-group { gap: 3px; }
  .character-stats { padding: 5px 6px 2px; }
}

@media (max-width: 420px) {
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 220px; }
  .mode-art { height: 120px; }
  /* 窄屏：卡片改为纵向（名字在上、导出/删除靠右换行），底部按钮全部纵向堆叠 */
  .char-card { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 12px 14px 12px 17px; }
  .char-btns { justify-content: flex-end; }
  .char-actions { grid-template-columns: 1fr; }
  .char-enter { letter-spacing: .12em; }
}

/* 閻熶礁鎳庨ˇ顒勫触閸喎鐏囬柨娑欒壘閹酣骞嬮幇顏囩濞戞挾绮€垫粓鏌﹂鑺ユ澒濠㈠爢宥囩婵炴挸鎳愰埞鏍ㄧ▔閻戞﹩鍋ч悷鏇氱劍鐎垫粓鏌?*/
.actions.center { margin-top: 12px; }
.actions.center .go.big { font-size: 16px; padding: 13px 34px; border-radius: 10px; box-shadow: 0 0 12px rgba(60,140,220,.35); }
.actions.center .ghost { font-size: 13px; padding: 7px 16px; border-radius: 8px; background: #2a3744; border: 1px solid #55667a; color: #dfe9f3; }
.actions.center .ghost:hover { filter: brightness(1.08); }

/* 闁告瑦锚瀹搁亶鎮惧畝鍕〃闁挎稒鐭粭浣圭▔椤忓棗璐熸繛澶嬫礀閸炲鈧顫夊ú璺ㄦ瑜嶉崳楣冨Υ娴ｅ摜婀峰☉?*/
.sys-layout { justify-content: center; }
.enh-wrap { max-width: 680px; margin: 0 auto; }
.side { flex: 0 0 230px; }
/* 閻熶礁鎳庨ˇ顒勫触閸喎鐏?鐎殿喖鎼€垫煡鏁嶅顐㈢槣闁哄銇樼粭宀勫级閹邦厽鐏愭俊鑼舵濞存﹢寮介崶褝缍栨繝濞惧墲閻栴喗鎷呭蹇曠闁哄秴绻嬬紞鍛緞瑜嶉惃顒佺▔瀹ュ懏鍊卞ù婊愮畱閸樻牕顭ㄩ埥鍛 */
#synth-stage .main-cell.has,
#synth-stage .sub-cell.has,
#enh-item-slot .main-cell.has,
#trans-stage .main-cell.has { padding: 0; overflow: hidden; }
#synth-stage .main-cell.has .sys-item,
#synth-stage .main-cell.has .sys-item .it,
#synth-stage .sub-cell.has .sys-item,
#synth-stage .sub-cell.has .sys-item .it,
#enh-item-slot .main-cell.has .sys-item,
#enh-item-slot .main-cell.has .sys-item .it,
#trans-stage .main-cell.has .sys-item,
#trans-stage .main-cell.has .sys-item .it { width: 100%; height: 100%; }
#synth-stage .main-cell.has .sys-item .it i,
#synth-stage .sub-cell.has .sys-item .it i,
#enh-item-slot .main-cell.has .sys-item .it i,
#trans-stage .main-cell.has .sys-item .it i { width: 100% !important; height: 100% !important; border-radius: 6px; }
#synth-stage .main-cell.has .sys-item .it.wicon i,
#synth-stage .main-cell.has .sys-item .it.eicon i,
#synth-stage .sub-cell.has .sys-item .it.wicon i,
#synth-stage .sub-cell.has .sys-item .it.eicon i,
#enh-item-slot .main-cell.has .sys-item .it.wicon i,
#enh-item-slot .main-cell.has .sys-item .it.eicon i,
#trans-stage .main-cell.has .sys-item .it.wicon i,
#trans-stage .main-cell.has .sys-item .it.eicon i { border-radius: 5px; border-width: 2px; }
#synth-stage .main-cell.has .sys-item .it.gicon i,
#synth-stage .sub-cell.has .sys-item .it.gicon i,
#enh-item-slot .main-cell.has .sys-item .it.gicon i,
#trans-stage .main-cell.has .sys-item .it.gicon i { border: none; box-shadow: none; border-radius: 6px; }

/* ===== 闁煎啿鑻€垫﹢鎮惧畝鍕〃闂佹彃绉电敮鎾绘晬濮橆兛绱ｉ柛蹇涙敱濞?+ 闂侇偄顦懙鎴﹀箼瀹ュ嫮绋婇柡澶涚磿缁儤绋夐埀顒勫箣閹邦亞顏卞ù?===== */
.bag-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 10px; border-radius: 12px;
  border: 1px solid #3f5570;
  background: linear-gradient(180deg,#1f2b3a,#141d26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -12px 20px rgba(0,0,0,.36), 0 2px 9px rgba(0,0,0,.38);
}
.bag-toolbar .tg,
.bag-toolbar .auto-row {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 5px 9px; border-radius: 9px;
  border: 1px solid #33455a; background: rgba(7,12,18,.55);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
.bag-toolbar .tg { flex: 0 1 auto; }
.bag-toolbar .auto-row { margin: 0; flex: 1 1 100%; }   /* 闁煎浜滄慨鈺呭触閸喎鐏囬柣娆樺墮瀹曠増绋夐埀顒傛偘瀹€瀣闁告粌濂旂粭鍌涚▔閳ь剛鎮板畝鈧▓鎴﹀箼瀹ュ嫮绋婇柟绋款樀閹告娊宕犻崫鍕€荤€殿喒鍋?*/
.bag-toolbar .tg-label,
.bag-toolbar .auto-row > * { white-space: nowrap; }
.bag-toolbar .tg-label { color: #93a9bd; font-size: 13px; }
.bag-toolbar .tool { padding: 8px 16px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.bag-toolbar .silver {
  margin-left: auto; padding: 8px 12px; border-radius: 9px;
  border: 1px solid #33455a; background: rgba(7,12,18,.55);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  width: 130px; text-align: left;   /* 闁搞儱鎼悾鍓р偓纭呮鐎瑰啿顔忛敃鈧顔筋瀲閹板墎绐楅梺鎹愭硾缁斿灚鎷呭鍡樻闁告瑦锚椤﹀潡寮捄鐑樺€婚柛娆忓暱椤ゅ啴姊归崠锛勭鐎归潻绠掔粩鐔哥▔瀹ュ泦鈺呭礉?*/
}
/* 闂佹崘娉涚粩鐢稿箰婢跺绉撮柡浣规緲閸ㄥ酣鎳濈拠褏绐?0濞戞挸娲ｆ禍鎺撶▔鐎ｎ厽鎲?闁?10濞戞挸娲ㄧ挒?闁?100濞戞挸娲ㄦ导?闁?1000濞戞挸娲崳?闁?1濞存粌銇樻禍鎺撶▔婵犲嫬顒?*/
#bag-silver { font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
#bag-silver .sv-label { color: #fff; }
#bag-silver.t1 { color: #5cc4ff; border-color: #35566f; }
#bag-silver.t2 { color: #43d47f; border-color: #2f6a48; }
#bag-silver.t3 { color: #b98cff; border-color: #59407f; }
#bag-silver.t4 { color: #ffd76a; border-color: #7d6224; }
#bag-silver.t5 { color: #ff6b6b; border-color: #7f3636; text-shadow: 0 0 10px rgba(255,80,80,.55); }

.actbar {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid #3f5570;
  background: linear-gradient(180deg,#1f2b3a,#141d26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -12px 20px rgba(0,0,0,.36), 0 2px 9px rgba(0,0,0,.38);
}
.actbar.open { display: flex; align-items: center; gap: 10px; }
#act-item {
  padding: 5px 12px; border-radius: 9px; color: #eaf5ff; font-size: 14px; font-weight: 700;
  border: 1px solid #33455a; background: rgba(7,12,18,.55);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
#act-btns { gap: 8px; }
#act-btns button {
  padding: 8px 16px; border-radius: 9px; font-size: 13px;
  border: 1px solid #5b7290; color: #dbe9f6;
  background: linear-gradient(180deg,#31425a,#1d2a39);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.42);
}
#act-btns button:hover { filter: brightness(1.12); }
#act-btns button.go { border-color: #6aa8dd; background: linear-gradient(180deg,#3f83b7,#245d88); }

/* ===== 濞撴碍瀵у畵搴ㄥ箳閵娿劌绀冮柨娑欒壘閻ゅ倿鎯岄搹顐ｆ毉闁?2 闁告帗顨呭畷閬嶆偋閸ラ绀夊☉鎾崇Т閸熲偓闁哄嫷鍨粩鎾级閳╁啫顣抽柡?===== */
#side-gems, #side-gems2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; align-content: start;
}
.gem-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 9px; border-radius: 10px; overflow: hidden; text-align: center;
  border: 1px solid #4a6282;
  background: linear-gradient(180deg,#26323f,#151d26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 7px rgba(0,0,0,.44);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.gem-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(62% 48% at 50% 24%, var(--gc, #49c), transparent 74%);
  opacity: .32;
}
.gem-card:hover {
  transform: translateY(-2px); border-color: #8fc6ea;
  box-shadow: 0 7px 15px rgba(60,150,220,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.gem-card .gc-art { position: relative; display: flex; align-items: center; justify-content: center; }
.gem-card .gc-art .it i { width: 36px !important; height: 36px !important; }
.gem-card .gc-art .it.gicon i { border: none; box-shadow: none; border-radius: 6px; }
/* 1~2 缂佺嫏鍐澓闁活叀娅曢惀鍛村嫉婢跺﹤鏂ч柛銉︽嫕缁变即宕ョ仦鍓у闁活潿鍔岄崹蹇涙閵忕姷鏉洪柣顓熷▕閳ь剛濮撮悗鐑芥晬瀹€鍕級闁稿繐绉撮崵顓㈡偝閻楀牆顣虫鐐茬枃婢瑰﹪宕?*/
.gem-card .gc-art .it:not(.gicon):not(.wicon):not(.eicon) i {
  width: 38px !important; height: 38px !important; border: none; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.72), rgba(255,255,255,0) 40%),
    conic-gradient(from 200deg, rgba(255,255,255,.42), rgba(0,0,0,.44) 18%, rgba(255,255,255,.34) 38%,
      rgba(0,0,0,.42) 56%, rgba(255,255,255,.32) 76%, rgba(0,0,0,.38)),
    var(--gc);
  clip-path: polygon(50% 0%, 90% 25%, 100% 62%, 50% 100%, 0% 62%, 10% 25%);
  filter: drop-shadow(0 0 8px var(--gc)) saturate(1.4);
}
.gem-card .gc-name { position: relative; color: #dcecf8; font-size: 12px; line-height: 1.25; }

/* ===== 鐎殿喖鎼€靛弶銇勯悙鍏夊亾瀹€鍐ㄥ壒闁告牕鎳撻ˉ濠冨緞閸ャ儮鍋撳蹇曠獥闁告粌鐭侀崕妤呭礌閸涱厽鍊辨繛鍡欏亾閻楀摜鈧?===== */
.enh-bag-grid .cell { width: 100%; height: auto; aspect-ratio: 1 / 1; position: relative; }
.enh-bag-grid .cell .it { width: 100%; height: 100%; }
.enh-bag-grid .cell .it i { width: 100% !important; height: 100% !important; border-radius: 6px; }
.enh-bag-grid .cell .it.wicon i,
.enh-bag-grid .cell .it.eicon i { border-radius: 5px; border-width: 2px; }
.enh-bag-grid .cell .it.gicon i { border: none; box-shadow: none; border-radius: 6px; }
.enh-bag-grid .cell:hover { border-color: #79d8ff; box-shadow: 0 0 0 2px rgba(84,190,237,.2), inset 0 1px 0 rgba(255,255,255,.14); }
.enh-bag-grid .cell-lv {
  position: absolute; right: 1px; bottom: 1px; padding: 0 3px; border-radius: 5px;
  font-size: 9px; line-height: 13px; font-weight: 800; color: #fff8e6;
  background: linear-gradient(#cf8f2e,#8a5410); border: 1px solid rgba(255,225,170,.55);
  text-shadow: 0 1px 1px rgba(0,0,0,.6); box-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.sv-empty { width: 100%; display: flex; align-items: center; justify-content: center; color: #c99a6a; font-size: 13px; }
.sv-btn.go:disabled { opacity: .5; filter: grayscale(.55); cursor: not-allowed; }


/* ============================================================
   鍟嗕細绯荤粺锛圡arketUI锛?
   妗嗘灦鐓с€婅浜氫紶璇淬€嬬粡鍏稿晢浼氶椤碉細
     椤舵爮锛堝晢搴?/ 鍟嗕笟鎸囨暟 / 閾跺竵 / 鎴戠殑搴楅摵 / 鍏抽棴锛?
     + 椤电锛堟敹璐 鍏ㄩ儴鍟嗗簵 瑁呭搴?鏅朵綋搴?鑽搧搴?鏉傝揣搴?瀹跺叿搴?鍏虫敞锛?
     + 3 鍒?脳 4 琛屽晢閾哄崱鐗囷紙鎷涚墝 / 鍟嗗搧鍥炬爣 + 鐗╁搧绫诲瀷 / 钀ヤ笟路瑙勬ā / 搴椾富 / 寤哄簵鏃ユ湡 / 鏀惰棌路杩涘叆鍟嗗簵锛?
     + 搴曟爮锛堝垎绫?/ 浠锋牸鍖洪棿 / 鍏抽敭璇?/ 鎼滅储鐗╁搧 / 鎼滅储搴楅摵 / 涓婁竴椤?/ 椤电爜 / 涓嬩竴椤碉級
   鐐广€岃繘鍏ュ晢搴椼€嶆垨鐐瑰崱鐗?鈫?寮瑰嚭鍙嚜鐢辨嫋鍔ㄧ殑鐙珛鍟嗗搧椤点€?
   閰嶈壊娌跨敤鐜版湁钃濈伆搴?+ 閲戣壊寮鸿皟銆?
   ============================================================ */
.market-modal { z-index: 92; }
/* 商会主页面：设计尺寸 900x720，用 zoom 整体缩放（不用 transform: scale）。
   transform 只是视觉缩放，元素布局尺寸仍是 900x720，面板刚显示的那一帧浏览器会先按
   未缩放尺寸算一遍位置，第一帧就是错的（表现成「刚打开尺寸不对，动一下鼠标才变对」）。
   zoom 是真正的布局尺寸，宽高直接等于渲染尺寸，第一帧即最终尺寸。
   缩放比由 JS 按视口算（marketUI.fitPanel），渲染尺寸与「商铺详情页」相近。 */
.market-modal { --mkt-scale: 0.65; }
.panel.market-panel {
  width: 900px; height: 874px; flex: 0 0 auto;
  max-height: none;   /* 放开 .panel 的 94vh：设计稿高度才是准的，视口适配交给 fitPanel() 的 zoom */
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  position: absolute; left: 0; top: 0;   /* 实际位置由 JS 按视口算成像素值（zoom 下百分比不可靠） */
  zoom: var(--mkt-scale, 1);
}
.mkt-bar { cursor: move; user-select: none; touch-action: none; }

/* ---- 椤舵爮 ---- */
.mkt-bar {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto; height: 42px; padding: 0 12px;
  border-bottom: 1px solid #3d4f63;
  background: linear-gradient(180deg,#2a3a4d,#1b2733);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.mkt-bar-title { font-size: 20px; font-weight: 800; letter-spacing: .34em; text-indent: .34em; color: #ffd98f; text-shadow: 0 1px 3px #000; }
.mkt-bar-idx { font-size: 14.5px; color: #9db4c9; }
.mkt-bar-idx b { color: #ffd76a; }
.mkt-bar .silver { margin-left: auto; font-size: 13px; color: #ffd76a; }
.mkt-bar .mkt-earn { padding: 2px 10px; border-radius: 10px; font-size: 12px; color: #ffe6b0; border: 1px solid rgba(255,196,96,.45); background: rgba(120,80,20,.32); }
.mkt-bar .mkt-earn b { color: #ffd76a; }
.mkt-bar .x { font-size: 18px; padding: 2px 10px; border-radius: 6px; background: #333f4d; border: 1px solid #55667a; color: #fff; }
.mkt-mini-btn {
  padding: 4px 12px; border-radius: 7px; font-size: 14.5px; color: #ffe6b0;
  border: 1px solid #d8a44e; background: linear-gradient(#8f5d1c,#57340f);
}
.mkt-mini-btn:hover { filter: brightness(1.14); }

/* ---- 椤堕儴椤电 ---- */
.mkt-tabs {
  display: flex; flex: 0 0 auto; gap: 0; padding: 0 6px; border-bottom: 1px solid #3d4f63;
  background: linear-gradient(180deg,#22303f,#18222d);
}
.mkt-tab {
  padding: 8px 15px; font-size: 16px; color: #a9c0d2; background: none; border: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.mkt-tab:hover:not(:disabled) { color: #eaf7ff; background: rgba(255,255,255,.045); }
.mkt-tab.on { color: #ffe6b0; border-bottom-color: #ffcf6a; background: rgba(255,196,96,.09); font-weight: 700; }
.mkt-tab:disabled { opacity: .38; cursor: not-allowed; }

/* ---- 涓讳綋锛氬彧鏈夊晢閾哄崱鐗囧垪琛?---- */
.mkt-main { flex: 1; min-height: 0; display: flex; padding: 10px; }
.mkt-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* [hidden] 必须显式写：这几个块都是 display:flex，会盖掉 hidden 属性的 UA 样式 */
.mkt-right[hidden], .mkt-foot[hidden], .mkt-buyin[hidden] { display: none; }

/* ---- 收购行（2026-09-21）---- */
.mkt-buyin { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: stretch; }
.mkt-buyin .mkt-mine-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mkt-buyin .mkt-mine-bag { flex: 0 0 348px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mkt-buyin .mkt-win-shelf { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mkt-buyin .mkt-bag-grid { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mkt-buyin-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #cfe3f5; }
.mkt-buyin-info { margin-right: auto; line-height: 1.6; }
.mkt-buyin-info .gold { color: #ffd76a; }
.mkt-buyin-info .muted { color: #7d92a8; }
.mkt-buyin-note { margin-left: 8px; color: #7d92a8; font-size: 11px; }
.mkt-buyin-foot button {
  flex: 0 0 auto; white-space: nowrap;
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
  border: 1px solid #46586d; background: #223040; color: #cfe3f5;
}
.mkt-buyin-foot button:disabled { opacity: .45; cursor: not-allowed; }
.mkt-buyin-foot button.go {
  border-color: #6aa8dd; background: linear-gradient(180deg,#3f83b7,#245d88); color: #fff;
}
/* 已经在待收购清单里的背包格子：金色描边，避免重复放 */
.mkt-bag-cell.picked { border-color: #ffcf6a; box-shadow: 0 0 0 2px rgba(255,207,106,.35); }
.mkt-bag-cell.picked:hover { border-color: #ffcf6a; }
.mkt-grid {
  flex: 1; min-height: 0; overflow: hidden; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 162px; gap: 9px; align-content: start;
}

/* ---- 鍟嗛摵鍗＄墖锛氬乏鍥炬爣 + 鍙充俊鎭?+ 搴曢儴涓や釜鎸夐挳 ---- */
.mkt-card {
  position: relative; display: flex; flex-direction: column; padding: 9px 11px 10px;
  min-height: 162px; border: 1px solid #3f5570; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg,#1f2b3a,#141d26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 7px rgba(0,0,0,.4);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.mkt-card:hover { border-color: #8fc6ea; box-shadow: 0 6px 16px rgba(60,150,220,.3); }
.mkt-card.fav { background: linear-gradient(180deg,#2a2618,#161d26); border-color: #8a6a2c; }
.mkt-card.player { border-style: dashed; }
.mkt-card-title {
  font-size: 18px; font-weight: 800; color: #8fe0ff; letter-spacing: .02em; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px dashed #3f5570; padding-bottom: 4px; margin-bottom: 8px;
}
.mkt-card-body { flex: 1; display: flex; gap: 9px; align-items: flex-start; min-height: 0; }
/* padding-bottom 给左下角的物品类型角标让位（角标绝对定位在 21px 高里） */
.mkt-card-art { position: relative; flex: 0 0 84px; align-self: stretch; display: flex; align-items: center; justify-content: center; padding-bottom: 22px; }
.mkt-card-kind {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 13.5px; line-height: 19px; color: #ffe6b0;
  background: linear-gradient(180deg,rgba(120,80,20,.9),rgba(60,38,6,.9));
  border: 1px solid rgba(255,196,96,.5); border-radius: 4px;
}
.mkt-card-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.mkt-card-line { display: flex; align-items: baseline; gap: 6px; font-size: 15px; line-height: 1.5; color: #8fa6bd; }
.mkt-card-line span { flex: 0 0 70px; }
.mkt-card-line b { color: #eaf5ff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-card-line.sub b { color: #9fd4ff; font-weight: 400; }
.mkt-card-line b.ell { max-width: 100%; }
.mkt-card-line .tag { font-style: normal; font-size: 12.5px; color: #ffd98f; }




.mkt-empty { grid-column: 1 / -1; padding: 26px 0; text-align: center; color: #7d92a8; font-size: 13px; }

/* ---- 搴曟爮锛氫袱琛岋紙涓婅 鍒嗙被/浠锋牸/鍏抽敭璇?涓や釜鎼滅储鎸夐挳锛涗笅琛?缈婚〉锛?--- */
.mkt-foot {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
  border-top: 1px solid #3d4f63; background: linear-gradient(180deg,#1b2733,#141d26);
}
.mkt-foot-row1 { display: flex; align-items: center; gap: 8px; }
.mkt-foot-row2 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.mkt-foot-row2 .mkt-count { margin-right: auto; }
.mkt-foot-lb { font-size: 14.5px; color: #8fa6bd; white-space: nowrap; }
.mkt-foot select {
  padding: 5px 8px; border-radius: 7px; font-size: 14.5px;
  border: 1px solid #46586d; background: #131c26; color: #eaf2fa;
}
.mkt-searchbox { position: relative; flex: 0 1 230px; min-width: 120px; }
.mkt-searchbox input {
  width: 100%; padding: 6px 10px; border-radius: 7px; font-size: 14.5px;
  border: 1px solid #46586d; background: #131c26; color: #eaf2fa;
}
.mkt-suggest {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 5; max-height: 240px; overflow: auto;
  border: 1px solid #4a6280; border-radius: 8px; background: #101923;
  box-shadow: 0 -8px 24px rgba(0,0,0,.6);
}
.mkt-sug { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; font-size: 14px; color: #cfe3f5; cursor: pointer; }
.mkt-sug:hover { background: #223040; }
.mkt-sug b { color: #eaf7ff; }
.mkt-sug span { flex: 1; color: #8fa6bd; font-size: 13px; }
.mkt-sug-type { font-style: normal; font-size: 10.5px; color: #ffd98f; border: 1px solid rgba(255,196,96,.4); border-radius: 6px; padding: 0 5px; }
.mkt-search-btn, .mkt-page-btn {
  padding: 6px 14px; border-radius: 7px; font-size: 14.5px; white-space: nowrap;
  border: 1px solid #5b7290; color: #dbe9f6; background: linear-gradient(180deg,#31425a,#1d2a39);
}
.mkt-search-btn:hover, .mkt-page-btn:hover:not(:disabled) { filter: brightness(1.14); }
.mkt-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.mkt-count { font-size: 14.5px; color: #8fa6bd; white-space: nowrap; }
.mkt-page-input {
  width: 54px; padding: 5px 6px; border-radius: 6px; text-align: center; font-size: 14.5px;
  border: 1px solid #46586d; background: #0f161d; color: #ffd76a; font-variant-numeric: tabular-nums;
}
.mkt-page-total { font-size: 14.5px; color: #a9c0d2; white-space: nowrap; }
.mkt-pageinfo { font-size: 14.5px; color: #a9c0d2; }

/* ---- 鐙珛鍟嗗搧椤碉紙鍙嚜鐢辨嫋鍔級---- */
.mkt-window {
  position: fixed; z-index: 96; width: min(486px, 94vw);
  border: 1px solid #6b7f96; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg,#1e2a37,#121a23);
  box-shadow: 0 18px 48px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.1);
  pointer-events: auto;
}
.mkt-window[hidden] { display: none; }
.mkt-win-bar {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px 0 12px; cursor: move;
  border-bottom: 1px solid #4a5f76; background: linear-gradient(180deg,#3a4d64,#26343f);
  user-select: none; touch-action: none;
}
.mkt-win-bar span:first-child { flex: 1; font-size: 14px; font-weight: 800; color: #ffd98f; letter-spacing: .16em; text-align: center; }
.mkt-win-idx { font-size: 11.5px; color: #9fd4ff; white-space: nowrap; }
.mkt-win-bar .x { font-size: 16px; padding: 1px 8px; border-radius: 5px; background: #333f4d; border: 1px solid #55667a; color: #fff; cursor: pointer; }
.mkt-win-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.mkt-win-head { display: flex; gap: 10px; }
.mkt-seller { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mkt-avatar {
  width: 64px; height: 80px; border: 1px solid #3c5168; border-radius: 8px;
  background: radial-gradient(circle at 50% 38%, #233142, #131b24);
}
.mkt-seller-name { font-size: 12px; color: #eaf5ff; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-seller-idx { font-size: 11px; color: #8fa6bd; }
.mkt-seller-idx b { color: #ffd76a; }
.mkt-win-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mkt-win-row { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: #8fa6bd; }
.mkt-win-row span { flex: 0 0 68px; }
.mkt-win-row b { color: #eaf5ff; }
.mkt-win-btns { display: flex; gap: 6px; margin-top: 4px; }
.mkt-sys-btn {
  flex: 1; padding: 5px 0; border-radius: 6px; font-size: 12.5px;
  border: 1px solid #5b7290; color: #dbe9f6; background: linear-gradient(180deg,#31425a,#1d2a39);
}
.mkt-sys-btn:hover:not(:disabled) { filter: brightness(1.14); }
.mkt-sys-btn:disabled { opacity: .45; cursor: not-allowed; }
.mkt-sys-btn.on { border-color: #ffcf6a; color: #ffe6b0; background: linear-gradient(180deg,#8f6a1c,#573f0f); }
.mkt-sys-btn.danger { border-color: #b8707a; background: linear-gradient(180deg,#8b4a53,#4a252b); color: #ffe4e6; }
.mkt-win-shelf { border: 1px solid #3f5570; border-radius: 8px; padding: 8px; background: rgba(9,15,22,.7); }
.mkt-win-foot { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: #8fa6bd; }
.mkt-win-selbar { min-height: 20px; }
.mkt-win-sel { display: block; line-height: 1.7; color: #cfe3f5; text-align: center; }
.mkt-win-sel .gold { color: #ffd76a; }
.mkt-win-sel .good { color: #7ce0a1; }
.mkt-win-sel .bad { color: #ff9a8a; }
.mkt-win-sel button {
  margin-left: 6px; padding: 3px 10px; border-radius: 6px; font-size: 12px;
  border: 1px solid #5b7290; color: #dbe9f6; background: linear-gradient(180deg,#31425a,#1d2a39);
}
.mkt-win-sel button.danger { border-color: #b8707a; background: linear-gradient(180deg,#8b4a53,#4a252b); color: #ffe4e6; }

/* ---- 鍟嗗搧鏍硷細涓庤儗鍖呭悓娆?7脳46px 缃戞牸锛屽浘鏍囧厖婊℃爮浣?---- */
.mkt-shelf-grid {
  display: grid; grid-template-columns: repeat(7, 46px); justify-content: center;
  grid-auto-rows: min-content; gap: 5px; align-content: start;
}
.mkt-cell { position: relative; width: 46px; height: 46px; border-radius: 5px; }
.mkt-cell.has { border-color: #5d7a9a; background: rgba(16,24,34,.9); cursor: pointer; }
.mkt-cell.has:hover { border-color: #79d8ff; box-shadow: 0 0 0 2px rgba(84,190,237,.22); }
.mkt-cell.has.sel { border-color: #ffcf6a; box-shadow: 0 0 0 2px rgba(255,207,106,.4); }
/* 鍥炬爣鍏呮弧鏁翠釜鏍忎綅锛堜笌瑁呭鏍忎竴鑷达細鍘绘帀鍐呰竟璺濅笌棰濆杈规锛?
   娉ㄦ剰锛氫笉鐢?width:100% 鈥斺€?.it 瀹藉害鏈韩鐢卞唴瀹瑰喅瀹氾紝鐧惧垎姣斾細褰㈡垚寰幆渚濊禆瑙ｆ瀽鎴?0锛?
   杩欓噷鐢ㄧ粷瀵瑰畾浣嶆妸鍥炬爣閾烘弧鏍煎瓙 */
.mkt-cell .it { max-width: none; }
.mkt-cell .it > i { margin: auto; }
.mkt-icon { display: inline-block; border-radius: 5px; background-image: var(--ic); background-size: contain; background-repeat: no-repeat; background-position: center; flex: 0 0 auto; }
.mkt-icon.plain { border: 1px solid rgba(255,255,255,.4); box-shadow: 0 0 6px rgba(255,255,255,.12); }
.mkt-icon.empty { border: 1px dashed #3a4a5c; }
/* 商铺卡片左栏图标：专营物品图。装备类专营由 cardIconHtml 内联 border-color 叠品质描边，
   其余档（宝石/图纸/银币兜底）保持透明边框 → 尺寸一致、不会一档大一档小 */
.mkt-icon.cardic { border: 2px solid transparent; }

/* ---- 鎴戠殑搴楅摵绐楀彛鍐呴儴 ---- */
.mkt-mine-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mkt-stat { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: 8px; border: 1px solid #3f5570; background: linear-gradient(180deg,#1e2937,#141c25); }
.mkt-stat.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
.mkt-stat span { font-size: 11px; color: #8fa6bd; }
.mkt-stat b { font-size: 15px; color: #eaf5ff; font-variant-numeric: tabular-nums; }
.mkt-stat b.gold { color: #ffd76a; }
.mkt-mine-tabs { display: flex; gap: 6px; }
.mkt-mine-tabs button { padding: 4px 12px; border-radius: 7px; font-size: 12.5px; border: 1px solid #46586d; background: #1c2733; color: #aebfd1; }
.mkt-mine-tabs button.on { background: #2f6fb0; color: #fff; border-color: #6aa8dd; }
.mkt-mine-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mkt-mine-tools button {
  padding: 5px 11px; border-radius: 7px; font-size: 12px;
  border: 1px solid #5b7290; color: #dbe9f6; background: linear-gradient(180deg,#31425a,#1d2a39);
}
.mkt-mine-tools button:disabled { opacity: .45; cursor: not-allowed; }
.mkt-mine-tools .mkt-tool-hint { font-size: 11px; color: #7d92a8; }
.mkt-list { display: flex; flex-direction: column; gap: 5px; }
.mkt-row { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 7px; border: 1px solid #33455a; background: rgba(12,18,26,.7); font-size: 12px; color: #cfe3f5; }
.mkt-row.hist { justify-content: space-between; }
.mkt-row-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-row-mid { color: #9db4c9; font-size: 11.5px; }
.mkt-row-price { color: #ffd76a; font-variant-numeric: tabular-nums; }
.mkt-gs2 { font-style: normal; color: #9fd4ff; font-size: 11px; }

/* ---- 鑳屽寘閲岀殑銆屽晢浼氬嚭鍞€嶆寜閽?---- */
#act-btns button.market {
  border: 1px solid #d8a44e; color: #ffe6b0;
  background: linear-gradient(#8f5d1c,#57340f);
  box-shadow: inset 0 1px 0 rgba(255,225,170,.38), 0 2px 7px rgba(0,0,0,.45);
}
#act-btns button.market:hover { filter: brightness(1.15); }

/* ---- 涓婃灦寮圭獥 ---- */
.market-sell-modal { z-index: 98; }
.panel.mkt-sell-panel {
  width: min(520px, 96vw); padding: 14px 16px 16px;
  border: 1px solid #6b5a3a;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255,196,96,.13), transparent 62%),
    linear-gradient(#222b37,#131a23);
}
.mkt-sell-panel .phead b { color: #ffd98f; }
.mkt-sell-body { display: flex; gap: 14px; align-items: stretch; }
.mkt-sell-item {
  flex: 0 0 152px; display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: center;
  padding: 14px 10px; border-radius: 12px; border: 1px solid #55637a;
  background: linear-gradient(#28323f,#151d26);
}
.mkt-sell-icon { display: flex; align-items: center; justify-content: center; min-height: 68px; }
.mkt-sell-icon .it i { width: 62px !important; height: 62px !important; }
.mkt-sell-name { font-size: 14px; font-weight: 700; text-align: center; line-height: 1.35; color: #eaf5ff; }
.mkt-sell-tip { padding: 2px 10px; border-radius: 10px; font-size: 12px; color: #9fd4ff; border: 1px solid rgba(120,190,240,.35); background: rgba(20,50,80,.4); }
.mkt-sell-form { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* 2026-09-20：建议价区（指导价 + 档位 + 「填入」按钮），玩家仍可自己改价 */
.mkt-sell-ref { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #a9c0d2; line-height: 1.5; }
.mkt-sell-ref b.gold { color: #ffd76a; font-size: 16px; }
.mkt-ref-lb { color: #8fa6bd; }
.mkt-ref-price { color: #ffd76a; font-size: 15px; }
.mkt-ref-cat { color: #8fa6bd; font-size: 12px; }
.mkt-ref-use {
  padding: 2px 9px; border-radius: 6px; font-size: 12px; cursor: pointer;
  border: 1px solid #46586d; background: #1b2733; color: #cfe3f5;
}
.mkt-ref-use:hover { background: #233343; }
.mkt-sell-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #a9c0d2; }
.mkt-sell-row input {
  flex: 1; min-width: 0; padding: 9px 10px; border-radius: 8px; font-size: 15px;
  border: 1px solid #46586d; background: #0f161d; color: #ffd76a; font-variant-numeric: tabular-nums;
}
/* 2026-09-21：批量上架（同等级宝石 / 同档位同类别图纸）——数量步进器 */
.mkt-sell-qtyrow[hidden] { display: none; }
.mkt-sell-row .mkt-qty { display: flex; align-items: center; gap: 6px; }
.mkt-sell-row .mkt-qty input {
  flex: 0 0 auto; width: 64px; text-align: center; padding: 7px 6px;
  font-variant-numeric: tabular-nums;
}
.mkt-qty button {
  width: 30px; height: 32px; border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1;
  border: 1px solid #46586d; background: #1b2733; color: #cfe3f5;
}
.mkt-qty button:hover { background: #233343; }
.mkt-qty-max { color: #8fa6bd; font-size: 12px; }
.mkt-sell-hint { font-size: 12px; color: #8fa6bd; line-height: 1.5; }
.mkt-sell-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.mkt-sell-actions .go { padding: 9px 24px; border-radius: 9px; border: 1px solid #6aa8dd; background: linear-gradient(180deg,#3f83b7,#245d88); color: #fff; font-size: 14px; }
.mkt-sell-actions .ghost2 { padding: 9px 18px; border-radius: 9px; border: 1px solid #46586d; background: #223040; color: #cfe3f5; font-size: 14px; }

/* ---- 绐勫睆锛氬崱鐗囬€€鍥?2 鍒?---- */
@media (max-width: 760px) {
  .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 162px; }
  /* 行高必须等于 .mkt-card 的 min-height（162px）：写成 minmax(140px, auto) 时行会被压到
     (网格高 − 行距) / 行数 ≈ 143.7px，卡片撑出自己的格子互相重叠，最后一行还会探出网格被切掉。 */
  .mkt-foot { flex-wrap: wrap; }
  .mkt-foot-row1, .mkt-foot-row2 { flex-wrap: wrap; }
}


/* ============================================================
   我的店铺窗口：左边柜台 + 右边背包（复用现有背包格子，去掉人物预览）
   背包格子可直接拖到左边柜台上架，或双击格子打开上架弹窗。
   ============================================================ */
.mkt-mine-window { width: min(760px, 96vw); }
.mkt-mine-cols { display: flex; gap: 10px; align-items: stretch; }
.mkt-mine-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mkt-mine-bag { flex: 0 0 348px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mkt-mine-caption { font-size: 12px; color: #cfe3f5; display: flex; align-items: baseline; gap: 6px; }
.mkt-mine-caption .muted { color: #7d92a8; font-size: 11px; }
.mkt-bag-pages { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 11px; color: #8fa6bd; }
.mkt-bag-pages button {
  padding: 0 6px; border-radius: 5px; font-size: 12px; line-height: 16px;
  border: 1px solid #46586d; background: #223040; color: #cfe3f5;
}
/* 柜台作为拖放目标 */
.mkt-drop-shelf { min-height: 120px; transition: border-color .12s ease, box-shadow .12s ease; }
.mkt-drop-shelf.drop-on { border-color: #ffcf6a; box-shadow: 0 0 0 2px rgba(255,207,106,.35) inset, 0 0 14px rgba(255,207,106,.3); }
/* 背包网格：与游戏背包同款 7 列 / 等比格子 */
.mkt-bag-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: min-content; gap: 4px; align-content: start;
  padding: 8px; border: 1px solid #3f5570; border-radius: 8px; background: rgba(9,15,22,.7);
}
.mkt-bag-cell { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; cursor: pointer; }
.mkt-bag-cell.has { border-color: #5d7a9a; background: rgba(16,24,34,.9); }
.mkt-bag-cell.has:hover { border-color: #79d8ff; box-shadow: 0 0 0 2px rgba(84,190,237,.22); }
.mkt-bag-cell.blocked { opacity: .45; cursor: not-allowed; }
/* 背包格子里的图标同样充满栏位（规则见文件末尾的图标铺满块） */
.mkt-bag-cell .it { max-width: none; }

@media (max-width: 760px) {
  .mkt-mine-cols { flex-direction: column; }
  .mkt-mine-bag { flex: 1 1 auto; }
}

/* ---- 命中筛选的高亮（商会卡片 + 商会内装备）---- */
.mkt-card.hit { border-color: #5ff0d8; box-shadow: 0 0 0 2px rgba(95,240,216,.75), 0 0 18px rgba(60,220,200,.45); }
.mkt-card.hit .mkt-card-title { color: #9dfff0; }
.mkt-cell.has.hit { border-color: #5ff0d8; box-shadow: 0 0 0 2px rgba(95,240,216,.85), 0 0 12px rgba(60,220,200,.55); }
.mkt-cell.has.hit::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px; pointer-events: none;
  border: 1px dashed rgba(120,255,235,.85);
}

/* ---- 搜索命中：金色流光边框（店铺卡片 + 商品格）----
   边框材质 = 45° 斜纹金条 + 横向流动 + 呼吸光晕，跟筛选命中的青绿框完全区分开。
   斜纹只画在边框上：padding 撑出环宽，两层 mask 做异或把中间挖空。 */
@keyframes mkt-kw-stripe { to { background-position: 48px 0; } }
@keyframes mkt-kw-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,180,46,.55), 0 0 14px rgba(255,130,20,.35); }
  50%      { box-shadow: 0 0 0 3px rgba(255,205,95,.95), 0 0 24px rgba(255,150,40,.75); }
}
.mkt-card.kw-hit,
.mkt-cell.has.kw-hit {
  border-color: #ffcf6a;
  animation: mkt-kw-glow 1.5s ease-in-out infinite;
}
.mkt-card.kw-hit::before,
.mkt-cell.has.kw-hit::before {
  content: ""; position: absolute; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(45deg,
    #fff6d0 0 6px, #ffbe3d 6px 12px, #ff8a1f 12px 18px, #ffd76a 18px 24px);
  animation: mkt-kw-stripe 1.1s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.mkt-card.kw-hit::before { inset: -4px; padding: 4px; border-radius: 12px; }
.mkt-cell.has.kw-hit::before { inset: -3px; padding: 3px; border-radius: 8px; }
.mkt-card.kw-hit .mkt-card-title { color: #ffd76a; }

/* ============================================================
   图标铺满整个栏位（货架格子 / 我的店铺背包格 / 卡片左栏）
   完全照抄游戏背包的做法：.it 用 flex + 100%，内层 <i> 用 100%（不是绝对定位）。
   注意：卡片左栏因为要给「物品类型」角标留位置，<i> 单独用 inset 让出底部。
   ============================================================ */
/* 1) 货架格子（详情页 7×6）与我的店铺里的背包格：图标铺满 */
.mkt-cell.has, .mkt-bag-cell.has { padding: 0; }
.mkt-cell .it, .mkt-bag-cell .it {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; max-width: none;
}
.mkt-cell .it > i,
.mkt-cell .it.wicon > i, .mkt-cell .it.eicon > i, .mkt-cell .it.gicon > i, .mkt-cell .it.bicon > i,
.mkt-bag-cell .it > i,
.mkt-bag-cell .it.wicon > i, .mkt-bag-cell .it.eicon > i, .mkt-bag-cell .it.gicon > i, .mkt-bag-cell .it.bicon > i {
  position: static; inset: auto;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; border-radius: 4px;
  background-size: cover !important; background-position: center; background-repeat: no-repeat;
}
/* 2) 卡片左栏：图标铺满，但底部让出角标的高度 */
.mkt-card-art .it { display: flex; width: 100%; height: 100%; max-width: none; }
.mkt-card-art .it > i,
.mkt-card-art .it.wicon > i, .mkt-card-art .it.eicon > i, .mkt-card-art .it.gicon > i, .mkt-card-art .it.bicon > i {
  width: 100% !important; height: calc(100% - 20px) !important;
  margin: 0 !important; border-radius: 6px;
  background-size: cover !important; background-position: center; background-repeat: no-repeat;
}
/* 3) 价格覆盖在图标上（不再单独占一条空间，也不再挤掉图标）
   注意：这条是 .mkt-price 的唯一权威定义，上面不再保留旧的同名规则 */
.mkt-price {
  position: absolute; left: 0; right: 0; bottom: 0; height: 13px; line-height: 13px;
  font-size: 10px; color: #ffd76a; text-align: center; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(4,8,12,.35), rgba(4,8,12,.88));
  border-radius: 0 0 4px 4px; text-shadow: 0 1px 2px rgba(0,0,0,.9); pointer-events: none;
}

/* ---- 我的店铺：底部两行各自成行，避免「在售/页码」和「改价/首页展示/下架」挤成两行 ---- */
.mkt-mine-left > .mkt-win-foot { justify-content: flex-start; }
.mkt-mine-left > .mkt-win-foot .mkt-pageinfo { margin-right: auto; }
.mkt-mine-left > .mkt-win-foot + .mkt-win-selbar .mkt-win-sel { text-align: left; }
.mkt-mine-left .mkt-win-sel button { margin-left: 8px; }

/* ---- 已售记录：横向一行一条，固定在和「在售」一样的高度里滚动（不把窗口拉长） ---- */
.mkt-sales { display: flex; flex-direction: column; gap: 3px; }
.mkt-sale-head,
.mkt-sale-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 7px; border-radius: 6px;
  border: 1px solid transparent;
}
.mkt-sale-head {
  position: sticky; top: 0; z-index: 1;
  font-size: 11.5px; color: #8fa6bd; letter-spacing: .04em;
  background: #16202b; border-color: #3f5570;
}
.mkt-sale-row { background: rgba(16,24,34,.72); border-color: #33465c; font-size: 12.5px; }
.mkt-sale-row:hover { border-color: #5d7a9a; background: rgba(24,36,50,.9); }
.mkt-sale-icon { flex: 0 0 26px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.mkt-sale-icon .it { width: 100%; height: 100%; display: flex; }
.mkt-sale-icon .it > i { width: 100% !important; height: 100% !important; border-radius: 4px; }
.mkt-sale-name { flex: 1 1 auto; min-width: 0; color: #eaf5ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-sale-buyer { flex: 0 0 auto; color: #a9bdd2; }
.mkt-sale-time { flex: 0 0 auto; color: #7d92a8; font-variant-numeric: tabular-nums; }
.mkt-sale-price { flex: 0 0 auto; min-width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.mkt-sale-head .mkt-sale-buyer { flex: 0 0 108px; }
.mkt-sale-head .mkt-sale-time { flex: 0 0 84px; }
.mkt-sale-row .mkt-sale-buyer { flex: 0 0 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-sale-row .mkt-sale-time { flex: 0 0 84px; }
/* 已售页也要能滚，但高度锁死在柜台格子的高度内 */
#mkt-mine-grid { overflow: auto; }
.mkt-mine-left .mkt-win-shelf { overflow: hidden; }

/* ---- 购买确认弹窗 ---- */
.market-buy-modal { z-index: 100; }
.mkt-buy-panel { width: 340px; }
.mkt-buy-body { display: flex; flex-direction: column; gap: 10px; }
.mkt-buy-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 8px; border: 1px solid #3f5570; background: rgba(12,18,26,.7); }
.mkt-buy-icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.mkt-buy-icon .it { width: 100%; height: 100%; display: flex; }
.mkt-buy-icon .it > i { width: 100% !important; height: 100% !important; }
.mkt-buy-name { font-size: 15px; font-weight: 800; text-align: center; }
.mkt-buy-sub { font-size: 11.5px; color: #8fa6bd; }
.mkt-buy-rows { display: flex; flex-direction: column; gap: 3px; }
.mkt-buy-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.mkt-buy-row span { flex: 0 0 76px; color: #8fa6bd; }
.mkt-buy-row b { color: #eaf5ff; font-variant-numeric: tabular-nums; }
.mkt-buy-row.total { border-top: 1px dashed #3f5570; padding-top: 5px; margin-top: 3px; }
.mkt-buy-row.total b { font-size: 15px; }
.mkt-buy-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.mkt-buy-actions button { padding: 7px 18px; border-radius: 7px; font-size: 13px; }
.mkt-buy-actions button:disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   商会经济调试面板（默认隐藏，Ctrl+Shift+M 唤起）
   故意不进正常布局：fixed + 独立层级，关掉时完全不占位
   ============================================================ */
.market-debug {
  position: fixed; left: 12px; top: 12px; width: 520px; max-height: 86vh;
  display: flex; flex-direction: column;
  background: rgba(8, 13, 20, .95); border: 1px solid #4a6280; border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .7); z-index: 200; color: #cfe3f5;
  font-size: 12px;
}
.market-debug.hide { display: none; }
.market-debug .md-bar {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid #3f5570; background: #16202b; border-radius: 10px 10px 0 0;
  cursor: move; user-select: none;
}
.market-debug .md-bar b { color: #ffd76a; font-size: 13px; }
.market-debug .md-hint { margin-left: auto; color: #7d92a8; font-size: 11px; }
.market-debug .md-x {
  padding: 0 8px; border-radius: 6px; font-size: 14px; line-height: 20px;
  border: 1px solid #55667a; background: #333f4d; color: #fff; cursor: pointer;
}
.market-debug .md-body {
  margin: 0; padding: 9px 11px; overflow: auto; white-space: pre-wrap;
  font-family: Consolas, "Courier New", monospace; font-size: 11.5px; line-height: 1.55;
  color: #cfe3f5;
}

/* ============================================================
   隐藏 GM：商会价格配置（Ctrl+Shift+M）
   只服务 js/market/marketPriceGM.js，正常游戏界面不出现任何入口。
   ============================================================ */
#modal-price-gm { z-index: 110; }
/* 尺寸固定：切分页 / 切二级标签时窗体不许变大小。
   高度 = 固定块 354（phead 27 + 搜索 32 + 页签 30 + 部位行 30 + 市场参数 124 + 底栏 35 + gap 48 + 内边距 28）
        + 列表 252（装备页最多 5 行：内容 236 + 上下内边距 12 + 上下边框 2；
          实测 5 行内容高 236 —— 最后一行没有 border-bottom，所以是 224 + 12）= 606。
   92vh 只用于矮视口兜底（不随分页变），列表靠 flex 吃掉剩余空间。 */
.panel.gm-panel {
  /* 2026-09-20：装备页金装加到 6 行（多了「合成材料」），606 装不下 → 抬高到 652。
     实测推算（1280×900）：面板高 − 列表 clientH = 368（固定块 354 + 内边距边框 14）；
     6 行内容 269（实测行高 ≈44.8）+ 列表内边距 12 = 281 → 需 368+281 = 649，取 652 留余量。
     smoke-test 有断言守着，改行数/行高都要重算。 */
  width: min(560px, 94vw); height: min(652px, 92vh);
  max-height: none; display: flex; flex-direction: column; gap: 8px;
}
.gm-search input {
  width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 7px; font-size: 14px;
  border: 1px solid #46586d; background: #131c26; color: #eaf2fa;
}
.gm-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gm-tab {
  padding: 5px 12px; border-radius: 7px; font-size: 13.5px;
  border: 1px solid #46586d; background: #1b2733; color: #cfe3f5;
}
.gm-tab.on { background: #2f6fb0; border-color: #6aa8dd; color: #fff; }
.gm-subtabs { display: flex; gap: 6px; margin-left: auto; }
.gm-subtab {
  padding: 4px 10px; border-radius: 6px; font-size: 12.5px;
  border: 1px solid #3f5570; background: #16202b; color: #9fb6cc;
}
.gm-subtab.on { background: #26405a; border-color: #6aa8dd; color: #eaf5ff; }
/* 装备页的部位下拉：独占一行（塞进 .gm-tabs 会把它挤成两行，压缩列表）
   其他分页这一行留空但**保留高度**，保证各分页尺寸一致 */
.gm-slotrow { flex: 0 0 30px; display: flex; align-items: center; }
.gm-slot {
  flex: 0 0 auto; max-width: 190px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px;
  border: 1px solid #3f5570; background: #16202b; color: #cfe3f5;
}
/* 部位页：没配过的项留空，placeholder 提示通用价 */
.gm-price::placeholder { color: #6f8499; }
/* 金额配色 = 游戏背包银币那套（#bag-silver.t1~t5），按数字位数自动换档 */
.gm-price.t1 { color: #5cc4ff; }
.gm-price.t2 { color: #43d47f; }
.gm-price.t3 { color: #b98cff; }
.gm-price.t4 { color: #ffd76a; }
.gm-price.t5 { color: #ff6b6b; text-shadow: 0 0 8px rgba(255,80,80,.35); }
/* flex:1 + min-height:0 —— 高度只由面板固定高度分配，不跟着行数涨 */
.gm-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px;
  border: 1px solid #3f5570; border-radius: 8px; background: rgba(10,18,28,.6);
}
.gm-row { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-bottom: 1px solid rgba(63,85,112,.5); }
.gm-row:last-child { border-bottom: 0; }
.gm-icon { flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.gm-icon .it { width: 34px; height: 34px; }
.gm-icon .it > i,
.gm-icon .it.wicon > i, .gm-icon .it.eicon > i, .gm-icon .it.gicon > i, .gm-icon .it.bicon > i {
  width: 34px !important; height: 34px !important; margin: 0 !important;
  background-size: cover !important; background-position: center; background-repeat: no-repeat;
}
.gm-name { flex: 1; min-width: 0; font-size: 14px; color: #eaf5ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-tag { flex: 0 0 auto; font-size: 12px; color: #8fa6bd; }
.gm-price {
  flex: 0 0 130px; text-align: right; padding: 5px 9px; border-radius: 6px; font-size: 14px;
  border: 1px solid #46586d; background: #131c26; color: #ffe6b0;
}
/* 空状态撑满列表区（保持各分页尺寸一致），文字垂直居中 */
.gm-empty {
  height: 100%; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #7d92a8; font-size: 13px;
}
.gm-market { border-top: 1px solid #3d4f63; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.gm-mkt-title { font-size: 12.5px; color: #8fa6bd; }
.gm-mul { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #cfe3f5; }
.gm-mul span { flex: 1; }
.gm-mul-input {
  flex: 0 0 90px; text-align: right; padding: 5px 9px; border-radius: 6px; font-size: 13.5px;
  border: 1px solid #46586d; background: #131c26; color: #ffe6b0;
}
.gm-foot { display: flex; align-items: center; gap: 8px; }
.gm-hint { flex: 1; font-size: 12px; color: #7d92a8; }
.gm-warn { flex: 1; font-size: 12.5px; color: #ffb3b3; }
.gm-btn {
  padding: 7px 16px; border-radius: 7px; font-size: 14px;
  border: 1px solid #46586d; background: #223040; color: #cfe3f5;
}
.gm-btn.primary { background: linear-gradient(180deg, #3f86d6, #27609b); border-color: #7db4e8; color: #fff; }
/* 拖动：标题栏是把手（× 按钮照常可点），移动期间禁止选中文字 */
.panel.gm-panel .phead { cursor: move; user-select: none; }
.panel.gm-panel.dragging { cursor: grabbing; }
.panel.gm-panel.dragging .phead { cursor: grabbing; }


/* ============================================================
   手机端适配（≤560px）· 2026-09-22
   ------------------------------------------------------------
   ⚠️ 全部关在这条媒体查询里。电脑端视口 ≥561px 时这些规则连参与
      计算的机会都没有 —— 改完用 _tools/snapshot-desktop.js 逐元素
      比对计算样式哈希来证明（比截图严谨：截图里画布在跑动画）。

   两个设计决定（用户 2026-09-22 拍板）：
     · 画布保持完整视野（720x960 contain），上下留白给 HUD / 技能栏
     · 四个主面板（背包 / 人物 / 变强 / 商会）全屏铺满，App 风格

   改之前实测（390x844）：背包横向溢出 177px、人物纵向要滚 171px、
   变强要滚 428px、商会比屏幕宽 60px。
   ============================================================ */
@media (max-width: 560px) {

  /* ---------- 1. 主面板：全屏铺满 ---------- */
  /*  高度用 dvh 不用 vh：手机浏览器的 100vh 含地址栏高度，会把面板底部
      的「合成 / 关闭」按钮顶到屏幕外，dvh 跟可视高度走。
      （桌面端没有动态地址栏，dvh 恒等于 vh，所以这条对电脑端无影响。） */
  #modal-bag .panel,
  #modal-character .panel,
  #modal-power .panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding-left: 12px;
    padding-right: 12px;
    /* 刘海屏 / 手势条：留出安全区，别让按钮贴着系统手势条 */
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- 2. 背包：人物栏与背包栏 左右并排 → 上下堆叠 ---------- */
  /*  桌面是 [人物+装备 340px] + [背包格 324px] 并排 = 678px，
      塞进 367px 的面板里横向溢出 177px（实测）。竖屏必须堆叠。
      背包格保持 7 列 42px（=324px），366px 的内容宽度放得下，不用动。 */
  .bag-body { flex-direction: column; gap: 10px; }
  /*  ⚠️ 高度必须同时压 min-height：`.bag-left` 在别处写着 `min-height: 430px`
      （桌面是「左右并排、高度自适应」那套），只写 height 会被 min-height 顶住
      量出来还是 430px。 */
  .bag-panel .bag-left {
    flex: 0 0 auto; width: 100%; min-width: 0;
    height: 290px; min-height: 0;
    border-right: 0;
    border-bottom: 1px dashed #2e3f52;
    padding-bottom: 6px;
  }
  /*  装备格缩到 42px：左右各 6 格（6×42 + 5×5 = 277px）正好塞进 282px 可视高。
      42px 仍然 ≥ 40px 触摸目标下限。 */
  .bag-panel .bag-left .eqcol { top: 4px; bottom: 4px; gap: 5px; }
  .bag-panel .bag-left .eqcol .equip-cell { width: 42px; height: 42px; }
  .bag-panel .bag-right { flex: 0 0 auto; width: 100%; min-width: 0; }
  .bag-tools { flex-wrap: wrap; margin-top: 10px; }
  /*  ⚠️ 桌面 .bag-panel 是 overflow:hidden（靠内部固定高度凑满 656px 设计高）。
      手机上内容比一屏高，hidden 会把「筛选 / 一键整理 / 自动合成」整条硬裁掉、
      永远够不到。所以这里放开纵向滚动，并让 bag-body 按内容高走（别被 flex 压扁）。 */
  #modal-bag .panel { overflow-y: auto !important; }
  .bag-body { flex: 0 0 auto; }

  /* ---------- 3. 人物：压到一屏放得下 ---------- */
  .character-body .character-figure { height: 250px; min-height: 250px; flex-basis: 250px; }
  .character-body .character-figure .character-avatar { width: 150px; height: 224px; }
  .character-body .character-figure .eqcol { top: 4px; bottom: 4px; }
  .character-stats { gap: 6px; }
  .stat-row { padding: 2px 8px 3px; }

  /* ---------- 4. 变强：压缩卡片内边距与最小高度 ---------- */
  /*  桌面那个 620px 的 min-height 是给大屏留的，手机上会把整页撑到两屏高 */
  .synth-compose-card { padding: 10px; }
  .synth-inherit-card { min-height: 0; }
  .synth-hd-layout { gap: 10px; }
  #power-tabs { flex-wrap: wrap; gap: 6px; }

  /* ---------- 5. 商会：放弃「900x874 设计稿 + zoom」，切回响应式 ---------- */
  /*  桌面那套是「固定设计尺寸 + JS 算 zoom 整体等比缩放」。到 390px 宽时需要
      zoom≈0.4 —— 11.5px 的小字会变成 4.6px，读不了；而且 fitPanel() 里
      `Math.max(0.5, …)` 与 `Math.max(360, …)` 两个下限还会把面板撑到 450px
      （实测比屏幕宽 60px）。所以窄屏直接切回正常文档流 + 响应式。
      注意用 !important：fitPanel() 是往元素上写 inline 的 zoom / left / top。 */
  #modal-market .panel.market-panel {
    zoom: 1 !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .mkt-bar { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .mkt-bar-title { font-size: 16px; letter-spacing: .2em; text-indent: .2em; }
  .mkt-bar-idx { font-size: 12px; }
  .mkt-bar .silver { margin-left: 0; }
  .mkt-tabs { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .mkt-tab { font-size: 13px; padding: 6px 10px; }
  .mkt-main { padding: 8px; overflow-y: auto; }
  /*  ⚠️ 桌面 .mkt-grid 是 flex:1 + overflow:hidden（设计稿高 874px 刚好放 4 行）。
      手机上卡片变窄、内容换行变高，如果还让网格去「填满剩余高度」，
      6 行会被均分成 83.7px，而卡片内容需要 122px → 卡片被挤扁、
      「店主 / 建店」两行被裁掉（实测）。
      所以窄屏让网格按内容高度走（flex:0 0 auto + overflow:visible），
      滚动交给外层 .mkt-main。 */
  .mkt-grid {
    flex: 0 0 auto;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-content: start;
    gap: 8px;
  }
  .mkt-card { min-height: 0; }
  .mkt-foot { padding: 8px; }
  .mkt-foot-row1, .mkt-foot-row2 { flex-wrap: wrap; gap: 6px; }
  .mkt-foot-lb { font-size: 13px; }
  .mkt-searchbox { flex: 1 1 100%; }
  /*  收购行：桌面是 [收购柜台 flex:1] + [背包 348px] 并排。手机上 348px 固定宽
      会把左边挤成一条「竖排文字」（实测截图里标题一个字一行）。竖屏改上下堆叠。 */
  .mkt-buyin { flex-direction: column; }
  .mkt-buyin .mkt-mine-left { flex: 0 0 auto; }
  .mkt-buyin .mkt-mine-bag { flex: 0 0 auto; width: 100%; }
  /*  我的店铺窗口同理（它自己有 760px 的堆叠规则，这里兜一层防宽度判断不一致） */
  .mkt-mine-cols { flex-direction: column; }
  .mkt-mine-bag { flex: 0 0 auto; width: 100%; }
  /* 商品详情窗是 position:fixed + JS 拖拽定位的，别让它比屏幕还宽 */
  .mkt-window { max-width: calc(100vw - 12px) !important; }

  /* ---------- 6. 其它小弹窗：保证不超出屏幕 ---------- */
  .modal .panel { max-width: calc(100vw - 16px); }
  #modal-salvage .panel,
  #modal-market-sell .panel,
  #modal-market-buy .panel,
  #modal-price-gm .panel,
  #modal-idle-boon .panel {
    max-height: 92dvh;
    overflow-y: auto;
  }
  /* 异度阵亡选择框：就两个按钮，别铺满，居中一张小卡更清楚 */
  #modal-yidu-choice .panel { width: calc(100vw - 28px); max-width: 380px; }
}