/* Mobile-only layout patch. Desktop and game logic untouched. */
@media screen and (max-width:700px) and (orientation:portrait){
 body:not(.sv) #top{height:92px!important;overflow:visible}
 body:not(.sv) #top .hud1{left:0!important;right:0!important;width:100%!important;box-sizing:border-box;gap:2px!important}
 body:not(.sv) #top .hud1 .hcap{width:45px!important;background-size:100% 100%}
 body:not(.sv) #top .hud1 .hcap #lv{left:27px!important}
 body:not(.sv) #top .hud1 .hslot{flex:1 1 0!important;width:auto!important;min-width:0!important}
 body:not(.sv) #top .hud1 .hslot.xp{flex:1.5 1 0!important}
 body:not(.sv) #top .hud1 #jxHudRank{flex:0 0 45px!important;min-width:0!important;font-size:9px!important}
 body:not(.sv) #top .hud1 .hslot span{font-size:8px!important;overflow:hidden;text-overflow:clip}
 body:not(.sv) #top .hname{left:6px!important;top:calc(20px + var(--safe-t,0px))!important;max-width:calc(100% - 166px)!important}
 body:not(.sv) #top .stg{right:3px!important;top:calc(20px + var(--safe-t,0px))!important;transform:scale(.88);transform-origin:top right}
 body:not(.sv) #jxActs,body:not(.sv).jxthumb #jxActs{top:calc(66px + var(--safe-t,0px))!important;left:4px!important;width:min(252px,calc(100% - 142px))!important;max-width:none!important;box-sizing:border-box}
 body:not(.sv) #jxMainActs,body:not(.sv) #jxExtraActs{grid-template-columns:repeat(6,minmax(0,1fr))!important;width:100%!important;gap:0!important}
 body:not(.sv) #jxActs .rnd{width:100%!important;min-width:0!important;box-sizing:border-box!important;overflow:hidden}
 body:not(.sv) #jxActs .rnd span{width:100%!important;min-width:0!important;font-size:9px!important;line-height:10px!important;overflow-wrap:anywhere}
 body:not(.sv) #jxActsToggle{grid-column:6!important}
 body:not(.sv) #jxActs.actionsCollapsed{width:min(252px,calc(100% - 142px))!important}
}
@media screen and (max-width:390px) and (orientation:portrait){
 body:not(.sv) #jxActs,body:not(.sv) #jxActs.actionsCollapsed{width:calc(100% - 132px)!important}
 body:not(.sv) #jxActs .rnd span{font-size:8px!important}
 body:not(.sv) #top .hud1 #jxHudRank{flex-basis:40px!important}
}

/* Mobile refinement v2: top actions closer to HUD, without touching PC. */
@media (max-width:700px) and (orientation:portrait) and (pointer:coarse){
 body:not(.sv) #jxActs,body:not(.sv).jxthumb #jxActs{top:calc(43px + var(--safe-t,0px))!important;transform:none!important;z-index:42!important}
 body:not(.sv) #jxActs .rnd span{line-height:11px!important}
 body:not(.sv) #bb.touchbar #pad .pbtn{z-index:3!important}
 body:not(.sv) #bb.touchbar .jxDockSlot{z-index:4!important}
 body:not(.sv) #bb.touchbar #tabs .tray{z-index:3!important}
}

/* V3 - portrait mobile only: buffs above action icons, actions above auto switches. */
@media screen and (max-width:700px) and (orientation:portrait) and (pointer:coarse){
 body:not(.sv) #jxActs.acts,body:not(.sv).jxthumb #jxActs.acts{top:calc(101px + var(--safe-t,0px))!important;left:6px!important;width:min(282px,calc(100% - 12px))!important;max-width:calc(100% - 12px)!important;grid-template-columns:repeat(5,minmax(0,44px)) 32px!important;column-gap:3px!important;z-index:43!important;transform:none!important}
 body:not(.sv) #jxActs .rnd span{font-size:9px!important;line-height:10px!important}
 body:not(.sv) #jxActs.actionsCollapsed{width:44px!important;grid-template-columns:44px!important}
 /* Let the existing game toolbar composer own the positions, avoid extra overlays. */
 body:not(.sv) #bb.touchbar #pad .pbtn,body:not(.sv) #bb.touchbar #tabs .tray{transform:none!important;box-sizing:border-box!important}
 body:not(.sv) #bb.touchbar #pad .pbtn{margin:0!important;padding:0!important}
 body:not(.sv) #bb.touchbar #tabs .tray{margin:0!important;padding:0!important}
}

