/* ===== 直式手機精簡 HUD（js/hud2.js）=====
   目標：畫面中間（大約上下各留 22% 以外）不放任何可以點的東西，角色往上走時不會一直點到介面。
   上：一排「頭像＋生命／經驗小條｜金幣、鑽石｜設定」，下面一行地圖小標籤（含首領狀態）、一行主線小膠囊、隊友小頭像；小地圖縮小放右上角。
   下：聊天一行 → 選單鈕一排（背包、任務、冒險、公會、更多），技能圈在右下，藥水是技能圈裡的圓鈕。
   只在「直式（或高度超過 540 的橫式）而且不是桌機（html.pc）」時生效；橫式手機（ui2.css）和桌機（pc.css）維持原本版面。
   條件寫成 (orientation:portrait),(min-height:541px)，等於 skill.css 的 not ((orientation:landscape) and (max-height:540px))，但舊版 Safari 也看得懂。
   元素 id 全部沿用（#quest、#party、#potb、#xp、#bBoss、#chatbar、#rcol 內的鈕…），新手引導照舊找得到。 */
#mchip,#more,#moreDr,#ptb{display:none}
@media (orientation:portrait),(min-height:541px){
/* ---------- 上排：主角卡 ---------- */
html:not(.pc) #hud .card{left:8px;top:calc(var(--sat) + 6px);width:158px;height:42px;padding:4px 8px 0 48px;border-radius:21px 14px 14px 21px;border-width:1.5px}
html:not(.pc) #hud .card .ava{left:-4px;top:-4px;width:48px;height:49px}
html:not(.pc) #hud .card .ava canvas{left:5px;top:4px;width:38px;height:38px}
html:not(.pc) #hud .card .lvb{left:27px;top:24px;width:24px;height:21px;font-size:9.5px;line-height:18px}
html:not(.pc) #hud .card .nm{font-size:11px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54px}
html:not(.pc) #hud .card .nm small{display:none}
html:not(.pc) #hud .card .pw{position:absolute;right:8px;top:4px;margin:0;font-size:0;line-height:13px;white-space:nowrap}
html:not(.pc) #hud .card .pw:before{content:"戰力";font-size:8.5px;margin-right:2px;opacity:.85}
html:not(.pc) #hud .card .pw b{font-size:10.5px;color:#fff}
html:not(.pc) #hud .card .bar{height:6px;margin-top:3px}
html:not(.pc) #hud .card .bar:after{display:none}
html:not(.pc) #hud .card .bar>i{border:0;border-radius:99px;background:linear-gradient(#ff9a9a,#e8384f)}
html:not(.pc) #hud .card #xp{position:relative;left:auto;right:auto;bottom:auto;height:5px;margin-top:2px;border-radius:99px;background:#161a3a}
html:not(.pc) #hud .card #xp:after{display:none}
html:not(.pc) #hud .card #xp i{border:0;border-radius:99px;background:linear-gradient(#bdf0ff,#3f9fe8)}
html:not(.pc) #hud .card #xp span{display:none}
html:not(.pc) #hud .card .dot{right:-3px;top:-3px}
/* 金幣、鑽石疊成兩行小膠囊，旁邊設定鈕 */
html:not(.pc) #hud .res{right:8px;top:calc(var(--sat) + 6px);gap:5px}
html:not(.pc) #hud .res>div{gap:3px}
html:not(.pc) #hud .res .pill{height:20px;min-width:82px;font-size:11.5px;padding:0 6px 0 2px;border-width:1.5px;gap:4px}
html:not(.pc) #hud .res .coin,html:not(.pc) #hud .res .gem{width:16px;height:16px;vertical-align:-3px}
html:not(.pc) #hud .res .plus{width:13px;height:13px;line-height:12px;font-size:11px}
html:not(.pc) #hud #bSet{width:40px;height:40px}html:not(.pc) #hud #bSet .ic{width:27px;height:27px}
/* ---------- 地圖小標籤（取代大橫幅；首領狀態在右邊的小圓牌） ---------- */
html:not(.pc) #mchip{position:absolute;left:8px;top:calc(var(--sat) + 56px);max-width:calc(100vw - 120px);height:22px;display:flex;align-items:center;gap:5px;padding:0 4px 0 8px;border-radius:11px;
  background:rgba(22,18,46,.74);border:1.5px solid rgba(246,201,90,.8);box-shadow:0 0 0 1px rgba(58,38,22,.6);font-size:11.5px;font-weight:900;white-space:nowrap;color:#fff;cursor:pointer}
#mchip b{overflow:hidden;text-overflow:ellipsis;min-width:0}#mchip small{flex:none;font-size:10px;font-weight:800;color:#ffe38a}
#mchip i{flex:none;font-style:normal;font-size:10px;line-height:15px;height:15px;padding:0 6px 0 2px;border-radius:8px;background:rgba(255,255,255,.12);color:#ffd9a8;display:flex;align-items:center;gap:3px}
#mchip i:empty{display:none}
#mchip i:before{content:"王";width:13px;height:13px;border-radius:50%;background:#5a3a6a;color:#fff;font-size:8.5px;line-height:13px;text-align:center}
#mchip i.on{background:#e8384f;color:#fff;animation:dp 1.2s infinite}#mchip i.on:before{background:#fff;color:#e8384f}
#mchip:active{transform:translateY(1px)}
body.inmode #mchip i{display:none}
/* ---------- 主線：一行小膠囊，點一下展開，再點一下前往；5 秒後自己收起 ---------- */
html:not(.pc) #hud #quest{left:8px;top:calc(var(--sat) + 82px);width:auto;max-width:calc(100vw - 120px);height:22px;padding:0 9px 0 3px;border-radius:11px;border-width:1.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;line-height:19px}
html:not(.pc) #hud #quest b{display:inline-block;font-size:9.5px;line-height:15px;padding:0 6px;margin-right:4px;border-radius:8px;background:#f6c95a;color:#4a2a00;vertical-align:1px}
html:not(.pc) #hud #quest:not(.ok):not(.x2) b{font-size:0}html:not(.pc) #hud #quest:not(.ok):not(.x2) b:before{content:"主線";font-size:9.5px}
html:not(.pc) #hud #quest.ok b{background:#9dffb0;color:#1d4a2a}
html:not(.pc) #hud #quest.x2{height:auto;white-space:normal;line-height:1.4;padding:4px 9px 6px;border-radius:11px;z-index:4}
html:not(.pc) #hud #quest.x2 b{display:block;width:max-content;margin:0 0 2px}
html:not(.pc) #hud #quest.x2:after{content:"再點一下前往 ›";display:block;font-size:10px;color:#ffe38a;margin-top:2px}
html:not(.pc) #hud #quest.x2.ok:after{content:"再點一下領獎 ›"}
/* ---------- 隊伍：小頭像一排，左邊的組隊鈕可以收合 ---------- */
html:not(.pc) #ptb{display:block;position:absolute;left:8px;top:calc(var(--sat) + 108px);width:28px;height:28px;border-radius:50%;padding:0;border:1.5px solid #f6c95a;background:#232955;box-shadow:0 0 0 1px #3a2616}
#ptb i{position:absolute;inset:2px;background:url(../art/ui/icons.webp) 75% 100%/500% 400% no-repeat;border-radius:50%}
#ptb b{position:absolute;right:-5px;bottom:-4px;min-width:14px;height:14px;border-radius:7px;background:#4fc97a;color:#fff;font-size:9.5px;line-height:14px;text-align:center;padding:0 2px;display:none}
body.h2pc #ptb b{display:block}
html:not(.pc) body:not(:has(#party .pm img)) #ptb{display:none}
html:not(.pc) #hud #party{left:8px;top:calc(var(--sat) + 108px);flex-direction:row;gap:7px;pointer-events:auto}      /* main.css 把 #party 設成不能點；直式在上方區塊，可以點開隊伍面板 */
html:not(.pc) #hud:has(#party .pm img) #party{left:42px}
html:not(.pc) body.h2pc #hud #party:has(.pm img){display:none}
html:not(.pc) #hud #party .pm{width:28px;height:28px;padding:0;border-radius:50%;border-width:1.5px}
html:not(.pc) #hud #party .pm .fc{left:-1.5px!important;top:-1.5px!important;width:28px!important;height:28px!important;border-width:1.5px}
html:not(.pc) #hud #party .pm .n{display:none}
#party .pm.dead .fc{filter:grayscale(1) brightness(.6)}
html:not(.pc) #hud #party .pm .bar{position:absolute;left:-1px;right:-1px;bottom:-8px;height:5px;margin:0;box-shadow:0 0 0 1px #1b1430;background:#2a2140}
html:not(.pc) #hud #party .pm:not(:has(img)){width:auto;height:22px;padding:0 9px!important;border-radius:11px;font-size:11px;line-height:19px!important}
/* ---------- 公告跑馬燈：移到上方區塊下緣，只在有公告時出現（不能點） ---------- */
html:not(.pc) #hud #tick{--tw:calc(100vw - 16px);left:8px;top:calc(var(--sat) + 142px);transform:none;width:var(--tw);height:18px;font-size:11px}
html:not(.pc) #hud #tick span{line-height:18px}
/* ---------- 舊的地圖橫幅：收起；首領／出發鈕改放左下（拇指範圍），首領出現時只亮幾秒，之後看地圖標籤 ---------- */
html:not(.pc) #hud #stage{left:8px;top:auto;bottom:calc(var(--sab) + 92px);transform:none;width:auto;text-align:left}
html:not(.pc) #hud #stage #stn,html:not(.pc) #hud #stage .bar{display:none}
html:not(.pc) #hud #bBoss{margin:0;height:30px;line-height:28px;font-size:12.5px}
html:not(.pc) #hud #bBoss.h2off{display:none}
html:not(.pc) body.inmode #hud #bBoss{position:static;width:auto;height:30px;line-height:28px;padding:0 6px;border-width:0 18px;border-image-width:0 18px;font-size:12.5px}
html:not(.pc) #hud #cmd{left:8px;top:auto;bottom:calc(var(--sab) + 128px)}
/* ---------- 下方：聊天一行、選單一排 ---------- */
html:not(.pc) #hud #toasts{left:8px;bottom:calc(var(--sab) + 130px)}html:not(.pc) #hud .toast{max-width:min(64vw,calc(100vw - 196px))}      /* 不要蓋到技能圈左上的藥水鈕 */
html:not(.pc) #hud #chatbar{left:8px;bottom:calc(var(--sab) + 58px);width:min(216px,calc(100vw - 176px));height:26px}
/* 表情輪／坐下鈕（其他人做的 #emoteBtn、#sitBtn）：放在聊天列左邊，聊天列往右讓位 */
html:not(.pc) #hud>#emoteBtn,html:not(.pc) body>#emoteBtn,html:not(.pc) #hud>#sitBtn,html:not(.pc) body>#sitBtn{position:fixed;left:8px;right:auto;top:auto;bottom:calc(var(--sab) + 57px);width:28px;height:28px;margin:0;z-index:2}
html:not(.pc) body:has(#emoteBtn) #sitBtn{left:40px}
html:not(.pc) body:has(#emoteBtn) #hud #chatbar,html:not(.pc) body:has(#sitBtn) #hud #chatbar{left:40px;width:min(192px,calc(100vw - 198px))}
html:not(.pc) body:has(#emoteBtn):has(#sitBtn) #hud #chatbar{left:72px;width:min(160px,calc(100vw - 230px))}
html:not(.pc) #hud .btns{left:8px;bottom:calc(var(--sab) + 8px);gap:4px}
html:not(.pc) #hud .btns .mb{width:41px;height:41px}
html:not(.pc) #hud .btns .mb i{width:31px;height:31px}
html:not(.pc) #hud .btns .mb u{font-size:9.5px;bottom:-4px}
html:not(.pc) #hud .btns .mb .dot{right:-4px;top:-4px;width:12px;height:12px}
/* 更多：商城、福利、戰令、信箱、好友、組隊收進這個抽屜（紅點合併顯示在「更多」上） */
html:not(.pc) #more{display:block}
#more i{position:relative;background:none}
#more i:before,#more i:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#7a4a14;box-shadow:-8px 0 0 #7a4a14,8px 0 0 #7a4a14}
#more i:after{display:none}
#more.on{filter:brightness(1.15)}
html:not(.pc) #moreDr{display:block;position:absolute;left:8px;bottom:calc(var(--sab) + 60px);z-index:30;padding:10px 10px 14px;border-radius:16px;background:rgba(27,20,48,.95);border:2px solid #f6c95a;box-shadow:0 0 0 1.5px #3a2616,0 6px 16px rgba(0,0,0,.45)}
html:not(.pc) #moreDr:not(.on){display:none}
#moreDr>b{display:block;font-size:11px;color:#ffe38a;margin:0 0 8px 2px}
html:not(.pc) #moreDr #rcol{position:static;display:grid;grid-template-columns:repeat(4,46px);gap:16px 12px;pointer-events:auto}
html:not(.pc) #moreDr .rb{width:46px;height:46px}html:not(.pc) #moreDr .rb .ic{width:32px;height:32px}
html:not(.pc) body.inmode #more{display:none}
/* ---------- 技能圈：往下靠（經驗條已經移到頭像卡裡），矮的螢幕整圈縮小一點 ---------- */
html:not(.pc) #hud .sk{bottom:calc(var(--sab) + 14px)}
/* 藥水：技能圈裡的圓鈕。點一下喝、長按或點「+」買；冷卻時有轉圈和秒數。
   實際的 right/bottom 由 js/auto8.js 依「最後一個看得到的技能格」寫在 inline style（技能少時不會浮在空中）；這裡的 150/166 是 6 格全滿時的位置 */
html:not(.pc) #hud .sk #potb{position:absolute;right:150px;bottom:166px;width:44px;height:44px;border-radius:50%;padding:0;border-width:2px;display:block}
html:not(.pc) #hud .sk #potb .pi{position:absolute;left:5px;top:4px;width:30px;height:30px}
html:not(.pc) #hud .sk #potb b{position:absolute;right:-6px;bottom:-5px;min-width:18px;height:16px;padding:0 3px;border-radius:8px;background:#2a1b3d;border:1.5px solid #9dffb0;font-size:10px;line-height:13px;text-align:center;margin:0}
html:not(.pc) #hud .sk #potb.low b{border-color:#ff6b7a}
html:not(.pc) #hud .sk #potb u{border-radius:50%}
html:not(.pc) #hud .sk #potb s{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;font-size:16px;text-decoration:none;text-shadow:0 1px 3px #000,0 0 2px #000}
html:not(.pc) #hud .sk #potb .pp{position:absolute;left:-7px;top:-6px;margin:0;width:18px;height:18px;line-height:15px;font-size:14px}
html:not(.pc) #hud .sk #potb .pp:after{content:"";position:absolute;left:-9px;top:-9px;right:-5px;bottom:-5px;border-radius:50%}      /* 「+」的可點範圍放大到約 32px */
@media (max-height:760px){html:not(.pc) #hud .sk{zoom:.9}}
@media (max-height:680px){html:not(.pc) #hud .sk{zoom:.85}}
@media (max-width:380px){html:not(.pc) #hud .btns .mb{width:39px;height:39px}html:not(.pc) #hud .btns .mb i{width:29px;height:29px}html:not(.pc) #hud .card{width:150px}}
}
/* 桌機：藥水膠囊（js/potion.js 改成有圖示＋「+」之後變寬一點）往下挪，不要壓到「好友」鈕的字 */
html.pc #hud #potb{bottom:calc(var(--sab) + 284px)}