/* ============ 魔法纪元·开放世界 —— 像素UI样式 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0e1a; }
body { font-family: 'Courier New', 'SimSun', monospace; color: #e8e4d8; font-size: 14px; }

#game { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; }
.hidden { display: none !important; }

/* ---------- 通用像素面板 ---------- */
.panel, #dialog, #titleInner {
  background: #1c2030;
  border: 3px solid #5a5f7a;
  box-shadow: 0 0 0 3px #10131f, 0 8px 24px rgba(0,0,0,.6);
  position: absolute;
}
/* 面板为 flex 列：标题行固定，.panelBody 滚动，✕（绝对定位）始终钉在右上角 */
.panel { left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 14px 16px 12px; min-width: 380px; max-width: 640px; max-height: 82vh; overflow: hidden; display: flex; flex-direction: column; }
.panel > .pTitle { flex: 0 0 auto; }
.panelBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.panelBody::-webkit-scrollbar { width: 10px; } .panelBody::-webkit-scrollbar-thumb { background: #4a5068; }
.pTitle { font-size: 16px; letter-spacing: 2px; color: #ffd982; margin-bottom: 10px; border-bottom: 2px solid #3a4058; padding-bottom: 6px; }
/* 关闭按钮钉在面板右上角，不随内容滚动 */
.pClose { position: absolute; top: 11px; right: 14px; z-index: 5; background: #3a4058; color: #e8e4d8; border: 2px solid #6a708a; cursor: pointer; font-family: inherit; padding: 1px 7px; }
.pClose:hover { background: #6a3a3a; }
.pFoot { margin-top: 10px; color: #9aa0b8; }
.btn {
  display: inline-block; background: #2c3350; color: #ffd982; border: 2px solid #7a80a0;
  padding: 7px 18px; cursor: pointer; font-family: inherit; font-size: 14px; letter-spacing: 1px;
  box-shadow: 0 3px 0 #10131f; margin: 3px;
}
.btn:hover { background: #3c4570; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.warn { color: #ff8a8a; border-color: #a06a6a; }
.btn.small { padding: 3px 9px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud .btn, #hotbar .slot { pointer-events: auto; }

#statPanel { position: absolute; left: 14px; top: 12px; width: 252px; background: rgba(16,19,31,.82); border: 2px solid #4a5068; padding: 8px 10px 6px; pointer-events: auto; cursor: pointer; }
#statPanel:hover { border-color: #ffd982; }
.pName { display: flex; justify-content: space-between; color: #ffd982; font-size: 13px; margin-bottom: 5px; }
.barWrap { display: flex; align-items: center; margin: 3px 0; }
.barTag { width: 34px; font-size: 11px; color: #9aa0b8; }
.bar { flex: 1; height: 14px; background: #10131f; border: 2px solid #3a4058; position: relative; }
.bar > div { height: 100%; width: 50%; transition: width .15s; }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 11px; color: #fff; text-shadow: 1px 1px 0 #000; }
.bar.hp > div { background: linear-gradient(#ff6a6a, #c0304a); }
.bar.mp > div { background: linear-gradient(#6ab4ff, #3a5ac0); }
.bar.sta > div { background: linear-gradient(#ffe27a, #d0a030); }
.bar.hun > div { background: linear-gradient(#a8e07a, #5a9a3a); }
.bar.xp > div { background: linear-gradient(#c89aff, #7a4ad0); }
.bar.boss > div { background: linear-gradient(#ff5a8a, #901a3a); }
.xpW { margin-top: 5px; } .xpW .bar { height: 8px; }

#mapPanelHud { position: absolute; right: 14px; top: 12px; text-align: right; }
/* 小地图可点击：捕获指针事件（打开大地图），点击不再穿透到游戏画布触发攻击 */
#minimap { border: 2px solid #4a5068; background: #10131f; image-rendering: pixelated; pointer-events: auto; cursor: pointer; }
#clockRow { background: rgba(16,19,31,.82); border: 2px solid #4a5068; border-top: none; padding: 3px 8px; font-size: 13px; display: flex; justify-content: space-between; color: #ffd982; }
#weatherText { background: rgba(16,19,31,.82); border: 2px solid #4a5068; border-top: none; padding: 2px 8px; font-size: 12px; color: #9ad0ff; }

#hotbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; }
.slot {
  width: 48px; height: 48px; background: rgba(16,19,31,.85); border: 2px solid #4a5068; position: relative;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.slot canvas { image-rendering: pixelated; }
.slot .num { position: absolute; left: 2px; top: 1px; font-size: 10px; color: #9aa0b8; }
.slot .cd { position: absolute; inset: 0; background: rgba(10,12,24,.75); }
.slot .cdText { position: absolute; inset: 0; text-align: center; line-height: 46px; font-size: 13px; color: #fff; text-shadow: 1px 1px 0 #000; }
.slot .cnt { position: absolute; right: 2px; bottom: 1px; font-size: 11px; color: #ffe; text-shadow: 1px 1px 0 #000; }
.slot.sel { border-color: #ffd982; box-shadow: 0 0 8px rgba(255,217,130,.5); }
.slot.empty canvas { opacity: .18; }

#petInfo { position: absolute; left: 14px; bottom: 14px; width: 200px; background: rgba(16,19,31,.82); border: 2px solid #4a5068; padding: 6px 9px; font-size: 12px; }
#petInfo .bar { height: 10px; margin-top: 3px; }
/* 佣兵出战栏（HUD，宠物栏上方）：主角+2佣兵的血条快照 */
#mercRow { position: absolute; left: 14px; bottom: 78px; display: flex; flex-direction: column; gap: 4px; width: 200px; }
.mercChip { background: rgba(16,19,31,.82); border: 2px solid #4a5068; padding: 4px 8px; font-size: 12px; }
.mercChip .bar { height: 8px; margin-top: 2px; }
.mercChip b { color: #d8dcf0; margin-right: 6px; }

/* 佣兵管理面板卡片 */
.mercCard { flex-wrap: wrap; }
.mercStyleRow { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.btn.tiny { padding: 1px 7px; font-size: 11px; }
.btn.tiny.sel { border-color: #ffd24a; color: #ffd24a; background: rgba(255,210,74,.08); }
.mercEqRow { flex-basis: 100%; display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.mercEqSlot { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #10131f; border: 2px solid #3a4058; cursor: pointer; color: #6a7090; font-size: 13px; flex: none; }
.mercEqSlot:hover { border-color: #8ad0ff; }

/* 货币条：小地图左端、贴顶；行尾「＋」按钮为系统商城入口 */
#curWrap { position: absolute; right: 152px; top: 12px; display: flex; flex-direction: column; gap: 4px; }
#hud button { pointer-events: auto; }
.curRow { display: flex; align-items: stretch; gap: 4px; }
#goldPanel, #diamondPanel { background: rgba(16,19,31,.82); border: 2px solid #4a5068; padding: 3px 12px; font-size: 14px; min-width: 74px; text-align: left; }
#goldPanel { color: #ffd982; }
#goldPanel::before { content: '◆ '; color: #ffe27a; }
#diamondPanel { color: #8fd8ff; }
#diamondPanel::before { content: '♦ '; color: #6ecbff; }
.curPlus { width: 28px; background: rgba(16,19,31,.82); border: 2px solid #7a80a0; color: #ffd982; font-family: inherit; font-size: 15px; cursor: pointer; line-height: 1; }
.curPlus:hover { background: #3c4570; border-color: #ffd982; }
.curPlus:active { transform: translateY(1px); }

/* 电脑版专属功能入口按键（签到/每日任务/祈愿/佣兵——已从主菜单移除） */
#quickEntries { position: absolute; left: 14px; top: 184px; display: flex; gap: 6px; }
#quickEntries .btn { pointer-events: auto; }
body.touch #quickEntries { display: none !important; }

#buffRow { position: absolute; left: 278px; top: 12px; display: flex; gap: 4px; }
#buffRow .buff { background: rgba(16,19,31,.85); border: 1px solid #7a80a0; padding: 2px 6px; font-size: 11px; color: #9ad0ff; }

/* E 键交互提示可点击：响应范围即整个提示区域（pointerdown 立即触发，无点击延迟） */
#interactHint { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); background: rgba(16,19,31,.88); border: 2px solid #ffd982; padding: 4px 14px; color: #ffe9b0; font-size: 13px; pointer-events: auto; cursor: pointer; touch-action: none; }
#interactHint:hover { background: rgba(40,44,66,.92); }
#castBar { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); width: 220px; height: 16px; background: rgba(16,19,31,.9); border: 2px solid #7a80a0; }
#castFill { height: 100%; width: 0%; background: linear-gradient(#c89aff, #7a4ad0); }
#castName { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 13px; text-shadow: 1px 1px 0 #000; }
#bossBar { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: 420px; text-align: center; }
#bossName { color: #ff8a9a; font-size: 14px; letter-spacing: 3px; text-shadow: 1px 1px 0 #000; }
#bossBar .bar { height: 12px; margin-top: 3px; }
#keyHints { position: absolute; right: 14px; bottom: 48px; font-size: 10px; color: rgba(200,205,230,.55); text-align: right; max-width: 420px; }
/* 背包丢弃模式：物品格红色提示 */
.slot.dropSel { border-color: #c05a5a; box-shadow: inset 0 0 0 1px rgba(220,110,110,.35); }

#buildBar { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 12; background: rgba(16,19,31,.9); border: 2px solid #4a5068; padding: 6px; }
#buildBar .slot { width: 46px; height: 46px; }
#buildBar .slot.sel { border-color: #7aff9a; }

/* ---------- 提示 ---------- */
#toasts { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 58; pointer-events: none; text-align: center; }
.toast { background: rgba(16,19,31,.92); border: 2px solid #7a80a0; color: #ffe9b0; padding: 5px 16px; margin: 4px auto; font-size: 13px; animation: toastIn .2s, toastOut .4s 2.6s forwards; }
.toast.good { border-color: #7aff9a; color: #baffca; }
.toast.bad { border-color: #ff7a7a; color: #ffcaba; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px);} }
@keyframes toastOut { to { opacity: 0; } }

#tip { position: fixed; z-index: 60; background: #141826; border: 2px solid #6a708a; padding: 8px 10px; font-size: 12px; max-width: 260px; pointer-events: none; line-height: 1.5; }
#tip .tName { font-size: 13px; margin-bottom: 3px; }
#tip .aff { color: #8ad0ff; } #tip .dim { color: #8a90a8; }

/* ---------- 对话框 ---------- */
#dialog { left: 50%; bottom: 12vh; transform: translateX(-50%); width: 560px; padding: 14px 18px; z-index: 56; }
#dialogName { color: #ffd982; font-size: 15px; margin-bottom: 6px; letter-spacing: 1px; }
#dialogText { font-size: 14px; line-height: 1.7; min-height: 40px; color: #e8e4d8; }
#dialogOpts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- 面板内部 ---------- */
.grid { display: grid; grid-template-columns: repeat(8, 48px); gap: 5px; }
.grid .slot { width: 48px; height: 48px; }
/* 背包完整显示全部槽位：网格本体可滚动（面板 flex 列内自适应收缩） */
#invGrid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding-right: 4px; }
#invGrid::-webkit-scrollbar { width: 10px; } #invGrid::-webkit-scrollbar-thumb { background: #4a5068; }
.q0 { border-color: #7a8090 !important; } .q1 { border-color: #6ecb63 !important; }
.q2 { border-color: #4aa8ff !important; } .q3 { border-color: #b06cff !important; }
.q4 { border-color: #ff9f2e !important; box-shadow: 0 0 6px rgba(255,159,46,.5); }
.q5 { border-color: #ff4d5a !important; box-shadow: 0 0 8px rgba(255,77,90,.6); }

.eqRow { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.statLine { display: flex; justify-content: space-between; padding: 2px 4px; font-size: 13px; }
.statLine b { color: #ffd982; }
.secH { color: #9ad0ff; margin: 10px 0 5px; border-bottom: 1px solid #3a4058; padding-bottom: 3px; font-size: 13px; }

.questItem { border: 2px solid #3a4058; padding: 8px 10px; margin-bottom: 8px; }
.questItem h4 { color: #ffd982; font-size: 14px; }
.questItem .qProg { color: #8ad0ff; font-size: 12px; margin: 3px 0; }
.questItem .qDesc { color: #9aa0b8; font-size: 12px; }
.questItem.done { border-color: #6ecb63; opacity: .75; }

#tradePanel { width: 640px; max-width: 94vw; }
#tradeBody { display: flex; flex-wrap: wrap; gap: 16px; min-width: 0; }
.tradeCol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.tradeList { flex: 1 1 auto; min-height: 220px; overflow-y: auto; }
.tradeItem, .learnItem, .recipeItem { display: flex; align-items: center; gap: 8px; border: 2px solid #3a4058; padding: 5px 8px; margin-bottom: 5px; font-size: 13px; }
.tradeItem .grow, .learnItem .grow, .recipeItem .grow { flex: 1; }
.price { color: #ffd982; }

.menuRow { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; gap: 10px; }
input[type=range] { width: 140px; }

/* ---------- 标题 / 死亡 ---------- */
#titleScreen { position: fixed; inset: 0; z-index: 50; background: radial-gradient(ellipse at 50% 30%, #2a3160 0%, #141830 55%, #0b0e1a 100%); display: flex; align-items: center; justify-content: center; }
#titleInner { text-align: center; padding: 40px 60px; min-width: 480px; }
#titleInner h1 { font-size: 46px; letter-spacing: 12px; color: #ffd982; text-shadow: 3px 3px 0 #7a4ad0, 6px 6px 0 rgba(0,0,0,.5); margin-bottom: 6px; }
#titleInner .sub { color: #8ad0ff; letter-spacing: 4px; font-size: 13px; margin-bottom: 26px; }
#titleBtns { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; }
#titleHelp { color: #7a80a0; font-size: 12px; line-height: 2; }
#titleScreen .diffRow { display: flex; gap: 6px; justify-content: center; }
#titleScreen .btn.sel { background: #4a5a90; color: #fff; }

#deathScreen { position: fixed; inset: 0; z-index: 55; background: rgba(10,5,10,.86); display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ---------- 职业介绍专属界面 ---------- */
#classIntro { position: fixed; inset: 0; z-index: 52; background: rgba(8,10,20,.74); display: flex; align-items: center; justify-content: center; }
#classIntroInner { width: 660px; max-width: 94vw; max-height: 90vh; overflow-y: auto; background: #141826; border: 3px solid #6a708a; border-radius: 10px; padding: 16px 20px 14px; box-shadow: 0 12px 48px rgba(0,0,0,.65); }
#classIntroInner::-webkit-scrollbar { width: 10px; } #classIntroInner::-webkit-scrollbar-thumb { background: #4a5068; }
#classIntroTitle { color: #ffd982; font-size: 21px; letter-spacing: 3px; text-align: center; margin-bottom: 10px; text-shadow: 2px 2px 0 rgba(0,0,0,.5); }
#classIntroTabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
#classIntroTabs .btn.sel { background: #4a5a90; color: #fff; }
#classIntroBody { color: #d8dcf0; font-size: 13px; line-height: 1.7; }
.ciSec { margin: 12px 0 5px; color: #8ad0ff; font-size: 14px; letter-spacing: 1px; border-left: 3px solid #8ad0ff; padding-left: 8px; }
.ciAdv { margin: 2px 0 2px 14px; color: #b8c0e0; font-size: 12.5px; }
.ciAdv b { color: #ffe9b0; }
#ciDemo { display: block; margin: 6px auto 2px; background: #10141f; border: 2px solid #3a4058; border-radius: 6px; }
.ciChips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px 8px; }
.ciChip { background: #10141f; border: 1px solid #3a4058; border-radius: 4px; padding: 2px 8px; font-size: 12px; color: #9aa0b8; }
.ciChip b { color: #ffd982; margin-left: 3px; }
.ciTable { width: 100%; border-collapse: collapse; margin: 6px 0 2px; font-size: 12px; }
.ciTable th, .ciTable td { border: 1px solid #2a3048; padding: 3px 6px; text-align: center; }
.ciTable th { color: #8ad0ff; background: #10141f; font-weight: normal; }
.ciTable td:first-child { color: #8a90a8; text-align: right; }
.ciTable .cur { background: rgba(255,210,74,.14); color: #ffe9b0; }
#classIntroBtns { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
#classIntroBtns .btn { min-width: 130px; }
#deathScreen h2 { font-size: 34px; color: #ff6a7a; letter-spacing: 8px; margin-bottom: 12px; text-shadow: 2px 2px 0 #40000a; }
#deathInfo { color: #c0a0a8; margin-bottom: 20px; }

#loading { position: fixed; inset: 0; z-index: 60; background: #0b0e1a; display: flex; align-items: center; justify-content: center; color: #ffd982; font-size: 18px; letter-spacing: 4px; }

/* ---------- 数量选择器（买/卖/丢弃） ---------- */
#qtyPicker { position: fixed; inset: 0; z-index: 30; background: rgba(8,10,20,.6); display: flex; align-items: center; justify-content: center; }
#qtyBox { width: 320px; max-width: 90vw; background: #1a2032; border: 2px solid #5a6284; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; }
#qtyInfo { font-size: 14px; color: #cdd3ee; text-align: center; }
.qtyRow { display: flex; gap: 8px; align-items: center; justify-content: center; }
#qtyRange { flex: 1; accent-color: #7a6cff; }
#qtyNum { width: 84px; background: #10141f; border: 2px solid #4a5068; color: #ffd982; font-size: 15px; padding: 4px 8px; font-family: inherit; text-align: center; }

/* ---------- 背包分类标签 ---------- */
.invTabs { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.invTabs .btn.sel { border-color: #ffd24a; color: #ffd24a; background: rgba(255,210,74,.08); }

/* ---------- 传送锚点靠近提示横幅 ---------- */
#wpBanner { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 12;
  background: linear-gradient(90deg, rgba(28,40,72,.92), rgba(46,34,88,.92), rgba(28,40,72,.92));
  border: 2px solid #6ae8ff; border-radius: 8px; padding: 7px 22px; color: #c8f4ff; font-size: 14px;
  letter-spacing: 1px; box-shadow: 0 0 16px rgba(106,232,255,.4); pointer-events: none; animation: wpPulse 1.6s ease-in-out infinite; }
@keyframes wpPulse { 0%, 100% { box-shadow: 0 0 10px rgba(106,232,255,.3); } 50% { box-shadow: 0 0 22px rgba(106,232,255,.65); } }

/* ---------- 图鉴系统 ---------- */
.galleryTabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
#gallerySearch { width: 100%; box-sizing: border-box; background: #10141f; border: 2px solid #4a5068; color: #ffe9b0;
  font-family: inherit; font-size: 13px; padding: 6px 10px; margin-bottom: 8px; outline: none; }
#gallerySearch:focus { border-color: #ffd24a; }
#galleryList .learnItem { align-items: flex-start; }
#galleryList .learnItem canvas { flex: none; margin-top: 2px; }

/* ---------- 系统商城 ---------- */
.shopItem { display: flex; align-items: center; gap: 12px; border: 2px solid #3a4058; background: rgba(16,19,31,.5); padding: 10px 12px; margin-bottom: 8px; }
.shopItem .grow { flex: 1; line-height: 1.7; min-width: 0; }
.shopItem .price { color: #ffd982; }
.shopItem button:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- 键位设置（仅电脑版） ---------- */
.keyRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 2px solid #3a4058; background: rgba(16,19,31,.5); padding: 5px 10px; margin-bottom: 5px; font-size: 13px; }
.keyRow .keyName { color: #ffd982; min-width: 72px; text-align: center; background: #10141f; border: 1px solid #4a5068; padding: 2px 8px; font-weight: normal; }

/* ---------- 每日签到 ---------- */
.checkinGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ckDay { border: 2px solid #3a4058; background: rgba(16,19,31,.5); padding: 8px 4px; text-align: center; position: relative; }
.ckDay .ckDayN { color: #8ad0ff; font-size: 12px; margin-bottom: 4px; }
.ckDay .ckRw { color: #ffd982; font-size: 12px; line-height: 1.6; }
.ckDay.today { border-color: #ffd24a; box-shadow: 0 0 10px rgba(255,210,74,.35); }
.ckDay.got { border-color: #6ecb63; opacity: .85; }
.ckDay.past { opacity: .4; }
.ckDay .ckTag { position: absolute; right: 5px; top: 1px; color: #7aff9a; font-size: 15px; }

/* ---------- 触屏控件（手机/平板） ---------- */
#touchUI { position: fixed; inset: 0; pointer-events: none; z-index: 14; }
#joyBase, #aimBase { position: absolute; width: 104px; height: 104px; border-radius: 50%;
  background: rgba(20,24,40,.42); border: 2px solid rgba(140,150,190,.55); touch-action: none; pointer-events: auto; }
#joyBase { left: 24px; bottom: 34px; }
#aimBase { right: 26px; bottom: 36px; border-color: rgba(220,150,120,.6); }
#joyKnob, #aimKnob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(150,160,210,.55); border: 2px solid rgba(190,200,240,.8); }
#aimKnob { background: rgba(230,150,120,.5); border-color: rgba(255,190,160,.85); }
/* 技能/闪避：围绕右侧瞄准摇杆的弧形排布 */
.tbtn { width: 58px; height: 58px; border-radius: 12px; background: rgba(28,34,58,.74); color: #ffd982;
  border: 2px solid #7a80a0; font-size: 17px; font-family: inherit; touch-action: none; -webkit-user-select: none; user-select: none;
  pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.tbtn:active { background: #3c4570; }
.tbtn.sk { position: absolute; width: 50px; height: 50px; border-radius: 50%; font-size: 16px; }
.tbtn[data-act="dodge"] { right: 146px; bottom: 20px; }
.tbtn[data-act="s1"] { right: 174px; bottom: 88px; }
.tbtn[data-act="s2"] { right: 146px; bottom: 156px; }
.tbtn[data-act="s3"] { right: 78px; bottom: 184px; }
.tbtn[data-act="s4"] { right: 14px; bottom: 156px; }
/* 左右侧边功能键区：所有非战斗功能键统一排布（原独立地图键/菜单键/顶部面板键已整合）。
   双列 .scol 竖排、底端对齐（贴近拇指），列随可用高度向上生长；按键 ≥48x48 适配不同屏幕 */
#sideLeft, #sideRight { position: absolute; display: flex; align-items: flex-end; gap: 6px; pointer-events: auto; }
#sideLeft { left: 8px; top: 184px; bottom: 146px; }
#sideRight { right: 8px; top: 204px; bottom: 246px; }
.scol { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; }
.tbtn.mini { width: 48px; height: 48px; font-size: 14px; border-radius: 10px; }
@media (max-width: 760px) {
  #keyHints { display: none; }
  #statPanel { transform: scale(.85); transform-origin: top left; }
  #mapPanelHud { transform: scale(.85); transform-origin: top right; }
  #curWrap { transform: scale(.85); transform-origin: top right; }
  #hotbar { transform: scale(.9); transform-origin: bottom center; }
  /* 小屏：状态面板/小地图缩小后，侧边键区可上移扩大可用空间 */
  #sideLeft { top: 152px; }
  #sideRight { top: 176px; }
}
@media (max-height: 620px) {
  /* 矮屏（横持）：左键区再上收，避开摇杆区即可，列自动向上生长 */
  #sideLeft { top: 148px; bottom: 142px; }
  #sideRight { bottom: 242px; }
}