/* V4: mobile HUD compact, aligned directly below HP/MP; desktop unchanged. */
@media screen and (max-width:700px) and (orientation:portrait){
 body:not(.sv) #jxActs.acts,body:not(.sv).jxthumb #jxActs.acts{
  top:calc(75px + var(--safe-t,0px))!important;
  left:6px!important;width:min(282px,calc(100% - 146px))!important;
  max-width:calc(100% - 146px)!important;
  transform:none!important;z-index:43!important;
 }
 body:not(.sv) #jxActs #jxMainActs,body:not(.sv) #jxActs #jxExtraActs{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:0!important;width:100%!important;
 }
 body:not(.sv) #jxActs .rnd span{font-size:9px!important;line-height:11px!important}
 body:not(.sv) #battle #jxStat.jxAutoSwitch{
  top:calc(151px + var(--safe-t,0px))!important;left:6px!important;
  transform:none!important;max-width:none!important;z-index:45!important;
 }
 body:not(.sv) #battle #jxAutoLootSwitch.jxAutoSwitch{
  top:calc(185px + var(--safe-t,0px))!important;left:6px!important;
  transform:none!important;max-width:none!important;z-index:45!important;
 }
}

/* V5 - small vertical adjustments only on portrait mobile. */
@media screen and (max-width:700px) and (orientation:portrait){
 body:not(.sv) #jxActs.acts,body:not(.sv).jxthumb #jxActs.acts{top:calc(87px + var(--safe-t,0px))!important}
 body:not(.sv) #battle #jxStat.jxAutoSwitch{top:calc(165px + var(--safe-t,0px))!important}
 body:not(.sv) #battle #jxAutoLootSwitch.jxAutoSwitch{top:calc(199px + var(--safe-t,0px))!important}
}

/* V6: bring auto switches close to shop icons; mini buffs slightly lower. */
@media screen and (max-width:700px) and (orientation:portrait){
 body:not(.sv) #battle #jxStat.jxAutoSwitch{top:calc(120px + var(--safe-t,0px))!important}
 body:not(.sv) #battle #jxAutoLootSwitch.jxAutoSwitch{top:calc(154px + var(--safe-t,0px))!important}
}

/* V7: align map toggle tightly beside stage panel on mobile only. */
@media screen and (max-width:700px) and (orientation:portrait){
 body:not(.sv) #jxMini.mtg{
  display:block!important;
  transform:translateX(20px)!important;
  margin-top:0!important;
  z-index:46!important;
 }
}

/* V8: slight spacing from the stage panel, lowered to match its bottom inset. */
@media screen and (max-width:700px) and (orientation:portrait){
 body:not(.sv) #jxMini.mtg{transform:translate(14px,5px)!important}
}

/* V9: align the map icon bottom edge with the Lam Du Quan panel bottom. */
@media screen and (max-width:700px) and (orientation:portrait){
 body:not(.sv) #jxMini.mtg{transform:translate(14px,-1px)!important}
}

/* V10: activity row stays visible; hotkeys 1-9 remain separate. */
@media screen and (max-width:700px) and (orientation:portrait){
 #bb.touchbar #tabs .tray,#bb.touchbar .jxDockSlot{z-index:5!important}
 #bb.touchbar .jxDockSlot[hidden]{display:none!important}
 #bb.touchbar .jxDockSlot i{max-width:100%;max-height:100%}
}

/* V11: compact third row without clipped icons; PC untouched. */
@media screen and (max-width:700px) and (orientation:portrait) and (pointer:coarse){
 #bb.touchbar #tabs .tray{width:var(--activity-cell,33px)!important;height:var(--activity-cell,33px)!important}
 #bb.touchbar .jxDockSlot{border:2px solid transparent!important;border-image:url(v2/cell.png) 3/3px stretch!important;background-color:#08110d!important;padding:1px!important}
 #bb.touchbar .jxDockSlot i{width:90%!important;height:90%!important;max-width:100%!important;max-height:100%!important;background-repeat:no-repeat!important}
 #bb.touchbar .jxDockSlot .jxDockMoreDots{font-size:16px!important}
 #battle .chatOnlineServer{
  position:absolute!important;left:6px!important;right:6px!important;
  bottom:5px!important;top:auto!important;width:max-content!important;
  max-width:calc(100% - 12px)!important;box-sizing:border-box!important;
  padding:3px 8px!important;border-radius:5px!important;
  border:1px solid #56745c!important;background:rgba(5,19,13,.86)!important;
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  gap:4px!important;overflow:hidden!important;white-space:nowrap!important;
  font:700 11px/16px Arial,sans-serif!important;z-index:16!important;
 }
 #battle .chatOnlineServer .chatOnlineCounter{position:static!important;font:inherit!important;white-space:nowrap!important}
 #battle .chatOnlineServer .jxServerPrefix{white-space:nowrap!important;font-size:11px!important}
 #battle .chatOnlineServer #jxServerLabel{font-size:11px!important;white-space:nowrap!important}
 #battle .chatOnlineServer .jxServerVerified{width:14px!important;height:14px!important;flex:none!important}
}
@media screen and (max-width:370px) and (orientation:portrait) and (pointer:coarse){
 #battle .chatOnlineServer{font-size:10px!important;padding:2px 5px!important;gap:3px!important}
 #battle .chatOnlineServer .jxServerPrefix,#battle .chatOnlineServer #jxServerLabel{font-size:10px!important}
}

