@font-face{
  font-family:'TW Rajdhani';
  src:url('fonts/Rajdhani-SemiBold.woff2') format('woff2'),url('fonts/Rajdhani-SemiBold.ttf') format('truetype');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
:root{
  --bg-void: #0c0c0e;
  --panel-bg: #1c1c20;
  --panel-bg-deep: #141416;
  --panel-border: #3a4555;
  --header-bg: linear-gradient(180deg, #2a3545 0%, #1a2535 50%, #121820 100%);
  --header-text: #f0f2f4;
  --accent: #3a6a8a;
  --accent-bright: #5ab0d0;
  --highlight: #2a4050;
  --gold: #d0c070;
  --blood: #d05050;
  --mana: #50a0d0;
  --moss: #40b070;
  --moss-bright: #60e090;
  --text-main: #f2f4f6;
  --text-dim: #e8ecf0;
  --text-on-dark: #e0e4e8;
  --bar-hp: #c04040;
  --bar-mp: #4080c0;
  --bar-xp: #d0a030;
  --hover: #243040;
  --row-alt: #181c20;
  --row-sel: #2a3a4a;
  --input-bg: #0a0c0e;
  --scroll-track: #12161a;
  --scroll-thumb: #3a4555;
  --scroll-thumb-hover: #5a6a7a;
  --btn-bg: linear-gradient(180deg, #2a3540, #1a222c);
  /* Rajdhani 負責英數；繁中使用 Windows 內建且具小字 hinting 的 UI 黑體。 */
  --ui:'TW Rajdhani','Microsoft JhengHei UI','Microsoft JhengHei',sans-serif;
  --numeric:'TW Rajdhani','Microsoft JhengHei UI','Microsoft JhengHei',sans-serif;
  --mono:var(--numeric);
  --serif:'Microsoft JhengHei UI','Microsoft JhengHei',sans-serif;
}
html[data-client-font="modern"]{
  --ui:'TW Rajdhani','Microsoft JhengHei UI','Microsoft JhengHei',system-ui,sans-serif;
  --numeric:'TW Rajdhani','Microsoft JhengHei UI',system-ui,sans-serif;
  --mono:var(--numeric);
  --serif:var(--ui);
}
*{box-sizing:border-box;}
/* 靜態字型檔不可宣告成可變粗細，否則 Chromium 在非整數縮放下會以錯誤
   的字重插值，產生發虛／鋸齒邊。文字維持原生 ClearType 排版與正常 kerning。 */
html{
  /* 交由 Chromium/DirectWrite 依螢幕 DPI 做小字 hinting；
     optimizeLegibility 在部分 Windows 縮放比例會讓小字輪廓偏軟。 */
  text-rendering:auto;
  font-kerning:normal;
  font-synthesis:none;
  -webkit-font-smoothing:auto;
}

/* 自訂捲軸（灰藍） */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 4px;
  border: 1px solid var(--panel-border);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}
*::-webkit-scrollbar-corner {
  background: var(--scroll-track);
}


html,body{
  margin:0;padding:0;height:100%;
  background:var(--bg-void);
  color:var(--text-main);
  font-family:var(--mono);
  overflow:hidden;
  user-select:none;
}
#app{
  display:flex;
  flex-direction:column;
  height:100vh;
  width:100vw;
  padding:10px;
  gap:8px;
}
#topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(180deg,#161b22,#0c1016);
  border:1px solid var(--panel-border);
  border-radius:3px;
  padding:8px 14px;
  font-size:12px;
  letter-spacing:0.5px;
  flex-shrink:0;
}
#topbar .title{
  font-family:var(--serif);
  font-size:16px;
  color:var(--gold);
  letter-spacing:1px;
}
#topbar .status{
  display:flex;gap:16px;align-items:center;
  color:var(--text-dim);
}
#topbar .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#6a9;margin-right:4px;
}
.btn-small{
  background:#1a222c;border:1px solid var(--panel-border);
  color:var(--moss-bright);padding:3px 10px;font-size:11px;
  cursor:pointer;border-radius:2px;font-family:var(--mono);
}
.btn-small:hover{background:#243040;}
.btn-small.on{background:#2a3a4a;color:#a8c0d8;border-color:#4a6a80;}

#main{
  flex:1;display:flex;gap:8px;min-height:0;
}
.panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:3px;
  padding:12px;
  overflow-y:auto;
  font-size:12px;
}
#leftpanel{width:220px;flex-shrink:0;}
#rightpanel{width:240px;flex-shrink:0;}
#mapwrap{
  flex:1;position:relative;
  background:#0c100c;
  border:1px solid var(--panel-border);
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#maplabel{
  position:absolute;top:6px;left:10px;
  font-size:11px;color:var(--gold);opacity:0.85;z-index:5;
  pointer-events:none;
}
#gamecanvas{display:block;cursor:crosshair;}
#dmgLayer{
  position:absolute;left:0;top:0;pointer-events:none;z-index:10;
}
#pathLine{
  position:absolute;left:0;top:0;pointer-events:none;z-index:4;
  width:100%;height:100%;
}

h3{
  margin:0 0 8px;font-size:12px;color:var(--gold);
  letter-spacing:1px;font-weight:normal;
  border-bottom:1px solid var(--panel-border);padding-bottom:4px;
}
.stat-row{margin-bottom:8px;}
.stat-label{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--text-dim);margin-bottom:2px;
}
.bar-bg{
  height:8px;background:#1a222c;border-radius:2px;overflow:hidden;
}
.bar-fill{height:100%;transition:width 0.2s;}
.hp-fill{background:linear-gradient(90deg,#8b3030,#c05040);}
.mp-fill{background:linear-gradient(90deg,#2a5a7a,#4a8aba);}
.xp-fill{background:linear-gradient(90deg,#6a5a20,#c0a040);}

.kv{
  display:flex;justify-content:space-between;align-items:center;
  padding:3px 0;font-size:11px;color:var(--text-dim);
}
.kv b{color:var(--text-main);font-weight:normal;}
.btn-up{
  background:#3a5a28;border:1px solid #5a8a40;color:#c0e090;
  padding:1px 8px;font-size:11px;cursor:pointer;border-radius:2px;
  margin-left:6px;animation:pulse 1.2s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}50%{opacity:0.65;}
}

.attr-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 0;font-size:11px;
}
.attr-row span{color:var(--text-dim);width:70px;}
.attr-row b{color:var(--moss-bright);width:28px;text-align:right;}
.btn-plus{
  background:#1a2818;border:1px solid #3a5a30;color:#8fb56f;
  width:22px;height:18px;font-size:12px;cursor:pointer;border-radius:2px;
  line-height:1;padding:0;
}
.btn-plus:hover{background:var(--hover);}
.btn-plus:disabled{opacity:0.3;cursor:default;}

#nearbyList,#playerlist{
  list-style:none;margin:0;padding:0;font-size:11px;
}
#nearbyList li,#playerlist li{
  padding:4px 6px;margin-bottom:2px;
  background:#161b22;border-radius:2px;
  cursor:pointer;display:flex;justify-content:space-between;
  color:var(--text-dim);
}
#nearbyList li:hover,#playerlist li:hover,#nearbyList li.is-hover,#playerlist li.is-hover{
  background:var(--hover);color:var(--text-main);
}
#nearbyList li.self{border-left:2px solid var(--gold);}
#nearbyList li.monster{border-left:2px solid var(--blood);}
#nearbyList li.other{border-left:2px solid var(--mana);}

#logbox{
  height:160px;overflow-y:auto;font-size:11px;
  background:#0c100c;border:1px solid #1a222c;
  padding:6px;border-radius:2px;
  color:var(--text-dim);line-height:1.45;
}
#logbox .combat{color:#c09070;}
#logbox .system{color:#8fb56f;}

#bottombar{
  display:flex;align-items:center;gap:12px;
  background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:3px;padding:8px 14px;flex-shrink:0;
  font-size:12px;
}
.skill{
  position:relative;width:42px;height:42px;
  background:#1a222c;border:1px solid var(--panel-border);
  border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.skill .key{
  position:absolute;bottom:1px;right:3px;
  font-size:9px;color:var(--text-dim);
}
#hint{color:var(--text-dim);font-size:11px;margin-left:8px;}

/* 登入 / 角色選擇 */
#loginModal,#charModal,#serverModal{
  position:fixed;inset:0;background:rgba(5,8,5,0.92);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
#serverModal { z-index:105; background:rgba(0,0,0,.32); }
#serverBox {
  position:relative; box-sizing:border-box; width:418px; min-width:418px; max-width:418px; height:316px; min-height:316px; max-height:316px; padding:0;
  color:#f5f2ff; border:0; border-radius:0; overflow:hidden;
  background:transparent url('/ui/server-select-panel.png') 0 0/418px 316px no-repeat;
  box-shadow:none; image-rendering:crisp-edges; image-rendering:pixelated;
}
#serverBox h2 { position:absolute; left:26px; top:8px; z-index:2; width:371px; height:21px; margin:0; overflow:hidden; color:#eee9dd; font:700 13px/21px var(--ui); text-align:left; text-overflow:ellipsis; white-space:nowrap; text-shadow:1px 1px 1px #000,-1px -1px 1px #000; }
.server-list { position:absolute; left:8px; top:29px; z-index:2; box-sizing:border-box; width:400px; height:224px; padding:0 11px 0 3px; overflow-y:auto; overflow-x:hidden; border:0; background:transparent; }
.server-row { width:100%; min-height:25px; height:25px; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:0; box-sizing:border-box; margin:0; padding:0 9px 0 15px; overflow:hidden; color:#eee9d4; border:0; border-radius:0; outline:0; background:transparent; box-shadow:none; text-align:left; }
.server-row:hover,.server-row.selected { color:#fff75d; border:0; background:rgba(1,0,5,.77); box-shadow:none; }
.server-row:disabled { opacity:.6; filter:grayscale(.25); }
.server-state-dot { display:none; }
.server-name-copy { min-width:0; display:block; overflow:hidden; }
.server-name-copy b { display:block; overflow:hidden; color:inherit; font:700 13px/25px var(--ui); text-overflow:ellipsis; white-space:nowrap; text-shadow:1px 1px 1px #000; }
.server-name-copy small { display:none; }
.server-population { display:none !important; }
.server-select-msg { position:absolute; left:9px; top:259px; z-index:2; box-sizing:border-box; width:399px; height:17px; margin:0; padding:0 7px; overflow:hidden; color:#fff; font:13px/17px var(--ui); text-align:left; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 0 #000,0 0 2px #000; }
.server-select-actions { position:absolute; left:0; bottom:7px; z-index:3; width:418px; height:25px; display:flex; justify-content:center; gap:48px; }
.server-select-actions button,.server-select-actions button.btn-primary { min-width:92px; width:92px; height:25px; margin:0; padding:0; color:#eee; border:1px solid #342f29; border-radius:4px; background:linear-gradient(180deg,#817c72 0,#5b5852 47%,#363635 52%,#4d4b48 100%); box-shadow:inset 0 0 0 1px #aaa59b,0 1px 1px #0008; font:700 13px/22px var(--ui); text-shadow:1px 1px 1px #000; }
.server-select-actions button:hover,.server-select-actions button.btn-primary:hover { color:#fff76a; border-color:#28241e; background:linear-gradient(180deg,#999386,#69655d 47%,#44413f 52%,#5c5954 100%); }
.server-select-actions button:active,.server-select-actions button.btn-primary:active { padding-top:1px; background:linear-gradient(180deg,#3e3d3a,#65615a); }
/* 網頁開啟時由全黑淡入 */
#pageBlackout{
  position:fixed; inset:0; z-index:99999;
  background:#000;
  pointer-events:none;
  opacity:1;
  transition:opacity 1.65s cubic-bezier(0.33, 0.0, 0.2, 1);
  display:block;
  will-change:opacity;
}
#pageBlackout.is-faded{
  opacity:0;
}
#playerBroadcast {
  position:fixed; z-index:25000; left:50%; top:74px; max-width:calc(100vw - 48px);
  transform:translate(-50%,-8px); opacity:0; pointer-events:none;
  padding:7px 16px; background:rgba(0,0,0,.78); border:1px solid rgba(255,255,255,.34);
  font-size:16px; font-weight:700; line-height:1.35; text-align:center; white-space:pre-wrap;
  text-shadow:0 1px 2px #000, 0 0 5px #000; transition:opacity .18s ease, transform .18s ease;
}
#playerBroadcast.show { opacity:1; transform:translate(-50%,0); }
#playerBroadcast.show.has-player-link { pointer-events:auto; }
.broadcast-player-link {
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  cursor:pointer;
  user-select:text;
}
.broadcast-player-link:focus-visible { outline:1px solid currentColor; outline-offset:2px; }

#noticeModal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.34); z-index:110;
  opacity:0;
  transition:opacity 1.35s cubic-bezier(0.33, 0.0, 0.2, 1);
  pointer-events:none;
}
#noticeModal.is-visible{
  opacity:1;
  pointer-events:auto;
}
#noticeModal.is-hiding{
  opacity:0;
  pointer-events:none;
}
/* 公告與規章：將附圖透明框等比放大 1.1 倍。 */
#noticeBox{
  position:relative;
  width:524px;
  height:420px;
  box-sizing:border-box;
  padding:0;
  border:none;
  border-radius:0;
  background:url('/ui/notice-frame.png') center top / 524px 420px no-repeat;
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  overflow:hidden;
  opacity:0;
  transform:translateY(10px) scale(0.98);
  transition:opacity 1.25s cubic-bezier(0.33, 0.0, 0.2, 1), transform 1.25s cubic-bezier(0.33, 0.0, 0.2, 1);
}
#noticeModal.is-visible #noticeBox{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* 文字固定在上方深色內容區，底部窄框保留給狀態。 */
#noticeBox .notice-inner{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  padding:0;
  overflow:hidden;
}
#noticeBox h2{
  display:none;
}
#noticeBox .notice-content{
  position:absolute;
  left:20px;
  top:34px;
  box-sizing:border-box;
  width:495px;
  height:300px;
  margin:0;
  padding:0 20px 0 0;
  overflow:auto;
  white-space:pre-wrap;
  line-height:1.6;
  color:#ffffff;
  font-size:15px;
  text-shadow:0 1px 0 #000, 0 0 2px #000;
}
#noticeBox .notice-content{ scrollbar-width:thin; scrollbar-color:#8f8b50 transparent; }
#noticeBox .notice-content::-webkit-scrollbar{ width:9px; }
#noticeBox .notice-content::-webkit-scrollbar-track{ background:transparent; border:0; }
#noticeBox .notice-content::-webkit-scrollbar-thumb{ background:linear-gradient(90deg,#5b582f,#a19d5b 48%,#666236); border:1px solid #c2bd78; border-radius:2px; }
#noticeBox .notice-content::-webkit-scrollbar-thumb:hover{ background:linear-gradient(90deg,#6b6838,#b5b069 48%,#777342); }
#noticeBox #initNoticeMsg{
  position:absolute;
  left:13px;
  top:361px;
  box-sizing:border-box;
  width:498px;
  height:17px;
  margin:0;
  padding:0 4px;
  overflow:hidden;
  font-size:12px;
  line-height:17px;
  color:#ffffff;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 0 #000, 0 0 2px #000;
}
/* 按鈕置於公告 UI 最下方淺色欄。 */
#noticeBox .notice-actions{
  position:absolute;
  left:0;
  right:0;
  bottom:9px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:48px;
  margin:0;
  padding:0;
  pointer-events:none;
}
#noticeBox .notice-btn{
  pointer-events:auto;
  display:inline-block;
  margin:0 !important;
  padding:0 !important;
  width:92px !important;
  min-width:92px !important;
  height:25px !important;
  border:1px solid #342f29 !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,#817c72 0,#5b5852 47%,#363635 52%,#4d4b48 100%) !important;
  cursor:pointer;
  flex:0 0 auto;
  color:#eee !important;
  font:700 13px/22px var(--ui) !important;
  text-shadow:1px 1px 1px #000 !important;
  box-shadow:inset 0 0 0 1px #aaa59b,0 1px 1px #0008 !important;
  filter:none !important;
}
#noticeBox .notice-btn:disabled{
  opacity:.45 !important;
  cursor:not-allowed;
  filter:grayscale(.2) brightness(.85) !important;
}
#noticeBox .notice-btn:hover:not(:disabled):not(:active){ color:#fff76a !important; border-color:#28241e !important; background:linear-gradient(180deg,#999386,#69655d 47%,#44413f 52%,#5c5954 100%) !important; }
#noticeBox .notice-btn:active:not(:disabled){ padding-top:1px !important; background:linear-gradient(180deg,#3e3d3a,#65615a) !important; }
.btn-secondary{ padding:10px; margin-top:8px; border:1px solid #5b5365; border-radius:3px; background:#29282e; color:#d0d4d8; font-family:var(--mono); cursor:pointer; }
#loginBox,#charBox{
  background:linear-gradient(180deg,#161b22,#0e120c);
  border:1px solid var(--panel-border);
  border-radius:6px;padding:28px 32px;width:360px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
#loginBox h2,#charBox h2{
  margin:0 0 4px;font-family:var(--serif);
  color:var(--gold);font-size:20px;letter-spacing:1px;
  font-weight:normal;
}
.sub{font-size:12px;color:var(--text-dim);margin:0 0 18px;}
.form-row{margin-bottom:12px;}
.form-row label{
  display:block;font-size:11px;color:var(--text-dim);margin-bottom:4px;
}
.form-row input{
  width:100%;padding:8px 10px;background:#0c100c;
  border:1px solid var(--panel-border);border-radius:3px;
  color:var(--text-main);font-family:var(--mono);font-size:13px;
}
.form-row input:focus{outline:none;border-color:var(--moss);}
.btn-primary{
  width:100%;padding:10px;margin-top:8px;
  background:linear-gradient(180deg,#3a5a28,#2a4020);
  border:1px solid #5a8a40;color:#d0e8b0;
  font-family:var(--mono);font-size:13px;cursor:pointer;
  border-radius:3px;letter-spacing:1px;
}
.btn-primary:hover{background:linear-gradient(180deg,#4a6a30,#3a5028);}
.msg{font-size:12px;margin:10px 0 0;min-height:18px;color:var(--moss-bright);}
.msg.err{color:#c06050;}

.job-card{
  background:#1a222c;border:1px solid var(--panel-border);
  border-radius:4px;padding:12px;margin-bottom:12px;
}
.job-card.selected{border-color:var(--gold);}
.job-name{color:var(--gold);font-size:14px;margin-bottom:4px;}
.job-desc{font-size:11px;color:var(--text-dim);}
#charList{margin:8px 0;}
.char-item{
  padding:8px 10px;background:#161b22;border:1px solid var(--hover);
  border-radius:3px;margin-bottom:6px;cursor:pointer;
  display:flex;justify-content:space-between;font-size:12px;
}
.char-item:hover{border-color:var(--moss);background:#1a222c;}
.char-item .lv{color:var(--text-dim);}

.dmg-float{
  position:absolute;font-family:"Arial Black",Impact,sans-serif;font-size:31px;font-weight:900;letter-spacing:-1px;
  pointer-events:none;animation:dmgArc 1.9s linear forwards;
  color:#fff09a !important;-webkit-text-stroke:1px #8c1709;
  text-shadow:0 1px 0 #fffbd2,0 3px 0 #ffb529,0 4px 0 #e66b12,2px 5px 0 #9f190b,3px 6px 0 #5e100b,5px 8px 0 #e57bb0;
  will-change:transform,opacity;
}
.dmg-float .dmg-number{position:relative;z-index:1;display:block;color:inherit;}
.dmg-float.dmg-critical{font-size:37px;color:#fff8bb !important;-webkit-text-stroke:2px #931806;text-shadow:0 1px 0 #fffde4,0 3px 0 #ffd33d,0 5px 0 #e56a10,3px 7px 0 #97150a,5px 9px 0 #5e100b,7px 11px 0 #e57bb0;}
.dmg-critical-badge{position:absolute;z-index:0;pointer-events:none;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-53%) rotate(-5deg);object-fit:contain;opacity:.98;filter:drop-shadow(2px 3px 0 #752200);}
.dmg-float.dmg-miss{font-size:0;letter-spacing:0;color:transparent !important;-webkit-text-stroke:0;text-shadow:none;}
.dmg-miss-image{display:block;width:46px;height:20px;object-fit:none;image-rendering:pixelated;}
/* counttxt / counttxt2 的上方像素字型：橘色為對怪傷害、紅色為角色受擊。 */
.dmg-float.dmg-sprite,.dmg-float.dmg-sprite.dmg-critical{
  font-size:0 !important;
  letter-spacing:0;
  color:transparent !important;
  -webkit-text-stroke:0;
  text-shadow:none;
}
/* 覆蓋舊 .dmg-float .dmg-number 的 block 規則，數字必須由左至右排列。 */
.dmg-float .dmg-sprite-number{position:relative;z-index:1;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-end;height:38px;padding-top:3px;overflow:visible;white-space:nowrap;transform:scale(1.3);transform-origin:center bottom;}
.dmg-sprite-digit{
  display:block;
  flex:0 0 25px;
  width:25px;
  height:32px;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  /* 原圖每格是 25px，但字本體約 16px；負間距讓數字幾乎貼齊。 */
  margin-right:-9px;
}
.dmg-sprite-digit:last-child{margin-right:0;}
@keyframes dmgArc{
  0%{opacity:0;transform:translate(0,0) scale(.18);}
  10%{opacity:1;transform:translate(0,-5px) scale(1.42);}
  20%{opacity:1;transform:translate(calc(var(--arc-mid-x,0) * .18),-14px) scale(1.04);}
  42%{opacity:1;transform:translate(var(--arc-mid-x,0),var(--arc-peak,-52px)) scale(1.04);}
  100%{opacity:0;transform:translate(var(--arc-x,0),var(--arc-end,78px)) scale(.9);}
}

/* ===== 中央欄：地圖 + 對話 ===== */
#centercol{
  flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;
}
#mapwrap{flex:1;min-height:120px;}
#chatpanel{
  flex-shrink:0;height:150px;
  background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:3px;display:flex;flex-direction:column;padding:6px 8px;
}
#chatToolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;flex-shrink:0;
}
.chat-title{font-size:11px;color:var(--gold);letter-spacing:1px;}
#logbox{
  flex:1;overflow-y:auto;font-size:11px;
  background:#0c100c;border:1px solid #1a222c;
  padding:6px;border-radius:2px;
  color:var(--text-dim);line-height:1.45;min-height:0;
}
#logbox .combat{color:#c09070;}
#logbox .system{color:#8fb56f;}
#logbox .chat{color:#a0c0e0;}
#chatInputRow{
  display:flex;gap:6px;margin-top:4px;flex-shrink:0;
}
#chatInput{
  flex:1;padding:5px 8px;background:#0c100c;
  border:1px solid var(--panel-border);border-radius:2px;
  color:var(--text-main);font-family:var(--mono);font-size:12px;
}
#chatInput:focus{outline:none;border-color:var(--moss);}

/* 附近單位攻擊按鈕 */
.nearby-atk{
  background:#4a2820;border:1px solid #8a4030;color:#e0a090;
  font-size:10px;padding:1px 6px;border-radius:2px;cursor:pointer;
  margin-left:4px;font-family:var(--mono);
}
.nearby-atk:hover{background:#6a3830;}
#nearbyList li{
  flex-wrap:wrap;gap:4px;
}

/* ===== 頂部頁籤 ===== */
#tabBar{
  display:flex;gap:4px;margin:0 12px;
}
.tab-btn{
  background:#1a222c;border:1px solid var(--panel-border);
  color:var(--text-dim);padding:4px 14px;font-size:12px;
  cursor:pointer;border-radius:3px;font-family:var(--mono);
  letter-spacing:1px;
}
.tab-btn:hover{color:var(--text-main);border-color:var(--moss);}
.tab-btn.active{
  background:var(--hover);color:var(--gold);border-color:var(--gold);
}

.tab-pane{display:none;}
.tab-pane.active{display:block;}

.dim-hint{font-size:11px;color:var(--text-dim);line-height:1.5;margin:8px 0;}

.bag-grid{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:5px;
  max-height:420px;
  overflow-y:auto;
  padding-right:6px;
}
.bag-slot{
  aspect-ratio:1;
  background:#121820;
  border:1px solid #3a4555;
  border-radius:3px;
  min-height:36px;
}
.bag-slot.empty{opacity:0.5;}

/* 加大對話框 */
#chatpanel{
  height:220px !important;
  min-height:180px;
}

/* 附近單位固定高度 + 捲軸 */
#rightpanel{
  display:flex;flex-direction:column;
  width:250px;
}
#nearbyScroll{
  flex:1 1 50%;
  min-height:0;
  max-height:none;
  overflow-y:auto;
  border:1px solid #1a222c;
  border-radius:2px;
  background:#0c100c;
  padding:4px;
}
#playerScroll{
  flex:1 1 50%;
  min-height:0;
  overflow-y:auto;
  border:1px solid #1a222c;
  border-radius:2px;
  background:#0c100c;
  padding:4px;
  margin-top:4px;
}
#rightpanel h3.subhead{
  margin-top:10px;flex-shrink:0;
}
#nearbyList,#playerlist{margin:0;padding:0;}

/* 隱藏底部技能列（若殘留） */
#bottombar{display:none !important;}

/* ===== 整頁視圖切換 ===== */
#viewRoot{
  flex:1;min-height:0;display:flex;flex-direction:column;
}
.view-page{
  display:none;flex:1;min-height:0;flex-direction:column;
}
.view-page.active{
  display:flex;
}
.view-body{
  flex:1;min-height:0;display:flex;gap:8px;padding:0;
}
.view-body.three-col{
  flex-direction:row;
}
.view-body.basic-row{
  flex-direction:row;overflow-x:auto;
}
.view-body.chat-only{
  flex-direction:column;
}

.side-panel{
  width:210px;flex-shrink:0;
  background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:3px;padding:12px;overflow-y:auto;
}
.side-panel.right{width:240px;}
.half-panel{
  flex:1;min-width:220px;
  background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:3px;padding:14px;overflow-y:auto;
}
.extra-panel{max-width:320px;}

.map-col{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;
}
.mapwrap{
  flex:1;position:relative;min-height:120px;
  background:#0c100c;border:1px solid var(--panel-border);
  border-radius:3px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.maplabel{
  position:absolute;top:6px;left:10px;z-index:5;
  font-size:11px;color:var(--gold);opacity:0.85;pointer-events:none;
}
#mapImageBasic{
  position:absolute;left:0;top:0;z-index:0;display:none;
  max-width:none;max-height:none;pointer-events:none;user-select:none;
  image-rendering:auto;
}
#gamecanvas,.gamecanvas{display:block;cursor:crosshair;z-index:1;}
#dmgLayer,.dmgLayer,#dmgLayerFull{
  position:absolute;left:0;top:0;pointer-events:none;z-index:10;
}
.buff-hud{
  position:absolute; top:7px; left:50%; transform:translateX(-50%); z-index:9;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; max-width:72%;
  pointer-events:none;
}
.buff-hud-entry{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:1px; min-width:24px;
  color:#fff6b2; font:700 10px/1 var(--numeric); text-shadow:0 1px 2px #000;
  border:0; border-radius:0; background:transparent; box-shadow:none; pointer-events:auto;
}
.buff-hud-entry img{width:auto;height:auto;max-width:22px;max-height:22px;object-fit:contain;image-rendering:pixelated;}
.buff-hud-icon{display:grid;place-items:center;width:22px;height:22px;}
.buff-hud-seconds{min-width:22px;text-align:center;color:#fff6b2;line-height:10px;}
.buff-hud-fallback{display:grid;place-items:center;width:22px;height:22px;color:#fff4a4;font-size:17px;text-shadow:0 0 5px #7edfff;}
.buff-hud-name{position:absolute;top:100%;left:50%;z-index:2;max-width:190px;padding:3px 6px;overflow:hidden;color:#fff;white-space:nowrap;text-overflow:ellipsis;background:rgba(0,0,0,.72);border-radius:3px;box-shadow:0 1px 3px #000;opacity:0;transform:translate(-50%,-2px);transition:opacity .1s ease,transform .1s ease;pointer-events:none;}
.buff-hud-entry:hover .buff-hud-name,.buff-hud-entry:focus-within .buff-hud-name{opacity:1;transform:translate(-50%,2px);}
.exp-gain-layer{position:absolute;left:12px;bottom:10px;z-index:11;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:3px;max-height:172px;overflow:hidden;pointer-events:none;}
.exp-gain-toast{color:#fff;font:800 15px/1.2 var(--ui);letter-spacing:.2px;text-shadow:0 2px 2px #000,0 0 3px #000;animation:exp-gain-fade 2.8s ease-out forwards;}
@keyframes exp-gain-fade{0%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(-2px)}100%{opacity:0;transform:translateY(-10px)}}
#pathLine,.pathLine,#pathLineFull{
  position:absolute;left:0;top:0;pointer-events:none;z-index:4;
  width:100%;height:100%;
}

.chatpanel{
  background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:3px;display:flex;flex-direction:column;padding:6px 8px;
}
.chatpanel.compact{flex-shrink:0;height:160px;}
.chatpanel.fullpage{
  flex:1;height:auto;min-height:0;margin:0;
}
.chat-split{
  flex:1;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:8px;
}
.chat-stream{min-width:0;min-height:0;display:flex;flex-direction:column;}
.chat-stream .chatToolbar{min-height:20px;margin-bottom:4px;}
.chat-stream .logbox{flex:1;min-height:0;}
.social-stream .chatInputRow{margin-top:6px;}
.chatpanel.compact .chatInput{min-width:0;padding:6px 7px;font-size:12px;}
.chatpanel.compact .chatModeSelect{max-width:58px;font-size:11px;}
.chatpanel.compact .chatWhisperTarget{max-width:75px;min-width:54px;}
.chatToolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;flex-shrink:0;
}
.chat-title{font-size:12px;color:var(--gold);letter-spacing:1px;}
.message-filter-inline { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:2px 7px; margin-left:8px; color:#ddd7f2; font-size:10px; }
.message-filter-inline label { display:flex; align-items:center; gap:2px; white-space:nowrap; color:#eeeaff; user-select:none; cursor:pointer; }
.message-filter-inline input { width:12px; height:12px; margin:0; accent-color:#7866c5; }
.logbox [data-message-kind][hidden] { display:none !important; }
.logbox{
  flex:1;overflow-y:auto;font-size:12px;
  background:#0c100c;border:1px solid #1a222c;
  padding:8px;border-radius:2px;
  color:var(--text-dim);line-height:1.5;min-height:0;
}
.logbox.tall{font-size:13px;}
.logbox .combat{color:#c09070;}
.logbox .system{color:#8fb56f;}
.logbox .chat{color:#a0c0e0;}
.logbox .party{color:#dd9c1b;}
.logbox .guild{color:#50668F;}
.chatInputRow{
  display:flex;gap:6px;margin-top:6px;flex-shrink:0;
}
.chatInput{
  flex:1;padding:8px 10px;background:#0c100c;
  border:1px solid var(--panel-border);border-radius:2px;
  color:var(--text-main);font-family:var(--mono);font-size:13px;
}
.chatInput:focus{outline:none;border-color:var(--moss);}

.nearbyScroll{flex:1 1 50%;min-height:0;overflow-y:auto;}
.playerScroll{flex:1 1 50%;min-height:0;overflow-y:auto;margin-top:4px;}
.side-panel.right{display:flex;flex-direction:column;min-height:0;height:100%;}
.side-panel h3.subhead{margin-top:10px;flex-shrink:0;}

#tabBar{display:flex;gap:4px;margin:0 10px;}
.tab-btn{
  background:#1a222c;border:1px solid var(--panel-border);
  color:var(--text-dim);padding:4px 12px;font-size:12px;
  cursor:pointer;border-radius:3px;font-family:var(--mono);letter-spacing:1px;
}
.tab-btn:hover{color:var(--text-main);border-color:var(--moss);}
.tab-btn.active{background:var(--hover);color:var(--gold);border-color:var(--gold);}

.dim-hint{font-size:11px;color:var(--text-dim);line-height:1.5;margin:8px 0;}
.bag-grid{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:5px;
  max-height:420px;
  overflow-y:auto;
  padding-right:6px;
}
.bag-slot{
  aspect-ratio:1;
  background:#121820;
  border:1px solid #3a4555;
  border-radius:3px;
  min-height:36px;
}
.bag-slot.empty{opacity:0.5;}
#bottombar{display:none !important;}

/* 記住帳號 */
.remember-row{margin-top:4px;}
.chk-label{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-dim);cursor:pointer;
}
.chk-label input{width:auto;accent-color:var(--moss);}

/* 地圖全畫面 */
.view-body.map-only{padding:0;}
.mapwrap.full{
  flex:1;width:100%;height:100%;min-height:0;
  border-radius:0;border:none;background:#1a2218;
}
#mapImageFull{
  position:absolute;left:0;top:0;z-index:0;display:none;
  max-width:none;max-height:none;pointer-events:none;user-select:none;
  image-rendering:auto;will-change:transform;
}
#gamecanvasFull{display:block;cursor:crosshair;z-index:1;}

/* 可拖曳浮層 */
.float-panel{
  position:fixed;z-index:50;
  top:80px;left:80px;
  width:260px;
  background:var(--panel-bg);
  border:1px solid var(--gold);
  border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,0.55);
  display:flex;flex-direction:column;
}
.float-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 10px;background:#1a222c;
  border-bottom:1px solid var(--panel-border);
  cursor:move;user-select:none;
  color:var(--gold);font-size:13px;letter-spacing:1px;
}
.float-close{
  background:transparent;border:none;color:var(--text-dim);
  font-size:18px;cursor:pointer;line-height:1;padding:0 4px;
}
.float-close:hover{color:#e08070;}
.float-body{padding:12px;overflow-y:auto;max-height:60vh;}
.logbox .journal{color:#c9a24b;}

#floatBag{width:380px;}
.bag-slot{
  aspect-ratio:1;
  background:#121820;
  border:1px solid #3a4555;
  border-radius:3px;
  min-height:36px;
}

/* 自訂動態鼠標 */
body.custom-cursor-on, body.custom-cursor-on * {
  cursor: none !important;
}
#customCursor {
  position: fixed;
  left: 0; top: 0;
  width: 32px; height: 32px;
  pointer-events: none;
  z-index: 100001;
  image-rendering: pixelated;
  display: none;
  will-change: transform;
}
.tw-select-menu {
  position:fixed;
  z-index:100000;
  box-sizing:border-box;
  max-height:min(320px,calc(100vh - 12px));
  overflow-y:auto;
  overflow-x:hidden;
  padding:1px;
  border:1px solid var(--tw-select-popup-border,#7165ad);
  border-radius:3px;
  background:var(--tw-select-popup-bg,#17132e);
  box-shadow:0 2px 5px #0008;
  color:var(--tw-select-popup-color,#f3efff);
}
.tw-select-menu[hidden] { display:none !important; }
.tw-select-option {
  display:block;
  width:100%;
  min-height:21px;
  padding:2px 5px;
  border:0;
  border-radius:0;
  color:inherit;
  background:transparent;
  font:inherit;
  text-align:left;
  white-space:nowrap;
}
.tw-select-option:hover,.tw-select-option.selected {
  color:inherit;
  background:color-mix(in srgb,var(--tw-select-popup-border,#7165ad) 48%,var(--tw-select-popup-bg,#17132e));
}
.tw-select-option:disabled { color:#77718c; background:transparent; }
html.custom-cursor-on select,
html.custom-cursor-on option,
html.custom-cursor-on .tw-select-menu,
html.custom-cursor-on .tw-select-menu * { cursor:none !important; }
#customCursor img { width: 100%; height: 100%; display: block; }
#itemDragGhost {
  position:fixed;
  left:0;
  top:0;
  z-index:100000;
  display:block;
  max-width:none;
  max-height:none;
  pointer-events:none;
  user-select:none;
  image-rendering:pixelated;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.72));
  will-change:transform;
}
html.custom-item-dragging,
html.custom-item-dragging *,
body.custom-item-dragging,
body.custom-item-dragging * { cursor:none !important; }

#ctxMenu{
  position:fixed;z-index:100000;
  min-width:120px;
  background:#1a222c;
  border:1px solid #c9a24b;
  border-radius:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  padding:4px 0;
  display:none;
}
#ctxMenu button{
  display:block;width:100%;
  background:transparent;border:none;
  color:#d8e0d0;text-align:left;
  padding:8px 14px;font-size:13px;
  cursor:pointer;
}
#ctxMenu button:hover{background:var(--hover);color:#f0e6c8;}
#ctxMenu button.hidden{display:none;}

.tab-btn{
  background:#1a222c;
  border:1px solid var(--panel-border);
  color:var(--text-dim);
  padding:4px 12px;
  font-size:12px;
  cursor:pointer;
  border-radius:2px;
  font-family:var(--mono);
}
.tab-btn:hover{background:var(--hover);color:var(--text-main);}
.tab-btn.active{
  background:#243040;
  color:var(--accent-bright);
  border-color:var(--accent);
}
.btn-primary{
  background:#2a3a4a;
  border:1px solid var(--accent);
  color:var(--text-main);
  padding:8px 16px;
  cursor:pointer;
  border-radius:3px;
  font-family:var(--mono);
  width:100%;
}
.btn-primary:hover{background:#3a4a5a;}
.float-panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
}
.float-header{
  background:#1a222c;
  border-bottom:1px solid var(--panel-border);
  color:var(--accent-bright);
}
.bar-fill.hp-fill{background:var(--bar-hp);}
.bar-fill.mp-fill{background:var(--bar-mp);}
.bar-fill.xp-fill{background:var(--bar-xp);}
.bar-bg{background:#0e1218;border:1px solid var(--panel-border);}
.chatInput,.form-row input{
  background:var(--input-bg)!important;
  border:1px solid var(--panel-border)!important;
  color:var(--text-main)!important;
}
#ctxMenu{
  background:#141820!important;
  border:1px solid var(--panel-border)!important;
}
#ctxMenu button:hover{background:var(--hover)!important;color:var(--text-main)!important;}
#loginBox,#charBox{
  background:var(--panel-bg)!important;
  border:1px solid var(--panel-border)!important;
}
.side-panel h3,.half-panel h3{color:var(--accent-bright)!important;border-color:var(--panel-border)!important;}
#nearbyList li.self{border-left-color:var(--accent-bright)!important;}
#nearbyList li.monster{border-left-color:var(--blood)!important;}
#nearbyList li.other{border-left-color:var(--mana)!important;}
.logbox .system{color:var(--accent-bright)!important;}
.logbox .combat{color:#a08080!important;}
.logbox .chat{color:var(--text-main)!important;}
.logbox .journal{color:var(--highlight)!important;}
.maplabel{color:var(--accent-bright)!important;}
#topbar .title{color:var(--accent-bright)!important;}


/* ===== 天翼之鍊風格 UI（紫／薰衣草／柔藍） ===== */
html,body{
  background: #1a1520 !important;
  color: var(--text-main) !important;
}
#app{background:transparent;}
#topbar{
  background: var(--header-bg) !important;
  border: 2px solid #6a5a8a !important;
  border-radius: 6px !important;
  color: var(--header-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 6px rgba(0,0,0,0.35);
}
#topbar .title{color:#ffffff !important; text-shadow: 0 1px 0 rgba(255,255,255,0.4);}
#topbar .status{color:#ffffff !important;}
#topbar .dot{background:#6a90c0 !important;}

.tab-btn{
  background: linear-gradient(180deg, #f0e8f8, #c8b8e0) !important;
  border: 1px solid #7a6a9a !important;
  color: #3a3050 !important;
  border-radius: 4px !important;
}
.tab-btn:hover{background: linear-gradient(180deg, #fff8ff, #d8c8f0) !important;}
.tab-btn.active{
  background: linear-gradient(180deg, #d0c0f0, #9080c0) !important;
  color: #1a1030 !important;
  border-color: #5a4a8a !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}

.side-panel, .half-panel, .chatpanel, .panel, .float-panel{
  background: var(--panel-bg) !important;
  border: 2px solid #7a6a9a !important;
  border-radius: 6px !important;
  color: var(--text-main) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}
.side-panel h3, .half-panel h3, .chat-title, .float-header, .subhead{
  background: var(--header-bg) !important;
  color: #ffffff !important;
  border-bottom: 1px solid #6a5a8a !important;
  border-radius: 4px 4px 0 0;
  padding: 6px 10px !important;
  margin: -4px -4px 8px -4px !important;
  font-size: 13px !important;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.float-header{margin:0 !important; cursor:move;}
.float-body{background: var(--panel-bg); color: var(--text-main);}
.float-close{color:#e0e0e0 !important;}
.float-close:hover{color:#a04050 !important;}

.kv span, .stat-label, .dim-hint{color: var(--text-dim) !important;}
.kv b, #lvText, #freePtsText{color: #ffffff !important;}

.bar-bg{
  background: #c8c0d8 !important;
  border: 1px solid #8a7aaa !important;
  border-radius: 3px;
}
.bar-fill.hp-fill{background: linear-gradient(180deg,#e090a0,#b05060) !important;}
.bar-fill.mp-fill{background: linear-gradient(180deg,#80a0d0,#4060a0) !important;}
.bar-fill.xp-fill{background: linear-gradient(180deg,#90c0a0,#508060) !important;}

#nearbyList li, #playerlist li{
  color: #ffffff !important;
  border-bottom: 1px solid #3a4555;
  background: transparent;
}
#nearbyList li:nth-child(even), #playerlist li:nth-child(even){
  background: var(--row-alt);
}
#nearbyList li:hover, #playerlist li:hover{
  background: var(--row-sel) !important;
  color: #ffffff !important;
}
#nearbyList li.self{border-left: 3px solid #7a6ab0 !important;}
#nearbyList li.monster{border-left: 3px solid #b06070 !important;}
#nearbyList li.other{border-left: 3px solid #6080b0 !important;}

.logbox, #logboxMain, #logboxFull, #gameLogBox{
  background: #f0ecf6 !important;
  border: 1px solid #a090c0 !important;
  color: #3a4060 !important;
}
.logbox .system{color: #4a6090 !important;}
.logbox .combat{color: #a05060 !important;}
.logbox .chat{color: #2a3040 !important;}
.logbox .journal{color: #5a4080 !important;}

.chatInput, .form-row input, input.chatInput{
  background: var(--input-bg) !important;
  border: 1px solid #9a8ab8 !important;
  color: #2a3040 !important;
  border-radius: 3px;
}
.btn-small, .btn-primary, .btn-up, .btn-plus, .chatSend, .nearby-atk{
  background: linear-gradient(180deg, #f0e8f8, #b8a8d8) !important;
  border: 1px solid #7a6a9a !important;
  color: #2a2040 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-small:hover, .btn-primary:hover, .btn-up:hover, .btn-plus:hover{
  background: linear-gradient(180deg, #ffffff, #d0c0e8) !important;
}
.btn-small.on{background: linear-gradient(180deg, #d0c8f0, #9080c0) !important;}

#mapwrap, .mapwrap{
  border: 2px solid #7a6a9a !important;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.maplabel{
  background: rgba(90,70,130,0.75) !important;
  color: #f0e8ff !important;
  border-radius: 0 0 4px 0;
}

#loginModal, #charModal{
  background: rgba(20,16,30,0.75) !important;
}
#loginBox, #charBox{
  background: var(--panel-bg) !important;
  border: 2px solid #7a6a9a !important;
  border-radius: 8px !important;
  color: var(--text-main) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
#loginBox h2, #charBox h2{color: #4a3a70 !important;}
#loginBox .sub, #charBox .sub{color: var(--text-dim) !important;}
.job-card, .char-item{
  background: #ddd6ec !important;
  border: 1px solid #9a8ab8 !important;
  color: #2a3040 !important;
}
.job-card.selected, .char-item:hover{
  background: #c8b8e0 !important;
  border-color: #6a5a9a !important;
}

#ctxMenu{
  background: #e8e0f0 !important;
  border: 2px solid #7a6a9a !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
#ctxMenu button{
  color: #2a3040 !important;
}
#ctxMenu button:hover{
  background: #c8b8e0 !important;
  color: #1a1030 !important;
}

.bag-slot{
  background: #ddd6ec !important;
  border: 1px solid #9a8ab8 !important;
}
.bag-slot.empty{opacity:0.85;}

/* 捲軸紫灰 */
*::-webkit-scrollbar-track{background: var(--scroll-track) !important;}
*::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb) !important;
  border: 1px solid #6a5a8a !important;
}
*::-webkit-scrollbar-thumb:hover{background: var(--scroll-thumb-hover) !important;}
*{scrollbar-color: var(--scroll-thumb) var(--scroll-track) !important;}

.view-body{background: transparent;}

.bag-footer{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:8px; padding-top:6px;
  border-top:1px solid #9a8ab8;
  font-size:12px; color:#3a3050;
}
#bagSeed{ color:#6a5080; font-weight:bold; }
.bag-slot .item-name{ font-size:10px; line-height:1.2; word-break:break-all; }
.rarity-0{ color:#2a2a30; }
.item-tooltip .rarity-0,
.item-desc-pin .rarity-0,
.item-desc-pin .tt-name.rarity-0,
.item-tooltip .tt-name.rarity-0 {
  color: #f0f0f0 !important;
  text-shadow: 0 0 2px #333;
}
.rarity-1{ color:#9a7ad0; }
.rarity-2{ color:#e8c840; }
.rarity-3{ color:#f0b0c8; }
.rarity-4{ color:#60e070; }
.rarity-5{ color:#c0c0c0; }
.rarity-6{ color:#f09040; }
.rarity-7{ color:#40c0f0; }
.rarity-8,.rarity-9,.rarity-10,.rarity-11{ color:#e060e0; }
.item-tooltip{ 
  position:fixed; z-index:28000; width:260px; max-width:280px;
  background: rgba(0, 0, 0, 0.82);
  color: #f0eef5;
  border: none;
  border-radius: 0;
  padding: 10px 12px; font-size: 12px; line-height: 1.45;
  pointer-events: none;
  box-shadow: none;
}
.item-tooltip .tt-name{ font-weight:bold; margin-bottom:6px; font-size:13px; }
.item-tooltip .tt-desc{ color:#ddd8e8; white-space:pre-wrap; }
.item-desc-pin{
  position:fixed; z-index:10000;
  width:280px; max-height:none;
  background: rgba(0, 0, 0, 0.88);
  border: none;
  border-radius: 0;
  box-shadow: none;
  display:flex; flex-direction:column;
  color:#f0eef5;
}
.item-desc-pin .pin-head{
  background: rgba(0,0,0,0.5);
  border-bottom: none;
  padding:6px 10px; display:flex; justify-content:space-between;
  color:#e8e0f0; font-size:13px;
}
.item-desc-pin .pin-body{
  padding:10px 12px; overflow:visible; font-size:12px; color:#ddd8e8;
  white-space:pre-wrap;
}
#pinClose{ background:transparent; border:none; cursor:pointer; font-size:16px; color:#c8c0d8; }
.bag-slot{ cursor:default; display:flex; align-items:center; justify-content:center; text-align:center; padding:2px; }
.bag-slot.has-item{ background:#c8b8e0 !important; }

.item-tooltip, .item-desc-pin {
  pointer-events: auto;
}
.item-tooltip { pointer-events: none; }
.tt-stats {
  margin: 6px 0;
  color: #e8e4f0;
  line-height: 1.5;
}
.tt-section {
  margin-top: 8px;
  color: #b0a8c8;
  font-size: 11px;
}
.tt-req {
  color: #80c0f0;
  margin: 2px 0 6px;
}
.tt-flavor {
  margin-top: 8px;
  color: #c8b070;
  font-style: italic;
  line-height: 1.4;
}
.item-desc-pin .pin-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
#pinClose {
  pointer-events: auto !important;
  z-index: 2;
  min-width: 28px;
  min-height: 28px;
  cursor: pointer;
}

.item-desc-pin.item-tooltip-style,
.item-desc-pin {
  position: fixed;
  z-index: 10000;
  width: 280px;
  max-height: none !important;
  height: auto !important;
  background: rgba(0, 0, 0, 0.82) !important;
  color: #f0eef5 !important;
  border: 1px solid rgba(0,0,0,0.95) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible !important;
}
.item-desc-pin .pin-body {
  padding: 10px 12px;
  overflow: visible !important;
  max-height: none !important;
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.45;
  color: #f0eef5 !important;
  background: transparent !important;
}
.item-desc-pin .pin-foot {
  display: flex;
  justify-content: flex-end;
  padding: 6px 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.25);
}
.item-desc-pin .pin-ok,
#pinClose.pin-ok {
  background: linear-gradient(180deg, #5a6a80, #3a4a60) !important;
  border: 1px solid #1a2030 !important;
  color: #f0f0f8 !important;
  padding: 4px 16px !important;
  border-radius: 3px !important;
  cursor: pointer;
  font-size: 12px !important;
  min-width: auto !important;
  min-height: auto !important;
}
.item-desc-pin .pin-ok:hover {
  background: linear-gradient(180deg, #6a7a90, #4a5a70) !important;
}

.bag-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 維持原本格子，不因 icon 放大 */
  min-height: 36px;
  max-height: 40px;
  overflow: hidden;
  padding: 1px;
}
.bag-slot .item-icon {
  /* 原始解析度，不強制放大 */
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  flex-shrink: 0;
}
.bag-slot .item-name {
  display: none; /* 有圖示時以 icon 為主，避免撐大格子 */
}
.bag-slot.has-item .item-name.no-icon {
  display: block;
  font-size: 9px;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 黑灰 UI 覆寫 ===== */
body, #app, .game-shell {
  background: #0a0a0c !important;
  color: #e4e4e8 !important;
}
.panel, .float-panel, #floatBag, #floatAttrs, #settingsPanel, #logPanel {
  background: #1a1a1e !important;
  border-color: #3a3a42 !important;
  color: #e4e4e8 !important;
}
.float-header, .panel-header, .tab-bar, #topTabs {
  background: linear-gradient(180deg, #2a2a30, #1a1a1e) !important;
  color: #e0e0e4 !important;
  border-color: #3a3a42 !important;
}
.tab-btn, button, .btn-small, .float-close {
  background: linear-gradient(180deg, #3a3a42, #2a2a30) !important;
  border: 1px solid #4a4a52 !important;
  color: #e0e0e4 !important;
}
.tab-btn.active, .tab-btn:hover, button:hover {
  background: linear-gradient(180deg, #4a4a52, #3a3a42) !important;
  color: #fff !important;
}
.chatInput, input, select, textarea,
#chatInputMain, #chatInputFull, .form-row input {
  background: #121214 !important;
  border: 1px solid #3a3a42 !important;
  color: #e4e4e8 !important;
}
#chatLog, #chatLogFull, .chat-log, #logPanel, #journalList, .journal-list, #logBody {
  background: #000000 !important;
  color: #c8c8d0 !important;
  border-color: #2a2a30 !important;
}
/* 日誌欄：純黑底 */
#viewLog, #logPanel, #journalBox, #journalList, .journal-panel, #logContent {
  background: #000000 !important;
  color: #d0d0d8 !important;
}
#nearbyList li {
  background: transparent !important;
  color: #c8c8d0 !important;
}
#nearbyList li:hover, #nearbyList li.hover {
  background: #2a2a30 !important;
  color: #fff !important;
}
.bag-slot {
  background: #121214 !important;
  border: 1px solid #3a3a42 !important;
}
.bag-slot.has-item {
  background: #1e1e24 !important;
}
.bag-footer, .dim-hint, .kv, .attr-row span {
  color: #8a8a92 !important;
}
.attr-row b, #bagSeed, #bagCount {
  color: #e0e0e4 !important;
}
.modal, #loginModal, #charModal {
  background: rgba(0,0,0,0.75) !important;
}
.modal-box, .login-box, .char-box {
  background: #1a1a1e !important;
  border: 1px solid #3a3a42 !important;
  color: #e4e4e8 !important;
}
#ctxMenu {
  background: #1a1a1e !important;
  border: 1px solid #3a3a42 !important;
}
#ctxMenu button {
  color: #e4e4e8 !important;
  background: transparent !important;
}
#ctxMenu button:hover {
  background: #2a2a30 !important;
  color: #fff !important;
}
.item-tooltip, .item-desc-pin {
  background: rgba(0,0,0,0.88) !important;
  border-color: #000 !important;
  color: #f0f0f4 !important;
}
.rarity-0, .item-tooltip .rarity-0, .item-desc-pin .rarity-0 {
  color: #f0f0f0 !important;
}
*::-webkit-scrollbar-track { background: #121214 !important; }
*::-webkit-scrollbar-thumb {
  background: #4a4a52 !important;
  border: 1px solid #2a2a30 !important;
}


/* ===== 脫機外掛風格 UI ===== */
body, #app, .game-shell {
  background: #0c0c0e !important;
  color: #d0d4d8 !important;
  font-family:var(--ui) !important;
}
.panel, .float-panel, #floatBag, #floatAttrs, #settingsPanel, #logPanel,
#leftpanel, #rightpanel, #chatpanel {
  background: #1c1c20 !important;
  border: 1px solid #3a4555 !important;
  color: #d0d4d8 !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 0 1px #0a0c0e !important;
}
.float-header, .panel-header, .tab-bar, #topTabs, .pin-head {
  background: linear-gradient(180deg, #2a3545, #1a2535) !important;
  color: #c8d0d8 !important;
  border-bottom: 1px solid #3a4555 !important;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.tab-btn {
  background: #1a222c !important;
  border: 1px solid #3a4555 !important;
  color: #9aa4b0 !important;
  border-radius: 2px !important;
  font-size: 12px !important;
}
.tab-btn.active, .tab-btn:hover {
  background: #2a3a4a !important;
  color: #60e090 !important;
  border-color: #4a6a80 !important;
}
button, .btn-small, .float-close, .pin-ok, #pinClose {
  background: linear-gradient(180deg, #2a3540, #1a222c) !important;
  border: 1px solid #4a5a6a !important;
  color: #c8d0d8 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
button:hover, .btn-small:hover {
  background: #2a3a4a !important;
  color: #80e0a0 !important;
  border-color: #5a8a6a !important;
}
.btn-small.on {
  background: #1a3020 !important;
  color: #60e090 !important;
  border-color: #40a060 !important;
}
input, select, textarea, .chatInput, #chatInputMain, #chatInputFull, .form-row input {
  background: #0a0c0e !important;
  border: 1px solid #3a4555 !important;
  color: #60e090 !important;
  border-radius: 2px !important;
  font-family:var(--ui) !important;
}
input::placeholder, .chatInput::placeholder {
  color: #4a5a4a !important;
}
/* 對話／日誌：黑底綠字外掛感 */
#chatLog, #chatLogFull, .chat-log,
#logPanel, #journalList, #logBody, #logContent,
#viewLog, #journalBox {
  background: #000000 !important;
  color: #70d090 !important;
  border: 1px solid #2a3028 !important;
  font-family:var(--ui) !important;
  font-size: 12px !important;
}
#chatLog .system, .chat-log .system, .log-system {
  color: #80c0ff !important;
}
#chatLog .chat, .log-chat {
  color: #e0e0e0 !important;
}
#chatLog .combat, .log-combat {
  color: #e08060 !important;
}
#nearbyList {
  background: #12161a !important;
}
#nearbyList li {
  color: #b0b8c0 !important;
  border-bottom: 1px solid #1a2028 !important;
}
#nearbyList li:hover, #nearbyList li.hover {
  background: #1a3028 !important;
  color: #60e090 !important;
}
#nearbyList li.self { color: #60e090 !important; border-left: 2px solid #60e090 !important; }
#nearbyList li.monster { color: #e08080 !important; border-left: 2px solid #c04040 !important; }
#nearbyList li.other { color: #80b0e0 !important; border-left: 2px solid #4080c0 !important; }
.bag-slot {
  background: #12161a !important;
  border: 1px solid #2a3038 !important;
}
.bag-slot.has-item {
  background: #1a2228 !important;
  border-color: #3a5050 !important;
}
.bag-slot.has-item.equipped {
  border-color: #76bd5f !important;
  box-shadow: inset 0 0 0 1px #76bd5f, 0 0 7px #4e9f4c77;
}
.bag-footer, #bagCount, #bagSeed {
  color: #8a9080 !important;
}
#bagSeed { color: #d0c070 !important; font-weight: bold; }
.attr-row span { color: #7a8490 !important; }
.attr-row b { color: #60e090 !important; }
.kv b { color: #d0d4d8 !important; }
.hp-fill { background: linear-gradient(90deg, #802020, #d04040) !important; }
.mp-fill { background: linear-gradient(90deg, #204060, #4080c0) !important; }
.xp-fill { background: linear-gradient(90deg, #806020, #d0a030) !important; }
.modal, #loginModal, #charModal {
  background: rgba(0,0,0,0.8) !important;
}
.modal-box, .login-box, .char-box {
  background: #1c1c20 !important;
  border: 1px solid #3a4555 !important;
  color: #d0d4d8 !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.8) !important;
}
#ctxMenu {
  background: #1c1c20 !important;
  border: 1px solid #3a4555 !important;
}
#ctxMenu button {
  color: #d0d4d8 !important;
  background: transparent !important;
}
#ctxMenu button:hover {
  background: #1a3028 !important;
  color: #60e090 !important;
}
.item-tooltip, .item-desc-pin {
  background: rgba(0,0,0,0.92) !important;
  border: 1px solid #3a4555 !important;
  color: #d0d4d8 !important;
}
.tt-req { color: #80c0ff !important; }
.tt-flavor { color: #d0c070 !important; }
.tt-section { color: #7a8490 !important; }
*::-webkit-scrollbar-track { background: #12161a !important; }
*::-webkit-scrollbar-thumb {
  background: #3a4555 !important;
  border: 1px solid #1a2028 !important;
}
#mapCanvas, canvas {
  border: 1px solid #3a4555 !important;
}

/* 裝備說明欄配色 */
.item-tooltip .tt-white,
.item-desc-pin .tt-white,
.tt-white {
  color: #ffffff !important;
}
.item-tooltip .tt-stats,
.item-desc-pin .tt-stats {
  color: #ffffff !important;
}
.item-tooltip .tt-section,
.item-desc-pin .tt-section {
  color: #ffffff !important;
}
.item-tooltip .tt-desc,
.item-desc-pin .tt-desc {
  color: #ffffff !important;
}
.item-tooltip .tt-flavor,
.item-desc-pin .tt-flavor {
  color: #ffffff !important;
  font-style: normal !important;
}
/* 需求：暗橘 */
.item-tooltip .tt-req,
.item-desc-pin .tt-req,
.tt-req {
  color: #cc7722 !important;
}
/* 可裝備且符合當前角色：亮金黃 */
.tt-char-mine {
  color: #ffd700 !important;
  font-weight: bold;
}

.tt-gap {
  height: 0.7em;
}
.tab-btn.tab-autofarm {
  color: #60e090 !important;
  border-color: #3a6a50 !important;
}
.tab-btn.tab-autofarm.on {
  background: #1a3020 !important;
  color: #80ffb0 !important;
}

#nearbyList li {
  pointer-events: auto !important;
  cursor: pointer;
}
#nearbyList li .nu-name,
#nearbyList li .nu-pos {
  pointer-events: none;
}
.nearby-atk {
  pointer-events: auto !important;
  margin-left: 6px;
  padding: 1px 8px !important;
  font-size: 11px !important;
  background: #2a3a2a !important;
  border: 1px solid #4a7a50 !important;
  color: #80e090 !important;
  cursor: pointer !important;
  z-index: 5;
}

.mon-stat-table {
  display: table;
  width: auto;
  border-collapse: collapse;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.55;
}
.mon-stat-row {
  display: table-row;
}
.mon-stat-lab {
  display: table-cell;
  text-align: left;
  padding-right: 20px;
  white-space: nowrap;
  color: #ffffff;
}
.mon-stat-val {
  display: table-cell;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-family:var(--numeric);
  color: #ffffff;
  min-width: 3em;
}

.farm-config-body {
  padding: 12px 14px;
}
.farm-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #d0d4d8;
  font-size: 13px;
  user-select: none;
}
.farm-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #40b070;
  cursor: pointer;
}
#gameLogBox {
  overflow-y: auto !important;
}

#view-log .half-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
#gameLogBox.logbox.tall,
#gameLogBox {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: none !important;
  height: calc(100vh - 120px) !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}
#floatFarmConfig {
  display: none;
  flex-direction: column;
  z-index: 80 !important;
  position: fixed !important;
  background: #1c1c20 !important;
  border: 1px solid #3a4555 !important;
  width: 680px !important;
  max-width: calc(100vw - 24px);
}
#floatFarmConfig[style*="flex"] {
  display: flex !important;
}
.farm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
}
.farm-col-main, .farm-col-sell {
  min-width: 0;
  min-height: 0;
}
.farm-col-sell {
  border-left: 1px solid #3a4555;
  padding-left: 12px;
  display:flex;
  flex-direction:column;
}
.farm-combat-section { padding-top:2px; }
.farm-recovery-section { display:grid; gap:9px; }
.farm-recovery-group { display:grid; gap:4px; min-width:0; }
.farm-recovery-group .farm-check-row { margin:0; white-space:nowrap; }
.farm-recovery-picker { min-width:0; padding-left:21px; }
.farm-recovery-picker .farm-select-wrap { display:block; min-width:0; }
.farm-recovery-threshold { display:flex; align-items:center; gap:5px; padding-left:21px; font-size:11px; }
.farm-sell-hint {
  margin: 6px 0 8px;
  line-height: 1.45;
  font-size: 11px;
}
.farm-sell-subhead {
  margin: 8px 0 4px;
  color: #c8d0d8;
  font-size: 12px;
  font-weight: 600;
}
.farm-sell-select {
  width: 100%;
  min-width: 0;
}
.farm-sell-empty {
  margin: 8px;
  color: #6a7a6a;
  text-align: center;
  font-size: 11px;
}
.farm-buy-group { display:grid; gap:4px; margin:6px 0; font-size:11px; color:#c9c4da; }
.farm-buy-picker { display:grid; grid-template-columns:22px minmax(0,1fr); gap:5px; align-items:center; }
.farm-buy-picker .farm-select-wrap { min-width:0; }
.farm-buy-amount { display:flex; align-items:center; justify-content:flex-end; gap:5px; padding-left:27px; }
.farm-buy-qty { width:40px !important; min-width:40px; appearance:textfield; -moz-appearance:textfield; }
.farm-buy-qty::-webkit-outer-spin-button,.farm-buy-qty::-webkit-inner-spin-button { appearance:none; margin:0; }
.farm-ban-list-btn { flex:0 0 auto; padding:4px 7px; white-space:nowrap; }
.farm-auto-trade-row { display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:0 0 4px; }
.farm-auto-trade-row .farm-check-row { margin:0; }
.farm-auto-sell-row { justify-content:flex-start; align-items:center; gap:8px; margin:9px 0 4px; }
.farm-auto-sell-row .farm-check-row { margin:0; }
.farm-auto-point-row { margin-top:4px; }
.farm-auto-point-row .farm-select-wrap { width:100%; }
.farm-run-terminal { margin-top:auto; border:1px solid #47526a; border-radius:4px; overflow:hidden; background:#050706; box-shadow:inset 0 0 12px #000; font:12px/1.55 var(--ui); color:#d8eadb; }
.farm-run-head { display:flex; align-items:center; justify-content:space-between; padding:5px 7px; border-bottom:1px solid #26312a; background:#111712; color:#8ee29d; font-family:var(--ui); }
.farm-run-head b { color:#efe18b; }
.farm-run-head span { font-size:11px; }
.farm-run-output { min-height:154px; margin:0; padding:8px; box-sizing:border-box; color:#cfdfce; }
.farm-stat-row { display:grid; grid-template-columns:minmax(0, 1fr) max-content; align-items:center; gap:10px; min-height:21px; }
.farm-stat-row span { min-width:0; color:#bfcfbe; }
.farm-stat-row b { color:#f0f5d8; font-weight:700; text-align:right; }
.farm-ban-list { display:grid; gap:4px; max-height:154px; overflow-y:auto; margin-top:7px; padding:5px; border:1px solid #3a4555; border-radius:5px; background:#10121bc7; }
.farm-ban-row { display:grid; grid-template-columns:20px minmax(0,1fr) 22px; gap:5px; align-items:center; width:100%; min-height:27px; padding:3px 4px; color:#ddd7f0; text-align:left; border:1px solid #423b62; border-radius:4px; background:#1b1930; }
.farm-ban-row:hover { border-color:#d4b95c; background:#302a4d; }
.farm-ban-row img { width:auto; height:auto; max-width:18px; max-height:18px; image-rendering:auto; }
.farm-ban-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.farm-ban-row b { color:#f0908d; text-align:center; font-size:15px; }
.farm-sell-ban-panel { position:fixed; z-index:150; width:270px; max-width:calc(100vw - 20px); color:#eee; background:#050609e8; border-color:#67549c; box-shadow:0 8px 28px #000c; }
.farm-sell-ban-panel .pin-body { max-height:340px; overflow-y:auto; padding:8px; }
.farm-sell-ban-title { margin:0 0 7px; color:#f2e184; font-weight:700; }
.rename-character-input { display:block; width:100%; box-sizing:border-box; margin-top:10px; padding:7px 9px; color:#f7f4ff; background:#090a0f; border:1px solid #6a58a4; border-radius:4px; outline:none; }
.rename-character-input:focus { border-color:#e2ca70; box-shadow:0 0 0 1px #e2ca7066; }

.char-box-wide {
  min-width: 520px;
  max-width: 640px;
  padding: 20px 24px;
}
.char-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.char-slot {
  min-height: 110px;
  background: #12161a;
  border: 1px solid #3a4555;
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  color: #d0d4d8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.char-slot:hover { border-color: #5a8a6a; }
.char-slot.selected {
  border-color: #60e090;
  box-shadow: 0 0 0 1px #60e090;
  background: #1a2820;
}
.char-slot.empty { opacity: 0.75; }
.cs-name { font-size: 15px; font-weight: bold; color: #e0e8e0; }
.cs-job { font-size: 12px; color: #8a9a8a; }
.cs-lv { font-size: 12px; color: #60e090; }
.cs-empty { font-size: 14px; color: #6a7a6a; }
.cs-hint { font-size: 11px; color: #4a5a4a; }
.char-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.create-preview {
  margin: 10px 0;
  padding: 8px 10px;
  background: #0a0c0e;
  border: 1px solid #2a3038;
  font-size: 12px;
  line-height: 1.5;
  color: #a0c0a0;
}

/* ===== 選角：左右切換 + 頭貼 ===== */
.job-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 14px 0 6px;
}
.job-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #3a4a3a;
  background: #1a2218;
  color: #c0d0c0;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-arrow:hover {
  background: #2a4a3a;
  border-color: #5a8a6a;
  color: #fff;
}
.job-portrait-wrap {
  width: 112px;
  height: 112px;
  border-radius: 12px;
  border: 2px solid #5a8a6a;
  background: #0a0c0e;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.job-portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait-fallback {
  font-size: 40px;
  color: #5a6a5a;
}
.job-picker-name {
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  color: #d0b060;
  margin-top: 4px;
}
.job-picker-meta {
  text-align: center;
  font-size: 12px;
  color: #7a8a7a;
  margin-bottom: 8px;
}
.type-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
.type-btns button {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid #3a4a3a;
  background: #1a2218;
  color: #c0d0c0;
  border-radius: 4px;
  cursor: pointer;
}
.type-btns button.active {
  background: #2a5a3a;
  border-color: #5a9a6a;
  color: #fff;
}
.type-btns button:hover { border-color: #5a8a6a; }

/* 選角欄位頭貼 */
.char-slot .cs-portrait {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #3a4a3a;
  background: #0a0c0e;
  margin-bottom: 6px;
}

/* 遊戲內屬性／基本狀態頭貼 */
.char-portrait-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a3038;
}
.char-portrait-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 2px solid #5a8a6a;
  object-fit: cover;
  background: #0a0c0e;
  flex-shrink: 0;
}
.char-portrait-meta .cpm-name {
  font-weight: bold;
  font-size: 14px;
  color: #e0e8e0;
}
.char-portrait-meta { min-width:0; flex:1 1 auto; }
.char-portrait-meta .cpm-job {
  font-size: 12px;
  color: #d0b060;
  margin-top: 2px;
}
#basicLeft .stat-label,
#basicLeft .stat-label span,
#basicLeft .kv span,
#basicLeft .kv b,
#basicLeft .rare-loot-title,
#basicLeft .rare-loot-list { color:#fff !important; }
.attr-cost {
  flex:1 1 auto;
  min-width:88px;
  color:#c9bc80;
  font:10px/1 var(--mono);
  text-align:right;
  white-space:nowrap;
}
#floatAttrs {
  width:340px;
}
#floatAttrs .float-body {
  padding:14px 16px;
}
#floatAttrs .attr-row {
  padding:5px 2px;
  font-size:12px;
}
#floatAttrs .attr-row span {
  width:78px;
}
#floatAttrs .attr-row b {
  width:34px;
}
#floatAttrs .attr-cost {
  min-width:106px;
  font-size:11px;
}
.attr-panel-portrait {
  margin-bottom: 10px;
}

/* 選角下方四顆主按鈕並排 */
.char-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: stretch;
}
.char-actions .btn-primary {
  flex: 1 1 auto;
  min-width: 100px;
}

/* 對話：一般／密語下拉 + 密語對象 */
.chatInputRow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.chatModeSelect {
  flex: 0 0 auto;
  min-width: 72px;
  max-width: 88px;
  padding: 4px 6px;
  font-size: 12px;
  background: #0a0c0e;
  border: 1px solid #2a3038;
  color: #c0d0c0;
  border-radius: 4px;
}
.chatWhisperTarget {
  flex: 0 0 90px;
  min-width: 72px;
  max-width: 110px;
  padding: 4px 6px;
  font-size: 12px;
  background: #0a0c0e;
  border: 1px solid #2a3038;
  color: #c0d0c0;
  border-radius: 4px;
}
.logbox .whisper {
  color: #c090e0 !important;
}
.logbox .whisper.outgoing { color: #d7a8f0 !important; }
.logbox .whisper.incoming {
  color: #f0b2ff !important;
  cursor: pointer;
}
.logbox .whisper.incoming:hover { text-decoration: underline; }

.attr-points { margin-top: 8px; }
.attr-equipment-hp-bonus { margin-left:2px; }
.attr-hover-help {
  min-height: 42px;
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid #3e543b;
  border-radius: 4px;
  color: #c8dfbd;
  background: #101710;
  font-size: 11px;
  line-height: 1.48;
}
.attr-row[data-desc] { cursor: help; }

/* 掛機按鈕與其他 tab 同色（開啟時用一般 active） */
.tab-btn.tab-farm-config.active {
  /* 沿用 .tab-btn.active，不再單獨套綠色 */
}

/* 掛機設定：自動補 HP/MP */
.farm-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #2a3038;
}
.farm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 4px 22px;
  font-size: 12px;
  color: #b0c0b0;
}
.farm-lab { flex-shrink: 0; }
.farm-select {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 12px;
  background: #0a0c0e;
  border: 1px solid #2a3038;
  color: #c0d0c0;
  border-radius: 4px;
}
.farm-pct {
  width: 56px;
  padding: 4px 6px;
  font-size: 12px;
  background: #0a0c0e;
  border: 1px solid #2a3038;
  color: #c0d0c0;
  border-radius: 4px;
}
/* 補 HP／MP 門檻僅允許鍵盤輸入，不顯示 number spinner。 */
#inpHpPct, #inpMpPct { appearance:textfield; -moz-appearance:textfield; }
#inpHpPct::-webkit-outer-spin-button, #inpHpPct::-webkit-inner-spin-button,
#inpMpPct::-webkit-outer-spin-button, #inpMpPct::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#inpBuffInterval { appearance:textfield; -moz-appearance:textfield; }
#inpBuffInterval::-webkit-outer-spin-button, #inpBuffInterval::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.farm-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #d0e0d0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.farm-check-row input[type="checkbox"] { position: relative; z-index: 3; pointer-events: auto !important; }
.farm-buff-list-row { align-items:flex-start; }
.farm-buff-list { flex:1; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; max-height:132px; overflow-y:auto; padding:5px; border:1px solid #5d5495; border-radius:5px; background:#0a0c0e; }
.farm-buff-choice { display:flex; align-items:center; min-width:0; gap:4px; padding:3px 4px; color:#d9d3ee; border:1px solid #38315e; border-radius:4px; font-size:11px; cursor:pointer; }
.farm-buff-choice:hover { border-color:#a99bea; background:#2b244e; }
.farm-buff-choice input { flex:0 0 auto; margin:0; }
.farm-buff-choice img { width:auto; height:auto; max-width:20px; max-height:20px; image-rendering:pixelated; }
.farm-buff-choice span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.farm-buff-empty { color:#958db1; font-size:11px; }

/* 郵件：附件一律先留在信件內，按領取才進背包。 */
.mail-float-panel { z-index:81 !important; height:520px; max-width:calc(100vw - 24px); display:none; flex-direction:column; }
.mail-body { box-sizing:border-box; height:calc(100% - 34px); max-height:none !important; overflow:hidden; display:flex; flex-direction:column; }
.mail-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:29px; margin-bottom:6px; }
.mail-tabs { display:flex; align-items:center; gap:5px; }
.mail-tab { min-width:92px; min-height:28px; padding:4px 8px; color:#cfc7e8; border:1px solid #5d528a; border-radius:5px; background:linear-gradient(#332957,#1c1832); font:inherit; font-size:12px; }
.mail-tab span { display:inline-block; min-width:17px; margin-left:3px; color:#b4a7d7; font-size:10px; text-align:center; }
.mail-tab.active { color:#fff6bb; border-color:#f3d96b; background:linear-gradient(#7059af,#40326b); box-shadow:inset 0 0 0 1px #f8e48966,0 0 8px #d8b85355; }
.mail-actions { display:grid; grid-template-columns:minmax(170px,1fr) auto auto auto; gap:6px; margin-bottom:6px; }
.mail-actions input { min-width:0; height:27px; box-sizing:border-box; padding:3px 8px; color:#f4f0ff; border:1px solid #5f5689; border-radius:4px; background:#121022; }
.mail-actions .danger { color:#ffd4d4; border-color:#8e4b58; }
.mail-list-head { display:flex; justify-content:space-between; align-items:center; min-height:24px; padding:0 5px; color:#bbb2d7; font-size:11px; border-bottom:1px solid #443b6b; }
.mail-list-head label { cursor:pointer; }
.mail-list { display:flex; flex:1; flex-direction:column; gap:4px; min-height:0; padding-top:5px; overflow-y:auto; }
.mail-card { min-height:54px; box-sizing:border-box; display:grid; grid-template-columns:20px 176px minmax(0,1fr) auto; align-items:center; gap:7px; padding:5px 7px; border:1px solid #766ab1; border-radius:6px; background:linear-gradient(135deg,rgba(43,36,91,.88),rgba(13,13,23,.94)); }
.mail-card.unread { border-left:3px solid #ffe76b; }
.mail-card.history { border-color:#5a5681; background:linear-gradient(135deg,rgba(38,34,69,.9),rgba(13,13,23,.94)); }
.mail-card:has(.mail-select input:checked) { border-color:#f0d86a; box-shadow:inset 0 0 0 1px #f0d86a55; }
.mail-select { display:grid; place-items:center; }
.mail-select input { accent-color:#a99bea; }
.mail-item { width:176px; min-width:176px; height:36px; display:flex; align-items:center; gap:6px; color:#ffe66d; font-size:12px; white-space:nowrap; overflow:hidden; cursor:help; }
.mail-item-icon { width:30px; height:30px; min-width:30px; box-sizing:border-box; display:grid; place-items:center; border:1px solid #8171bb; border-radius:4px; background:#121024; }
.mail-item-icon img { width:auto; height:auto; max-width:26px; max-height:26px; image-rendering:pixelated; }
.mail-item b { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mail-item em { flex:0 0 auto; color:#fff2a5; font-style:normal; }
.mail-content { min-width:0; cursor:pointer; }
.mail-subject { display:flex; align-items:center; gap:7px; color:#fff; font-size:12px; white-space:nowrap; }
.mail-subject b { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mail-unread-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#ffe76b; box-shadow:0 0 6px #ffe76b; }
.mail-meta { margin-top:4px; color:#aba4c5; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-detail { display:none; grid-column:2 / -1; margin:2px 0 1px; padding:8px 10px; color:#e8e4f5; font-size:12px; line-height:1.55; white-space:pre-wrap; border-left:2px solid #7869b8; background:rgba(8,7,18,.55); }
.mail-card.expanded .mail-detail { display:block; }
.mail-claim { flex:0 0 auto; min-width:54px; }
.mail-text-badge { min-width:54px; color:#9f97bd; text-align:center; font-size:10px; }
.mail-claimed-at { width:128px; color:#bdb6d5; text-align:right; font-size:10px; white-space:nowrap; }
.mail-status { min-height:19px; padding:5px 3px 0; color:#aea6c8; font-size:10px; border-top:1px solid #443b6b; }
.mail-empty { display:grid; flex:1; place-items:center; min-height:120px; color:#aaa2c7; }
@keyframes mailUnreadPulse { 0%, 100% { filter:brightness(1); box-shadow:none; } 50% { filter:brightness(1.38); box-shadow:0 0 11px #ffe65bb8; } }
.tab-btn.has-unread { color:#fff3a5 !important; border-color:#ffe36a !important; animation:mailUnreadPulse 1s ease-in-out infinite; }

/* 一封郵件固定兩行：上行主旨／寄件人／日期，下行為可橫向拖曳的多附件列。 */
.mail-card { min-height:86px; display:flex; flex:0 0 auto; flex-direction:column; align-items:stretch; gap:4px; padding:5px 7px; overflow:visible; cursor:pointer; }
.mail-card.no-attachments { min-height:42px; }
.mail-card.expanded { width:100%; height:auto !important; max-height:none !important; overflow:visible !important; }
.mail-head { min-height:27px; display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:7px; }
.mail-content { min-width:0; }
.mail-subject { min-width:0; display:grid; grid-template-columns:auto minmax(70px,1fr) auto auto auto; align-items:center; gap:8px; }
.mail-subject b { color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-subject .mail-sender { min-width:0; color:#cfc7e8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-subject time,.mail-subject small { color:#aaa2c4; font-size:10px; font-weight:400; white-space:nowrap; }
.mail-attachments-strip { min-width:0; height:54px; min-height:54px; flex:0 0 54px; display:flex; align-items:flex-start; gap:6px; padding:5px 4px 9px 27px; overflow-x:auto; overflow-y:hidden; border-top:1px solid rgba(118,106,177,.35); scroll-behavior:auto; overscroll-behavior:contain; touch-action:pan-y; user-select:none; }
.mail-attachments-strip::-webkit-scrollbar { height:6px; }
.mail-attachments-strip::-webkit-scrollbar-track { background:#0d0c19; border-radius:4px; }
.mail-attachments-strip::-webkit-scrollbar-thumb { background:#695b9f; border:1px solid #9385c5; border-radius:4px; }
.mail-attachment { position:relative; flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; color:#ffe66d; cursor:help; }
.mail-attachment .mail-item-icon { width:34px; height:34px; min-width:34px; }
.mail-attachment .mail-item-icon img { max-width:30px; max-height:30px; }
.mail-attachment > em { position:absolute; right:-2px; bottom:-1px; min-width:13px; padding:0 2px; color:#fff5a4; background:rgba(0,0,0,.82); border-radius:3px; font:700 10px/14px var(--numeric); text-align:center; text-shadow:0 1px 2px #000; }
.mail-detail { margin-left:27px; }
.mail-card.expanded .mail-detail { flex:0 0 auto; width:calc(100% - 27px); height:auto; max-height:none; overflow:visible; }
@media (max-width:720px) {
  .mail-subject { grid-template-columns:auto minmax(50px,1fr) auto; }
  .mail-subject small,.mail-subject time { display:none; }
}

/* 封號說明欄（登入／選角，比照裝備說明） */
.ban-notice-panel {
  z-index: 9999;
  min-width: 260px;
  max-width: 340px;
}
.ban-notice-panel .tt-name { color: #e07070; }
.ban-notice-panel .tt-white { color: #d8d0c8; }
.char-slot.banned-slot {
  outline: 1px solid #a04040;
  box-shadow: inset 0 0 0 1px #602020;
}
.char-slot .cs-ban-tag {
  color: #e07070;
  font-size: 11px;
  margin-top: 4px;
}

#nearbyList li.portal { border-left: 3px solid #60c0e0 !important; color: #b8f0ff !important; }
#nearbyList li.portal .nu-name { color: #b8f0ff !important; }
#nearbyList li.npc { border-left: 3px solid #e2b75a !important; color: #ffe7a2 !important; }
#nearbyList li.npc .nu-name { color: #ffe7a2 !important; }


/* RIGHT PANEL EQUAL HALF + 標題白字 */
.side-panel.right{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:100% !important;
}
.side-panel.right > h3,
.side-panel.right > h3.subhead,
.side-panel.right .subhead{
  color:#ffffff !important;
  flex-shrink:0 !important;
  margin:6px 0 4px 0 !important;
  text-shadow:none !important;
}
#nearbyScroll, #playerScroll{
  flex:1 1 50% !important;
  min-height:0 !important;
  overflow-y:auto !important;
}
#playerlist li{
  display:flex !important;
  justify-content:space-between !important;
  gap:6px !important;
  color:#ffffff !important;
}
#playerlist li .pl-name{ color:#ffffff !important; flex:1; overflow:hidden; text-overflow:ellipsis; }
#playerlist li .pl-pos{ color:#ffffff !important; flex-shrink:0; font-size:11px; opacity:0.9; }
#playerlist li.self{ border-left:3px solid #d0c070 !important; }
#playerlist li.other{ border-left:3px solid #50a0d0 !important; }

#topbar .status, #topbar .status span, #topbar .status b {
  color: #ffffff !important;
}
#topbar #btnAutofarm {
  color: #ffffff !important;
}
#playerlist li .pl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}
#playerlist li .pl-dot.on { background: #40d060; box-shadow: 0 0 4px #40d060; }
#playerlist li .pl-dot.off { background: #d04040; box-shadow: 0 0 4px #d04040; }
#playerlist li .pl-name-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 鍵盤操作時維持可見焦點，不影響既有桌面版面配置。 */
button:focus-visible,
input:focus-visible,
select:focus-visible,
.char-slot:focus-visible {
  outline: 2px solid #f0dc80;
  outline-offset: 2px;
}

/* 天翼之鍊風格：深紫底、靛藍邊框與黑色資訊條。放在最後以統一舊版綠灰色。 */
body { background: #16132b; color: #eeeaff; }
#topbar { background: linear-gradient(180deg, #4d428f, #292354) !important; border-bottom-color: #9384dc !important; }
#topbar .title { color: #fff !important; text-shadow: 1px 1px #1b1640; }
.tab-btn, .btn-small, .btn-primary { background: linear-gradient(180deg, #655ab1, #342c72) !important; border-color: #a99bea !important; color: #fff !important; }
.tab-btn.active, .tab-btn:hover, .btn-small:hover, .btn-primary:hover { background: linear-gradient(180deg, #8a7ddd, #4c4291) !important; }
.side-panel, .half-panel, .chatpanel, .float-panel, #ctxMenu { background: linear-gradient(145deg, #30285c, #1d193d) !important; border-color: #8478c8 !important; box-shadow: inset 0 0 0 1px #17132f, 0 3px 12px #080615aa; }
.side-panel h3, .half-panel h3, .float-header { background: linear-gradient(180deg, #6157aa, #3e367e) !important; border-color: #a99bea !important; color: #fff !important; }
.kv, .attr-row, .farm-section { border-color: #5d5495 !important; }
.attr-row:hover { background: #4b417f !important; }
.attr-row[data-desc] { cursor: help; }
.attr-side-tooltip { position: fixed; z-index: 11000; width: 245px; padding: 10px 11px; color: #f3efff; background: rgba(8, 7, 17, .88); border: 1px solid #9788dc; box-shadow: 0 3px 14px #000a; font-size: 12px; line-height: 1.55; pointer-events: none; }
/* 地圖容器不顯示外框；這只是 UI 邊界，與 D2M／TWM 圖層及碰撞判定無關。 */
.mapwrap, #mapwrap { border:0 !important; box-shadow:none !important; }
.chatInput, .chatModeSelect, .chatWhisperTarget, .farm-select, .farm-pct { background: #17132e !important; border-color: #7165ad !important; color: #f3efff !important; }
.bag-slot { background: #211c43 !important; border-color: #7064aa !important; }
.bag-slot.has-item { background: #322a61 !important; }
.bag-slot.has-item.locked {
  filter: grayscale(1) brightness(.62);
  opacity: .58;
  cursor: not-allowed !important;
  pointer-events: none;
}
.bag-slot.equipped { box-shadow: inset 0 0 0 2px #d6c264, 0 0 7px #c5a93f88 !important; }
.item-tooltip, .item-desc-pin {
  width: 280px !important;
  max-width:280px !important;
  box-sizing:border-box;
  background: rgba(8, 7, 14, .94) !important;
  border: none !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.equip-compare { margin-top: 8px; padding-top: 5px; border-top: 1px solid #595080; line-height: 1.35; }
.stat-up { color: #72ed82 !important; } .stat-down { color: #df2635 !important; text-shadow:0 1px 2px #240000; }

/* 裝備欄：仿參考圖的圖示圓格 + 黑色欄位條。 */
.tw-equip-panel { min-width: 300px; }
.equip-body { padding: 6px !important; }
.equip-caption { margin: 0 0 6px; font-size: 11px; color: #d8d0ff; text-align: center; }
.equip-grid { display: grid !important; grid-template-columns: 1fr; gap: 2px; }
.equip-slot { min-height: 28px; display: flex !important; align-items: center; gap: 4px; padding: 2px 4px; border: 1px solid #9183d4; border-radius: 4px; background: linear-gradient(90deg, #423987, #29235b); }
.equip-slot.empty { opacity: 1; }
.equip-slot.has-item { cursor: pointer; background: linear-gradient(90deg, #6457b3, #332a70); }
.equip-slot.has-item:hover { border-color: #f2dc84; box-shadow: 0 0 7px #d7c15b88; }
.equip-icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; background: #25204e; border: 1px solid #b1a5e4; color: #d1c8f4; overflow: hidden; }
.equip-icon { width: 38px; height: 38px; flex-basis: 38px; }
.equip-icon img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: none; image-rendering: pixelated; }
.equip-strip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; min-height: 20px; padding: 2px 7px; border-radius: 3px; background: #090812; }
.equip-slot-label { min-width: 90px; color: #f9f7ff; font-weight: 700; font-size: 10px; letter-spacing: .2px; }
.equip-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f1de73; font-size: 11px; }
.equip-item-name[class*="rarity-"] { /* 稀有度色由下方 rarity 規則覆蓋 */ }
.tt-bottom-space { height: 15px; }
.bag-sort-btn { margin:0 !important; padding:3px 7px !important; white-space:nowrap; }
.bag-tools { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin:0 0 8px; padding:6px; border:1px solid #7164b4; border-radius:6px; background:#17122fbb; }
.bag-tools-label { color:#ded6ff; font-size:11px; margin-right:2px; }
.bag-sort-btn.active { border-color:#f5dd7c !important; color:#fff5b8 !important; box-shadow:0 0 8px #d5ba5088; }
.tw-equip-panel, .tw-equip-panel .float-body { overflow:visible !important; }
.tw-equip-panel .float-body { max-height:none !important; height:auto !important; }
.tw-equip-panel .equip-grid { overflow:visible !important; max-height:none !important; }
.equip-header-actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
.equip-header-actions .float-close { margin-left:0 !important; min-width:22px; min-height:22px; display:grid; place-items:center; }
.equip-show-toggle { font-size:12px !important; line-height:1 !important; }
.bag-header-actions { margin-left:auto; display:flex; align-items:center; gap:4px; }
.bag-header-actions .float-close { margin-left:0 !important; min-width:22px; min-height:22px; display:grid; place-items:center; }
.bag-view-toggle { font-size:15px !important; line-height:1 !important; }
/* SHOW 是純外觀欄。折疊時直接從版面流移除，裝備視窗會自然往上縮小。 */
.tw-equip-panel.show-slots-collapsed .equip-slot[data-equip-slot="9"],
.tw-equip-panel.show-slots-collapsed .equip-slot[data-equip-slot="10"],
.tw-equip-panel.show-slots-collapsed .equip-slot[data-equip-slot="11"],
.tw-equip-panel.show-slots-collapsed .equip-slot[data-equip-slot="12"] { display:none !important; }

/* 套裝說明是裝備說明的附屬面板：不攔截滑鼠、不與一般提示互相閃爍。 */
.set-tooltip { z-index:27999 !important; pointer-events:none !important; }
.set-desc-pin { z-index:9999 !important; pointer-events:none !important; }
.set-detail-name,
.set-detail-items { color:#7eeaff; font-weight:700; line-height:1.5; }
.set-detail-items { margin-top:4px; }
.set-detail-missing { color:#ff4e55 !important; }
.set-detail-stats { margin-top:14px; color:#ffff33; font-weight:700; line-height:1.5; }
.set-detail-stats.set-detail-stats-preview { color:#8f8f8f !important; }
.set-detail-description { margin-top:14px; color:#fff; line-height:1.55; white-space:pre-wrap; }
.farm-select-wrap { flex:1; min-width:0; display:flex; align-items:center; gap:5px; }
.farm-select-wrap .farm-select { flex:1; min-width:0; }
.farm-item-icon { display:none; width:auto; height:auto; object-fit:none; image-rendering:pixelated; flex:0 0 auto; }
.farm-skill-fallback { width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px; color:#ffe36a; border:1px solid #7463a8; border-radius:4px; background:#211b41; }
.tt-stats .stat-up, .tt-stats .stat-down { display:inline-block; margin-left:10px; }
.tt-stats .tt-stat-line { display:flex; align-items:center; min-height:1.35em; }
.tt-stats .tt-stat-main { min-width:0; }
.tt-stats .tt-stat-compare { min-height:1.35em; display:flex; align-items:center; justify-content:center; text-align:center; margin-left:.7em; }
.tt-stats .tt-stat-compare .stat-up, .tt-stats .tt-stat-compare .stat-down { margin-left:0; }
.tt-stats .tt-stat-compare .stat-neutral { color:#ffffff; }
.item-tooltip .tt-synth,
.item-desc-pin .tt-synth {
  margin: 0 0 2px;
  color: #ffffff !important;
  line-height: 1.5;
}
.item-tooltip .tt-stats,
.item-desc-pin .tt-stats { margin-bottom: 0; }
.item-tooltip .tt-synth.tt-synth-max,
.item-desc-pin .tt-synth.tt-synth-max {
  color: #df2635 !important;
  font-weight: 700;
  text-shadow: 0 1px 2px #240000;
}
.game-confirm { z-index:26000 !important; }
.game-confirm.broadcast-dialog-active {
  z-index:43000 !important;
  width:min(745px, calc(100vw - 24px)) !important;
  max-width:none !important;
}
.game-confirm.broadcast-dialog-active #broadcastTextInput {
  width:100% !important;
  white-space:nowrap;
}
/* 角笛輸入框高於一般面板；若輸入內容含物品連結，其說明仍須顯示在輸入框上方。 */
body:has(#gameConfirm.broadcast-dialog-active[style*="display: flex"]) #itemTooltip { z-index:43010 !important; }
body:has(#gameConfirm.broadcast-dialog-active[style*="display: flex"]) #setTooltip { z-index:43011 !important; }
body:has(#gameConfirm.broadcast-dialog-active[style*="display: flex"]) #setDescPin { z-index:43019 !important; }
body:has(#gameConfirm.broadcast-dialog-active[style*="display: flex"]) #itemDescPin { z-index:43020 !important; }
.store-float-panel { z-index:150; }
.store-body { display:grid; gap:9px; background:linear-gradient(145deg,#201c3b,#12131f); }
.store-products { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; }
.store-closed { grid-column:1 / -1; padding:18px 10px; text-align:center; color:#b4acc8; border:1px dashed #625681; border-radius:7px; }
.store-product-empty { min-height:132px; border:1px solid #38324d; border-radius:7px; background:#11101a88; }
.store-balance { display:flex; align-items:baseline; gap:7px; padding:9px 11px; border:1px solid #7765b7; border-radius:7px; background:#0c0b16cc; color:#d9d3ee; }
.store-balance b { margin-left:auto; color:#ffe36a; font-size:22px; text-shadow:0 1px 3px #000; }
.store-balance-bottom { margin-top:2px; }
.store-product-card { min-height:132px; display:grid; grid-template-rows:48px minmax(30px,1fr); gap:5px; align-items:center; justify-items:center; width:100%; padding:8px; border:1px solid #58498b; border-radius:8px; background:linear-gradient(120deg,#31285a,#1d1934); color:#fff; font:inherit; cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.store-product-card:hover { border-color:#aa94ed; }
.store-product-card.selected { border-color:#ffe36a; box-shadow:0 0 0 1px #ffe36a88, 0 0 14px #d9b94a77; background:linear-gradient(120deg,#4c3b78,#282043); }
.store-product-card.unaffordable:not(.selected) { filter:saturate(.72); }
.store-product-card.sold-out { opacity:.5; filter:grayscale(.8); cursor:not-allowed; }
.store-product-card:active { transform:scale(.98); }
.store-product-icon { width:auto; height:auto; max-width:none; max-height:none; object-fit:initial; image-rendering:pixelated; }
.store-product-main { min-width:0; display:grid; gap:2px; text-align:center; color:#cbc6dd; font-size:11px; }
.store-product-main b { color:#fff; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.store-product-main .store-price { color:#fff36a; font-size:14px; line-height:1.1; text-shadow:0 1px 2px #000, 0 0 5px #b48400; }
.store-product-main em { color:#ffe36a; font-style:normal; }
.store-product-main > em { color:#ffb0b7; font-size:9px; }
.store-buy-row { width:100%; display:grid; grid-template-columns:31px minmax(0,1fr) 38px; gap:3px; align-items:center; color:#ddd7ef; }
.store-buy-row input { width:31px; box-sizing:border-box; text-align:center; color:#fff; background:#0e0d19; border:1px solid #7463a8; border-radius:4px; padding:4px 1px; }
.store-buy-row span { color:#ffe36a; text-align:center; font-size:10px; white-space:nowrap; }
.store-buy-row .store-buy { min-width:38px; padding:4px 2px; font-size:10px; }
.store-buy-row button:disabled { filter:grayscale(1); opacity:.5; cursor:not-allowed; }
.store-pager { display:flex; justify-content:center; align-items:center; gap:9px; color:#d8d0f0; font-size:11px; }
.store-pager button { min-width:28px; padding:2px 5px; }
.store-purchase { display:flex; align-items:center; gap:8px; min-height:34px; padding:6px 7px 6px 10px; border:1px solid #6f5bb2; border-radius:7px; background:#0a0913dd; color:#d8d1ea; }
.store-purchase > span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.store-purchase label { display:flex; align-items:center; gap:4px; white-space:nowrap; color:#bdb4d8; font-size:11px; }
.store-purchase input { width:38px; box-sizing:border-box; padding:4px 2px; color:#fff; text-align:center; border:1px solid #7463a8; border-radius:4px; background:#0e0d19; }
.store-purchase b { min-width:76px; color:#fff36a; text-align:right; font-size:13px; white-space:nowrap; text-shadow:0 1px 2px #000,0 0 5px #b48400; }
.store-purchase button { margin-left:auto; min-width:56px; }
.store-purchase button:disabled { filter:grayscale(1); opacity:.55; cursor:not-allowed; }
.store-cart-head { display:flex; align-items:center; gap:7px; min-height:23px; padding:0 2px; color:#ede7ff; font-size:12px; }
.store-cart-head b { color:#fff5bd; }
.store-cart-head span { color:#a99fc7; font-size:11px; }
.store-cart-head button { margin-left:auto; min-width:44px; padding:2px 7px; font-size:10px; }
.store-cart { display:grid; gap:4px; max-height:126px; overflow-y:auto; padding:5px; border:1px solid #67589e; border-radius:6px; background:#0b0a15bb; }
.store-cart-empty { padding:13px 7px; color:#9e96b9; text-align:center; font-size:11px; }
.store-cart-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto auto; align-items:center; gap:6px; min-height:31px; padding:3px 5px; border:1px solid #403867; border-radius:4px; background:#252044; }
.store-cart-row:hover { border-color:#8677bf; background:#302755; }
.store-cart-icon { width:auto; height:auto; max-width:28px; max-height:28px; image-rendering:pixelated; }
.store-cart-copy { min-width:0; display:grid; gap:1px; }
.store-cart-copy b { overflow:hidden; color:#f6f3ff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.store-cart-copy small { color:#ffe36a; font-size:10px; }
.store-cart-qty { display:flex; align-items:center; gap:2px; }
.store-cart-qty button { width:21px; min-width:21px; height:21px; padding:0; color:#f3efff; font-weight:700; }
.store-cart-qty button:disabled,.store-cart-remove:disabled { opacity:.45; cursor:not-allowed; }
.store-cart-qty span { min-width:19px; color:#fff; text-align:center; font-size:11px; }
.store-cart-remove { min-width:27px; height:23px; padding:0 5px; color:#ffb1b8 !important; }
.store-checkout { display:flex; align-items:center; gap:8px; min-height:34px; padding:6px 8px 6px 10px; border:1px solid #8370c3; border-radius:7px; background:linear-gradient(90deg,#141024,#282047); color:#c7bfdf; font-size:11px; }
.store-checkout b { margin-left:auto; color:#fff36a; font-size:14px; text-shadow:0 1px 2px #000,0 0 5px #b48400; }
.store-checkout button { min-width:64px; font-weight:700; }
.store-checkout > span { display:grid; gap:1px; }
.store-checkout > span small { color:#9f95bd; font-size:9px; }
.store-checkout button:disabled,.store-cart-head button:disabled { filter:grayscale(1); opacity:.5; cursor:not-allowed; }
.store-note { margin:0; color:#9d96b7; font-size:11px; line-height:1.45; }

/* 公眾市場：交易採市場保管與郵件交付，清楚區分瀏覽／我的上架。 */
.market-float-panel {
  z-index:155;
  min-width:720px;
  height:min(720px, calc(100vh - 56px));
  flex-direction:column;
  overflow:hidden;
}
/* openFloatPanel 會設 display:flex；此處只補齊垂直填滿行為 */
.market-float-panel[style*="display: flex"],
.market-float-panel[style*="display:flex"] {
  display:flex !important;
  flex-direction:column;
}
.market-float-panel .float-header { flex:0 0 auto; }
/* 蓋過全域 .float-body 的 max-height:60vh，讓列表區吃滿面板高度 */
.market-float-panel .float-body,
.market-float-panel .market-body {
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,#211b40,#10101b);
}
.market-body {
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr);
  gap:9px;
  box-sizing:border-box;
}

/* /rank 排行榜：尺寸與公眾市場一致；獨立頁面不參與主遊戲 DOM 更新。 */
.rank-float-panel {
  z-index:155;
  min-width:720px;
  height:min(720px, calc(100vh - 56px));
  flex-direction:column;
  overflow:hidden;
}
.rank-float-panel[style*="display: flex"],
.rank-float-panel[style*="display:flex"] {
  display:flex !important;
  flex-direction:column;
}
.rank-float-panel .float-header { flex:0 0 auto; }
.rank-float-panel .rank-body {
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#10101b;
}
.rank-body iframe { display:block; width:100%; height:100%; border:0; background:#11121b; }
.rank-float-panel .announcements-rank-body {
  display:flex !important;
  flex-direction:column;
}
.announcements-rank-body iframe {
  flex:1 1 auto;
  min-height:0;
  height:auto;
}
.login-announcement-option {
  flex:0 0 auto;
  box-sizing:border-box;
  width:100%;
  padding:9px 14px 10px;
  color:#eeeaff;
  border-top:1px solid #5e5390;
  background:rgba(10,9,22,.96);
  font-size:13px;
  line-height:20px;
}
.login-announcement-option label {
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:var(--tw-cursor-pointer, pointer);
  user-select:none;
}
.login-announcement-option input { margin:0; }
@media (max-width:850px) { .rank-float-panel { min-width:0; } }
.market-tabs { display:flex; align-items:center; gap:6px; padding-bottom:7px; border-bottom:1px solid #655598; flex:0 0 auto; }
.market-tabs button { min-width:92px; padding:5px 9px; color:#d9d1ef; border:1px solid #584a85; border-radius:4px; background:#292244; font:inherit; font-size:12px; }
.market-tabs button.active { color:#fff5bd; border-color:#ffe36a; background:#5b478e; box-shadow:0 0 8px #dcb95455; }
.market-tabs span { margin-left:auto; color:#c5bcdf; font-size:12px; }
.market-tabs b { margin-left:4px; color:#ffe36a; font-size:15px; text-shadow:0 1px 2px #000; }
.market-content {
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
.market-toolbar { display:flex; align-items:center; gap:9px; margin-bottom:8px; flex:0 0 auto; }
.market-toolbar input,.market-toolbar select,.market-list-controls input,.market-list-controls select { box-sizing:border-box; min-height:27px; color:#fff; border:1px solid #7463a8; border-radius:4px; background:#100e1d; font:inherit; }
.market-toolbar input { width:250px; padding:4px 8px; }
.market-toolbar select { max-width:132px; padding:3px 5px; font-size:11px; }
.market-toolbar span { color:#aaa1c6; font-size:11px; }
.market-toolbar span.loading { color:#fff0a0; animation:market-loading-pulse .8s ease-in-out infinite alternate; }
.game-select-shell { position:relative; display:inline-block; min-width:96px; vertical-align:middle; }
.game-select-native { position:absolute !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; }
.game-select-button { box-sizing:border-box; width:100%; min-height:27px; padding:3px 22px 3px 7px; overflow:hidden; border:1px solid #7463a8; border-radius:4px; background:#100e1d; color:#fff; font:11px/1.25 inherit; text-align:left; white-space:nowrap; text-overflow:ellipsis; }
.game-select-options { position:absolute; z-index:42000; top:calc(100% + 2px); left:0; display:none; min-width:100%; max-height:230px; overflow-y:auto; padding:3px; border:1px solid #8b79c7; border-radius:4px; background:rgba(13,10,29,.98); box-shadow:0 7px 18px #000c; }
.game-select-shell.open .game-select-options { display:grid; gap:2px; }
.game-select-option { display:block; width:100%; min-width:max-content; padding:4px 8px; border:0; border-radius:3px; background:transparent; color:#eee9ff; font:11px/1.2 inherit; text-align:left; white-space:nowrap; }
.game-select-option:hover,.game-select-option.selected { background:#4b3d83; color:#fff6ad; }
.market-toolbar .game-select-shell { max-width:132px; }
.store-catalog-tools .game-select-shell { min-width:118px; }
@keyframes market-loading-pulse { from { opacity:.55; } to { opacity:1; } }
/* 瀏覽列表：往下填滿剩餘空間，欄寬固定，超出才捲動 */
.market-rows {
  display:grid;
  gap:5px;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 4px 8px 0;
  align-content:start;
}
.market-row { display:grid; grid-template-columns:34px minmax(0,1.4fr) 72px 110px 56px 54px; align-items:center; gap:8px; min-height:42px; height:42px; padding:4px 7px; border:1px solid #443769; border-radius:5px; background:#211b3b; box-sizing:border-box; }
.market-row:hover { border-color:#9a84d9; background:#312852; }
.market-row.unaffordable { opacity:.72; }
.market-row img,.market-inventory-item img { width:auto; height:auto; max-width:30px; max-height:30px; justify-self:center; image-rendering:pixelated; }
.market-row b { min-width:0; overflow:hidden; color:#f5f1ff; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:12px; }
.market-row b.rarity-0 { color:#f5f1ff !important; }
.market-row b.rarity-1 { color:#9a7ad0 !important; }
.market-row b.rarity-2 { color:#e8c840 !important; }
.market-row b.rarity-3 { color:#f0b0c8 !important; }
.market-row b.rarity-4 { color:#60e070 !important; }
.market-row b.rarity-5 { color:#c0c0c0 !important; }
.market-row b.rarity-6 { color:#f09040 !important; }
.market-row b.rarity-7 { color:#40c0f0 !important; }
.market-row b.rarity-8,.market-row b.rarity-9,.market-row b.rarity-10,.market-row b.rarity-11 { color:#e060e0 !important; }
.market-row span,.market-row small { color:#bbb2d2; text-align:center; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.market-row strong { color:#ffe36a; text-align:center; text-shadow:0 1px 2px #000; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.market-row strong em { display:block; color:#aaa1c6; font:normal 9px/1.05 var(--numeric); text-shadow:none; }
.market-row button { min-width:50px; padding:4px 6px; font-size:10px; }
.market-row button:disabled { opacity:.55; cursor:not-allowed; filter:grayscale(.55); }
.market-empty { margin:12px; color:#a59bbd; text-align:center; font-size:12px; }
/* 我的上架分頁：上方表單固定，下方「我的上架」獨立捲動（約多顯示兩列） */
.market-list-tab { display:grid; grid-template-rows:auto minmax(120px,1fr); gap:8px; min-height:0; height:100%; overflow:hidden; }
.market-own-block { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.market-own-block h4 { flex:0 0 auto; margin:0 0 5px; }
.market-own-block .market-rows { flex:1 1 auto; min-height:96px; }
/* 我的上架：每行兩樣道具 */
.market-own-rows {
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:6px !important;
}
.market-own-rows .market-row {
  grid-template-columns:30px minmax(0,1fr) minmax(72px,auto) 48px 50px !important;
  height:40px;
  min-height:40px;
}
/* 自己的上架不需再顯示賣家名稱 */
.market-own-rows .market-row > span { display:none; }
.market-own-rows .market-empty {
  grid-column:1 / -1;
}
.market-listing-form { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:10px; min-height:276px; max-height:292px; margin-bottom:0; flex:0 0 auto; }
.market-inventory { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; gap:6px; overflow-y:auto; max-height:276px; padding:7px; border:1px solid #5d4e8c; border-radius:6px; background:#100e1d; }
.market-inventory-item { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:3px; min-height:39px; padding:3px; color:#e8e2f7; text-align:left; border:1px solid #403466; border-radius:4px; background:#292246; font:inherit; font-size:10px; }
.market-inventory-item:hover,.market-inventory-item.selected { border-color:#ffe36a; background:#4b3a75; }
.market-inventory-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.market-list-controls { display:grid; align-content:start; gap:7px; padding:8px; border:1px solid #655598; border-radius:6px; background:#18132c; }
.market-list-controls > b { min-height:18px; overflow:hidden; color:#fff5bd; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.market-list-controls label { display:grid; grid-template-columns:68px minmax(0,1fr); align-items:center; gap:5px; color:#c7bedf; font-size:11px; }
.market-list-controls input,.market-list-controls select { width:100%; padding:4px 6px; }
.market-list-controls button { margin-top:3px; min-height:30px; }
.market-list-controls small { color:#9f95bd; line-height:1.45; font-size:10px; }
.market-net-preview { padding:5px 6px; color:#ffe36a; text-align:center; border:1px solid #514477; border-radius:4px; background:#100e1d; font-size:10px; }
.market-content h4 { margin:0 0 5px; color:#fff5bd; font-size:12px; }
.market-history-tab {
  display:flex;
  flex-direction:column;
  min-height:0 !important;
  height:100%;
  overflow:hidden;
}
.market-history-tabs {
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  margin-bottom:8px;
  padding-bottom:7px;
  border-bottom:1px solid #655598;
}
.market-history-tabs button {
  min-width:88px;
  padding:4px 8px;
  color:#d9d1ef;
  border:1px solid #584a85;
  border-radius:4px;
  background:#292244;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.market-history-tabs button.active {
  color:#fff5bd;
  border-color:#ffe36a;
  background:#5b478e;
  box-shadow:0 0 8px #dcb95455;
}
.market-history-tabs span {
  margin-left:auto;
  color:#a89dc2;
  font-size:11px;
}
.market-history {
  display:grid;
  gap:5px;
  flex:1 1 auto !important;
  min-height:0 !important;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 4px 8px 0;
  align-content:start;
  box-sizing:border-box;
}
.market-history > div {
  display:grid;
  grid-template-columns:28px 54px minmax(0,1fr) 125px minmax(155px,.9fr);
  align-items:center;
  gap:8px;
  min-height:38px;
  height:38px;
  padding:4px 8px;
  border:1px solid #443769;
  border-radius:5px;
  background:#211b3b;
  box-sizing:border-box;
}
.market-history-row { cursor:help; }
.market-history-row > img { justify-self:center; width:auto; height:auto; max-width:26px; max-height:26px; image-rendering:pixelated; }
.market-history .market-empty { grid-column:1 / -1; }
.market-history b { color:#fff5bd; text-align:center; font-size:11px; }
.market-history span { min-width:0; overflow:hidden; color:#eeeaff; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.market-history strong { color:#ffe36a; text-align:center; font-size:11px; }
.market-history small { color:#a89dc2; text-align:right; font-size:10px; }
@media (max-width:850px) { .market-float-panel { min-width:0; } .market-row { grid-template-columns:30px minmax(0,1fr) 90px 54px; } .market-row span,.market-row small { display:none; } .market-listing-form { grid-template-columns:1fr; } .market-inventory { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* 寬版 MMORPG 商城：分類／商品櫥窗／購物車三欄並列。 */
.store-float-panel { max-width:calc(100vw - 48px); min-width:900px; height:min(850px, calc(100vh - 32px)); }
.store-float-panel .float-body { flex:1 1 auto; min-height:0; max-height:none; overflow:hidden; }
.store-body { grid-template-rows:minmax(0,1fr) auto auto; }
.store-layout { display:grid; grid-template-columns:150px minmax(0,1fr) 330px; gap:12px; align-items:stretch; min-width:0; min-height:0; }
.store-categories { display:grid; gap:6px; align-content:start; min-height:360px; padding:8px; border:1px solid #66559a; border-radius:8px; background:linear-gradient(155deg,#28204d,#100e20); }
.store-category-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:38px; padding:7px 9px; color:#dcd5f3; text-align:left; border:1px solid #4f437b; border-radius:5px; background:linear-gradient(#332957,#1d1836); font:inherit; font-size:12px; }
.store-category-button span { color:#9c91bd; font-size:10px; }
.store-category-button:hover { color:#fff5bf; border-color:#ad96e9; background:linear-gradient(#4b3c7c,#282046); }
.store-category-button.active { color:#fff6bd; border-color:#ffe36a; background:linear-gradient(#705baf,#3c3064); box-shadow:inset 0 0 0 1px #ffe36a66,0 0 10px #d9bc4f55; }
.store-catalog { display:grid; grid-template-rows:27px 30px minmax(0,1fr) 25px; gap:7px; min-width:0; min-height:0; }
.store-catalog-head { display:flex; align-items:baseline; gap:8px; min-height:27px; padding:0 3px; color:#eeeaff; }
.store-catalog-head b { color:#fff5bd; font-size:14px; letter-spacing:.5px; }
.store-catalog-head span { color:#a89ec4; font-size:11px; }
.store-catalog-tools { display:grid; grid-template-columns:minmax(0,1fr) 124px; gap:7px; min-height:30px; }
.store-catalog-tools input,.store-catalog-tools select { min-width:0; height:29px; box-sizing:border-box; padding:4px 7px; color:#f4efff; border:1px solid #66559a; border-radius:5px; background:#100e1d; font:inherit; font-size:11px; }
.store-layout .store-products { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:9px; min-height:0; overflow:hidden; }
.store-layout .store-product-card { min-height:0; grid-template-columns:1fr; grid-template-rows:58px minmax(48px,1fr); justify-items:center; gap:8px; padding:11px; text-align:center; }
.store-layout .store-product-icon { justify-self:center; }
.store-layout .store-product-main { width:100%; justify-items:center; text-align:center; }
.store-layout .store-product-main b { max-width:100%; font-size:13px; }
.store-layout .store-product-main .store-price { margin-top:auto; font-size:16px; }
.store-layout .store-product-empty { min-height:0; }
.store-layout .store-pager { min-height:25px; }
.store-order-panel { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:8px; min-width:0; min-height:0; padding:9px; border:1px solid #66559a; border-radius:8px; background:linear-gradient(155deg,#211b40,#100e20); }
.store-order-panel .store-purchase { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; padding:8px; }
.store-order-panel .store-purchase > span { grid-column:1 / -1; min-height:18px; }
.store-order-panel .store-purchase b { min-width:0; text-align:left; }
.store-order-panel .store-purchase button { min-width:82px; }
.store-order-panel .store-cart { max-height:none; min-height:0; }
.store-order-panel .store-checkout { margin-top:1px; }
@media (max-width:1100px) {
  .store-float-panel { min-width:0; }
  .store-layout { grid-template-columns:118px minmax(0,1fr); }
  .store-order-panel { grid-column:1 / -1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .store-order-panel .store-purchase,.store-order-panel .store-cart-head,.store-order-panel .store-cart,.store-order-panel .store-checkout { grid-column:1; }
  .store-order-panel .store-cart-head,.store-order-panel .store-cart,.store-order-panel .store-checkout { grid-column:2; }
  .store-layout .store-products { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .store-float-panel { width:calc(100vw - 20px) !important; left:10px !important; }
  .store-layout { grid-template-columns:1fr; }
  .store-categories { grid-template-columns:repeat(3,minmax(0,1fr)); min-height:0; }
  .store-category-button { justify-content:center; text-align:center; }
  .store-category-button span { display:none; }
  .store-order-panel { grid-column:auto; display:grid; grid-template-columns:1fr; }
  .store-order-panel .store-purchase,.store-order-panel .store-cart-head,.store-order-panel .store-cart,.store-order-panel .store-checkout { grid-column:auto; }
  .store-layout .store-products { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.item-target-list { display:grid; gap:5px; max-height:210px; overflow:auto; margin-top:9px; }
.item-target-choice { text-align:left; color:#f4efff; background:#242047cc; border:1px solid #7668ad; border-radius:5px; padding:6px 8px; }
.item-target-choice:hover { color:#fff5bd; border-color:#ead36b; background:#4b407a; }
.warp-point-list { display:grid; gap:4px; max-height:258px; overflow-y:auto; margin-top:9px; padding:5px; border:1px solid #66559a; border-radius:6px; background:linear-gradient(145deg,#2b2460e8,#17132ddd); }
.warp-episode-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin:8px 0 6px; }
.warp-episode-tab { min-width:0; padding:5px 2px; color:#d9d1f5; font:700 10px/1 var(--numeric); border:1px solid #6d5ba4; border-radius:4px; background:linear-gradient(#393063,#1d1837); }
.warp-episode-tab:hover { color:#fff9bd; border-color:#c9b166; background:linear-gradient(#5b4b87,#2e2751); }
.warp-episode-tab.active { color:#fff9bd; border-color:#ffe36a; background:linear-gradient(#7660ad,#403466); box-shadow:inset 0 0 0 1px #ffe36a66,0 0 7px #e6c84d55; }
.warp-empty { padding:18px 8px; color:#aaa0c9; text-align:center; font-size:11px; }
.warp-episode { position:static; margin-top:3px; padding:4px 6px; color:#e6dcff; font:700 10px/1.1 var(--numeric); background:#4c3b8ddd; border-bottom:1px solid #8874cb; }
.warp-point-choice { display:flex; align-items:baseline; gap:8px; width:100%; padding:5px 7px; text-align:left; color:#f1edff; border:1px solid transparent; border-radius:4px; background:#201a47cc; }
.warp-point-choice small { margin-left:auto; color:#bdb3e4; font-size:10px; white-space:nowrap; }
.warp-point-choice:hover,.warp-point-choice.selected { color:#fff9be; border-color:#e8d36a; background:#514080; }
/* 傳送之陣：固定交易窗式外框與固定 8 個可視欄位，EP 目的地多寡不改變視窗大小。 */
.game-confirm.warp-dialog-active { display:flex; flex-direction:column; width:min(365px, calc(100vw - 24px)) !important; max-width:none !important; height:min(395px, calc(100vh - 24px)) !important; max-height:none !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; }
.warp-dialog-active .pin-body { flex:1 1 auto; min-height:0; padding:0 !important; overflow:visible !important; background:transparent !important; }
.warp-legacy-main { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; padding:7px; border:1px solid rgba(0,0,0,.95); border-bottom:0; border-radius:5px 5px 0 0; background:rgba(0,0,0,.82); box-shadow:0 4px 16px rgba(0,0,0,.55); }
.warp-dialog-active .warp-episode-tabs { flex:0 0 auto; margin:2px 0 6px; }
.warp-dialog-active .warp-point-list { display:grid; grid-auto-rows:29px; flex:1 1 auto; min-height:0; height:auto; max-height:268px; margin:0; padding:4px; overflow-y:auto; border-radius:4px; }
.warp-dialog-active .warp-point-choice,
.warp-point-empty-slot { min-height:29px; height:29px; box-sizing:border-box; }
.warp-point-empty-slot { display:flex; align-items:center; justify-content:center; color:#7d759a; border:1px solid #302948; border-radius:4px; background:#131121aa; font:700 12px/1 var(--numeric); }
.warp-dialog-active .warp-point-choice.selected { color:#fffbd0; border-color:#ffe46c; background:linear-gradient(90deg,#7c60ba,#403067); box-shadow:inset 0 0 0 1px #fff1a4aa,0 0 9px #e8cf5e88; }
.warp-dialog-active .pin-foot { flex:0 0 auto; margin:0; padding:0 7px 12px; border:1px solid rgba(0,0,0,.95); border-top:0; border-radius:0 0 5px 5px; background:rgba(0,0,0,.82); }
.trash-drop-zone { width:72px; min-height:72px; margin:12px auto 0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:2px dashed #8d75a8; border-radius:7px; background:#0e0d14cc; color:#d5c7e9; font-size:10px; line-height:1.25; }
.trash-drop-zone.drag-over { border-color:#ffe36a; background:#40345d; color:#fff5bd; }
.trash-drop-zone b { color:#fff0a3; }
.trash-item-icon { width:auto; height:auto; max-width:34px; max-height:34px; object-fit:contain; image-rendering:pixelated; }
.enhance-drop-zone { border-color:#7dcae5; background:radial-gradient(circle,#1c3650cc,#0e0d14cc 72%); }
.enhance-drop-zone.drag-over { border-color:#83f3ff; background:#24536b; color:#effdff; box-shadow:0 0 12px #52d9f088; }
.enhance-drop-zone { position:relative; overflow:visible; }
.enhance-fx { position:absolute; inset:-35px; z-index:8; pointer-events:none; }
.enhance-fx-success::before { content:""; position:absolute; inset:30px; border:3px solid #fffbd2; border-radius:50%; box-shadow:0 0 8px 4px #f6d35b,0 0 24px 12px #74e9ff99; animation:enhanceRing .9s ease-out forwards; }
.enhance-fx-success::after { content:""; position:absolute; inset:0; border-radius:50%; opacity:0; background:repeating-conic-gradient(from 0deg,#fff8bc 0deg 4deg,transparent 5deg 27deg); filter:drop-shadow(0 0 6px #f8da68); animation:enhanceRays .82s ease-out forwards; }
.enhance-fx-failure { border-radius:50%; background:radial-gradient(circle,#fff1b0 0 7%,#ff9a34 11%,#a7241c 25%,transparent 61%); filter:drop-shadow(0 0 8px #ff632e); animation:enhanceBlast .72s ease-out forwards; }
.enhance-fx-failure i { position:absolute; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle,#6f6a70 0 18%,#2b292d 48%,transparent 70%); opacity:0; animation:enhanceSmoke 1s ease-out forwards; }
.enhance-fx-failure i:nth-child(1) { left:9%; top:24%; animation-delay:.08s; }
.enhance-fx-failure i:nth-child(2) { right:10%; top:16%; animation-delay:.14s; }
.enhance-fx-failure i:nth-child(3) { left:23%; bottom:8%; animation-delay:.2s; }
.enhance-fx-failure i:nth-child(4) { right:22%; bottom:5%; animation-delay:.05s; }
@keyframes enhanceRing { 0%{transform:scale(.2);opacity:1} 70%{opacity:.88} 100%{transform:scale(2.25);opacity:0} }
@keyframes enhanceRays { 0%{transform:scale(.2) rotate(0);opacity:.95} 100%{transform:scale(1.7) rotate(24deg);opacity:0} }
@keyframes enhanceBlast { 0%{transform:scale(.18);opacity:1} 55%{transform:scale(1.1);opacity:.9} 100%{transform:scale(1.6);opacity:0} }
@keyframes enhanceSmoke { 0%{transform:translate(0,4px) scale(.35);opacity:0} 20%{opacity:.8} 100%{transform:translate(var(--smoke-x,0),-34px) scale(1.9);opacity:0} }
.enhance-status { box-sizing:border-box; width:100%; min-height:28px; margin:0; padding:6px 8px; color:#fff1a1; font-size:11px; line-height:1.35; border:1px solid #66559a; border-radius:0 0 5px 5px; background:#0d0b18dd; text-shadow:0 1px 2px #000; }
.game-confirm:has(#enhanceStatus[style*="display: block"]) .pin-foot { border-bottom:0; }
.enhance-result { margin-top:7px; color:#fff27b; font-weight:700; text-shadow:0 1px 2px #000; }
.game-confirm.sell-dialog-active { display:flex; flex-direction:column; width:min(365px, calc(100vw - 24px)) !important; max-width:none !important; height:min(570px, calc(100vh - 24px)) !important; max-height:none !important; }
.sell-dialog-active .pin-body { flex:1 1 auto; min-height:0; overflow:hidden; padding:7px; }
.sell-legacy-layout { display:grid; grid-template-columns:50px minmax(0,1fr); height:100%; min-height:0; gap:5px; }
.sell-side-actions { display:grid; grid-template-rows:repeat(4, 34px); align-content:start; gap:5px; padding-top:2px; }
.sell-side-tab { width:100%; min-width:0; padding:3px 1px; color:#eee8ff; border:1px solid #7765ae; border-radius:4px !important; background:linear-gradient(180deg,#5b4a8e,#2d2554); font:700 10px/1.1 inherit; cursor:pointer; }
.sell-side-tab:hover:not(:disabled),.sell-side-tab.active { color:#fff6bf; border-color:#f0db76; background:linear-gradient(180deg,#7964b5,#41346e); box-shadow:0 0 7px #d6bb4f66; }
.sell-side-tab:disabled,.sell-side-tab.sell-tab-disabled { color:#7b748d !important; border-color:#3d3950 !important; background:linear-gradient(#252333,#161522) !important; opacity:.6; cursor:inherit !important; pointer-events:none !important; box-shadow:none !important; }
.sell-legacy-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.sell-titlebar { display:flex; align-items:center; gap:6px; min-height:27px; margin:0 0 5px; padding:5px 7px; color:#fff5bd; border:1px solid #9d88cf; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#6a57ad,#3b2f75); font-weight:700; cursor:move; user-select:none; }
.sell-titlebar small { margin-left:auto; color:#d2c9ed; font-size:10px; font-weight:400; }
.sell-titlebar .float-close { margin-left:auto !important; color:#fff; font-size:17px; }
.sell-shop-note { margin:2px 0 7px; color:#c7bedf; font-size:11px; }
.sell-qty-dialog { z-index:29000 !important; width:138px !important; }
.sell-qty-input { display:block; width:100%; margin-top:8px; padding:6px; color:#fff; text-align:center; border:1px solid #8e7ac3; border-radius:4px; background:#100d1d; }
.sell-toolbar { display:flex; align-items:center; min-height:22px; margin-top:4px; padding:3px 6px; color:#fff5bd; border:1px solid #6d5ca4; border-radius:4px 4px 0 0; background:linear-gradient(90deg,#4f3e84,#282044); font-size:11px; }
.sell-toolbar button { margin-left:auto; min-width:112px; padding:3px 7px; font-size:10px; }
.sell-grid { display:grid; grid-template-columns:minmax(0, 1fr); grid-auto-rows:35px; gap:3px; justify-content:stretch; overflow-y:auto; padding:4px; border:1px solid #5f508d; border-top:0; border-radius:0 0 4px 4px; background:#100e1ddd; }
.sell-inventory-grid,.sell-sale-grid { height:190px; }
.sell-item { display:grid; grid-template-columns:26px minmax(0,1fr) 57px; align-items:center; gap:5px; width:100%; height:35px; min-height:35px; padding:3px 5px; color:#eeeaff; text-align:left; border:1px solid #423667; border-radius:3px; background:#292247; }
.sell-item:hover { border-color:#cbb265; background:#44386d; }
.sell-item.in-sale { border-color:#9a7fc4; background:#352958; }
.sell-item img { justify-self:center; width:auto; height:auto; max-width:26px; max-height:26px; image-rendering:pixelated; }
.sell-item b { overflow:hidden; color:#f8f5ff; font-size:11px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.sell-item b.rarity-0 { color:#f5f1ff !important; }
.sell-item b.rarity-1 { color:#9a7ad0 !important; }
.sell-item b.rarity-2 { color:#e8c840 !important; }
.sell-item b.rarity-3 { color:#f0b0c8 !important; }
.sell-item b.rarity-4 { color:#60e070 !important; }
.sell-item b.rarity-5 { color:#c0c0c0 !important; }
.sell-item b.rarity-6 { color:#f09040 !important; }
.sell-item b.rarity-7 { color:#40c0f0 !important; }
.sell-item b.rarity-8,.sell-item b.rarity-9,.sell-item b.rarity-10,.sell-item b.rarity-11 { color:#e060e0 !important; }
.sell-item small { color:#ffe36a; font-size:11px; text-align:center; }
.sell-empty { grid-column:1 / -1; align-self:center; padding:12px; color:#9890b3; text-align:center; font-size:11px; }
.sell-summary { display:flex; justify-content:space-between; gap:6px; margin-top:5px; padding:5px 7px; color:#d4cdea; border:1px solid #6b5a9e; border-radius:4px; background:#0c0b16dd; font-size:10px; }
.sell-summary b { color:#fff16a; text-shadow:0 1px 2px #000; }
.sell-status { margin-top:5px; color:#fff1a1; text-align:center; font-size:11px; }
.sell-dialog-active .pin-foot { flex:0 0 auto; margin:0 0 14px 55px; padding:0 7px 12px; border:1px solid rgba(0,0,0,.95); border-top:0; border-radius:0 0 5px 5px; background:rgba(0,0,0,.82); }
.sell-dialog-active .pin-foot .pin-ok { min-width:58px; padding:5px 8px; }
.manufacture-confirm { position:fixed; z-index:27000 !important; width:min(310px, calc(100vw - 24px)); color:#f1edf9; background:rgba(3,4,8,.91); border-color:#7560a8; box-shadow:0 10px 30px rgba(0,0,0,.72); }
.manufacture-confirm .pin-body { padding:13px 15px 11px; line-height:1.65; text-align:center; }
.manufacture-confirm .tt-name { color:#ffe477; }
.manufacture-confirm .manufacture-target { color:#fff; font-weight:700; }
.manufacture-confirm .manufacture-seed { color:#ffe36a; font-weight:700; }
.tt-mark-gold { color:#ffe36a !important; font-weight:700; text-shadow:0 1px 2px #000; }
.tt-mark-red { color:#ff6262 !important; font-weight:700; text-shadow:0 1px 2px #000; }
.tt-mark-green { color:#9dffb2 !important; font-weight:700; text-shadow:0 1px 2px #000; }
.tt-mark-orange { color:#dc9965 !important; font-weight:700; text-shadow:0 1px 2px #000; }

/* 原版式交易窗：左側功能鈕不再被黑色交易框包住，框線只沿交易內容本身。 */
.game-confirm.sell-dialog-active {
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.sell-dialog-active .pin-body { padding:0 !important; overflow:visible !important; background:transparent !important; }
.sell-legacy-main {
  border:1px solid rgba(0,0,0,.95);
  border-bottom:0;
  border-radius:5px 5px 0 0;
  background:rgba(0,0,0,.82);
  box-shadow:0 4px 16px rgba(0,0,0,.55);
  padding:7px;
}
.sell-side-actions { align-self:start; height:max-content; padding:5px; border:1px solid rgba(0,0,0,.95); border-radius:5px; background:rgba(0,0,0,.82); box-shadow:0 4px 16px rgba(0,0,0,.45); }
.sell-side-tab:disabled,.sell-side-tab.sell-tab-disabled { cursor:inherit !important; pointer-events:none !important; }
.farm-float-panel { height:840px !important; max-height:none !important; overflow:hidden !important; }
.farm-float-panel .farm-config-body {
  flex:1 1 auto;
  min-height:0;
  max-height:none !important;
  padding-bottom:20px;
  overflow:hidden !important;
}
.farm-skill-settings { display:grid; gap:6px; margin:7px 0 8px; padding:7px 0 0; border-top:1px solid rgba(149,132,220,.42); }
.farm-attack-picker-wrap { flex:1; min-width:0; }
.tt-damaged { color:#ff6969 !important; font-weight:700; text-shadow:0 1px 2px #000; }
.bag-slot[draggable="true"] { cursor:grab; }
.bag-slot[draggable="true"]:active { cursor:grabbing; }
.bag-slot[draggable="true"],.equip-slot[draggable="true"],.warehouse-slot[draggable="true"] {
  -webkit-user-drag:none;
  user-select:none;
  touch-action:none;
}
body.custom-cursor-on::-webkit-scrollbar,
body.custom-cursor-on *::-webkit-scrollbar,
body.custom-cursor-on *::-webkit-scrollbar-track,
body.custom-cursor-on *::-webkit-scrollbar-thumb { cursor:url('DTX/00000.PNG') 0 0, none !important; }
button, input, select, .float-panel, .side-panel, .chatpanel, .half-panel, .bag-slot, .equip-slot, .item-tooltip, .item-desc-pin, #ctxMenu { border-radius:6px !important; }

/* 背包整理列：移除「整理」字樣後，四個按鈕平均置中。 */
.bag-tools { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:5px; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; justify-content:center; }
.bag-tools .bag-sort-btn { width:100%; min-width:0; }

.skill-panel-page { max-width:760px; margin:0 auto; }
.skill-section-title { margin:8px 0 5px; color:#efe7a0; font-weight:700; font-size:12px; }
.skill-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:6px; min-height:38px; }
.skill-series-tabs { display:flex; flex-wrap:wrap; gap:5px; min-height:28px; }
.skill-series-btn { padding:4px 7px; font-size:10px; line-height:1.15; border:1px solid #7064aa; border-radius:5px; color:#e9e3ff; background:#211c43; cursor:pointer; }
.skill-series-btn:hover, .skill-series-btn.active { border-color:#f3df7b; background:#4b417f; color:#fff7b5; box-shadow:0 0 7px #d5ba5066; }
.skill-card { padding:7px 9px; border:1px solid #7164b4; border-radius:6px; background:rgba(19,15,44,.78); }
.skill-card.owned { border-color:#d5bd62; box-shadow:inset 0 0 9px #b99c371f; }
.skill-name { color:#f8f4ff; font-size:12px; }
.skill-meta { color:#b9b0d8; font-size:10px; margin-top:3px; }

/* 技能比照屬性／裝備使用獨立浮動欄，底層地圖或對話頁保持原樣。 */
.skill-float-panel { min-width:330px; max-width:min(560px, calc(100vw - 24px)); }
.skill-float-body { width:100%; box-sizing:border-box; max-height:min(620px, calc(100vh - 130px)); }
.skill-float-panel .skill-list { grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); }

/* 背包：第一列 hover 需蓋過整理列；數量顯示於圖示右下。 */
#bagGrid { position:relative; z-index:2; overflow:visible !important; max-height:none !important; }
.bag-tools { position:relative; z-index:1; }
.bag-slot.has-item:hover { z-index:8 !important; }
.bag-slot .item-qty { position:absolute; right:2px; bottom:0; z-index:9; color:#fff04a; font:700 12px/1 var(--numeric); text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000; pointer-events:none; }

/* HP/MP／禁售／Buff／攻擊對象：自訂下拉；圖示原尺寸置中，中文在名稱欄垂直置中 */
.farm-item-picker-wrap { position:relative; }
.farm-native-select { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.farm-item-picker {
  width:100%; min-height:30px; display:flex; align-items:center; gap:6px;
  padding:4px 6px; color:#f3efff; background:#17132e; border:1px solid #7165ad; border-radius:5px; text-align:left;
}
.farm-item-picker .farm-item-icon {
  display:none; width:auto !important; height:auto !important; max-width:none !important; max-height:none !important;
  object-fit:none; image-rendering:pixelated; flex:0 0 auto; align-self:center; margin:0;
}
.farm-item-picker .farm-item-label {
  min-width:0; flex:1 1 auto; min-height:22px;
  display:flex !important; align-items:center !important; justify-content:flex-start;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.25;
}
.farm-item-picker b { color:#d8ceff; font-size:11px; flex:0 0 auto; align-self:center; line-height:1; }
.farm-item-menu {
  display:none; position:absolute; z-index:10020; left:0; right:0; top:calc(100% + 3px);
  max-height:190px; overflow-y:auto; padding:3px; background:rgba(7,6,14,.96);
  border:1px solid #a092e1; border-radius:6px; box-shadow:0 5px 18px #000c;
}
.farm-item-menu.open { display:block; }
.farm-simple-option {
  width:100%; min-height:30px; padding:4px 8px; border:0; border-radius:4px;
  color:#f4f0ff; background:transparent; text-align:left; font:12px var(--mono);
}
.farm-simple-option:hover,.farm-simple-option:focus { background:#4a3b82; color:#fff7bf; outline:0; }
/* 下拉每一列：固定圖示欄 + 名稱欄，各自置中 */
button.farm-item-option,
.farm-item-option {
  width:100% !important;
  display:grid !important;
  grid-template-columns:28px 1fr !important;
  align-items:center !important;
  column-gap:8px !important;
  min-height:34px !important;
  height:auto !important;
  padding:4px 8px !important;
  margin:0 !important;
  color:#f4f0ff !important;
  background:transparent !important;
  border:0 !important;
  border-radius:4px !important;
  box-shadow:none !important;
  text-align:left !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  cursor:pointer;
}
label.farm-buff-option,
.farm-buff-option {
  width:100% !important;
  display:grid !important;
  grid-template-columns:16px 28px 1fr auto !important;
  align-items:center !important;
  column-gap:8px !important;
  min-height:34px !important;
  height:auto !important;
  padding:4px 8px !important;
  margin:0 !important;
  color:#f4f0ff !important;
  background:transparent !important;
  border:0 !important;
  border-radius:4px !important;
  box-shadow:none !important;
  text-align:left !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  cursor:pointer;
}
label.farm-hunt-option,
.farm-hunt-option {
  width:100% !important;
  display:grid !important;
  grid-template-columns:16px 1fr !important;
  align-items:center !important;
  column-gap:8px !important;
  min-height:34px !important;
  height:auto !important;
  padding:4px 8px !important;
  margin:0 !important;
  color:#f4f0ff !important;
  background:transparent !important;
  border:0 !important;
  border-radius:4px !important;
  box-shadow:none !important;
  text-align:left !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  cursor:pointer;
}
button.farm-item-option:hover,
.farm-item-option:hover,
.farm-buff-option:hover,
.farm-hunt-option:hover {
  background:#4b417f !important;
  color:#f4f0ff !important;
  border-color:transparent !important;
}
.farm-item-option .farm-opt-icon,
.farm-buff-option .farm-opt-icon {
  width:28px !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}
.farm-item-option .farm-opt-icon img,
.farm-buff-option .farm-opt-icon img {
  width:auto !important;
  height:auto !important;
  max-width:28px !important;
  max-height:28px !important;
  object-fit:contain !important;
  image-rendering:pixelated !important;
  display:block !important;
  margin:0 auto !important;
  padding:0 !important;
}
.farm-item-option .farm-opt-name,
.farm-buff-option .farm-buff-name,
.farm-hunt-option .farm-hunt-name {
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  line-height:1.35 !important;
  margin:0 !important;
  padding:0 !important;
  height:28px !important;
}
.farm-buff-option input[type="checkbox"],
.farm-buff-option input[type="radio"],
.farm-hunt-option input[type="checkbox"] {
  width:14px !important;
  height:14px !important;
  margin:0 auto !important;
  justify-self:center !important;
  align-self:center !important;
}
.farm-buff-option .farm-buff-lv {
  color:#c8b870 !important;
  font-size:11px !important;
  display:flex !important;
  align-items:center !important;
  height:28px !important;
  margin:0 !important;
  white-space:nowrap !important;
}
.farm-buff-option.farm-attack-option { grid-template-columns:42px minmax(0,1fr) 84px !important; column-gap:5px !important; }
.farm-attack-option .farm-opt-icon,.farm-attack-option .farm-buff-name,.farm-attack-option .farm-buff-lv { justify-self:stretch; text-align:center !important; justify-content:center !important; }
.farm-attack-option .farm-buff-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.farm-buff-picker-wrap,
.farm-hunt-picker-wrap { flex:1; min-width:0; }
/* 下拉／裝備名稱稀有度色（覆蓋預設字色） */
.farm-item-option span.rarity-0,
.farm-item-picker .farm-item-label.rarity-0,
.equip-item-name.rarity-0 { color:#f0f0f0 !important; }
.farm-item-option span.rarity-1,
.farm-item-picker .farm-item-label.rarity-1,
.equip-item-name.rarity-1 { color:#9a7ad0 !important; }
.farm-item-option span.rarity-2,
.farm-item-picker .farm-item-label.rarity-2,
.equip-item-name.rarity-2 { color:#e8c840 !important; }
.farm-item-option span.rarity-3,
.farm-item-picker .farm-item-label.rarity-3,
.equip-item-name.rarity-3 { color:#f0b0c8 !important; }
.farm-item-option span.rarity-4,
.farm-item-picker .farm-item-label.rarity-4,
.equip-item-name.rarity-4 { color:#60e070 !important; }
.farm-item-option span.rarity-5,
.farm-item-picker .farm-item-label.rarity-5,
.equip-item-name.rarity-5 { color:#c0c0c0 !important; }
.farm-item-option span.rarity-6,
.farm-item-picker .farm-item-label.rarity-6,
.equip-item-name.rarity-6 { color:#f09040 !important; }
.farm-item-option span.rarity-7,
.farm-item-picker .farm-item-label.rarity-7,
.equip-item-name.rarity-7 { color:#40c0f0 !important; }
.farm-item-option span.rarity-8,
.farm-item-option span.rarity-9,
.farm-item-option span.rarity-10,
.farm-item-option span.rarity-11,
.equip-item-name.rarity-8,
.equip-item-name.rarity-9,
.equip-item-name.rarity-10,
.equip-item-name.rarity-11 { color:#e060e0 !important; }

/* 基本頁：把垂直空間優先讓給對話紀錄，操作鈕縮小但仍保留可點擊面積。 */
#view-basic .chatpanel.compact { height:230px; }
#view-basic .chatToolbar .btn-small,
#view-basic .chatInputRow .btn-small { padding:2px 6px !important; font-size:10px; }
#view-basic .chatModeSelect { min-width:58px; max-width:66px; padding:3px 4px; font-size:11px; }
#view-basic .chatInputRow { gap:4px; margin-top:4px; }

/* 整個對話訊息區使用黑色半透明底；訊息本身不再逐行套底色。 */
.logbox, #logboxMain, #logboxFull, #gameLogBox { background:rgba(0,0,0,.66) !important; border-color:#3f3867 !important; }
.logbox .system, .logbox .combat, .logbox .chat, .logbox .whisper { margin:0; padding:0; background:transparent; }
.logbox .system { color:#cdb75d !important; text-shadow:0 1px #000; }
.logbox .combat { color:#aa7772 !important; }
.logbox .chat { color:#aaa6b6 !important; }
.logbox .whisper { color:#b991c7 !important; }

/* 背包內容由浮層本身捲動：將該捲軸強制改為深色，排除畫面中的白色直線。 */
#floatBag .bag-body { display:flex; flex-direction:column; height:min(620px, calc(100vh - 120px)); max-height:calc(100vh - 120px) !important; min-height:260px; overflow:hidden !important; }
#floatBag { contain:layout style; }
#floatBag .bag-grid-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:2px 7px 2px 0; contain:layout paint style; }
#floatBag .bag-grid { contain:layout style; }
#floatBag .bag-footer { flex:0 0 auto; display:flex !important; position:relative; z-index:4; margin:7px 0 0; padding:7px 1px 1px; background:transparent; }
#floatBag .bag-grid-scroll::-webkit-scrollbar { width:8px; }
#floatBag .bag-grid-scroll::-webkit-scrollbar-track { background:#15112a !important; border-radius:5px; }
#floatBag .bag-grid-scroll::-webkit-scrollbar-thumb { background:#554a8f !important; border:1px solid #211c43 !important; border-radius:5px; }
#floatBag .bag-grid-scroll { scrollbar-color:#554a8f #15112a !important; }

/* 背包列表瀏覽：空格不佔列，圖示／名稱／數量固定三欄且垂直置中。 */
#floatBag.bag-list-view { width:380px; }
#floatBag.bag-list-view .bag-grid {
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  gap:3px;
  padding-right:0;
}
#floatBag.bag-list-view .bag-slot {
  aspect-ratio:auto !important;
  min-height:31px;
  height:31px;
  display:grid !important;
  grid-template-columns:31px minmax(0, 1fr) 42px;
  align-items:center;
  gap:6px;
  padding:2px 7px 2px 4px;
  border-color:#7568b8;
  background:linear-gradient(90deg,#3f367d,#272050);
  text-align:center;
}
#floatBag.bag-list-view .bag-slot.empty { display:none !important; }
#floatBag.bag-list-view .bag-slot.has-item:hover { border-color:#f2dc84; background:linear-gradient(90deg,#5a4ea6,#33296c); }
#floatBag.bag-list-view .bag-slot .item-icon {
  width:auto !important;
  height:auto !important;
  max-width:28px;
  max-height:28px;
  justify-self:center;
  align-self:center;
  image-rendering:pixelated;
}
#floatBag.bag-list-view .bag-slot .item-name {
  min-width:0;
  min-height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  line-height:1.2;
  text-align:center;
  border:1px solid #6154a0;
  border-radius:999px;
  background:#51458f;
  box-shadow:none;
}
#floatBag.bag-list-view .bag-slot .item-qty {
  position:static;
  right:auto;
  bottom:auto;
  min-width:36px;
  min-height:23px;
  width:100%;
  justify-self:stretch;
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font:700 12px/1 var(--numeric);
  text-align:center;
  border:1px solid #6154a0;
  border-radius:999px;
  background:#51458f;
  box-shadow:none;
  text-shadow:0 1px 2px #000;
}

/* 基本狀態下方的稀有掉落：僅前端記憶體保存，登出後自然回到空欄。 */
#basicLeft { display:flex; flex-direction:column; min-height:0; }
.rare-loot-panel { display:flex; flex:1 1 auto; flex-direction:column; min-height:130px; margin-top:13px; padding:7px; border:1px solid rgba(188,170,250,.82); border-radius:5px; background:linear-gradient(145deg,rgba(48,38,104,.62),rgba(17,13,42,.7)); box-shadow:inset 0 0 0 1px rgba(8,5,28,.7); }
.rare-loot-title { flex:0 0 auto; color:#ffe985; font-size:12px; font-weight:700; letter-spacing:.7px; margin:0 0 6px; padding-bottom:5px; border-bottom:1px solid rgba(188,170,250,.38); }
.rare-loot-list { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding:3px 2px; border:1px solid rgba(143,123,211,.48); border-radius:3px; background:rgba(8,6,22,.36); }
.rare-loot-row { min-height:28px; display:flex; align-items:center; gap:5px; padding:3px 4px; border:1px solid rgba(173,151,245,.42); border-radius:5px; background:linear-gradient(135deg,rgba(65,50,128,.54),rgba(19,15,47,.72)); }
.rare-loot-row img { width:auto; height:auto; max-width:23px; max-height:23px; object-fit:none; image-rendering:pixelated; flex:0 0 23px; }
.rare-loot-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
.rare-loot-row time { flex:0 0 auto; color:#c4bbdf; font:10px/1 var(--numeric); }

/* 設置與屬性／背包相同，採可拖曳浮層且不切走目前畫面。 */
.settings-float-panel { min-width:340px; max-width:min(430px, calc(100vw - 24px)); max-height:calc(100vh - 36px); z-index:80 !important; }
.settings-float-body { box-sizing:border-box; min-height:180px; overflow-y:auto; }

/* ===== Fantasy glass HUD / 角色舞台 ===== */
:root { --hud-glass: rgba(39, 30, 86, .74); --hud-line: rgba(175, 157, 249, .68); --hud-glow: #a99aff; }
#topbar, .side-panel, .chatpanel, .half-panel, .float-panel {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* 動態地圖 Canvas 位於 HUD 後方時，backdrop blur 會迫使瀏覽器每幀重新
   合成所有面板；多個浮窗同開時成本會成倍增加。遊戲內改用既有半透明
   漸層本身呈現玻璃色，不再即時模糊底圖。登入／選角畫面不受影響。 */
#app #topbar, #app .side-panel, #app .chatpanel, #app .half-panel, #app .float-panel {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.side-panel, .half-panel, .float-panel, body:not(.mobile-client-ui) .chatpanel {
  background: linear-gradient(135deg, rgba(57,46,111,.9), rgba(22,18,56,.86)) !important;
  border-color: var(--hud-line) !important;
}
/* 欄位與對話區在指向時維持原邊框，不使用發亮提示。 */
.side-panel:hover, .chatpanel:hover, .half-panel:hover, .float-panel:hover {
  border-color:var(--hud-line) !important;
  box-shadow:none !important;
}
button, .tab-btn, .equip-slot, .char-slot, .type-btns button { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease; }
button:hover:not(:disabled), .tab-btn:hover { transform: translateY(-1px); filter: brightness(1.09); }
button:active:not(:disabled), .tab-btn:active { transform: translateY(0) scale(.97); }
/* 128 格背包若每個格子在高速滑鼠經過時都建立 transform/filter 合成層，
   尚未結束的 140ms 動畫會同時堆積，正是開背包時 FPS 驟降的主要來源。
   保留邊框回饋，但不建立新圖層、不縮放 ICON。 */
.bag-slot { transition:border-color .07s linear,background-color .07s linear !important; }
.bag-slot.has-item:hover { transform:none !important; filter:none !important; border-color:#f4dc7a !important; box-shadow:none !important; z-index:2; }

#charModal {
  background: radial-gradient(circle at 18% 15%, rgba(154,202,255,.38), transparent 33%), radial-gradient(circle at 82% 80%, rgba(174,112,255,.28), transparent 38%), linear-gradient(135deg, #17113d, #2c216c 50%, #10132e) !important;
  overflow:auto; padding:28px;
}
#charBox.char-box-wide {
  width:min(780px, calc(100vw - 56px)); max-width:780px; min-width:0; box-sizing:border-box;
  border:1px solid #c4b8ff; border-radius:18px; padding:24px 28px;
  background:linear-gradient(135deg, rgba(38,30,90,.78), rgba(14,17,52,.82)) !important;
  box-shadow:0 24px 70px #05020bbb, inset 0 1px 0 #ffffff44;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
#charSelectPane > h2, #charCreatePane > h2 { text-align:center; color:#fff !important; font-size:30px !important; text-shadow:0 3px 0 #473a99, 0 0 18px #c4b7ff; letter-spacing:1px; }
#charSelectPane > .sub, #charCreatePane > .sub { text-align:center; color:#ddd8ff; }
.char-slots { gap:18px; margin:22px 0; }
.char-slot { min-height:174px; align-items:center; text-align:center; border:2px solid #7466c9; border-radius:12px; padding:14px; background:linear-gradient(145deg, rgba(82,72,162,.7), rgba(29,24,73,.82)); box-shadow:inset 0 1px #ffffff25; }
.char-slot:hover { transform:translateY(-5px) scale(1.02); border-color:#f4dc7a; box-shadow:0 13px 25px #0a062a99; }
.char-slot.selected { border-color:#fff0a5; background:linear-gradient(145deg, rgba(109,93,204,.88), rgba(39,29,101,.9)); box-shadow:0 0 0 2px #fff0a555, 0 0 20px #a78fff88; }
.char-slot .cs-portrait { width:86px; height:86px; border-radius:50%; border:3px solid #b8aaff; background:#17113d; margin-bottom:8px; box-shadow:0 0 0 3px #30246e, 0 0 16px #aca0ff88; }
.cs-name { color:#fff !important; font-size:17px; }.cs-job { color:#ded7ff !important; }.cs-lv { color:#f8df75 !important; }
.char-slot.deleting-slot { opacity:.72; border-color:#bd808c; background:linear-gradient(145deg, rgba(110,61,85,.72), rgba(39,24,73,.84)); }
.cs-delete-tag { margin-top:7px; padding:3px 5px; color:#ffd18e; font-size:11px; line-height:1.35; border-radius:5px; background:rgba(24,8,15,.58); }
.cs-cancel-delete { margin-top:6px; min-width:82px; color:#fff1b7; border-color:#b89d57; background:linear-gradient(180deg,#65552d,#332817); }
.cs-cancel-delete:hover { border-color:#fff0a5; background:#806b37; }
.char-actions { justify-content:center; }.char-actions .btn-primary { width:auto; min-width:128px; flex:1 1 140px; }

#charCreatePane { display:grid; grid-template-columns:1fr 1.1fr; gap:10px 24px; align-items:start; }
#charCreatePane > h2, #charCreatePane > .sub, #charCreatePane > .char-actions, #charCreatePane > .msg { grid-column:1 / -1; }
#charCreatePane > .form-row { grid-column:1; grid-row:3; align-self:end; }
#charCreatePane .job-picker, #charCreatePane .job-picker-name, #charCreatePane .job-picker-meta { grid-column:2; }
#charCreatePane .type-btns { grid-column:1; }
.job-picker { margin:0; gap:20px; }.job-portrait-wrap { width:150px; height:150px; border-radius:50%; border-color:#c2b7ff; box-shadow:0 0 0 5px #302469, 0 0 30px #a698ff99; background:radial-gradient(circle,#4e8ed7,#20124c); }
.job-arrow { background:linear-gradient(180deg,#8f85dc,#483d98); border-color:#ddd8ff; color:#fff; box-shadow:0 3px 10px #0a062a99; }.job-arrow:hover { background:#a99ff2; border-color:#fff1aa; }
.job-picker-name { color:#fff !important; padding:5px; border-radius:5px; background:#22195a99; }.job-picker-meta { color:#ddd8ff !important; }
.type-btns { justify-content:flex-start; flex-direction:column; }.type-btns button { text-align:left; color:#fff; background:linear-gradient(90deg,#564aa9,#393076); border-color:#a99bea; }.type-btns button.active { background:linear-gradient(90deg,#aa94ff,#5b4dbb); border-color:#fff0a5; }
#charCreatePane .type-btns .create-type-btn { min-height:44px; padding:5px 10px; display:flex; align-items:center; gap:9px; }
#charCreatePane .type-btns .create-type-btn.active { color:#fff; background:linear-gradient(90deg,#c19bff,#7256da); border-color:#fff3a3; box-shadow:0 0 0 1px #f6e98b, 0 0 14px rgba(188,151,255,.8); transform:translateX(4px); }
#charCreatePane .type-btns .create-type-btn.active .create-type-icon { filter:drop-shadow(0 0 4px rgba(255,245,168,.95)); }
#charCreatePane .create-type-icon { display:block; flex:0 0 auto; width:auto; height:auto; max-width:none; max-height:none; object-fit:contain; image-rendering:pixelated; }
#charCreatePane .create-type-btn > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.create-preview { min-height:78px; background:rgba(15,18,61,.7); border-color:#9a8be0; color:#edf0ff; border-radius:8px; }
#charCreatePane .form-row input { background:rgba(22,16,64,.82); border-color:#9a8be0; }
#charCreatePane .create-left { grid-column:1; grid-row:4; min-width:0; padding-top:0; align-self:stretch; display:flex; flex-direction:column; }
#charCreatePane .create-right { grid-column:2; grid-row:3; min-width:0; display:flex; flex-direction:column; align-items:stretch; }
#charCreatePane > .create-preview { grid-column:2; grid-row:4; align-self:stretch; }
#charCreatePane .create-left .form-row { margin:12px 0 0; margin-top:auto; }
#charCreatePane .create-left .type-btns { margin:0; }
#charCreatePane > .char-actions { justify-content:center; }
#charCreatePane > .char-actions .btn-primary { flex:0 1 280px; width:280px; min-width:0; min-height:38px; }
#charCreatePane .create-right .job-picker { margin:0; }
#charCreatePane .create-right .job-picker-name { margin-top:8px; }
#charCreatePane .create-right .job-picker-meta { margin-bottom:8px; }
#charCreatePane > .create-preview { margin:0; min-height:0; padding:8px 12px; }
.create-stat-title { color:#fff0a5; font-weight:bold; margin-bottom:4px; }
.create-stat-row { display:flex; justify-content:space-between; align-items:center; padding:2px 0; border-bottom:1px solid rgba(190,174,255,.17); color:#ddd8ff; }
.create-stat-row:last-child { border-bottom:0; }
.create-stat-row b { color:#fff; font-family:var(--mono); }

/* 日誌訊息使用高對比亮金色，黑色半透明訊息底仍由 .logbox 統一提供。 */
#gameLogBox.logbox .journal { color:#ffe36f !important; text-shadow:0 1px 2px #000, 0 0 5px #a66c00aa; }

/* 頂欄採三欄固定配置：右側數字變動不會推動中間功能按鈕。 */
#topbar {
  display:grid !important;
  grid-template-columns:minmax(135px, 1fr) auto minmax(300px, 1fr);
  column-gap:12px;
  justify-content:initial !important;
}
#topbar .title { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tabBar { justify-self:center; margin:0 !important; flex-wrap:nowrap; white-space:nowrap; }
#tabBar .tab-btn { flex:0 0 auto; }
#topbar .status { justify-self:end; min-width:300px; justify-content:flex-end; gap:12px; white-space:nowrap; }
#coordDisp { display:inline-block; width:88px; text-align:left; font-variant-numeric:tabular-nums; }
#fpsDisp { display:inline-block; min-width:20px; text-align:right; font-variant-numeric:tabular-nums; }

/* 設置：均為瀏覽器本機偏好，不會傳送帳密至伺服器以外的位置。 */
.settings-float-body { display:flex; flex-direction:column; gap:9px; }
.settings-tabbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; flex:0 0 auto; }
.settings-tab { min-width:0; height:28px; padding:3px 5px; border:1px solid #665b99; background:#211c43; color:#dcd5ff; font-size:11px; cursor:pointer; }
.settings-tab:hover { border-color:#a99bea; color:#fff; }
.settings-tab.active { border-color:#d2c7ff; background:linear-gradient(#6255aa,#3b3377); color:#fff7a8; box-shadow:inset 0 0 0 1px #8e80d0; }
.settings-page { box-sizing:border-box; min-height:286px; display:flex; flex-direction:column; gap:9px; }
.settings-page[hidden] { display:none !important; }
.settings-page .settings-section:last-child { border-bottom:0; }
.hotkey-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 8px; }
.hotkey-grid > div { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:7px; min-height:25px; color:#eeeaff; }
.hotkey-grid kbd,.hotkey-bind { box-sizing:border-box; display:inline-grid; place-items:center; width:58px; min-width:30px; min-height:22px; padding:1px 5px; border:1px solid #8f82c9; border-bottom-width:2px; border-radius:4px; background:#17142e; color:#fff4a4; font:11px/1.1 var(--mono); box-shadow:inset 0 1px rgba(255,255,255,.12); }
.hotkey-bind { cursor:pointer; }
.hotkey-bind:hover,.hotkey-bind.capturing { border-color:#fff19a; background:#342b68; color:#fff; }
.settings-hotkeys .dim-hint { margin:5px 0 0; }
.settings-check { display:flex; align-items:center; gap:8px; min-height:23px; color:#f1edff; cursor:pointer; }
.settings-check input { accent-color:#a99bea; }
.settings-check input:disabled + span { opacity:.45; }
.settings-warning { margin:-3px 0 3px 24px; color:#f2d389; font-size:11px; line-height:1.45; }
.settings-range { display:grid; grid-template-columns:76px minmax(0,1fr) 36px; align-items:center; gap:8px; color:#f1edff; }
.settings-range input { width:100%; accent-color:#a99bea; }
.settings-range output { color:#ffe985; font-family:var(--mono); text-align:right; }
.settings-section { display:flex; flex-direction:column; gap:7px; padding:0 0 9px; border-bottom:1px solid rgba(149,132,220,.35); }
.settings-section h3 { margin:0 0 2px; color:#ffe98c; font-size:12px; font-weight:700; }
.settings-select { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:8px; min-height:25px; color:#f1edff; }
.settings-select select { min-width:0; height:25px; color:#f4f0ff; border:1px solid #655a91; border-radius:4px; background:#1a1730; }
.settings-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.settings-session-actions { display:flex; flex-direction:column; gap:8px; margin-top:2px; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
body.performance-mode .mail-card, body.performance-mode .panel, body.performance-mode .float-panel { box-shadow:none !important; backdrop-filter:none !important; }
body.auto-performance-mode .mail-card,
body.auto-performance-mode .panel,
body.auto-performance-mode .float-panel,
body.auto-performance-mode .game-confirm {
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.auto-performance-mode .bag-slot,
body.auto-performance-mode .unit-row,
body.auto-performance-mode .market-row,
body.auto-performance-mode .store-product-card { transition:none !important; }
body.auto-performance-mode #floatBag .item-icon,
body.auto-performance-mode .warehouse-panel .warehouse-slot img { filter:none !important; }

/* GM 角色專用工具。權限與數值上限皆由 B 服務再次驗證。 */
.gm-tool-tab[hidden] { display:none !important; }
.gm-tool-panel,
.gm-tool-panel:hover,
.gm-tool-panel:focus,
.gm-tool-panel:focus-within {
  width:620px !important;
  height:max-content !important;
  min-height:720px;
  max-height:none !important;
  min-width:620px;
  color:#f7f5ff;
  border:1px solid #bbb3f2 !important;
  outline:0 !important;
  background:linear-gradient(180deg,#554a9a 0,#272154 34px,#15122f 100%) !important;
  box-shadow:none !important;
}
.gm-tool-panel .float-header {
  flex:0 0 29px;
  min-height:29px;
  background:linear-gradient(180deg,#8178cf,#55499e 50%,#39317d 51%,#4d4294) !important;
}
.gm-tool-body { display:flex; flex:0 0 auto; flex-direction:column; height:auto !important; max-height:none !important; gap:9px; overflow:visible !important; padding:10px !important; }
.gm-tool-section { padding:8px; border:1px solid #6f63ad; background:#0b0921b8; }
.gm-tool-section h4 { margin:0 0 7px; color:#fff36b; font-size:13px; font-weight:700; }
.gm-character-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; }
.gm-character-grid label,.gm-synth-row { display:grid; grid-template-columns:minmax(100px,auto) minmax(0,1fr); align-items:center; gap:7px; font-size:12px; }
.gm-attribute-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin-top:8px; padding-top:8px; border-top:1px solid #50468a; }
.gm-attribute-grid label { display:grid; gap:3px; color:#d9d2ff; font:10px/1.1 var(--numeric); text-align:center; }
.gm-attribute-grid input { text-align:center; }
.gm-tool-panel input {
  box-sizing:border-box;
  width:100%;
  min-height:27px;
  padding:3px 6px;
  color:#fff;
  border:1px solid #776aba;
  background:#090719;
  font:12px/1.2 var(--ui);
}
.gm-tool-panel input:focus { outline:1px solid #d4c9ff; border-color:#d4c9ff; }
.gm-tool-panel input[type="number"] { appearance:textfield; -moz-appearance:textfield; }
.gm-tool-panel input[type="number"]::-webkit-inner-spin-button,
.gm-tool-panel input[type="number"]::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; appearance:none; }
.gm-durability-inputs { display:grid; grid-template-columns:minmax(0,1fr) 9px minmax(0,1fr); align-items:center; gap:3px; }
.gm-durability-inputs > span { color:#ddd7ff; text-align:center; }
.gm-spawn-row #gmSpawnQuery.drag-item-over { border-color:#fff36b !important; outline:1px solid #fff36b; background:#282052 !important; }
.gm-wide-button { width:100%; margin-top:8px; }
.gm-spawn-row { display:grid; grid-template-columns:minmax(0,1fr) 92px 74px; gap:6px; }
.gm-equipment-drop {
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px;
  border:1px dashed #9285d8;
  background:#1d1747;
  color:#c9c2ef;
  text-align:center;
}
.gm-equipment-drop.drag-item-over { border-style:solid; border-color:#fff36b; background:#37306c; color:#fff; }
.gm-equipment-drop img { flex:0 0 auto; width:auto; height:auto; max-width:none; max-height:none; image-rendering:auto; }
.gm-equipment-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 9px; margin-top:8px; }
.gm-equipment-fields label { display:grid; grid-template-columns:92px minmax(0,1fr) 72px; align-items:center; gap:5px; font-size:12px; }
.gm-equipment-fields small { color:#aaa1d3; text-align:right; white-space:nowrap; }
.gm-synth-row { margin-top:7px; }
.gm-tool-status { min-height:18px; color:#d5cfef; font-size:12px; }
.gm-tool-status.error { color:#ff8e8e; }
.gm-tool-status.success { color:#85ff9b; }
.tt-expiry-gap { height:1em; }
.tt-item-expiry { white-space:nowrap; }
.tt-expiry-value { color:#ffff33 !important; }
@media (max-width:680px) {
  .gm-tool-panel { width:calc(100vw - 16px) !important; min-width:0; left:8px !important; }
  .gm-character-grid,.gm-equipment-fields { grid-template-columns:1fr; }
  .gm-attribute-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .mail-float-panel { width:calc(100vw - 12px) !important; left:6px !important; }
  .mail-actions { grid-template-columns:1fr 1fr; }
  .mail-actions input { grid-column:1 / -1; }
  .mail-card { grid-template-columns:20px minmax(120px,160px) minmax(0,1fr); }
  .mail-card > :nth-last-child(2):not(.mail-detail) { grid-column:3; }
}

/* 經典天翼之鍊風格：屬性面板採上方角色資訊、下方左右數值欄。 */
#floatAttrs { width:440px !important; min-width:440px; }
#floatAttrs .attr-tw-body { padding:9px !important; background:linear-gradient(180deg,#4d3da1 0,#292061 46%,#17133f 100%); }
.attr-hero { display:flex; align-items:center; gap:10px; min-height:80px; padding:2px 3px 8px; border-bottom:1px solid #9b8cde; }
.attr-hero .char-portrait-img { width:76px; height:76px; border-radius:3px; border:2px solid #e0d7ff; box-shadow:0 0 0 2px #332674; }
.attr-hero-info { min-width:0; flex:1; display:grid; gap:3px; }
.attr-hero-info .cpm-name { color:#fff; font-size:16px; font-weight:700; text-shadow:0 1px #20134b; }
.attr-hero-info .cpm-job { color:#e5ddff; font-size:12px; }
.attr-hero-badges { display:flex; align-items:center; gap:6px; margin-top:2px; flex-wrap:wrap; }
.attr-hero-badges span { display:inline-flex; align-items:center; box-sizing:border-box; min-width:62px; height:15px; padding:0 6px; border:1px solid #8d7cd3; border-radius:4px; color:#e9e3ff; font:11px/1.1 var(--mono); background:rgba(21,15,66,.72); }
.attr-hero-badges b { color:#fff1a8; }
.btn-attr-levelup { width:36px !important; min-width:36px !important; height:15px !important; padding:0 !important; border:0 !important; border-radius:0 !important; color:transparent !important; background:transparent url('/ui/levelup-ready.png') center/36px 15px no-repeat !important; box-shadow:none !important; filter:grayscale(1) brightness(.55) contrast(1.12); font-size:0 !important; image-rendering:pixelated; opacity:1 !important; pointer-events:none; cursor:default; transition:none !important; transform:none !important; }
.btn-attr-levelup.can-levelup { border:0 !important; color:transparent !important; background:transparent url('/ui/levelup-ready.png') center/36px 15px no-repeat !important; box-shadow:0 0 7px #efcf6688 !important; filter:none; pointer-events:auto; cursor:pointer; transition:transform .14s ease,filter .14s ease !important; }
.btn-attr-levelup.can-levelup:hover { filter:brightness(1.14); }.btn-attr-levelup.can-levelup:active { transform:scale(.86) !important; filter:brightness(.92); }
.attr-identity { display:flex; gap:9px; margin-top:4px; color:#d9d2f7; font-size:10px; }.attr-identity b { color:#fff; font-family:var(--mono); }
.attr-energy { min-width:0; }.attr-energy-label { display:flex; justify-content:space-between; gap:6px; min-height:16px; color:#fff; font-size:10px; line-height:16px; }.attr-energy-label > span { color:#fff5af; font-weight:700; }.attr-energy-label b { min-width:0; overflow:hidden; color:#fff; text-align:right; text-overflow:ellipsis; white-space:nowrap; font:10px/16px var(--mono); }.attr-energy-label i { color:inherit; font-style:normal; }
.attr-energy-track { position:relative; height:10px; overflow:hidden; border:1px solid #15102f; border-radius:3px; background:#100b2c; box-shadow:inset 0 1px 3px #000b; }.attr-energy-fill { display:block; height:100%; min-width:0; border-radius:2px; transition:width .25s ease; }.xp-energy-fill { background:linear-gradient(90deg,#d6aa2f,#fff58c 48%,#d17e1d); box-shadow:0 0 8px #ffe77b9c; }.hp-energy-fill { background:linear-gradient(90deg,#9c2445,#ff7c8e 52%,#ef3d5f); box-shadow:0 0 7px #ff526f88; }.mp-energy-fill { background:linear-gradient(90deg,#3158ba,#8ed8ff 52%,#5b8cff); box-shadow:0 0 7px #68baff88; }
.attr-exp-energy { margin:6px 0 8px; padding:4px 7px 6px; border:1px solid #8173c8; border-radius:4px; background:linear-gradient(90deg,#2d246f,#51449b 54%,#282060); }
.attr-tw-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(144px,.82fr); gap:10px; }
.attr-list-tw { display:grid; gap:3px; }
#floatAttrs .attr-list-tw .attr-row { display:grid; grid-template-columns:47px minmax(0,1fr) 34px 14px; align-items:center; gap:5px; min-height:23px; padding:1px 3px; border:1px solid #7567bd; border-radius:4px; color:#eeeaff; background:linear-gradient(90deg,rgba(31,24,79,.86),rgba(71,60,139,.78)); }
#floatAttrs .attr-list-tw .attr-row:hover { border-color:#fff0a0; background:linear-gradient(90deg,#483a91,#6957b7); }
#floatAttrs .attr-list-tw .attr-row span { width:auto; color:#fff !important; font-weight:700; font-size:11px; text-shadow:1px 1px 2px #000,-1px -1px 1px #000; }
#floatAttrs .attr-list-tw .attr-row b { width:auto; padding:3px 5px; border-radius:3px; text-align:center; color:#fff !important; background:rgba(8,6,27,.78); box-shadow:inset 0 1px 2px #000b; text-shadow:1px 1px 2px #000,-1px -1px 1px #000; font:700 11px/1 var(--mono); }
#floatAttrs .attr-list-tw .attr-row b .attr-buff-bonus,
#floatAttrs .attr-equipment-hp-bonus { color:#fff04d !important; font-style:normal; text-shadow:1px 1px 2px #000,-1px -1px 1px #000,0 0 3px #000; }
#floatAttrs .attr-list-tw .attr-cost { display:block !important; min-width:0; padding:3px 4px; border-radius:3px; color:#fff !important; text-align:center; background:rgba(8,6,27,.78); box-shadow:inset 0 1px 2px #000b; text-shadow:1px 1px 2px #000,-1px -1px 1px #000; font:700 11px/1 var(--mono); }
#floatAttrs .attr-list-tw .btn-plus { width:14px !important; min-width:14px !important; height:14px !important; padding:0 !important; border:0 !important; border-radius:0 !important; color:transparent !important; background:transparent url('/ui/attr-plus.png') center/12px 12px no-repeat !important; box-shadow:none !important; font-size:0 !important; image-rendering:pixelated; transition:transform .1s ease,filter .1s ease; }
#floatAttrs .attr-list-tw .btn-plus:hover:not(:disabled) { filter:brightness(1.18); }.btn-plus:active:not(:disabled) { transform:scale(.72) !important; filter:brightness(.84); }
#floatAttrs .attr-list-tw .btn-plus:disabled { opacity:.36; filter:grayscale(1); }
.attr-vitals { display:flex; flex-direction:column; align-items:stretch; min-height:0; gap:5px; }
.attr-vitals > div:not(.attr-energy) { display:grid; grid-template-columns:45px minmax(0,1fr); align-items:center; min-height:25px; padding:1px 5px; border:1px solid #7668bd; border-radius:4px; background:linear-gradient(90deg,#30266e,#4e4196); }
.attr-vitals span { color:#fff; font-size:11px; font-weight:700; }.attr-vitals b { min-width:0; overflow:hidden; color:#fff4ad; text-align:right; text-overflow:ellipsis; white-space:nowrap; font:11px/1 var(--mono); }
.attr-vitals .attr-vital-energy { padding:3px 5px 5px; border:1px solid #7668bd; border-radius:4px; background:linear-gradient(90deg,#30266e,#4e4196); }.attr-vitals .attr-vital-energy b { color:#fff; }
.attr-point-footer { align-self:stretch; margin-top:auto; }.attr-point-footer b { color:#fff1a4 !important; }

/* 伺服器管理員的公式驗證欄：位置會由 game.js 緊貼屬性欄下方。 */
.attack-stats-panel { position:fixed; z-index:47; box-sizing:border-box; padding:7px 9px 8px; border:1px solid #8274c9; border-radius:5px; color:#f2efff; background:linear-gradient(180deg,rgba(45,35,111,.96),rgba(18,13,55,.97)); box-shadow:0 5px 16px #0009; pointer-events:none; }
.attack-stats-title { padding:0 0 5px; border-bottom:1px solid #7466b7; color:#fff; font-weight:700; font-size:12px; text-shadow:1px 1px 2px #000; }
.attack-stats-title small { margin-left:5px; color:#f5d778; font-size:10px; font-weight:400; }
.attack-stats-list { display:grid; gap:3px; padding-top:5px; }
.attack-stat-row { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:2px 6px; min-height:20px; padding:3px 5px; border:1px solid #5f539d; border-radius:3px; background:rgba(10,7,38,.68); font:11px/1.1 var(--mono); }
.attack-stat-row span { overflow:hidden; color:#fff; font-weight:700; text-overflow:ellipsis; white-space:nowrap; text-shadow:1px 1px 2px #000; }.attack-stat-row b { color:#fff3a6; text-align:right; }.attack-stat-row small { grid-column:1/-1; overflow:hidden; color:#cec7ed; font:10px/1 var(--mono); white-space:nowrap; text-overflow:ellipsis; }

/* 不使用 CSS zoom 放大文字：Windows 125%／150% 顯示比例下，zoom:1.1 會讓
   Chromium 把整個面板落在非整數像素後再取樣，任何字型都會發虛。以下直接
   使用原 1.1 倍的實際像素尺寸；PNG 加點／升級按鈕仍維持原始大小。 */
#floatAttrs { width:484px !important; min-width:484px; transform:none; }
#floatAttrs > .float-header,
.skill-float-panel > .float-header { padding:9px 11px; font-size:14px; }
#floatAttrs > .float-header .float-close,
.skill-float-panel > .float-header .float-close { font-size:20px; }
#floatAttrs .attr-tw-body { padding:10px !important; }
#floatAttrs .attr-hero { gap:11px; min-height:88px; padding:2px 3px 9px; }
#floatAttrs .attr-hero .char-portrait-img { width:84px; height:84px; }
#floatAttrs .attr-hero-info { gap:3px; }
#floatAttrs .attr-hero-info .cpm-name { font-size:18px; }
#floatAttrs .attr-hero-info .cpm-job { font-size:13px; }
#floatAttrs .attr-hero-badges { gap:7px; margin-top:2px; }
#floatAttrs .attr-hero-badges span { min-width:68px; height:17px; padding:0 7px; font-size:12px; }
#floatAttrs .attr-identity { gap:10px; margin-top:4px; font-size:11px; }
#floatAttrs .attr-energy-label { min-height:18px; font-size:11px; line-height:18px; }
#floatAttrs .attr-energy-label b { font-size:11px; line-height:18px; }
#floatAttrs .attr-energy-track { height:11px; }
#floatAttrs .attr-exp-energy { margin:7px 0 9px; padding:4px 8px 7px; }
#floatAttrs .attr-tw-grid { grid-template-columns:minmax(0,1.18fr) minmax(158px,.82fr); gap:11px; }
#floatAttrs .attr-list-tw { gap:3px; }
#floatAttrs .attr-list-tw .attr-row { grid-template-columns:52px minmax(0,1fr) 37px 15px; gap:6px; min-height:25px; padding:1px 3px; }
#floatAttrs .attr-list-tw .attr-row span,
#floatAttrs .attr-list-tw .attr-row b,
#floatAttrs .attr-list-tw .attr-cost { font-size:12px; }
#floatAttrs .attr-vitals { gap:6px; }
#floatAttrs .attr-vitals > div:not(.attr-energy) { grid-template-columns:50px minmax(0,1fr); min-height:28px; padding:1px 6px; }
#floatAttrs .attr-vitals span,
#floatAttrs .attr-vitals b { font-size:12px; }
#floatAttrs .attr-list-tw .btn-plus {
  width:14px !important; min-width:14px !important; height:14px !important;
  background-size:12px 12px !important;
}
#floatAttrs .btn-attr-levelup {
  width:36px !important; min-width:36px !important; height:15px !important;
  background-size:36px 15px !important;
}
.attack-stats-panel { padding:8px 10px 9px; transform:none; }
.attack-stats-title { padding-bottom:6px; font-size:13px; }
.attack-stats-title small { font-size:11px; }
.attack-stats-list { gap:3px; padding-top:6px; }
.attack-stat-row { grid-template-columns:minmax(0,1fr) 48px; min-height:22px; padding:3px 6px; font-size:12px; }
.attack-stat-row small { font-size:11px; }

/* 經典技能窗：上方選技能系、下方左清單／右說明，資料與分系規則不變。 */
.skill-float-panel { width:616px !important; min-width:572px; border-color:#b4a8f1 !important; transform:none; }
.skill-float-panel .float-header { background:linear-gradient(180deg,#8171ce,#4a3d97) !important; }
.skill-tw-body { padding:8px !important; background:linear-gradient(180deg,#5242a3,#2a206b 45%,#191343); }
.skill-section-title.skill-series-title { display:none; }
.skill-series-tabs { min-height:61px; padding:8px; border:1px solid #271c63; border-radius:5px; background:linear-gradient(#6454bb,#3e317f); }
.skill-series-btn { min-width:58px; min-height:29px; padding:4px 8px; border-color:#9588df; border-radius:5px 5px 1px 1px; color:#eeeaff; background:linear-gradient(#5e50ab,#352877); font-size:11px; }
.skill-series-btn:hover, .skill-series-btn.active { color:#fff8bf; border-color:#fff2a4; background:linear-gradient(#9b89ee,#5d48b4); box-shadow:inset 0 1px #fff8,0 0 6px #d4b75b99; }
.skill-series-btn { box-sizing:border-box; display:grid; place-items:center; flex:0 0 36px; width:36px !important; min-width:36px !important; height:36px !important; min-height:36px !important; padding:1px !important; overflow:hidden; font-size:10px !important; line-height:12px !important; white-space:normal; word-break:break-all; }
.skill-series-btn img { display:block; max-width:35px; max-height:35px; image-rendering:pixelated; object-fit:contain; }
.skill-tw-layout { display:grid; grid-template-columns:62% minmax(0,1fr); gap:8px; height:341px; min-height:341px; max-height:341px; margin-top:8px; }
.skill-list-pane, .skill-detail-pane { min-width:0; border:1px solid #9b8cde; border-radius:5px; background:rgba(20,14,62,.84); box-shadow:inset 0 0 0 1px rgba(5,3,31,.45); }
.skill-pane-heading { display:flex; justify-content:space-between; padding:6px 9px; color:#fff; border-bottom:1px solid #9b8cde; background:linear-gradient(90deg,#5f50b3,#362879); font-size:13px; font-weight:700; }.skill-series-total { color:#fff3a7; font-family:var(--mono); }
.skill-list { display:flex; flex-direction:column; gap:3px; height:295px; min-height:0; max-height:295px; padding:6px; overflow-y:auto; }
.skill-card { width:100%; display:flex; align-items:center; gap:6px; min-height:47px; padding:4px 6px; border:1px solid #6f62bb; border-radius:4px; color:#eeeaff; text-align:left; background:linear-gradient(90deg,#332774,#201852); }
.skill-select { display:flex; min-width:0; flex:1; align-items:center; gap:8px; padding:2px; border:0; color:inherit; text-align:left; background:transparent; }.skill-lvup { flex:0 0 36px; width:36px; min-width:36px; height:15px; padding:0; border:0; border-radius:0; color:transparent; background:transparent url('/ui/levelup-ready.png') center/36px 15px no-repeat !important; box-shadow:0 0 7px #efcf6688; image-rendering:pixelated; cursor:pointer; transition:transform .14s ease,filter .14s ease; }.skill-lvup:hover { background:transparent url('/ui/levelup-ready.png') center/36px 15px no-repeat !important; filter:brightness(1.14); }.skill-lvup:active { transform:scale(.86); filter:brightness(.92); }.skill-lvup:disabled { background:transparent url('/ui/levelup-ready.png') center/36px 15px no-repeat !important; box-shadow:none; filter:grayscale(1) brightness(.72) contrast(1.04); opacity:.72; pointer-events:none; cursor:default; }
.skill-card:hover, .skill-card.selected { border-color:#fff09c; color:#fff; background:linear-gradient(90deg,#7261c9,#403083); box-shadow:inset 0 0 10px #b39cff50; }
.skill-card.owned { border-color:#c5b65e; }.skill-card.available .skill-gem { color:#a7ffb6; }.skill-card.locked { opacity:.62; }.skill-card.locked .skill-gem { color:#a69abf; }
.skill-gem { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; overflow:hidden; border:1px solid #b5a7f3; border-radius:3px; color:#fff2a2; background:radial-gradient(circle,#7668cf,#211758); font-size:18px; }.skill-gem img { display:block; max-width:24px; max-height:24px; image-rendering:pixelated; object-fit:contain; }
.skill-card-copy { display:grid; min-width:0; gap:2px; }.skill-card .skill-name { overflow:hidden; color:#fff; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.skill-card .skill-name i { color:#fff2a2; font-style:normal; }.skill-card small { overflow:hidden; color:#d6ceff; text-overflow:ellipsis; white-space:nowrap; font:11px/1.2 var(--mono); }
.skill-detail-pane { padding:13px; color:#eae5ff; line-height:1.55; }
.skill-detail-name { color:#fff4a7; font-size:18px; font-weight:700; text-shadow:0 1px #21154f; }.skill-detail-level { margin-top:6px; color:#e2dbff; font-size:12px; }.skill-detail-level span { color:#a8ffc0; }
.skill-detail-rule { height:1px; margin:11px 0; background:#8274ca; }.skill-detail-desc { min-height:163px; color:#e9e3ff; font-size:13px; white-space:normal; }
.skill-cast { display:block; min-width:86px; margin:10px 0 0 auto; padding:4px 14px; border:1px solid #b3a4f4; border-radius:4px; color:#fff; background:linear-gradient(#796bc8,#443781); font:700 12px var(--ui); cursor:pointer; }
.skill-cast:hover { border-color:#f2e9ff; filter:brightness(1.12); }

@media (max-width:650px) {
  #floatAttrs, .skill-float-panel { width:calc(100vw - 20px) !important; min-width:0; }
  .attr-tw-grid, .skill-tw-layout { grid-template-columns:1fr; }.skill-tw-layout { height:auto; min-height:0; max-height:none; }.skill-list { height:auto; max-height:180px; }
  .skill-list { max-height:180px; }
  .skill-detail-desc { min-height:70px; }
}

@media (max-width:1200px) {
  #topbar { grid-template-columns:130px 1fr; }
  #tabBar { justify-self:start; overflow-x:auto; max-width:calc(100vw - 175px); padding-bottom:2px; }
  #topbar .status { grid-column:1 / -1; grid-row:2; justify-self:end; min-width:0; }
}

/* 基本狀態的三種能量條皆使用漸層。 */
.sp-fill { background:linear-gradient(90deg,#6b3ca4,#c889ff 52%,#8a55d9) !important; box-shadow:0 0 7px #b875ff88; }

/* 右側對話欄內的系統訊息須高於一般聊天的灰字優先級。 */
.logbox .chat.system { color:#ffe36f !important; text-shadow:0 1px 2px #000, 0 0 5px #a66c00aa; }

/* 不顯示舊版地圖範圍框；TWM 仍完全負責玩家與怪物的通行判定。 */
#mapwrap, #mapwrapFull, .mapwrap, .mapwrap.full { border:none !important; outline:none !important; box-shadow:none !important; }

/* 地圖本體是 canvas；舊版共用 canvas 樣式曾對所有畫布加 1px 藍灰框。
   僅移除兩個遊戲地圖畫布的框線，保留其他工具畫布的預設外觀。 */
#gamecanvas, #gamecanvasFull {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* NPC 商店（Meta 腳本） */
.npc-shop-panel .npc-shop-body { display:flex; flex-direction:column; gap:8px; min-height:280px; }
.npc-shop-tabs { display:flex; align-items:center; gap:6px; }
.npc-shop-tabs button { padding:3px 10px; font-size:12px; }
.npc-shop-tabs button.active { border-color:#c8b870 !important; color:#ffe9a0 !important; }
.npc-shop-seed { margin-left:auto; color:#d8d0f0; font-size:12px; }
.npc-shop-seed b { color:#fff36a; }
.npc-shop-list { flex:1; min-height:200px; max-height:320px; overflow-y:auto; border:1px solid #5d5495; border-radius:6px; background:#0a0c0e; padding:4px; }
.npc-shop-row { width:100%; display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:6px 8px; border:0; border-radius:4px; background:transparent; color:#f0ecff; text-align:left; cursor:pointer; }
.npc-shop-row:hover, .npc-shop-row.active { background:#4b417f; }
.npc-shop-row img { width:auto; height:auto; max-width:28px; max-height:28px; image-rendering:pixelated; }
.npc-shop-row .npc-shop-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.npc-shop-row .npc-shop-price { color:#fff36a; font-size:12px; white-space:nowrap; }
.npc-shop-footer { display:flex; align-items:center; gap:8px; }
.npc-shop-footer input { width:56px; }
.npc-shop-footer .btn-small { margin-left:auto; min-width:72px; }

/* 隨身／NPC 交易分頁 */
.sell-tabs { display:flex; gap:6px; margin:0 0 8px; }
.sell-tab {
  flex:1; padding:5px 0; font-size:12px; border-radius:4px;
  background:#1a2030 !important; border:1px solid #4a5a6a !important; color:#c8d0d8 !important;
}
.sell-tab.active {
  border-color:#c8b870 !important; color:#ffe9a0 !important; background:#2a3020 !important;
}
.sell-tab.sell-tab-disabled,
.sell-tab:disabled {
  opacity:0.35; cursor:not-allowed !important; color:#888 !important; border-color:#333 !important;
}
.sell-item.picked { outline:1px solid #c8b870; }

/* StringTable.ttales 色彩對照：每個 --tw-* 均可直接在 color.* 欄位修改。 */
:root {
  --tw-text-main:#ffffff; --tw-text-system:#ffe36a; --tw-text-combat:#e08060;
  --tw-text-chat:#ffffff; --tw-text-chat-self:#d7f3ef; --tw-text-party:#dd9c1b; --tw-text-guild:#50668F;
  --tw-tooltip-normal:#ffffff; --tw-tooltip-requirement:#cc7722; --tw-tooltip-equippable:#ffd700;
  --tw-tooltip-synth-max:#df2635; --tw-tooltip-stat-up:#72ed82; --tw-tooltip-stat-down:#df2635;
  --tw-set-name:#7eeaff; --tw-set-missing:#ff4e55; --tw-set-stats:#ffe36a; --tw-set-description:#ffffff;
  --tw-mark-gold:#ffe36a; --tw-mark-red:#ff6262; --tw-mark-green:#9dffb2; --tw-mark-orange:#dc9965;
  --tw-rarity-0:#f0f0f0; --tw-rarity-1:#9a7ad0; --tw-rarity-2:#e8c840; --tw-rarity-3:#f0b0c8;
  --tw-rarity-4:#60e070; --tw-rarity-5:#c0c0c0; --tw-rarity-6:#f09040; --tw-rarity-7:#40c0f0; --tw-rarity-8:#e060e0;
}
/* 對話、日誌與一般文字。 */
body { color:var(--tw-text-main); }
#chatLog .system, .chat-log .system, .log-system, .logbox .system, .logbox .chat.system { color:var(--tw-text-system) !important; }
#chatLog .combat, .log-combat, .logbox .combat { color:var(--tw-text-combat) !important; }
#chatLog .chat, .logbox .chat { color:var(--tw-text-chat) !important; }
#chatLog .chat.normal.self-message, .logbox .chat.normal.self-message { color:var(--tw-text-chat-self) !important; }
#chatLog .chat.normal.other-message, .logbox .chat.normal.other-message { color:var(--tw-text-chat) !important; }
#chatLog .party, .logbox .party { color:var(--tw-text-party) !important; }
#chatLog .guild, .logbox .guild { color:var(--tw-text-guild) !important; }

/* 裝備／道具說明欄。 */
.item-tooltip .tt-white, .item-desc-pin .tt-white, .tt-white,
.item-tooltip .tt-stats, .item-desc-pin .tt-stats,
.item-tooltip .tt-section, .item-desc-pin .tt-section,
.item-tooltip .tt-desc, .item-desc-pin .tt-desc,
.item-tooltip .tt-flavor, .item-desc-pin .tt-flavor,
.item-tooltip .tt-synth, .item-desc-pin .tt-synth { color:var(--tw-tooltip-normal) !important; }
.item-tooltip .tt-req, .item-desc-pin .tt-req, .tt-req { color:var(--tw-tooltip-requirement) !important; }
.tt-char-mine { color:var(--tw-tooltip-equippable) !important; }
.item-tooltip .tt-synth.tt-synth-max, .item-desc-pin .tt-synth.tt-synth-max { color:var(--tw-tooltip-synth-max) !important; }
.stat-up { color:var(--tw-tooltip-stat-up) !important; }.stat-down { color:var(--tw-tooltip-stat-down) !important; }

/* 套裝說明欄。 */
.set-detail-name, .set-detail-items { color:var(--tw-set-name) !important; }
.set-detail-missing { color:var(--tw-set-missing) !important; }
.set-detail-stats { color:var(--tw-set-stats) !important; }
.set-detail-stats:not(.set-detail-stats-preview) { color:#ffff33 !important; }
.set-detail-stats.set-detail-stats-preview { color:#8f8f8f !important; }
.set-detail-description { color:var(--tw-set-description) !important; }

/* <c3>～<c7> 文字標記。 */
.tt-mark-gold { color:var(--tw-mark-gold) !important; }.tt-mark-red { color:var(--tw-mark-red) !important; }
.tt-mark-green { color:var(--tw-mark-green) !important; }.tt-mark-orange { color:var(--tw-mark-orange) !important; }

/* 道具、裝備、商城與交易欄的稀有度名稱。 */
.rarity-0, .item-tooltip .rarity-0, .item-desc-pin .rarity-0 { color:var(--tw-rarity-0) !important; }
.rarity-1 { color:var(--tw-rarity-1) !important; }.rarity-2 { color:var(--tw-rarity-2) !important; }
.rarity-3 { color:var(--tw-rarity-3) !important; }.rarity-4 { color:var(--tw-rarity-4) !important; }
.rarity-5 { color:var(--tw-rarity-5) !important; }.rarity-6 { color:var(--tw-rarity-6) !important; }
.rarity-7, .sell-item b.rarity-7 { color:var(--tw-rarity-7) !important; }
.rarity-8, .rarity-9, .rarity-10, .rarity-11,
.sell-item b.rarity-8, .sell-item b.rarity-9, .sell-item b.rarity-10, .sell-item b.rarity-11 { color:var(--tw-rarity-8) !important; }

/* 這些欄位舊版各自指定了較高優先級色碼；統一強制走 StringTable 的 rarity 色。 */
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-0 { color:var(--tw-rarity-0) !important; }
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-1 { color:var(--tw-rarity-1) !important; }
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-2 { color:var(--tw-rarity-2) !important; }
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-3 { color:var(--tw-rarity-3) !important; }
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-4 { color:var(--tw-rarity-4) !important; }
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-5 { color:var(--tw-rarity-5) !important; }
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-6 { color:var(--tw-rarity-6) !important; }
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-7 { color:var(--tw-rarity-7) !important; }
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-8,
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-9,
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-10,
:is(.equip-item-name, .farm-item-option span, .farm-item-picker .farm-item-label,
    .market-row b, .market-inventory-item span, .sell-item b, .store-product-main b,
    .npc-shop-name, .rare-loot-name).rarity-11 { color:var(--tw-rarity-8) !important; }

/* 背包物品懸停只負責觸發說明欄：不位移、不放大、不改邊框或底色。 */
#floatBag .bag-slot,
#floatBag .bag-slot.has-item { transition:none !important; }
#floatBag .bag-slot.has-item:hover {
  transform:none !important;
  filter:none !important;
  z-index:auto !important;
  border-color:#7064aa !important;
  background:#322a61 !important;
  box-shadow:none !important;
}
#floatBag .bag-slot.has-item.equipped:hover {
  border-color:#7064aa !important;
  box-shadow:inset 0 0 0 2px #d6c264,0 0 7px #c5a93f88 !important;
}
#floatBag.bag-list-view .bag-slot.has-item:hover { background:linear-gradient(90deg,#3f367d,#272050) !important; }

/* 列表圖示獨立成小框，與名稱／數量條維持同一套紫色欄位語言。 */
#floatBag.bag-list-view .bag-slot .item-icon {
  box-sizing:content-box;
  width:auto !important;
  height:auto !important;
  max-width:26px;
  max-height:26px;
  padding:1px;
  border:1px solid #6154a0;
  border-radius:999px;
  background:#29214f;
  box-shadow:none;
  /* 原始 PNG 下方的假陰影，不會改變圖示檔實際尺寸。 */
  filter:drop-shadow(2px 3px 0 rgba(10,6,28,.68));
}

/* 行狀背包的最終外觀：只保留名稱／數量的扁平橢圓，列本身不再被外框包住。 */
#floatBag.bag-list-view .bag-slot,
#floatBag.bag-list-view .bag-slot.has-item,
#floatBag.bag-list-view .bag-slot.has-item:hover {
  min-height:29px;
  height:29px;
  grid-template-columns:34px minmax(0, 1fr) 40px;
  gap:5px;
  padding:0 4px;
  overflow:visible !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#floatBag.bag-list-view .bag-slot .item-name,
#floatBag.bag-list-view .bag-slot .item-qty {
  min-height:17px;
  height:17px;
  padding-top:0;
  padding-bottom:0;
  border:0;
  border-radius:999px;
  /* 列表內欄位和格狀背包的物品格共用同一層紫色底，不留舊版黑底。 */
  background:#322a61;
  box-shadow:none;
  font-size:11px;
}
/* 圖示後方的小橢圓：它小於 PNG，本身只作為原版風格的襯底。 */
#floatBag.bag-list-view .bag-slot.has-item::before {
  content:'';
  grid-column:1;
  grid-row:1;
  justify-self:center;
  align-self:center;
  width:19px;
  height:14px;
  border-radius:999px;
  background:#322a61;
  box-shadow:inset 0 0 0 1px #51458f;
  pointer-events:none;
}
/* 圖示維持 PNG 自身尺寸；可高於細橢圓列，不再被外框或 max-size 壓小。 */
#floatBag.bag-list-view .bag-slot .item-icon {
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:1;
  justify-self:center;
  align-self:center;
  width:auto !important;
  height:auto !important;
  max-width:none;
  max-height:none;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(2px 3px 0 rgba(10,6,28,.68));
}
#floatBag.bag-list-view .bag-slot .item-name { grid-column:2; grid-row:1; }
#floatBag.bag-list-view .bag-slot .item-qty { grid-column:3; grid-row:1; }

/* 登入帳號面板：整體依 294×190 原圖等比放大至 1.2 倍。 */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
#loginModal {
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.58) !important;
}
#loginModal #loginBox {
  position:relative;
  box-sizing:border-box;
  width:353px !important;
  min-width:353px !important;
  max-width:353px !important;
  height:228px !important;
  min-height:228px !important;
  max-height:228px !important;
  padding:0 !important;
  overflow:hidden;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  transform:none !important;
}
#loginModal #loginBox::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:353px;
  height:228px;
  pointer-events:none;
  background:transparent url('/ui/login-account-panel-0392.png') 0 0/353px 228px no-repeat;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
}
#loginBox .login-window-title {
  position:absolute;
  left:18px;
  top:10px;
  z-index:1;
  width:318px;
  height:23px;
  overflow:hidden;
  color:#f2ece5;
  font:700 14px/23px var(--ui);
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:1px 1px 1px #000,-1px -1px 1px rgba(0,0,0,.45);
}
#loginBox .login-account-row,
#loginBox .login-password-row {
  position:absolute;
  left:104px;
  width:140px;
  height:20px;
  margin:0;
}
#loginBox .login-account-row { top:75px; }
#loginBox .login-password-row { top:107px; }
#loginBox .login-account-row input,
#loginBox .login-password-row input {
  box-sizing:border-box;
  width:140px;
  height:20px;
  padding:1px 5px 0;
  border:0 !important;
  border-radius:0 !important;
  outline:0;
  background:transparent !important;
  background-color:transparent !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff;
  font:14px/19px var(--ui);
  color-scheme:dark;
  box-shadow:none !important;
}
#loginBox .login-account-row input:focus,
#loginBox .login-password-row input:focus { border:0 !important; outline:0 !important; box-shadow:none !important; }
#loginBox .login-account-row input:-webkit-autofill,
#loginBox .login-password-row input:-webkit-autofill,
#loginBox .login-account-row input:autofill,
#loginBox .login-password-row input:autofill {
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff !important;
  background-color:transparent !important;
  background-image:none !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-box-shadow:none !important;
  box-shadow:none !important;
  transition:background-color 999999s ease-out 0s;
}
#loginBox .login-submit-image {
  position:absolute;
  left:133px;
  top:172px;
  width:92px !important;
  min-width:92px !important;
  height:25px !important;
  margin:0;
  padding:0;
  border:1px solid #342f29 !important;
  border-radius:4px !important;
  appearance:none !important;
  display:block !important;
  background:linear-gradient(180deg,#817c72 0,#5b5852 47%,#363635 52%,#4d4b48 100%) !important;
  color:#eee !important;
  font:700 13px/22px var(--ui) !important;
  text-shadow:1px 1px 1px #000 !important;
  box-shadow:inset 0 0 0 1px #aaa59b,0 1px 1px #0008 !important;
  opacity:1 !important;
  cursor:pointer;
}
#loginBox .login-submit-image:hover { color:#fff76a !important; border-color:#28241e !important; background:linear-gradient(180deg,#999386,#69655d 47%,#44413f 52%,#5c5954 100%) !important; }
#loginBox .login-submit-image:active { padding-top:1px !important; background:linear-gradient(180deg,#3e3d3a,#65615a) !important; }
#loginBox .remember-row {
  position:absolute;
  left:310px;
  top:78px;
  width:17px;
  height:17px;
  margin:0;
}
#loginBox .remember-row .chk-label {
  display:block;
  width:17px;
  height:17px;
  overflow:hidden;
}
#loginBox .remember-row input {
  position:relative;
  box-sizing:border-box;
  width:17px;
  height:17px;
  margin:0;
  padding:0;
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:17px 17px !important;
  box-shadow:none !important;
  image-rendering:pixelated;
}
#loginBox .remember-row input:checked { background-image:url('/ui/login-remember-checked.png') !important; }
#loginBox .remember-row span { display:none; }
#loginBox #loginMsg {
  position:absolute;
  left:10px;
  top:132px;
  box-sizing:border-box;
  width:334px;
  height:22px;
  margin:0;
  padding:1px 6px 0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff !important;
  font:13px/20px var(--ui);
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:none;
}
#loginBox #loginMsg.err { color:#fff !important; }
#loginBox .login-server-name { position:absolute; left:104px; top:46px; box-sizing:border-box; width:198px; height:22px; padding-left:8px; overflow:hidden; color:#ffff33; font:13px/22px var(--ui); text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px #000; }
#loginBox .change-server-btn { position:absolute; left:236px; top:172px; width:92px; min-width:92px; height:25px; margin:0; padding:0; color:#eee !important; border:1px solid #342f29 !important; border-radius:4px !important; background:linear-gradient(180deg,#817c72 0,#5b5852 47%,#363635 52%,#4d4b48 100%) !important; box-shadow:inset 0 0 0 1px #aaa59b,0 1px 1px #0008 !important; font:700 13px/22px var(--ui); text-shadow:1px 1px 1px #000; }
#loginBox .change-server-btn:hover { color:#fff76a !important; border-color:#28241e !important; background:linear-gradient(180deg,#999386,#69655d 47%,#44413f 52%,#5c5954 100%) !important; }
#loginBox .change-server-btn:active { padding-top:1px; background:linear-gradient(180deg,#3e3d3a,#65615a) !important; }

/* 選角以前共用 2036 登入背景；選角畫面仍沿用原本背景。 */
#serverModal,
#noticeModal,
#loginModal {
  background-color:#e7ddd4 !important;
  background-image:url('/ui/login-flow-background-2036.png') !important;
  background-position:center center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}

/* 對話篩選直接由標題左側往右排列，放大到和聊天文字一致。 */
.chatToolbar { justify-content:flex-start; align-items:flex-start; }
.chatToolbar .chat-title { flex:0 0 auto; height:16px; padding-top:0; line-height:16px; }
.message-filter-inline {
  align-items:flex-end;
  justify-content:flex-start;
  height:16px;
  margin-left:10px;
  font-size:12px;
  line-height:16px;
}
.message-filter-inline label { align-items:flex-end; font-size:12px; line-height:16px; gap:3px; }
.message-filter-inline input { position:relative; bottom:2px; align-self:flex-end; width:13px; height:13px; }

/* farm-row 的通用 22px 縮排宣告較晚，這裡明確取消自動售出列的左側空格。 */
.farm-row.farm-auto-sell-row { margin-left:0; }

/* 對話／廣播採單行 rich composer，才能在輸入中保留可點擊的物品名稱。 */
.chat-composer,
#broadcastTextInput.chat-composer {
  box-sizing:border-box;
  min-width:0;
  min-height:30px;
  overflow:hidden;
  white-space:nowrap;
  line-height:18px;
  cursor:text;
}
.chat-composer:empty::before {
  content:attr(data-placeholder);
  color:#7d7892;
  pointer-events:none;
}
.composer-item-link,
.chat-item-link {
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.composer-item-link:hover,
.chat-item-link:hover { color:#fff36a !important; }
.chat-composer.drag-item-over { border-color:#fff36a !important; box-shadow:inset 0 0 0 1px #fff36a99,0 0 7px #fff36a55; }

/* 對話／廣播物品說明永遠留在瀏覽器可視框內，並蓋在頂端廣播之上。 */
#itemTooltip,
#setTooltip {
  z-index:30010 !important;
  max-width:calc(100vw - 16px) !important;
  max-height:calc(100vh - 16px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
#itemDescPin {
  z-index:30020 !important;
  max-width:calc(100vw - 16px) !important;
  max-height:calc(100vh - 16px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
#setDescPin { z-index:30019 !important; max-width:calc(100vw - 16px) !important; max-height:calc(100vh - 16px) !important; overflow-y:auto !important; }

/* Chrome 在按住原生捲軸時不一定繼承 body 的 cursor。root、所有元素及每個
   scrollbar pseudo element 都明確隱藏系統游標，畫面只保留動態 DTX 游標。 */
html.custom-cursor-on,
html.custom-cursor-on *,
body.custom-cursor-on,
body.custom-cursor-on * { cursor:none !important; }
html.custom-cursor-on::-webkit-scrollbar,
html.custom-cursor-on::-webkit-scrollbar-track,
html.custom-cursor-on::-webkit-scrollbar-thumb,
html.custom-cursor-on::-webkit-scrollbar-button,
html.custom-cursor-on::-webkit-scrollbar-corner,
body.custom-cursor-on::-webkit-scrollbar,
body.custom-cursor-on::-webkit-scrollbar-track,
body.custom-cursor-on::-webkit-scrollbar-thumb,
body.custom-cursor-on::-webkit-scrollbar-button,
body.custom-cursor-on::-webkit-scrollbar-corner,
body.custom-cursor-on *::-webkit-scrollbar,
body.custom-cursor-on *::-webkit-scrollbar-track,
body.custom-cursor-on *::-webkit-scrollbar-thumb,
body.custom-cursor-on *::-webkit-scrollbar-button,
body.custom-cursor-on *::-webkit-scrollbar-corner {
  /* Chromium 對原生 scrollbar widget 會忽略 cursor:none；指定同一組 DTX
     游標作為原生層備援，JS 動態游標仍在 pointermove 時覆蓋其動畫。 */
  cursor:url('DTX/00000.PNG') 0 0, none !important;
}

/* 掛機搜尋範圍：勾選框與數值保持同列，不增加掛機面板尺寸。 */
.farm-range-row { align-items:center; }
.farm-range-check {
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:inherit;
  cursor:pointer;
  user-select:none;
}
.farm-range-check input[type="checkbox"] {
  position:relative;
  z-index:3;
  width:14px;
  height:14px;
  margin:0;
  accent-color:#7767b8;
  pointer-events:auto !important;
}
.farm-combat-section > .farm-counter-row {
  margin-left:0 !important;
  padding-left:0 !important;
}

/* 單位色由 game.js 寫入 CSS 變數；色點、名稱、座標與地圖標記共用同色。 */
#nearbyList li:is(.monster, .portal, .npc) {
  border-left-color:var(--unit-color, #e08080) !important;
}
#nearbyList li:is(.monster, .portal, .npc) .nu-name,
#nearbyList li:is(.monster, .portal, .npc) .nu-pos {
  color:var(--unit-color, #e08080) !important;
}
#nearbyList li:is(.monster, .portal, .npc) .nu-name::before {
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:5px;
  border-radius:50%;
  background:var(--unit-color, #e08080);
  box-shadow:0 0 3px var(--unit-color, #e08080);
  vertical-align:1px;
}
#nearbyList li.monster.boss .nu-name::before {
  content:"♛";
  width:auto;
  height:auto;
  margin-right:5px;
  border-radius:0;
  background:transparent;
  color:#ffe34d;
  font-size:13px;
  font-weight:900;
  line-height:1;
  text-shadow:1px 1px 0 #5a4100, 0 0 4px rgba(255,227,77,.7);
  box-shadow:none;
  vertical-align:-1px;
}

/* 全站捲動容器改由 game.js 自繪；原生 scrollbar 完全隱藏，拖曳不會再
   進入 Chrome 的原生控制層，也就不會跳回系統游標。 */
.tw-scroll-host {
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.tw-scroll-host::-webkit-scrollbar {
  display:none !important;
  width:0 !important;
  height:0 !important;
}
.tw-scrollbar-overlay {
  position:fixed;
  display:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:5px !important;
  background:rgba(17,13,39,.88);
  box-shadow:inset 0 0 0 1px rgba(105,88,161,.48);
  pointer-events:auto;
  touch-action:none;
  user-select:none;
}
.tw-scrollbar-y { width:8px; }
.tw-scrollbar-x { height:8px; }
.tw-scrollbar-thumb {
  position:absolute;
  left:1px;
  top:1px;
  width:6px;
  min-width:6px;
  height:6px;
  min-height:6px;
  border:0;
  border-radius:4px !important;
  background:linear-gradient(180deg,#7768b8,#4d427f);
  box-shadow:inset 0 0 0 1px rgba(206,194,255,.35),0 0 4px rgba(105,88,190,.38);
  will-change:transform;
}
.tw-scrollbar-x .tw-scrollbar-thumb {
  width:6px;
  height:6px;
}
.tw-scrollbar-overlay:hover .tw-scrollbar-thumb,
.tw-scrollbar-thumb:active {
  background:linear-gradient(180deg,#a395e6,#6858a7);
}
.tw-scrollbar-notice,
.tw-scrollbar-server {
  background:transparent;
  box-shadow:none;
}
.tw-scrollbar-notice .tw-scrollbar-thumb,
.tw-scrollbar-server .tw-scrollbar-thumb {
  border:1px solid #c2bd78;
  background:linear-gradient(180deg,#aaa662,#77733d);
  box-shadow:inset 0 0 0 1px rgba(255,250,177,.22);
}
.tw-scrollbar-notice.tw-scrollbar-y {
  width:15px;
}
.tw-scrollbar-notice .tw-scrollbar-thumb {
  left:0;
  width:15px;
  min-width:15px;
  border-radius:2px !important;
}
.tw-scrollbar-notice:hover .tw-scrollbar-thumb,
.tw-scrollbar-notice .tw-scrollbar-thumb:active,
.tw-scrollbar-server:hover .tw-scrollbar-thumb,
.tw-scrollbar-server .tw-scrollbar-thumb:active {
  background:linear-gradient(180deg,#c0bb70,#8d8848);
}
body.custom-cursor-on .tw-scrollbar-overlay,
body.custom-cursor-on .tw-scrollbar-overlay * { cursor:none !important; }

/* 玩家交易沿用背包欄的框體與配色；固定像素尺寸，不隨解析度縮放。 */
.player-trade-panel {
  width:540px !important;
  height:420px !important;
  min-width:540px !important;
  min-height:420px !important;
  max-width:540px !important;
  max-height:420px !important;
  padding:0 !important;
  overflow:hidden !important;
  color:#f6f3ff;
}
.player-trade-title {
  flex:0 0 35px;
  margin:0 !important;
}
.player-trade-party { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:7px; min-height:0; padding:6px 7px; }
.player-trade-self { height:165px; }
.player-trade-other { height:162px; grid-template-columns:minmax(0,1fr) 150px; }
.player-trade-items {
  display:grid; grid-auto-rows:28px; align-content:start; gap:3px; min-width:0; min-height:0; padding:5px 9px 5px 5px; overflow-y:auto; overflow-x:hidden;
  border:1px solid #66559a !important; border-radius:4px !important; background:#17132e; box-shadow:inset 0 0 0 1px rgba(145,126,202,.22);
}
.player-trade-item {
  display:grid; grid-template-columns:30px minmax(0,1fr) 52px 24px; align-items:center; gap:5px; height:28px; min-height:28px;
  padding:0 5px; color:#fff; border:1px solid #4f437f !important; border-radius:5px !important; background:#211a43; text-align:left;
}
.player-trade-other .player-trade-item { grid-template-columns:30px minmax(0,1fr) 52px; }
.player-trade-item:hover { border-color:#8d7dcc !important; background:#2a2252; }
.player-trade-item img { justify-self:center; width:auto; height:auto; max-width:28px; max-height:28px; image-rendering:pixelated; }
.player-trade-item b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.player-trade-item em { color:#fff3a3; text-align:center; font:normal 11px/1 var(--numeric); }
.player-trade-item button { width:21px; height:21px; min-width:21px; padding:0; border:1px solid #66559a !important; background:#2b2453 !important; color:#fff; font-size:12px; }
.player-trade-empty { display:flex; align-items:center; justify-content:center; min-height:28px; color:#bfb9de; font-size:11px; }
.player-trade-controls { display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:8px 6px; padding:5px 2px; }
.player-trade-controls label { grid-column:1 / -1; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; color:#fff; font-size:12px; }
.player-trade-controls input {
  width:100%; height:25px; min-height:25px; padding:0 6px; border:1px solid #66559a !important; border-radius:4px !important;
  background:#17132e !important; color:#fff; text-align:right; font:12px/23px var(--numeric);
}
.player-trade-controls button,.player-trade-invite button {
  height:27px; min-height:27px; padding:2px 6px; color:#fff; border:1px solid #66559a !important;
  background:linear-gradient(180deg,#5b4ba0,#34286f) !important; font-size:12px;
}
.player-trade-controls button:hover,.player-trade-invite button:hover { color:#fff6a7; border-color:#eee07e !important; }
.player-trade-controls button.confirmed { color:#fff47c; box-shadow:inset 0 0 0 1px #d9c75c; }
.player-trade-divider { display:flex; align-items:center; height:30px; margin:0 7px; padding:0 7px; border-top:1px solid #66559a; border-bottom:1px solid #66559a; color:#fff; }
.player-trade-divider b { min-width:82px; font-size:12px; }
.player-trade-divider span { margin-left:auto; color:#e7e1ff; font-size:11px; }
.player-trade-other-summary { display:flex; flex-direction:column; justify-content:center; gap:12px; padding:5px 7px; }
.player-trade-other-summary b { overflow:hidden; color:#f4efff; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.player-trade-other-summary span { display:flex; justify-content:space-between; color:#fff; font-size:12px; }
.player-trade-other-summary strong { min-width:78px; padding:3px 6px; border:1px solid #66559a; border-radius:4px; background:#17132e; color:#fff8a0; text-align:right; }
.player-trade-confirm-dialog {
  position:absolute; inset:35px 0 0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(0,0,0,.84); color:#fff; text-align:center;
}
.player-trade-confirm-dialog p { margin:0 0 16px; font-size:13px; }
.player-trade-confirm-dialog > div { display:flex; gap:12px; }
.player-trade-confirm-dialog button { min-width:82px; height:28px; color:#fff; border:1px solid #777 !important; background:rgba(20,20,20,.92) !important; }
.player-trade-confirm-dialog button:hover { color:#fff36d; border-color:#aaa !important; }
.player-trade-invite {
  position:fixed; left:50%; top:50%; z-index:31000; width:282px; padding:4px; transform:translate(-50%,-50%);
  border:2px solid #241d61; border-radius:6px; background:linear-gradient(#665bad,#3f3584); color:#fff; box-shadow:0 8px 30px rgba(0,0,0,.72);
}
.player-trade-invite-title { height:21px; padding:2px 7px; border:1px solid #bdb7e8; border-radius:4px; background:linear-gradient(#f7f5ff 0 24%,#8176c8 27%); color:#282061; font-weight:700; text-shadow:0 1px #fff; }
.player-trade-invite p { min-height:46px; margin:8px 5px; display:flex; align-items:center; justify-content:center; text-align:center; }
.player-trade-invite > div:last-child { display:flex; justify-content:center; gap:14px; }
.player-trade-invite button { min-width:72px; }

/* EquipmentAbility.ttales 鑲嵌視窗：固定像素尺寸，不隨瀏覽器解析度縮放。 */
.equipment-ability-panel {
  width:620px !important; height:420px !important; min-width:620px !important; min-height:420px !important;
  padding:0 !important; overflow:hidden !important; color:#f4f0ff;
  border:2px solid #9d91e9 !important; border-radius:7px !important;
  background:linear-gradient(180deg,#51479d 0,#20184d 13%,#18133b 100%) !important;
  box-shadow:0 8px 24px #000b, inset 0 0 0 1px #2d286c !important;
  font:12px/1.35 var(--ui); user-select:none;
}
.equipment-ability-header {
  height:27px !important; min-height:27px !important; padding:3px 7px !important;
  color:#fff; border-bottom:1px solid #bbb3ff !important;
  background:linear-gradient(180deg,#766bc6,#44398f) !important;
}
.equipment-ability-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:5px; height:393px; padding:5px; }
.equipment-ability-help {
  min-width:0; min-height:0; padding:7px 12px 7px 8px; overflow-y:auto; color:#fff;
  border:1px solid #8c82d0; border-radius:3px; background:rgba(4,3,18,.82);
}
.equipment-ability-help-title { margin:-7px -8px 8px; padding:2px 7px; color:#fff; border-bottom:1px solid #8c82d0; background:#29236c; font-weight:700; }
.equipment-ability-help h3 { margin:0 0 10px; padding-bottom:5px; border-bottom:1px solid #8b82bd; font-size:13px; font-weight:700; }
.equipment-ability-help p { min-height:38px; margin:0 0 8px; white-space:pre-wrap; }
.equipment-ability-help dl { display:grid; grid-template-columns:72px 1fr; gap:2px 4px; margin:0 0 9px; }
.equipment-ability-help dt,.equipment-ability-help dd { margin:0; }
.equipment-ability-cost-title { margin:7px 0; color:#fff; line-height:1.5; }
.equipment-ability-materials { display:grid; gap:3px; margin-top:5px; }
.equipment-ability-material { display:grid; grid-template-columns:24px 1fr auto; gap:5px; align-items:center; min-height:25px; }
.equipment-ability-material img { width:auto; height:auto; max-width:24px; max-height:24px; image-rendering:pixelated; justify-self:center; }
.equipment-ability-material b { color:#fff36c; font-size:11px; }
.equipment-ability-effect { margin-top:9px; padding-top:7px; border-top:1px solid #6e659d; white-space:pre-wrap; }
.equipment-ability-empty-help { padding:18px 2px; color:#c8c2e7; }
.equipment-ability-main { display:grid; grid-template-rows:minmax(0,1fr) 54px 39px 25px 31px; gap:4px; min-width:0; min-height:0; }
.equipment-ability-main.selecting-equipment { grid-template-rows:25px minmax(0,1fr) 25px 31px; }
.equipment-ability-list {
  display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:3px;
  min-height:0; height:100%; overflow-y:auto; padding:5px 12px 5px 5px;
  border:1px solid #7f73c3; border-radius:3px; background:#26205d;
}
.equipment-ability-choice {
  display:flex; align-items:center; gap:8px; min-width:0; height:25px; padding:2px 9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:1px solid #665aa9; border-radius:12px !important; background:linear-gradient(180deg,#6b60b2,#4c4294);
  color:inherit; text-align:left; font:700 12px var(--ui); box-shadow:inset 0 1px 1px #ffffff26;
}
.equipment-ability-choice:hover,.equipment-ability-choice.selected { border-color:#fff2a0; background:linear-gradient(180deg,#7569bc,#574ca0); box-shadow:none !important; }
.equipment-ability-panel button:focus,.equipment-ability-panel button:focus-visible { outline:0 !important; box-shadow:none !important; }
.equipment-ability-choice.incompatible { opacity:.38; filter:grayscale(.65); }
.equipment-ability-loading { grid-column:1/-1; padding:18px; color:#d8d2ff; text-align:center; }
.equipment-ability-source { display:flex; align-items:center; justify-content:center; gap:8px; color:#fff04f; background:#423784; border:1px solid #6f64ae; }
.equipment-ability-source img { width:auto; height:auto; max-width:30px; max-height:30px; image-rendering:pixelated; }
.equipment-ability-drop {
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px;
  border:1px solid #8a7cce; background:#18123e; color:#d9d3ef;
}
.equipment-ability-drop small { margin-left:8px; color:#aaa2c9; }
.equipment-ability-drop.drag-over { border-color:#fff176; box-shadow:inset 0 0 10px #f5d53f55; }
.equipment-ability-drop img { width:auto; height:auto; max-width:42px; max-height:42px; image-rendering:pixelated; }
.equipment-ability-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.equipment-ability-slot {
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0;
  border:1px solid #574d9b; background:#12335c; color:#8e88aa; overflow:hidden;
}
.equipment-ability-slot:not(:empty) { background:#20245c; color:inherit; }
.equipment-ability-slot small { display:block; color:#f4ecff; font-size:10px; }
.equipment-ability-status { padding:3px 6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff; background:#0e0a28; border:1px solid #4e467f; }
.equipment-ability-actions { display:flex; justify-content:flex-end; gap:7px; }
.equipment-ability-actions button { min-width:120px; height:28px; color:#17122e; border:1px solid #d7d0ff; background:linear-gradient(#fff,#a9a0e4); font-weight:700; }
.equipment-ability-actions button:disabled { opacity:.45; filter:grayscale(1); }
.equipment-ability-cat-0 { color:#6fd7ff !important; }
.equipment-ability-cat-1 { color:#d897ff !important; }
.equipment-ability-cat-2 { color:#b8f05a !important; }
.tt-equipment-ability-inactive { color:#df2635 !important; text-shadow:0 1px 2px #240000; }
.tt-ability-stat { margin-left:3px; color:#ffff33 !important; text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000; }
.tt-equipment-abilities { display:grid; gap:1px; margin:3px 0 1px; }
.tt-equipment-ability {
  width:max-content; max-width:100%; padding:0; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; font:inherit; text-align:left;
  text-decoration:underline; text-underline-offset:2px; pointer-events:auto; cursor:pointer;
}
.equipment-ability-equipment-title { display:flex; align-items:center; padding:3px 7px; color:#fff; border:1px solid #7569b8; background:#31286f; }
.equipment-ability-equipment-list { min-height:0; overflow-y:auto; display:grid; align-content:start; gap:3px; padding:5px 12px 5px 5px; border:1px solid #7f73c3; background:#211a55; }
.equipment-ability-equipment-choice { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:45px; padding:3px 8px; color:#fff; text-align:left; border:1px solid #665aa9; background:linear-gradient(180deg,#5c51a5,#3e347f); }
.equipment-ability-equipment-choice:hover,.equipment-ability-equipment-choice:focus { border-color:#fff2a0; box-shadow:none !important; }
.equipment-ability-equipment-choice small { color:#fff36c; }
.equipment-ability-equipment-icon { width:40px; height:38px; display:grid; place-items:center; }
.equipment-ability-equipment-icon img { width:auto; height:auto; max-width:38px; max-height:38px; object-fit:none; image-rendering:pixelated; }
.equipment-ability-notice { position:fixed; z-index:33000; width:270px; color:#fff; }
.equipment-ability-notice-box { padding:13px 14px 10px; border:2px solid #a99cf0; border-radius:5px; background:rgba(9,6,27,.97); box-shadow:0 8px 24px #000c; text-align:center; }
.equipment-ability-notice-box b { display:block; margin-bottom:10px; color:#fff36c; font-size:14px; }
.equipment-ability-notice-box div { min-height:34px; line-height:1.5; }
.equipment-ability-notice-box button { min-width:90px; margin-top:10px; }
.equipment-ability-description { position:fixed; z-index:31000; display:none; width:260px; padding:10px 12px; color:#f0eef5; border:0 !important; border-radius:0 !important; background:rgba(0,0,0,.82); box-shadow:none !important; font:12px/1.45 var(--ui); }
.equipment-ability-description .tt-name { margin-bottom:6px; color:#fff36c; font-size:13px; font-weight:700; }
.equipment-ability-description-body { padding:0; white-space:pre-wrap; }
.equipment-ability-description-body div { margin-top:7px; color:#ffff33; }

/* 好友欄：和原版紫藍視窗一致，固定尺寸、可拖曳，列表只在資料變更時重畫。 */
.tab-badge { display:inline-grid; min-width:15px; height:15px; margin-left:3px; padding:0 2px; place-items:center; color:#fff; border:1px solid #ffd5d5; border-radius:8px; background:#bd394e; font:700 9px/1 var(--ui); }
.tab-badge[hidden] { display:none !important; }
.friend-float-panel { width:540px !important; height:520px !important; min-width:540px; min-height:520px; max-width:540px; max-height:520px; color:#f7f5ff; border:1px solid #d8d4ff !important; border-radius:4px !important; background:linear-gradient(180deg,#5e54ad 0,#292266 32px,#17133c 100%) !important; box-shadow:0 0 0 2px #403785,0 8px 24px #000b !important; }
.friend-float-panel .float-header { height:27px; min-height:27px; padding:3px 7px 3px 11px; border-bottom:1px solid #d9d4ff; background:linear-gradient(180deg,#8a82d9,#6257b0 49%,#443990 51%,#554aa2); }
.friend-body { box-sizing:border-box; height:calc(100% - 27px); display:flex; flex-direction:column; gap:6px; padding:7px; overflow:hidden; background:linear-gradient(180deg,rgba(49,41,112,.88),rgba(19,15,50,.96)); }
.friend-add-row { display:grid; grid-template-columns:minmax(0,1fr) 82px; gap:6px; }
.friend-add-row input { min-width:0; height:28px; box-sizing:border-box; padding:3px 8px; color:#fff; border:1px solid #8c82cd; border-radius:3px; outline:0; background:#100d30; box-shadow:inset 0 0 0 1px #05041a; }
.friend-add-row input:focus { border-color:#ece590; }
.friend-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.friend-tabs button { min-height:27px; color:#dedaff; border:1px solid #8178bd; border-radius:3px; background:linear-gradient(180deg,#5f55aa,#373079); box-shadow:inset 0 1px #ffffff2b; }
.friend-tabs button.active { color:#fff6a4; border-color:#eee58b; background:linear-gradient(180deg,#8177ce,#514794); }
.friend-tabs span { color:#fff4a3; font-size:10px; }
.friend-setting { display:flex; align-items:center; gap:6px; min-height:22px; padding:0 3px; color:#d8d3f2; font-size:11px; }
.friend-setting input { accent-color:#8378d1; }
.friend-list { flex:1 1 auto; min-height:0; overflow-y:auto; padding:4px 11px 4px 4px; border:1px solid #8c83ca; border-radius:3px; background:linear-gradient(180deg,#211b5a,#100d31); box-shadow:inset 0 0 0 1px #07051d; }
.friend-row { display:grid; grid-template-columns:10px minmax(0,1fr) minmax(0,158px); align-items:center; gap:8px; min-height:49px; margin-bottom:4px; padding:5px 7px; overflow:hidden; border:1px solid #554d98; border-radius:3px; background:linear-gradient(180deg,#49418f,#30296d); }
.friend-row:hover { border-color:#c8c0ef; background:linear-gradient(180deg,#5a50a5,#3c337d); }
.friend-presence { width:8px; height:8px; border-radius:50%; background:#77728d; box-shadow:0 0 0 1px #18142e; }
.friend-row.online .friend-presence { background:#62ed8c; box-shadow:0 0 5px #62ed8c; }
.friend-person { min-width:0; display:flex; flex-direction:column; }
.friend-person b { overflow:hidden; color:#fff; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:1.35; }
.friend-person small { overflow:hidden; color:#d0cae7; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.35; }
.friend-row.online .friend-person small { color:#9fe9b5; }
.friend-row-actions { display:flex; justify-content:flex-end; gap:3px; min-width:0; max-width:158px; overflow:hidden; }
.friend-row-actions button { min-width:46px; height:25px; padding:2px 5px; overflow:hidden; color:#f2efff; border:1px solid #8b82c7; border-radius:2px; background:linear-gradient(180deg,#655bb0,#3b347c); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.friend-row-actions button:hover { color:#fff5a1; border-color:#e8df87; }
.friend-list-caption { margin:5px 1px 4px; padding:3px 6px; color:#fff1a0; border-bottom:1px solid #6d64a8; background:#30286d; font-size:11px; }
.friend-list-caption:first-child { margin-top:0; }
.friend-empty { display:grid; min-height:150px; place-items:center; color:#aaa4c7; text-align:center; line-height:1.7; }
.friend-status { min-height:18px; overflow:hidden; color:#c8c2df; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.friend-status.error { color:#ff9d9d; }
.friend-invite-dialog {
  position:fixed; left:50%; top:50%; z-index:31500; width:330px; padding:0; transform:translate(-50%,-50%);
  color:#fff; border:1px solid rgba(255,255,255,.26); border-radius:5px; background:rgba(0,0,0,.88); box-shadow:0 9px 28px rgba(0,0,0,.72);
}
.friend-invite-title { padding:7px 11px; border-bottom:1px solid rgba(255,255,255,.18); font-size:13px; font-weight:700; }
.friend-invite-dialog p { min-height:48px; margin:0; padding:15px 16px; line-height:1.55; text-align:center; }
.friend-invite-actions { display:flex; justify-content:center; gap:8px; padding:0 12px 13px; }
.friend-invite-actions button { min-width:82px; height:28px; color:#fff; border:1px solid #777 !important; background:rgba(24,24,24,.94) !important; }
.friend-invite-actions button:hover { color:#fff36d; border-color:#aaa !important; }

/* 組隊欄：固定大小，不隨解析度縮放；邀請確認使用透明黑底。 */
.party-float-panel, .party-float-panel:hover, .party-float-panel:focus, .party-float-panel:focus-within { width:334px !important; height:470px !important; min-width:334px; min-height:470px; max-width:334px; max-height:470px; color:#f7f5ff; border:1px solid #d8d4ff !important; border-radius:4px !important; outline:0 !important; background:linear-gradient(180deg,#5e54ad 0,#292266 32px,#17133c 100%) !important; box-shadow:none !important; }
.party-float-panel .float-header { height:27px; min-height:27px; padding:3px 7px 3px 11px; border-bottom:1px solid #d9d4ff; background:linear-gradient(180deg,#8a82d9,#6257b0 49%,#443990 51%,#554aa2); }
.party-body { box-sizing:border-box; height:calc(100% - 27px); display:flex; flex-direction:column; gap:7px; padding:7px; overflow:hidden; background:linear-gradient(180deg,rgba(49,41,112,.88),rgba(19,15,50,.96)); }
.party-invite-row { display:grid; grid-template-columns:minmax(0,1fr) 90px; gap:6px; }
.party-invite-row input { min-width:0; height:28px; box-sizing:border-box; padding:3px 8px; color:#fff; border:1px solid #8c82cd; border-radius:3px; outline:0; background:#100d30; box-shadow:inset 0 0 0 1px #05041a; }
.party-invite-row input:focus { border-color:#ece590; }
.party-summary { min-height:25px; box-sizing:border-box; padding:5px 8px; color:#fff4a3; border:1px solid #6d64a8; border-radius:3px; background:#30286d; font-size:11px; }
.party-member-list { flex:1 1 auto; min-height:0; overflow-y:auto; padding:4px 11px 4px 4px; border:1px solid #8c83ca; border-radius:3px; background:linear-gradient(180deg,#211b5a,#100d31); box-shadow:inset 0 0 0 1px #07051d; }
.party-member-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px; min-height:38px; margin-bottom:4px; padding:4px 6px; border:1px solid #554d98; border-radius:3px; background:linear-gradient(180deg,#49418f,#30296d); }
.party-member-row.self { border-color:#d8ce70; }
.party-member-copy { position:relative; min-width:0; display:flex; flex-direction:column; }
.party-member-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.party-member-copy b { color:#fff; font-size:13px; }
.party-hp-bar { position:relative; display:block; width:100%; height:11px; margin-top:3px; overflow:hidden; border:1px solid #19132f; border-radius:5px; background:#0b0920; box-shadow:inset 0 0 2px #000; }
.party-hp-bar i { position:absolute; inset:0 auto 0 0; display:block; background:linear-gradient(180deg,#fff5a0,#ffc531 48%,#e47b09); box-shadow:inset 0 1px #fffbd0,0 0 4px #ffad20aa; transition:width .18s linear; }
.party-member-row.different-map .party-member-copy::after { content:""; position:absolute; left:2px; right:2px; top:50%; z-index:3; height:2px; border-radius:2px; background:rgba(180,180,188,.88); box-shadow:0 1px rgba(0,0,0,.55); transform:rotate(-8deg); transform-origin:center; pointer-events:none; }
.party-member-row.offline .party-hp-bar { opacity:.46; filter:grayscale(1); }
.party-member-row.offline .party-member-copy b { color:#aaa5bc; }
.party-member-tooltip { position:fixed; z-index:43050; max-width:230px; padding:7px 9px; color:#fff; border:0; border-radius:3px; background:rgba(0,0,0,.84); box-shadow:0 4px 13px rgba(0,0,0,.62); font:12px/1.5 var(--ui); white-space:pre-line; pointer-events:none; }

/* 帳號共用倉庫：只顯示倉庫本體，玩家從既有背包直接拖入。 */
.warehouse-panel { width:384px !important; height:580px !important; min-width:384px; min-height:580px; max-width:384px; max-height:580px; overflow:hidden !important; color:#f7f5ff; }
.warehouse-body { box-sizing:border-box; height:calc(100% - 35px); max-height:none; display:flex; flex-direction:column; gap:7px; padding:7px; overflow:hidden; background:linear-gradient(180deg,rgba(49,41,112,.95),rgba(16,13,43,.98)); }
.warehouse-seed-bar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 50px 50px; align-items:center; gap:6px; min-height:32px; padding:4px 6px; border:1px solid #756bb1; border-radius:3px; background:#211a55; }
.warehouse-seed-bar span { display:flex; min-width:0; flex-direction:column; color:#dcd7f4; font-size:9.9px; line-height:1.15; white-space:nowrap; }
.warehouse-seed-bar b { color:#fff36c; font:700 12.1px var(--numeric); }
.warehouse-tools { flex:1 1 auto; width:100%; margin:0 !important; }
.warehouse-layout { flex:1 1 auto; min-height:0; display:block; }
.warehouse-side { width:100%; height:100%; min-width:0; min-height:0; display:flex; flex-direction:column; box-sizing:border-box; padding:5px; border:1px solid #8c83ca; border-radius:3px; background:#17132e; }
.warehouse-side-title { flex:0 0 29px; display:flex; align-items:center; justify-content:stretch; padding:2px 3px 4px; color:#fff2a0; border-bottom:1px solid #554d98; font-size:11px; }
.warehouse-grid { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(8,40px); grid-auto-rows:40px; align-content:start; justify-content:center; gap:3px; padding:6px 11px 6px 5px; overflow-y:auto; overflow-x:hidden; }
.warehouse-grid.drag-over { border-color:#fff176; background:#241d50; box-shadow:inset 0 0 14px rgba(255,241,118,.22); }
.warehouse-slot { position:relative; display:grid; width:40px; height:40px; place-items:center; box-sizing:border-box; overflow:hidden; border:1px solid #655aa4; border-radius:6px; background:#211b4b; }
.warehouse-slot.has-item { background:linear-gradient(145deg,#312866,#21194d); }
.warehouse-slot[draggable="true"] { cursor:grab; }
.warehouse-slot[draggable="true"]:active { cursor:grabbing; }
.warehouse-slot.has-item:hover { border-color:#f0dd84; background:#3a3075; }
.warehouse-slot img { width:auto; height:auto; object-fit:none; image-rendering:pixelated; pointer-events:none; }
.warehouse-slot .warehouse-name { display:none; }
.warehouse-slot .warehouse-qty { position:absolute; right:2px; bottom:0; z-index:9; color:#fff04a; font:700 12px/1 var(--numeric); text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000; pointer-events:none; }
.warehouse-panel.warehouse-list-view .warehouse-grid { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:29px; align-content:start; justify-content:stretch; gap:3px; padding:6px 11px 6px 5px; }
.warehouse-panel.warehouse-list-view .warehouse-slot.empty { display:none; }
.warehouse-panel.warehouse-list-view .warehouse-slot.has-item { position:relative; width:100%; min-height:29px; height:29px; display:grid; grid-template-columns:34px minmax(0,1fr) 40px; align-items:center; gap:5px; padding:0 4px; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
.warehouse-panel.warehouse-list-view .warehouse-slot.has-item:hover { transform:none; filter:none; border:0; background:transparent; box-shadow:none; }
.warehouse-panel.warehouse-list-view .warehouse-slot.has-item::before { content:''; grid-column:1; grid-row:1; justify-self:center; align-self:center; width:19px; height:14px; border-radius:999px; background:#322a61; box-shadow:inset 0 0 0 1px #51458f; pointer-events:none; }
.warehouse-panel.warehouse-list-view .warehouse-slot img { position:relative; z-index:1; grid-column:1; grid-row:1; justify-self:center; align-self:center; width:auto; height:auto; max-width:none; max-height:none; padding:0; border:0; border-radius:0; background:transparent; filter:drop-shadow(2px 3px 0 rgba(10,6,28,.68)); }
.warehouse-panel.warehouse-list-view .warehouse-slot .warehouse-name,
.warehouse-panel.warehouse-list-view .warehouse-slot .warehouse-qty { position:static; display:flex; min-width:0; min-height:17px; height:17px; align-items:center; justify-content:center; overflow:hidden; padding:0 5px; border:0; border-radius:999px; background:#322a61; text-overflow:ellipsis; white-space:nowrap; box-shadow:none; text-shadow:none; font-size:11px; line-height:17px; }
.warehouse-panel.warehouse-list-view .warehouse-slot .warehouse-name { grid-column:2; grid-row:1; }
.warehouse-panel.warehouse-list-view .warehouse-slot .warehouse-qty { grid-column:3; grid-row:1; color:#fff; font-family:var(--numeric); font-weight:700; text-shadow:0 1px 2px #000; }
.warehouse-status { flex:0 0 18px; overflow:hidden; color:#fff2a0; text-align:right; text-overflow:ellipsis; white-space:nowrap; font:11px/18px var(--numeric); }
.party-leader-mark { color:#fff36d; }
.party-member-actions { display:flex; gap:3px; }
.party-member-actions button { height:24px; padding:2px 6px; color:#f2efff; border:1px solid #8b82c7; border-radius:2px; background:linear-gradient(180deg,#655bb0,#3b347c); font-size:10px; }
.party-footer { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.party-exp-mode { display:flex; align-items:center; gap:5px; margin-right:auto; color:#eeeaff; font-size:10px; white-space:nowrap; }
.party-exp-mode label { display:flex; align-items:center; gap:2px; cursor:pointer; }
.party-exp-mode input { width:12px; height:12px; margin:0; accent-color:#f0c64d; }
.party-exp-mode input:disabled + span, .party-exp-mode label:has(input:disabled) { opacity:.5; cursor:default; }
.party-status { min-height:18px; overflow:hidden; color:#c8c2df; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.party-status.error { color:#ff9d9d; }
.party-empty { display:grid; min-height:180px; place-items:center; color:#aaa4c7; text-align:center; line-height:1.7; }
.party-invite-dialog { position:fixed; left:50%; top:50%; z-index:31500; width:330px; padding:0; transform:translate(-50%,-50%); color:#fff; border:1px solid rgba(255,255,255,.26); border-radius:5px; background:rgba(0,0,0,.88); box-shadow:0 9px 28px rgba(0,0,0,.72); }
.party-invite-title { padding:7px 11px; border-bottom:1px solid rgba(255,255,255,.18); font-size:13px; font-weight:700; }
.party-invite-dialog p { min-height:48px; margin:0; padding:15px 16px; line-height:1.55; text-align:center; }
.party-invite-actions { display:flex; justify-content:center; gap:8px; padding:0 12px 13px; }
.party-invite-actions button { min-width:82px; height:28px; color:#fff; border:1px solid #777 !important; background:rgba(24,24,24,.94) !important; }
.party-invite-actions button:hover { color:#fff36d; border-color:#aaa !important; }

/* 公會：尺寸固定，不因解析度縮放；配色沿用天翼原版紫藍介面。 */
.guild-float-panel,.guild-float-panel:hover,.guild-float-panel:focus-within{width:520px!important;height:570px!important;min-width:520px;min-height:570px;max-width:520px;max-height:570px;color:#f8f7ff;border:1px solid #d8d4ff!important;border-radius:4px!important;outline:0!important;background:linear-gradient(180deg,#5e54ad 0,#292266 28px,#17133c 100%)!important;box-shadow:none!important;z-index:165!important}
.guild-float-panel .float-header,.guild-profile-panel .float-header{height:27px;min-height:27px;padding:3px 7px 3px 11px;border-bottom:1px solid #d9d4ff;background:linear-gradient(180deg,#8a82d9,#6257b0 49%,#443990 51%,#554aa2)}
.guild-tabs{height:29px;display:flex;align-items:end;gap:2px;padding:3px 6px 0;background:#302974;border-bottom:1px solid #8e86cf}
.guild-tabs button{height:25px;min-width:72px;padding:2px 10px;color:#d8d4ed;border:1px solid #6f66ad;border-bottom:0;border-radius:3px 3px 0 0;background:#29235d;font:12px var(--ui)}
.guild-tabs button.active{color:#fff;background:#51499a;box-shadow:inset 0 1px #9188d5}
.guild-no-membership,.guild-joined{box-sizing:border-box;height:475px;padding:9px;background:linear-gradient(180deg,rgba(49,41,112,.9),rgba(17,13,49,.98))}
.guild-no-membership{display:flex;flex-direction:column;gap:9px}
.guild-no-membership>label{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:7px;font-size:12px}
.guild-no-membership input,.guild-no-membership select,.guild-no-membership textarea,.guild-field textarea,.guild-edit-row input,.guild-edit-row select{box-sizing:border-box;min-width:0;color:#fff;border:1px solid #766db9;border-radius:2px;outline:0;background:#100d31;font:12px/1.45 var(--ui)}
.guild-no-membership input,.guild-no-membership select,.guild-edit-row input,.guild-edit-row select{height:26px;padding:2px 6px}
.guild-no-membership textarea,.guild-field textarea{padding:5px 7px;resize:none}
.guild-empty-copy{padding:16px 10px;color:#d4cfea;text-align:center;line-height:1.8;border:1px solid #665da9;background:#211b58}
.guild-level-range{display:grid;grid-template-columns:76px 1fr 18px 1fr;align-items:center;gap:5px;font-size:12px}.guild-level-range label{display:contents}.guild-level-range b{text-align:center}
.guild-main-button{align-self:center;min-width:120px;height:29px;color:#fff;border:1px solid #aaa1df;background:linear-gradient(180deg,#7167bc,#39317b)}
.guild-page{display:none;height:100%;min-height:0}.guild-page.active{display:flex;flex-direction:column;gap:7px}
.guild-info-grid{display:grid;grid-template-columns:82px 1fr;gap:7px}.guild-emblem{display:grid;width:70px;height:70px;padding:0;place-items:center;border:1px solid #ada6e2!important;border-radius:2px!important;background:radial-gradient(circle at 38% 35%,#51488e,#211b5a 66%,#0b0929)!important;box-shadow:inset 0 0 0 3px #40388c!important}.guild-emblem img{display:block;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;image-rendering:auto;pointer-events:none}.guild-emblem.small{width:48px;height:48px}
.guild-info-fields{display:grid;grid-template-columns:1fr 1fr;gap:3px}.guild-info-fields>div,.guild-profile-line{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:center;min-height:27px;border:1px solid #746bb5;background:#2e2869}.guild-info-fields span,.guild-profile-line>span{padding:4px 7px;color:#eeeaff;border-right:1px solid #6c63a9}.guild-info-fields b,.guild-profile-line>b{padding:4px 8px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guild-xp{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:6px;padding:4px 6px;border:1px solid #655ca3;background:#211b58;font-size:11px}.guild-xp i{height:8px;overflow:hidden;border:1px solid #0b0925;background:#09071e}.guild-xp i b{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffd43b,#fff68b)}
.guild-field{display:grid;grid-template-columns:70px 1fr;gap:6px;align-items:start;font-size:12px}.guild-field textarea{width:100%}.guild-homepage-field{align-items:center}.guild-homepage-field input{box-sizing:border-box;width:100%;height:25px;padding:2px 6px;color:#fff;border:1px solid #766db9;border-radius:2px;outline:0;background:#100d31;font:11px var(--ui)}
.guild-edit-row{display:flex;align-items:center;gap:5px;font-size:11px}.guild-edit-row label{display:flex;align-items:center;gap:4px}.guild-edit-row input{width:58px}.guild-edit-row select{width:56px}.guild-info-actions{display:flex;justify-content:flex-end;gap:6px}.guild-info-actions button,.guild-member-actions button,.guild-application-actions button,.guild-warehouse-head button,.guild-profile-footer button{height:25px;padding:2px 9px;color:#f4f1ff;border:1px solid #8d84ca;border-radius:2px;background:linear-gradient(180deg,#675eb1,#39327b);font:11px var(--ui)}.guild-info-actions button.danger{color:#ffd7d7;border-color:#a76b86;background:linear-gradient(180deg,#87506d,#4e2947)}
.guild-feature-list{flex:1;min-height:0;overflow:auto;padding:5px 7px;border:1px solid #5f579d;background:#100d31;color:#c8c3e4;font-size:10px;line-height:1.55}.guild-feature-list b{color:#fff36d}.guild-feature-list .locked{opacity:.5}
.guild-list-head,.guild-member-row{display:grid;grid-template-columns:minmax(0,1fr) 48px 76px 148px;align-items:center}.guild-list-head{height:24px;padding:0 7px;color:#dbd7f1;border:1px solid #7168b0;background:#352f76;font-size:10px}.guild-member-list,.guild-application-list{flex:1;min-height:0;overflow:auto;padding:4px;border:1px solid #756cba;background:#100d31}.guild-member-row{min-height:39px;margin-bottom:3px;padding:3px 4px;border:1px solid #514991;background:#292363;font-size:11px}.guild-member-row.self{border-color:#d8ce70}.guild-member-copy{min-width:0}.guild-member-copy b{display:block;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guild-member-copy small{color:#aaa4c8}.guild-role{color:#fff36d}.guild-member-actions,.guild-application-actions{display:flex;gap:3px;justify-content:flex-end}.guild-member-actions button{padding:2px 5px;font-size:9px}.guild-application-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;min-height:48px;margin-bottom:4px;padding:6px;border:1px solid #534c96;background:#292363}.guild-application-row b{display:block}.guild-application-row small{color:#bcb6d3}
.guild-warehouse-page{position:relative}.guild-warehouse-head{display:grid;grid-template-columns:1fr 1fr 52px 52px;gap:5px;align-items:center;padding:5px;border:1px solid #766db5;background:#2d2768;font-size:10px}.guild-warehouse-head b{display:block;color:#fff36d;font-size:12px}.guild-warehouse-grid{position:relative;display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow:auto;padding:6px 13px 6px 6px;border:1px solid #746bb4;background:#110e34}.guild-warehouse-slot{display:grid;grid-template-columns:34px minmax(0,1fr) 52px 92px;align-items:center;gap:5px;min-height:37px;padding:2px 6px;border:1px solid #7168b2;border-radius:3px;background:linear-gradient(180deg,#5a51a4,#373079)}.guild-warehouse-slot>i{display:grid;width:31px;height:31px;place-items:center;border:1px solid #2a245d;border-radius:50%;background:#27215d}.guild-warehouse-slot img{display:block;max-width:none;image-rendering:auto;pointer-events:none}.guild-warehouse-slot>b{overflow:hidden;color:#fff;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.guild-warehouse-slot>em{color:#fff36d;text-align:right;font:11px Arial}.guild-warehouse-slot>small{height:22px;padding:4px;box-sizing:border-box;color:#f1edff;border:1px solid #8e85c8;border-radius:2px;background:#2a245f;text-align:center;font-size:9px}.guild-warehouse-slot.empty{opacity:.4}.guild-warehouse-locked{position:absolute;inset:0;display:grid;place-items:center;color:#aaa4c7;text-align:center}.guild-warehouse-foot{display:flex;justify-content:space-between;gap:8px;color:#c6c0dd;font-size:10px}.guild-warehouse-foot span:first-child{color:#fff36d}.guild-warehouse-log{height:65px;overflow:auto;padding:4px 6px;border:1px solid #5e569c;background:#0d0a29;color:#bcb7d2;font-size:9px;line-height:1.45}
.guild-status{height:28px;box-sizing:border-box;padding:6px 9px;overflow:hidden;color:#d2cde8;border-top:1px solid #554d91;background:#100d2f;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.guild-status.error{color:#ff9d9d}
.guild-profile-panel,.guild-profile-panel:hover,.guild-profile-panel:focus-within{width:340px!important;height:445px!important;min-width:340px;min-height:445px;max-width:340px;max-height:445px;color:#fff;border:1px solid #d8d4ff!important;border-radius:4px!important;outline:0!important;background:linear-gradient(180deg,#5e54ad 0,#282164 29px,#17133c 100%)!important;box-shadow:none!important;z-index:180!important}.guild-profile-body{box-sizing:border-box;height:calc(100% - 27px);display:flex;flex-direction:column;gap:5px;padding:7px}.guild-profile-line{grid-template-columns:72px minmax(0,1fr);min-height:29px}.guild-profile-line:has(em){grid-template-columns:72px minmax(0,1fr) 54px 52px}.guild-profile-line em{padding:4px;color:#eeeaff;border-left:1px solid #6c63a9;font-style:normal}.guild-profile-line strong{padding:4px;text-align:center}.guild-profile-intro{flex:1;min-height:0;border:1px solid #746bb5;background:#171342}.guild-profile-intro h3{height:24px;margin:0;padding:4px;box-sizing:border-box;border-bottom:1px solid #746bb5;text-align:center;font-size:12px}.guild-profile-intro p{margin:0;padding:8px;color:#eeeaff;white-space:pre-wrap;line-height:1.6;font-size:11px}.guild-profile-footer{display:flex;align-items:center;justify-content:space-between;gap:7px}.guild-profile-footer span{overflow:hidden;color:#c9c4df;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.guild-other-page{display:none!important;flex-direction:row!important;gap:5px!important}.guild-other-page.active{display:flex!important}.guild-other-nav{width:47px;display:flex;flex-direction:column;gap:2px}.guild-other-nav button{height:28px;padding:2px;color:#d8d3ec;border:1px solid #6e65aa;border-radius:2px;background:#29235e;font:11px var(--ui)}.guild-other-nav button.active{color:#fff;background:#554b9e;box-shadow:inset 0 1px #9b92dc}.guild-other-content{flex:1;min-width:0;border:1px solid #7d74bb;background:#171343}.guild-other-view{display:none;box-sizing:border-box;height:100%;padding:5px}.guild-other-view.active{display:flex;flex-direction:column;gap:6px}.guild-other-view h3{height:24px;margin:0;padding:4px;border-bottom:1px solid #766db2;text-align:center;font:12px var(--ui)}.guild-other-view textarea{flex:1;min-height:0;padding:7px;color:#fff;border:1px solid #62599f;outline:0;resize:none;background:#211b59;font:12px/1.6 var(--ui)}.guild-other-view>button{align-self:flex-end;min-width:56px;height:28px;color:#fff;border:1px solid #aaa1dc;border-radius:2px;background:linear-gradient(180deg,#6e64b8,#39327a)}.guild-other-view>button.danger{color:#ffd7d7;border-color:#a76b86;background:linear-gradient(180deg,#87506d,#4e2947)}.guild-other-view p{padding:18px;color:#d5d0e9;line-height:1.8}.guild-other-log{flex:1;min-height:0;overflow:auto;padding:7px;color:#ddd8ee;background:#100d31;font:10px/1.6 var(--ui)}
.guild-create-panel,.guild-create-panel:hover,.guild-create-panel:focus-within{width:520px!important;height:570px!important;min-width:520px;min-height:570px;max-width:520px;max-height:570px;color:#fff;border:1px solid #d8d4ff!important;border-radius:4px!important;outline:0!important;background:linear-gradient(180deg,#5e54ad 0,#292266 28px,#17133c 100%)!important;box-shadow:none!important;z-index:185!important}.guild-create-panel .float-header{height:27px;min-height:27px;padding:3px 7px 3px 11px;border-bottom:1px solid #d9d4ff;background:linear-gradient(180deg,#8a82d9,#6257b0 49%,#443990 51%,#554aa2)}.guild-create-body{position:relative;box-sizing:border-box;height:calc(100% - 27px);display:flex;flex-direction:column;gap:6px;padding:6px}.guild-create-body>label,.guild-create-range{display:grid;grid-template-columns:96px 1fr;align-items:center;min-height:30px;border:1px solid #776eb4;background:#302a70;font-size:12px}.guild-create-body>label span,.guild-create-range>span{padding:6px 9px;border-right:1px solid #776eb4}.guild-create-body input{height:26px;box-sizing:border-box;min-width:0;margin:1px 3px;padding:2px 6px;color:#fff;border:1px solid #554d91;border-radius:1px;outline:0;background:#16113e;font:12px var(--ui)}.guild-create-range{grid-template-columns:96px 1fr 24px 1fr}.guild-create-range b{text-align:center}.guild-create-intro{display:flex;flex:1;min-height:0;flex-direction:column;border:1px solid #776eb4}.guild-create-intro h3{height:28px;box-sizing:border-box;margin:0;padding:6px;border-bottom:1px solid #776eb4;text-align:center;font:12px var(--ui)}.guild-create-intro textarea{flex:1;min-height:0;padding:8px;color:#fff;border:0;outline:0;resize:none;background:#211b59;font:12px/1.6 var(--ui)}.guild-create-cost{padding:4px 80px 4px 4px;color:#d9d4ec;font-size:11px}.guild-create-cost b{color:#fff36d}.guild-create-body>.guild-main-button{position:absolute;right:8px;bottom:8px;min-width:64px;height:27px}
.guild-emblem-picker-panel,.guild-emblem-picker-panel:hover,.guild-emblem-picker-panel:focus-within{width:178px!important;height:220px!important;min-width:178px;min-height:220px;max-width:178px;max-height:220px;overflow:hidden;color:#fff;border:1px solid #d8d4ff!important;border-radius:4px!important;outline:0!important;background:linear-gradient(180deg,#5e54ad 0,#292266 28px,#17133c 100%)!important;box-shadow:none!important;z-index:190!important}.guild-emblem-picker-panel .float-header{height:27px;min-height:27px;padding:3px 5px 3px 8px;border-bottom:1px solid #d9d4ff;background:linear-gradient(180deg,#8a82d9,#6257b0 49%,#443990 51%,#554aa2);font-size:11px}.guild-emblem-picker-grid{box-sizing:border-box;height:165px;display:grid;grid-template-columns:repeat(5,28px);grid-auto-rows:28px;align-content:start;gap:3px;overflow-y:auto;overflow-x:hidden;padding:6px 11px 6px 6px}.guild-emblem-option{display:grid;width:28px;height:28px;padding:0;place-items:center;border:1px solid #6f65ae!important;border-radius:1px!important;background:linear-gradient(145deg,#393276,#1c1749)!important;box-shadow:inset 0 0 0 1px #171236!important}.guild-emblem-option:hover,.guild-emblem-option.selected{border-color:#fff36d!important;background:#4c438f!important}.guild-emblem-option img{display:block;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;image-rendering:auto;pointer-events:none}.guild-emblem-picker-foot{height:27px;box-sizing:border-box;padding:6px 7px;color:#bcb6d5;border-top:1px solid #574e95;background:#100d31;font-size:9px;text-align:center}
@media(max-width:560px){.guild-float-panel,.guild-create-panel{left:4px!important;width:calc(100vw - 8px)!important;min-width:0;max-width:none}.guild-profile-panel{left:4px!important;width:340px!important}}

/* 公會欄 v2：PNG 是唯一視覺來源；CSS 僅負責疊圖、動態資料與透明點擊區。 */
.guild-float-panel,.guild-float-panel:hover,.guild-float-panel:focus-within{
  --guild-scale:.75;--guild-source-width:762px;--guild-source-height:518px;
  width:calc(var(--guild-source-width) * var(--guild-scale))!important;height:calc(var(--guild-source-height) * var(--guild-scale))!important;
  min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
  overflow:visible!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;
}
.guild-scale-wrap{position:relative;width:calc(var(--guild-source-width) * var(--guild-scale));height:calc(var(--guild-source-height) * var(--guild-scale));overflow:visible;contain:layout style}
.guild-asset-stage{position:absolute;left:0;top:0;width:var(--guild-source-width);height:var(--guild-source-height);overflow:hidden;contain:layout paint style;isolation:isolate;zoom:var(--guild-scale);transform:none;color:#fff;font:14px/1.25 var(--ui);image-rendering:auto;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}
.guild-warehouse-slot>em{font-family:var(--numeric)!important}
.guild-page-background{position:absolute;z-index:0;display:block;pointer-events:none;image-rendering:auto}
.guild-frame-image{position:absolute;z-index:2;inset:0;display:block;width:100%;height:100%;pointer-events:none;image-rendering:auto}
.guild-drag-region,.guild-close-hotspot,.guild-main-navigation,.guild-side-hotspots,.guild-joined,.guild-image-overlay,.guild-status{position:absolute;z-index:3}
.guild-drag-region{cursor:var(--cursor-normal,default)}
.guild-close-hotspot{padding:0;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font-size:0}
.guild-main-navigation{height:36px}.guild-main-navigation button{position:absolute;height:100%;padding:0 10px;color:#fff;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font:14px var(--ui);text-shadow:0 1px #111}.guild-main-navigation button.active{color:#fff36d}.guild-main-navigation button[hidden]{display:none}
.guild-side-hotspots{z-index:5;pointer-events:none}.guild-side-hotspots button{position:absolute;pointer-events:auto;padding:0;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font-size:0}
.guild-joined,.guild-no-membership{box-sizing:border-box;padding:0!important;background:transparent!important}
.guild-no-membership{display:grid;place-items:center;color:#fff;text-align:center;line-height:1.8}.guild-no-membership>div{padding:18px 28px;background:rgba(0,0,0,.72)}
.guild-image-layer{position:absolute;display:none;inset:0;overflow:hidden}.guild-image-layer.active{display:block}
.guild-live-value,.guild-live-input,.guild-xp-text,.guild-xp-track,.guild-intro-input,.guild-announcement-input,.guild-page-action,.guild-notice-send,.guild-vote-action{position:absolute;z-index:1;box-sizing:border-box}
.guild-live-value{display:flex;align-items:center;overflow:hidden;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.guild-live-input,.guild-intro-input,.guild-announcement-input{padding:2px 4px;color:#fff;opacity:1;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font:14px/1.35 var(--ui);resize:none}
.guild-live-input[type=number]{appearance:textfield;-moz-appearance:textfield}.guild-live-input[type=number]::-webkit-inner-spin-button,.guild-live-input[type=number]::-webkit-outer-spin-button{margin:0;appearance:none;-webkit-appearance:none}
.guild-emblem-image-slot,.guild-emblem-image-slot:hover,.guild-emblem-image-slot:focus{position:absolute;display:grid;width:48px!important;height:48px!important;padding:0;place-items:center;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}.guild-emblem-image-slot img{display:block;width:48px!important;height:48px!important;max-width:none!important;max-height:none!important;image-rendering:pixelated;pointer-events:none}
.guild-value-level,.guild-value-name,.guild-value-members{justify-content:center;text-align:center}
.guild-value-min,.guild-value-max{color:#fff!important;-webkit-text-fill-color:#fff;text-align:center}
.guild-member-row img,.guild-application-row img{display:block;width:21.3333px!important;height:21.3333px!important;max-width:none;max-height:none;margin:auto;image-rendering:pixelated;pointer-events:none}
.guild-page-action,.guild-notice-send,.guild-vote-action{min-width:72px;height:28px;color:#fff;border:1px solid #94a3de!important;border-radius:2px!important;background:linear-gradient(#5868b5,#242a70)!important;font:13px var(--ui)}.guild-save-info{right:18px;bottom:11px}.guild-notice-send{right:15px;bottom:17px}.guild-vote-action{right:18px;bottom:12px}
.guild-member-list,.guild-application-list,.guild-other-log{position:absolute!important;box-sizing:border-box!important;margin:0!important;padding:0 22px 0 0!important;overflow:auto!important;border:0!important;background:transparent!important;color:#fff;scrollbar-width:none}.guild-member-list::-webkit-scrollbar,.guild-application-list::-webkit-scrollbar,.guild-other-log::-webkit-scrollbar{display:none}
.guild-member-row{display:grid!important;grid-template-columns:68px 67px 292px 60px 130px;box-sizing:border-box!important;min-height:39px!important;height:39px!important;margin:0!important;padding:0!important;align-items:center;border:0!important;background:transparent!important;font-size:14px!important}.guild-member-row.self{color:#fff36d}.guild-member-row>span{box-sizing:border-box;min-width:0;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guild-member-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}.guild-member-copy small{display:none}.guild-member-actions{display:none!important}
.guild-application-row{display:grid!important;grid-template-columns:79px 307px 90px 141px;box-sizing:border-box!important;height:39px!important;min-height:39px!important;margin:0!important;padding:0!important;align-items:center;border:0!important;background:transparent!important;font-size:14px!important}.guild-application-row>span,.guild-application-row>b,.guild-application-row>small,.guild-application-row>time{box-sizing:border-box;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;color:inherit}.guild-application-actions{display:none!important}
.guild-intro-input,.guild-announcement-input{overflow:auto;scrollbar-width:none}.guild-intro-input::-webkit-scrollbar,.guild-announcement-input::-webkit-scrollbar{display:none}.guild-other-log{font:13px/1.55 var(--ui)!important}
.guild-warehouse-page{box-sizing:border-box;padding:9px 17px 10px 96px}.guild-warehouse-page .guild-warehouse-head{height:42px}.guild-warehouse-page .guild-warehouse-grid{height:235px;min-height:235px}.guild-warehouse-page .guild-warehouse-log{display:none}
.guild-status{box-sizing:border-box;left:12px;right:12px;bottom:8px;height:27px;padding:5px 10px;overflow:hidden;color:#d9d5ec;background:rgba(3,3,20,.62);text-overflow:ellipsis;white-space:nowrap;font-size:12px}.guild-status.error{color:#ff9d9d}
.guild-scroll-thumb{position:absolute;z-index:6;width:12px;min-height:28px;border-radius:7px;background:#6864b5;box-shadow:inset 0 0 0 1px #8583d2;cursor:var(--cursor-normal,default)}
.guild-asset-stage{font-size:17px;font-weight:700}
.guild-main-navigation button,.guild-live-value,.guild-live-input,.guild-intro-input,.guild-announcement-input{font-size:17px!important;font-weight:700!important}
.guild-member-row,.guild-application-row{font-size:22.6667px!important;font-weight:700!important}
.guild-member-copy b{display:inline!important}.guild-member-title{color:inherit;font:inherit;white-space:nowrap}
.guild-title-input{box-sizing:border-box;width:100%;height:28px;margin-top:8px;padding:3px 7px;color:#fff;border:1px solid #7c74b8;border-radius:2px;outline:0;background:rgba(3,3,20,.86);font:14px/1.2 var(--ui)}
.guild-title-input:focus{border-color:#c9c2ff}
.guild-member-row>span,.guild-application-row>span,.guild-application-row>b,.guild-application-row>small,.guild-application-row>time{padding-right:6.6667px;padding-left:6.6667px}
.guild-page-action,.guild-notice-send,.guild-vote-action{font-size:16px!important;font-weight:700!important}
.guild-other-log{font-size:16px!important;font-weight:700!important}
.guild-status{font-size:15px;font-weight:700}
.guild-xp-track{z-index:2!important;display:block!important;overflow:hidden;border:0!important;border-radius:5px;background:transparent!important;box-shadow:none!important}
.guild-xp-track>b{display:block;width:0;height:100%;border-radius:5px;background:linear-gradient(90deg,#6554d4,#b09cff 55%,#f5eeff);box-shadow:0 0 4px #a797ff;transition:width .2s linear}
.guild-xp-text{z-index:3!important;display:flex!important;align-items:center;justify-content:center;color:#fff;text-align:center;text-shadow:1px 1px #09051e;font-size:12px!important;font-weight:700!important;pointer-events:none}
.guild-xp-text,.guild-xp-track{display:none!important}
body.guild-debug .guild-page-background,body.guild-debug .guild-frame-image{opacity:.5}

/* 伺服器名稱列不套用全域按鈕的藍色邊框／漸層，只保留文字與黑色半透明底條。 */
#serverBox .server-row,
#serverBox .server-row:hover,
#serverBox .server-row:focus,
#serverBox .server-row:active {
  appearance:none !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  background:rgba(0,0,0,.42) !important;
  box-shadow:none !important;
  color:#eee9d4 !important;
  filter:none !important;
  transform:none !important;
}
#serverBox .server-row.selected,
#serverBox .server-row.selected:hover,
#serverBox .server-row.selected:focus {
  background:rgba(0,0,0,.78) !important;
  color:#fff75d !important;
}
#serverBox .server-name-copy,
#serverBox .server-name-copy b,
#serverBox .server-name-copy small,
#serverBox .server-population {
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#serverBox .server-select-actions button,
#serverBox .server-select-actions button.btn-primary {
  border:1px solid #342f29 !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,#817c72 0,#5b5852 47%,#363635 52%,#4d4b48 100%) !important;
  box-shadow:inset 0 0 0 1px #aaa59b,0 1px 1px #0008 !important;
  color:#eee !important;
}
#serverBox .server-select-actions button:hover,
#serverBox .server-select-actions button.btn-primary:hover { color:#fff76a !important; }

/* 通用遊戲視窗：PNG 驅動的公會主視窗保留原圖；其餘欄位統一邊框、標題與關閉按鈕。 */
:root{
  --tw-panel-line:#9b91db;
  --tw-panel-head-top:#756bc2;
  --tw-panel-head-bottom:#443a91;
  --tw-panel-body:#17132f;
}
.side-panel,.half-panel,.chatpanel,
.float-panel:not(.guild-float-panel),
.float-panel:not(.guild-float-panel):hover,
.float-panel:not(.guild-float-panel):focus,
.float-panel:not(.guild-float-panel):focus-within{
  box-sizing:border-box;
  border:1px solid var(--tw-panel-line)!important;
  border-radius:4px!important;
  outline:0!important;
  box-shadow:none!important;
}
.side-panel:hover,.half-panel:hover,.chatpanel:hover,
.side-panel:focus-within,.half-panel:focus-within,.chatpanel:focus-within{
  border-color:var(--tw-panel-line)!important;
  box-shadow:none!important;
}
.side-panel>h3,.half-panel>h3,
.float-panel:not(.guild-float-panel)>.float-header{
  box-sizing:border-box!important;
  min-height:29px!important;
  margin:0!important;
  padding:5px 8px 5px 10px!important;
  color:#fff!important;
  border:0!important;
  border-bottom:1px solid #bbb4ea!important;
  border-radius:3px 3px 0 0!important;
  background:linear-gradient(180deg,var(--tw-panel-head-top),var(--tw-panel-head-bottom))!important;
  box-shadow:none!important;
  font:700 13px/18px var(--ui)!important;
  letter-spacing:.4px;
  text-shadow:0 1px 1px #171132;
}
.float-panel:not(.guild-float-panel)>.float-header{
  display:flex!important;
  align-items:center!important;
}
.float-panel:not(.guild-float-panel)>.float-header>span:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.float-panel:not(.guild-float-panel) .float-close{
  display:grid!important;
  width:21px!important;
  min-width:21px!important;
  height:21px!important;
  min-height:21px!important;
  margin-left:auto!important;
  padding:0!important;
  place-items:center!important;
  color:#f6f3ff!important;
  border:1px solid #aaa4dd!important;
  border-radius:2px!important;
  outline:0!important;
  background:#292753!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  font:700 15px/19px var(--ui)!important;
}
.float-panel:not(.guild-float-panel) .float-close:hover,
.float-panel:not(.guild-float-panel) .float-close:focus,
.float-panel:not(.guild-float-panel) .float-close:active{
  color:#fff36d!important;
  border-color:#cbc4ef!important;
  background:#353167!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}

/* 伺服器資訊只在分鐘跳動時更新，不參與地圖每幀繪製。 */
.server-info-hud{
  position:absolute;
  z-index:24;
  min-width:190px;
  color:#fff;
  font:700 13px/1.45 var(--ui);
  letter-spacing:.2px;
  text-align:left;
  text-shadow:1px 1px 0 #000,2px 2px 1px rgba(0,0,0,.78);
  pointer-events:none;
  user-select:none;
  contain:layout paint style;
}
.server-info-basic{top:0;right:11%;}
.server-info-full{top:1px;right:212px;}
@media(max-width:900px){.server-info-basic{right:8px}.server-info-hud{font-size:12px;min-width:170px}}

/* ===== 手機適配 UI =====
   由 JS 的裝置／寬度判斷加上 mobile-client-ui；桌面版完全沿用原布局。 */
.mobile-only{display:none}
html.mobile-client-ui,html.mobile-client-ui body{width:100%;height:100%;overscroll-behavior:none}
body.mobile-client-ui.mobile-chat-keyboard-open{
  position:fixed!important;inset:0!important;width:100%!important;height:var(--mobile-vvh,100dvh)!important;overflow:hidden!important;
}
html.mobile-client-ui,html.mobile-client-ui body,body.mobile-client-ui *{touch-action:manipulation}
html.mobile-client-ui.custom-cursor-on,
html.mobile-client-ui.custom-cursor-on *,
body.mobile-client-ui.custom-cursor-on,
body.mobile-client-ui.custom-cursor-on *{cursor:auto!important}
body.mobile-client-ui #customCursor{display:none!important}

body.mobile-client-ui #app{
  --mobile-nav-width:clamp(46px,13vw,64px);
  --mobile-nav-button-height:clamp(34px,9vw,40px);
  position:fixed;
  inset:0 auto auto 0;
  box-sizing:border-box;
  width:100vw;
  height:var(--mobile-vvh,100dvh);
  padding:max(3px,env(safe-area-inset-top)) max(3px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left));
  gap:4px;
  overflow:hidden;
}
body.mobile-client-ui #app #topbar{
  display:none!important;
}
body.mobile-client-ui #topbar .title{display:flex;align-items:center;align-self:center;height:22px;min-width:0;max-width:100%;transform:none;font-size:clamp(11px,3.6vw,13px);line-height:1.2;overflow:hidden!important;text-overflow:ellipsis;white-space:nowrap}
body.mobile-client-ui #topbar #tabBar{display:none!important}
body.mobile-client-ui #topbar .status{display:flex!important;align-items:center!important;justify-content:flex-end;align-self:center!important;width:156px;height:22px;min-width:0!important;max-width:156px!important;gap:5px!important;overflow:hidden;font-size:9px!important;line-height:1.2;white-space:nowrap}
body.mobile-client-ui #topbar .status>span:nth-child(2){display:none}
body.mobile-client-ui #topbar .status>span:nth-child(3){display:none}
body.mobile-client-ui #topbar .status>span:first-child{display:inline-flex;align-items:center;flex:1 1 0;min-width:0;height:22px;line-height:22px}
body.mobile-client-ui #topbar .status>span:first-child b{display:inline-block;max-width:52px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}
body.mobile-client-ui #topbar #btnAutofarm{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 78px;min-width:78px;max-width:78px;height:22px;min-height:22px;padding:0 3px;font-size:10px;line-height:20px;align-self:center}
body.mobile-client-ui #viewRoot{position:relative;overflow:hidden}
body.mobile-client-ui .view-page,body.mobile-client-ui .view-body{width:100%;min-width:0}
body.mobile-client-ui #view-basic .view-body.three-col{position:relative;display:block;height:100%;overflow:hidden}
body.mobile-client-ui #view-basic .map-col{position:relative;z-index:0;display:block;width:100%;height:100%;isolation:isolate}
body.mobile-client-ui #view-basic .mapwrap,
body.mobile-client-ui #view-map .mapwrap{width:100%;height:100%;min-height:0;border-radius:0;touch-action:none}
body.mobile-client-ui #view-basic .mapwrap{height:100%!important}
body.mobile-client-ui #view-basic #mapImageBasic,
body.mobile-client-ui #view-basic #gamecanvas,
body.mobile-client-ui #view-basic #dmgLayer,
body.mobile-client-ui #view-basic #pathLine{transform:translate3d(var(--mobile-map-pan-x,0px),var(--mobile-map-pan-y,0px),0) scale(var(--mobile-map-zoom,1));transform-origin:center center}
body.mobile-client-ui #view-basic .mapwrap{z-index:0}
body.mobile-client-ui #view-basic .chatpanel.compact{z-index:30!important}
body.mobile-client-ui #view-basic .maplabel{display:none!important}
body.mobile-client-ui #view-map .maplabel{top:8px;left:7px;padding:2px 5px;border-radius:3px;background:rgba(0,0,0,.45);font-size:10px}
body.mobile-client-ui .server-info-hud{top:3px!important;right:5px!important;min-width:128px;max-width:44%;font-size:11px;line-height:1.35;text-align:right}
/* 手機基本頁：BUFF 緊接在等級下方。全畫面地圖仍維持原本置中位置。 */
body.mobile-client-ui #view-basic #buffHud{
  top:56px;left:7px;transform:none;
  max-width:min(calc(100vw - 132px),256px);justify-content:flex-start;gap:3px;
  z-index:13;
}
body.mobile-client-ui .exp-gain-layer{left:8px;bottom:8px;max-width:74%}
body.mobile-client-ui .exp-gain-toast{font-size:12px}
body.mobile-client-ui #gamecanvas,body.mobile-client-ui #gamecanvasFull{touch-action:none}

/* 三條能量橫向排列；數字在條上方，等級與 BUFF 留在 HP 下方。 */
body.mobile-client-ui #mobilePlayerVitals{
  position:absolute;z-index:12;left:7px;top:8px;display:grid;width:min(calc(100vw - 132px),256px);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:24px 21px;column-gap:4px;row-gap:0;padding:0;
  color:#fff;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;pointer-events:none
}
body.mobile-client-ui .mobile-vital-level{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:clamp(4px,1.5vw,8px);min-width:0;margin-top:1px;white-space:nowrap}
body.mobile-client-ui .mobile-vital-level #mobileLvText{flex:0 0 auto;color:#fff0a0;font:900 clamp(13px,3.7vw,16px)/1.1 var(--ui);text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000}
body.mobile-client-ui .mobile-vital-level #mobileXpText,body.mobile-client-ui .mobile-vital-level #mobileXpProgress{overflow:hidden;color:#fff;font:800 clamp(9px,2.7vw,12px)/1 var(--numeric);text-overflow:ellipsis;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000}
body.mobile-client-ui .mobile-vital-level #mobileXpText{flex:0 0 auto}
body.mobile-client-ui .mobile-vital-level #mobileXpProgress{min-width:0}
body.mobile-client-ui .mobile-vital-row{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:12px 7px;align-items:center;gap:0;min-width:0;color:#fff;font:700 12px/1 var(--numeric);text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000}
body.mobile-client-ui .mobile-vital-row:nth-child(2){grid-column:1;grid-row:1}
body.mobile-client-ui .mobile-vital-row:nth-child(3){grid-column:2;grid-row:1}
body.mobile-client-ui .mobile-vital-row>span{display:none}
body.mobile-client-ui .mobile-vital-row>b{grid-column:1;grid-row:1;overflow:hidden;color:#fff;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
body.mobile-client-ui .mobile-vital-track{grid-column:1;grid-row:2;box-sizing:border-box;height:7px;padding:1px;overflow:hidden;border:0;border-radius:0;background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAHCAYAAABHlm7oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABQSURBVDhPY2RgYPgPxMMGMHKxKv4Pz66Gcoc2WDm1lYGJnVkWyh36AOQXpv8Mv6DcoQ9AfmFiZGCDcoc+APmF6effx1Du0AcgvwyzUo6BAQArLxA5XaZd1gAAAABJRU5ErkJggg==') center/100% 100% no-repeat;box-shadow:none}
body.mobile-client-ui .mobile-vital-track>i{display:block;width:0;height:100%;border-radius:0;transition:width .16s linear;box-shadow:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}
body.mobile-client-ui #mobileHpBar{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAFCAYAAAAHQL+kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABxSURBVDhPY/yxgeM/AzpgQcIgQA4bGw0CGGwOMBMOkOXxyqECJig95AHjjwwG3DECAuhsGI2MQQAXHwSwyYFpYIijqwEBomlojAH5jB9qcHgEFqsgGqYRxiYWgwAuNgggi8MsRJZHBujiaPxhkrQYGAC7mQjVidI+iwAAAABJRU5ErkJggg==')}
body.mobile-client-ui #mobileMpBar{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAFCAYAAAAHQL+kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABsSURBVDhPY+xwePGfgYWBAYwZOBg4WH4A2RwgDkQMLA6lkdkwGkMMaAaYBvMQNAgQKwYC2NTAADofCJig9JAHw8YjjCdyfiCSFhLmQOaDADS1IasBA2QaBxumFUMNDGBj45KHATSxYRIjDAwAuDgH15sH1jkAAAAASUVORK5CYII=')}

/* 直向基本頁：上半地圖、下半單一訊息窗，以頁籤切換戰鬥／聊天。 */
body.mobile-client-ui #view-basic .chatpanel.compact{position:absolute;z-index:30;left:0;right:calc(var(--mobile-nav-width) + 3px);bottom:0!important;display:flex!important;height:clamp(178px,38dvh,258px)!important;min-height:0;padding:3px 2px 4px!important;overflow:hidden;border:0!important;background-color:rgba(0,0,0,.78)!important;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg4AAAADCAYAAAD7uofOAAAATklEQVRYhe3YoQ2AQAADwJIgXiAYjREYjQEQjMA4CAZ4BwoUaEJy5+oqmzZJjm2vKSUAAK/6rqS9wjp/WQUA+IN7OAyjywEAeLZMNUlyAjgsCHVpE4izAAAAAElFTkSuQmCC'),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg4AAAAECAYAAADmv7d2AAAAZElEQVRoge3WoQ3DMBCG0bMU4AEKMkYGKMgIGaEgA2SkjJAxOkpBBzBzSFoUbll6j/zSoQ9eioj6+ZYYHzkAAO4ce4nllWP4Hbb13bIHAOjA/3GYn1PLDgCgA+na2rQCAOhBOgE68ApSbsg81wAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAUCAYAAACnOeyiAAAAJklEQVQImWPU0Aj4zwAF/xkYGBiYYLxBwmCEOYxFQaGCgYGBgQEA5OAEfKP6LQEAAAAASUVORK5CYII='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAUCAYAAACnOeyiAAAAKElEQVQImWPU0Aj4z4AE/jPBWIOEwcjAwPCfgYGBgUVBoYKBgYGBAQDg5AR8WhNEEAAAAABJRU5ErkJggg==');background-position:left top,left bottom,left top,right top;background-size:100% 3px,100% 4px,2px 100%,2px 100%;background-repeat:no-repeat;box-shadow:none!important}
body.mobile-client-ui .mobile-basic-chat-tabs{position:relative;z-index:1;top:2px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:20px 28px 22px;gap:1px 0;flex:0 0 72px;margin-bottom:0}
body.mobile-client-ui .mobile-map-title{grid-column:1;grid-row:1;align-self:end;overflow:hidden;color:#fff;white-space:nowrap;text-overflow:ellipsis;font:900 clamp(15px,4.2vw,17px)/1.1 var(--ui);-webkit-text-stroke:0;background:transparent!important;text-shadow:2px 0 0 #0000C6,-2px 0 0 #0000C6,0 2px 0 #0000C6,0 -2px 0 #0000C6,1px 1px 0 #0000C6,-1px -1px 0 #0000C6,1px -1px 0 #0000C6,-1px 1px 0 #0000C6}
body.mobile-client-ui .mobile-basic-chat-tabs button{min-width:0;min-height:22px;height:22px;padding:0 2px;color:#f2efff;border:0!important;border-radius:0!important;background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAWCAYAAABqgnq6AAACcElEQVRYhe2XIXPbQBCFv2QEDhgsMDgQIFBgUCBgIGAgUGBQYFBgGJifEBhYEBAYaCgQYFAQUGBQIBBgUCBQcMDggMEBgwWaSYFiZ9J2Ms50clZm8iGPdR6tn3bfPh0B97yzNwmASH7oOt4MyfbDdPr1kHV0nrI8B+AIuD87W1BVS6RnD1tVR9FGybKUsjznGGC5dO9iPYNJDLffF8DDSJrEHLKeZwkbj2rAGDnoQ90qlDx76sCoBmzfMPl8ytX1DE0MQT007CoXYzFGotXUWcFUFRHIhxkARZ6x/Flz+mWCiKCqqCqzmzk2omDH0e70QrQJpCcWay3ee7IsQ6QVZrlc7jwF2k6MRbwOa9ptsw/GPPVUESGEsLvm1353bTzK8WuPcyHKaMYRrIGwqbF2P9P268eOqeuafJjhVh4Rg+0LznmMMdi+JT2xXM9KSOKMZRTBtFGstZxOJ3udv7i8Ij1JSdMUEcGtfDue/TF+HXa+5laO+ldN2ID04mz6KIK1YxS4uLza87zFmPZ3zjlEBL8OVHcVxahgMBhQ148dW9eLV6z+KdE8THoWXpCj3MrjnENVyT4OcCtPCMr82y3TyQRtFJMYFj+qqLGi21syTf/63nlP2ATGRUF1VxGCQsTg3U3BmjZZ274QNoFZOQdg8CFtc1ivHdFilDP+lGOSsPcG/l86GVwV3WUu5zz5MMP22zzmnKO8maNAai35MMMYgwai/Jsj4L4Yla9/pxcSNh6asIsLqh5jWg8UYyFpA+v2PfO1fcz7Gr++7WaHwcOSaOxj1/xjYcQQ6k+66WFbOvg4j0XyaIb5ltkq1O0O6yC/ARt/77e4fBJEAAAAAElFTkSuQmCC') center/100% 100% no-repeat!important;box-shadow:none!important;font:900 clamp(10px,3vw,12px)/22px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif;text-shadow:1px 0 0 #201746,-1px 0 0 #201746,0 1px 0 #201746,0 -1px 0 #201746;white-space:nowrap}
body.mobile-client-ui .mobile-announcement-feed{grid-column:1/-1;grid-row:2;box-sizing:border-box;overflow:hidden;padding:5px 8px 4px;color:#fff;white-space:nowrap;text-overflow:ellipsis;background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg4AAAAcCAYAAAAJOjeAAAABCUlEQVR4nO3ZIVLDUBiF0ZsOoktBILoABLKSJbAIFsAiEEiWEMkyIhBZStzDpIGWit8lnTlHZDIv5spvXrr8agEA+K+7fGkf732eHo8r7QEAtur+sE/mZujyJxrmDwAAi3GYzuKhjcPU4lcFAHDd0gq7tZcAALdDOAAAZcIBACgTDgBAmXAAAMqEAwBQJhwAgDLhAACUCQcAoEw4AABluyQZh7VnAABbdmoFNw4AQJlwAADKhAMAUCYcAIAy4QAAlAkHAKBMOAAAZcIBACgTDgBAmXAAAMrukmT4/kr/OeX5Zd/WHgQAbMvcCEnSdfNZe3vtc3g4rjgLANiiUzQsj5nbBgDgmqUXfgAzVCkaG3OgCQAAAABJRU5ErkJggg==') center/100% 100% no-repeat;font:700 11px/18px var(--ui);text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}
body.mobile-client-ui .mobile-basic-chat-tabs button:nth-of-type(1){grid-column:1;grid-row:3}
body.mobile-client-ui .mobile-basic-chat-tabs button:nth-of-type(2){grid-column:2;grid-row:3}
body.mobile-client-ui .mobile-basic-chat-tabs button:nth-of-type(3){grid-column:3;grid-row:3}
body.mobile-client-ui .mobile-basic-chat-tabs button.active{color:#30245f;background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAWCAYAAABqgnq6AAACXUlEQVRYhe2ZIXDbMBSGv+4MBAIEAgwCBAoEBgwKAgYCAwsLBgoDBgoGAgsGAgMLAwMKAgoMCgwGDAoCDQYEDAQMBAoEctcBp96uHXDuFkWg353POvk5fvef3tOvyxnwwge9SaQco88z8mJ56lyiRo0mAJxJOX6pfhVsH0GI0yYVK96DqS3zH1ckr5OxiiUEIADfJn6yHPZ8Ok0KPUnA1Ib590UrWgJiAELur0E7FzilSEnAWkOeFwDkDwXjLxl3yzXWOsRAIAeCm5sZ/jlcWtGuMJFAVRmMsSiVUhQlrnEATCZjrr9e/hUcLq+wgiU9rzfYxpGmEgD37ElHafdsfZ+z3W6DiRauJIXH1rZXqFIKdu04u8goHgukVtjGYWuL1grvPcZYqspwe3vTxR+bMIIlYGvLYnHXK3y1WlBVhqqqsNahterKMx2lFI8lAForsouMNE2D9bEwgu3aVbNaLXqFe9+Wnnv26M8K1zjSUcp0OmFzn1M+bRlfZBhjgXYcik4w5478pQN/X59rtDbIgaD8uUVrRTqUzGZXLJcrhBB477m8nOKacB4t3l1SQFVV7+aVUsihZL3eMJ1OkDL9x9vHI07BEvC7dpOQQ8l8PgOgfKpYLu+6Et1sctb3a/zOBjupRGlcRULnubRW5Hm5b/gKrTWzb9eIRGBMa2y9963rD0B3+C4fwnywL3IIJB527dIRA9qdcAdufxcCpGz777F7mG3eHL5jwzVAIv74q+Z9jPdg+1m7/0acPeyVQGb0EOIWLEI+BDuQxNTFfkSUJRATpi4426z8x58gB/AbFe3wHRx80cYAAAAASUVORK5CYII=') center/100% 100% no-repeat!important;text-shadow:1px 0 0 #201746,-1px 0 0 #201746,0 1px 0 #201746,0 -1px 0 #201746}
body.mobile-client-ui .mobile-basic-chat-tabs .mobile-units-button{padding:0 2px;color:#f2efff;border:0!important;background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAWCAYAAABqgnq6AAACcElEQVRYhe2XIXPbQBCFv2QEDhgsMDgQIFBgUCBgIGAgUGBQYFBgGJifEBhYEBAYaCgQYFAQUGBQIBBgUCBQcMDggMEBgwWaSYFiZ9J2Ms50clZm8iGPdR6tn3bfPh0B97yzNwmASH7oOt4MyfbDdPr1kHV0nrI8B+AIuD87W1BVS6RnD1tVR9FGybKUsjznGGC5dO9iPYNJDLffF8DDSJrEHLKeZwkbj2rAGDnoQ90qlDx76sCoBmzfMPl8ytX1DE0MQT007CoXYzFGotXUWcFUFRHIhxkARZ6x/Flz+mWCiKCqqCqzmzk2omDH0e70QrQJpCcWay3ee7IsQ6QVZrlc7jwF2k6MRbwOa9ptsw/GPPVUESGEsLvm1353bTzK8WuPcyHKaMYRrIGwqbF2P9P268eOqeuafJjhVh4Rg+0LznmMMdi+JT2xXM9KSOKMZRTBtFGstZxOJ3udv7i8Ij1JSdMUEcGtfDue/TF+HXa+5laO+ldN2ID04mz6KIK1YxS4uLza87zFmPZ3zjlEBL8OVHcVxahgMBhQ148dW9eLV6z+KdE8THoWXpCj3MrjnENVyT4OcCtPCMr82y3TyQRtFJMYFj+qqLGi21syTf/63nlP2ATGRUF1VxGCQsTg3U3BmjZZ274QNoFZOQdg8CFtc1ivHdFilDP+lGOSsPcG/l86GVwV3WUu5zz5MMP22zzmnKO8maNAai35MMMYgwai/Jsj4L4Yla9/pxcSNh6asIsLqh5jWg8UYyFpA+v2PfO1fcz7Gr++7WaHwcOSaOxj1/xjYcQQ6k+66WFbOvg4j0XyaIb5ltkq1O0O6yC/ARt/77e4fBJEAAAAAElFTkSuQmCC') center/100% 100% no-repeat!important;font:900 clamp(10px,3vw,12px)/22px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif;text-shadow:1px 0 0 #201746,-1px 0 0 #201746,0 1px 0 #201746,0 -1px 0 #201746}
body.mobile-client-ui #view-basic .chat-split{display:block;flex:1;height:auto;min-height:0}
body.mobile-client-ui #view-basic .chat-stream{height:100%;min-height:0}
body.mobile-client-ui #view-basic .chatpanel[data-mobile-stream="social"] .combat-stream,
body.mobile-client-ui #view-basic .chatpanel[data-mobile-stream="combat"] .social-stream{display:none!important}
body.mobile-client-ui #view-basic .chatToolbar{display:none!important}
body.mobile-client-ui #view-basic .message-filter-inline{justify-content:flex-start;flex-wrap:nowrap;min-width:0;overflow-x:auto;padding-bottom:2px}
body.mobile-client-ui #view-basic .mobile-basic-chat-input{box-sizing:border-box;flex:0 0 27px;height:27px;min-height:27px;margin-top:0;padding:2px 3px;background-color:rgba(0,0,0,.78)!important;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg4AAAAbCAYAAAAUPwc4AAABD0lEQVR4nO3csanCUBSA4ZNHxrBwhDeCA1g4hiM4imNYOMAbxsIypV1sjEJEcx4JNwrf14RA4Fy4wv2RkCoi2u32LwAA3tnvV1F3N+dTM+daAIAvUA8/Mt7huCkxhpE260NE2C8AHrqzoVMkHG6qgrP4v7Z3b78A6J8N8TPHKgCA7yQcAIA04QAApAkHACBNOAAAacIBAEgTDgBAmnAAANLuH4Bqmsuc6+AD+A0A0Nc/G/zjAACkCQcAIE04AABpwgEASBMOAECacAAA0oQDAJBWDz8ymbbgLMazXwA8KRIOy+WuxBgmYr8AeKVMOCx+S4xhIvYLgFe84wAApAkHACBNOAAAadXt6g16AGBIdQWOuBzMqYVDMAAAAABJRU5ErkJggg==');background-position:center;background-size:100% 100%;background-repeat:no-repeat!important}
body.mobile-client-ui #view-basic .mobile-basic-chat-input .chatModeSelect{box-sizing:border-box;width:54px;min-width:54px;max-width:54px;height:23px;min-height:23px;padding:0 1px;appearance:auto!important;-webkit-appearance:menulist!important;background:transparent!important;border:0!important;color:#f7f4ff!important;font-size:11px!important}
body.mobile-client-ui #view-basic .chatWhisperTarget{width:74px;min-width:64px;max-width:74px}
body.mobile-client-ui #view-basic .mobile-basic-chat-input .chatInput{box-sizing:border-box;min-height:23px;height:23px;padding:2px 4px!important;border:0!important;background:transparent!important;color:#fff!important;font-size:12px!important;line-height:18px!important}
body.mobile-client-ui #view-basic .mobile-basic-chat-input .chatSend{box-sizing:border-box;min-width:38px;height:23px;min-height:23px;padding:1px 3px!important;font-size:11px!important}
body.mobile-client-ui #view-basic .logbox{padding:5px 7px!important;border:0!important;border-radius:0!important;background:rgba(0,0,0,.78)!important}
/* 聊天框僅包住中段文字輸出；地圖名稱、頁籤與輸入框皆各自獨立。 */
body.mobile-client-ui #view-basic .chatpanel.compact{
  padding-bottom:0!important;
  background-color:transparent!important;
  background-image:none!important;
}
body.mobile-client-ui #view-basic .chat-split{
  position:relative;z-index:2;
  margin-top:0;
  padding:3px 2px 4px;
  overflow:hidden;
  background-color:rgba(0,0,0,.78)!important;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg4AAAADCAYAAAD7uofOAAAATklEQVRYhe3YoQ2AQAADwJIgXiAYjREYjQEQjMA4CAZ4BwoUaEJy5+oqmzZJjm2vKSUAAK/6rqS9wjp/WQUA+IN7OAyjywEAeLZMNUlyAjgsCHVpE4izAAAAAElFTkSuQmCC'),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg4AAAAECAYAAADmv7d2AAAAZElEQVRoge3WoQ3DMBCG0bMU4AEKMkYGKMgIGaEgA2SkjJAxOkpBBzBzSFoUbll6j/zSoQ9eioj6+ZYYHzkAAO4ce4nllWP4Hbb13bIHAOjA/3GYn1PLDgCgA+na2rQCAOhBOgE68ApSbsg81wAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAUCAYAAACnOeyiAAAAJklEQVQImWPU0Aj4zwAF/xkYGBiYYLxBwmCEOYxFQaGCgYGBgQEA5OAEfKP6LQEAAAAASUVORK5CYII='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAUCAYAAACnOeyiAAAAKElEQVQImWPU0Aj4z4AE/jPBWIOEwcjAwPCfgYGBgUVBoYKBgYGBAQDg5AR8WhNEEAAAAABJRU5ErkJggg==')!important;
  background-position:left top,left bottom,left top,right top!important;
  background-size:100% 3px,100% 4px,2px 100%,2px 100%!important;
  background-repeat:no-repeat!important;
}
body.mobile-client-ui #view-basic .chat-split .logbox{height:100%!important;padding:5px 7px!important;background:transparent!important}
/* 三個訊息頁籤不使用通用按鈕的綠色選取／按壓色。 */
body.mobile-client-ui .mobile-basic-chat-tabs button,
body.mobile-client-ui .mobile-basic-chat-tabs button.active,
body.mobile-client-ui .mobile-basic-chat-tabs button:active{
  border-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
body.mobile-client-ui .mobile-basic-chat-tabs button.active{color:#fff!important;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000!important}
/* 通用面板底圖使用 !important；基本聊天框必須在其後重新指定四張 PNG 邊框。 */
body.mobile-client-ui #view-basic .chatpanel.compact.mobile-chat-legacy-frame{
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg4AAAADCAYAAAD7uofOAAAATklEQVRYhe3YoQ2AQAADwJIgXiAYjREYjQEQjMA4CAZ4BwoUaEJy5+oqmzZJjm2vKSUAAK/6rqS9wjp/WQUA+IN7OAyjywEAeLZMNUlyAjgsCHVpE4izAAAAAElFTkSuQmCC'),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAg4AAAAECAYAAADmv7d2AAAAZElEQVRoge3WoQ3DMBCG0bMU4AEKMkYGKMgIGaEgA2SkjJAxOkpBBzBzSFoUbll6j/zSoQ9eioj6+ZYYHzkAAO4ce4nllWP4Hbb13bIHAOjA/3GYn1PLDgCgA+na2rQCAOhBOgE68ApSbsg81wAAAABJRU5ErkJggg=='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAUCAYAAACnOeyiAAAAJklEQVQImWPU0Aj4zwAF/xkYGBiYYLxBwmCEOYxFQaGCgYGBgQEA5OAEfKP6LQEAAAAASUVORK5CYII='),url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAUCAYAAACnOeyiAAAAKElEQVQImWPU0Aj4z4AE/jPBWIOEwcjAwPCfgYGBgUVBoYKBgYGBAQDg5AR8WhNEEAAAAABJRU5ErkJggg==')!important;
  background-position:left top,left bottom,left top,right top!important;
  background-size:100% 3px,100% 4px,2px 100%,2px 100%!important;
  background-repeat:no-repeat!important;
}

/* 手機版聊天輸入框不顯示「輸入後按 Enter 送出」提示；桌面版維持原樣 */
body.mobile-client-ui #chatInputMain.chat-composer:empty::before,
body.mobile-client-ui #chatInputFull.chat-composer:empty::before,
body.mobile-client-ui .chatInputRow .chat-composer:empty::before{
  content:none!important;
}

body.mobile-client-ui #basicLeft,
body.mobile-client-ui #view-basic .side-panel.right{
  position:fixed!important;
  z-index:49996!important;
  top:calc(max(3px,env(safe-area-inset-top)) + 38px)!important;
  bottom:calc(61px + env(safe-area-inset-bottom))!important;
  width:min(86vw,340px)!important;
  height:auto!important;
  padding:10px!important;
  overflow-y:auto!important;
  transition:transform .18s ease-out!important;
  will-change:transform;
  box-shadow:0 8px 26px rgba(0,0,0,.72)!important;
}
body.mobile-client-ui #basicLeft{left:max(3px,env(safe-area-inset-left))!important;transform:translateX(calc(-100% - 12px))}
body.mobile-client-ui #view-basic .side-panel.right{right:max(3px,env(safe-area-inset-right))!important;left:auto!important;transform:translateX(calc(100% + 12px))}
body.mobile-client-ui #basicLeft.mobile-drawer-open,
body.mobile-client-ui #view-basic .side-panel.right.mobile-drawer-open{transform:translateX(0)}
body.mobile-client-ui #basicLeft .rare-loot-panel{min-height:150px}
body.mobile-client-ui #basicLeft{display:none!important}

body.mobile-client-ui #mobileQuickTools{
  position:fixed;
  z-index:39000;
  top:calc(max(3px,env(safe-area-inset-top)) + 40px);
  left:max(8px,env(safe-area-inset-left));
  right:max(8px,env(safe-area-inset-right));
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}
body.mobile-client-ui #mobileQuickTools button{
  min-width:52px;height:34px;padding:3px 8px;pointer-events:auto;color:#fff;border:1px solid #9186cc!important;border-radius:5px!important;background:rgba(25,20,58,.82)!important;box-shadow:0 2px 8px #0008!important;font:700 12px var(--ui)
}
body.mobile-client-ui #mobileOverlayBackdrop:not([hidden]){
  position:fixed;z-index:49994;inset:0;display:block;background:rgba(0,0,0,.42);touch-action:none
}
body.mobile-client-ui #mobileNav{
  position:fixed;
  z-index:60000;
  left:auto;right:0;bottom:0;
  display:flex;
  flex-direction:column-reverse;
  width:var(--mobile-nav-width);
  height:calc(var(--mobile-nav-button-height) + 6px + env(safe-area-inset-bottom));
  padding:3px 3px calc(3px + env(safe-area-inset-bottom));
  gap:3px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.mobile-client-ui #mobileNav button,
body.mobile-client-ui .mobile-more-grid button{
  min-width:0;min-height:36px;padding:1px 2px;color:#f5f2ff;border:1px solid #6f64a8!important;border-radius:4px!important;background:linear-gradient(180deg,#51468f,#292354)!important;box-shadow:inset 0 1px rgba(255,255,255,.13)!important;font:700 12px var(--ui);touch-action:manipulation
}
body.mobile-client-ui #mobileNav button{display:none;width:100%}
body.mobile-client-ui #mobileNav button[data-mobile-view="basic"]{display:block;flex:0 0 var(--mobile-nav-button-height);border:0!important;border-radius:5px 0 0 0!important;box-shadow:none!important}
body.mobile-client-ui #mobileNav.mobile-nav-open{height:auto;max-height:calc(100dvh - 6px);overflow-y:auto;border-top:1px solid #9387cf;border-left:1px solid #9387cf;border-radius:5px 0 0 0;background:linear-gradient(180deg,rgba(67,56,131,.97),rgba(22,18,54,.99));box-shadow:0 -4px 14px rgba(0,0,0,.58)}
body.mobile-client-ui #mobileNav.mobile-nav-open button{display:block;flex:0 0 var(--mobile-nav-button-height)}
body.mobile-client-ui #mobileNav button:active,
body.mobile-client-ui .mobile-more-grid button:active{color:#fff6a8;background:#6758ad!important;transform:scale(.96)!important}
body.mobile-client-ui #mobileNav button.active{color:#fff7a8;border-color:#dacd7b!important;background:linear-gradient(180deg,#7563bf,#413775)!important;box-shadow:inset 0 0 0 1px #fff2a744!important}
body.mobile-client-ui:not([data-mobile-view="basic"]) #mobileQuickTools{display:none}
body.mobile-client-ui #mobileMoreSheet:not([hidden]){
  position:fixed;
  z-index:59998;
  left:max(6px,env(safe-area-inset-left));
  right:max(6px,env(safe-area-inset-right));
  bottom:calc(49px + env(safe-area-inset-bottom));
  display:flex;
  max-height:min(68vh,520px);
  flex-direction:column;
  overflow:hidden;
  border:1px solid #9b90d7;
  border-radius:8px;
  background:linear-gradient(150deg,#393174,#171333);
  box-shadow:0 10px 35px #000c;
}
body.mobile-client-ui .mobile-gm-entry[hidden]{display:none!important}
body.mobile-client-ui .mobile-sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:5px 8px 5px 13px;border-bottom:1px solid #7167ae;color:#fff6ac}
body.mobile-client-ui .mobile-sheet-head button{width:34px;height:30px;padding:0;color:#fff;border:1px solid #8e84c8;background:#292455;font-size:19px}
body.mobile-client-ui .mobile-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:9px;overflow-y:auto}

body.mobile-client-ui #view-chat .chatpanel.fullpage{padding:5px;height:100%}
body.mobile-client-ui #view-chat .chat-split{grid-template-columns:1fr;grid-template-rows:minmax(90px,34%) minmax(0,66%);gap:5px}
body.mobile-client-ui #view-chat .chatToolbar{align-items:flex-start;gap:4px}
body.mobile-client-ui #view-chat .message-filter-inline{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
body.mobile-client-ui #view-chat .chatInputRow{gap:3px;margin-top:4px}
body.mobile-client-ui #view-chat .chatModeSelect{width:62px;min-width:62px}
body.mobile-client-ui #view-chat .chatWhisperTarget{width:84px;min-width:70px}
body.mobile-client-ui .chatInputRow input,
body.mobile-client-ui .chatInputRow select,
body.mobile-client-ui .chatInputRow .chatInput{min-height:38px;font-size:16px!important}
body.mobile-client-ui .chatInputRow .chatSend{min-width:48px;font-size:12px}

/* 所有一般浮窗在手機上共用可視區；原功能、圖示與內部資料結構保持不變。 */
body.mobile-client-ui #app .float-panel:not(.guild-float-panel):not(.guild-emblem-picker-panel){
  position:fixed!important;
  z-index:40000!important;
  left:max(4px,env(safe-area-inset-left))!important;
  right:max(4px,env(safe-area-inset-right))!important;
  top:calc(max(3px,env(safe-area-inset-top)) + 36px)!important;
  bottom:calc(60px + env(safe-area-inset-bottom))!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  transform:none!important;
}
body.mobile-client-ui #app .float-panel:not(.guild-float-panel)>.float-header{min-height:38px!important;height:38px!important;flex:0 0 38px!important;padding:5px 7px 5px 11px!important;font-size:14px!important;touch-action:manipulation}
body.mobile-client-ui #app .float-panel:not(.guild-float-panel) .float-close{width:32px!important;min-width:32px!important;height:30px!important;min-height:30px!important;font-size:20px!important}
body.mobile-client-ui #app .float-panel:not(.guild-float-panel)>.float-body{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
body.mobile-client-ui #floatAttrs{min-width:0!important}
/* 屬性欄依 AGI 最後一列收合，不沿用手機一般浮窗的滿高設定。 */
body.mobile-client-ui #app #floatAttrs{
  top:calc(max(3px,env(safe-area-inset-top)) + 36px)!important;
  bottom:auto!important;
  height:auto!important;
  max-height:calc(var(--mobile-vvh,100dvh) - 12px)!important;
  overflow:hidden!important;
}
body.mobile-client-ui #app #floatAttrs>.attr-tw-body{
  flex:0 0 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:8px!important;
}
body.mobile-client-ui #floatAttrs .attr-tw-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(132px,.82fr)!important;
  gap:8px!important;
  align-items:stretch;
}
body.mobile-client-ui #floatAttrs .attr-vitals{height:100%}
/* 屬性欄 HP／MP 與基本頁共用同一套 PNG 框體與填滿效果。 */
body.mobile-client-ui #floatAttrs .attr-vital-energy .attr-energy-track{
  box-sizing:border-box;height:7px;padding:1px;overflow:hidden;
  border:0!important;border-radius:0!important;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAHCAYAAABHlm7oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABQSURBVDhPY2RgYPgPxMMGMHKxKv4Pz66Gcoc2WDm1lYGJnVkWyh36AOQXpv8Mv6DcoQ9AfmFiZGCDcoc+APmF6effx1Du0AcgvwyzUo6BAQArLxA5XaZd1gAAAABJRU5ErkJggg==') center/100% 100% no-repeat!important;
  box-shadow:none!important;
}
body.mobile-client-ui #floatAttrs .attr-vital-energy .attr-energy-fill{
  display:block;height:100%;border-radius:0!important;box-shadow:none!important;
  background-color:transparent!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;
}
body.mobile-client-ui #floatAttrs #attrHpBar{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAFCAYAAAAHQL+kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABxSURBVDhPY/yxgeM/AzpgQcIgQA4bGw0CGGwOMBMOkOXxyqECJig95AHjjwwG3DECAuhsGI2MQQAXHwSwyYFpYIijqwEBomlojAH5jB9qcHgEFqsgGqYRxiYWgwAuNgggi8MsRJZHBujiaPxhkrQYGAC7mQjVidI+iwAAAABJRU5ErkJggg==')!important}
body.mobile-client-ui #floatAttrs #attrMpBar{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAFCAYAAAAHQL+kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABsSURBVDhPY+xwePGfgYWBAYwZOBg4WH4A2RwgDkQMLA6lkdkwGkMMaAaYBvMQNAgQKwYC2NTAADofCJig9JAHw8YjjCdyfiCSFhLmQOaDADS1IasBA2QaBxumFUMNDGBj45KHATSxYRIjDAwAuDgH15sH1jkAAAAASUVORK5CYII=')!important}
/* 屬性欄 EXP 使用專屬青綠能量條；寬度仍由既有經驗值比例控制。 */
body.mobile-client-ui #floatAttrs #attrXpBar{background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANQAAAAJCAYAAABKfgLpAAAA8UlEQVRYhe2Y3RHDIAyD4a4DMDojZLSO4BH6SEqTBmwJ9xp/77FkQPwk11olBUEAIScReKDKn9ezfI/oxUsfNQ+4OvizwOqNEqgZ0GHx0WlDyNJh+rfXHltCep35JVqU31k0U7pRoI41ua3zehNy/QZe43zMr7X4AbF6yOnpG6gz3hvzsijNx5Lk80+6I601mtdzOK6PWg+6Ot98/kCg5uR1k85qkREAm9fyYYTR+3jNuXFBe9VeFfUaToFiPib9J6XHfp/vQXna1TLvCLxxX3nttOL+htrj+566swb7p8I8+k1Iu5wxp+6jbpvSQBAEPS8Zj0GNNqB1swAAAABJRU5ErkJggg==') center/100% 100% no-repeat!important;box-shadow:none!important}
body.mobile-client-ui #floatBag .bag-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;max-height:none;padding-right:0}
body.mobile-client-ui #floatBag .bag-slot{min-width:0;min-height:0}
body.mobile-client-ui #floatSkills .skill-list{grid-template-columns:1fr}
body.mobile-client-ui #floatFarmConfig .farm-config-body{overflow-y:auto!important;padding:8px 9px 18px!important}
body.mobile-client-ui #floatFarmConfig .farm-layout{display:flex;flex-direction:column;gap:12px}
body.mobile-client-ui #floatFarmConfig .farm-col-sell{padding:12px 0 0;border-top:1px solid #5d5495;border-left:0}
body.mobile-client-ui #floatStore .store-layout{display:flex;flex-direction:column;overflow-y:auto}
body.mobile-client-ui #floatStore .store-categories{grid-template-columns:repeat(3,minmax(0,1fr));min-height:0}
body.mobile-client-ui #floatStore .store-layout .store-products{grid-template-columns:repeat(2,minmax(0,1fr));min-height:360px;overflow-y:auto}
body.mobile-client-ui #floatStore .store-order-panel{display:flex;flex-direction:column}
body.mobile-client-ui #floatMarket .market-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:4px}
body.mobile-client-ui #floatMarket .market-row{grid-template-columns:30px minmax(0,1fr) 74px 48px}
body.mobile-client-ui #floatMail .mail-actions{grid-template-columns:1fr 1fr}
body.mobile-client-ui #floatMail .mail-card{grid-template-columns:20px minmax(0,1fr) auto}
body.mobile-client-ui #floatSettings .settings-tabbar{grid-template-columns:repeat(4,minmax(0,1fr))}
body.mobile-client-ui #playerTradePanel{max-width:calc(100vw - 8px)!important;max-height:calc(var(--mobile-vvh,100dvh) - 110px)!important}

/* 公會 PNG 不重排內部座標，只對外層 stage 做等比縮放。 */
body.mobile-client-ui #floatGuild{
  position:fixed!important;z-index:40000!important;left:50%!important;top:calc(max(3px,env(safe-area-inset-top)) + 40px)!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important
}
body.mobile-client-ui #guildEmblemPickerPanel{
  position:fixed!important;z-index:55010!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important
}
body.mobile-client-ui #guildProfilePanel,
body.mobile-client-ui #guildCreatePanel{max-width:calc(100vw - 8px)!important}

/* 手機登入流程共用直向專屬背景；桌面版維持各自原本的背景。 */
body.mobile-client-ui #serverModal,
body.mobile-client-ui #noticeModal,
body.mobile-client-ui #loginModal,
body.mobile-client-ui #charModal{
  background-color:#91daf2!important;
  background-image:url('/ui/mobile-server-select-background.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* 登入三階段保留原 PNG 座標，只縮放完整面板，避免窄螢幕裁切。 */
body.mobile-client-ui #serverBox{transform:scale(var(--mobile-server-scale,1));transform-origin:center center}
/* 手機公告改為窄而高的可重排版面；文字依實際欄寬自動換行。 */
body.mobile-client-ui #noticeBox{
  flex:0 0 auto!important;
  width:calc(100vw - 44px)!important;
  max-width:390px!important;
  height:min(84dvh,540px)!important;
  min-height:0!important;
  max-height:calc(var(--mobile-vvh,100dvh) - 12px)!important;
  background-size:100% 100%!important;
  transform:translateY(10px)!important;
  transform-origin:center center
}
body.mobile-client-ui #noticeModal.is-visible #noticeBox{transform:translateY(0)!important}
body.mobile-client-ui #noticeBox .notice-content{
  left:20px!important;
  right:26px!important;
  top:52px!important;
  bottom:70px!important;
  width:auto!important;
  height:auto!important;
  padding:0 12px 0 0!important;
  font-size:15px!important;
  line-height:1.65!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
body.mobile-client-ui #noticeBox #initNoticeMsg{
  left:18px!important;
  right:18px!important;
  top:auto!important;
  bottom:44px!important;
  width:auto!important;
  max-width:none!important;
  overflow:hidden!important;
}
body.mobile-client-ui #noticeBox .notice-actions{
  bottom:10px!important;
  gap:min(12vw,48px)!important;
}
body.mobile-client-ui #loginModal #loginBox{transform:scale(var(--mobile-login-scale,1))!important;transform-origin:center center!important}

/* 選角資料改成觸控單欄；這一頁不是座標式 PNG，故可安全重排。 */
body.mobile-client-ui #charModal{box-sizing:border-box;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));align-items:flex-start}
body.mobile-client-ui #charBox.char-box-wide{width:100%;max-width:520px;max-height:calc(var(--mobile-vvh,100dvh) - 12px);margin:auto;padding:14px 12px;border-radius:12px;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.mobile-client-ui #charSelectPane>h2,
body.mobile-client-ui #charCreatePane>h2{font-size:23px!important}
body.mobile-client-ui #charSelectPane>.sub,
body.mobile-client-ui #charCreatePane>.sub{margin-bottom:9px;font-size:11px}
body.mobile-client-ui .char-slots{grid-template-columns:1fr;gap:8px;margin:10px 0}
body.mobile-client-ui .char-slot{min-height:104px;display:grid;grid-template-columns:76px minmax(0,1fr);grid-auto-rows:min-content;align-content:center;column-gap:12px;padding:8px 12px;text-align:left}
body.mobile-client-ui .char-slot .cs-portrait{grid-column:1;grid-row:1/6;width:68px;height:68px;margin:0}
body.mobile-client-ui .char-slot:hover{transform:none}
body.mobile-client-ui .char-actions{gap:6px;margin-top:8px}
body.mobile-client-ui .char-actions .btn-primary{min-width:calc(50% - 4px);min-height:42px;margin:0}
body.mobile-client-ui #charCreatePane{display:grid;grid-template-columns:1fr;gap:9px}
body.mobile-client-ui #charCreatePane>*{grid-column:1!important;grid-row:auto!important}
body.mobile-client-ui #charCreatePane .create-left,
body.mobile-client-ui #charCreatePane .create-right{grid-column:1!important;grid-row:auto!important}
body.mobile-client-ui #charCreatePane .job-picker{gap:10px}
body.mobile-client-ui #charCreatePane .job-portrait-wrap{width:112px;height:112px}
body.mobile-client-ui #charCreatePane>.create-preview{grid-column:1!important;grid-row:auto!important}

body.mobile-client-ui #gameConfirm,
body.mobile-client-ui #sellQtyDialog,
body.mobile-client-ui .item-desc-pin,
body.mobile-client-ui .item-tooltip-style{max-width:calc(100vw - 12px)!important;max-height:calc(var(--mobile-vvh,100dvh) - 78px)!important}
/* 說明欄依內容高度，不再撐滿整屏；與電腦版留白一致
   注意：不可對 #itemDescPin 設 display:!important，否則會蓋掉 JS 的 display:none，
   在登入／選服畫面出現多餘的「確定」按鈕。 */
body.mobile-client-ui #itemDescPin{
  z-index:55020!important;
  left:50%!important;right:auto!important;
  top:calc(max(5px,env(safe-area-inset-top)) + 40px)!important;
  bottom:auto!important;
  transform:translateX(-50%);
  width:min(240px,calc(100vw - 12px))!important;
  height:auto!important;
  max-width:calc(100vw - 12px)!important;
  max-height:calc(var(--mobile-vvh,100dvh) - 110px)!important;
  overflow:hidden!important;
  flex-direction:column!important
}
body.mobile-client-ui #itemDescPin .pin-body{
  flex:0 1 auto!important;min-height:0;max-height:min(52vh,420px)!important;
  overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding:8px 10px!important
}
body.mobile-client-ui #itemDescPin .pin-foot{flex:0 0 auto;gap:6px;padding:5px 8px 7px!important;margin-top:0}
body.mobile-client-ui #itemDescPin .pin-foot .pin-ok{min-width:68px!important;min-height:32px!important}
body.mobile-client-ui #pinAction:not([hidden]),
body.mobile-client-ui #pinShare:not([hidden]){display:inline-block!important}
body.mobile-client-ui #setDescPin{z-index:55019!important}
body.mobile-client-ui .equipment-ability-description{z-index:55030!important}
body.mobile-client-ui #gameConfirm,
body.mobile-client-ui .friend-invite-dialog,
body.mobile-client-ui .party-invite-dialog,
body.mobile-client-ui .player-trade-invite{z-index:55040!important}
body.mobile-client-ui #ctxMenu{z-index:61000!important;min-width:148px;padding:4px}
body.mobile-client-ui #ctxMenu button{min-height:42px;padding:8px 14px;font-size:14px}
body.mobile-client-ui input,
body.mobile-client-ui textarea,
body.mobile-client-ui select{font-size:16px}
body.mobile-client-ui button{touch-action:manipulation}
/* 手機沒有實體鍵盤操作，熱鍵設定保持灰化且不可選取。 */
body.mobile-client-ui #floatSettings .settings-tab[data-settings-tab="hotkeys"],
body.mobile-client-ui #floatSettings .settings-page[data-settings-page="hotkeys"]{
  pointer-events:none!important;
  opacity:.38!important;
  filter:grayscale(1);
}

/* 右下主選單：單一基本鈕向上展開，按鈕直接使用指定 PNG，不保留外層框。 */
body.mobile-client-ui #app{--mobile-nav-width:76px;--mobile-nav-button-height:24px}
body.mobile-client-ui #mobileNav{
  width:76px!important;
  height:calc(24px + env(safe-area-inset-bottom))!important;
  padding:0 0 env(safe-area-inset-bottom)!important;
  gap:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
body.mobile-client-ui #mobileNav button,
body.mobile-client-ui #mobileNav.mobile-nav-open button{
  flex:0 0 24px!important;
  width:76px!important;min-width:76px!important;
  height:24px!important;min-height:24px!important;
  margin:0;padding:0!important;
  color:#50545d!important;border:0!important;border-radius:0!important;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAYCAYAAABQiBvKAAABVklEQVRYhe2Za63DMAyFT6MCCIRCKARDCIRBCYRBGARDKIQLoRAM4f5Zpqhr2jy6Zo980rTIcxP7zLGsrRMRkDEWgEFjC56YbTcSWa2HC9+uunZE7wyZywwIdyOZv4lvwySFO+7Ifea3sZtKRq6kATJmVq2s4nAaq6pRfCBNsESaYIkoIKsH/hyth2WiWnXF4XTqAYEAmO8Gf8z41ZFDVtbD/b0POSzXwLqAD5vsONZEVpebthB95rlBmw44iudwlJ7ytIj0LyBJsEOQjcBjlazYeJ+u5KnkltryuRMS8Jp+OUl5V+xv/tG5GhcLFpX/q0Vy+59Qad81uGrvFeGaQ3aF7R5Ye7SIuH86/FGQfrl3Shx5DhXYuLKpoilAP6b82HNXjZFXoSoHxKjcPsWBfDAx4TufbiSyAIxlHl78s/5bkJOjBmCNmQFwNxIBgEX7m20PnpjtP195Sw7Ix6UWAAAAAElFTkSuQmCC') center/76px 24px no-repeat!important;
  box-shadow:none!important;
  font:900 13px/24px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;
  text-align:center;text-shadow:none!important;
  transform:none!important;
}
body.mobile-client-ui #mobileNav button[data-mobile-view="basic"]{border-radius:0!important}
body.mobile-client-ui #mobileNav.mobile-nav-open{
  height:auto!important;max-height:calc(100dvh - env(safe-area-inset-bottom))!important;
  overflow-y:auto;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
}
body.mobile-client-ui #mobileNav button.active,
body.mobile-client-ui #mobileNav button:active{
  color:#50545d!important;border:0!important;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAYCAYAAABQiBvKAAABVklEQVRYhe2Za63DMAyFT6MCCIRCKARDCIRBCYRBGARDKIQLoRAM4f5Zpqhr2jy6Zo980rTIcxP7zLGsrRMRkDEWgEFjC56YbTcSWa2HC9+uunZE7wyZywwIdyOZv4lvwySFO+7Ifea3sZtKRq6kATJmVq2s4nAaq6pRfCBNsESaYIkoIKsH/hyth2WiWnXF4XTqAYEAmO8Gf8z41ZFDVtbD/b0POSzXwLqAD5vsONZEVpebthB95rlBmw44iudwlJ7ytIj0LyBJsEOQjcBjlazYeJ+u5KnkltryuRMS8Jp+OUl5V+xv/tG5GhcLFpX/q0Vy+59Qad81uGrvFeGaQ3aF7R5Ye7SIuH86/FGQfrl3Shx5DhXYuLKpoilAP6b82HNXjZFXoSoHxKjcPsWBfDAx4TufbiSyAIxlHl78s/5bkJOjBmCNmQFwNxIBgEX7m20PnpjtP195Sw7Ix6UWAAAAAElFTkSuQmCC') center/76px 24px no-repeat!important;
  box-shadow:none!important;transform:none!important;
}

/* 手機橫向時將完整遊戲介面旋成直式，保留同一套直向操作版面。 */
#mobilePortraitBlock{display:none!important}
@media (orientation:landscape){
  body.mobile-client-ui.mobile-touch-client #mobilePortraitBlock{display:none!important}
  body.mobile-client-ui.mobile-touch-client #app{
    position:fixed!important;
    top:0!important;
    left:100vw!important;
    width:100vh!important;
    height:100vw!important;
    min-height:0!important;
    transform:rotate(90deg)!important;
    transform-origin:top left!important;
  }
  body.mobile-client-ui.mobile-touch-client.mobile-landscape-ccw #app{
    top:100vh!important;
    left:0!important;
    transform:rotate(-90deg)!important;
  }
}
@keyframes mobile-rotate-hint{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}

@media (orientation:landscape) and (max-height:560px){
  body.mobile-client-ui #app{padding-bottom:calc(50px + env(safe-area-inset-bottom))}
  body.mobile-client-ui #app #topbar{height:28px;min-height:28px}
  body.mobile-client-ui #mobileQuickTools{top:calc(max(3px,env(safe-area-inset-top)) + 34px)}
  body.mobile-client-ui #mobileNav{height:calc(48px + env(safe-area-inset-bottom))}
  body.mobile-client-ui #mobileNav button{min-height:38px}
  body.mobile-client-ui #basicLeft,body.mobile-client-ui #view-basic .side-panel.right{top:calc(max(3px,env(safe-area-inset-top)) + 34px)!important;bottom:calc(53px + env(safe-area-inset-bottom))!important}
  body.mobile-client-ui #app .float-panel:not(.guild-float-panel):not(.guild-emblem-picker-panel){top:calc(max(3px,env(safe-area-inset-top)) + 32px)!important;bottom:calc(52px + env(safe-area-inset-bottom))!important}
  body.mobile-client-ui #mobileMoreSheet:not([hidden]){bottom:calc(53px + env(safe-area-inset-bottom));max-height:70vh}
}

/* 旋轉後仍使用直式版的邊界與底部對齊，不套用舊版橫向壓縮規則。 */
@media (orientation:landscape) and (max-height:560px){
  body.mobile-client-ui.mobile-touch-client #app{
    padding: max(3px,env(safe-area-inset-top)) max(3px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left))!important;
  }
  body.mobile-client-ui.mobile-touch-client #mobileNav{height:auto!important}
}

/* 手機基本頁：公告僅保留聊天紀錄與此走馬燈，不再使用桌面版頂端橫幅。 */
body.mobile-client-ui #playerBroadcast{display:none!important}
body.mobile-client-ui .mobile-map-title{
  grid-column:1/-1!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
body.mobile-client-ui .mobile-announcement-feed{position:relative!important;text-overflow:clip!important}
body.mobile-client-ui .mobile-announcement-marquee{
  position:absolute;top:5px;left:0;display:block;white-space:nowrap;
  animation:mobile-announcement-marquee 5s ease-in-out both;
}
@keyframes mobile-announcement-marquee{
  0%{left:0;transform:translateX(-100%)}
  20%,80%{left:50%;transform:translateX(-50%)}
  100%{left:100%;transform:translateX(0)}
}

/* 對話輸入內容固定從頻道選單右側隔線後開始，避免覆蓋頻道名稱。 */
body.mobile-client-ui #view-basic .mobile-basic-chat-input{gap:0!important}
body.mobile-client-ui #view-basic .mobile-basic-chat-input .chatInput{
  flex:1 1 0!important;min-width:0!important;overflow:hidden!important;padding-left:22px!important;
}
body.mobile-client-ui #view-basic .mobile-basic-chat-input .chatModeSelect{margin-right:0!important}
body.mobile-client-ui #view-basic .mobile-basic-chat-input .chatSend{display:none!important}

/* 裝備、技能依實際內容收合；組隊則保留聊天欄上方的可視範圍。 */
body.mobile-client-ui #app #floatEquip,
body.mobile-client-ui #app #floatSkills{
  bottom:auto!important;height:auto!important;max-height:calc(var(--mobile-vvh,100dvh) - 12px)!important;
}
body.mobile-client-ui #app #floatEquip>.equip-body{
  flex:0 1 auto!important;max-height:none!important;overflow-y:auto!important;
}
body.mobile-client-ui #app #floatEquip .equip-grid{max-height:none!important;overflow:visible!important}
body.mobile-client-ui #app #floatSkills>.skill-float-body{flex:0 1 auto!important;overflow-y:auto!important}
body.mobile-client-ui #floatSkills .skill-tw-layout{
  grid-template-columns:1fr!important;grid-template-rows:303px 128px!important;
  height:auto!important;min-height:0!important;max-height:none!important;gap:6px!important;
}
body.mobile-client-ui #floatSkills .skill-list{height:260px!important;max-height:260px!important;min-height:260px!important}
body.mobile-client-ui #floatSkills .skill-detail-pane{box-sizing:border-box;height:128px!important;min-height:128px!important;max-height:128px!important;padding:6px 8px!important;overflow-y:auto!important}
body.mobile-client-ui #floatSkills .skill-detail-desc{min-height:0!important}
body.mobile-client-ui #app #floatParty{
  bottom:calc(clamp(178px,38dvh,258px) + env(safe-area-inset-bottom))!important;
}
body.mobile-client-ui #app #floatParty>.party-body{overflow:hidden!important}

/* 手機物品說明一律先置中；拖曳把手可將它移到其他位置。 */
#pinDragHandle{display:none}
body.mobile-client-ui #itemDescPin{
  top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-client-ui #itemDescPin.is-mobile-dragged{
  left:var(--mobile-pin-left,50%)!important;top:var(--mobile-pin-top,50%)!important;
  transform:none!important;
}
body.mobile-client-ui #pinDragHandle{
  display:none!important;flex:0 0 16px;height:16px;box-sizing:border-box;
  color:#d7d2ff;text-align:center;font:900 14px/13px var(--ui);letter-spacing:3px;
  touch-action:none;cursor:grab;user-select:none;
}

/* 單位訊息的浮動操作選單，沿用右下「基本」按鈕的尺寸與文字配置。 */
body.mobile-client-ui #ctxMenu{
  width:76px!important;min-width:76px!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
body.mobile-client-ui #ctxMenu button{
  display:block;width:76px!important;min-width:76px!important;height:24px!important;min-height:24px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  color:#50545d!important;text-align:center!important;
  font:900 13px/24px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;
  text-shadow:none!important;box-shadow:none!important;
}
body.mobile-client-ui #ctxMenu button.hidden{display:none!important}

/* 手機選角操作鈕：未按壓／按壓各自使用指定 PNG，按住時維持按下狀態。 */
body.mobile-client-ui #charSelectPane .char-actions .btn-primary{
  min-height:42px!important;height:42px!important;padding:0!important;
  border:0!important;border-radius:0!important;
  color:#586578!important;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAXCAYAAACGcCj3AAABnUlEQVRoge2Z3bGDIBCFTxwK2BIsISVQQkqgBEqwBEqwFEtICZSwJdyHxJuoKCCKRv0eHF2Xv8Oy64w3ACil1gAULtakto0xopRayYfURknaekZHRptGNwALAMooSY1doNeELcu525y9IWC0pHvTPArkXevZKYutZ3A2LsEz0WajS/DMFEBSLbgIpNVYtAb7ttD/5cNVVcPh3kP7TO8b0XfiQaveI7k3gL4dj7JD7Lzt2iLTg/C7DEdxDk5dn5ZJ7b9estu8GE5dHEavfon5dxDhS9Pvm6Zejpnn7EDkotauY90cvseqmRrmIydua9I/CwnB4gRruHRO2VFNSRM8YiFeV0LU5kXj6XvtYGibxRfNyIFDi2Y2JlINuc3uPmamqXjBU6J6R0cbwKjCQcLPFF10RvAxJ6r3JrILzyftqK7BR+KD6I/nnVCI6y+IPIZDfG8wR0S7P6XERPUvC+1iRgR7YAHA6qoutVZRc0h3OhY8sWYCUBkDAFYAqGFxrypDRCdUKgPMDDAYQH0DgFLqO15/7csN53Vknnj9tbd/4KZeifQU2MYAAAAASUVORK5CYII=') center/100% 100% no-repeat!important;
  box-shadow:none!important;filter:none!important;
  font:900 14px/42px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;
  text-shadow:none!important;transform:none!important;
}
body.mobile-client-ui #charSelectPane .char-actions .btn-primary:active:not(:disabled){
  color:#586578!important;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAXCAYAAACGcCj3AAAB6ElEQVRoge1YXbnDIAw93YeASEDCJFTCJFQCEiYBCZVwJVRCJVQCEu7DLl3XkfFPd/ftPJQOQgKHJKTrAED2SsEYBYDwRQ0YEOll0rqTvRqkJH1Ryg41pf2oEzaN7Y1awyxGdbK/Tkqrs1kYSQ8j7PCnxIrjZFIOiwCMepwFfNR4PN4afxLZruo/kl+IaDuJ5K0RQWoC0gxLvHfwjVAqzzB6jDEQ0UoCiGdF9gt5hwMI9LcyQogg3KWYISzYofe6WkRChBeXJNpCAI97jYKH/KiCxzDvueQnbOzllKy0Y1MKAURrXx755O52DMXpbYDSRNP6uPP7nFIojZgt36ZxLV8LxP5IR15K2YA2LdG9Y0v+aoc5EOKHssHtb2+LK29LBVr8pRkJ2u1gG2ZO+VrrKCSTa/9U0cYXDnwJb4wTUCGUPuDCLA2+SklVuD4K44A6nLVf4Oa8VSkZm8qZyyutoCuTLOtQa5WViDQPL0VIy9TjspX4MWMSvJ7+niJq1/TQxKMAwT4VURwmpouHoImMIAFfViDnazhy0lXmnNrkO4n3zBcAZgA9Eft3SJjVRLT42HDhJaeRE5/E7Vf2boyAuTsPeiDQddSXty7mCt19h2FQPwaA6gBA9uoMYAAgD1zTJ2MGMC6TXn4B+WF52Ptey0QAAAAASUVORK5CYII=') center/100% 100% no-repeat!important;
  filter:none!important;transform:none!important;
}
/* 右下「基本」主鈕與展開選單一併向左、向上各 1px。 */
body.mobile-client-ui #mobileNav{right:1px!important;bottom:1px!important}

/* 手機屬性欄替換為指定 PNG 框體；內容維持原本格局，外框隨內容高度延展。 */
body.mobile-client-ui #app #floatAttrs{
  position:fixed!important;border:0!important;background:transparent!important;box-shadow:none!important;
}
body.mobile-client-ui #app #floatAttrs::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYkAAAHPCAMAAACRAtb+AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAPlQTFRFAAAA8vHv5ePf2NXPy8e/q6urj4+P9fX17+/vyMjUWlp4Hi08WlppxMTELS1L8fHx4vHx4uLx0+LxS1qHPEuHaXimtcTieIemprXTh5e1l6bEh5fEl6a1eHimxNPiWmmXpqbEl5e109PixNPxaXiXaWmXeIe1prXEtcTTtcTxpsTxtbXTtdPxS1qXl7XiWmmml6bTh6bTeJfExMTi09PxpsTiLS08SUlXS1ppHi1LPDxLj4+sV3OP7+/nV2WPj4+d9fXqV2WB7+fn7+ffgY+dV2Vz9erqj52dZWVzSVZWgYGPZXOBc4GPnZ2szc3DSUlJnZ2dt7eryMi9X5sTTwAAAFN0Uk5TAP////////////////////////////////////////////////////////////////////////////////////////////////////////////8OgYK9AAAJKUlEQVR4nO3aXXMbVwGA4XO00kq2ZMdxUtS6tOkvgDsuGIZpLzLDX2aGGcoFXHDBNXedSUgdN64lf8j6XC1nJSeArYIzDd4X9L5OZFvaIx/to7MreRyDMYr/8snqqFxdxpsLKWqrXFvE1f+oRH2Vq4/1ckgfStRWuaaoJBJEQ4naKpdlpbFeEA3XRH2ViSJZVA6VhCeKuiqrRZF6K1FV95y2sRjn5S2JRlOJGiqXi9sSWdNV8eAlgEVxV8LXTw9fWhIbJLK6p3VTmk/xXgOay+oyi7N7bd2et6bvP6n/VgVYopN26HLTDfm8M944Ikl0QhyHfHKf+28V2bTRi5P5j5jjh4ss0SrK2LvYcEN73hs2No1IEosQDq7C7tU97r/Zjd9n+SKbIB4vWOLxMLQWB6eNtHt3r3rXoVG9/wztcdgbpVsbi05rFLrTWXLpjsKjQTWkkkhETwa985i3RyHuD9LWWRHKdlolzeptU7WaViMv08C9YadaEO3NK+xhA0vsTLNJM+4P077sXXRm3WF31loWiWBnVu6UVzFf7C/GZdFoz0NsX67mfCPRnneu9kcxy8fZvHJrNccJM90YE0g+SapZfr3Iqs06ZXEwyc82rrCHDSyxN2qOO0VnFHemO5etsjdod87Dwag5jY8ue4PY6IyXWSMUsT0/eBPial/+k8RPzrJJoxGLuDfqXIaPhr3zj9I1oTvrnufLsjX++PVKolEdnRCv2rkS69dBoXve6F2Xj85DEfbneToupVPE+jyRx+rIsj9MO/QyezemksjK3rC9ftW1P9wbPX3deHrWuWoXvUHWXJaLLC2Tsn3deCeBeLybJPLDPJZ1TywUZwdpZ17E/jKclrHMJp/F43I/G+aTfnGWLlrfhm7jIu62srO98/56TLqu+LRIl7tXWTrbp2uGh4vRkzf9/FU+yco0qv23cnEUzudl2O0W1cDOy2z6Sa0PtCqG6dmMKtE8zq8b6emdzfs7L0Lovzr6LuyGUVxJtKZpF1ZnjnBXYnB43Lp++uhFNxu2w/TochSLZy/Ds2++eNEdP8lfZZNncb77Tdzdn60luudK/Ls6L9N7iX64mJZlP57E7jDrX1evmdIZdyVztDhZHdxvS1TtnTU+Dqutk9h6VLLJT6sH9fi0/Lza6uDN09XAasjntb92Iku03sTRZ0WIg87w02JnkJ+kJ+6wM92bFVf9cN5Oh53D07A7aA8P918fHt9IxEV16jgLWfV92mg6qvzydshfJ5uwnKVr4k+Li7z6/ElnNbCdTkFX/TofamBLhNkgVPsn+zYcFeEkrL45qW54nK++OCqy1Qo4Km5uDOutw7vvTlZfXo/6x2+vOwn/uJ9+uLnXk/Vd1hpa4kNVSdT9lP+PbYXEzvE0/K9KtJ78P0mko8/R+/1Gt4ZiOft+vumd3eO6Z7Z9DTa8s/vZX/1Tmwev+gOb2W2JnxN+C7N9lY2/3JFo/rHuWW1hvypLJRApQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgtEHiFzMlaihJZH9WApASlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKC0gaJ7EqJGkoSO4USgJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgtEHiFzMlaihJZH9WApASlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgtEHiFzMlaihJZH9WApASlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgtEHiFzMlaihJZH9WApASlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEpY0Se7+re1pbmBKUPDpRUoKSEpSUoKQEJSUoKUFJCUpKUHo+U4KREpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlDZJjFtKPHyuCUp3Jb4s/FvxOqoksq9vSbgmakgJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClBSQlKSlBSgpISlJSgpAQlJSgpQUkJSkpQUoKSEpSUoKQEJSUoKUFJCUpKUFKCkhKUlKCkBCUlKClB6Xl5rQSijRIHv617WlvYb8Z3j075dTcWdU/sA/bDjyW73+j7bPaja8bverclujGOJw/xw+1drfn+759f3JYIj4rXdc/sg/aDz+n7rPzsfpvdv2zz3WX9i3BL4gP/YLt3WXgnkSwa8cu6J7S9fV0miZAkEkRIFHXPZ3tLECFRVBKrZVH3fLa3akGElcSaou75bG9riLVADErUV7n691ZAiBorV5cSUPo7ES3p/H4RcIEAAAAASUVORK5CYII=') center/100% 100% no-repeat;
}
body.mobile-client-ui #app #floatAttrs>.float-header{
  position:relative;z-index:1;box-sizing:border-box;
  flex:0 0 25px!important;height:25px!important;min-height:25px!important;
  margin:4px 7px 0!important;padding:0 8px!important;
  border:0!important;border-radius:0!important;
  color:#586578!important;background:linear-gradient(#dce7ff,#bfd0f2)!important;
  box-shadow:none!important;font:900 14px/25px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;
  text-align:center;text-shadow:none!important;
}
body.mobile-client-ui #app #floatAttrs>.float-header .float-close{
  position:absolute!important;right:1px!important;top:1px!important;
  width:22px!important;min-width:22px!important;height:22px!important;min-height:22px!important;
  color:#586578!important;background:transparent!important;font-size:17px!important;line-height:20px!important;
}
body.mobile-client-ui #app #floatAttrs>.attr-tw-body{
  position:relative;z-index:1;flex:0 1 auto!important;
  margin:0 5px 5px!important;padding:3px!important;
}

/* 還原手機屬性欄原本框體；保留既有屬性內容配置。 */
body.mobile-client-ui #app #floatAttrs{
  border:1px solid var(--tw-panel-line)!important;border-radius:4px!important;
  background:linear-gradient(145deg,#30285c,#1d193d)!important;box-shadow:none!important;
}
body.mobile-client-ui #app #floatAttrs::before{display:none!important}
body.mobile-client-ui #app #floatAttrs>.float-header{
  flex:0 0 38px!important;height:38px!important;min-height:38px!important;
  margin:0!important;padding:5px 7px 5px 11px!important;
  color:#fff!important;border:0!important;border-bottom:1px solid #bbb4ea!important;border-radius:3px 3px 0 0!important;
  background:linear-gradient(180deg,var(--tw-panel-head-top),var(--tw-panel-head-bottom))!important;
  font:700 14px/18px var(--ui)!important;text-align:left;text-shadow:0 1px 1px #171132!important;
}
body.mobile-client-ui #app #floatAttrs>.float-header .float-close{
  position:static!important;width:32px!important;min-width:32px!important;height:30px!important;min-height:30px!important;
  color:#f6f3ff!important;border:1px solid #aaa4dd!important;border-radius:2px!important;
  background:#292753!important;font-size:20px!important;line-height:19px!important;
}
body.mobile-client-ui #app #floatAttrs>.attr-tw-body{
  margin:0!important;padding:8px!important;
}

/* 手機共用冰藍 PNG 按鈕：沿用選角「創建角色」的未按下／按下圖。 */
body.mobile-client-ui{
  --mobile-ice-button:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAXCAYAAACGcCj3AAABnUlEQVRoge2Z3bGDIBCFTxwK2BIsISVQQkqgBEqwBEqwFEtICZSwJdyHxJuoKCCKRv0eHF2Xv8Oy64w3ACil1gAULtakto0xopRayYfURknaekZHRptGNwALAMooSY1doNeELcu525y9IWC0pHvTPArkXevZKYutZ3A2LsEz0WajS/DMFEBSLbgIpNVYtAb7ttD/5cNVVcPh3kP7TO8b0XfiQaveI7k3gL4dj7JD7Lzt2iLTg/C7DEdxDk5dn5ZJ7b9estu8GE5dHEavfon5dxDhS9Pvm6Zejpnn7EDkotauY90cvseqmRrmIydua9I/CwnB4gRruHRO2VFNSRM8YiFeV0LU5kXj6XvtYGibxRfNyIFDi2Y2JlINuc3uPmamqXjBU6J6R0cbwKjCQcLPFF10RvAxJ6r3JrILzyftqK7BR+KD6I/nnVCI6y+IPIZDfG8wR0S7P6XERPUvC+1iRgR7YAHA6qoutVZRc0h3OhY8sWYCUBkDAFYAqGFxrypDRCdUKgPMDDAYQH0DgFLqO15/7csN53Vknnj9tbd/4KZeifQU2MYAAAAASUVORK5CYII=');
  --mobile-ice-button-down:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAXCAYAAACGcCj3AAAB6ElEQVRoge1YXbnDIAw93YeASEDCJFTCJFQCEiYBCZVwJVRCJVQCEu7DLl3XkfFPd/ftPJQOQgKHJKTrAED2SsEYBYDwRQ0YEOll0rqTvRqkJH1Ryg41pf2oEzaN7Y1awyxGdbK/Tkqrs1kYSQ8j7PCnxIrjZFIOiwCMepwFfNR4PN4afxLZruo/kl+IaDuJ5K0RQWoC0gxLvHfwjVAqzzB6jDEQ0UoCiGdF9gt5hwMI9LcyQogg3KWYISzYofe6WkRChBeXJNpCAI97jYKH/KiCxzDvueQnbOzllKy0Y1MKAURrXx755O52DMXpbYDSRNP6uPP7nFIojZgt36ZxLV8LxP5IR15K2YA2LdG9Y0v+aoc5EOKHssHtb2+LK29LBVr8pRkJ2u1gG2ZO+VrrKCSTa/9U0cYXDnwJb4wTUCGUPuDCLA2+SklVuD4K44A6nLVf4Oa8VSkZm8qZyyutoCuTLOtQa5WViDQPL0VIy9TjspX4MWMSvJ7+niJq1/TQxKMAwT4VURwmpouHoImMIAFfViDnazhy0lXmnNrkO4n3zBcAZgA9Eft3SJjVRLT42HDhJaeRE5/E7Vf2boyAuTsPeiDQddSXty7mCt19h2FQPwaA6gBA9uoMYAAgD1zTJ2MGMC6TXn4B+WF52Ptey0QAAAAASUVORK5CYII=');
}

body.mobile-client-ui #floatSettings button:not(.float-close),
body.mobile-client-ui #floatMarket .market-tabs button{
  box-sizing:border-box!important;min-width:0!important;height:34px!important;min-height:34px!important;
  margin:0!important;padding:0 5px!important;border:0!important;border-radius:0!important;
  color:#586578!important;background:transparent var(--mobile-ice-button) center/100% 100% no-repeat!important;
  box-shadow:none!important;filter:none!important;transform:none!important;
  font:900 12px/34px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;
  text-align:center!important;text-shadow:none!important;
}
body.mobile-client-ui #floatSettings button:not(.float-close):active:not(:disabled),
body.mobile-client-ui #floatSettings .settings-tab.active,
body.mobile-client-ui #floatMarket .market-tabs button:active:not(:disabled),
body.mobile-client-ui #floatMarket .market-tabs button.active{
  color:#586578!important;background-image:var(--mobile-ice-button-down)!important;
}
body.mobile-client-ui #floatSettings button:disabled,
body.mobile-client-ui #floatMarket .market-tabs button:disabled{opacity:.45!important;filter:grayscale(1)!important}
body.mobile-client-ui #floatSettings .settings-tabbar{gap:2px!important}
body.mobile-client-ui #floatSettings .settings-actions,
body.mobile-client-ui #floatSettings .settings-session-actions{gap:4px!important}

/* 手機公眾市場三個主要分頁，等寬並保留右側資產資訊。 */
body.mobile-client-ui #floatMarket .market-tabs{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important;
  padding-bottom:5px!important;
}
body.mobile-client-ui #floatMarket .market-tabs>span{
  grid-column:1/-1;margin:0!important;padding:3px 2px 0;text-align:right;white-space:nowrap;
}

/* 手機商城：分類橫向滑動、商品雙欄，購買與購物車區保持緊湊且可獨立捲動。 */
body.mobile-client-ui #floatStore>.store-body{
  display:flex!important;flex-direction:column!important;gap:5px!important;
  min-height:0!important;overflow:hidden!important;padding:6px!important;
}
body.mobile-client-ui #floatStore .store-layout{
  display:grid!important;grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(330px,1fr) auto!important;
  gap:7px!important;flex:1 1 auto!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;
}
body.mobile-client-ui #floatStore .store-categories{
  display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;
  grid-auto-columns:minmax(88px,1fr)!important;gap:3px!important;
  min-height:36px!important;padding:3px!important;overflow-x:auto!important;overflow-y:hidden!important;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
body.mobile-client-ui #floatStore .store-category-button{
  min-height:32px!important;padding:4px 7px!important;justify-content:center!important;
  text-align:center!important;white-space:nowrap;scroll-snap-align:start;
}
body.mobile-client-ui #floatStore .store-category-button span{display:none!important}
body.mobile-client-ui #floatStore .store-catalog{
  display:grid!important;grid-template-rows:auto auto minmax(260px,1fr) auto!important;
  gap:5px!important;min-height:330px!important;
}
body.mobile-client-ui #floatStore .store-catalog-head{min-height:22px!important;padding:0 2px!important}
body.mobile-client-ui #floatStore .store-catalog-tools{grid-template-columns:minmax(0,1fr) 108px!important;gap:4px!important}
body.mobile-client-ui #floatStore .store-catalog-tools input,
body.mobile-client-ui #floatStore .store-catalog-tools select{height:34px!important;font-size:16px!important}
body.mobile-client-ui #floatStore .store-layout .store-products{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:none!important;grid-auto-rows:minmax(112px,auto)!important;
  gap:5px!important;min-height:260px!important;max-height:390px!important;
  padding-right:1px;overflow-y:auto!important;overflow-x:hidden!important;
}
body.mobile-client-ui #floatStore .store-layout .store-product-card{
  min-height:112px!important;grid-template-rows:44px minmax(48px,1fr)!important;
  gap:4px!important;padding:6px!important;border-radius:5px!important;
}
body.mobile-client-ui #floatStore .store-product-main{gap:1px!important}
body.mobile-client-ui #floatStore .store-product-main b{font-size:12px!important}
body.mobile-client-ui #floatStore .store-product-main .store-price{font-size:13px!important}
body.mobile-client-ui #floatStore .store-product-empty{display:none!important}
body.mobile-client-ui #floatStore .store-order-panel{
  display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto minmax(54px,128px) auto!important;
  gap:5px!important;padding:6px!important;min-height:0!important;
}
body.mobile-client-ui #floatStore .store-order-panel .store-purchase{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:4px!important;padding:6px!important;
}
body.mobile-client-ui #floatStore .store-order-panel .store-purchase>span{grid-column:1/-1!important;min-height:16px!important}
body.mobile-client-ui #floatStore .store-order-panel .store-purchase label{white-space:nowrap}
body.mobile-client-ui #floatStore .store-order-panel .store-purchase input{width:52px!important;font-size:16px!important}
body.mobile-client-ui #floatStore .store-order-panel .store-purchase button{min-width:82px!important;min-height:30px!important}
body.mobile-client-ui #floatStore .store-cart{min-height:54px!important;max-height:128px!important;overflow-y:auto!important}
body.mobile-client-ui #floatStore .store-cart-row{grid-template-columns:28px minmax(0,1fr) auto 28px!important;gap:4px!important}
body.mobile-client-ui #floatStore .store-checkout{gap:5px!important;padding:6px!important}
body.mobile-client-ui #floatStore .store-checkout b{font-size:12px!important;white-space:nowrap}
body.mobile-client-ui #floatStore .store-balance-bottom{margin:0!important;padding:5px 8px!important;flex:0 0 auto!important}
body.mobile-client-ui #floatStore .store-balance-bottom b{font-size:17px!important}
body.mobile-client-ui #floatStore .store-note{flex:0 0 auto;font-size:9px!important;line-height:1.25!important}

@media (max-width:359px){
  body.mobile-client-ui #floatStore .store-catalog-tools{grid-template-columns:1fr!important}
  body.mobile-client-ui #floatStore .store-layout .store-products{grid-template-columns:1fr!important}
  body.mobile-client-ui #floatStore .store-order-panel .store-purchase{grid-template-columns:1fr auto!important}
  body.mobile-client-ui #floatStore .store-order-panel .store-purchase>span{grid-column:1/-1!important}
}

/* PNG 按鈕以九宮格延展：長按鈕只拉長中央，不再把四角與高光整張拉扁。 */
body.mobile-client-ui #floatSettings button:not(.float-close),
body.mobile-client-ui #floatMarket .market-tabs button,
body.mobile-client-ui #floatMarket .market-history-tabs button,
body.mobile-client-ui #floatFriends button:not(.float-close){
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-style:solid!important;border-width:5px 13px!important;
  border-image-source:var(--mobile-ice-button)!important;
  border-image-slice:5 13 fill!important;border-image-width:5px 13px!important;border-image-repeat:stretch!important;
  background:none!important;color:#586578!important;box-shadow:none!important;filter:none!important;transform:none!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
  line-height:1!important;text-align:center!important;text-shadow:none!important;
}
body.mobile-client-ui #floatSettings button:not(.float-close):active:not(:disabled),
body.mobile-client-ui #floatSettings .settings-tab.active,
body.mobile-client-ui #floatMarket .market-tabs button:active:not(:disabled),
body.mobile-client-ui #floatMarket .market-tabs button.active,
body.mobile-client-ui #floatMarket .market-history-tabs button:active:not(:disabled),
body.mobile-client-ui #floatMarket .market-history-tabs button.active,
body.mobile-client-ui #floatFriends button:not(.float-close):active:not(:disabled),
body.mobile-client-ui #floatFriends .friend-tabs button.active{
  border-image-source:var(--mobile-ice-button-down)!important;
  background:none!important;color:#586578!important;
}

/* 手機好友欄：分頁、添加好友及每位好友的操作鈕使用同一款冰藍按鈕。 */
body.mobile-client-ui #floatFriends .friend-add-row{grid-template-columns:minmax(0,1fr) 92px!important;gap:4px!important}
body.mobile-client-ui #floatFriends .friend-add-row button,
body.mobile-client-ui #floatFriends .friend-tabs button{height:34px!important;min-height:34px!important;padding:0 3px!important;font-size:12px!important}
body.mobile-client-ui #floatFriends .friend-tabs{gap:2px!important}
body.mobile-client-ui #floatFriends .friend-tabs span{color:#586578!important;font-size:10px!important}
body.mobile-client-ui #floatFriends .friend-row{grid-template-columns:10px minmax(0,1fr) minmax(0,174px)!important;gap:5px!important}
body.mobile-client-ui #floatFriends .friend-row-actions{max-width:174px!important;gap:2px!important}
body.mobile-client-ui #floatFriends .friend-row-actions button{
  min-width:54px!important;height:28px!important;min-height:28px!important;padding:0 2px!important;font-size:11px!important;
}

/* 手機市場交易紀錄的三個分類鈕。 */
body.mobile-client-ui #floatMarket .market-history-tabs{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2px!important;
  margin-bottom:5px!important;padding-bottom:5px!important;
}
body.mobile-client-ui #floatMarket .market-history-tabs button{
  min-width:0!important;height:34px!important;min-height:34px!important;margin:0!important;padding:0 3px!important;font-size:12px!important;
}
body.mobile-client-ui #floatMarket .market-history-tabs>span{grid-column:1/-1;margin:0!important;text-align:right!important}

/* 手機組隊成員 HP：與屬性欄 HP 共用相同黑框和填充 PNG。 */
body.mobile-client-ui #floatParty .party-hp-bar{
  box-sizing:border-box!important;width:100%!important;height:7px!important;margin-top:3px!important;padding:0!important;
  overflow:hidden!important;border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAHCAYAAABHlm7oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABQSURBVDhPY2RgYPgPxMMGMHKxKv4Pz66Gcoc2WDm1lYGJnVkWyh36AOQXpv8Mv6DcoQ9AfmFiZGCDcoc+APmF6effx1Du0AcgvwyzUo6BAQArLxA5XaZd1gAAAABJRU5ErkJggg==')!important;
  border-image-slice:1 fill!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:#05040d!important;
  box-shadow:none!important;
}
body.mobile-client-ui #floatParty .party-hp-bar>i{
  position:static!important;display:block!important;height:100%!important;border-radius:0!important;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAFCAYAAAAHQL+kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABxSURBVDhPY/yxgeM/AzpgQcIgQA4bGw0CGGwOMBMOkOXxyqECJig95AHjjwwG3DECAuhsGI2MQQAXHwSwyYFpYIijqwEBomlojAH5jB9qcHgEFqsgGqYRxiYWgwAuNgggi8MsRJZHBujiaPxhkrQYGAC7mQjVidI+iwAAAABJRU5ErkJggg==') center/100% 100% no-repeat!important;
  box-shadow:none!important;
}

/* 手機商城分類、加入購物車與結帳，沿用相同的九宮格冰藍按鈕。 */
body.mobile-client-ui #floatStore .store-category-button,
body.mobile-client-ui #floatStore #btnStoreAdd,
body.mobile-client-ui #floatStore #btnStoreCheckout{
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;border-style:solid!important;border-width:5px 13px!important;border-radius:0!important;
  border-image-source:var(--mobile-ice-button)!important;
  border-image-slice:5 13 fill!important;border-image-width:5px 13px!important;border-image-repeat:stretch!important;
  background:none!important;color:#586578!important;box-shadow:none!important;filter:none!important;transform:none!important;
  font:900 12px/1 "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;
  text-align:center!important;text-shadow:none!important;
}
body.mobile-client-ui #floatStore .store-category-button.active,
body.mobile-client-ui #floatStore .store-category-button:active:not(:disabled),
body.mobile-client-ui #floatStore #btnStoreAdd:active:not(:disabled),
body.mobile-client-ui #floatStore #btnStoreCheckout:active:not(:disabled){
  border-image-source:var(--mobile-ice-button-down)!important;
  background:none!important;color:#586578!important;
}
body.mobile-client-ui #floatStore #btnStoreAdd:disabled,
body.mobile-client-ui #floatStore #btnStoreCheckout:disabled{opacity:.45!important;filter:grayscale(1)!important}

/* 基本頁與屬性欄 HP／MP 外框也採九宮格延展，固定四邊一像素。 */
body.mobile-client-ui .mobile-vital-track,
body.mobile-client-ui #floatAttrs .attr-vital-energy .attr-energy-track{
  box-sizing:border-box!important;height:7px!important;padding:0!important;overflow:hidden!important;
  border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAHCAYAAABHlm7oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABQSURBVDhPY2RgYPgPxMMGMHKxKv4Pz66Gcoc2WDm1lYGJnVkWyh36AOQXpv8Mv6DcoQ9AfmFiZGCDcoc+APmF6effx1Du0AcgvwyzUo6BAQArLxA5XaZd1gAAAABJRU5ErkJggg==')!important;
  border-image-slice:1 fill!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:#05040d!important;box-shadow:none!important;
}
body.mobile-client-ui .mobile-vital-track>i,
body.mobile-client-ui #floatAttrs .attr-vital-energy .attr-energy-fill{
  display:block!important;height:100%!important;border-radius:0!important;box-shadow:none!important;
}

/* 手機組隊主要操作鈕：維持既有尺寸，以指定淡黃色 PNG 呈現正常與按壓狀態。 */
body.mobile-client-ui{
  --mobile-party-button:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAWCAMAAACi/q9qAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAADZQTFRFAAAAz8/Pq6ur5+fnt7e38fHxr6+vw8PD8fHT8fHEsqursrKrvb238fHi8eKH8eKX8fG15tmyKytz/gAAABJ0Uk5TAP//////////////////////XsGGPgAAAGRJREFUeJzV1EEOgCAMBECWlqDA/x9K4gFRKl9wDxh7n2yabgoHuPdjBqEgOuIQQl43UlciccJ8krC0pVAPeFkOM3FI6w26MwWY0MdAQF8/gBr+A8tYDGMa9toBFbIxO1YD+6we+p0pPXPzO+sAAAAASUVORK5CYII=');
  --mobile-party-button-down:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAWCAMAAACi/q9qAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAADlQTFRFAAAAz8/Pq6ur5+fnpaWc8fHTp6efw8PD8eKH8dN48eJ48fHEt7e38fG18fHi8fGH5tmy8fGXsrKroxLhgAAAABN0Uk5TAP///////////////////////z4/3C0AAABwSURBVHic1c/BCoAwDAPQpZ3IcCf//yO9DNHp6vyACctBMdfySAMHuP6YQSmIjLFov0Q+IeqJxoOFsiJub0MJhYA+8Rsl7s1r0xWtG6UJH6L3xpOAQ/oARvsPRGahbBQcA9ZuF44KJ+bVZHDzQkCzC3M3MT3yrscNAAAAAElFTkSuQmCC');
}
body.mobile-client-ui #floatParty #btnPartyInvite,
body.mobile-client-ui #floatParty #btnPartyDisband{
  box-sizing:border-box!important;
  border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:var(--mobile-party-button)!important;
  border-image-slice:1 fill!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:none!important;color:#5b3a20!important;box-shadow:none!important;filter:none!important;transform:none!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
  text-shadow:0 1px 0 #e5e5e5,1px 0 0 rgba(220,220,220,.75)!important;
}
body.mobile-client-ui #floatParty #btnPartyInvite:active:not(:disabled),
body.mobile-client-ui #floatParty #btnPartyDisband:active:not(:disabled){
  border-image-source:var(--mobile-party-button-down)!important;
  background:none!important;color:#5b3a20!important;transform:none!important;
}

/* 手機公眾市場「確認上架」沿用組隊黃色按鈕，尺寸仍由原本表單決定。 */
body.mobile-client-ui #floatMarket #btnMarketList{
  box-sizing:border-box!important;
  border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:var(--mobile-party-button)!important;
  border-image-slice:1 fill!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:none!important;color:#5b3a20!important;box-shadow:none!important;filter:none!important;transform:none!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
  text-shadow:0 1px 0 #e5e5e5,1px 0 0 rgba(220,220,220,.75)!important;
}
body.mobile-client-ui #floatMarket #btnMarketList:active:not(:disabled){
  border-image-source:var(--mobile-party-button-down)!important;
  background:none!important;color:#5b3a20!important;transform:none!important;
}
body.mobile-client-ui #floatMarket #btnMarketList:disabled{opacity:.48!important;filter:grayscale(.65)!important}

/* 手機選角／創角：保留既有按鈕尺寸，只以九宮格替換外觀。 */
body.mobile-client-ui #charSelectPane #btnEnterGame,
body.mobile-client-ui #charCreatePane #createCharBtn,
body.mobile-client-ui #charCreatePane #btnCancelCreate{
  box-sizing:border-box!important;
  border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-slice:1 fill!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:none!important;box-shadow:none!important;filter:none!important;transform:none!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
}
body.mobile-client-ui #charSelectPane #btnEnterGame,
body.mobile-client-ui #charCreatePane #createCharBtn{
  border-image-source:var(--mobile-party-button)!important;
  color:#5b3a20!important;text-shadow:0 1px 0 #e5e5e5,1px 0 0 rgba(220,220,220,.75)!important;
}
body.mobile-client-ui #charSelectPane #btnEnterGame:active:not(:disabled),
body.mobile-client-ui #charCreatePane #createCharBtn:active:not(:disabled){
  border-image-source:var(--mobile-party-button-down)!important;
  background:none!important;color:#5b3a20!important;
}
body.mobile-client-ui #charCreatePane #btnCancelCreate{
  border-image-source:var(--mobile-ice-button)!important;
  color:#586578!important;text-shadow:none!important;
}
body.mobile-client-ui #charCreatePane #btnCancelCreate:active:not(:disabled){
  border-image-source:var(--mobile-ice-button-down)!important;
  background:none!important;color:#586578!important;
}

/* 黃色按鈕文字統一使用偏暖深咖啡，避免小字抗鋸齒後看起來像藍灰色。 */
body.mobile-client-ui #floatParty #btnPartyInvite,
body.mobile-client-ui #floatParty #btnPartyDisband,
body.mobile-client-ui #floatMarket #btnMarketList,
body.mobile-client-ui #charSelectPane #btnEnterGame,
body.mobile-client-ui #charCreatePane #createCharBtn,
body.mobile-client-ui #floatParty #btnPartyInvite:active:not(:disabled),
body.mobile-client-ui #floatParty #btnPartyDisband:active:not(:disabled),
body.mobile-client-ui #floatMarket #btnMarketList:active:not(:disabled),
body.mobile-client-ui #charSelectPane #btnEnterGame:active:not(:disabled),
body.mobile-client-ui #charCreatePane #createCharBtn:active:not(:disabled){
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;
  font-weight:900!important;text-shadow:0 1px 0 rgba(235,235,235,.68)!important;
}

/* 黃色新式按鈕改成較暖的橘黃色；PNG 只保留九宮格外框，中央以清晰漸層填色。 */
body.mobile-client-ui #floatParty #btnPartyInvite,
body.mobile-client-ui #floatParty #btnPartyDisband,
body.mobile-client-ui #floatMarket #btnMarketList,
body.mobile-client-ui #charSelectPane #btnEnterGame,
body.mobile-client-ui #charCreatePane #createCharBtn,
body.mobile-client-ui #floatFriends #btnFriendAdd{
  box-sizing:border-box!important;
  border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:var(--mobile-party-button)!important;
  border-image-slice:1!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:linear-gradient(180deg,#fff0a0 0%,#ffd45e 58%,#ffc446 100%)!important;
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
  text-shadow:0 1px 0 rgba(245,245,245,.72)!important;box-shadow:none!important;filter:none!important;transform:none!important;
}
body.mobile-client-ui #floatParty #btnPartyInvite:active:not(:disabled),
body.mobile-client-ui #floatParty #btnPartyDisband:active:not(:disabled),
body.mobile-client-ui #floatMarket #btnMarketList:active:not(:disabled),
body.mobile-client-ui #charSelectPane #btnEnterGame:active:not(:disabled),
body.mobile-client-ui #charCreatePane #createCharBtn:active:not(:disabled),
body.mobile-client-ui #floatFriends #btnFriendAdd:active:not(:disabled){
  border-image-source:var(--mobile-party-button-down)!important;
  background:linear-gradient(180deg,#ffe27a 0%,#ffc94b 60%,#ffb936 100%)!important;
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;transform:none!important;
}
body.mobile-client-ui #floatParty #btnPartyInvite:disabled,
body.mobile-client-ui #floatParty #btnPartyDisband:disabled,
body.mobile-client-ui #floatMarket #btnMarketList:disabled,
body.mobile-client-ui #charSelectPane #btnEnterGame:disabled,
body.mobile-client-ui #charCreatePane #createCharBtn:disabled,
body.mobile-client-ui #floatFriends #btnFriendAdd:disabled{opacity:.48!important;filter:grayscale(.65)!important}

/* 手機選角四個操作鈕：尺寸不變，只放大、加粗並拉開字距。 */
body.mobile-client-ui #charSelectPane .char-actions .btn-primary{
  font-size:16px!important;font-weight:900!important;letter-spacing:1.5px!important;
}

/* 基本頁左側隊伍資訊；固定在地圖層上方，不跟著地圖縮放或拖曳。 */
body.mobile-client-ui #mobileBasicPartyHud{
  position:absolute;z-index:24;left:var(--mobile-party-left,7px);top:var(--mobile-party-top,82px);display:flex;flex-direction:column;
  width:min(20vw,79px);gap:5px;padding:0;transform:none;
  pointer-events:auto;touch-action:none;user-select:none;cursor:grab;background:transparent;
}
body.mobile-client-ui #mobileBasicPartyHud[hidden]{display:none!important}
body.mobile-client-ui #mobileBasicPartyHud.is-dragging{cursor:grabbing}
body.mobile-client-ui .mobile-basic-party-member{display:grid;grid-template-rows:15px 7px;gap:1px;min-width:0}
body.mobile-client-ui .mobile-basic-party-member>b{
  min-width:0;overflow:hidden;color:#fff;text-overflow:ellipsis;white-space:nowrap;
  font:900 12px/15px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif;
  text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000;
}
body.mobile-client-ui .mobile-party-crown{
  display:inline-block;margin-right:3px;color:#ffd52e;font-size:14px;
  text-shadow:1px 0 #5d3900,-1px 0 #5d3900,0 1px #5d3900,0 -1px #5d3900;
}
body.mobile-client-ui .mobile-basic-party-hp{
  position:relative;box-sizing:border-box;display:block;width:100%;height:7px;padding:0;overflow:hidden;
  border-style:solid;border-width:1px;border-radius:0;
  border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAHCAYAAABHlm7oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABQSURBVDhPY2RgYPgPxMMGMHKxKv4Pz66Gcoc2WDm1lYGJnVkWyh36AOQXpv8Mv6DcoQ9AfmFiZGCDcoc+APmF6effx1Du0AcgvwyzUo6BAQArLxA5XaZd1gAAAABJRU5ErkJggg==');
  border-image-slice:1;border-image-width:1px;border-image-repeat:stretch;background:#05040d;
}
body.mobile-client-ui .mobile-basic-party-hp>i{
  position:relative;z-index:2;display:block;height:100%;border-radius:0;
  background:#ffbe2f url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAFCAYAAAAHQL+kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQBlSsOGwAAABxSURBVDhPY/yxgeM/AzpgQcIgQA4bGw0CGGwOMBMOkOXxyqECJig95AHjjwwG3DECAuhsGI2MQQAXHwSwyYFpYIijqwEBomlojAH5jB9qcHgEFqsgGqYRxiYWgwAuNgggi8MsRJZHBujiaPxhkrQYGAC7mQjVidI+iwAAAABJRU5ErkJggg==') center/100% 100% no-repeat;
  box-shadow:none;transition:width .16s linear;
}
body.mobile-client-ui .mobile-basic-party-member.offline{opacity:.48;filter:grayscale(1)}

/* 掛機設定「立即重新套用」使用橘黃色新式按鈕，保留原寬高。 */
body.mobile-client-ui #floatFarmConfig #btnSaveFarm{
  box-sizing:border-box!important;border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:var(--mobile-party-button)!important;
  border-image-slice:1!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:linear-gradient(180deg,#fff0a0 0%,#ffd45e 58%,#ffc446 100%)!important;
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
  text-shadow:0 1px 0 rgba(245,245,245,.72)!important;box-shadow:none!important;filter:none!important;transform:none!important;
}
body.mobile-client-ui #floatFarmConfig #btnSaveFarm:active:not(:disabled){
  border-image-source:var(--mobile-party-button-down)!important;
  background:linear-gradient(180deg,#ffe27a 0%,#ffc94b 60%,#ffb936 100%)!important;
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;transform:none!important;
}
body.mobile-client-ui #floatFarmConfig #btnSaveFarm:disabled{opacity:.48!important;filter:grayscale(.65)!important}

/* 組隊欄「離開隊伍」沿用橘黃色新式按鈕，尺寸由原本按鈕決定。 */
body.mobile-client-ui #floatParty #btnPartyLeave{
  box-sizing:border-box!important;border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:var(--mobile-party-button)!important;
  border-image-slice:1!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:linear-gradient(180deg,#fff0a0 0%,#ffd45e 58%,#ffc446 100%)!important;
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
  text-shadow:0 1px 0 rgba(245,245,245,.72)!important;box-shadow:none!important;filter:none!important;transform:none!important;
}
body.mobile-client-ui #floatParty #btnPartyLeave:active:not(:disabled){
  border-image-source:var(--mobile-party-button-down)!important;
  background:linear-gradient(180deg,#ffe27a 0%,#ffc94b 60%,#ffb936 100%)!important;
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;transform:none!important;
}
body.mobile-client-ui #floatParty #btnPartyLeave:disabled{opacity:.48!important;filter:grayscale(.65)!important}

/* 手機郵件欄：分類鈕與批次操作都限制在欄框內，不產生橫向捲動。 */
body.mobile-client-ui #floatMail,
body.mobile-client-ui #floatMail .mail-body{
  box-sizing:border-box!important;max-width:calc(100vw - 12px)!important;overflow-x:hidden!important;
}
body.mobile-client-ui #floatMail .mail-toolbar{
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;
  width:100%!important;min-width:0!important;gap:2px!important;overflow:hidden!important;
}
body.mobile-client-ui #floatMail .mail-tabs{
  box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;min-width:0!important;max-width:100%!important;gap:2px!important;overflow:hidden!important;
}
body.mobile-client-ui #floatMail .mail-tab{
  box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-width:0!important;height:30px!important;min-height:30px!important;margin:0!important;padding:0 1px!important;
  border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:var(--mobile-party-button)!important;border-image-slice:1!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:linear-gradient(180deg,#fff0a0 0%,#ffd45e 58%,#ffc446 100%)!important;
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;box-shadow:none!important;filter:none!important;transform:none!important;
  font:900 10px/1 "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;text-shadow:0 1px 0 rgba(245,245,245,.72)!important;
  white-space:nowrap!important;overflow:hidden!important;
}
body.mobile-client-ui #floatMail .mail-tab span{
  flex:0 0 auto!important;min-width:0!important;margin-left:2px!important;color:inherit!important;-webkit-text-fill-color:inherit!important;
  font-size:9px!important;text-align:center!important;
}
body.mobile-client-ui #floatMail .mail-tab.active,
body.mobile-client-ui #floatMail .mail-tab:active:not(:disabled){
  border-image-source:var(--mobile-party-button-down)!important;
  background:linear-gradient(180deg,#ffe27a 0%,#ffc94b 60%,#ffb936 100%)!important;
  color:#4b2100!important;-webkit-text-fill-color:#4b2100!important;transform:none!important;
}
body.mobile-client-ui #floatMail #mailCapacity{align-self:flex-end!important;line-height:14px!important}
body.mobile-client-ui #floatMail .mail-actions{
  box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;min-width:0!important;max-width:100%!important;gap:3px!important;overflow:hidden!important;
}
body.mobile-client-ui #floatMail .mail-actions input{
  box-sizing:border-box!important;grid-column:1 / -1!important;width:100%!important;min-width:0!important;max-width:100%!important;
}
body.mobile-client-ui #floatMail .mail-actions button{
  box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-width:0!important;max-width:100%!important;height:30px!important;min-height:30px!important;margin:0!important;padding:0 1px!important;
  border-style:solid!important;border-width:5px 13px!important;border-radius:0!important;
  border-image-source:var(--mobile-ice-button)!important;border-image-slice:5 13 fill!important;border-image-width:5px 13px!important;border-image-repeat:stretch!important;
  background:none!important;color:#586578!important;-webkit-text-fill-color:#586578!important;box-shadow:none!important;filter:none!important;transform:none!important;
  font:900 10px/1 "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;text-align:center!important;text-shadow:none!important;
  white-space:nowrap!important;overflow:hidden!important;
}
body.mobile-client-ui #floatMail .mail-actions button:active:not(:disabled){
  border-image-source:var(--mobile-ice-button-down)!important;background:none!important;color:#586578!important;-webkit-text-fill-color:#586578!important;
}
body.mobile-client-ui #floatMail .mail-actions button:disabled{opacity:.48!important;filter:grayscale(.65)!important}

/* 手機基本頁的隊伍 HP 完全沿用角色／屬性 HP 的內框與填色裁切規則。 */
body.mobile-client-ui .mobile-basic-party-hp{
  position:relative!important;box-sizing:border-box!important;display:block!important;width:100%!important;height:7px!important;
  margin:0!important;padding:0!important;overflow:hidden!important;
  border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAHCAYAAABHlm7oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABQSURBVDhPY2RgYPgPxMMGMHKxKv4Pz66Gcoc2WDm1lYGJnVkWyh36AOQXpv8Mv6DcoQ9AfmFiZGCDcoc+APmF6effx1Du0AcgvwyzUo6BAQArLxA5XaZd1gAAAABJRU5ErkJggg==')!important;
  border-image-slice:1 fill!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:#05040d!important;box-shadow:none!important;
}
body.mobile-client-ui .mobile-basic-party-hp>i{
  position:static!important;z-index:auto!important;display:block!important;height:100%!important;min-width:0!important;border-radius:0!important;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAFCAYAAAAHQL+kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQBlSsOGwAAABxSURBVDhPY/yxgeM/AzpgQcIgQA4bGw0CGGwOMBMOkOXxyqECJig95AHjjwwG3DECAuhsGI2MQQAXHwSwyYFpYIijqwEBomlojAH5jB9qcHgEFqsgGqYRxiYWgwAuNgggi8MsRJZHBujiaPxhkrQYGAC7mQjVidI+iwAAAABJRU5ErkJggg==') center/100% 100% no-repeat!important;
  box-shadow:none!important;transition:width .16s linear!important;
}

/* 擊殺獲得的經驗與掉落提示緊貼在地圖名稱正上方。 */
body.mobile-client-ui #view-basic #expGainLayer{
  z-index:29!important;left:4px!important;right:calc(var(--mobile-nav-width) + 7px)!important;
  bottom:calc(clamp(178px,38dvh,258px) + 3px)!important;max-width:none!important;max-height:150px!important;
  align-items:flex-start!important;overflow:hidden!important;
}
body.mobile-client-ui #view-basic #expGainLayer .exp-gain-toast{
  max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}

/* 手機共用的新式關閉鈕與淡紫提示按鈕。 */
body.mobile-client-ui{
  --mobile-panel-close:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAB6ElEQVQ4jc2UEXRjQRSGv90TuFAYKAwUBgIPFh4UBgKBQjAYWFhYCBYWCgsPFoKBQjBQCCw8DAQKhWAgMBAYCAwEHhQu9JwuJCfbSXpKC/vbnbnzzZ373zPwv+vT6ULzrK8AYR2ZL5Ysl4EYIgCucHhf0LvxFF8cAOZCMkYW6MseNnt4ZDKpSdsGubAYMYiYfY42WCv0ByWDr10ApPUXegacPTxSVVOkZTDGHUGnkpby7XtJf+AzYOtt0rwOTMY10jLMF2P0GYbD6XHfdxy3t13CuqGqaurfERGbXfT5bbB8WpF2DcY4VME5GP3q72HXlupnl7hRmt0+P+2UEFIGzJ7c7d69pqTYywKAyWSAawuqIAJhpcSojO/r45mibZhMB0dOVmGMEfOmZ8PhDF4OsKDEbQ4DSNsmi7MeApkJ/trSKKSt0jSKuTzNPldWoXMug1WjHnHdEIOiz2CMcPejnwHsVT4FGdCXBar7J1SjHmGtpATj+5rRqCZuFOtyqGt/4HJ5XWKMAAcDNnnPxuOaGBS5OFRnhaLIgZnLy6f0Ol8seVxEQPhIItDrlXjv8B37/mAD9G48grBaJdJO34XZS8F3Crx3Z3tnn0NYNfvPYZMIIRE36Tga9srg2paydLiDGUVpzhj/VH8AYDHGUZ18jxgAAAAASUVORK5CYII=');
  --mobile-panel-close-down:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAB8UlEQVQ4jc2UEXgcQRTHf+238ODgwcHAwUBgIbBQGAgUAoeLB4VAYPGgWAgUAoXDw0DgIHB4EFgILC4UBgILgYGDhcBAvi+FTS+Zu6ZU6N9m5r3fvPm/9w387/qwv9E/xmcA/7Njc9vQNJ7OdwDY3OJczvTUkR9bAHQkCSNZxKcBtrquWS7XhIceGRlUFBEdYmKPMUI5K5h9+QyAZK/QA+Dquubi4grJFFW7A+1LssjZeUE5cwkwexu0WXuWizWSKWU5Q0Ro6pb4FIkRdKxU1RRrhfl8xfqmQ8QkF318u2juWsK2R3Xwx1pl/rWETFAVqmpKUQg2FwDCNuJ9SIBJhU3rkZFBRGkbj3M5xgiXlyXxEYwV1Aibtd/ldPcpMKmw6zr0t/nAYrEmbCMAOhbMRFh8r1kum11OeOjfBwIHTZAMRAQR6LdQ134/5X2gtTY5nM9LjBXskUAmyAiuVhU8xV2MmaQFJEBX5MQ4PKEsHXYyPPPi24bq/Grw0cDqpnot4ugvXS4+FagOHVQV7LGw+FHTtoPxZ7MlIYCOX6ozQp6nwGSwm7vwvLltqG87QPbtSSQC02mBcxZ3Yv482ADTU4cgtG3YdXhfZiy4kxzn7MHZwefg2374HO4D3ge6+7AbDTNR7JGhKCz2pRl5oQeMf6pfUYCrGj+hdxoAAAAASUVORK5CYII=');
  --mobile-dialog-button:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAOCAMAAAB5Au6AAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEJQTFRFAAAA2NDw2Nj44OD46OT46Oj44Nz42NT4+Pz4+Pj40Mzw2NTw0NDwyMjwyMTowMDoyMDo+PT4wLzouLjgwLjg0MjwhORVjAAAABZ0Uk5TAP///////////////////////////1SBjaMAAACGSURBVHicfVHLDoMwDLN5VCuFSfv/j9yBMkafSzk3S6Rc7DiyQ4DQqwoqLdXBBgaZAo2Tts8cLblk/ULKjpwHFc+GBykXSuwTVuSTnEZcisKG6m8FjfBk2cWhseHTJ7yQ9uYiOkVhRvAth4fmw9QLXI+lakmZ8t5a1HD2231IOiXqv89yHj9QhihFS3JrbQAAAABJRU5ErkJggg==');
  --mobile-dialog-button-down:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAOCAMAAAB5Au6AAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEVQTFRFAAAA2NDw0MzwyMjwyMTo0Mjw0NDwwLzowLjgwMDoyMDo2NTwuLjgyMjo6OT44OD4+Pz4+PT42Nj44Nz46Oj4+Pj42NT4GISiMgAAABd0Uk5TAP////////////////////////////+wi3PfAAAAkElEQVR4nH2R3QrDIAyFc5RI3S4GHXv/N1wZhcL83am3i40gwvmSk0SIQObRqfLAYrpD5k0tgG+DSNLiwWQNBaZNit9lV8BFyXaFSBOW8F5aMTvUe3cbgSAl2zM8pO20gFRbv+kAOMdymMBaB6Aa7RbO8G/mP+e6fBQhr27S4wn4saNXzeFfTPAbV335WZrkB8mCLCc/7MfGAAAAAElFTkSuQmCC');
}

/* 「基本」選單開啟的浮動欄位：右上角只顯示指定 20×17 關閉圖。 */
body.mobile-client-ui #app .float-panel .float-header .float-close[data-close],
body.mobile-client-ui #app #floatAttrs>.float-header .float-close[data-close],
body.mobile-client-ui .float-panel .float-header .float-close[data-close],
body.mobile-client-ui #mobileMoreSheet [data-mobile-close]{
  box-sizing:border-box!important;display:block!important;flex:0 0 20px!important;
  width:20px!important;min-width:20px!important;max-width:20px!important;height:17px!important;min-height:17px!important;max-height:17px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent var(--mobile-panel-close) center/20px 17px no-repeat!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;font-size:0!important;line-height:0!important;
  box-shadow:none!important;filter:none!important;transform:none!important;image-rendering:pixelated!important;
}
body.mobile-client-ui #app .float-panel .float-header .float-close[data-close]:active,
body.mobile-client-ui #app #floatAttrs>.float-header .float-close[data-close]:active,
body.mobile-client-ui .float-panel .float-header .float-close[data-close]:active,
body.mobile-client-ui #mobileMoreSheet [data-mobile-close]:active{
  background-image:var(--mobile-panel-close-down)!important;transform:none!important;
}
body.mobile-client-ui #app #floatGuild .guild-close-hotspot[data-close]{
  background:transparent var(--mobile-panel-close) center/20px 17px no-repeat!important;
  box-shadow:none!important;filter:none!important;image-rendering:pixelated!important;
}
body.mobile-client-ui #app #floatGuild .guild-close-hotspot[data-close]:active{
  background-image:var(--mobile-panel-close-down)!important;
}

/* 物品說明、黑底確認／取消、數量與邀請提示皆使用同一組淡紫九宮格按鈕。 */
body.mobile-client-ui .item-desc-pin .pin-foot .pin-ok,
body.mobile-client-ui .friend-invite-dialog button,
body.mobile-client-ui .party-invite-dialog button,
body.mobile-client-ui .player-trade-invite button,
body.mobile-client-ui .equipment-ability-notice-box button{
  box-sizing:border-box!important;border-style:solid!important;border-width:4px 8px!important;border-radius:0!important;
  border-image-source:var(--mobile-dialog-button)!important;border-image-slice:4 8 fill!important;border-image-width:4px 8px!important;border-image-repeat:stretch!important;
  background:none!important;color:#44536f!important;-webkit-text-fill-color:#44536f!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
  text-align:center!important;text-shadow:0 1px 0 rgba(255,255,255,.72)!important;
  box-shadow:none!important;filter:none!important;transform:none!important;image-rendering:pixelated!important;
}
body.mobile-client-ui .item-desc-pin .pin-foot .pin-ok:active:not(:disabled),
body.mobile-client-ui .friend-invite-dialog button:active:not(:disabled),
body.mobile-client-ui .party-invite-dialog button:active:not(:disabled),
body.mobile-client-ui .player-trade-invite button:active:not(:disabled),
body.mobile-client-ui .equipment-ability-notice-box button:active:not(:disabled){
  border-image-source:var(--mobile-dialog-button-down)!important;background:none!important;
  color:#44536f!important;-webkit-text-fill-color:#44536f!important;transform:none!important;
}
body.mobile-client-ui .item-desc-pin .pin-foot .pin-ok:disabled,
body.mobile-client-ui .friend-invite-dialog button:disabled,
body.mobile-client-ui .party-invite-dialog button:disabled,
body.mobile-client-ui .player-trade-invite button:disabled,
body.mobile-client-ui .equipment-ability-notice-box button:disabled{opacity:.48!important;filter:grayscale(.65)!important}

/* 組隊 HP 單向比照原本的屬性欄 HP；不覆寫基本頁與屬性欄本身。 */
body.mobile-client-ui #floatParty .party-hp-bar,
body.mobile-client-ui .mobile-basic-party-hp{
  position:relative!important;isolation:isolate!important;box-sizing:border-box!important;height:7px!important;padding:0!important;overflow:hidden!important;
  border-style:solid!important;border-width:1px!important;border-radius:0!important;
  border-image-source:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAHCAYAAABHlm7oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABQSURBVDhPY2RgYPgPxMMGMHKxKv4Pz66Gcoc2WDm1lYGJnVkWyh36AOQXpv8Mv6DcoQ9AfmFiZGCDcoc+APmF6effx1Du0AcgvwyzUo6BAQArLxA5XaZd1gAAAABJRU5ErkJggg==')!important;
  border-image-slice:1 fill!important;border-image-width:1px!important;border-image-repeat:stretch!important;
  background:#05040d!important;box-shadow:none!important;
}
body.mobile-client-ui #floatParty .party-hp-bar>i,
body.mobile-client-ui .mobile-basic-party-hp>i{
  position:absolute!important;z-index:3!important;left:0!important;top:0!important;bottom:0!important;display:block!important;height:auto!important;min-width:0!important;border-radius:0!important;
  background-color:transparent!important;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAFCAYAAAAHQL+kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQBlSsOGwAAABxSURBVDhPY/yxgeM/AzpgQcIgQA4bGw0CGGwOMBMOkOXxyqECJig95AHjjwwG3DECAuhsGI2MQQAXHwSwyYFpYIijqwEBomlojAH5jB9qcHgEFqsgGqYRxiYWgwAuNgggi8MsRJZHBujiaPxhkrQYGAC7mQjVidI+iwAAAABJRU5ErkJggg==')!important;
  background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;
  box-shadow:none!important;transition:width .16s linear!important;
}

/* 選角「進入遊戲」改用新式冰藍按鈕，維持原本按鈕尺寸。 */
body.mobile-client-ui #charSelectPane #btnEnterGame{
  box-sizing:border-box!important;border-style:solid!important;border-width:5px 13px!important;border-radius:0!important;
  border-image-source:var(--mobile-ice-button)!important;border-image-slice:5 13 fill!important;border-image-width:5px 13px!important;border-image-repeat:stretch!important;
  background:none!important;color:#44536f!important;-webkit-text-fill-color:#44536f!important;
  font-family:"Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;font-weight:900!important;
  text-shadow:0 1px 0 rgba(255,255,255,.72)!important;box-shadow:none!important;filter:none!important;transform:none!important;
}
body.mobile-client-ui #charSelectPane #btnEnterGame:active:not(:disabled){
  border-image-source:var(--mobile-ice-button-down)!important;background:none!important;
  color:#44536f!important;-webkit-text-fill-color:#44536f!important;transform:none!important;
}

/* 說明／提示按鈕按原始 32×14 PNG 放大 1.1 倍；確認與取消明確使用同一樣式。 */
body.mobile-client-ui :is(#itemDescPin,#banNoticePanel,#farmSellBanPanel,#gameConfirm,#manufactureConfirm,#sellQtyDialog) .pin-foot .pin-ok,
body.mobile-client-ui .friend-invite-dialog button,
body.mobile-client-ui .party-invite-dialog button,
body.mobile-client-ui .player-trade-invite button,
body.mobile-client-ui .player-trade-confirm-dialog button,
body.mobile-client-ui .equipment-ability-notice-box button{
  box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;min-width:35.2px!important;max-width:none!important;
  height:15.4px!important;min-height:15.4px!important;max-height:15.4px!important;margin:0!important;padding:0 6px!important;
  border:0!important;border-image:none!important;border-radius:0!important;
  background:transparent var(--mobile-dialog-button) center/100% 15.4px no-repeat!important;
  color:#344b86!important;-webkit-text-fill-color:#344b86!important;
  font:900 10px/15.4px "Arial Rounded MT Bold","Microsoft JhengHei UI",sans-serif!important;
  text-align:center!important;white-space:nowrap!important;text-shadow:0 1px 0 rgba(255,255,255,.78)!important;
  box-shadow:none!important;filter:none!important;transform:none!important;image-rendering:auto!important;
}
body.mobile-client-ui :is(#itemDescPin,#banNoticePanel,#farmSellBanPanel,#gameConfirm,#manufactureConfirm,#sellQtyDialog) .pin-foot .pin-ok:active:not(:disabled),
body.mobile-client-ui .friend-invite-dialog button:active:not(:disabled),
body.mobile-client-ui .party-invite-dialog button:active:not(:disabled),
body.mobile-client-ui .player-trade-invite button:active:not(:disabled),
body.mobile-client-ui .player-trade-confirm-dialog button:active:not(:disabled),
body.mobile-client-ui .equipment-ability-notice-box button:active:not(:disabled){
  background-image:var(--mobile-dialog-button-down)!important;color:#344b86!important;-webkit-text-fill-color:#344b86!important;transform:none!important;
}