/* V12: dedicated status strip below dock; preserve desktop layout. */
@media screen and (max-width:700px) and (orientation:portrait) and (pointer:coarse){
 body:not(.sv) #app #bbunder{height:27px!important;min-height:27px!important;position:relative!important;background:#08120e!important;box-sizing:border-box!important;border-top:1px solid #305846!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important}
 #bbunder .chatOnlineServer{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:4px!important;width:max-content!important;max-width:calc(100% - 8px)!important;padding:2px 5px!important;margin:0 auto!important;background:transparent!important;border:0!important;box-shadow:none!important;white-space:nowrap!important;overflow:hidden!important;font:700 11px/17px Arial,sans-serif!important;z-index:1!important}
 #bbunder .chatOnlineServer .chatOnlineCounter,#bbunder .chatOnlineServer .jxServerPrefix,#bbunder .chatOnlineServer #jxServerLabel{font-size:11px!important;white-space:nowrap!important}
 #bbunder .chatOnlineServer .jxServerVerified{width:14px!important;height:14px!important;flex:none!important}
 #bb.touchbar .jxDockSlot{overflow:hidden!important}
 #bb.touchbar .jxDockSlot i:not(.jxDockMoreDots){width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;max-width:none!important;max-height:none!important;flex:none!important;background-repeat:no-repeat!important;image-rendering:pixelated!important;transform:none!important}
 #bb.touchbar #jxTreasure{z-index:6!important}
}

/* V13 - Online beside first-row skills; full-size tab icons and clean sprite crop. */
@media screen and (max-width:700px) and (orientation:portrait) and (pointer:coarse){
 body:not(.sv) #app #bbunder{height:0!important;min-height:0!important;border:0!important;overflow:hidden!important}
 #bb.touchbar .chatOnlineServer{
  position:absolute!important;right:auto!important;bottom:auto!important;
  margin:0!important;padding:2px 3px!important;height:37px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex-wrap:wrap!important;align-content:center!important;column-gap:3px!important;row-gap:0!important;
  border:0!important;border-radius:3px!important;background:rgba(6,24,17,.8)!important;
  color:#c8eacb!important;box-sizing:border-box!important;overflow:hidden!important;
  font:700 10px/14px Arial,sans-serif!important;white-space:normal!important;z-index:8!important;
 }
 #bb.touchbar .chatOnlineServer .chatOnlineCounter,
 #bb.touchbar .chatOnlineServer .jxServerPrefix,
 #bb.touchbar .chatOnlineServer #jxServerLabel{font-size:10px!important;line-height:14px!important;white-space:nowrap!important}
 #bb.touchbar .chatOnlineServer .jxServerVerified{width:12px!important;height:12px!important;flex:none!important}
 /* First three activity buttons share the same icon visual size as the remaining actions. */
 #bb.touchbar #tabs .tray{display:grid!important;place-items:center!important;overflow:hidden!important}
 #bb.touchbar #tabs .tray i{
  display:block!important;width:27px!important;height:27px!important;
  min-width:27px!important;min-height:27px!important;
  background-size:81px 27px!important;background-repeat:no-repeat!important;
  image-rendering:pixelated!important;transform:none!important;
 }
 #bb.touchbar #tabs .tray:hover i{background-position:-27px 0!important}
 #bb.touchbar #tabs .tray.on i{background-position:-54px 0!important}
 #bb.touchbar .jxDockSlot i:not(.jxDockMoreDots){
  width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;
  background-repeat:no-repeat!important;background-origin:padding-box!important;
  image-rendering:pixelated!important;
 }
}

/* V14: first three activity cells use the same touch target as the rest.
   Preserve the original row coordinates and click handlers. */
@media screen and (max-width:700px) and (orientation:portrait) and (pointer:coarse){
 body:not(.sv) #bb.touchbar #tabs .tray{
  width:var(--cell,44px)!important;
  height:var(--cell,44px)!important;
  min-width:0!important;min-height:0!important;
  display:grid!important;place-items:center!important;
  margin:0!important;padding:0!important;
  box-sizing:border-box!important;
  border:3px solid transparent!important;
  border-image:url(v2/cell.png) 3/3px stretch!important;
  background-color:#08110d!important;
 }
 body:not(.sv) #bb.touchbar #tabs .tray i{
  width:27px!important;height:27px!important;
  min-width:27px!important;min-height:27px!important;
  margin:0!important;display:block!important;
  background-size:81px 27px!important;
  background-repeat:no-repeat!important;
 }
}

/* V20: restore matching gold frame around both main skill slots on mobile only. */
@media screen and (max-width:700px) and (orientation:portrait) and (pointer:coarse){
 body:not(.sv) #bb.touchbar #pad .pbtn.sk:not(.empty){
  box-shadow:inset 0 0 0 2px #d8a84b!important;
 }
}

/* V23: mobile only. Align three native tabs with the dock action cells.
   Use a visual offset, never alter their absolute layout or hitbox dimensions. */
@media screen and (max-width:700px) and (orientation:portrait) and (pointer:coarse){
 body:not(.sv) #bb.touchbar #tabs .tray{
  transform:translateY(2px)!important;
 }
}